/* MEYERS CSS 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 {   
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	vertical-align: baseline;
	background: transparent;
}
body {
	
	line-height: 1;
	font-size: 62.5%;
	padding-bottom: 5em;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END MEYER'S CSS RESET */

/*	NOTES

COLOR: 
	Links		 Blue		#3893C2	
	Borders		 Orange		#F47321
	Backgrounds	 Blue/Grey	#D8E0E3

GRID: 
	960px / 2 Blocks = 480px
		  / 3 Blocks = 320px
		  / 4 Blocks = 240px
		  / 5 Blocks = 192px
*/

body { font-family: Verdana, Arial, Sans-serif; }
a, a:visited {}
h1,h2,h3,h4,h5,h6 {}
h1 { font-size: 3em; }
h4 { font-size: 1.2em; }

.clear { clear: both; height: 1%; }

.container { width: 96em; margin: 0 auto; border: 0px solid #cccccc; }
.header { margin-bottom: 1em; }
.header .logo { float: left;}
.header .search {}
.header .search form { margin-left: 32em; margin-top: 2em; width: 20em; float: left; text-align: right; }
.header .search form input { padding: .3em; border: 1px solid #eeeeee; border-top: 1px solid #aaaaaa; border-left: 1px solid #aaaaaa; font-weight: bold; color: #555555;  }
.header .search form img { cursor: pointer; }
.header ul.top-nav { font-size: 1.1em; margin: .5em 0 0 0;  float: right;}
.header ul.top-nav li { float: left; border-right: 1px solid #444444; }
.header ul.top-nav li.last { border: 0; }
.header ul.top-nav li a, ul.top-nav li a:visited { text-decoration: none; color: #3893C2; padding: .5em .8em; }
.header ul.top-nav li a:hover {}
.header ul.top-nav li a:active {}
.content {}
.vidplayer {	
        float:left;
	    width:450px;
	    height:323px;
    }
.vidplayer img {	
		cursor: pointer; 
	    width:450px;
	    height:323px;
    }    
.content .branding { 	
	display: block; 
	height: 283px; 
	padding: 20px; 
	width: 47em; 
	float: left; 
	background-image: url('../images/branding-bg.jpg');
	background-repeat: no-repeat;
	background-color: #FAFAFA; 
	background-position: top right; 
	}
.content .branding a { color: #F47321; }	
.content .branding a.contest { position: absolute; margin: -20px 0 0 320px;  }	
.content .branding a.exclusive { position: absolute; margin: -20px 0 0 189px;  }	
.content .branding p { font-size: 1.1em; padding: 0 0 1em 0; line-height: 1.4em; width: 39em; } 
.content .branding a.sponsor-tab { 
	display: block; 
	color: #333333;
	text-decoration: none;
	width: 30em; 
	margin-top: 3em;
	background-color: #b4bfcd;
	border: 4px solid #FFFFFF;
	padding: .5em;
	}
.content .sponsorship { 
	position: absolute; 
	margin-left: 45em; 
	display: block; 
	height: 29em; 
	padding: 2em; 
	width: 47em; 
	float: left; 
	background-image: url('../images/branding-bg.jpg');
	background-repeat: no-repeat;
	background-color: #FAFAFA; 
	z-index: 100; 
	}
.content .sponsorship ul { line-height: 1.4em; padding: 0em 3.5em; list-style: square; }
.content .sponsorship ul li { margin-bottom: .75em;}	
.content .sponsorship a { font-weight: bold; color: #111111; display: block; width: auto; text-align: center;  }
.content .sponsorship a.sponsor-tab { 
	display: block; 
	color: #333333;
	text-decoration: none;
	width: 20em; 
	margin-top: 0em;
	background-color: #b4bfcd;
	border: 4px solid #FFFFFF;
	padding: .5em;
	}	
.content .sponsorship p {
	font-size: 1.1em; padding: 0 2em 1em 2em; line-height: 1.4em; width: 41em;
	}	
.content .player-page { background-color: #111111; width: 100%; height auto; text-align: center;
	background-image: url(../images/corner-left-top.gif);
	background-position: top left; 
	background-repeat: no-repeat;
	}
.content .player-page img { width: 600px; height: auto; cursor: pointer; }
.content .player { background-color: #FFFFFF; width: 45em; float: left; }
.content .player img {  }


/* Horizontal Scrolling Playlist */
div#horizontal-scroll {
	padding-top: 1em; 
	}
img.browse { float: left; cursor: pointer;  }    
img.disabled { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 88em; 
    height: 11em; 
    float: left;
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable ul.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
    list-style: none; 
    padding: 0; margin: 0;
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable ul.items li { 
    background-image:url(../images/scrollable-bg.gif);
	background-position:left top;
	background-repeat:repeat-x;
    background-color:#EAEDF1;
	border-bottom:1px solid #B4BFCD;
	border-top:1px solid #B4BFCD;
	color:#000000;
	float:left;
	width:28em;
} 
div.scrollable ul.items li.playing { background-color: #ffffcc; background-image: none;  }
div.scrollable ul.items li a { display: block;  border-bottom: 0em solid #F47321; color: #000000; text-decoration: none;  }
div.scrollable ul.items li a:hover { background-color: #B4BFCD; }
div.scrollable ul.items li a img { float: left; }
div.scrollable ul.items li a span { display: block; float: left; width: 12em; padding: .5em; font-size: 1.1em; } 
div.scrollable ul.items li a span small {
	display: block; 
	color: #555555;
	margin-top: .50em; 
	clear: both; 
	}
/* you may want to setup some decorations to active the item */ 
ul.items li.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}
/* End Scrolling Playlist */

/* Gray Nav */
.gray-nav {
	display: block;
	background-image: #ccc;
	width: 100%;
	height: 5.1em;
	background-image: url(../images/bg-gray-nav.jpg);
	background-repeat: repeat-x;
	margin-top: 2em; 
	}
.gray-nav ul { 
	width: 100%;
	}
.gray-nav ul li { float: left; }
.gray-nav ul li a { 
	display: block; 
	height:  auto;
	font-size: 1em;  
	background-image: url(../images/bg-gray-nav-border.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	text-decoration: none;
	color: #323334;
	}
.gray-nav ul li a:hover { color: #3893C2; }
.gray-nav ul li a:active { 
	color: #3893C2; 
	filter:alpha(opacity=30);
	opacity: 0.3;
	background-color: #f1f1f1;
	}
.gray-nav ul li a.ff {
	display: block; height: 35px; width: 137px;
	background-image:url(../images/gray-nav-items.jpg);
	background-repeat: no-repeat;
	background-position: 0 -35px;
	}
.gray-nav ul li a.fc {
	display: block; height: 35px; width: 139px;
	background-image:url(../images/gray-nav-items.jpg);
	background-repeat: no-repeat;
	background-position: -138px -35px;
	}
.gray-nav ul li a.fp {
	display: block; height: 35px; width: 170px;
	background-image:url(../images/gray-nav-items.jpg);
	background-repeat: no-repeat;
	background-position: -278px -35px;
	}
.gray-nav ul li a.ff:hover {
	background-position: 0 0 ;
	}
.gray-nav ul li a.fc:hover, .gray-nav ul li a.active  {
	
	background-position: -138px 0;
	}
.gray-nav ul li a.fp:hover {
	
	background-position: -278px 0;
	}	
.gray-nav ul li.first { display: block; font-size: 1.4em; padding: .80em; }		
.gray-nav ul li.last { 
	float: right;
	padding-right: 3em; 
	background-image: url(../images/gray-nav-right.gif);
	background-repeat: no-repeat; 
	background-position: right top; 
	}	
.gray-nav ul li.last a { 
	float: left; 
	background-image: none;  
	margin: 1px;
	}	
.gray-nav ul li.last a:hover { 
	filter:alpha(opacity=100);
	opacity: 1;
	margin: -1px 1px -1px 1px;
} 
.gray-nav ul li.last a:active {
	filter:alpha(opacity=100);
	opacity: 1;
	}
.gray-nav ul li.last-results { 
	float: right; 
	padding-right: 1em; 
	background-image: url(../images/gray-nav-right.gif);
	background-repeat: no-repeat; 
	background-position: right top;
	height: 35px;  
	}		
#content {
	margin-bottom: 5em;
	}	
#content .sidebar {
	background-color: #1e1e1e;
	float: left;
	margin: 0 3em 1em 0;
	width: 20em;
	}	
#content .sidebar ul { list-style: none;}
#content .sidebar ul li { font-size: 1.2em; float: none; font-size: 1em;  }	
#content .sidebar ul li.active a{ 
	color: #111111; 
	display: block; 	
	background-color: #cccccc;
	}	
#content .sidebar ul li a { 
	display: block; 
	background-image: none; 
	color: #ffffff; 
	padding: .5em 1.5em; 
	text-decoration: none; 
	border: 1px solid #1e1e1e; 
	border-left: 0; 
	border-right: 0; 
	 
	}

#content .sidebar ul li a:hover { color: #FFFFFF; background-color: #1e1e1e; border: 1px solid #F47321; border-left: 0; border-right: 0; }

#content #results { display: block; width: 73em; float: left; }
#content #results .block { display: block; float: left; margin: 0 1em 1em 0; width: 17em; }
#content #results .block a { display: block; padding: 1em; text-decoration: none; color: #444444; }
#content #results .block a img { margin: 0 .5em .5em 0; padding: .2em; border: 1px solid #cccccc; width: 120px; height: 90px; }	
#content #results .block a p { float: left; font-weight: bold; }
#content #results .block a small { display: block; font-weight: normal; margin-top: .2em; }
#content #results h4.label { font-size: 16px; font-weight: bold; color: #555555; margin-bottom: 10px;  }
#content #fresults { display: block; width: 73em; float: left; }
#content #fresults .block { display: block; float: left; margin: 0 1em 1em 0; width: 17em; }
#content #fresults .block a { display: block; padding: 1em; text-decoration: none; color: #444444; }
#content #fresults .block a img { margin: 0 .5em .5em 0; padding: .2em; border: 1px solid #cccccc; width: 120px; height: 90px; }	
#content #fresults .block a p { float: left; font-weight: bold; }
#content #fresults .block a small { display: block; font-weight: normal; margin-top: .2em; }
#content #fresults h4.label { font-size: 16px; font-weight: bold; color: #555555; margin-bottom: 10px;  }


/* TABS */
/* Tabs
----------------------------------*/
.ui-tabs { zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important;  padding: 0; }
.ui-tabs .ui-tabs-nav li a { }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { }
li.ui-state-active a.ff { background-position: 0 0!important; }
li.ui-state-active a.fc { background-position: -138px 0!important;  }
li.ui-state-active a.fp { background-position: -278px 0!important;  }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: pointer; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { }
.ui-tabs .ui-tabs-hide { display: none !important; }


/*  */
#fragment-1 .column {
	display: block; 
	float: left;
	width: 33%;
	padding-top: 2em; 
	}
#fragment-1 .center {
	margin: 0 0 0 1%;
	}	
#fragment-1 .column a { text-decoration: none; color: #111111;  }	
#fragment-1 .column a img {margin-left: 30px; }
#fragment-1 .column a div.info { 
	list-style: none; 
	background-color: #FFFFFF; 
	padding: 0.5em 3em 2em 2em;
	margin-bottom: 2em; 
	line-height: 1.3em; 
	background-image:url(../images/info-bg.gif);
	background-position: left bottom; 
	background-repeat: no-repeat; 
	}	
#fragment-1 .column a div.info small { color: #666666; }

#fragment-3 {
	text-align: center; 
	}
#fragment-3 a {
	display: block; 
	text-decoration: none; 
	float: left; 
	background-color: #111; 
	margin-left: 4px;
	margin-bottom: 5px; 
	border: 1px solid #111; 
	color: #ffffff;
	}	
#fragment-3 a:hover {
	background-color: #aebac1;
	border-color: #aebac1;
	color: #111111;
	}	
#fragment-3 a img {	
	
	}
#fragment-3 a span {	
	display: block; 
	width: 100px; 
	height: 2em;
	padding-top: .2em; 
	}	
	
/* Sponsorship Page */
#sponsorship-page {
	line-height: 1.4em;
	}
#sponsorship-page a { color: #F47321; }	
#sponsorship-page h2 {
	font-size: 1.8em;
	margin-bottom: 1em;
	color: #F47321;
	}	
#sponsorship-page p { margin-bottom: .5em; font-size: 1.2em;   }	

/* Contest Page */
#contest-page { line-height: 1.6em; }
#contest-page .column { width: 48%; margin-right: 2%; float: left; }
#contest-page h2 { font-size: 1.6em; margin-bottom: 1em; color: #F47321;}
#contest-page p { font-size: 1.2em; margin-bottom: .5em; }
#contest-page p.prize {  padding: 1em; margin-bottom: .5em; }
#contest-page a { color: #F47321;}
#contest-page #ctl00_ContentPlaceHolder1_Panel2 { 
	background-color:#F1F1F1;
border:4px solid #EEEEEE;
font-size:1.2em;
padding:1em;
width:auto;
	}
#contest-page #ctl00_ContentPlaceHolder1_Panel2 #ctl00_ContentPlaceHolder1_pnlForm { width:270px; }
.required { color:red; }