/*******************/
/* Template Layout */
/*******************/

html {
	font-size: 				0.78em; /* IE hack */
	font-style:				normal;
}

body {
	font-style:				normal;
	margin:						0;
	padding:					0;
	background: 			#FFF;
	color:						#333360;
	font-family:    	Arial, Helvetica, sans-serif;
	font-size:				100%;  /* IE hack - equivalent of 13px considering default font size is usually 16px */
	text-align: 			left;
	height:						100%;
	width:						100%;
}



#container {
text-align:left;
border:1px solid #669999;
top:0px;
background:url(../images/background1col.gif) 0 0 repeat; position:relative;
width:1000px;
margin:0 auto;
}

#container2col {
text-align:left;
border:1px solid #669999;
top:0px;
width:1000px;
margin:0 auto;
background:url(../images/background.gif) 0 0 repeat;
}

#header-top {
clear:both;
text-align:left;
width:1000px; height:20px;
background:#31309C;
top: 0px;
margin:0;
}

#header {
clear:both;
text-align:left;
width:1000px; height:120px;
background:url(../images/peppertree-educational-design-systems.gif) 0 0 no-repeat; 
position:relative;
z-index: 10;
border-bottom:1px solid #CCCCCC;
}

#left-content {
position:relative;
float:left;
width:210px;
left:0px;
background:url(../images/background.gif) 0 0 repeat;
}

#left-content .csc-textpic-image img{
margin: auto;
}

#left-content #testimonial {
	display: block;
	width: 150px;
	margin: 0 10px 0 10px;
	padding: 0 15px 0 15px;
	font-size: 0.9em;
}
#left-content #testimonial H1{
	margin: 0px;
	padding: 0px;
}

#main-content1col {
width:1000px;
min-height: 175px;
padding:10px;
}

#main-content2col {
float:right;
width:765px;
min-height: 175px;
padding:5px 15px 10px 5px;
background: #FFF;

}

#footer{
clear:both;
position:relative;
text-align:right;
font-size:0.95em;
font-weight: bold;
color: #ffffff;
background:#31309C;
padding:2px;
border-top:1px solid #CCCCCC;

}

.footerlink a {
font-size:1em;
font-weight: bold;
color: #ffffff;
}

.footerlink a:hover {
color: #cccccc;
text-decoration: underline;
}



/********************************/
/* Vertical navigation menu */
/*******************************/

.spc {
font-size: 100%;
padding: 5px 0px 0px 3px;
color:#003399;
font-weight: bold;
}


.vertnav1 a:link,
.vertnav1 a:visited,
.vertnav1 a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
text-decoration:none;
width:190px;
background:url(../images/nav.gif) 0 5px no-repeat; position:relative;
border-bottom:1px solid #ccc;  
color:#003366; 
text-indent: 25px;
}
.vertnav1 a:hover {
color:#669999;  
background:url(../images/nav_hover.gif) 0 5px no-repeat; position:relative;
text-indent: 25px;

}

.vertnav1-act a:link,
.vertnav1-act a:visited,
.vertnav1-act a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
font-weight: bold;
text-decoration:underline;
width:190px;
background:url(../images/nav_hover.gif) 0 5px no-repeat; position:relative;
border-bottom:1px solid #0099ff;  
color:#003366;  
text-indent: 25px;
}

.vertnav2 a:link,
.vertnav2 a:visited,
.vertnav2 a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
text-decoration:none;
width:190px;
text-indent: 35px;
color:#003366; 
background:url(../images/arrow_right_solid.gif) 28px 7px no-repeat; position:relative;
}
.vertnav2 a:hover {
background:#94CDFF;  
color:#669999;  
background:url(../images/arrow_down.gif) 26px 9px no-repeat; position:relative;
text-indent: 35px;
}

.vertnav2-act a:link,
.vertnav2-act a:visited,
.vertnav2-act a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
font-weight: bold;
text-decoration:underline;
width:190px;
background:url(../images/arrow_down_solid.gif) 26px 9px no-repeat; position:relative;
color:#003366;  
text-indent: 35px;
}

.vertnav3 a:link,
.vertnav3 a:visited,
.vertnav3 a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
text-decoration:none;
width:190px;
border-bottom:1px dotted #0099FF;  
 text-indent: 45px;
color:#003366; 
background:url(../images/dot.gif) 35px 10px no-repeat; position:relative;
}
.vertnav3 a:hover {
color:#669999;  
background:url(../images/dot_hover.gif) 35px 10px no-repeat; position:relative;
text-indent: 45px;
}

.vertnav3-act a:link,
.vertnav3-act a:visited,
.vertnav3-act a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
font-weight: bold;
text-decoration:underline;
width:190px;
background:url(../images/dot_hover.gif) 35px 10px no-repeat; position:relative;
color:#003366;  
text-indent: 45px;
}
.vertnav3-act a:hover {
color:#669999;  
background:url(../images/dot_hover.gif) 35px 10px no-repeat; position:relative;
text-indent: 45px;
}

.vertnav4 a:link,
.vertnav4 a:visited,
.vertnav4 a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
text-decoration:underline;
width:190px;
border-bottom:1px dotted #0099FF;  
color:#003366; 
text-indent: 55px;
background:url(../images/nav.gif) 0 5px no-repeat; position:relative;

}
.vertnav4 a:hover {
color:#669999;  
background:url(../images/nav_hover.gif) 0 5px no-repeat; position:relative;
text-indent: 55px;
}

.vertnav4-act a:link,
.vertnav4-act a:visited,
.vertnav4-act a:active {
margin: 0px;
display:block;
padding:5px;
font-size:100%;
font-weight: bold;
text-decoration:none;
width:190px;
border-bottom:1px dotted #0099FF;  
color:#003366;  
text-indent: 55px;
background:url(../images/nav_hover.gif) 0 5px no-repeat; position:relative;

}

/* General element styles:*/  
H1, H2, H3, H4, H5, H6, P, TD, UL, OL, BLOCKQUOTE, INPUT, TEXTAREA, SELECT { font-family:arial, helvetica; color:#000; font-size:1em; }
PRE { font-family:monospace; }
A { color:#006AC2; text-decoration:none;}
A:hover { color:#669999; text-decoration:none; }
FORM { margin:0px;}
P, PRE {color:#000;}
P, TD, UL, OL { font-size:1em;}
INPUT, TEXTAREA, SELECT textarea { font-family:arial, helvetica, sans-serif; color:#000; border: #006AC2 1px solid; font-size:100%; }
input[type=radio], input[type=checkbox] { border: 0px solid; }


/* Frames, spacing, link-to-top */ 
DIV.csc-frame-frame1 { background-color:#DCF0FF; padding:2px 4px 2px 4px; border:1px solid #333; }
DIV.csc-frame-frame2 { background-color:#FFFFFF; padding:0px 0px 4px 0px; border-bottom:1px dotted #009CFF; margin-bottom:4px; margin-top:3px; font-size:100%; }


/* Headers, plain */ 
H1 { font-size:1.54em; color:#000099; font-weight:bold;}
H2 { font-size:1.38em; color:#000099; }
H3 { font-size:1.38em; color:#993333; font-weight:bold;}
H4 { font-size:1.08em; color:#006633;}
H5 { font-size:1.08em; color:#00A28C;}
H6 { font-size:1.08em; color:#FFFFFF;}
H1, H3, H4, H5, H6 { margin:0px 0px 0px 0px; }
H2 { margin:0px 0px 15px 0px; }
H1.csc-firstHeader, H2.csc-firstHeader, H3.csc-firstHeader, H4.csc-firstHeader, H5.csc-firstHeader, H6.csc-firstHeader { margin-top:0px; }


/* Headers, with link */
H1 A, H2 A, H3 A, H4 A, H5 A { color: #003399; text-decoration:none; }
H2 A { color:#000099; }
H3 A { color:#000099; }
H4 A { color:#000099; }
H1 A:hover, H2 A:hover, H3 A:hover, H4 A:hover, H5 A:hover { text-decoration:underline; }


/* Captions */
	DIV.csc-textpic-caption-c .csc-textpic-caption { font-size:100%; padding:3px 0 10px 0; font-style:italic; }
	DIV.csc-textpic-caption-r .csc-textpic-caption { font-size:100%; padding:3px 0 10px 0; font-style:italic; }
	DIV.csc-textpic-caption-l .csc-textpic-caption { font-size:100%; padding:3px 0 10px 0; font-style:italic; }
	
.csc-textpic-image dl{
padding-right: 50px;
}


/* Header date */ 
P.csc-header-date { font-size:0.77em; color:#186900; }

img {
border: 0px;
}

img a{
border: 0px;
}

#header-top {
left: 3px;
padding: 3px 3px 0 3px;
width: 994px;
font-size: 11px;
margin: 0px;
color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

#header-top a:link,
#header-top a:visited,
#header-top a:active {
color: #FFFFFF;
}

#header-top a:hover {
text-decoration:underline;
}

#header-top img{
float: left;
padding-right: 3px;
}

#header-top .fave {
position: relative;
padding:0px;
top:0px;
left: 765px;
margin: 0px;
font-size: 11px;
color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

.fave a:link,
.fave a:visited,
.fave a:active {
color: #FFFFFF;
}

.fave a:hover {
text-decoration:underline;
}

DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap img { border: 1px solid #999999;}

#storage {
margin: 5px;
}