/*

	CSS für die Website von MAGO
	
	Struktur und Layout der Seite
	
	Datum: 05/2010
	Autor: Thomas Jung ( Telefon: +49 172 3465096; Email: thomas@tjwd.de; Web: www.tjwd.de) 

*/


/* Allgemeine Reset-Definitionen */
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { font-size: 62.5%; font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-Serif; background: #fff; color: #555; text-align: center; }
.hidden, #sitenav, h2 { display: none; }
img { border: none; }


/* Grundsätzliche Definitionen zum Aufbau der Seite */
#page { position: relative; min-height: 100%; width: 100%; font-size: 1.1em; overflow: hidden; background: url(../images/topheadbg.jpg) no-repeat center top; }
#wrapper { position: relative; width: 940px; margin: 0 auto 250px auto; text-align: left;  }
#content { position: relative; width: 515px; padding: 0 30px 0 0; margin: 0 0 0 30px; float: left; }
.floatctrl { position: relative; width: 100%; height: 1px; background: transparent; border: 1px solid #fff; clear: both; }


/* Gestaltung des Kopfbereichs (Aufbau) */
#header { position: relative; height: 510px; width: 960px; margin: 0 auto; }
#header #h_link { position: absolute; top: 4px; right: 85px; height: 200px; width: 200px; display: block; overflow: hidden; text-indent: -9000px; background: url(../images/magologo.png) no-repeat 0 0; z-index: 100; }
* + html #header #h_link { top: 12px; }
#headpic { position: relative; width: 960px; height: 500px; margin: 9px 0 0 0; overflow: hidden; }
#headpic img { position: absolute; top: 15px; left: 35px; }
#headpic #headpic2,
#headpic #headpic3,
#headpic #headpic4,
#headpic #headpic5 { display: none; }


/* Darstellung der KantenOverlays für das Headerbild */
#appleft, #appright, #apptop, #appbottom { position: absolute; }
#appleft { top: 0; left: 0; width: 73px; height: 500px; background: url(../images/head_leftapp.png) no-repeat 0 0; }
#appright { top: 0; right: 0; width: 76px; height: 500px; background: url(../images/head_rightapp.png) no-repeat 0 0; }
#apptop { top: 0; left: 73px; width: 811px; height: 62px; background: url(../images/head_topapp.png) no-repeat 0 0; }
#appbottom { bottom: 0; left:73px; width: 811px; height: 78px; background: url(../images/head_bottomapp.png) no-repeat 0 0; }


/* Breadcrumb Navigation */
#rootline { position: absolute; top: 17px; left: 90px; list-style-type: none; height: 20px; }
* + html #rootline { top: 27px; }
#rootline li { float: left; color: #d02; text-shadow: #eed 1px 1px 0; }
#rootline li a { position: relative; color: #d02; font-weight: bold; text-decoration: none; padding: 0 11px 0 0; margin: 0 3px 0 0; background: url(../images/rootlinesep.png) no-repeat right 5px; text-shadow: #eed 1px 1px 0; }


/* Navigationsdesigns */
#nav { position: absolute; bottom: 90px; left: 0; width: 960px; height: 80px; z-index: 90; background: url(../images/navbg.png) no-repeat 0 0; text-align: left; list-style-type: none; zoom: 1; }
#nav li { position: relative; float: left; }
#nav li a { position: relative; top: 20px; height: 40px; font-family: Georgia, Times, Times-New-Roman, _serif; font-weight: bold; font-style: italic; font-size: 1.6em; text-shadow: #fff 1px 1px 0px; padding: 0 10px; color: #063;  text-decoration: none; display: block; line-height: 38px; background: url(../images/navsep.png) no-repeat right top; }
#nav li a:hover { color: #c00; }
#nav li:hover .subnav { left: 0; z-index: 9999; }
#nav li#n_home a { margin: 0 0 0 40px; width: 28px; height: 38px; background: url(../images/homebtn.png) no-repeat 0 0; text-indent: -9000px; overflow: hidden; }
#nav a.act { color: #900; background: url(../images/navsepact.png) no-repeat right top; }
#nav li#n_home a.act { background-position: 0 -38px; }
#nav li#n_gol { position: absolute; right: 0; }
#nav li#n_gol a { width: 38px; text-indent: -9000px; overflow: hidden; background: url(../images/golswitch.png) no-repeat 0 0; }
#nav .subnav { position: absolute; top: 60px; left: -2000px; padding: 0 4px 15px 0; width: 180px; background: url(../images/subnavbg.png) repeat-y right bottom; zoom: 100%; }
#nav .subnav .subnavtop { position: absolute; top: -52px; left: 0; width: 100%; height: 12px; background: url(../images/subnavbg.png) repeat-y right top; }
#nav .subnav ul { list-style-type: none; }
#nav .subnav li { position: relative; float: none; }
#nav .subnav li a { top: 0; margin: 0; background: transparent; font-family: 'Lucida Grande', Verdana, Helvetica, Arial, Sans-Serif; font-size: 1.2em; line-height: 24px; font-style: normal; border-bottom: 1px dotted #666; color: #c00; padding: 4px 10px; height: auto;  }
#nav .subnav li a:hover { color: #c00; background: #eed; }


/* animiertes Suchformular in Navigation */
#nav li#n_search { position: absolute; top: 14px; right: 57px; }
#nav form { position: relative; width: 230px; height: 38px; overflow: hidden; background: url(../images/bgtechnavright.png) no-repeat right top; z-index: 93; }
#nav form h4 { display: none; }
#nav form #blendstuff { position: absolute; top: 5px; right: 6px; width: 23px; height: 38px; background: #f00; text-align: left; padding: 0 0 0 10px; background: url(../images/navsep.png) no-repeat 0 3px; overflow: hidden; }
#nav form input#searchword { position: relative; top: 10px; background: #fff; border-width: 1px; border-style: solid; border-color: #ccc #fff #fff #ccc; font-size: 11px; padding: 1px 4px; width: 160px; color: #a98; display: none; }
#nav form input#searchword:focus { color: #900; }
#nav form input#send { position: absolute; right: 0; top: 2px; height: 38px; width: 25px; border: none; background: url(../images/searchbtn.png) no-repeat 0 0; overflow: hidden; text-indent: 900em; cursor: pointer; }
* + html #nav form input#send { padding: 0 0 0 30px; }
#nav form input#send:active { background: url(../images/searchbtn.png) no-repeat 1px 1px; }


/* Gestaltung der Seitenleiste */
#sidebar { position: relative; top: 55px; left: 0; width: 220px; padding: 0 60px 0 50px; float: left; background: url(../images/sidebarbg.png) repeat-y left top; line-height: 145%; font-size: 1.1em; }
#sidebar * { position: relative; }
#sidebartop, #sidebarbottom { position: absolute; left: 0; width: 320px; height: 130px; }
#sidebartop { top: -50px; background: url(../images/sidebartop.png) no-repeat 0 0;  }
#sidebarbottom { bottom: -50px; background: url(../images/sidebarbottom.png) no-repeat 0 0; }


/* Gestaltung des Fußbereichs */
#footer { position: relative; width: 100%; height: 250px; margin: -250px 0 0 0; background: url(../images/footerbg.jpg) no-repeat center bottom; }
#footer #fwrap { position: relative; height: 100%; width: 960px; margin: 0 auto; }
#technav { position: absolute; top: 134px; left: 20px; height: 40px; padding: 4px 30px 0 3px; background: url(../images/footnavbg.png) no-repeat right top; }
#technav ul { list-style-type: none; }
#technav ul li { position: relative; float: left; border-width: 0 1px; border-style: solid; border-color: #765; padding: 0 4px; margin: 0 0 0 -1px; }
#technavleft { position: absolute; left: -20px; top: 0; height: 40px; width: 20px; background: url(../images/footnavleft.png) no-repeat 0 0; }
#technav a { color: #765; text-decoration: none; }
#technav a:hover { color: #543; text-decoration: underline; }
#totop { position: absolute; top: 88px; right: 210px; width: 100px; height: 35px; background: url(../images/totop.png) no-repeat 0 0; color: #ac9; text-decoration: none; padding: 25px 0 0 50px; text-shadow: #463 -1px -1px 0; font-size: 12px; text-align: left; }
#totop:hover { color: #fff; }

/* EOF */