@import url("screen-content.css");


/**
 * Common elements
 */

body
{
  font-family:Arial, "MS Trebuchet", sans-serif;
}

ul ul {
  margin-bottom: 0;
}

input,textarea
{
  background:#FFF url(../images/bg-textfield.gif) no-repeat scroll left top;
  border:1px solid #AFA9A9;
  width:146px;
  padding:2px 3px 3px;
}

input.submit
{
  background:transparent url(../images/bg-submit.png) no-repeat scroll left top;
  border:medium none;
  color:#D21416;
  font-size:13px;
  font-weight:700;
  height:23px;
  text-transform:uppercase;
  width:85px;
  cursor:pointer;
  padding:0 0 3px;
}

.no-text {
  font-size: 12px;
  text-indent: -999em;
  margin-top:10px;
}

.image-wrap {
  background: #E7E9EB;
  width: 197px;
  margin: 0 30px 0 20px;
}
.image-wrap .caption {
  font-size: 10px;
  padding: 5px 5px 5px 10px;
  margin: 0;
}


/**
 * Layout
 */

#masthead
{
  background:#fff url(../images/bg-masthead.jpg) top left no-repeat;
  height:165px;
  margin-bottom: 15px;
}

#masthead #logo
{
  margin-top:20px;
}

#loginPanel
{
  font-size:11px;
  margin-top:20px;
}

#loginPanel div
{
  display:inline-block;
}

#loginPanel label,#loginPanel a
{
  color:#000;
  display:block;
  margin:.5em 0;
}

#loginPanel input
{
  margin-right:5px;
}

#loginPanel input.submit
{
  margin-right:0;
  width:85px;
}

#loginPanel a#forgotten
{
  float:left;
}

#loginPanel a#register
{
  color:#d01415;
  float:right;
  margin-right:5px;
  font-weight: bold;
}

#basket
{
  display:block;
  float:left;
  margin-top:44px;
  margin-right:18px;
}

#footer {
  background: url(../images/bg-footer.jpg) top center no-repeat;
  clear: both;
  height: 75px;
  overflow: hidden;
  padding-top: 5px;
  position: relative;
}
#footer a {
  color: #000;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer ul {
  margin: 0 0 0 15px;
  padding: 0 0 5px 0;
}
#footer ul li {
  list-style: none;
  border-right: 1px solid red;
  float: left;
  margin: 0;
  padding: 0 10px;
}
#footer ul li.last {
  border-right: none;
}
#footer ul li a {
  line-height: 0.75em;
  font-size: 12px;
}
#footer p {
  font-size: 12px;
  position: absolute;
  right: 21px;
  text-align: center;
  top: 44px;
  width: 360px;
  margin: 0;
}

#content a {
  color:#293087;
}

a:hover {
  text-decoration: none;
}

.greenarrow {
  margin: 0px 5px;
}

#content ul {

} 

#content li {
  list-style-image: url(../images/green-arrow.gif);
}


/**
 * Navigation bar
 */

#navbar {
  background: url(../images/bg-navbar.jpg) top repeat-x;
  height:40px;
}

#navbar ul {
  background: url(../images/bg-navbar-left.png);
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  border-right: 1px solid white;
}

#navbar ul li {
  height: 40px;
  float: left;
  margin: 0 1px 0 0;
}
#navbar-case { margin-right: 0; }
#navbar ul li a {
  display: block;
  width: 100%;
  height: 100%;
}
#navbar ul li a span {
  display: block;
  text-indent: -99em;
}

#navbar-home    { width:  62px; }
#navbar-news    { width:  57px; }
#navbar-about   { width:  83px; }
#navbar-contact { width:  95px; }
#navbar-buy     { width: 175px; }
#navbar-case    { width: 137px; }

#navbar ul li a:hover { background-image: url(../images/bg-navbar-left.png); }
#navbar-home a:hover    { background-position:    0   -40px; }
#navbar-news a:hover    { background-position:  -63px -40px; }
#navbar-about a:hover   { background-position: -121px -40px; }
#navbar-contact a:hover { background-position: -205px -40px; }
#navbar-buy a:hover     { background-position: -301px -40px; }
#navbar-case a:hover    { background-position: -477px -40px; }

#navbar .search {
  background:url(../images/bg-navbar-r.jpg) top right no-repeat;
  float:right;
  height:40px;
}
#navbar .search form {
  display:inline;
}
#navbar .search p {
  display:inline;
  line-height:40px;
  padding:0 10px;
}


/**
 * Home page: welcome
 */

#welcome {
  position: relative;
  background: url(../images/bg-welcome.png);
  height: 170px;
  margin-bottom: 10px;
}
#welcome .content {
  padding-top: 13px;
  margin:  0 20px;
  width: 400px;
}
#welcome p {
  margin-bottom: 5px;
}
#welcome h2, #contact-phone {
  position: absolute;
  left: -999em;
}
#contact-email {
  position: absolute;
  display: block;
  top: 0; left: 679px;
  width: 281px;
  height: 170px;
  text-indent: -999em;
}


/**
 * Home page: know-about section
 */

#know-about {
  margin-bottom: 20px;
}
#know-about-options {
  padding-left: 11px;
  margin: 0;
  position: relative; bottom: -1px;
  height: 36px;
}
#know-about-options li {
  background-image: url(../images/bg-know-about-options.png);
  height: 36px;
  float: left;
  margin: 0 12px 0 0;
  list-style: none;
  text-indent: -999em;
}
li#option-consumer { margin-right: 0; }
#option-employment { width: 127px; }
#option-accidents  { width: 174px; background-position: -138px 0; }
#option-family     { width:  88px; background-position: -325px 0; }
#option-property   { width: 103px; background-position: -426px 0; }
#option-motoring   { width: 107px; background-position: -543px 0; }
#option-rights     { width: 151px; background-position: -663px 0; }
#option-consumer   { width: 116px; background-position: -827px 0; }

#option-employment.active { background-position:    0   -36px; }
#option-accidents.active  { background-position: -138px -36px; }
#option-family.active     { background-position: -325px -36px; }
#option-property.active   { background-position: -426px -36px; }
#option-motoring.active   { background-position: -543px -36px; }
#option-rights.active     { background-position: -663px -36px; }
#option-consumer.active   { background-position: -827px -36px; }

#know-about-sections {
  clear: both;
  background: url(../images/bg-know-about-content.png);
  padding: 0;
  margin: 0;
  width: 960px;
  height: 157px;
}

#know-about-sections .section {
  width: 960px;
  height: 157px;
  background-repeat: no-repeat;
  background-image: url(../images/knowabout-sprite.jpg);
}

#know-about-employment { background-position: right    0;   }
#know-about-accidents  { background-position: right -942px; }
#know-about-family     { background-position: right -314px; }
#know-about-property   { background-position: right -471px; }
#know-about-rights     { background-position: right -628px; }
#know-about-consumer   { background-position: right -785px; }

#know-about h2 {
  margin-bottom: 15px;
}

#know-about .section p {
  width: 440px;
  float: left;
  padding: 20px 0 0 20px;
}
#know-about .section ul {
  float: right;
  width: 480px;
  padding: 20px 0 0 20px; 
  margin-bottom: 0;
}
#know-about .section li {
  list-style: none;
  list-style-image: none;
  line-height: 1.3em;
  border-left: 3px solid #33449c;
  margin: 0 0 5px 0;
  padding-left: 5px;
}
#know-about .section a {
  color: black;
}
#know-about .section li.last a {
  color: #c00;
}


/**
 * Home page: latest news
 */

.news-item {
  clear: both;
  margin-bottom: 20px;
}
h3.news-heading {
  font-size: 12px;
  color: black;
  text-transform: none;
  font-weight: normal;
  margin-bottom: 5px;
}
h3.news-heading .date {
  font-weight: bold;
}
.news-item p {
  margin-bottom:0;
}
.news-item img {
  float: left;
  border: 4px solid #33449c;
}
#latest-news .heading-content {
  float: right;
  width: 370px;
}

#more-news {
  float:right;
}

#more-news a {
  color: #c00;
}

#news-list .heading-content {
  float:left;
  margin-left: 20px;
}


/**
 * Most popular docs
 */

#popular-docs {
  background: url(../images/bg-popular-docs.png) no-repeat;
  padding: 4px 0 10px 20px;
  height: 100%;
}
#popular-docs ul {
  float: left;
  width: 210px;
}
#popular-docs li {
  list-style: none;
  list-style-image: none; 
  border-left: 3px solid #33449c;
  margin: 0 0 5px 0;
  padding-left: 5px;
  line-height: 1.3em;
}
#popular-docs a {
  color: black;
}


/**
 * Most popular articles
 */

#popular-articles {
  background: url(../images/bg-popular-articles.png) no-repeat;
  padding: 4px 0 10px 20px;
  height: 100%; 
}
#popular-articles ul {
  float: left;
  width: 210px;
}
#popular-articles li {
  list-style: none;
  list-style-image: none; 
  border-left: 3px solid #89a603;
  margin: 0 0 5px 0;
  padding-left: 5px;
  line-height: 1.3em; 
}


/**
 * Latest news
 */

#latest-news h2 {
  background: url(../images/h-news-and-interviews.png) no-repeat;
  text-indent: -99em;
}

#latest-news h3 {
  text-indent: 0;
  color: black;
  font-weight: normal;
  margin-bottom: 0;
  text-transform: none;
}
#latest-news .date {
  font-weight: bold;
}


/**
 * Side blocks
 */

#rightcol .side-block {
  margin-bottom: 15px;
  width: 260px;
}


#call-to-buy {
  background-position: right top;
  position: relative;
}
#call-to-buy p {
  font-size: 18px;
  color: #ffffff;
  left: 10px;
  position: absolute;
  margin-bottom: 0;
}
#call-to-buy .line {
  height: 16px;
  margin-bottom: 5px;
  display: block;
}

.split-in-1 {
  height: 69px;
  background-image: url(/images/call-to-action-1liner.jpg);
}
.split-in-1 p {
  top: 29px;
}

.split-in-2 {
  height: 85px;
  background-image: url(/images/call-to-action.jpg);
}
.split-in-2 p {
  top: 32px;
}

.split-in-3 {
  height: 109px;
  background-image: url(/images/call-to-action-large.jpg);
}
.split-in-3 p {
  top: 33px;
}

.split-in-4 {
  height: 109px;
  background-image: url(/images/call-to-action-large.jpg);
}
.split-in-4 p {
  top: 23px;
}


#audioplayer {
  position: relative;
  background: url(/images/bg-listen-factsheet.png) top right no-repeat;
  height: 91px;
}

#player {
  position: absolute;
  left: 20px;
  top: 50px;
  font-size: 11px;
}

#pdfdownload {
  background: url(/images/bg-download-factsheet.png) top right no-repeat;
  height: 140px;
  position: relative;
}

#pdfdownload .text-wrap {
  position: absolute;
  width: 190px;
  top: 40px;
  left: 20px;
}

#pdfdownload .link-wrap {
  position: absolute;
  top: 90px;
  left: 120px;
}

#startclaim {
  display: block;
  height: 98px;
  background: url(/images/bg-start-claim.png) top right;
  text-indent: -9999em;
}

#relateddocs-prewrap {
  background: url(/images/bg-related-docs-repeat.png) center repeat-y;
  width: 100%;
}
#relateddocs-wrap {
  background: url(/images/bg-related-docs-top.png) top no-repeat;
  padding-top: 60px;
}
#relateddocs {
  background: url(/images/bg-related-docs-bottom.png) bottom no-repeat;
  text-align: left;
}
#relateddocs h2 {
  position: absolute;
  left: -9999em;
}
#relateddocs ul {
  padding-bottom: 5px;
  margin: 0;
}
#relateddocs li {
  margin-left: 3em;
}
#relateddocs a {
  color: black;
}

#newscategories-wrap {
  background: url(/images/bg-news-categories-top.png) top no-repeat;
  padding-top: 50px;  
}

#popularsearches-prewrap {
  background: url(/images/bg-related-docs-repeat.png) center repeat-y;
  width: 100%;
}
#popularsearches-wrap {
  background: url(/images/bg-popular-searches-top.png) top no-repeat;
  padding-top: 50px;
}
#popularsearches {
  background: url(/images/bg-related-docs-bottom.png) bottom no-repeat;
  text-align: left;
}
#popularsearches h2 {
  position: absolute;
  left: -9999em;
}
#popularsearches ul {
  padding-bottom: 5px;
  margin-bottom: 0;
}
#popularsearches a {
  color: black;
}


/**
 * Search results
 */

#search-results {
  margin-bottom: 25px;
}

.search-result {
  overflow: hidden;
  margin-top: 30px;
}
.search-result h2 {
  font-weight: normal;
  background: url(/images/bullet-green-bar-3x17.gif) left no-repeat;
  padding-top: 0;
  padding-left: 10px;
  margin: 0 0 .5em 0;
}
.search-result h2 a {
  color: black;
}
.search-result p {
  margin: 0;
}
.search-result .summary {
  color: #333333;
  margin: 0;
}
.search-result .meta {
  margin-top: 0;
  font-size: 83.33%;
  color: green;
}

#leftcol {
  float: left;
  width: 670px;
  display: inline;
}

#rightcol {
 float: left;
 width: 260px;
 display: inline;
 margin-left: 30px;
}

.news-item {
  padding-bottom: 10px;
}

#news-image {
  float:right;
  margin: 0 0 10px 10px;
  padding: 4px;
  border: 1px solid #ccc;
}

.pagination {
  text-align: center;
  padding: .3em;
  margin-bottom: 20px;
  }
  .pagination a, .pagination span {
    padding: .2em .5em; }
  .pagination span.disabled {
    color: #AAA; }
  .pagination span.current {
    font-weight: bold;
    color: #cc0000; }
  .pagination a {
    border: 1px solid #ccc;
    color: #293087;
    text-decoration: none; }
    #content .pagination a:hover, .pagination a:focus {
      border-color: #293087;
      background: #293087;
      color: #fff; }
  .pagination .page_info {
    color: #aaa;
    padding-top: .8em; }
  .pagination .prev_page, .pagination .next_page {
    border-width: 2px; }
  .pagination .prev_page {
    margin-right: 1em; }
  .pagination .next_page {
    margin-left: 1em; }