/*
STYLESHEET FOR: Success for All Students
AUTHOR: Rick Khanna, Mopdog Creative + Strategy
*/
/*
Contents:
1. Structure
2. Navigation
3. Header
4. Content
5. Footer  */

@import url("style-reset.css");

/*
Colors:
Blue: #02b3d9
Pink: #f22498
Orange: #e18500
Green: #BDD63C
*/

body {background-color:#000; font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
strong, em, b, i {font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;}
.clear {clear:both}
.blue {color:#02b3d9}

@font-face {  
  font-family: "Garage";  
  src: url(fonts/GARAGEGB.eot); /* IE */  
  src: local("GarageGothicBold"), url(fonts/GARAGEGB.ttf) format("truetype"); /* non-IE */  
}  
.gfont { font-family:"Garage", Arial Narrow, Helvetica Condensed, Arial, sans-serif;}  

.alignleft {float:left; display:block; margin:0 10px 0 0;}

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


/*====================================================================
=======================  1. STRUCTURE ================================
=====================================================================*/
	
	
#header {
	width:966px; 
	height:48px;
	background-color:#02b3d9;
	position:relative;
	}
	
#content {
	width:966px;
	background-color:#fff;
	
	}
	
#content-home {
	width:966px;
	background-color:#fff;
	}
	
#footer {
	width:966px; 
	clear:both; 
	height:100px;	
	margin:27px 0 30px;
	text-align:right;
	}
	
#wrapper-home {width:966px; margin:0 auto;}
#wrapper {/*background:#000 url(images/bg-about.jpg) left 20px no-repeat;*/ width:966px; margin:0 auto;}
	
#content-top-home {
	background:transparent url(images/content-top.png) left top no-repeat;
	height:92px;
	width:966px;
	margin-top:134px;
	position:relative;
	}
	
	#content-top {
		background:transparent url(images/content-top.png) left top no-repeat;
		height:92px;
		width:966px;
		margin-top:84px;
		position:relative;
		}
	
#content-bottom {
	background:transparent url(images/content-bottom.png) left bottom no-repeat;
	width:966px;
	position:relative;
	background-color:#fff;
	}

/*====================================================================
=======================  2. NAVIGATION  ==============================
=====================================================================*/

ul#nav { width: 966px; list-style-type: none; height: 48px; display: block; }
#nav li { float: left; display: block; height: 48px; background-position:0 0; }
	#nav li a { display: block; height: 48px; text-indent: -9999px;  }
		
	#about-the-program .about, #service-areas .about, #how-can-i-help .about, #how-do-i-qualify .about, #service-training .about, #staff-personnel .about, #frequently-asked-questions .about,
	
	#parents-students .parents, #current-marketingcampaigns .parents, #information-updates .parents, #parent-student-resources .parents, .pageid-52 .parents, .pageid-1016 .parents,
	
	#teachers-administrators .teachers, #resources .teachers, .pageid-130 .teachers, .pageid-816 .links, .pageid-649 .links, .pageid-802 .links, .pageid-965 .links,
	
	#links-resources .links, #news-calendar .news, 
	
	#parents .parents, #teachers .teachers, #partners .partners, #links .links, #news .news,	
		#nav li a:hover { background-position: 0 -48px; }
a.about { background: url(images/nav/about.png) left top no-repeat; width: 160px; }
a.parents { background: url(images/nav/parents.png) left top no-repeat; width: 177px; }
a.teachers { background: url(images/nav/teachers.png) left top no-repeat; width: 201px; }
a.partners { background: url(images/nav/partners.png) left top no-repeat; width: 113px; }
a.links { background: url(images/nav/links.png) left top no-repeat; width: 165px; }
a.news { background: url(images/nav/news.png) left top no-repeat; width: 150px; }


/*====================================================================
=======================  3. HEADER  ==================================
=====================================================================*/

#logo {
	position:absolute;
	top:-30px;
	left:20px;
	height:166px;
	width:219px;
	background:transparent url(images/logo.png) left top no-repeat;
	display:block;
	}
	
#home {
	position:absolute;
	top:57px;
	right:93px;
	height:33px;
	width:57px;
	display:block;
	text-indent:-9999px;
	}
	
#contact {
	position:absolute;
	top:57px;
	right:0;
	height:33px;
	width:85px;
	display:block;
	text-indent:-9999px;
	}



/*====================================================================
=======================  4. CONTENT ==================================
=====================================================================*/

/*-----homepage-----*/

#ie {background-color:#000; padding:8px 0; color:#fff; font-size:14px; font-weight:bold;}

#home-col-left {
	float: left;
    margin-right: 20px;
    width: 502px;
	}
#home-col-right {float:left; width:440px;}
	
#mediaspace {
	float:right;
	border:3px solid #000;
	margin:20px 20px 0 0;
	width:440px;
	background-color:#000000
	}
	
#sfasvideo {
	border:3px solid #000;
	margin:0 20px 20px 30px;
	background-color:#000;
	width:600px;
	}
	
#welcome-link {color:#000; font-size:14px;}
#welcome-link a {color:#f22498; font-size:14px;}
	#welcome-link a:hover {color:#02b3d9;}
	
#col-left {
	width:300px;
	height:447px;
	float:left;
	margin-top:44px;
	background:#fff url(images/sidenav-bg.jpg) left top no-repeat;
	}
	
#content-home h2 {
	color:#BDD63C;
	margin:40px 30px 8px;
	font-size:18px;
	}

#content p, #content-home p {
	font-size:12px;
	line-height:1.5em;
	color:#000;
	margin:0 30px 16px;
	}
	
	#content-home a {color:#0092AF; text-decoration:none;}
	#content-home a:hover {color:#BDD63C;}
	
#col-right {
	width:666px;
	float:left;
	padding:20px 0 50px 0;
	position:relative;
	min-height:500px;
	height:auto!important;
	height:500px;
	}

#col-right h1 {
	color:#03b3da;
	font-size:28px;
	line-height:1.3em;
	margin:10px 30px 16px;
	font-weight:normal;
	}

#col-right h2 {
	color:#f22498;
	font-size:18px;
	line-height:1.3em;
	margin:30px 30px 10px;
	}
	
#col-right h3 {
	color:#BDD63C;
	font-size:16px;
	line-height:1.3em;
	margin:5px 30px 10px;
	font-weight:normal;
	}
	
#col-right h4 {
	color:#000;
	font-size:14px;
	line-height:1.3em;
	margin:5px 30px 10px;
	font-weight:normal;
	}
	
	#col-right p {
		color:#000;
		font-size:12px;
		line-height:1.6em;
		}
		
	#col-right a {color:#0092AF; text-decoration:none;}
	#col-right a:hover {color:#BDD63C;}
	
	#col-right ul {list-style-type:none; margin:0 30px 18px;}
	#col-right ul li {font-size: 12px; line-height:1.6em; margin-bottom:6px; padding-left:20px; background:url(images/bullet.png) 0 0 no-repeat;}
	
	#col-right ol {margin:0 30px 18px 45px;}
	#col-right ol li {font-size: 12px; line-height:1.6em; margin-bottom:6px;}
	

#sidenav ul {
	width:245px;
	text-align:center;
	background-color:#BDD63C;
	margin-top:100px;
	padding:5px 0;
	min-height:225px;
	height:auto!important;
	height:225px;
	}
	
	#sidenav ul li {
		margin:0 20px;
		padding:10px 0;
		}
		
	#sidenav ul li a {
		color:#000;
		font-size:18px;
		line-height:20px;
		text-decoration:none;
		}
	
		#sidenav a:hover, #sidenav .current_page_item a {color:#fff}
		
		div#sidenav-bottom {height:53px; width:297px; background-image:url(images/sidenav-bottom.png);}
	

#content-bottom {
	/*border-top: 1px solid #9F9F9F;*/
	float:right;
	width:966px;
	height:60px;
	font-size:11px;
	margin:0 0 20px 0;
	}
	
	#content-bottom p {margin:0 30px; line-height:60px!important; width:400px; float:left;}
	#content-bottom p strong {color:#02b3d9}
	#content-bottom img {float:right; padding:0 10px 5px 0; display:block; margin:4px;}
		

div.hr {  /* horizontal line */
	height:1px;
	margin:30px 30px 10px 30px;
	border-top: 1px solid #666666;
	}
	
/* ------ Bios Page ------- */

.photo-item {
	width:153px;
	margin:0 10px 10px 0;
	height:180px;
	float:left;
	text-align:center;
	font-size:11px;
	line-height:1.4em;
}
.photo-item a {font-size:11px; font-weight:bold; display:block;}
.photo-item p {font-size:10px; color:#000; margin:0;}
.photo-item img {
	display:block;
	background:#000 url(images/bio-image-bg.gif) left top no-repeat;
	padding:10px;
	margin:0 auto;
	width:92px;
	height:91px;
	margin-bottom:5px;
	}



.bio-thumb {width:24%; float:left; display:block; height:160px; text-align:center;}

.bio-thumb img {display:block;
	background:#000 url(images/bio-image-bg.gif) left top no-repeat;
	padding:10px;
	margin:0 auto 5px;
	width:92px;
	height:91px;}
	
.bio-thumb p {font-size:11px !important; line-height:1.2em !important;}


#bios-thumbs {margin:0 30px;}
#bios-thumbs td {vertical-align:top; /*padding:0 20px 30px; */text-align:center; line-height:1.2em; font-size:11px;}
#bios-thumbs a {font-size:11px; margin:10px 0 0; font-weight:bold; display:block;}
#bios-thumbs p {font-size:10px; color:#000; margin:0;}
#bios-thumbs img {
	display:block;
	background:#000 url(images/bio-image-bg.gif) left top no-repeat;
	padding:10px;
	margin:0 auto;
	width:92px;
	height:91px;
	}

#bio-single h2 {font-size:20px; margin:10px 30px 5px;}
#bio-single h3 {
	color:#BDD63C;
	font-size:13px;
	line-height:1.3em;
	margin:5px 30px 10px;
	font-weight:normal;
	}
#bio-single a {font-size:10px; color:#02b3d9;}
#bio-single p {margin:10px 30px;}

#bio-single img {
	display:block;
	background:#000 url(images/bio-image-bg.gif) left top no-repeat;
	padding:10px;
	float:left;
	margin:0 20px 10px 0;
	}
	
	
#contact-table p {
	font-size:11px;
	}
	
#partners-table {
	font-size:11px;
	}
	
.welcome-image {
	float:right;
	display:block;
	background:#000 url(images/bio-image-bg.gif) left top no-repeat;
	padding:10px;
	margin:0 0 10px 10px;
	}
	
/* embed code for text boxes */	
.embed a {font-weight:bold;}
.page-template-_banners-php textarea {margin:0 0 15px 30px;}


/*====================================================================
=======================  5. FOOTER  ==================================
=====================================================================*/

ul#footer-nav { float:right; width: 966px; list-style-type: none; height: 48px; display: block; text-align:right; margin-top:30px; }
#footer-nav li { display: inline; margin:0 0 0 15px; }
#footer-nav li a {color:#fff; text-decoration:none; font-size:11px;}
	#footer-nav li a:hover {color:#BDD63C}
#footer p {color:#cacaca; font-size:10px; line-height:1.3em; margin-bottom:30px;}

.quotebox {
	width:699px;
	background-color:#e18500;
	position:relative;
	float:left;
	}
	
.quotebox p {
	font-family: Helvetica, Arial, sans-serif;
	display: block;
	margin-bottom: 8px!important;
	color: #fff!important;
	font-size: 20px!important;
	line-height: 1!important; }
 
.chrome .quotebox p, .chrome .quotebox address { font-size: 18px!important }
 
.quotebox strong, .quotebox b {
	color: #d0e954;
	font-family: Helvetica, Arial, sans-serif;
	font-style: normal; }
 
.quotebox address {
	font-family: Helvetica, Arial, sans-serif;
	color: #000;
	font-size: 15px;
	display: block;
	font-style: normal; }




/* Calendar */

    .calendar-table a:hover {
         background-position:0 0;
         text-decoration:none;  
         color:#000000;
         border-bottom:1px dotted #000000;
         }
    .calendar-table a:visited {
         text-decoration:none;
         color:#000000;
         border-bottom:1px dotted #000000;
        }
    .calendar-table a {
        text-decoration:none; 
        color:#000000; 
        border-bottom:1px dotted #000000;
        }
    .calendar-table a span { 
        display:none; 
        }
    .calendar-table a:hover span {
        color:#333333; 
        background:#F6F79B; 
        display:block;
        position:absolute; 
        margin-top:1px; 
        padding:5px; 
        width:150px; 
        z-index:100;
        }
     .calendar-table {
        border:none;
        width:600px;
		margin:0 25px;
     }
     .calendar-heading {
        height:25px;
        text-align:center;
        border:1px solid #D6DED5;
        background-color:#E4EBE3;
     }
     .calendar-next {
        width:25%;
        text-align:center;
     }
     .calendar-prev {
        width:25%;
        text-align:center;
     }
     .calendar-month {
        width:50%;
        text-align:center;
        font-weight:bold;
     }
     .normal-day-heading {
        text-align:center;
        width:25px;
        height:25px;
        font-size:0.8em;
        border:1px solid #DFE6DE;
        background-color:#EBF2EA;
     }
     .weekend-heading {
        text-align:center;
        width:25px;
        height:25px;
        font-size:0.8em;
        border:1px solid #DFE6DE;
        background-color:#EBF2EA;
        color:#FF0000;
     }
     .day-with-date {
        vertical-align:text-top;
        text-align:left;
        width:60px;
        height:60px;
        border:1px solid #DFE6DE;
     }
     .no-events {

     }
     .day-without-date {
        width:60px;
        height:60px;
        border:1px solid #E9F0E8;
     }
     span.weekend {
        color:#FF0000;
     }
     .current-day {
        vertical-align:text-top;
        text-align:left;
        width:60px;
        height:60px;
        border:1px solid #BFBFBF;
        background-color:#E4EBE3;
     }
     span.event {
        font-size:0.75em;
     }
     .kjo-link {
        font-size:0.75em;
        text-align:center;
		display:none!important;
     }
     .event-title {
        text-align:center;
        font-weight:bold;
        font-size:1.2em;
     }
     .event-title-break {
        width:96%;
        margin-left:2%;
        margin-right:2%;
        margin-top:5px;
        margin-bottom:5px;
        text-align:center;
        height:1px;
        background-color:#000000;
     }
     .event-content-break {
        width:96%;
        margin-left:2%;
        margin-right:2%;
        margin-top:5px;
        margin-bottom:5px;
        text-align:center;
        height:1px;
        background-color:#000000;
     }
     .calendar-date-switcher {
        height:25px;
        text-align:center;
        border:1px solid #D6DED5;
     }
     .calendar-date-switcher form {
        margin:0;
        padding:0;
     }
     .calendar-date-switcher input {
        border:1px #D6DED5 solid;
     }
     .calendar-date-switcher select {
        border:1px #D6DED5 solid;
     }
     .cat-key {
        width:100%;
        margin-top:10px;
        padding:5px;
        border:1px solid #D6DED5;
     }