/* ***************************************************** 

    Webauftritt h3 Berlin, (c) 2008 - h3 PartG
    
    Filename:   style.css
    Descr.:     default stylesheet
    Remarks:    Tab width 4

    Version/Date:   1.1 10.02.2009, gj, wh


***************************************************** */




/**** default tag styles ******************************************************/
body {
    margin:0px;
    padding:0px;
    text-align:left;
    vertical-align:top;
    background-color:#FFFFFF;
    border:0;
    font-size:12px;
    /*font-size:100.01%;*/
    color:#1E1E1E;  
}
body, h2, h3, h4, h5 {
    font-family:Arial, Helvetica, sans-serif;
}


/**** default headlines */
h1 {
    font-family:"Times New Roman", Times, serif;
    line-height:0.9em;
    margin:0 13px 0.5em 13px;
}
h2, h3, h4, h5 {
    font-family:Arial, Helvetica, sans-serif;
    margin:1.0em 13px 0.3em 13px;
}
h1, h2, h3, h4, h5 {
    padding:0px;
    font-weight:bold;
}
h1 { font-size:2.5em; color:#003D70; font-weight:normal;}
h2 { font-size:1.3em; }
h3 { font-size:1.1em; }
h4 { font-size:1.0em; color:#003D70; }
h5 { font-size:1.0em; }


/**** default hyperlink */
a:link { color:#003D70; }
a:visited { color:#003D70; }
a:hover { color:#BD7400; }
a:active, a:focus {outline:none;}


/**** horizontal ruler */
hr {
    height:1px;
    border:none;
    border-bottom:1px solid #7F9EB7;
    margin:7px 0px;
    padding:0px
}


/**** default form and table */
form { margin:0px; padding:0px; }
/*
label, .label {}
input, select, textarea {}
*/
input[disabled],select[disabled],textarea[disabled] { background-color:#FF00FF; }


form table {}
form td {}


table {}
td {}




/**** helper classes **********************************************************/

/**** font colors */
.white  { color:#FFFFFF; }
.blue   { color:#003D70; }
.grey   { color:#686080; }
.red    { color:#C11111; }

/**** font style formats */
.bold   { font-weight:bold; }
.normal { font-weight:normal; }
.italic { font-style:italic; }
.caps   { font-variant:small-caps; }
.underl { text-decoration:underline; }
.small  { font-size:11px; }
.mini   { font-size:6px; }
.size90 { font-size:90%; }
.size100{ font-size:100%; }

/**** misc generic formats */
.left   { text-align:left; }
.just   { text-align:justify; }
.right  { text-align:right; }
.center { text-align:center; }

.top    { vertical-align:top; }
.middle { vertical-align:middle; }
.bottom { vertical-align:bottom; }

.floleft    { float:left; }
.floright   { float:right; }
.nofloat    { float:none; }
.clear      { clear:both; }

.nomarg { margin:0; }
.nopadd { padding:0; }
.spacetop   { margin-top:1.00em; }
.spacebot   { margin-bottom:1.00em; }
.spacetop05 { margin-top:0.50em; }
.spacebot05 { margin-bottom:0.50em; }

.nobr { white-space:nowrap; }

.border     { border:1px solid #C0C0C0; }
.noborder   { border:none; }

.box { border:1px solid #101430; padding:0 2px 0 2px; }
.infobox {
    /*
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:90%;
    border:1px solid #101430;
    padding:1px 2px 2px 2px;
    background-color: #F4F3F2;
    */
}




/**** website ids and classes *************************************************/


#main {
    min-width:910px;
    max-width:1070px;
    min-height:610px;
    padding-right:15px;
    background:url(../images/bg_kreise.gif) -162px -244px no-repeat;
}

#main_start {
    min-width:910px;
    max-width:1070px;
    min-height:610px;
    padding-right:15px;
    background:url(../images/bg_anim-kreise.gif) -162px -244px no-repeat;
}

#main_refs {
    min-width:910px;
    max-width:1070px;
    min-height:610px;
    padding-right:15px;
    background:url(../images/bg_kreis_unt-li.gif) right bottom no-repeat;
}

.ref_right {background:url(../images/bg_kreis_unt-re.gif) 1085px bottom no-repeat;}



/**** head illustration */
#head_illu {
    height:150px;    
}

#head_illu a {display:block; position:absolute;}
#head_illu a:link, #head_illu a:visited{z-index:4;}
#head_illu a:hover {z-index:2;}

/**** head illustration navigation */
/* start page */
.h_rollimg1 {width:478px; height:150px; margin:0px; float:right; text-align:left; background:url(../images/illu/head_start_bg-neutr.gif) left 10px no-repeat;}

.headroll1:link, .headroll1:visited {width:100px; height:100px; top:30px; margin-left:88px;}
.headroll1:hover {margin-left:0px; width:477px; height:140px; top:10px; background:url(../images/illu/head_start_img1.gif) no-repeat left top;}

.headroll2:link, .headroll2:visited {width:100px; height:100px; top:30px; margin-left:218px;}
.headroll2:hover { margin-left:0px; width:477px; height:140px; top:10px; background:url(../images/illu/head_start_img2.gif) no-repeat 0 0;}

.headroll3:link, .headroll3:visited {width:100px; height:100px; top:30px; margin-left:348px;}
.headroll3:hover {margin-left:0px; width:477px; height:140px; top:10px; background:url(../images/illu/head_start_img3.gif) no-repeat 0 0;}

/* profile page */
.h_rollimg2 {width:478px; height:150px; margin:0px; float:right; text-align:left;}

.headroll4:link, .headroll4:visited {width:100px; height:100px; top:30px; margin-left:88px; background:url(../images/illu/head_profile_img1.gif) no-repeat left bottom;}
.headroll4:hover {width:100px; height:120px; top:30px; background-position:left top;}

.headroll5:link, .headroll5:visited {width:100px; height:100px; top:30px; margin-left:218px; background:url(../images/illu/head_profile_img2.gif) no-repeat left bottom;}
.headroll5:hover {width:100px; height:120px; top:30px; background-position:left top;}

.headroll6:link, .headroll6:visited {width:100px; height:100px; top:30px; margin-left:348px; background:url(../images/illu/head_profile_img3.gif) no-repeat left bottom; }
.headroll6:hover {width:100px; height:120px; top:30px; background-position:left top;}

/* leistungen page */
.h_rollimg3 {width:478px; height:150px; margin:0px; float:right; text-align:left; background:url(../images/illu/head_leistungen_bg.gif) 6px 10px no-repeat;}

.headroll7:link, .headroll7:visited {width:117px; height:90px; top:10px; margin-left:6px; background:url(../images/illu/head_def_roll.gif) no-repeat left top;}
.headroll7:hover {width:119px; height:90px; top:10px; background-position:left bottom;}

.headroll8:link, .headroll8:visited {width:117px; height:90px; top:10px; margin-left:124px; background:url(../images/illu/head_konz_roll.gif) no-repeat left top;}
.headroll8:hover {width:119px; height:90px; top:10px; background-position:left bottom;}

.headroll9:link, .headroll9:visited {width:117px; height:90px; top:10px; margin-left:242px; background:url(../images/illu/head_prod_roll.gif) no-repeat left top; }
.headroll9:hover {width:119px; height:90px; top:10px; background-position:left bottom;}

.headroll10:link, .headroll10:visited {width:117px; height:90px; top:10px; margin-left:360px; background:url(../images/illu/head_nach_roll.gif) no-repeat left top; }
.headroll10:hover {width:119px; height:90px; top:10px; background-position:left bottom;}

/* leistungen subcategories */
.h_rollimg4 {width:478px; height:150px; margin:0px; float:right; text-align:left; background:url(../images/illu/head_def_bg.gif) 6px 10px no-repeat;}
.h_rollimg5 {width:478px; height:150px; margin:0px; float:right; text-align:left; background:url(../images/illu/head_konz_bg.gif) 6px 10px no-repeat;}
.h_rollimg6 {width:478px; height:150px; margin:0px; float:right; text-align:left; background:url(../images/illu/head_prod_bg.gif) 6px 10px no-repeat;}
.h_rollimg7 {width:478px; height:150px; margin:0px; float:right; text-align:left; background:url(../images/illu/head_nach_bg.gif) 6px 10px no-repeat;}

/*referenzen page*/
.h_rollimg8 {width:647px; height:150px; margin:0px 0px 0px 320px; /*float:left;*/ text-align:left; background:url(../images/illu/head_refers_bg.gif) 0px 10px no-repeat;}

.headroll11:link, .headroll11:visited {width:132px; height:115px; top:27px; left:339px; background:url(../images/illu/head_refers_img1.gif) no-repeat left top; }
.headroll11:hover {width:132px; height:115px; top:27px; left:339px; background-position:left bottom;}

.headroll12:link, .headroll12:visited {width:126px; height:115px; top:27px; left:472px; background:url(../images/illu/head_refers_img2.gif) no-repeat left top; }
.headroll12:hover {width:126px; height:115px; top:27px; left:472px; background-position:left bottom;}

.headroll13:link, .headroll13:visited {width:126px; height:115px; top:27px; left:602px; background:url(../images/illu/head_refers_img3.gif) no-repeat left top; }
.headroll13:hover {width:126px; height:115px; top:27px; left:602px; background-position:left bottom;}

/*referenzen page*/
.h_rollimg9 {width:476px; height:150px; margin:0px; float:right; text-align:left; background:url(../images/illu/head_kontakt_bg.gif) no-repeat left top;}
.headroll14:link, .headroll14:visited {width:266px; height:150px; top:5px; margin-left:201px; background:url(../images/illu/head_kontakt_roll.gif) no-repeat left top; }
.headroll14:hover {width:266px; height:150px; top:5px; background-position:left bottom;}


/**** h3-logo div */
#h3logo {
    margin-top:-10px;
    margin-left:29px;
    width:286px;
    text-align:left;
}



/**** first level navigation */
#l1nav {
    position:relative;
    top:-73px;
    height:80px;
}
#l1nav div, #l1nav ul, #l1nav li {
    margin:0px;
    padding:0px;
}
#l1nav .navstart, #l1nav .navbg, #l1nav ul, #l1nav .navend {
    position:absolute;
    top:29px;
    height:45px;
}
#l1nav .navstart {
    width:406px;
    background:url(../images/bg_hauptnav_li_neu.gif) right top no-repeat;
    z-index:1;
}
#l1nav .navbg {
    left:338px;
    right:0px;
    background:url(../images/bg_hauptnav_mi.gif) 66px 0px no-repeat;
    z-index:2;
}
#l1nav .navend {
    right:0px;
    width:25px;
    z-index:3;
}
#l1nav ul {
    left:338px;
    right:-2px;
    list-style-type:none;
    z-index:4;
}
#l1nav li {
    position:relative;
    left:-8px;
    width:24.9%;
    margin-top:9px;
    float:left;
}
#l1nav a {
    display:block;
    height:27px;
    line-height:27px;
    text-align:center;
    vertical-align:middle;
    font-size:1.1em;
    font-weight:bold;
    text-decoration:none;
    background:url(../images/l1_hauptnav.gif) no-repeat 0px 0px;
}
#l1nav a:link, #l1nav a:visited {
    background-position:center -120px;
    color:#FFFFFF;
}
#l1nav a:hover {
    background-position:center -60px;
    color:#FFAA1C;
}
#l1nav a.sel:link, #l1nav a.sel:visited {
    background-position:center 0px;
    color:#003D70;
}
#l1nav a.sel:hover {
    background-position:center -60px;
    color:#FFAA1C;
}




/**** left column */
#lcol {
    float:left;
    margin-top:-2px;
    margin-left:30px;
    width:234px;
}
#lcol div, #lcol p, #lcol ul, #lcol li {
    margin:0px;
    padding:0px;
}
#lcol ul {
    list-style-type:none;
}
#lcol li {
    position:relative;
    padding:8px 0px 0px 9px;
}
#lcol li p {
    position:relative;
    top:-7px;
}
#lcol li.first {
    padding-top:0px;
}
#lcol li.last {
    padding-bottom:6px;
}
#lcol .navstart {
    height:42px;
    width:234px;
}
#lcol .navstart p {
    padding-top:3px;
    padding-left:26px;
    font-weight:bold;
}
#lcol .navstart h3 {
    padding:3px 0px 0px 26px;
    margin:0px;
}
#lcol .navstart h5 {
    padding:3px 0px 0px 26px;
    margin:0px;
}
#lcol a {
    display:block; 
    width:190px; 
    padding-left:16px;
    text-decoration:none;
}


    /**** second level navigation (in the space of left col) */
    #l2nav {
        position:relative;
    }
    #l2nav li {
        background:url(../images/l2_nav_mid.png) left top repeat-y;
    }
    #l2nav li.last {
        background:url(../images/l2_nav_end.png) left bottom no-repeat;
    }
    #l2nav .navstart {
        background:url(../images/l2_nav_head.png) left top no-repeat;
    }
    #l2nav a {
        font-weight:bold;
    }
    #l2nav a:link, #l2nav a:visited {
        background:url(../images/l2_nav_dummie1.gif) no-repeat left center;
        color:#003D70;
    }
    #l2nav a:hover {
        background:url(../images/l2_nav_dummie2.gif) no-repeat left center;
        color:#BD7400;
    }
    #l2nav a.sel:link, #l2nav a.sel:visited {
        background:url(../images/l2_nav_dummie3.gif) no-repeat left center;
        color:#000000;
    }
    #l2nav a.sel:hover {
        background:url(../images/l2_nav_dummie2.gif) no-repeat left center;
        color:#BD7400;
    }


    /**** first service navigation (in the space of left col) */
    #snav {
        position:relative;
        top:16px;
    }
    #snav li {
        background:url(../images/snav_mid.png) left top repeat-y;
    }
    #snav li.last {
        background:url(../images/snav_end.png) left bottom no-repeat;
    }
    #snav .navstart {
        background:url(../images/snav_head.png) left top no-repeat;
    }
    #snav a {
        color:#000000;
    }
    #snav a:link, #snav a:visited {
        background:url(../images/l2_nav_dummie1.gif) no-repeat left center;
    }
    #snav a:hover {
        background:url(../images/l2_nav_dummie2.gif) no-repeat left center;
    }
    #snav a.sel:link, #snav a.sel:visited {
        background:url(../images/l2_nav_dummie3.gif) no-repeat left center;
    }
    #snav a.sel:hover {
        background:url(../images/l2_nav_dummie2.gif) no-repeat left center;
    }


    /**** references teaser navigation (in the space of left col) */
    #reflist {
        position:relative;
    }
    #reflist li {
        background:url(../images/snav_mid.png) left top repeat-y;
    }
    #reflist p {
        padding-right:6px;
    }
    #reflist li.last {
        background:url(../images/snav_end.png) left bottom no-repeat;
    }
    #reflist .navstart {
        background:url(../images/snav_head.png) left top no-repeat;
    }
    #reflist a {
        font-weight:bold;
    }
    #reflist a:link, #reflist a:visited {
        background:url(../images/l2_nav_dummie1.gif) no-repeat left 2px;
        color:#003D70;
    }
    #reflist a:hover {
        background:url(../images/l2_nav_dummie2.gif) no-repeat left 2px;
        color:#BD7400;
    }

    /**** text info in the space of left col */
    .left_inf {
        background:url(../images/snav_mid.png) left top repeat-y;
    }
    .left_inf_last {
        background:url(../images/snav_end.png) left bottom no-repeat; height:25px;
    }

/**** content area */
#content {
    margin-top:-46px;
    margin-right:0px;
    margin-bottom:20px;
    margin-left:311px;
}




/**** content paragraph and default lists */
#content p { margin:0.5em 13px; line-height:1.5em;}

#content ul { margin:0.7em 1.2em 0.7em 2em; padding:0px; line-height:1.5em; }
#content ol { margin:0.7em 1.2em 0.7em 2em; padding:0px; line-height:1.5em; }
#content li { margin:0.5em 0px; }


/**** content - different elements */
.portrait {margin:0px 13px;}
.portrait td {text-align:left; border-bottom:1px solid #7F9EB7;}
.port_fst {vertical-align:top; padding:0; width:140px; height:210px;}
.port_fst img {margin-top:15px;}
.port_sknd {vertical-align:top; padding:0; width:140px; height:220px;}
.port_sknd img {margin-top:25px;}

.ref_illu {display:block; width:162px; height:114px; float:left; margin:5px 20px 10px 0px; padding:0px;}

.artikelliste {padding:0;}
.artikelliste img {display:block; margin:5px 10px 10px 0px; float:left;}
.artikelliste p {padding-bottom:7px;}


/**** content formular and form fields */
#content .formdiv {
    float:left;
}
#content form {
    margin:0px 13px 1.0em 13px;
}
#content label, #content .label {
    font-size:0.9em;
    font-weight:bold;
}




#content .formrow {
    margin-top:10px;
    float:left;
}
#content .formfield/*, #content .formcheckbox, #content .formradio*/ {
    float:left;
    margin-right:11px;
}
#content .formfield input {
    position:relative;
    top:0px;
    left:0px;
    font-size:1.0em;
}
#content .formfield input.submit {
    background-color:#0062B4;
    color:#FFFFFF;
}
#content /*.formfield*/ .w150 input {
    width:150px;
}
#content /*.formfield*/ .w480 input {
    width:480px;
}
#content .formfield select {
    position:relative;
    top:0;
    left:0;
    font-size:1.0em;
}
#content /*.formfield*/ .w150 select {
    width:154px;
}
#content .formfield textarea {
    position:relative;
    top:0;
    left:0;
    margin:0;
    font-size:1.0em;
    line-height:1.2em;
}
#content /*.formfield*/ .w480 textarea {
    width:480px;
}

#content .formcheckbox input, #content .formradio input {
    position:relative;
    top:0;
    left:0;
    width:13px;
    height:13px;
    margin:0;
    font-size:1.0em;
}
#content .formcheckbox p, #content .formradio p {
    margin:0 20px 0 5px;
    float:left;
}


#content .formfieldborder {
    position:relative;
}
#content .formcheckbox .formfieldborder, #content .formradio .formfieldborder {
    float:left;
}
#content .formfieldborder_top, #content .formfieldborder_right, #content .formfieldborder_bottom, #content .formfieldborder_left {
    position:absolute;
}

/* Rahmen für Eingabe- u. Auswahlfelder und Checkboxen */
#content .formfieldborder_right {
    right:0;
    top:0;
    bottom:0;
    width:0;
    border-right:1px solid #0062B4;
    border-left:1px solid #FFFFFF;
}
#content .formfieldborder_left {
    left:0;
    bottom:0;
    top:0;
    width:0;
    border-left:1px solid #0062B4;
    border-right:1px solid #FFFFFF;
}
#content .formfieldborder_top {
    top:0;
    left:1px;
    right:1px;
    height:0;
    border-top:1px solid #0062B4;
    border-bottom:1px solid #FFFFFF;
}
#content .formfieldborder_bottom {
    bottom:0;
    right:1px;
    left:1px;
    height:0;
    border-bottom:1px solid #0062B4;
    border-top:1px solid #FFFFFF;
}

/* Rahmen für Radio-Buttons */
#content .formradio .formfieldborder_right {
    right:0;
    top:2px;
    bottom:3px;
    width:1px;
    border-left:1px solid #0082F0;
    border-right:none;
    background:url(../images/radio_v.gif) no-repeat center;
}
#content .formradio .formfieldborder_left {
    left:1px;
    bottom:3px;
    top:2px;
    width:1px;
    border-right:1px solid #0082F0;
    border-left:none;
    background:url(../images/radio_v.gif) no-repeat center;
}
#content .formradio .formfieldborder_top {
    top:0;
    left:3px;
    right:2px;
    height:1px;
    border-bottom:1px solid #0082F0;
    border-top:none;
    background:url(../images/radio_h.gif) no-repeat center;
}
#content .formradio .formfieldborder_bottom {
    bottom:1px;
    right:2px;
    left:3px;
    height:1px;
    border-top:1px solid #0082F0;
    border-bottom:none;
    background:url(../images/radio_h.gif) no-repeat center;
}






/**** meta navigation (in the space of footer) */
#footer {
    margin-left:311px;
}
#footer ul {
    padding:0px;
    margin:15px 0px 0px 13px;
    list-style-type:none;
}
#footer li {
    float:left;
}
#footer a {
    font-weight:bold;
    text-decoration:none;
}