/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */
 
 body,
html,
div {
     margin: 0;
     padding:0;
 }

/* Reusable column setup */
.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
	width:100%;
}
.clear{
	clear:both;
}

/* Old Phone */

body{
	background:#010A1A;	
	overflow-x:hidden;
	color: #FFFFFF;
	font-family:arial;
	font-size:15px;
	-webkit-text-size-adjust: none;
}

header{
	text-align:center;
	position:relative;
	z-index: 101;
	min-height:73px;
	margin: 0 auto;
	padding-top:5px;
}
header h1, header h2{
	text-indent:-10000px;
	font-size:0.1px;
}

h2{
	color:#fff;
	font-size:16px;
	margin-top:0;
}

h3 a{
	text-decoration:none;
}
h3 a:hover{
	text-decoration:underline;
}

.delete{
	color:#c42323;
}

a{
	color:#c42323;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}

h3{
	color:#c42323;
	margin-bottom:10px;
	font-size:16px;
	margin-top: 0;
}

p{
	margin-top:0;
	margin-bottom:15px;
}

img {  
	max-width: 100%;
	border:none;
	margin-top:10px;
	margin-bottom:15px;
}

#clouds-wrapper{
	margin: 0 auto;
	margin-top:-116px;
}
#clouds{
	padding-top: 76px;
	height: 0;
	background:url(../images/cloudsSmall.png) no-repeat center top;
}



nav{
	position:relative;
	margin-top:-27px;
	margin-left:-121px;
	padding-bottom:6px;
	left:50%;
	z-index:200;
	font-size: 16px;
	width: 250px;
	font-size:16px;
	line-height:25px;
}
nav ul{
	list-style:none;
	padding-left:0;
	margin-top:0;
	width: 250px;
}
nav li{
	float:left;
	padding-right:10px;
}
nav a{
	color:#fff;
	text-decoration:none;
}
nav li.hover a{
	color:#C42323;
}

#navMusic{
	padding-right:0;
}

#plaguedoctors{
	margin-left:-146px;
	position:absolute;
	left:50%;
	z-index:9;
	background:url(../images/plaguedoctorsSmall.png) no-repeat;
	width:300px;
	height:245px;
	background-size: cover;
	-ms-behavior: url(/css/backgroundsize.min.htc);
	margin-top:81px;
}

#maincontent{
    position: relative;
	z-index: 10;
	margin: 0 auto;
    max-width: 64em;
}



#contentWrapper{
	padding:0 5%;
	margin-top:56px;
}

header{
	width:250px;
}
header h1{
	background:url(../images/headerLarge.png) no-repeat;
	width:250px;
	height:44px;
	background-size: 250px 44px;
}
header h2{
	background:url(../images/headerSub.png) no-repeat;
	height:29px;
	width:247px;
	margin:0 auto;
	visibility:hidden;
	
}

.headshot {
    float: left;
    margin-bottom: 4px;
    margin-right: 10px;
}

	
aside{
	display:none;
}

.onthemoon aside{
	clear:both;
	display:block;
	width:100%;
}

section{
	float:left;
	width: 100%;
}

.news img{
	margin-top:10px;
}

#amazingaudioplayer-1{
	width:245px !important;
	margin:0 !important;
}
.amazingaudioplayer-bar{
	margin:0 !important;
}

.videos iframe, .fame iframe{
	width:100%;
}

#buyalbum{
	padding-top:10px;
	clear:both;
	margin-bottom:30px;
}

.onthemoon{
	padding-bottom:20px;
}


.onthemoon aside img{
	display:block;
}

#navVideos{
	margin-left:17px;
}
nav #navOnthemoon{
	margin-bottom:20px;
}

#tracklisting{
	clear:both;
}

#credits{
	padding-top:10px;
	clear:both;
}

.onthemoon #amazingaudioplayer-1{
	width:300px;
}

@media screen and (min-width: 700px) {

	#spotlight{
		position:fixed !important;
		background:url(../images/spotlightMedium.png) no-repeat;
		width:1397px;
		height:289px;
		margin-left: -495px;
		top: 407px;
		left:50%;
		margin-top:40px;
		/*opacity:0.1;*/
	}


	#clouds{
		background:url(../images/cloudsMedium.png) no-repeat center top;
		padding-top: 18.5%;
		height: 0;
		background-size: cover;
		-moz-background-size: cover;  /* Firefox 3.6 */
		background-position: center;  /* Internet Explorer 7/8 */
	}
	
	#contentWrapper{
		margin-top:-10px;
		padding: 0 5% 0 25%;
		width: 70%;
	}
	
	#clouds-wrapper{
		margin-top:-125px;
	}
	
	nav{
		position:fixed;
	}
	
	#navVideos{
		margin-left:0 !important;
	}


	header{
		width:300px;
	}
	header h1{
		background:url(../images/headerLarge.png) no-repeat;
		width:300px;
		height:53px;
		background-size: 300px 53px;
	}
	
	nav{
		float: left;
		left: 4%;
		position: relative;
		z-index: 204;
		margin-left:0;
		width:20%;
		margin-top:-5px;
	}
	
	nav ul{
		padding-left: 0;
		width:134px;
	}
	nav li{
		float:none;
		padding-right:0;
	}
	nav ul li{
		list-style:none;
	}
	nav ul li a{
		text-indent:-100000px;
		font-size:1px;
		padding-bottom:5px;
		display:block;
	}
	
	nav #navWelcome a{
		background:url(../images/navWelcome.png) no-repeat;
	}
	nav #navWelcome.hover a{
		background:url(../images/navWelcomeHover.png) no-repeat;
	}
	
	nav #navNews a{
		background:url(../images/navNews.png) no-repeat;
	}
	nav #navNews.hover a{
		background:url(../images/navNewsHover.png) no-repeat;
	}
	
	nav #navBiography a{
		background:url(../images/navBiography.png) no-repeat;
	}
	nav #navBiography.hover a{
		background:url(../images/navBiographyHover.png) no-repeat;
	}
	
	nav #navMusic a{
		background:url(../images/navMusic.png) no-repeat;
	}
	nav #navMusic.hover a{
		background:url(../images/navMusicHover.png) no-repeat;
	}
	
	nav #navVideos a{
		background:url(../images/navVideo.png) no-repeat;
	}
	nav #navVideos.hover a{
		background:url(../images/navVideoHover.png) no-repeat;
	}
	
	nav #navPictures a{
		background:url(../images/navPictures.png) no-repeat;
	}
	nav #navPictures.hover a{
		background:url(../images/navPicturesHover.png) no-repeat;
	}
	
	nav #navFame a{
		background:url(../images/navFame.png) no-repeat;
	}
	nav #navFame.hover a{
		background:url(../images/navFameHover.png) no-repeat;
	}
	
	nav #navBlog a{
		background:url(../images/navBlog.png) no-repeat;
	}
	nav #navBlog.hover a{
		background:url(../images/navBlogHover.png) no-repeat;
	}	
	
	nav #navOnthemoon{
		margin-left:0;
	}
	nav #navOnthemoon a{
		background:url(../images/navOnTheMoon.png) no-repeat;
	}	
	nav #navOnthemoon.hover a{
		background:url(../images/navOnTheMoonHover.png) no-repeat;
	}
	
	nav #navWelcome a, nav #navWelcome.hover a{
		width:100px;
		height:27px;
		background-size:100px 27px;
	}
	nav #navNews a, nav #navNews.hover a{
		width:62px;
		height:25px;
		background-size:62px 25px;
	}
	nav #navBiography a, nav #navBiography.hover a{
		width:128px;
		height:31px;
		background-size:128px 31px;
	}
	nav #navMusic a, nav #navMusic.hover a{
		width:76px;
		height:27px;
		background-size:76px 27px;
	}	
	nav #navVideos a, nav #navVideos.hover a{
		width:88px;
		height:27px;
		background-size:88px 27px;
	}
	nav #navPictures a, nav #navPictures.hover a{
		width:116px;
		height:27px;
		background-size:116px 27px;
	}
	nav #navFame a, nav #navFame.hover a{
		width:63px;
		height:27px;
		background-size:63px 27px;
	}
	nav #navBlog a, nav #navBlog.hover a{
		width:62px;
		height:31px;
		background-size:62px 31px;
	}
	nav #navOnthemoon a, nav #navOnthemoon.hover a{
		width:140px;
		height:27px;
		background-size:140px 27px;
	}
	
	#amazingaudioplayer-1{
		width:320px !important;
	}
	
	#plaguedoctors{
		margin-left:-266px;
		margin-top:40px;
		position:fixed;
		left:50%;
		z-index:9;
		top:99px;
		background:url(../images/plaguedoctors.png) no-repeat;
		width:586px;
		height:479px;
		background-size: cover;
		-ms-behavior: url(/css/backgroundsize.min.htc);
	}
	
	h2{
		font-size:22px;
	}
	h3{
		font-size:16px;
	}

}

@media screen and (min-width: 800px) {

	

	#clouds-wrapper{
		margin-top:-147px;
	}
	
	#contentWrapper{
		padding: 0 10% 0 25%;
		width:65%;
	}
	
	#contentWrapper section{
		min-height:450px;
	}

	header{
		width:400px;
		padding-top:10px;
	}
	header h1{
		background:url(../images/headerLarge.png) no-repeat;
		width:400px;
		height:70px;
		background-size: 400px 70px;
	}

	
}

@media screen and (min-width: 1100px) {

	
	section{
		padding-right: 5%;
		width: 65%;
	}
	aside{
		background: #191919;
		float: left;
		padding: 1%;
		width: 28% !important;
		display:block;
		margin-bottom:20px;
	}
	aside h3{
		color:#fff;
	}
	
	.onthemoon aside{
		margin-top:0;
		clear:none !important;
		background: #191919;
	}
	.onthemoon aside img{
			margin:0 auto;
	}
	
	
}

@media screen and (min-width: 1300px) {

	#buyalbum{
		margin-top:8px;
		padding-top:0;
		clear:none !important;
		float:left;
		width:202px;
	}

	#plaguedoctors{
		margin-left:-367px;
		position:fixed;
		left:50%;
		z-index:9;
		top:168px;
		background:url(../images/plaguedoctors.png) no-repeat;
		width:786px;
		height:642px;
		margin-top:0;
	}
	
	#spotlight{
		background:url(../images/spotlight.png) no-repeat;
		width:1397px;
		height:289px;
		margin-left: -695px;
		top: 547px;
		margin-top:0;
	}

	#clouds{
		background:url(../images/cloudsLarge.png) no-repeat center top;
		padding-top: 269px;
	}
	#clouds-wrapper{
		width:100%;
		position:fixed;
		top:0;
		margin:0 !important;
		max-width:100%;
		height:210px;
		z-index:200;
	}
	
	#contentWrapper{
		padding: 216px 0 0 170px;
		width: 1000px;
		margin: 0 auto;
	}
	

	header{
		width:100%;
		z-index:201;
		position:fixed;		
	}
	header h1{
		width:542px;
		height:95px;
		background-size: 542px 95px;
		margin: 0 auto;
	}
	header h2{
		visibility:visible;
	}
	
	#clouds-wrapper{
		margin-top:-141px;
	}
	
	nav{
		 left: 50%;
		margin-left: -601px;
		margin-top: 81px !important;
		position: fixed;
		top: 155px;
		width: auto;
		z-index: 204;
	}
	
	h2{
		font-size:22px;
	}
	
	.onthemoon #amazingaudioplayer-1{
		width:198px !important;
		overflow:hidden !important;
		height:25px !important;
	}
	
}