/*
	Club Mono
	Global.css
*/

html, body { margin: 0 auto; }
html { background: #000000 url('../images/header.jpg') top center repeat-x; text-align: center; }
ul, li, p, h1, h2, h3, h4, h5 { padding: 0; margin: 0; list-style: none; }
a { text-decoration: none; color: #FFFFFF; border-bottom: 1px; }
a:hover { color: #ebaaf6; }
a img { border: none; }

body, textarea { font-family: Helvetica, Arial, sans-serif; }
body
{
	overflow-x: hidden;
	width: 900px;
	padding: 40px 40px 0 40px;
		
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
}

/* Header */

h1 {
	float: left;
	width: 240px;
	height: 70px;
	
	background: url('../images/logo.png') no-repeat;
	text-indent: -5000px;
}
h1 a { float: right; width: 240px; height: 70px; }

ul#menu { float: right; width: 650px; height: 120px; padding: 0 0 0 10px; }
	ul#menu li   { float: right; width: 90px; height: 50px; text-align: center; margin: 0 0 0 5px; font-weight: bold; }
	ul#menu li a { background: url('../images/tab.jpg'); height: 32px; width: 100%; display: block; padding: 18px 0 0 0; }

/* Slideshow / Content Areas */

div#slideshow, div#events { clear: both; float: left; width: 590px; padding: 0 0 0 10px; height: 500px; background: #000000; }
div#slideshow a { width: 590px; display: block; }

div#content_left	{ clear: both; float: left;	width: 430px; padding: 0 0 20px 10px; }
div#content_right	{ float: right;	width: 430px; padding: 0 10px 20px 0; }
div#content_whole { clear: both; width: 880px; padding: 0 10px 10px 10px; }

div#content_left p, div#content_right p { padding: 10px 0 0 0; line-height: 20px; color: #e6d9db; }
div#content_left h3, div#content_right h3, div#content_whole h3 { border-bottom: 1px solid #b2808b; padding: 0 0 10px 0; }
div#events h3 { border-bottom: 1px solid #3c2128; font-size: 14px; padding: 20px 0 5px 5px; margin-bottom: 20px; }

/* Right */

div#right { float: right; width: 250px; padding: 0 10px 0 0 30px; position: relative; }
	div#right p			{ padding: 10px 0 0 0; text-align: right; }
	div#right p.divider { padding: 20px; }
	div#right h2		{ font-size: 14px; padding: 15px 0 5px 5px; text-align: center; border-bottom: 1px solid #3c2128; }

div#player { height: 50px; width: 250px; }
	div#player h3	{ font-size: 12px; position: relative; z-index: 1; padding: 10px 0 0 0; }
	div#player p	{ font-size: 11px; color: #dfa3b3; position: relative; z-index: 1; text-align: left; padding: 0; }
	div#player a	{  position: absolute; z-index: 2; display: block; height: 50px; width: 250px; background: url('../images/play.png') 200px no-repeat; }
	div#player a:hover	{  background: url('../images/play1.png') 200px no-repeat; }
	div#player a:active	{  background: url('../images/play2.png') 200px no-repeat; }

div#calender-controls				{ z-index: 3; position: relative; bottom: -35px; text-align: center; width: 250px; height: 20px; display: block; }
div#calender-controls a#previous1	{ float: left; width: 30px; cursor: pointer; }
div#calender-controls a#next1		{ float: right; width: 30px; cursor: pointer; }
div#calender-change					{ width: 460px; height: 220px; display: block; z-index: 2; position: relative; }
div.slide-month						{ width: 250px; height: 210px; display: block; background: #000000; }
	
div#calender { width: 238px; height: 180px; background: #000000; }
	div#calender span			{ float: left; width: 30px; height: 25px; display: block; text-align: center; margin: 2px; font-size: 12px; position: relative; z-index: 1; }
	div#calender span.day		{ font-weight: bold; color: #e7e6e6; padding: 7px 0 0 0; }
	div#calender span.event a	{ font-weight: bold; background: #ebaaf6; color: #000000; }
	div#calender span.event a:hover { font-weight: bold; background: #c57dd1; color: #000000; }
	div#calender span a			{ height: 18px; width: 30px; display: block; padding: 7px 0 0 0; color: #b3b3b3; }
	div#calender span a:hover	{ height: 18px; width: 30px; display: block; padding: 7px 0 0 0; background: #ebaaf6; color: #000000; }
	
	span:hover > div.rollOver	{ display: block; }
	span div.rollOver			{
		display: none;
		height: 95px;
		width: 250px;
		text-align: left;
		
		background: url('../images/rollOver.png') no-repeat;
		
		position: absolute;
		z-index: 100;
		top: -80px;
		right: -220px;
		text-shadow: #ffffff 1px 1px;
	}
	div#calender span div.rollOver a { height: 47px; width: 185px; padding: 8px 15px 50px 50px; background: none; }
	div#calender span div.rollOver a:hover { background: none; }
	span div.rollOver p { line-height: 9px; padding: 0; margin: 0; font-size: 11px; color: #515c60; float: left; width: 105px; text-align: right; }
	span div.rollOver p.dayName { font-weight: bold; font-size: 13px; color: #293032; padding-top: -2px; }
	span div.rollOver img { float: right; width: 65px; padding: 3px 0 0 5px; }
	
/* Footer */

div#footer { clear: both; border-top: 1px solid #2e2527; padding: 10px 0 10px 0; }
	div#footer div#advert { float: left; width: 500px; padding: 0 0 10px 10px; }
	div#footer p#copyright { clear: both; border-top: 1px solid #2e2527; padding: 10px; font-size: 11px; color: #744f59; }
		div#footer p#copyright span { float: right; text-align: right; width: 200px; }
			div#footer p#copyright span a { color: #744f59; }
			div#footer p#copyright span a:hover { color: #ebaaf6; }
	div#footer div#social { float: right; width: 250px; }
		div#social h4 { color: #ca748b; font-size: 11px; padding: 5px 0 10px 0; width: 240px; }
		div#follow span { color: #ca748b; font-size: 11px; padding: 5px 0 10px 0; }
		div#social input.field	{ width: 180px; height: 21px; border: none; background: url('../images/field.jpg') no-repeat; color: #8e364d; font-weight: bold; padding: 9px 0 0 10px; outline: none; }
		div#social input.button { width: 49px; height: 30px; border: none; text-shadow: #692131 -1px -1px; color: #ffffff; }
			div#social input.button			{ background: url('../images/button.jpg') no-repeat; }
			div#social input.button:hover	{ background: url('../images/button1.jpg') no-repeat; }
			div#social input.button:active	{ background: url('../images/button2.jpg') no-repeat; }
		
		div#follow		{ padding: 15px 0 0 0; }
		div#follow span { float: left; width: 85px; padding: 10px 0 0 0; }
		div#follow p	{ float: right; width: 145px; padding: 0; }

/* Gallery */

div.album { float: left; width: 200px; padding: 20px 10px 10px 10px; }
div.album p { text-align: center; font-size: 12px; font-weight: bold; border-bottom: 1px dashed #333333; height: 35px; }
div.album p a { display: block; color: #f2e2f5; padding: 10px; height: 15px; width: 180px; }
div.album p a:hover { background: #f2e2f5; color: #000000; }

div#albumImg { float: left; width: 610px; padding: 55px 0 30px 0; text-align: center; }
div#albumSide { float: right; width: 260px; padding: 30px 0 0 0; text-align: right; }

/* Events */

h2.event_date	{ font-size: 26px; padding: 30px 0 0 0; }
h2.event_title	{ font-size: 20px; color: #f6e9f8; padding: 10px 0 10px 0; }
div#content_right h3.event_sub	{ color: #f0d7f4; border: none; }
h4.event_time	{ color: #f0d7f4; padding: 0 0 10px 0; border-bottom: 1px solid #b2808b; margin-bottom: 10px; }

div#events div#calender			 { width: 600px; }
div#events div#calender span	 { width: 80px; height: 50px; font-size: 14px; font-weight: bold; }
div#events div#calender span.day { height: 30px; }
div#events div#calender span a	 { width: 80px; height: 34px; padding: 16px 0 0 0; }
div#events div#calender span.event a { font-weight: bold; background: #ebaaf6; color: #000000; }
div#events div#calender span.event a:hover { font-weight: bold; background: #c57dd1; color: #000000; }

div#events span div.rollOver	 { padding-top: 6px; height: 95px; width: 250px; }
div#events span div.rollOver p	 { line-height: 16px; }
div#events span div.rollOver img { margin-top: -5px; }
div#events div#calender span div.rollOver a { height: 47px; width: 185px; padding: 8px 15px 50px 50px; background: none; }
div#events div#calender span div.rollOver a:hover { background: none; }
	

div#events_months { padding: 10px 0 0 0; }
div#events_months a { float: left; width: 80px; height: 22px; text-align: center; padding: 8px 0 0 0; }
div#events_months a:hover { background: #ebaaf6; color: #000000; }

/* Mixes */

div.blurb { height: 80px; padding: 20px 0 0 0; }
div.blurb p { float: left; width:450px;  padding: 10px;}
div.blurb div#player { float: right; }
div.blurb div#player h3 { border: none; }

div.song { border-top: 1px solid #2e2527; clear: both; padding: 20px; }
div.song span { float: left; width: 660px; font-size: 16px; font-weight: bold; padding-bottom: 20px; }
div.song a {	float: right; width: 100px; text-align: right; padding: 5px 0 20px 0; }

/* Preload some images so they are already loaded when called */

div#preload { display: none; }