/* - - - - - - - - - - - - - - - - - - - - -

Title : LoudCity.net
Author : Tony Yoo
URL : http://www.tonyyoo.com

Description : Default stylesheet

Created : 12/06/06
Modified : 12/06/06

- - - - - - - - - - - - - - - - - - - - - */

/* ----- CSS ----- */

html {
	background: #eff0ee;
}

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: small;
	color: #565953;
	background: #fff url(../images/bodyBG.gif) repeat-x top left;
}



/* ----- header ----- */

#header {
	position: relative;
	margin: 0 auto;
	margin-bottom: 12px;
	height: 140px;
	background: transparent url(../images/header.jpg) no-repeat top left;
}
	#header h1{
		position: relative;
		margin: 0;
		padding: 0;
	}
		#header h1 a {
			position: absolute;
			top: 38px;
			left: 10px;
			display: block;
			width: 185px;
			height: 74px;
			text-indent: -9000px;
			background: transparent url(../images/logo.gif) no-repeat top left;
		}
	#header ul {
		position: absolute;
		top: 83px;
		left: 210px;
		width: 611px;
		height: 38px;
		margin-top: 0;
		float: left;
		list-style: none;
	}
		#header ul li {
			text-indent: -9999px;
			display: inline;
			margin: 0;
			padding: 0; 
		}
	
			#header ul li a {
				color: #afad92;
				float: left;
				text-decoration: none;
				background: transparent url(../images/mainNav.gif) no-repeat;
			}
			#header li#home a {
				width: 154px;
				height: 38px;
			}
			#header li#broadcasters a {
				width: 154px;
				height: 38px;
			}
			#header li#artists a {
				width: 154px;
				height: 38px;
			}
			#header li#aboutUs a {
				width: 149px;
				height: 38px;
			}
		
			#header li#broadcasters a:link, #header li#broadcasters a:visited {
				background-position:-154px 0px;
			}
			#header li#artists a:link, #header li#artists a:visited {
				background-position:-308px 0px;
			}
			#header li#aboutUs a:link, #header li#aboutUs a:visited {
				background-position:-462px 0px;
			}
			
			#header li#home a:hover, #header li#home a:focus {
				background-position:0px -38px;
			}
			#header li#broadcasters a:hover, #header li#broadcasters a:focus {
				background-position:-154px -38px;
			}
			#header li#artists a:hover, #header li#artists a:focus {
				background-position:-308px -38px;
			}
			#header li#aboutUs a:hover, #header li#aboutUs a:focus {
				background-position:-462px -38px;
			}
	
			/*----- MAIN NAVIGATION ACTIVE STATE -----*/

			.home #container #header li#home a {
				background-position: 0px -38px;
			}
			.broadcasters #container #header li#broadcasters a {
				background-position: -154px -38px;
			}
			.artists #container #header li#artists a {
				background-position: -308px -38px;
			}
			.about #container #header li#aboutUs a {
				background-position: -462px -38px;
			}


#containerLeft, #containerRight {
	position: absolute;
	top: 0px;
	width: 1px;
	height: 359px;
}
	#containerLeft {
		top: 18px;
		left: 0px;
		background: transparent url(../images/containerSideBorder.gif) repeat-x top left;
	}
	#containerRight {
		top: 18px;
		right: 0px;
		background: transparent url(../images/containerSideBorder.gif) repeat-x top right;
	}

/* ----- container ----- */

#container {
	position: relative;
	margin:  0 auto;
	width: 850px;
	font-size: 110%;
	background: transparent url(../images/containerBG.gif) repeat-x top left;
}
	#container .gutter {
		position: relative;
		padding: 22px;
	}
	
/* ----- bottom content ----- */

#bottomWrapper {
	margin: 0px 0 0px 0;
	padding: 24px 0 0 0;
	background: #eff0ee url(../images/bottomBG.gif) repeat-x top left;
}

#bottomContent {
	margin: 0 auto;
	width: 850px;
	color: #797979;
}
	#bottomContent #bottomNav {
		float: left;
		display: inline;
		margin: 0px 0px 30px 0px;
		background: transparent url(../images/bottonNavLine.gif) repeat-y top left;
	}
	#bottomContent ul li {
		width: 283px;
		margin: 0;
		float: left;
	}
	#bottomContent ul, #bottomContent ul li {
		margin-left: 0;
		padding-left: 0;
		list-style: none;
	}
	#bottomContent h4 {
		color: #c25b00;
		margin-top: 0px;
		margin-bottom: 6px;
		margin-left: 20px;
	}
	#bottomNav {
		margin-top: 0;
		padding: 0;
	}
	#bottomNav li ul {
		margin-top: 0;
		margin-left: 20px;
	}
	#bottomNav li ul li {
		width: 100%;
		margin: 3px 0;
		border: none;
		background: none;
	}
	#bottomContent ul li a {
		padding-left: 15px;
		font-weight: normal;
		color: #797979;
		background: transparent url(../images/bottonNavBullet.gif) no-repeat center left;
	}
	#bottomContent ul li a:hover {
		color: #5a5a5a;
	}


/* ----- footer ----- */

#footer {
	margin: 0 0 20px 0;
	padding-right: 16px;
	clear: left;
	color: #fff;
	text-align: right;
	line-height: 37px;
	background: transparent url(../images/footerBG.gif) no-repeat center left;
}
	#footer a {
		color: #bfe687;
	}


/* ------ home ----- */

.home #container #header {
	margin-bottom: 0;
}
.home #container #containerLeft, .home #container #containerRight {
	background-image: url(../images/homeContainerSideBorder.gif);
}
.home #container #headerImage {
	margin-top: 10px;
	z-index: 0;
	width: 850px;
	height: 213px;
	background: transparent url(../images/homeHeaderImage1.jpg) no-repeat top left; /* change home header image here */
}
	.home #container #headerImage h2 {
		display: block;
		margin: 0;
		padding: 60px 0 0 30px;
		color: #fff;
		font-size: 180%;
		background: none;
	}
	.home #container #headerImage strong {
		margin: 12px 0 0 30px;
		display: block;
		width: 550px;
		line-height: 1.4em;
		font-weight: normal;
		font-size: 120%;
		color: #ffda5b;
	}
.home #container #secondaryNav {
	width: 850px;
	float: left;
	background: #e3e8cf url(../images/secondaryNavBG.gif) repeat-x bottom left;
}
	.home #container #secondaryNav a {
		width: 283px;
		float: left;
		font-weight: normal;
		color: #686f5a;
	}
	.home #container #secondaryNav a:hover h3, .home #container #secondaryNav a:hover {
		color: #383838;
	}
	.home #container #secondaryNav h3 {
		margin: 0;
		margin-top: 20px;
		margin-left: 12px;
		padding-left: 34px;
		color: #5b5b5b;
		font-weight: normal;
		font-size: 140%;
		line-height: 36px;
		background: transparent url(../images/secondaryNavTitleBG.gif) no-repeat center left;
	}
	.home #container #secondaryNav a {
		position: relative;
	}
		.home #container #secondaryNav a span {
			position: absolute;
			top: 12px;
			left: -8px;
			display: block;
			width: 51px;
			height: 53px;
			background: transparent url(../images/bigArrow.png) no-repeat top left;
		}
	.home #container #secondaryNav ul {
		margin-left: 39px;
		margin-right: 44px;
		margin-bottom: 48px;
	}
		.home #container #secondaryNav ul li {
			margin-top: 10px;
			padding: 0;
			list-style-image: none;
		}
.home #bottomWrapper {
	margin-top: 0px;
}
	




/* ----- broadcasters -----*/

.broadcasters #container h3.first {
 	margin-top: 30px;
	margin-bottom: 0;
	padding: 0;
	color: #393a39;
	font-weight: normal;
	font-size: 130%;
	background: none;
}
.broadcasters #container ul li {
	margin-top: 5px;
}
	.broadcasters #container ul li h4 {
		margin: 0;
		padding: 0;
	}
.broadcasters #container #headerGraphic {
	margin-top: -12px;
	width: 806px;
	height: 223px;
	background: transparent url(../images/broadcastersHeader.jpg) no-repeat top left;
}
	.broadcasters #container #headerGraphic h2 {
		display: block;
		padding: 30px 0 0 32px;
		font-size: 160%;
		color: #fff;
		background: none;
	}
		.broadcasters #container #headerGraphic h2 span {
			color: #f8ff44;
		}
	.broadcasters #container #headerGraphic ul {	
		list-style: none;
		margin: 20px 0 0 50px;
	}
	.broadcasters #container #headerGraphic ul li {
		margin-top: 16px;
		list-style-image: none;
		font-size: 120%;
		color: #fff9c7;
	}
	.broadcasters #container h3 strong {
		color: #00a4b7;
	}
.broadcasters #container #headerIntro {
	margin-top: 20px;
	margin-bottom: 40px;
	padding: 0 20px 15px 20px;
	background: transparent url(../images/headerIntroBG.gif) repeat-x bottom left;
}
.broadcasters #container #mic {
	float: right;
	width: 205px;
	height: 233px;
	background: transparent url(../images/mic.gif) no-repeat top left;
}


/* ----- how it works ----- */

.broadcasters #container #components {
	margin-top: 30px;
	width: 787px;
	height: 159px;
	background: transparent url(../images/components.gif) no-repeat top left;
}
.broadcasters #container #process {
	margin-top: 30px;
	width: 562px;
	height: 159px;
	background: transparent url(../images/process.gif) no-repeat top left;
}


/* ----- artists -----*/

.artists #container span {
	position: absolute;
	top: -8px;
	left: 190px;
	_top: 3px; /* hack for IE 6 and below */
	_left: 183px; /* hack for IE 6 and below */
	width: 107px;
	height: 44px;
	text-indent: -9000px;
	background: transparent url(../images/comingSoon.png) no-repeat top left;
}
.artists #container .gutter ul {
	margin-top: 26px;
}
.artists #container h4 {
	margin: 0;
}
.artists #container form {
	margin-bottom: 16px;
}


/* ----- about us ------ */

.about #container #loudcityGraphic {
	margin-top: 10px;
	float: right;
	width: 307px;
	height: 225px;
	background: transparent url(../images/aboutLoudcity.jpg) no-repeat top left;
}
		
		

/* ----- HTML ----- */
h1, h2 {
	margin:  0;
	padding:  0;
	color: #c25b00;
}
h2 {
	padding: 9px 12px;
	display: inline;
	font-weight: normal;
	font-size: 140%;
	background: transparent url(../images/h2BG.gif) repeat-x top left;
}
h3, h4 {
	color: #393a39;
}
h3 {
	margin: 30px 0 0px 0;
	padding-left: 24px;
	background: transparent url(../images/orangeArrow.gif) no-repeat center left;
}
h4 {
	margin: 16px 0 10px 0;
}
h4.first {
	margin-top: 26px;
}
h5 {
	margin-top: 16px;
	margin-bottom: 10px;
	color: #c25b00;
	font-size: 110%;
}
p {
	line-height: 1.4em;
	font-size: 100%;
}
ul, li {
	list-style-image: url(../images/orangeBullet.gif);
	margin-left: 7px;
	padding: 0;
}
ul {

}
li {
	margin-top: 14px
}
dl, dt, dd {
	margin: 0;
	padding: 0;
}
a:link, a:visited {
	color: #5fb700;
	font-weight: bold;
	text-decoration: none;
}
a:hover, a:active {
	color: #3a9000;
}
img {
	border: none;
}


/* ----- form ----- */
input, textarea {
	vertical-align: middle;
	display: inline;
	font-size: 110%;
	padding: 4px;
	border: 1px solid #b4b4b4;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}
label {
	font-weight: bold;
	color: #565953;
}
.txt {
	width: 250px;
	color: #3a3a3a;
	background: #fffde3;
}
.btn {
	margin-left: 6px;
	vertical-align: middle;
	display: inline;
	padding: 0;
	border: none;
}

/* ---- class -----*/
.clear {
	clear: both;
}