/* ****************************************************************************

                                CSS DOCUMENT
				
		       (c) 2007 zechendorf e.solutions
		           http://www.zechendorf.de

**************************************************************************** */




/* ****************************************************************************
  
                               MAIN ELEMENTS

**************************************************************************** */

html {
}

body {
  height: 100%;
  margin: 0 0 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #CCC;
  background: url(images/bg_body.gif) fixed repeat-x #000;
}

a:link, a:visited {
  color: #CCC;
  font-weight: bold;
  text-decoration: underline;
}

a:hover {
  color: #FFF;
  text-decoration: none;
}


h1, h1 a:link, h1 a:visited, h1 a:active{
  margin:10px 0 36px 0;
  color: #ccc;
  font-size: 20px;
  text-decoration: none;
  line-height: 1.2em;
}

h1 a:hover{
  text-decoration: underline;
  color: #fff;
}

h2 {
  margin: 0 0 0 0;
  color: #ccc;
  font-size: 10px;
}

h2 a:link, h2 a:visited, h2 a:active{
  color: #ccc;
}

h2 a:hover{
  color: #fff;
}

h3{
  font-size: 14px;
}

h3 a:link, h3 a:visited, h3 a:active{
  color: #d3d3d3;
  text-decoration: none;
}

h3 a:hover{
  text-decoration: underline;
  color: #fff;
}

/* ****************************************************************************

                         DEFAULT CONTAINER ELEMENTS

**************************************************************************** */

#container{
  /* contains the site and the ornament  on the left */
  width: 760px;
  margin: auto;
}

#top{
  width: 100%;
  height: 45px;
  background: url(images/bg_top.gif) bottom repeat-x;
}

#top_left{
  height: 45px;
  width: 15px;
  float: left;
  background: url(images/bg_top_left.gif) bottom left no-repeat;
}

#top_right{
  height: 45px;
  width: 15px;
  float: right;
  background: url(images/bg_top_right.gif) bottom right no-repeat;
}

#header{
  /* header element on top of the page */
  background: #000;
  padding: 10px 25px 0px 25px;
}

#header_left{
  float:left;
  width: 85px;
  height: 85px;
  background: url(images/bg_logo.gif) top left no-repeat;
}

#header_right{
  float:right;
}

#content{
  /* content element in the middle of the page */
  background: #000;
  padding: 25px;
  line-height: 1.5em;
}

#content img{
  padding: 2px;
  float: right;
  clear: right;
  border: 1px solid #666;
  margin: 0px 0px 5px 5px;;
}

#content img.left{
  float: left;
  clear: left;
  margin: 0px 35px 5px 0px;
}

#footer{
  /* content element at the bottom of the page */
  clear: both;
  margin-top: 50px;
  background: #000;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
  line-height: 16px;
  font-size: 10px;
  height: 16px;
  color: #666;
}

#footer a:link, #footer a:visited{
  color: #999;
}

#footer a:hover{
  color: #ccc;
}

#footer_left{
  float: left;
}

#footer_right{
  float: right;
}

.content_area{
  /* defines the width of written content */
}

.content_left{
  float:left;
  width: 468px;
}

.content_middle{
  width: 468px;
  margin: auto;
}

.content_middle ul li{
  margin-bottom: 9px;
}

.content_right{
  float:right;
  width: 200px;
  height: 100px;
  background: #111;
  border: 1px solid #222;
}

.clear{
  clear:both;
  height: 0px;
}

.left{
  float:left;
}
.right{
  float:right;
}

/* ****************************************************************************

                           DEFAULT NAVIGATION ELEMENTS

**************************************************************************** */

ul.nav_horiz{
  padding: 0; 
  margin: 0;
  list-style-type: none; 

}

ul.nav_horiz li {
  float:left; 
  margin-right:1px; 
  position:relative;
}

ul.nav_horiz  li a, ul.nav_horiz  li a:visited{
  display: block; 
  text-decoration: none;
  text-align: center; 
  color: #000;
  line-height: 20px; 
  font-size: 10px; 
  overflow: hidden;
}

ul.nav_horiz  li a:hover{
  text-decoration: underline;
}

/* ****************************************************************************

                            SITE SPECIFIC DEFINITIONS

**************************************************************************** */

ul.nav_horiz li a{
  height: 83px;
  margin-left: 36px;
  background: url('images/bg_nav.gif') top left no-repeat #000;
}



ul.nav_horiz li.filme a, ul.nav_horiz li.filme a:visited, ul.nav_horiz li.filme a:active{
  background-position: -517px 23px;
  width: 43px;
}
ul.nav_horiz li.filme a:hover{
  background-position: -12px 23px;
}


ul.nav_horiz li.ueber a, ul.nav_horiz li.ueber a:visited, ul.nav_horiz li.ueber a:active{
  background-position: -580px 23px;
  width: 68px;
}
ul.nav_horiz li.ueber a:hover{
  background-position: -75px 23px;
}


ul.nav_horiz li.kunden a, ul.nav_horiz li.kunden a:visited, ul.nav_horiz li.kunden a:active{
  background-position: -670px 23px;
  width: 59px;
}
ul.nav_horiz li.kunden a:hover{
  background-position: -165px 23px;
}


ul.nav_horiz li.produktion a, ul.nav_horiz li.produktion a:visited, ul.nav_horiz li.produktion a:active{
  background-position: -749px 23px;
  width: 81px;
}
ul.nav_horiz li.produktion a:hover{
  background-position: -244px 23px;
}


ul.nav_horiz li.awards a, ul.nav_horiz li.awards a:visited, ul.nav_horiz li.awards a:active{
  background-position: -850px 23px;
  width: 57px;
}
ul.nav_horiz li.awards a:hover{
  background-position: -345px 23px;
}


ul.nav_horiz li.aktuelles a, ul.nav_horiz li.aktuelles a:visited, ul.nav_horiz li.aktuelles a:active{
  background-position: -927px 23px;
  width: 71px;
}
ul.nav_horiz li.aktuelles a:hover{
  background-position: -422px 23px;
}

#header_separator{
  clear: both;
  padding: 0px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  font-size: 10px;
  line-height: 16px;
  color: #999;
  text-align: center;
  height: 16px;
}


#header_separator_inner{
  /* seperating line between content and header */
  height: 8px;
  width: 192px;
  background: url(images/bg_header_separator_inner.gif) left no-repeat#fff;
}

#subfooter{
  /* where the logo is contained */
  text-align: center;
}

#subfooter img{
  /* where the logo is contained */
  border: 0;
}


.movielist {
  clear: both;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  font-size: 14px; 
  margin-bottom: 10px; 
}


ul.movies{
  position: relative;
  height: 100px;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.movies li{
  float:left;
  width: 60px;
  height: 80px;
  overflow: hidden;
  color: #fff;
}

ul.movies li a:link, ul.movies li a:visited, ul.movies li a:active{
  padding-top: 60px;
  line-height: 1.2em;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  overflow: hidden;
  display: block;
  height: 0px;
  width: 60px;
  position: absolute;
  background: url('images/bg_film_hachez.jpg') top left no-repeat;
}

ul.movies li a:hover{
  color: #fff; 
  height: 60px;
  padding-top: 70px;
  width: 180px;
  width: 300px;
  background-position:0px -60px;
}


ul.movies li.mov0 a:link, ul.movies li.mov0 a:visited, ul.movies li.mov0 a:active{
  left: 0px;
}

ul.movies li.mov1 a:link, ul.movies li.mov1 a:visited, ul.movies li.mov1 a:active{
  left: 60px;
}

ul.movies li.mov2 a:link, ul.movies li.mov2 a:visited, ul.movies li.mov2 a:active{
  left: 120px;
}

ul.movies li.mov3 a:link, ul.movies li.mov3 a:visited, ul.movies li.mov3 a:active{
  left: 180px;
}

ul.movies li.mov4 a:link, ul.movies li.mov4 a:visited, ul.movies li.mov4 a:active{
  left: 240px;
}

ul.movies li.mov5 a:link, ul.movies li.mov5 a:visited, ul.movies li.mov5 a:active{
  left: 300px;
}

ul.movies li.mov6 a:link, ul.movies li.mov6 a:visited, ul.movies li.mov6 a:active{
  left: 360px;
}

ul.movies li.mov7 a:link, ul.movies li.mov7 a:visited, ul.movies li.mov7 a:active{
  left: 420px;
}

ul.movies li.mov8 a:link, ul.movies li.mov8 a:visited, ul.movies li.mov8 a:active{
  left: 480px;
}

ul.movies li.mov9 a:link, ul.movies li.mov9 a:visited, ul.movies li.mov9 a:active{
  left: 540px;
}

ul.movies li.mov10 a:link, ul.movies li.mov10 a:visited, ul.movies li.mov10 a:active{
  left: 600px;
}


ul.movies li#hachez a:link, ul.movies li#hachez a:visited, ul.movies li#hachez a:active{
  width: 60px;
  position: absolute;
  left: 0px;
  background: url('images/bg_film_hachez.jpg') top left no-repeat;
}

ul.movies li#hachez a:hover{
  background-position:0px -60px;
  width: 300px;
}

ul.movies li#lloyd a:link, ul.movies li#lloyd a:visited, ul.movies li#lloyd a:active{
  width: 60px;
  position: absolute;
  left: 60px;
  background: url('images/bg_film_lloyd.jpg') top left no-repeat;
}

ul.movies li#lloyd a:hover{
  background-position:0px -60px;
  width: 300px;
}

ul.movies li#abeking a:link, ul.movies li#abeking a:visited, ul.movies li#abeking a:active{
  width: 60px;
  position: absolute;
  left: 120px;
  background: url('images/bg_film_abeking.jpg') top left no-repeat;
}

ul.movies li#abeking a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#ebs a:link, ul.movies li#ebs a:visited, ul.movies li#ebs a:active{
  width: 60px;
  position: absolute;
  left: 180px;
  background: url('images/bg_film_ebs.jpg') top left no-repeat;
}

ul.movies li#ebs a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#telenergie a:link, ul.movies li#telenergie a:visited, ul.movies li#telenergie a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 240px;
  background: url('images/bg_film_telenergie.jpg') top left no-repeat;
}

ul.movies li#telenergie a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#comlux a:link, ul.movies li#comlux a:visited, ul.movies li#comlux a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 300px;
  background: url('images/bg_film_comlux.jpg') top left no-repeat;
}

ul.movies li#comlux a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#weber a:link, ul.movies li#weber a:visited, ul.movies li#weber a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 360px;
  background: url('images/bg_film_weber.jpg') top left no-repeat;
}

ul.movies li#weber a:hover{
  background-position:0px -60px;
  width: 300px;
}


ul.movies li#bundb a:link, ul.movies li#bundb a:visited, ul.movies li#bundb a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 420px;
  background: url('images/bg_film_bundb.jpg') top left no-repeat;
}

ul.movies li#bundb a:hover{
  background-position:0px -60px;
  width: 300px;
}




ul.movies li#sam a:link, ul.movies li#sam a:visited, ul.movies li#sam a:active{
  width: 60px;
  position: absolute;
  left: 0px;
  background: url('images/bg_film_sam.jpg') top left no-repeat;
}

ul.movies li#sam a:hover{
  background-position:0px -60px;
  width: 300px;
}

ul.movies li#airbusd a:link, ul.movies li#airbusd a:visited, ul.movies li#airbusd a:active{
  width: 60px;
  position: absolute;
  left: 60px;
  background: url('images/bg_film_airbusd.jpg') top left no-repeat;
}
ul.movies li#airbusd a:hover{
  background-position:0px -60px;
  width: 300px;
}

ul.movies li#frese_und_wolff a:link, ul.movies li#frese_und_wolff a:visited, ul.movies li#frese_und_wolff a:active{
  width: 60px;
  position: absolute;
  left: 120px;
  background: url('images/bg_film_frese_und_wolff.jpg') top left no-repeat;
}

ul.movies li#frese_und_wolff a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#beluga_endeavour a:link, ul.movies li#beluga_endeavour a:visited, ul.movies li#beluga_endeavour a:active{
  width: 60px;
  position: absolute;
  left: 180px;
  background: url('images/bg_film_beluga_endeavour.jpg') top left no-repeat;
}

ul.movies li#beluga_endeavour a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#werder a:link, ul.movies li#werder a:visited, ul.movies li#werder a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 240px;
  background: url('images/bg_film_werder.jpg') top left no-repeat;
}

ul.movies li#werder a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#dgzrs a:link, ul.movies li#dgzrs a:visited, ul.movies li#dgzrs a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 300px;
  width: 60px;
  background: url('images/bg_film_dgzrs.jpg') top left no-repeat;
}

ul.movies li#dgzrs a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#sail2005 a:link, ul.movies li#sail2005 a:visited, ul.movies li#sail2005 a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 360px;
  background: url('images/bg_film_sail2005.jpg') top left no-repeat;
}

ul.movies li#sail2005 a:hover{
  background-position:0px -60px;
  width: 300px;
}


ul.movies li#km_europa_metal a:link, ul.movies li#km_europa_metal a:visited, ul.movies li#km_europa_metal a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 420px;
  background: url('images/bg_film_km_europa_metal.jpg') top left no-repeat;
}

ul.movies li#km_europa_metal a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#asss_imageclip a:link, ul.movies li#asss_imageclip a:visited, ul.movies li#asss_imageclip a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 480px;
  background: url('images/bg_film_asss_imageclip.jpg') top left no-repeat;
}

ul.movies li#asss_imageclip a:hover{
  background-position:0px -60px;
  width: 240px;
}

ul.movies li#rohlig a:link, ul.movies li#rohlig a:visited, ul.movies li#rohlig a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 480px;
  background: url('images/bg_film_rohlig.jpg') top left no-repeat;
}

ul.movies li#rohlig a:hover{
  background-position:0px -60px;
  width: 240px;
}



ul.movies li#forschen a:link, ul.movies li#forschen a:visited, ul.movies li#forschen a:active{
  width: 60px;
  position: absolute;
  left: 0px;
  background: url('images/bg_film_forschen.jpg') top left no-repeat;
}

ul.movies li#forschen a:hover{
  background-position:0px -60px;
  width: 300px;
}

ul.movies li#creep_forming a:link, ul.movies li#creep_forming a:visited, ul.movies li#creep_forming a:active{
  width: 60px;
  position: absolute;
  left: 60px;
  background: url('images/bg_film_creep_forming.jpg') top left no-repeat;
}

ul.movies li#creep_forming a:hover{
  background-position:0px -60px;
  width: 300px;
}

ul.movies li#digital_mockup a:link, ul.movies li#digital_mockup a:visited, ul.movies li#digital_mockup a:active{
  width: 60px;
  position: absolute;
  left: 60px;
  background: url('images/bg_film_digital_mockup.jpg') top left no-repeat;
}

ul.movies li#digital_mockup a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#making_of_a380 a:link, ul.movies li#making_of_a380 a:visited, ul.movies li#making_of_a380 a:active{
  width: 60px;
  position: absolute;
  left: 120px;
  background: url('images/bg_film_making_of_a380.jpg') top left no-repeat;
}

ul.movies li#making_of_a380 a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#phaenomen a:link, ul.movies li#phaenomen a:visited, ul.movies li#phaenomen a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 180px;
  background: url('images/bg_film_phaenomen.jpg') top left no-repeat;
}

ul.movies li#phaenomen a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#tsi a:link, ul.movies li#tsi a:visited, ul.movies li#tsi a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 240px;
  background: url('images/bg_film_tsi.jpg') top left no-repeat;
}

ul.movies li#tsi a:hover{
  background-position:0px -60px;
  width: 300px;
}



ul.movies li#lackierhalle a:link, ul.movies li#lackierhalle a:visited, ul.movies li#lackierhalle a:active{
  width: 60px;
  position: absolute;
  z-index: 102;
  left: 300px;
  background: url('images/bg_film_lackierhalle.jpg') top left no-repeat;
}

ul.movies li#lackierhalle a:hover{
  background-position:0px -60px;
  width: 300px;
}


ul.movies li#bmw a:link, ul.movies li#bmw a:visited, ul.movies li#bmw a:active{
  width: 60px;
  position: absolute;
  left: 0px;
  background: url('images/bg_film_bmw.jpg') top left no-repeat;
}

ul.movies li#bmw a:hover{
  background-position:0px -60px;
  width: 300px;
}