/*

	Dingler-CSS 
	
	Struktur
	
	Datum: 07/2009	
	Autor: Thomas Jung ( Telefon: +49 172 3465096; Email: thomas@tjwd.de; Web: www.tjwd.de)
	
*/



/* ############################ Allgemeines DesignSetup der Body- & HTML-Elemente ############################ */

* { margin:0; padding:0; }

html, body { position:relative; width:100%; height: 100%; }

body { font-family: Verdana, Arial, Helvetica, Sans-Serif; background: #fff; text-align: center; font-size: 10px; }



/* ############################ Erstes Design der wichtigsten Elemente für die Positionierung und Darstellung ############################ */

.hidden, #sitenav { display: none; }
#sitewrapper { position: relative; min-height: 100%; }
.centring { position: relative; width: 96em; height: 100%; margin: 0 auto; text-align: left; }
.floatclearing { position: relative; width: 100%; height: 0.1em; margin: 0; clear: both; }
img { border: none; }



/* ############################ Definition des Headers ############################ */

/* Allgemeines für den Header */
#a_top { position: absolute; top: -4em; left: 0; width: 1px; height: 1px; display: block; }
#header { position: relative; background: url(../../images/dingler/headerbg.gif) repeat-x 0 0; height: 20.5em; z-index: 4; margin: 0.1em 0 0 0; }
#header ul { list-style-type: none; }

/* Home-Logo */
#header h1 { position: absolute; top: 2.7em; left: 0; width: 24em; height: 6em; font-size: 1em; display: block; }
#h_link { position: relative; width: 43em; height: 8em; background: #cfd url(../../images/dingler/dinglerlogo.gif) no-repeat left top; text-indent: -900em; overflow: hidden; display: block; }

/* Design der Kooperationspartner-Logos */
p#partners { position: absolute; top: 4em; right: 3em; width: 27.2em; height: 5em; display: block; overflow: hidden; text-indent: -900em; }
p#partners #partner_dfg { position: absolute; top: 0; width: 12.4em; height: 5em; display: block; overflow: hidden; text-indent: -900em; }
p#partners #partner_slub,
p#partners #partner_huberlin { position: absolute; top: 0; width: 5em; height: 5em; display: block; overflow: hidden; text-indent: -900em; }
p#partners #partner_dfg { right: 14.8em; top: 0.3em; background: url(../../images/dingler/partner_dfg.gif) no-repeat 0 0; }
p#partners #partner_slub { right: 7.4em; background: url(../../images/dingler/partner_slub.gif) no-repeat 0 0; }
p#partners #partner_huberlin { right: 0; background: url(../../images/dingler/partner_huberlin.gif) no-repeat 0 0; }

/* Design des Sprachumschalters */
ul#langchg a { position: absolute; bottom: 5em; width: 6em; height: 1.7em; background: url(../../images/dingler/langchg_bg.gif) no-repeat 0 0; color: #332; font-weight: bold; text-decoration: none; margin: 0 1em; text-align: center; display: block; padding: 0; line-height: 1.6em; }
ul#langchg a#b_english { right: 2em; }
ul#langchg a#b_german { right: 8em; }
ul#langchg a.active, ul#langchg a.active:hover { background-position: 0 -1.7em; color: #886;  }
ul#langchg a:hover { background-position: 0 -3.4em; }



/* ############################ CSS-Setup der Navigation ############################ */

/* Allgemeine Def. für die Navigation */
#nav { position: absolute; left:3em; bottom:2.4em; height: 5em; display: block; }
#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 12em; }
#nav li { float: left; width: 12em; }
#nav a { position: relative; width: 12em; height: 5em; display: block; background-image: url(../../images/dingler/nav.gif); background-repeat: no-repeat; text-indent: -900em; overflow: hidden; }
#nav a.en { background-image: url(../../images/dingler/nav_en.gif); }

/* Def. für Startseite-Button */
#b_start a { background-position: 0 0; }
#b_start.act a, #b_start.act a:hover { background-position: 0 -5em; }
#b_start a:hover { background-position: 0 -10em; }

/* Def. für Journal-Button */
#b_journal a { background-position: -12em 0; }
#b_journal.act a, #b_journal.act a:hover { background-position: -12em -5em; }
#b_journal a:hover { background-position: -12em -10em; }

/* Def. für Projekt-Button */
#b_projekt a { background-position: -24em 0; }
#b_projekt.act a, #b_projekt.act a:hover { background-position: -24em -5em; }
#b_projekt a:hover { background-position: -24em -10em; }

/* Def. für Kontakt-Button */
#b_kontakt a { background-position: -36em 0; }
#b_kontakt.act a, #b_kontakt.act a:hover { background-position: -36em -5em; }
#b_kontakt a:hover { background-position: -36em -10em; }

/* 3D-Effekt der Navigation vorn und hinten */
#navstart, #navend { position: absolute; top: 0; width: 0.1em; height: 5em; background-image: url(../../images/dingler/navends.gif); background-repeat: no-repeat; }
#navstart { left: -0.1em; background-position: 0 0; }
#navend { right: -0.1em; background-position: -0.1em 0; }

/* Allgemeine Defs. der Dropdowns */
#nav li .subnav { position: absolute; left: -999em; top: 3.2em; width: 11.6em; padding: 2em 0.2em 1em 0.2em;}
#nav li:hover .subnav, #nav li.sfhover .subnav { left: auto; }
.subnavbg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; display: block; }

/* Definition der untersch. Hintergründe der Dropdowns */
#b_journal .subnavbg, #b_journal_act .subnavbg { background: #900 url(../../images/dingler/subnavbg_journal.gif) no-repeat center top; }
#b_projekt .subnavbg, #b_projekt_act .subnavbg { background: #063 url(../../images/dingler/subnavbg_projekt.gif) no-repeat center top; }
#b_kontakt .subnavbg, #b_kontakt_act .subnavbg { background: #541 url(../../images/dingler/subnavbg_kontakt.gif) no-repeat center top; }

/* Buttondef. der Dropdowns */
#nav ul li .subnav ul li a { position: relative; width: 11.6em; height: auto; float: none; border-width: 1px 0; border-style: solid; border-color: #fff; color: #fff; text-indent: 0; background-image: none; margin: 0 0 -1px 0; text-decoration: none; padding: 0.4em 0; text-align: center; font-weight: bold; }
#nav ul li#b_journal .subnav ul li a:hover { background: #c66; }
#nav ul li#b_projekt .subnav ul li a:hover { background: #7a8; }
#nav ul li#b_kontakt .subnav ul li a:hover { background: #987; }



/* ############################ Design der Breadcrumb-Navigation ############################ */

#breadcrumb { position: relative; border: 1px solid #ccc; font-size: 1em; line-height: 1.8em; height: 1.8em; margin: 0 0 2em 0; }
#breadcrumb .bc_intro { position: relative; display: block; float: left; background: #f0f0f0; font-size: 1em; line-height: 1.8em; padding: 0 1.5em 0 1em; font-weight: bold; color: #999; margin: 0 -1em 0 0; z-index: 22; }
#breadcrumb .bc_intro .bc_introsep { position: absolute; top: -0.1em; right: 0; height: 2em; background: url(../../images/dingler/bc_introsep.gif) no-repeat 0 0; width: 1em; display: block; }
#breadcrumb ul { list-style-type: none; list-style-image: none !important; }
#breadcrumb li { position: relative; float: left; top: -0.1em; height: 2em; font-size: 10px; line-height: 2em; background: url(../../images/dingler/bc_sep.gif) no-repeat 0 0; padding: 0 0.5em 0 1.7em; color: #666; }
#breadcrumb a { color: #036; text-decoration: none; }
#breadcrumb a:hover { color: #369; }



/* ############################ Grundlegende Gestaltungen (Position etc.) des Contentbereichs und seiner Elemente ############################ */

/* Positionierungen und Rahmen der Haupt-Inhaltselemente (rest in content.css) */
#main { position: relative; padding: 0 0 16em 0; }
#content { position: relative; width: 53em; float: left; margin: 0 0 0 3em; z-index: 3; }
#contentfoot { position: relative; height: 1em; width: 100%; border-bottom: 1px solid #dbd7c6; margin: 0 0 5em 0; }

/* Setup der Sidebar-Darstellung */
#sidebar { position: relative; width: 31em; float: left; padding: 0 0 16em 0; margin: 0 0 0 6em; font-size: 1em; line-height: 1.8em; }
#sidebar .box { position: relative; width: auto; padding: 1.6em 2em 1.6em 2em; background: #fbfaf2; border-width: 1px 0; border-style: solid; border-color: #dbd7c6; margin: 0 0 2em 0; }



/* ############################ Gestaltung für den Fußbereich mit Funktionsnavigation ############################ */

#footer { position: absolute; bottom: 0; left: 0; height: 15em; width: 100%; background: url(../../images/dingler/footerbg.gif) repeat-x 0 0; z-index: 7; }
#footer .centring { height: 15em; width: 96em; background: url(../../images/dingler/footerimage.jpg) no-repeat 0 0; }
p.lastchanges { position: relative; color: #68a; padding: 1em 0 0 3em; max-width: 55em; }
p.lastchanges a { color: #68a; text-decoration: none; border-left: 1px dotted #68a; margin: 0 0 0 0.2em; padding: 0 0 0 0.4em; }
#footer #totop { position: absolute; top: 0.1em; left: 61.6em; width: 11em; height: 3em; font-size: 1em; display: block; background: url(../../images/dingler/totopbg.gif) no-repeat 0 0; padding: 0.3em 0 0 4em; font-weight: normal; color: #036; text-decoration: none; }



/* ############################ EOF ############################ */