/*
=general
=page structure
=main_navigation
=sub_navigation
=sub_sub_navigation
=page content
=misc
=tech
*/

/*
=general
---------------------------------------------- */
* {
    margin: 0;
    padding: 0;
}

html { height: 101%; }

html, body { width: 100%; }

body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 81.5%; /* 13px */
    color: #333;
    line-height: 150%; /* 17px */
    text-align: center;
    background-color: #D3E2C8;
}

table, tr, td, input, select, textarea, ul, ol {
    font-size: 100%;
    vertical-align: top;
}

a img, img { border: 0; }

code, pre {
    font-size: 1.5em;
    color: #999;
    display: block;
    width: 500px;
}

/* =hx */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Bold' Helvetica, Arial, Verdana, sans-serif;
    line-height: 120%;
}

/* =h1 */
h1 {
    font-size: 1.835em; /* 22px */
    margin-bottom: 5px;
    color: #ABC469;
}

/* =h2 */
h2 {
    font-size: 1.455em; /* 16px */
    margin-bottom: 5px;
}

/* =h3 */
h3 {
    font-size: 1.2em; /* 12px */
    margin-bottom: 5px;
}

/* =h4 */
h4 {
}

/* =h5 */
h5 {
}

/* =a */
a {
    text-decoration: none;
    color: #37B7C0;
}

a:hover, a:focus, a:active { color: #999; }

ul, ol { margin: 0 0 1.5em 20px; }

ul { list-style: square; }

li { margin-bottom: .75em; }

p { margin-bottom: 1.5em; }

/*
=page structure
---------------------------------------------- */
#container {
    width: 827px; /* 908px */
    margin: 0 auto;
    padding: 16em 44px 0 37px;
    text-align: left;
    background: #D3E2C8 url(/images/bg-container.gif) repeat-y 0% 0%;
    overflow: hidden;
    position: relative;
}

#header {
    background: #fff url(../images/bg-header.gif) no-repeat 0% 0%;
    width: 827px; /* 887px */
    padding: 0 30px;
    position: absolute;
    left: 7px;
    top: 0;
}

#navigation {
    border-bottom: 6px solid #494949;
    margin-bottom: 3em;
    width: 100%;
}

#main_navigation {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

#utility_navigation {
    position: absolute;
    top: 5px;
    right: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#content {
    height: 600px;
    min-height: 600px;
    float: right;
    width: 550px;
    padding: 0 0 50px 0;
}

*>#content { height: auto; }

#panel {
    float: left;
    width: 254px;
    background: #fff;
}

#footer {
    clear: both;
    background: transparent url(/images/bg-footer.gif) no-repeat 0% 0%;
    width: 553px; /* 908px */
    padding: 0 40px 0 315px;
    height: 45px;
    position: relative;
    left: -37px;
    font-size: 12px;
}

/*
=header
---------------------------------------------- */
#logo { margin: 0 0 21px 0; }

/*
=main_navigation
---------------------------------------------- */
#main_navigation li {
    padding: 0 1px;
    margin: 0;
    float: left;
    background: transparent url(/images/bg-h-line.gif) no-repeat 100% 0%;
}

#main_navigation li:last-child, #main_navigation li.last  { background-image: none; }

#main_navigation a {
    display: block;
    padding: 0 0 0 16px;
    font-weight: bold;
    margin: 0 1px 0 0;
    border-bottom: 1px solid #fff;
}

#main_navigation a:focus, #main_navigation a:hover, #main_navigation a:active { color: #04333B; }

#main_navigation li.current a {
    background: transparent url(/images/bg-button-left.gif) no-repeat 0% 0%;
    border-color: #94D9DD;
    color: #fff;
}

#main_navigation span {
    padding: .25em 16px .25em 0;
    display: block;
}
#main_navigation li.current span { background: transparent url(/images/bg-button-right.gif) no-repeat 100% 0%; }

/*
=utility_navigation
---------------------------------------------- */
#utility_navigation li {
    padding: 0 1px;
    margin: 0;
    float: left;
    background: transparent url(/images/bg-h-line-2.gif) no-repeat 100% 0%;
}

#utility_navigation li:last-child, #utility_navigation li.last  { background-image: none; }

#utility_navigation a {
    display: block;
    color: #3BAEC0;
    padding: .25em 16px;
}

#utility_navigation a:focus, #utility_navigation a:hover, #utility_navigation a:active, #utility_navigation li.current a { color: #04333B; }

/*
=content
---------------------------------------------- */
#content p { width: 520px; }

.box {
    background: transparent url(/images/bg-box.gif) repeat-y 0% 0%;
    width: 496px; /* 536px */
    padding: 11px 20px 13px 20px;
    margin: 0 0 25px 0;
    position: relative;
    z-index: 0;
}

.box_top {
    background: transparent url(/images/bg-box-top.gif) no-repeat 0% 0%;
    height: 11px;
    width: 536px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.box h2 {
    color: #fff;
    margin: 0;
    position: relative;
    right: 10px;
    padding: 0 0 0 11px;
    margin: 0 0 1em;
    list-style: none;
    background: transparent url(/images/bg-h2.gif) no-repeat 0% 0%;
    width: 509px;
    height: 24px;
}

.box ul {
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
    width: 230px;
    float: left;
}

.box_bottom {
    background: transparent url(/images/bg-box-bottom.gif) no-repeat 0% 100%;
    width: 536px;
    height: 13px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

/*
=panel
---------------------------------------------- */
#image_listing {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 248px;
    padding-bottom: 50px;
    background: #fff url(../images/bg-image-listing.gif) repeat-x 0% 100%;
    position: relative;
}

#image_listing li { display: inline; }

#image_listing li img {
    float: left;
    margin: 0 2px 2px 0;
}

#image_listing #image_main { margin-right: 0; }
#image_listing #image_1 img { top: 0; }
#image_listing #image_2 img { margin-right: 0; }
#image_listing #image_3 img { top: 126px; }
#image_listing #image_4 img { margin-right: 0; }

/*
=sub_navigation
---------------------------------------------- */
#sub_navigation {
    background: transparent url(/images/bg-sub-navigation.gif) no-repeat 0% 0%;
    width: 254px;
    padding: 10px 0 0;
    margin-bottom: 2em;
}

#sub_navigation ul {
    background: transparent url(/images/bg-sub-navigation-ul.gif) no-repeat 0% 0%;
    margin: 0;
    list-style: none;
    width: 239px; /* 254px */
    padding: 0px 6px 0 9px;
}

#sub_navigation li {
    background: transparent url(/images/bg-sub-navigation-li.gif) no-repeat 0% 100%;
    width: 236px; /* 239px */
    padding: 2px 0 4px 3px;
    margin: 0;

}

#sub_navigation li.current a {
    background: transparent url(/images/bg-sub-navigation-li-current.gif) no-repeat 100% 0%;
    color: #fff;
}

#sub_navigation a {
    color: #4A8010;
    font-weight: bold;
    display: block;
    padding: 8px 10px 7px;
    width: 216px; /* 236px */
}

#sub_navigation a:focus, #sub_navigation a:hover, #sub_navigation a:active { color: #17413A; }

#sub_navigation #sub_navigation_bottom {
    width: 254px;
    height: 40px;
    background: transparent url(/images/bg-sub-navigation-bottom.gif) no-repeat 0% 0%;
}

/*
=footer
---------------------------------------------- */
#footer p {
    position: relative;
    top: -10px;
}

/*
=misc
---------------------------------------------- */

.hide {
    position: absolute;
    left: -999em;
}

/* =self clearing floats */
.clearfix:after,
#header:after,
#navigation:after,
#main_navigation:after,
#utility_navigation:after,
.box:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*
=tech
---------------------------------------------- */
#tech {
    margin: 0 auto;
    width: 837px;
    text-align: left;
}
