/* Basis */

html {
height: 100%;
margin-bottom: 1px; /* Scrollbar in Firefox erzwingen */
}

body {
background: #ffd200;
color: #454545;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
line-height:1.6em;
text-align: center;
}

/*body.noShadow #ShadowBox {display: none;} */

#ShadowBox { display: none; }
 
#wrapper {
margin: 0 auto;
position: relative;
text-align: left;
width: 720px;
}

* html #wrapper {
overflow: hidden;
}

#content {
border-bottom: 2px solid #000;
border-top: 2px solid #000;
height: 1%;
margin: 38px 0 0 0;
padding: 7px 0 0 0;
}

#footer {
text-align:right;
padding: 10px 0;
margin: 0 0 10px 0;
}

.spalte {
display: inline;
float: left;
margin: 0 5px 20px 5px; 
}

.spalte-dreiviertel {
width: 530px;
}

.spalte-halb {
width: 350px;
}

.spalte-viertel {
width: 170px;
}

.spalte-viertel-dotted {
background: url(../images/border_dotted.gif) top left repeat-x;
width: 170px;
padding: 8px 0 0 0;
}

.spalte-dreiviertel .spalte-halb {
width: 340px;
}

dl.spalte-dreiviertel {
background: url(../images/border_dotted.gif) top left repeat-x;
padding: 8px 0 0 0;
}

.spalte-viertel a {
display:block;
}

.spalte img {
background: url(../images/border_dotted.gif) top left repeat-x;
padding: 8px 0;
}


#fader {
background: #FFD200;
position: absolute;
width: 100%;
top: 160px;
left: 0;
visibility: hidden;
}

/* Kopfbereich */



#header {
background: url(../images/border_dotted.gif) bottom left repeat-x;
margin: 0 0 0 4px;
padding: 28px 0 7px 0;
}

#logo {
background: url(../images/logo_y.gif) 0 0 no-repeat;
height: 100px;
position: relative;
width: 200px;
}

#logo a {
display: block;
height: 100px;
width: 200px;
}

#message {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
position: absolute;
right: 3px;
text-align: center;
top: 20px;
width: 51px;
}



/* Hauptnavigation */

#navigation {
background: url(../images/border_dotted.gif) top left repeat-x;
height: 1%;
margin: 42px 0 0 0;
padding: 5px 0 0 0;
}

#navigation li {
background: url(../images/trenner_hauptnavi.gif) left center no-repeat;
display: inline;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
padding: 0 4px 0 12px;
text-transform: lowercase;
}

#navigation li.first,
#navigation li.last {
background: none; 
padding-left: 0;
}

#navigation li.right {
float: right;
/* -moz-opacity: 0.4; */
}


#navigation li.active,
#navigation li.active a {
color: #fff;
}



/* Subnavigation */

#subnav {
background: url(../images/border_dotted.gif) 0 0 repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
height: 1%;
padding: 9px 4px;
text-transform: lowercase;
}

#subnav h2 {
display: inline;
float: left;
margin: 0 3px 0 0;
}

#subnav li {
background: url(../images/trenner_s.gif) left center no-repeat;
display: inline;
float: left;
font-weight: bold;
padding: 0 3px 0 9px;
}

#subnav li.active {
color: #fff;
}

/* Typo */

h1 {
background: url(../images/border_dotted.gif) 0 0 repeat-x;
padding: 9px 4px;
font-size: 1.8em;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}

h1 img {
  padding: 40px 0 120px 0;
  }

h2 {
background: url(../images/border_dotted_double.gif) 0 0 repeat-x;
padding: 6px 0px;
margin: 0 0 10px 0;
text-transform: uppercase;
}

p {
font-size: 1em;
}

a {
color: #454545;
}

a:hover {
color: #fff;
}


/* Projekt Thumbs */

.project-thumb {
background: url(../images/border_dotted.gif) bottom left repeat-x;
display: inline;
float: left;
height: 144px;
margin: 0 5px 10px 5px;
overflow: hidden;
padding: 0 0 10px 0;
position: relative;
width: 170px;
}

.top-thumb {
background: none;
padding: 0;
}

.project-thumb h3 {
font-weight: normal; 
}

.project-thumb h3 a {
background: url(../images/border_dotted.gif) top left repeat-x;
display: block;
height: 1%;
padding: 8px 0;
}

.project-thumb h3 a:hover {
color: #454545;
}

.project-thumb a.thumb {
bottom: 10px;
left: 0;
position: absolute;
}

.top-thumb a.thumb {
bottom: 0;
}

.project-thumb a.thumb:hover {
left: -170px !important;
}


/* Projekt Detailseite */
.project-info {
height:65px; 
}

.project-info dl {
 line-height: 1.6em; 
}

.project-info dl.inline-info {
display: inline;
}

.project-info dt {
display: inline;
font-weight: bold; 
}

.project-info dd {
display: inline;
}

#project-overview {
overflow: hidden;
width: 725px;
}

#project-overview a {
float: left;
display: inline;
margin: 0 5px 10px 5px;
position: relative;
}

#project-overview a img {
float: left;
display: inline;
}


/* Helferlein: am Ende der Datei belassen */

.printlogo {
display: none;
}

.clear {
clear: both;
margin: -1px 0px 0px 0px;  /* laesst 1px clear nach oben verschwinden */
height: 0px;  /* laesst   auf 1px schrumpfen fuer IE */
font-size: 0px;
line-height: 0px;
width: 100%;
}

.hide {  /*  entspricht im wesentlichen display:none; , ist aber screenreaderfreundlich */
position: absolute;
overflow: hidden;
height: 0px;
width: 0px;
left: -1000px;
top: -1000px;
}