@import "reset.css";
@import "table.css";

body {
	font-size: 75%;
	font-family: Arial, Helvetica, georgia, "times new roman", serif;
	line-height: 18px;
	color: #4f4e4e;
}

html>body {
	font-size:12px;
}

/* -- set footer to bottom -- 
http://www.last-child.com/forcing-the-footer-to-always-be-at-the-bottom-of-a-page/
*/
html { height: 100%;}
body { height: 100%;}
#container { position: relative; }
/*
#container { position: relative; min-height: 100%; }
* html #container { height: 100%;}
#footer { position: relative; margin-top: -200px; height: 240px; clear: both;}
*/

/* --- Typography from 23ways -------------------------------- */

p {
	font-size:1em;
	line-height:1.5em;
	margin:0 0 1.5em 0;
}

h1 {
	line-height:1em;
	font-size:1.5em;
	font-weight:normal;
	margin:0 0 1em 0;
}

h2{
	color: #4f4e4e;
	font-size:15px;
	font-weight:bold;
	line-height:1.286em;
	margin:0 0 16px 0;
	padding-left: 27px;
	background: url('../img/backgrounds/content-header.gif') no-repeat;
}

h3 {
	font-size:1.133em;
	line-height: 1.286em;
	margin:1.929em 0 0.643em 0;
	font-weight:normal;
	position: relative;
}

h3 span{
	position: absolute;
	right: 0;
	font-size: 11px;
}


#extra p{
}

.message{
	margin-bottom: 15px;
}

/* Lists */
#content ul, #content ol,
#extra ul, #extra ol{
	margin:0 35px 1.5em 35px;
}


/* Links */
a, a:link{
	color: #3ea1e0;
	text-decoration: none;
}
a:visited{
	color: #3ea1e0;
}
a:hover{
	text-decoration: underline;
	color: #3ea1e0;
}

a.rssfeed{
	color: #FF9900;
	padding-left: 20px;
	background: url('/img/feed-icon-14-14.png') no-repeat left;
}

/* --- layout ----------------------------------------------- 
   keep these for just the layout no background color nothing! */


div#container, div#inner-footer{
	width:940px;
	margin:0 auto;
}

div#header{
	height: 160px;
	margin-bottom: 15px;
}

div#wrapper{
	float:left;
	width:100%
}

div#content{
	margin: 0 430px 20px 0px;
}

.fullwidth #content{
	margin: 0 0 20px 0;
}

div#navigation{
	float:left;
	width:225px;
	margin-left:-950px;
	display: none;
}

div#extra{
	float:left;
	width:380px;
	margin-left:-380px;
	padding-top: 45px;
}

div#banner{
	padding: 20px 0 15px 0;
}


div#header{
	height: 160px;
	position: relative;
}

.clearfix:after,
#top-navigation:after
 {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* --- backgrounds ---------------------------------------------- */

body{ 	background: url('/img/backgrounds/body.png') repeat-x;	}

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

div#header h1{
	padding-top: 30px;
	font-size: 40px;
}

div#header h1 a{
	display: block;
	text-indent: -100000px;
	background: url('/img/open_ear_music.gif') no-repeat;
	width: 253px;
	height: 72px;
	outline: none;
}

/* --- top navigation ----------------------------------------------- */
#top-navigation{
	position: absolute;
	bottom: 1px;
	left: 0;
}

#top-navigation li{
	float: left;
	list-style-type: none;
	
	margin-left: 1px;
}

#top-navigation li a{
	text-transform: capitalize;
	color: #4f4e4e;
	font-size: 15px;
	text-transform: lowercase;
	font-family: Georgia, sans-serif;
	letter-spacing: 1px;
	display: block;
	padding: 4px 8px 2px 8px;
	border-top: 2px solid transparent;
	border-left: 2px solid transparent;
	border-right: 2px solid transparent;
}

#top-navigation li a:hover{
	text-decoration: none;
	background: url('/img/navigation/hover.png') no-repeat bottom center;
	color: #4e4646;
}

#top-navigation li.active a{
	background: #FFF;
	border-top: 2px solid #4f4e4e;
	border-left: 2px solid #4f4e4e;
	border-right: 2px solid #4f4e4e;
}


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

/* sub navigation */
#navigation li ul{
	display: none;
}

#navigation li.active ul{
	display: block;
}

#navigation li, #navigation ul{
	list-style-type: none;
	margin-left: 0;
}

#navigation li a{
	display: block;
	background: url('/img/backgrounds/navigation-point.png') no-repeat 0 12px;
	padding:5px 0 4px 10px;
	text-transform: capitalize;
	border-bottom: 1px dotted #aaa;
}

#navigation li li a{
	padding-left: 20px;
	color: #00F;
}

#navigation li.active li a{
	color: #00F;
}
#navigation li.active li.active a{
	color: #000080;
}
#navigation li a:hover, #navigation li.active a{
	background: url('/img/backgrounds/navigation-point-on.png') no-repeat 0 12px;
	color: #000080;
}

/* --- loginbox ----------------------------------------------- */
#header-login-form{
	position: absolute;
	top: 10px;
	right: 0px;
	background: #4f4e4e;
	padding: 3px 15px;
	color: #d6e03e;
	width: 190px;
	height: 105px;
}

#header-login-form fieldset{
	margin: 0;
}

#header-login-form fieldset legend{
	padding: 3px 0 5px 15px;
	background: url('/img/backgrounds/login-legend.png') no-repeat left;
	margin: 0;
	font-size: 12px;
}

#header-login-form fieldset input{
	display: block;
	background-color: #4f4e4e;
	border: 1px solid #d6e03e;
	font-size: 12px;
	width: 157px;
	font-family: Helvetica;
	color: #d6e03e;
	padding-left: 3px;
	margin: 8px 0;
}

#header-login-form fieldset input:focus{
	border: 1px solid #3ea1e0;
	color: #3ea1e0;
}

#header-login-form input#login-submit{
	position: absolute;
	right: 12px;
	bottom: 30px;
	background: url('/img/backgrounds/login-submit.png') no-repeat;
	border: none;
	text-indent: -2000px;
	height: 18px;
	width: 18px;
	display: block;
	cursor: pointer;
}

#header-login-form p{
	margin: 0;
	padding: 0;
}

/* --- breadcrubs ----------------------------------------------- */
div#breadcrubs{
	height: 40px;
	position: absolute;
	bottom: 0;
	display: none;
}

#breadcrubs span:after{
	content: " > ";
}
#breadcrubs span:last-child:after{
	content: "";
}

/* --- banner --------------------------------------------- */
/* LEADERBOARD */

#banner-carousel-container{
	background: url('/img/banners/background.jpg') no-repeat;
	height: 215px;
	margin-top: 10px;
	padding-top: 15px;
}

#banner .intro{
	float:left;
	margin-left: 40px;
	margin-top: 0px;
	width: 300px;
}

#banner-carousel{
	height:200px;
	margin:10px 55px;
	overflow:hidden;
	width:445px;
	float: left;
}
#banner-carousel li{
	position: relative;
	text-align: center;
	list-style: none;
	margin-bottom: 40px;
	padding-top: 10px;
}
#banner-carousel li h2,
#banner .intro h2{
	z-index: 1000;
	font-size: 20px;
	margin-bottom: 10px;
	line-height: 20px;
	color: #FFF;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	text-shadow: 1px 1px 2px #3C3C3C;
}
#banner-carousel li h3,
#banner .intro h3{
	color: #FFF;
	font-size: 16px;
	text-shadow: 1px 1px 2px #3C3C3C;
	padding: 0;
	margin: 0;	
}

#banner .intro h2{
	padding-top: 15px;
	z-index: 1000;
	font-size: 20px;
	margin-bottom: 10px;
	color: #FFF;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	text-shadow: 1px 1px 2px #3C3C3C;
}
#banner .intro h3 a{
	color: #FFF;
	font-size: 16px;
	text-shadow: 1px 1px 2px #3C3C3C;
	padding: 0;
	margin: 0;	
}
#banner {
	position: relative;
	height: 220px;
}

#banner img {
	display: none;
	position: absolute
}

#banner img:first-child{
	display: block;
}


/* --- news ----------------------------------------------- */
.article{
	border-bottom: 1px dotted #CCC;
	margin-bottom: 1.5em;
}

.paging div.disabled{
	display: inline;
}

.paging a.previous {
	background: url('/img/backgrounds/buttons/inner_prev.png') no-repeat left bottom;
	padding-left: 15px;
}

.paging a.next{
	background: url('/img/backgrounds/buttons/inner_next.png') no-repeat right bottom;
	padding-right: 15px;
}


/* jumpoffs ---------------------------------------------------- */
.handle, .delete{
	position: absolute;
	top: 0;
	right: 0px;
	padding: 2px 5px;
	margin: 0px 0px 0 0;
	cursor: move;
	font-weight: 700;
	font-size: 10px;
	background: #F00;
	color: #FFF;
	z-index: 100;
}

.delete{
	cursor: pointer;
}

.handle{
	right: 331px;
}

#jumpoffs .jumpoff{
	background: url('/img/backgrounds/jumpoffs.png');
	margin-bottom: 20px;
	padding: 10px;
	position: relative;
}


.jumpoff p, .jumpoff h3{
	padding: 4px 10px;
	margin: 0;
	color: #D6E03E;
	background: #4F4E4E;
}

.jumpoff h3{
	background: #4F4E4E url('/img/backgrounds/footer-header.png') no-repeat left;
	padding-left: 25px;
	font-size: 14px;
	font-weight: bold;
}

.jumpoff .jumpoff-link{
	text-align: right;
}
.jumpoff .jumpoff-link a{
	padding: 2px 10px;
	background: url('/img/backgrounds/jumpoffs/link.png') repeat-x;
	color: #FFF;
}

/* blue style */
#jumpoffs .blue-style{
	background: url('/img/backgrounds/jumpoffs/jumpoff-style-blue.png') repeat-y;
}

#jumpoffs .blue-style p,
#jumpoffs .blue-style h3{
	color: #FFF;
	background: transparent;
}
#jumpoffs .blue-style h3{
	background: transparent url('/img/backgrounds/footer-header.png') no-repeat left;
}

/* green style */
#jumpoffs .green-style{
	background: url('/img/backgrounds/jumpoffs/jumpoff-style-green.png') repeat-y;
}

#jumpoffs .green-style p,
#jumpoffs .green-style h3{
	background: transparent;
	color: #4F4E4E;
}
#jumpoffs .green-style h3{
	background: transparent url('/img/backgrounds/footer-header.png') no-repeat left;
}

#jumpoffs .image-only{
	background: none;
	padding: 0;
}

/* --- user page --------------------------------------------------- */

#monthly-reports li{
	list-style-type: square;
	margin-left: 0px;
}

/* --- footer --------------------------------------------------- */
#footer{
	background: url('../img/backgrounds/footer.gif') repeat;
	padding-top: 20px;
	color: #d6e03e;
	clear:both;
	height:250px;
}

.footer-box h4{
	background: url('/img/backgrounds/footer-header.png') no-repeat left;
	padding-left: 25px;
	font-size: 14px;
	margin: 5px;
}

.footer-box{
	width: 290px;
	height: 170px;
	background: #4f4e4e;
	padding: 5px;
	margin-right: 20px;
	float: left;
}

#footer	div.last{
	margin-right: 0;
}

.footer-box ol {
	margin: 10px 10px 0 28px;
	list-style-position: outside;
	list-style-type: decimal;
}

#footer #copyright{
	float: right;
	padding-top: 10px;
	text-align: right;
}

/* news feed footer */
#newsFeed{
	position: relative;
}
#newsFeed h5{
	position: absolute;
	top: 12px;
	right: 10px;
}
#newsFeed dl{
	padding: 2px 10px;
}
#newsFeed dl dt{
	width: 25%;
	float: left;
	clear: left;
}
#newsFeed dl dd{
	width: 70%;
	float: left;
}


/* newsletter signup */
#newsLetter{
	position: relative;
}
p#intro{
	padding: 0 10px;
}

#newsletter-signup-form{
	position: relative;
}
#newsletter-signup-form label{
	float: left;
	padding: 0px 10px;
	width: 70px;
	text-align: right;
	text-transform: capitalize;
}
#newsletter-signup-form input{
	display: block;
	background-color: #4f4e4e;
	border: 1px solid #d6e03e;
	font-size: 12px;
	width: 127px;
	font-family: Helvetica;
	color: #d6e03e;
	padding-left: 3px;
	margin: 8px 0;
}

#newsletter-signup-form input:focus{
	border: 1px solid #3ea1e0;
	color: #3ea1e0;
}

#newsletter-signup-form input#submit{
	position: absolute;
	right: 68px;
	bottom: -35px;
	background: url('/img/backgrounds/login-submit.png') no-repeat;
	border: none;
	text-indent: -2000px;
	height: 18px;
	width: 18px;
	display: block;
	cursor: pointer;
}

/*	=feedbackform
	------------------------------------------------------ */
#feedback-form{
	background: url('/img/backgrounds/feedbackform.png') no-repeat right bottom;
	margin-bottom: 13px;
	position: absolute;
	top: 159px;
	right: 0;
	min-height: 30px;
	width: 940px;
	z-index: 10;
}

#feedback-form .form-container{
	height: 0;
 	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
}

#feedback-form .form-container div.input{
	padding: 5px 0 0 15px;
	margin: 0;
}

#feedback-form .form-container div.input label{
	color:#FFFFFF;
	display:block;
	float:none;
	padding: 3px 0;
	margin-bottom: 0px;
	width:217px;
	font-weight: bold;
	text-align: left;
}

#feedback-form .form-container div.input input{
	width: 237px;
	padding: 2px;
}

#feedback-form .form-container div.input textarea{
	
}
.feedback-tab{
	bottom:0;
	height:30px;
	margin-bottom:0;
	position:absolute;
	right:0;
	width:135px;
	text-align: center;
}

.feedback-tab a{
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	display: block;
	padding-top: 5px;
}

#feedback-form .form-container{
	padding: 0 30px;
}

#feedback-form .form-container fieldset{
	color: #fff;
	width: 276px !important;
	float: left;
	padding: 10px 0 40px 0;
}

#feedback-form .form-container fieldset .input{
	width: 276px !important;
}

#feedback-form .form-container legend{
	color: #fff;
	padding-top: 20px;
}

#feedback-form .form-container .submit{
	bottom:20px;
	position: absolute;
	right: 32px;
}

#feedback-form .form-container .error-message {
	clear:both;
	color:red;
	font-size:11px;
	margin-left: 0px !important;
}

#feedback-form .form-container #message{
	padding: 20px;
	color: #FFF;
}


/* --- forms ------------------------------------------------- */
.form_container{
	padding: 20px 40px 30px 110px;
}

.form_container h2{
	margin-bottom: 20px;
}

.narrow {
	padding: 0;
}


.form_container p{
	color:#4f4e4e;
}

fieldset{
	margin-top: 10px;
	margin-bottom: 5px;
}

legend{
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #D8DC4F;
	clear: both;
	width: 100%;
	text-transform: uppercase;
}

.input{
	margin-bottom: 15px;
	float: left;
	clear: both;
	width: 600px;
}

.input label{
	width: 180px;
	padding: 4px 10px;
	text-align: right;
	color: #717273;
	font-size: 13px;
	display: block;
	float: left;
}


.field-note{
	font-size: 11px;
	color: #717273;
	width: 250px;
	padding-top: 4px;
	margin-left: 10px;
	display: block;
	float: left;
}

.input input{
	float: left;
}

.input input,
.input textarea{
	width: 290px;
	border: 1px solid #AAA;
	padding: 5px;
	font-size: 13px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
}

.input select{
	margin-top: 5px;
}

.input input:focus,
.input textarea:focus{
	border-color: #D8DC4F;
}

.listed{
	padding: 0 0 0 178px
}

#extra .listed{
	padding-left: 20px;
}

.checkbox{
	height: 20px;
	clear: both;
}
.checkbox input{
	float: left;
	margin-right: 10px;
	
}
.checkbox label{
	float: left;
	width: 200px;
	text-align: left;
	font-size: 12px;
	padding-top: 2px;
}

fieldset.information .input input{
	width: 15px;
	margin-left: 100px;
}
fieldset.information .input label{
	width: 365px
}

.submit{
	padding-left: 200px;
}

.required label:after{
	content: " *";
}

.error label{
	color: red;
}
.error input{
	border-color: red;
}
.error-message{
	clear: both;
	margin-left: 200px;
	color: red;
	font-size: 11px;
}


#xmass-banner{
	height: 210px;
	position: relative;
	background: url('/img/banners/xmass/background.jpg');
}

#xmass-banner .logo{
	position: absolute;
	top: 25px;
	left: 25px;
}

#xmass-banner .banner-text{
	position: absolute;
	top: 85px;
	left: 25px;
	width: 520px;
}
#xmass-banner .banner-text h2{
	font-size: 18px;
	color: #FFF;
	background: none;
	padding: 0;
	font-weight: normal;
}
#xmass-banner .banner-albums{
	position: absolute;
	top: 25px;
	right: 25px;
	width: 342px;
}
#xmass-banner .banner-albums img{
	float: left;
	margin-left: 5px;
}
#xmass-banner .amazon-play-widget{
	left:312px;
	position:absolute;
	top:140px;
}
#xmass-banner .subscribe-button{
	left:50px;
	position:absolute;
	top:155px;
}
.awesome, .awesome:visited {
	background: #222 url(/img/backgrounds/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff !important; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

.awesome:hover							{ background-color: #111; color: #fff; }
.awesome:active							{ top: 1px; }
.small.awesome, .small.awesome:visited 			{ font-size: 11px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited 		{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited 			{ font-size: 14px; padding: 8px 14px 9px; }

.green.awesome, .green.awesome:visited		{ background-color: #91bd09; }
.green.awesome:hover						{ background-color: #749a02; }
.blue.awesome, .blue.awesome:visited		{ background-color: #4B98CE; }
.blue.awesome:hover							{ background-color: #007d9a; }
.red.awesome, .red.awesome:visited			{ background-color: #e33100; }
.red.awesome:hover							{ background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited		{ background-color: #a9014b; }
.magenta.awesome:hover							{ background-color: #630030; }
.orange.awesome, .orange.awesome:visited		{ background-color: #ff5c00; }
.orange.awesome:hover							{ background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited		{ background-color: #ffb515; }
.yellow.awesome:hover							{ background-color: #fc9200; }



/*************** Notifications ***************/

.notification {
                position: relative;
                margin: 0 0 15px 0;
                padding: 0;
                border: 1px solid;
                background-position: 10px 11px !important;
                background-repeat: no-repeat !important;
                font-size: 13px;
                width: 99.8%;
                }
                

.attention {
                background: #fffbcc url('/img/admin/icons/exclamation.png') 10px 11px no-repeat;
                border-color: #e6db55 !important;
                color: #666452;
                }

.success {
                background: #d5ffce url('/img/admin/icons/tick_circle.png');
                border-color: #9adf8f;
                color: #556652;
                }

.error-flash {
                background: #ffcece url('/img/admin/icons/cross_circle.png') no-repeat;
                border-color: #df8f8f;
                color: #665252;
                }

.notification {
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
				border-radius: 6px;
                }


.notification div {
                display:block;
                font-style:normal;
                padding: 10px 10px 10px 36px;
                line-height: 1.5em;
                }

.notification .close {
                color:#990000;
                font-size:9px;
                position:absolute;
                right:5px;
                top:5px;
                }


/* ---[ misc ]------------------------------------- */

img, a img {
    border: none;
    }
.hide {
    display: none;
    }
.clear {
    clear: both;
    }
.error{
	color: red;
}
.debug {
    border: 1px solid red;
    }