/* colors orange = #FF8700 */


/*
----------------------------------------------------------------------------- 
ESSENTIAL
-----------------------------------------------------------------------------
*/

*
{
	padding: 0;
	margin: 0;
}

html, body
{
	min-height: 100%;
	height: auto !important;
	<!-- background-color: #3b6ba5 -->
}

body
{
	color: #000000 ; /* #2B2B2B*/
	background-color: #BFBFBF;
	font-family: "Lucida Grande", Arial, Verdana, sans-serif;
	font-size: 100.01%;
}

/* configure html behavior*/
html>body { font-size: 16px; }
a { text-decoration: none; }
a:link { color: #0000FF; } /* #a60027, css selector*/
a:visited { color: #0000FF; }/* #a60027, css selector*/
a:hover { color: #FF8700; }/* #4e0012, css selector*/
a:active { color: #FF8700; }/*#000*/
img { border: 0px none; }

/*
----------------------------------------------------------------------------- 
CONTAINER
-----------------------------------------------------------------------------
*/

#wrapper /* one wrapper */
{
	width: 980px; /* 980px meaningfull width for many situations*/
	font-size: .625em;
	line-height: 1.5em;
	background-color: #BFBFBF
}


#head /* contains position of banner*/
{
	width: 945px; /* 945px - 162px corresponds to actual banner width, 945 < 980 */
	height: 150px;
	background-image: url('../img/hokawe_querplot.gif'); /* default */
	background-repeat: no-repeat;
	background-position: 162px 0; /* 162px logo width -> start for banner*/
	background-color: #DDDDDD ; <!-- leichtes grau -->
}

/* all the head (banner) images */
/* hierarchical structure for ID's, body -> startseite -> head*/
body#startseite div#head { background-image: url('../img/hokawe_querplot.gif'); }
body#profil div#head { background-image: url('../img/hokawe_querplot.gif'); }
body#kompetenzen div#head { background-image: url('../img/hokawe_querplot.gif'); }
body#kontakt div#head { background-image: url('../img/hokawe_querplot.gif'); }
body#cae div#head { background-image: url('../img/ife_mesh_banner01_res.jpg'); }
body#sitemap div#head { background-image: url('../img/hokawe_querplot.gif'); } /* impressum */


/* logo */
#head h1 a /*parameter - subspace #head */
{
	display: block;
	width: 162px;
	height: 150px;
	background: url('../img/ife.gif') no-repeat -2px -1px;
	text-indent: -500px; /* moves default text, which might be unneeded */
}

#side-left /* controls width of left link-list, shifts "content" block, overlapps impressum */
{
	float: left;
	font-size: 1.1em;
	width: 162px; /* 162px, of #head h1 a = logo */
	background: url('../img/side-left.gif') 0 0 repeat-x;
}

#side-right /* controls impressum */
{
	float: left;
	width: 110px; /* 110px, 110 + 700 + 162 = 962 < 980 #wrapper*/
	line-height: 1.1em;
}

#content
{
	float: left;
	width: 700px; /* the big, central: 700 OK with wrapper width 980 */
	font-size: 1.2em;
	background-color: #BFBFBF;
	padding: 20px 0 30px 0; /* a little padding/border is nice */
}

#foot /* only if "clear" and "color" are commented out*/ 
{
	font-size: 1em;
   clear: both; 
	margin: 0;
   color: #DDDDDD; /* #eee is grey*/ 
	height: 5em; 
}

/*
----------------------------------------------------------------------------- 
NAVIGATION RIGHT 
-----------------------------------------------------------------------------
*/

#side-right ul { list-style-type: none; }

#side-right a
{
	display: block;
	margin: 1em .5em .5em .5em;
	padding-left: 17px; /*17px OK with icons, fi impressum*/
	background-image: url('../img/icon-document.gif');
	background-repeat: no-repeat;
	background-position: 1px 1px;
}

/* mbtodo */
#side-right a#sitemap { background-image: url('../img/icon-sitemap.gif'); }
#side-right a#impressum { background-image: url('../img/icon-info.gif'); }
#side-right a:hover { background-position: 2px 2px; }

/*
----------------------------------------------------------------------------- 
NAVIGATION LEFT 
-----------------------------------------------------------------------------
*/

#side-left ul
{
	background-color: #DDDDDD; /*grey*/
	list-style-type: none;
	margin-top: 20px;
}

#side-left ul ul,
#side-left ul ul ul { padding-top: 0;margin-top: 0; }

#side-left ul a
{
	width: 162px;
	height: 20px;
	display: block;
	border-bottom: 1px solid #FFFFFF; /*#FFF borderline in kicker*/
	text-indent: 20px;
	line-height: 1.6em;
	font-weight: bold;
	background-color: #DDDDDD;
}

#side-left ul ul a
{
	color: #666;
	background-color: #DDDDDD;
	border-bottom: 1px solid #FFFFFF;
	font-weight: normal;
	text-indent: 30px;
}

#side-left ul ul ul a
{
	color: #666;
	background-color: #FF8700;
	border-bottom: 1px solid #DDDDDD;
	text-indent: 40px;
}

#side-left ul ul ul ul a
{
	color: #666;
	background-color: #FF8700;
	border-bottom: 1px solid #DDDDDD;
	text-indent: 50px;
}

#side-left ul ul ul ul ul a
{
	color: #666;
	background-color: #FF8700;
	border-bottom: 1px solid #dddddd;
	text-indent: 60px;
}

#side-left a.open /*the arrows in the links, if class open is set*/
{
	background-image: url('../img/arrow-down.gif');
	background-position: 150px 8px; /*222px, to be adapted to left width 162 */
	background-repeat: no-repeat;
}

#side-left a.current
{
	color: #000;
	background-color: #FFF;
	background-image: url('../img/arrow-red.gif');
	background-repeat: no-repeat;
	background-position: 155px 5px;/*222px, to be adapted to left width 162 */
}


#side-left ul a:hover
{
	background-color: #fff;
	color: #4e0012;
}


/*
----------------------------------------------------------------------------- 
TYPO
-----------------------------------------------------------------------------
*/

h2
{
	font-size: 1.4em;
	font-weight: bold;
	margin: 0 20px 1em 20px;
	color: #000000;
}

h3
{
	font-size: 1em;
	font-weight: bold;
	margin: 0 20px .5em 20px;
	color: #000000;
}

h4
{
	font-size: 1em;
	font-weight: normal;
	margin: 0 20px .5em 20px;
	color: #000000;
	clear: both;
}

p { margin: 0 20px 1.5em 20px; }

iframe
{
	margin: 0 20px 1.5em 20px;
	width: 560px;
	height: 250px ;
	border: 1px solid #999;
}

address
{
	margin: 0 20px 1.5em 20px;
	color: #000000;
	font-style: normal;
}

#content ul
{
	margin: 0 20px 1.5em 20px;
	padding-left: 1.5em;
	color: #aaa;
}

#content li
{
	margin: 0 0 .5em 0;
	color: #000000; /* previus 666, f.i. listing in profil */
}

hr
{
	border-left: 0px none;
	border-right: 0px none;
	border-top: 0px none;
	clear: both;
	height: 0;
	width: 100%;
	border-bottom: 1px solid #ddd;
	margin-bottom: 1.5em;
}

/*
----------------------------------------------------------------------------- 
ASSETS
-----------------------------------------------------------------------------
*/

div.lefty
{
	float: left;
	width: 380px;
}

div.profil
{
	float: left;
	width: 700px;
}

div.preview
{
	display: inline;
	float: right;
	margin: 0 0 1.5em 1em;
}

div.preview a, div.preview a img
{
	float: left;
	overflow: hidden;
}

div.preview a:hover { border: 1px solid #870020; }
div.preview a:hover img { margin: -1px; }

div.preview p
{
	clear: both;
	font-size: 10px;
	color: #0000FF; /* #aaa */
	margin: .5em 0 0 0;
	width: 190px;
}

dl
{
	font-size: .9em;
	color: #999;
	margin-bottom: 10px;
}

dt
{
	display: inline;
	width: 130px;
	margin-left: 20px;
	margin-top: 2em;
}

dd { margin: -15px 0 0 130px; }


/*
----------------------------------------------------------------------------- 
FORMS
-----------------------------------------------------------------------------
*/

fieldset
{
	margin: 0 20px 1.5em 20px;
	border: 1px solid #aaa;
	color: #999;
	padding: 10px;
	display: inline;
}

legend
{
	font-size: 11px;
	color: #999;
}

select { margin: .5em 0; }

/*
----------------------------------------------------------------------------- 
TABLES
-----------------------------------------------------------------------------
*/

#content table
{
	font-size: .9em;
	width: 560px;
	border-collapse: inline;
	border: 0px none;
	margin: 1.5em 20px;
	clear: both;
}

#content table table
{
	width: 400px;
	margin: 0;
}

#content dd table
{
	width: 560px;
	margin: 0;
	padding: 0;
}

#content table ul { margin: 0 0 1.5em 0; }

th
{
	padding: 0 .5em .5em 0;
	text-align: left;
	font-weight: bold;
	color: #000;
	border-bottom: 1px solid #ccc;
	font-size: 1.1em;
}

tr { vertical-align: top; }

td
{
	padding: 0 .5em .5em 0;
	border-bottom: 1px solid #ccc;
}

td address, td p { margin-left: 0; }
td:hover { background-color: #f8f8f8; }

#content table.nostyle
{
	margin: 0 0 0 20px;
	padding: 0;
	width: 700px; /* sets the preamble: 1200px */
}

#content table.nostyle td
{
	border: 0px none;
	padding: 0;
}

#content table.nostyle td:hover { background-color: #fff; }

/*
----------------------------------------------------------------------------- 
MAP GERMANY
-----------------------------------------------------------------------------
*/

#content div#adresse
{
	font-size: .9em;
	width: 200px;
	display: inline;
	float: right;
}


#content div#auswahl

{
	font-size: .9em;
	width: 200px;
	display: inline;
	float: right;
	margin: 162px 0 0 0;
}



#content div#adresse address
{
	color: #333;
	margin: 3px 3px 23px 3px;
}

#content div#adresse h3
{
	color: #333;
	margin: 3px;
}

#content div#adresse h4
{
	color: #870020;
	display: block;
	width: 194px;
	margin: 10px 0 0 0;
	padding: 3px;
	background-color: #f4f4f4;
}

#legende
{
	width: 200px;
	float: left;
	padding-bottom: 24px;
}

#legende ul.list
{
	margin: 0;
	padding: 0;
}

#legende ul.list li
{
	list-style: none;
	margin: 6px 0;
	padding: 0;
}

#legende ul.list li a
{
	margin: 0;
	padding: 0 0 0 20px;
}


/*
----------------------------------------------------------------------------- 
NEWS
-----------------------------------------------------------------------------
*/

div#galerie
{
	margin: 0 0 0 14px;
	padding: 0px;
}

div#galerie a img
{
	margin: 0 0 6px 6px;
	padding: 0px;
	border: 0px;
}

a#filmlink
{
	width: 100%;
	border: 0;
}

/*
----------------------------------------------------------------------------- 
INDEX
-----------------------------------------------------------------------------
*/

<!-- GF Block -->

#content table.GF { margin-top: 30; }


table.GF td a span
{
	display: block;
	padding: 53px 0 0 10px;
	width: 235px;
	font-size: 1.8em; /*1.1 */
	font-weight: bold;	
/*	background-color: #FF0000 /* /* all red */ 
}

/* former color #fff */
table.GF td#GF01 { background: #ddd url('../img/P1000137_ex.gif') no-repeat 0 0; }
table.GF td#GF02 { background: #ddd url('../img/howee_gebaeude_ex.gif') no-repeat 0 0; }
table.GF td#GF03 { background: #ddd url('../img/SL380019_ex.gif') no-repeat 0 0; }

<!-- GFB Block -->

#content table.GFB { margin-top: 0; }

table.GFB td a span
{
	display: block;
	padding: 53px 0 0 10px;
	width: 235px;
	font-size: 1.8em;
	font-weight: bold;
}

table.GFB td#GFB01 { background: #ddd url('../img/kraftwerkssimulation_ex.gif') no-repeat 0 0; }

table.GFB td#GFB02 { background: #ddd url('../img/ca_vg_ex.gif') no-repeat 0 0; }

table.GFB td#GFB03 { background: #ddd url('../img/cae_banner.gif') no-repeat 0 0; }
table.GFB td#GFB04 { background: #ddd url('../img/solar.gif') no-repeat 0 0; }