/* 
  Style document for Explorers' Home School Association. Search for "Primary Styles" to find the non-reset CSS.



  style.css contains a reset, font normalization and some base styles.
  
  credit is left where credit is due.
  additionally, much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/

/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, figure, footer, header, 
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

p { margin-bottom: 1em;}

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */


/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
          Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages

There are three custom edits:
 * remove arial, helvetica from explicit font stack
 * make the line-height relative and unit-less
 * remove the pre, code styles
*/
body { font:14px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
body { line-height: 1.4;} /* Later edit by MES. */

table { font-size:inherit; font:100%; }

select, input, textarea { font:99% sans-serif; }


/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
 


/* 
 * minimal base styles 
 */

body, select, input, textarea { color:#000; }
/* 
*  text color
*  Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }


a, a:active, a:visited { color:#607890; }
a:hover { color:#607890; }

ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }
dl {margin-bottom: 1em;}
dt {font-weight: bold;}

small { font-size:100%; }
strong, th { font-weight: bold; }

td, td img { vertical-align:top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }


/* These selection declarations have to be separate. */
::-moz-selection{ background: red; color:#fff; text-shadow: none; }
::selection { background:red; color:#fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #FF5E99; } 

/* always force a scrollbar in non-IE */
html { overflow-y: scroll; }
/* make buttons play nice in IE */
button {  width: auto; overflow:auto; }
/* bicubic resizing for non-native sized IMG:  */
.ie7 img { -ms-interpolation-mode: bicubic; }



/* 
 * Non-semantic helper classes 
 */

/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:auto; background-repeat: no-repeat; }

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }



 /* Primary Styles
    Author: Matt Stauffer
 		    mattstaufferdesign.com
 */

/* Bring back HTML styles */
h1,h2,h3,h4,h5,h6{
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
fieldset{
	padding: 10px;
	border: 1px solid #ddd;
	margin-bottom: 10px;
}
legend{
	text-transform: uppercase;
	font-weight: bold;
	color: #888;
}

html{
	background: #EBDDAC;
	/*background: #669966; */
	text-align: center;
}
body{
	position: absolute;
	width: 980px;
	left: 48%;
	margin-left: -480px;
	text-align: left;
	background: #fff;
	overflow: auto;
	
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
}
	body.unbound{
		width: auto;
		left: 0;
		margin-left: 0;
	}

#container{
	padding: 10px;
	overflow: auto;
}
	#container > header{
		background: url('../images/header_bg.jpg') no-repeat;
		height: 185px;
		overflow: auto;
		margin-bottom: 1px;
	}
	#container > header h1{
		margin: 38px 0 0 31px;
		width: 400px;
		height: 112px;
		background: url('../images/explorers_logo.png') no-repeat;
		behavior: url('../js/iepngfix.htc');
	}

#sidenav{
	width: 220px;
	margin-right: 10px;
	padding: 20px 0;
	color: #666;
	float: left;
	
	background: #fff; /* old browsers */
	background: -moz-linear-gradient(top, #fff 0%, #fff 100%); /* firefox */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#fff)); /* webkit */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* ie */
}
	#sidenav.shrunk{
		display: none;
	}
	#sidenav a{
		color:#607890;
	}
	#sidenav a:hover{
		color: #ff7777;
	}
	#sidenav ul{
		margin: 0 20px;
		padding: 0;
	}
	#sidenav li{
		list-style-type: disc;
		margin-left: 20px;
	}
	#sidenav > ul > li a{
		display: block;
		font-size: 110%;
		font-weight: bold;
		text-decoration: none;
		padding: 3px;
		margin-bottom: 3px;
		font-size: 90%;
	}
	#sidenav > ul > li.external{
		list-style-type: none;
		margin-left: 0;		
	}
	#sidenav > ul > li.external a{
		font-size: 110%;
		font-weight: bold;
		padding: 8px;
		margin-bottom: 8px;
		background: #fff;
		border: 1px solid #ff777;
	
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	#sidenav > ul > li a:hover, #sidenav > ul > li a.selected{
		background: #ccc;	
		color:#607890;
	}
	#sidenav .head{
		padding: 10px 5px 2px 5px;
		text-transform: uppercase; font-weight: bold;
		color: rgba(0,0,0,.6);
		list-style-type: none;
		margin-left: 0;
	}
	#account_info{
		font-size: 85%;
		color: rgba(255,255,255,.4);
		font-style: italic;
		text-align: center;
		padding-bottom: 5px;
	}
	
#main_content{
	float: left;
	width: 700px;
	overflow: auto;
	margin: 10px 0;
}
	#main_content h1{font-size: 180%;}
	#main_content h2{font-size: 160%;}
	#main_content h3{font-size: 130%;}
	
	#main_sidebar{
		width: 220px;
		float: right;
		margin: 40px 0 20px 20px;
	}
	#main_sidebar section{
		background: #eee;
		
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
		#main_sidebar section header{
			-webkit-border-radius: 5px 5px 0 0;
			-moz-border-radius: 5px 5px 0 0;
			border-radius: 5px 5px 0 0;
			
			background: #333;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 90%;
			color:#607890;
			padding: 5px 10px;
		}
		#main_sidebar section div{
			padding: 5px 10px 10px 10px;
		}
		.mini_sidebar{
			width: 200px;
			float: right;
			margin: 10px 0 10px 10px;
			text-align: right;
		}
	.main_constrained{
		width: 460px;
	}
	#main_content.full{
		clear: both;
		width: 100%;
	}
	.full_down_button{

	}
	.full_down_button{
		text-align: center;
		float: right;
		display: block;
		width: 300px;
		padding: 50px;
		margin: 100px 150px 0 0;
		border: 1px solid #ccc;
	}
	.full_down_button:hover{
		background: #eee;
	}
	.callout{
		display: block;
		width: 250px;
		float: right;
		font-size: 90%;
		text-align: right;
	}

#container > footer{
	clear: both;
	margin-top: 10px;
	font-size: 80%;
	padding: 5px;
	background: #eee;
	text-align: center;
}

/* Classes */
section.class{
	border: 1px solid #aaa;
	padding: 10px;
	margin-bottom: 20px;
}
.class_prof{
	padding: 3px;
	background: #ccffcc;
}
table.class_description{
	width: 100%;
}
	.class_description th, .class_description td{
		padding: 5px;
		border-bottom: 1px solid #ddd;
	}
	.class_description th{
		background: #eee;
		text-align: right;
	}
	.class_description th.top{
		text-align: left;
		background: rgb(255, 202, 85);
	}
	
	
	
/* Edit Page */
.edit_page{
}
	.edit_page label{display: block; font-weight: bold;}
	.edit_page input, .edit_page textarea, .edit_page .checkboxes, .edit_page select{margin-bottom: 10px;}
		.edit_page input[type='checkbox']{margin-bottom: 3px;}
	.edit_page textarea{width: 400px; height: 80px;}
	
	
	
/* 
 * Specific column widths for .data 
 */

/* Classes */
.class_description div{
	width: 300px;
	}
.class_homework div, .class_prereqs div, .class_materials div, .class_curriculum div, .class_additional div, .class_materials div{
	width: 200px;
	}
.class_title div, .class_feenotes div, .class_agenotes div, .class_age_groups div {
	width: 100px;
	}
/* Staff */
.staff_username div, .staff_password div, .staff_lastname div, .staff_firstname div, .staff_role div{
	width: 100px;
}
/* Families */
.family_last div, .family_phone div, .family_address div, .family_city div, .family_email div, .family_username div, .family_balance div{
	width: 100px;
}
.family_state div, .family_zip div{
	width: 50px;
}
/* Students */
.student_lastname div, .student_firstname div, .student_family div, .student_hour1 div, .student_hour2 div, .student_hour3 div, .student_hour4 div, .student_hour5 div, .student_hour6 div, .student_agegroup div{
	width: 100px;
}

/* Special columns */
.staff_bio div{
	width: 225px;
}
.staff_bio_container{
	max-height: 125px;
	overflow: auto;
}

/* Data tables */
table.data thead tr th { text-align: left; font-size: 90%; }
table.data tfoot tr th { text-align: left; font-size: 90%; }
table.data tbody tr td { text-align: left; font-size: 90%; }
table.data tbody tr.group td { background-color: maroon; color: white; font-weight: bolder; text-align: left; padding-left: 1em; }

/* Miscellaneous styles */

.error{
	color: red;
	padding: 5px;
}

.nopad{
	padding: 0 !important;
}






/* 
 * IE hacks
 */

#ie6warning{display: none;}

.ie7 #container{
	width: 940px;
}

.ie6 #ie6warning{
	display: block;
	font-size: 120%;
	border: 2px solid red;
	padding: 5px;
	text-align: center;
	margin-bottom: 10px;
	}
.ie6 #container{
	width: 940px;
	overflow: scroll;
}
.ie6 .main_constrained{
	margin-top: -200px;
}

/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none; }

  a, a:visited { color: #444 !important; text-decoration: underline; }

/*  a:after { content: " (" attr(href) ")"; }  */

  abbr:after { content: " (" attr(title) ")"; }
  
  .ir a:after { content: ""; }  /* Don't show links for images */
  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  
  img { page-break-inside: avoid; }

  @page { margin: 0.5cm; }

  p, h2, h3 { orphans: 3; widows: 3; }

  h2, h3{ page-break-after: avoid; }

  /* Added by MES*/
  #sidenav, #showhidenav{display: none;}
  html{text-align: left;}
  body{position:absolute; width: auto; left: 0; margin: 0; padding: 0; -webkit-box-shadow: 0px 0px 0px; -moz-box-shadow: 0px 0px 0px; box-shadow: 0px 0px 0px;}
  
  section, header, nav, article, table, tr, td, th, a{width: auto !important;}
  table, th, td{border-width: 1px; border-color: grey; border-collapse: collapse; border-style: solid;}
  table, tr, th, td{font-size: 10pt !important;}

  .noprint{display: none !important;}

  #container > header, #container > header h1.ir{padding: 0; margin: 0; height: auto; width: auto; font-size: 18pt; display:block; text-indent: 0;}

  #container > header h1.ir{font-size: 10pt; text-transform: uppercase; color: #777 !important;}
  #main h1, #main h2, #main h3{color: #555 !important; font-weight: bold;}
  #main h1{font-size: 14pt; border-bottom: 1px solid #888;}
  #main h2{font-size: 13pt;}
  #main h3{font-size: 12pt;}

}



/*
 * Media queries for responsive design
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  
  
  /* Prevent iOS, WinMobile from adjusting font size */
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
}