/* Colors

	Dirty White: rgb(200,200,200)
	Blue:				 rgb(115, 136, 155)
	Dark Gray:	 rgb(28,28,28)
	
*/
/* Meyer's Reset */
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,font,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{
/*	background: transparent; */
	border: 0;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
body{ line-height: 1; }
ol,ul{ list-style: none; }
blockquote,q{ quotes: none; }
blockquote:before,blockquote:after,q:before,q:after{ content: ''; content: none; }
:focus{ outline: 0; }
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
table{ border-collapse: collapse; border-spacing: 0; }

/* Other Resets*/
a:active { outline: none; }
 ul,ol,li { list-style-type: none; }

/* Generic Styles */
body {
	background-color: #FFF;
	background-image: url(../images/bg-body-3.jpg);
	font-family: Arial, sans-serif;
	font-weight: normal;
	min-width: 990px;
}
/* link color */
a { color: #900; }

a:hover { text-decoration: underline; }

	
hr { width: 100%; }

/* STRUCTURE */
#header { }

	#titles { margin-left: 115px; padding: 15px; width: 670px; }

#main-content {
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	width: 670px;
}

#content-wrap	{
	background: url(../images/bg-content.png) repeat-y;
	left: 25%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 15%;
	position: absolute;
	right: 25%;
	top: 0px;
	width: 900px;
}

.main {
	background-image: url(../images/white-trans.png);
	box-shadow: 0 0 18px #000;
	color: #000;
	display: block;
	margin-bottom: 20px;
	-moz-box-shadow: 0 0 18px #000;
	padding: 15px;
	-webkit-box-shadow: 0 0 18px #000;
	border-radius: 14px;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
}

	
	.main { overflow: auto; /* Clears floats */ width: 100%; }

	
	.main ul { overflow: auto; width: 100%; }

	
div#title {
	background-image:url('../images/title.png');
	background-repeat:no-repeat;
	left: 0;
	position: fixed;
	top: 55px;
	overflow:hidden;
	width:540px;
	height:171px;
	z-index:99;
}

	
#legal	{
	bottom: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	left: 10px;
	position: fixed;
	width: 30%;
}

#legal img { }

div#legal p	{ color: #000; margin:10px 10px 10px 0; }

#legal a	{
	color: #900;
	font-weight: bold;
	text-decoration: none;
}

#legal a:hover { color: #900; }

.social-media { position: fixed; right: 35px; top: 11px; z-index: 400; }

	
/* Content */
li.main	ul {
	border-bottom: #600 dotted 1px;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.mix-title {
	color: #000;
	display: block;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

	.mix-title .number { color: #c8c8c8; }

						 
.regular-title {
	display: inline;
	float: left;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 0px;
	margin-right: 15px;
	padding-bottom: 0px;
	text-shadow: #FFF 0 2px 2px;
}

.pre	{
	color: #333; /*CCC9FF*/ /* BRANDON YOU FILTHY ANIMAL THIS IS THE COLOR FOR THE TEXT ON THE ABOUT PAGE WHERE IT SAYS "REMIXER" or "DIRECTOR" HOWEVER IT IS WHEN DJP DECIDES TO CHANGE IT BACK BECAUSE YOUR IDEA WAS STUPID */
	font-size: 9px;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.song,
.artist		{
	display: inline;
	color: #900;
	float: left;
	font-size: 14px;
	font-weight: bold;
	line-height: 15px;
	margin-bottom: 5px;
	margin-right: 15px;
}

li.main p {
	border-bottom: #360 dotted 1px;
	color: #666;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 22px;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.download	{
	background-color: #FFF;
	border-radius: 6px;
	border: solid 1px #000;
	color: #F00;
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.2em;
	margin-right: 10px;
	margin-top: 0px;
	-moz-border-radius: 6px;
	padding: 8px; /*float: right;*/
	position: relative;
	text-align: right;
	text-transform: uppercase;
	-webkit-border-radius: 6px;
}

.download-full	{
	background-color: #FFF;
	border-radius: 6px;
	border: solid 1px #BDBD9D;
	color: #F00;
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.2em;
	margin-bottom: 20px;
	margin-right: 10px;
	margin-top: 6px;
	-moz-border-radius: 6px;
	padding: 8px;
	text-align: right;
	text-transform: uppercase;
	-webkit-border-radius: 6px;
}

.download:hover { border: solid 1px #000; color: #000; }

.download-full:hover { border: solid 1px #000; color: #000; }

    		                      
#nav {
	background-color: #EAEAEA;
	box-shadow: #FFF 0 1px 2px;
	display: block;
	height: 30px;
	-moz-box-shadow: #FFF 0 1px 2px;
	padding-top: 15px;
	position: fixed;
	top: 0px;
	-webkit-box-shadow: #FFF 0 2px 10px;
	width: 100%;
	z-index: 100;
}

#nav li		{
	color: #000;
	display: inline;
	font-size: 12px;
	font-weight: bold;
	margin-left: -5px;
	text-shadow: #CCC 0 1px 1px;
}

#nav li	a	{
	border-right: #999 solid 2px; /*MOAR CRAZY YELLOW YO I HAS NO IDEA WHAT DIS IS */
	color: #000;
	letter-spacing: 2px;
	padding: 15px;
	text-decoration: none;
	text-transform: uppercase;
}

#nav li	a:hover {
    color: #F00;
}

    		               
.main h3	{
	color: #6C0000;
	letter-spacing: 2px;
	margin-bottom: 10px;
	text-shadow: #CCC 0 2px 2px;
	text-transform: uppercase;
}
   		               
	.main h3 a { color: #FF9900; }

    		               
a { text-decoration: none; }

.main .no-rules p { border-bottom: none; }

.main .no-rules p.last { margin-bottom: 0px; padding-bottom: 0px; }

iframe { color: #c8c8c8 !important; }

/*Table and thumbnails*/
.thumb table {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

.thumb img {
    border: 5px solid #f1f1f1;  
}

.thumb td {
    padding: 5px;
}

/* BACKGROUND IMAGE */
/* This sets up the scaling background image. The technique is taken from css-tricks.com */
img.bg {
	height: auto;
	left: 0;
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	/* Set up positioning */
	position: fixed;
	top: 0;
	/* Set up proportionate scaling */
	width: 100%;
}

@media screen and (max-width: 1024px){
	img.bg { left: 50%; margin-left: -512px; }

}
div#content {
	margin: 0px 20px 20px 20px; 
	position: absolute;
	right: 5%;
	top: 240px;
	width: 50%;
	min-width: 570px;
}

body {
	margin: 0; /* They are for styling only */
	padding: 20px 0 0 0;
}