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

#wrapper {
	width: 1018px;
	margin: 0 auto;
	/* color: #505050; */
	color: #999999;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
}
#header {
	background-image: url(../images/reefraft-header-med.png);
	background-repeat: no-repeat;
	/* height: 282px; */
	/* height: 174px; */
	height: 216px;
}
#skin {
	float: right;
	width: 180px;
	text-align: right;
	font-size: 11px;
	text-transform: uppercase;
	padding-right: 10px;
	padding-top: 10px;
}
#skin ul {
	margin: 0px;
	padding: 0px;
}
#skin li {
	list-style-type: none;
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
}
#skin a:link {
	text-decoration: none;
	color: #FFFFFF;
}
#skin a:visited{
	text-decoration: none;
	color: #FFFFFF;
}
#nav {
	background-color: #181818;
	padding: 10px;
}
#content {
	background-color: #181818;
	background-image: url(../images/cbg.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding: 15px;
	overflow: hidden;
}
#left {
	float: left;
	width: 280px;
}
#right {
	float: right;
	width: 665px;
}
#right_wide {
	/* float: right; */
	width: 945px;
}
#happeningbox {
	width: 240px;
	margin: 0 auto;
}
.pinktext {
	font-weight: bold;
	font-size: 14px;
	color: #ed1463;
}
.whitetext {
	font-weight: bold;
	color: #FFFFFF;
}
#hotnews {
	background-color: #000000;
	padding: 18px;
}
#hello {
	background-color: #000000;
	padding: 20px 20px 0 20px;
	overflow: hidden;
}

.leftimg {
	float: left;
	padding-right: 20px;
	display: block;
}
#musicupdates {
	padding: 20px 20px 0 20px;
	overflow: hidden;
}
#news {
	padding: 0 20px 0 20px;
	overflow: hidden;
}
.bluetext {
	font-weight: bold;
	color: #138FCD;
	font-size: 14px;
}
#footer {
	background-color: #000;
	opacity: 0.5;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
}
#contact {
	color: #696969;
	padding: 5px;
}
#contact input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 6px;
	border: 1px solid #696969;
	width: 250px;
	margin: 5px 0 5px 0;
}
#contact label {
	float: left;
	width: 80px;
	display: block;
	padding: 3px;
	margin: 3px 0 3px 0;
	clear: both;
	color: #FFFFFF;
}
#contact textarea {
	border: 1px solid #696969;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 6px;
	width: 250px;
	margin: 5px 0 5px;
}
.spotlightWrapper ul { 
			list-style-type: none; /* remove the default style for list items (the circles) */ 
			margin:0px; /* remove default margin */
			padding:0px; /* remove default padding */
		}
		.spotlightWrapper ul li { 
			float:left; /* important: left float */
			position:relative; /* so we can use top and left positioning */
		}
		.spotlightWrapper ul li a img { 
			width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */
			position:relative; /* so we can use top and left positioning */
			border:1px solid black; /* remove the default blue border */
		}
		.spotlightWrapper ul li a img.active {
			border:4px solid white; /* choose whatever you like */
			z-index:1; /* show it on top of the other images (they have z-index 0) */
			left: -4px; /* same as border width but negative */
			top: -4px; /* same as border width but negative */
		}
		.clear { clear:both; } /* to clear the float after the last item */

.photo {
	border: 5px solid #000000;
	}

#home_flash_box {
	text-align: center;
	float: center;
}

#home_skip_intro {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#home_intro_text {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.footerlink {
	color: #888888;
}