/* Hometown Heroes Stylesheet */

/*Reset*/
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
del,ins{text-decoration:none;}
a:link, a:visited, a:hover, a:active {outline:none;border: none;text-decoration: none; color: #29ABE2;} 

/* Base Typography */
body {	font-family: helvetica, helvetica nue, arial, sans-serif; font-size: 100%;}
h1, h2, h3, h4 { text-transform: uppercase;}
H1 {font-size:24px; line-height:28px; font-weight: bolder;letter-spacing: -.05em;}  
H2 {font-size:20px;line-height:24px;} 
H3 {font-size:18px;line-height:20px;} 
H4 {font-size:16px;line-height:20px;} 
p, li { font-size:12px;line-height:18px;}
p {margin-bottom: 10px;}

a:link {color: #29ABE2; text-decoration: none;}
a:hover {color: black; text-decoration: none;}


/* UTILITY */
br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */
.floatLeft {float: left;}
.floatRight {float: right;}
.clear {clear: both;}

/* Base Structure */	

html {background: #F2F2F2 url("images/gradient-bg.png") repeat-x top left;}
body {	background: url("images/bg.png") repeat-x top center;height: 100%;}

#page-wrap {
		width: 960px;
		margin: 0 auto;
		min-height: 500px;
		position: relative;
}

/*Header*/

#header {
		border-bottom: 7px solid black;
		background: url('images/city.png') no-repeat bottom right;
		height: 150px;

}

#header h1 {
		display: block;
		padding-top: 60px;
		background: url('images/hometown-heroes.png') no-repeat left bottom;
		text-indent: -30000px;
}

/*Main Nav*/
#nav-container {
		z-index: 10;
}

#main-nav {
		float: left;
		width: 184px;
		z-index: 10;
		top: 0px;
		margin-top: 10px;
		padding-top: 0px;		
}

#main-nav li:first-child{
		padding-top: 10px;
		background: white;
}

#dropdown-menu li:first-child {
		padding: 0px;
}

#main-nav a, #ourheroes {
		display: block;
		padding: 5px 0;
		color: black;
		font-weight: bold;
		width: 100%;
		background: white;
		text-decoration: none; 
		text-indent: 10px;
		text-transform: uppercase;
}

#dropdown-menu li > a:visited {
		color: gray;
}

#main-nav a:hover {		
		background: #77D2F7;
		color: white !important;
}

#dropdown-menu li a{
		background: white;
		margin: 0px 0px 0px 0px;
		color: black;
		text-transform: none;
		font-weight: normal;
		text-indent: 20px;
}

a#ourheroes:hover {
		background: white;
		color: black !important;
}

#ourheroes li, #dropdown-menu li{
		font-size: 1em;
		text-transform: uppercase;
}

/*
#main-nav li > ul {
		display:none;
}

#main-nav li:hover > ul {
		display:block;
		padding-bottom: 20px;		
}
*/

/*Main Content*/

#main-content{
		color: black;
		background: url('images/tile.png') repeat left top ;

}

#content-bg {
		position: absolute;
		width: 775px;
		height: 685px;
		background: url("images/largerthanlife.png") no-repeat top right;
		z-index: 0;
		top: 55px;
		left: 186px;
		text-indent: -30000px;
}

#thumbs {
		margin: 10px 0px 0px 184px;
		position: relative;
		z-index: 5;
}

#thumbs  img{
		margin: 0px 0px 10px 10px;
		width: 184px;
		height: 184px;
		float: left;
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
		-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
		-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
		filter:alpha(opacity=20);
		-moz-opacity:0.2;
		-khtml-opacity: 0.2;
		opacity: 0.2;
		
		-moz-transition-property: opacity;
		-moz-transition-duration: 1s;
		-moz-transition-timing-function: ease-out;
		-webkit-transition-property: opacity;
		-webkit-transition-duration: 1s;
		-o-transition-property: opacity;
		-o-transition-duration: 1s;
}

#thumbs img:hover {
		filter:alpha(opacity=100);
		-moz-opacity:1;
		-khtml-opacity: 1;
		opacity: 1;
}	


/*Single Page*/
#single-page #main-content {
		margin: 10px 0px;
		background: url('images/tile.png') repeat left top;
}

#single-page #main-content img, #map #main-content img  {
		float: left;
		margin-left: 10px;
		max-width: 766px;
		max-height: 766px;
		background: white;
		box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.4);
		-webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.4);
}

#hero-desc, #hero-desc-alt {
		margin: 0px 0px 0px 0px;
		background: white;
		padding: 10px;
		float: right;
		width: 164px;
		min-height: 420px;
}

#hero-desc-alt {
		width: 358px;
		min-height: 358px;
		margin-top: 10px;
}

img#map{
		border: 10px white solid;
		width:	746px !important;
}

ul#map-list {
		position: absolute;
		z-index: 20;
		bottom: 30px;
		left: 230px;
		background: #77D2F7;
		background: rgba(119,210,247,.7);
		padding: 10px 10px 10px 40px;
		color: #333;
		list-style-type: decimal !important;
		font-weight: bold;
}

ul#map-list li {
		list-style-type: decimal;
}

#about-us, #trojan-horse {
		background: white;
		margin-left: 194px;
		padding: 10px;
		min-height: 746px;
}

#trojan-horse {
		min-height: 938px;
}



.text-block {
		margin-bottom: 20px;
}

#horse-image {
		width: 379px;
		margin-left: -10px !important;
		margin: -10px 20px 10px 0px;
}


/*Footer*/

#footer {
		border-top: 7px solid black;
		padding-top: 10px;
		margin-bottom: 10px;
		width: 960px;
}

.footer-links {
		width: 164px;
		height: 164px;
		background: white;
		float: right;
		margin-left: 10px;
		padding: 10px;
}

.footer-links  span{
		color: #29ABE2;
}

#merch-link {
		background: white url('images/arrow.png') no-repeat 115px 135px;
		/*background: white url('images/thumbs/horse.jpg') no-repeat -13px 59px;*/
}

#alt-visions {
		float: left;
		display: block;
		width: 150px;
		height: 21px;
		background: url('images/alt-visions.png') no-repeat top left;
		text-indent: -30000px;
		filter:alpha(opacity=10);
		-moz-opacity:0.1;
		-khtml-opacity: 0.1;
		opacity: 0.1;
		-webkit-transition: opacity 1s;
}

#alt-visions:hover {
		filter:alpha(opacity=100);
		-moz-opacity:1;
		-khtml-opacity: 1;
		opacity: 1;
		-webkit-transition: opacity .5s;
}