/***********************************************************************   
   Filename: layout.css
   Purpose:  Position and style main layout elements of template
   Authors:  Pat Heard
 ***********************************************************************/



/***********************************************************************
   #container: holds all site content and sets white background
 ***********************************************************************/
 
#container {
  width: 826px;
  min-height: 100%;

  position: relative;
  margin: 0 auto;
  
  background: #FFF;
  border-left: 1px solid #6486A9;
  border-right: 1px solid #6486A9;
}



/***********************************************************************
   #header: holds top actions, logo, main menu, breadcrumbs and date
 ***********************************************************************/

#header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  
  width: 100%;
  height: 190px;
  background: #FFF url(../img/bg/header.jpg) no-repeat top left;
}


/* Top page action links and search form */
#header .actions {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 4;
  
  width: 420px;
  height: 86px;
  
  text-align: right;
}


/* Top page action links */
#header .actions ul {
  margin: 0 22px 0 0;
  padding: 0;
  list-style: none;
}

#header .actions ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

#header .actions ul li a {
  margin: 0 10px;
  
  font-size: 11px;
  text-decoration: none;  
  
  color: #FFF;
  border-bottom: 1px solid #73A8E0;
}

#header .actions ul li a:hover {
  color: #FFF;
  background-color: #3683D3;
  border-color: #FFF;
}


#header .actions ul li a.iconRSS {
  border: 0;
}

#header .actions ul li a.iconRSS span {
  border-width: 1px;
  border-style: solid;
  border-color: #3683D3 #3683D3 #73A8E0 #3683D3;

}

#header .actions ul li a:hover.iconRSS span {
  border-bottom-color: #FFF;
}



/* Top page search form */
#header .actions form {
  margin: 0;
  padding: 0;
}

#header .actions label {
  display: none;
}

#header .actions input.field {
  padding: 4px 0;
  margin: 10px 0 0 0;
  
  width: 220px;
  height: 24px;
  text-indent: 5px;
  
  font-size: 14px;
  
  background: url(../img/bg/search_field.gif) no-repeat top right;
  border: 0;
}

#header .actions input:focus.field {
  outline: 0;
}

#header .actions input.button {
  position: relative;
  top: 10px;
  
  width: 70px;
  height: 24px;

  padding: 0 0 1px 0;
  margin: 0 30px 0 12px;
  
  vertical-align: top;  
  font: 14px arial, sans-serif;
  
  background: url(../img/bg/search_button.gif) no-repeat top left;
  border: 0;
}

#header .actions .searchType {
  text-align: left;
  padding-left: 84px;
  color: #FFF;
}

#header .actions .searchType label {
  float: none;
  display: inline;  
  padding: 0 19px 0 0;
}

#header .actions .searchType input,
#header .actions .searchType input:focus {  
  margin: 0;
  padding: 4px 0;
  vertical-align: middle;
  background: none;
  border: 0;
}



/* Site logo and tagline */
#header #logo {
  position: absolute;
  top: 11px;
  left: 25px;
  z-index: 5;
  
  width: 450px;
  height: 92px;
}

#header #logo h1 {
  margin: 0;
  padding: 0;
  font-size: 0px;
  text-indent: -1000px;
}

#header #logo h2 {
  margin: 50px 0 0 132px;
  padding: 0;
  font: 14px arial, sans-serif;
  color: #0C509B;
}


/* Back home logo link */
#header .home,
#header :hover.home {
  position: absolute;
  top: 11px;
  left: 25px;
  z-index: 6;
  
  width: 450px;
  height: 92px;
  
  background: transparent;
  cursor: pointer;
}


/* Breadcrumbs */
#header #breadcrumbs {
  position: absolute;
  bottom: 11px;
  left: 30px;
  z-index: 5;
}

#header #breadcrumbs .arrow {
  padding: 0 4px;
  font-family: courier, monospace;
  color: #C1C1C1;
}


/* Date */
#header #date {
  position: absolute;
  bottom: 11px;
  right: 30px;
  z-index: 5;
}



/* Main menu */
#header #menu {
  position: absolute;
  top: 92px;
  left: 10px;
  z-index: 3;
  
  width: 100%;  
  
  margin: 0;
  padding: 0;
}

#header #menu li {
  margin: 0;
  padding: 0;  
  display: inline;
}

#header #menu li a {
  float: left;
  width: 4.7em;
  margin: 25px 0 0 20px;
  
  font: bold 14px arial, sans-serif;
  text-align: center;
  text-decoration: none;
}


/* Main menu links can expand/contract, so need to create 4 rounded corners individually */
#header #menu li a .t,
#header #menu li a .b {
  height: 5px;
}

#header #menu li a .l,
#header #menu li a .r {
  height: 5px;
  width: 5px;
  background: none;
}

#header #menu li.here a .t .l,
#header #menu li a:hover .t .l {
  background: url(../img/bg/menu_tl.png) no-repeat top left;
}

#header #menu li.here a .t .r,
#header #menu li a:hover .t .r {
  background: url(../img/bg/menu_tr.png) no-repeat top left;
}

#header #menu li.here a .b .l,
#header #menu li a:hover .b .l {
  background: url(../img/bg/menu_bl.png) no-repeat top left;
}

#header #menu li.here a .b .r,
#header #menu li a:hover .b .r {
  background: url(../img/bg/menu_br.png) no-repeat top left;
}

a.iconRSS {
  padding: 2px 25px 2px 2px;    
  margin-left: 15px;
  background: url(../img/icons/rss-header.gif) no-repeat center right;
  background-position: center right;
  background-repeat: no-repeat;
}



/***********************************************************************
   #columns: definitions for main content area and 1, 2 or 3 column 
             layout
 ***********************************************************************/

#columnsOne,
#columnsTwo,
#columnsThree {
  margin: 0 30px;
}

#columnsOne {
  padding: 200px 0 0 0;
}

#columnsTwo {  
  padding: 200px 0 0 160px;  
}

#columnsThree {
  /* Top padding = header height, Left padding = LC width, Right padding = RC width */
  padding: 200px 180px 0 160px;
}

.column {
  position: relative;
  float: left;
  margin-bottom: 30px;
}

/* Main column */
#center {
  width: 100%;  
}

#columnsThree #center .padding {
  padding: 0 25px;
}

#columnsTwo #center .padding {
  padding: 0 0 0 25px;
}

/* Left column */
#left {
  width: 160px;          /* LC width */
  right: 160px;          /* LC width */
  margin-left: -100%;
}

/* Right column */
#right {
  width: 180px;          /* RC width */
  margin-right: -180px;  /* RC width */
}




/***********************************************************************
   #footer: holds bottom actions, link blocks, text and copyright
 ***********************************************************************/

#footer {  
  clear: both;
  padding: 0 0 20px 0;
  color: #FFF;
  background: #1260b1 url(../img/bg/footer.png) no-repeat bottom left;
  
  /* Forces IE to properly calculate the start point of the footer */
  border-top: 1px solid #FFF;
}

#footer .shadow {
  width: 100%;
  height: 8px;
  background: #1260b1 url(../img/bg/footer-shadow.png) repeat-x top left;
 
}

#footer p {
  clear: both;
  margin: 0 30px;
}

#footer a {
  text-decoration: none;
  color: #FFF;
  border-bottom: 1px solid #6E9BCA;
}

#footer a:hover {
  background-color: #054688;
  border-bottom: 1px solid #FFF;
}


/* Large, hoverable link blocks */
#footer .linkBlocks {
  float: left;
  width: 540px;
  padding-bottom: 90px;
}

#footer .linkBlock,
#footer .linkBlockHover {
  float: left;
  width: 140px;
  margin: 10px 0 30px 30px;
}

#footer .linkBlock span.bottom,
#footer .linkBlockHover span.bottom {
  display: block;
  width: 100%;
  height: 10px;
  font-size: 0px;
}

#footer :hover.linkBlock,
#footer .linkBlockHover {
  background: url(../img/bg/footer_linkBlock_top.gif) no-repeat top left;
}

#footer :hover.linkBlock span.bottom,
#footer .linkBlockHover span.bottom {
  background: url(../img/bg/footer_linkBlock_bottom.gif) no-repeat bottom left;  
}


#footer .linkBlock ul,
#footer .linkBlockHover ul {
  margin: 10px 10px 0 10px;
  padding: 0;
  list-style: none;
}

#footer .linkBlock ul li,
#footer .linkBlockHover ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

#footer .linkBlock ul li a,
#footer .linkBlockHover ul li a{
  display: block;
  padding: 1px 0;
  
  text-decoration: none;
  
  color: #FFF;  
  border-bottom: 0;
}

#footer .linkBlock ul li.title a,
#footer .linkBlockHover ul li.title a {
  font: bold 1.2em arial, sans-serif;
}

#footer .linkBlock ul li a span,
#footer .linkBlockHover ul li a span {
  border-bottom: 1px solid #6E9BCA;
}

#footer .linkBlock ul li a:hover,
#footer .linkBlockHover ul li a:hover {
  background: none;
  border-bottom: 0;
}

#footer .linkBlock ul li a:hover span,
#footer .linkBlockHover ul li a:hover span {
  background-color: #054688;
  border-bottom: 1px solid #FFF;
}


/* Copyright */
#footer .copyright {
  float: right;
  width: 280px;
  padding: 10px 0 90px 0;
}

#footer .copyright p {
  margin: 0 30px 0 0;
  padding: 5px 0;
}

#footer .copyright .line {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid #6f9bcb;
}

#footer .copyright .marcus {
  padding-left: 54px;
  background: url(../img/bg/marcus-footer.jpg) no-repeat top left;
}


/***********************************************************************
   Action Icon links
 ***********************************************************************/

ul.actions {
  margin: 0;
  padding: 20px 5px;
  list-style: none;
}

ul.actions li {
  margin: 0;
  padding: 0;
  display: inline;  
}

ul.actions li a {
  position: relative;
  z-index: 1;
  
  float: left;  
  padding: 5px 0 5px 22px;
  background-position: 0 6px;
  background-repeat: no-repeat;  
}

ul.actions li a:hover {
  background-color: #fff;
}

a.email {
  width: 120px;
  background-image: url(../img/icons/email.gif);
}

a:hover.email {
  background-image: url(../img/icons/email-on.gif);
}

a.pdf {
  width: 102px;
  background-image: url(../img/icons/pdf.gif);
}

a:hover.pdf {
  background-image: url(../img/icons/pdf-on.gif);
}

a.print {
  width: 75px;
  background-image: url(../img/icons/print.gif);
}

a:hover.print {
  background-image: url(../img/icons/print-on.gif);
}

a.bookmark {
  width: 120px;
  background-image: url(../img/icons/bookmark.gif);
}

a:hover.bookmark {
  background-image: url(../img/icons/bookmark-on.gif);
}

a.share {
  width: 102px;
  background-image: url(../img/icons/share.gif);
}

a:hover.share {
  text-decoration: none;
  background-image: url(../img/icons/share-on.gif);
}

a.subscribe {
  width: 75px;
  background-image: url(../img/icons/subscribe.gif);
}

a:hover.subscribe {
  text-decoration: none;
  background-image: url(../img/icons/subscribe-on.gif);
}

/* Actions popup */
ul.actions li a span.popup {
  position: absolute;
  z-index: 2;
  display: none;
 
  width: 150px;
  top: -5px;
  left: -15px;
}

ul.actions li a:hover span.popup {
  display: block;
  padding: 0 0 14px 0;
  background: url(../img/bg/popup-bottom.png) no-repeat bottom left;
}

ul.actions li a span.popup span {
  display: block;  
  padding: 4px 12px 4px 38px;
  cursor: pointer;  
}

ul.actions li a span.popup span.top {
  padding: 12px 0 0 0;    
  background: url(../img/bg/popup-top.png) no-repeat top left;
}


ul.actions li a span.popup span.top span {
  text-decoration: none;
}

ul.actions li a span.popup span.top span:hover {
  text-decoration: underline;
}

span.digg {
  background: url(../img/icons/digg.gif) no-repeat 16px 50%;
}

span.delicious {
  background: url(../img/icons/delicious.gif) no-repeat 16px 50%;
}

span.rss {
  background: url(../img/icons/rss.gif) no-repeat 16px 50%;
}

span.google {
  background: url(../img/icons/google.gif) no-repeat 16px 50%;
}

span.msn {
  background: url(../img/icons/msn.gif) no-repeat 16px 50%;
}

span.yahoo {
  background: url(../img/icons/yahoo.gif) no-repeat 16px 50%;
}

/***********************************************************************
   #preloader: used to cache CSS rollover image to avoid flicker
 ***********************************************************************/

#preloader {
  position: absolute;
  top: -3000px;
  left: -3000px;
}



/***********************************************************************
   .roundedBlock: Rounded, solid colour block
 ***********************************************************************/

.roundedBlock {
  color: #FFF;
  margin-bottom: 30px;
  background-color: #023A73;  
}

.roundedBlock a {
  color: #C0DCF6;
}

.roundedBlock a:hover {
  color: #FFF;
  background-color: #011D3A;
}

.roundedBlock h1 {
  padding-top: 0;
  color: #FFF;  
}

.roundedBlock ul {
  margin: 0;
  padding: 0 10px;
  list-style: none;
}

.roundedBlock ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

.roundedBlock ul li a {
  display: block;
  padding: 5px 0;
  border-top: 1px solid #185FA7;
  
  text-decoration: none;
}

.roundedBlock ul li a:hover,
.roundedBlock ul li.here a {
  font-weight: bold;
  color: #FFF;
  background: none;
}



/***********************************************************************
   .bigImageLinks: Large, hoverable image links
 ***********************************************************************/

ul.bigImageLinks {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.bigImageLinks li {
  margin: 0;
  padding: 0;
  display: inline;
}

ul.bigImageLinks li a {
  float: left;
  width: 100%;
  margin: 10px 0;
  
  text-decoration: none;
  cursor: pointer;
  
  color: #111;
}

ul.bigImageLinks li a img {
  float: left;
  padding-left: 10px;
  border: 0;
}

ul.bigImageLinks li a span.text {
  float: right;
  width: 190px;
  padding-right: 10px;
}

#columnsOne ul.bigImageLinks li a span.text {
  width: 582px;
}

#columnsTwo ul.bigImageLinks li a span.text {
  width: 395px;
}

ul.bigImageLinks li a span.title {
  display: block;
  font: bold 1.2em arial, sans-serif;
}

ul.bigImageLinks li a span.link {  
  text-decoration: underline;
  color: #1260B2;
}

ul.bigImageLinks li a:hover {
  background-color: #CCD8E3;
}





/***********************************************************************
   Rounded corners: when the 4 corners must be specified in a top/bottom
                    and right/left configuration
 ***********************************************************************/

.t,
.b {
  clear: both;
  display: block;
  width: 100%;
  height: 8px; 
  
  /* Required by IE since it fills all containers with text nodes and 
     then forces the container to expand to fit */
  font-size: 0px;
}

.l {
  float: left;
}

.r {
  float: right;
}

/* Start generic definitions - 8px radius corner.  Overwrite as required 
   more specific styles */
.l,
.r {
  height: 8px;
  width: 8px;
}

.t .l {
  background: url(../img/bg/corner_tl.png) no-repeat top left;
}

.t .r {
  background: url(../img/bg/corner_tr.png) no-repeat top left;
}

.b .l {
  background: url(../img/bg/corner_bl.png) no-repeat top left;
}

.b .r {
  background: url(../img/bg/corner_br.png) no-repeat top left;
}


.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.clear {
  clear: both;
}