/* 	haywardwilliams.com
	by matthew brown
	@ www.sansink.com
*/

/* reset css */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;
	font-style: inherit;font-size: 100%;font-family: inherit;
	vertical-align: baseline;}
/* remember to define focus styles! */
:focus {outline: 0;}
ol, ul, li {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* end reset css */

body { 
	background:#000 url(images/topbg.jpg) repeat-x;
	font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #FFFAE6;
}
a, a:visited {color:#FFFAE6; text-decoration:underline;}
a:hover{color:#E3B671; text-decoration:underline}
#bottombg {
	position:absolute;
	top:730px;
	left:0px;
	width:100%;
	height:405px;
	background:#000 url(images/bottombg.jpg) repeat-x;
}
#container {
	position:relative;
	margin:0 auto;
	width:960px;
	overflow:hidden;
}
#header {position:relative; width:100%;} 
	#logo {
		width:337px;
		margin-top:25px;
		float:left;
	}
	#navigation {
		width:505px;
		margin:50px 0 0 113px;
		padding:0 3px 7px 2px;
		float:left;
		background:url(images/hdot.gif) bottom repeat-x;
	}
		#nav {
			width:505px;
			height:20px;
			background:url(images/navigation.gif);
			position:relative;
		} 
			#nav li {position:absolute; top:0;}
			#nav li, #nav a {display:block; height:20px;}
				#nav1b {left:0; width:80px;}
				#nav1b a:hover {background: transparent url(images/navigation.gif) 0 -20px no-repeat;}
				#nav2b {left:81px; width:110px;}
				#nav2b a:hover {background: transparent url(images/navigation.gif) -81px -20px no-repeat;}
				#nav3b {left:192px; width:100px;}
				#nav3b a:hover {background: transparent url(images/navigation.gif) -192px -20px no-repeat;}
				#nav4b {left:293px; width:112px;}
				#nav4b a:hover {background: transparent url(images/navigation.gif) -293px -20px no-repeat;}
                                #nav5b {left:405px; width:100px;}
				#nav5b a:hover {background: transparent url(images/navigation.gif) -405px -20px no-repeat;}
			
			
.homelink {
	height:20px; 
	width:93px;
	position:relative; 
	top:20px; 
	left:10px;
}
.homelink a {text-decoration:none; font-size:14px;}
		
			
#mainslider{height:570px; width:960px; position:relative; overflow:hidden;}
  .scrollContainer{height:570px; width:4800px; position:relative;}
	#homepage {height:570px; width:960px; float:left; position:relative;}			
		#mainimages {width:100%;}
			#cdcover {width:317px; height:290px; margin-top:50px; float:left;}
			#photos {
				width:397px;
				height:307px;
				margin-top:37px;
				margin-left:33px;
				float:left;
				background:url(images/photo.png) no-repeat;
			}
				#slideshow {width:302px; height:228px; margin:42px 0 0 50px; overflow:hidden;}  
					#slideshow img {width:  302px; height: 228px; top:  0; left: 0;} 
			#haywardface {
				width:205px;
				height:355px;
				margin-top:15px;
				margin-left:5px;
				float:left;
			}
		#content {width:100%;}
			#textleft {width:390px; height:200px; float:left;}
				#cdtext {width:360px; height:90px; padding:15px; background:url(images/transbg.png) repeat;}
				#musicplayer {
					width:370px;
					margin-top:15px;
					padding:10px;
					height:45px;
					background:url(images/transbg.png) repeat;
                                        text-align:left;
				} 
			#textright {
				margin-left:15px;
				padding:15px 20px;
				width:515px; 
				height:170px;
				background:url(images/transbg.png) repeat;
				float:left; 
				text-align:justify;
                                font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
				line-height:24px;
			}
			
		
		
		
		
	#musicpage{height:570px; width:960px; float:left; position:relative; font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important;}
		#cds{width:100%; margin-top:30px;}
			#cottonbell, #anothersailor, #trenchfoot{float:left;width:226px; height:201px; margin-right:20px; text-align:center;}
			#uphill {float:left;width:220px; height:201px;}
		#cdtracks{width:100%;margin-top:10px;}
			#cottonbelltracks, #sailortracks, #trenchfoottracks{
				float:left;
				width:180px;
				padding:10px 20px;
				height:290px; 
				background:url(images/transbg.png) repeat;
				margin-right:26px;
				text-align:center;
			} 
			#uphilltracks {
				float:left;
				width:175px;
				padding:10px 20px;
				height:290px; 
				background:url(images/transbg.png) repeat;
				text-align:center;
			}
		#cdtracks div p {text-align:left;line-height:20px;} 
		.buyCD{font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; display:inline-block; margin-top:5px;}
	
	
	 


            #presspage{height:570px; width:960px; float:left; position:relative; font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important; text-align:left!important;}
                #pressContent{width:960px; margin-top:20px; height:530px; overflow:auto; }
                #pressContent h2{font:bold 22px Arial, Helvetica, sans-serif;color:#efd6a9;margin:10px 0 20px 0;}
                .pressArticle{float:left; width:900px; padding:25px 20px; margin-bottom:10px; background:url(images/transbg.png) repeat;}
                .pressArticle .imageLink{width:100px;}
                .pressArticle h3{font-size:18px;}
                .pressArticle p{margin-left:20px;}
                .articleLink{display:block; text-align: right;}

	
	#linkspage{height:570px; width:960px; float:left; position:relative; font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important; text-align:left!important;}
		#linkscontent{width:100%; margin-top:20px;}
			.linksinfo {float:left; width:430px; height:460px; padding:25px 20px; margin:30px 10px 0 0; background:url(images/transbg.png) repeat;}
			.linksinfo h2{margin-left:10px;}
	
	
	
	
	
	
	
	
	
	#contactpage{height:570px; width:960px; float:left; position:relative; font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important; text-align:left!important;}
		#contactcontent {width:100%; margin-top:50px;}
			#contactinfo {float:left; width:375px; height:460px; padding:10px 20px; background:url(images/transbg.png) repeat;}
				#contactinfo p {margin-left:15px;}
			#contactform {float:left; width:500px; height:400px; margin-left:35px;} 
				#nameinput, #emailinput {
					background:url(images/finput.jpg) no-repeat; 
					border:none; 
					width:324px; 
					height:16px; 
					padding:8px 10px;
					font-size:14px;
				}  
				#commentinput {
					background:url(images/flargeinput.jpg) no-repeat;
					border:none;
					width:464px;  
					height:202px;
					padding:10px;
					font-size:14px;
					overflow:auto;
				}
				#bottest {
					width:80px;				
					margin-right:80px;
				}
				#bademail, #badserver, #badcomment, #badbot {color: #900; font-weight:bold; font-size:15px;}
				#success{color:#090; font-size:15px;}
				
		
		
		
		
#headings {width:100%; margin-top:60px;}
	#hdnews {width:30%; height:40px; float:left; text-align:center;}
	#hdabout {width:30%; height:40px; float:left; text-align:center;}
	#hdshow {width:40%; height:40px; float:left; text-align:center;}
#information {width:100%; margin-top:10px;}
	#news {
		width:29%;
		height:310px;
		float:left;
		background:url(images/vdot.png) repeat-y right;
		overflow:hidden;
	}
		#newsscroll{height:260px;}
			#newsitems {height:260px; font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important; text-align:left!important;}
				#newsitems div {
					margin-bottom:15px;
					line-height:20px;
				}
				#newsitems p { 
					line-height:20px;
					color:#ffeed3;
					margin:0 15px;
				}
		.items{position:absolute;}
                .items div{min-height:180px; width:270px;}
		.scrollable{position:relative; overflow:hidden;} 
		.prev, .next{
			display:block;
			width:40px;
			height:20px;
			background:url(images/prev.png) no-repeat;
			cursor:pointer;
			margin:0 auto 5px auto;
		} 
		.next {
			background-image:url(images/next.png);
			margin:5px auto 0 auto;
		}
		.next:hover {
			background: transparent url(images/next.png) 0 -21px no-repeat;		
		}
		.prev:hover{
			background: transparent url(images/prev.png) 0 -21px no-repeat;		
		}
	
		a.disabled {
		visibility:hidden !important;		
		} 
		
		
		
		
	#shows {
		width:40%; 
		height:310px;
		overflow:auto;
		float:left;
		position:relative;
		background:url(images/vdot.png) repeat-y right;
                font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important; text-align:left!important;
	} 
		#shows div{padding:0;background:url(images/hdot.png) top repeat-x; margin:0 5px;}
		#shows div span{padding:12px 0 9px 0;}
		.date,.state,.location{float:left;}
		.date{margin-left:4px;width:70px;}
		.state{margin-left:5px; width:105px;}
		.location{margin-left:5px; width:165px;}
		.tophd {display:block; padding-bottom:25px;}
		 
		
		
		
		
	#aboutme {
		width:29%;
		height:310px;
		float:left;
	}
		#aboutme h2{
			margin:10px;
		}
		#aboutme p {
			line-height:20px;
			color:#ffeed3;
			margin:0 15px;
		}
		#aboutme img{padding-right:10px;}
		
#footer {width:100%; margin-top:35px; text-align:center; height:30px;}
	#footer a{margin:0 8px 0 8px; text-decoration:none;}
	#footer a:hover{text-decoration:underline;}
	.webdev{margin-bottom:-8px;}
	.webdev img{vertical-align:middle;}
	
.padright10 {padding-right:10px;}
.padleft10 {padding-left:10px;}
.floatr {float:right;}
.floatl {float:left;}
.clear {clear:both;}
.large {font-size:17px; font-weight:bold;}
.heading {font-size:14px; font-weight:bold;}
.font13 {font-size:13px;}
.font14 {font-size:14px;}
.center {text-align:center;}
.txtright {text-align:right;}
.margin10right {margin-right:10px;}
.margin25right {margin-right:25px;}
.margin10top {margin-top:10px}
.txtleft {text-align:left;}
h1 {font-size:17px; font-weight:bold; margin:5px; display:inline;}
h2 {font-size:14px;	font-weight:bold; line-height:26px;}
h3 {font-size:13px; font-weight:bold; margin:5px; display:inline;}