/*
 * Base.css
 * Grids, fonts, core styles for XFM.co.uk
 * Note:
 *   these styles also apply to XFM, festivals is overriden in its own CSS
*/

html, body {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #717171;
    background: #F1EBDE url(../images/s/background2.jpg) repeat-x 50% 0;
}

/* spans inside legend are there for accessibility, so hide them */
legend span {
    position: absolute;
    left: -5000em;
}

p {
    font-size: 93%; /* 12px */
}

/* LVHA */
a:link, a:visited {
    color: #9D5D3A;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active, a:focus
{
    background-color: #9D5D3A;
    color: #FFF;
    text-decoration: underline;
}

a.external {
    padding-right: 15px;
    background-image: url(../../../d/xfm.co.uk/images/s/icons-sprite-map.png);
    _background-image: url(../../../d/xfm.co.uk/images/s/icons-sprite-map.gif);
    background-repeat: no-repeat;
    background-position: right top;
}
select {
    background-color:#FFF;
    border:0 none;
    font-family:Verdana;
    margin:0;
}

/* Grids
  - .unit is equal-height columns
  - .unit.first-child is hook to access first source order item
  
  - Structure:
  .stack
    .content
      .stack
        .unit.first-child
        .unit+
    .related
      .stack
        .unit.first-child
        .unit+
*/
/* grids */

.content {
    background: #fff;
}

.stack {
    overflow: hidden;
    zoom: 1;
}

.stack .content {
    float: left;
    width: 548px;
    padding: 0 0 32000px 0;
    margin-bottom: -32000px;
}

.stack .related {
    float: right;
    width: 300px;
    padding: 0 0 32000px 0;
    margin-bottom: -32000px;
}

.stack .related .narrow {
    float: left;
    width: 148px;
    /* go to bottom of sky */
    padding-bottom: 32000px;
    margin-bottom: -32000px;
}

.stack .unit {
    background: transparent url(../images/bg-sprite.png) no-repeat;
    padding: 0.77em 11px; /* 10px 11px */
    border-top: 0.77em solid transparent; /* 10px */
}

/* border is used for faking the background color between units, so remove for first-child */
.stack div.first-child {
    border: 0;
}

#content .unit {
    background-position: -100px 0;
    *background-position: -100px 0.77em; /* IE doesn't cope with the border-top */
}

#content .first-child {
    background-position: -100px 0;
}

#content .related .unit {
    background-position: -1018px 0;
    background-color:#fff;
}

#masthead .unit {
    background-image: none;
}

#masthead .content .unit {
    padding-top: 1.7em; /* 22px */
    padding-left: 27px;
}
#masthead .content .event h2 {
    position:absolute;
    left:-9999em;
}
#content .related .narrow {
    background-color: #fff;
    background-position: -748px 0;
}

/* ads */
#top_ads {
    position: absolute;
    left: -5000em;
}

#top_commercial {
    position:relative;
    margin-top: 0.77em; /* 10px */
    clear: left;
    /* contain floats */
    overflow: hidden;
    zoom: 1;
}
#top_commercial .clear {
    clear:both; 
}
#top_commercial .mini_ad {
    position:absolute;
    right:0;
    top:0;
}
#top_commercial .mini_ad a {
    background:none;
    padding:0;
}

.banner-ad {
    width: 728px;
    height: 90px;
    background: #ccc;
    float: left;
}

.small-ad {
    float: right;
    width: 120px;
    height: 90px;
    background: #ccc;
}

.lrec-ad {
    position: relative;
    margin-top: 0.77em; /* 10px */
    clear: both;
    width: 300px;
    height: 248px;
    background: #fff;
}

.solo-mpu{
    margin-top: 0;
}

/* has dependencies on grid */
.stack .related .sky-ad {
    float: right;
    width: 120px;
    height: 600px;
    padding: 0;
    border-top: 0;
}


/* page and core dimensions */

#page {
    width: 986px;
    margin: 0 auto;
}

#logo {
    padding: 4.3em 0 0 64px;
    float: left;
}

/* main_hd is image replaced */
#main_hd {
    float: left;
}

#main_hd {
    padding: 58px 0 0 10px;
    background:transparent;
    display:block;
    /* width:423px; The original width without O2 sponsorship */
    width:146px;
    height:75px;
    text-indent:-9999em;
}

#o2_logo {
    margin: 58px 0 0 0;
    padding: 0 67px 12px 0;
    float: left;
    width: 210px;
    height: 64px;
    z-index: -100;
}

#o2_logo a,
#o2_logo a:focus,
#o2_logo a:hover,
#o2_logo a:active,
#o2_logo a:visited {
    background-color: transparent;
}

#logo a:focus,
#logo a:active {
    background-color: transparent;
}
#region_picker, #site_options {
    padding: 0.38em 0 0; /* 5px */
}
#region_picker {
    padding-left: 76px;
    clear: left;
    float:left;
    width:370px;
}
#site_options {
    float:right;
    margin-right:20px;
}
#region_picker li#region a {
    font-weight: bold;
}
#site_options li, #region_picker li {
    font-weight: bold;
    display: inline;
    padding: 0 5px;
    font-size: 85%; /* 11px */
    text-transform: lowercase;
    text-decoration: none;
    border-right: 1px solid #717171;
}
#region_picker li {
    text-transform:none;
    font-weight: normal;
}
#site_options .last-child, #site_options .last, #region_picker li.last {
    border: none;
}

#site_options a.external {
    background-image: none;
    padding: 0;
}



#content {
    margin-top: 0.77em;
}

#masthead {
    background: #fff;
    /* cause the floats to be contained with equal-height stuff in IE */
    *position: relative;
}
#primary_nav {
    background: url(../images/s/nav_top.gif) no-repeat;
    float: left;
    padding: 10px 0 0 64px;
    margin-bottom: -1px;
    position: relative;
    /* contain floats */
    z-index: 1;
    width: 538px;
    margin-top:.60em;
    *margin-top: 7px;
}

#primary_nav ul {
    /* contain floats */
    overflow: hidden;
    zoom: 1;
    background: #34261B url(../images/s/background_nav.gif) repeat-x 0 0;
    border: 1px solid #D4B9AF;
    border-width: 0 0 0 1px;
}

#primary_nav li {
    float: left;
    font-weight: bold;
    text-align:center;
}
#primary_nav li#nav1 { width:66px; }
#primary_nav li#nav2 { width:68px; }
#primary_nav li#nav3 { width:102px; }
#primary_nav li#nav4 { width:112px; }
#primary_nav li#nav5 { width:86px; }
#primary_nav li#nav6 { width:102px; }

#primary_nav li#nav1 { _width:auto; }
#primary_nav li#nav2 { _width:auto; }
#primary_nav li#nav3 { _width:auto; }
#primary_nav li#nav4 { _width:auto; }
#primary_nav li#nav5 { _width:auto; }
#primary_nav li#nav6 { _width:auto; }

#primary_nav a {
    text-transform: lowercase;
    text-decoration: none;
    line-height: 1.54; /* 20px */
    color: #E8DEC9;
    background: url(../images/bg-bevel-sprite.png) no-repeat 100% -407px;
    display: block;
    border: 1px solid #26180F;
    border-width: 0 1px 1px 0;
}

#primary_nav span {
    padding: 0 8px 0 9px;
    background: url(../images/bg-bevel-sprite.png) no-repeat 0 -201px;
    display: block;
    white-space:nowrap;
}

#primary_nav .breakfast span{
    padding: 0 8px 0 8px;    
}

#primary_nav a:hover,
#primary_nav a:active,
#primary_nav a:focus {
    color: #9D5D3A;
    background-color: #E8DEC9;
    border-bottom-color: #D4B9AF;
}

#primary_nav a:hover,
#primary_nav a:active,
#primary_nav a:focus, 
#primary_nav .current a {
    background-position: 100% -819px;
}

#primary_nav a:hover span,
#primary_nav .current a:hover span,
#primary_nav a:active span,
#primary_nav a:focus span,
#primary_nav .current span {
    background-position: 0 -613px;
}

#primary_nav .current a,
#primary_nav .current a:hover {
    background-color: #fff;
    border-bottom-color: #fff;
    color: #E9A347;
}

#main {
    background: url(../images/s/border_nav_top.gif) no-repeat 0 0;
    margin-top: -2px; 
    padding: .77em 64px 0; /* .77em = 10px */
    clear: left;
}

#sub_nav {
    background: url(../images/s/border_nav_top.gif) no-repeat 0 0;
    clear: left;
    padding: 0 64px;
    margin-top: -1px;
}

#sub_nav ul {
    margin-top: -1px;
    background: #fff;
    border: 1px solid #D4B9AF;
    /* contain floats */
    overflow: hidden;
    zoom: 1;
}

#sub_nav a {
    font-size: 85%; /* 11px */
    padding: 0.64em 8px; /* 7px 8px */
    display: block;
    font-weight: bold;
    text-transform: lowercase;
}

#sub_nav .current a {
    color: #e9a347;
}

#sub_nav li {
    float: left;
    background: url(../images/bg-nav-border.png) no-repeat 100% -72px;
}

#sub_nav .last-child {
    background: none;
}

#site_links {
    text-align: center;
    padding: 2em 0;
}

#site_links li {
    background: url(../images/festivals/bg-nav-border.png) no-repeat 100% -320px;
    display: inline;
    padding: 0.15em 7px; /* 2px 7px */
    font-size: 77%; /* 10px */
    font-family: Verdana, Arial, sans-serif;
}

#site_links .last-child {
    background: none;
}

/* listen live */
#header {
    background: url(../images/s/listen_wings.png) no-repeat 564px 20px;
    /* contain floats */
    overflow: hidden;
    zoom: 1;
}

#listen {
    width: 300px;
    float: right;
    margin: 20px 64px 0 0;
    /* avoid double float margin bug */
    _display: inline;
    overflow: hidden;
    zoom: 1;
}

#listen .listen_container {
    background: #fff url(../images/bg-listenlive.png) no-repeat -100px 0;
}

#listen_live {
    float: left;
    font-size:100%;
}

#listen_live a {
    display: block;
    font-size: 153.9%; /* 20px */
    font-weight: bold;
    text-transform: lowercase;
    padding-top: 35px;
    min-height: 55px;
    _height: 55px;
    line-height: 1;
    width: 113px;
    padding-left: 82px;
    background: url(../../../d/xfm.co.uk/images/s/icons-sprite-map.png) no-repeat 12px 14px;
    _background-image: url(../../../d/xfm.co.uk/images/s/icons-sprite-map.gif);
}

#listen_live a:hover,
#listen_live a:focus,
#listen_live a:active {
    background-position: -253px 14px;
    color: #9D5D3A;
}

#listen li {
    font-size: 85%;
    padding: .2em 0;
}

#listen .nav {
    float: right;
    width: 101px;
    padding-top: 1.6em;
}

#listen .nav li a {
    display: inline;
    padding: 0.2em 0;
    border-bottom: 1px dotted #6C8207;
    width: 45px;
    margin: 0 auto;
    text-align: center;
    margin-left:25px;
}

#listen .nav li.last a {
    border: 0;
}

#personal_radio {
    padding: 3px;
    border: 1px solid #DBC9B2;
    border-width: 0 1px 1px;
}

.launch_player {
    display: block;
    font-weight: bold;
    line-height: 1.5;
    background: url(../../../d/xfm.co.uk/images/s/icons-sprite-map.png) no-repeat -8565px 1px;
    _background-image: url(../../../d/xfm.co.uk/images/s/icons-sprite-map.gif);
    padding-left: 24px;
}

.launch_player span {
    font-size: 93%;
    font-weight: normal;
}

#nowplaying {
    clear: both;
    _zoom: 1;
    overflow: hidden;
    border: 1px solid #DBC9B2;
    border-width: 0 1px;
}

.js #nowplaying {
    position: relative;
    height: 2em;
}
.js #nowplaying li {
    position: absolute;
    top: 2em;
    padding: 2px;
    margin: 5px;
    width: 284px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.js #nowplaying li strong {
    font-weight: bold;
}

/* listen live */
#flashnowplaying {
    position: absolute;
    left: -5000em;
}

#nowplaying, #now_playing, #personal_radio {
    background: #fff url(../images/bg-listenlive.png) no-repeat -500px 0;
    
}

/* search form */
#search_form {
    /* contain floats */
    overflow: hidden;
    zoom: 1;
}

.js #search_form label {
    position: absolute;
    left: -5000em;
}

#search_form div {
    padding-top: 5px;
}

#search_form div input {
    float: left;
}

#search_form .btn {
    margin-left: 4px;
}

.js #search_words {
    width: 263px;
}

#search_words {
    border: 1px solid #DBC9B2;
    color: #717171;
    font-size:85%;
    padding: 3px;
    font-family: Verdana;
}

/* skip link styles */
a.skip_link {
    position: absolute;
    left: -5000em;
    background: #060604;
    display: block;
    font-weight: bold;
    /* width 100% + padding LR doesn't work, so use text-indent */
    width: 100%;
    padding: 10px 0;
    text-indent: 10px;
}

.skip_link:link,
.skip_link:visited,
.skip_link:hover,
.skip_link:active {
    color: #fff;
}

.skip_link:focus,
.skip_link:active {
    left: 0;
}


/* main content styles */

#content h1 {
    color: #717171;
    font-size: 153.9%; /* 20px */
    font-weight: bold;
    margin-bottom: 0.5em; /* 10px */
}

#content h2 {
    color: #E9A347;
    font-size: 116%; /* 15px */
    font-weight: bold;
    margin-bottom: 0.67em; /* 10px */
}

#content .related h2 {
    font-size: 100%; /* 13px */
    margin-bottom: 0.77em; /* 10px */
}

#content p {
    margin-bottom: 1em;
}

/* modal dialogue login */
.js #modalOverlay {
    background: #000;
    cursor: wait;
}

.js #modalContainer {
    width: 358px;
    left: 50%;
    top: 50%;
    margin-left: -179px; /* half of width */
    background: #fff;
    padding: 11px;
}

.js #user_login h2 {
    color: #E9A347;
    font-weight: bold;
}
.js #user_login .hd {
    margin: 1em 0;
}

.js #user_login .bd {
    background: #F6F2E7;
    padding-top: 1.6em;
}

.js .login-options {
    text-align: center;
    padding: 1em 0 2em 0;
    font-size: 85%;
}

.js #vip_login .login {
    display: block;
    background: transparent url(../images/s/icon_launch.gif) no-repeat;
    padding: 0 0 0 19px;
    color: #9D5D3A;
    font-weight: bold;
    margin-top: 1.1em;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.js #vip_login div {
    overflow: hidden;
    padding: 1px;
    background: #CBBA9A;
    width: 300px;
    margin: 0.8em auto 0.8em auto;
}
.js #vip_login div select {
    padding: 1px;
    width:200px;
    min-height:20px;
}
.js #vip_login input {
    border: 0;
    display: block;
    float: right;
    width: 196px;
    padding: 5px 2px 2px;
    color: #000;
}

.js #vip_login label {
    font-weight: bold;
    color: #fff;
    width: 90px;
    text-align: left;
    display: block;
    float: left;
    padding:3px 5px;
    text-transform: lowercase;
}


.js #vip_login .btn,
.js #vip_login .remember {
    background: none;
    text-align: center;
}

.js #vip_login .btn input,
.js #vip_login .remember input {
    width: auto;
    display: inline;
    float: none;
}

.js #vip_login .remember {
    text-align: right;
    font-weight:normal;
}

.js #vip_login .remember label {
    color: #717171;
    float: none;
    display: inline;
    font-weight:normal;
}

.js #cancel_login {
    position: absolute;
    top: 2.25em;
    width:auto;
    *top: 1.25em;
    *width: 4.85em;
    right: 10px;
    background: transparent url(../images/s/x-cancel.gif) no-repeat 0 center;
    padding-left: 8px;
    color: #9D5D3A;
    border: 0;
    font-size: 85%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    text-align: right;
    text-transform:lowercase;
}

/* pagination links */

#pagination {
    padding-bottom: 10px;
    text-align: center;
}

#pagination ul {
    display: inline;
}

#pagination li {
    border-right: 1px solid #9d5d3a;
    display: inline;
    font-size: 85%;
}

#pagination a {
    padding: 0 6px;
}

#pagination li.last-child {
    border-right: none;
}