@charset "utf-8";
/* CSS Document */

/*div {border:1px solid #999;}*/

a img{
	border:0px;
}

html{
}

body{
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-family: Verdana, Helvetica, Arial, sans-serif;	
	background: #9BC4DA url(/teens/images/backgrounds/bg_incline.jpg) top center no-repeat;
	/*background: #332980 url(/teens/images/backgrounds/bg_oakland.jpg) top center no-repeat;*/
	/*background: #9BC4DA url(/teens/images/backgrounds/bg_bridge.jpg) top center no-repeat;*/
	/*background: #9BC4DA url(/teens/images/backgrounds/bg_oakland.jpg) top center no-repeat;*/
	width: 100%;
	display:table;
}

h1{
	color:#000000;
	margin:5px 0;
	font-weight: bold;
	font-size: 26px;
} 

h2 {
	color:#333333;
	margin:5px 0;
	font-weight: bold;
	font-size: 20px;
} 

h3 {
	color:#111111;
	margin:5px 0;
	font-weight: normal;
	font-size: 16px;
} 

h4 {
	color:#222222;
	margin:5px 0;
	font-weight: bold;
	font-size: 14px;
	line-height:120%;
} 

h5 {
	color:#111111;
	margin:5px 0;
	font-weight: bold;
	font-size: 12px;
} 

h6 {
	color:#000000;
	margin:5px 0;
	font-weight: bold;
	font-size: 10px;
}


.subtitle	{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:75%;
	font-weight:bold;
	color:#000000;
} 

hr {
border: 0;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 100%;
text-align: left;
}

#teenscontent { /*centered container div for all content on Teen pages*/
	background: none;
	width:850px; /*same as teensfooter width + footer padding*/
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

/****** SECTION: HEADER *****************************************/

#teensheader{
	position: relative;
	top: 0; left: 0;
	/*margin-left:40px;*/ /*same as mainwrappermargin-left. Positions teen logo link*/
	height: 220px; /*same as top position for maincontent*/
	/*width: 100%;*/
}

#teens_utilities {
	float:right;
	display:inline;
	width:300px;
}

#mainnav {
	float:right;
	margin:15px 0 0 0;
	padding:0;
	display:inline;
	width:340px;
	height: 120px;
} #mainnav-graffiti {
	float:left;
	margin-top:0px;
	width: 187px;
	height: 119px;
	display:inline;
} #mainnav ul{
	/*position: absolute;
	top: 93px;
	left: 800px;*/
	float:left;
	margin-left:15px;
	display:inline;
	list-style-type: none;
	z-index: 100;
} #mainnav a:link,
  #mainnav a:hover,
  #mainnav a:visited {
  	text-decoration: none;
	color: #000;
} #mainnav a:hover {
	font-weight: bold;	
}

#teens_clplogo {
	float:left;
	width:125px;
	display:inline;
}
#teens_logo { /*deprecated*/
	/*position: absolute;
	left: 270px;
	top: 0;*/
	float:left;
	margin-left: 20px;
	height: 202px;
	width: 228px;
}

.howdoi_hvr, .howdoi_hover{
	z-index: 50;
}

.vertline{
	height: 108px !important;
	width: 1px !important;
	background-color: #000000;
	float: left;
	position: relative;
	top: 10px;
	left: 22px;
}

#hidecontent {
	float:left;
	margin-top:50px;
	font-size:9px;
} #hidecontent a {
	text-decoration:none;
	color:#555555;
} #hidecontent_spacer {
	height:950px;
}
/****** END SECTION: HEADER *****************************************/

/****** SECTION: MAIN CONTENT ***************************************/
#lower_content{
	/*top: 242px;
	position: relative;*/
	/*width: 100%;
	margin-bottom: auto;
	clear: both;
	height: 100%;
	overflow: hidden;*/
}

#center_content{
	/*clear:both;
	float:left;
	margin-top: 242px;
	margin-bottom: 50px;
	height: 100%;
	width:100%;*/
}

#mainwrapper{	
	/*position:relative;
	top:225px; 
	margin-bottom: 225px;
	width:100%; */
	/*margin-left:40px;*/ /*same as teensheader margin-left*/
}

#announcement{ /*display site-wide announcments*/
	float:left;
	font-weight:bold;
	text-align:center;
	padding:5px 0px 5px 0px;
	margin:0;
	background-color: #A8CF7E;	
	filter:alpha(opacity=72);
	-moz-opacity:.72;
	opacity:.72;
}

#left_container{ /*left section of main content*/
	float:left;
}

#right_container{ /*right section of main content*/
	float:right;
	width:600px;
	display:inline;
	padding:0;margin:0;
}

#sectionheader{
	height:125px; !important
} #sectionheader_title{
	float:left;
	margin:35px 20px 0 0;
	padding:10px 20px 10px 0px;
	border-right:2px solid #000000;
} #sectionheader_graffiti {
	background-repeat:no-repeat;
	width:325px;
	height:200px;
	z-index:-10; 
} #sectionheader_graffiti.life {
	background-image:url(../images/bottom_graffiti/life.gif);
	margin-left:110px;
} #sectionheader_graffiti.aboutclp {
	background-image:url(../images/bottom_graffiti/aboutclp.gif);
	margin-left:200px;
} #sectionheader_graffiti.books {
	background-image:url(../images/bottom_graffiti/books.gif);
	margin-left:260px;
} #sectionheader_graffiti.fun {
	background-image:url(../images/bottom_graffiti/fun.gif);
	margin-left:100px;
}  #sectionheader_graffiti.homework {
	background-image:url(../images/bottom_graffiti/homework.gif);
	margin-left:215px;
} #sectionheader_graffiti.blog {
	background-image:url(../images/bottom_graffiti/blog.gif);
	margin-left:200px;
}

#teens_breadcrumb {
	margin:5px 0 5px 0;
	color:#ffffff;
} #teens_breadcrumb a.white {
	color:#ffffff;
}

/*pick background color for content boxes*/
/*#theme_picker{ 
	width:100%;
} */
#theme_picker label, #theme_picker p {
	clear:both;
	float:left;
	margin:4px 0;
} .themebox{
	float:left;
	height: 15px;
	width: 15px;
	margin: 2px;
	cursor: pointer;
} 
/*.theme1{
	background-color:#B2D680;
} .theme2{
	background-color:#8FD8EF;
} .theme3{
	background-color:#EF9292;
} .theme4{
	background-color:#F0E87B;
}*/

.tabs {
	display: inline;
} 

.tabs div{
	float: left;
	height: 20px;
	min-width: 40px;
	margin: 0px 2px;
	display: inline;
	text-align: center;
	vertical-align: middle;
	padding: 5px 10px;
	font-weight:bold;
} 

.bottomborder{
	border-bottom: 1px solid #FFF; 
}

.topborder{
	border-top: 1px solid #FFF; 
} 

.spaced{
	line-height: 1.5;
} 

.padded {
	padding: 3px 8px;
} 

.whiteborder{
	border: 1px solid #FFF; 
} 

.greenbox{
	background-color: #A8CF7E;
} 
/* this is used in the left side menu for the titles of the drop down sections */
.sidetitlebar{
	border-top: 1px solid #FFF; 
	border-bottom: 1px solid #FFF; 
} 
/* this is used on the index pages for the title of the drop down sections */
.titlebar{
	border-bottom: 1px solid #FFF; 
	color: #333333;
} 

.titlebar h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:140%;
	float:left;
	width:75%;
	margin:3px;
} 

.titlebar p{
	margin:5px 0 0 0;
	padding:0;
} .boxtitle {
	color: #000000;
	font-size: 18px;
	font-weight: bold;
} .stripedbox{	
	background-color: #B2D680; 
	background: url(/teens/images/backgrounds/bg_lined_green.gif) repeat;
} .seethru{
	filter:alpha(opacity=75);
	-moz-opacity:.75;
	opacity:.75;
} .nobottomborder {
	border-bottom: none;
} .notopborder {
	border-top: none;
} .pointer{
	cursor: pointer;
} .bottomspace{
	margin-bottom: 10px;
} .seethru_footer{
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
}

.bold {
	font-weight:bold;
}

.whitebox{
	background-color: #FFFFFF;
	border: 1px solid #000000;
	margin: 9px;
	font-size: 9px;
	
} .boxspacer{
	margin: 2px;
} .boxspacer a{
	font-weight:bold;
}

.navarrows {
	text-align: center;
}

.floatleft  { float: left;  }
.floatright { float: right; }
.clearleft  { clear: left;  }
.clearright { clear: right; }
.clearboth  { clear: both;  }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#bookReview1 {
padding:15px 10px 0px 30px;

}
#bookReview2 {
padding:15px 10px 0px 30px;
}
.error {
margin-top:-25px;
float:right;
}
.redError {
font-weight:bold;
color:#FF0000;
}

/****** END SECTION: MAIN CONTENT ***********************************/

/****** SECTION: SIDEBAR NAVIGATION *********************************/
#left_sidebar {
	float:left;
	width:200px;
} #left_sidebar_content {

} .sidebarlink a{
	color:#FFFFFF;
}


/****** END SECTION: SIDEBAR NAVIGATION *****************************/

/****** SECTION: BOOKS & MORE****************************************/
#booklist_tabs, #secondbooklist_tabs, #review_tabs, #other_tabs, #homework_tabs, #stem_tabs {
	clear:both;
	float:right;
	width:100%;
	margin:0;
}

#review_tabs .review_link {
	float:right;
}

/****** END SECTION: BOOKS & MORE************************************/


/****** BEGIN SECTION: EVENTS & ARTIST ******************************/

#eventbox, #artistbox, .contentbox{
	clear:both;
	float:left;
	margin-top:35px;
	width:100%;
	height:100%;
}

/*#eventbox div {border:1px solid #999;}*/

#eventscroller {   
    /* required settings */ 
    position:relative; 
    overflow:hidden;     
 
    /* horizontal scrollers have typically smaller height than width */     
    height: 175px;      
    width: 470px !important;    
	
	margin: 0;
	padding: 0 0 0px 0;
	border: 0;
	
	margin-left: auto;
	margin-right: auto;
} 
 
#events{     
    position:absolute;      
    /* this time we have very large space for width */     
    width:20000em;     
	margin: 3px 0 0 5px;
	padding: 0;
	border: 0;
}

.event{
	height: 170px;
	width: 143px;
	float: left;
}

#artistthumb img {
	border:2px solid #ffffff;
	margin:10px;
}

/****** END SECTION: EVENTS *****************************************/


/****** SECTION: FOOTER *********************************************/
#teensfooter{
	clear:both;
	float:left;
	margin:30px 0 0 0;
	padding:10px;
	width:620px; 	/*homepage footer width defined in teens-main.css orig 580*/
	color:#FFFFFF;
} #teensfooter div {
	display:inline;	/*fixes width issue in IE6*/
	color:#FFFFFF;
}

#teensfooter h4,
#teensfooter a, #teensfooter navlinks a, #teensfooter toolslinks a{
	/*color: #555555;*/
	color:#FFFFFF;
}

#footer-contact p {
	/*color: #555555;*/
	color:#FFFFFF;
}

/****** END SECTION: FOOTER *****************************************/


/* SECTION FOR THE BOOK LIST USING DIV TAGS NOT TABLES, DERIVED FROM THE STYLES OF THE MAIN SITE /css/style.css */

.booklist-book { /*container class for each resource item on a topics page*/
	clear:both;
}

.booklist-book-img { /*container class for images of selected resources*/
	float:left;
	/*padding: 5px 20px 5px 5px; */
	width:20%;
	text-align:center;
	font-size:90%;
}

.booklist-book-txt { /*container class for images of selected resources*/
	line-height:16px;
	/*float:right;
	width:80%;
	clear:right;
	vertical-align: top;*/
}

.booklist-book-txt a {
	font-weight:bold;
}

/* thin white line that separates each book */
.booklist-line {
	width:100%;
	border-top: 1px solid #FFF;
	border-width:1px;
	height:5px;
	margin-top:5px;
	clear:both;
}
/* end section for booklists */

/* SECTION ANNOLIST ---------------------------------------------------- */
/* annotated list that needs a larger bottom margin */
/*list with> bullets used for lists of links*/
.annolist ul { 
	line-height:130%;
	margin:0 0 15px 0;
}

/* to put a margin between the blurb of one link and the link of the next */
.annolist li {
	margin-bottom: 12px;
	}

/* this is to allow for no margin bottom on interior lists ul within an annolist item */
.list li {
	margin-bottom:2px;
	}
	
/* this is just to put 1.5 spaces between list items, esp without bullets */
.list	{
	line-height:150%;
	}

/* END SECTION ANNOLIST ---------------------------------------------------- */

/* table for schedules */
table.schedule {
	border-width: 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: white;
	background-color: none;
	padding: 0px;
}
table.schedule th {
	border-width: 1px;
	padding: 5px;
	border-style: solid;
	border-color: white;
	background-color: none;
}
table.schedule td {
	border-width: 1px;
	padding: 5px;
	border-style: solid;
	border-color: white;
	background-color: none;
	line-height:130%;
}

/* BIG, BIGGER AND BIGGEST FONT FOR KAREN BROOKS VIDEOCONTEST */

.big	{
	font-size:16px;
	font-weight:bold;
	line-height:20px;
	}
	
.bigger	{
	font-size:18px;
	font-weight:bold;
	line-height:22px;
	}

.biggest	{
	font-size:22px;
	font-weight:bold;
	line-height:26px;
	}
	
.gigantic	{
	font-size:30px;
	font-weight:bold;
	line-height:34px;
	}