/* ---- IMPORT SHEETS ---- */
@import url("base.css");

/* ---- GLOBALS ---- */
body { background:#f1f1f1 url("/img/shell/bodyF.png") repeat-x; color:#444 }
#content { position:relative }
#rail { position:relative }

/* ---- COLUMNS ---- */
#layout-wrapper { background:url("/img/shell/faux-columns.png") repeat-y }
#content { background:url("/img/shell/contentF.jpg") no-repeat; padding:0 20px; width:577px }
#content.home-content { height:400px }
#rail { background:url("/img/shell/railF.jpg") no-repeat; padding:0 10px; width:133px; height:415px }

/* ---- FOOTER ---- */
#footer { background:url("/img/shell/footer.png") no-repeat }

/* ---- STYLES ---- */
h2 { color:#071950; font-size:1.5em; font-weight:700; line-height:1em; padding:10px 0 5px 0 }
h3 { color:#071950; font-size:1.1em; font-weight:700; line-height:1em; padding:5px 0 5px 0 }
h4 { color:#071950; font-size:1em; font-weight:700; line-height:1em; padding:20px 0 10px 0 }
#red-italic { color:#E2091A; font-style:italic; padding:0 20px 10px 0 }

p { color:#071950; font-family:Tahoma, Arial, Helvetica, sans-serif, sans; font-size:0.9em; line-height:1.4em; padding:0 20px 5px 0 }
a { color:#E11131 }
a:hover { color:#FFF }
.right-padding { padding-right:210px }
#float-button { float:right; margin:-20px 10px 0 0 }
.bold-italic-red { color:#E2091A }

.plainlist { margin:0 0 5px 0; padding-left:10px }
.plainlist li { color:#071950; list-style:disc; font-family:Tahoma, Arial, Helvetica, sans-serif, sans; font-size:0.9em; line-height:1.4em; margin-left:10px }
.plainlist-floatL { float:left; width:145px; padding-left:10px }
.plainlist-floatR { float:left; margin-left:0; width:140px } 
.li-text { color:#071950 }
.career a { background:url("/img/shell/career.jpg") no-repeat; clear:both; display:block; width:576px; height:218px; margin-top:40px; text-indent:-9999em }

/* ---- MENUS ---- */
/* main-menu */
.main-menu { color:#FFF; font-family:Arial, Helvetica, sans-serif, sans; font-size:0.8em; left:0; position:absolute; top:40px; margin:0 0 0 0; width:130px }
.main-menu li { background:url("/img/shell/bulllet.png") no-repeat 0 0.2em; font-weight:500; margin:0; padding:0 }
.main-menu a { background:url("/img/shell/button-mainnav.png") no-repeat left 1px; color:#FFF; display:block; font-size:0,8em; padding:0 0 0 10px; text-decoration:none; width:100% }
.main-menu a:hover, .main-menu a.active { background-position:left -14px; color:#FFF }

/* SUBNAV - Products */
.subnav { margin:0 10px 5px 0; width:190px }
.subnav li { margin-bottom:1px; padding:0 }
.subnav a { background:url("/img/shell/button-subnav.png") no-repeat left 1px; color:#FFF; display:block; font-size:0.8em; padding:0 0 1px 10px; width:100% }
.subnav a:hover { background-position:left -15px; color:#FFF; }
.subnav a.active, .subnav a.active:hover { background-position:left -15px; color:#FFF; }

/* SUBNAV4 - Products */
.subnav4 { background:url("/img/shell/subnav4-bg.png") no-repeat left 0; font-family:Tahoma, Arial, Helvetica, sans-serif, sans; font-size:0.9em; line-height:1.4em; float:right; height:160px; padding:5px; width:340px }
.subnav4 li { margin-bottom:1px; padding:0; width:290px }
.subnav4 a { background:url("/img/shell/button-subnav4-li.png") repeat-x left 1px; color:#FFF; display:block; font-size:0.9em; padding:0 0 1px 10px; width:100% }
.subnav4 a:hover { background-position:left -15px; color:#FFF; }
.subnav4 a.active, .subnav4 a.active:hover { background-position:left -15px; color:#FFF; }
.white-text { color:#FFF; font-family:Tahoma, Arial, Helvetica, sans-serif, sans; font-size:0.9em; line-height:1.4em }

/* SUBNAV2 - Rentals */
.subnav2 { margin:0 10px 0 0; width:290px }
.subnav2 li { margin-bottom:1px; padding:0 0 20px }
.subnav2 a { background:url("/img/shell/button-long.png") no-repeat left 1px; color:#FFF; display:block; font-size:0.8em; padding:0 0 1px 10px; width:100% }
.subnav2 a:hover { background-position:left -15px; color:#FFF; }
.subnav2 a.active, .subnav2 a.active:hover { background-position:left -15px; color:#FFF; }

/* SUBNAV3 - Rentals */
.subnav3 { margin:0 10px 30px 0; width:280px }
.subnav3 li { margin-bottom:1px; padding:0 }
.subnav3 a { background:url("/img/shell/button-long2.png") no-repeat left 1px; color:#FFF; display:block; font-size:0.8em; padding:0 0 1px 10px; width:100% }
.subnav3 a:hover { background-position:left -15px }
.subnav3 a.active, .subnav3 a.active:hover { background-position:left -15px; color:#FFF; }
.subnav3 .alternative-li { font-size:0.9em; margin:5px 5px 10px 5px; text-decoration:none }

/* BACKBUTTON - Rentals */
.backbutton { width:90px }
.backbutton li { margin-bottom:1px; padding:0 }
.backbutton a { background:url("/img/shell/backbutton.png") no-repeat left 1px; color:#FFF; display:block; font-size:0.8em; padding:0 0 1px 10px; width:90px }
.backbutton a:hover { background-position:left -15px }
.backbutton a.active, .backbutton a.active:hover { background-position:left -15px }

/* SUBNAV5 - Contact us */
.subnav5 {  }
.subnav5 li { margin-bottom:1px; padding:0 }
.subnav5 a { background:url("/img/shell/backbutton.png") no-repeat left 1px; color:#FFF; display:block; font-size:0.8em; padding:0 0 1px 10px; width:90px }
.subnav5 a:hover { background-position:left -15px; color:#FFF; }
.subnav5 a.active, .subnav5 a.active:hover { background-position:left -15px; color:#FFF; }

.map { background:#fc0 url("/img/shell/map.png") no-repeat right top; height:250px; position:absolute; top:80px; right:5px; width:330px }
.map-botswana { display:block; cursor:pointer; height:95px; width:80px; position:absolute; top:45px; left:105px }
.map-cape-town { display:block; cursor:pointer; height:20px; width:90px; position:absolute; top:225px; left:15px }
.map-durban { display:block; cursor:pointer; height:20px; width:90px; position:absolute; top:180px; left:200px }
.map-east-london { display:block; cursor:pointer; height:20px; width:90px; position:absolute; top:205px; left:185px }
.map-joburg { display:block; cursor:pointer; height:20px; width:90px; position:absolute; top:145px; left:120px }
.map-mozambique { display:block; cursor:pointer; height:145px; width:60px; position:absolute; top:0; left:250px }
.map-namibia { display:block; cursor:pointer; height:120px; width:65px; position:absolute; top:45px; left:35px }
.map-port-elizabeth { display:block; cursor:pointer; height:20px; width:90px; position:absolute; top:230px; left:155px }
.map-zimbabwe { display:block; cursor:pointer; height:65px; width:55px; position:absolute; top:30px; left:190px }

/* ---- IMAGES ---- */
#home-schematic { background:url("/img/shell/home1.png") no-repeat; position:absolute; right:20px; top:20px; width:200px; height:200px }
#home-schematic-alt { background:url("/img/shell/home1-alt.png") no-repeat; position:absolute; right:20px; top:20px; width:200px; height:200px }
#home-graphic { background:url("/img/shell/home2.png") no-repeat; position:absolute; right:20px; top:170px; width:200px; height:200px }
#home-graphic-alt { background:url("/img/shell/home2-alt.png") no-repeat; position:absolute; right:20px; top:170px; width:200px; height:200px }

#about-graphic-a { background:url("/img/shell/about1.png") no-repeat; position:absolute; right:20px; top:20px; width:200px; height:148px }
#about-graphic-b { background:url("/img/shell/about2.png") no-repeat; position:absolute; right:20px; top:170px; width:200px; height:148px }

#services-graphic-a { background:url("/img/shell/services1.png") no-repeat; position:absolute; right:20px; top:20px; width:200px; height:148px }
#services-graphic-b { background:url("/img/shell/services2.png") no-repeat; position:absolute; right:20px; top:170px; width:200px; height:148px }

#download { background:url("/img/shell/download.png") no-repeat; cursor:pointer; height:20px; left:55px; position:absolute; text-indent:-9000px; top:235px; width:180px } 

/* ---- IMAGES - Our Clients ---- */
#our-clients { background:url("/img/shell/our-clients.jpg") no-repeat center top; display:block; height:308px; margin:20px 0; width:554px }

.img-entries { margin:0 0 0.8em 0.8em; }
.img-entries li { background:url("none"); border:1px solid #333; float:left; height:65px; list-style:none; margin:0 5px 5px 0; overflow:hidden; padding:0; text-align:center; width:150px; }
.img-entries2 { background:url("none"); border:1px solid #333; float:left; height:100px; list-style:none; margin:0 5px 5px 0; overflow:hidden; padding:0; text-align:center; width:150px; }

#logo-maropeng { background:url("/img/shell/logo-maropeng.png") no-repeat center top; display:block; width:150px; height:65px }
#logo-the-meat-co { background:url("/img/shell/logo-the-meat-co.png") no-repeat center top; display:block; width:150px; height:65px }
#logo-city-lodge-hotels { background:url("/img/shell/logo-city-lodge-hotels.png") no-repeat center top; display:block; width:150px; height:65px }
#logo-compass-groups { background:url("/img/shell/logo-compass-groups.png") no-repeat center top; display:block; width:150px; height:65px }
#logo-nandos { background:url("/img/shell/logo-nandos.png") no-repeat center top; display:block; width:150px; height:65px }
#logo-centenary { background:url("/img/shell/logo-centenary.png") no-repeat center top; display:block; width:150px; height:65px }

#img-maropeng { background:url("/img/shell/logo-maropeng.png") no-repeat center top; width:150px; height:100px }
#img-the-meat-co { background:url("/img/shell/logo-the-meat-co.png") no-repeat center top; width:150px; height:100px }
#img-city-lodge-hotels { background:url("/img/shell/logo-city-lodge-hotels.png") no-repeat center top; width:150px; height:100px }
#img-compass-groups { background:url("/img/shell/logo-compass-groups.png") no-repeat center top; width:150px; height:100px }
#img-nandos { background:url("/img/shell/logo-nandos.png") no-repeat center top; width:150px; height:100px }
#img-centenary { background:url("/img/shell/logo-centenary.png") no-repeat center top; width:150px; height:100px }

/* ---- IMAGES - Products ---- */
#products-frame { display:block; font-weight:700; position:absolute; right:60px; top:205px; width:290px; height:230px; padding:0 }
#products-frame img { padding-bottom:3px }

#storage { background:url("/img/shell/storage.png") no-repeat; font-weight:700; position:absolute; right:60px; top:210px; width:290px; height:230px; padding-top:235px }
#service-trolleys { background:url("/img/shell/service-trolleys.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#refrigeration { background:url("/img/shell/refrigeration.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#beverage { background:url("/img/shell/beverage.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#ware-washing { background:url("/img/shell/ware-washing.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#ware-washing { background:url("/img/shell/ware-washing.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#preparation-machinery { background:url("/img/shell/preparation-machinery.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#fabrication { background:url("/img/shell/fabrication.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#service-counters { background:url("/img/shell/service-counters.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#waste-disposal { background:url("/img/shell/waste-disposal.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#ovens { background:url("/img/shell/ovens.png") no-repeat; position:absolute; right:60px; top:220px; width:290px; height:230px }
#cooking-equipment { background:url("/img/shell/cooking-equipment.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }
#holding-warming-display { background:url("/img/shell/holding-warming-display.png") no-repeat; position:absolute; right:60px; top:210px; width:290px; height:230px }

/* ---- PROFESSIONAL DESIGN PLANNING ---- */
#schematic { background:url("/img/shell/professional-design-planning-schematic.png") no-repeat; position:absolute; right:20px; top:20px; width:200px; height:200px }
#diagram { background:url("/img/shell/professional-design-planning-diagram.png") no-repeat; position:absolute; right:18px; top:170px; width:580px; height:375px }

/* ---- SPECIALS ---- */
.download { background:url("/img/shell/adobe.png") no-repeat right 3px; font-size:11px; font-weight:700; line-height:1.8em; padding:0 20px 2px 2px; position:absolute; top:10px; right:20px; width:140px }
.download a { color:#E11131; text-decoration:underline; }
.download a:hover { color:#333; text-decoration:none; }

/* ---- CONTACT US ----*/
.contact-numbers { margin:5px 0 }
.contact-numbers dt { clear:left; font-size:0.9em; float:left; line-height:1.8em; width:100px }
.contact-numbers dd { line-height:1.8; font-size:0.9em;  margin-bottom:3px; padding:0 3em }
.left-spacer { line-height:1.8; margin:0 0 5px 33px; padding:0 3em; text-decoration:none }
.contact-numbers .email { font-weight:700; line-height:1.8em; padding:0 3em 2em 3em }

/* ---- CONTACT-FORM ---- */
h2 span { text-transform:uppercase }
h2 a:hover { color:#E11131; text-decoration:underline }
.contact-form h3 { clear:both }
.contact-form fieldset { border:none }
.contact-form fieldset ol { padding-bottom:20px }
.contact-form fieldset label.desc { border-bottom:1px solid #CCC; display:block; float:left; font-size:0.9em; line-height:1.5em; padding:5px 4px 1px 0; width:100px }
.contact-form fieldset li { clear:both; padding-bottom:5px }
.contact-form fieldset li:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
.contact-form fieldset li { display:inline-block; height:1% }
.contact-form .user-info label.first-child { padding-top:0 }
.contact-form .user-info div { float:left; padding-left:10px }
.contact-form input.text_field, input.password_field, .contact-form textarea.text_area, .contact-form select.select { background:#FFF; border:1px solid #000; border-color:#7C7C7C #C3C3C3 #C3C3C3 #7C7C7C; padding:3px }
.contact-form input.checkbox, .contact-form input.radio { display:block; float:left; height:13px; line-height:1.4em; margin:0 3px 0 0; width:13px }
.contact-form p { margin:0; padding:0 }
.contact-form .security-check label.desc { border:none; float:none }
.contact-form .security-check div label { float:none; display:block; padding:5px 0 }
.contact-form .message { font-weight:700; font-size:0.9em; padding:2px 0 4px }
.contact-form .message.error { color:#900 }
.contact-form .info { font-size:0.9em; color:#999; padding-left:20px }
.contact-form .text_field, .contact-form .text_area { width:200px }