/*
	 * JL @2008
	 * Screen CSS
	 *
	 *
	 */

@import "jl-typo.css";


html, body, div, p, blockquote, h1, h2, h3, h4, h5, h6, form, fieldset, legend, ul, ol, li, dl, dt, dd, a, img, address, strong, em
	{ margin: 0; padding: 0; font-weight: normal; font-style: normal; list-style: none; border: 0; outline: none; }
a span { cursor: pointer; }

form legend { display: none; }

html {  }
body { background: url(../images/bg.jpg) center top; font: 0.85em/1.4em "Tahoma", "Verdana", Arial, sans-serif; }

.aural { position: absolute; left: -100em; }

a { color: #d4d640; text-decoration: none; }
a:focus, a.focus, a:hover { color: #a1a1a1; text-decoration: underline; }

.flash-replaced .alt { display: block; height: 0; position: absolute; overflow: hidden; width: 0; }
.prod-list .prod-item:after, .mod:after { display: block; height: 0; clear: both; font-size: 0; visibility: hidden; content: '.' }

/* main */

#page { width: 980px; margin: 0 auto; }
#page #logo { width: 980px; height: 129px; }

/* top */

#nav { width: 980px; height: 31px; background: url(../images/jl_05.gif) no-repeat; }
#nav li { position: relative; float: left; z-index: 1; }
#nav li a { display: block; height: 31px; text-indent: -100em; overflow: hidden; }
#nav li.item-1>a {  width: 88px; background: url(../images/bg-item-1.png) no-repeat; }
#nav li.item-2>a { width: 260px; background: url(../images/bg-item-2.png) no-repeat; }
#nav li.item-3>a { width: 195px; background: url(../images/bg-item-3.png) no-repeat; }
#nav li.item-4>a { width: 135px; background: url(../images/bg-item-4.png) no-repeat; }
#nav li.item-5>a { width: 50px; background: url(../images/bg-item-5.png) no-repeat; }
#nav li.item-6>a { width: 95px; background: url(../images/bg-item-6.png) no-repeat; }
#nav li:hover { z-index: 100 }
#nav li:hover>a,
#nav li.active>a,
#nav li a:hover { background-position: 0 100%; }
#nav li:hover div { display: block; }
#nav .item-2 div { width: 402px; }
#nav div { display: none; position: absolute; top: 28px; left: 0; width: 201px; padding: 10px 0; border: 1px solid #000; background: url(../images/bg-nav-child.png) repeat 0 0; z-index: 101 }
#nav div h3 { height: 32px; clear: both; margin: 0 10px 10px; background: url(../images/bg-nav-child-products.png) no-repeat 0 100%; text-indent: -100em; overflow: hidden }
#nav div h3:first-child { height: 12px; background: url(../images/bg-nav-child-services.png) no-repeat 0 0; }
#nav div ul { width: 201px; float: left; }
#nav div li { position: static; float: none; background: url(../images/bg-nav-item.png) repeat-y 201px 0; }
#nav div li:hover { background-position: 0 0; }
#nav div a { height: auto; padding: 2px 20px; color: #fff; background: url(../images/icon-arrow.png) no-repeat 10px 55%; font: bold 14px Arial, Helvetica, sans-serif; text-indent: 0; text-decoration: none; overflow: visible; }
#nav div a:hover { background-position: 10px 55%; }

#wrap { width: 980px; height: 1%; padding: 0 0 23px; background: #1c1c1c url(../images/bg-wrap.jpg) no-repeat 0 100%; overflow: hidden; }
#wrap.col-2-lay { padding: 10px 0 0; }
#wrap.col-2-lay #content { width: 620px; padding: 0 10px; }
#wrap.col-2-lay #bar-right { width: 330px; float: right }

#content { width: 510px; min-height: 408px; float: left; padding: 0 10px 30px; color: #fff; background: #373737 url(../images/jl_12.jpg) no-repeat; }


/* bars */
#bar-left { width: 240px; float: left; }
#bar-left h4 { height: 29px; padding: 20px 0 0 25px; background: url(../images/hd-bar.png) no-repeat 0 0; overflow: hidden }
#bar-left h4 embed { height: 100%; }
#bar-left ul li a { display: block; height: 1%; margin: 0 0 0 10px; padding: 5px 0 5px 15px; color: #d4d640; background: url(../images/left-arrow.gif) no-repeat 0 9px; font: bold 12px "Tahoma", "Verdana", Arial, sans-serif; }
#bar-left ul li ul { display: none; margin: 0 0 0 10px; }
#bar-left ul li li li a { padding-left: 22px; background-image: none; font-weight: normal; }
#bar-left ul li a.down { background: url(../images/left-arrow-down.gif) no-repeat 0 9px; }
#bar-left ul li a.active { padding-left: 20px; }
#bar-left ul li.underline { padding-bottom: 15px; margin-bottom: -5px; background: url(../images/jl_16.gif) no-repeat left bottom; }


#bar-right { width: 210px; float: left; }
#bar-right h4 { height: 29px; padding: 20px 0 0 25px; background: url(../images/hd-bar.png) no-repeat 0 100%; overflow: hidden }
#bar-right h4 embed { height: 100%; }
#bar-right li#enquire { position: relative; width: 210px; height: 115px; background: url(../images/enquire.gif) no-repeat; }
#bar-right li#free { position: relative; width: 210px; height: 116px; background: url(../images/free.gif) no-repeat; }
#bar-right li#cargo-advice { position: relative; width: 210px; height: 117px; background: url(../images/cargo.gif) no-repeat; }
#bar-right li a { position: absolute; left: 30px; bottom: 20px; color: #d5d746; font-size: 12px; }

#bar-right .mod { margin: 0 0 10px; background-color: #373737 }
#bar-right .mod h4 { margin: 0 0 7px; padding-top: 11px}
#bar-right .mod img { position: relative; display: block; }

.mod-enquiry { padding: 0 0 10px; background: url(../images/bg-gradient1.png) no-repeat 100% 100%; }
.mod-enquiry p { line-height: 26px; padding: 0 10px 8px; }
.mod-enquiry label { display: inline-block; width: 75px; height: 26px; color: #cc3; text-transform: uppercase; font-size: 11px; vertical-align: top }
.mod-enquiry textarea,
.mod-enquiry input[type=text] { width: 225px; height: 24px; border: 1px solid #979797; }
.mod-enquiry textarea { height: 180px; }
.mod-enquiry input[type=submit] { width: 227px; height: 0; float: right; margin: 0 2px; padding: 25px 0 0; border: 0; background: url(../images/btn-contact.png) no-repeat 0 0; text-indent: 100em; overflow: hidden; cursor: pointer; }

.mod-alert { clear: both; padding: 5px 0 0; border-bottom: 10px solid #1c1c1c; color: #373737; }
.mod-alert img { display: block; }

/* footer */

#footer { position: relative; width: 980px; height: 82px; clear: both; background: url(../images/bg-footer.png) no-repeat 50% 0; }
#footer ul { padding: 0 0 0 25px; }
#footer ul li { height: 40px; float: left; color: #999; font: 12px/40px "Tahoma", "Verdana", Arial, sans-serif; }
#footer ul li a { padding: 0 5px; color: #ba2921; }
#footer ul li.made-by { width: 32px; height: 32px; float: right; padding: 4px; background: #fff; text-align: center; overflow: hidden; }
#footer ul li.made-by-text { padding: 0 5px; height: 40px;   float: right; }

#footer ul li.made-by a { margin: 0 -5px; float: right;}
#footer ul li.copyright { width: 350px; }
#footer p { clear: both; text-align: center }
#footer p a {  }