/* 
========================================================================================================================
Title:				Vioscreen VioTV
Author URI: 		Dave Tanner @ VioInteractive
--
Description:		Reset, basic layout and presentation for screen media
--
Updated:			09.02.2009
========================================================================================================================

COLOURS
--
Darkest grey:		#050707
Darker grey:		#202020
Dark grey:			#303030
Mid grey:			#4F4F4F
Pale grey:			#999999
Palest grey:		#CCCCCC
--
White:				#FFFFFF
--
Green:				#99CC66
--
Pale yellow:		#FFFCDE
Pale green:			#EAF8E8
========================================================================================================================
*/
/* 
========================================================================================================================
RESET & BASIC SETUP - LEVELS PLAYING FIELD ACROSS BROWSERS
========================================================================================================================
*/
html, body, form, fieldset { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; }
li, dd, blockquote { margin-left: 1.8em; }
a, button, label { cursor: pointer; }
img { vertical-align: middle; }
input, select, textarea, th, td { font-size: 1em; font-family: inherit; }
fieldset { border: none; }
q:before, q:after { content:''; }

/* 
========================================================================================================================
TOOLBOX - USEFUL CLASSES 
========================================================================================================================
*/
/* GENERIC */
.hide { display:none; }
.show { display:block; }
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.clear { clear: both; }

/* CLEARFIX */
.clearfix:after {content: " "; display: block; height: 0; clear: both; visibility: hidden; line-height: 0; font-size: 0; }
.clearfix {display: inline-block;}
/* Start Holly Hack \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Holly Hack */

/* ACCESSIBILITY */
#skip {
	height: 0;
	margin: 0;
	padding: 0;
	visibility: hidden;
	overflow: hidden;
	position: absolute;
	top: -9000px;
}

/* 
========================================================================================================================
BASIC ELEMENTS 
========================================================================================================================
*/
* { 
}
html {
	height: 100%;
}
body {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #050707 url(../images/interface/body_bg.jpg) top left repeat-x;
	color: #999999;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 68.75%;				/* Font sizing in ems beyond this point. Original default 76%. 62.5% makes 1em=10px. 68.75% makes 1em=11px */
	line-height: 1.8em; 			/* General line-height and also acts as IE 6 Peekaboo bug hack */
	text-align: center;				/* IE6> centering - reset to align left in container */
}

/*
------------------------------------------------------------------------------------------------------------------------
LINKS
------------------------------------------------------------------------------------------------------------------------
*/
a {
	color: #99CC66;
	text-decoration: none;
}
a:hover {
	border-bottom: 1px dotted #99CC66;
}
a:visited {
}
a:active {
}
a:focus {
	outline: none;
}

/*
------------------------------------------------------------------------------------------------------------------------
HEADINGS
------------------------------------------------------------------------------------------------------------------------
*/
h1 {
	font-size: 1.5em;
	margin: 0em 0em 1em 0em;
	padding: 0;
	letter-spacing: -0.07em;
	color: #FFFFFF;
}
h2 {
	font-size: 1.3em;
	margin: 0em 0em 0.5em 0em;
	padding: 0;
	letter-spacing: -0.05em;
	color: #FFFFFF;
}
h3 {
	font-size: 1.1em;
	margin: 0em 0em 0.5em 0em;
	padding: 0;
	color: #FFFFFF;
}
h4, h5, h6 {
	font-size: 1em;
	font-weight: bold;
	margin: 0em 0em 0.5em 0em;
	padding: 0;
	color: #FFFFFF;
}

/*
------------------------------------------------------------------------------------------------------------------------
PARAGRAPHS, QUOTES & TEXT
------------------------------------------------------------------------------------------------------------------------
*/
p {
	margin: 0.5em 0 1em 0;
}
blockquote {
}
cite {
}
blockquote cite {
}
q {
}
address {
	font-style: normal;
}
strong {
	color: #FFFFFF;
}
em {
}
b {
}
i {
}
ins {
	text-decoration: none;
	background-color: #303030;
}
del {
	text-decoration: line-through;
}

/*
------------------------------------------------------------------------------------------------------------------------
LISTS
------------------------------------------------------------------------------------------------------------------------
*/
ol {
}
ul {
}
ol li {
}
ul li {
}
ul ul, ul ol, ol ol, ol ul { margin: 0; }
dl {
}
dt {
	color: #FFFFFF;
}
dd {
}

/*
------------------------------------------------------------------------------------------------------------------------
IMAGES
------------------------------------------------------------------------------------------------------------------------
*/
img {
	border: none;
	vertical-align: middle;
}
a img {
	border: none;
}

/*
------------------------------------------------------------------------------------------------------------------------
OTHER ELEMENTS
------------------------------------------------------------------------------------------------------------------------
*/
/* HR */
hr {
	border: none;
	height: 1px;
	border-top: 1px dotted #4F4F4F;
	clear: both;
}

/* CODE */
pre, code, samp, kbd {
	font-size: 1.2em;
	border: 1px solid #4F4F4F;
	background-color: #303030;
	padding: 2px;
}
.code-sample {
	font-family: "Courier New", Courier, monospace;
	font-size: 1.2em;
	color: #999999;
	line-height: 16px;
	border: 1px solid #4F4F4F;
	background-color: #303030;
}
.code-sample:focus {
	color: #050707;	
}

/*
------------------------------------------------------------------------------------------------------------------------
TABLES
------------------------------------------------------------------------------------------------------------------------
*/
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #303030;
	font-size: 1em;
	text-align: left;
}
caption {
	font-style: italic;
}
/* ------------------------------------ */
/* tbody */
tbody {
}
tr {
}
tr.alt {
	background-color: #202020;
}
th {
	padding: 0.5em;
	vertical-align: top;
}
td {
	padding: 0.5em;
	vertical-align: top;
}
/* ------------------------------------ */
/* thead */
thead {
	text-align: left;
}
thead tr {
	background-color: #202020;
}
thead th, thead td {
}
/* ------------------------------------ */
/* tfoot */
tfoot {
	text-align: left;
}
tfoot tr {
	background-color: #202020;
	border-top: 1px solid #4F4F4F;
}
tfoot th, tfoot td {
}

/*
------------------------------------------------------------------------------------------------------------------------
FORMS
------------------------------------------------------------------------------------------------------------------------
*/
form {
}
fieldset {
	padding: 5px 0;
	border-bottom: 1px dotted #4F4F4F;
}
legend {
	margin-left: 0;
	padding-left: 0;
	font-weight: bold;
	color: #FFFFFF;
}
label {
	color: #FFF;
	font-weight: bold;
}
input {
}
textarea {
}
input, textarea {
	border: 1px solid #4F4F4F;
}
select {
	border: 1px solid #4F4F4F;
}
optgroup {
	border-bottom: 1px solid #4F4F4F;
}
option {
}
/* ------------------------------------ */
/* BUTTONS */
button, .button, .submit {
	font-size: 11px;
	line-height: 16px;
	margin-left: 0;
	margin-right: 2px;
	padding: 0px 5px;
	background-color: #303030;
	border: 1px solid #4F4F4F;
	color: #99CC66;
	cursor: pointer;
}
a.button {
	/*padding-top: 2px;
	padding-bottom: 2px;*/
	display:block;
	float:left;
	margin-top:4px;
	padding-bottom:2px;
	padding-top:2px;
}
button:hover, .button:hover, .submit:hover, button:focus, .button:focus, .submit:focus {
	color: #FFFFFF;
	border: 1px solid #4F4F4F;
	background-color: #202020;
	outline: none;
}
button:active, .button:active, .submit:active {
	color: #FFFFFF;
	border: 1px solid #303030;
	background-color: #202020;
}
/* ------------------------------------ */
/* BUTTONS - DISABLED */
.disabled, .button.disabled, .submit.disabled {
	color: #4F4F4F;
	border: 1px solid #202020;
}
.disabled:hover, .button.disabled:hover, .submit.disabled:hover {
	color: #4F4F4F;
	border: 1px solid #202020;
	background-color: #303030;
	cursor: default;
}
/* ------------------------------------ */
/* GENERAL FOCUS */
input:focus, textarea:focus {
	background-color: #FFFCDE;
}

/*
---------------------------------------
STYLED FORM
--------------------------------------- */
.styled-form {
	padding-bottom: 5px;
}
.styled-form p {
	margin: 0;
	padding: 2px 0;
}
.styled-form label {
	display: block;
	float: left;
	clear: left;
	padding: 2px 0;
	width: 105px;
}
.styled-form input, .styled-form textarea {
	width: 180px;
	padding: 2px;
	background: #FFFFFF url(../images/interface/field_bg.gif) 0 1px repeat-x;
}
.styled-form input:focus, .styled-form textarea:focus {
	background-color: #FFFCDE;
	background-image: none;
}
.styled-form .indent { /* used to move elements over to the right edge of the labels column */
	padding-left: 105px;
}
/* CHECKBOXES AND RADIO BUTTONS */
.styled-form .check, .styled-form .radio {
	border: none;
	padding: 0;
	width: auto;
	background: transparent none;
}
.styled-form label.radio-label, .styled-form label.check-label {
	clear: none;
	display: inline;
	float: none;
	width: auto;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

/* 
========================================================================================================================
LAYOUT 
========================================================================================================================
*/
/* FLEXIBLE WIDTH */
#container { 
	position: relative;
	margin: 0 auto;
	padding: 0 10px;
	max-width: 1240px;
	min-width: 972px;
	text-align: left;
}
/* IE6 won't play ball, so just force it all to a fixed min-width */
* html #container { width: 972px; }

/*
------------------------------------------------------------------------------------------------------------------------
MASTHEAD
------------------------------------------------------------------------------------------------------------------------
*/
#masthead {
	position: relative;
	height: 50px;
}
#masthead h2 {
	float: left;
	margin: 0;
	padding: 0;
	line-height: 50px;
	font-weight: normal;
	color: #FFFFFF;
}
#masthead .logo {
	display: block;
	float: left;
	width: 130px;
	height: 50px;
	background: transparent url(../images/interface/viotv_logo.gif) top left no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
#masthead a:hover {
	border: none;
}

/*
------------------------------------------------------------------------------------------------------------------------
NAVIGATION
------------------------------------------------------------------------------------------------------------------------
*/
#nav-container {
	position: absolute;
	top: 15px;
	right: 220px;
	width:400px;
	z-index: 3000;
}
#nav-container ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav-container ul li {
	float: left;
	margin: 0;
	padding: 0 10px;
}
#nav-container ul li a {
	display: block;
	line-height: 20px;
	float: left;
	color: #999999;
	text-transform: uppercase;
	border:none;
}
/* Set specific icons via class */
#nav-container ul li a.login {
	padding-left: 20px;
	background: transparent url(../images/interface/icon_nav_login.gif) 0 1px no-repeat;
}
#nav-container ul li a.logout {
	padding-left: 20px;
	background: transparent url(../images/interface/icon_nav_logout.gif) 0 1px no-repeat;
}
#nav-container ul li a.styles {
	padding-left: 20px;
	background: transparent url(../images/interface/icon_nav_styles.gif) 0 1px no-repeat;
}
#nav-container ul li a.register {
	padding-left: 20px;
	background: transparent url(../images/interface/icon_nav_register.gif) 0 1px no-repeat;
}
#nav-container ul li a.customise {
	padding-left: 20px;
	background: transparent url(../images/interface/icon_nav_customise.gif) 0 1px no-repeat;
}
/* Hover/selected for nav */
#nav-container ul li a:hover, ul.nav li a.nav-selected {
	color: #FFFFFF;
	background-position: 0 -35px;
	border: none;
}
#nav-container ul li ul
{
	display:none;
	top:20px;
	left:5px;
	
}
#nav-container ul li:hover ul, #nav-container ul li.hover ul
{
	position:absolute;
	display:block;
}
#nav-container ul li li
{
	/*float:none;*/
	float:left;
	background-color:#000;
	display:block;
	width:auto;
}
#nav-container ul li li a
{
	display:block;
	width:20em;
}
/*
------------------------------------------------------------------------------------------------------------------------
SEARCH
------------------------------------------------------------------------------------------------------------------------
*/
.search {
	position: absolute;
	top: 15px;
	right: 10px;
	width: 210px;
	text-align: right;
}
.search label {
	font-weight: normal;
	margin: 0 5px 0 0;
	padding: 0;
	text-transform: uppercase;
}
.search input {
	margin: 0 5px 0 0;
	padding: 0;
	border: 1px solid #999999;
	background: #CCCCCC url(../images/interface/field_bg_grey.gif) 0 0 repeat-x;
}
.search input:focus, .search input:active, .search input.on { /* 'on' class set via js onclick, so the field stays highlighted even if it loses focus */
	border: 1px solid #999999;
	background: #FFFFFF url(../images/interface/field_bg.gif) 0 0 repeat-x;
}
.search .search-button {
	width: 16px;
	height: 16px;
	line-height: 16px;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent url(../images/interface/icon_nav_search.gif) 0 0 no-repeat;
	text-indent: -9000px;
	cursor:pointer;
}
.search .search-button:hover, .search .search-button:focus, .search .search-button:active {
	border: none;
	background-position: 0 -36px;
}

/*
------------------------------------------------------------------------------------------------------------------------
CONTENT AREA
------------------------------------------------------------------------------------------------------------------------
*/
#content {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 10px 0 0 0;
}
div#videoPlayer #player
{
	background-image: url(../images/interface/ajax-loader.gif);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display:block;
}
/*
------------------------------------------------------------------------------------------------------------------------
FOOTER
------------------------------------------------------------------------------------------------------------------------
*/
#footer {
	clear: both;
	width: 100%;
	border-top: 1px dotted #4F4F4F;
	font-size: 0.9em;
	padding:8px 0 16px 0;
}
#footer .copyright {
	float: left;
	margin: 0;
}
#footer .additional {
	float: right;
	margin: 0;
	text-align:right;
	width:190px;
	background: transparent url("../images/interface/powered_by_footer.gif") 0 0 no-repeat;
	height:29px;
	line-height:44px;
	overflow:hidden;
}
#footer ul.menu {
	float: left;
	list-style: none;
	margin: 0 8px;
	padding: 0;
}
#footer ul.menu li {
	float: left;
	margin: 0;
	padding: 0 8px;
	border-left: 1px dotted #4F4F4F;	
}

/*
========================================================================================================================
VIOSTREAM OBJECT
========================================================================================================================
*/
/* These are the basic elements used to display a viostream - for example :  */
/*
	<div class="vs-container">
		<img src="images/interface/viostream_thumbnail_default.jpg" width="112" height="63" alt="Default thumbnail" class="vs-thumb" />
		<h3 class="vs-name">Viostream name displays here <span class="vs-duration">(1:06)</span></h3>
		<dl class="vs-info">
			<dt>Added</dt>
			<dd title="Date added">12.12.2009</dd>
			<dt>Channel</dt>
			<dd title="Channel">Channel name</dd>
			<dt>Views</dt>
			<dd title="Views">12,345</dd>
			<dt>Rating</dt>
			<dd title="Rating">
			<dd>
				<ul id="rating" style="visibility: visible;">
					<li class="one"><a class="starred" href="javascript:void(0);"></a></li>
					<li class="right one"><a class="starred" href="javascript:void(0);"></a></li>
					<!-- ... etc -->
				</ul>
			</dd>
		</dl>
		<div class="vs-description">
			<p>Description of Viostream here... </p>
		</div>
		<a href="javascript:void(0);" title="Add to playlist" class="vs-addtoplaylist">Add to playlist</a>
		<span class="now-playing-indicator">Now playing</span>
	</div>
*/
/* specific implementations (eg grid or list view etc) build on these via specificity */
.vs-container {
}
.vs-container.vs-nowplaying,
.vs-container.vs-inplaylist {
	background-color: #333;
}
.vs-thumb {
	border: 1px solid #4F4F4F;
}
.vs-name {
	margin: 0;
	font-weight: bold;
	text-transform: uppercase;
}
.vs-duration { /*span inside vs-name*/
	font-weight: normal;
	color: #999999;
}
.vs-description {
}
dl.vs-info {
	float: left;
	margin: 0 0 5px 0;
}
dl.vs-info dt {
	position: relative;
	float: left;
	clear: left;
	width: 55px;
	margin: 0 5px 0 0;
}
dl.vs-info dd {
	float: left;
	margin: 0;
}


/* KEYWORDS */
div.keywords a
{
	margin:0px 4px;
}

/* ADD TO PLAYLIST */
a.vs-addtoplaylist {
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-indent: -9000px;
	overflow: hidden;
	background-image: url(../images/interface/icon_playlistadd.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
}
a.vs-addtoplaylist:hover {
	border: none;
	text-decoration: none;
	background-position: 0 -16px;
}
a.vs-addtoplaylist:active {
	background-position: 0 -32px;
}
/* REMOVE FROM PLAYLIST */
a.vs-removefromplaylist {
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-indent: -9000px;
	overflow: hidden;
	background-image: url(../images/interface/icon_playlistremove.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
}
a.vs-removefromplaylist:hover {
	border: none;
	text-decoration: none;
	background-position: 0 -16px;
}
a.vs-removefromplaylist:active {
	background-position: 0 -32px;
}
/* PLAY NOW */
a.vs-playnow {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 96px;
	height: 54px;
	text-indent: -9000px;
	overflow: hidden;
	/*border: 1px solid #4F4F4F;*/
	background: transparent url(../images/interface/play_now.png) center -300px no-repeat;
}
a.vs-playnow:hover {
	border: none;
	background-position: center center;
}
/* NOW PLAYING INDICATOR */
.now-playing-indicator {
	display: block;
	width: 63px;
	height: 15px;
	text-indent: -9000px;
	overflow: hidden;
	background: transparent url(../images/interface/banner_nowplaying.gif) 0 0 no-repeat;
}

/* 
========================================================================================================================
CONTENT AREA UI ELEMENTS AND OBJECTS 
========================================================================================================================
*/

/*
------------------------------------------------------------------------------------------------------------------------
GENERIC PANEL - JUST IN CASE IT"S NEEDED
------------------------------------------------------------------------------------------------------------------------
*/
.panel {
	position: relative;
	margin: 0 0 10px 0;
	padding: 6px;
	border: 1px solid #4F4F4F;
	background: #050707 url(../images/interface/panel_bg.gif) 0 0 repeat-x;
}

/*
------------------------------------------------------------------------------------------------------------------------
TABS
------------------------------------------------------------------------------------------------------------------------
*/
/* TAB CONTAINER */
.tabs { 					/* Applied in conjunction with 'panel', 'panel-channel' or 'panel-vs-info' (see below), the js looks 'tabs' for this to create tab functionality */
	position: relative;
	padding: 0;
}
/* TAB MENU */
ul.tab-menu{
	list-style: none;
	margin: 0;
	padding: 0;
	background: #050707 url(../images/interface/tab_bg.gif) 0 0 repeat-x;
	font-size: 1.1em;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
}



ul.tab-menu li{
	float: left;
	margin: 0;
	padding: 0;
}
ul.tab-menu li a{
	display: block;
	float: left;
	height: 40px;
	padding: 0 10px;
	border-right: 1px solid #303030;
	background: #050707 url(../images/interface/tab_bg.gif) 0 0 repeat-x;
}
ul.tab-menu li a:hover{
	background-position: 0 -40px;
	border-bottom: none;
	border-right: 1px solid #303030;
}
ul.tab-menu li a:focus{
	outline: none;
}
ul.tab-menu li a.tab-selected, ul.tab-menu li a.tab-selected:hover{
	color: #FFFFFF;
	background: #050707 url(../images/interface/tab_selected.gif) 0 0 repeat-x;
}


/* TAB CONTENT */
.tab-content {
	position: relative;
	margin: 3px;
	padding: 3px;
}




/*
========================================================================================================================
VIDEO AND INFO PANELS
========================================================================================================================
*/
.panel-vs {
	position: relative;
	margin: 0 0 10px 0;
	padding: 3px;
	border: 1px solid #4F4F4F;
	text-align: center;
}
.panel-vs-info {
	position: relative;
	margin: 0 0 10px 0;
	height: 306px;								/* this needs an explicit height set due to the absolutely positioned footers. */
	border: 1px solid #4F4F4F;
	background: #050707 url(../images/interface/panel_bg.gif) 0 0 repeat-x;
}

/*
------------------------------------------------------------------------------------------------------------------------
VS-INFO TABS
------------------------------------------------------------------------------------------------------------------------
*/
.panel-vs-info.tabs {							/* this uses tabs, so normal tab css applies (ul.tab-menu) */
	position: relative;
	padding: 0;
}
.panel-vs-info .tab-content { 					/* fix the height to the edges of the container, and scroll the overflow */
	position: absolute;
	top: 40px;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden; 							/* needed so Opera doesn't overlap scrollbars */
}

/* TAB INNER CONTENT - SCROLL AREA */
.panel-vs-info .tab-content-inner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 30px;
	right: 0;
	padding: 5px;
	overflow: auto;
	
}
/* TAB FOOTER */
.panel-vs-info .tab-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30px;
	line-height: 30px;
	padding: 0 5px;
	background: transparent url(../images/interface/tab_bg.gif) top left repeat-x;
}

/*
------------------------------------------------------------------------------------------------------------------------
VS-INFO TAB DIALOG
------------------------------------------------------------------------------------------------------------------------
*/
.panel-vs-info .tab-dialog {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 30px;
	right: 0;
	overflow: auto;
	padding: 5px;
	background-color: #000;
}

h1 a.closebutton
{
	font-size:0.7em;
	font-weight:normal;
}
.tab-dialog-close, .closebutton { 							/* button to close dialog */
	position: absolute;
	top: 5px;
	right: 5px;
	height: 16px;
	line-height: 16px;
	padding: 0 5px 0 16px;
	background: #303030 url(../images/interface/icon_x.gif) left center no-repeat;
	border: 1px solid #4F4F4F;
	color: #99CC66;
	cursor: pointer;
}
.tab-dialog-close:hover, .tab-dialog-close:focus, .closebutton:hover, .closebutton:focus {
	color: #FFFFFF;
	border: 1px solid #4F4F4F;
	background-color: #202020;
}
.tab-dialog-close:active, .closebutton:active {
	color: #FFFFFF;
	border: 1px solid #303030;
	background-color: #202020;
}

/*
------------------------------------------------------------------------------------------------------------------------
VS-INFO TAB: NOW PLAYING
------------------------------------------------------------------------------------------------------------------------
*/
.panel-vs-info .tab-content-inner.now-playing {
	bottom: 85px;
}
.panel-vs-info .tab-content-inner.now-playing .vs-description {
	clear: both;
	padding: 0 0 0 0;
}
.panel-vs-info .tab-content-inner.now-playing .vs-thumb {
	border: 1px solid #4F4F4F;
	float: right;
	margin: 0 0 0 10px;
}

/* VS-INFO TAB: NOW PLAYING: NEXT IN PLAYLIST */
.panel-vs-info .now-playing-footer {
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	height: 48px;
	padding: 3px 0;
	border-top: 1px dotted #4F4F4F;
}

.panel-vs-info .now-playing-footer .now-playing-footer-inner
{
	float:left;
	width:100%;
	position:relative;
}

/* VS-INFO TAB: NOW PLAYING: NEXT IN PLAYLIST: THUMB */
.panel-vs-info .now-playing-footer .next-thumb {
	border: 1px solid #4F4F4F;
	float: left;
	/*margin-left:14px;*/
}

/* VS-INFO TAB: NOW PLAYING: NEXT IN PLAYLIST: INFO */
.panel-vs-info .now-playing-footer dl.next-info {
	float: left;
	margin: 3px 0 0 8px;
}
.panel-vs-info .now-playing-footer dl.next-info dt {
	float: left;
	clear: left;
	width: 75px;
	margin: 0 5px 0 0;
}
.panel-vs-info .now-playing-footer dl.next-info dd {
	float: left;
	margin: 0;
}


/* VS-INFO TAB: NOW PLAYING: NEXT IN PLAYLIST: NEXT BUTTON */
.panel-vs-info .now-playing-footer .next-button {
	float: right;
	width: 12px;
	height: 46px;
	border: 1px solid #4F4F4F;
	color: #99CC66;
	cursor: pointer;
	text-indent: -9000px;
	overflow: hidden;
	background: #303030 url(../images/interface/icon_arrow_right.gif) center center no-repeat;
}
.panel-vs-info .now-playing-footer .previous-button {
	float: left;
	width: 12px;
	height: 46px;
	border: 1px solid #4F4F4F;
	color: #99CC66;
	cursor: pointer;
	text-indent: -9000px;
	overflow: hidden;
	background: #303030 url(../images/interface/icon_arrow_left.gif) center center no-repeat;
}
.panel-vs-info .now-playing-footer .next-button:hover, .panel-vs-info .now-playing-footer .next-button:focus {
	color: #FFFFFF;
	border: 1px solid #4F4F4F;
	background-color: #202020;
}
.panel-vs-info .now-playing-footer .next-button:active {
	color: #FFFFFF;
	border: 1px solid #303030;
	background-color: #202020;
}

/* VS-INFO TAB: NOW PLAYING: NEXT IN PLAYLIST: PLAY NOW */
.panel-vs-info .now-playing-footer .vs-playnow {
	display: block;
	position: absolute;
	top: 0px;
	left:0px;
	margin-left: 14px;
	width: 80px;
	height: 45px;
	text-indent: -9000px;
	overflow: hidden;
	/*border: 1px solid #4F4F4F;*/
	background: transparent url(../images/interface/play_now.png) center -300px no-repeat;
}
.panel-vs-info .now-playing-footer .vs-playnow:hover {
	background-position: center center;
}

/*
------------------------------------------------------------------------------------------------------------------------
VS-INFO TAB: COMMENT
------------------------------------------------------------------------------------------------------------------------
*/
.comment {
	position: relative;
	padding: 5px 5px 5px 50px;
}
.avatar {
	position: absolute;
	left: 0;
	top: 5px;
	width: 42px;
	height: 42px;
	border: 1px solid #4F4F4F;
}
.avatar img {
	width: 42px;
	height: 42px;
}
.comment-header {
	position: relative;
	height: 42px;
	border-top: 1px dotted #4F4F4F;
	border-bottom: 1px dotted #4F4F4F;
}
.comment-name {
	float: left;
	line-height: 42px;
	margin: 0;
}
.comment-date {
	float: right;
	line-height: 42px;
	font-size: 0.9em;
	color: #FFFFFF;
}
.comment-count { 								/* used in ul.tab-menu li a span to list number of comments */ 
	font-weight: normal;
	color: #999999;
}
.commentAddProgress, .commentLoading
{
	position:absolute;
	z-index:300;
	top:30%;
	left:50%;
	text-align:center;
	margin-left:-110px;
	/*display:none;*/
}
.comment-flag
{
	cursor:pointer;
	height:16px;
	line-height:16px;
	padding:0 5px 0 16px;
	display:block;
	float:right;
	background:#303030 url(../images/interface/icon_x.gif) no-repeat;
	border: 1px solid #4F4F4F;
	color: #99CC66;
	
	/* comment moderation doesn't exist */
	display:none;
	
}
.comment-flag:active {
	background-color:#202020;
	border:1px solid #303030;
	color:#FFFFFF;
}
.comment-flag:hover {
	background-color:#202020;
	border:1px solid #4F4F4F;
	color:#FFFFFF;
}
/*
------------------------------------------------------------------------------------------------------------------------
VS-INFO TAB: PLAYLIST: LIST VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.playlist-list-view {
	list-style: none;
	margin: 0;
	padding: 0 5px 5px 0;
}
ul.playlist-list-view li.menu-item { 			/* IE6-7 white space bg appears here - CSS fixes don't work. Time wasted - 4 hours. */
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #4F4F4F;
}
/* VS CONTAINER */
ul.playlist-list-view li.menu-item div.vs-container {
	position: relative;
	margin: 0;
	padding: 5px 5px 5px 130px;
	min-height: 65px;							/* min-height hack for IE6 */
	height: auto !important;					/* ... */
	height: 65px;								/* min-height hack for IE6 */
}
ul.playlist-list-view li.menu-item div.vs-container:hover {
}
/* THUMB */
ul.playlist-list-view .vs-thumb {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 96px;
	height: 54px;
}
/* DESCRIPTION */
ul.playlist-list-view .vs-description {
	clear: both;
}
/* REMOVE FROM PLAYLIST */
ul.playlist-list-view a.vs-removefromplaylist {
	position: absolute;
	top: 8px;
	left: 100px;
}
/* PLAY NOW */
ul.playlist-list-view li.menu-item div.vs-container .vs-playnow {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 96px;
	height: 54px;
}
/* NOW PLAYING INDICATOR */
ul.playlist-list-view li .now-playing-indicator {
	position: absolute;
	top: 10px;
	left: -4px;
}

/*
------------------------------------------------------------------------------------------------------------------------
VS-INFO TAB: PLAYLIST: GRID VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.playlist-grid-view {
	list-style: none;
	margin: 0;
	padding: 0 0 5px 0;
}
ul.playlist-grid-view li.menu-item { 		/* have to be specific here, as blanket targeting of all lis breaks the rating star display, which is a nested list */
	display: -moz-inline-box;				/* Moz - FF2 doesn't support inline-block (doh, this invalidates css) */
											/* Be careful to specify '-moz-inline-box' NOT '-moz-inline-block', which renders differently */
	display: inline-block;					/* Op, Saf, IE (<=IE7 needs display: inline below) \*/
	vertical-align: top;
	width: 108px;
	margin: 0 1px 10px 0;
	padding: 0;
}


/* VS CONTAINER */
ul.playlist-grid-view div.vs-container {
	position: relative;
	width: 98px;
	padding: 5px;
	float: left;
}
ul.playlist-grid-view div.vs-container:hover {
}
/* NAME */
ul.playlist-grid-view .vs-name {
	font-size: 0.9em;
	line-height: 1.5em;
	padding-top: 3px;
}
/* THUMB */
ul.playlist-grid-view .vs-thumb {
	width: 96px;
	height: 54px;
}
/* INFO */
ul.playlist-grid-view .vs-info {
	width: 100%;
	margin: 0;
	padding: 5px 0;
}
ul.playlist-grid-view .vs-info dt {
	display: none;
}
ul.playlist-grid-view .vs-info dd {
	border-top: 1px dotted #4F4F4F;
	width: 100%;
}
/* DESCRIPTION */
ul.playlist-grid-view .vs-description {
	display: none;
}
/* REMOVE FROM PLAYLIST */
ul.playlist-grid-view .vs-removefromplaylist {
	position: absolute;
	top: 8px;
	left: 84px;
}
/* PLAY NOW */
ul.playlist-grid-view .vs-playnow {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 96px;
	height: 54px;
}
/* NOW PLAYING INDICATOR */
ul.playlist-grid-view .now-playing-indicator {
	position: absolute;
	top: 10px;
	left: -4px;
}

/*
------------------------------------------------------------------------------------------------------------------------
VS-INFO TAB: PLAYLIST: VIEW OPTIONS
------------------------------------------------------------------------------------------------------------------------
*/
ul.playlist-view-options {
	list-style: none;	
	margin: 0;
	padding: 0;
	position: absolute;
	right: 5px;
	top: 6px;
}
ul.playlist-view-options li { 
	margin: 0;
	padding: 0 0 0 2px;
	float: left;
}
ul.playlist-view-options a.toggle-list { 	/* Set in icons section below */
}
ul.playlist-view-options a.toggle-grid { 	/* Set in icons section below */
}

/* 
========================================================================================================================
CHANNEL PANEL AND TABS
========================================================================================================================
*/
.panel-channel {
	position: relative;
	margin: 0 0 10px 0;
	padding: 0;
	border: 1px solid #4F4F4F;
	background: #050707 url(../images/interface/panel_bg.gif) 0 0 repeat-x;
}

/*
------------------------------------------------------------------------------------------------------------------------
CHANNEL CONTAINER
------------------------------------------------------------------------------------------------------------------------
*/
.tab-content .channel-container { 			/* contains channel-intro and channel-media */
}

/*
------------------------------------------------------------------------------------------------------------------------
CHANNEL INTRO
------------------------------------------------------------------------------------------------------------------------
*/
.channel-intro {
	padding: 5px;
	color: #FFF;
	font-size: 1.1em;
}

/*
------------------------------------------------------------------------------------------------------------------------
CHANNEL MEDIA
------------------------------------------------------------------------------------------------------------------------
*/
.channel-media {
	padding: 5px 0;
}

/*
------------------------------------------------------------------------------------------------------------------------
CHANNEL MEDIA CONTROLS
------------------------------------------------------------------------------------------------------------------------
*/
/* MENU CONTROLS CONTAINER */
.media-menu-controls {
	width: 100%;
	overflow: hidden;
	border-bottom: 1px dotted #4F4F4F;
}
.media-menu-controls p {
	display: none;
}
/* RSS FEED */
.media-menu-controls .rss-feed {
	float: right;
	margin: 0;
	padding: 2px 2px 2px 5px;
	border-left: 1px dotted #4F4F4F;
}
/* SORT OPTIONS */
ul.menu-sort-options {
	list-style: none;
	margin:0;
	padding: 0;
	float: left;
}
ul.menu-sort-options li {
	margin:0;
	padding: 2px 5px;
	float: left;
	border-right: 1px dotted #4F4F4F;
}
ul.menu-sort-options li a {
}
ul.menu-sort-options li a.current, ul.menu-sort-options li a.current:hover {
	color: #FFFFFF;
	border: none;
	text-decoration: none;
}
/* VIEW OPTIONS */
ul.menu-view-options {
	list-style: none;
	margin: 0 3px;
	padding: 0 0 0 3px;
	float: right;
	border-left: 1px dotted #4F4F4F;
}
ul.menu-view-options li {
	margin: 0;
	padding: 2px;
	float: left;
}
ul.menu-view-options a.toggle-list { 			/* Set in icons section below */
}
ul.menu-view-options a.toggle-grid { 			/* Set in icons section below */
}

/* PAGINATION */
.pagination-controls {
	clear: both;
	width: 100%;
	overflow: hidden;
	border-top: 1px solid #4F4F4F;
}
.media-menu-controls .pagination-controls { 	/* when it's above the media menu */
	border-top: 1px dotted #4F4F4F;
}
/*.pagination-controls ul {
	list-style: none;
	float: right;
	margin: 0;
	padding: 0;
}
.pagination-controls ul li {
	float: left;
	margin: 0;
	padding: 2px;
}
.pagination-controls ul li a {
	display: block;
	float: left;
	line-height: 16px;
	padding: 0 3px;
	background-color: #303030;
	border: 1px solid #4F4F4F;
	color: #99CC66;
}
.pagination-controls ul li a:hover {
	color: #FFFFFF;
	border: 1px solid #4F4F4F;
	background-color: #202020;
}
.pagination-controls ul li a:active {
	color: #FFFFFF;
	border: 1px solid #303030;
	background-color: #202020;
}
.pagination-controls ul li a.pag-selected, .pagination-controls ul li a.pag-selected:hover {
	color: #303030;
	background-color: #99CC66;
	border: 1px solid #99CC66;
}
.pagination-controls ul li.first a {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_first.gif);
	background-position: center left;
	background-repeat: no-repeat;
	text-indent: -9000px;
}
.pagination-controls ul li.previous a {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_prev.gif);
	background-position: center left;
	background-repeat: no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
.pagination-controls ul li.next a {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_next.gif);
	background-position: center left;
	background-repeat: no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
.pagination-controls ul li.last a {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_last.gif);
	background-position: center left;
	background-repeat: no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}*/

.pagination-controls div
{
	float: right;
}
.pagination-controls a {
	margin: 3px 2px;
	display: block;
	float: left;
	height: 16px;
	line-height: 16px;
	/*padding: 0 3px;*/
	text-align:center;
	background-color: #303030;
	border: 1px solid #4F4F4F;
	color: #99CC66;
	width: 16px;
}
.pagination-controls a:hover {
	color: #FFFFFF;
	border: 1px solid #1a286f;
	background-color: #314298;
}
.pagination-controls a:active {
	color: #FFFFFF;
	border: 1px solid #4F4F4F;
	background-color: #202020;
}
.pagination-controls a.current, .pagination-controls a.current:hover {
	color: #303030;
	background-color: #99CC66;
	border: 1px solid #99CC66;
}
.pagination-controls a.first {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_first.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9000px;
}
.pagination-controls a.previous {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_prev.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
.pagination-controls a.next {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_next.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
.pagination-controls a.last {
	width: 16px;
	padding: 0;
	background-image: url(../images/interface/icon_last.gif);
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}
.pagination-controls a.first:hover,
.pagination-controls a.previous:hover,
.pagination-controls a.next:hover,
.pagination-controls a.last:hover {
}


/*
------------------------------------------------------------------------------------------------------------------------
CHANNEL MEDIA: MEDIA MENU LIST VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.media-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-bottom: -1px; 						/* hide bottom border of last list item - don't do overflow:hidden as IE7 stuffs the grid view */
}
ul.media-menu-list li.menu-item { 				/* IE6-7 white space bg appears here. CSS fixes don't work. Time wasted - 4 hours. */
	margin: 0;
	padding: 0;
	border-bottom: 1px dotted #4F4F4F;
}
/* VS CONTAINER */
ul.media-menu-list li.menu-item div.vs-container {
	position: relative;
	padding: 10px 5px 10px 133px;
	min-height: 75px;							/* min-height hack for IE6 */
	height:auto !important;						/* ... */
	height: 75px;								/* min-height hack for IE6 */
}
ul.media-menu-list li.menu-item div.vs-container:hover {
	background-color: #202020;
}
/* THUMBS */
ul.media-menu-list li.menu-item .vs-thumb {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 96px;
	height: 54px;
}
/* INFO */
ul.media-menu-list li.menu-item dl.vs-info {
	margin: 5px 0;
}
ul.media-menu-list li.menu-item dl.vs-info dt {
	clear: none;
	float: left;
	width:  auto;
	margin-right: 5px;
}
ul.media-menu-list li.menu-item dl.vs-info dd {
	margin-right: 10px;
	float: left;
}
/* DESCRIPTION */
ul.media-menu-list li.menu-item .vs-description {
	position: relative;
	clear: both;
	margin: 0;
}
/* ADD TO PLAYLIST */
ul.media-menu-list li.menu-item a.vs-addtoplaylist {
	position: absolute;
	top: 13px;
	left: 88px;
}
/* REMOVE FROM PLAYLIST */
ul.media-menu-list li.menu-item a.vs-removefromplaylist {
	position: absolute;
	top: 13px;
	left: 105px;
}
/* PLAY NOW */
ul.media-menu-list li.menu-item .vs-playnow {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 96px;
	height: 54px;
}
/* NOW PLAYING INDICATOR */
ul.media-menu-list li.menu-item .now-playing-indicator {
	position: absolute;
	top: 15px;
	left: 6px;
}

/*
------------------------------------------------------------------------------------------------------------------------
CHANNEL MEDIA: MEDIA MENU GRID VIEW
------------------------------------------------------------------------------------------------------------------------
*/
ul.media-menu-grid {
	list-style: none;
	margin: 0;
	padding: 10px 0;
}
ul.media-menu-grid li.menu-item { 			/* have to be specific here, as blanket targeting of all lis breaks the rating star display, which is a nested list */
	display: -moz-inline-box;				/* Moz - FF2 doesn't support inline-block (doh, this invalidates css) */
											/* Be careful to specify '-moz-inline-box' NOT '-moz-inline-block', which renders differently */
	display: inline-block;					/* Op, Saf, IE (<=IE7 needs HasLayout set from hack below) \*/
	vertical-align: top;
	width: 108px;
	margin: 0 6px 4px 0;
	padding: 0;
}


/* VS CONTAINER */
ul.media-menu-grid li.menu-item div.vs-container {
	position: relative;	
	width: 98px;
	float: left;
	padding: 5px;
}
ul.media-menu-grid li.menu-item div.vs-container:hover {
	background-color: #202020;
}
/* NAME */
ul.media-menu-grid li.menu-item .vs-name {
	font-size: 1em;
	line-height: 1.2em;
	padding-top: 3px;
}
/* THUMB */
ul.media-menu-grid li.menu-item .vs-thumb {
	width: 96px;
	height: 54px;
}
/* INFO */
ul.media-menu-grid li.menu-item .vs-info {
	width: 100%;
	margin: 0;
	padding: 5px 0;
}
ul.media-menu-grid li.menu-item .vs-info dt {
	display: none;
}
ul.media-menu-grid li.menu-item .vs-info dd {
	border-top: 1px dotted #4F4F4F;
	width: 100%;
}
/* DESCRIPTION */
ul.media-menu-grid li.menu-item .vs-description {
	display: none;
}
/* ADD TO PLAYLIST */
ul.media-menu-grid li.menu-item a.vs-addtoplaylist {
	position: absolute;
	top: 8px;
	left: 84px;
}
/* REMOVE FROM PLAYLIST */
ul.media-menu-grid li.menu-item a.vs-removefromplaylist {
	position: absolute;
	top: 8px;
	left: 84px;
}	
/* PLAY NOW */
ul.media-menu-grid li.menu-item .vs-playnow {
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 96px;
	height: 54px;
}
/* NOW PLAYING INDICATOR */
ul.media-menu-grid li.menu-item .now-playing-indicator {
	position: absolute;
	top: 10px;
	left: -4px;
}

/* 
========================================================================================================================
ICONS
========================================================================================================================
*/
.icon-add {
	padding-left: 16px;
	background-image: url(../images/interface/icon_plus.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-cancel {
	padding-left: 16px;
	background-image: url(../images/interface/icon_x.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-clear {
	padding-left: 16px;
	background-image: url(../images/interface/icon_x.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-copy {
	padding-left: 16px;
	background-image: url(../images/interface/icon_copy.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-embed {
	padding-left: 16px;
	background-image: url(../images/interface/icon_brackets.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-email {
	padding-left: 16px;
	background-image: url(../images/interface/icon_envelope.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-go {
	padding-left: 16px;
	background-image: url(../images/interface/icon_arrow_right.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-link {
	padding-left: 16px;
	background-image: url(../images/interface/icon_link.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-ok {
	padding-left: 16px;
	background-image: url(../images/interface/icon_tick.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-refresh {
	padding-left: 16px;
	background-image: url(../images/interface/icon_refresh.gif);
	background-position: center left;
	background-repeat: no-repeat;
}
.icon-share {
	padding-left: 16px;
	background-image: url(../images/interface/icon_envelope.gif);
	background-position: center left;
	background-repeat: no-repeat;
}

/*
------------------------------------------------------------------------------------------------------------------------
RSS BUTTON 
------------------------------------------------------------------------------------------------------------------------
*/
a.rss {
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-indent: -9000px;
	overflow: hidden;
	border: 1px solid #CC6600;
	background-image: url(../images/interface/icon_rss.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
}
a.rss:hover {
	text-decoration: none;
	background-position: 0 -16px;
}

/*
------------------------------------------------------------------------------------------------------------------------
LIST/GRID VIEW TOGGLES (Positioning set in layout)
------------------------------------------------------------------------------------------------------------------------
*/
a.toggle-list {
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-indent: -9000px;
	overflow: hidden;
	border: 1px solid #4F4F4F;
	background: #303030 url(../images/interface/icon_view_list.gif) 0 0 no-repeat;
}
a.toggle-grid {
	display: block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-indent: -9000px;
	overflow: hidden;
	border: 1px solid #4F4F4F;
	background: #303030 url(../images/interface/icon_view_grid.gif) 0 0 no-repeat;
}
a.toggle-list.current, a.toggle-grid.current, a.toggle-list.current:hover, a.toggle-grid.current:hover, a.toggle-list.current:active, a.toggle-grid.current:active {
	/*background-color: #99CC66;*/
	border: 1px solid #99CC66;
	background-position: 0 -32px;
}
a.toggle-list:hover, a.toggle-grid:hover {
	background-position: 0 -16px;
	background-color: #202020;
	border: 1px solid #4F4F4F;
}
a.toggle-list:active, a.toggle-grid:active {
	background-color: #202020;
	border: 1px solid #303030;
}

/*
------------------------------------------------------------------------------------------------------------------------
ADD THIS LINK (EXTERNAL FROM www.addthis.com)
------------------------------------------------------------------------------------------------------------------------
*/
a.add-this {
	position: absolute;
	right: 5px;
	top: 7px;
	height: 16px;
	line-height: 16px;
}
a.add-this:hover {
	border: none;
	text-decoration: none;
}

/*
------------------------------------------------------------------------------------------------------------------------
RATINGS
------------------------------------------------------------------------------------------------------------------------
*/
ul.rating {
	list-style: none;
	padding: 0;
	margin: 0 5px 0 0;
	float:left;
	width: 85px;
	/*visibility:hidden;*/
}
ul.rating li {
	display: inline;
	padding: 0;
	margin: 0;
}
ul.rating li a {
	float:left;
	display:block;
	width:9px;
	height:16px;
	background:transparent url(../images/interface/rating_stars.gif) no-repeat scroll -17px 0px;
}
ul.rating li a.starred, ul.rating li a.rated.starred {
	display:block;
	width:9px;
	height:16px;
	background:transparent url(../images/interface/rating_stars.gif) no-repeat scroll -34px 0px;
}
ul.rating li a.rated {
	display:block;
	width:9px;
	height:16px;
	background:transparent url(../images/interface/rating_stars.gif) no-repeat scroll 0px 0px;
}
ul.rating li.right a {
	float:left;
	display:block;
	width:8px;
	height:16px;
	background:transparent url(../images/interface/rating_stars.gif) no-repeat scroll -25px 0px;
}
ul.rating li.right a.starred, ul.rating li.right a.rated.starred {
	display:block;
	width:8px;
	height:16px;
	background:transparent url(../images/interface/rating_stars.gif) no-repeat scroll -42px 0px;
}
ul.rating li.right a.rated {
	display:block;
	width:8px;
	height:16px;
	background:transparent url(../images/interface/rating_stars.gif) no-repeat scroll -8px 0px;
}

/* Fix hover */
ul.rating a:hover {
	border: none;
	text-decoration: none;
}

/* mediabase ratings */

ul.rateList
{
	list-style: none;
	padding: 0;
	margin: 0;
	float:left;
	
}
ul.rateList li
{
	float:left;
	clear:none;
    display:block;
    overflow:hidden;
    line-height:16px;
    width:8px;
    height:16px !important;
	margin:0px;
	padding:0px;
	background:transparent url("../images/interface/rating_stars.gif") no-repeat scroll 0px 0px;
}
ul.rateList li.right
{
	background:transparent url("../images/interface/rating_stars.gif") no-repeat scroll -8px 0px;
}
ul.rateList li.starred
{
	 background:transparent url("../images/interface/rating_stars.gif") no-repeat scroll -35px 0px;
}
ul.rateList li.rightstarred
{
	 background:transparent url("../images/interface/rating_stars.gif") no-repeat scroll -42px 0px;
}
ul.rateList li a{
	display:none;
}

div.login, div.forgotPassword, div.register
{
	overflow:hidden;
	display:none;
	text-align:left;
	padding:14px;
}
div.register div.regColumn
{
	width:48%;
	float:left;
}
div.login input, div.forgotPassword input, div.register input 
{
	display:block;
	float:left;
	margin-left:0;
}
div.login label, div.forgotPassword label, div.register label {
	display:block;
	float:left;
	margin-right:12px;
	text-align:left;
	width:112px;
}
div.register label.fullwidth {
	text-align:left;
	width:auto;
}
div.register fieldset
{
	clear:left;
	margin:0 24px 0 0;
}
button.regDoRegister
{
	float:right;
	margin-right:24px;
	margin-top:8px;
}
#regGenderFieldset input
{
	border:none;
}
/********************************************
	CAPTCHA CONTROL
********************************************/

div.captchaControl
{
	margin-left:105px;
}

/* BOOKMARKS */
.bookmarks
{
	display:block;
	float:right;
}
.bookmarks ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:5px 0px 0px 6px;
}

.bookmarks ul li 
{
	display:block;
	float:left;
	line-height:16px;
	text-align:center;
	margin-left:0;
}

.bookmarks ul li a {
	color:#999999;
	float:left;
	font-size:11px;
	margin:0px 2px;
	height:20px;
	width:20px;
}
.bookmarks ul li a:hover 
{
	border:none;
}
/* POLL */

div.poll
{
	padding:8px;
	height:auto;
}

div.poll p.pollResultBar {
	background-color:#99CC66;
	display:block;
	font-size:1px;
	height:6px;
	margin-bottom:12px;
	margin-left:6px;
	margin-top:0;
	padding:0;
	width:1px;
}
div.poll p.pollResultAnswer
{
	margin-bottom:2px;
	margin-left:6px;
}

/* TAGCLOUD */
div.tagCloud
{
	text-align:left;
}
div.tagCloud a
{
	/*color:#fff;
	line-height:22px;*/
	text-decoration:none;
	
}
div.tagCloud li
{
	display:block;
	float:left;
	margin:0px 4px;
	font-size:0.9em;
	line-height:22px;
	height:22px;
	vertical-align:baseline;
}
div.tagCloud h1
{
	/*margin-bottom:8px;*/
	
}

.tagSize1
{
	font-size:1em;
}
.tagSize2
{
	font-size:1.2em;
}
.tagSize3
{
	font-size:1.4em;
}
.tagSize4
{
	font-size:1.6em;
}
.tagSize6
{
	font-size:1.8em;	
}
.tagSize7
{
	font-size:2em;	
}
.tagSize8
{
	font-size:2.2em;	
}
.tagSize9
{
	font-size:2.4em;	
}
.tagSize10
{
	font-size:2.6em;	
}