/* 	---------------------------------------------
	Title			| BBC Media Centre | CBeebies
	Author 			| Rohan Nowell
	Date 			| 11/08/2009
	Description 	| BBC Media Centre, CBeebies
	---------------------------------------------  */

#Welcome .Highlight {
	color: #642099;
}
.Title, h1, h2, h3, h4 {
	color: #f5822b;
}

h1 {
	background:	#642099;
	padding:6px;
	color:#fff;
	font-size:18px;
	font-weight:normal;
}

h2 {
	color:#fff;
	font-size:16px;
	font-weight:bold;
	margin:15px 6px 10px 6px;
	border-bottom:1px dotted #7e7e7e;
	padding-bottom:3px;
}

p {
	color:#c0bbbb;
}

a:hover {
	color: #FFF;
}

#SubNavigation ul li.NavProg {display: none;}

/*	===============
	PAGE
	===============  */
#Page_Content {
	background: #3c3c3c url(../images/Common/page-content-bg.jpg) no-repeat;
}

/*	===============
	CONTENT
	===============  */
#Content {
	background: #232122 url(../images/Common/Background.jpg) no-repeat top center;
}

/*	===============
	HOME | LANDING
	===============  */
#Home {
	background: none;
	width:910px;
	margin:20px auto 40px auto;
	min-height:450px;
}

/*	===============
	LIBRARY PAGE
	===============  */
#Library {
	background: #000 url(../images/Library/Background.jpg) no-repeat top center;
}
#Library a {
	color: #f5822b;
}
#Library a:hover {
	color: #FFF;
}

#Logo {
	visibility:hidden;
}

/*	===============
	FILES
	===============  */

.PressRelease {
	width:420px;
	float:left;
	min-height:120px;
	margin:10px 30px 0 0;
	position:relative;
	display: inline;
	overflow: hidden;
}

.StyleGuide {
	margin:20px 0 0 0;
	width:290px;
}
.PressRelease .PRLeft {
    float: left;
    width: 60px;
    display: inline;
 }
 .PressRelease .PRRight {
    float: left;
    width: 360px;
    display: inline;
    min-height:120px;
    overflow: hidden;
 }

.PressRelease a.Icon {
	/*position:absolute;
	top:0;
	left:0;*/
	color:#fff;
	font-size:11px;
	font-weight:bold;
	margin:0;
}

.PressRelease a.Heading {	
	color:#fff;
	font-size:11px;
	font-weight:bold;
}

.PressRelease h4 {
	color:#c0bbbb;
	font-size:10px;
	font-weight:normal;		
}

.PressRelease p {
	color:#c0bbbb;
	font-size:10px;
	font-weight:normal;
	line-height: 1.3;
}

.PressRelease a:hover {
	text-decoration:underline;
}

#Pagination {
	margin-top:20px;
	text-align:center;
}

#Pagination a {
	font-size:12px;
	color:#c0bbbb;
	padding:0 5px;
}

#Pagination a.Number {
	border-left:1px solid #707070;
}

#Pagination a:hover, #Pagination a.Active {
	color:#fff;
}

#Pagination .PaginationLeft {
	width:7px;
	height:6px;
	background: url(../images/Common/pagination-left.gif) no-repeat 0 0px;
	display:inline-block;
	position:relative;
	top:-1px;
	padding:0;
}

#Pagination .PaginationLeft:hover {
	background: url(../images/Common/pagination-left.gif) no-repeat 0 -6px;
}

#Pagination .PaginationRight {
	width:7px;
	height:6px;
	background: url(../images/Common/pagination-right.gif) no-repeat 0 0px;
	display:inline-block;
	position:relative;
	top:-1px;
}

#Pagination .PaginationRight:hover {
	background: url(../images/Common/pagination-right.gif) no-repeat 0 -6px;
}


/*	===============
	FOOTER LINKS
	===============  */
#Footer a:hover {
	color: #000;
}

.twitbutton {
    float: right; 
    margin: 0 0 10px 10px;
}
.twitter-share-button {
    *width: 60px !important;
}


/*	===============
	Videos | LANDING
	===============  */
#Videos {
	background: none;
	width:910px;
	margin:20px auto 40px auto;
	min-height:690px;
}

#Videos h2 
{
    background:	#642099;
	padding:6px;
	color:#fff;
	font-size:18px;
	font-weight:normal;
	margin:0;
	border:none;
}

.VideoPlayerSection p, #VideoList p {
	margin:0;
	padding:0;
}

.Clear { clear:both; }

/*	===============
	Videoplayer
	===============  */
.VideoPlayerSection 
{
    background-color:#222222;
    margin-bottom:20px;
}

.VideoPlayerSection .LHS 
{
    width:640px;
    float:left;   
}

.VideoPlayerSection .RHS 
{
    width:249px;
    height:340px;
    float:right;
    padding:20px 10px 0 10px; 
    position:relative;  
}
    
    .RHS .VidMeta { padding:0 10px; }
    .RHS .VidTitle 
    {
        color:#FFF;
        font-weight:bold;
        font-size:16px;
        margin-top:18px;
    }
    .RHS .VidSubtitle 
    {
        color:#c0bbbb;
        font-weight:bold;
        font-size:14px;
        margin-top:4px;
    }
    .RHS .VidDescription  
    {
        height:193px;
        overflow:hidden;
    }
    .RHS .VidDescription p
    {
        color:#c0bbbb;
        font-size:12px;
        margin-top:12px;
    }
    .RHS .Sep  
    {
        width:100%;
        height:1px;
        background-color:#3c3c3c;
        margin:10px 0;
    }
    
    /* Statistics */
    .StatisticsContainer  
    {
        position:absolute;
        bottom:12px;
        left:0;
        width:269px;
    }
    .Statistics { margin-left:22px; }
    .Statistics .Group:first-child {
        margin-left: 0;
    }
    .Statistics .Group {
        height: 21px;
    }
    .Statistics .Group, .Statistics .Time, .Statistics .Total {
        margin-left: 15px;
    }
    .Statistics span, .Statistics a.Tooltip {
        display: inline-block;
        vertical-align: top;
    }
    .Group:first-child .Divider {
        display: none;
    }
    
    .Group .Divider {
        background: #3c3c3c;
        display: inline-block;
        height: 20px;
        width: 1px;
        border-bottom:none;
        margin-right: 10px;
    }
    
    .Group .Total  
    {
        color:#787878;
        font-size:12px;
        padding-top:1px;
    }
    
    .Statistics .Sprite {
        background: url("../images/statistics.png") repeat scroll 0 0 transparent;
        height: 16px;
        width: 16px;
        position: relative;
        top: 0;
    }

    .Statistics .Likes .Sprite { background-position: 0px 0px; }
    .Statistics .Views .Sprite { background-position: -16px 0px; }
    .Statistics .Embed .Sprite { background-position: -32px 0px; width: 67px; }
    
    .Statistics .Likes:hover .Sprite { background-position: 0px -16px; }
    .Statistics .Views:hover .Sprite { background-position: -16px -16px; }
    .Statistics .Embed:hover .Sprite { background-position: -32px -16px; }
    
    .Statistics span, .Statistics a.Tooltip {
	    display:inline-block;
	    *display:inline;
	    zoom:1;
	    vertical-align:top;
    }


/*	===============
	Video Items
	===============  */

#VideoList 
{
    margin-top:25px;  
}

#VideoList li 
{
    margin-right:10px;
    width:296px;
    min-height: 250px;
    float:left;
}
#VideoList li.NoMarginRight { margin-right:0; }

#VideoList .Container 
{
    position:relative;
    background-color:#222222; 
    width:100%;
    height:177px;
    -webkit-transition: background-color 100ms linear;
     -moz-transition: background-color 100ms linear;
     -o-transition: background-color 100ms linear;
     -ms-transition: background-color 100ms linear;
     transition: background-color 100ms linear;
}
#VideoList .Container.Selected, #VideoList .Container:hover
{
    background-color:#642099;
    -webkit-transition: background-color 100ms linear;
     -moz-transition: background-color 100ms linear;
     -o-transition: background-color 100ms linear;
     -ms-transition: background-color 100ms linear;
     transition: background-color 100ms linear;  
}

#VideoList .PlayBtn 
{
    display:block;
    width:35px;
    height:35px;
    background:url('../images/playbtn.png'); 
    position:absolute;
    bottom:20px;
    right:20px;  
}

#VideoList .Container img 
{
    margin:12px 0 0 12px;
}

#VideoList .VidTitle 
{
    color:#FFF;
    font-weight:bold;
    font-size:14px;
    margin:14px 0 5px 0;
    padding-left:12px;
}

#VideoList .VidSubtitle
{
    color:#c0bbbb;
    font-weight:bold;
    font-size:12px;
    padding-left:12px;
}






/*	===============
	Video Tooltips
	===============  */
#Tooltip {
	position:absolute;
	top:0px;
	left:0px;
	min-height:25px;
	z-index:9999999;
	display:none;
	text-transform:uppercase;
	font-size:12px;	
	background-color:#3C3C3C;
	border:1px solid black;
}

#Tooltip ul {
	position:relative;
	z-index:2;
	display:none;
}

#Tooltip ul li a {
	color:#F2F2F2;	
	display:block;
	padding:10px 12px;
	border-bottom:1px solid black;
	border-top:1px solid #3d3d3d;
	border-top:1px solid rgba(255, 255, 255, 0.1);
	transition:background 0.2s ease-out;
	-moz-transition:background 0.2s ease-out;
	-webkit-transition:background 0.2s ease-out;
	-o-transition:background 0.2s ease-out;
}

#Tooltip ul li a:hover {
	text-decoration:none;
	background:#111;
	background:rgba(255, 255, 255, 0.075);
}

.IE7 #Tooltip ul li a:hover,
.IE8 #Tooltip ul li a:hover { border-top-color:#111; }

#Tooltip ul li.Last a { border-bottom:0px; }

#Tooltip .Gradient { *top:1px; }

#Tooltip ul li.Google a span {
	background:url('../images/socialIcons.png') no-repeat -0px -0px;
	width:18px;
	height:17px;
	display:block;
	float:left;
	margin-right:5px;
}

#Tooltip ul li.Twitter a span {
	float:left;
	display:block;
	width:18px;
	height:17px;
	margin-right:5px;
	background:url(../images/socialIcons.png) no-repeat -31px 0;
}

#Tooltip ul li.Facebook a span {
	position:relative;
	top:-2px;
	float:left;
	display:block;
	width:18px;
	height:17px;
	margin-right:5px;
	background:url(../images/socialIcons.png) no-repeat -61px -0px;
}