/* 
2am Design : CSS for HERO
-----------------------------------------------------------------------------------------------
*/


/*****************************************************
* Global
*****************************************************/

* { padding: 0; margin: 0; }

body {
	text-align: center;
	background: #FFC700 url(../images/main-bg.jpg) no-repeat center top;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	border-top: 4px solid #000000;
}

ul,
li  { list-style-type: none; }
img { border: 0; }
a   { outline: none; }

div.clear {
	clear: both;
}

.hidden { display: none; }


/*****************************************************
* Typography
*****************************************************/

em {
	color: #666666;
}
#header h1 {
	display: block;
	height: 117px;
	width: 200px;
	position: absolute;
	left: 0px;
	top: 57px;
}
#footer-students p,
#footer p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.4em;	
	color: #666666;
}
h2 {
	text-indent: -7777px;
	height: 75px;
	display: block;
}
.container p,
.container-mall p {
	padding-left: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.4em;
	color: #000000;
	padding-bottom: 8px;
}
.what-is-hero p {
	padding-top: 15px;
}
.teachers h2 {
	margin-top: 10px;
}
.five p,
.sixteen p {
	color: #FFFFFF;
}
.five p,
.eleven p,
.sixteen p {
	padding-right: 110px;
}
.what-is-hero p,
.teachers p {
	padding-right: 530px;
}
.contact p {
	padding-top: 12px;
	padding-right: 150px;
}
.about p,
.under-construction p {
	padding-top: 12px;
	padding-right: 300px;
}
.about h2 {
	background: url(../images/about-header.gif);
	height: 46px;
	width: 744px;
}
.contact h2 {
	background: url(../images/contact-header.gif) no-repeat left top;
	height: 46px;
	width: 744px;
}
.main-text h5,
.contact h3,
.about h3 {
	padding-top: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.2em;
	color: #999999;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 20px;
	margin-right: 30px;
	margin-bottom: 3px;
	margin-left: 17px;
}
.main-text h3 {
	padding-left: 18px;
	padding-bottom: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.2em;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}
.main-text h4 {
	padding-left: 18px;
	padding-bottom: 2px;
	font-size: 18px;
	color: #FFC700;
	padding-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2em;
	font-weight: bold;
	text-decoration: none;
}
.main-text h4 a,
.main-text h4 a:visited {
	color: #FFC700;
	text-decoration: none;
}
.main-text h4 a:hover {
	color: #000000;
}
.grey {
	color: #666666;
}
.main-text-mall p.white {
	background: #FFFFFF;
	padding-top: 10px;
}
p.twoam {
	text-indent: -7777px;
	height: 16px;
	width: 120px;
}
p.twoam a,
p.twoam a:visited {
	height: 16px;
	width: 100%;
	display: block;
	background: url(../images/designed-by-2am.gif) no-repeat left top;
}
p.twoam a:hover {
	background: url(../images/designed-by-2am.gif) no-repeat left bottom;
}



/*****************************************************
* Links
*****************************************************/

#header h1 a,
#header h1 a:visited,
#header h1 a:hover {
	text-indent: -7777px;
	display: block;
	height: 117px;
	width: 100%;
}
.container a,
.container a:visited {
	font-weight: bold;
	color: #666666;
	text-decoration: underline;
}
.container a:hover {
	text-decoration: none;
	color: #000000;
}
.what-is-hero h2 a,
.what-is-hero h2 a:visited,
.teachers h2 a,
.teachers h2 a:visited {
	height: 75px;
	width: 30%;
	display: block;
}
.five h2 a,
.five h2 a:visited,
.eleven h2 a,
.eleven h2 a:visited,
.sixteen h2 a,
.sixteen h2 a:visited {
	height: 75px;
	width: 75%;
	display: block;
}
#footer-students p a,
#footer-students p a:visited,
#footer p a,
#footer p a:visited {
	text-decoration: none;
	color: #CCCCCC;
}
#footer-students p a:hover,
#footer p a:hover {
	text-decoration: underline;
}
a.mall-link,
a.mall-link:visited,
a.mall-link:hover {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: underline;
}
a.mall-terms,
a.mall-terms:visited,
a.mall-terms:hover {
	color: #666666;
	text-decoration: underline;
}

/*****************************************************
* Layout
*****************************************************/

.container,
.container-mall {
	width: 744px;
	margin-right: auto;
	margin-left: auto;
}
#header {
	width: 744px;
	margin: 7px auto 20px;
	position: relative;
	height: 175px;
	background: url(../images/hero-logo.gif) no-repeat left 57px;
}
#nav {
	background: url(../images/nav-bg.jpg) no-repeat left top;
	display: block;
	position: absolute;
	top: 5px;
	right: 3px;
	height: 59px;
	width: 556px;
}
#competition {
	position: absolute;
	right: 3px;
	bottom: 5px;
}
.what-is-hero {
	background: url(../images/what-is-hero.jpg) no-repeat left top;
	height: 226px;
	width: 744px;
	margin-bottom: 10px;
	text-align: left;
}
.five {
	background: url(../images/5-10.jpg) no-repeat left top;
	float: left;
	height: 222px;
	width: 239px;
	margin-right: 13px;
	text-align: left;
}	
.eleven {
	background: url(../images/11-15.jpg) no-repeat left top;
	float: left;
	height: 222px;
	width: 239px;
	margin-right: 14px;
	text-align: left;
}	
.sixteen {
	background: url(../images/16-18.jpg) no-repeat left top;
	float: left;
	height: 222px;
	width: 239px;
	text-align: left;
}	
.teachers {
	background: url(../images/teachers.jpg) no-repeat left 10px;
	height: 161px;
	width: 744px;
	clear: both;
	text-align: left;
}
.contact,
.about {
	width: 744px;
	text-align: left;
}
.contact {
	padding-bottom: 70px;
}
.about-text {
	width: 738px;
	border-right: 3px solid #000000;
	border-left: 3px solid #000000;
	background: #FFFFFF url(../images/about-bg.gif) repeat-x left bottom;
	padding-top: 15px;
	padding-bottom: 15px;
}
.column-right {
	float: right;
	width: 500px;
}
.float-right,
.about-text img {
	float: right;
	padding-right: 20px;
	padding-top: 10px;
}
.about-bottom {
	background: url(../images/about-footer.gif) no-repeat left bottom;
	clear: both;
	height: 17px;
	width: 744px;
}
.under-construction {
	background: url(../images/under-construction.gif) no-repeat left top;
	height: 300px;
	width: 744px;
	text-align: left;
}
#sidenav {
	background: url(../images/sidenav-bottom.gif) no-repeat left bottom;
	width: 166px;
	float: left;
	margin-top: 20px;
	padding-bottom: 18px;
}
#content {
	width: 578px;
	float: left;
	background: #FFFFFF url(../images/content-top.gif) no-repeat left top;
	padding-top: 12px;
}
.main-text {
	min-height: 300px;
	background: url(../images/content-bg-grad.gif) repeat-x left bottom;
	border-right: 3px solid #000000;
	border-left: 3px solid #000000;
	text-align: left;
	padding: 5px 20px 15px 0px;
}
.main-text-mall {
	min-height: 300px;
	background: url(../images/content-bg-grad.gif) repeat-x left bottom;
	border-right: 3px solid #000000;
	border-left: 3px solid #000000;
	text-align: left;
	padding: 5px 20px 15px;
}
.main-text-mall p {
	background: #ED007B;
}
.byob {
	width: 100%;
}
.byob-right {
	float: right;
	width: 250px;
}
#footer {
	background: #000000;
	padding-top: 20px;
	padding-bottom: 80px;
	margin-bottom: 0px;
	margin-top: 60px;
}
#footer-students {
	background: #000000;
	padding-top: 20px;
	padding-bottom: 80px;
	margin-bottom: 0px;
	margin-top: 150px;
}
#footer-content {
	width: 744px;
	margin-right: auto;
	margin-left: auto;
	background: #2D2D2D url(../images/footer-top.gif) no-repeat;
	padding-top: 40px;
}
.footer-text {
	float: left;
	padding-left: 21px;
	width: 140px;
	text-align: left;
	padding-right: 20px;
}
.footer-bottom {
	width: 744px;
	margin-right: auto;
	margin-left: auto;
	background: url(../images/footer-bottom.gif) no-repeat bottom;
	padding-top: 20px;
	clear: both;
}
#footer-info {
	text-align: left;
	padding-top: 20px;
	width: 744px;
	margin-right: auto;
	margin-left: auto;
	height: 70px;
	background: url(../images/footer-logos.gif) no-repeat right 10px;
}
blockquote {
	background: url(../images/quote.gif) no-repeat left top;
	margin-left: 30px;
	padding-top: 6px;
	margin-top: 5px;
}
.sign-up {
	background: #FFFFFF url(../images/sign-up.gif) no-repeat 10px top;
	display: block;
	float: right;
	height: 114px;
	width: 140px;
	padding-left: 10px;
}
.sign-up a,
.sign-up a:visited,
.sign-up a:hover {
	text-indent: -7777px;
	width: 100%;
	height: 114px;
	display: block;
}
.divider {
	border-bottom: 1px solid #CCCCCC;
	padding-top: 20px;
	height: 1px;
	display: block;
	margin-bottom: 20px;
	margin-left: 18px;
}


/*****************************************************
* Lists
*****************************************************/

#nav ul {
	height: 15px;
	width: 513px;
	position: absolute;
	left: 20px;
	top: 12px;
}
#nav ul li {
	float: left;
	height: 15px;
}
	#nav ul li#home { width: 47px; }
	#nav ul li#about { width: 63px; }
	#nav ul li#students { width: 81px; }
	#nav ul li#teachers { width: 81px; }
	#nav ul li#competitions { width: 108px; }
	#nav ul li#events { width: 65px; }
	#nav ul li#contact { width: 68px; }
	
		#nav ul li a, 
		#nav ul li a:visited {
			line-height: 15px;
			display: block;
			width: 100%;
			height: 15px;
			text-indent: -7777px;
			background: url(../images/buttons.gif) no-repeat;
		}
		
		#nav ul li#home a, 
		#nav ul li#home a:visited { background-position: left top; }
		#nav ul li#about a, 
		#nav ul li#about a:visited { background-position: -47px top; }
		#nav ul li#students a,
		#nav ul li#students a:visited { background-position: -110px top; }
		#nav ul li#teachers a, 
		#nav ul li#teachers a:visited { background-position: -191px top; }
		#nav ul li#competitions a, 
		#nav ul li#competitions a:visited { background-position: -272px top; }
		#nav ul li#events a,
		#nav ul li#events a:visited { background-position: -380px top; }
		#nav ul li#contact a, 
		#nav ul li#contact a:visited { background-position: right top; }
		
		#nav ul li#home a:hover   { background-position: left bottom; }
		#nav ul li#about a:hover   { background-position: -47px bottom; }
		#nav ul li#students a:hover   { background-position: -110px bottom; }
		#nav ul li#teachers a:hover   { background-position: -191px bottom; }
		#nav ul li#competitions a:hover   { background-position: -272px bottom; }
		#nav ul li#events a:hover   { background-position: -380px bottom; }
		#nav ul li#contact a:hover   { background-position: right bottom; }
		
		
#sidenav ul {
	background: #FFFF00 url(../images/sidenav-bg-grad.gif) repeat-x center bottom;
	border-left: 3px solid #000000;
	text-align: left;
	padding-bottom: 1px;
}
#sidenav ul li {
	font-size: 11px;
}
	
	#sidenav ul li a,
	#sidenav ul li a:visited {
	color: #000000;
	text-decoration: none;
	font-weight: normal;
	display: block;
	padding-top: 3px;
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 5px;
	}
	#sidenav ul li a:hover {
	text-decoration: underline;
	}
	
	#sidenav ul li.main-subject a,
	#sidenav ul li.main-subject a:visited {
	height: 19px;
	font-weight: bold;
	background: url(../images/sidenav-button.gif) no-repeat left top;
	padding-top: 8px;
	}
	#sidenav ul li.main-subject a:hover { background: url(../images/sidenav-button.gif) no-repeat left bottom; text-decoration: none; }
	
	#sidenav ul li.main-subject-new a,
	#sidenav ul li.main-subject-new a:visited {
	height: 19px;
	font-weight: bold;
	background: url(../images/sidebar-new-nav.gif) no-repeat left top;
	padding-top: 8px;
	}
	#sidenav ul li.main-subject-new a:hover { background: url(../images/sidebar-new-nav.gif) no-repeat left bottom; text-decoration: none; }
	
.main-subject-ent {
	height: 19px;
	font-weight: bold;
	background: url(../images/sidenav-button.gif) no-repeat left top;
	padding-top: 8px;
	padding-left: 10px;
}
.main-text ul {
	padding-top: 0px;
	padding-bottom: 10px;
}
.main-text li {
	list-style-image: url(../images/bullet.gif);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 2px;
	list-style-position: outside;
	margin-left: 40px;
	line-height: 1.4em;
}
.main-text li a,
.main-text li a:visited {
	text-decoration: underline;
	color: #000000;
}
.main-text li a:hover {
	text-decoration: none;
}
.main-text li.pdf {
	list-style-image: url(../images/pdf.gif);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 0px;
	list-style-position: outside;
	margin-left: 50px;
	line-height: 1.4em;
}
.main-text li.doc {
	list-style-image: url(../images/doc.gif);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-top: 10px;
	padding-left: 0px;
	list-style-position: outside;
	margin-left: 50px;
	line-height: 1.4em;
}

/*****************************************************
* Forms
*****************************************************/