/* ############## Styles.css file for Claridenschool.org ############## */
/* ############## Author: Alan Garrison                  ############## */
/* ############## Last Modified: 07/07/2012 	         ############## */


/* -------------GENERAL PAGE STYLE COMMANDS-------------*/
* {
  margin: 0px;
  padding: 0px;
  border: none;
}

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  z-index: -1;
}

#container {
  margin-left: auto; 
  margin-right: auto; 
  width: 1024px; 
  margin-top: 0px; 
  padding: 0px; 
  z-index: 2;
}

#top {
  text-align: center;
  width: 1024px;
  height: 160px;
}

#top a {
  outline: none;
}

.login a {
	/* Adjusts formatting for login hyperlink on main nav menu */
 	color: #C02429;
	text-decoration: none;
	font-weight: bold;

}

#main {
  text-align: center;
  width: 1016px;
  background-color: white;
  border-left: 1px solid #6E696A;
  border-top: 1px solid #6E696A;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#6E696A, Direction=145, Strength=5); 
  -moz-box-shadow: 2px 2px 2px #6E696A; /* for Firefox 3.5+ */ 
  -webkit-box-shadow: 2px 2px 2px #6E696A; /* for Safari and Chrome */ 
}

#main a {
  outline: none;
}

#mainCenter {
  text-align: center;
}

#foot {
  text-align: center;
  width: 100%;
  height: 50px;
  background-color: #ffcc77;
  border-top: 1px solid black;
}

/* -------------FORM PAGE STYLE COMMANDS-------------*/

.form {
  display: inline; 
}

.questionFormInput
{
  border: 0px solid white;
  background: #F6F1ED;
  color: black;
  text-align: left;
  font-family: "times new roman, arial, helvetica, sans-serif"; 
  font-size: 12pt;
  border: 1px solid black;
}

.questionFormButton
{
  border: 2px solid navy;
  background: #ffcc77;
  color: black;
  font-family: "times new roman, arial, helvetica, sans-serif"; 
  font-size: 12pt;
  width: 120px;
}



/* -------EMERGENCY ALERT STYLE COMMANDS FOR MAIN PAGE ---------*/
.alert {
	/* Formats emergency alert message at top of page */
	width: 100%;
	background-color: #C02427;
	z-index: 99;
	border-bottom: 2px solid black;
}

.alert h1, h2 {
	/* Adjusts font for message for <h1> and <h2> tags */
	font-family: arial, helvetica, sans-serif; 
}

.alert h1 {
	/* Adjusts font formatting for <h1> tag in alert div class */
	font-size: 18pt;
	color: #fffff2;
	text-align: center;
}

.alert h2 {
	/* Adjusts font formatting for <h2> tag in alert div class */
	font-size: 12pt;
	color: #fffff2;
	text-align: center;
}

.alert a {
	/* Adjusts font formatting for links in alert div class */
	color: #fffff2;
}


/* -------------MAIN NAVIGATION MENU STYLE COMMANDS-------------*/
#menu {
	/* Formats the overall menu bar */
	list-style: none;
	z-index: 6;

	/** Controls width & background of overall menu bar **/
	width: 885px;
	background: #fffff1;

}

#menu li {
	/* Formats the top level menu buttons */
	float: left;
	position: relative;
	z-index: 6;	

	/** Controls width of top navigation buttons; use 218 for four buttons **/
	width: 174px;

	/** Controls margins for top navigation buttons **/
	margin-right: 3px;
	margin-left: 0px;
}

#menu li a {
	/* Turns off link underlining for menu items */
	text-decoration: none;
}

#menu li .drop {
	/* Formats the top level menu buttons*/
	display: block;

	/** Controls height & padding of main menu buttons **/
	height: 31px;
	padding-top: 12px;

	/** Formats fonts for main menu buttons **/
	font-family: "Arial, Helvetica, sans-serif";
	font-size: 18px; 
	font-weight: bold;
	text-align: center;
	color: #fff;

	/** Controls background of main menu buttons **/
	background: #DEA353;
}

#menu li:hover a {
	/* Formats the top level menu buttons for Hover */
	font-size: 18px;
	
	/** Controls HOVER font formatting for main menu button links **/	
	color: #BC141A;
}


#menu li:hover {
	/* Controls formatting the top level menu buttons for Hover */
	z-index: 6;
	text-decoration: none;

	/** Controls height of HOVER main menu buttons here (adjusts for 2px bottom border) **/
	height: 41px;

	/** Controls border color (borders eliminate gap at bottom of buttons) **/
	border-bottom: 2px solid #FAE9CA;
}


#menu li:hover .drop {
	/** Controls HOVER background color for main menu buttons **/
	background: #FAE9CA;
}


.dropdown_3columns {
	/* Formats the second level dropdown 'box' */
	margin-top: -2px;
	float: left;
	text-align: left;
	padding: 4px 4px 4px 4px;
	position: absolute;
	left: -999em; /* Hides the drop down when not in use*/
	
	/** Controls width of second level dropdown menu **/
	width: 650px;

	/** Apply 95% opacity **/
 	filter: alpha(opacity=95); /* For IE8 and earlier */
  	opacity: 0.95;

	/** Controls background and font colors for dropdown (set border to same color as background) **/
	background: #FAE9CA;
	color: #6E3700;
	border:1px solid #FAE9C1;
	border-top: none;
}


#menu li:hover .dropdown_3columns {
	/* Properly positions the second level dropdown menu */
	left: 0px;
	top: auto;
}

.col_1,
.col_2,
.col_3 {
	/* Controls dropdown formatting for all three menu columns */
	margin-left: 4px;
	margin-right: 4px;
	display:inline;
	float: left;
	position: relative;
}

.col_1 {
	/* Controls first column of content on second level dropdown */
	width: 178px; 
	color: #6E3700;  
}

.col_2 {
	/* Controls second column of content on second level dropdown */
	width: 120px;
}

.col_3 {
	/* Controls third column of content on second level dropdown */
	width: 325px;
}

#menu li:hover .align_center {
	/* Controls placement of dropdown for middle button on main menu */
	left: auto;
	right: -308px; /* was -221 for four buttons */
	top: auto;
}

#menu li:hover .align_right {
	/* Controls placement of dropdown for far right button on main menu */
	left: auto;
	right: -132px; /* was 0 for four buttons */
	top: auto;
	float: right;
}

#menu li:hover div a {
	/* Controls font formatting for menu items on dropdown */
	font-size: 12px;
	color: #6E3700;
}

#menu li:hover div a:hover {
	/* Controls HOVER font formatting for menu items on dropdown */
	color: #6E3700;
}

#menu li ul {
	/* Hides bullets for second level dropdown menu and positions properly */
	list-style: none;
	padding: 0;
	margin: 0 0 12px 0;
}

#menu li .sub li {
	/* Controls menu items on second level dropdown menu */
	margin: 0px 0px 2px 0px;
	padding: 8px 6px 1px 4px;
	border-bottom: 3px solid white;

	/** Controls size of navigation buttons on second level menu **/
	width: 170px;
	height: 23px;

	/** Controls font formatting for second level dropdown menu **/
	color: #6E3700;
	font-family: "times new roman, arial, helvetica, sans-serif"; 
	font-weight: bold;
	text-align: left;
}


#menu li .sub li:hover {
	/* Controls HOVER background color for second level dropdown menu */
	background: #DEA353;

}

#menu li .nobox-center li {
	/* Controls formatting for center column of second level dropdown menu */
	background: #FAE9CA;
	color: #6E3700;
	width: 120px;
	text-align: center;
}

#menu li .nobox-right li {
	/* Controls formatting for right column of second level dropdown menu */
	color: #6E3700;
	width: 330px;
	text-align: left;
}

/* -------------SUB NAVIGATION MENU STYLE COMMANDS-------------*/

.submenuAlign {
	/* Controls formatting for sub navigation menu on top of select pages */
  	padding-left: 25px;
  	text-align: left;
  	font-family: arial, helvetica, sans-serif; 
  	font-size: 12pt;
  	font-weight: bold;
}

.submenuActive {
	/* Controls formatting for ACTIVE page on sub navigation menu */
	color: #DEA351;
	text-decoration: none;
}

.submenuInactive a {
	/* Controls formatting for INACTIVE pages on sub navigation menu */
	color: #5D839F;
	text-decoration: none;
}

/* ------------IMAGE CAROUSEL STYLE COMMANDS------------------*/
.theme-default .nivoSlider {
	position:relative;
	background:#fff url(carousel/loading.gif) no-repeat 50% 50%;
	margin-bottom:50px;
	margin: auto;
	margin-top:15px;    
	width:928px; /* Make sure your images are the same size */
	height:359px; /* Make sure your images are the same size */
}

.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

.theme-default .nivo-controlNav {
	position:absolute;
	left:50%;
	bottom:10px;
	z-index:100;
    	margin-left:400px; /* Tweak this to center bullets */
}

.theme-default .nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(carousel/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}


/* ------------TWITTER FEED STYLE COMMANDS--------------------*/
.twitterFeed
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	width: 300px;
	margin-bottom: 2em;
}
.twitterFeed a
{
	color: #444;
	text-decoration: none;
}
.twitterFeed a:hover
{
	color: #000;
	text-decoration: underline;
}
.twitterFeed a img { border: none; }
.twitterFeed img
{
	float: left;
	margin: 0 1em 1em 0;
}

.twitterHeader { padding: 0.2em 0; }
.twitterHeader span
{
	font-weight: bold;
	font-size: 1.5em;
}

.twitterBody
{
	clear: left;
	border: 0px solid #666;
}
.twitterBody ul
{
	list-style-type: none;
}

.twitterRow p a { text-decoration: underline; }
.twitterRow p a:hover { text-decoration: none; }
.twitterRow img, .twitterRow h4, .twitterRow div
{
	margin: 0;
	padding: 0.2em;
}
.twitterRow p { margin-left: 70px; padding-bottom: 10px; }

.tweetName a, .tweetTime
{
	font-weight: bold;
	color: #444;
}
.tweetName
{
	float: left;
	font-size: 1.2em;
}
.tweetTime { text-align: left; }

#ticker1 .odd { background-color: white; }
#ticker1 .even { background-color: white; }



/* -------------PAGE CONTENT STYLE COMMANDS--------------------*/
/* H1: Page title; H2: Page sub-header; H3: Page content; H4: Quote text; H5: Quote author */

.page {
	/* Controls Z-Index (layering of content) on page to ensure nav menus work properly */
	z-index: 2;
}

.page h1, h2 {
	/* Controls general formatting for <h1> and <h2> tags enclosed in the page div class */
 	color: #DEA351;
	text-align: left;
	font-family: "times new roman, arial, helvetica, sans-serif"; 
	font-weight: bold;
}

.page h1 {
	/* Adjusts font size for <h1> tags */
	font-size: 19pt;
}

.page h2 {
	/* Adjusts font size for <h2> tags */
	font-size: 14pt;
}

.page h3, h4 {
	/* Controls general formatting for <h3> and <h4> tags enclosed in the page div class */
	text-align: left;
	font-family: arial, helvetica, sans-serif; 
}

.page h3 {
	/* Adjusts color and font size for <h3> tags */
 	color: gray;
	font-weight: normal;
	font-size: 11pt;
}

.page h4 {
	/* Adjusts color and font size for <h4> tags */
 	color: #DEA351;
	font-size: 12pt;
	font-weight: bold;
}

.page h5 {
	/* Adjusts formatting for <h5> tags */
 	color: #C02429;
	text-align: right;
	font-family: arial, helvetica, sans-serif; 
	font-size: 12pt;
	font-style: italic;
}

.page ul {
	/* Adjusts spacing for <ul> tags enclosed in the page div class */
 	padding-left: 20px;
}

/* -------------MAP PAGE CONTENT STYLE COMMANDS--------------------*/

.map h1, h3 {
	/* Controls general formatting for <h1> and <h3> tags enclosed in the map class */
	text-align: center;
	font-family: "times new roman, arial, helvetica, sans-serif"; 
}

.map h1 {
	/* Adjusts font formatting for <h1> tags */
 	color: #DEA351;
	font-size: 19pt;
	font-weight: bold;
}

.map h3 {
	/* Adjusts font formatting for <h3> tags */
 	color: gray;
	text-align: center;
	font-family: "arial, helvetica, sans-serif"; 
	font-size: 11pt;
	font-weight: normal;
	font-style: normal;
}

.map a {
	/* Adjusts font formatting for links in the map class */
	text-decoration: underline;
 	color: black;
	font-size: 11pt;
}

/* -------------FAQ PAGE CONTENT STYLE COMMANDS--------------------*/

.faqh1 {
	/* Adjusts font formatting for faqh1 tags */
 	color: #DEA351;
	font-size: 19pt;
	text-align: left;
	font-family: "times new roman, arial, helvetica, sans-serif"; 
	font-weight: bold;
}

.faqh2 {
	/* Adjusts font formatting for faqh2 tags */
 	color: #6E3700;
	font-size: 14pt;
	text-align: left;
	font-family: "times new roman, arial, helvetica, sans-serif"; 
	font-weight: bold;
}

.faqh3, faqh4 {
	text-align: left;
	font-family: arial, helvetica, sans-serif; 

}

.faqh3 {
	/* Adjusts font formatting for faqh3 tags */
 	color: #C02429;
	font-size: 11pt;
	font-weight: bold;
}


.faqh4 {
	/* Adjusts font formatting for faqh4 tags */
 	color: gray;
	font-size: 11pt;
	font-weight: normal;
	font-style: normal;
	padding-left: 4px;
}

/* ----------PEOPLE DIRECTOR PAGE CONTENT STYLE COMMANDS------------------*/
 
.people h1, h2, h3 {
	/* Controls general formatting for <h1>, <h2>, and <h3> tags enclosed in the people div class */
	text-align: left;
	font-family: arial, helvetica, sans-serif; 
	font-weight: bold;
}

.people h1 {
	/* Adjusts font formatting for <h1> tags */
 	color: #6e3700;
	font-size: 14pt;
}

.people h2 {
	/* Adjusts font formatting for <h2> tags */
 	color: #5D839F;
	font-size: 12pt;
	font-style: italic;
}

.people h3 {
	/* Adjusts font formatting for <h3> tags */
 	color: #5D839F;
	font-size: 12pt;
	font-style: normal;
}

.people h4 {
	/* Adjusts font formatting for <h4> tags */
 	color: #5D839F;
	font-size: 11pt;
	font-weight: normal;
	font-style: normal;
}

.people h5 {
	/* Adjusts formatting for <h5> tags */
 	padding-top: 5px;
}

.link-gold a, .link-red a, .link-blue a {
	/* Controls formatting for link-gold, red, blue hyperlinks */
	text-decoration: none;
	text-align: center;
	font-family: arial, helvetica, sans-serif; 
	font-size: 11pt;
	font-weight: bold;
	font-style: normal;

}

.link-gold a {
	/* Adjusts color for link-gold hyperlinks */
 	color: #DEA351;
}

.link-red a {
	/* Adjusts color for link-red hyperlinks */
 	color: #C02429;
}

.link-blue a {
	/* Adjusts color for link-blue hyperlinks */
 	color: #5D839F;
}

.news-red, .news-grey, .news-blue a {
	/* Controls formatting for link-gold, red, blue hyperlinks */
	text-decoration: none;
	text-align: left;
	font-family: arial, helvetica, sans-serif; 
	font-style: normal;

}

.news-red {
	/* Adjusts color for link-gold hyperlinks */
 	color: #C02429;
	font-weight: bold;
	font-size: 12pt;
}

.news-grey {
	/* Adjusts color for link-red hyperlinks */
 	color: gray;
	font-size: 10pt;
}

.news-blue a {
	/* Adjusts color for link-blue hyperlinks */
 	color: #5D839F;
	font-weight: bold;
	font-size: 11pt;
}


.calendar-blue a {
	/* Adjusts font formatting for calendar-blue hyperlinks */
	text-decoration: none;
	font-family: arial, helvetica, sans-serif; 
	font-size: 11pt;
	font-weight: bold;
	font-style: normal;
	text-align: left;
	float: left;
 	color: #5D839F;
}