/**************************************************************
=Reset adapted from Eric Meyer 
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 
**************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button, 
table, caption, tbody, tfoot, thead, tr, th, td 
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

input, textarea, select 
{
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

/* remember to define focus styles! */
:focus 
{
outline: 0;
}

ol, ul 
{
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table 
{
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td 
{
text-align: left;
font-weight: normal;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after 
{
content: "";
}

blockquote, q 
{
quotes: "" "";
}

.skip, 
hr 
{
display: block;
position: absolute; 
left: -200em; 
}

hr 
{
visibility: hidden; 
}

img 
{
display: block;
}

strong 
{
font-weight: bold;
}

#main em
{
font-style: italic;
}

/* stuff */

body
{
font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 62.5%;
line-height: 1.385;
color:#404040;
}

#container 
{
max-width: 100em;
margin: auto;
position: relative;
}

#top {margin-top: 10px;}

#brand, 
#main 
{
font-size: 130%;
}

hr 
{
position: absolute;
left: -200em;
visibility: hidden;
}

/* =menu */

#menu 
{
width: 100%;
overflow: hidden;
background: #ccd2d5 url("/img/menu_bg.gif") repeat-x;
border-bottom: 1px solid #969ea6;
}

#menu li 
{
float: left;
line-height: 1;
letter-spacing: 1px;
font-weight: bold;
font-size: 110%;
}

#menu li a, 
#menu li strong
{
display: block;
text-transform: uppercase;
padding: 15px 16px 10px;
border-left: 1px solid #e0e4e6;
border-right: 1px solid #b3b6b9;
}

#menu li strong, 
#menu li strong:hover 
{
background: #eaecee url("/img/menu_strong.gif") repeat-x;
cursor: default;
color: #7c818a;
}

#menu li a:hover 
{
color: black;
background: #989fa7 url("/img/menu_hover.gif") repeat-x;
}

.greyborder
{border-style:solid;border-color:#c0c0c0;border-width:1px;}

/* =links */

a
{
text-decoration: none;
color: #00467b;
}

#main a:hover
{
color: black;
}

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

#brand 
{
padding: 6px 14px 23px;
}

#brand h1 span, 
#brand h1 a 
{
display: block; 
width: 272px;
height: 41px;
text-indent: -200em;
background: white url("/img/brand.gif") no-repeat;
}

#brand h2 
{
position: absolute;
right: 14px;
top: 37px;
width: 565px;
height: 9px;
text-indent: -200em;
text-transform: uppercase;
background: url("/img/brand_h2.gif") no-repeat;
}

#main 
{
width: 100%;
overflow: hidden;
position: relative;
background: #f1f2f6;
}

#main h1
{
position: absolute;
top: 0;
left: 25%;
width: 75%;
height: 131px;
background: #556072;
font-size: 30px;
font-weight: normal;
color: white;
}

.home #main h1         {background: url("/img/company_bg.jpg") no-repeat;}
.company #main h1      {background: url("/img/company_bg.jpg") no-repeat;}
.products #main h1     {background: url("/img/products_bg.jpg") no-repeat;}
.materials #main h1    {background: url("/img/materials_bg.jpg") no-repeat;}
.applications #main h1 {background: url("/img/applications_bg.jpg") no-repeat;}
.services #main h1     {background: url("/img/services_bg.jpg") no-repeat;}
.news #main h1         {background: url("/img/company_bg.jpg") no-repeat;}

#main h1 span 
{
display: block;
line-height: 131px;
vertical-align: middle;
padding: 0 20px;
position: relative;
}

#main h1 span span 
{
line-height: 1.2;
padding: 0;
position: absolute;
left: 2.7%;
top: 90px;
}

#dedicated 
{
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 131px;
background: black;
color: #8995a3;
font-style: italic;
}

#dedicated div 
{
font-size: 150%;
padding: 24px 3px 3px 14px;
height: 104px;
border-right: 1px solid white;
}

#menu_sub, 
#content, 
#content_sub 
{
float: left;
width: 25%;
margin-top: 131px;
}

/* =menu_sub */

#menu_sub 
{
background: #d6d8dd;
}

#menu_sub h2, 
#menu_sub h3, 
#menu_sub li a, 
#menu_sub li span, 
#menu_sub li strong 
{
padding: 0.385em 3px 0.385em 14px;
display: block;
line-height: 1.2;
border-top: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid #b4b7c0;
}

#menu_sub a:hover 
{
background: #989fa7 url("/img/menu_hover.gif") 0 100% repeat-x;
}

#menu_sub .current li
{
background: #eaecee;
border-top: 0;
border-bottom: 0;
}

#menu_sub .current ul a, 
#menu_sub .current ul strong 
{
padding-left: 28px;
}

#menu_sub .current strong 
{
background: #f1f2f6;
border-right: 0;
}

#menu_sub .current 
{
border-left: 7px solid #556072;
}

#menu_sub .current h4 span, 
#menu_sub .current strong 
{
color: #7c818a;
}

#menu_sub h3 
{
background: #eaecee;
}

#menu_sub h4 span, 
#menu_sub h4 span:hover, 
#menu_sub strong, 
#menu_sub strong:hover 
{
cursor: default;
}

/* =content */

#content 
{
padding: 8px 2% 60px; 
width: 46%;
min-height: 20em;
}

#content p {margin-top: 0.923em;}

#main h3, 
#main h4 
{
font-weight: bold;
}

#main h2 
{
font-size: 161.54%;
line-height: 1.143;
padding-top: 0.57em;
}

#content h2 
{
margin-top: 1.143em;
border-top: 6px solid #d6d8dc;
}

#content h2.first {border: 0;}

#main h3 
{
font-size: 115.38%;
line-height: 1.2;
padding-top: 1.2em;
}

#content .first 
{
padding-top: 0.2em;
margin-top: 0;
}

h1 span span {font-size: 46.7%;}
h2 span {font-size: 61.9%; white-space: nowrap;}

h1 dfn {color: #bbbfc7;}

/* Lists */

#content ol 
{
list-style: decimal;
margin-left: 2em;
}

#content .lower-roman 
{
list-style: lower-roman;
}

#content ul 
{
list-style: disc;
margin-left: 1.5em;
}

#content li, 
#content_sub li {margin-top: 0.462em;}

/* =materials */

#content #materials
{
list-style: none;
margin-left: 0;
}

#materials li {position: relative;}

#materials li h2 {padding-right: 4em;}

.stock, 
.stock_not 
{
position: absolute; 
left: 27%;
top: 1.05em;
padding: 4px 2px 5px;
background: #eadc9b;
width: 5.5em;
text-align: center;
}

#materials .stock, 
#materials .stock_not 
{
position: absolute; 
left: auto;
right: 0;
}

.stock {background: #baea68;}

/* =microformats */

.contact #content .vcard .adr {display: block;}
.contact #content .vcard .adr span {white-space: nowrap;}

#sales .work, 
.vcard .work, 
.vcard .cell, 
.vcard .web, 
.vcard h3
{
position: absolute;
left: -200em;
}

.south-africa .vcard .web {position: static;}

#content #sales ul, 
#content .vcard, 
#content .vcard ul
{
list-style: none;
margin-left: 0;
}

#content .tel 
{
font-size: 115.38%;
line-height: 1.2;
}

#content .vcard .telecoms, 
#content .vcard .internet {margin-top: 1.385em;}


/* =sales */

#sales 
{
margin-top: 18px;
padding: 8px 10px 10px;
background: #d6d8dc;
}

#main #sales h2 {margin-top: 0; padding-top: 0; border: 0;}



/* =content_sub */

#content_sub {position: relative;}

/* =menu_info */

#menu_info 
{
border-top: 1px solid white; 
padding: 14px;
background: #556072;
margin-bottom: 1em;
}

#menu_info ul
{
width: 100%;
overflow: hidden;
font-size: 120%;
line-height: 1.2;
color: white;
}

#menu_info li 
{
float: left;
margin-right: 1em;
}

#menu_info a 
{
display: block; 
color: #9ec0d9;
border-bottom: 1px solid #819ab0;
}

#menu_info a:hover 
{
color: white;
border-bottom: 1px solid white;
}