@charset "utf-8";

body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
}
body {
	background-color: #FFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #036;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #036;
}
a:hover {
	text-decoration: none;
	color: #666;
}
a:active {
	text-decoration: none;
	color: #036;
}
/* ---------------------- CONTENT ----------------------------------------- */

#content {position: absolute; left: 7%; top: 31%; height: 47%; width: 90%; z-index: 15; overflow: auto; padding-right: 20px;}
#map {width:95%; height: 85%; position: absolute; right: 0px; 
	border-top-width: 1px; border-top-style: dotted; border-top-color: #999;
	border-right-width: 3px; border-right-style: solid; border-right-color: #CCC;
	border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #CCC;
	border-left-width: 1px; border-left-style: dotted; border-left-color: #999;
}
.con25 {position: absolute; bottom: 15px; width: 21%; display: inline; max-height: 95%; overflow: visible;}
.con26 {position: absolute; top: 3%; width: 21%; display: inline; height: 95%; overflow: visible;}
.con33 {position: absolute; bottom: 15px; width: 30%; display: inline; max-height: 95%; overflow: visible;}

.typo5_1 {padding-left: 3%;}
.typo5_1 h2 {font-size: 13px; font-weight:700; text-transform: uppercase; margin: 20px 0 10px 0; color: #036;}
.typo5_1 ul {font-size: 12px; font-weight: 100; line-height: 18px;}
.typo5_1 ul strong {font-weight: 700; color: #036;}
.typo5_1 ul a:link {color: #666; font-size: 10px;}
.typo5_1 ul a:link strong {color: #036; font-size: 12px;}
.typo5_1 ul {margin-left: -10px;}
.typo5_1 ul li {margin-left: -10px;}
.typo5_1 ul li ul li {margin-left: -20px;}
.typo5_1 ul p {font-size: 12px; margin: 2px 0 10px -15px; width: 70%;}

.typo4_1 p {font-size: 11px; letter-spacing: 0.02em; line-height: 18px; margin: 2px 0 5px 0; color: #666;}
.typo4_1 p strong {font-size: 12px; letter-spacing: 0.06em; color: #036; font-weight: 700;}
.typo4_1 p a:link, .typo4_1 p a:active, .typo4_1 p a:visited {font-size: 11px; letter-spacing: 0.03em; color: #036; font-weight: 700; }
.typo4_1 p a:hover {color: #666;} 
.typo4_1 h1 {font-size: 15px; letter-spacing: 0.1em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase;}
.typo4_1 h1 em {font-size: 12px; letter-spacing: 0.12em; font-weight: 700; font-style: normal;}
.typo4_1 h2 {font-size: 13px; letter-spacing: 0.1em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase; margin: 40px 0 10px 0;}
.typo4_1 h3 {font-size: 13px; letter-spacing: 0.06em; line-height: 20px; color: #036; font-weight: 100; margin: 15px 0 0px 0;}


.typo3_1 h3 {font-size: 14px; letter-spacing: 0.1em; color: #036; font-weight: 700; text-transform: uppercase; margin: 0 0 10px 0;}
.typo3_1 h4 {font-size: 12px; letter-spacing: 0.02em; line-height: 18px; font-weight: 100; margin: 8px 0 15px 0;}
.typo3_1 h5 {}
.typo3_1 h6 {font-size: 11px; letter-spacing: 0.05em; color: #036; font-weight: 700; text-transform: uppercase; margin: 25px 0 5px 0}
.typo3_1 p {font-size: 11px; line-height: 18px; letter-spacing: 0.02em;}
.typo3_1 p strong, .typo3_1 p a:link, .typo3_1 p a:active, .typo3_1 p a:visited {color: #036; font-weight: 700;}
.typo3_1 p a:hover {color: #666;}

.typo2_1 p {font-size: 13px; letter-spacing: 0.02em; line-height: 20px;}
.typo2_1 p strong, .typo2_1 p a:link, .typo2_1 p a:active, .typo2_1 p a:visited {font-size: 13px; letter-spacing: 0.1em; color: #036; font-weight: 700; margin-right: 7px;}
.typo2_1 p a:hover {color: #666;}
.typo2_1 h1 {font-size: 15px; letter-spacing: 0.1em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase;}
.typo2_1 .al_left p {padding-right: 43%;}
.typo2_1 .al_right p, .typo2_1 .al_right h1 {padding-left: 43%;}
.typo2_1 .al_left2 p, .typo2_1 .al_left2 h1 {padding-right: 60%; padding-left: 5%;}
.typo2_1 .al_right2 p, .typo2_1 .al_right2 h1 {padding-left: 40%; padding-right: 15%;}

.typo2_2 p {letter-spacing: 0.05em; line-height: 20px;}
.typo2_2 p strong, .typo2_1 p a:link, .typo2_1 p a:active, .typo2_1 p a:visited {font-size: 13px; letter-spacing: 0.1em; color: #036; font-weight: 700; margin-right: 7px;}
.typo2_2 p a:hover {color: #666}
.typo2_2 h1 {font-size: 15px; letter-spacing: 0.1em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase;}

.typo2_3 p {font-size: 13px; letter-spacing: 0.02em; line-height: 20px; margin: 20px 0 20px 0;}
.typo2_3 p strong, .typo2_1 p a:link, .typo2_1 p a:active, .typo2_1 p a:visited {font-size: 13px; letter-spacing: 0.05em; color: #036; font-weight: 100;}
.typo2_3 p a:hover {color: #666;}
.typo2_3 h1 {font-size: 15px; letter-spacing: 0.1em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase;}
.typo2_3 h6 {font-size: 13px; letter-spacing: 0.08em; line-height: 23px; color: #036; font-weight: 100; color: #963 }

.typo1_1 p {font-size: 13px; letter-spacing: 0.02em; line-height: 20px; margin: 10px 0 5px 0;}
.typo1_1 p strong, .typo1_1 a:link, .typo1_1 a:active, .typo1_1 a:visited {font-size: 13px; letter-spacing: 0.06em; color: #036; font-weight: 700; margin-right: 0px;}
.typo1_1 a:hover {color: #666;} 
.typo1_1 h1 {font-size: 15px; letter-spacing: 0.1em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase;}
.typo1_1 h1 em {font-size: 12px; letter-spacing: 0.12em; font-weight: 700; font-style: normal;}
.typo1_1 h2 {font-size: 12px; letter-spacing: 0.07em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase; margin: 24px 0 10px 0;}
.typo1_1 h3 {font-size: 11px; letter-spacing: 0.02em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase; margin: 30px 0 0 0;}

.typo1_2 p {font-size: 13px; letter-spacing: 0.02em; line-height: 20px; margin: 10px 0 5px 0; color: #666;}
.typo1_2 p strong {font-size: 13px; letter-spacing: 0.06em; color: #036; font-weight: 100; margin-right: 0px;}
.typo1_2 a:link, .typo1_2 a:active, .typo1_2 a:visited {font-size: 13px; letter-spacing: 0.06em; color: #036; font-weight: 700; margin-right: 0px;}
.typo1_2 a:hover {color: #666;} 
.typo1_2 h1 {font-size: 15px; letter-spacing: 0.1em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase;}
.typo1_2 h1 em {font-size: 12px; letter-spacing: 0.12em; font-weight: 700; font-style: normal;}
.typo1_2 h2 {font-size: 12px; letter-spacing: 0.07em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase; margin: 24px 0 10px 0;}
.typo1_2 h3 {font-size: 11px; letter-spacing: 0.02em; line-height: 20px; color: #036; font-weight: 700; text-transform: uppercase; margin: 30px 0 0 0;}


.con25 img {width: 102%; height: auto; border: none; margin: 0 0 -20px -5px;}


.con30a h1 {margin-bottom: 30px;}
.con30a p strong, .con30a p a:link, .con30a p a:link, .con30a p a:active, .con30a p a:visited {color: #036; font-weight: 700;}
.con30a p a:hover {color: #666;}
.con30a p strong {margin-right: 4px; font-size: 12px; letter-spacing: 0.05em;}

#con25_1 {margin-left: 0%;}
#con25_2 {margin-left: 25%;}
#con25_3 {margin-left: 50%;}
#con25_4 {margin-left: 75%;}

#con33_1 {margin-left: 2%;}
#con33_2 {margin-left: 36%;}
#con33_3 {margin-left: 70%;}

#con30_1, #con30_2, #con40_3 {position: absolute; bottom: 8%; display: inline; max-height: 85%; overflow: visible; padding: 10px 10px 20px 15px;}
#con30_1 {margin-left: 0%; width: 25%; margin-bottom: 13%;}
#con30_2 {margin-left: 30%; width: 25%; margin-bottom: 13%;}
#con40_3 {margin-left: 60%; width: 36%;}

#con31_1, #con31_2, #con41_3, #con41_3b {position: absolute; bottom: 3%; display: inline; max-height: 100%; overflow: visible;}
#con41_3 {padding: 10px 10px 20px 15px;}
#con31_1 {margin-left: 0%; width: 25%;}
#con31_2 {margin-left: 30%; width: 25%;}
#con41_3, #con41_3b {margin-left: 60%; width: 36%;}
#sitemap {margin-left: 0%; width: 50%; position: absolute; bottom: 3%; display: inline; max-height: 90%; overflow: auto;}
#links {position: absolute; bottom: 3%; max-height: 96%; overflow: auto; margin-left: 0%; width: 57%; display: table-column-group;}
#links_1 {left: 0%;}
#links_2 {margin-left: 50%;}
.linksgen {position: absolute; top: 1px; width: 45%; display: inline; max-height: 100%; overflow: visible;}

.con100 {position: relative; left: 3%; top: 0%; width: 93%; height: 92%; margin: 0 0 3.5% 0; padding-right: 20px;}
.con110 {position: relative; left: 3%; top: 0%; width: 93%; height: 92%; margin: 0 0 1.5% 0; padding-right: 20px;}
.con100a {position: relative; left: 3%; top: 0%; width: 93%; height: 92%; margin: 0 0 1.5% 0; padding-right: 20px;}

.con101 {position: absolute; left: 3%; bottom: 0%; width: 93%; max-height: 98%; margin: 0 0 1% 0; padding-right: 20px;}



.con101_img1_2 {position: absolute; right: 28%; top: 0%; width: 13%; height: 65%; text-align: right;}
.con101_img2_2 {position: absolute; right: 1%; top: 10%; width: 13%; height: 65%; text-align: right;}
.con101_img1_2 img, .con101_img2_2 img {height: auto; width: 100%; border: none;}

.con101_img_1_1_2 {position: absolute; right: 30%; top: 0%; width: 12%; height: 65%; text-align: right;}
.con101_img_1_2_2 {position: absolute; right: 1%; top: 15%; width: 22%; height: 65%; text-align: right;}
.con101_img_1_1_2 img, .con101_img_1_2_2 img {height: auto; width: 100%; border: none;}


.con101_nav {position: absolute; left: 9%; bottom: 15%; z-index: 30;}
.con101_nav img {height: 98%; width: auto; border: none;}
.con101_nav img:hover {height: 100%; width: auto; border: none; margin-bottom: -1%;}
.con101_nav a:link, .con101_nav a:active, .con101_nav a:visited {
	font-size: 14px;
	font-weight: 700;
	padding: 5px 50px 5px 50px;
	border: 1px dashed #036;
	letter-spacing: 0.05em;
}
.con101_nav a:hover {
	border-style: solid;
	border-width: 2px;
	color: #036;
	background-image: url(../img/seitengeruest/basics/weiss50.png);
}

.con70 {position: absolute; right: 33%; bottom: 0px; height: 100%; width: 66%;}
.con71 {position: absolute; right: 33%; bottom: 0px; max-height: 90%; width: 62%;}
.con30 {position: absolute; right: 0%; bottom: 0px; width: 27%; max-height: 85%; overflow: auto;}
.con70a {position: absolute; right: 33%; bottom: 0px; height: 100%; width: 66%;}
.con30a {position: absolute; right: 0%; bottom: 0px; width: 33%; max-height: 95%; overflow: auto; padding-right: 15px;}

.con70_nav {
	position: absolute; bottom: 0%; right: 0%; height: 16px;
	margin-right: 3px; margin-bottom: 10px;	padding: 3px 5px 3px 30px;
	background-image: url(img/seitengeruest/basics/weiss50.png); background-repeat: repeat;
}
.con70_nav, .con70_nav a:link, .con70_nav a:visited {
	color: #2C4879; font-size: 12px; font-weight: 700;
	word-spacing: 0.8em;
}
.con70_nav a:hover, .con70_nav a:active {
	color: #033; background-color:#F2F2F2;
}

.con70_img {
	position: absolute; height: 85%; 
	bottom: 15%; right: 0%;
	text-align: right;
}
.con70_img img {
	height: 100%; width: auto;
	border-top-width: 1px; border-top-style: dotted; border-top-color: #999;
	border-right-width: 3px; border-right-style: solid; border-right-color: #CCC;
	border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #CCC;
	border-left-width: 1px; border-left-style: dotted; border-left-color: #999;
}

.con70_txt {position: absolute; max-height: 105%; 
	bottom: 0px; right: 0%;
	text-align: left;
	padding-left: 2%;
	overflow: auto;
}


.con100_nav {
	position: absolute; right: 2%; top: 0%; height: 30px; width: 80px; text-align: right;}
.con100_nav img {border: none; height: 50%; width: auto; padding-bottom: 3%;}
.con100_nav img:hover {height: 75%; width: auto; margin-top: -3%; margin-right: -5%;}




/* ---------------------- Hauptnavigation ----------------------------------------- */

#navi {
	position: absolute; bottom: 0px; left: 2%;
	height: 28%; width:98%; overflow: hidden; z-index: 11;
}

#navi img {
	border: none;
}

#navi_port, #navi_leist, #navi_refer, #navi_kunst, #navi_kontakt, #navi_aktuell, #navi_uber {
	position: absolute;
	z-index: 11;
}

#navi_port_txt, #navi_leist_txt, #navi_refer_txt, #navi_kunst_txt, #navi_kontakt_txt, #navi_aktuell_txt, #navi_uber_txt {
	position: absolute;
	z-index: 12;
}

#navi_port img, #navi_leist img, #navi_refer img, #navi_kunst img, #navi_kontakt img, #navi_aktuell img, #navi_uber img {
	visibility:hidden;	
}

#navi_port:hover img, #navi_port.active img, #navi_leist:hover img, #navi_leist.active img, #navi_refer:hover img, #navi_refer.active img, #navi_kunst:hover img, #navi_kunst.active img, #navi_kontakt:hover img, #navi_kontakt.active img, #navi_aktuell:hover img, #navi_aktuell.active img, #navi_uber:hover img, #navi_uber.active img {
	visibility: visible;
}

#navi_port_pfl, #navi_leist_pfl, #navi_refer_pfl, #navi_kunst_pfl, #navi_kontakt_pfl, #navi_aktuell_pfl, #navi_uber_pfl {
	position: absolute;
	z-index: 13;
}

#navi_port {top: 44%; left: 4.5%;}
#navi_leist {top: 75%; left: 11.5%;}
#navi_refer {top: 30%; left: 14.5%;}
#navi_kunst {top: 67%; left: 22%;}
#navi_kontakt {top: 52%; left: 25%;}
#navi_aktuell {top: 78%; left: 34%;}
#navi_uber {top: 32%; left: 38%;}

#navi_port_txt {background-image: url(../img/seitengeruest/hauptnavigation/navigation_portfolio_soft.png);}
#navi_leist_txt {background-image: url(../img/seitengeruest/hauptnavigation/navigation_leistungen_soft.png);}
#navi_refer_txt {background-image: url(../img/seitengeruest/hauptnavigation/navigation_referenzen_soft.png);}
#navi_kontakt_txt {background-image: url(../img/seitengeruest/hauptnavigation/navigation_kontakt_soft.png);}
#navi_kunst_txt {background-image: url(../img/seitengeruest/hauptnavigation/navigation_kunst_soft.png);}
#navi_aktuell_txt {background-image: url(../img/seitengeruest/hauptnavigation/navigation_aktuell_soft.png);}
#navi_uber_txt {background-image: url(../img/seitengeruest/hauptnavigation/navigation-ueber_uns_soft.png);}

#navi_port_pfl {margin: -45px 0 0 0px; background-image: url(../img/seitengeruest/hauptnavigation/pfl_port.png);}
#navi_leist_pfl {margin: -15px 0 0 30px; background-image: url(../img/seitengeruest/hauptnavigation/pfl_leist.png);}
#navi_refer_pfl {margin: -35px 0 0 -5px; background-image: url(../img/seitengeruest/hauptnavigation/pfl_refer.png);}
#navi_kunst_pfl {margin: -30px 0 0 20px; background-image: url(../img/seitengeruest/hauptnavigation/pfl_kunst.png);}
#navi_kontakt_pfl {margin: -40px 0 0 30px; background-image: url(../img/seitengeruest/hauptnavigation/pfl_kontakt.png);}
#navi_aktuell_pfl {margin: -32px 0 0 8px; background-image: url(../img/seitengeruest/hauptnavigation/pfl_aktuell.png);}
#navi_uber_pfl {margin: -50px 0 0 5px; background-image: url(../img/seitengeruest/hauptnavigation/pfl_uber.png);}

#navi2 {position: absolute; bottom: 0%; right: 5%;}
#navi2 img:hover {background-color: #CCC;}


/* ---------------------- HEADER ----------------------------------------- */

#subnav {
	position: absolute;
	left: 1%;
	top: 19%;
	width: 80%;
	z-index: 52;
	display: table-row;
}

#subnav1, #subnav2, #subnav3, #subnav4, #subnav5 {display: table-cell; z-index: 53; background-repeat: no-repeat;}

#subnav img {
	visibility: hidden;
	border: none;
}
	
#subnav1:hover img, #subnav2:hover img, #subnav3:hover img, #subnav4:hover img, #subnav5:hover img, #subnav1.active img, #subnav2.active img, #subnav3.active img, #subnav4.active img, #subnav5.active img {
	visibility: visible;
}

/* ----------------------------------------------------------------------- */

#linie_oben {background-color: #663300; height: 4px; width: 100%; 
	position: absolute; left: 0px; top: 0px; z-index: 50;
}

#logo {position: absolute; top: 5%; right: 2%;
	height: 20%; width: 40%; z-index: 51;
}
#kalli_gross {position: absolute; left: 0px; top: 4px;
	width: 70%; height: 45%; z-index: 50;
}

#kalli_gross img {height: 100%; width: auto;}

#logo img {height: auto; width: 100%;}

#hintergrundstreifen {background-color: #d0d02d; height: 42%; width: 100%;
	position: absolute; left: 0px; top: 37%; z-index: 1;
}

#hintergrundstreifen img{width: 100%; height: 35px;}


/* ---------------------- MISC ----------------------------------------- */

#buchrand {
	position: absolute; top: 30%; left: 3%;
	width: 96.8%; height: 70%; z-index: 10;
	background-image: url(../img/seitengeruest/basics/buchrand.png); background-repeat: repeat-y;
}

#buchende {
	position: absolute; left: 0px; top: -60px;
	height: 61px; z-index: 11;
	background-image: url(../img/seitengeruest/basics/buchrand.png); background-repeat: repeat-y;
}

#content_hg {
	position: absolute; left: 18px; top: 0px; 
	height: 70%; width: 98%; z-index: 9;
	background-color: #FFF;
}
#content_mood {
	position: absolute; left: 18px; bottom: 30%; width: 98%; z-index: 10;
}

#content_mood img {width: 100%; height: auto;}