/* ============================================================
National Geographic Music Global CSS

Notes:
================

In This CSS:
================
+GlobalNGSytles
+NGMusicTopHatStyles
+Grid
+Header
+Links
+Images
+Clearing
+Miscellaneaous

============================================================ */

/* ------------------------------------------------------------
+GlobalNGSytles
------------------------------------------------------------ */
body {
  margin: 0;
  background: #fff url(../images/nav/bg.gif) repeat-x 0 155px;
  color: #333; 
  font-family: Arial, sans-serif;
}

/* ------------------------------------------------------------
+NGMusicTopHatStyles
------------------------------------------------------------ */

#tophat {
	background-color: #320e2e;
	padding-bottom: 1px;
	text-align: center;
}

#tophat .advertisements .ad.banner {
  width: 728px;
  margin: 0 auto;
  padding:0;
  text-align: center;
}

#navigation_tophat_container {
  padding-bottom: 1px;
  text-align: left;
}

#header_search_input {
	font-size: 16px;
	height: auto;
	line-height: 14px;
	zoom: 1;
}

/* set the 'Music' tophat 2nd tier and footer navigation items to 'highlighted' */
.music #navigation_tophat_primary li.nav1 ul.nav li.highlighted > a { color: #fff; }
.music #footer_global .nav_global_tierB .nav07 a { font-weight:bold; }

/* ------------------------------------------------------------
+Grid
------------------------------------------------------------ */
div.container {
  font-size: 11px;
  /*line-height: 1.4em;*/
  margin: 10px auto;
  padding: 0 5px;
  width: 990px;
  font-family: helvetica, arial, verdana, sans-serif;
}

div.container div.main {
  width: 653px;
  overflow: hidden;
  float: left;
  margin-right: 5px;
  padding: 0;
}

div.container div.sidebar,
div.container div.right {
  float: left;
  width: 324px;
}

div.container div.full_width {
  width: 990px;
  overflow: hidden;
  float: left;
  padding: 0;
}

/* ------------------------------------------------------------
+Header
------------------------------------------------------------ */
body#ngmusic #headerboard {
  background-color: #320e2e;
  height: 95px;
}

#headerboard {
  position: relative;
  z-index: 400;
  padding-bottom: 0;
  width: auto;
}

#main {
  position: relative;
  z-index: 1;
}

#header,
#main_nav,
#subnav {
  margin: 0 auto;
  width: 990px;
  color: #fff;
}

#header {
  height: 65px;
  overflow: hidden;
}

#header h1 {
  float: left;
  width: 240px;
  height: 65px;
  overflow: hidden;
}

#header h1 a {
  background: transparent url(../images/nav/logo.gif) no-repeat scroll 0 8px;
  display: block;
  height: 75px;
  text-indent: -99999px;
  width: 150px;
}


#subnav,
#main_nav {
  clear: both;
  font-family: helvetica, arial, verdana, sans-serif;
  font-size: 11px;
  left: 10px;
}

#main_nav {
  margin-top: 6px;
/*	*margin-top: 4px; */
  height: 24px;
}

#main_nav li {
  float: left;
	height: 21px;
  margin-right: 25px;
  position: relative;
}

#main_nav li a,
ul.subnav ul a {
  color: #fff;
	display: block;
  text-decoration:none;
  font-weight: bold;
  padding: 3px 0;
}

#main_nav a.selected,
#main_nav a:hover {
  border-bottom: 6px solid #fff;
  text-decoration: none;
}

#main_nav li.open {
  background: #230c2e url(../images/nav/arrow_nav_open.gif) no-repeat scroll 50% 0%;
  border-bottom: none;
  padding-top: 10px;
}


ul.subnav {
  position: absolute;
  top: 14px;
}

#subnav_azmusic {
  height: 125px;
  width: 90px;
  left: -11px;
}

#subnav_label {
  height: 265px;
  width: 125px;
  left: -11px;  
}

ul.subnav li {
  background-color: #230c2e;
  padding: 3px 12px;
  width: 94px;
  float: none;
  height: 18px;  
}

ul.subnav li a {
  width: 94px;
  display: block;
}

#main_nav ul.subnav li a:hover {
  border-bottom: 2px solid #fff;
}

ul#subnav_azmusic li a,
ul#subnav_azmusic li {
  width: 55px;
}

ul.label {
  left: 252px;
}

ul a {
  font-weight: normal;
}  

#page-header {
  position: relative;
}

#page-header h2 {
  width: 972px;
  padding: 0 0 0 10px;
  background: #000 url(../images/nav/pageheader_bg.gif) no-repeat 0 0;
  margin-bottom: 7px;
}

div.ad.tower {
  margin: 0 0 5px 0;
  padding: 10px 0 5px 0;
  color: #999999;
  background-color: #e5e5e5;
  text-align: center;
  font-size: 10px;
}

/* ------------------------------------------------------------
+Links
------------------------------------------------------------ */
a {
  text-decoration: none;
  color: #2c7ed1;
}

a:hover {
  text-decoration: underline;
}

a.arrow {
  background: transparent url(../images/icons/arrow.gif) no-repeat 100% 50%;
  padding-right: 15px;
}

a.view_all {
  float: right;
  border-top: 1px solid #e2e2e2;
  text-align: right;
  width: 610px;
  display: block;
  padding-top: 10px;
  margin-top: 10px;
}

a.listen,
a.play-audio,
a.sow-archive {
  background: transparent url(../images/icons/listen.gif) no-repeat 0 25%;
  padding-left: 20px;
  padding-right: 10px;
}

a.download {
  background: transparent url(../images/icons/download.gif) no-repeat 0 25%;
  padding-left: 20px;
  padding-right: 10px;
}

a.buy {
  background: transparent url(../images/icons/buy.gif) no-repeat 0 25%;
  padding-left: 25px;
}

a.sow-archive {
	background: none;
	border-left: 1px solid #D6D6D6;
	margin-top: 5px;
	display: block;
	float: left;
}
/* ------------------------------------------------------------
+Headings
------------------------------------------------------------ */
p {
  margin-bottom: 10px;
}



/* ------------------------------------------------------------
+Images
------------------------------------------------------------ */
div.thumbnail,
div.image_frame {
  border-top: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  background: transparent url(../images/nav/frame_bg.jpg) no-repeat scroll 0 0;
  height: 300px;
  width: 300px;
  overflow: hidden;
  display:table;
  #position: relative;
  #display: block;
}

div.thumbnail {
  background-image: none;
}


#artists div.image_frame,
#genres div.image_frame,
#regions div.image_frame,
#media div.image_frame {
  height: 288px;
  width: 652px;
  background-image: url(../images/nav/frame_bg_lrg.jpg);  
}

#media div.image_frame {
  width: 652px;
  background-image: url(../images/nav/frame_bg_ext_large.jpg);
}

#media div.image_frame table tr td {
  width: 652px;
  padding: 10px 0;
}


div.thumbnail div.thumbnail_image,
div.image_frame div.frame {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  #position: absolute;
  #top: 50%;
  #display: block;
  background-color: transparent !important;
}

#artists div.image_frame div.frame,
#genres div.image_frame div.frame,
#regions div.image_frame div.frame {
  width: 652px;
}


div.thumbnail div.thumbnail_image div.img,
div.image_frame div.frame div.img {
  #position: relative;
  #top: -50%
}

div.caption {
  background: #b6b6b6 url(../images/nav/caption_bg_gray.gif) repeat-x scroll 0 0;
  padding: 16px;
  margin-bottom: 5px;
  width: 621px;
}

div.caption h5 {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
}

div.yellow_gradient {
  background: #e8bf00 url(../images/nav/caption_bg_yellow.gif) repeat-x scroll 0 0;
}


div.green_gradient,
div.red_gradient,
div.purple_gradient,
div.orange_gradient {
  background: #246c18 url(../images/nav/caption_bg_green.gif) repeat-x scroll 0 0;
  font-weight: bold;
  padding: 16px;
  margin-bottom: 5px;
  color: #fff;
}

div.green_gradient a,
div.expanding_nav div.green_gradient a.expanding_toggle {
  color: #fed114;
  background-image: none;
}

div.red_gradient {
  background: #b80000 url(../images/nav/caption_bg_red.gif) repeat-x scroll 0 0;
  font-weight: bold;
  padding: 16px;
  margin-bottom: 5px;
}

div.purple_gradient {
  background: #3e2b6a url(../images/nav/caption_bg_purple.gif) repeat-x scroll 0 0;
  font-weight: bold;
  padding: 16px;
  margin-bottom: 5px;
}

div.orange_gradient {
  background: #bf5d00 url(../images/nav/caption_bg_orange.gif) repeat-x scroll 0 0;
  font-weight: bold;
  padding: 16px;
  margin-bottom: 5px;
}

/* ------------------------------------------------------------
+Clearing
------------------------------------------------------------ */
/* Thanks to http://www.positioniseverything.net/easyclearing.html */

.clearfix,
div.container,
#headerboard,
div.module div.frame div.contents ul li,
div.module div.frame div.contents,
div.module div.frame div.contents div.linked_video,
.clearfix:after  {
  *height: 1%;
}

div.container:after,
#headerboard:after,
div.module div.frame div.contents ul li:after,
div.module div.frame div.contents:after,
div.module div.frame div.contents div.linked_video:after,
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  border: 1px solid red;
}


/* ------------------------------------------------------------
+Miscellaneaous
------------------------------------------------------------ */

div.expanding_frame
{
  height: 28em;
  margin-bottom: 10px;
  overflow: hidden;
}

div.expanding_contents
{
  padding-bottom: 20px;
}

div.expanding_nav
{
  margin: 0 0 10px 0;
  text-align: right;
}

div.expanding_nav a.expanding_toggle
{
  background: transparent url(../images/icons/expand_arrow.gif) no-repeat 100% 50%;
  padding-right: 10px;
  font-weight: bold;
}
div.expanding_nav a.collapsing_toggle
{
  background: transparent url(../images/icons/collapse_arrow.gif) no-repeat 100% 50%;
  padding-right: 10px;  
  font-weight: bold;
}

div.view_archive
{
  margin: 20px 0 0;
  text-align: right;
  border-top: 1px solid #E8E8E8;
  padding-top: 10px;
  clear: both;
}

div.view_archive a
{
  padding-right: 15px;
  font-weight: bold;
}

.hidden {
  font-size: 1px;
  left: -9999px;
  line-height: 0px;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 9999px;
}

.hiddenText {
  text-indent: -9999px;
}

.error {
	color: #CC0000;
}

.confirm {
	color: #00CC00;
}

#carousel_stage {
  width: 652px;

  height: 288px;
  margin: 0 0 5px 0;
  background: #fff;
  padding: 0;
}

#carousel_movie {
  padding: 0px;
  width: 642px;
}

#main_nav li.social {
	float: right;
	text-transform:uppercase;
	position: relative;
	margin-right: 15px;	
}

#main_nav li.social a {
	padding-left: 22px;
	line-height: 17px;
}

#main_nav li.twitter {
	background: transparent url(../images/icons/twitter_icon.gif) no-repeat 0 0;
}

#main_nav li.facebook {
	background: transparent url(../images/icons/facebook_icon.gif) no-repeat 0 0;
}

#sharethis_0 .stico_default {
		background: transparent url(../images/icons/share_icon.gif) no-repeat 0 0 !important;
}
#sharethis_0 {
  height: 20px;
  margin: 0;
  display: block;
  font-size: 13px;
	position: relative;
	padding-top: 1px;
}

#main_nav li #sharethis_0 a {
  color: white;
  padding-top: 0;  
	padding-left: 20px;
	font-size: 11px;
}

#main_nav li #sharethis_0 a .stbuttontext {
	line-height: 20px !important;
}

/*
* LOCALIZED HEADER
*/

.MainTopBar {
height: 30px;
width: 980px;
margin: 0 auto;
color:#474747;
font-family: Arial,Tahoma,Verdana,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}

.SectionSeparatorBd {
border:0 solid #E2E2E2;
}

.MainTopTabs a {
display: block;
float: left;
padding: 9px 10px 7px 10px;
height: 13px;
color: #545454;
text-decoration: none;
}

.MainTopTabs a.selected, .MainTopTabs a.selected:hover {
padding-bottom: 8px;
color: #fff;
background: url(http://music.natgeochannel.co.uk/App_Styles/Images/Main/TopBarBg.gif) repeat-x left top;
text-decoration: none;
}

.MainTopTabs a:hover {
background: url(http://music.natgeochannel.co.uk/App_Styles/Images/Main/TopBarBgHover.gif) repeat-x left top;
}

a.oembed {display: none;}
div#toolbar-container {
	z-index: 30000;
}
div.pagination {text-align: center;}
div.pagination ul li {padding: 0 5px; display: inline;}
div.sow-player-div {display: none;}