/*
  grid layout, inspired by:
  http://www.usabilitypost.com/2009/05/29/the-1kb-css-grid-part-1/
*/

.span-1 { width:55px; }
.span-2 { width:130px; }
.span-3 { width:205px; }
.span-4 { width:280px; }
.span-5 { width:355px; }
.span-6 { width:430px; }
.span-7 { width:505px; }
.span-8 { width:580px; }
.span-9 { width:655px; }
.span-10 { width:730px; }
.span-11 { width:805px; }
.span-12 { width:880px; }

.column 
{
  margin: 0 10px;
  overflow: hidden;
  float: left;
  display: inline;
}
.row {
  width: 900px;
  margin: 0 auto;
  overflow: hidden;
}
.row .row {
  margin: 0 -10px;
  width: auto;
}

/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (via jqModal.js). */
	
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 9%;
    left: 50%;
    
    margin-left: -350px;
    width: 700px;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
  width: expression(this.parentNode.offsetWidth+'px');
  height: expression(this.parentNode.offsetHeight+'px');
}

.jqmWindow a {
  color: #00c;
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

/* Template */
a, a:visited {
  color: #0066CC;
}

a img
{
  border: none;
}

body
{
  font:13px/1.231 arial,helvetica,clean,sans-serif;
  margin: 0px;
}

a.tab 
{
  background-color: #31312f;
  border: solid #31312f 1px;
  border-bottom: none;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  height: 15px;
  padding: 4px;
  padding-left: 10px;
  text-decoration: none;
  width: 100px;
}
a.tab.selected
{
  background: #FFF;
  border-bottom: solid #FFF 2px;
  color: #31312f;
  position: relative;
  z-index: 3;
}

.buttons
{
  padding: 10px;
  text-align: center;
}

.content
{
  background-color: #FFF;
  border: solid 2px #d9dadb;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  margin: auto;
  min-height: 500px;
  padding-top: 10px;
  position: relative;
  width: 900px;
  z-index: 2;
}

.dummy-ad {
  width: 300px;
  height: 250px;
  background: #999;
  line-height: 240px;
  color: #333;
  text-align: center;
  font-size: 85%;
}

.field-validation-error
{
  color: #D00;
}

.footer
{
  background-color: #4b4b4d;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: #FFF;
  height: 20px;
  padding-top: 25px;
  position: relative;
  text-align: center;
  top: -20px;
  z-index: 1;
}

.footer a,
.footer a:visited
{
  color: #FFF;
}

.footerMargin
{
  background: url('bg-bottom.jpg') no-repeat top center;
  height: 51px;
  position: relative;
  top: -21px;
}

h3
{
  margin-top: 0px;
}

.header
{
  background: url('bg-top.jpg') no-repeat;
  background-position: 40px 40px;
  height: 130px;
  position: relative;
}

.header .buttonSection
{
  padding-top: 15px;
}

.header .buttonSection .image
{
  float: left;
  width: 50px;
}

.header .buttonSection .links
{
  float: left;
  font-weight: bold;
  margin: 15px 0px 0px 15px;
  width: 276px;
}

.header .buttonSection.loggedIn
{
  background-color: #FFF;
  border: 2px solid #D9DADB;
  padding: 5px;
  width: 341px;
}

.header .searchSection
{
  background-color: #31312f;
  border: solid #31312f 1px;
  border-bottom: none;
  bottom: 3px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-right: 15px;
  padding: 4px;
  position: absolute;
  right: 10px;
  z-index: 4;
}
.header .searchSection.selected
{
  background: #FFF;
  border-bottom: solid #FFF 2px;
}

.hint
{
	color: #777;
	font-size: 75%;
	padding-left: 5px;
}

hr
{
	border-bottom: none;
	border-left: none;
	border-right: none;
}

.leftNav
{
  margin-left: 5px;
  margin-right: 0px;
  padding-top: 5px;
  overflow: visible;
  width: 140px;
}

.leftNav a,
.leftNav a:visited
{
  background-color: #31312f;
  -moz-border-radius-topright: 16px;
  -moz-border-radius-bottomright: 16px;
  -webkit-border-top-right-radius: 16px;
  -webkit-border-bottom-right-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  color: #FFF;
  display: block;
  height: 16px;
  margin-top: 10px;
  margin-right: 10px;
  padding: 4px;
  text-decoration: none;
}

.leftNav a.selected
{
  background-color: #FFF;
  border: solid #31312f 1px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-border-radius-topleft: 16px;
  -moz-border-radius-bottomleft: 16px;
  -webkit-border-top-left-radius: 16px;
  -webkit-border-bottom-left-radius: 16px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  border-right: solid #FFF 1px;
  color: #31312f;
  margin-right: 0px;
  position: relative;
  width: 131px;
  z-index: 4;
}
	
.loginDialog 
{
	height: 250px;
	padding: 0px;
    width: 670px;
}

.loginOptions
{
    background-color: #EEE;
}

.login-option {
  padding: 15px;
  background-color: #fff;
  float: left;
  margin: 10px 0px 10px 10px;
  width: 290px;
  height: 200px;
}

.login-option input[type='text'],
.login-option input[type='password']
{
	width: 180px;
}

.pager
{
	float: right;
	font-weight: bold;
}
.pager a
{
	font-weight: normal;
	margin-right: 5px;
	text-decoration: none;
}

.saveButton
{
	font-size: 200%;
}

.tabbedContent
{
  border: solid #31312f 1px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  margin-left: 0px;
  min-height: 350px;
  padding: 10px;
  position: relative;
  z-index: 3;
}

.tabs
{
  margin-top: -30px;
  padding-left: 25px;
  position: relative;
  top: 3px;
  z-index: 3;
}

.validation-summary-errors
{
	color: #F00;
}

.wrap
{
  background: #FFF url('bg-sides.jpg') no-repeat center 125px;
  margin: auto;
}

/* Player */
.player
{
  background-color: #d47f18;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 4px;
  width: 400px;
}
.player .channelLink
{
  clear: both;
  display: block;
  font-size: 18px;
  padding-left: 5px;
}
.player h2
{
  padding-left: 5px;
  margin: 0px;
}
.playerImage
{
  background-color: #FFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  float: left;
  height: 252px;
  padding: 2px;
  width: 252px;
}
.playerImage img
{
  height: 250px;
  margin: 1px;
  width: 250px;
}
.playlistCol
{
  margin-left: 3px;
  float: left;
  font-size: 12px;
  width: 140px;
}
.playlistCol div
{
  padding: 2px;
}
.playlistCol .message
{
  background-color: #FFF;
  text-align: center;
}
.playlistCol .playlist
{
  background-color: #D9DADB;
  height: 210px;
  margin-top: 2px;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: auto;
}
.playlistCol .playlist a,
.playlistCol .playlist a:visited
{
  background-image: url('bg-playlist.png');
  color: #000;
  display: block;
  height: 16px;
  overflow: hidden;
  padding-left: 5px;
  text-decoration: none;
}
.playlistCol .playlist a span
{
	display: block;
	height: 16px;
}
.playlistCol .playlist a.selected
{
  font-weight: bold;
}
.playlistCol .playlist a img
{
  float: left;
  margin-right: 3px;
}
.playlistCol .playlist a.selected img
{
  background: url('bg-playing.png') no-repeat 0px, 2px;
}

/* Catalog */
.channelList
{
  margin-right: 5px;
  min-height: 310px;
  padding: 8px;
  width: 313px;
}

.channelThumb
{
  height: 75px;
  width: 75px;
}

/* About Section */
.aboutContent
{
  border: solid #31312f 1px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  margin-left: 0px;
  min-height: 350px;
  padding: 10px;
  position: relative;
  z-index: 3;
}

/* Account Page */

.disconnectLink
{
  text-decoration: none;
}

.disconnectLink img
{
  height: 15px;
  position: relative;
  top: 3px;
  width: 15px;
}

.instructionSection
{
	border: solid #000 1px;
	float: right;
	padding: 5px;
	position: relative;
	top: -10px;
}

.instructionSection ol
{
	padding-left: 20px;
}

img.titleIcon 
{
  float: left;
  height: 50px;
  margin-right: 15px;
  width: 50px
}

.title
{
  margin-bottom: 10px;
  margin-top: 6px;
}

/* Account Images Page */
.colorPreview {
	border:1px solid black;
	float:right;
	height:20px;
	width:20px;
}

.skinList
{
	border-collapse: collapse;
}

.skinList td,
.skinList th
{
	border:1px solid #DDDDDD;
	padding: 5px;
}

.skinList input[type='text']
{
	margin-right: 10px;
	width: 75px;
}

/* Account Messages Page */
.accountMessagePlay
{
	background-color: #D9DADB;
}

/* Artist User Agreement Page */
.legal {
  overflow: auto;
  height: 300px;
  font-size: 80%;
  margin: 10px 0;
  border: 1px solid #eee;
}
.legal div {
  padding: 20px;
}

/* Catalog Page */
.catalogAd
{
  margin-top: 10px;
  text-align: center;
  width: 408px;
}

/* Channel Page */
.channelDetail
{
  height: 175px;
}

.commentHeader,
.commentHeader:visited
{
  background-color: #31312f;
  display: block;
  padding: 5px;
  margin: 3px 0px;
  text-decoration: none;
  color: #FFF;
}
.commentHeader.selected,
.commentHeader.selected:visited
{
  background-color: inherit;
  border: solid #31312f 1px;
  color: #31312f;
}

.commentSection
{
  padding-top: 10px;
}

.crumbs .column
{
  margin-bottom: 5px;
  margin-left: 0px;
  margin-top: 5px;
}
.crumbs a,
.crumbs a:visited
{
  border: solid #31312f 1px;
  border-left: none;
  -moz-border-radius-topright: 16px;
  -moz-border-radius-bottomright: 16px;
  -webkit-border-top-right-radius: 16px;
  -webkit-border-bottom-right-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  color: #31312f;
  display: block;
  float: left;
  left: -5px;
  margin-top: 4px;
  padding: 3px 15px;
  position: relative;
  text-decoration: none;
}
.crumbs a:first-child
{
  background-color: #31312f;
  color: #FFF;
  left: 0px;
  margin-top: 0px;
  padding: 7px 15px;
}
.crumbs a:last-child
{
  left: -15px;
}

.shareSection div
{
  margin-bottom: 5px;
}

/* Channel Comments */
.commentDisplay
{
  border-collapse: collapse;
  width: 100%;
}

.commentDisplay a
{
  text-decoration: none;
}

.commentDisplay td
{
  border-top: solid #31312f 1px;
  padding-right: 10px;
}

.commentSelector
{
  margin-bottom: 15px;
}

.commentSelector a
{
  text-decoration: none;
}

/* Embedding Page */
.embedPanel
{
  border: solid #31312f 1px;
  height: 350px;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 10px;
}

/* Following Page */
.following .catalogAd
{
  height: 280px;
  margin-bottom: 25px
}

.following .channelList
{
  width: 395px;
}

.following .column
{
  margin-right: 0px;
}

.following .player
{
  height: 280px;
  margin-bottom: 25px
}

/* Home Page */
.categoryIcons a
{
  display: block;
  float: left;
  height: 35px;
  margin-left: 13px;
  padding: 10px 0px 0px 40px;
  width: 145px;
}

.clickImage
{
  left: 420px;
  position: absolute;
  top: 7px;
}

.homeAd img
{
  margin-left: 70px;
  margin-top: 40px;
}

.homeContentRow
{
  background: #F5F5F5 url('divider-horizontal.png') no-repeat top center;
  color: #599ed6;
  font-weight: bold;
  margin: 10px 0px 10px 5px;
  padding-top: 15px;
  width: 885px;
}
.homeContentRow .span-4
{
  padding-right: 15px;
  width: 260px;
}

.homeContentRow a,
.homeContentRow a:visited
{
  text-decoration: none;
}

.homeContentRow .column
{
  height: 150px;
}

.homeContentRow .seperated
{
  background: url('divider-vertical.png') no-repeat center right;
}

/* Registration Page */
.registrationSection
{
	padding: 50px;
}

.registrationSection .box
{
	background-color: #EEEEEE;
	height: 216px;
	padding: 10px;
	width: 350px;
}

/* Search Result Page */
.searchResults
{
	margin:0px 0px 10px 10px;
	padding:8px;
	width:550px;
}