@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 | 20110126
	License: none (public domain)
*/
	
	html,body,div,span,applet,object,iframe,
	h1,h2,h3,h4,h5,h6,p,blockquote,pre,
	a,abbr,acronym,address,big,cite,code,
	del,dfn,em,img,ins,kbd,q,s,samp,
	small,strike,strong,sub,sup,tt,var,
	b,u,i,center,
	dl,dt,dd,ol,ul,li,
	fieldset,form,label,legend,
	table,caption,tbody,tfoot,thead,tr,th,td,
	article,aside,canvas,details,embed,
	figure,figcaption,footer,header,hgroup,
	menu,nav,output,ruby,section,summary,
	time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
	
	/* HTML5 display-role reset for older browsers */
	article,aside,details,figcaption,figure,
	footer,header,hgroup,menu,nav,section{display:block;}
	body{line-height:1;}
	ol,ul{list-style:none;}
	blockquote,q{quotes:none;}
	blockquote:before,blockquote:after,
	q:before,q:after{content:'';content:none;}
	table{border-collapse:collapse;border-spacing:0;}
	
/*************************FONTS*****************************/

@font-face {
    font-family: 'KaushanScriptRegular';
    src: url('../fonts/kaushan/KaushanScript-Regular-webfont.eot');
    src: url('../fonts/kaushan/KaushanScript-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kaushan/KaushanScript-Regular-webfont.woff') format('woff'),
         url('../fonts/kaushan/KaushanScript-Regular-webfont.ttf') format('truetype'),
         url('../fonts/kaushan/KaushanScript-Regular-webfont.svg#KaushanScriptRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'GeometrySoftProBoldN';
    src: url('../fonts/geo/Geometry_Soft_Pro-Bold_N-webfont.eot');
    src: url('../fonts/geo/Geometry_Soft_Pro-Bold_N-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geo/Geometry_Soft_Pro-Bold_N-webfont.woff') format('woff'),
         url('../fonts/geo/Geometry_Soft_Pro-Bold_N-webfont.ttf') format('truetype'),
         url('../fonts/geo/Geometry_Soft_Pro-Bold_N-webfont.svg#GeometrySoftProBoldN') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*************************FORMAT****************************/
body{
	background-image:url(../images/bg.png);
	background-repeat:repeat;	
}

#wrapper{
	width:900px;
	background-color:rgba(50,50,50,0.5);
	height:1000px;
	margin:0 auto;
	border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
	-webkit-border-radius:20px;
}

#mainHead{
	width:105%;
	height:125px;
	background:#00B7B7;	
	margin-left:-20px;
	box-shadow: 5px 5px 5px #000;
	-o-box-shadow: 5px 5px 5px #000;
	-moz-box-shadow: 5px 5px 5px #000;
	-webkit-box-shadow: 5px 5px 5px #000;
	border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	-webkit-border-radius:5px;
}

h1{
	color:#2E2E2E;
	font-family:'KaushanScriptRegular',Verdana, Geneva, sans-serif;
	font-size:80px;
	text-align:center;
	line-height:1.6em;
}

#mainFoot{
	position:fixed;
	bottom:0;
	height:25px;
	width:100%;
	background-color:#00B7B7;	
	text-align:center;
	line-height:1.5em;
		
}

/*************************NAV*******************************/
#mainNav{
	width:90%;
	height:100px;
	border-radius-top-left:10px;
	border-radius-top-right:10px;
	-moz-border-radius-top-left:10px;
	-moz-border-radius-top-right:10px;
	-o-border-radius-top-left:10px;
	-o-border-radius-top-right:10px;
	-webkit-border-radius-top-left:10px;
	-wenkit-border-radius-top-right:10px;
	margin:50px auto;
}

#mainNav h2{
	font-size:34px;
	color:white;	
	margin-left:15px;
	font-family:'KaushanScriptRegular',Verdana, Geneva, sans-serif;
	margin-top:25px;
}

#mainNav p{
	font-size:18px;
	color:white;
	margin-left:15px;	
	font-family:'GeometrySoftProBoldN',Verdana, Geneva, sans-serif;
	margin-top:15px;
}
a{
	text-decoration:none;
}

.home{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
}

.home:hover{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
	background-color:#00B7B7;
	cursor:pointer;
}

.about{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
}
.about:hover{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
	background-color:#00B7B7;
	cursor:pointer;
}

.music{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
}
.music:hover{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
	background-color:#00B7B7;
	cursor:pointer;
}

.forum{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
	

}
.forum:hover{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
	background-color:#00B7B7;
	cursor:pointer;
}
.account{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;

}
.account:hover{
	width:150px;
	height:100px;
	float:left;
	border-left:2px solid white;
	padding-top:10px;
	background-color:#00B7B7;
	cursor:pointer;
}


/*************************CONTENT***************************/

#main{
	margin:0 auto;	
}

.one{
	width:275px;
	height:275px;
	background:#666;
	float:left;
	margin:10px;
	margin-left:20px;
	margin-top:40px;
	
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.two{
	width:275px;
	height:275px;
	background:#666;
	float:left;
	margin:10px;
	margin-top:40px;
	
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.three{
	width:275px;
	height:275px;
	background:#666;
	float:left;
	margin:10px;
	margin-top:40px;
	
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.four{
	width:275px;
	height:275px;
	background:#666;
	float:left;
	margin:10px;
	margin-left:160px;
	
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.five{
	width:275px;
	height:275px;
	background:#666;
	float:left;
	margin:10px;
	
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

#banner{
	width:175px;
	height:30px;
	background:#00b7b7;	
	transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	margin-top:45px;
	margin-left:-30px;
	
	border-radius:5px;
	-o-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	
	box-shadow:-3px 3px 3px #222;
	-o-box-shadow:-3px 3px 3px #222;
	-moz-box-shadow:-3px 3px 3px #222;
	-webkit-box-shadow:-3px 3px 3px #222;
}

#banner p{
	font-family:'GeometrySoftProBoldN',Verdana, Geneva, sans-serif;
	color:#1E1E1E;
	margin:auto;
	text-align:center;
	line-height:1.8em;
}

.songOneSample{
	width:inherit;
	height:25px;
	margin-top:50px;
	}
	
.songOne{
	width:inherit;
	height:25px;
	margin-top:50px;
	
}

.songTwoSample{
	width:inherit;
	height:25px;
	margin-top:50px;
	}
	
.songTwo{
	width:inherit;
	height:25px;
	margin-top:50px;
	
}

.songThreeSample{
	width:inherit;
	height:25px;
	margin-top:50px;
	}
	
.songThree{
	width:inherit;
	height:25px;
	margin-top:50px;
	
}

.songFourSample{
	width:inherit;
	height:25px;
	margin-top:50px;
	}
	
.songFour{
	width:inherit;
	height:25px;
	margin-top:50px;
	
}

.songFiveSample{
	width:inherit;
	height:25px;
	margin-top:50px;
	}
	
.songFive{
	width:inherit;
	height:25px;
	margin-top:50px;
	
}
audio{
	width:250px;
	margin-left:10px;	
	
}

h3{
	text-align:center;
	font-family:'GeometrySoftProBoldN',Verdana, Geneva, sans-serif;
	color:white;
	font-size:20px;
	margin-bottom:5px;
}

/************************Custom player*******************/
#pause{
	color:white;
	text-size:16px;	
}