/* ===============================================

epicsoul.com | default stylesheet

author: richard medek, littlethinky.com
last revised: 01.19.09
copyright: Epic Soul

--------------------------------------------------

Default rules for standards-compliant browsers.

=============================================== */


/* -----------------------------------------------
	global styles
----------------------------------------------- */

* {
	margin: 0; 
	padding: 0; }

html, body {
	height: 100%; }

body {
	font: 84%/1.35  Tahoma, Verdana, Trebuchet ms, Georgia, helvetica, arial, sans-serif;
letter-spacing: .03em;
word-spacing: -.02em;	
background: #000;
	color: #002d5b; }

img {
	display: block; }

a img {
	border: none; }

/* accessibility */
#nav_main h3, h2	{ position: absolute; left: -9999px; top: -9999px; }

/* image replacement */
h1, h3#web_jingles		{ text-indent: -9999px; overflow: hidden; }
h1 a, h3#web_jingles a	{ text-decoration: none; }


/* -----------------------------------------------
	general typography
----------------------------------------------- */

p, ul, ol, dl, dd, blockquote, table, address, form {
	margin: 0 0 1em 0; }

ul, ol, dl {
	margin-left: 2em; }

dt {
	font-weight: bold; }

blockquote {
	margin: 0 2em 1em 2em;
	padding: 0 1em;
	border-left: solid 1px;
	color: #3b71b7; }

cite, address {
	font-style: italic; }

/* headings */
h3 { font-size: 1.3em; font-weight: bold; margin-bottom: .25em; }
h4 { font-size: 1em; font-weight: bold; margin: 0; }

/* links */
a:link		{ color: #3b71b7; text-decoration: none; }
a:visited	{ color: #3b71b7; text-decoration: none; }
a:hover		{ color: #3b71b7; text-decoration: underline; }
a:active	{ color: #3b71b7; text-decoration: underline; }


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

#wrapper {
	width: 800px;
	min-height: 100%;
	margin: 0 auto;
	background: #000 url(../images/backgrounds/swirl.jpg) no-repeat 0 222px; }

#header {

	width: 100%;
	height: 60px;
	background: #fff url(../images/logo.png) no-repeat center bottom; }


.player_header {
	float: left;
	padding-top: 25px;
	padding-left: 110px;
	width: 215px; }

#content {
	position: relative;
	padding-bottom: 65px;
	height: 100%; }
	
#bottom-content { width:100%;height:330px;clear:both;} /*this is done with a fixed height so its compatible with IE and Firefox */

#footer {
	width: 800px;
	margin: 0 auto;
	height: 50px;
	margin-top: -50px;
	position: relative;
	z-index: 100; }


/* -----------------------------------------------
	main navigation
----------------------------------------------- */

#nav_main {
	position: absolute;
	right: 5px;
	bottom: 20px;
	text-align: right; }

#nav_main ul {
	margin: 0; }

#nav_main li {
	float: left;
	list-style: none;
	font: 11px/11px helvetica, arial, sans-serif;
	color: #114b76;
	text-transform: uppercase;
	border-left: solid 1px #114b76;
	padding: 0 .5em; }

#nav_main .first {
	padding-left: 0;
	border: none; }

#nav_main li a:link		{ color: #114b76; text-decoration: none; }
#nav_main li a:visited	{ color: #114b76; text-decoration: none; }
#nav_main li a:focus	{ color: #ff703c; text-decoration: none; }
#nav_main li a:hover	{ color: #ff703c; text-decoration: none; }
#nav_main li a:active	{ color: #ff703c; text-decoration: none; }


/* -----------------------------------------------
	vertical drop down navigation
----------------------------------------------- */

/* Begin CSS Drop Down Menu */

#menuh-container
	{
	padding:18px 10px 0 0;
	float:right;
	z-index:500;
	bottom:0;
	}

#menuh
	{
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:left;
	/*margin:2em;*/
	margin-top: 1em;
	z-index:500;
	background:#fff;
	}
		
#menuh a
	{
	text-align: center;
	display:block;
	/*border: 1px solid #555;*/
	white-space:nowrap;
	margin:0;
	/*padding: 0.3em;*/
	
	}
	
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: #114b76;
	background-color:#fff;
	/*background:#ccc;*/
	text-decoration:none;
	}
	
#menuh a:hover	/* menu at mouse-over  */
	{
	color: #ff703c;
	background-color:#fff;
	text-decoration:none;
	}
	
	#menuh a:hover	/* menu at mouse-over  */
	{
	color: #ff703c;
	background-color:#fff;
	text-decoration:none;
	}	
	
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
	{
	/*background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;*/
	}
	
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
	{
	/*background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;*/
	}

#menuh li ul li {
padding:5px;
padding-right:7px;
padding-left:3px;
margin-left:-5px;
z-index:500;
background:#fff;
width:48px;
}

ul#sub li{
background:#fff;
z-index:500;

}

ul#sub li:hover{
color: #ff703c;
background:#fff;
z-index:500;
}

#menuh ul
	{
	
	list-style:none;
	margin:0;
	/*padding-left:2px;
	padding-right:2px;*/
	float:left;
	/*width:75px;*/	/* width of all menu boxes */	
	}

#menuh li
	{
	position:relative;
    min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	padding-bottom:0;
	padding-top:5px;
	padding-left:3px;
	padding-right:3px;
	background:#fff;
	
	font-size:11px;
	
	}

#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	
	}

#menuh ul ul ul
	{
	top:0;
	left:100%;
	z-index:500;

	}

div#menuh li:hover
	{
	cursor:pointer;
	z-index:500;
	color: #ff703c;
	
	}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;color: #ff703c;}

/* End CSS Drop Down Menu */

	
	
	/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */



















/* -----------------------------------------------
	"marquee" and sub-navigation
----------------------------------------------- */

#marquee {
	width: 800px;
	height: 34px;
	overflow: hidden;
	background: #003060 url(../images/backgrounds/marquee-bg.png) repeat-x left top;
	font: 14px/34px courier, monospace;
	color: #fff;
	text-align: center; }

/* scrolling headlines */
#headlines {
	position: relative;
	height: 29px;
	margin-top: 5px;
	overflow: hidden; }

#headlines li {
	position: absolute;
	width: 800px;
	height: 29px;
	line-height: 26px;
	left: 0;
	top: 30px;
	list-style: none; }

/* sub-pages */
#nav_services_sub {
	float: left; 
	position: relative;
	left: 50%; }

#nav_services_sub ul {
	position: relative;
	left: -50%;
	margin: 0; }
	
#nav_services_sub li {
	list-style: none; 
	display: block;
	float: left;
	padding-left: 4px;
	background: url(../images/list-marker.gif) no-repeat left center; }

#nav_services_sub .first {
	background: none; }

#nav_services_sub li a {
	padding: 0 20px;
	display: block; }

#nav_services_sub li a:link		{ color: #fff; text-decoration: none; }
#nav_services_sub li a:visited	{ color: #fff; text-decoration: none; }
#nav_services_sub li a:focus		{ color: #fff; text-decoration: underline; }
#nav_services_sub li a:hover		{ color: #fff; text-decoration: underline; }
#nav_services_sub li a:active	{ color: #fff; text-decoration: underline; }

/* current page */
#nav_services_sub li.current a {
	font-size: 22px;
	text-decoration: none; }


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

#header h1 {
	position: absolute;
	left: 0;
	top: 8px;
	width: 110px;
	height: 47px; }

#header h1 a {
	display: block;
	height: 47px; }


/* flash or image banner */
#banner img { display: block; width: 100%; height: 128px; }


/* -----------------------------------------------
	box/drop shadow styles
----------------------------------------------- */

/*
	Notes on "boxes":
	
	"Boxes" have a transparent drop shadow that
	is created by using nested divs. The outermost
	div has an ID identifying the box; the inner
	divs have classes that give it shadow.

	- Position the box on the page by adding the
	position rules to the ID.

	- Assign dimension and padding to the inner
	box of the ID, i.e.:
		#box_name .box-i {
			width: 100px;
			height: 50px; 
			padding: 10px 20px 20px 10px;
		}

	- the inner box has right- and bottom-padding
	built in to accommodate the drop shadow
	(.box-i {padding: 0 10px 10px 0;}) so add
	those values to any padding desired, i.e.:

		desired padding: 20px
		values used: 20px 30px 30px 20px

	- Drop shadows are 10px wide, so keep that
	number in mind when positioning boxes.
	
*/

#library_link, #intro {
	position: absolute;
	top: 39px; }

#library_link {
	left: 5px; }

#intro {
	left: 255px;
	font: bold 10px/12px helvetica, arial, sans-serif; }

#library_link .box-i {
	width: 235px;
	height: 80px; }

#intro .box-i {
	width: 325px;
	height: 60px;
	padding: 10px 20px 20px 10px; }

/* drop shadows for content boxes */
.box	{ position: relative; }
.box-tl	{ background: url(../images/backgrounds/shadow-box.png) no-repeat left top; }
.box-i	{ position: relative; right: -10px; bottom: -10px; padding: 0 10px 10px 0; background: url(../images/backgrounds/shadow-box.png) no-repeat right bottom; }
.box-tr	{ right: -10px; top: 0; background: url(../images/backgrounds/shadow-tr.png) no-repeat right top; }
.box-bl	{ left: 0px; bottom: -10px; background: url(../images/backgrounds/shadow-bl.png) no-repeat right top; }
.box-tr, .box-bl { position: absolute; width: 10px; height: 10px; }


/* -----------------------------------------------
	sidebar
----------------------------------------------- */

#sidebar {
	float: right;
	margin: 5px 15px 0 0;
	
	color: #002d5b; }

#sidebar .box-i {
	width: 140px;
	padding: 10px 20px 20px 10px; }

#sidebar h3 {
	margin: -10px -10px 0 -10px; }

#sidebar img {
	float: right; }

h3#web_jingles {
	width: 160px;
	height: 135px; 
	background: url(../images/web_jingles.jpg) no-repeat left top; }


/* -----------------------------------------------
	main content/section styles
----------------------------------------------- */

#main_content {
	float: left;
	margin: 100px 0 0 5px;
	position:relative;
	 }

#main_content .box-i {
	width: 575px;
	padding: 10px 20px 20px 10px; }


/* Home Page ---------------------------------- */

#home #main_content .box-i {
	padding: 0;
margin-top: 5px;
margin-bottom: 5px;
	width: 595px; }


/* Credits ------------------------------------ */
	
/* categories */
.category_list {
	position: absolute;
	right: 15px;
	top: 1.65em;
	text-align: right; }

.category_list ul {
	margin: 0; }

.category_list li {
	float: left;
	list-style: none;
	line-height: 1em;
	border-left: solid 1px #114b76;
	padding: 0 .5em; }

.category_list .first {
	padding-left: 0;
	border: none; }

#credits #main_content h3 {
	color: #3b71b7;
	border-bottom: solid 1px #002d5b;
	clear: both; }

#credits .credits li {
	list-style: none;
	margin-bottom: .25em; }

#credits .credits .title {
	display: block;
	padding: 0 .25em; }

#credits .credits .title:hover { 
	background-color: #b6c9e3; }

#credits .credits .hover:hover {
	cursor: pointer; }

/* currently viewed list item */
#credits .credits li.active {
	background: #b6c9e3; }

#credits .credits li .desc {
	color: #3c546c;
	background: #fff;
	padding: .5em .25em .25em .25em; }

.player {
	margin: -.75em 0 0 0;
	width: 72px;
	height: 21px; }


/* Services ----------------------------------- */

#services #main_content h3 {
color: #3b71b7;
border-bottom: solid 1px #002d5b; }


/* -----------------------------------------------
	contact form
----------------------------------------------- */

form {
	margin-top: 2em; }

fieldset {
	border: none; }
 
label, input {
	display: block;
	float: left;
	width: 20em;
	height: 1em;
	margin-bottom: 5px; }
 
label {
	width: 7em;
	font-weight: bold; }
 
input {
	padding: .1em; }
 
input.button {
	margin: 1em 2px 0 0;
	width: 7em;
	height: auto; }
 
form br {
	clear: both; }
 
textarea {
	width: 26em;
	height: 8em; }

.required {
	color: #ff703c; }

p.required {
	margin-top: -1em; }

.error p {
	font-weight: bold; }

.error ul {
	margin-top: -1em;
	color: #ff703c; }

input.error, textarea.error {
	background-color: #FFD9D9; }

/* -----------------------------------------------
	photos + blog feed
----------------------------------------------- */
#photos {
	
	margin-right:15px;
	margin-top:22px;
	margin-bottom:10px;
	float:right;
	
}

#blogfeed {
margin-left:15px;
margin-top:10px;
margin-bottom:10px;
float:left;
position:relative;
width:50%;
text-align:left;
}


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

#footer {
	color: #efefef;
	background: #000;
	text-align: center;
	font-size: 10px; }

#footer p {
	margin: 0; }

#nav_footer {
	text-align: center;
	margin: 0 0 .5em 0;
	background: #002d5b;
	height: 21px;
	line-height: 21px; }

#nav_footer li {
	list-style: none;
	display: inline;
	padding: 0 .5em;
	text-transform: uppercase; }

#nav_footer li a:link		{ color: #efefef; text-decoration: none; }
#nav_footer li a:visited	{ color: #fff; text-decoration: none; }
#nav_footer li a:focus		{ color: #efefef; text-decoration: underline; }
#nav_footer li a:hover		{ color: #fff; text-decoration: underline; }
#nav_footer li a:active	{ color: #fff; text-decoration: underline; }

#nav_footer li#nav_footer_contact {
	border: none;
	padding-right: 0; }


/* -----------------------------------------------
	miscellaneous styles
----------------------------------------------- */

.button {
	display: block;}

.left {
	float: left; }

.right {
	float: right; }

.more {
	text-align: right;
	color: #ff703c;
	margin-top: -1em;
	text-transform: uppercase; }

.more a {
	color: #ff703c; }

.more a:hover {
	text-decoration: underline; }

/* columns */
.col-1, .col-2	{ width: 277px; margin: 0 20px 20px 0; float: left; }
.col-2			{ margin-right: 0; }
	

/* replaced flash items */
.flash-replaced .alt {
	display: block;
	height: 0;
	position: absolute;
	overflow: hidden;
	width: 0; }


/* clear the floats */
#marquee div:after, #marquee ul:after, #content:after, .box-i:after, .category:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0;
	clear: both; }
	
/* music library selection page */
.lib_title {
font-size:16px;
font-weight:bold;
color:#FF6600;
}

#myGallery
{
	width: 800px !important;
	height: 128px !important;
} 
.jdGallery .slideInfoZone p 
{
	font-size:100%;
}

.jdGallery .slideInfoZone h2 {
color:inherit;
font-size:115%;
font-weight:bold;
margin:2px 5px;
padding:0;
left:0px;
position:relative;
top:0px;
text-align:center;
}