@charset "UTF-8";
/* CSS Document - FOSSweb CA Homepage */

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #ffffff;
	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: #000000;
}

a {
	color: #3d3d99;
}

.fosswebca #container {
	width: 680px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #dddddd;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/*border: 1px solid #ff0000;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
}

.fosswebca #mainContent {
	padding: 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}

.fosswebca #header {
	width: 680px;
	height: 100px;
	position: relative;
	background-color: #ffffff;
}

#fossca {
	width: 640px;
	height: 100px;
	position: absolute;
	background-image: url(../images/index_logo_fossca.gif);
	background-repeat: no-repeat;
	background-position: center right;
	margin: 0 20px 0 20px;
}

#foss {
	width: 640px;
	height: 100px;
	position: absolute;
	background-image: url(../images/index_logo_foss.gif);
	background-repeat: no-repeat;
	background-position: center left;
	margin: 0 20px 0 20px;
}

#pagetitle {
	width: 640px;
	height: 100px;
	position: absolute;
	background-image: url(../images/index_fosswebca.png);
	background-repeat: no-repeat;
	background-position: 50% 30px;
	margin: 0 20px 0 20px;
}

#pagetitle h1 {
	display: none;
}

.fosswebca #boxContent {
	width: 680px;
	height: 500px;
	position: relative;
	background-color: #99cccc;
}

#boxContent a {
	text-decoration: none;
}

#boxContent a:hover {
	text-decoration: underline;
}

.link_highlighted {
	background-color: #faa57f;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 0px 5px 0px 5px;
	margin-left: -5px;
}

/* Main Content Regions */

#gradeLinks {
	width: 120px;
	height: 468px;
	position: absolute;
	left: 16px;
	top: 16px;
	background-color: #ffffff;
}

#gradeLinksMain {
	width: 100%; /* 100% of gradeLinks container */
	height: 100%; /* 100% of gradeLinks container */
}

#info {
	width: 512px;
	height: 180px;
	position: absolute;
	left: 152px;
	top: 16px;
	background-color: #ffffff;
}

#infoTitle {
	width: 437px;
	height: 25px;
	background-image: url(../images/index_info.gif);
	background-repeat: no-repeat;
	position: absolute;
	top: 15px;
	left: 15px;
}

#infoMain {
	width: 100%; /* 100% of info container */
	height: 100%; /* 100% of info container */
}

ul#info {
	width: 25em;
	height: 6em;
	position: absolute;
	top: 30px;
	left: 5px;
	list-style-image: url(../images/index_bullet.gif);
}

#specific {
	width: 512px;
	height: 200px;
	position: absolute;
	left: 152px;
	top: 212px;
	background-color: #ffffff;
}

#specificTitle {
	width: 324px;
	height: 25px;
	background-image: url(../images/index_specific.gif);
	background-repeat: no-repeat;
	position: absolute;
	top: 15px;
	left: 15px;
}

#specificMain {
	width: 100%; /* 100% of specific container */
	height: 100%; /* 100% of specific container */
}

ul#specific {
	width: 25em;
	height: 7em;
	position: absolute;
	top: 30px;
	left: 5px;
	list-style-image: url(../images/index_bullet.gif);
}

#footer {
	width: 512px;
	height: 56px;
	position: absolute;
	left: 152px;
	top: 428px;
	background-color: #ffffff;
}

#footerMain {
	width: 100%; /* 100% of footer container */
	height: 100%; /* 100% of footer container */
	font-size: 0.7em;
	text-align: center;
	padding-top: 1.1em;
}

/* Grade Level Buttons */

.gradeButton {
	width: 156px;
	height: 64px;
	background-image: url(../images/index_grades_inactive.png);
	background-repeat: no-repeat;
	position: absolute;
	cursor: pointer;
}

.gradeButton a {
	display: none;
}

.gradeButton:hover {
	background-image: url(../images/index_grades_hover.png);
}

.gradeButton#gradeK {
	background-position: 0 0px;
	top: 10px;
	right: 0;
}

.gradeButton#grade1 {
	background-position: 0 -64px;
	top: 74px;
	right: 0;
}

.gradeButton#grade2 {
	background-position: 0 -128px;
	top: 138px;
	right: 0;
}

.gradeButton#grade3 {
	background-position: 0 -192px;
	top: 202px;
	right: 0;
}

.gradeButton#grade4 {
	background-position: 0 -256px;
	top: 266px;
	right: 0;
}

.gradeButton#grade5 {
	background-position: 0 -320px;
	top: 330px;
	right: 0;
}

#instructions {
	width: 112px;
	height: 2.6em;
	position: absolute;
	top: 414px;
	right: 0;
	font-size: 0.5em;
	font-style: italic;
	text-align: center;
	padding: 0 4px 0 4px;
	
}

#boilerplate {
	width: 680px;
	position: absolute;
	bottom: -3.5em;
	left: 0;
	font-size: 0.6em;
}
	
img#exlink {
	padding: 0 4px 0 4px;
}