/* Allgemein ================================================================== */
html { 	height:100%; margin: 0 0 0 0; padding:0 0 0 0; }
a 		{ outline: none;} /* keine ameisen */
a       	{ text-decoration:underline;color:#35356A;font-weight:bold;font-style:italic;  vertical-align:top;}
a:hover 	{ color:white;}
b	{ font: 18px arial, helvetica, sans-serif; font-weight:bold; }
img	{ border: 0; }
br	{ clear: left; }
ul 	{list-style-image:url(http://binaryco.de/images/list10x10-kugel15.gif); }

body {
	margin: 0 0 0 0;
	padding:0 0 0 0;
    height:100%;
    background: #adb1b7 url(images/background.jpg) repeat-y;
    text-align: center;
    font: 18px arial, helvetica, sans-serif;
}



.errmsg  	{ font-size:100%; color:red; color: #D32E46;  font-weight:bold; }
.sucmsg  	{ font-size:100%; color:green; font-weight:bold; }
.hide    		{ display:none; }
.left 		{ text-align:left; }
.yel 		{ color: yellow; }
.bigger 		{ font-size:20px; }
.smaller 	{ font-size:14px; color:white; display:inline; white-space:nowrap; }
.ssmaller 	{ font-size:12px; color:black; display:inline; white-space:nowrap; }
.eingerueckt { position:relative;top:-15px;padding-left:60px; list-style-image:url(http://binaryco.de/images/minidot8x8-18.gif);}
.tickhoch     { position:relative;top:-25px; }




h1 {
	/* font-size:140%;  */
    font-size: 24px;
	font-family:Arial,Helvetica;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-style:italic;
	color: #000062; /* dunkles Blau */
    margin-bottom:25px;
    margin-top:40px;
    margin-left: -10px;
    background: url(images/background_footer.jpg) left bottom no-repeat;
}
h1 span { display:none; }

h2 {
	/* font-size: 110%;  */
    font-size: 20px;
	font-family:Arial,Helvetica;
    font-weight:bold;
	color:#2D0059; /* dunkles Lila */
    margin-bottom:8px;
    margin-top:20px;
    padding-left: 35px;
    background: url(images/kap.gif) 0 0 no-repeat;
}

h3 {
	/* font-size: 100%;  */
    font-size: 18px;
	font-family:Arial,Helvetica;
    font-weight:bold;
	color:#255F7A;  /* blaugruen */
	display:inline;
}

h4 { font-size: 0px; padding: 0 0 0 0; margin: 0 0 0 0; }




/* Hauptteil ================================================================== */
#container {
		position:absolute;
      	top:    0;
        left:  50px;
        width:900px;
         /* border:2px solid red;    */
}

#top {
     	position:		fixed;
		left:			0;
		height: 		35px;
		width:			900px;
        border-bottom: 	2px solid #747283;
        color:  		#CAC9CF; /* hellgrau */
        text-align: 	left;
        font-size:     	14px;
        font-weight:	bold;
        padding-left:  	55px;
        padding-top:    5px;
		background: 	#adb1b7 url(images/background.jpg) repeat-y;
		z-index:		8;
		float:			left;
}

* html  #top { position:absolute; }  /* bis IE6 nur absolute position */

#fb-top {
		position:		relative;
		top:			0px;
		width:			100px;
		height:			22px;
		text-align:		right; 
		float:			right;
		overflow:		hidden;
		padding-top:	0px;
		margin-right:	15px;
		margin-bottom:	2px;
		border:			0px solid yellow;
}


#main_box {
		position:		relative;
		top:			35px;
        margin-right:   0px;
        margin-left:  	200px;
		padding-top:    0px;
        padding-bottom:	20px;
        	/* background:orange; */
      	height:			100%;
}


div.textblock, div.tb_clear {
             /* oben rechts unten links */
		margin:20px 0px 40px 20px;
		display:block;
		padding:0;
		text-align:justify;
         /* border:1px solid blue;  */
}
div.tb_clear { clear:both; }

div.codeblock {
             /* oben rechts unten links */
		margin:20px 20px 20px 20px;
		display:block;
		padding:20px 20px 20px 20px;
		text-align:left;
         background-color: #B0C6C8;
         font-family: Monaco, Courier, monospace;
         /*font-size:90%; */
         border-right: 2px solid black;
         border-bottom: 2px solid black;
         border-top: 1px solid black;
         border-left: 1px solid black;
         /* border:1px solid blue;  */
}
div.divblock {
         margin:20px 0px 20px 20px;
         text-align:left;
         padding:0;
}


/* Hintergrundbilder ========================================================== */
#pic {
		position:	relative;
        top:    	10px;
        width: 		700px;
        height:		220px;
        background: transparent url(images/BICO2.jpg) no-repeat;
}

#pic_water {
		position:	absolute;
        top:   		125px;
        left:  		200px;
		left:		0;
        width: 		700px;
        height:		105px;
}
#pic_water:hover {
		background: transparent url(images/bico_water.gif) no-repeat;
}

.head_pic     {    position:relative; top:10px; width:700px; height:220px;   }
#pic_www      {    background: transparent url(images/www.jpg) no-repeat;    }
#pic_gesetz   {    background: transparent url(images/gesetz.jpg) no-repeat; }
#pic_pers     {    background: transparent url(images/pers2.jpg) no-repeat;   }
#pic_kont     {    background: transparent url(images/kontakt.jpg) no-repeat;}


#pic_sprite_1 {
         width: 100px;
         height:50px;
         float:left;
         background: transparent url(images/tut_sprite.gif) top left no-repeat;
}
#pic_sprite_2 {
         width: 60px;
         height:50px;
         float:left;
         background: transparent url(images/tut_sprite.gif) top right no-repeat;
}
#pic_sprite_3 {
         width: 80px;
         height:50px;
         float:left;
         background: transparent url(images/tut_sprite.gif) bottom left no-repeat;
}
#pic_sprite_4 {
         width: 120px;
         height:50px;
         float:left;
         background: transparent url(images/tut_sprite.gif) bottom right no-repeat;
}
#pic_sprite {
         width: 200px;
         height:200px;
         border: 1px solid black;
         background: transparent url(images/tut_sprite.gif) no-repeat;
}
#pic_sprite_mask {
         width: 200px;
         height:200px;
         border: 1px solid black;
         background: transparent url(images/tut_sprite_mask.jpg) no-repeat;
}

#tut_frame_target {
	width: 680px;
         height:420px;
         background: transparent url(images/tut_frame/ziel.jpg) no-repeat;
}

.frame_border, .frame_border_right {
	border-right: 2px solid black;
         border-bottom: 3px solid black;
         border-top: 1px solid black;
         border-left: 1px solid black;
}
.frame_border_right { text-align:right; float:right;margin:20px 0px 20px 20px;}

#tut_frame_entw1 {
	width: 555px;
         height:362px;
         margin-left:50px;
         background: transparent url(images/tut_frame/rahmen_entwurf1.jpg) no-repeat;
}
#tut_frame_entw2 {
	width: 600px;
         height:450px;
         margin-left:40px;
         background: transparent url(images/tut_frame/rahmen_entwurf2.jpg) no-repeat;
}
#tut_frame_rel1 {
	width: 680px;
         height:447px;
         background: transparent url(images/tut_frame/realisierung1.jpg) no-repeat;
}
#tut_frame_rel2 {
	width: 680px;
         height:438px;
         background: transparent url(images/tut_frame/realisierung2.jpg) no-repeat;
}
#tut_frame_rel3 {
	width: 400px;
         height:320px;
         margin-left:140px;
         background: white url(images/tut_frame/realisierung3.gif) no-repeat;
}
#tut_frame_rel4 {
	width: 506px;
         height:320px;
         margin-left:87px;
         background: white url(images/tut_frame/realisierung4.gif) no-repeat;
}
#tut_frame_rel5 {
	width: 680px;
         height:440px;
         background: transparent url(images/tut_frame/realisierung5.jpg) no-repeat;
}
#tut_frame_bspak {
	width: 680px;
         height:520px;
         background: transparent url(images/tut_frame/beispiel_ak.jpg) no-repeat;
}
#tut_frame_head {
	width: 640px;
         height:615px;
         background: transparent url(images/tut_frame/sample_pic.jpg) no-repeat;
}
#tut_frame_grad {
	width: 680px;
         height:661px;
         background: transparent url(images/tut_frame/gradient_transparent.jpg) no-repeat;
}




/* Fusszeile ================================================================== */
#footer {
        clear: both;
        height: 25px;
        border-top: 2px solid #747283;
        color: white;
        text-align: right;
        font-size:     14px;
        font-weight:bold;
        padding-right: 15px;
        padding-top:    5px;
}
#footer_left {
        float:left;
        height: 25px;
        color: #CAC9CF; /* hellgrau */
        text-align: left;
        font-size:      14px;
        font-weight:bold;
        padding-left:   15px;
        padding-bottom:  5px;
}
#footer_left a       {font-size:14.0px;text-decoration:none;color:#CAC9CF;vertical-align:top;}
#footer_left a:hover {color:#FF9933;} /* dunkel-orange */

#impressum  #navimpr a,
#csskont    #navkont a{
         color: #800000;
         text-align: left;
         font-weight:bold;
         font-size:14px;
         text-decoration:none;
         cursor:default;
}

/* Logo Definitionen ========================================================= */
div.logo {
         position:	fixed;
         width: 	180px;
		 height:	60px;
         top:   	43px;
         left:   	50px;
         z-index:	8;
		 background: 	transparent url(images/BICO_logo_medium.jpg) top left no-repeat;
}
* html  div.logo { position:absolute; }  /* bis IE6 nur absolute position */

/* Menue Definitionen ========================================================= */
div.menu {
         position:	fixed;
         width: 	180px;
         top:   	270px;
         left:   	50px;
         z-index:	8;
}

* html  div.menu { position:absolute; }  /* bis IE6 nur absolute position */

a.menu {
		display:	block;
        text-decoration:none;
             /* oben rechts unten links */
        margin:0    0      0     0;
            /* oben/unten links/rechts */
		padding:  7px      10px;
}

a.menu:link,
a.menu:visited,
.button {
         width:			160px;
         height:		35px;
         background: 	transparent url(images/button_sprite.jpg) top left no-repeat;
         color: 		white;
         text-align: 	left;
         font-weight:	normal;
         font-size: 	16px;
         text-decoration:none;
}

a.menu:hover,
.button:hover   {
         width:			160px;
         height:		35px;
         background: 	transparent url(images/button_sprite.jpg) top right no-repeat;
         color:			white;
         text-align: 	left;
         font-weight:	bold;
         font-size:		16px;
         text-decoration:none;
}

#mainpage   	         #navmain a,
#webdesign  	         #navweb   a,
#webservice 	         #navserv a,
#referenzen  	 #navref   a,
#testberichte	 #navtest a,
#persoenliches     #navpers a
{
         width:160px;
         height:35px;
         background: transparent url(images/button_sprite.jpg) top right no-repeat;
         color: #800000;
         text-align: left;
         font-weight:bold;
         font-size:16px;
         text-decoration:none;
         cursor:default;
}


/* Eingabeformular ========================================================= */
.input, .inp_w300, .inp_w540, .inp_w680  {
    border: 1px solid #006;
    background: #ffc;
    font: 18px arial, helvetica, sans-serif;
}
.inp_w300 { width:300px; }
.inp_w540 { width:540px; }
.inp_w680 { width:680px; }

.input:hover, .inp_w300:hover, .inp_w540:hover, .inp_w680:hover {
    border: 1px solid #f00;
    background: #ff6;
}
.inp_w300:hover { width:300px; }
.inp_w540:hover { width:540px; }
.inp_w680:hover { width:680px; }

.button, .button:hover {
    border: none;
    padding: 2px 8px;
    width:180px;
    text-align:center;
    font-size:16px;
}

label {
    display: block;
    width: 120px;
    float: left;
        /* oben rechts unten links */
    margin: 8px 4px 8px 0px;
    text-align: left;
}

#hinweis {
	width: 680px;
    color:#800000;
    font-weight:bold;
    text-align: left;
}



#oben_rechts {
	/* background-color: yellow; */
        height:30px;
        width:85px;
        position:absolute;
        top:0;
        left:865px;
        padding-left:0px;
        padding-right:0px;
        text-align:left;
        overflow:hidden;
}



/* Spruchzeile ================================================================== */
#spruch {
        clear: 			both;
        height: 		25px;
        border-top: 	2px solid #747283;
        color: 			#990066;
        text-align: 	center;
        font-size:     	16px;
        font-weight:	bold;
        font-style:		italic;
        padding-right: 	15px;
        padding-top:    5px;
        line-height:	1.2em;
}
#spruch p {
         display: inline;
         white-space: nowrap;
}