/* --------------------------------------------------------------------------------------
+
+   SATURIZED - The Interactive Agency
+
+   = Consulta Bern layout
+
-------------------------------------------------------------------------------------- */

/*
= IMPORTING STUFF AND SETTING DEFAULT STYLES
-------------------------------------------------------------------------------------- */
@import url("reset.css");

/*
= LAYOUT
-------------------------------------------------------------------------------------- */
html{ }
body{ background: #161616;}
#overlay{ background: url('../images/content-bg.png') top left no-repeat; background-attachment: fixed; overflow: hidden; z-index: 55;}
#wrapper{ width: 860px; padding: 0 20px; z-index: 99; position: relative;}
#preloading{ display: none;}


/*
= HEADER ---------------- */
    ul#header{ list-style: none; position: relative; width: 990px; height: 145px; }
        ul#header li{ float: left; display: block; margin-right: 19px; border-left: 1px solid #313232; width: 252px; padding-left: 10px; color: #a4a6a6; position: relative; height: 133px; padding-top: 12px;}
        ul#header li h2{ font-size: 11px; color: #fff; text-transform: uppercase; margin: 0 0 8px; line-height: 22px;}
        ul#header li p, ul#header li cite, ul#header li address{ font-size: 12px; margin: 0; padding: 0; }
            ul#header li cite, ul#header li address{ font-style: normal; }
            ul#header li address{ margin-bottom: 10px;}
        ul#header li a.link, a#goto-contact { background:#d70101; color: #fff; display: inline-block; font-size: 11px; line-height: 11px; padding: 4px 8px; text-decoration: none; position: absolute; bottom: 0; font-weight: bold; left: 10px;}
            ul#header li a.link:hover, a#goto-contact:hover{ background:#fff; color: #d70101;}
        ul#header li ul{ list-style: none;}
            ul#header li ul li{ border-left: none; width: auto; padding: 0; margin: 0;}

        ul#header li.contact{ width: 110px;}
        ul#header li.testimonials{ width: 382px;}
        ul#header li.twitter{ width: 242px;}
        ul#header li.logo{ width: 144px; border-left: none; padding-left: 0; margin-top: -12px;}
            ul#header li.logo h1 a{ position:fixed; display:block; width: 144px; height: 145px; background: url('../images/logo.png') no-repeat; text-indent: -9999px; z-index: 980;}

        /*
          + Twitter implementation */
        div#tweet{ display: block;}
        div#tweet a{ color: #a4a6a6; display: inline !important; white-space:normal;}
            div#tweet a:hover{ color: #fff;}
        ul.tweet_list li{ display: block; float: none; width: 100% !important; overflow: hidden;}

        /*
          + Slider nav */
        ul#testimonials li{ height: 105px; background: transparent !important;}
        ul#testimonials li cite{ height: 80px; overflow: hidden; display: block;}
        ul#testimonials li p{ bottom: 2px; position: absolute;}
            a#prev, a#next{ display: block; position: absolute; background: url('../images/slider-arrows.png') no-repeat; position: absolute; bottom: 4px; width: 15px; height: 14px; text-indent: -9999px; z-index: 990;}
            a#prev{ right: 5px; background-position: top right;}
                a#prev:hover{ background-position: bottom right;}
            a#next{ right: 25px; background-position: top left;}
                a#next:hover{ background-position: bottom left;}

/*
= CONTENT ---------------- */
    #content{ padding: 80px 0 60px 20px; }
        #content h2{ position: relative; padding-top: 10px; display: block; cursor: pointer; }
                #content h2.wirtschaftsprufung{ width: 521px;}
                    #content h2.wirtschaftsprufung a{ width:521px; background: url('../images/wirtschaftsprufung.png') top left no-repeat;}
                #content h2.steuerberatung{ width: 405px;}
                    #content h2.steuerberatung a{ width:405px; background: url('../images/steuerberatung.png') top left no-repeat;}
                #content h2.unternehmensberatung{ width:634px;}
                    #content h2.unternehmensberatung a{ width:634px; background: url('../images/unternehmensberatung.png') top left no-repeat;}
                #content h2.treuhand{ width:261px;}
                    #content h2.treuhand a{ width:261px; background: url('../images/treuhand.png') top left no-repeat;}
                #content h2.experten{ width:443px;}
                    #content h2.experten a{ width:443px; background: url('../images/experten.png') top left no-repeat;}
            #content h2 a{ color: #fff; font-size: 64px; text-decoration: none; font-weight: normal; margin: 0; padding: 0; line-height: 64px; text-indent: -9999px; height: 60px; display: block;}
            #content h2 span.desc{ display: none; color: #fff; font-size: 15px; font-weight: bold !important;}
            #content h2 a.selected{ display: none; color: #d70101; background-position: bottom left;}
            #content h2 a.hovered{ display: none; color: #ccc;}
                #content h2.ui-state-active a, #content h2.ui-state-hover a{ display: none;}
                #content h2.ui-state-hover a.hovered{ display: block;}
                    #content h2.ui-state-active a.hovered{ display: none;}
                #content h2.ui-state-active a.selected{ display: block;}

            #content h2.ui-state-hover span.desc, #content h2.ui-state-active span.desc{ display: block; color: #fff; font-size: 15px; line-height: 15px; position: absolute; left: 0; top: 30px; cursor: pointer;}

    /*
      + Accordions content */
    #content div{ padding: 0 35px 0 10px; background: url('../images/separator.png') bottom right no-repeat; position: relative; width: 800px;}
        #content div h3{ font-size: 15px; color: #999;}
        #content div p, #content ul li{ color: #e0e0e0;}
        #content div a.close-acc{ position: absolute; right: 10px; bottom: 1px; background: url('../images/close-bg.png') top left no-repeat; display: block; width: 70px; height: 45px; text-indent: -9999px; cursor: pointer;}
            #content div a.close-acc span{ background: url('../images/close-arrow.png') no-repeat; display: block; width: 70px; height: 45px;}
        #content div{ overflow: hidden;}
        #content div.full h3, #content div.full ul{ width: 430px !important; padding-left: 20px;}
        #content div.full ul{ padding-bottom: 15px; margin-left: 13px;}

    ul.twoCols{ list-style: none; height: 220px; overflow: hidden;}
        ul.twoCols li{ display: block; position: absolute;}
            ul.twoCols li.first{ width: 420px; padding-left: 20px;}
            ul.twoCols li.last{ width: 320px; padding-left: 30px; left: 470px;}
            ul.twoCols li ul{ list-style: none;}
        ul.twoCols li ul li{ width: 100%; clear: both; padding-left: 0; padding-left: 16px; background: url('../images/certificate.gif') 0px 3px no-repeat; margin-bottom: 8px; position: relative; left: auto;}

/*
= FOOTER ---------------- */
    #footer{ background: url('../images/footer-bg.png') top left repeat-x; clear: both; display: block; padding: 15px 0px; position: relative;width: 100%; z-index: 999;}
        #footer h3{ margin-left: 20px; color: #7d8080; font-size: 11px; line-height: 20px; font-weight: normal; margin-bottom: 8px;}

    /*
    + Partners tabs */
    ul#tabs{}
        ul#tabs li{ display: inline-block; line-height: 12px; height: 12px; background: url('../images/tab-arrows.png') right 2px no-repeat; margin-right: 12px;}
            ul#tabs li.ui-state-active{ background-position: bottom right;}
        ul#tabs li a{ color: #282929; font-weight:bold; text-decoration: none; padding-right: 14px;}
        ul#tabs li.ui-state-active a{ color: #d70101 !important;}
            ul#tabs li.ui-state-active a:hover{ text-decoration: line-through;}

    .ui-tabs-panel{ display: block !important; }
    .ui-tabs-hide { display: none !important; }

    div#partners{ margin-left: 20px; width: 460px;}
        div#partners div{ padding-top: 10px;}
        div#partners div a{ float: left; margin-right: 15px;}
            div#partners div a img{border: 1px solid #ccc;}
            div#partners div a:hover img{ border-color: #d70101;}
        div#partners p{ margin: 0; padding: 0; font-size: 11.22px; color: #282929;}

    /*
    + Contact form */
    #contact{}
    #contact h3{ padding: 0; margin: 0;}
        #contact h3 a{ display: block; position: absolute; right: 0; margin: 0; border-left: 1px solid #dadada; height: 100%; top: 0; font-size: 17px; color: #282929; font-weight: bold; text-decoration: none; width: 210px; padding: 0 20px; background: transparent url('../images/contact-arrows.png') -20px 50% no-repeat;}
            #contact h3 a:hover{ color: #d70101; background: #fff url('../images/contact-arrows.png') -20px 50% no-repeat;}
            #contact h3 a.active{ background: #fff url('../images/contact-arrows.png') -270px 50% no-repeat;}

    div#popup{ background: #fff; position: absolute; right: 0; bottom: 77px; border-bottom: 1px solid #dadada; width: 574px; padding: 20px;}
        ul.cols{ list-style: none;}
        ul.cols li{ width: 272px; float: left; display: block; height: 314px;}
            ul.cols li.first{ padding-right: 14px; border-right: 1px dotted #cccccc;}
            ul.cols li.last{ padding-left: 15px;}
        ul.cols li h2{ font-size: 15px; line-height: 15px;}

        ul.cols li ul.addr{ padding-bottom: 10px;}
        ul.cols li ul.addr li{ font-size: 11px; float: left; height: auto; display: block; margin: 0; padding: 0; border: none;}
            ul.cols li ul.addr li.first{ width: 106px !important;}
            ul.cols li ul.addr li.last{ width: 156px !important; padding-left: 8px;}
        div#gmaps{ background: url('../images/gmaps.png') bottom left no-repeat; width: 266px; height: 196px; padding: 5px; overflow: hidden;}
            div#gmaps:hover{ background-position: top left;}
            div#gmaps iframe div#copyright{ display: none !important;}

    div#popup form{ position: relative;}
        div.input-holder{ background: url('../images/form-input.png') top left no-repeat; position: relative; width: 272px; height: 30px; margin-bottom: 10px; }
            div#popup form div.input-holder label, div.message-holder label{ display: inline; color: #000; font-weight:bold;}
                div#popup form div.input-holder label{ position: relative; top: 6px; left: 10px; }
                div#popup form div.input-holder input{ background: transparent; border: none; height: 14px; line-height: 14px; position: absolute; right: 10px; display: block; top: 8px; color: #000; font-weight:bold;}

        div.message-holder{ background: url('../images/form-textarea.png') top left no-repeat; display: block; width: 272px; height: 161px;}
            div#popup form div.message-holder label{ top: 10px; left: 10px; position: relative;}
            div#popup form div.message-holder textarea{ width: 254px; height: 120px; border: 0; background: transparent; padding: 9px;}

        div.input-holder.focus, div.message-holder.focus{ background-position: bottom left;}

        div#feedback{ position: absolute; bottom: -3px;}
                #feedback p { font-size: 11px; margin: 0;}
                .error, .notice, .success {padding: 0 0.8em; height: 26px; line-height: 26px; margin-bottom:1em;border:2px solid #ddd;}
                .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
                .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
                .success {background:#E6EFC2;color:#264409;border-color:#C6D880;}

        div#popup form button{ text-transform: uppercase; background: #d70101; font-size: 12px; font-weight: bold; padding: 3px 10px; margin-top: 10px; border: 0; color: #fff; width: 60px; text-align: center; border: 1px solid #d70101; cursor: pointer;}
            div#popup form button:hover, div#popup form button.hover{ color: #d70101 !important; background: #fff;}

    a#popup-hide{ position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: block; background: url('../images/popup-close.png') top right no-repeat; text-indent: -9999px;}
        a#popup-hide:hover{ background-position: bottom left;}

    h2#copyright{ background: #ccc; height: 26px; line-height: 26px; text-align: center; font-weight: normal; font-size: 10px; color: #666; padding: 0; margin: 0; width: 100%; z-index: 10; position: relative;}
        h2#copyright a{ color: #666; text-decoration: none;}