/* CSS: Infinty Club */
* { padding: 0; margin: 0; }
html, body, div, p, h1, h2, h3, ul, ol, span, table, td, form, img, li, select, input, textarea { font-family: 'Oxygen', sans-serif; font-size:100%; color:#56646f; }

/* Allgemeine Einstellungen, CSS Resets */
img { border:0px; }
table { border:0px; border-collapse:collapse; border-spacing:0px; }
td { vertical-align:top; }

html { margin:0; padding:0; height:100%; width: 100%; }
body { margin:0; padding:0; height: 100%; width:100%; background: url(../images/background4.jpg); }

h1 { margin:0; padding:0; position: absolute; right: 20px; top: 47px; }
h2 { margin:0em 0em 0.8em 0em; padding:0; color:#fff; font-family: 'Oxygen', sans-serif; font-size:1.5em; }
h3 { margin:10px 0px 10px 0px; padding:0; font-size:1em; color: #fff; }

p { padding:0; margin:0; }

ol { margin:1em 0 0 30px; padding:0; }
ol li { list-style:decimal; padding:0.1em 0; }
ul { margin:0; padding:0; }
li { margin:0; padding:0.5em 0; text-align:left; list-style:none; color: #fff; }


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

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

i { color: #e41c2f; }


/* Hauptbereich */

div#background { width: 100%; height: 100%; position: fixed; z-index: -1; }
div#background ul#slideshow { display: inline; }
div#background ul#slideshow li { display: inline; }
div#background ul#slideshow li.notdisplayed { display: none; }
div#background ul#slideshow li img { position: absolute; top: 0px; }
div#main { background: url(../images/background-color.png); width: 100%; margin: auto; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; margin-bottom: -39px; }
div#main.noncolor { background: none; }

/* Inhalt */
div#main div#logo { width: 270px; height:126px; position: absolute; top: 23px; left: 18px; z-index: 999; }
div#main div#navigation { position: absolute; left: 0; top: 160px; z-index: 12500; }
div#main div#navigation a#openClick, div#main div#navigation a#openMouse { float: left; display: block; clear: both; }
div#main div#navigation ul { position: absolute; top: 31px; }
div#main div#navigation ul, div#main div#navigation a#closeClick { display: none; }
div#main div#navigation ul li { margin: 0px 0px 7px 0px; padding: 0px 12px 0px 0px; float: left; position: relative; }
div#main div#navigation ul li a { font-size: 1.3em; }
div#main div#navigation ul li ul { top: 0px; float: right; }
div#main div#navigation ul li ul li { display: none; margin: 0; padding: 0; position: absolute; }
div#main div#navigation ul li ul li#foto { left: 142px; }
div#main div#navigation ul li ul li#video { left: 240px; }
div#main div#navigation ul li ul li#ueberuns { left: 102px; }
div#main div#navigation ul li ul li#socialmedia { left: 263px; }
div#main div#navigation ul li ul li#kontakt { left: 479px; }

div#main span#backlink { position: absolute; right: 21px; top: 18px; background: url(../images/backlink-arrow.png) no-repeat left; padding-left: 23px; }
div#main #content { width: 820px; overflow: hidden; margin: 158px auto; padding: 9px 0px 0px 0px; background: url(../images/content-background.png) left top no-repeat; font-family: 'Oxygen', sans-serif; }
div#main #content .viewport { width: 800px; height: 678px; overflow: hidden; position: relative; }
div#main #content .overview { list-style: none; position: absolute; left: 0; top: 0; }
div#main #content .thumb .end,
div#main #content .thumb { background: url(../images/scrollbar-item.gif) repeat-y; }
div#main #content .scrollbar { position: relative; float: right; width: 6px; }
div#main #content .track { background: url(../images/scrollbar-track.gif) repeat-y; height: 100%; width:6px; position: relative; }
div#main #content .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
div#main #content .thumb .end { overflow: hidden; height: 5px; width: 13px; }
div#main #content .disable{ display: none; }
div#main div#content img.motiv { float: left; margin: 0px 15px 15px 0px; }
div#main div#content p { color: #ffffff; font-size: 0.85em; display: block; margin-bottom: 1.5em; }
div#main div#content ul.galerie li { float: left; margin: 0px 4px 1px 0px; padding: 0; }
div#main div#content ul.galerie li.last { margin-right: 0px; float: right; }
div#main div#content ul.galerie li a img { border: 2px solid #dcdcdc; }

div#main div#content ul.uebersicht li { width: 312px; float: left; padding: 0px 0px 15px 0px; border-bottom: 1px solid #fff; margin: 0px 154px 13px 0px; }
div#main div#content ul.uebersicht li.last { margin-right: 0px; }
div#main div#content ul.uebersicht li img { float: left; margin-right: 3px; border: 2px solid #dcdcdc; }
div#main div#content ul.uebersicht li div.info { width: 197px; float: left; }
div#main div#content ul.uebersicht li div.info span.datum { width: 197px; height: 24px; padding: 6px 0px 0px 9px; background: url(../images/date-background.png) no-repeat; display: block; color: #93117e; font-weight: bold; margin: 0px 0px 11px 0px; }
div#main div#content ul.uebersicht li div.info span.titel { color: #fff; font-weight: bold; margin: 0px 0px 6px 0px; display: block; font-size: 1em; }
div#main div#content ul.uebersicht li div.info span.dj_feat { color: #a9a9a9; margin: 0px 0px 7px 0px; display: block; }
div#main div#content ul.uebersicht li div.info span.dj { color: #ff001d; }

div#main div#content div.events { position: relative; z-index: 998; }
div#main div#content div.events img.event {  border: 9px solid #dcdcdc; position: absolute; top: 0px; z-index: 501; }
div#main div#content div.events div.image { position: absolute; width: 471px; height: 657px; left: 0px; top: 0px; }
div#main div#content div.events div.image div.info_beschreibung { z-index: 997; display: none; width: 460px; height: 314px; opacity: 0.95; background: #dcdcdc; color: #000000; position: absolute; top: 349px; left: 0px; padding: 3px 9px 0px 11px; font-size: 0.9em; }
div#main div#content div.events div.image div.info_beschreibung p { color: #000000; }
div#main div#content div.events div.image div.info_beschreibung a.tischreservieren { position: absolute; top: 277px; left: 15px; }
div#main div#content div.events ul.uebersicht { margin-left: 498px; }
div#main div#content div.events ul.uebersicht li { margin: 0px 0px 13px 0px; }

div#footer { width: 799px; height: 39px; background: url(../images/footer-information.png); margin: 0 auto; position: relative; }
div#footer a#facebook { position: absolute; right: 28px; bottom: 8px; }

div.reservierung { border: 4px solid #dcdcdc; height: 655px; width: 799px !important; background:#000 none !important; position: relative; }
div.frei { height: 655px; width: 799px !important; position: relative; background: url(../images/reservierung-uebersicht.jpg) no-repeat;  }
div.silvester { height: 655px; width: 799px !important; position: relative; background: url(../images/infinity_silvester.jpg) no-repeat;  }
div.tisch a, div.tisch span { position: absolute; border: none; }
div.tisch a:hover, div.tisch span { border: none; background: #cc007b; }

div.tisch a.n1, div.tisch span.n1 { width: 15px; height: 43px; top: 583px; left: 474px; }
div.tisch a.n2, div.tisch span.n2 { width: 15px; height: 43px; top: 583px; left: 546px; }
div.tisch a.n3, div.tisch span.n3 { width: 15px; height: 39px; top: 583px; left: 608px; }
div.tisch a.n4, div.tisch span.n4 { width: 15px; height: 39px; top: 583px; left: 669px; }
div.tisch a.n5, div.tisch span.n5 { width: 15px; height: 39px; top: 583px; left: 731px; }

div.tisch a.n6, div.tisch span.n6 { width: 15px; height: 46px; top: 490px; left: 472px; }
div.tisch a.n7, div.tisch span.n7 { width: 15px; height: 46px; top: 490px; left: 550px; }
div.tisch a.n8, div.tisch span.n8 { width: 15px; height: 46px; top: 490px; left: 616px; }

div.tisch a.n9_1, div.tisch span.n9_1 { width: 16px; height: 15px; top: 503px; left: 691px; }
div.tisch a.n9_2, div.tisch span.n9_2 { width: 30px; height: 15px; top: 503px; left: 714px; }

div.tisch a.n10, div.tisch span.n10 { width: 15px; height: 15px; top: 443px; left: 473px; }
div.tisch a.n11, div.tisch span.n11 { width: 15px; height: 15px; top: 443px; left: 552px; }
div.tisch a.n12, div.tisch span.n12 { width: 15px; height: 15px; top: 443px; left: 614px; }
div.tisch a.n13, div.tisch span.n13 { width: 21px; height: 21px; top: 444px; left: 714px; }

div.tisch a.n14, div.tisch span.n14 { width: 15px; height: 15px; top: 266px; left: 409px; }
div.tisch a.n15, div.tisch span.n15 { width: 15px; height: 15px; top: 266px; left: 477px; }
div.tisch a.n17, div.tisch span.n17 { width: 15px; height: 15px; top: 202px; left: 344px; }

div.tisch a.n16, div.tisch span.n16 { width: 15px; height: 29px; top: 211px; left: 406px; }
div.tisch a.n18, div.tisch span.n18 { width: 15px; height: 29px; top: 211px; left: 491px; }

div.tisch a.n19, div.tisch span.n19 { width: 15px; height: 15px; top: 165px; left: 344px; }

div.tisch a.n20, div.tisch span.n20 { width: 15px; height: 29px; top: 155px; left: 405px; }
div.tisch a.n21, div.tisch span.n21 { width: 15px; height: 29px; top: 155px; left: 491px; }

div.tisch a.n22, div.tisch span.n22 { width: 15px; height: 34px; top: 98px; left: 410px; }
div.tisch a.n23, div.tisch span.n23 { width: 15px; height: 30px; top: 98px; left: 477px; }

select.events { position: absolute; right: 20px; top: 15px; } 

div.formular { width: 799px; height: 532px; background: #000 url(../images/reservierung-formular.gif) 10px no-repeat; }
div.formular h1 { width: 348px; height: 30px; background: url(../images/ueberschrift-reservierung.jpg) no-repeat; }
div.formular img.tisch { position: absolute; right: 19px; top: 12px; }
div.formular span.tischinfo { position: absolute; top: 10px; left: 181px; color: #b2b2b2; }
div.formular span.party { position: absolute; top: 50px; left: 10px; color: #ff0018; }
div.formular div.form { padding: 152px 0px 0px 10px; }
div.formular div.form div { float: left; margin-bottom: 17px; }
div.formular div.form div input { width: 240px; height: 31px; padding-left: 2px; border: none; background: url(../images/input-background.gif) repeat-x; }
div.formular div.form div textarea { width: 668px; height: 98px; padding-left: 2px; border: none; background: url(../images/textarea-background.gif) repeat-x; }
div.formular div.form div img, div.formular div.form div input { float: left; } 
div.formular div.form input.submit { position: absolute; top: 416px; left: 10px; width: 203px; border: none; height: 43px; padding: 0; background: url(../images/form-submit.gif) no-repeat; }
div.formular span.errormessage { display: block; width: 600px; height: 10px; position: absolute; right: 0px; bottom: 20px; color: #ff0018; font-weight: bold; text-align: right; }

table.contenttable tr td { padding: 0px 50px 0px 0px !important; }

a.odnos { position: absolute; width: 129px; height: 180px; top: 250px; left: 210px;  z-index: 800; cursor: pointer; }
a.facebook { position: absolute; width: 148px; height: 180px; top: 281px; left: 335px;  z-index: 800; cursor: pointer; }
a.vk { position: absolute; width: 148px; height: 180px; top: 259px; left: 481px;  z-index: 800; cursor: pointer; }

img#mainimage_odnos, img#mainimage_facebook, img#mainimage_vk { display: none; }

div.too_late { display: block; position: absolute; z-index: 800; background: #000 url(../images/background3.jpg) no-repeat; width: 799px; height: 532px; }
div.too_late span { position: absolute; display: block;  top: 250px; left: 130px; color: #ffffff; font-weight: bold; }

div.tischinfo, div.admininfo { position: absolute; top: 226px; left: 10px; width: 228px; height: 189px; border: 2px solid #dcdcdc;  background: #000000; display: none; }
div.tischinfo h3 { margin: 5px 0px 6px 5px; font-weight: normal; font-size: 0.85em; color: #B2B2B2; }
div.tischinfo img { margin: 0px 2px 0px 5px; }

div.landingpage { width: 660px; margin: 160px auto; text-align: center; }
div.landingpage img { border: 9px solid gainsboro; }


/* mobile styles */

/* global styles */
.isMobile {}
.isMobile > div:first-child {min-height: calc(100% - 39px);min-height: 100%;}
.isMobile div#main div#logo {
  height: 75px;
  left: 50%;
  margin: 0 0 0 -75px;
  top: 10px;
  width: 150px;
}
.isMobile div#main div#logo img {
  height: 100%;
  width: 100%;
}
.isMobile div#main div#navigation {top: 100px;}
.isMobile div#main div#navigation ul {left: -15px;}
.isMobile div#main div#navigation ul li ul li#foto {left: 140px;}
.isMobile div#main div#navigation ul li ul li#video {left: 236px;}
.isMobile h1 {
  background-color: #0e0e0e;
  padding: 0 10px 0 25px;
  right: auto;
  top: 98px;
  width: calc(100% - 35px);
}
.isMobile h1 img {max-width: 100%;}
.isMobile div#main #content {
  margin: 131px auto 60px;
  width: 100%;
}






.isMobile div#footer {
  background: #0e0e0e;
  width: 100%;
}
.isMobile div#footer:after {
  color: #fff;
  content: 'Marktstrasse 45 | 30159 Hannover';
  left: 5px;
  position: absolute;
  top: 10px;
}
.isMobile div#footer a#facebook { right: 10px; }

/* home page */
.isMobile div#background ul#slideshow {display: block;}
@media screen and (orientation:portrait) {  
  .isMobile div#background ul#slideshow li img {
    height: 100%;
    width: auto;
    /*max-width: 100%;*/
  }
}  
@media screen and (orientation:landscape) {  
  .isMobile div#background ul#slideshow li img {
    height: auto;
    width: 100%;
  } 
} 

/* events page */
.isMobile div#main span#backlink {display: none;}
.isMobile div#main div#content div.events div.image {
  height: auto;
  margin-bottom: 20px;
  position: static;
  width: 100%;
}
.isMobile div#main div#content div.events img.event {
  height: auto;
  width: calc(100% - 18px);
}
.isMobile div#main #content .scrollbar {display: none;}
.isMobile div#main #content .viewport {
  height: auto;
  width: 100%;
}
.isMobile div#main #content .overview {position: static;}
.isMobile div#main div#content div.events img.event {position: static;}
.isMobile div#main div#content div.events ul.uebersicht { margin: 0;}
.isMobile div#main div#content ul.uebersicht li {width: 100%;}

/* photo page */
.isMobile div#main div#content ul.galerie{text-align: center;}
.isMobile div#main div#content ul.galerie li,
.isMobile div#main div#content ul.galerie li.last {
  display: inline-block;
  float: none;
  margin: 0px 5px 8px 0px;
}

/* video page */
.isMobile .page-videos .tx_kuloplayer_pi1-video,
.isMobile .page-videos .tx_kuloplayer_pi1-video object,
.isMobile .page-videos .tx_kuloplayer_pi1-video object embed {width: 100% !important; height: auto !important;}