Quadrant 2.0 CSS

/* Browserreset der Abstände */
* {
margin:0;
padding:0;
}

html {
}

body {
text-align:center;
background: url(bilder/layout/body/bg_body.jpg) top left repeat-x;
margin:0;
padding:0;
}

/* Typografie */
.autor {font: 9px Helvetica, Arial, san-serif; padding:0; margin:0; text-align:left; color:#666666; letter-spacing:3px; text-transform:uppercase;}
h1 {font: 20px Georgia, Times New Roman, Times, serif; padding:5px 0 10px 0; margin:0; text-align: left; color: #CC0033; font-style:italic;}
h1.nopad {font: 20px Georgia, Times New Roman, Times, serif; padding:0 0 10px 0; margin:0; text-align: left; color: #CC0033; font-style:italic;}
h2 { font: 16px Helvetica, Arial, san-serif; padding:3px 0 5px 0; margin:0; text-align: left; color: #333333; font-weight:bold; }
h3 { font: 14px Helvetica, Arial, san-serif; padding:30px 0 10px 0; margin:0; text-align: left; color: #666666; font-weight:bold; }
#colright p { font: 12px/16px Helvetica, Arial, san-serif; padding:0 0 12px 0; margin:0; text-align: left; color: #666666; font-weight:normal; }
#colleft p { font: 12px/16px Helvetica, Arial, san-serif; padding:0 0 12px 0; margin:0; text-align: left; color: #666666; font-weight:normal; text-align:right; }
#colmain a { font: 16px/22px Helvetica, Arial, san-serif; padding:0 0 14px 0; margin:0; text-align: left; color: #333333; font-weight:normal; }
p { font: 16px/22px Helvetica, Arial, san-serif; padding:0 0 14px 0; margin:0; text-align: left; color: #333333; font-weight:normal; }

/* Seitenlayout */

#wrap {
	width:980px;
	margin: 0 auto;
}
	
#picture {
	width:100%;
	height:200px;
	background: white url(bilder/layout/picture/picture.jpg) no-repeat;
	position:relative;
}
	
#logo {
	width:78px;
	height:78px;
	margin-bottom:10px;
	background: white url(bilder/layout/logo/logo.jpg) no-repeat;
	position:absolute;
	bottom:0;
	left:138px;
}

#logo a {display:block; width:78px; height:78px;}
#logo a:hover {display:block; width:78px; height:78px; background: white url(bilder/layout/logo/logo2.jpg) no-repeat;}

#titel {
	width:100%;
	height:27px;
	line-height:27px;
	background:#666666 url(bilder/layout/titel/titel.jpg) no-repeat;
}

#navigation {
	width:980px;
	height:65px;
	text-align:center;
	background: url(bilder/layout/navigation/bg_nav.jpg) repeat-x;
	position:relative;
}

#homelink {
width:130px;
height:65px;
position:absolute;
top:0;
left:100px;
background: url(bilder/layout/homelink/homelink.jpg) no-repeat;
}

#homelink a {padding:0; margin:0;}

#navigation ul {
	width:520px;
	height:65px;
	margin:0 auto;
	list-style:none;
	padding:0;
}
    
#navigation a {display: block; height: 65px; position: relative; cursor:hand;}
#navigation a b {display: block; height: 65px; width:100%; position: absolute; right:0; top:0; background: url(bilder/layout/navigation/navigation.jpg) no-repeat;}
   
#navigation li#kontakt {float:right; width:130px; height:65px;}
#navigation li#uebermich {float:right; width:130px; height:65px;}
#navigation li#referenzen {float:right; width:130px; height:65px;}
#navigation li#leistungen {float:right; width:130px; height:65px;}
   
#navigation #kontakt b {width:130px; background-position:-390px 0;}
#navigation #uebermich b {width:130px; background-position:-260px 0;}
#navigation #referenzen b {width:130px; background-position:-130px 0;}
#navigation #leistungen b {width:130px; background-position:0 0;}
      
#navigation li#kontakt a:hover b {background-position:-390px -65px;}
#navigation li#uebermich a:hover b {background-position:-260px -65px;}
#navigation li#referenzen a:hover b {background-position:-130px -65px;}
#navigation li#leistungen a:hover b {background-position:0px -65px;}

#navigation li#kontakt a#current b {background-position:-390px -130px;}
#navigation li#uebermich a#current b {background-position:-260px -130px;}
#navigation li#referenzen a#current b {background-position:-130px -130px;}
#navigation li#leistungen a#current b {background-position:0px -130px;}

#colwrap {
	width:980px;
	text-align:left;
	padding:50px 0 25px 0;
	background:#eee url(bilder/layout/colwrap/colwrap.jpg) repeat-y;
}

#colleft {
	width:195px;
	float:left;
	margin:0 15px 0 0;
	padding:0 0 50px 20px;
}

#colmain {
	width:470px;
	min-height:450px;
	float:left;
	padding:0 25px 50px 25px;
}

#colmain ul {
list-style-type:square;
list-style-position:inside;
margin: 0;
font: 16px/22px Arial, Helvetica, sans-serif; text-align: left; color: #333333;
margin-bottom:20px;
padding:0;
}

#colmain li {
list-style-type:square;
list-style-position:inside;
margin:0;
padding:0;
}


#colright {
	width:195px;
	float:right;
	margin:0 0 0 15px;
	padding:0 20px 50px 0;
}

#clearing {height:1px; clear:both;}

#footer {
	clear:both;
	width:100%;
	height:25px;
	background:#eee;
    padding:0 0 15px 0;
	border-top: 1px solid #999999;
}

#footer p {text-align:center; padding:0; margin:0; font: 12px Arial, Helvetica, sans-serif; color: #666666;}

#footer a {
	font: 12px Arial, Helvetica, sans-serif; text-align: left; color: #666666;
	text-decoration:none;
	height:25px;
	line-height:25px;
	margin:0;
}

#footer a:hover {
	color: #CC0033;
	text-decoration:none;
}