/**
 * Storebrand base stylesheet
 * Christian Johansen 28/08 2006 - 21/03 2007
 * www.ixd.no
 */
@import "defaults.css";
@import "tables.css";
@import "navigation.css";

@media screen
{

    .hidden, #page #wrapper #main_content .hidden, #skip_link {
        position: absolute;
        left: -1000em;
        display: none;
    }
    /* Global rules */
    a, a:link, a:visited {
	    color: #0e88cc;
	    text-decoration: none;
    }
    .section a, .section a:link, .section a:visited { background: url(Images/bg.grey.1x1.gif) bottom left repeat-x; }
    .image a, .image a:link, .image a:visited { background: none; }
    a:hover, a:active {
        background: none;
        text-decoration: underline;
    }
    h1 a, h1 a:visited, h1 a:link, h2 a, h2 a:visited, h2 a:link, h3 a, h3 a:visited, h3 a:link { color: #000; }
    dl { width: 100%; }
    #page .section dl { width: 50%; }
    dt, dd {
	    float: left;
	    margin: 0 0 0.3em;
	    width: 49%;
    }
    dt {
	    width: 50%;
	    clear: left;
    }
    .intro {
        font-weight: bold;
        line-height: 1.5;
    }
    #page a.external, #content a.external, #page #content table a.external {
        padding-right: 14px;
        background: url(Images/icon.window.10x10.gif) right center no-repeat;
    }
    #page a.pdf, #content a.pdf, #page #content table a.pdf {
        padding: 1px 0 1px 20px;
        line-height: 16px;
        background: url(Images/icon.pdf.16x16.gif) left top no-repeat;
    }
    #page a.doc, #content a.doc, #page #content table a.doc {
        padding: 1px 0 1px 20px;
        line-height: 16px;
        background: url(Images/icon.doc.16x16.gif) left top no-repeat;
    }
    #page a.xls, #content a.xls, #page #content table a.xls {
        padding: 1px 0 1px 20px;
        line-height: 16px;
        background: url(Images/icon.xls.16x16.gif) left top no-repeat;
    }
    #print a {
        padding: 1px 0 1px 20px;
        line-height: 16px;
        background: url(Images/icon.printer.14x14.gif) left center no-repeat;
    }
    h2, h3, h4 { font-weight: bold; }
    h3 { font-size: 1.1em; }
    h4 { font-size: 1em; }
    h2 {
	    font-size: 1.2em;
	    clear: left;
    }
    #main_content ul, .section ul { margin: 0 0 1em; }
    .section ol li { margin: 0 0 0.5em; }
    .section ul li, #main_content ul li {
        padding-left: 12px;
        margin: 0 0 0.3em;
        list-style: none;
        position: relative;
        background: url(Images/bullet.green.gif) 0 5px no-repeat;
    }
    .producttext ul li  {
        padding-left: 12px;
        margin: 0 0 0.3em;
        margin-left: -12px;
        list-style: none;
        position: relative;
        background: url(Images/bullet.green.gif) 0 5px no-repeat;
    }
    #main_content .navigation { margin: 0; }
    #main_content .navigation li {
        padding: 0;
        margin: 0;
        background: 0;
    }
    /* Images */
    .image { margin: 0 0 1em; }
    .image img { display: block; }
    .left {
	    float: left;
	    margin: 0 1em 0 0;
    }
    .right {
	    float: right;
	    margin: 0 0 0 1em;
    }
    /* Generic buttons */
    .button {
	    float: left;
	    height: 25px;
	    border: none;
	    padding: 0 0 0 3px;
	    margin: 0;
	    white-space: nowrap;
	    background: url(Images/button.left.gif) top left no-repeat;
    }
    .margin_right {
                margin-right: 1em;
    }
    .button a, .button input {
	    float: left;
	    height: 24px;
	    padding: 0 5px 0 0;
	    margin: 0;
	    border: none;
	    background: url(Images/button.right.gif) top right no-repeat;
	    font-weight: bold;
	    font-size: 1em;
	    color: #353535;
	    cursor: pointer;
    }
    #page .button a, #page .button a:link, #page .button a:visited { background: url(Images/button.right.gif) top right no-repeat; }
    #page .main .button, .confirmation .button {
	    height: 45px;
	    padding: 0 0 0 5px;
	    background: url(Images/button.big.left.gif) top left no-repeat;
    }
    .main .button a, .main .button input, .confirmation .button a, .confirmation .button input {
	    height: 45px;
	    background: url(Images/button.big.right.gif) top right no-repeat;
	    color: #000;
	    line-height: 45px;
	    vertical-align: middle;
	    font-size: 1.3em;
	    font-weight: bold;
    }
    .main .button a, .confirmation .button a { padding: 0 20px 5px 15px; }
    #page .main .button a:link, #page .main .button a:visited,
    #page .confirmation .button a:link, #page .confirmation .button a:visited { background: url(Images/button.big.right.gif) top right no-repeat; }
    .next_button { float: right; }
    .button a { padding: 5px 12px 0 8px; }
    #loading_next { display: none; }
    .button a, .button a:link, .button a:visited, .button a:hover, .button a:active { color: #000; }
    #main_content .disabled input, #main_content .disabled a {
	    color: #838383;
	    cursor: default;
    }
    /* Wrappers */
    body {
	    background: url(Images/bg.body.gif);
	    font-size: 76%;
	    font-family: arial, verdana, sans-serif;
    }
    #page { padding-bottom: 1em; }
    /* Header */
    #branding {
	    position: relative;
	    padding: 26px 0 0 16px;
	    margin: 0 0 18px;
	    height: 56px;
	    background: url(Images/bg.branding.gif) bottom left repeat-x #fff;
    }
    .login #branding { background-image: url(Images/bg.branding.login.gif); }
    #logo { margin: 0 0 16px; }
    /* Important messages */
    #alert {
        width: 926px;
        padding: 12px 16px 0 0;
        margin: 0 0 16px 16px;
        border: 1px solid #c00;
        background: url(Images/bg.red.150x1.gif) top left repeat-y #fff;
    }
    #alert.message {
        border-color: #b0d06b;
        background: url(Images/bg.green.150x1.gif) top left repeat-y #fff;
    }
    #alert h2 {
        float: left;
        width: 126px;
        padding: 0 12px 6px;
        color: #fff;
    }
    #alert p {
        float: right;
        width: 760px;
    }
    /* Content */
    #content {
	    width: 960px;
	    margin-top: 12px;
	    position: relative;
    }
    #wrapper {
	    position: relative;
	    width: 944px;
	    float: right;
    }
    .document #wrapper {
	    margin-top: 4px;
	    background: url(Images/bg.content.gif) 4px 0 repeat-y;
    }
    #main_content {
        float: left;
        width: 576px;
    }
    .document #main_content {
	    width: 528px;
	    padding: 15px 15px 12px 15px;
        float: left;
	    position: relative;
	    top: -4px;
	    left: 192px;
	    border: 1px solid #cbd2d6;
	    background: url(Images/bg.gradient_spots.552x36.gif) 3px 3px no-repeat #fff;
    }
    #main_content h1 { margin: 0 0 0.5em; }
    #main_content h2 { margin: 0 0 1em; }
    /* Left hand menu (see also navigation.css) */
    #sub_navigation, #popup_navigation {
        position: absolute;
        top: -4px;
        left: 21px;
        width: 180px;
        border-top: 1px solid #cbd2d6;
    }
    #sub_navigation {
        top: 28px;
        left: 0;
        width: 193px;
        z-index: 1;
    }
    #sub_navigation {
        padding-bottom: 4px;
        background: url(Images/bg.transparent_blue.200x4.gif) bottom left no-repeat;
    }
    /* Information column (left hand side) */
    #related_info {
        position: absolute;
        top: -4px;
        left: 0px;
        width: 180px;
    }
    .document #related_info { top: +200px; }
    #related_info .section {
	    margin-left: 16px;
	    background: url(Images/bg.white_grey.168x39.gif) 3px 3px no-repeat #fff;
	    color: #666;
    }
    #related_info .section h2 {
	    background-repeat: no-repeat;
	    padding-top: 3px;
	    padding-bottom: 5px;
	    color: #690;
	    font-size: 1.3em;
    }
    #related_info .action h2, #related_info .action h2 a,
    #related_info .info h2, #related_info .info h2 a {
        display: block;
        margin: 0;
        padding: 0;
        color: #c00;
        background-position: 12px 6px;
    }

    #related_info .action, #related_info .info { padding: 0; }
    #page #related_info .info h2 a {
        padding-left: 12px;
        width: 158px;
     }

    #related_info .action h2 a, #related_info .info h2 a {
        width: 124px;
        padding: 9px 12px 11px 36px;
    }

    #related_info #login_box { background: #fff; }
    #related_info .clickable { cursor: pointer; }
    #related_info #login_box h2 { margin: 2px 2px 0.5em; }
    #related_info #login_box p, #related_info #login_box ul { padding: 0 12px; }

    #related_info #login_box h2 a {
		     padding: 6px 12px;
		     width: 146px;
		     color: #fff;
		     background: url(Images/tab.login.inactive.gif) top left repeat-x #b0d06a;
    }

    #related_info .info h2, #related_info .info h2 a { color: #0e88cc; }
    #related_info #contact h2 {
        background-image: url(Images/icon.person_headset.18x22.gif);
        color: #0e88cc;
    }
    #related_info #contact h2 a { color: #0e88cc; }
    #related_info #reportdamage h2 {
        color: #0e88cc;
    }
    #related_info #reportdamage h2 a { color: #0e88cc; }
    #quick_find h2 { background-image: url(Images/icon.sb.search.22x22.gif); }
    .portal #shoppingcart h2 { background-image: url(Images/icon.shopping_cart.22x22.gif); }
    #contact h2, #quick_find h2, .portal #shoppingcart h2 { padding-left: 25px; }
    #shoppingcart h2, #shoppingcart h2 a { color: #0e88cc; }
    #quick_find .text {
        width: 7em;
        margin: 1px 0.7em 0 0;
        padding: 2px 0;
    }
    #quick_find ul { margin: 0 0 1em; }
    #quick_find li {
        background: none;
        padding: 0;
        margin: 0 0 0.3em;
    }
    #page #search label { display: none; }
    #related_info #help #websupport {
	    padding: 6px 0 2px 24px;
	    margin: 0 0 6px;
	    font-weight: bold;
	    background: url(Images/icon.phone.20x18.gif) left center no-repeat;
    }
    #related_info #help .email {
        width: 150px;
        overflow: hidden;
        margin: 0;
        padding: 0 0 0.5em;
        font-size: 0.9em;
    }
    #related_info #help #open_hours strong { display: block; }
    #related_info #help #open_hours {
	    border-bottom: 1px solid #eee;
	    padding: 0 0 6px 24px;
	    margin: 0 0 6px;
    }
    #related_info .section label {
	    display: block;
	    margin: 0 0 0.4em;
    }
    #related_info .section .text {
	    float: left;
	    margin-bottom: 0.6em;
    }
    #related_info #ob_login, #related_info #ob_login h2 {
        padding: 1px;
        background: #fff;
    }
    #related_info #ob_login a {
        padding: 6px 12px;
        display: block;
    }
    #related_info #ob_login a,
    #related_info #ob_login a:hover,
    #related_info #ob_login a:active {
        background: url(Images/tab.login.inactive.gif) top left repeat-x #b0d06a;
        border-color: #b0d06a;
        color: #fff;
    }
    /* Shopping cart in right column */
    .document #related_info #shoppingcart {
	    margin: -2px 0 12px;
	    padding: 0;
	    border: none;
	    background: url(Images/bg.shoppingcart.137x778.gif) top right no-repeat;
    }
    #related_info #shoppingcart .content {
	    padding: 0 0 0 17px;
	    margin-left: 0;
	    left: -1px;
	    position: relative;
	    z-index: 1000;
	    border: none;
	    border-right: 1px solid #cbd2d6;
	    background: url(Images/shoppingcart_arrow.gif) top left no-repeat;
    }
    #related_info #shoppingcart .cart_content {
	    padding: 0 12px 6px;
	    border-bottom: 1px solid #cbd2d6;
    }
    .document #related_info #shoppingcart h2 {
	    padding: 6px 0 7px 37px;
	    border-top: 1px solid #cbd2d6;
    }
    #related_info #shoppingcart dl {
        margin: 0;
        float: none;
        width: 100%;
    }
    #related_info #shoppingcart dt, #related_info #shoppingcart dd {
	    float: none;
	    margin: 0;
	    padding: 0 3px 3px;
	    width: auto;
	    font-weight: bold;
    }
    #related_info #shoppingcart dd {
	    background: url(Images/border.dotted.grey.gif) bottom left repeat-x;
	    text-align: right;
	    font-weight: normal;
	    margin: 0 0 0.3em;
    }
    #related_info #shoppingcart .calculating { background-color: #fcffda; }
    #related_info #shoppingcart dd { color: #666; }
    #related_info #shoppingcart dd.calculating { font-weight: bold; }
    /* Sections */
    .section {
        clear: left;
	    padding: 6px 12px;
	    margin: 0 0 16px;
	    border: 1px solid #cbd2d6;
	    background: #fff;
    }
    .wrapper .section { clear: none; }
    #main_content .section { min-height: 200px; }
    #main_content .compact, #main_content .compact .section, #main_content form .section, #main_content .wrapper, #main_content .campaign { min-height: 0; }
    #page .section h2 a { background: none; }
    #main_content .section { padding: 12px; }
    .section h2 { font-size: 1.4em; }
    .section h2 a { color: #000; }
    #main_content .section h2 { margin: 0 0 0.5em; }
    /* Campaigns and banners */
    .campaign {
        float: none;
        clear: both;
        width: 100%
    }
    .banner {
        margin: 0 192px 16px 0;
        clear: both;
    }
    .banner a { position: relative; }
    .banner img {
        display: block;
        margin: 0;
    }
    /* News */
    #page .news, #page .news .section {
        clear: left;
        padding: 0;
        height: auto;
        min-height: 0;
        border: none;
        background: #fff;
    }
    #wrapper .news { width: 752px; }
    #main_content .news { width: 560px; }
    #page .news .section {
        float: left;
        padding: 1.2em 16px 0.5em;
        margin: 0;
        clear: none;
        color: #666;
        font-size: 0.9em;
    }
    #wrapper .news .section { width: 218px; }
    #wrapper .news .wide { width: 340px; }
    #main_content .news .section { width: 248px; }
    .news .section h2, .news .section h2 a { color: #000000; }
    .news .section h2 {
        font-size: 1.2em;
        font-weight: bold;
    }
    /* Confirmation messages */
    #confirmation {
	    margin: 0 0 1em;
	    font-size: 1em;
	    font-weight: bold;
    }
    /* Product boxes */
    #content .product {
	    border: 1px solid #eee;
	    margin: 0 16px 16px 0;
	    width: 168px;
	    padding: 3px;
	    float: left;
	    position: relative;
	    background: #fff;
	    cursor: pointer;
    }
    .product .content {
	    padding: 9px;
	    min-height: 110px;
	    overflow: hidden;
	    background: url(Images/bg.white_blue.1x113.gif) bottom left repeat-x #fff;
	    text-align: center;
    }
    .compact .product .content { min-height: 0; }
    .noicon .product .content { min-height: 80px; }
    .noicon .product .content p { font-weight: normal; }
    #content .noicon .product .content h2 { margin: 0 0 0.5em; }
    .product .content p {
        text-align: left;
        font-weight: bold;
    }
    #content .product h2 {
        position: relative;
	    font-size: 1.5em;
	    font-weight: normal;
	    margin: 0 0 0.1em;
	    text-align: left;
    }
    .product h2 em.arrows, .products em.arrows { color: #359b00; }
    .products em.arrows { font-weight: bold; }
    #content .product p, #content .product .image { margin: 0; }
    .product img {
	    display: block;
	    margin: 0.8em auto 0;
    }
    #content .product h2 a, #content .product h2 a:link, #content .product h2 a:visited {
	    color: #000;
	    text-decoration: none;
    }
    /* ProductText boxes */
    #content .producttext {
	    border: 1px solid #eee;
	    margin: 0 16px 16px 0;
	    width: 232px;
	    min-height: 160px;
	    padding: 3px;
	    float: left;
	    position: relative;
	    background: #fff;
    	
    }
    .producttext .content {
	    padding: 9px;
	    min-height: 110px;
	    overflow: hidden;
	    background: url(Images/bg.white_blue.1x113.gif) bottom left repeat-x #fff;
	    text-align: center;
    }
    .compact .producttext .content { min-height: 0; }
    .noicon .producttext .content { min-height: 80px; }
    .noicon .producttext .content p { font-weight: normal; }
    #content .noicon .producttext .content h2 { margin: 0 0 0.5em; }
    .producttext .content p {
        text-align: left;
        font-weight: bold;
    }
    #content .producttext h2 {
        position: relative;
	    font-size: 1.5em;
	    font-weight: normal;
	    margin: 0 0 0.1em;
	    text-align: left;
    }
    .producttext h2 em.arrows, .products em.arrows { color: #359b00; }
    .products em.arrows { font-weight: bold; }
    #content .product p, #content .product .image { margin: 0; }
    .producttext img {
	    display: block;
	    margin: 0.8em auto 0;
    }
    #content .producttext h2 a, #content .producttext h2 a:link, #content .producttext h2 a:visited {
	    color: #000;
	    text-decoration: none;
    }
    /* Product lists */
    ul.products { margin: 0; }
    #page .products li, #page .products li .product-item {
	    float: left;
	    width: 174px;
	    margin: 0 16px 16px 0;
	    padding: 0;
	    border: 1px solid #eee;
	    list-style: none;
	    background: url(Images/bg.white_blue.1x26.gif) bottom left repeat-x #fff;
    }
    #page .products li .product-item {
        margin: 0;
        position: relative;
        top: -3px;
        left: -3px;
    }
    .products li.emboss, #page .products li.emboss {
        width: 176px;
        border: none;
        background: #d4e6ec;
        position: relative;
        top: 3px;
        left: 3px;
    }
    .products li a {
	    display: block;
	    position: relative;
	    width: 116px;
	    min-height: 31px;
	    padding: 10px 8px 6px 50px;
	    font-weight: bold;
    }
    #page .noicon li a {
        padding: 10px;
        width: 154px;
        min-height: 0;
        text-align: center;
        color: #0e88cc
    }
    #content .products li a { background: none; }
    .products li a img {
        position: absolute;
        top: 6px;
        left: 6px
    }
    .products li a, .products li a:link, .products li a:visited,
    .products li a:hover, .products li a:active { color: #000; }
    /* Separator */
    #page h2.product_header {
        margin-right: 16px;
        color: #690;
        background: url(Images/border.header.separator.gif) left center no-repeat;
    }
    /* Calculators */
    .calculator, #page #content .calculator {
        padding: 12px;
        margin: 0 0 16px;
        border: 1px solid #b0d06a;
        background: url(Images/bg.green_gradient.1x408.gif) top left repeat-x #b0d06a;
        color: #3d5a02;
    }
    .calculator h1 { margin: 0 0 0.1em; }
    .calculator .button { float: right; }
    .calculator li .button { float: left; }
    .calculator form .compact label { display: none; }
    .calculator ul { margin: 1em 0; }
    .calculator h2 {
        font-size: 1.5em;
        font-weight: normal;
        clear: none;
    }
    .calculator li {
        clear: both;
        margin: 0 0 0.5em;
        list-style: none;
    }
    .calculator form select {
        width: 11em;
        margin: 0 0 0.3em;
    }
    .calculator fieldset.details {
        padding-top: 1em;
        border-top: 1px solid #3d5a02;
    }
    .calculating_product {
        position: relative;
        top: -20px;
        padding-top: 20px;
        background: url(Images/arrow.down.blue_grey.gif) top center no-repeat;
    }
    /* Default portal layout */
    #page #main_content .wrapper {
        padding: 0;
        margin: 0;
        border: none;
        background: none;
    }
    .wrapper .section { float: left; }
    /* Basic form stuff, see forms.css for more advanced forms */
    #page #content form.basic .section {
        width: auto;
        float: none;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
    }
    #page form .radio { margin: 0 0 1em; }
    #page form .radio li {
        margin: 0 0 0.5em;
        padding: 0;
        background: none;
        list-style: none;
    }
    form .vertical li {
        float: left;
        margin: 0 1em 1em 0;
    }
    form .vertical { margin: 0; }
    #page form .radio label { display: inline; }
    .basic .text, .basic label, form.basic  p {
        display: block;
        margin: 0 0 0.3em;
    }
    option { padding-right: 1em; }
    .amount { width: 3em; }
    .large_amount { width: 6em; }
    .basic .text {
        margin: 0 0 0.8em;
        padding: 3px 0;
    }
    /* Edit button */
    #editButton {
        position: absolute;
        top: 12px;
        left: 215px;
        z-index: 100;
    }
    /* Footer */
    #about {
        margin: 0 16px;
        color: #666;
        font-size: 0.9em;
    }
    .document #about {
        margin: 12px 16px 4px 212px;
        padding: 6px 12px;
        width: 544px;
    }
}