@charset "utf-8";
/* CSS Document for www.rock-cafe.lu | Davency Digital Creations - Steve Parrasch - davency.com*/


@font-face {
    font-family: 'CantarellRegular';
    src: url('../font/cantarell-regular-webfont.eot');
    src: url('../font/cantarell-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/cantarell-regular-webfont.woff') format('woff'),
         url('../font/cantarell-regular-webfont.ttf') format('truetype'),
         url('../font/cantarell-regular-webfont.svg#CantarellRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {margin:0; padding:0; border:none;}



body {padding:0; margin:0; font-family:CantarellRegular, Arial, sans-serif;  background-color:#0e0d0d; background:url(../images/rock-cafe-body-background.jpg) no-repeat center center fixed; background-size:cover; width:100%; height:100%; font-size:100%;}

ul {list-style:none;}

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

h2 {color:#fff;}

.seppelH2 {color:#fff; width:100%; text-align:center;}

p {color:#fff;}

#event {overflow:hidden;}

#top {width:100%; max-height:105px; background-color:#FFF; position:fixed !important; z-index:99;}

#logo {width:215px; height:100%; margin-right:20px; float:left; background:url(../images/rock-cafe-logo.png) no-repeat;}

#mainHeader {max-width:1000px; max-height:105px; margin:auto; z-index:+1;}

#navigation {max-width:75%; height:100px; float:right;}

#navigation li {float:left; height:100px;}

#navigation li a {font-size:20px; height:64px; color:#903; text-decoration:none; display:inline-block; padding:40px 10px 0px 10px; text-align:center; border-right:#fff 1px solid;}

#navigation li a:hover {background-color:#af0007; color:#fff;}

#navigation li.current > a {background-color:#af0007; color:#fff;}

.show-on-small {display:none;}

#sliderBox {width:100%; max-height:248px; padding-top:100px; background-color:#000; overflow:hidden; border-bottom:#000 1px solid; border-top:#000 1px solid;}

#sliderBox img {width:100%; height:auto;}

#mainContainer {max-width:1200px; min-height:500px; overflow:auto; margin:auto;  margin-top:1%; padding-bottom:2%; background:#171717 url(../images/main-container-background.png) no-repeat; background-size:100%; z-index:1; }

#mainContainerBackground {width:100%; height:600px; }

#mainContent {width:50%; padding:1%;  float:left; z-index:2;}

#mainContent h1 {font-size:46px; color:#af0007;  font-weight:normal; /*display:inline-block;*/ margin-bottom:4%; background-color:rgba(0, 0, 0, 0.5); padding:2%; }

#mainContent h1 span {font-size:36px; color:#fff; display:inline-block; margin-left:60%;}
  
#mainContent .mainPageImage img {width:95%!important; max-height:350px!important; background-color:rgba(0, 0, 0, 0.5); padding:2%;}

#mainContentLarge {width:98%; padding:1%; z-index:2;}

#mainContentLarge h1 {font-size:46px; color:#af0007; font-weight:normal; display:inline-block; margin-bottom:4%; background-color:rgba(0, 0, 0, 0.5); padding:2%;}

#mainContentLarge h3 {font-size:30px; color:#fff; margin-bottom:1.5%;}

#mainContentLarge h4 {font-size:16px; color:#fff; margin-bottom:1%;}

#sideContent {width:38%; float:right; margin:5% 1% 0% 2%; padding:0 1% 0 1%; z-index:2; background-color:rgba(0, 0, 0, 0.5);}

#sideContent p {line-height:24px;}

.sideBox {width:98%; border-bottom:#333 1px solid; padding:10px 5px 5px 5px; margin-bottom:20px; z-index:999;}

.sideBox h2 {font-size:26px; width:100%; text-align:center; color:#af0007; margin-bottom:20px; font-weight:normal;}

.sideBox img {width:100%; height:auto; }

 

/* live acts & events */

.act {width:50%; max-height:400px!important; margin:auto; margin-top:5%;/*float:left; margin:0% 0% 5% 5%; /*background-color:#000;*/}

.act h3 {background-color:none; color:#fff!important; padding-left:5px;}

.act h4 {margin-left:2%;}

.act img {width:100%; max-height:300px; margin-top:2%}

/* footer */

#footer {width:100%; min-height:170px;  margin-top:10px; background-color:rgba(13, 12, 12, 0.9); text-align:left; padding-top:20px;}

#footerBox {max-width:1200px; height:160px; margin:auto;}

.footerContent {max-width:170px; max-height:120px; margin:1% 5% 0 5%;}

.footerContent h2 {font-size:20px;}

.footerContent p {font-size:14px;}

.footerElement1 {float:left;}

.footerElement2 {float:left;}

.footerElement3 {float:left;}

.footerElement4 {float:left; max-width:100px;}

.clearFix {clear:both;}

/* pic gallery */

.imagecount {display:none;}

#events .item-container {width:25%;}

.eventgallery-ajaxcart-internal {margin-bottom: 20px; padding: 0px;}

.date {display:none;}

/* contact page */

#contactBox {width:100%; height:160px; padding:5% 0 5% 0;  background-color:rgba(0, 0, 0, 0.5);}

.contactBoxAdress {width:25%; float:left; margin:0 0 0 4%;}

.contactBoxOpeningHours {width:25%; float:left; margin:0 0 0 4%;}

.contactBoxInfo {width:36%; float:left; margin:0 0 0 4%;}

.seppel {width:46%; height:auto;margin:auto; margin-top:5%;}

.seppel img {width:100%; height:auto; background-color:rgba(0, 0, 0, 0.5); padding:2%;}

.contactLoginBox {width:46%; min-height:40px; margin:auto; margin-top:5%; padding:2%; background-color:rgba(0, 0, 0, 0.5);}

.contactLoginBox form {width:98%;}

.login-greeting {color:#fff; margin-bottom:2%;}

label {color:#fff;}

form ul.unstyled {display:none;}

#form-login-remember {display:none;}

#form-login-username {display:inline-block; }

#form-login-password {display:inline-block;}

#form-login-submit button[type=submit] {display:inline-block;}

#form-login-username input[type=text]  {color:#fff; background-color:#333333; height:18px;}

#form-login-password input[type=password]  {color:#fff; background-color:#333333; height:18px;}

#form-login-password label {padding-left:4px;}

#form-login-submit .btn {margin-top:3%; display:inline-block;}

#form-login-username input[placeholder] {color:#fff!important;background-color:#333333!important; height:18px;}

#form-login-password input[placeholder] {color:#fff!important;background-color:#333333!important; height:18px;}

/*front-end editor */

.btn-primary, .btn-default, .btn {margin-bottom:1%; margin-right:1%; background-color:rgba(0, 0, 0, 0.5); border:#fff 1px solid; color:#fff; padding-bottom:2px; border-radius: 3px;  -webkit-border-radius: 3px;}

.nav-tabs {display:none;}

.dropdown-toggle {border:none;}

.btn.jmodedit {width:40px !important; height:31px !important; background:url(../images/edit-icon.png) no-repeat; !important; border:none;}

.row-fluid .control-group {display:none;}

#options {display:none;}

.wf_editor_toggle {color:#fff;}

legend {display:none;}

.label-default {display:none;}



/* drinks and food tables */

/*table {background-color:rgba(0, 0, 0, 0.5);}*/

.tableDrinks {width:24%; margin-right:4%; margin-bottom:1%; border-collapse:collapse; float:left; color:#fff;}

.tableDrinks th, tr, td {border-collapse:collapse;}	

.tableDrinks th {text-align:center; font-size:22px;}

.tableDrinks td {font-size:14px;}

.drink {width:66%; text-align:left;}

.price {width:33%; text-align:right;}


.tableCocktails {width:38%; margin-right:4%; border-collapse:collapse; float:left; color:#fff;}

.tableCocktails th, tr, td {border-collapse:collapse;}	

.tableCocktails th {text-align:center; font-size:22px;}

.tableCocktails td {font-size:14px;}

.cocktail {width:38%; text-align:left; background-color:#fff; color:#171717; padding:4px;}

.cocktailPrice {width:10%; text-align:right; background-color:#af0007; padding:4px;}

.cocktailImage img {width:99%; max-height:300px;}

.seperator {width:2%;}


.tableBeers {width:24%; margin-right:4%; margin-bottom:1%; border-collapse:collapse; float:left; color:#fff;}

.tableBeers th, tr, td {border-collapse:collapse;}	

.tableBeers th {text-align:center; font-size:18px;}

.tableBeers td {font-size:14px;}


.tableSofts {width:24%; margin-right:4%; margin-bottom:1%; border-collapse:collapse; float:left; color:#fff;}

.tableSofts th, tr, td {border-collapse:collapse;}	

.tableSofts th {text-align:center; font-size:18px;}

.tableSofts td {font-size:14px;}


.tableWarm {width:24%; margin-right:4%; margin-bottom:1%; border-collapse:collapse; float:left; color:#fff;}

.tableWarm th, tr, td {border-collapse:collapse;}	

.tableWarm th {text-align:center; font-size:18px;}

.tableWarm td  {font-size:14px;}


.tableFood {width:24%; margin-right:4%; margin-bottom:1%; border-collapse:collapse; float:left; color:#fff;}

.tableFood th, tr, td {border-collapse:collapse;}	

.tableFood th {text-align:center; font-size:18px;}

.tableFood td  {font-size:14px;}

/* davency */

#davency {width:100%; margin:auto; text-align:center; line-height:24px; padding:5px 0px 5px 0px;}

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

#davency a:hover {color:#af0007;}

#davency p {color:#fff; font-size:12px;}


/* media queries */

@media screen and (max-width:1065px) {
  
#mainContent h1 span {font-size:36px; color:#fff; display:inline-block; margin-left:40%;}

.tableCocktails {margin-left:5%; width:50%;}
  
.cocktailImage img {width:99%; max-height:240px;}
  
.tableDrinks {margin-bottom:5%; width:35%;}
  
.tableBeers {margin:5% 9.5% 0 10%; width:35%;}
  
.tableSofts {margin:5% 5% 0 0; width:35%;}
  
.tableWarm {margin:5% 5% 0 10%; width:35%; clear:both;}
  
.tableFood {margin:5% 5% 0 5%; width:35%; float:left;}
  
#events .item-container {width:25%!important;}

#events .item-container-big {width:25%;}
  
}

@media screen and (max-width:870px) {
  
#top {top:0px;}
  
#sliderBox {display:none;}
  
#mainContainer {padding-top:12%;}
  
#navigation li {float:left; height:35px; width:32%; margin:10px 2px 0px 0px;}
  
#navigation li a {font-size:20px; height:25px; width:100%; color:#903; padding:5px 0px 5px 10px; text-decoration:none; display:inline-block;  text-align:center; border-right:#fff 1px solid;}
  
}

@media screen and (max-width:790px) {
  
#mainContent h1 {font-size:32px; color:#af0007;  font-weight:normal; margin-bottom:4%; }

#mainContent h1 span {font-size:26px; color:#fff; margin-left:2%;}
  
#mainContentLarge h1 {font-size:32px; color:#af0007;  font-weight:normal; margin-bottom:4%; }
  
#contactBox {height:auto; overflow:auto;}
 
.contactBoxAdress {width:42%; margin-bottom:5%;}
  
.contactBoxOpeningHours {width:42%;}
  
.contactBoxInfo {width:90%; float:none; clear:both; margin:0 0 0 5%;}
  
#events .item-container {width:25%;}

#events .item-container-big {width:25%;}
  
}

@media screen and (max-width:762px) {
  
#Map{width:100%; max-height:200px;}
  
  #RKM {max-height:200px;}
  
.seppelH2 {color:#fff; width:50%; text-align:left; margin:auto;}
  
.seppel {width:50%; height:auto; margin:5% auto;  float:none;}

.contactLoginBox {width:80%; min-height:100px; left:10%;  margin-top:5%;  padding:2%; background-color:#000;}

}

@media screen and (max-width:760px) {
  
    
.show-on-small {display: block; float:right; width:100px; height:41px; margin:30px 20px 0px 0px; z-index:100; background-color:#af0007;  background:url(../images/mobileMenu.png) no-repeat;}
  
a.show-on-small {color:#fff; text-decoration:none;}
  
#navigation {left:-320px; width:280px; z-index:10009; line-height: 1.8; position: absolute; z-index: 9999; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
  
#navigation ul {width:310px;}
  
#navigation li {float:none; margin:0px; height:40px; width:95%;}
  
#navigation li a {font-size:16px; height:40px; background-color:#fff; color:#903; text-decoration:none;  text-align:left; padding: 5px 0px 0px 20px; border:none;}

#navigation li a:hover {background-color:#af0007; color:#fff;}

#navigation li.current > a {background-color:#af0007; color:#fff;}

#navigation.menuIsActive {-webkit-transform: translate3d(310px, 0, 0); -moz-transform: translate3d(310px, 0, 0); transform: translate3d(310px, 0, 0);	     -webkit-overflow-scrolling: touch; }
  
.no-csstransforms3d #navigation.menuIsActive { left: 0; } 
  
#menuToggler .icon { display: inline-block; vertical-align: middle; padding-right: 5px; }
#menuToggler span { display: inline-block; vertical-align: middle; font-weight: 800; font-size: 12px; line-height: 28px; }
#menuToggler a:hover { text-decoration: none; }
  
#sliderBox {display:none;}
  
#mainContainer {padding-top:10%;}
  
#top {top:0px;}
  
.act {width:70%; min-height:400px; float:none; margin:auto; margin-bottom:5%; background-color:#000;}
  
.seppel {width:60%;}
  
}

@media screen and (max-width:720px) {
  
#logo {width:150px; height:68px;}
  
#logo img {width:150px; height:68px;}
  
#top {max-height:70px;}
  
.show-on-small {display: block; float:right; width:100px; height:41px; margin:15px 20px 0px 0px; z-index:100; /*background-color:#af0007;  background:url(../images/mobileMenu.png) no-repeat;*/}
   
#mainContainer {padding-top:16%;}
  
  .tableCocktails {margin-left:20%; width:60%; clear:both;}
  
  .cocktailImage img {width:99%; max-height:240px;}
  
  .tableDrinks { margin:5% 0% 0% 20%; width:60%;}
  
  .tableBeers {margin:5% 0% 0 20%; width:60%; }
  
  .tableSofts {margin:5% 0% 0 20%; width:60%;  }
  
  .tableWarm {margin:5% 0% 0 20%; width:60%;  }
  
  .tableFood {margin:5% 0% 5% 20%; width:60%;   }
  
  #footer {height:auto;  padding-bottom:2%;}
  
  
  #events .item-container {width:30%!important;}
  
 
  
}


@media screen and (max-width:664px) {
  
  #footerBox {height:auto; overflow:auto;  padding-bottom:2%;}
  
  .footerElement1 {margin-left:18%;}
  
  .footerElement2 {display:none;}
 
  .contactLoginBox {width:60%; min-height:100px; margin:5% auto; padding:2%;}
  
  #mainContent .mainPageImage {display:none;}
  
}


@media screen and (max-width:610px) {
  
#mainContainer {padding-top:8%;}
  
#mainContent {width:90%; float:none; margin:13% 0% 0% 5%;}
  
#mainContent h1 span {font-size:24px; color:#fff; display:inline-block; margin-left:50%;}
  
#mainContent p {font-size:14px;}
  
#sideContent {float:none; width:80%; margin:auto; margin-top:4%;}
  
#navigation ul  {width:250px;}
  
#navigation li {float:none; margin:0px; height:50px; width:95%;}
  
#navigation li a {font-size:20px; height:50px; background-color:#fff; color:#903; text-decoration:none;  text-align:left; padding: 5px 0px 0px 20px; border:none;}
  
#footerBox {width:96%; height:auto; overflow:hidden;}
  
}

@media screen and (max-width:490px) {
  
  #contactBox p {font-size:14px;}
  
  #contactBox h2 {font-size:22px;}

}
  
@media screen and (max-width:461px) {

  .footerElement1 {margin-left:5%;}
  
  .seppel {width:80%;}
  
}

@media screen and (max-width:450px) {
 
  
  #mainContainer {padding-top:20%;}
  
  .act {width:95%; min-height:300px; float:none; margin:auto; margin-bottom:5%; background-color:#000;}
  
  .tableCocktails {margin-left:2%; width:96%; float:none;}
  
  .cocktailImage img {width:99%; max-height:240px;}
  
  .tableDrinks { margin:5% 0% 0% 10%!important; width:80%; float:none;}
  
  .tableBeers {margin:5% 0% 0% 10%!important; width:80%; float:none;}
  
  .tableSofts {margin:5% 0% 0% 10%!important; width:80%; float:none;}
  
  .tableWarm {margin:5% 0% 0% 10%!important; width:80%; float:none;}
  
  .tableFood {margin:5% 0% 5% 10%!important; width:80%; float:none;}
  
  .footerElement1 {margin-left:5%;}
  
  .seppelH2 {font-size:18px;}
  
   #events .item-container {width:80%!important;}
  
}

@media screen and (max-width:410px){
  
  .contactBoxAdress {width:50%; clear:both; margin-left:30%;}
  
  .contactBoxOpeningHours {width:50%; margin-left:30%;}
  
  .contactBoxInfo {padding-top:5%;}
  
}





@media screen and (max-width:400px) {
  



















  .footerElement1 {margin:auto; width:80%;}
  

















  .footerElement3 {margin:auto; width:80%;
  
}
/*
#form-login-username {display:inline-block;}  
  
#form-login-password {display:inline-block;}  
  
#form-login-username input[type=text]  {color:#fff; background-color:#c1c1c1; }

#form-login-password input[type=password]  {color:#fff; background-color:#c1c1c1;}

#form-login-submit .btn {margin-top:3%;}

#form-login-username input[placeholder] {color:#fff;}

#form-login-password input[placeholder] {color:#fff;}  

*/