/***********************************************************************   
   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: 900px;
  min-height: 100%;

  position: relative;
  margin: 0 auto;
  
  background: #FFF;
}



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


#header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  
  width: 100%;
  height: 215px;
  background: #FFF;
}

#blog #header {
  height: 171px;
  background:  #e9f3f9 url(../images/bg/blog-header.png) no-repeat 20px 69px;
}


/* Top page action links and search form */
#header .actions {   
  text-align: right;    
}

#header .actions img {
  position: relative;
  top: 3px;
  border: 0;
}


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

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

#header ul.actions li a {
  padding: 0 10px;
  

  font: bold 10px arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;  
  
  color: #417d61;
  border-left: 1px solid #8ab7a2;
}

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

#header ul.actions li a:hover {
  color: #000;
}

#blog #header ul.actions li a {
  padding: 0 2px;
}



/* Top page search form */
#header form {
  position: absolute;
  top: 110px;
  left: 325px;
  width: 550px;
  
  background: #6da78e url(../images/bg/search.jpg) repeat-x top left;
}

#header form div {

}

#header label {
  display: none;
}

#header input.toggler {
  margin: 6px 0 6px 30px;
  padding: 4px 0;
  
  width: 370px;
  
  text-align: center;
  font-size: 12px;
  
  color: #727272;
  border-width: 2px 0 0 2px;
  border-style: solid;
  border-color: #c0c1c3; 
}

#header input:focus.toggler {
  outline: 0;
}

#header input.imgButton {   
  top: 5px;
  left: 10px;
}


/* Site logo and tagline */
#header #logo {
  position: absolute;
  top: 75px;
  left: 25px;
  z-index: 5;
  
  width: 246px;
  height: 86px;
  background: url(../images/bg/logo-dvla.jpg) no-repeat top left;
}

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

#header #logo img {
  display: none;
}

#blog #header #logo {
  background: none;
}

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


/* Disclaimer */
#header #disclaimer {
  padding: 20px 0 15px 0;
  
  font: 18px arial, sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  
  color: #08592e;
  background: #c0dacf url(../images/bg/disclaimer.gif) no-repeat bottom left;
}

#blog #header #disclaimer {
  background: #c0dacf url(../images/bg/disclaimer-blog.gif) no-repeat bottom left;
}





/* Main menu */
#header #menu {
  position: absolute;
  top: 180px;
  left: 0;
  z-index: 3;
  
  min-height: 40px;
  width: 100%;  
  text-align: center;
  
  margin: 0;
  padding: 0;
  background: #88a18b url(../images/bg/menu.jpg) repeat-x bottom left;
}

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

#header #menu li a {
  /* inline-block hack for Firefox */
  display: table-cell;
  display: inline-block;  
  padding: 8px 18px 7px 18px;
 
  font: bold 12px arial, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;  
  text-decoration: none;
  
  color: #fff;
  border-left: 1px solid #004f2c;
}

#header #menu li.first a {
  border: 0;
}

#header #menu li.here a,
#header #menu li a:hover {
  background: url(../images/bg/menu_on.jpg) repeat-x top left;
}





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

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

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

#columnsTwo {  
  padding: 235px 0 0 140px;  
}

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

#blog #columnsThree {
  padding: 185px 140px 0 140px;
}

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

/* Main column */
#center {
  z-index: 2;
  width: 100%;  
}

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

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

/* Left column */
#left {
  width: 140px;          /* LC width */
  right: 140px;          /* LC width */
  margin-left: -100%;
  padding-top: 34px;
}

#home #left {
  padding-top: 19px;
}

#blog #left {
  padding-top: 0;
}

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


/***********************************************************************
   #sidenav
 ***********************************************************************/

#left ul {
  margin: 0;
  padding: 3px 0;
  list-style: none;
  
  line-height: 1em;
  font-size: 0.95em;
  
  background: url(../images/bg/dotted-sidenav.gif) repeat-x top left;
}

#left ul li {
  margin: 0;
  padding: 0;
  display: inline;
  font-weight: bold;
}

#left ul li.title {
  display: block;
  text-transform: uppercase;
  padding: 3px 0;  
}


#siteMap ul li.title {
  position: relative;
  left: -15px;
  font: bold 1.2em arial, sans-serif;
  list-style-type: none;
}

#left ul li a {
  display: block;
  padding: 3px 0 3px 10px;
  font-size: 0.9em; 
  color: #408569;
}

#left ul li a:hover {
  color: #083321;
  background: url(../images/bg/sidenav-on.gif) no-repeat 1px 50%;
}

#left ul.featured {
  margin: 15px 0;
  background: url(../images/bg/dotted-featured.gif) repeat-x top left;
}

#left ul.featured li.title {
  text-transform: none;
  color: #dd6704;
}

#left ul.featured li a {
  color: #f46f00;
}

#left ul.featured li a:hover {
  color: #ac5600;
  background: url(../images/bg/sidenav-f-on.gif) no-repeat 1px 50%;  
}

/* Submenus */
#left ul li.here {
  display: block;
  padding: 3px 0 0 0;  
}

#left ul li.here ul {
  padding: 0 0 3px 0;
  background: none;
}

#left ul li.here ul li a { 
  font-size: 0.95em;
  font-weight: normal;
  padding: 3px 5px 3px 10px;
 
}

#left ul li.here ul li a:hover {
  background: none;
}

#left ul li.here ul li.here {
  padding: 0;
}

#left ul li.here ul li.here a{
  font-weight: bold;
}


/* AtoZ index button */
#AtoZ {
  position: absolute;
  top: 0;
  left: -130px;
  z-index: 1;
  font-size: 0.8em;
  text-transform: uppercase;
  text-decoration: underline;
}


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

#footer {  
  clear: both;
  padding: 0 0 20px 0;
  margin: 0 20px;
  
  font-size: 0.8em;
  
  color: #777;
  border-top: 2px solid #85ac97;
}

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

#footer ul li {
  margin: 0;
  padding: 0 20px 0 0;
  display: inline;
}

#footer ul li.last {
  padding: 0;
}

#footer p {
  line-height: 1.2em;
}

#footer a {
  text-decoration: underline;
}




/***********************************************************************
   Ad/Sponsor Display
 ***********************************************************************/

/* Ad blocks */ 
.ads {
  font-size: 0.85em;
  line-height: 1.3em;
}

.ads p {
  padding: 0 0 20px 0;
}

.ads a {  
  font-weight: bold;
}


/* Ad Rows */
.adRows {  
  margin: 15px 0;
  font-size: 0.8em;
  line-height: 1.2em;  
  border-top: 1px solid #111;
}

.adRows h2 {
  padding: 10px 0;
  color: #0e5534;
}

.adRows .row {
  float: left;
  width: 100%;  
  padding: 15px 0;
  border-bottom: 1px solid #111;
}

.adRows .row ul {
  padding: 0;
  margin: 0;
}

.adRows .row form {
  padding-top: 8px;
  vertical-align: middle;
}

.adRows .row input {
  width: 100px;
}

.adRows .row input.button {
  width: auto;
}


/* Blue special report signup */
#right .adsBlue { 
  padding: 0;
  margin-bottom: 30px;
  font-size: 0.9em;
  color: #fff;
  background-color: #2381c1;
}

#right .adsBlue h1 {
  padding: 0 8px 4px 8px ;
  font: bold 1em arial, sans-serif;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 2px solid #fff;
}

#right .adsBlue img {
  padding: 5px 8px 0 8px;
}

#right .adsBlue p,
#right .adsBlue form {
  padding: 4px 8px; 
}

#right .adsBlue form input {
  margin: 0 0 10px 0;
  width: 113px;
  font-size: 0.9em;
  text-align: center;
  color: #666;
}

#right .adsBlue form input.imgButton {    
  width: 42px;
  margin: 0;
  padding: 0;
}






/***********************************************************************
   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: 5px; 
  
  /* 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: 5px;
  width: 5px;
}

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

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

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

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





/***********************************************************************
   Generic display classes
 ***********************************************************************/

/* Breadcrumbs */
.breadcrumbs {
  font-size: 0.85em;
  padding: 0 0 15px 0;
  border-bottom: 1px solid #055a30;  
}

.breadcrumbs strong {
  margin-right: 5px;
  text-transform: uppercase;
}

.breadcrumbs a {
  text-decoration: underline;
}

/* Light gray rounded highlight with green border */
.highlight {
  margin-bottom: 10px;
  padding: 7px 0 0 0;
  background: url(../images/bg/highlight-t1.png) repeat-y top left;
}

.highlight .b {
  height: 8px;
  background: url(../images/bg/highlight-b.png) repeat-y top left;
}

.highlight p {
  padding: 10px 20px;
}

.highlight h2 {
  padding-left: 20px;
}

.block {
  display: block;
}

.none {
  display: none;
}

.no-top {
  margin-top: 0;
  padding-top: 0;
}

/* Bordered box with blue heading */
.blue-box h2 {
  padding: 10px 20px 7px 20px;

  font: bold 1.1em arials, sans-serif;
  text-transform: uppercase;
  color: #fff;
  background: url(../images/bg/h2-blue-box.png) no-repeat bottom left;  
}

.blue-box p {
  padding: 15px 20px;
  border-left: 1px solid #C0DAD1;;
  border-right: 1px solid #C0DAD1;;
}




/* Floats */
.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

img.floatLeft {
  padding: 0 10px 10px 0;
}

img.floatRight {
  padding: 0 0 10px 10px;
}

.clear {
  clear: both;
}



/* Widths */
.widthHalf {
  width: 47.8%;
}

.widthThird {
  width: 35%;
}


.small {
  font-size: 0.85em;
  line-height: 1.3em;
}

.vBottomPad {
  padding: 0 0 15px 0;
}

.iconRSS {
  padding-right: 20px;
  text-decoration: underline;
  background: url(../images/bg/icon-rss.jpg) no-repeat 100% 2px;
}

.alignMiddle {
  vertical-align: middle;
}

.borderTop {
  padding-top: 20px;
  margin-top: 10px;
  border-top: 1px solid #c0dacf;
}


/* Search result list */
ol.bigLinks {
  margin-left: 15px;
  padding-left: 15px;
  font: bold 1.5em arial;
  color: #3f8465;
}

ol.bigLinks li {
  padding-bottom: 20px;
}

ol.bigLinks li a {
  display: block;
  font: 0.7em arial;
}

ol.bigLinks li a strong {
  display: block;
}

ol.bigLinks li a span {
  color: #4a4b4e;
}

ol.bigLinks li a:hover span {
  color: #000;
}

/* Paging and jump links */
.paging,
.jump {
  font-size: 0.85em;
}

.paging a,
.paging b {  
  padding: 0 5px 0 7px;
  border-left: 1px solid #C0DAD1;
}

.jump a {
  padding-left: 15px;
}

.jump b,
.jump strong {
  text-transform: uppercase;
}




/* Messages */
#messages {
  display: none;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  
  padding: 7px 0 17px 0;
  
  background: url(../images/bg/messages.png) repeat-x bottom left;
  cursor: pointer;
}

#messages p {
  width: 770px;
  margin: 0 auto;  
}

#messages p span {
  text-decoration: underline;
  color: #2381C1;
}

#messages p img {
  vertical-align: middle;
  margin-left: 10px;
}

#messages p.error {
  padding: 10px 65px;
  background: url(../images/icons/error.gif) no-repeat 25px 50%;
}


/* A-Z Index */
.azIndex .heading,
.azIndex .disabled {
  position: relative;
  left: -35px;
  padding: 5px 0;
  
  font: bold 1.4em arial, sans-serif;  
  list-style-type: none;
}

.azIndex .disabled {
  color: #b3d3c5;
}

.azIndex .heading {
  color: #3f8465;
}


/* Blog */
.post-details {
  color: #aaa;  
  padding-bottom: 30px;
}

.post-details a {
  color: #aaa;
  text-decoration: underline;
}

.post-details a:hover {
  color: #666;
}

/* Blog comments */
.comment {
  float: left;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid #C0DAD1;
}

.dark {
  background-color: #EFF3F2;  
}

.comment .post-details {
  padding-bottom: 0;
}

.comment .post-details strong {
  padding-right: 5px;
  font: bold 1.5em arial;
  color: #3f8465; 
}


/* Width classes */
.width10 {
  width: 10%;
}

.width15 {
  width: 15%;
}

.width20 {
  width: 20%;
}

.width25 {
  width: 25%;
}

.width33 {
  width: 33%;
}

.width40 {
  width: 20%;
}

.width50 {
  width: 50%;
}

.width66 {
  width: 66%;
}

.width75 {
  width: 75%;
}

.width100 {
  width: 100%;
}





/***********************************************************************
   Home page design elements
 ***********************************************************************/

.gradientBox,
.gradientBoxHalf {
  margin-bottom: 25px;
  font-size: 0.9em;
  background: url(../images/bg/gradient-green-t.png) repeat-y top left;
  /* Forces the box to be drawn in the right spot */
  border-top: 1px solid #fff;
}

.gradientBoxHalf {
  margin-bottom: 15px;
  padding-top: 23px;
  background: url(../images/bg/gradient-green-half-t.png) repeat-y top left;
}

.gradientBoxHalf div {
  width: 250px;
}

.gradientBox .b {
  height: 11px;
  background: url(../images/bg/gradient-green-b.png) repeat-y top left;
}

.gradientBoxHalf .b {
  height: 11px;
  background: url(../images/bg/gradient-green-half-b.png) repeat-y top left;
}

.gradientBoxHalf h1 {
  padding: 0 0 7px 0;
  margin: 0 10px 0 105px;  
  font: 1.35em arial, sans-serif;
  border-bottom: 1px dashed #438b6d;
}

.gradientBoxHalf p {
  padding: 7px 0 5px 0;
  margin: 0 10px 0 105px;
  font-size: 0.95em;
  line-height: 1.4em;
  color: #646464;
}

.gradientBoxHalf strong,
.gradientBoxHalf h1 a {
  color: #438b6d;
}

.gradientBoxHalf h1 a:hover {
  color: #225d44;
}

.gradientBoxHalf a.thumb {
  float: left;
  width: 80px;
  padding: 2px 0 0 15px;
}

.gradientBoxHalf a img {
  border: 0;
}

/* Main page special report */
.specialReport {
  margin-bottom: 25px;
}

.specialReport h1 {
  padding: 15px 15px 0 0;
  font-size: 1.2em;
  text-transform: uppercase;
  color: #2380c3;
}

.specialReport h2 {
  padding: 5px 15px 5px 0;
  font: 1.65em arial, sans-serif;
  line-height: 1.4em;  
  color: #3a8765;
}

.specialReport h2 sup {
  font-size: 0.5em;
}

.specialReport p {
  padding: 0 15px 5px 0;;
  font-size: 1.2em;
  line-height: 1.5em;
  color: #646464;
}

.specialReport form {
  padding: 10px 0 0 0;
}

.specialReport form input {
  margin: 0 0 10px 0;
  width: 180px;
  font-size: 0.9em;
  text-align: center;
  color: #666;
}  

.specialReport form input.imgButton {  
  left: -6px;
  margin: 0 0 10px 0;
  width: 154px;   
}

.specialReport img {
  margin: 20px 0 0 20px;
}


/* Main site welcome message */
#strapline {
  text-align: center;
}

#strapline h1 {
  padding: 30px 25px 15px 25px;
  font: 2.5em arial, sans-serif;
  line-height: 1.3em;
}

#strapline p {
  padding: 0 35px 15px 35px;
  font: 1.2em arial, sans-serif;
  line-height: 1.7em;
  color: #646464;
}