/* LC: width 200 px, padding 10px (l/r)
   CC: width liquid, padding 10px (l/r)
   RC: width 130px, padding 10px (l/r)


   DIV ID="header"
   
   DIV ID "container" holds three columns:
    DIV ID "left" class "column"
    DIV ID "centre" class "column"
    DIV ID "right" class "column"

  DIV ID="footer-wrapper" (equal-height column hack)
    DIV ID="footer"
*/
body {
  min-width: 680px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
}

#container {
  padding-left: 200px;      /* LC fullwidth */
  padding-right: 240px;     /* RC fullwidth + CC padding */
}

#container .column {
  position: relative;
  float: left;
}

#center {
  padding: 10px 20px;       /* CC padding */
  width: 100%;
}

#left {
  width: 180px;             /* LC width */
  padding: 0px;          /* LC padding */
  right: 240px;             /* LC fullwidth + CC padding */
  margin-left: -100%;
  Xbackground-color: #f87f20;
  background-color: #808080;
}

#right {
  width: 180px;             /* RC width */
  padding: 0 10px;          /* RC padding */
  margin-right: -100%;
}

#footer {
  clear: both;
}

/*** IE Fix ***/
* html #left {
  left: 200px;              /* RC fullwidth */
}

/*** Equal-height Columns ***/

#container {
  overflow: hidden;
}

#container .column {
  padding-bottom: 1001em;     /* X + padding-bottom */
  margin-bottom: -1000em;     /* X */
}

/*** Footer Fix ***/

* html body {
  overflow: hidden;
}

* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #FFF;         /*** Same as body background ***/
}

/*** Just for Looks ***/

body {
  margin: 0;
  padding: 0;
  background: #FFF;
}

#footer {
  background: #000;
}

#header {
    background: #808080;
    background-image: url(images/banner_bg_grey.png);
    background-repeat: repeat-x;
    background-position: bottom;
    padding-bottom: 2px;
}

#container .column {
  padding-top: 1em;
  text-align: justify;
}

#corner {
  position: absolute;
  left: 180px;
  top: 142px;
left: -20px;
top: -1px;
}


/**************************************************************************************
 * END OF LAYOUT
 **************************************************************************************/


/* masthead rules */
img#logo {
    margin: 5px;
    xfloat: left;
}

img#banner {
    margin-top: 0px;
    margin-left: 64px;
    height: 128px;
}

/* menu rules */
ul#navlist
{
    width: 158px;
    padding: 0px;
    padding-left: 4px;
    border: 1px solid #000;
    border-top: 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0px;
    margin-left: 4px;
    xfont: bold 14px Arial,Helvetica,Verdana,sans-serif;
    font: normal 12px Arial,Helvetica,Verdana,sans-serif;
    background: #000;
}

ul#navlist li
{
    list-style: none;
    margin: 0px;
    border: 0px;
    border-top: 1px solid #000;
}

ul#navlist li a
{
    display: block;
    width: 122px;
    \width: 158px; /* hacks to work around IE6 *sigh* */
    w\idth: 122px;
    padding: 4px 8px 4px 8px;
    border: 0px;
    xborder-left: 20px solid #57919b;
    border-left: 20px solid #707070;
    background: #fff;
    text-decoration: none;
    text-align: right;
    xfont-size: 14px;
    font-size: 11px;
    line-height: 14px;
    font-weight: normal;
}

div#navcontainer li a:visited { /* position in doc is important or following hover breaks */ 
    color: #000; 
}

ul#navlist li a:link 
{ 
    color: #000; 
}

ul#navlist li a:hover
{
    xborder-color: #f87f20;
    border-color: #808080;
    xcolor: #f87f20;
    color: #fff;
    background: #000;

}


/* RHC rules */
div.adbox {
  xborder: 3px solid #f87f20;
  border: 1px solid #000;
  background-color: #808080;
  color: #fff;
  X-moz-border-radius: 5px;
  X-webkit-border-radius: 5px;
}

div.adbox h3 {
  font-weight: bold;
  font-size: 1.1em;
  Xcolor: #ff6600; /* slightly more strident orange than normal */
  Xcolor: #ffaa00; /* slightly more strident orange than normal */
  color: #fff;
  text-align: center;
  margin: 4px;
  xborder-bottom: 4px solid #ff6600;
  border-bottom: 2px solid #000;
}

div.adbox div {
  font-size: 12px;
  text-align: justify;
  padding: 4px;
  font-weight: normal;
}

div.adbox a {
  font-size: 12px !important;
  font-family: Arial,Helvetica,Verdana,sans-serif;
  font-weight: bold;
  Xcolor: #f87f20;
  Xcolor: #ffaa00; /* slightly more strident orange than normal */
  color: #000;
  text-decoration: none;
}

div.adbox a:hover {
  color: #fff;
}


/* content rules */
#container {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: #707070;
}

#container div {
  padding-bottom: 0px;
  margin-bottom: 20px;
  text-align: justify;
}

#Xcontainer ul {
    padding-left: 200px;
    xbackground-color: #ff0000;
}

#Xcontainer ul li {
    margin-bottom: 10px;
}


#container h1 {
    font-weight: bold;
    font-size: 1.2em;
    color: #000;
    margin-top: 2em;
}

h2 {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 2em;
    xcolor: #f87f20;
    color: #a0a0a0;
    clear: left;
}

#container a {
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-weight: bold;
    xcolor: #f87f20;
    color: #a0a0a0;
    font-size: 1.2em;
}

#container strong {
  xcolor: #f87f20;
  color: #707070;
}

.img-right {
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

.img-left {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}

.img-none {
    clear: both;
}

/* 'new test map' page */

#newtestmap img {
   float: left;
   margin-right: 24px;
}

#newtestmap li {
    margin-bottom: 6px;
}

/* 'selector' page */
div#blurb {
}

div#question {
  xcolor: #f87f20;
  color: #909090;
  font-family: Arial,Helvetica,Verdana,sans-serif;
  font-weight: bold;
  font-size: 1.0em;
}

ul#responses {
    list-style: none;
}

ul#responses li strong {
  xcolor: #f87f20;
  color: #707070;
  font-family: Arial,Helvetica,Verdana,sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  cursor: pointer;
}

ul#responses li strong:hover {
  background-color: #f87f20;
  color: #fff;
  font-family: Arial,Helvetica,Verdana,sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  cursor: pointer;
}

/* 'Bike Hire' page */
#bikehire table {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

#bikehire th {
    background-color: #000;
    color: #fff;
}

/* 'Fees' page */
table {
    table-layout: fixed;
    width: 600px;
    border-collapse: collapse;
}

col#col1 {
    width: 60%;
}

col#col2 {
    width: 20%;
    xbackground-color: #f87f20;
    background-color: #808080;
    color: #000;
}

th {
    background-color: #000;
    color: #fff;
    font-weight: bold;
}

td {
    border: 1px solid black;
}

td.rhs {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    color: #000;
}

/* checkout page */
div#checkout {
    background-color: #fcc397;
    padding: 20px;
    width: 30%;
    border: 1px solid black;
}

span#error {
  display: inline;
}
 
span#ok {
  display: none;
}
 
div#google {
visibility: visible;
  margin-left: 25%;
  margin-right: auto;
}

/* testimonials page */
div#testimonials {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

div.testimonial-odd {
  Xborder: 1px dashed black;
  border: 1px solid black;
  X-moz-border-radius: 10px;
  X-webkit-border-radius: 10px;
  xbackground-color: #f8e2d1;
  background-color: #a0a0a0;
  padding: 20px;
  overflow: auto; /* surround images that are bigger than body text */
}

div.testimonial-even {
  Xborder: 1px dashed black;
  border: 1px solid black;
  X-moz-border-radius: 10px;
  X-webkit-border-radius: 10px;
  xbackground-color: #f8b683;
  background-color: #c0c0c0;
  padding: 20px;
  overflow: auto; /* surround images that are bigger than body text */
}

div.testimonial-odd div.testimonial-text {
  border-left: 2px solid black;
  padding-left: 8px;
}

div.testimonial-even div.testimonial-text {
  border-right: 2px solid black;
  padding-right: 8px;
  text-align: right;
}

div.testimonial-quote {
  font-style: italic;
}

div.testimonial-source {
  font-weight: bold;
  margin-bottom: 20px;
}

div.testimonial-odd img {
  position: relative;
  float: right;
  margin: 10px;
  border: 1px solid #666;
}

div.testimonial-even img {
  position: relative;
  float: left;
  margin: 10px;
  border: 1px solid #666;
}

/* Bios page */
div#bios {
  padding: 0px;
  margin: 0px;
  border: 0px;
}



div.bios-odd {
  Xborder: 1px dashed black;
  border: 1px solid black;
  X-moz-border-radius: 10px;
  X-webkit-border-radius: 10px;
  Xbackground-color: #f8e2d1;
  background-color: #a0a0a0;
  padding: 20px;
  overflow: auto; /* surround images that are bigger than body text */
}
div.bios-odd h2 {
    font-weight: bold;
    font-size: 1.2em;
    color: #f87f20; 
    clear: left;
    margin-top: 0px;
}

div.bios-even {
  border: 1px dashed black;
  border: 1px solid black;
  X-moz-border-radius: 10px;
  X-webkit-border-radius: 10px;
  Xbackground-color: #f8b683;
  background-color: #c0c0c0;
  padding: 20px;
  overflow: auto; /* surround images that are bigger than body text */
}

div.bios-even h2 {
    font-weight: bold;
    font-size: 1.2em;
    color: #ffffff; /* #f87f20; */
    clear: left;
    margin-top: 0px;
}

/* styling for 'newsflashes' on the home page */
div.newsflash {
    padding: 20px;
    xbackground-color: #f87f20;
    background-color: #808080;
    color: #fff;
    font-size: 1.2em;
    text-align: center !important; /* override #container */
    Xborder: 2px dashed white;
    border: 2px solid black;
    X-moz-border-radius: 10px;
    X-webkit-border-radius: 10px;
}

div.newsflash h2 {
    color: #fff;
    font-size: 1.4em;
    margin-top: 4px;;
}

#newsflashes a {
  font-family: Arial,Helvetica,Verdana,sans-serif;
  font-weight: bold;
  Xcolor: #f87f20 !important;
  xcolor: #ffaa00; /* slightly more strident orange than normal */
  color: #57919b;
  text-decoration: none;
}

#newsflashes a:hover {
  color: #fff;
}

/* ident styling */
.ident {
  font-weight: bold;
  xcolor: #f87f20;
  color: #a0a0a0;
}

div.adbox .ident {
  font-weight: bold;
  color: #ffffff;
}


/* footer styling */
#footer {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-weight: bold;
  color: #fff;
  font-size: 10px;
}

#footer strong {
  xcolor: #f87f20;
  color: #808080;
}

#footer a {
  color: #ffffff;
  text-decoration: none;
}

#plug {
  position: absolute;
  right: 0px;
  cursor: help;
}

#plugpopup {
  visibility: hidden;
  position: absolute;
  bottom: 12px;
  right: 0px;
  border: 1px solid black;
  width: 194px;
  background-color: #ede4c7;
  color: #222652;
  text-align: center;
}

#plugpopup img {
  border:0;
}

#plugpopup img.sticker {
  width: 73px;
  height: 25px;
}