/** RESET BROWSER DEFAULTS **/
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, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:Arial, Verdana, Helvetica, sans-serif;vertical-align:baseline;}


/*GLOBAL LAYOUT*/

body {
    background:#eaeaea; /*temp*/
}

strong {
    font-weight:bold;
}

em {
    font-style:italic;
}

#wrapper {
    width:972px;
    margin:30px auto;

}

#header {
    height:110px;
    position:relative;
    background:url(../img/header.png) top left no-repeat;
}

#logo {
    margin:10px;
    float:left;
}

#id_logo {
    margin:6px 10px;
    float:right;
    display:block;
}

#nav {
    position:absolute;
    bottom:0;
    left:1px;
    width:950px;
    background:url(../img/nav.png) top left repeat-x;
    height:32px;
    padding:0 10px;
}

#nav ul {
    list-style:none;
}

#nav ul li {
    float:left;
}

#nav ul li a {
    display:block;
    float:left;
    padding:8px 10px 0 10px;
    height:32px;
    text-decoration:none;
    color:#000;
    font-size:75%;
    font-weight:bold;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    margin-right:-1px;
}

#nav ul li a:hover {
    background:url(../img/nav_hov.png) top left no-repeat;
    color:#fff;
}

#nav ul li#brand a:hover {
    background:url(../img/nav_hov_bra.png) top left no-repeat;
    color:#fff;
}

#nav ul li#finance a:hover {
    background:url(../img/nav_hov_fin.png) top left no-repeat;
    color:#fff;
}

#nav ul li#governance a:hover {
    background:url(../img/nav_hov_gov.png) top left no-repeat;
    color:#fff;
}


#nav ul li.item_on a {
    background:url(../img/nav_hov.png) top left no-repeat;
    color:#fff;
}

#login {
    font-size:80%;
    float:right;
    padding:9px 100px 0 0;
    position:relative;
}

#login a {
    display:block;
    position:absolute;
    width:88px;
    height:20px;
    padding-top:2px;
    text-decoration:none;
    color:#fff;
    text-align:center;
    background:url(../img/login.png) top left no-repeat;
    top:5px;
    right:0;
    
}

#content {
  width: 950px;
  padding: 14px 10px 0px 10px;
  background:#fff;
  border-left: 1px solid #7f291b;
  border-right: 1px solid #7f291b;
}

#footer_nav {
    padding:25px 0 0 0;
    height:30px;
    background:#ccc;
    clear:both;
    font-size:70%;
    color:#aaa;
    background:url(../img/footer.png) top left no-repeat;
}

#footer_nav a {
    color:#666;
}

#footer_nav a:hover {
    color:#7F291B;    
}

/*BLOCKS*/

.headline h1, .headline h2, .headline h3, .headline h4, .headline h5 {
    padding:6px 0;
    font-weight:bold;
    font-size:120%;
}

.headline {
    color:#7F291B;
    border-bottom:1px dotted #7F291B
}

.text {
    font-size:80%;
}

.text p {
    margin:10px 0;
}

.text ul {
    margin:10px 20px;
    list-style-image:url(../img/bullet.png);
}

.text ul li {
    margin:2px 0;
}

.text a {
    color:#7F291B;
    text-decoration:none;
    border-bottom:1px dotted #7F291B;
}

.sectionlink {
    background:#C4C6C9 url(../img/section_link.png) bottom left no-repeat;
    min-height:100px; /*temp*/
    color:#000;
}

.sectionlink h3 {
    background:url(../img/section_link_head.png) top left no-repeat;
    height:3em;
    padding:5px 8px;
    margin-bottom:-10px;
    color:#000;
    text-decoration:none;
    font-size:110%;
}

.sectionlink h3 a {
    color:#fff;
    text-decoration:none;
}

.sectionlink p {
    font-size:80%;
    margin:5px 8px;
}

.sectionlink_1 h3, .sectionlink_2 h3, .sectionlink_3 h3, .sectionlink_4 h3 {
    text-align:right;
    font-size:70%;
}

.sectionlink_1 p, .sectionlink_2 p, .sectionlink_3 p, .sectionlink_4 p {
    font-size:120%;
    margin:5px 8px;
}

.sectionlink p a {
    color:#fff;
    text-decoration:none;
}

.sectionlink_1 {
    background:#fdc600 url(../img/section_link_1.png) bottom left no-repeat;
}

.sectionlink_2 {
    background:#6f9f36 url(../img/section_link_2.png) bottom left no-repeat;
}

.sectionlink_3 {
    background:#e4342c url(../img/section_link_3.png) bottom left no-repeat;
}

.sectionlink_4 {
    background:#a2301e url(../img/section_link_4.png) bottom left no-repeat;
}

.sectionlink_1 h3 {
    background:#fdc600 url(../img/section_link_head_1.png) top left no-repeat;
}

.sectionlink_2 h3 {
    background:#6f9f36 url(../img/section_link_head_2.png) top left no-repeat;
}

.sectionlink_3 h3 {
    background:#e4342c url(../img/section_link_head_3.png) top left no-repeat;
}

.sectionlink_4 h3 {
    background:#a2301e url(../img/section_link_head_4.png) top left no-repeat;
}

.picture {
    min-height:200px; /*temp*/
    padding:10px;
}

.caption {

    font-size:70%;
    padding:10px;
    margin:0 0 -10px -10px;
}

.span-3 .picture {
    background:url(../img/picture_3.png) top left no-repeat;
}

.span-3 .caption {
    background:url(../img/caption_3.png) bottom left no-repeat;
}

.span-4 .picture {
    background:url(../img/picture_4.png) top left no-repeat;
}

.span-4 .caption {
    background:url(../img/caption_4.png) bottom left no-repeat;
}

a.link {
    display:block;
    height:20px;
    padding:5px 2px 0 8px;
    color:#fff;
    text-decoration:none;
    font-size:80%;
}

.span-2 a.link {
    background:url(../img/link2.png) top left no-repeat;
    width:290px;
}

.span-1 a.link {
    background:url(../img/link.png) top left no-repeat;
    width:140px;
}

#content .headline, #content .text, #content .sectionlink, #content .picture, #content .link, #content .box {
    margin-bottom:10px;
}

.customer_journey_1 .text a {
    color:#FDC600;
    border-color:#FDC600;
}

.customer_journey_1 .headline {
    color:#FDC600;
    border-bottom:1px dotted #FDC600;
}

.customer_journey_1 .span-2 a.link {
    background:url(../img/link_cj_1_2.png) top left no-repeat;
}

.customer_journey_1 .span-1 a.link {
    background:url(../img/link_cj_1_1.png) top left no-repeat;
}

.customer_journey_2 .text a {
    color:#6F9F36;
    border-color:#6F9F36;
}

.customer_journey_2 .headline {
    color:#6F9F36;
    border-bottom:1px dotted #6F9F36;
}

.customer_journey_2 .span-2 a.link {
    background:url(../img/link_cj_2_2.png) top left no-repeat;
}

.customer_journey_2 .span-1 a.link {
    background:url(../img/link_cj_2_1.png) top left no-repeat;
}

.customer_journey_3 .text a {
    color:#E4342C;
    border-color:#E4342C;
}

.customer_journey_3 .headline {
    color:#E4342C;
    border-bottom:1px dotted #E4342C;
}

.customer_journey_3 .span-2 a.link {
    background:url(../img/link_cj_3_2.png) top left no-repeat;
}

.customer_journey_3 .span-1 a.link {
    background:url(../img/link_cj_3_1.png) top left no-repeat;
}

.customer_journey_4 .headline {
    color:#A2301E;
    border-bottom:1px dotted #A2301E;
}

.customer_journey_4 .span-2 a.link {
    background:url(../img/link_cj_4_2.png) top left no-repeat;
}

.customer_journey_4 .span-1 a.link {
    background:url(../img/link_cj_4_1.png) top left no-repeat;
}


/*FRAMEWORK*/

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6 {
  float: left;
  margin: 0 10px 0 0;
}

/* The last column in a row needs this class. */
.last, div.last {
    margin-right: 0;
}

/* Use these classes to set the width of a column. */
.span-1 {width: 150px;}
.span-2 {width: 310px;}
.span-3 {width: 470px;}
.span-4 {width: 630px;}
.span-5 {width: 790px;}
.span-6, div.span-6 {width: 950px; margin: 0;}


/* Add these to a column to append empty cols. */

.append-1 { padding-right: 160px;}
.append-2 { padding-right: 320px;}
.append-3 { padding-right: 480px;}
.append-4 { padding-right: 640px;}
.append-5 { padding-right: 800px;}


/* Add these to a column to prepend empty cols. */

.prepend-1 { padding-left: 160px;}
.prepend-2 { padding-left: 320px;}
.prepend-3 { padding-left: 480px;}
.prepend-4 { padding-left: 640px;}
.prepend-5 { padding-left: 800px;}


/* Border on right hand side of a column. */
div.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}


/* Use these classes on an element to push it into the 
next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -160px; }
.pull-2 { margin-left: -320px; }
.pull-3 { margin-left: -480px; }
.pull-4 { margin-left: -640px; }
.pull-5 { margin-left: -800px; }
.pull-6 { margin-left: -960px; }


.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6 {float: left; position:relative;}


.push-1 { margin: 0 -160px 1.5em 40px; }
.push-2 { margin: 0 -320px 1.5em 80px; }
.push-3 { margin: 0 -480px 1.5em 120px; }
.push-4 { margin: 0 -640px 1.5em 160px; }
.push-5 { margin: 0 -800px 1.5em 200px; }
.push-6 { margin: 0 -960px 1.5em 240px; }


div.push-1, div.push-2, div.push-3, div.push-4, div.push-5, div.push-6 {float: right; position:relative;}

.clear { clear:both; }
.clear-right { clear:right; }
.clear-left { clear:left; }