@import url(/css/generic.css);
@import url(/css/xstandard.css);


/*
 * Site Layout Styles
 */

body {
  text-align: center;
}
div#site-container {
  width: 976px;
  margin: 0 auto 0 auto;
  padding: 7px 0 7px 0;
  text-align: left;
}



/** sitestripe **/
div#site-container div#sitestripe {
  position:relative;
  overflow:hidden;
  background:#ffffff;
  color:#ffffff;
  margin:0px 0px 3px 0px;
  padding:0px;
  height:32px;
  border:solid 2px #d3dadd;
}

div#site-container div#sitestripe ul{
  list-style:none;
  margin:0px 10px;
  padding:0px;
  float:left;
}

div#site-container div#sitestripe ul li{
  float:left;
  height:32px;
  margin:0px;
  padding:0px 3px;
}

div#site-container div#sitestripe ul li.vd{
  /*background:transparent url(/img/site-stripe-div.jpg) top left no-repeat;*/
  width:4px !important;
  padding:0px;
}

div#site-container div#sitestripe ul li.vd span{
  position:absolute;
  margin:-999999px;
}

div#site-container div#sitestripe ul li a{
  line-height:32px;
  text-decoration:none;
}

div#site-container div#sitestripe a{
  color:#000000;
  font-size:0.87em;
  font-weight:bold;
}

div#site-container div#sitestripe a:hover{
  text-decoration:underline;
}

div#site-container div#sitestripe a.active{
  color:#ff0000;
}



/**
* Global Google Search
*/

div#site-container #gsearch{
  position:absolute;
  top:6px;
  right:12px;
  text-align:right;
  padding:0px;
  z-index:2;
}

#gsearch #cseinput{
  background:#ffffff url(/img/google-search-bg.gif) 0px 2px  no-repeat;
  border:solid 1px #dbdbdb;
  width:150px;
  height:17px;
}

#gsearch #cseinput:focus,
#gsearch #cseinput.focus{
 background:#ffffff !important;
}
#csesubmit{
  margin:0px 3px;
  font-size:0.8em;
}

#gsearch #cseinput.nobg{
 background:#ffffff;
}

div#cse-search-results {
 margin:6px 12px;
}


/**
* Site Search - part of Main header
**/

div#header div.site-functions form {
  float: left;
}
div#header div.site-functions fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
div#header div.site-functions fieldset legend {
  display: none;
}
div#header div.site-functions fieldset label {
  position: absolute;
  left: -9999px;
}
div#header div.site-functions fieldset input.text {
  font-size: 0.9em;
  background: url(/img/site-search-field-background.png) no-repeat;
}
/*
div#header div.site-functions fieldset input.button {
  overflow: visible;
  color: #000000;
  font-size: 0.8em;
  font-weight: bold;
  font-family: arial black;
  text-transform: uppercase;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}
*/

div#header div.site-functions  #site-search-field{
  background:#ffffff url(/img/google-search-bg.gif) 0px 2px  no-repeat;
}

div#header div.site-functions #site-search-field:focus,
div#header div.site-functions #site-search-field.focus{
 background:#ffffff !important;
}


div#header div.site-functions #site-search-field.nobg{
 background:#ffffff;
}



/*
 * Top Banners
 */

div#site-container div#top-banners {
  overflow: auto;
  margin-bottom: 7px;
  width: 100%;
}
div#top-banners img {
  display: block;
}
div#top-banners div#top-banner-big {
  float: left;
  margin-right: 8px;
}
div#top-banners div#top-banner-small {
  float: left;
}


/*
 * Site Frame
 */

div#site-container div#site-frame {
  border: 2px solid #d3dadd;
}


/*
 * Header (contains links, time, logo, rss, site search and news alerts)
 */

div#site-frame div#header {
  border-bottom: 2px solid #d3dadd;
  padding: 5px 8px 7px 8px;
}

div#header div.top {
  overflow: hidden;
  margin-bottom: 18px;
  width: 100%;
}
div#header div.top ul.links {
  overflow: hidden;
  list-style: none;
  float: left;
  margin: 0;
  padding: 0;
}
div#header div.top ul.links li {
  font-weight: bold;
  text-transform: uppercase;
  float: left;
  margin: 0 9px 0 0;
  padding: 0;
}
div#header div.top ul.links li a {
  color: #716f6e;
  text-shadow:#ffffff 0 0 0;
  font-size:0.95em;
}

div#header div.top p.date {
  font-size: 0.8em;
  color: #716f6e;
  float: right;
  margin: 2px 0 0 0;
}

div#header div.bottom {
  position:relative;
  overflow: hidden;
  padding-left: 8px;
  height: 100%;
}

div#header div.bottom p.date {
  font-size: 0.8em;
  color: #716f6e;
  position:absolute;
  top: 8px;
  right:0px;

}

div#header div.bottom h1.logo {
  cursor: pointer;
  background: url(/img/header-gadget-republic-logo.png) no-repeat;
  float: left;
  margin: 0;
  width: 370px;
  height: 101px;
}
div#header div.bottom h1.logo span {
  position: absolute;
  left: -9999px;
}
div#header div.bottom div.site-functions {
  float: right;
  margin-top: 20px;
  width: 230px;
}
div#header div.bottom div.site-functions form.search-and-rss {
  float: right;
  overflow: hidden;
  margin: 0 0 24px 0;
  height: 100%;
}
div#header div.bottom div.site-functions form.search-and-rss p.rss-button {
  float: left;
  margin: 0 5px 0 0;
}
div#header div.bottom div.site-functions form.search-and-rss fieldset {
  overflow: hidden;
  float: left;
  border: none;
  margin: 0;
  padding: 0;
}
div#header div.bottom div.site-functions form.search-and-rss fieldset label {
  position: absolute;
  left: -9999px;
}
div#header div.bottom div.site-functions form.search-and-rss fieldset input#site-search-field {
  font-size: 0.9em;
  float: left;
  border: 2px solid #aba9a9;
  margin: 9px 5px 0 0;
  padding: 1px 2px 1px 2px;
  width: 120px;
}
div#header div.bottom div.site-functions form.search-and-rss fieldset input.search-button {
  overflow: visible;
  background: none;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  color: #0083d7;
  float: left;
  border: none;
  margin: 14px 0 0 0;
  padding: 0;
  width: auto;
}
div#header div.bottom div.site-functions p.news-alerts {
  clear: both;
  text-align: right;
  margin: 0;
}
div#header div.bottom div.site-functions p.news-alerts a {
  color: #716f6e;
  font-weight: bold;
  font-size: 1.2em;
  text-transform: uppercase;
}
div#header div.bottom div.site-functions p.news-alerts a em {
  color: #0083d7;
  font-style: normal;
}


/*
 * Features Area (contains slideshow, editor's choice and media box)
 */

div#site-frame div#features {
  overflow: hidden;
  border-bottom: 2px solid #d3dadd;
  padding: 8px 0 8px 0;
  height: 100%;
}

div#features div#slideshow {
  float: left;
  width: 454px;
  background: #fff;
}
div#features div#slideshow div.inner {
  padding: 0 8px 0 9px;
}
div#features div#slideshow div.inner p.view-previous-item {
  float: left;
  margin: 127px 6px 0 0;
  width: 22px;
}
div#features div#slideshow div.inner div.current-item {
  float: left;
  margin: 0 6px 0 0;
  width: 378px;
}
div#features div#slideshow div.inner div.current-item p {
  margin: 0 0 6px 0;
}
div#features div#slideshow div.inner div.current-item p img {
  display: block;
}
div#features div#slideshow div.inner div.current-item h2 {
  color: #0083d7;
  font-size: 1.6em;
  text-align: center;
  margin: 0;
}
div#features div#slideshow div.inner div.current-item h2 a {
  color: #0083d7;
  background: #fff;
}
div#features div#slideshow div.inner p.view-next-item {
  float: left;
  margin: 127px 0 0 0;
  width: 22px;
}

div#features div#breaking-news {
  float: left;
  border: 1px solid #5dc8f1;
  width: 255px;
}
div#breaking-news div.inner {
  padding: 14px 11px 8px 11px;
  height: 288px;
}
div#breaking-news div.inner h2 {
  background: url(/img/heading-breaking-news.png) no-repeat;
  margin: 0 auto 4px auto;
  width: 230px;
  height: 37px;
}
div#breaking-news div.inner h2 span {
  position: absolute;
  left: -9999px;
}
div#breaking-news div.inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
div#breaking-news div.inner ul li {
  border-bottom: 2px solid #d1f2e7;
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
}
div#breaking-news div.inner ul li.last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
div#breaking-news div.inner ul li p {
  margin: 0;
}
div#breaking-news div.inner ul li strong {
  margin-right: 5px;
}
div#breaking-news div.inner ul li a {
  color: #4f4c4c;
  font-weight: bold;
  font-size: 1.2em;
}

div#features div#media {
  float: left;
  width: 261px;
}
div#features div#media div.inner {
  padding: 0 12px 0 13px;
}
div#features div#media div.inner ul.selector-icons {
  list-style: none;
  overflow: hidden;
  float: right;
  margin: 0;
  padding: 0;
  height: 100%;
}
div#features div#media div.inner ul.selector-icons li {
  float: left;
  margin: 0 4px 0 0;
  padding: 0;
}
div#features div#media div.inner ul.selector-icons li.last {
  margin-right: 0;
}
div#features div#media div.inner ul.selector-icons li span {
  font-size: 0.9em;
  color: #0083d7;
  text-align: center;
  display: block;
  margin-bottom: 1px;
}
div#media div.inner div#mediabox {
  background: #fff;
  width: 250px;
  height: 300px;
}
div#media div.inner div#mediabox-audio,
div#media div.inner div#mediabox-video {
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 0;
  width: 235px;
}
div#media div.inner div#mediabox-audio {
  display: none;
}
div#media div.inner div#mediabox-video {
  display: block;
}
div#media div.inner div#mediabox-audio div.mediabox-mediafile,
div#media div.inner div#mediabox-video div.mediabox-mediafile {
  padding: 0 0 0 1px;
}
div#media div.inner div.mediabox-info {
  font-weight: bold;
  overflow: auto;
  padding: 5px 0 0 0;
}
div#media div.inner div.mediabox-info p {
  margin: 0;
}


/*
 * Main Area (contains content and sidebar)
 */

div#site-frame div#main {
  overflow: hidden;
  width: 100%;
}

div#main div#content {
  float: left;
  border-bottom: 2px solid #d3dadd;
  border-right: 2px solid #d3dadd;
  width: 657px;
  min-height: 1966px;
}
div#content h2#page-title {
  font-size: 2em;
  font-family: arial black, arial, verdana, serif;
  /*text-transform: uppercase;*/
  margin: 15px;
}
h2#page-title.image {
  background-repeat: no-repeat;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  height: 46px;
}
h2#page-title.image span {
  position: absolute;
  left: -9999px;
}
div#main div#content div.content-area {
  padding: 0 15px 0 15px;
}

div#main div#content div.content-area ol,
div#main div#content div.content-area ul, {
  margin:10x 20px;
}

div#main div#content div.content-area ol li,
div#main div#content div.content-area ul li{
  margin:5px 20px
}

div#main div#sidebar {
  float: left;
  width: 313px;
  _width: 310px;
}

div#sidebar div.columns {
  overflow: hidden;
  width: 100%;
}
div#sidebar div.columns div.left-column {
  float: left;
  border-right: 2px solid #d3dadd;
  width: 158px;
}
div#sidebar div.columns div.right-column {
  float: left;
  width: 153px;
  _width: 150px;
}

div#sidebar div.advertisement {
  background: #fff;
  border-bottom: 2px solid #d3dadd;
}
div#sidebar div.advertisement * {
  display: block;
  margin: 0 auto 0 auto;
}

div#sidebar div.advertisement.large {
  padding-top: 10px;
  padding-bottom: 10px;
}
div#sidebar div.advertisement.skyscraper {
  padding-top: 17px;
  padding-bottom: 18px;
}
div#sidebar div.advertisement.small {
  padding-top: 12px;
  padding-bottom: 11px;
}

div#sidebar div#most-popular {
  overflow: hidden;
  background: #fff;
  border-bottom: 2px solid #d3dadd;
  height: 335px;
}
div#sidebar div#most-popular div.inner {
  padding: 15px 5px 0 5px;
}
div#sidebar div#most-popular div.inner h2 {
  background: url(/img/heading-most-popular.png) no-repeat;
  margin: 0 auto 6px auto;
  width: 136px;
  height: 66px;
}
div#sidebar div#most-popular div.inner h2 span {
  position: absolute;
  left: -9999px;
}
div#sidebar div#most-popular div.inner ul {
  list-style: none;
  margin: 0 7px 0 7px;
  padding: 0;
}
div#sidebar div#most-popular div.inner ul li {
  margin: 0 0 1em 0;
  padding: 0;
}
div#sidebar div#most-popular div.inner ul li p {
  color: #4e4a49;
  font-weight: bold;
  margin: 0;
}
div#sidebar div#most-popular div.inner ul li p a {
  color: #4e4a49;
}


/*
 * Subpage Styles (contains banner, paging controls, social bookmarking
 * options and article options
 *
 * These styles appear on more than one subpage on the site.
 */

div#content div#subpage-banner {
  text-align: center;
  margin: 0 auto 20px auto;
  width: 660px;
}
div#subpage-banner img {
  display: block;
  margin: 0 auto 0 auto;
}

div#content p.paging-controls {
  border: 1px solid #5dc8f1;
  padding: 5px 8px 5px 8px;
  margin: 0 15px 25px 15px;
}
div#content p.paging-controls span.inner {
  display: block;
  overflow: hidden;
  width: 100%;
}
div#content p.paging-controls span.inner span.previous {
  font-weight: bold;
  float: left;
  width: 20%;
}
div#content p.paging-controls span.inner span.current {
  text-align: center;
  float: left;
  width: 60%;
}
div#content p.paging-controls span.inner span.next {
  font-weight: bold;
  text-align: right;
  float: left;
  width: 20%;
}

div#content div#comments {
  border: 1px solid #d3dadd;
  margin: 7px;
  padding: 10px 10px 0 10px;
}
div#comments h3 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  color: #0083d7;
  margin: 0 0 17px 0;
}
div#comments ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
div#comments ul li {
  font-size: 0.9em;
  margin: 0 0 2em 0;
  padding: 0;
}
div#comments ul li p.comment {
  margin: 0 0 1em 0;
}
div#comments ul li p.author {
  text-align: right;
  margin: 0;
}
div#comments ul li p.author em {
  font-style: normal;
}

div#content div#add-comment {
  border: 1px solid #d3dadd;
  margin: 7px;
  padding: 10px 10px 15px 10px;
}
div#add-comment h3 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  color: #0083d7;
  margin: 0 0 17px 0;
}
div#add-comment form#add-comment-form {
  margin: 0;
}
form#add-comment-form input#name-field {
  width: 150px;
}
form#add-comment-form input#email-field {
}
form#add-comment-form textarea#comment-field {
  font-family: courier;
  width: 470px;
  height: 150px;
}

div#content div#bookmark-options {
  border: 1px solid #d3dadd;
  margin: 7px;
  padding: 10px 10px 22px 10px;
}
div#content div#bookmark-options h3 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  color: #0083d7;
  margin: 0 0 30px 0;
}
div#bookmark-options ul {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
div#bookmark-options ul li {
  float: left;
  background-repeat: no-repeat;
  background-position: center left;
  margin: 0 35px 0 0;
  padding: 0 0 0 23px;
}
div#bookmark-options ul li.delicious {
  background-image: url(/img/icon-delicious.png);
}
div#bookmark-options ul li.digg {
  background-image: url(/img/icon-digg.png);
}
div#bookmark-options ul li.reddit {
  background-image: url(/img/icon-reddit.png);
}
div#bookmark-options ul li.facebook {
  background-image: url(/img/icon-facebook.png);
}
div#bookmark-options ul li.stumbleupon {
  background-image: url(/img/icon-stumbleupon.png);
}
div#bookmark-options ul li a {
  color: #4e4a49;
}

div#article-options {
  overflow: hidden;
  height: 100%;
  margin: 7px 15px 7px 15px;
}
div#article-options p.mail-to-colleague {
  text-transform: uppercase;
  float: left;
  margin: 0;
}
div#article-options p.home {
  text-transform: uppercase;
  float: right;
  margin: 0;
}


/*
 * Navigation Icons
 *
 * Note that we add 6 pixels to the actual width of the <ul> to centre the ICONS on page rather
 * than their shadows.
 */

div#site-frame div#navigation-icons {
  border-bottom: 2px solid #d3dadd;
  padding: 10px 8px 0 8px;
}
div#navigation-icons ul {
  overflow: hidden;
  list-style: none;
  margin: 0 auto 0 auto;
  padding: 0;
  width: 637px;
}
div#navigation-icons ul li {
  float: left;
  margin: 0 15px 0 0;
  padding: 0;
  width: 76px;
}
div#navigation-icons ul li span {
  font-size: 0.9em;
  color: #0083d7;
  text-align: center;
  display: block;
  padding-left: 8px;
}
div#navigation-icons ul li.last {
  margin-right: 0;
}
div#navigation-icons ul li a {
  background: url(/img/footer-icon-shadow.png) left bottom no-repeat;
  display: block;
  padding: 0 0 28px 6px;
}


/*
 * Bottom Banners
 */

div#site-frame div#bottom-banners {
  border-bottom: 2px solid #d3dadd;
  padding: 5px;
}
div#site-frame div#bottom-banners div.inner {
  overflow: auto;
  width: 100%;
}
div#bottom-banners img {
  display: block;
}
div#bottom-banners div#bottom-banner-big {
  float: left;
  margin-right: 4px;
}
div#bottom-banners div#bottom-banner-small {
  float: left;
}


/*
 * Footer (contains links, logo and copyright notice)
 */

div#site-frame div#footer {
  padding: 5px 8px 8px 8px;
}

div#footer ul.links {
  overflow: hidden;
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  width: 100%;
}
div#footer ul.links li {
  font-weight: bold;
  text-transform: uppercase;
  float: left;
  margin: 0 18px 0 0;
  padding: 0;
}
div#footer ul.links li a {
  color: #716f6e;
}

div#footer div.bottom {
  overflow: hidden;
  width: 100%;
}
div#footer div.bottom p.logo {
  cursor: pointer;
  float: left;
  margin: 0;
  padding-left: 12px;
}
div#footer div.bottom p.logo img {
  display: block;
}
div#footer div.bottom p.copyright-and-strapline {
  font-size: 0.9em;
  text-align: right;
  float: right;
  margin: 27px 10px 0 0;
}

.noshow{
  position: absolute;
  left: -9999px;
}