/* **********************************
Main styles for screen (not mobile) display.

Width (set in pagewrapper) is 800px

Content areas (between header and footer) are: main-content, sidebar-a, sidebar-b-home.
Initial arrangement from L to R is sidebar-a, main, sidebar-b. sidebar-b is nested inside of main.
Initial bgcolors are sidebar-a = red, main and sidebar-b = white.
When changing the size of each, remember that padding and border are part of the WC3 width spec, which says that only content is defined by width. Subtract total-horizontal-padding from desired width, set new width at that amount.

70A8FD is a light blue to match the head and the Google calendar
418AFB is a darker blue to match the head
E5ECF9 is the grayish blue in the calendar 
C3D9FF is the frame of the calendar - lighter than other blues
FFE391 is a yellow-gold to match the star


/* ===============
	 main sections
 =================-*/

html, body {height:100%}

body {
	background-color: #fefefe;
	background-image:    url(../images/common.web.graphics/bkgrd.jpg);
	background-attachment: fixed;
	background-repeat: repeat-x;
	margin: 0;
	font: 12px/14px Verdana, Arial, Helvetica, sans-serif;
	color:#333;
}

/* we wrap all of the content including header in this */
#pagewrapper {
	width: 800px; 
	height:100%;
	margin: 0 auto;
	padding: 0;	
	}

#header {height:120px;}
#header h1 {display:none}
div#top-blue-bar { /* this is the blue bar under the school title*/
	position:absolute;
	top:120px;
	margin:0;
	padding:0 10px 0;
	width:780px;
	height:21px;
	font-size:0.9em;
	background: #0066cc url(../images/common.web.graphics/bluebar.png) repeat-x;
	color:#fff;
}


#content-wrapper {
	display:block; 
	position:absolute;
	top:141px;
	background-color:#F00;
	}
#main-content {
	display: inline;
	width:625px;
	float:left;
	min-height:100%;
	padding: 0; padding-left:15px;
	background-color:#FFF;
	}

/* If you adjust width in pagewrapper or main-content, adjust here also, and vice-versa */
#sidebar-a {	
	display: block;
	float:left;
	width:150px;
	min-height:100%;
	padding: 0 5px;
	}

/* This is for the slideshow on the home page.
	It is set to float right, but it and sidebar-a could be switched.
	This could also be used for pix on internal pages 
*/	
#sidebar-b-home {
	display: inline;
	float:right;
	margin: 10px 0 10px 30px;
	padding-left:10px;
	width:300px;
	}
#footer {
	display: block;
	clear:left;
	width:770px;
	line-height:1.5em;
	padding:4px 15px;
	text-align:center;
	}	

/* originally 13px to main body's 12px font size */
#footer, #sidebar-a {color:#FFF;}
	
/* =============== end main section styles =============== */	
/* ===============
 begin content styles 
 =============== */

h2 {color:#F00; font-size:1.3em;}
h3 {color:#06c; font-size:1.2em; margin-bottom: -0.5em;}
h4 {color:#960; font-size: 1.1em;margin-bottom: -0.8em;}

p, li, hr, h2, h3, h4, dl {
	line-height:1.5em; 
	width:90%;
	text-align:left;
	}
li {margin-bottom: 0.5em;}
hr {margin: 0 auto 0 0; border: thin solid #06C;}

p.more {
	text-align:right; 
	font-size:0.8em;
	margin: -1em 0;
	}

p.top {
	text-align:right; 
	font-size:0.8em;
	margin:1em 0;
	padding-top:4px;
	border-top: 1px solid #ccc;
	}

table {
	border:0;
	line-height:1.5em;
	border-spacing: 2px;
	table-layout:auto;
	}
th {
	color: #FFF;
	background-color:#f00;
	font-size:1.0em;
	font-weight:bold;
	text-align:left;
}
td {
	background-color:#E5ECF9;
	padding: 5px;
	}
	
hr.staffList {	width:100%;	}

.staffForm { 
	font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
	background-color:#E5ECF9;
	}

.code {background-color:#FFFFCC;}

.search {
	padding: 2px;
	color:#FFF;
	background:url(../images/common.web.graphics/bluebar.png);
	border:1px solid #CCC;
	}
.imgRight {float:right;margin-left:10px;}
.imgLeft {float:left;margin-right:10px;}
.imageNoLinkBorder {border:none 0;} /*doesn't work */

/* hides the horizontal rules put on the template page */
.template_hr {display:none}

.smallPrint { 
	font-size: 80%;
	padding:2px;
	}
dt {
	font-weight:bold;
	margin-top:0.7em;
	}
dd {margin-left: 1em}
/* ===============
 link styles -- link, visited, hover, active
 =============== */

/* -------------- breadcrumb styles -------------- */
 
#top-blue-bar a, 
#top-blue-bar a:visited {
	display:inline-block;
	text-decoration:none;
	padding-top: 3px;
	margin-left: 5px;
	border:none;
	color:#fff;
}

#top-blue-bar a:hover {
	border-bottom:1px solid #fff;
	background-color:transparent;
}


/* ---------------------- vertical menu styles ----------- */


/* The wrapper determines the width of the menu elements */
#menuwrapper { 
   width: 90%; 
   margin: 20px auto 1em;
   padding-bottom: 1em;
   border-bottom:2px solid;
}

#menuwrapper p {display:none;} /* hides the 'site navigation' line if no css */

/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   margin: 0; 
   padding: 0 0 1px 0; /* makes secondaries same height as mains on hover */
   width: 100%; /*width of all items. % is % of sidebar width*/
}
#primary-nav ul { 
   position: absolute; 
   top: 0; 
   left: 100%; 
   display: none; 
}
#primary-nav li { 
   position: relative; 
   list-style: none;
   line-height:normal; margin: 0; width:100%; /* cancels li settings in content */
}
/* Styling the basic appearance of the menu elements */
#primary-nav a { 
   display: block; 
   color: #fff;
   background-color:#ff4040;
   margin: 0; 
   padding: 2px;
   text-decoration: none; 
   border-top: 1px solid #fcc; 
   border-left: 1px solid #d00; 
   border-right: 1px solid #d00; 
  border-bottom: 1px solid #900; 
 min-height:1em; /* Fixes IE7 whitespace bug*/ 
}

/* sets background for all items. BG for secondary items is changed below. */
	#primary-nav li, #primary-nav li.menuparent { 
   min-height:1em; /* Fixes IE7 bug*/
}


/* The following evidently needs to be in this order */


/* Styling the basic appearance of the menuparents - here styled the same on hover (fixes IE bug) 
	Use this if you want an arrow indicating a cascade.

#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
   padding-left:0;
   background: url(../images/common.web.graphics/star-arrow-white.png) center left no-repeat;
}
*/

/* Styling the appearance of menu items on hover */
#primary-nav a:hover {
	background-color:#C3D9FF;
	color:#333;
	border-bottom:1px solid #333;
	font-weight:bold;
	}

/* Styling the appearance of menu items on active */
#primary-nav a:active  { 
	background-color: #fff;
	color:#418AFB;
}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}


#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul {
	display: block;
	background-color: #f00;
	color: #000;
}

/* ----------- end vertical menu styles --------*/

/* all other links */
a,
a:link, 
a:visited {
	color:#333;
   border-bottom: 1px dotted;
   text-decoration: none;
}
a:hover {
   border-bottom: 1px solid;
   background-color: #E5ECF9;
}
a:active {
	color:#c00;
}

#header a {border:0; text-decoration:none;}
#footer a {color: #FFF;}
#footer a:hover {color:#333;background-color:#f00;}	




/* =============== end of link and menu styles ===============*/