@charset "UTF-8";
body  {
	font: 85% Verdana, Geneva, sans-serif;
	background-color: #a7a7a7;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #015004;
}
h5 {
	font-family: Verdana, Geneva, sans-serif;
	font-size:15px;
	font-style:normal;
}
h6 {
	font-family: Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:.9em;
}



.thrColAbsHdr #container {
	position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
	background-image:url(../images/background1.png);
width: 760px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left;
	padding: 0 0px;
} 

/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
*/
.thrColAbsHdr #header {
	left:5px;
	height: 120px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can give the columns a predictable top value */
	background-image: url(../images/headergradient.png);
	background-repeat: no-repeat;
	padding: 0 0px 0 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.clear {
	clear: both;
}
#container img {
	float: left;
	margin-right: 10px;
}
#name_logo {
	position:absolute;
	background-image: url(../images/ltes_logo.png);
	background-repeat:no-repeat;
	float: left;
	width:600px;
	height:50px;
	top: 40px;
	left:20px;
	}
#address {
	position:absolute;
	width:200px;
	height:139px;
	float: left;
	top: 50px;
	left:600px;
	}
#tourguide_logo {
	position:absolute;
	width:200px;
	height:139px;
	float: left;
	top: 147px;
	left:11px;
	}
.thrColAbsHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

#navcontainer ul
{
position:absolute;
padding:0px;
left: 0;
top: 80px;
color: #639764;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
font-size:14px;
background-color:#a0c2a1;
}

#navlist{
	margin:0px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
color: #fff;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #fff;
color: #639764;
}
#navlist li a#current
{
background-color:#c2dbc3;
}
.thrColAbsHdr #sidebar1 {
	position: absolute;
	top: 125px;
	left: 0;
	width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 0px 15px 0px; /* padding keeps the content of the div away from the edges */
}
.thrColAbsHdr #sidebar2 {
	position: absolute;
	top: 125px;
	right: 0;
	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 0px 15px 0px; /* padding keeps the content of the div away from the edges */
}
.thrColAbsHdr #mainContent {

	width: 500px;
	margin: 0 10px 0px 230px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
	padding: 20px 0px 50px 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}

#mainContent a:link {
	color: #285228;
	text-decoration:underline;
}
#mainContent a:visited {
	color: #285228;
	text-decoration:underline;

}
#mainContent a:active {
	color: #a0c2a1;
	text-decoration:underline;
}
#mainContent a:hover {
	color:#a0c2a1;
	text-decoration:underline;
}

#sidebar {
	margin: 0px;
	width: 300px;
}

#first_column{
	font-family:Verdana, Geneva, sans-serif;
	font-size:85%;
	color:#69668a;
	line-height:140%;
	float:left;
	width:190px;
	padding: 20px 10px 0 20px; /* padding keeps the content of the div away from the edges */
}
#first_column p {
	font-family:Verdana, Geneva, sans-serif;

}

#first_column a:link {
	color: #69668a;
	text-decoration:underline;
}
#first_column a:visited {
	color: #69668a;
	text-decoration:underline;

}
#first_column a:active {
	color: #3f3c65;
	text-decoration:underline;
}
#first_column a:hover {
	color:#3f3c65;
	text-decoration:underline;
}

#first_column ul
{
	font-family:Verdana, Geneva, sans-serif;

	list-style-type: none;
	text-align: left;
}

#first_column ul li a
{
background: transparent url(images/list-off.gif) left  no-repeat;
padding-left: 0px;
text-align: left;
	text-decoration: underline;
color: #69668a;
}

#first_column ul li a:hover
{
background: transparent url(images/list-on.gif) left  no-repeat;
color: 3f3c65;
}

#first_column ul li a#current
{
background: transparent url(images/list-active.gif) left  no-repeat;
color: #3f3c65;
}

#links {
	background-image:url(../images/linkframe.png);
	margin-top: 10px;
	background-repeat:no-repeat;
	height: 300px;
}

#insidelinks
{
	font-size:.9em;
	padding: 20px 20px;
	color:#69668a;
}
#insidelinks h3 {

}
#insidelinks p {
	margin-top:-10px;
	font-size: 110%;
	line-height:1em;
	margin-bottom:30px;
}
	

#second_column{
	position: absolute;
	float:right;
	top: 125px;
	right: 0;
	width: 280px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 15px 0px 15px 0px; /* padding keeps the content of the div away from the edges */
}
.thrColAbsHdr #mainContent p, #second_column p, #first_column p {
	line-height:140%;
}
																 
.thrColAbsHdr #footer { 
position:absolute;
clear:both;
height:60px;
width:100%;
	padding: 0 0px 20px 0px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background-image:url(../images/footer.png);

} 
.thrColAbsHdr #footer p {
	background-color:#330000;
	
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 10px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left:8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}

#box1 {
	color: #FFFFFF;
	background-image: url(../images/school_bldg.jpg);
	background-repeat:no-repeat;
	margin: 0px 00px 10px 0;
	padding: 0px;
	height: 321px;
	width: 480px;
}
/*---------------------H1s--------------------------------*/
#banner h1
{
 height: 70px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 30px 0 0 0;
 padding: 50px 0 0 0;
}

#reggio h1, #pta h1, #prek h1, #media h1, #curriculum h1, #partner h1, #faculty h1, #prek_kindergarten h1, #first h1, #fourth h1, #specialists h1, #specialed h1
{
 height: 70px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 30px 0 0 0;
 padding: 0px 0 0 0;
}

#autism h1
{
 height: 110px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 30px 0 0 0;
 padding: 0px 0 0 0 ;
}

#reggio h1 {background: transparent url(../images/h1reggio.png) no-repeat;}
#banner h1 {background: transparent url(../images/banner.gif) no-repeat;}
#pta h1 {background: transparent url(../images/h1pta.png) no-repeat;}
#prek h1 {background: transparent url(../images/h1prek.png) no-repeat;}
#media h1 {background: transparent url(../images/h1media.png) no-repeat;}
#curriculum h1 {background: transparent url(../images/h1curriculum.png) no-repeat;}
#partner h1 {background: transparent url(../images/h1partner.png) no-repeat;}
#faculty h1 {background: transparent url(../images/h1faculty.png) no-repeat;}
#prek_kindergarten h1 {background: transparent url(../images/h1prek_kindergarten.png) no-repeat;}

#first h1 {background: transparent url(../images/h1first.png) no-repeat;}
#fourth h1 {background: transparent url(../images/h1fourth.png) no-repeat;}
#specialists h1 {background: transparent url(../images/h1specialists.png) no-repeat;}
#specialed h1 {background: transparent url(../images/h1specialed.png) no-repeat;}
#autism h1 {background: transparent url(../images/h1autism.png) no-repeat;}


#reggio h1 span, #banner h1 span, #pta h1 span, #prek h1 span, #media h1 span, #curriculum h1 span, #partner h1 span, #faculty h1 span, #prek_kindergarten h1 span, #first h1 span, #fourth h1 span, #specialists h1 span, #specialed h1 span, #autism h1 span
{ display: none; }


/*---------------------h2s--------------------------------*/


#example h2, #implementation h2, #philosophy h2, #Highlights h2, #partner h2, #powell h2, #embassy h2, #program h2, #morning h2, #breakfast h2, #potty h2, #recess h2, #lunch h2, #nap h2, #dismissal h2, #aftercare h2, #observe h2, #integration h2, #filmore h2, #imagination h2, #warriors h2, #aftercare2 h2, #board h2, #spanish h2, #rotary h2, #membership h2, #lsrt h2, #ambassador h2
{
 height: 30px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 0px 0 0 -10px;
 padding: 0px 0 0 0px ;
}

#example h2 {background: transparent url(../images/h2example.png) no-repeat;}
#implementation h2 {background: transparent url(../images/h2implement.png) no-repeat;}
#philosophy h2 {background: transparent url(../images/h2philosophy.png) no-repeat;}
#Highlights h2{background: transparent url(../images/h2highlights.png) no-repeat;}
#partner h2{background: transparent url(../images/h2duke.png) no-repeat;}
#powell h2{background: transparent url(../images/h2powell.png) no-repeat;}
#embassy h2{background: transparent url(../images/h2embassy.png) no-repeat;}
/*pre-k h2 tags*/
#program h2  {background: transparent url(../images/h2prekprogram.png) no-repeat;}
#morning h2 {background: transparent url(../images/h2morningcare.png) no-repeat;}
#breakfast h2 {background: transparent url(../images/h2breakfast.png) no-repeat;}
#potty h2 {background: transparent url(../images/h2potty.png) no-repeat;}
#recess h2 {background: transparent url(../images/h2recess.png) no-repeat;}
#lunch h2 {background: transparent url(../images/h2lunch.png) no-repeat;}
#nap h2 {background: transparent url(../images/h2nap.png) no-repeat;}
#dismissal h2 {background: transparent url(../images/h2dismissal.png) no-repeat;}
#aftercare h2 {background: transparent url(../images/h2aftercare.png) no-repeat;}
#observe h2 {background: transparent url(../images/h2observe.png) no-repeat;}
/*curriculum h2 tags*/
#integration h2 {background: transparent url(../images/h2integration.png) no-repeat;}
#filmore h2 {background: transparent url(../images/h2filmore.png) no-repeat;}
#imagination h2 {background: transparent url(../images/h2imagination.png) no-repeat;}
#warriors h2 {background: transparent url(../images/h2warriors.png) no-repeat;}
#aftercare2 h2 {background: transparent url(../images/h2aftercare.png) no-repeat;}
#board h2 {background: transparent url(../images/h2board.png) no-repeat;}
#spanish h2 {background: transparent url(../images/h2spanish.png) no-repeat;}
#rotary h2 {background: transparent url(../images/h2rotary.png) no-repeat;}
#membership h2 {background: transparent url(../images/h2membership.png) no-repeat;}
#lsrt h2 {background: transparent url(../images/h2lsrt.png) no-repeat;}
#ambassador h2 {background: transparent url(../images/h2ambassador.png) no-repeat;}








#example h2 span, #implementation h2 span, #philosophy h2 span, #Highlights h2 span, #partner h2 span, #powell h2 span, #embassy h2 span, #program h2 span, #morning h2 span, #breakfast h2 span, #potty h2 span, #recess h2 span, #lunch h2 span, #nap h2 span, #dismissal h2 span, #aftercare h2 span, #observe h2 span, #integration h2 span, #filmore h2 span, #imagination h2 span, #warriors h2 span, #aftercare2 h2 span, #board h2 span, #spanish h2 span, #rotary h2 span, #membership h2 span, #lsrt h2 span, #ambassador h2 span
{display: none;}

#example h4 
{
	font-style:italic;
	font-size:.9em;
}

/*purple h2 tags*/
#upcomingevents h2, #excitingnews h2
{
 height: 55px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 30px 0 0 0px;
 padding: 0px 0 0 0px ;
}
#insidelinks h2  
{
 height: 55px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 0px 0 0 0px;
 padding: 0px 0 0 0px ;
}

#upcomingevents h2 {background: transparent url(../images/h2_news_upcoming.png) no-repeat;}
#excitingnews h2 {background: transparent url(../images/h2_excitingnews.png) no-repeat;}

#insidelinks h2 {background: transparent url(../images/h2links.png) no-repeat;}
#quote_cobbs h2 {background: transparent url(../images/quote_fickling.png) no-repeat;}
#vo h2 {background: transparent url(../images/h2vo.png) no-repeat;}
#ptanews h2 {background: transparent url(../images/h2ptanews.png) no-repeat;}
#quote_penn h2 {background: transparent url(../images/quote_penn.png) no-repeat;}
#about_reggio h2 {background: transparent url(../images/h2about_reggio.png) no-repeat;}
#apples h2 {background: transparent url(../images/h2faculty_apples.png) no-repeat;}
#flower h2 {background: transparent url(../images/flower.png) no-repeat;}







#upcomingevents h2 span, #excitingnews h2 span, #insidelinks h2 span, #quote_cobbs h2 span, #vo h2 span, #ptanews h2 span, #quote_cobbs h2 span, #about_reggio h2 span, #apples h2 span, #flower h2 span
{display: none;}

#quote_cobbs h2, #flower h2
{
 height: 250px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 30px 0 0 0px;
 padding: 0px 0 0 0px ;
}
#quote_penn h2
{
 height: 260px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 30px 0 0 0px;
 padding: 0px 0 0 0px ;
}
#vo h2, #ptanews h2, #about_reggio h2, #apples h2
{
 height: 55px; 
 text-indent: -8000px; /*can you figure out what this is doing? Yep - it's pushing the text far off-screen, so that it does not appear on our monitors, but does appear on screen readers. Then we use CSS to replace the text with our custom image headers (below)*/
 margin: 30px 0 0 0px;
 padding: 0px 0 0 0px ;
}