/*
 * $Id$
 */

/*
    Colours:
    #0071bc blue - a
    #fecb00 yellow - h1, nav highlight
    #0066a2 blue - footer links
    #002147 navy - h2, h3
    #f7f7f7 light grey - nav bg, home gb
    #b7b7b7 grey - nav divider
    #d5d5d5 grey - nav top border
    #b4b4b4 grey - strapline
    #333333 grey - text
*/

html { font-size: 1.25em; }
body { font:  50% helvetica,arial,sans-serif; }
html > body { font-size: 10px; }
table, td, input, textarea, select { font: 1em helvetica,arial,sans-serif; }

* {
    margin: 0;
    padding: 0;
    outline: 0;
    vertical-align: baseline;
}

:focus { outline: 0; }

/*
 * Generic styles
 */
body{
    background: #e3e3e3;
}

p {
    margin: 15px 0;
}

.left-column + p, .right-column + p, p.first {
    margin-top: 0;
}

h1 { 
    font: 1.6em calibri,helvetica,arial,sans-serif; 
    color: #fecb00;
}

h2 { 
    font-size: 1.4em; 
    color: #002147;
    margin: 0 0 15px 0;
}

h3 { 
    font-size: 1.2em; 
    color: #002147 ;
}

h4 { 
    font-size: 1em; 
    color: #002147 ;
}


a {
    color: #0071bc;
}

a:active {

}

a:hover {

}

.clear {
    clear: both;
}

.break {
    padding-top: 40px;
    clear: both;
}

a img {
    border: none;
}
em {
    font-size: 1.2em;
    font-weight: bold;
    font-style: normal; 
    color: #002147;
}

/*
 * Page Container
 * Allows for setting of the base font size relative to the body
 */
#container {
    font: 1.2em helvetica, tahoma, arial, sans-serif;
    line-height: 1.5;
    width: 800px;
    margin: 0 auto;
    position: relative;
    background: #FFF;
    color: #333;
}

/*
 * Header
 */
#header {
    background: #002147 url(../images/logo3.png) no-repeat 55px center;
    height: 97px;
    position: relative;
}

#header p {
    background: transparent url(../images/logo-qube.png) no-repeat 607px 27px;
    padding: 58px 32px 0 0;    
    color: #b4b4b4;
    font-size: 1.5em;
    text-align: right;
    line-height: 1;
    margin: 0;
    position: relative;
    z-index: 1;
}

#header a.home-link {
    position: absolute;
    left: 55px;
    top: 19px;
    width: 215px;
    height: 60px;
    display: block;
    z-index: 3;
}

#header a.qube {
    position: absolute;
    left: 607px;
    top:27px;
    width: 162px;
    height: 16px;
    display: block;
    z-index: 2;
}

#header a span, #zero-harm a span {
    position: absolute;
    left: -999em;
}

/* Nav */
#nav {
    list-style: none;
    background: #f7f7f7;
    border-top: 1px solid #d5d5d5;
    height: 41px;
    padding-left: 22px;
    position: relative;
    z-index: 5;
}

#nav li {
    float: left;
    line-height: 41px;
    position: relative;
}

#nav a {
    color: #333;
    text-decoration: none;
    border-right: 2px solid #b7b7b7;
    font-weight: bold;
    padding: 0 12px;
}

#nav li.last a {
    border-right-width: 0;
}

#nav li.selected a {
    color: #fecb00;
}

#nav li.selected li a {
    color: #000;
}

#nav a:hover {
    text-decoration: underline;
}

#nav a.selected:hover {
    text-decoration: none;
}

#nav ul {
    position: absolute;
    left: -999em;
    top: 41px;
    z-index: 6;
    list-style: none;
    white-space: nowrap;
}

#nav ul li {
    float: none;
    line-height: 30px;
}

#nav ul a {
    display: block;
    border: 0;
    border-top: 1px solid #d5d5d5;
    background: #f7f7f7;
    height: 30px;
}

#nav li:hover ul {
    left: 0;
}


/*
 * Banner
 */
#banner {
    height: 206px;
    position: relative;
    z-index: 2;
}

#banner .mask {
    background: transparent url(../images/banner-mask3.png) no-repeat 0 0;
    height: 113px;    
    width: 800px;
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
}

#banner h1 {
    position: absolute;
    z-index: 4;
    bottom: 20px;
    left: 32px;
    font-weight: normal;
}

.home {
    background: url(../images/banner-home.jpg);
}

.environmental {
    background: url(../images/banner-environmental.jpg);
}

/* 5 */
.health-safety {
    background: url(../images/banner21.jpg);
}

.news {
    background: url(../images/banner2.jpg);
}

.about {
    background: url(../images/banner14.jpg);
}

/* 6 */
.jobs {
    background: url(../images/banner23.jpg);
}

.contact {
    background: url(../images/banner16.jpg);
}

/* 17 */
.quote {
    background: url(../images/banner22.jpg);
}

.facilities {
    background: url(../images/banner13.jpg);
}

.bulk {
    background: url(../images/banner20.jpg);
}

.port {
    background: url(../images/banner18.jpg);
}

.rotator {
    background: url(../images/banner24.jpg);
}
#about-intro {
    font-size: 1.3em;
}


/*
 * Main Content
 */
#main {
    padding: 25px 32px;
    overflow: auto;
}

#main ul {
    margin: 0 0 0 22px;
}

#main ol {
    margin: 15px 0 0 22px;
}


/*
 * Two Column
 */
.left-column {
    float: left;
    width: 350px;
    padding-right: 18px;
}

.right-column {
    float: left;
    width: 350px; 
    padding-left: 18px;
}  

/*
 * Footer
 */
#footer {
    background: #fff url(../images/footer2.png) no-repeat 0 0;
    height: 140px;
    padding: 65px 32px 0 32px;
}

#footer h2 {
    margin-bottom: 20px;
}

#footer h3 {
    margin: 0;
    font-size: 1em;
}

#footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#footer li {
    float: left;
    padding: 0 8px;   
}

#footer li li {
    float: none;
    padding: 0;
}

#footer li.first {
    padding-left: 0;
}

#footer li.last {
    padding-right: 0;
    margin-right: -40px;
}

/*
 * Zero Harm
 */
#zero-harm {
   height: 27px;
   background: #002147 url(../images/zero-harm.png) no-repeat 500px 0;
   position: relative;
}

#zero-harm a.qube {
    position: absolute;
    left: 500px;
    top: 0;
    width: 165px;
    height: 26px;
    display: block;
}


/*
 * Copyright
 */
#copyright {
    background: #e3e3e3;
    line-height: 42px;
    color: #999;
    font-size: 0.9em;
}


/*
 * News
 */
.newsItem {
    padding-top: 2em;
    border-top: 1px solid #CCC;
    margin-bottom: 2em;
}

#news .first {
    border: 0;
    padding: 0;
}

.newsItem img {
    float: left;
}

.newsItem .body {
    margin-left: 220px;
}

.newsItem .body h2 {
    padding-top: 0;
}


/*
 * Contact Us
 */
#addresses h2 {
    clear: left;
    border-bottom: 1px solid #CCC;
}

.address {
    float: left;
    margin: 0 18px 20px 0;
    width: 166px;
}

.address em, em {
    font-style: normal;
}




#facilities li {
    margin: 0 12px 0 0;
}

#jobs li {
    line-height: 2;
}

#panel {
    display: none;
}

.notice {
    float: left;
    width: 450px;
    margin: 0;
}


/* rotator */
#gallery {
    width: 350px;
    height: 250px;
    overflow: hidden;
}
/*
#gallery .viewer {
    width: 350px;
    height: 220px;
    overflow: hidden;
    margin-bottom: 10px;
}
#gallery .images div {
    width: 350px;
    height: 220px;
    text-align: center;
    float: left;
}
*/
#gallery .arrows {
    position: absolute;
    bottom: 0;
    right: 0;
    /*
left: 50%;
    margin-left: -22px;
*/
}
#gallery .arrows li {
    width: 20px;
    height: 20px;
    display: block;
    margin-right: 2px;
    float: left;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
}
#gallery-arrows .left {
    background: transparent url(../images/arrow-left.png) no-repeat center center;
}
#gallery-arrows .right {
    background: transparent url(../images/arrow-right.png) no-repeat center center;
}

#gallery {
    position: relative;
}
#gallery li {
    border: none;
    overflow: auto;
    padding: 0;
}
#gallery li img {
    margin: 0 auto;
}
#gallery .items {
    list-style: none;
    position: absolute;
    left: 0;
    height: 220px;
    overflow: hidden;
}
#gallery .items li {
    float: left;
    position: relative;
    overflow: hidden;
    width: 350px;
    height: 220px;
    text-align: center;
}
#video {
    display: none;
}
#video ul {
    list-style: none;
    margin: 0;
}
#video-fallback {
    width: 352px; 
    height: 200px;
    display: block;
}
.buttons {
    margin-top: 30px;
}
.buttons img {
    cursor: pointer;
}
.buttons img {
    margin-right: 20px;
}
.buttons div {
    float: left;
    margin-right: 20px;
}
.buttons div img {
    margin-right: 0;
}
#latest-news h2 {
    background: #FECB00;
    padding: 8px 12px;
    margin: 40px 0 0 0;
}
#latest-news ul {
    list-style: none;
    margin: 0;
    padding: 12px;
    background: #F3F3F3;
    height: 230px;
    overflow: auto;
}
#latest-news li {
    margin: 0 0 20px 0;
}
.rotator-contact {
    margin-left: 20px;
}
#latest-news p {
    margin: 5px 0;
}
#latest-news strong {
    font-weight: normal;
}