/**
 * Stylesheet fuer das Gewinnspiel 2010 der Deutschen Fliese
 *
 * seitenblick interaktive medien gmbh
 * Koenigstrasse 16, 70173 Stuttgart
 * fon: 0711/8599818-0
 * fax: 0711/8599818-40
 * e-Mail: info@seitenblick.de
 */

/******************************************************************************/
/*--- Allgemeine Definitionen ------------------------------------------------*/
/******************************************************************************/
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 {
  border: none;
  color: #333;
  margin: 0;
  padding: 0;
  text-decoration: none;
  vertical-align: baseline;
}

html {
  overflow-y: scroll;
}

body {
  background: #000;
  font-family: Trebuchet, Arial, Verdana, Sans-Serif;
  font-size: 100.01%;
  line-height: 1.5;
}

h2 {
  color: #fff;
  font-size: 0.875em;
}

a {
  color: #FFCC11;
  font-weight: bold;
  text-decoration: none;
}

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

img {
  border: none;
}

ul, ol {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}

/******************************************************************************/
/*--- Helperklassen ----------------------------------------------------------*/
/******************************************************************************/
.c {
  clear: both;
}

.l {
  float: left;
}

.r {
  float: right;
}

.x {
  display: none;
}

.y {
 clear: both;
 font-size: 0.001em;
}

.last {
  margin: 0 !important;
}

.inv {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0px;
  height: 0px;
  overflow: hidden;
  margin-bottom: -0.2em;
  display: inline;
}

.img_spacer {
  float: left;
  width: 100%;
  height: 25px;
}

/******************************************************************************/
/*--- Layout -----------------------------------------------------------------*/
/******************************************************************************/

#wrapper {
  background: #0f0f0f;
  margin:1.5em auto;
  width: 925px;
  border: solid #292929 1px;
}

/*--- Header -----------------------------------------------------------------*/
#header {
  position: relative;
  font-size: 0.7em;
  width: 880px;
  margin-left: 20px;
  line-height: 1.0em;
}

#logo_neu {
  margin: 0 0 20px 0;
  width: 920px;
  text-align: right;
}

/*--- Navigation -------------------------------------------------------------*/
ul#navi {
  margin: 0 20px 0 39px; 
}

ul#navi li {
  float: left;
  margin: 0 10px 0 0;
}

ul#navi li.navipunkte {
  height: 70px;
  overflow: hidden;
}

ul#navi li.navipunkte img {
  margin-top: -74px;
}

ul#navi li.navipunkte img:hover {
  margin-top: 0px;
}

ul#navi li.navipunkte.act img {
  margin-top: 0px;
}

#main {
  margin: 0 20px 0 23px;
  height: 440px;
}

#main_gallery {
  margin: 0 20px 0 23px;
}

/*--- Hauptbereich -----------------------------------------------------------*/
/* Der allg. Hintergrund */
#main.lottery,
#main_gallery.lottery {
  border-color: #fff;
  border-style: solid;
  border-width: 3px 3px 4px 3px;
  position: relative;
  width: 874px;
}

#main.lottery {
  background: #101010 url('/i/bg_inhaltsbereich_big.jpg') top left repeat-x;
  height: 730px;
  /* 533 u ohne big */
}

#main_gallery.lottery {
  background: #101010 url('/i/bg_inhaltsbereich_big.jpg') top left repeat-x;
  height: 820px;
}

#main.lottery_intro,
#main_gallery.lottery_intro {
  height: 533px;
  padding: 0 1px 0 0px;
  position: relative;
  width: 872px;
}

#main #flashmenu,
#main_gallery #flashmenu {
  margin-left: -2px;
}

/* Eigentlicher Inhaltsbereich */
#lottery_content {
  left: 180px;
  position: absolute;
  top: 188px;
}

#lottery_content p {
  color: #fff;
  font-size:0.8125em;
  margin: 0 0 5px 0;
}

#lottery_content .scroll-pane {
  color: #fff;  
  font-family: Arial, sans-serif;
  padding-right: 10px;
}

#lottery_content .scroll-pane .kicker {
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 1.25em;
  font-weight: bold;
}

#lottery_content .scroll-pane h1 {
  color: #ffd332;
  font-family: Arial, sans-serif;
  font-size: 1.75em;
}

#lottery_content .scroll-pane p {
  color: #fff;
} 

#lottery_content .scroll-pane p strong {
  color: #fff;
}

#ducks {
  bottom: 0;
  right: 0;
  position: absolute;  
}

#Bad {
  bottom: 0;
  right: 0;
  position: absolute;  
/*  float: right;
  padding-right: 40px; */
}

#chap {
 width: 450px;
}

/*--- Footer -----------------------------------------------------------------*/
#footer {
  height:30px;
  width:920px;
}

#footer_left { 
  color: #fff;
  width: 400px;
  margin: 10px 20px 10px 20px;
  float:left;
  font-size: 0.625em;
}

#footer_left ul {
  font-size: 0.625em;
}

#footer_left li {
  color: #ccc;
  margin-right: 20px;
}

#footer_left .login {
  color: #ffd331;
}

#footer_right {
  width: 430px;
  margin: 10px 20px 10px 20px;
  text-align: right;
  float: right;
}

#footer_right a, #footer_left a {
  color: #ccc;
}

#footer_right a:hover, #footer_left a:hover {
  text-decoration: underline;
}

#footer_right ul {
  font-size: 0.625em;
  float: right;
}

#footer_right li {
  color: #ccc;
  float: left;
  margin-left: 20px;
}

/******************************************************************************/
/*--- ANPASSUNG EINZELNER SEITENTYPEN ----------------------------------------*/
/******************************************************************************/

/******************************************************************************/
/*--- Startseite -------------------------------------------------------------*/
/******************************************************************************/
h1#headline_home {
  background: url('/i/headline_gewinnspiel_ende_2011.png') top left no-repeat;
  display: block;
  height: 120px;
  margin-bottom: 30px;
  width: 435px;
}

/******************************************************************************/
/*--- Spielregeln ------------------------------------------------------------*/
/******************************************************************************/
h1#headline_spielregeln {
  background: url('/i/headline_spielregeln.png') top left no-repeat;
  display: block;
  height: 44px;
  width: 159px;
}

/******************************************************************************/
/*--- Datenschutz ------------------------------------------------------------*/
/******************************************************************************/
h1#headline_datenschutz {
  background: url('/i/headline_datenschutz.png') top left no-repeat;
  display: block;
  height: 40px;
  width: 181px;
}

/******************************************************************************/
/*--- Galerie ----------------------------------------------------------------*/
/******************************************************************************/
/* Der Inhaltsbereich ist hier breiter */
#lottery_content.gallery {
  width: 647px;
}

/* Die Ueberschrift */
h1#headline_gallery {
  background: url('/i/headline_gallery.png') top left no-repeat;
  display: block;
  height: 68px;
  margin: 0px 0 10px 0;
  width: 620px;
}

h1#headline_gallery_end {
  background: url('/i/headline_gallery_end.png') top left no-repeat;
  display: block;
  height: 68px;
  margin: 0px 0 10px 0;
  width: 620px;
}

/* Wrapper mit den einzelnen Teilnehmern */
#lottery_content #image_wrapper {
  margin: 23px 0 0 0;
}

/* Ein einzelner Teilnehmer*/
#lottery_content .gallery_item {
  background-color: #fff;
  float: left;
  padding: 3px;
  margin: 0 29px 0 0;
  width: 100px;
}

#lottery_content .gallery_item .rang {
  margin: 0;
}

#lottery_content .gallery_item  .place,
#lottery_content .gallery_item  .date {
  color: #666;
}

/* Die Navagationsleite der Bildergallery */
#gallery_navigation {
  background-color: #BDCACC;
  border: 1px #fff solid;
  padding: 2px;
  margin: 14px 1px 0 0;
}

#gallery_navigation a {
  float: left;}

#gallery_navigation .forward {
  background: url("/i/btn_forward.gif") top left no-repeat;
  float: left;
  height: 24px;
  width: 86px;
}

#gallery_navigation .forward:hover {
  background: url("/i/btn_forward.gif") bottom left no-repeat;
  float: left;
  height: 24px;
  width: 86px;
}

#gallery_navigation .back {
  background: url("/i/btn_back.gif") top left no-repeat;
  float: right;
  height: 24px;
  width: 86px;
}

#gallery_navigation .back:hover {
  background: url("/i/btn_back.gif") bottom left no-repeat;
  float: right;
  height: 24px;
  width: 86px;
}

#gallery_navigation #labeloderby {
  float:left;
  display: block;
  margin: 6px 16px 0 75px;
}

/* Rangfolge Button */ 
#gallery_navigation #rangfolgebutton {
  background: url("/i/btn_rangfolge.png") bottom left no-repeat;
  border: none;
  height: 24px;
  margin: 0 55px 0 4px;
  width: 85px;
}

#gallery_navigation #rangfolgebutton:hover {
  background: url("/i/btn_rangfolge.png") top left no-repeat;
}

#gallery_navigation #rangfolgebutton.act {
  background: url("/i/btn_rangfolge.png") top left no-repeat;
}

/* Einstellungsdatum Button */
#gallery_navigation #orderbydatebutton {
  background: url("/i/btn_orderby_date.png") bottom left no-repeat;
  border: none;
  height: 24px;
  margin: 0;
  width: 111px;
}

#gallery_navigation #orderbydatebutton:hover {
  background: url("/i/btn_orderby_date.png") top left no-repeat;
}

#gallery_navigation #orderbydatebutton.act {
  background: url("/i/btn_orderby_date.png") top left no-repeat;
}

/* Lightboxeffekt in der Gallery */
#lbwrapper.hochformat {
  left: 100px;
  top: 25px;
}

#lbwrapper.querformat {
  margin: 0 auto;
  left: 228px;
  margin-top: 0;
  top: 0;
}

/* Alle Detailansichten sind zuerst ausgeblendet */
.galleryitemdetail {
  display: none;
}

#lightbox.hochformat {
  padding: 10px;
  height: 100%;
  position: relative;
  width: 100%;
}

#lightbox.querformat {
  padding: 10px;
  height: 513px;
  position: relative;
  width: 400px;
}

/* Detailbild */
#lightbox .detailbild {
  float: left;
  margin: 0 20px 0 0;
}

#lightbox .detailbild.quer {
  display: block;
  float: none;
  margin: 0 auto 10px auto !important;
}

#lightbox .gallerycontent {
  clear: both;
  color: #666;
  float: none;
  font-size: 0.875em;
  line-height: 1.25em;
}
/* Der Rechte Inhaltsbereich beim Hochformat */
#lightbox .gallerycontent_right {
  float: right;
  font-size: 0.875em;
  width: 270px;
}

/* Zwischenueberschriften */
#lightbox.hochformat h3,
#lightbox.querformat h3 {
  color: #803C2C;
  font-size: 1em;
}

#lightbox.hochformat h3.rank,
#lightbox.querformat h3.rank {
  float: left;
}

#lightbox.hochformat h3.owner {margin: 62px 0 0 0;}
#lightbox.querformat h3.owner {margin: 4px 0 0 0;}

#lightbox.hochformat h3.desciption { margin: 18px 0 0 0;}
#lightbox.querformat h3.desciption { margin: 6px 0 0 0;}

#lightbox.hochformat span.date,
#lightbox.querformat span.date {
  color: #803C2C;
  font-size: 1em;
  font-weight: bold;
}


/* Button: Close */
.closebutton.hochformat {
  bottom: 20px;
  right: 187px !important;
  margin: 0 !important;
  position: absolute;
}

.closebutton.querformat {
  bottom: 20px;
  left: 15px;
  margin: 0 !important;
  position: absolute;
}


#lightbox .votebutton {
  background: url("/i/btn_select.gif") bottom left no-repeat;
  border: none;
  bottom: 20px;
  right: 20px;
  height: 29px;
  margin: 0 !important;
  position: absolute;
  width: 100px;
}

#lightbox .votebutton:hover {
  background: url("/i/btn_select.gif") top left no-repeat;
}
/******************************************************************************/
/*--- Formulare --------------------------------------------------------------*/
/******************************************************************************/

/*--- Pseudo Lightbox bei den Formularen -------------------------------------*/

/* Der transparente Hintergrund bei den Formularen */
#dimmer {
  background: #fff;
  display: none;
  height: 100%;
  opacity: 0.6;
    /* for IE */
  filter:alpha(opacity= 60);
  -moz-opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  
  z-index: 100;  
}

/* Lightboxwrapper */
#lbwrapper {
  display: none;
  margin: 13px auto;
  position: absolute;
  top: 60px;
  left: 239px;
  z-index: 1002;
}

/* Die eigentliche "lightbox" */
#lightbox {
  background: #fff;
  float: left;
  font-size: 0.875em;
  height: 443px;
  padding: 10px 20px 10px 20px;
  width: 328px;
}

#lightbox #lb_close {  background: #fff;
  cursor: pointer;
  font-weight: bold;
  height: 18px;
  position: absolute;
  top: 0px;
  left: 95%;
  text-align: center;
  width: 18px;
}

#lightbox .kicker {
  color: #666666;
  font-size: 1.125em;
  font-weight: bold;
  line-height: 1.125em;
}

#lightbox h1 {
  color: #6c1e0b;
  font-size: 1.125em;
  margin-bottom: 20px;
}

#lightbox .headline {  margin-bottom: 10px;
}

#lightbox .headline + p {
  color: #7a7a7a;
  font-size: 0.875em;
  margin-bottom: 10px;
}

#lightbox .errormsg {
  font-size: 0.875em;
  float: right;
  color: #803C2C;
  width: 235px;
}

#lightbox p.registervorspan {
  font-size: 0.875em;
  margin: 0 0 10px 0;
}

#lightbox form {
  float: left;
  font-size: 0.875em;
}

#lightbox form label {
  clear: both;
  color: #7a7a7a;
  float: left;
  height: 14px;
  margin-bottom: 5px;
  padding-right: 5px;
  text-align: right;
  width: 90px;
}

#lightbox form input.txt {
  border: 1px solid #8c8c8c;
  float: left;
  font-size: 0.875em;
  height: 13px;
  margin-bottom: 5px;
  width: 228px;
}

#lightbox form .hint {
  color: #7a7a7a;
  float: left;
  font-size: 0.75em;
  margin: 0  0 5px 95px;
  width: 230px;
}

#lightbox form .spacer {
  float: left;
  width: 100%;
  margin-top: -3px;
}

#lightbox #vote_pwwarning,
#lightbox #pwwarning {
  color: #f00;
  font-size: 0.75em;
}


#lightbox form input.checkbox {
  float: left;
  margin: 5px 10px 0 0;
  width: 10px;
}

#lightbox form .checkboxtext {
  color: #7a7a7a;
  float: left;
  font-size: 0.75em;
  margin-top: 2px;
  width: 300px;
}

#lightbox .buttonfield {
  bottom: 20px;
  clear: both;
  padding: 10px 0 0 0;
  position: absolute;
  width: 100%;
}

#lightbox .cancelbutton {
  background: url("/i/btn_cancel.gif") bottom left no-repeat;
  border: none;
  height: 29px;
  margin: 0 !important;
  width: 83px;
}

#lightbox .cancelbutton:hover {
  background: url("/i/btn_cancel.gif") top left no-repeat;
}

/* Bild Hochladen*/
#register {
  display: none;
}

#lightbox .registerbutton {
  background: url("/i/btn_registrate.gif") bottom left no-repeat;
  border: none;
  height: 29px;
  margin: 0 0 0 143px !important;
  width: 95px;
}

#lightbox .registerbutton:hover {
  background: url("/i/btn_registrate.gif") top left no-repeat;
}

#lightbox .uploadbutton {
  background: url("/i/btn_pic_upload.gif") bottom left no-repeat;
  border: none;
  height: 29px;
  margin: 0 0 0 125px !important;
  width: 113px;
}

#lightbox .uploadbutton:hover {
  background: url("/i/btn_pic_upload.gif") top left no-repeat;
}

/* Das Formular fuer den Upload des Bildes hat ein paar Aenderungen */
#lightbox form#upload label {
  text-align: left;
  width: 100%;
}

#lightbox form#upload input {
  margin-bottom: 20px;
}

#lightbox form#upload textarea {
  border: 1px solid #000;
  height: 150px;
  width: 200px;
}

#lightbox form#upload .hint {
  width: 100%;
}

#lightbox #prograssbar {
  margin: 40px 0 30px 0;
}

#lightbox #thx_message {
  color: #7a7a7a;
  font-size: 1.25em;
  margin: 10px 0 0 0;
}

#lightbox .closebutton  {
  background: url("/i/btn_close.gif") bottom left no-repeat;
  border: none;
  height: 29px;
  float: right;
  margin: 0 30px 0 0;
  width: 95px;
}

#lightbox .closebutton:hover {
  background: url("/i/btn_close.gif") top left no-repeat;
}

#lightbox .closeform {
  background: url("/i/btn_close.gif") bottom left no-repeat;
  border: none;
  float: left;
  height: 29px;
  margin: 220px 0 0 230px;
  width: 95px;
}

#lightbox .closeform:hover {
  background: url("/i/btn_close.gif") top left no-repeat;
}

/* Groesenanpassungen fuer das Login*/ 
#lbwrapper.login {
  left: 269px;
  margin-top: 0;
  top: 92px;
}

#lightbox.login {
  padding: 25px;
  height: 106px;
  position: relative;
  width: 330px;
}

form#loginform {
  float: none;
  margin: 5px 0 0 0;
}


#lightbox #lostpw {
  background: url("/i/btn_lost_pw.gif") bottom left no-repeat;
  border: none;
  float: left;
  height: 29px;
  width: 139px;
}

#lightbox #lostpw:hover {
  background: url("/i/btn_lost_pw.gif") top left no-repeat;
}


#lightbox #loginbutton {
  background: url("/i/btn_login.gif") bottom left no-repeat;
  border: none;
  float: right;
  height: 29px;
  margin: 0 55px 0 0;
  width: 77px;
}

#lightbox .continuebutton:hover {
  background: url("/i/btn_next.gif") top left no-repeat;
}

/* Weiter Button */
#lightbox .continuebutton {
  background: url("/i/btn_next.gif") bottom left no-repeat;
  border: none;
  float: right;
  height: 29px;
  margin: 0 55px 0 0;
  width: 59px;
}

#lightbox .linktologin {
  clear: both;
  color: #7A7A7A;
  font-size: 0.875em;
  padding: 10px 0 0 0;
}

#lightbox .linktologin a {
  font-weight: normal;
}

#lightbox #loginbutton:hover {
  background: url("/i/btn_login.gif") top left no-repeat;
}

#lightbox .marked {
  color: #6C1E0B;
}


#lightbox .sendbutton {
  background: url("/i/btn_send.gif") bottom left no-repeat;
  border: none;
  float: right;
  height: 29px;
  margin: 0 55px 0 0;
  width: 61px;
}

#lightbox .sendbutton:hover {
  background: url("/i/btn_send.gif") top left no-repeat;
}

/* Passwort vergessen */
form#lostpwform {
  margin: 23px 0 20px 0;
}

#lostpw_send form#lostpwform label {
  padding-right: 20px;
  width: 60px;
}

#pwlosttext {
  margin: 7px 0 5px 0;
}