/* - - - - - - - - - - - - Peter Scheuerl, p.scheuerl@it-ma.de - - - - - - - - - - - -  */  
/* Styles for Explorer < 7 are in ie.css */

/* Tested on: 
MacOS X: Firefox 1.x, Safari, Opera 8, icab 3 
Windows: Firefox 1.x, IE 5.5/ 6.x
*/

/* 
	Page dimensions: 
	total width:  900px 
	right colum: 185px;
	content: 700px with 20px padding = 660px for content (sligtly changed in ie.css)

*/

/* - - - - - - - - - - - - - - - - - - -  Global - - - - - - - - - - - - - - - - - - -  */      


body {
    margin: 20px 0 20px 0;
    padding: 0;
    font-family: Helvetica, Arial, Swiss, SunSans-Regular, sans-serif;
    font-size: .8em;
    background: #00247d;
    /* following is for IE 5.5 */
    text-align:center;
}
        
a:link {text-decoration:none; color:#00247d;}
a:visited {text-decoration:none; color:#66247d;}
a:hover {text-decoration:underline; color:#cf142b;}
a:active {text-decoration:underline; color:#cf142b;}

/* Links with icons */
a.extern:link, a.extern:visited {
	margin-left: 2px;
	padding-left: 13px;
	background: url(../images/link_extern.gif) 0 2px no-repeat;
	}

a.extern:hover, a.extern:active {
	background: url(../images/link_extern.gif) 0 -13px no-repeat;
	}


a.intern:link, a.intern:visited {
	margin-left: 2px;
	padding-left: 13px;
	background: url(../images/link_intern.gif) 0 1px no-repeat;
	}

a.intern:hover, a.intern:active {
	background: url(../images/link_intern.gif) 0 -14px no-repeat;
	}

   
.cleaner {
    clear:both;
    height:1px;
    font-size:1px;
    border:none;
    margin:0; padding:0;
}


/* - - - - - - - - - - - - - - - -  Content Areas - - - - - - - - - - - - - - - - - -  */

#container
{
	margin:0 auto 0 auto;
	width: 900px;
	border: 2px solid #cf142b;
	background: #ddd;
	/* following is for IE 5.5 */
	text-align:left;
}



/* Head Area */

#head
{
	position:relative;
	height: 100px;
	margin: 0;
	padding: 0;
}



#logo
{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 20px;
	left: 20px;
}

#logo img
{ border: 0}
 
/* END Head Area*/
#content
{
	position: relative;
	clear:left;
	padding:20px;
	margin:0 200px 0 0;
}

#right {
	float:right;
    width:185px;
    margin:0; 
    padding: 0 0 0 0;
	text-align: center;
}


 #footer {
    margin:0; 
    padding:20px;
    border-top: 1px solid #999;
}

/* Navigation */
#navigation
{
	position: relative;
	padding: 0;
	margin: 0 0 0 142px;
	height: 100px;
	background: url(../images/navback.jpg) no-repeat;
}

#nav {
      float:left;
      width:100%;
      background:transparent;
      font-size:12px;
      line-height:14px;
      margin-top: 67px;
      }
      
 #nav ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
      
 #nav li {
      display:inline;
      margin:0;
      padding:0;
      }
      
 #nav a {
      float:left;
      background:url("../images/tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
      
#nav a span {
      float:left;
      display:block;
      background:url("../images/tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#eee;
      }
      
#nav li.act a {
      background-position:0% -84px;
      }
      
#nav  li.act a span {
      background-position:100% -84px;
      }


#nav li.act a span {
      color:#ccc;
      }

      
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #nav a span {float:none;}
    /* End IE5-Mac hack */

#nav a:hover span, #nav li.act a:hover span {
      color:#fff;
      }
      
#nav a:hover {
      background-position:0% -42px;
      }
      
#nav a:hover span {
      background-position:100% -42px;
      }

/* Subnav: in container but visually linked to main navigation */
.subnav {
	position: absolute;
	top: 0;
	left: 142px;
	width: 575px;
	margin: 0;
	padding: 0;
	}
/* position to indicate which subnav is selected */
#results .subnavact {
	position: relative;
	left: 438px;
	width: 64px;
	height: 3px;
	background: #00247d;
	font-size:1px;
	}
	
#pictures .subnavact {
	position: relative;
	left: 229px;
	width: 66px;
	height: 3px;
	background: #00247d;
	font-size:1px;
	}
	
.subnav ul {
	margin: 0;
	padding: 0;
	list-style:none;
	background: #00247d;
	height: 19px;
	}
	
.subnav li {
	position: relative;
	top: 2px;
	display:inline;
	margin: 0;
	padding: 2px 10px 2px 5px;
	height: 25px;
	background: #00247d;
	}

.subnav li a:link, .subnav li a:visited {
	color: #ddd;
	line-height: 16px;
	}
.subnav li a:hover, .subnav li a:active {
	color: #fff;
	}

.subnav li.act a:link, .subnav li.act a:visited {
	color: #cf142b;
	}
	
.subnav li.act a:hover, .subnav li.act a:active {
	color: #fff;
	}

/* Main area Styles */

h1, h2, h3, h4 {
	font-weight: bold;
	color: #00247d;
	margin: 0;
	text-shadow: #669 3px 3px 4px; /* only understood by safari so far */
	}

h1 {font-size: 1.4em; padding: 10px 0 10px 0px;}
h2 {font-size: 1.2em; padding: 10px 0 5px 0px;}
h3 {font-size: 1.1em; padding: 5px 0 5px 0px;}
h4 {font-size: 1em; padding: 2px 0 5px 0px;}

p {
	margin: 0;
	padding: 0 0 10px 0;
	line-height: 1.1em;
}

.date
{
	display: block;
	margin: 0 0 3px 0;
	font-size: .9em;
	color:#cf142b;
}

.contentimage, .contentimageleft, .contentimageright {
	border: 1px solid #666;
	}

.contentimage img, .contentimageleft img, .contentimageright img {
	vertical-align: text-bottom;
	}
	
.contentimage p, .contentimageleft p, .contentimageright p {	
	background: #fff;
	font-size: 11px;
	font-style:italic;
	padding: 3px 5px 2px 5px;
	}
	
.contentimageleft {float: left; margin: 0 10px 5px 0;}

.contentimageright {float: right; margin: 0 0 5px 10px}
	
#content ul {
	padding-left: 15px;
	}

#content li  {
	padding-botttom: 3px;
}

#links li {
	list-style: circle; 
	}
	
/* Styles for the content in the right colum */
#right h1 {
	font-size: 11px;
	padding: 5px 0 5px 0;
}

#right img, #right a img  {
	border: 1px solid #ddd;
	margin: 2px 0 5px 0;
	}

#right a:hover img, #right a:active img  {
	border: 1px dashed #00247d;
	}

/* Layout of tables */


table {
	border-collapse: collapse;
	background: #eee;
	border-top: 2px solid #7891cf;
	border-right: 2px solid #00247d;
	border-bottom: 2px solid #00247d;
	border-left: 2px solid #7891cf;
	float: right;
	margin: 2px 0 10px 10px;
	}

table caption {
	font-size: 1em;
	color:#cf142b;
	}
	
table thead td, table tfoot td {
	font-weight: bold;
	font-size: 0.9em;
	padding: 1px 5px 0 5px;
	color: #00247d;
	}
	
table thead, table tfoot {
	font-size: 0.9em;
	}
	
table td {
	border-top: 1px solid #667;
	text-align: right;
	font-size: 0.9em;
	padding: 1px 5px 0 5px;
	}
	
td.discard {
	color: #666;
	background: #fff;
	text-decoration: line-through
	}
	
table.events {
	width: 650px;
	border-collapse: collapse;
	background: #eee;
	border-right: 2px solid #00247d;
	border-bottom: 2px solid #00247d;
	border-top: 2px solid #7891cf;
	border-left: 2px solid #7891cf;
	margin-bottom: 20px;
	float: none;
	margin: 2px 0 10px 10px;
	}

		
table.events th {
	font-size: 1em;
	font-weight: bold;
	padding: 5px;
	color: #00247d;
	}
	
table.events td {
	text-align: left;
	font-size: 1em;
	padding: 5px;
	}

table.events tr:hover {
	background: #ccc;
	}

	
/* the number indicates how many colums are left-aligned. IE gets all left aligned */

table.contact {float: none;}
table.contact tr:hover {background: #ccc}
table.contact td {text-align: left; line-height: 1.2em; padding: 3px 10px 3px 3px; vertical-align: top}

table.resultone td:first-child+td
	{
	text-align: left
	}

table.resultone tr:hover {background: #ccc}


table.resulttwo td:first-child+td, table.resulttwo td:first-child+td+td
	{
	text-align: left
	}

table.resulttwo tr:hover {background: #ccc}

table.resultthree td:first-child+td, table.resultthree td:first-child+td+td, table.resultthree td:first-child+td+td+td
	{
	text-align: left
	}

table.resultthree tr:hover {background: #ccc}	
	
ol {
	float: right;
	margin: 2px 0 5px 10px;
	padding: 5px 5px 5px 20px; 
	border-right: 2px solid #00247d;
	border-bottom: 2px solid #00247d;
	border-top: 2px solid #7891cf;
	border-left: 2px solid #7891cf;
	background: #eee;
	}

ol li {
	font-size: 0.9em;
	line-height: 1.2em
	}
	
/* Images on Picture pages */
.imagebox {
	display: block;
	float: left;
	border: 1px solid #666;
	margin: 0 0 15px 0;
	}

a.imagebox:hover, a.imagebox:active {border-color: #cf142b}

.imagebox img {
	vertical-align: text-bottom;
	border: none;
	}
	
.imagebox p {
	background: #fff;
	font-size: 11px;
	font-style:italic;
	padding: 3px 5px 2px 5px;
	min-height: 2.4em;
	}
	
a.imagebox:visited p {background: #ddf}

/* 
interesting one: IE and Firefox get confused if there is a right margin to the imageboxes,
Known bug in IE - it pts all content below the end of the right box.
Strange Firefox (1.5.02) Bug: after a lot of images, it starts to render the Imageboxes wrong (caption out of box, no image).
So to avoid that, there is a div between each imagebox to produce horizontal distance between the floated imageboxes.
Not nice for semantics, but works
*/
.imageboxhelper {
	width: 10px; 
	height: 130px; /* roughly the height of the imageboxes if less than 3 lines of caption */
	float: left;
	}
	
/* contactform */

form {margin:0 0 20px 0; padding:10px; border: 1px solid #ccc; background: #eee; position: relative;}

label {
	display: block;
	padding-bottom: 10px;
	}
	
form input, form textarea, form select {
	border: 1px solid #00247d;
	}

form input:focus, form textarea:focus, form select:focus {
	border: 1px solid #cf142b;
	background: #ffefef;
	}
	
form input:hover, form textarea:hover, form select:hover {
	border: 1px solid #cf142b;
	}
	
form textarea {
	font-family: Helvetica, Arial, Swiss, SunSans-Regular, sans-serif;
	font-size: 1em;
	padding: 2px;
	line-height: 1.2em;
	}
	
form input {
	width: 180px;
	font-size: .9em;
	padding: 1px;
	}

	
form #address {
	position: absolute;
	top:10px; right: 10px;
	margin-left: 10px;
	}

form #name, form #phone {
	float: left;
	margin-right: 28px;
	}
	
form #phone, form #fax {margin-top: 11px;}

form #topic {float: right; width: 205px;}

form select	{
	width: 204px;
	font-size: .9em;
	padding: 1px;
	}

form .address {
	width: 200px;
	height: 60px;
	}
	
form .message {
	width: 390px;
	height: 100px;
	}
	
form #send {
	margin-right: 32px;
	}
	
form #send, form #reset
{
	margin-top: 10px;
	border-right: 2px solid #00247d;
	border-bottom: 2px solid #00247d;
	border-top: 2px solid #7891cf;
	border-left: 2px solid #7891cf;
}

form #send:focus, form #reset:focus, form #send:hover, form #reset:hover, form #send:active, form #reset:active
{
	border-right: 2px solid #dc1e28;
	border-bottom: 2px solid #dc1e28;
	border-top: 2px solid #cf142b;
	border-left: 2px solid #cf142b;
}

form .nicht {display: none}