/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   BASIC ELEMENTS
   
   Colors
   #ff7f00 : orange
   #f9f9f9 : light grey
   #00000 : text
*/

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   GLOBAL RESET : 
   Forces every browser to display HTML elements with the same margins, paddings etc.
   see: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { position: relative; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; margin: 0; padding: 0; outline: 0; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "»" "«"; }
html { font-size:100.01%; }
body { font-size:1em; }

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   CLEARFIX HACK:
   fixes mistakes in displaying floating containers
   see: http://positioniseverything.net/easyclearing.html
*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   INVISIBLE-CLASS
   will hide elements from the screen but will be recognized in screen reader applications
*/
.invisible { position: absolute; left: -1000em; width: 20em; }

a {
  text-decoration: none;
  color: #ff7f00;
}
a:hover {
  color: #df5f00;
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   MAIN ELEMENTS */
html {
  height: 100%;
}
body {
  position: absolute;
  width: 100%; height: 100%;
  padding: 0 0 0 0;

  font-family: Helvetica, Arial, sans-serif;
  color: #000000;

  font-size: 0.625em;
  line-height: 1.6em;
  
  background: #f9f9f9;    
}
* html body {
 /* MSIE 6 */
}

*+html body {
 /* MSIE 7 */
}

#pagecontent {
  position: absolute;
  top: 50%; left: 50%;
  height: 535px; width: 770px;
  margin-top: -265px; margin-left: -385px;
  background: url(../images/bg_homepage.gif) no-repeat;
}
#homepage #pagecontent {
  background: none;
}
#projectoverview #pagecontent {
  background: url(../images/bg_projectoverview.gif) no-repeat;
}
#projectdetails #pagecontent {
  background: url(../images/bg_projectdetails.gif) no-repeat;
}
#content {
  position: absolute;
  top: 225px; left: 510px;
  height: 280px; width: 260px;
  padding: 0 0 0 0;
  overflow: hidden;
}
#homepage #content {
  top: 0; left: 0;
  height: 100%; width: 100%;
}
#projectoverview #content,
#projectdetails #content {
  left: 530px; width: 240px;
}

#content h1 {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff7f00;
  padding: 0 0 10px 20px;
}
#contentscroller {
  position: relative;
  height: 255px; width: 260px;
  overflow: hidden;
}
#projectoverview #contentscroller, #projectdetails #contentscroller { width: 240px; }

#contentscrollertext {
  position: absolute;
  bottom: 0; right: 0;
  height: 255px; width: 235px;
  padding: 0 5px 0 0;
  overflow: auto;
  background: #f9f9f9;
  font-size: 11px;
}
#projectoverview #contentscrollertext, #projectdetails #contentscrollertext { width: 220px; }

#scrollbar {
  position: absolute;
  top: 0; left: 0;
  height: 255px; width: 10px;
}
.scrollbar-vert {
  display: block;
  position: absolute;
  height: 225px;
  overflow: hidden;
  width: 10px;
  margin: 15px 0 0 0;
  padding: 0;
}
.handle-vert {
  display: block;
  height: 6px;
  width: 12px;
  margin: 0;
  border-top: solid #ff7f00 2px;
  border-bottom: solid #ff7f00 2px;
  cursor: pointer;
  /* background: #ff7f00; */
}
#moveup, #movedown {
  position: absolute;
  display: block;
  background: #ff0000;
  width: 10px; height: 10px;
}
#moveup {
  top: 0px; left: 0;
  background: url(../images/scrollup.gif) no-repeat;
}
#movedown {
  bottom: 0px; left: 0;
  background: url(../images/scrolldown.gif) no-repeat;
}

#header {
  position: absolute;
  top: 63px; left: 225px;
  width: 300px; height: 160px;
  overflow: hidden;
  z-index: 60;
}
#projectoverview #header,
#projectdetails #header {
  top: 33px;
  height: 190px;
}
#projectdetails #header {
  width: 430px; left: 95px;
}

#headercontent {
  width: 290px; height: 125px;
  padding: 10px;
  overflow: hidden;
}
#projectoverview #headercontent,
#projectdetails #headercontent {
  background: #ff7f00;
  top: 30px;
  width: 275px; height: 105px;
  font-size: 34px;
  line-height: 36px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
}
#projectdetails #headercontent {
  width: 405px;
}
#projectdetails #headercontent #projectnavi {
  position: absolute;
  top: 80px; left: 325px;
  width: 80px; height: 36px;
  font-size: 46px;
  text-align: right;
}
#projectdetails #headercontent #projectnavi a {
  color: #ffffff;
}

#header #backbutton {
  position: absolute;
  display: block;
  top: 0; left: 0;
  width: 295px; height: 20px;
  text-align: right;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}
#projectdetails #header #backbutton {
  width: 425px;
}

#header ul {
  position: absolute;
  bottom: 5px; left: 0;
  text-align: right;
  width: 300px; height: 15px;
  overflow: hidden;
}
#header ul li {
  display: inline;
  padding: 0 4px 0 0;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}
#header ul li a {
  padding: 0 0 0 6px;
  color: #000000;
}
#projectoverview #header ul li a,
#projectdetails #header ul li a,
#projectoverview #header ul,
#projectdetails #header ul {
  color: #ff7f00;
}
#projectdetails #header ul {
  width: 430px;
}
#header ul li a:hover, #header ul li.current a { color: #ff7f00; }
#projectoverview #header ul li a:hover, #projectoverview #header ul li.current a,
#projectdetails #header ul li a:hover, #projectdetails #header ul li.current a { color: #000000; }

#header ul li:before { content: "\002f" }
#header ul li:first-child:before { content: "\0020" }

#header ul#thumbnails li:before { content: ""; }
#header ul#thumbnails {
  width: 425px;
}
#bgmenu_buecher,
#bgmenu_vogel,
#bgmenu_zettel,
#bgmenu_person,
#bgmenu_vkarten,
#bgmenu_laptop,
#bgmenu_fenster,
#bgmenu_projektor{
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: 500px 0;
}
#bgmenu_buecher:hover,
#bgmenu_vogel:hover,
#bgmenu_zettel:hover,
#bgmenu_person:hover,
#bgmenu_vkarten:hover,
#bgmenu_laptop:hover,
#bgmenu_fenster:hover,
#bgmenu_projektor:hover,
#bgmenu_buecher.bgmenu_highlight,
#bgmenu_vogel.bgmenu_highlight,
#bgmenu_zettel.bgmenu_highlight,
#bgmenu_person.bgmenu_highlight,
#bgmenu_vkarten.bgmenu_highlight,
#bgmenu_laptop.bgmenu_highlight,
#bgmenu_fenster.bgmenu_highlight,
#bgmenu_projektor.bgmenu_highlight,
body.bgmenu_buecher #bgmenu_buecher,
body.bgmenu_vogel #bgmenu_vogel,
body.bgmenu_zettel #bgmenu_zettel,
body.bgmenu_person #bgmenu_person,
body.bgmenu_vkarten #bgmenu_vkarten,
body.bgmenu_laptop #bgmenu_laptop,
body.bgmenu_fenster #bgmenu_fenster,
body.bgmenu_projektor #bgmenu_projektor {
  background-position: 0 0;
}
#bgmenu_buecher { left: 173px; top: 7px;   width: 305px; height: 56px; background-image: url(../images/menu_buecher.gif); }
#bgmenu_vogel   { left: 421px; top: 158px; width: 57px;  height: 57px;  background-image: url(../images/menu_vogel.gif); }
#bgmenu_zettel  { left: 10px;  top: 300px; width: 119px; height: 76px;  background-image: url(../images/menu_zettel.gif); }
#bgmenu_person  { left: 210px; top: 239px; width: 139px; height: 158px; background-image: url(../images/menu_person.gif); }
#bgmenu_vkarten { left: 10px;  top: 397px; width: 63px;  height: 70px;  background-image: url(../images/menu_vkarten.gif); }
#bgmenu_laptop  { left: 129px; top: 416px; width: 123px; height: 82px;  background-image: url(../images/menu_laptop.gif); }
#bgmenu_fenster { left: 692px; top: 130px; width: 73px;  height: 110px; background-image: url(../images/menu_fenster.gif); }
#bgmenu_projektor { left: 348px; top: 316px; width: 111px;  height: 150px; background-image: url(../images/menu_projektor.gif); }

#homebutton {
  position: absolute;
  bottom: 0px; left: 550px;
  display: none;
}
#projectoverview #homebutton,
#projectdetails #homebutton {
  display: block;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
}


#homepage #header,
#homepage #bgmenu_news,
#homepage #bgmenu_bio,
#homepage #bgmenu_text,
#homepage #bgmenu_projekte,
#homepage #bgmenu_kontakt {
  display: none;
}

#homepage #silkeopitz {
  margin: 11px 0 0 73px
}

#projectoverview #imagemap a span {
  display: none;
}
#projectoverview h1 {
  color: #000000;
}

#imagemap {
  position: absolute;
  display: block;
  top: 170px; left: -29px;
  overflow: hidden;
  z-index: 50;
}

#slideshowContainer {
  position: absolute;
  top: 230px; left: 95px;
  height: 265px; width: 425px;
  overflow: hidden;
  float: right;
/*
  background: #000000;
  border: 5px solid #000000;
*/
}

#slideshowContainerText {
  display: block;
  position:absolute;
  bottom: 0; left: 95px;
  width: 420px; 
  text-align:right;
  font-size: 1.1em;
}
#projectdetails #header ul li a.outline {
  color: #000000;
}

#tooltiplayer {
  position: absolute;
  background: #ff7f00;
  padding: 2px 10px 2px 10px;
  z-index: 80;
  
  font-weight: bold;
  text-transform: uppercase;
  color: #000000;
  font-size: 11px;
  
  filter:alpha(opacity=90);
  -moz-opacity:.90;
  opacity:.90;
}

#projects_clip {
  filter:alpha(opacity=90);
  -moz-opacity:.90;
  opacity:.90;
  position: absolute;
  top: -28px; left: -12px;
}