/* CSS Document */

/*-----------------------------------------------------------------------------

version:   1.0
author:    Ezra Vancil
email:     Ezravan@gmail.com
website:   http://www.yrstage.com/
-----------------------------------------------------------------------------*/


/*?????????? INFO ???????????????????

 COMMENTS MAP KEY:
 
 1. USE DASH --------- to group entire section such as ----- content --------
 
 2. USE ARROW >>>>>>>>> for sub divisions of main section such as -----content------ >>>>>>>typography<<<<<<

3. USE COL :::::::: to separate sub section selectors if needed

4. USE QuUESTION MARK ???????? for info and instructions


???????????????????*/


/* --------------- BODY / hacks / clearing defaults ------------------ */



/*???? Remove padding and margin????? */
* {
  margin: 0;
	padding: 0;
}

/* ???Put it back on certain elements???? */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul,  {
  margin: 0 0;
}

/*??? Class for clearing floats ???*/
.clear {
	clear:both;
}


/*??? Remove border around linked images??? */
img {
	border: 0;
}


/*:::::::: FLOAT CLEARING :::::::::: */

.clearfix:after {
  content: ".";
  clear: both;
  height: 0;  
  display: block;
  visibility: hidden;

}
.clearfix {
  display: inline-block; /* ?? Fixes IE/Mac ?? */
}
/*?? Hides from IE-mac ?? \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*?? End hide from IE-mac ?? */		


/*?? wrapper for each content area: main content, Sidebar ?? \*/

.shell {
	
	margin: 0 auto;
	position: relative;
	width: 85%;
	}








/* ------------------------------ Main Structure -------------------------------------- */






/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> BODY <<<<<<<<<<<<<<<<<<<<<<<<<< */

html, body, div, p {
	color: #444;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}

body {
	background-color: #4A80A2;
	font:Verdana, Arial, Helvetica, sans-serif;
	
}

.style1 {color: #6699CC}
.style2 {color: #FFFFFF}







/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Container <<<<<<<<<<<<<<<<<<<<<<<<<< */


#container, #footer, #nav, #border, #adds, #navpinstripe, #containderpinstripe{
	margin: 0 auto;
	
	}
	
	
#border {


	position: relative;
	top: 36px;
	width: 798px;
	}
	
	
	
#container{
	border: 1px solid #999;
	background-color:#FFFFFF;
	position: relative;
	width: 796px;
	clear: both;	
	}








/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Typography Defaults <<<<<<<<<<<<<<<<<<<<<<<<<< */



/* ??? orange.. don't use yet ????*/

h1 {color:#FF6600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: normal;
	margin-bottom: 20px;
	word-spacing: 1px;

	
	}


/* ??? orange.. Use, MAIN title ?????*/


h2 {
	color:#FF6600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight: 600;
	letter-spacing: .01em;
	margin:0;
	
	}


/* =Blue.. Use, Side content and adds
------------------*/

h3 {
	color:#0080c6;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	margin: 0;




}

h3 a {
	color:#0080c6;
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	font-size: 120%;
	margin: 0;


}

/* =blue..  subtitle
------------------*/	

h4 {
	color:#0080c6;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 88%;
	font-weight: 700;
	letter-spacing: .10em;
	margin: 0;
	padding: 2px;
	

}	



/* grey.. use for lower title... add a strong tag to get the sub title with icon
------------------*/	

h5 {
	color:#0080c6;	
	display:block;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight:bold;
	letter-spacing: 0.02em;
	padding-bottom: 3px;
	padding-top: 3px;

	
	
}



p {
	color:#666666;
	line-height: 21px;
	letter-spacing: 0.02em;
	margin-top: 2px;
}









/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Link Defaults <<<<<<<<<<<<<<<<<<<<<<<<<< */

a:link, a:active, a:visited {
	color:#FF6600;
	padding: 3px;
}

a:hover {
	color:#666666;
	
}

#inline_links strong {
	color:#336699;


}

#inline_links {
	background:url(../images2/CDDimages/aarow.gif) no-repeat left 12px;
	padding-left: 13px;
	padding-top: 2px;
	padding-bottom: 2px;

}




/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Top Banner <<<<<<<<<<<<<<<<<<<<<<<<<< */

#masterhead {
	background-image:url(../images2/bannerclassroom.jpg);
	height: 180px;
	position: relative;
	width: 770px;
	}
	


#masterhead h1 {
	background: url(../images2/CDDimages/tv23.gif) no-repeat;
	height: 240px;
	left: -55px; 
	margin: 0; 
	position: absolute; 
	text-indent: -9000px;
	top: -42px; 	
	width: 245px;
	z-index: 1; 
	
	
}

#masterhead h1 a {
	background: url(../images2/CDDimages/tv23.gif) no-repeat;
	display: block;
	height: 220px;
}








/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Main Menu <<<<<<<<<<<<<<<<<<<<<<<<<< */



#nav {	 

	background:url(../images2/CDDimages/menu2.gif) bottom left;
	position: relative;
    float:left;
	font-size:11px;
	font-weight: bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:normal;
    width:100%;
 
    
    
	

    }
	
	
	
#navpinstripe { 
	background:#d6d6d6;
	background:url(../images2/bg7.jpg) top left;
	float:left;
	height: 8px;	
	margin: 0;
	padding: 0;
	position: relative;
    width:100%;
   




    }
	
	
	
#nav ul {
	list-style:none;
	margin-top: 2px;
    margin:0;
    padding:0;
    

    }
#nav li {
	display:block;
    float:left;
	margin:0;
	margin-top: 0px;
    padding:0;
	padding:7px 1px 0 1px;
    }
	
#nav a {
	background:url(../images2/nav_bk2.jpg) no-repeat right 50%;
	color: white; 
	display:block;   
	padding:8px 10px 9px 10px;
	text-decoration: none;

    }
	
#nav a:hover {
	background:url(../images2/bg8.jpg) top left;
	border: 0px;
	color: #333;}

/*??????? Set CURRENT page ??????*/	

	
#nav #current a {
	background:url(../images2/bg8.jpg) top left;
	color:#0099FF;
    }
	
	
	
	
	
	


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> secondary (TOP) Menu <<<<<<<<<<<<<<<<<<<<<<<<<< */


	
#top_nav {
	background:url(../images2/CDDimages/top_nav.gif) no-repeat;
	height:30px; 
	left:427px; 
	position:relative; 
	
	top:-29px; 
	width:352px; 
	
	z-index:1;


}

#top_nav ul {
	color:#333333;
	list-style: none;
	margin: 0px 0px 0 23px;
	padding-top: 2;

}

#top_nav li {
	float: left;
	margin-top: 2px;
	padding-right: 8px;

}

#top_nav li a {
	color:#333333;
	text-decoration: none;
}


#top_nav_login {
	/*background:url(../images2/CDDimages/login.gif) no-repeat; */
	height:27px;
	left:678px; 
	position:absolute; 
	top:-28px; 
	width:150px;  
	z-index:1;


}

 
 
 
 
 
 
 

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> footer <<<<<<<<<<<<<<<<<<<<<<<<<< */

#footer {
	background-color:#3d8ad8;
	border: 1px solid #666;
	border-top: 4px solid  #A4CEE1;	
	clear: both;
	font-size: 90%;
	height: 50px;
	line-height: 22px;
	padding: 5px 0 25px 0 ;
	width:770px;
	
	
	

}

#footer ul {
	float: left;
	margin: 15px 18px 0 0;
	padding-left: 30px;
	

}


#footer a {
	color: white;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: .02em;
}

#footer p {
	float: right;
	font-size: 80%;
	}








/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> main Content <<<<<<<<<<<<<<<<<<<<<<<<<< */

#content {
	background:url(../images2/content_bg.jpg) no-repeat left top ;
	float: left;
	padding-top: 34px;
	width: 68%;
	
	

}

/*::::: pharagraphs wrapper :::::*/
/*??? pharagraphs go in this div if they are main section ???*/

#Content_para {
	margin-bottom: 28px;


}

/*::::: FLOATING BOX w/ PIC :::::*/
/*??? pic defined in IMAGGRY TOOLS ???*/



.section {
	background:#F9EFCB;
	background:url(../images2/cont_bk.jpg) no-repeat;
	clear: both; 
	margin-bottom: 20px;
	margin-left: 5px;
	padding: 15px;
		
		

	
}




.section p {
 	color:#E96535;
	font-size: 85%;
	line-height: 18px;
	}
	



.section_pic {
	border: 4px solid #d6d6d6;
	border-left:3px solid #999999;
	border-top:3px solid #999999;
	float: left; 
	height: 70px; 
	margin-right: 1.25em; 
	width: 34%; 
	text-indent: -9000px;
		
}



	






/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Sidbar Content <<<<<<<<<<<<<<<<<<<<<<<<<< */

#sidebar {
	background:url(../images2/content_bg.jpg) no-repeat left top ;
	float: left;margin-top: 15px;
	padding-top: 26px;
	width: 30% !important;
	width: 29%;
	

	}
	




 /* :::::::: Sidebar boxes :::::::*/


.addBox{
	background: url(../images2/box/top.gif) no-repeat bottom left;
	margin: 2px 0px 22px 13px;
	width: 204px;
	z-index: 1;
	
	}

.addBox h3 {
	background: url(../images2/box/top.gif) no-repeat top left;
	border-bottom: 1px solid #a7dee5;
	padding: 9px 12px 8px 12px;

}

.addBox p {
color:#2d2d2d;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height: 22px;
margin: 0;
padding: 0px 10px 14px 10px;

}







 
 /* :::::::: Sidebar lists :::::::*/

#list {

	background:url(../images2/content_bg_sidebar.jpg) no-repeat left top ;
	color:#3399FF;
	font-size: 85%;
	line-height: 18px;
	padding: 22px 0px 45px 20px;

	


	}
	

#list h3 {

	background:url(../images2/little_tv.jpg) no-repeat left 50%;
	padding-left: 34px;
	padding-top: 2px;
	padding-bottom: 2px;
}





#list ul {

	list-style-type: none;
	margin: 0px;
	padding: 0px 0px 0px 0px;


	}
	
	
#list li {
	background:url(../images2/sidbarbkcurv_for_p.jpg) repeat-x -4px top;
	padding-bottom: 5px;
	padding-top: 10px;
	
	
	

	

	}
	
#list li a {
	background:url(../images2/bullet.gif) no-repeat left 50%;
	display:block;
	padding-left: 13px;
	
	

	}
	
#list li a.c {

	display:block;

	}







/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> lower Content <<<<<<<<<<<<<<<<<<<<<<<<<< */

#adds {
	background-color: #73ccfd;
	clear: both;
	width:770px;

}


#scontent {
	background:url(../images2/CDDimages/wave2.jpg) no-repeat left top;
	font-size: 0.9em;
	padding: 40px 30px 30px 0;
	
	
}

#scontent a { 
	color:#fff;
 }


#scontent img {
	border:3px solid #B5D7DF;
	margin-top: 12px;
	padding:2px;
 }
 
 
 
#scontent p { 
	color:#fff;
	font-size: 90%;
	padding-bottom: 5px;


 }


 #scontent #info2 h5 {
 	color: #ffffcc;
	font-size: 100%;
	font-weight: normal;
	margin: 20px 0 10px 0;
	padding: 0 0 3px 0;
	
	
}



 #scontent #info2 h5 a {
	color: #ffffcc;
	font-weight: normal;
	font-size: 100%;
	margin: 20px 0 10px 0;
	padding: 0 0 3px 0;
}


 #scontent #info2 h2 {
 	border-bottom: 1px dotted #ffffcc;
	color: #ffffcc;
	font-size: 1.4em;
	font-weight: normal;
	margin: 20px 0 10px 0;
	padding: 0 0 3px 0;
	
	
}

#scontent #info2 {
	border-right: 1px solid #ffffcc;
	float: left;
	margin: 0 0px 0 25px;
	padding-right:25px;width: 26%;
	
	
}


#scontent #info2 ul {
	list-style: none;
	margin: 0 0 0 12px;
	padding:0;

	}

#scontent #info2 ul li {
	background:url(../images2/bullet.gif) no-repeat 0 8px;
	margin:0;
	padding: 0 0 2px 0px;
	
}


#scontent #info2 ul li a { 
	display: block; 
	}

#scontent #info3{
	
	float: left;
	margin: 40px 0 0 35px;
	width: 24%;
}

#scontent #info3 p { color:#fff; }

#scontent #info3 h2 {
	border-bottom: 1px dotted #ffffcc;
	color: #ffffcc;
	font-size: 1.4em;
	font-weight: normal;
	margin: 20px 0 10px 0;
	padding: 0 0 3px 0px;
	
	
}

#scontent #info3 ul li {

	color: white;
	font-size: 95%;
	list-style: none;
	margin-left:0;
	padding: 0 0 20px 0px;
	
	
}



/* ------------------------------ Imagery -------------------------------------- */


/* :::::: Imagery tools :::::::: */


/*????????????????????????????????????????

how these work
?????????????????????????????????????????*/

/* :::::: ADD A BULLET :::::::: */

 
 /* ???? 
 TO ONE OF THESE titles BY MAKING IT <STRONG> ????? */


h2 strong {
	background:url(../images2/sidebar_icon.jpg) no-repeat left 50%;
	color:#FF6600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight: 500;
	letter-spacing: .01em;
	margin:0;
	padding-left: 20px;
	
	
	}
	
	
h4 strong {
	background:url(../images2/bullet.gif) no-repeat left 50% ;
	color:#0080c6;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 88%;
	font-weight: 700;
	letter-spacing: .10em;
	margin: 0;
	padding: 2px;
	padding-left: 12px;
	


}	

h5 strong {
	background:url(../images2/bullet.gif) no-repeat left 50% ;
	color:#FF6600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: bold;
	letter-spacing: 0.02em;
	margin-left: 4px;
	padding-left: 12px;
	
	
		
}


/* :::::: float a pic :::::::: */
/* ???? drop this anywhere to have a floating picture to the right, Selet and size your picture with  #floatpicture #pic1 { ????? */


#floatpicture {
	 float: left;
	 margin: 0px 0 0 0;
	text-indent: -90000px;
 
 }
 
 #floatpicture #pic1 {
	 background:url(../images2/mailicon.gif) no-repeat 0px 0px; 
	 height: 90px;
	 width: 85px;

 

 }
 
 
/* :::::: Pharagraph wrapper for left align pic :::::::: */

/* ???? wrap a phargraph in this and select your picture in the HPIC section ????? */

 
 
 
 
#Content_para_pic {
	margin-bottom: 25px;

	
}


.content_section_pic {
	background:url(../images2/bg8.jpg) repeat-x;
	border: 1px solid  #d6d6d6;
	float: left; 
	height: 140px; 
	margin-right: 1.25em; 
	text-indent: -9000px;
	width: 34%; 
	
	
	}
	



/* :::::: pic select for #section and #Content_para_pic :::::::: */
/* ???? add a hpic tag to either #section or #Content_para_pic and update them here ????? */



#hpic1 {
	background: #E2E2D2 url(../css/file) no-repeat center center;
}

#hpic2 {
	background: #E2E2D2 url(../css/file) no-repeat center center;
}

#hpic3 {
	background: #E2E2D2 url(../images2/CDDimages/tv3.gif) no-repeat 50% -45px;
	
}



#hpic4 {
	background: #E2E2D2 url(../images2/CDDimages/comic.jpg) no-repeat 50% -70px;
	
}

/* ---- BEGIN CALENDAR ---- */
/* ---- 			  ---- */
/* ----  			 ---- */

.cal_sec{
	width: 500px;
	float: left;
}

.highlight {
	font-size: 13px;
	font-weight: bold;
	color: #FF0000;
}

.title_two_cal{
	font-size: 18px;
	font-weight: bold;
	color: #FF6600;
	background-color: #666666;
	background-image: url(../../img/pin.gif);
	background-repeat: no-repeat;
	height: 30px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 45px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 730px;
}

.cal_title{
	border-bottom: 4px double #183052;	

}

.cal_header{
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	width: 100%;
	background-color: #828282;
	font-size: 18px;
}

.cal_ttl{
	width: 100%;
}

.calendar{
	border: 1px solid #626262;
	margin-top: 5px;
}

.ct_row{
	background-color: #CCCCCC;
	color: #fff;
	text-align: center;
}

.c_title{
	font-weight: bold;
	font-size: 14px;
	color: #666666;
}

td.old{
	font-size: 11px;
	background-color: #FFFFFF;
	vertical-align: top;
	width: 110px;
}

.old{
	color: #818181;
	background-color: #EEEEEE;
	font-weight: bold;
}


td.fut{
	font-size: 12px;
	background-color: #FFFFFF;
	vertical-align: top;
	width: 110px;
}

.fut{
	color: #666666;
	background-color: #EEEEEE;
	font-weight: bold;
	padding: 1px 2px;
}

td.tobe{
	font-size: 12px;
	background-color: #D7D7D7;
	vertical-align: top;
	width: 110px;
}

.tobe{
	color: #CC0000;
	background-color: #CACACA;
	font-weight: bold;
}

/* ---- END CALENDAR ---- */


/*-------------  Top Tabs --------------*/	
#top_tabs_toolbar {
	font-size:12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height:normal;
	width:100%;
	height: 28px;
	}

#top_tabs ul {
	list-style:none;
	margin:0;
	padding:0;
    

    }
#top_tabs li {
	display:block;
	float: right;
	margin-left: 5px;
	background-repeat: no-repeat;
	width: 119px;
	height: 28px;
	background-image: url(../images_2008/Toolbar/top_tab.png);
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;

    }
	
#top_tabs a {
	color: #FCEE21;
	display:block;
	text-decoration: none;
	padding-top: 6px;
    }
	
#top_tabs a:hover {
	height: 28px;
	background-image: url(../images_2008/Toolbar/top_tab_overstate.png);
	background-repeat: repeat-x;
	background-position: left top;
	}

/*??????? Set CURRENT page ??????*/	

	
#top_tabs #current a {
	background:url(../images_2008/menu/menu_btn_ovr.png) top left;
	color:#0099FF;
    }	


/*  ===== Header ======*/
#header {
	background-image: url(../images_2008/Toolbar/top_login.png);
	background-repeat: no-repeat;
	height: 54px;
	width: 798px;
}
#header_logo {
	background-image: url(../images_2008/Toolbar/top_logo.png);
	background-repeat: no-repeat;
	float: left;
	height: 113px;
	width: 148px;
	margin-top: -63px;
}
#header_login {
	float: right;
	height: 28px;
	width: 627px;
	margin-right: 20px;
	margin-top: 16px;
}
#header_login form {
	margin: 0px;
}
.login_label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	width: 160px;
	float: left;
	margin-top: 5px;
}
.login_email_lbl {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	margin-top: 5px;	
}
.login_pass_lbl {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	margin-top: 5px;
}
#login_btn {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	background-image: url(../images_2008/Toolbar/top_login_button.png);
	background-repeat: repeat-x;
	background-position: left top;
	color: #29ABE2;
}
#login_btn a:hover {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	background-image: url(../images_2008/Toolbar/top_login_button_overstate.png);
	background-repeat: repeat-x;
	background-position: left top;
}