/* CSS Document fuer buerowk */

/* Verwendete Farben:

Gruen (Haupthintergrundfarbe): #80DC00
Magenta (u.a. Hover in Navi und bgsecond): #FF038E
Blau (u.a. Navi und bgthird): #00A4E7
Dunkelgrau (Hintegrund Navi): #353030
dunkelgraue Schrift auf Gruen: #342C2C
Hellgrau (Schrift auf Dunkelgrau): #BDBDBD

*/


/* Raster:

Die Seite setzt sich aus lauter Rechtecken zusammen:
200px breit
150px hoch
Groessere Boxen sind immer ein Vielfaches davon.
Die Bilder werden pro Seite fix gesetzt.

Die Identifizierung der Boxen/Bilder geschieht dabei über ein kartographisches Raster:
X-Achse von links nach rechts: A, B, C, D
Y-Achse von oben nach unten: 1, 2, 3, 4
Massgeblich ist dabei die linke obere Ecke des Rechtecks.
Ganz unten rechts wäre dann: D4

*/



/* Standardvorgaben ueberschreiben */
* {
	margin:0;
	padding:0;
	border:0;
}

/* damit der Kasten mit Spalten in der Hoehe richtg aufgespannt wird im FireFox*/
.colbottom { clear:both; }

.teaserbox address a,
.teaserbox a.inline,
body, 
#main h1 {
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;	
}

.teaserbox a.inline { padding-left:0px; }

body, 
#main h1 { line-height:17px; }

body { background-color:#80DC00; }

h1, em { font-weight:bold; }
em { font-style:normal }


address { font-style:normal; }

 
 p.first {
	margin-top:0px;
	margin-bottom:17px;
}

 p.last {
	margin-bottom: 24px;
}


a:link,
a:visited,
a:hover,
a:focus,
a:active {	text-decoration:none; }

a.inline:link,
a.inline:visited,
a.inline:hover,
a.inline:focus,
a.inline:active { text-decoration:underline; }

#main,
#leftmargin,
#sitenav,
#a1, #b1, #c1, #d1, 
#a2, #b2, #c2, #d2,
#a3, #b3, #c3, #d3,
#a4, #b4, #c4, #d4 { position:absolute; }


hr {	
	background-image:url(../images/l.gif);			
	background-repeat:repeat;
	height:1px;
	
}

/* haupt seiten container */
#main {
	top:35px;
	left:100px;
	width:800px;
	height:600px;
	background-repeat:no-repeat;
	background-position:top left;
}

h1 {
	font-weight:bold;
	margin-top:7px;
}


#a1 { top:0px; left:0px;  }
#a2 { top: 150px; left: 0px; }
#a3 { top: 300px; left: 0px; }
#a4 { top: 450px; left: 0px; }

#b1 { top:0px; left: 200px; }
#b2 { top: 150px; left: 200px; }
#b3 { top: 300px; left: 200px; }
#b4 { top: 450px; left: 200px; }

#c1 { top:0px; left: 400px; }
#c2 { top: 150px; left: 400px; }
#c3 { top: 300px; left: 400px; }
#c4 { top: 450px; left: 400px; }

#d1 { top:0px; left: 600px; }
#d2 { top: 150px; left: 600px;  }
#d3 { top: 300px; left: 600px; }
#d4 { top: 450px; left: 600px; }


.tel {  padding-right:5px; }

.fax {  padding-right:2px; }


a.inline:link,
a.inline:visited,
#main {
    color:#342C2C;
}

.teaserbox,
#leftmargin,
.navglobal {	
	background-color:#353030;
	background-image:url(../images/portfolio/illu/monster/bg_gray.gif);
	background-repeat:repeat;
}


#leftmargin,
.navglobal { height:150px; }

#leftmargin {
	top:35px;
	left:0px;
    width:100px;
}

/* sitenav = impressum */
#sitenav {
	background-color:transparent;
	/*width:800px;*/
	text-align:left;
	top:635px;
	left:100px;
}

#sitenav a,
#sitenav a:link,
#sitenav a:visited {
	color: #CCFF66;
	line-height:26px;
}


/* rote farbe */
.bgsecond,
.navglobal div.borderleft, 
#leftmargin div.border { background-color:#FF038E; }

#leftmargin div.border,
.navglobal div.borderleft,
.navglobal div.borderright {
 	margin:0;
	height: 14px;
}

/* blaue farbe */
.bgthird,
.navglobal div.borderright { background-color:#00A4E7; } 

.teaserbox,
.teaserbox a.inline:link,
.teaserbox a.inline:visited,
.navglobal { color:#BDBDBD; }


.teaserbox a.inline:hover,
.teaserbox a.inline:focus,
.teaserbox a.inline:active { color:#ffffff; }

.navglobal { width:400px; }	

h1,
.navglobal p,
.navglobal div, 
.column1 p,
.column2 p   { 	margin-left:12px; }

.navglobal p {	margin-top:17px; }


.blue,
.w,
.navglobal div.nav,
.navglobal div.subnav,
.navglobal div.contentnav,
.navglobal a:link,
.navglobal a:visited,
.teaserbox a.deeplink,
.teaserbox a.deeplink:link,
.teaserbox a.deeplink:visited { color: #00A4E7; }

.red,
.k,
.navglobal a.Current:link,
.navglobal a.Current:visited,
.navglobal a.Current,
.navglobal a:hover,
.navglobal a:focus,
.navglobal a:active,
#sitenav a:hover,
#sitenav a:focus,
#sitenav a:active ,
#sitenav a.Current,
.teaserbox a.deeplink.Current,
.teaserbox a.deeplink:hover,
.teaserbox a.deeplink:focus,
.teaserbox a.deeplink:active  {	color: #FF038E; }

.navglobal div.borderleft,
.navglobal div.borderright { float:left; }

.navglobal div.borderleft { width:300px; }

.navglobal div.borderright { width:100px; }

.navglobal div.nav {
	margin-top:8px;
	margin-bottom: 34px;	
}

.navglobal div.subnav {
	clear:both;
	margin-top:62px;
	margin-bottom:4px;
}

.navglobal div.contentnav.stepbystep {
	position:absolute;
	left:341px;
	top:121px;
	color:#666666;
	font-size:13px;
}

.navglobal div.contentnav.stepbystep a {
  padding-left:2px;
  padding-right:2px;
  
}

.stepbystep a.inactive:hover {
    color:#666666;
}

.teaserbox {
	width: 200px;
	height: 150px;
}

.teaserbox.double {
	height: 300px;
}

.teaserbox h1 {
	line-height:11px;
	margin-left:9px;
}

.teaserbox p {
	margin: 6px 7px 10px 9px;
}

.teaserbox p.first {
	margin-top:0px;
}

.teaserbox p.last {
	margin-bottom: 10px;
}

.teaserbox a {
	display:block;
	line-height:13px;
	padding-left:9px;
	font-size:13px;
}

.teaserbox ul {
	margin-left:26px;
}

.teaserbox li {
	margin-bottom:17px;
}



.teaserbox .navinfo {
	color:#696969 ;
	margin-top:17px;
}

.teaserbox .navinfo a {
	display:inline;
	padding-left:100px;
}

/*wollmeiselink */
.teaserbox .wollmeise a {
	font-size:11px;
	padding:0px;
	color:#00a4e7;
}

.company {
	font-style:italic;
}


/* Spalte über eine Rasterbreite */
.column1 {
	width:200px;
}

.textspace {
	margin-top:17px;
}

/* Spalte über zwei Rasterbreiten */
.column2 {
	width:400px;
}

/* nur fuer team  */

/* Wird nicht mehr Verwendet edite by cw 2010-02-25
.team .column2 ul {
	margin-top:0px;
	margin-left:34px;
	margin-right: 17px;
}

.team .column2 li {
	margin-top:17px;
}

.team .column2 ul ul {
	list-style-image:url(../images/list_lev2.gif);
	margin-top:1px;
	margin-left:14px;
}

.team .column2 ul ul li {
	margin-top:0px;
}
*/

/* nur fuer Kunden  */

.kunden .column2 ul {
	margin-top:17px;
	margin-left:25px;
	margin-right: 17px;
}




/* Nur auf der Startseite */

.startseite .teaserbox p.last {
	margin-bottom: 27px;
}



/* Teaserbox */
.teaserbox address a.inline,
.teaserbox address a.inline:link,
.teaserbox address a.inline:visited {
	display:block;
	padding-left:9px;
	text-decoration:none;
	line-height:21px;
}

.teaserbox address p.last {
	margin-bottom:12px;
}

.teaserbox .noblock {
	display:inline;
}


/* Nur fuer Kontakt relevant */

.kontakt #d4 p.last {
	margin-top:34px;
	margin-bottom:0px;
	padding-bottom:0px;
	
}

.kontakt #d4.teaserbox a.deeplink:link,
.kontakt #d4.teaserbox a.deeplink:visited {
	line-height:17px;
	margin-top:0px;
	padding-top:0px;

}


/* nur fure impressum */
.impressum .column2 p {
margin-right: 70px;
}


/* Illu monster  und oben...*/

.monster .navglobal{
background-image:url(../images/portfolio/illu/monster/bg_monster_nav.gif);
background-position:bottom;
background-repeat:no-repeat;
}


/* freie Projekte */

.frauenzimmer #d1.teaserbox.double a.download {
	padding-left:0px;
	color:#00A4E7;
	font-size:10px;
	line-height:17px;
}
.frauenzimmer #d1.teaserbox.double a.download:hover {
	text-decoration:underline;
}

.frauenzimmer .teaserbox .navinfo {
	margin-top:20px;
}

.frauenzimmer2 .teaserbox .navinfo {
	margin-top:16px;
}

.freimuenchen2 .teaserbox .navinfo {
  margin-top:14px;
}

/* nur team */

.team .teaserbox a.inline,
.team .teaserbox a.inline:link,
.team .teaserbox a.inline:visited {
    display:inline;
}


/* impressum */

.impressum a.inline:link,
.impressum a.inline:visited {
   text-decoration:none;
}

/* Blog */
.blog {
	padding-top:15px;	
	width: 400px;
	
}


.blog hr {	
	margin: 10px 0px 10px 0px;	
	width: 400px;
}

.blog h3 {
	font-size:12px;
	line-height:1.5em;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding-left:10px;
	color:#000000 ;
}

.blog_links {
	position:relative;
	margin: 0px 0px 0px 0px;
}


.blog_text {
	margin-left:10px;
	color:#000000;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height:1.5em;
}

.blog_text a:link,
.blog_text a:visited,
.blog_text a:hover,
.blog_text a:focus,
.blog_text a:active {	
	color:#000000;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-decoration:underline; 
}



/* Blog Navi */
.blog_nav {	
	position:relative;
	padding-top:10px;
	width: 200px;
}

.blog_nav hr {	
	margin:13px 0px 13px 0px;
	width:200px;	
}

.blog_nav a:link,
.blog_nav a:visited,
.blog_nav a:hover,
.blog_nav a:focus,
.blog_nav a:active {	
	color:#000000;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-decoration:none; 
}


.blog_nav a:hover {
	text-decoration: underline;
}

.blog_nav h3 {
	font-size:12px;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-left:10px;
	padding:0px;
	color:#000000 ;
}

.blog_nav ul {
	list-style-type:none;
	color: #000000;
	margin: 0px;
}

.blog_nav li {
	margin:0px 0px 0px 0px;
	padding-left:10px;
	background-image:url(../images/aufzaehlungspfeil.gif);
	background-position:left top;
	background-repeat:no-repeat;
}

.blog_linkaktiv li {	
	margin:0px 0px 0px 10px;
	padding-left:0px;	
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	color: #000000;
	background-image:none;

}





/* Blog Impresseum */

.blog_impressum {
	position:relative;	
}

.blog_impressum a,
.blog_impressum a:link,
.blog_impressum a:visited {	
	color:#ccff66;	
}


.blog_impressum a:hover{
	color: #d60365;		
}