@CHARSET "ISO-8859-1";

/* Page layout  - same as in cooreea_carpools.css */

  html {
    background-image: url(../img/nav_images/main/main_bg.png);
    background-repeat: repeat-y;
    background-position: top center;
  }

  body {
    font-family: verdana, helvetica,clean,sans-serif;
    color: #333333;
  }

  /* I am only touching Yui between here... */
    /* Remove padding between left and main  by adjusting */
    .yui-t1 .yui-b {width:12.30769em;*width:12.00030em;}
    .yui-t1 #yui-main .yui-b{margin-left:12.30769em;*margin-left:12.00030em;background: #fff; border-right: #ff7315 13px solid;min-height:650px}
    div#bd {background-color: #ff7315}
    #hd {height: 110px; border-bottom: #ff7315 8px solid;}
    #ft {height: 24px; padding-top: 5px; background: #ff7315; color: #fff; text-align: center;}
  /* ... and  here */

  #orangeStripe {
    background-image: url(../img/nav_images/main/orange_stripe.gif);
    background-repeat: repeat-x;
    background-position: 0 110px;
    -background-position: 0 110px;
    }

  /* Header is #hd above - it has a h1 and div.h2 in it stacked */

  #hd h1 {height: 80px; width: 186px; background: transparent url(../img/nav_images/main/cooreea_logo.png) left 34px no-repeat; margin: 0; padding: 0}

  /* Head menus */
  #headMenu {width: 470px; float: right; margin: 5px 0 0 0;}
  #headMenu ul {float: right; width: 470px;}
  #headMenu li {float: right; padding: 2px 6px}
  #headMenu li a {color: #cc0000; text-decoration: none; padding: 2px 6px}
  #headMenu li a:hover, #headMenu li.hmOn {padding: 2px 6px; color: #fff; background-color: #cc0000; text-decoration: none;}

  #language {width: 350px; float: right; font-size: 90%; padding: 7px 12px 0 0;}
  #language div {float: right;}
  #language div.tag {line-height: 11px; margin-right: 4px}
  #language div.de {width: 20px; height: 13px; background: url(../img/nav_images/main/languages.png) right top no-repeat}
  #language div.en {margin-right: 4px; width: 20px; height: 13px; background: url(../img/nav_images/main/languages.png) right -13px no-repeat}
  #language div.langOn {  
    filter:alpha(opacity=60);
    -moz-opacity: 0.60;
    opacity: 0.60;
  }

/* Area menu */
  .hd_2 {height: 30px;}
  .hd_2 #tag {line-height: 12px; margin-left: 22px; letter-spacing: 2px; width: 300px; float: left}

  /* Country menu */
  #countryMenu {float: right; width: 175px; height: 30px; background: transparent url(../img/nav_images/main/countryMenu.png) no-repeat right top;}
  #countryMenu div.liner1 {height: 30px; margin-right: 13px; background: transparent url(../img/nav_images/main/countryMenu.png) no-repeat left top;}
  #countryMenu div.liner2 {height: 26px; margin-left: 10px; padding-top: 4px; background-color: #ff7315}
  #countryMenu div.countryList {}
  #countryMenu .selectList {height: 24px; margin: 0 0 0 3px} 
  #countryMenu .selectList li li {height: 24px; border: 1px solid #ddd;}
  #countryMenu a.selectHref {} /* To change the down arrow img */
  #countryMenu .current {height: 24px}
  #countryMenu .selectHref {width: 107px; padding: 5px 0 2px 4px; text-transform: capitalize}
  #countryMenu .menulist ul {top: 1.4em}
  #countryMenu .menulist a {padding: 5px 2px 2px 4px;}
  #countryMenu li {padding-left: 34px; background: #fff url(../img/nav_images/main/countryMenu.png) 1px top no-repeat}
  #countryMenu li.INT {background-position: 1px -31px}
  #countryMenu li.AT {background-position: 1px -55px}
  #countryMenu li.BE {background-position: 1px -79px}
  #countryMenu li.FI {background-position: 1px -103px}
  #countryMenu li.FR {background-position: 1px -127px}
  #countryMenu li.DE {background-position: 1px -151px}
  #countryMenu li.GR {background-position: 1px -175px}
  #countryMenu li.IE {background-position: 1px -199px}
  #countryMenu li.IT {background-position: 1px -223px}
  #countryMenu li.LU {background-position: 1px -247px}
  #countryMenu li.NL {background-position: 1px -271px}
  #countryMenu li.NZ {background-position: 1px -295px}
  #countryMenu li.PT {background-position: 1px -319px}
  #countryMenu li.SK {background-position: 1px -343px}
  #countryMenu li.SI {background-position: 1px -367px}
  #countryMenu li.ES {background-position: 1px -391px}
  /* Handy stuff */
  .clear { clear: both; height: 1px; overflow: hidden; }
  div.clear {font-size:1px; line-height:1px;margin:0px;padding:0px;height:1px;width:1px;clear:both;}
  .pad10 {padding: 10px}
  .pad20 {margin: 20px}
  .m10 {margin: 10px}

  .colRed {color: #cc0000}
  .colOrange {color: #ff6600}

  .mainNav {margin-top: 36px;}
  .orange {background-color: #ff7315; height: 10px; width: 100%}
  .fix100 {width: 100%}

/* Finish page layout */


div.displayBlock {color: #055872; margin: 40px 80px 0px 40px; font-size: 18px; line-height: 24px}
div.displayBlock img {float: left; margin-right: 10px}
div.displayBlock p {padding-top: 15px}

#BrowserWars {padding: 2px; text-align: right; color: #555; font-size: 10px}

.disabled {display: none;}

/* Home template */
.homeLogin label {color: #ff3300; font-size: 90%; line-height: 18px}
.homeLogin div.input, .carpool_login div.submit{margin: 7px 10px 0 15px}
.homeLogin input#UserUsername, .homeLogin input#UserPasswd {width: 95%}
.homeLogin div.submit input {margin: 5px 0 0 14px; float: left}

/* Standard template */

div.login {font-size: 160%;}
div.login div.input {margin: 0 0 20px 20px: width: 250px}
div.login div.input input {font-size: 1.1em; padding: 2px; margin-bottom: 13px; height: 30px; width: 300px}
div.login div.submit {text-align: right}
div.login label {display: block; width: 175px}

#LeftLogin,#LeftUser {
  border-right: solid 9px #ff7315;
  padding: 5px;
  font-size: 80%;
  background-image: url(../img/nav_images/main/menu_bg_dark.png);
  background-repeat: repeat-x;
  }

#LeftLogin input {
  font-size: 1.2em;
  width: 130px;
  height: 18px;
  }
#LeftLogin div.submit input {width: 50px; height: 24px; margin: 6px 0 6px 0;}

#LeftUser {height: 38px; width: 141px}

#LeftUser img {float: left; margin: 0 4px 0 0;}

#flashMessage.message {
  position: fixed;
  width: 260px;
  top: 8px;
  color: #ffffff;
  background-color: #FF3300;
  font-size: 100%;
  font-weight: bold;
  padding: 20px 30px 20px 30px;
  margin: 20px 0 0 220px;
  z-index: 1000;
}
#infoMessage.message {
  position: fixed;
  text-align: center;
  width: 260px;
  top: 8px;
  color: #ffffff;
  background-color: #AFB9CF;
  font-size: 100%;
  font-weight: bold;
  padding: 20px 30px 20px 30px;
  margin: 20px 0 0 290px;
  z-index: 1000;
}

img.help {
  margin: 0 0 3px 5px;
  vertical-align: middle;
}

/* Basic text */
h1 {font-size: 2em; color: #FF0000; margin: 0 0 8px 0;}

#yui-main h2 {height: 36px; font-size: 150%; line-height: 33px; color: #FF6600;}
#yui-main h2.consignment {padding: 0 0 0 50px; background: transparent url(../img/nav_images/main/h2_consignment.png) no-repeat center left;}
#yui-main h2.ride {padding: 0 0 0 50px; background: transparent url(../img/nav_images/main/h2_ride.png) no-repeat center left;}
#yui-main h2.journey {padding: 0 0 0 50px; color: #cc0000; background: transparent url(../img/nav_images/main/h2_truck.png) no-repeat center left;}
#yui-main h2.overview {padding: 0 0 0 50px; background: transparent url(../img/nav_images/main/h2_nocs.png) no-repeat center left;}

h3 {font-size: 1.5em; color: #548392; font-weight: bold; margin-left: 4px;}
#yui-main h3.j { background: transparent url(../img/nav_images/main/journey_mini.gif) no-repeat center left; padding: 1px 0 2px 16px; margin: 3px 3px 9px 3px;}
#yui-main h3.c { background: transparent url(../img/nav_images/main/consignment_mini.gif) no-repeat center left; padding: 1px 0 2px 16px; margin: 3px 3px 9px 3px;}

p {font-size: 1em;}
p.small, div.textSmall {font-size: 80%}
p.big {font-size: 120%}
p.text1 {margin: 10px 50px 10px 20px; line-height: 140%}

p.bigBlue {font-size: 110%; color: #006699; margin: 0 0 20px 0;}
span.TextCon {font-size: 110%; font-weight: bold; color: #ff7315}
span.TextJ {font-size: 110%; font-weight: bold; color: #cc0000}
span.TextO {font-size: 110%; font-weight: bold;}
span.TextC {font-size: 110%; font-weight: bold; color: #f8E012}
span.TextCoo {font-size: 110%; font-weight: bold; color: #ff7315}

.text1 p {margin: 3px 14px 13px 14px; font-size: 110%}
.text1 h2 {margin: 0 12px}
.text1 ul {margin: 10px 10px 10px 15px}
.text1 li {margin: 12px 0 0 0; padding: 0 0 0 30px; background: transparent url('../img/nav_images/pages/howitworks/li_default.png') no-repeat left top}
.text1 ul li.none {background: none}
.text1 ul li.read {background: transparent url('../img/nav_images/pages/howitworks/li_read.png') no-repeat left top}
.text1 ul li.movie {background: transparent url('../img/nav_images/pages/howitworks/li_movie.png') no-repeat left top}


/* Standard fades */

.fade1 {padding-bottom: 10px; background: #ffe129 url(../img/nav_images/gradients/gradient_yellow_vert.jpg) repeat-x top;}
.fade2 {padding-bottom: 10px; background: #ffe129 url(../img/nav_images/gradients/gradient_yellow_vert.jpg) repeat-x bottom;}
.fade3 {background: transparent url(../img/nav_images/payment/payment.png)}

/* Standard colors */

.textWhite {color: #fff}

/* Main Menu */

.menu {margin-top: 36px; background-color: #fff;}

.mainmenu {
  padding: 0 0 5px;
  border-right: 9px solid #ff7315;
  background-image: url(../img/nav_images/main/menu_bg.png);
  background-repeat: repeat-y;
}

.mainmenu a {color: #cc0000}

.mainmenu h2 {
  margin-left: 8px;
  padding: 7px 0 0 0;
  color: #548392;
  font-weight: normal;
  font-size: 135%;
  line-height: 120%;
}

.mainmenu.on {
  border-left: 9px solid #ff7315;
  border-right: none;
  border-top: 3px solid #ff7315;
  border-bottom: 3px solid #ff7315;
  background-color: #fff;
  background-image: none;
}

.mainmenu ul {
  margin: 5px 0 5px 5px;
  }

.mainmenu li {padding: 3px; line-height: 15px; font-size: 90%; margin-left: 8px}
.mainmenu li.on {font-weight: bold; border: none}

.mainmenu li.c {padding-left: 12px; margin-left: 10px; background: url(../img/nav_images/main/c.png) no-repeat 0 7px}
.mainmenu li.j {padding-left: 12px; margin-left: 10px; background: url(../img/nav_images/main/j.png) no-repeat 0 7px}

div.menu_divider {background: url(../img/nav_images/main/menu_fade_bar.png) no-repeat; padding: 0; margin: 0; height: 2px; border-right: 9px solid #ff7315;}

.glow_cube {background: url(../img/map/flash_cube.gif)}


/* Route Builder */

#routeBuilder {background: #fff; width: 220px; }

#routeBuilder div.RBTop { color: #fff; padding: 32px 6px 6px 12px; font-size: 11px; line-height: 12px; height: 29px;}
#routeBuilder div.RBTop.eng { background: url(../img/nav_images/route_builder/rb_tp_eng.png) no-repeat center top;}
#routeBuilder div.RBTop.eng.coneng { background: url(../img/nav_images/route_builder/rb_tp_con_eng.png) no-repeat top;}
#routeBuilder div.RBTop.eng.rideeng { background: url(../img/nav_images/route_builder/rb_tp_ride_eng.png) no-repeat top;}
#routeBuilder div.RBTop.eng.joureng { background: url(../img/nav_images/route_builder/rb_tp_jour_eng.png) no-repeat top;}
#routeBuilder div.RBTop.deu { background: url(../img/nav_images/route_builder/rb_tp_deu.png) no-repeat top;}
#routeBuilder div.RBTop.deu.condeu { background: url(../img/nav_images/route_builder/rb_tp_con_deu.png) no-repeat top;}
#routeBuilder div.RBTop.deu.ridedeu { background: url(../img/nav_images/route_builder/rb_tp_ride_deu.png) no-repeat top;}
#routeBuilder div.RBTop.deu.jourdeu { background: url(../img/nav_images/route_builder/rb_tp_jour_deu.png) no-repeat top;}

#routeBuilder div.RBBot {background: url(../img/nav_images/route_builder/rb_bt.png) no-repeat bottom; color: #fff; padding: 3px 12px 7px; font-size: 11px; line-height: 12px; text-align: right}

#routeBuilder div.notFound {margin: 0 10px 0 42px; font-size: 11px}

#routeBuilder div.focus {border-left: 1px solid #cc0000; border-right: 1px solid #cc0000; background: url(../img/nav_images/route_builder/rb_bg_orange.jpg) repeat-x top;}
#routeBuilder div.set {border-left: 1px solid #cc0000; border-right: 1px solid #cc0000; background: url(../img/nav_images/route_builder/rb_bg_grey.jpg) repeat-x top;}
#routeBuilder div.label {height: 10px; margin: 3px 7px 4px 42px; font-size: 10px; color: #cc0000}
#routeBuilder input {width: 160px; float: right; margin: 0 7px 0 0; font-size: 12px; padding: 2px}
#routeBuilder input.submit {font-size: 11px; margin: 5px 7px 12px; padding: 2px 6px; width: auto}

#routeBuilder div.rbA {padding: 10px 0 8px 0; background: transparent url(../img/nav_images/route_builder/rb_a.png) no-repeat 3px 26px;}
#routeBuilder div.rbB {padding: 10px 0 8px 0; background: transparent url(../img/nav_images/route_builder/rb_b.png) no-repeat 3px 0px;}
#routeBuilder div.rbV {padding: 10px 0 12px 0; background: transparent url(../img/nav_images/route_builder/rb_v.png) no-repeat 3px 0px;}

#routeBuilder div.addressBox {margin: 10px 0 0 46px;}
#routeBuilder div.addressBox div.address {width: 125px; float: left}

#routeBuilder div.addressBox div.editDelete {width: 40px; height: 40px; float: left}
#routeBuilder div.addressBox div.editDelete input {float: right; margin: 0px; padding: 0px 7px 4px 0px; width: auto; height: auto}

#routeBuilder div.address_list {height: 110px; margin: 0 4px 0 36px; background: #ffffff; overflow: auto;}
#routeBuilder div.address_list input.submit {margin: 0px; padding: 0px}

#routeBuilder div.addresses, #FromAddressDiv div.addresses, #ToAddressDiv div.addresses {margin: 5px; padding: 5px; }

#routeBuilder div.address_list div.addresses div.address {width: 80px; float: left}

#routeBuilder div.addresses, #FromAddressDiv div.addresses, #ToAddressDiv div.addresses {clear: left;}

#routeBuilder div.address_list input, #FromAddressDiv div.address_list input, #ToAddressDiv div.address_list input {
  font-size: 70%;
  margin: 0 0 6px 3px;
  }

.hint2 {text-align: center; font-size: 80%; padding: 0 0 3px }
.hint2 a, .hint2 a:hover {color: #fff}

#routeBuilderSlider {cursor: pointer; }

#FromAddressDiv span.message, #ToAddressDiv span.message {color: red;}

div.match_counter_wrap {background: url(../img/nav_images/route_builder/rb_bt_exm.png) repeat-y;}
div.match_counter_ft {height: 17px; margin: 0 0 10px 0; background: url(../img/nav_images/route_builder/rb_bt_ex2.png) no-repeat;}

/* Results part of Routebuilder */

div#result_tabs { width: 218px; border-left: 1px solid #cc0000; border-bottom: 1px solid #cc0000; border-right: 1px solid #cc0000;}
#tabJ, #tabC {width: 109px; height: 60px; background-color: #ccc; float: left; border-top: 1px solid #cc0000; border-bottom: 1px solid #cc0000; cursor: pointer;}
#tabJ.active, #tabC.active {background-color: #fff; width: 108px; border-bottom: none; }
#tabJ.active { border-right: 1px solid #cc0000; }
#tabC.active { border-left: 1px solid #cc0000; }
#tabJ h4, #tabC h4 {margin: 4px; font-size: 10px; font-weight: bold; text-align: center}
#j_counter, #c_counter {font-size: 18px; text-align: center}
div#result_tabs #tabJ .active {background-color: #ccc}
#j_results, #c_results {height: 220px; overflow: auto; }
div.matchButtons {margin: 0 10px 6px; background-color: #E7EFF1; padding: 10px 10px 0; font-size: 11px; color: #cc0000;}
div.matchButtons h4 {margin: 0 0 0 6px; padding: 0 4px 13px 23px}
div.matchButtons h4.ride {background: url(../img/map/icon_r_match.png) no-repeat;}
div.matchButtons h4.consignment {background: url(../img/map/icon_c_match.png) no-repeat;}
div.matchButtons h4.journey {background: url(../img/map/icon_j_match.png) no-repeat;}

/* GoogleMap */
div.mapPopupC {background: url(../img/map/icon_c_match.png) left top no-repeat;}
div.mapPopupR {background: url(../img/map/icon_r_match.png) left top no-repeat;}
div.mapPopupJ {background: url(../img/map/icon_j_match.png) left top no-repeat;}
div.mapHeadC, div.mapHeadJ {color: #ff6600; padding: 0 22px 7px}

div.mapWhere {width: 240px; font-size: 10px; margin: 2px 15px 2px 10px}
div.mapWhere .loginText {text-align: right; padding: 2px; color: #cc0000}
div.mapWhere ul {border-bottom: 1px solid #cc0000; padding: 0 0 5px 0;}
div.mapWhere .popupActions { float: right; width: 100px; margin-top: 5px;}

div.mapPopupC div.popupActions {width: 100px; padding-top: 4px; float: right}

.bannereng {
	height: 135px;
  background: #a4ab96 url(../img/nav_images/banners/home-graphic_eng.png) top left no-repeat;
}
.bannerdeu {
	height: 135px;
  background: #a4ab96 url(../img/nav_images/banners/home-graphic_deu.png) top left no-repeat;
}

.fpBanner {
  margin: 0px 0px 0 0;
  height: 125px;
  }

#signup {float: left}

.bubble {
  float: right;
  width: 300px;
  height: 115px;
  margin: 10px 10px 0 0;
  }
.bubble.eng {
  background: transparent url(../img/nav_images/main/bubble_eng.png) top center no-repeat;
}
.bubble.deu {
  background: transparent url(../img/nav_images/main/bubble_deu.png) top center no-repeat;
}

.bubbleInner {
  margin: 20px 10px 10px;
  }

#mapInfo {
  font-size: 11px;
  display: none;
  width: 170px;
  padding: 15px 15px 5px;
  background: transparent url(../img/nav_images/main/trans_70.png) top center;
  filter:alpha(opacity=90);
  -moz-opacity: 0.90;
  opacity: 0.90;
}
#mapInfo * {
  filter:alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  }
#mapInfo h3 {margin: 0 0 10px 0; color: #cc0000}
#mapInfo img {float: right; margin-left: 10px}
#mapInfo li {padding: 0 22px 8px; margin: 10px 0 0 16px; height: 22px;}
#mapInfo li.c {
  background: url(../img/map/icon_c_match.png) no-repeat left top;
}
#mapInfo li.r {
  background: url(../img/map/icon_r_match.png) no-repeat left top;
}
#mapInfo li.j {
  background: url(../img/map/icon_j_match.png) no-repeat left top;
}

/* Ads */
#signupAd {width: 133px; padding: 4px; background: transparent url(../img/nav_images/ads/signup_bg.png) no-repeat center bottom;}

/* Blog */
div.blogEntryContainer {margin: 15px 0 0 35px;}
div.blogEntryContainer div.image {float: left; padding: 2px; border: 1px solid #f3f7f8}
div.blogEntry {margin: 0 10px 0 85px; padding: 0px 10px 10px 20px; border-bottom: 1px solid #cccccc}
div.blogEntry h3 {font-size: 120%; margin: 0; padding: 0}
div.blogEntry p {margin: 7px 20px 10px 0; line-height: 130%}

div.blogMenu li {padding: 7px 0 0 0px;}
div.blogMenu li.On {padding: 7px 0 0 0; font-size: 120%; color: #ff3300; font-weight: bold}

/* Faqs */

div.faqContainer {margin: 13px; padding: 10px 0 0 0; border-top: 1px solid #ccc}
div.faqContainer h3 {margin: 0}
div.faqBody {margin: 10px 25px 10px 25px; font-size: 16px}
div.faqBody p {margin: 5px 0; color: #cc0000}
div.faqBody a.hide {font-size: 12px}

/* General type and links */
a {
  color: #cc0000;
}

a:hover {
  text-decoration: none;
  color: #ff7315;
}

a.newJourney, a.newConsignment, a.route_card, a.docket  {
  width: 150px;
  margin-left: 7px;
  height: 29px;
  line-height: 23px;
  padding: 0px 0px 0px 22px;
  text-align: center;
  font-size: 13px;
  display: block;
  float: right;
  font-weight: bold;
  text-decoration:none;
}

a.newJourney {background: transparent url(../img/nav_images/main/new_journey.png) no-repeat left top;}
a:hover.newJourney {color: #ff3300;}

a.newConsignment {background: transparent url(../img/nav_images/main/new_consignment.png) no-repeat left top;}
a:hover.newConsignment {color: #ff3300;}


a.newJourneyS, a.newConsignmentS, a.newRideS {
  color: #cc0000;
  width: 126px;
  height: 19px;
  float: right;
  margin-bottom: 3px;
  line-height: 18px;
  padding: 0px 0px 0px 14px;
  text-align: center;
  font-size: 10px;
  display: block;
  float: right;
  font-weight: bold;
  text-decoration:none;
}

a.newJourneyS.on, a.newConsignmentS.on , a.newRideS.on {
  float: left;
  margin-left: 5px;
}

a.newConsignmentS {background: transparent url(../img/nav_images/main/new_c_small.png) no-repeat left top;}
a.newRideS {background: transparent url(../img/nav_images/main/new_r_small.png) no-repeat left top;}
a.newJourneyS {background: transparent url(../img/nav_images/main/new_j_small.png) no-repeat left top;}


a.route_card {background: transparent url(../img/nav_images/main/route_card.png) no-repeat left top;}
a:hover.route_card {color: #ff3300;}

a.docket {background: transparent url(../img/nav_images/main/docket.png) no-repeat left top;}
a:hover.docket {color: #ff3300;}


a.page_action_g {
  height: 28px;
  font-size: 140%;
  color: #ffffff;
  margin-left: 7px;
  padding: 0 8px 0 8px;
  text-decoration: none;
  line-height: 130%;
  background-color: #548392;
  }

a:hover.page_action_g, span.page_action_j a:hover, a:hover.page_action_c {color: #ffff00;}

div.actionButtons { float: left; }
div.actionButtons img {margin: 4px 3px 0 0; border: 1px solid red}


/* App layout */
#yui-main h1, h2, h3, h4 {margin-bottom: 3px}
#yui-main h1 {font-size: 170%; color: #FF0000; margin-left: 5px}
h3 {font-size: 110%; font-weight: bold; margin-left: 4px;}

p {margin: 0 0 10px 0;}

#yui-main p.list {margin: 0 5px 7px 5px; font-size: 120%}
#yui-main .blue {color: #4f719b}
.blue {color: #4f719b}

.lightbluebox {background-color: #f3f7f8; color: #333333}
.whitebox {background-color: #ffffff; color: #cc0000}

#loading-message {
  position: fixed;
  margin: 0 auto 0 auto;
  top: 20px;
  width: 100%;
  text-align: center;
  z-index: 999;
}
#loading-message span {
  padding: 5px 20px;
  background-color: red;
  color: white;
}

/* Address stuff */
ul.address li {width: auto; text-align: center; font-size: 10px;}
li.addressFrom {margin-top: 6px; padding: 0 4px 13px 4px; background: white url(../img/nav_images/main/down_arrow.gif) no-repeat bottom center;}
li.addressTo {padding: 0 3px 0 3px;  margin: 1px 0 0 0; }

.address_label {
  padding: 7px;
  margin: 7px;
  color: #333333;
  background-color: #f3f7f8;
  }

.address_label b {color: #cc0000}

.shiftcontainer{
position: relative;
left: 7px; /*Number should match -left shadow depth below*/
top: 7px; /*Number should match -top shadow depth below*/
margin-bottom: 12px;
}

/* SHADOWBOX */

.shadowcontainer{
width: 100%; /* container width*/
background: transparent url(../img/nav_images/main/bigshadow.gif) no-repeat bottom right;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
width: 767px; /* container width*/
padding: 6px;
position: relative;
left: -7px; /*shadow depth*/
top: -7px; /*shadow depth*/
}

/*
*  ELEMENTS
*/

/* Journey Contracts */
ul.contracts {margin-left: 5px; color: #cc0000; font-size: 80%; line-height: 19px}

/* Action selects */
li.action {background: url(../img/nav_images/cp/actions.png) no-repeat left top; padding: 0 0 0 22px}

// These are the contract status select options for Consignments
li.c1, li.status_1 {background-position: left top}
li.c2, li.status_2 {background-position: left -19px}
li.c3, li.status_3 {background-position: left -38px}
li.c4, li.status_4 {background-position: left -57px}
li.c5, li.status_5 {background-position: left -76px}
li.c6, li.status_6 {background-position: left -95px}
li.c7, li.status_7 {background-position: left -114px}
li.c8 {background-position: left -133px}
li.c9 {background-position: left -171px}
li.c10 {background-position: left -190px}
li.c11 {background-position: left -209px}
li.c15 {background-position: left -209px}
li.c16 {background-position: left -152px}
li.status_8 {background-position: left -342px}

// These are the contract status select options for Journeys
	
li.j1 {background-position: left -228}
li.j2 {background-position: left -247px}
li.j3 {background-position: left -247px}
li.j4 {background-position: left -266px}
li.j5 {background-position: left -76px}
li.j6 {background-position: left -95px}
li.j7 {background-position: left -114px}
li.j8 {background-position: left -133px}
li.j9 {background-position: left -171px}
li.j10 {background-position: left -190px}
li.j11 {background-position: left -209px}
li.j15 {background-position: left -209px}
li.j16 {background-position: left -152px}

// Others
li.income {margin: 3px 0 0 4px;}

/* renderConsignment load for table  - Small */
div.renderConsignmentSmall {width: 150px; background: #ff7315; color: #fff; height: 46px; font-size: 75%; line-height: 80%}
div.renderConsignmentSmall img {float:left; margin: 4px}
div.renderConsignmentSmall p {margin: 2px 0 2px 42px;}
div.renderConsignmentSmall li {padding: 4px 0 0 4px;}

/* renderUserSmall */
.renderUserSmall {width: 140px; font-size: 0.7em}
.renderUserSmall img {float:left}
.renderUserSmall div.span1 {width: 100px; height: 12px; text-align: left; margin: 0 0 0 42px; overflow: hidden}

/* renderUserPublic */
.userPublic {margin: 0 20px}
.userPublic ul {margin: 10px}
.userPublic li {font-size: 11px; text-align: center}
.userPublic div.note {text-align: left; font-size: 11px; padding: 7px; margin: 10px}

/* Journeys */
div.journeyTable {color: white; width: 230px; padding: 6px 4px 6px 4px; border: solid #cc0000 3px; background: #cc0000}
div.journeyTable div {background: transparent}
div.journeyTable div.shortFrom {background: transparent url(../img/nav_images/main/down_arrow.gif) no-repeat bottom center;}

/* contracts */
#offerBox {font-size: 90%; background: #F9F206; padding: 5px}

/*
* BUTTONS
*/

/* Button 1 */

a.squarebutton{
background: transparent url('../img/nav_images/main/square-gray-left.png') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 12px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 20px; /* Height of button background height */
padding-left: 7px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('../img/nav_images/main/square-gray-right.png') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
cursor:pointer;
display: block;
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float - G removed width 100% here */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
margin-top: 2px;
margin-right: 4px;
float: right;
}

/* Button 2 */

a.linkbutton{
border: solid 1px #ff6600;
background: #ffffff;
margin: 3px 0 0 3px;
padding: 2px 7px 2px 7px;
font: normal 10px Arial;
line-height: 20px;
text-decoration: none;
}

a:link.linkbutton, a:visited.linkbutton, a:active.linkbutton{
color: #cc0000; /*button text color*/
}

a.linkbutton:hover span{ /* Hover state CSS */
color: #ff6600;
}

a.squarebutton:hover{ /* Hover state CSS */
color: #ff6600;
}

/* Containers */

.grad1 {background: #CAE8EA url(../img/nav_images/main/gradient_vert_1.png) repeat-x;}
.pad5 {margin: 5px;}

.table_container {
  width: 775px;
  padding: 4px;
  border-bottom: solid 1px #cccccc;
  margin: 20px 0px 0px 0;
}

.safetrack_key {
  width: 250px;
  padding: 5px;
  background: white;
  font-size: 70%;
  color: #666666;
  margin: 5px auto 5px auto;
  }

.safetrack_key span {
  text-align: center;
  display: block;
  font-size: 3em;
  color: #cc0000;
  }

/* The How it works menu */
ul.horizontalMenu {padding: 4px; margin: 0 0 20px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc}
ul.horizontalMenu li {text-align: center; padding: 0 10px; display: inline; list-style-type: none;}

/*Journey Status bar in the new style*/
#status_bar_j {width: 580px; margin: 15px auto 10px}
#status_bar_j li {width: 80px; overflow: hidden; height: 70px; float: left; font-size: 75%; color: #ff3300}
#status_bar_j li.leftHead {width: 100px; height: 70px}
#status_bar_j div.logo {width: 22px; height: 70px; margin-right: 4px; float: left}

#status_bar_j li.leftHead  p {font-size: 120%; margin: 11px 0 0 0; font-weight: bold; color: #cc0000}

#status_bar_j div.label {font-size: 90%; height: 34px; text-align: center; padding: 0 15px}
#status_bar_j div.totals {height: 14px; width: 30px; color: #fff; background-color: #ff9800; margin: 20px auto 0; padding: 2px 4px; text-align: center}

#status_bar_j .js1 {background: #fff url('../img/nav_images/cp/status_j.png') no-repeat left 15px;}
#status_bar_j .js2 {background: #fff url('../img/nav_images/cp/status_j.png') no-repeat -21px 15px; }
#status_bar_j .js3 {background: #fff url('../img/nav_images/cp/status_j.png') no-repeat -31px 15px;}
#status_bar_j .js4 {background: #fff url('../img/nav_images/cp/status_j.png') no-repeat -41px 15px;}

#status_bar_j li.jsb3 {background: #fff url('../img/nav_images/cp/status_bar_j.png') no-repeat left top;}
#status_bar_j li.jsb4 {background: #fff url('../img/nav_images/cp/status_bar_j.png') no-repeat -80px top;}
#status_bar_j li.jsb5 {background: #fff url('../img/nav_images/cp/status_bar_j.png') no-repeat -160px top;}
#status_bar_j li.jsb6 {background: #fff url('../img/nav_images/cp/status_bar_j.png') no-repeat -240px top;}
#status_bar_j li.jsb7 {background: #fff url('../img/nav_images/cp/status_bar_j.png') no-repeat -320px top;}
#status_bar_j li.jsb8 {background: #fff url('../img/nav_images/cp/status_bar_j.png') no-repeat -400px top;}

/*Consignment Status bar in the new style*/
#status_bar_c {width: 554px; margin: 15px auto 10px}
#status_bar_c li {width: 60px; height: 70px; font-size: 75%; text-align: center; color: #ff3300; overflow: hidden; float: left; margin: 0 4px 15px}
#status_bar_c li.cs1 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat left 30px;}
#status_bar_c li.cs2 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat -60px 30px;}
#status_bar_c li.cs3 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat -120px 30px;}
#status_bar_c li.cs4 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat -180px 30px;}
#status_bar_c li.cs5 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat -240px 30px;}
#status_bar_c li.cs6 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat -300px 30px;}
#status_bar_c li.cs7 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat -360px 30px;}
#status_bar_c li.cs8 {background: #fff url('../img/nav_images/cp/status_bar_c.png') no-repeat -420px 30px;}
#status_bar_c li.past {opacity:0.5;filter:alpha(opacity=50);}
#status_bar_c li.now div {width: 60px; height: 70px; background: transparent url('../img/nav_images/cp/status_bar_c.png') no-repeat -480px 30px;}

/* Action Feed settings */
#SetActionFeed {padding: 7px}
#SetActionFeed input {margin: 0 5px 0 7px; }
#SetActionFeed fieldset {margin: 2px 0 9px 3px;}
#SetActionFeed legend {color: #cc0000}

div.ActionFeedWrap {width: 142px; margin: 9px; background-color: #ff7315; }
div.ActionFeedTitle {color: #fff; padding: 3px 6px; margin: 0px; background: transparent url(../img/nav_images/cp/actionfeed.png) no-repeat scroll left top}
#ActionFeed {background-color: #F3F7F8}
#ActionFeed div.Item {color: #548392; margin: 0 4px 4px; padding: 0 0 4px 0; font-size: 9px; padding: 3px}
#ActionFeed div.Item div {color: #333; background-color: #fff; font-size: 10px;}
#ActionFeedFoot {height: 16px; background: transparent url(../img/nav_images/cp/actionfeed.png) no-repeat scroll center bottom}

a.bugReport {color: #fff; background: #fff url('../img/nav_images/main/bug_report.png'); font-size: 0.8em; display: block; width: 88px; height: 25px; padding: 30px 0 0 62px; }

/* offerDiv */

div.offerDiv {border: 1px solid #cccccc; padding: 10px; margin: 0 20px 10px 20px;}
div.offerDiv p {margin: 4px 0 7px 0; font-size: 90%;}
div.offerDiv li {font-size: 70%;}

/*
* TABLES
*/

.completed {
  padding: 4px;
  border: solid 1px #EcE9D8;
  margin: 7px 0px 0px 0;
  background-color: #ffffff;
  }

.journey_t {border: solid 1px #cc0000; background-color: #fff}
.consignment_t {border: solid 1px #ff6600; background-color: #fff}

.journey_t2 {border: solid 1px #cc0000; background: #ffe129 url(../img/nav_images/gradients/gradient_yellow_vert.jpg) repeat-x top;}
.consignment_t2 {border: solid 1px #ff6600; background: #ffec76 url(../img/nav_images/gradients/gradient_yellow2_vert.jpg) repeat-x top;}

.cooreea_t {border: solid 1px #EcE9D8; background-color: #fff}

/* statusTable */
#statusTable {width: 100%}
#statusTable th {width: 75px; font-size: 70%; text-align: center}
#statusTable td {font-size: 150%; text-align: center}
#statusTable td.head {font-size: 90%; text-align: left; font-weight: bold}

/* trustRecords */
#trustRecords {}
#trustRecords div.pos {background: #fff url(../img/nav_images/trust/trust_pos.gif) no-repeat left;}
#trustRecords div.neu {background: #fff url(../img/nav_images/trust/trust_neu.gif) no-repeat left;}
#trustRecords div.neg {background: #fff url(../img/nav_images/trust/trust_neg.gif) no-repeat left;}

/* Trust comment listing */

.overall {border-bottom: 1px solid #ff6600; color: #333; padding: 5px 0}
.userComment {font-size: 130%; border-bottom: 1px solid #ccc; color: #333; padding: 5px 0 5px 34px}
.userComment h4 {color: #999; font-size: 80%; margin: 3px 0 0 0;}

/* table_coo_1 */

.table_coo_1 {
  margin-top: 5px;
  width: 100%;
  background: #ffffff;
  border: solid 1px #C1DAD7;
}

.table_coo_1 th {
  font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #4f6b72;
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  border-top: 1px solid #C1DAD7;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  padding: 4px 6px 4px 12px;
  background: #ffffff url(../img/nav_images/main/table_cnr.gif) no-repeat;
}

.table_coo_1 td {
  border-right: 1px solid #C1DAD7;
  border-bottom: 1px solid #C1DAD7;
  background: #fff;
  padding: 6px 4px 6px 4px;
  color: #4f6b72;
  font-size: 11px;
}
.table_coo_1 td.J {padding-left: 28px; background: transparent url(../img/nav_images/transactions/van.png) left no-repeat;}
.table_coo_1 td.C {padding-left: 28px; background: transparent url(../img/nav_images/transactions/package.png) left no-repeat;}
.table_coo_1 td.D {padding-left: 28px; background: transparent url(../img/nav_images/transactions/dep.png) left no-repeat;}
.table_coo_1 td.Fee {padding-left: 28px; background: transparent url(../img/nav_images/transactions/fee.png) left no-repeat;}
.table_coo_1 td.CancelFee {padding-left: 28px; background: transparent url(../img/nav_images/transactions/fee.png) left no-repeat;}
.table_coo_1 td.CancelRef {padding-left: 28px; background: transparent url(../img/nav_images/transactions/fee.png) left no-repeat;}

.table_coo_1 td.column-1 {
  text-align: center;
}
.table_coo_1 td .income {
  margin-left: 6px;
}

/* For Account table */
.table_coo_1 td.AccLineNeg {padding-left: 7px; text-align: left; color: #999999}
.table_coo_1 td.AccLinePos {padding-right: 7px; text-align: right; color: green}

/* Table panel */

#panel {
  padding: 8px;
  width: 100%;
  background-color: #f3f7f8;
  border: 1px solid #999999;
}

#panel td,th {
    background-color: #ffffff;
  text-align: center;
  padding: 3px 5px 3px 5px;
}

#panel th {
  font-weight: bold;
  font-size: 110%;
  color: #cc0000;
  }

#panel td.rowhead_t {
  text-align: left;
  }

#panel td.rowhead_i {
  width: 31px;
  }

/* Table user */
#user {
  padding: 8px;
  width: 100%;
  background: #ffffff;
}

#user td {
  padding: 3px 0px 3px 5px;
  border-bottom: 1px solid #cc0000;
  font-size: 85%;
}

#user th {
  background-color: #ff3300;
  font-weight: bold;
  font-size: 110%;
  color: #ffffff;
}

/*
* FORMS
*/

/* General  */

input.form-error {
  background-color: #FFC096;
}

.error-message {color: red;}

.register .error-message {float: right; color: red; padding-right: 40px; width: 260px; }

.form_coo_1 {
  }

.form_coo_1 fieldset div.date, .form_coo_1 fieldset div.input {
  clear: left;
  }
.form_coo_1 fieldset {
  padding: 5px 20px 10px 20px;
  margin: 12px 0 0 0;
  }

.form_coo_1 legend {
  margin: 0 0 0 10px;
  padding: 0 5px 0 5px;
  font-size: 180%;
  color: #cc0000
  }

.form_coo_1 div.field_head {
  clear: left;
  margin: 7px 7px 3px 0;
  padding: 0;
  float: left;
  width: 210px;
  }

.form_coo_1 label {
  color: #555;
  font-size: 140%;
  width: 160px;
  line-height: 150%
  }

.form_coo_1 label span {color: red}

.form_coo_1 div.field_head p {
  font-size: 80%;
  float: left;
  width: 180px;
  }

.form_coo_1 input, .form_coo_1 select, .form_coo_1 checkbox  {
  float: left;
  margin: 20px 0 0 20px;
  }

.form_coo_1 textarea {
  margin: 5px 0 0 0;
  font-size: 160%;
  }

.form_coo_1 input#UserProfilePicture {
  font-size: 120%;
  }

div.captchaDiv {border: 1px solid #ff3300; padding: 7px; margin: 20px 50px 0 0}
div.captchaDiv p {font-weight: bold}
div.captchaDiv input {float: right; margin-right: 15px}
div.captchaDiv div.smallText {padding: 7px; font-size: 10px; text-align: center; color: #ff3300}
#captcha_image {float: left}

// The date div

.form_coo_1 .datePickerDiv {padding: 0px; margin-left: 35px}
div.datePickerDiv {margin: 0}
.datePickerDiv img {margin: 0 0 0 4px}

.datePickerDiv div.time, div.day {margin: 0; color: #cc0000}
.datePickerDiv div.time div, div.day  div {margin: 8px 0 0 0; float: left; width: 45px; font-size: 11px}
.datePickerDiv div.day input {margin: 4px 0 0 0; float: none; width: 94px; font-size: 14px;}
.datePickerDiv select {float: none; margin: 4px 4px 0 0; font-size: 14px}
.datePickerDiv div.day a { vertical-align: bottom;}

.form_coo_1 .datePickerDiv {padding: 10px 0 0 300px}

/* .form_coo_2  form for more basic layout  border: solid 1px red;*/

.form_coo_2 div.input {
  margin: 0 0 20px 0;
  }

.form_coo_2 label {
  display: block;
  width: 180px;
  float: left;
  font-size: 140%;
  color: #8FBCB6;
  }

.form_coo_2 input, .form_coo_2 select {
  font-size: 150%;
  }

.form_coo_2 div.submit {
  font-size: 140%;
  text-align: center;
  padding: 0 10px 0 10px;
  }

.form_coo_2 div.submit input{
  padding: 0 10px 0 10px;
  }

/* Seperate file input */

input.fileinput {
  font-size: 1em;
  float: left;
  margin: 20px 0 0 20px;
  }

/* Specific for the submit buttons div at bottom of form */

#form_submit, #form_submit2 {
  float: right;
  height: 50px;
  padding: 25px 0 0 0;
  }

#form_submit div.submit {
  margin-top: 10px;
  font-size: 120%;
  }

#form_submit input {
  margin: 0 0 0 20px;
  padding: 0;
  }

/* The Consignment line builder */

div#consignmentBuilder select {
  width: 130px;
  height: 24px;
  font-size: 1.3em;
  margin: 26px 0 0 0;
  padding: 0;
}

table#whatAddline input {
  width: 50px;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
  }

table#whatAddline select {
  width: 100px;
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  }

table#whatAddline {
  /* border: solid 1px red; */
  width: 360px;
  float: right;
  }

table#whatAddline th {
  font-style: bold;
  color: #cc0000;
  text-align: left;
  font-size: 80%;
  margin: 0;
  padding: 0;
  }

table#whatAddline td {padding: 3px }

/* Table for listign consignment items in the builder */

table#BuiltItems {
  border-top: solid 1px red;
  margin: 17px 0 0 0;
  width: 100%;
  clear: left;
  }

table#BuiltItems th{
  font-style: bold;
  color: #cc0000;
  font-size: 80%;
  border-bottom: solid 1px red;
  margin-top: 0;
  padding: 2px;
  text-align: left;
  }

table#BuiltItems td{
  border-bottom: solid 1px #cccccc;
  background-color: #f3f7f8;
  margin: 0;
  padding: 2px 2px 2px 6px;
  }

table#BuiltItems input{
  font-size: 0.8em;
  margin: 0 0 0 4px;
  padding: 0;
  }

/* Specific style for entry form for map table Consignment and Jounry entry */

#FromAddressDiv,#ToAddressDiv{
  height: 100px;
  border: solid 1px #EFECEF;
  margin-left: 5px;
  padding: 7px;
  overflow: auto;
  background-color: #fff
  }

#FromAddressDiv {margin-top: 5px; border-bottom: none;}
#ToAddressDiv {border-top: none;}

.mapTotals {border: 1px solid #F3F7F8; font-size: 10px; color: #cc0000; text-align: center; height: 100px}
.mapTotals #c_counter {color: #ff3300; font-size: 35px; padding: 0 7px; line-height: 34px; display: block}
.mapTotals #j_counter {color: #cc0000; font-size: 35px; padding: 0 7px; line-height: 34px; display: block}
.mapTotals div {margin-top: 3px; height: 35px}
.mapTotals a.totals {margin: 0 auto; padding-top: 9px; font-size: 18px; display: block; width: 43px; height: 51px; text-decoration: none}
.mapTotals a.journeys {color: #fff; background: url(../img/map/j_icon_large.png) no-repeat;}
.mapTotals a.journeys.glow {background: url(../img/map/j_icon_glow.gif) no-repeat;}
.mapTotals a.consignments {background: url(../img/map/c_icon_large.png) no-repeat; color: #ff3300}
.mapTotals a.consignments.glow {background: url(../img/map/c_icon_glow.gif) no-repeat;}
.mapTotals a.accounts {width: auto}

div.fromto_image {height: 63px; border-left: 1px solid #efecef; border-right: 1px solid #efecef;background: #fff url(../img/nav_images/main/fromto.png) no-repeat center }

div.fromto_image {margin: 0 0 0 5px}
small.instruct {color: #cc0000; margin: 3px 0 0 0; width: 100%; float: left; clear: left; }

#FromAddressDiv div.submit input,#ToAddressDiv div.submit input, MarginAddressDiv div.submit input {
  width: 140px;
  clear: left;
}

#FromAddressDiv input,#ToAddressDiv input, #MarginAddressDiv input {
  clear: left;
  font-size: 16px;
  margin: 5px 0 0 0;
}

#FromAddressDiv input,#ToAddressDiv input {width: 180px}
#FromAddressDiv input.submit,#ToAddressDiv input.submit {width: 150px}

#MarginAddressDiv {padding: 3px 7px 3px 7px;}

#MarginAddressDiv input, #MarginAddressDiv select {width: 50px; float: right; margin-top: 6px}

#MarginAddressDiv label {font-size: 11px; font-weight: bold; float: left; margin: 7px 0 0 4px; width: 130px}

#rateCooreea {margin: 20px 0 20px 0; text-align: center; font-size: 30px;}
#rateCooreea input {margin: 0 10px 5px 10px}

#simpleForm {font-size: 15px}
#simpleForm div.input {margin: 12px}
#simpleForm label {float: left; display: block; width: 200px}
#simpleForm input {margin: 0 0 0 20px; }

div.bigLink {font-size: 250%; padding: 5px; text-align: center}

.detailList li {margin: 0 0 6px 13px; font-size: 120%}

ul.loadList, ul.offers {margin: 0; background-color: #fff}
ul.loadList li, ul.offers li {text-align: center; font-size: 10px; margin: 2px 7px 0 7px}
ul.loadList b, ul.offers b {font-weight: bold}
ul.offers li.price, ul.loadList li.price {color: #cc0000; font-size: 12px; font-weight: bold}

ul.offers li.pickup, ul.loadList li.pickup {font-size: 9px; font-weight: bold; padding-bottom: 12px; background: #fff url(../img/nav_images/strips/pu2del.png) no-repeat center bottom;}
ul.offers li.deliver, ul.loadList li.deliver {font-size: 9px; font-weight: bold}

div.listingNote {margin: 4px; text-align: left; padding: 4px 3px; font-size: 10px; background-color: #f3f7f8; height: 26px; overflow: auto}

/*
* Popup
*/

div.popup {}
div.popup h1 {font-size: 22px; padding: 0 0 10px 15px;}
div.popup div.warning {text-align: center; font-size: 16px; padding: 0 0 10px 15px;}

div.p {font-size: 12px}
div.popup div.html_links {text-align: center; font-size: 22px;}

#popup div.form_mainOLD {padding: 7px; background-color: white; color: #cc0000; font-size: 1.5em;}
#popup div.submitOLD {text-align: right; padding: 7px; color: #cc0000; font-size: 1.5em;}

div#MessagingLog {margin: 5px 10px}

div.msgForm {background-color: #f3f7f8; padding: 13px; margin: 0 10px}
div.msgForm p {padding-left: 20px}

div.popup div.submitButtons {text-align: center; margin: 7px;}
div.popup div.submitButtons input {font-size: 18px; margin: 0 10px; padding: 4px;}

div.submitDivOLD {height: 30px}
div.submitDivOLD input {font-size: 150%; margin-left: 10px; float: right}

.form_popup {margin: 15px 30px 15px 30px;}
.form_popup div.input, .form_popup div.date {margin: 4px; padding: 6px 4px 2px 0; clear: left; border-top: 1px solid #f3f7f8}

.form_popup label {float: left; display: block; width: 120px; margin-top: 5px; padding: 0 0 5px 0}

.form_popup .required input {margin-top: 5px; background-color: #f3f7f8}
.form_popup div.error-message {float: left; width: 340px}

.form_popup div.select select {margin-left: 45px}

.bankForm div {margin: 0 0 0 20px}
.bankForm label {display: block; width: 240px; float: left}

.transactionHead {height: 44px; background: transparent url(../img/nav_images/payment/payment.png); font-size: 10px; color: #fff}

/*
* The layout for the Track Page
*/

#TK {border: 0px solid #FF7315}
#TK div.head {clear: left; border-top: 2px solid #F8E012; border-bottom: 2px solid #FDF6D7; padding: 6px; margin: 7px}
#TK span.bigHead {font-size: 2.5em; color: #666;}
#TK h2 {line-height: 1.2em; margin-top: 12px; padding-left: 70px}

#TK table {width: 100%}
#TK th {width: 22%; font-size: 2.5em; text-align: left; color: #666; vertical-align: middle}
#TK td {width: 27%; color: #cc0000; font-size: 1em; text-align: center; font-weight: bold; vertical-align: middle}
#TK td.bold {width: 10%; color: #666; font-size: 1.1em; vertical-align: middle; text-align: center; font-weight: normal}

#TK div.space img {float: left}
#TK div.space {margin: 6px 20px 10px 20px}
#TK div.left {text-align: right;}
#TK div.center {text-align: center; font-size: 1.3em; font-weight: bold; color: #cc0000}
#TK div.right {text-align: left;}

#TK div.trackMessage {padding: 10px 10px 10px 50px; text-align: center}

#TK div.bar {border-bottom: 2px solid #FDF6D7; padding: 6px; margin: 7px}
#TK div.submit {}

#KeyContainer {font-size: 18px; margin: 0px auto 10px auto; padding: 26px 0px 4px 6px; width: 200px; background: transparent url(../img/nav_images/track/key_bg.png) no-repeat center top; background-image: }
#KeyContainer div.keyPartText {clear: none; float: left; margin: 3px 3px 0 0; width: 24px; background-color: yellow; text-align: center}
#KeyContainer input.keyPartForm {clear: none; margin: 1px 5px 0 0; width: 22px; height: 22px; float: left; text-align: center}

.consignmentNote {padding: 5px; font-size: 0.8em; background-color: #f3f7f8}

/*
* The layout for the strips
*/

/* CSS for all 3 strips */

.S_T {padding: 0 0 0 1px}
.S_T h4 {font-size: 80%; float: left; margin: 5px 4px 4px 1px}
h4.id {font-weight: bold; padding-right: 5px; border-right: 3px solid #ccc}
.Public .S_T_left {width: 180px; float: left; height: 26px;}
.Own .S_T_left {width: 360px; float: left; height: 26px;}
.S_T_right {height: 24px;}

.S_T_right img {float: right; margin: 2px 7px 0 0;}
.S_T_right h5.totalMessages {font-size: 1em; float: right; margin:  3px 4px 0 0;}
/* span.newMessages {font-weight: bold; color: #cc0000; background: url(../img/nav_images/strips/flash2.gif); padding: 0 2px 2px 3px;} */

div.borderBox {text-align: center; margin-top: 7px; border-top: 1px solid #ccc}

div.where, div.when, div.what, div.who {background: #f3f7f8 url(../img/nav_images/strips/blue_bg.png) left repeat-y}
div.contract  {background: #ff7315 url(../img/nav_images/strips/contract_bg.png) left repeat-y;}
div.contract_j  {background: #cc0000 url(../img/nav_images/strips/red.png) left repeat-y;}

div.where div.left, div.when div.left, div.what div.left, div.who div.left, div.contract_j div.left, div.contract div.left {width: 25px; float: left;}

div.S_B div.yui-u {background-color: #fff; min-height: 74px}

div.CS .details a, div.COS .details a, div.COMS .details a, div.JS .details a {
  background: transparent url(../img/nav_images/main/neg_button_long.png) no-repeat left;
  font-size: 80%;
  text-decoration: none;
  display: block;
  width: 86px;
  height: 20px;
  color: #cc0000;
  text-align: center;
  line-height: 18px;
  }

div.CS .details a.glow, div.COS .details a.glow, div.COMS .details a.glow, div.JS .details a.glow {
  background: transparent url(../img/nav_images/main/neg_button_glow.gif) no-repeat left;
}

div.CS .details a.long, div.COS .details a.long, div.COMS .details a.long, div.JS .details a.long {
  background: transparent url(../img/nav_images/main/neg_button_long.png) no-repeat left;
  width: 105px;
}

div.CS .details a.glow.long, div.COS .details a.glow.long, div.COMS .details a.glow.long, div.JS .details a.glow.long {
  background: transparent url(../img/nav_images/main/neg_button_glowlong.gif) no-repeat left;
  width: 105px;
}

div.CS .details a.hover, div.COS .details a.hover, div.COMS .details a.hover, div.JS .details a.hover {color: #ff3300}

div.afStrip {text-align: right; padding: 2px 5px 4px 5px; font-size: 10px; color: #cc0000}

 /* actionFeed - should replace above eventually */

div.actionFeedStrip {font-size: 10px; background-color: #fff; padding: 4px; height: 50px; overflow: auto}

div.actionFeedStrip li.meAction {margin-left: 15px; padding: 3px 20px 2px 25px; font-size: 11px; color: #ff0000; background: transparent url(../img/nav_images/miniFeed/miniActionM.png) no-repeat left;}
div.actionFeedStrip li.youAction {margin: 0 15px 0 0; text-align: right; padding: 3px 30px 2px 25px; font-size: 11px; color: #333; background: transparent url(../img/nav_images/miniFeed/miniActionU.png) no-repeat right;}
div.actionFeedStrip li.me {margin-left: 15px; padding: 3px 20px 2px 25px; font-size: 11px; color: #ff0000; background: transparent url(../img/nav_images/miniFeed/miniMsgM.png) no-repeat left;}
div.actionFeedStrip li.you {margin: 0 15px 0 0; text-align: right; padding: 3px 30px 2px 25px; font-size: 11px; color: #333; background: transparent url(../img/nav_images/miniFeed/miniMsgU.png) no-repeat right;}

div.actionFeedStrip li.action {color: #006699;}
div.actionFeedStrip span.time {color: #ccc}

/* Contract */

div.COS {width: 767px; border: 1px solid #ff7315; background-color: #ff7315; margin: 0 auto 12px auto; padding: 0 0 0 0}
div.COS .S_T {height: 24px; background-color: #fff}
div.COS .S_T span {float:left; margin: 0 0 0 0}

div.COS .details {float: right; background-color: #ff7315; height: 22px; padding: 3px 5px 1px 5px;}
div.COS .S_B {padding: 4px}
div.COS .photo {width: 74px; height: 74px; float: left; background-color: #fff}
div.COS .photo img {border: 2px solid #fff}

div.COS div.yui-u {text-align: center;}

div.COS div.afStrip {background-color: #ffb27f; color: #cc0000; margin: 3px 4px 4px 4px}

/* Consignment */

div.CS {width: 767px; border: 1px solid #f8E012; margin: 0 auto 12px auto; padding: 0 0 0 0; background-color: #f8E012; }
div.CS .S_T {height: 24px; background-color: #fff}
div.CS .S_T span {float:left; margin: 0 0 0 0}

div.CS .details {float: right; background-color: #f8E012; height: 22px; padding: 3px 5px 1px 5px;}

div.CS .S_B {padding: 4px; background-color: #f8E012;}
div.CS .photo {width: 74px; height: 74px; float: left; background-color: #fff}
div.CS .photo img {border: 2px solid #fff}

div.CS div.yui-u {text-align: center;}

div.CS div.afStrip {background-color: #fbef88; color: #cc0000; margin: 3px 4px 4px 4px}

/* Completed */

div.COMS {width: 767px; border: 1px solid #ccc; background-color: #ccc; margin: 0 auto 12px auto; padding: 0 0 0 0}
div.COMS .S_T {height: 24px; background-color: #fff}
div.COMS .S_T span {float:left; margin: 0 0 0 0}

div.COMS .details {float: right; background-color: #ccc; height: 22px; padding: 3px 5px 1px 5px;}

div.COMS .S_B {padding: 4px}
div.COMS .photo {width: 74px; height: 74px; float: left; background-color: #fff}
div.COMS .photo img {border: 2px solid #fff}

div.COMS div.yui-u {text-align: center;}

div.COMS div.afStrip {background-color: #e6e6e6; color: #cc0000; margin: 3px 4px 4px 4px}

/* Journey */

div.JS {width: 767px; background: transparent url(../img/nav_images/strips/JS_t.gif) no-repeat top; margin: 0 auto 12px auto;}
div.JS_in {background: transparent url(../img/nav_images/strips/JS_b.gif) no-repeat bottom; padding: 0 0 7px 0}
div.JS .S_T {height: 24px; padding-top: 1px; padding-left: 3px}
div.JS .S_T span {float:left; margin: 0 0 0 0}

div.JS .details {float: right; background-color: #cc0000; height: 22px; padding: 3px 5px 1px 5px;}

div.JS .S_B .yui-g .yui-g {width: 49.8%}
div.JS .S_B .yui-g .yui-u {width: 49.6%}

div.JS .S_B {background-color: #cc0000; padding: 8px 6px 0px 6px}
div.COMP .S_B {background-color: #ccc;}

div.JS div.afStrip {background-color: #e57f7f; color: #fff; margin-top: 4px}

/* User */

span.userSmall {line-height: 28px; text-align: center;}
span.userSmall img {padding: 2px;}
span.userSmall span {vertical-align: top; font-size: 1em; line-height: 28px; margin: 0 0 0 3px; padding-bottom: 4px}

div.userMedium {margin: 5px}
div.userMedium img {float: left}
div.userMedium div.userName {height: 19px; margin-left: 44px; text-align: left; font-weight: bold}
div.userMedium div.userTrust {height: 15px; margin-left: 44px; font-size: 80%; line-height: 15px; padding-left: 3px; text-align: left; background: transparent url(../img/nav_images/gradients/userbg.jpg) repeat-y}
div.userMedium div.userTrust img {margin-right: 4px}

/* publicUserprofile */

.publicUserprofile {
  background-color: #fff;
  padding: 5px;
}

.publicUserprofile div.details li{
  padding: 4px 0 4px 20px;
  font-size: 0.8em;
  color: #cc0000;
}

/* Messaging - mine - user# - noMessage/message*/
.msgadmin {text-align: center; background-color: #548392; color: #fff; padding: 5px 9px 5px 9px; width: 588px; margin: 0 100px 12px 100px;}

.msgmine {width: 588px; margin: 0 200px 12px 0;}
.msgmine div.topM {width: 544px; padding-top: 20px; margin-left: 44px;}
.msgmine div.topMsg {margin: 0 1px 0 31px; padding: 0 10px; background-color: #f3f7f8;}
.msgmine div.botM {width: 544px; height: 48px; margin-left: 44px;}
.msgmine div.userImg {float: left; width: 40px; height: 38px; padding-right: 26px;}

.msguser {width: 588px; margin: 0 0 12px 200px;}
.msguser div.topM {width: 544px; padding-top: 20px; margin-right: 44px;}
.msguser div.topMsg {margin: 0 31px 0 1px; padding: 0 10px; background-color: #fff;}
.msguser div.botM {width: 544px; height: 48px; margin-right: 44px;}
.msguser div.userImg {float: right; width: 40px; height: 38px; padding-left: 26px;}

.msgmine span.msgBody, .msguser span.msgBody {margin: 0 15px; font-size: 20px}
div.dateHeaderText {padding: 0 10px 5px 38px}
div.dateHeader img {float: left}
.msgadmin .dateHeaderText span, .msgmine .dateHeaderText span, .msguser .dateHeaderText span {font-size: 10px;}

.status_change_details {border: 1px solid #cc0000; margin-top: 5px; padding: 6px;}

/* third level */
.noMessage {}
.yesMessage {}

/* PageFootMenu */

div.PageFootMenu {text-align: center; margin-top: 20px; font-size: 0.8em}

/* Todo list */
.ToDo h2 {padding: 0px}
.ToDo li {font-size: 10px; margin: 4px 0; background: url(../img/nav_images/todo/todo_alert.png) no-repeat 0 4px; padding: 0 0 0 18px}

ul.bugs {margin: 20px 60px; border-top: 1px solid #ccc}
ul.bugs li {border-bottom: 1px solid #ccc; padding: 7px 0; font-size: 10px}

/* Latest listings */

.listingStrip {margin: 8px 10px 0px; padding: 4px 0 8px 24px; font-size: 11px;}
.LSwrap { cursor: pointer; border: 1px solid white; }
.LSwrap:hover { background: #EEEEEE; }
.LSjourney {background: url(../img/map/icon_j_match.png) top left no-repeat}
.LSconsignment {background: url(../img/map/icon_c_match.png) top left no-repeat}
.LSride {background: url(../img/map/icon_r_match.png) top left no-repeat}
.LSodd {background-color: #f3f7f8}

/* Frontpage scroller */

/* class styles */
      .fade-box {
        margin-left: 0px;
        position: absolute;
        top: 163;
        width: 260px;
        height: 80px;
      }
      .fade-box p {
        width: 240px;
        padding: 5px 10px 0 10px;
        margin: 0;
        background: #E0EADF;
      }
      .fade-box h2 {
        width: 250px;
        margin-top: 0px;
        padding-left: 10px;
        background: #E0EADF;
      }

      /* id styles */
      #crossfade-container {
        margin: 0px 0px 0px 10px;
        width: 260px;
        height: 80px;
        background: url(images/fade-box-bg.gif);
      }

      /* the boxes that fade */
      #box-1 {

      }
      #box-2 {

      }
      #box-3 {

      }

/** Gwilyms basic cake form **/

.formBasic fieldset {
	float: left;  
	clear: left;  
	width: 98%;
	margin: 1.5em 0 0 0;  
	padding: 0 0 2em 0;
	border: 1px solid #ccc;
}

.formBasic input, .formBasic textarea {padding: 2px}

.formBasic legend {  
	margin-left: 0.5em;  
	color: #cc0000;  
	font-weight: bold;
	padding: 0 0.5em;
}

.formBasic fieldset div {
	margin: 0 0 0 0;
	padding: 0.5em 0;
  float: left;  
	clear: left;  
	width: 100%;
}

.formBasic fieldset div.input {
  background: url(../img/nav_images/gradients/dot.gif) bottom repeat-x;
  padding: 1.2em 0;
}

.formBasic fieldset div.error-message {
	color: red; 
	padding: 0 1em;
	margin: 0.2em 2.5em 0; 
	background: url(../img/nav_images/gradients/arrow.gif) left no-repeat;
	}
	
.formBasic input.form-error {background-color: #F5F8FF}

.formBasic fieldset div label {
  float: left;  
  width: 10em;  
  margin: 0.2em 1em 0 2em;
}

.formBasic fieldset div.checkbox input{
  float: right;
  margin: 5px 260px 0 0;
}	

.formBasic div.submit {
	margin: 20px 0;
	float: left;
	width: 100%;
	}

.formBasic div.submit input {
  font-size: 1.5em;
  margin-left: 168px; 
}	



/* @end */