html, body
{
    margin: 0;
    padding: 0;
}
body
{
    font: 13px/1.5em Arial, Helvetica, sans-serif;
    color: #282828;
    background: #3EBAFE url(../images/body_bg.gif) repeat-x 0 0;
}
h1, h2, h3, h4, h5{margin: 0 0 1em;}
h2
{
    font: 35px Arial, Helvetica, sans-serif;
    color: #004295;
    margin:  0 0 16px;
}
h3
{
    font: 16px Arial, Helvetica, sans-serif;
    margin: 0 0 13px;
}
p{margin: 0 0 1em;}
a,
a:link,
a:visited{color: #926F23;}
a:hover,
a:active{}
a img{border: none;}
form{margin: 0;}
fieldset{padding: 0;}
ul{list-style-type: square;}
hr
{
    height: 1px;
    border: none;
    color: #999;
    background-color: #999;
    margin-bottom: 1em;
}

/* ~~~ === POSITIONING SELECTORS ===================================== ~~~ */
#wrapper
{
    width: 902px;
    margin: 19px auto;
}
#nav{height: 74px;}
#masthead
{
    position: relative;
    height: 317px;
    background: url(../images/home_header.jpg) no-repeat 0 0;
    margin: 10px 0;
}

#masthead h1
{
    position: absolute;
    top: 23px; 
    left: 23px;
    width: 124px;
    height: 101px;
    background: url(../images/logo.gif) no-repeat 0 0;
    text-indent: -9999em;
}
#quote
{
    width: 197px;
    position: absolute;
    top: 141px;
    left: 23px;
}
    #quote h2
    {
        font-size: 28px;
        margin: 0;
    }
    #quote a
    {
        text-decoration: none;
        color: #004295;
    }
#content
{
    background-color: #fff;
    overflow: auto;
    height: 100%;
}
#leftcol
{
    width: 210px;
    float: left;
}
#main
{
    width: 610px;
    float: right;
    padding: 25px 70px 46px 0;
}
#footer
{
    clear: both;
    margin-top: 10px;
    height: 32px;
    background: url(../images/footer_bg.gif) no-repeat 0 0;
}
#footer p
{
    line-height: 32px; 
    margin: 0 20px;
}
#footer a
{
    text-decoration: none;
    color: #fff;
    padding: 0 15px;
}
#btm-footer
{
    margin: 10px 35px 0;
    font-size: 12px;
    color: #fff;
}
#btm-footer a{color: #fff;}
    #copyright
    {
        float: left;
    }
    #sitemap-links
    {
        float: right;
    }
    #sitemap-links a{margin: 0 8px 0 0;}
    #sitemapLink
    {
        background: url(../images/icon_sitemap.gif) no-repeat 0 0;
        padding-left: 20px;
    }
    
/* ~~~ === MASTHEAD BACKGROUNDS ================================ ~~~ */
#default_template #masthead
{
    height: 135px;
    background: url(../images/header/services.jpg) no-repeat 0 0;
}
#our-services #masthead{background: url(../images/header/services.jpg) no-repeat 0 0;}
#our-team #masthead{background: url(../images/header/our_team.jpg) no-repeat 0 0;}
#client-feedback #masthead{background: url(../images/header/feedback.jpg) no-repeat 0 0;}
#company-values #masthead{background: url(../images/header/values.jpg) no-repeat 0 0;}
#news #masthead{background: url(../images/header/news.jpg) no-repeat 0 0;}
#contact-us #masthead{background: url(../images/header/contact.jpg) no-repeat 0 0;}
#associations #masthead{background: url(../images/header/associations.jpg) no-repeat 0 0;} 

/* ~~~ subpage ~~~ */
#hr #masthead{background: url(../images/header/hr.jpg) no-repeat 0 0;}
#recruitment #masthead{background: url(../images/header/recruitment.jpg) no-repeat 0 0;}
#top-candidates #masthead{background: url(../images/header/top_candidate.jpg) no-repeat 0 0;}
#feedback #masthead{background: url(../images/header/360_feedback.jpg) no-repeat 0 0;}
#health-checks #masthead{background: url(../images/header/health_checks.jpg) no-repeat 0 0;}
#top-it-candidates #masthead{background: url(../images/header/it_candidates.jpg) no-repeat 0 0;}
#mentoring #masthead{background: url(../images/header/mentoring.jpg) no-repeat 0 0;}
#occupational-testing #masthead{background: url(../images/header/occupational_testing.jpg) no-repeat 0 0;}
#temping #masthead{background: url(../images/header/temping.jpg) no-repeat 0 0;}

/* ~~~ === MAIN NAVIGATION ===================================== ~~~ */
#nav ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#nav li{float: left;}
#nav a
{
    display: block;
    height: 74px;
    float: left;
    line-height: 74px;
    outline: none;
    text-indent: -9999em;
}
#n-home a
{
    width: 73px;
    background: url(../images/nav_home.gif) no-repeat 0 0;
}
#n-our-services a
{
   width: 114px;
   background: url(../images/nav_our_services.gif) no-repeat 0 0; 
}
#n-our-team a
{
    width: 94px;
    background: url(../images/nav_our_team.gif) no-repeat 0 0;
}
#n-client-feedback a
{
    width: 132px;
    background: url(../images/nav_client_feedback.gif) no-repeat 0 0;
}
#n-company-values a
{
    width: 136px;
    background: url(../images/nav_company_values.gif) no-repeat 0 0;
}
#n-news-and-articles a
{
    width: 131px;
    background: url(../images/nav_news.gif) no-repeat 0 0;
}
#n-contact-us a
{
    width: 106px;
    background: url(../images/nav_contact.gif) no-repeat 0 0;
}
#n-associations a
{
    width: 116px;
    background: url(../images/nav_associations.gif) no-repeat 0 0;
}
#nav #n-home a.active,
#nav #n-our-services a.active,
#nav #n-our-team a.active,
#nav #n-client-feedback a.active,
#nav #n-company-values a.active,
#nav #n-news-and-articles a.active,
#nav #n-contact-us a.active,
#nav #n-associations a.active,
#nav a:hover{background-position: 0 -74px;}

/* ~~~ === SUB NAVIGATION ====================================== ~~~ */
#homenav,
#subnav
{
    list-style-type: none;
    margin: 37px 0 0;
    padding: 0;
}
#homenav li,
#subnav li
{
    background: url(../images/sub_menu_bg.jpg) no-repeat 0 0;
    line-height: 25px;
    padding: 4px 0;
    margin-bottom: 4px;
}
#homenav a,
#subnav a
{
    display: block;
    width: 186px;
    font-size: 13px;
    line-height: 1.3em;
    color: #004295;
    text-decoration: none;    
    padding-left: 24px;
}
#subnav li.active{background-image: none;}
#subnav li.active a{color: #282828; font-weight: bold;}

/* ~~~ === HOME PAGE SUB NAVIGATION =========================== ~~~ */
#homenav li{margin-bottom: 12px;}
#homenav a{font-size: 18px;}


/* ~~~ === CONTACT FORM =========================================================================== ~~~ */
#formWrapper
{
    border: 1px solid #999;
    margin-bottom: 1em;
    background-color: #F9F9F9;
}
#formWrapper table.formtable{margin: 1em auto;}

/* ~~~ === FORMS =============================================== ~~~ */
table.formtable{margin: 0 0 1em;}

table.formtable caption{display: none;}
table.formtable th
{
    padding: 4px 4px 4px 0;
    text-align: right;
}

table.formtable td{padding: 4px;}
table.formtable th label{font-weight: normal;}
.isEmail,
.input
{
    font: 12px Arial, Helvetica, sans-serif;
    border: 1px solid #999;
}
.button
{
    font: bold 12px Arial, Helvetica, sans-serif;
    padding: 2px 4px;
    background-color: #A18D3A;
    color: #fff;
}
table.formtable .invalid
{
    border: 1px solid red;
    background-color: #FFF9F9;
}
/* ~~~ NEWS SECTION STYLES ================================================================================ ~~~~ */

div.headline
{
    margin: 0 0 2em;
    line-height: 1.5em;
}
div.headline h3,
div.article h3{margin: 0 0 .3em;}
p.date
{
    font: italic 12px Arial, Helvetica, sans-serif;
    margin: 0 0 1em;
}
a.more{font-style: italic;}

/* ~~~ === SITEMAP ================================================================================== ~~~ */
#sitemap{margin: 28px 14px;}
#sitemap h3
{
    background: url(../images/icons/base.gif) no-repeat 2px 0;
    margin: 16px 0 0 16px;
    padding:0 0 5px 18px;
    font: bold 12px Arial, Helvetica, sans-serif;
}

ul.sitemap
{
    list-style-type: none;
    margin: 0 16px 16px;
    padding: 0;
    background: url(../images/icons/line.gif) repeat-y;
}
ul.sitemap ul
{
    list-style-type: none;
    margin: 0 0 0 8px;
    padding: 0;
    background: url(../images/icons/line.gif) repeat-y;
}
ul.sitemap li
{
    line-height: 20px;
    padding-left: 7px;
    position: relative;
}
ul.sitemap a,
ul.sitemap li.lastchild li a
{
    background: url(../images/icons/page.gif) no-repeat 0 50%;
    padding: 4px 0 4px 26px;
}
.lastchild{background-color: #fff;}
li.lastchild a,
ul.sitemap li.lastchild li.lastchild a{background: #fff url(../images/icons/page_bottom.gif) no-repeat 0 0;}

/* ~~~ === CLASSES ============================================= ~~~ */
.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}
.clear{clear: both;}
.hide{display: none;}