@charset "UTF-8";
/* CSS Document */
/***************************************************************************************************
* RE3.ORG MAIN STYLESHEET 
*
* PLEASE MAINTAIN THE FOLLOWING FORMATTING FOR EVERY STYLE CREATED IN THIS DOCUMENT:
* .stylename 
* {
* 	style properties...
* }
****************************************************************************************************/


body{
	background-color:#323232;
	background-image: url(../images/patternbar.png);
	background-repeat: repeat-x;	
	font-family: Impact, Arial, Helvetica, sans serif;
	color:#b0b1b3;
	margin:0px;
	padding:0px;
}
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0px;
	content: " ";
	clear: both;
	height: 0;
	line-height:0;
	}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */


/*******************************************************************************************
* BEGIN BASIC TAG STYLING [ h's(h1,h2,h3, etc), a's, p's, span's, etc
********************************************************************************************/
h1
{
	font-family: Impact, Arial Black, Arial, Helvetica, sans serif;
	color:#ff8e01;
}

/* ANCHOR STYLES */
a:link,a:visited,a:hover,a:active
{
	text-decoration:none
}
a:link,a:visited
{
	color:#ff8e01;
}
a:hover,a:active{
	color:#FFFFFF
}

.specialLink a:link {
}
.specialLink a:link, .specialLink a:visited, .specialLink a:active, .specialLink a:hover {
text-decoration:none;
font-weight:bold;
}
.specialLink a:link {
color:#ff8e01;
}
.specialLink a:visited {
color:#666666;
}
.specialLink a:active {
color:#ff8e01;
}
.specialLink a:hover {
color:#000000;
}


/*******************************************************************************************
* END BASIC TAG STYLING
********************************************************************************************/

/*******************************************************************************************
* BEGIN LAYOUT ELEMENT STYLING  Includes styles for the rows/columns that make up the layout
* of the page.  
*
* The layout consists of 3 rows. 1 for the banner, 1 for the content, and 1 for the footer
* The content row has 3 columns for displaying the various images
********************************************************************************************/

/*  This class surrounds the entire page and centers the page using the margin properties  */
.baseContainer{
	width:960px;
	margin-left:auto;
	margin-right:auto;
}

/*  The row that contains the banner.  The banner includes the RE3 logo and main navigation links */
.banner
{
	float:left;
}
.menu
{
	width:960px;
	margin-left:auto;
	margin-right:auto;
}
.menu span
{
	float:left;
	display:block;
	padding: 6px 30px 0px 30px;
}
.menu span a:link, .menu span a:visited
{	
	color:#ffffff;
	font-size: 18px;	
}
.menu span a:hover, .menu span a:active
{	
	color:#ff8e01;
}

/*******************************************************************************************
* END BANNER ROW STYLING
********************************************************************************************/

/*.imgRollover
{
	top:-20px;
}
*/

/*******************************************************************************************
* BEGIN CONTENT ROW STYLING  
*
* This row includes 3 columns for displaying the various images/links  
********************************************************************************************/

/* Surrounds the entire content row, it's purpose is to center the content within the page. */
.mainContent
{
	width:960px;
	margin-left:auto;
	margin-right:auto;
}

/* Aligns to the horizontal center and vertical top each of the columns */
.mainContent .leftContent div img, .mainContent .rightContent div img, .mainContent .middleContent div img
{
	vertical-align:top;
	text-align:center;
}

/* Sets the left and right column widths */
.mainContent .leftContent, .mainContent .rightContent 
{
	width:295px;
}

/* Set's the padding for all of the 3 columns, and the right column of the 2 column layout,
   and makes them float to the left to stay on 1 line  */
.mainContent .leftContent, .mainContent .middleContent, .mainContent .rightContent, .mainContent .largeRightContent
{
	/*padding-top:20px;*/
	float:left;
}

/* Sets the right column's width (2 column layout) */
.largeRightContent
{
	width: 665px;
}

/* These three classes set the padding for  all images the columns contain */
.mainContent .leftContent img
{
	padding-left:17px;
}
.mainContent .middleContent img
{
	padding-left:50px;
}
.mainContent .rightContent img
{
	padding-left:15px;
}
.mainContent .middleContent
{
	width:370px;
	margin-left:auto;
	margin-right:auto;
}

/* the imageLinks classes apply to the anchors/links that are located at the bottom right of each image */
.imageLinks 
{
    vertical-align:top;
}
.imageLinks a img
{
    border:none;
    outline:0;
}
.imageLinks .listen, .imageLinks .vote
{
	/*padding-top:35px;*/
}
.imageLinks .recycle
{
	/*padding-top:27px;*/
}
.imageLinksBottom, .imageLinksTop
{
	padding-top:0px;
	margin-top:0px;
}
.imageLinksTop img, .imageLinksBottom img, .imageLinksBottom a
{
	float:left;	
	display:block;	
	margin:0;
	padding:0;
}

/* This class controls the style for the links at the bottom right of each image. Use it to change the font styles, padding, etc.
*
*  If you need to change a specific style, such as when you hover over a link, you'll need to create another class, like:
* .imageLinksBottom a:hover 
* {
* 	properties you want to change...
* }
*
*/
.imageLinksBottom a
{
	width:80px;
	text-align:center;
	font-size: 18px;
    font-family: Impact, Helvetica, Arial, sans serif;
	padding:5px 0px 2px 0px;
}

.link a:link,.link a:visited,.link a:hover,.link a:active
{
	text-decoration:none
}
.link a:link,.link a:visited
{
	color:#FFFFFF;
}
.link a:hover,.link a:active{
	color:#ff8e01;
}

.truthfacts
{
	text-align:left;
	font-size: 14px;
    font-family: Helvetica, Arial, sans serif;
	padding:5px 0px 2px 0px;
}

.highlightNormal
{
     float:left;
     cursor:pointer; 
     background-image:url(../images/WhatsUpVideoWinnersGolf.png);
     background-repeat:no-repeat;
     width:591px;
     height:272px;
     background-position:30px 0px;
}



.highlightMouseOver
{
     float:left;
     cursor:pointer; 
     background-image:url(../images/WhatsUpVideoWinnersGolf.png);
     background-repeat:no-repeat;
     width:591px;
     height:272px;
     background-position:30px 0px;
}






/*******************************************************************************************
* END CONTENT ROW STYLING
********************************************************************************************/

/*******************************************************************************************
* BEGIN BANNER ROW STYLING
********************************************************************************************/

.footer
{
     margin-top:25px; 
	 text-align:center;
	 margin-bottom:15px;
}

.footer span
{
    text-align:center;
	line-height:15px;
	font-size: 11px;
    font-family: Helvetica, Arial, sans serif;
	color:#ffffff;
	

}
.footer span a:link,.footer span a:visited,.footer span a:hover,a:active
{
	text-decoration:none
}
.footer span a:link,.footer span a:visited
{
	color:#ff8e01;
}
.footer span a:hover,.footer span a:active{
	color:#FFFFFF
}

/*******************************************************************************************
* END FOOTER ROW STYLING
********************************************************************************************/


.Winners {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
}
.dark {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #323232;
	text-align:center;
	
}

.darkinstructional {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	color: #000000;
	text-align:left;
	
}


.darkheader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	color: #000000;
	text-align:left;
	
}


.media {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #FF8E01;
}
.giantheader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: normal;
	color: #FF8E01;
}
.linedtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #FF8E01;
}
.logo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.instructional {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	color: #999999;
}