@charset "UTF-8";

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: small;
	padding: 0;
	margin: 0;
	text-align: center;
	/* background: #AED9EC url(images/page_background.gif) repeat-y center top; */
	background: #AED9EC;
}

* html body { /* exploits a bug in IE, enables us to send an IE-only rule */
	font-size: x-small; /* for IE5/Win */
	f\ont-size: x-small; /* for other IE versions */
}

/* page tag styles */

a { 
	color: #11A1D0;
}

a:visited {
	color: #BC7FDC;
}

/* page structural styles */

/* overall surrounding style */
#container 
{
	font-size: 95%;
	width: 760px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 400px;
	display: block;
	padding: 0;
	text-align: left;
	background: #FFF url(images/pei_parents_header.jpg) no-repeat top left;
	color: #666;	/* overall, default text color */
}

/* page header */
#header
{
	/* height: 120px; */
}

/* right justified information */
#sidebar
{
	float: right;
	width: 250px;
	margin: 0 0 100px 0;
	padding: 15px 0 0 15px;
}

/* main textual content of site */
#contents 
{
	clear: left; /* puts element on its own line */
	margin: 0px 260px 60px 25px;
	padding-top: 15px;
	/* width: 490px; /* is width needed? */
	line-height: 165%;
	font-size: 100%;
	color: #777;
}

/* headline area */
#infolead
{
	margin: 0 0 10px 0;
	padding: 0px 0px 45px 185px;
	line-height: 165%;
	font-size: 110%;
	background: url(images/infolead_background.jpg) no-repeat left bottom;
}

#footer	
{
	clear: both; /* IMPORTANT: clears above columns */
	text-align: left;
	margin: 0px;
	/* margin-left: 200px; */
	background: url(images/pei_parents_footer.jpg) repeat-x bottom;
	padding: 0 0 0 200px;
	height: 125px;
	font-size: 85%;
}

/* main navigation styles */

#nav {
	float: left;
	clear: left; /* puts element on its own line */
	width: 710px;
	margin: 0;
	padding: 4px 0 0 50px; /* indents the tabs */
	list-style: none;
	background: #FFF url(images/bottom_line.gif) repeat-x bottom left; /* background color */
	border: 1px;
	/* next element will need a clear: left property */
}

#nav li {
	float: left;
	margin: 0;
	padding: 0;
	font-size: 120%;
}

#nav a {
	float: left; /* makes elements horizontal */
	display: block; /* makes the entire tab clickable */
	margin: 0;
	padding: 6px 14px 5px 14px;
	color: #777;
	text-decoration: none;
	/* border: 1px solid #9B8748; */
	border-bottom: none;
	background: url(images/nav_divider.gif) no-repeat right top;	
	/* took out the background color to make tabs have bottom border */
	
}

#nav a:hover { 
	padding-bottom: 5px;
	/* increased padding on bottom (4 to 5) overlaps on background border */
	color: #FFF;	
}

#nav #t-home a:hover, #nav #t-home .current {
	background: #FFF url(images/tab_blue.gif) repeat-x top right;
	color: #FFF;
}

#nav #t-about a:hover, #nav #t-about .current {
	background: #FFF url(images/tab_orange.gif) repeat-x top right;
	color: #FFF;
}

#nav #t-events a:hover, #nav #t-events .current {
	background: #FFF url(images/tab_khaki.gif) repeat-x top right;
	color: #FFF;
}

#nav #t-activities a:hover, #nav #t-activities .current {
	background: #FFF url(images/tab_purple.gif) repeat-x top right;
	color: #FFF;
}

#nav #t-tips a:hover, #nav #t-tips .current {
	background: #FFF url(images/tab_light_orange.gif) repeat-x top right;
	color: #FFF;
}

#nav #t-programs a:hover, #nav #t-programs .current {
	background: #FFF url(images/tab_green.gif) repeat-x top right;
	color: #FFF;
}

#nav #t-contact a:hover, #nav #t-contact .current {
	background: #FFF url(images/tab_light_blue.gif) repeat-x top right;
	color: #FFF;
}

/* submenu navigation styles */
/* at present, just for the activities section */

#subnav { /* applied to containing ul */
	clear: left; /* puts element on its own line */
	float: left;
	width: 90%; /* if no width stated, will only be as wide as contents force it to be, shows background */
	/* when floating items inside a container w. background, restore background by floating it as well */
	margin: 0;
	list-style: none;
}

/* padding-left: 140px; */

#subnav li {
	float: left; /* opposing float: opposite ends of the row */
	margin: 0px;
	padding: 0px;
	font-size: 100%;
}

#subnav a {
	float: left; /* makes elements horizontal */
	display: block; /* makes the entire tab clickable */
	margin: 0;
	padding: 5px 20px 5px 30px;
	color: #CCC;
	text-decoration: none;
	border-bottom: none;
}

body#about #subnav {
	padding-left: 40px;
}

body#activities #subnav {
	padding-left: 140px;
}

#subnav .subabout a {
	background: url(images/sub_orange.gif) repeat-x left bottom;
}

#subnav .activities a { 
	background: url(images/sub_purple.gif) repeat-x left bottom;
}

#subnav a:hover, #subnav .current { 
	color: #FFF;
}

/* header styles */

#header h1
{
	font-size: 200%;
	padding: 90px 0px 5px 200px;
	margin: 0px;
}
/* used for upper titles */

/* styles for listed events */
#sidebar dd 
{
	margin: 0 20px 5px 0;
	padding: 0 0 5px 15px;
	font-size: 90%;
}

#sidebar dt {
	margin: 0 20px 0 0;
	padding: 5px 0 0 15px;
	font-size: 90%;
}

#sidebar .current {
	background: #FFFFE5 url(images/news_events_indicator.gif) no-repeat left top;			
}

/* sidebar styles */

#sidebar h3 {
	font-weight: bold;
	padding: 0;
	margin: 20px 0 8px 0;
	font-size: 120%;
}

/* contents styles */

#contents.activities {
	padding-bottom: 240px;
	background: url(images/illustr_drawing.jpg) no-repeat right bottom;
} 
/* places an illustration at the bottom of the layer */

#contents h2 {
	font-weight: bold;
	padding: 0 0 2px 0;
	margin: 4px 0 0 0;
	font-size: 140%;
}

/* page titles, with color indication 
can be used with different headers */

.home_title {
	color: #11A1D0;
}

.about_title { 
	color: #E78F3E;
}

.events_title {
	color: #85962D;
}

.activities_title {
	color: #BC7FDC;
}

.tips_title {
	color: #DDB225;
}

.programs_title {
	color: #8ED328;
}

.contact_title {
	color: #AED9EC;
}

.article {
	padding: 5px 0 5px 0;
}

.title {
	font-weight: bold;
	padding-bottom: 2px;
	font-size: 110%;
}

.dateplace {
	font-style: italic;	
}

#contents li {
	list-style-image: url(images/list_divider.gif);	
}


/* footer styles */

#footer .column
{
	float: left;
	width: 180px;
	margin-bottom: 10px;	
}