@import url(site.css);
@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);

/*-------------------------------------------------------

      *Filename:        hp.css
      *Description:     homepage css
      *Version:         21/11/2011
      *Website:         youtab
      *Author:          Maggie proart
      
---------------------------------------------------------*/

#content h1 {
	font-weight:normal;
	font-size:20px;
}

#content {
	padding-bottom: 24px;
	padding-top: 0px;
}

#heading-container {
	padding: 28px 32px 11px;
	position:relative;
}

#heading-player {
	float:right;
	width:420px;
	overflow:hidden;
	background:#000;
}

.social-sub-heading {
	font-size:17px;
	margin:12px 0;
	font-weight:bold;
	display:block;
}

.heading-text {
	float:left;
	background:#6c7a86;
	border:1px solid #8aa6bf;
	width:442px;
	padding:20px;
	position:relative;
	height:198px;
}

.heading-text p {
	font-size:16px;
	letter-spacing:0.02em;
}

.heading-text .triangle {
	position:absolute;
	right:-20px;
	top:96px;
}

.button {
	padding:9px 23px 10px 26px;
	font-size:1.17em;
	margin-left:160px;
}

/*#heading-text-logged-in h1 {font-size:2.5em; font-family:Courier New, Arial; font-weight:bold;}
#heading-text-logged-in h2 { font-size:1.5em;}
#heading-text-logged-in p {font-size:1.17em; letter-spacing:0.02em;}
#heading-text-logged-in a {color:#ffba00; font-weight:bold;font-size:1.14em;}
#heading-text-logged-in a:hover {color:#fff;}*/
.join { text-shadow: 2px 1px 2px rgba(0,0,0, 0.3); }

.join:hover {
	color:#000;
	text-shadow: 2px 1px 2px rgba(0,0,0, 0.3);
}

#feed-create .list-link .data:hover { background:#404040; }

#slideshow-container {
	position:relative;
	overflow:hidden;
	width:410px;
	height:195px;
}

#slideshow-container li {
	position:absolute;
	width:410px;
	height:195px;
	display:block;
}

#slideshow-container li .text { font-size:16px; }

#slideshow-container li h1.social-sub-heading { font-size:16px; }

.toc {
	text-decoration:none;
	background:#3E3E3E;
	margin-right:3px;
	display:inline-block;
	width:12px;
	height:12px;
	line-height:12px;
	text-align:center;
	border:1px solid #8AA6BF;
}

.toc-active { background:#ffba00; }

#toc-container { display:none; }

.small-box {
	width:16px;
	height:16px;
	margin-right:5px;
	display:block;
}

#social-bar li {
	float:right;
	list-style:none;
}

#social-bar #facebook { background:url(https://youtab-static.s3.amazonaws.com/images/facebook.png) no-repeat; }

#social-bar #tweeter { background:url(https://youtab-static.s3.amazonaws.com/images/twitter.png) no-repeat; }

#social-bar #google { background:url(https://youtab-static.s3.amazonaws.com/images/googleplus.png) no-repeat; }

#social {
	margin-left: 42px;
	margin-top: 5px;
}

#social li { display:inline-block; }

#socialRight {
	margin-left: 822px;
	margin-top: 5px;
}

#socialRight li { display:inline-block; }

/* **************************************************
 *
 *   NEW STYLES ADDED FOR FEATURED ARTISTS - MOISH & LAURA
 *   
 * ************************************************** */
 
#feed-artist {
	width:915px;
	height:139px;
	margin:0 0 22px 10px;
	background: #313131;
	background: rgba(0,0,0,.4);
	-moz-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.4);
	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.4);
}

#feed-artist .feed-title {
	height:48px;
	color:#ffba00;
	line-height:48px;
	border-bottom:none;
}

#feed-artist .feed-title span {
	font-size:14px;
	color:white;
	margin-left:10px;
}

#feed-artist .feed {
	padding: 0;
	height:90px;
}

#feed-artist .artistsGallery {
	width:915px;
	position:relative;
	overflow:hidden;
	top:-48px;
}

#feed-artist .artistsGallery .artistsGallery-holder {
	width:100%;
	position:relative;
	overflow:hidden;/*z-index:2;*/
	padding-top:0;
}

#feed-artist .artistsGallery .artistsGallery-holder ul {
	margin:0;
	padding:0;
	list-style:none;
	width:300000px;
}

#feed-artist .artistsGallery .artistsGallery-holder ul li {
	float:left;
	width:305px;
}

#feed-artist .artistsGallery .artistsGallery-holder ul li img {
	display: block;
	width:305px;
	height:90px;
}

#feed-artist .artistsGallery-control {
	font-size: 18px;
	line-height: 22px;
	padding: 0;
}

#feed-artistButtonGallery {
	min-width:18px;
	height:48px;
	margin: 0 0 0 1px;
	padding:0 15px;
	float:right;
	background-color:#464646;
	background-image: url(https://youtab-static.s3.amazonaws.com/images/featuredButton-fallback.png);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6a6a6a), to(#262626));
	background-image: -webkit-linear-gradient(top, #6a6a6a, #262626);
	background-image:    -moz-linear-gradient(top, #6a6a6a, #262626);
	background-image:     -ms-linear-gradient(top, #6a6a6a, #262626);
	background-image:      -o-linear-gradient(top, #6a6a6a, #262626);
	cursor: pointer;
}

#feed-artist .featured-artist {
	font-size:14px;
	font-weight:700;
	line-height:46px;
	margin:0 5px;
}

#feed-artist .prev, #feed-artist .next {
	position: absolute;
	margin: 0;
	top: 0;
	width:48px;
	height:48px;
	z-index: 20;
	overflow: hidden;
	text-indent: -9999px;
	outline: none;
}

#feed-artist .prev {
	right:48px;
	background: url(https://youtab-static.s3.amazonaws.com/images/artistsGallery-arrows1.png) no-repeat -1px -2px;
}

#feed-artist .next {
	right:0;
	background: url(https://youtab-static.s3.amazonaws.com/images/artistsGallery-arrows1.png) no-repeat -47px -2px;
}

#feed-artist .prev:hover { background: url(https://youtab-static.s3.amazonaws.com/images/artistsGallery-arrows1.png) no-repeat -1px -52px; }

#feed-artist .next:hover { background: url(https://youtab-static.s3.amazonaws.com/images/artistsGallery-arrows1.png) no-repeat -47px -52px; }

#feed-artist .next.next-disable { background: url(https://youtab-static.s3.amazonaws.com/images/artistsGallery-arrows1.png) no-repeat -47px -102px; }

#feed-artist .prev.prev-disable { background: url(https://youtab-static.s3.amazonaws.com/images/artistsGallery-arrows1.png) no-repeat -1px -102px; }


/* **************************************************
 *
 *   FOR NEW HEADER (RANBOM IMAGE) - MOISH & LAURA
 *   
 * ************************************************** */

/* font-family: 'Source Sans Pro', Arial, sans-serif; */

#heading-container.newHeader { background: url(https://youtab-static.s3.amazonaws.com/images/YT-appBanner-fb.jpg) no-repeat left top; height:256px; padding:20px 40px 24px; margin:0 0 31px 0; z-index:0;
}

#heading-container.newHeader .heading-content { width: 450px; }

#heading-container.newHeader h1 { color:#e9e9e9; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 600; font-size:36px; text-align: left; margin-top: 0; text-shadow: 0 0 6px rgba(0, 0, 0, .45); }

#heading-container.newHeader h1 span { display: block; font-size: 48px; font-weight: 700; }

ul#newHeader-buttons { width:430px; height:50px; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 600; margin:52px 0 15px; }

ul#newHeader-buttons li { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .5); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

ul#newHeader-buttons .start-button { border:1px solid #ff7b01; width:198px; height:48px; margin: 0;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad0d), to(#ff7b01));
	background-image: -webkit-linear-gradient(top, #ffad0d, #ff7b01);
	background-image:    -moz-linear-gradient(top, #ffad0d, #ff7b01);
	background-image:     -ms-linear-gradient(top, #ffad0d, #ff7b01);
	background-image:      -o-linear-gradient(top, #ffad0d, #ff7b01);
	-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow:inset  0 1px 1px rgba(255, 255, 255, .5); -moz-box-shadow:inset 0 1px 1px rgba(255, 255, 255, .5); box-shadow:inset  0 1px 1px rgba(255, 255, 255, .5); cursor: pointer; }

.ie9 ul#newHeader-buttons .start-button { background: url(https://youtab-static.s3.amazonaws.com/images/newStartButton-ie.png) no-repeat left top; border:none; width:200px; height:50px; box-shadow:none; }

ul#newHeader-buttons .start-button:hover { background-color:#ff9708; background-image: none; }

.ie9 ul#newHeader-buttons .start-button:hover { background-image:url(https://youtab-static.s3.amazonaws.com/images/newStartButton-ie-over.png); background-color: transparent; background-repeat:no-repeat; background-position:left top; }

ul#newHeader-buttons .start-button a { position:relative; display: block; color:#2f2209; font-size: 22px; line-height:25px; text-align:center !important; margin: 0; padding:11px 0; text-shadow:0 1px 1px #ffad0d; }

.ie9 ul#newHeader-buttons .start-button a { padding: 13px 0; }

#heading-container a.learnMore { display: block; background: url(https://youtab-static.s3.amazonaws.com/images/playButton-iconWhite.png) no-repeat left 3px; color:white; font-family: 'Source Sans Pro', Arial, sans-serif; font-weight: 600; font-size: 16px; width: 175px; margin-left: 230px; padding-left: 25px; }

#heading-container a.learnMore:hover { color: #FFBA00; background: url(https://youtab-static.s3.amazonaws.com/images/playButton-iconYellow.png) no-repeat left 3px; }

.ie9 #heading-container a.learnMore, .ie9 #heading-container a.learnMore:hover { background-position: left 2px; }

#heading-container ul#social.newHeader-social { position: relative; left: 5px; float:right; width:148px; margin:15px 0 0 0 !important; }

#heading-container ul#social li { display:inline; width:32px; height:32px; margin:0 5px 0 0; float:right; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .5); box-shadow: 0 1px 1px rgba(0, 0, 0, .5); }

/* STYLES VERSION SLIDE GALLERY HOME BANNER == DO NOT USE IT ANYMORE

#heading-container ul#howTo-explanation { float:left; width:70%; margin:15px 0 0 3px; }

#heading-container ul#howTo-explanation li { display:inline; }

#heading-container ul#howTo-explanation li span { float:left; font-weight:bold; margin:0 10px 0 0; }

#heading-container ul#howTo-explanation li span.numbered { font-size:40px; line-height:40px; }

#heading-container ul#howTo-explanation li span.bullets { font-size:38px; line-height:34px; }

#heading-container ul#howTo-explanation li h2 { float:left; font-size:13px; line-height:20px; font-weight:bold; margin:0 30px 0 0; }

#heading-container ul#howTo-explanation li h2.highlighter { float:left; font-size:28px; line-height:42px; font-weight:bold; margin:0; }

#fadeBg-container { position:absolute; top:0; left:0; width:1000px; height:400px; }

#fadeBg-container img { display:block; position:absolute; top:0; left:0; z-index:1; }*/