html,body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: #444;
    font: 15px Arial, Helvetica, sans-serif;
    text-align: center; /* FOR IE 5 */
}
body { background: #eee url(../images/bg.png) top center repeat; }

/********************************** WRAPS *************************************/

#wrap {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: left;
}

#container {
    width: 998px; /* required by IE6 */
    overflow: hidden; /* for floated divs */
    border: 1px solid #ccc;
    background: #fff url(../images/bg_container.png) top left repeat-x;
    border-top:0;
    border-bottom:0;    
}

/******************************** CONTENT *************************************/

#content, #content_home {
    float: left;
    margin: 0;
    padding: 30px;
    text-align: justify;
    background-image:  url(../images/who_bg.png) !important;
    background-image:  url(../images/who_bg.gif); /* IE 6 gets the GIF */
    background-position: right top;    
    background-repeat: no-repeat;
    color: #444;
}
#content_home { width: 627px; background-position: 300px 0; }

#content h1, #content_home  h1 {
    margin:0 0 30px 0;
    padding-bottom: 5px;
    border-bottom: 3px solid #3092d1;
    font-size: 26px;
    color: #666;
    width: 510px;
}

#content h2.large, #content_home  h2.large {
    font-size: 26px;
    color: #666;
}

#flash-problems {
    overflow: hidden;
    margin: 30px 0px 5px 0px;
    border: 1px solid #CCC;
    background: #EEE;
    padding: 10px;
}

/**************************** LEFT / RIGHT DIVS *******************************/

#leftdiv {
    float: left;
    width: 140px;
    min-height: 350px;
    margin-right: 30px;
    padding: 30px;
    border-right: 1px solid #ccc;
}

#rightdiv, #rightdiv_tool {
    float: right;
    width: 250px;
    min-height: 350px;
    margin: 0;
    padding: 30px;
    border-left: 1px solid #ccc;
    font-size: 12px;    
}

#rightdiv table#home_links {
    border-spacing: 0px;
    border-collapse: collapse;    
}

#rightdiv table#home_links img { padding: 5px 0 5px 30px;}

#rightdiv h2 { margin-top: 0; }

#rightdiv_tool {
    margin-left: 30px; padding-right: 0; width: 200px; display: block;
}

/********************************* FOOTER *************************************/

#footer {
    width: 958px;
    padding: 13px 20px 10px 20px;
    background: url(../images/footer_bg.gif) bottom left repeat-x;
    border: 1px solid #ccc;
    border-top: 3px solid #ccc;
    font-size: 12px;
    overflow: hidden;
}

#footer p.languages {
    margin-top: 10px;
    font-size: 10px;
}
#footer p.termsandconditions {
    font-size: 10px;
}

#richlyn {
    margin-top: 10px;
    padding-bottom: 20px;
    width: 978px;
    text-align: right;
    font-size: 12px;
}
#richlyn a { color: #888; }

/********************************** LINKS *************************************/

a { text-decoration: none; color: #253477; }
a:hover { text-decoration: underline; color: #0daad7; }

a img { border: 0; }

a.chart_pdf { float: left; width: 290px; margin: 5px; padding: 6px 6px; background: url(../images/chart_pdf_sprite.png) left top no-repeat; color: #444; }
a.chart_pdf:hover { background-position: 0 -30px; text-decoration: none; color: #F44; }

div.pdf_link { display: none; }
/********************************* HEADINGS ************************************/

h1 { font-size: 18px; color: #666; }
h2 { font-size: 16px; color: #666; }
h3 { font-size: 14px; color: #888; }

/******************************** PICTURES ************************************/

img.picture { border: 3px solid #ccc; }

/********************************* BANNER *************************************/

#banner{
    width: 998px;
    height: 70px;
    margin: 0 auto;
    padding:0;
    background: url(../images/banner.gif) center no-repeat;
    border: 1px solid #ccc;
    border-top: none;
}

#banner img#bone { position: absolute; top:0; left:1px; z-index: 101; /* above menu */ }

#banner img#title { position: absolute; top:14px; left:180px; }

/******************************** NAVIGATION **********************************/

#menu {
    width: 858px !important;
    height: 28px;
    text-align: left;
    margin: 0;
    font-weight: bold;
    font-size: 12px;
    background: url(../images/menu.gif) repeat-x;
    border-bottom: 1px solid #999;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    z-index: 100;
    padding-left: 140px;
}

#menu ul {
    padding: 0px;
    float: left;
    margin: 0px;
    list-style-type: none;
}

#menu a {
    display: block;
    margin: 0px;
    text-decoration: none;
    color: #444;
    background: #c5c7c5 url(../images/menu.gif) repeat-x;
    height: 21px;
    width: 110px;
    padding: 7px 10px 0px 10px;
    text-align: left;
    border-right: 1px solid #ccc;
}
#menu a:hover, #menu a:active, #menu a:focus {
    color: #fff;
    background-color: #5fbaf3;
    background-position: 0 -32px;
    text-align: left;
}

#menu a.sublink {
    background: #f7f2da;
    width: 200px;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;

}
#menu a.sublink:hover, #menu a.sublink:active, #menu a.sublink:focus {
    color: #fff;
    background: #f00;
}

#menu a.droplink {
    width: 120px;
    background: #c5c7c5 url(../images/menu_drop.gif) repeat-x;
    border-right: 1px solid #ccc;
}

#menu a.droplink:hover, #menu a.droplink:active, #menu a.droplink:focus {
    background-color: #5fbaf3;
    background-position: 0 -32px;
}

#menu li { position: relative; padding: 0; margin: 0; }
#menu ul li {
    width: auto !important;
    width: 120px;
}
#menu li.short {
    width: auto !important;
    width: 80px;
}
#menu li.short a { width: 70px; }

#menu li.wide {
    width: auto !important;
    width: 180px;
}
#menu li.wide a { width: 160px; }
#menu li.wide ul ul a { width: 270px; }
#menu li.wide ul ul ul a { width: 150px; }

#menu ul ul { position: absolute; z-index: 500; padding-top: 1px; border-bottom: 1px solid #ccc; }

#menu ul ul ul { position: absolute; left: 100%; top: 0px; }

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul { display: none; }

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul { display: block; background: none; }

#language {
   position: absolute;
   top: 73px;
   right: 3px;
   z-index: 101; /* sit above menu */
}
#language select {
    width: 150px;
    padding: 2px;
}

/****************************** INPUTS AND FORMS ******************************/

input, textarea, select {
    color: #666;
    border: 1px solid #bbb;
    padding: 3px 5px;
    margin: 0;
}

/*********************************** TABLES ***********************************/

table.charts { border-spacing: 0px; border-collapse: collapse; }
table.charts td { padding: 10px 10px; border: 1px solid #888; text-align: center; }

table.tool { border-spacing: 0px; border-collapse: collapse; margin-bottom: 20px; }
table.tool td { padding: 10px 10px; border: 1px solid #888; text-align: left; }

table.convert { border-spacing: 0px; border-collapse: collapse; width: 100%; }

#nos_logo_table { width: 200px; }

#nos_logo_table td { text-align: center; padding: 5px; }

#simg_logo_table { width: 200px; }

#simg_logo_table td { text-align: center; padding: 5px; }
