@charset "UTF-8";

/* I don't know where much of this commenting came from. But thanks for it! -AMF */


body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #CCC;
	background-image:url('background_stripes.png');
	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;
}



.screen #container {
	width: 95%;  /* this will create a container 95% of the browser width */
	background: #FFFFFF;
	margin: 10px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #333;
	text-align: left; /* this overrides the text-align: center on the body element. */
	/*webkit radius*/
	-webkit-border-top-right-radius: 16px;
	-webkit-border-top-left-radius: 16px;
	-webkit-border-bottom-right-radius: 16px;
	-webkit-border-bottom-left-radius: 16px;
	/*mozilla radius*/
	-moz-border-radius-topright: 16px;
	-moz-border-radius-topleft: 16px;
	-moz-border-radius-bottomright: 16px;
	-moz-border-radius-bottomleft: 16px;
	/*css3 radius*/
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;		
}


.screen #header {
	background: #97A5B4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fefffe), to(#97a5b4));/*webkit*/
	background: -moz-linear-gradient(top, #fefffe, #97a5b4);/*mozilla*/
	padding: 0 10px 0 20px;  /* 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. */
	-webkit-border-top-right-radius: 16px;
	-webkit-border-top-left-radius: 16px;
	-moz-border-radius-topright: 16px;
	-moz-border-radius-topleft: 16px;
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
}
.screen #header h1,h2,h3 {
	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 */
	text-shadow: 0px 1px 0px #fff;
}
.screen #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
}
.screen #footer { 
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#97A5B4;
	font-size: 80%;
	color: #333;	
	-webkit-border-bottom-right-radius: 16px;
	-webkit-border-bottom-left-radius: 16px;
	-moz-border-radius-bottomright: 16px;
	-moz-border-radius-bottomleft: 16px;
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;

} 
.screen #footer p {
	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 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

#header form {
	float: right;
	font-size: 9px;
	margin-right: 0px;
	margin-top: 12px;

	}
	
#header a {
	text-decoration: none;
	color:#FFF;
    text-shadow: 0px 1px 0px #000;
}

#header a:hover {
	color:#000;
	text-shadow: 0px 1px 0px #FFF;
}

#footerLinks {
	float: right;
	margin-top: 10px;
	margin-right: 0px;
}

#footer a {
	text-decoration: none;
	border: 1px solid #999;
	padding: 4px;
	background: #EEE;
	min-width:100px;
	color: #333;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}


#footer a:hover {
	background: #999;
	color: #CCC;
}




.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}



/*##############HOME SECTION PIECES##############*/


.homeSection {
	width: 96%;
	font-size: 80%;
	border: 1px solid #97A5B4;
	margin: 2%;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	
	
	
	
	
}

.sectionTitle {
	background: #D1DCEE;
	text-align: center;
	text-shadow: 0px 1px 0px #fff;
	font-weight: bold;
	padding: 5px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;


}


.homeSection iframe {

	float: right;
	position: relative;

}




.sectionTitle form {
	font-weight:normal;
	font-size:80%;
	padding: 2px;
	
}




.sectionFooter {
	background: #CCC;
	text-align: center;
	text-shadow: 0px 1px 0px #fff;
	padding: 2px;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.homeSection p {
    padding: 6px 5px;
}


.signme a {
	text-decoration: none;
	border: 1px solid #999;
	padding: 4px 4px;
	background: #D1DCEE;
	min-width:100px;
	color: #000;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

canvas
{
  display: block;
  margin: 0 auto;
    border: 1px solid #97A5B4;
}



button
{
  font: 14px/20px "Verdana", helvetica, sans-serif;
}
#buttons a:active
{
  text-decoration: underline;
}
#buttons
{
  position: relative;
  width: 768px;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}
#buttons a
{
  position: absolute;
  top: 11px;
  right: 8px;
  color: #000;
  text-decoration: none;
}
button
{
  height: 26px;
  padding: 0 22px;
  margin: 8px 22px 8px 0;
  -webkit-box-shadow: 0 1px 1px #000;
  border: 1px solid #888;
  border-color: #777 #666 #555 #666;
  -webkit-border-radius: 4px;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#999));
  color: #000;
  font-weight: bold;
}
button:active,
button.current
{
  border-color: #555 #666 #777 #666;
  background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#666));
}

















.signme a:hover {
	background: #999;
	color: #FFF;
}



.homeSection ul {
	list-style: none;
	width: 100%;
	padding: 0;
	margin:0;

}

.listMain {
	font-weight: bold;
}
.listSub1 {
	color: #999;
}

.homeSection ul li {
	border-bottom: 1px solid #97A5B4;
	margin-bottom: -1px;
	padding: 6px 5px;
}


.homeSection ul li:first-child {
	border-top: 1px solid #97A5B4;
}


.homeSection ul li a {
	text-decoration: none;
    color:#225290;


}


.homeSection ul li a:hover {
	font-weight:bold;


}