/*changed with multiple ***'s at the start of the comment indicate stuff that was changed to accomodate google ads*/

/*for ie5 to center align to whole page, it doesn't understand margin: auto*/
#wholepage{
  text-align: center;
  /****/
  margin: 0 3px 0 3px;
}

#top_middle{  
  text-align: center;
  margin-bottom: 1px;
  overflow: hidden;
  height: 95px;
}

#mainmenu a {
  color: #A0B692;
  font-weight: bold;
  text-decoration: none;
  float: left;
}
#mainmenu a:visited { 
  color: #C2D8B4;
  font-weight: bold;
  text-decoration: none;
  float: left;
}

#mainmenu a:hover { 
  color: white;
  text-decoration: underline;}

#mainmenu {	
    height: 22px;
    font-size: 11px;
  background: #506844;
  padding: 2px 0px 2px 5px;
  /****/
  margin: 0 -3px 0 -3px;
}

#mainmenu_wrapper, #page_wrapper, #footer_wrapper{ 
  /***width: 770px;*/
  width: 750px;
  margin: auto;
  text-align: left;
}
                  
.mainmenu_item, #mainmenu_item_right { 
  float: left;
  text-align: center;
  /*overflow: hidden;*/
  padding: 3px 25px 3px 25px;
  height: 16px;
  border-left: 1px solid #7B9C67; 
  vertical-align: middle;
}
#mainmenu_item_right{	    
  border-right: 1px solid #7B9C67; 
}

#mainmenu_active a, #mainmenu_active a:visited { 
  color: white; 
}

#page_wrapper{ 
  margin-top: 8px; border: 1px solid white;
  overflow: visible;
  padding-bottom: 15px
}

/*if we use position absolute rather than float left then IE won't move the content down below the left column if
the right div gets too wide (eg. it has a wide table)*/
/*but with absolutely positioning I can't get the footer to clear the left column if the page content it short*/
#left_menu_column {		
  float: left;
  /*position: absolute;*/
  /*this means that advertisements should be 160px wide as there is a pixel on either side for the border around the advert*/
  width: 162px;
}

#page_content { 
  padding-top: 15px;
  /*here instead of on the footer wrapper because footer text should stay close to top of footer*/
  margin-bottom: 10px;
  
}
#left_menu {		
  background: #A0B692;
  padding: 10px 0 10px 10px;
}
#left_menu a { 
  text-decoration: none; 
}
#left_menu a:hover { 
  text-decoration: underline; 
}

#left_menu_active a { 
  color: black; 
}

#advertise { 	
  margin: 8px 0 8px 0;
  text-align: center;
}
/*put the border around the image rather than the div so that we don't get extra pixels at the top (IE) or bottom (IE + Mozilla)*/ 
#advertise img{ 
  border: 1px solid #506844; 
}


#page_content, #footer_content {
  /****/
  padding-right: 10px;

  /* 3 pixel jog fix */
  height: 1%;

  /*hack for IE5 to display the content at the correct width*/
  width: 590px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 700px;
}

#footer_content{
  width: 750px;
  margin-left: 0;
  padding-left: 0;
  text-align: center;
}

/*only IE sees these two rules*/
/*this fixes the problem in IE6 but not IE5 so use additional \ hack to make sure IE5 displays the bad layout rather than this 
which is further stuffed up*/
/*includes IE only word-wrap property*/
* html div#page_content{
  word-wrap: break-word;
  w\idth: 560px;
  overflow: visible;
  /* mac ie5 hack, mac ie5 doesn't see this \*/
  o\verflow: hidden;
  /* end mac ie5 hack */
}

/*this only helps if it is a table that is overflowing the page_content div, may not work for text of whatever*/
* html .ride_table{
  p\osition: relative;
}

/*set both margins and padding as IE and Firefox have different defaults*/
#messages ul{
  margin: 0;
  padding: 7px 0 7px 30px;
}

#page_location {	
  text-transform: uppercase;
  margin-bottom: 10px;
  /*font-size: 90%;*/
  font-size: 0.9em;
  position: absolute;
  top: 127px;
}
#page_title { 
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 15px;
  padding-top: 5px;
}

#page_popups{
  position: absolute;
  top: 127px;
  margin-left: 395px;
}

#footer {	
  border-top: 1px solid #A0B692;
  padding-top: 3px;
  margin-top: 10px;
  padding-bottom: 6px;
  clear: both;
  /*font-size: 90%;*/
  font-size: 0.7em;
}

/*ie5 needs the font size applied to table cells also*/
html, td{ 	
  font-size: 14px;
  font-family: verdana, sans-serif;
}

body{		
  padding: 0px;
  margin: 0px;
  background: #FFFFFF;
}

.radio{  
smargin-bottom: -1px; 
}

/*h1 { font-size: 16px }*/
h1 { 
  font-size: 1.45em 
}
/*h2 { font-size: 14px }*/
h2 { 
  font-size: 1.27em 
}
/*h3 { font-size: 12px; display: inline }*/
h3 { 
  font-size: 1.09em; 
  display: inline 
}

form { 
  margin: 0px 
}
input, select, textarea, button { 
  font-family: verdana, sans-serif;
  /*font-size: 10px;*/
  font-size: 0.9em;
  margin: 1px 2px 1px 0;
}

button { 
  padding-left: 8px;
  padding-right: 8px;
}


input.no_margin { 
  margin: 1px 0 1px 0 
}

a { 
  color: #506844;
  font-weight: bold;
}
a:visited { 
  color: #304622;
  font-weight: bold;
}

a:hover { 
  color: black;
  text-decoration: underline;
}
a img { 
  border: 0 
}

div.hr {	
  border-top: 1px solid #506844; 
  border-bottom : 1px solid #506844;
  margin-top: 8px;
  margin-bottom: 8px;
}

hr { 
  color: #506844; 
  background: #506844; 
  border: 0; 
  margin: 0px;
}



.label, .label_input, .label_input_small, .label_small, .label_small_input, .label_larger, .left_menu_label { 
  float: left;
  text-align: right;
}


.left_menu_label { 	
  padding-top: 4px;
  clear: left; /*for ie5.0*/
  width: 58px;
}

.left_menu_labelled_content { 
  margin-left: 60px;
}

.left_menu_content { 	
  margin-left: 13px;
}

.label, .label_input, .label_input_small, .label_small, .label_small_input, .label_larger { 
  margin-top: 0px;
  /* mac ie5 hack \*/
  margin-top: 0px;
  /* end mac ie5 hack */

}

.label, .label_input, .label_input_small {
  width: 150px;
}

.label_small, .label_small_input {		
  width: 80px; 
}

.label_larger{ 
  width: 200px 
}

.labelled_larger_content, .labelled_larger_content_input { 
  margin-left: 210px;
}


.label_input, .label_small_input, .labelled_larger_content_input  { 
  padding-top: 2px; 
}
.label_input_small { 
  padding-top: 2px; 
}

/*if I add this here then it stuffs up the layout of labelled divs at the bottom of the page
so I'll just at fix straight to a div and then add that div wherever it is needed*/
/*.labelled_content, .labelled_small_content, .labelled_larger_content_input {*/
                  /* 3 pixel jog fix */
/*                height: 1%;
}*/
.jog_fix{ 
  height: 1% 
}

.labelled_content { 
  margin-left: 155px;
}
.labelled_small_content { 
  margin-left: 85px;
}

.action_button{ 
  width: 85px 
}

.clear {
  clear: both 
}

.highlight_text { 
  font-weight: bold 
}
.alert_text { 
  color: red 
}
.note_text { 
  font-style: italic 
}

.slogan { 
  font-family: arial, sans-serif;
  letter-spacing: 1px;
  /*font-size: 12px;*/
  font-size: 1.09em;
  font-weight: bold
}

.large_paragraph, .highlight_paragraph { 
  font-size: 1.20em;
}

.highlight_paragraph { 
  color: #506844;
  font-weight: bold;
}

.search_button { 
  background: #506844;
  color: white;
}

.additional_form { 
  float: left; width: 67px;
}
/*note that putting width on the buttons restricts the text that can be on the buttons*/
.additional_form input{ 
  width: 65px; 
}

.left_column_small { 	
  float: left;
  width: 100px 
}


.left_column { 	
  float: left;
  width: 275px;
}
.right_column {	
  margin-left: 277px;
  width: 275px;
}

.ride_table { 
  width: 560px; 
}

.ride_table, .column_ride_table { 
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin: 2px auto 0px auto;
}

td.checkbox{ 
  width: 20px; 
  text-align: center;  
}

.ride_table input, .column_ride_table input { 
  margin: 0; 
}

.ride_table thead, .column_ride_table thead { 
  background: #ddd;
  font-weight: bold;
}

.ride_table thead td, .column_ride_table thead td { 
  text-align: center;
 }

.ride_table td, .column_ride_table td { 	
  padding: 2px 3px 3px 3px; 
  border-right: 1px solid black; 
  vertical-align: top 
}

.ride_table tr.row_even, .column_ride_table tr.row_even { 
  background: #eee 
}

.ride_table tr.row_highlight, .column_ride_table tr.row_highlight { 
  background: #fffbd1
}

div.links_list a { 
  /*display: block; 
  margin-top: 5px;
  font-size: 115%;*/
  font-size: 1.15em;
}
/*div.links_list br { 
  display: none; 
}*/

div.links_list h1 {
  padding-top: 10px; 
  margin: 0;
  margin-bottom: 10px; 
}

/*div.links_list .hr { 
  margin-top: 15px;  
}*/

div.green_facts p { 
  margin-bottom: 8px; 
}
div.green_facts li { 
  margin-bottom: 8px; 
}

div.green_facts .hr { 
  margin-top: 15px;  
}

div.faqs_advice h1 { 
  /*font-size: 115%;*/
  font-size: 1.15em;
  margin-bottom: 4px;
  margin-top: 10px;
}
div.page_links a { 
  display: block;
  margin-bottom: 6px;
}
div.page_links br { 
  display: none 
}
div.faqs_advice p { 
  margin-top: 0; 
  margin-bottom: 4px;
}

p { 
  margin-top: 0; 
  margin-bottom: 4px;
}

div.top_of_page{ 
  float: right 
}
div.center{ 
  text-align: center 
}
td.percent_bar{ 
  text-align: right; 
}
td.percent_bar img{ 
  padding-top: 2px; 
}

div.total { 
  margin: 5px 8px 5px 5px; 
  text-align: right; 
}

/*all styles for email download section on index page*/
/*divs around all images so that we can apply overflow hidden for IE*/
div#email_download { 
  margin-bottom: 8px; 
}
div#email_download div#img_right{ 
  float: right; 
  margin-right: -5px; 
}
/*hack for IE so the their isn't a gap between the two parts of the image*/
* html div#email_download div#img_right{ 
  /* mac ie5 hack, mac ie5 doesn't see this \*/
  margin-left: -3px;
  /* end mac ie5 hack */
 }
div#email_download div#content{ 
  background: #A0B692; 
  height: 143px; 
}
div#email_download div#img_middle{ 
  float: right; 
  height: 143px; 
  width: 75px; 
  overflow: hidden; 
}
div#email_download div#img_left{ 
  float: right; 
  overflow: hidden; 
  width: 29px; 
  height: 143px
}
div#email_download div#img_left img { 
  border-right: 11px solid white; 
}
div#email_download div#content_form { 
  text-align: right; 
  padding-top: 10px;
}
div#email_download h1 { 
  margin: 0; 
  padding: 0 
}
div#email_download form div#form_wrapper{ 
  margin-top: 10px;
}
div#email_download form div.line{ 
  margin-bottom: 3px 
}
div#email_download form div#last_line{ 
  margin-bottom: 6px 
}
/*end of email download styles*/

div.quick_search_label { 
  float: left; 
  text-align: left; 
  width: 105px;
  padding: 3px 12px 3px 0; 
  border-right: 2px solid #506844; 
}

/****/
div#right_menu{
  float: right;
  width: 120px;
  margin-bottom: 10px;
}

thead td.settings_label, thead td.settings_default, thead td.settings_value{
  background: #ccc;
  padding: 4px;
  font-weight: bold;
}


td.settings_comment{
  background: #eee;
  padding: 2px;
}
td.settings_label{
  font-weight: bold;
}
td.settings_label, td.settings_default, td.settings_value{
  vertical-align: top;
}
td.settings_label, td.settings_default{
  padding-top: 3px;
}
span.settings_para{
  color: #999;
}

div.highlight_box{
  font-size: 1.3em;
  background: #C2D8B4;
  padding: 20px 20px 20px 30px;
  margin: 0 0 10px 0;
}
div.highlight_box h2{
  font-size: 1.1em;
  font-weight: bold;
  margin: 0 0 3px 0;
  padding: 0;
}
div.highlight_box h2 span.note_text{
  font-style: normal;
  font-weight: normal;
  font-size: 0.8em;
}
div.highlight_box a{
  font-weight: normal;
  display: block;
  margin-bottom: 3px;
}
div.highlight_box a:visited{
  font-weight: normal;
}

div.left_box{
  float: left;
  
  width: 253px;
  /*hack for IE5.5 to display the content at the correct width*/
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px;
}  
div.right_box{
  margin-left: 260px;  
  
  width: 290px;
  /*hack for IE5.5 to display the content at the correct width*/
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 240px;
}

/*Page specific styles*/
body#index p a, body#promote ul a{
  font-weight: normal;
}
body#promote ul#help{
  margin: 0;
  padding: 0;
  margin: 10px 0 0 20px;
}
body#promote ul#help li{
  padding-bottom: 3px;
}