/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	
	background-color:#FFFFFF;
	
	font-size: 12px;
	color: #555555;
	
	text-align: center;
}


#clearBoth {
	/*
	 * this fixes some IE clearing bug... i think
	 *
	 * i've attached it to br's to make sure.
	 */
	clear: both;
}


/******************************************
 *
 * Styles for HEADLINES and thicker info.
 *
 ******************************************/
.headlineBLK {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 110%;
	font-weight: bold;
	color: #666666;
	/*text-transform: uppercase;*/

	margin: 8px 1em 0px 0px;
}

.headlineORNG {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 110%;
	color:#CC6633;/*#CC8844;*/
	margin: 0px;
	padding: 0px;
}

/******************************************
 *
 *	Standard PARAGRAPH stylings
 *
 ******************************************/
p {
	padding: 2px 0px 2px 1em;
	margin: 0px 0px 25px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555555;
}



/******************************************
 *
 *	Wrapper for the majority of content to fit 800px wide.
 *
 ******************************************/
div#wrapper {
	width: 800px;
	margin: 0px auto;
	padding: 0px;
	text-align: left;
	overflow: auto;
}

/******************************************
 *
 * Styles to place the banner image behind the menu and center it within our page.
 *
 ******************************************/
div#banner {
	width: 100%;
	height: 250px !important;
	height: 278px;
	margin: 0px auto 20px auto;
	padding-top: 4px;
	padding-bottom: 4px;
	background: #FFFFFF url(images/banner.jpg) right no-repeat;
}

/******************************************
 *
 * so just how shall we style the menu?
 *
 *
 * i'd say, do it like this:
 *
 ******************************************/
div#menu {
	float: left;
	position: relative;
	display: block;
	width: 100%;
}

div#menu ul  {
	margin: 0px;
	padding: 0px;
	list-style-type: none;

}
div#menu li {
	width: 100%;/*93px*/
	margin: 0 0 1px;
	padding: 0px;
	overflow: hidden;
}
div#menu a {
	display: block;
	margin: 0px;
	padding-left: 3px;
	text-decoration: none;
	border: none;
	overflow: hidden;
	/*background-color:#FF9999;*/
}

/******************************************
 *
 *	This little area here designates the appropriate background colors for
 *	the menu items so that we form a rainbow!
 *
 ******************************************/
a.Cnews:link,
a.Cbio:link,
a.Cmembers:link,
a.Clisten:link,
a.Cpics:link,
a.Cvideos:link,
a.Cmyspace:link,
a.Cpress:link,
a.Cemail:link {}

a.Cnews:visited,
a.Cbio:visited,
a.Cmembers:visited,
a.Clisten:visited,
a.Cpics:visited,
a.Cvideos:visited,
a.Cmyspace:visited,
a.Cpress:visited,
a.Cemail:visited {}

div#menu a.Cnews:hover, img.Cnews {
	background-color:#FF3333;
}
div#menu a.Cbio:hover, img.Cbio {
	background-color:#FF9900;
}
div#menu a.Cmembers:hover, img.Cmembers {
	background-color:#FFFF33;
}
div#menu a.Clisten:hover, img.Clisten {
	background-color:#33FF33;
}
div#menu a.Cpics:hover, img.Cpics {
	background-color:#0066FF;
}
div#menu a.Cvideos:hover, img.Cvideos {
	background-color:#9933CC;
}
div#menu a.Cmyspace:hover {
	background-color:#CC00CC;
}
div#menu a.Cpress:hover, img.Cpress {
	background-color:#FF99CC;
}
div#menu a.Cemail:hover {
	background-color:#FFCC66;
}


/******************************************
 *
 * Don't forget, on any images that are links, we don't want that ugly border thing it does.
 * Particularly the menu!
 *
 ******************************************/
a img {
	border: none !important;
}

/******************************************
 *
 * Some shared properties between content and the right column.
 *
 ******************************************/
a, div#rightColumn a, div#news a {
	text-decoration: none;
	font-weight: bold;
	color: #555555;
}

a:hover, div#rightColumn a:hover, #news a:hover {
	text-decoration: line-through;
}

/******************************************
 *
 * lets present the section titles floated left with some color around it.
 *
 ******************************************/
#sectionTitle {
	float: right;
	position: relative;
	display: block;
	margin: 15px 0px;
	padding: 0px;
	padding-right: 30px;
}

/******************************************
 *
 * Style that NEWS shit so it floats left and leaves room between the randoms
 *
 ******************************************/
div#news {
	width: 593px !important;
	margin-right: 5px;
	padding: 0px;
	clear: both;
	float: left;
	position: relative;
	display: block;
	overflow: auto;
}

/******************************************
 *
 * lets stylize the random stuff in the "rightcolumn" over there.
 *
 ******************************************/
div#rightColumn {
	width: 200px !important;
	width: 200px;
	margin: 0px 0px;
	padding: 0px 0px;
	background-color: #FFFFFF;
	float: right;
	position: relative;
	display: block;
	overflow: auto;
}

/*
 * images in the right column will be centered if smaller and chopped if bigger.
 * as a bonus, i put a little margin below it.
 *
 */
div#rightColumn img {
	margin: 0px auto;
	margin-bottom: 10px;
	overflow: hidden;
}

div#rightColumn p {
	margin: 5px auto 10px auto;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
}

div#rightColumn h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
	font-weight: bold;
	color: #666666;

	margin: 8px 0px 0px 0px;
	padding: 3px 0px 1px 0px;

	border-bottom: 1px solid #0099FF;
}


/******************************************
 *
 * Style the BIO div.
 *
 ******************************************/
div#bio {
	width: 800px;
	margin: 0px;
	padding: 0px;
	float: left;
	clear: both;
	overflow: auto;
}

/******************************************
 *
 * Style the MEMBERS div.
 *
 ******************************************/
div#members {
	width: 800px;
	margin: 0px;
	padding: 0px;
	float: left;
	clear: both;
	overflow: auto;
}

div#press {
	width: 800px;
	margin: 0 auto;
	overflow: auto;
}
div#press p {
	border-top: 1px solid #DDD;
	padding: 2px 0px 2px 1em;
	margin: 0px 0px 25px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555555;
}


/******************************************
 *
 * Style the mp3Player container DIV
 *
 ******************************************/
div#mp3Player {
	width: 500px;
	margin: 0 auto;
	text-align: center;
}


/******************************************
 *		
 *		VIDEO stylings
 *
 ******************************************/
div#videosBody {
	width: 100%;
	/* For IE */
	text-align: center;
	overflow: auto;
}
.video {
/* DEBUG: these width & height may have to be tweaked with !important markers for IE */
	width: 425px;
	height: 350px;
	/*margin: 5px auto 20px auto;*/
	margin: 25px auto 50px auto;	
	padding: 5px;
	border: 1px dotted #0099FF;
	/*text-align: center;*/
	display: block;
	position: relative;
}
.video p {
	text-align: right;
}

/******************************************
 *		
 *		PICTURE stylings
 *
 ******************************************/
div#picturesBody {
	width: 100%;
	/* for IE */
	text-align: center;
	overflow: auto;
}

.pictureFrame {
	width: 425px;
/*	height: 319px;*/
	/*margin: 5px auto 20px auto;*/
	margin: 25px auto 50px auto;	
	padding: 5px;
	border: 1px dotted #0099FF;
	background-color: #EEEEEE;
	/*text-align: center;*/
	display: block;
	overflow: auto;
	text-align: right;
	position: relative;
}
.pictureFrame p {
	text-align:right;
}

.listenContent {
	margin-top: 20px;
	
	border-top: 1px #555 solid;
	text-align: left;
}
.tightList {
	padding: 5px 0px 2px 3em;
	margin: -20px 0px 10px 0px;

	border-top: 1px #DDD solid;
	
	list-style-type: decimal;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555555;

}
.tightList li {
	margin: 0px;
	padding: 0px;
	
	line-height: 130%;
}

.ppForm {
	margin: 10px;
	padding: 0px;
	display: block;
	position: relative;
	float: left;
}

.centered {
	width: 100%;
	text-align: center;
}
.centered * {
	margin: 0 auto;
}

.footer {
	width: 798px;
	margin: 50px auto 40px auto;
	padding: 4px 0;
	font: 10px/10px normal Verdana, Arial, Helvetica, sans-serif;
	border-top: 1px solid #EEE;
	text-align: right;
	float: left;
	clear: both;
}