@import url("/libs/stylesheets/base.css");
@import url("/libs/stylesheets/site/base.css");

/* ---- layout ---- */
body { background:#EFEFEF url("/images/bodyF.png") repeat-x; color:#666 }
#layout-wrapper { background:url("/images/faux-columns.png") repeat-y; width:990px; margin-top:-14px }
#wrapper { padding:0 330px 0 0; width:660px }
#header { background:url("/images/headerF.png") no-repeat; height:180px }
#header .logo { height:110px; left:30px; top:40px; width:217px }
#content { padding:30px 30px 60px; width:600px }
#rail { margin-right:-330px; padding:20px 30px 30px 0; width:300px }
#propaganda-menu { left:27px }
#propaganda-menu li { border-right:1px solid #BBB }

div.business, div.locale { float:left; width:500px  }
div.locale  { width:100px }
div.description-short { border-bottom:1px solid #DDD; clear:both; width:600px }
div.business, div.locale, div.description-short { margin-bottom:10px }
div.halfpage { display:block; float:left; width:300px }

/* banners */
#calltoaction { display:block; height:150px; padding:20px 0 0 30px; width:960px }
#calltoaction div.banner a { display:block; float:left; height:151px; width:300px; text-indent:-9999em }
.banner.advertise a { background:url("/images/banner-business.png") no-repeat; padding-right:16px  }
.banner.transport a { background:url("/images/banner-transport.png") no-repeat; padding-right:16px }
.banner.storage a { background:url("/images/banner-storage.png") no-repeat; padding-right:0 }
.contentbanner a { display:block; height:200px; text-indent:-9999em; width:600px }
.contentbanner.advertise a { background:url("/images/banner-advertise.png") no-repeat }

.companies {}
.companies dt { background:#E1E1E1; color:#333; font-size:1.2em; padding:5px 10px }
.companies dd { background:#E1E1E1; border-bottom:1px solid #DDD; margin-bottom:10px; padding:5px 10px }
.companies dd .description { float:left; padding-right:40px; width:350px }
.companies dd .locale { float:left; margin-left:10px; width:165px }
.companies dd .item-taglist ul { margin-left:0 }
.companies dd .item-taglist ul li { float:none }
.company-wrapper .contact .details, .company-wrapper .contact .form { float:left; width:50% }
.button-get-quote { background:url("/images/get-quote.png") no-repeat; cursor:pointer; display:block; float:left; height:24px; text-indent:-9999em; width:125px }

/*.contact-wrapper .left, .contact-wrapper .right { float:left }
.contact-wrapper .left { width:50% }
.contact-wrapper .right { border-left:1px solid #CCC; padding:0 0 0 2%; width:47% }
.contact-wrapper .right h2 { margin-top:0 }*/
.company-wrapper fieldset dt { float:none; margin:0; padding:0 0 3px; text-align:left }
.company-wrapper fieldset dd { float:none; padding:0; margin:0 0 10px }
.company-wrapper fieldset input.text-field, .company-wrapper fieldset textarea.text-area { width:95% }

/* rail banners */
.railbanner a { display:block; height:90px; text-indent:-9999em; width:300px  }
.railbanner.transportation a { background:url("/images/railbanner-transport.png") no-repeat }
.railbanner.advertise a { background:url("/images/railbanner-business.png") no-repeat }
.railbanner.storage-rail a { background:url("/images/railbanner-storage.png") no-repeat }
.railbanner.packaging a { background:url("/images/railbanner-packaging.png") no-repeat }
.railbanner-ad a { display:block; height:180px; text-indent:-9999em; width:300px; margin-bottom:20px  }
.railbanner-ad.transport-rail a { background:url("/images/railbanner-advertise-transport.png") no-repeat }
.railbanner-ad.storage-rail a { background:url("/images/railbanner-advertise-storage.png") no-repeat }
.illustration-payment { background:url("/images/banner-payment.png") no-repeat; display:block; height:90px; text-indent:-9999em; width:300px }

/* basket */
.basket-summary { background:#9c3; padding:0 30px 15px }
.basket-summary p { color:#000; padding:0; margin:0 }
.basket-summary p strong.highlight { color:#FFF }


#basket-summary { background:url("/images/basket-image.png") no-repeat; height:90px; position:relative; width:100% }
#basket-summary span { position:absolute }
#basket-summary .items { font-weight:700; right:5px; text-align:right; bottom:77px }
#basket-summary .total { color:#FFF; bottom:37px; font-size:1.5em; font-weight:700; right:5px; text-align:right }
#basket-summary .link { bottom:60px; right:0 }
#basket-summary .logos { bottom:0; right:0 }
#basket-summary .basket-image {  display:block; float:left; height:50px; width:70px }
#basket-summary a.textlink { color:#FFF }


/* main */
.main-menu { bottom:0; left:30px  }
.main-menu li { border:none; float:left; padding:0 1px 0 2px }
.main-menu li.spacer { padding:0 0 0 10px }
.main-menu a, .main-menu a span { cursor:pointer; display:block; float:left }
.main-menu a { background:url("/images/main-menuL.png") no-repeat left top; padding:0 0 0 6px }
.main-menu a span { background:url("/images/main-menuR.png") no-repeat right top; color:#000; font:400 1.1em "Trebuchet MS", Arial, Helvetica, sans-serif; height:18px; padding:5px 25px 5px 19px }
.main-menu a:hover { background-position:left -30px; text-decoration:none }
.main-menu a:hover span { background-position:right -30px; color:#333 }
.main-menu a.active, .main-menu a.active:hover { background-position:left -60px }
.main-menu a.active span, .main-menu a.active:hover span { background-position:right -60px; color:#333 }

/* rail-menu */
.rail-menu { font-size:1.1em; margin:0 }
.rail-menu li { border-bottom:1px solid #888; width:270px }
.rail-menu li.last-child { border:none }
.rail-menu li.active { font-weight:700 }
.rail-menu a, .rail-menu a span { display:block; cursor:pointer }
.rail-menu a { width:100% }
.rail-menu a span { color:#FFF; height:28px; line-height:2em; padding:1px 0 0 5px }
.rail-menu a:hover { background-color:#88B52D }
.rail-menu a:hover span { background-position:0 -31px; color:#333; font-weight:700 }
.rail-menu li.active a span { background-position:0 -31px; color:#333; font-weight:700 }

/* products */
.product-wrapper .product-list li { width:500px }
.product-wrapper .info { background:#CCC }
.product-wrapper .info div, .product-wrapper .description div { float:left }
.product-wrapper .info .col1 { color:#333; font-weight:700; padding:8px 0 8px 10px; width:355px }
.product-wrapper .info .col2 { color:#333; font-weight:700; padding:8px 8px 8px 0; width:127px }
.product-wrapper .description { background:#FFF; border:1px solid #CCC }
.product-wrapper .description .col1 { padding:8px 0 8px 8px; width:77px }
.product-wrapper .description .col2 { padding:8px 8px 8px 10px; width:262px }
.product-wrapper .description .col3 { padding:8px 0; width:133px }
.product-wrapper .description .col3 strong { display:block; padding:0 0 3px 3px }

.product-wrapper .left, .product-wrapper .right { float:left; margin-top:20px }
.product-wrapper .left { padding:0 10px 0 0; width:250px }
.product-wrapper .left p { text-align:justify }
.product-wrapper .left .price { font-size:1.5em; font-weight:700 }
.product-wrapper .right { padding-left:40px; width:170px }
.product-wrapper .right .gallery { /*border-top:1px solid #CCC;*/ padding:10px 0 0 0; width:300px }
.product-wrapper .right .gallery h3 { text-align:center; width:160px; padding:0 }
.product-wrapper .right .gallery ul li { display:block; float:left; margin:0 0 10px; text-align:center; width:162px }
.product-wrapper .right .gallery ul img { border:1px solid #99CC33 }

.product-wrapper .info .basket-functions { float:none }
.basket-functions input { margin:5px 5px 0 0; height:14px }
.basket-functions button.add { background:url("/images/button-add.png") no-repeat left top; height:30px; width:70px }
.basket-functions button.remove { background:url("/images/button-remove.png") no-repeat left top; height:30px; margin-left:35px; width:90px }

/* panels */
#rail .panel { background:#999 url("/images/rpanel-T.png") no-repeat right top; margin:0 0 20px; padding:0 }
#rail .panel .body { padding:20px 0 0 15px }
#rail .panel .footer { background:url("/images/rpanel-B.png") no-repeat right top; height:16px }
#rail .panel.alternative { background-color:#9C3; background-image:url("/images/rpanel-alt-T.png") }
#rail .panel.alternative .footer { background-image:url("/images/rpanel-alt-B.png") }
#rail .panel.checkout .body { padding:20px 15px 0 15px }

#rail fieldset dt, #rail fieldset dd { float:none }
#rail fieldset dt { text-align:left; padding:0 0 2px }
#rail fieldset .actions { padding-left:0 }

/*lists*/
/*dl { line-height:1.6em; margin-bottom:10px }
dt { font-weight:700 }*/
/* textlink */
a.textlink { color:#7BA12E }
a.textlink:hover { background-color:#88B52D; color:#FFF }
/* illustrations */
.illustration { display:block; float:left; height:80px; width:80px; margin:5px 20px 20px 0 }
.illustration-moving { background:url("/images/illustration-moving.png") no-repeat }
.illustration-storage { background:url("/images/illustration-storage.png") no-repeat }
.illustration-transport { background:url("/images/illustration-transport.png") no-repeat }
/* styles */
h2 { font-size:2em; border-bottom:none; padding-bottom:15px  }
h2 span { font-weight:700 }
#content h2 { background:url("/images/deco-h2.png") no-repeat right bottom; border-bottom:none; padding-bottom:10px; margin-bottom:20px }
h2, h3 { font-family:Tahoma, Arial, Helvetica, sans-serif;  }
#rail div.basket-panel h2 { color:#333; padding:0; margin:0 }

#rail h2 { color:#efefef; padding-bottom:0 }
#rail #basket-summary h2 { color:#333; font-weight:700 }

.article-tags div { display:none }

h2, #content h2.rule { color:#333 }
#content h2.rule { border-bottom:1px solid #DDD }
h3 { border-bottom:1px solid #DDD; color:#87B32D }
p, ul { line-height:1.5em }
p { text-align:justify }

.content-form button.submit { margin-left:140px }
fieldset .actions button { background:#000; border:none; cursor:pointer; padding:0; text-indent:-9999em }
fieldset .actions button.submit { background:url("/images/button-submit.png") no-repeat; height:30px; width:90px }

#content .content-form dt { width:130px; line-height:1.5em; text-align:left }
#content .content-form { padding-top:18px }

/* Faux Classes for layout */
.faux-productlisting a { display:block; height:200px; text-indent:-9999em; width:600px; background:url("/images/faux-productlisting.png") no-repeat; padding-bottom:20px }

div.faux-image { float:right; height:200px; width:300px; text-align:right }
.back { display:block; height:30px; text-indent:-9999em; width:70px; background:url("/images/button-back.png") no-repeat; padding-bottom:20px }

