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

Autor: Wishu Kaiser
Website: http://www.wishu.de

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

* {
margin:0;
padding:0;
}

html,
body {
height:100%;
}

body {
background:#E2E2E2;
color:#4c4c4c;
font:100.1% Arial,sans-serif;
}

code {
font-size:12px !important;
position:relative;
}

address {
font-style:normal;
}

strong {
}

a img {
border:0;
}

a {
color:#0063A5;
}

a:visited {
color:#004472;
}

a:hover,
a:focus {
color:#001E33;
text-decoration:none;
}


/********************
|     ALLGEMEIN     |
********************/

#wrap,
#header .innen,
#footer .innen {
width:55em;
margin:auto;
position:relative;
}

#wrap {
margin:0 auto 20px;
}


/********************
|      HEADER       |
********************/

#header {
font-family:Calibri, Arial, sans-serif;
}

h1 {
font-size:3em;
font-weight:100;
color:#4C4C4C;
padding-top:25px;
margin-bottom:-5px;
text-shadow:#999 1px 1px 3px;
}

h1 a {
color:#4C4C4C !important;
text-decoration:none;
}

h1 a span {
color:#0063A5;
}

#navi {
list-style-type:none;
float:right;
margin-right:6px;
}

#navi li {
float:left;
display:block;
}

#navi li a {
padding:55px 12px 5px;
margin:0 1px;
display:block;
color:#222;
text-decoration:none;
font-size:1.12em;
position:relative;
z-index:10;
}

#navi li a:hover,
#navi li a:focus {
color:#FFF;
background:#89B0CA url(/media/images/design/navi_h.gif) bottom repeat-x;
text-shadow:#000 0 0 5px;
position:relative;
z-index:2;
}

#navi li a.active,
#navi li a:active {
color:#FFF;
background:#5D97BE url(/media/images/design/navi.gif) bottom repeat-x;
text-shadow:#000 0 0 5px;
}


/********************
|      INHALT       |
********************/

#begruessung {
height:7em;
font-family:Calibri, Arial, sans-serif;
background:#EEE url(/media/images/design/begruessung_verlauf.gif) bottom repeat-x;
border-bottom:1px solid #BFBFBF;
margin-bottom:5px;
position:relative;
}

#begruessung div {
background:url(/media/images/design/main_begruessung_bg_r.gif) right bottom repeat-y;
padding-bottom:3px;
}

#begruessung ul {
position:absolute;
bottom:0;
right:0;
list-style-type:none;
width:100%;
margin-right:5px;
}

#begruessung li a {
display:block;
float:right;
background:#89B0CA url(/media/images/design/navi_h.gif) bottom repeat-x;
padding:5px 10px;
text-decoration:none;
margin:0 1px -1px;
color:#FFF;
text-shadow:#000 0 0 5px;
}

#begruessung li a:hover,
#begruessung li a.active {
background:#5D97BE url(/media/images/design/navi.gif) bottom repeat-x;
}

#begruessung span {
float:left;
font-size:1.82em;
padding:0px 40px 5px 10px;
height:100px;
color:#0063A5;

font-weight:700;
}

#begruessung p {
padding:31px 40px;
font-size:1.25em;
line-height:1.2;
color:#0063A5;

}

#inhalt {
background:#FFF url(/media/images/design/main_bg_r.gif) repeat-y right;
position:relative;
}

#inhalt .unten {
background:#FFF url(/media/images/design/main_bg_u.gif) repeat-x bottom;
height:9px;
}

#inhalt div.ecke_ur {
background:url(/media/images/design/main_ecke_ur.gif) no-repeat;
position:absolute;
bottom:1px;
right:0;
height:8px;
width:7px;
}

#inhalt div.ecke_ul {
background:url(/media/images/design/main_ecke_ul.gif) no-repeat;
position:absolute;
bottom:1px;
left:-2px;
height:8px;
width:7px;
}

#inhalt div.ecke_or {
background:url(/media/images/design/main_ecke_or.gif) no-repeat;
position:absolute;
top:-2px;
right:1px;
height:7px;
width:7px;
z-index:10;
}

#inhalt #text {
width:33em;
padding:5px 0 0;
}

#inhalt #text h2 {
padding:4px 10px 14px 20px;
background:#0063A5 url(/media/images/design/inhalt_h2.gif) no-repeat bottom left;
position:relative;
left:-10px;
color:#FFF;
font-family:Calibri, Arial, sans-serif;
font-weight:100;
text-shadow:#000 0 0 5px;
}

#inhalt #text h2 span {
display:block;
position:absolute;
right:-5px;
bottom:0;
height:47px;
width:7px;
background:url(/media/images/design/inhalt_h2_rechts.gif) no-repeat;
}

#inhalt #text h3,
#inhalt #text h4 {
padding:6px 10px 16px 20px;
background:#4C4C4C url(/media/images/design/inhalt_h3.gif) no-repeat bottom left;
position:relative;
left:-10px;
color:#FFF;
font-family:Calibri, Arial, sans-serif;
font-weight:100;
text-shadow:#000 0 0 5px;
}

#inhalt #text h3 span,
#inhalt #text h4 span {
display:block;
position:absolute;
right:-5px;
bottom:0;
height:47px;
width:7px;
background:url(/media/images/design/inhalt_h2_rechts.gif) no-repeat;
}

#inhalt #text h4 {
padding:4px 10px 14px 20px;
}

#inhalt #text p {
padding:0 10px 10px;
font-size:0.93em;
line-height:1.5;
margin-right:15px;
}

#inhalt #text ul {
margin:0 20px 10px 25px;
font-size:0.93em;
line-height:1.5;
}

#inhalt #text ul li {
margin:5px 0;
}

#inhalt #text ul ul {
margin-bottom:0;
font-size:1em;
}

#inhalt #text ul.sitemap {
border:1px solid #4C4C4C;
list-style-type:none;
margin-left:10px;
line-height:1;
}

#inhalt #text ul.sitemap a {
display:block;
padding:5px;
margin:-5px 0;
text-decoration:none;
}

#inhalt #text ul.sitemap a:hover {
background:#4C4C4C;
color:#B5E1FF;
}

#inhalt #text ul.sitemap ul {
list-style-type:none;
line-height:1;
margin:0;
}

#inhalt #text ul.sitemap ul a {
padding-left:20px;
}

#inhalt #text ul.sitemap ul ul a {
padding-left:40px;
}

/*****Sidebar****/

div#sidebar {
width:330px;
padding:5px 0 0;
float:right;
}

div#sidebar h2 {
font-family:Calibri, Arial, sans-serif;
padding:4px 10px 14px 20px;
background:#0063A5 url(/media/images/design/ref_h2.gif) no-repeat bottom right;
position:relative;
color:#FFF;
font-weight:100;
text-shadow:#000 0 0 5px;
}

div#sidebar h2 span.links {
display:block;
position:absolute;
left:-3px;
bottom:0;
height:47px;
width:14px;
background:url(/media/images/design/ref_h2_links.gif) no-repeat top left;
}

div#sidebar h2 span.rechts {
display:block;
position:absolute;
right:-10px;
bottom:-4px;
height:53px;
width:16px;
background:url(/media/images/design/ref_h2_rechts.gif) no-repeat top right;
}

div#sidebar.referenzen img,
div#sidebar.ueber-mich img {
margin-bottom:7px;
padding:5px 9px 9px 16px;
background:url(/media/images/design/ref_rahmen.gif) no-repeat bottom right;
}

div#sidebar ul {
list-style-type:none;
}

/*****Tabelle****/

table {
width:96%;
border:1px solid #CCC;
margin:5px 10px 10px;
border-collapse:collapse;
font-size:0.88em;
}

#sidebar.kontakt table {
width:300px;
}

table th {
background:#0063A5;
color:#FFF;
padding:10px;
text-align:left;
}

table tr.row1 {
background:#FFF;
}

table tr.row2 {
background:#E6E6E6;
}

table tr:hover {
background:#4C4C4C;
color:#FFF;
}

table td {
padding:10px;
}

table td.feld {
font-weight:bold;
}

table td p {
padding:5px 0 !important;
font-size:1em !important;
}

table td p em,
table td.feld {
color:#222;
}

table tr:hover td p em,
table tr:hover td.feld {
color:#CCC;
}

table tr:hover a {
color:#B5E1FF;
}

/*****Formular****/

form {
margin:10px;
}

label {
display:block;
font-weight:bold;
color:#222;
}

input,
textarea {
font-size:0.88em;
font-family:Arial, sans-serif;
width:100%;
border:solid #B2B2B2;
border-width:0 0 1px 1px;
padding:5px;
}

input:hover,
textarea:hover {
border-color:#4C4C4C;
}

input:focus,
textarea:focus {
border-color:#0063A5;
background:#EFEFEF;
}

input.button {
border-width:1px;
width:auto;
margin:auto;
display:block;
}

/*****Portfolio*****/

ul.projekte {
list-style-type:none;
margin:0 !important;
}

ul.projekte h3 a {
color:#FFF;
text-decoration:none;
}

ul.projekte p img {
float:left;
margin:6px 10px 10px 0;
}

/********************
|      FOOTER       |
********************/

#footer {
background:#CFCFCF url(/media/images/design/footer_schatten.gif) repeat-x;
padding:20px;
}

#footer p {
font-size:0.82em;
padding:0 10px;
text-align:center;
}

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

#footer a:hover,
#footer a:focus {
text-decoration:none;
color:#000;
}


/********************
|   ZUSATZKLASSEN   |
********************/

.clear {
clear:both;
}

.OK {
background:#C6EFCE;
border:1px solid #90DB9E;
color:#003300;
margin:15px;
padding:1px 6px !important;
}

.OK a {
color:#002200;
font-weight:700;
}

.Hinweis {
background:#FFEEB2;
border:1px solid #FFCD8C;
color:#4C3900;
margin:15px;
padding:1px 6px !important;
}

.Hinweis a {
color:#4C3900;
font-weight:700;
}

.Fehler {
background:#FFC7CE;
border:1px solid #E5A2A2;
color:#5B0004;
margin:15px;
padding:1px 6px !important;
}

.Fehler a {
color:#5B0004;
font-weight:700;
}