@charset "UTF-8";

/* Global Styles */

body {
	color: #FFF;
	line-height: 1.5em;
	font-family: Arial;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
}

.mainscreen {
	display: block;
	width: 100%;
	min-width: 320px;
	height: auto;
	margin: 0;
	padding: 0;
}

.page {
	position: relative; 
	max-width: 919px;
	min-width: 320px;
	min-height: 400px;
	border: 0px solid #F00;
	margin: 0px auto 0px auto;
	padding-bottom: 0px;
	box-sizing: border-box; -moz-box-sizing: border-box;
/*	background-color: #fff;*/
}

h1 { color: #cd3737; text-align: center;  margin: .5em 0em; font-size: 1.2em; font-weight: normal; padding-top: 10px; text-shadow: 4px 4px 5px #222; font-weight: normal !important;
	/*font-family: Creme SSi, Helvetica, Arial !important;*/ text-transform: uppercase; }
h2 { font-size: 1.7em; margin: 0em 0em 1em 0em; }
h3 { font-size: 1.5em; margin: 0em 0em 1em 0em; }

p { margin: 0px 0px .75em 0px; }
a { color: #cd3737; text-decoration: none; font-weight: bold; }
a:hover { color: #F00; text-decoration: none; }

footer { font-size: .7em; color: #888; padding: 0px 10px; z-index: 33; background-color: rgba(255,255,255,.75); }


/* MAIN MENU TOP */
topnav a {
	color: #FFF;
	text-decoration: none;
	display: inline-block;
	font-weight: normal !important;
	font-family: Creme SSi, Helvetica, Arial !important;
	text-shadow: 5px 5px 8px #222;
}

topnav a:hover { color: #DDD; }

topnav ul {
    -moz-box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}

topnav li { 
	display: inline;
}


/* MAIN MENU BOTTOM */
nav a {
	color: #FFF;
	text-decoration: none;
	display: inline-block;
	font-weight: normal !important;
	font-family: Creme SSi, Helvetica, Arial !important;
	text-shadow: 5px 5px 8px #222;
}
nav a:hover { color: #DDD; }

nav ul {
    -moz-box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
}
nav  li { 
	display: inline;
}




/* SLIDE SHOW CAPTION */
.slider-caption { display: none; }
#slider1_container { /*display: none;*/ }


/* MOBILE SLIDE MENU */
#content {
	box-sizing: border-box; -moz-box-sizing: border-box;
	min-width: 320px;
	max-width: 800px;
	padding: 0px 10px;
	margin: 0 auto;
	display: none;
}
	#content h1 { color: #333; line-height: 1em; }
	
	ul#nav { padding-left: 10px; list-style: none; width: 100%; font-size: 1.0em; letter-spacing: .03em; margin-left: -40px; margin-right: 5px; float: right; box-sizing: border-box; -moz-box-sizing: border-box; }
	ul#nav:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
	
		#content ul#nav li { float: left; width: 100%; text-align: center; display: inline-block; box-sizing: border-box; -moz-box-sizing: border-box; }
		#content ul#nav a, #nav a { 
			display: inline-block; 
			color: #CCC; 
			font-weight: bold !important;
			font-family:  Arial, Helvetica !important; padding: 10px 20px; margin: 0px 5px;
		}
/*		#content ul#nav a:hover {  color: #F00; background-color: rgba(0,0,0,.025);	text-shadow: 5px 5px 8px #222; }*/

.open {
	display: none;
/*	position: fixed;*/
	z-index: 999999999;
	width: 30px;
	height: 30px;
	padding-left: 20px;
	margin-right: 15px;
	margin-left: -1px;
	margin-top: -20px;
	background-image: url(/images/thumbs/menu.png);
	background-position: center center;
	background-repeat: no-repeat;
	border-left: 0;
	text-indent: -999px;
	padding: 5px 20px 5px 0px;
/*    -webkit-box-shadow: inset 0 0 5px 5px rgba(0,0,0,0.3);
    -moz-shadow: inset 0 0 5px 5px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 5px 5px rgba(0,0,0,0.3);*/
}
.open:hover {
/*	background: url(//images/thumbs/menu.png) center center no-repeat transparent;*/
	background-color: rgba(0,0,0,.15);
/*	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;*/
/*	border: 1px solid #ccc;*/
}
	
	/* Mobile Landscape and Portrait */
	@media only screen and (max-width: 900px) {
		#content { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; }
		#content ul#nav { display: none; }
		
		.open { display: block; }
		#pageslide { width: 120px; }
			#pageslide #nav li { width: 100%; margin-bottom: 10px; box-sizing: border-box; -moz-box-sizing: border-box; }
			#pageslide #nav a { color: #cd3737; padding: 8px 8px 8px 10px; width: 90px; border: 1px solid #cd3737; background: transparent url(/images/slicebox_navright.png) no-repeat right center; }
			#pageslide #nav a:hover, 
			#pageslide #nav .active a:hover, 
			#pageslide #nav .active a { text-decoration: none; background-color: rgba(255,255,255, 1); color: #F00; border: 1px solid #F00; /*text-shadow: 5px 5px 8px #222;*/ }
		.open {
			margin-left: 20px;
			margin-top: 5px;
		}
	}
	
	/* Mobile Portrait */
	@media only screen and (max-width: 540px) {
		#content { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; }
		#content h1 { font-size: 14px; }
		.open {
			margin-left: 15px;
			margin-top: 2px;
		}
	}


/* AUDIO PLAYER */
.player-wrap { padding: 5px 10px 5px 10px; width: 310px; max-width: 900px; margin: 0 auto; font-size: 0.8em; background-color: rgba(0,0,0,.25); box-sizing: border-box; -moz-box-sizing: border-box;}

.album-wrap { font-family: arial, helevetica; color: #DDD; padding: 5px 5px 10px 0px; float: left; width: 100%; border: 0px solid #F00; box-sizing: border-box; -moz-box-sizing: border-box; }
	.album-wrap .back { font-weight: bold; font-size: 1.3em; line-height: 1.2em; padding: 5px 10px; position: relative; float: right; text-align: center; margin: -10px -15px 0px 0px; border: 1px solid #666; }
	.album-wrap .back:hover, .album-wrap .back a:hover { border: 1px solid #CCC; background: #434343; }
		.album-cover { width: 72px; float: left; padding: 0px; border: 0px solid #F00; }
			.album-cover img { width: 72px; height: 72px; margin: 0; border: none; border: 1px solid #666; }
		.album-info { /*width: 70%;*/ float: left; border: 0px solid #F00; margin-left: 7px; margin-top: -5px; width: 65%;}
			.album-info .title { font-weight: bold; font-size: 1.3em; padding: 0px 5px 0px 5px; white-space: normal; word-wrap:normal; }
			.album-info .artist { font-weight: normal; font-size: .9em; padding: 0px 5px; }
			.album-info .year { font-weight: bold; font-size: 1em; padding: 5px; }

#playlist,
#audio { /*background:#333;*/  width: 100%; padding: 5px 0px 5px 0px; font-family: arial, helevetica; position: relative; z-index: 99999; }
#playlist { margin-top: 5px; padding-top: 0px; padding-bottom: 0px; }
#playlist .active a,
#playlist .active a:hover { color:#FFF; text-decoration:none; /*background: #555;*/ background-color: rgba(255,255,255,.15); font-weight: bold; }

#playlist li { padding: 0px 0px 0px 0px; /*margin-left: 4px;*/ }
#playlist li a { color: #CCC; font-size: 1.1em; /*background:#333;*/   padding: 15px 10px; display: block; text-decoration:none; border-bottom: 1px solid #666; }
#playlist li:first-child { border-top: 1px solid #666; }
#playlist li a:hover { text-decoration:none; /*background: #434343;*/ background-color: rgba(255,255,255,.05); color:#FFF; }


/* ADD THIS SOCIAL SHARING */
#widget { width: 120px !important;}

/* REUSABLE STYLES */
.clear-fix { clear: both; line-height: 1px; }

.boxit { 
	box-sizing: border-box; 
	-moz-box-sizing: border-box; 
}

.rad-all { 
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	-border-radius: 12px;
}

.black-border { border: 1px solid #000 !important; }
.align-center { text-align: center; }