/*
	
	CSS-Styles for BIOTEC-DRESDEN-WEBSITE 
	
	The Main-CSS-File. This File defines the Basic-Layouts and Elements...
 
	Author: Thomas Jung, TJWD
	Phone: +49 351 5636328
	Mail: thomas@tjwd.de
 	Web: www.tjwd.de
 	
*/


/* the standard definitions and resets */
* { margin:0; padding:0; }
html, body { position:relative; width:100%; min-height:100%; }
body { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Helvetica, Sans-Serif; background: #fff url('../images/sitebg.jpg') repeat-y top center; text-align: center; font-size: 10px; }


/* here follows some layout-container and overall-used elements */
.sitecontainer { position: relative; width: 92em; margin: 0 auto; }
#maincolumn { position: relative; width: 73em; padding: 0 0 10em 0; float: left; }
.floatclearing { position: relative; clear: both; }
.hidden, #sitenav, h2 { display: none; }

a#top { position: absolute; top: -9em; left: 0; width: 1em; width: 1em; display: block; }


/* the header-definitions with the logo */
#header { position: relative; width: 73em; height: 13em; background: url('../images/headerbg.png') no-repeat left bottom; }
#header h1 { position: absolute; font-size: 1em; bottom: 0; left: 4em; width: 23em; height: 7.3em; display: block; }
#header h1 #hlink { position: relative; width: 23em; height: 7.3em; display: block; text-indent: -900em; overflow: hidden; background: url('../images/bioteclogo.gif') no-repeat 0 0;	 }


/* the header-image with it's mask-div  */
#mainpic, #content, #breadcrumb { background: url('../images/contentbg.png') repeat-y 0 0; }
#mainpic { position: relative; width: 73em; height: 15em; }
#mainpic img { position: absolute; top:0; left: 1.7em; }
#mainpic #mask { position: absolute; top: 0; left: 1.7em; background: transparent url('../images/headpic_mask.png') no-repeat 0 0; width: 73em; height: 15em; }


/* the bradcrumbnav-designs */
#breadcrumb { position: relative; text-align: left; font-size: 1em; font-weight: bold; }
#breadcrumb ul { position: relative; margin: 0 0 0 12.5em; list-style-type: none; }
#breadcrumb ul li { position: relative; padding: 0.3em 0; margin: 0 0.4em 0 0; float: left; color: #666; font-size: 1.1em; }
#breadcrumb ul li a { position: relative; padding: 0 0.7em 0 0; text-decoration: none; color: #069; background: url('../images/breadsep.gif') no-repeat right center; }
#breadcrumb ul li a:hover { text-decoration: underline; }
#breadclear { position: relative; clear: left; margin: 0 2em 0 1.7em; border-bottom: 1px dotted #ccc; }


/* here follows the css-blocks for the small dropdown-nav (jobs, news, events) */
#shortinfos { position: absolute; top: 8em; right: 4em; z-index: 89; clear: both; list-style-type: none; }
#shortinfos h4 { position: relative; padding: 0 0 0 0.8em; margin: 0 1em 0 0; height: 2.2em; background: url('../images/shortnav_bullets.gif') no-repeat left 0.3em; font-size: 1.1em; font-weight: bold; cursor: pointer; }
#shortinfos h4 a { text-decoration: none; color: #666; }
#shortinfos .shortelements:hover h4 a { text-decoration: underline; color: #036; }
.shortactive { position: absolute; bottom: 0; left: 0; background: url('../images/shortarrow.gif') no-repeat center top; width: 100%; height: 1.4em; display: none; z-index: 200; }
.shortelements:hover .shortactive { display: block; }
.shortelements { float: left; }
.shortcontainer {  position: absolute; top: 1em; left: -9000em; width: 35em;	 background: url('../images/shortbg.png') no-repeat right top; text-align: left; padding: 2.4em 3em 1em 2em; display: block; }
.shortelements:hover .shortcontainer { left: auto; right: 0em; }
.shortcontainer ul { position: relative; list-style-type: none; margin: 0.8em 0; }
.shortcontainer p { font-size: 1.1em; margin: 0.6em 0 0 0; }
.shortcontainer ul li a { position: relative; background: #def; border-bottom: 1px solid #fff; padding: 0.5em 1em; display: block; text-decoration: none; font-weight: bold; color: #036; }
.shortcontainer ul li a:hover,
.shortcontainer ul li a.hotevent:hover { background: #036; color: #fff; }
.shorthot { background: url('../images/smallhotbutton.gif') no-repeat top right; margin: 0 0.5em 0 0; }
.shortcontainer ul li a.hotevent { background: #c00; color: #fff; }
.shortcontainer .shortend { position: absolute; bottom: -3em; left: 0; height: 3em; width: 40em; background: url(../images/shortend.png) no-repeat bottom center; }


/* the content-layout-things | everything else, like tables 'n stuff you 'll find in the content.css */
#content { position: relative; background: url('../images/contentbg.png') repeat-y 0 0; text-align: left; padding: 3em 6em 3em 12.5em; clear: left; min-height: 60em; }
#content #verticaltypo { position: absolute; bottom: -0.6em; left: 1.7em; width: 2em; height: 35em; background: url('../images/verticaltypo.gif') no-repeat left bottom; z-index: 88; }
#content #hottestevent { position: relative; left: -10.8em; top: 0; display: block; width: 65em; font-size: 1em; font-weight: bold; font-family: Verdana; line-height: 1.2em; margin: 0 0 2em 0; padding: 1em 0 1em 4em; background: #f3f6f8; border-width: 1px 0; border-style: dotted; border-color: #ace; }
#content #hottestevent .hotintro { color: #c00; display: block; }
#he_button { position: absolute; top: -1.5em; left: -2em; width: 6em; height: 6em; display: block; background: url('../images/bighotbutton.png') no-repeat 0 0; }


/* the navigation-css with all the ul's and li's and hover-definitions */
#nav { position: absolute; top: 5em; right: 0; width: 21.3em; padding: 6em 0; text-align: left; }
#nav #navstart { position: absolute; left: 0; top: 0; width: 21.3em; height: 6em; background: url('../images/navstart.png') no-repeat right bottom; }
#nav ul { position: relative; list-style-type: none; }
#nav #mainnav li { position: relative; width: 21.3em; background: url('../images/navbg.gif') repeat-y right top; margin: 0 0 -1px 0; }
#nav #mainnav li a { position: relative; font-size: 1.2em; font-weight: bold; color: #036; text-decoration: none; border-width: 1px 0; border-style: dotted; border-color: #ccc; margin: 0 1.6em 0 0; padding: 0.6em 0 0.6em 3em; display: block; background: url('../images/mainnav_bullets.gif') no-repeat 1.6em center; }
#nav #mainnav li.active a,
#nav #mainnav li.active a:hover { background: #69c url('../images/mainnav_bullets_active.gif') no-repeat 1.6em center; color: #fff; }
#nav #mainnav li a:hover { background: #ace url('../images/mainnav_bullets_over.gif') no-repeat 1.6em center; color: #fff; }
#nav #mainnav li .subnav { position: relative; z-index: 90; padding: 0 0 1px 0; display: none; }
#nav #mainnav li.active .subnav { display: block; }
/* nickd: messes up everything */
/*#nav #mainnav li.active .subnav .active { background: #69c; color: #fff; }*/
#nav #mainnav li .subnav li { background: #fff url('../images/navbg_over.gif') repeat-y left top; }
#nav #mainnav li .subnav li a { font-size: 1em; color: #036; padding: 0.6em 0 0.6em 4em; border-width: 1px 0; border-style: solid; border-color: #fff; margin: 0 2em 0 0; background: url('../images/subnav_bullets.gif') no-repeat 2.4em center; }
#nav #mainnav li:hover ul, #nav #mainnav li.sfhover ul { display: block; }
#nav #mainnav li .subnav li a:hover { background: #036 url('../images/subnav_bullets_over.gif') no-repeat 2.4em center; color: #fff; }


/* nickd: activation of submenus */
/* 1px wide border on bottom */
#nav #mainnav li.active ul li.active > a, #nav #mainnav li.active ul li.active ul li.active > a, #nav #mainnav li.active ul li.active ul li.active ul li.active > a { border-bottom-width: 0px; }

#nav #mainnav li.active ul li.active > a { background: #69c url('../images/subnav_bullets_active.gif') no-repeat 2.4em center; color: #fff;}

/* 2nd level submenu */
#nav #mainnav li.active ul li.active ul.subnav li > a { background: url('../images/subnav_bullets.gif') no-repeat 3.0em center; padding-left: 4.6em;}
/* 2nd level submenu hover */
#nav #mainnav li.active ul li.active ul.subnav li > a:hover { background: #036 url('../images/subnav_bullets_over.gif') no-repeat 3.0em center; color: #fff;}
/* 2nd level submenu active */
#nav #mainnav li.active ul li.active ul.subnav li.active > a { background: #69c url('../images/subnav_bullets_active.gif') no-repeat 3.0em center; color: #fff;}

/* 3rd level submenu */
#nav #mainnav li.active ul li.active ul.subnav li.active ul li > a { background: url('../images/subnav_bullets.gif') no-repeat 3.6em center; padding-left: 5.2em;}
/* 3rd level submenu hover */
#nav #mainnav li.active ul li.active ul.subnav li.active ul li > a:hover { background: #036 url('../images/subnav_bullets_over.gif') no-repeat 3.6em center; color: #fff;}
/* 3rd level submenu active */
#nav #mainnav li.active ul li.active ul.subnav li.active ul li.active > a { background: #69c url('../images/subnav_bullets_active.gif') no-repeat 3.6em center; color: #fff;}



/* the searchform in the navigation */
#nav #searchform { position: relative; width: 21.3em; height: auto; margin: 0; background: url('../images/navbg.gif') repeat-y right top; }
#nav #searchform #searchinput{ position: relative; left: 1.8em; border: 1px solid #ccc; background: #eee; padding: 0.1em; width: 14em; font-size: 1.1em; color: #999; }
#nav #searchform #send { position: absolute; font-size: 1em; right: 3.8em; top: 1.6em; width: 3em; height: 3em; background: url('../images/btnsend.png') no-repeat 0 0; border: none; padding: 10em 0 0 0; overflow: hidden; display: block; cursor: pointer; color: #fff; }
#nav #searchform div.searchformwrapper { margin: 0; font-size: 1em; border-width: 1px 0; border-style: dotted; border-color: #ccc; width: 19.4em; padding: 2em 0;  }
#nav #searchform #send:active { background: url('../images/btnsend.png') no-repeat 1px 1px;}


/* the language-switch */
#nav #langnav { position: absolute; left: -3em; bottom: 0; width: 7em; height: 8em; background: url('../images/langbg.png') no-repeat left top; }
#nav #langnav #flag_uk,
#nav #langnav #flag_de { position: absolute; left: 2.3em; width: 1.6em; height: 1.1em; display: block; text-indent: -900em; overflow: hidden; }
#nav #langnav #flag_uk { bottom: 3em; background: url('../images/flag_uk.gif') no-repeat 0 0; }
#nav #langnav #flag_de { top: 2em; background: url('../images/flag_de.gif') no-repeat 0 0; }


/* the footer-css */
#footer { position: relative; padding: 0.6em 0 0 0; background: url('../images/footerbg.png') no-repeat left top; }
#footer #infobar { position: relative; font-size: 1em; height: 7em; padding: 0.7em 0 0 0; margin: 0 1.5em 0 14em; background: url('../images/infobarbg.png') no-repeat right top; text-align: left; color: #666; }
#footer #infobar a { text-decoration: none; color: #069; font-weight: bold; }
#footer #infobar a:hover { text-decoration: underline; }
#footer #infobarend { position: absolute; top: 0; left: -3em; width: 3em; height: 7em; display: block; background: url('../images/infobarend.png') no-repeat left top; }


h2.tx-loginboxmacmade-pi1-header { display: inline; font-size: 1.9em; margin:1em 0 0.5em 0; font-weight: normal; color:#690; }
/*div.tx-loginboxmacmade-pi1-welcome { display: none; }*/