/*** main containers ***/
html {
background:transparent url(../pics/body-bg-sw2.gif) 0 0 repeat;
}

body {
width:100%;
float:left;
font-family:Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
cursor:default;
background:transparent url(../pics/carambolage-logo2.png) top right no-repeat fixed;
}

/*** main font style ***/
/*
p, h1, h2, h3 {
color:#777;
background-color:transparent;
}
*/

a {
color:#bd1220;
text-decoration:none;
cursor:pointer;
background-color:transparent;
}

a:hover,
a:focus,
a:active {
color:#000;
}

/*** container ***/
#cornerBg {
position:fixed;
left:0;
top:0;
width:800px;
height:700px;
float:left;
margin:0;
padding:0;
background:transparent url(../pics/logo-gb.gif) 0 0 no-repeat;
z-index:-1;
}

.mainContainer {
position:relative;
top:0;
left:0;
width:980px;
height:auto;
min-height:700px;
float:left;
margin:0;
padding:0;
}

.box {
position:relative;
padding:0;
margin:0 0 10px 0;
width:650px;
background:transparent url(../pics/box-bg.png) 0 0 repeat;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
box-shadow:-4px 4px 10px #000;
-webkit-box-shadow:-4px 4px 10px #000;
-moz-box-shadow:-4px 4px 10px #000;
float:left;
}

.leftContainer {
position:relative;
width:300px;
float:left;
margin:0;
padding:0;
}

/*** logo ***/
.logo {
position:fixed;
top:0;
left:0;
width:370px;
height:auto;
float:left;
margin:0;
padding:0;
z-index:10;
}

.logo img {
font-size:0;
line-height:0;
color:#ccc;
border:none;
outline:none;
}

/*** navigation ***/
.navigationContainer {
position:fixed;
top:250px;
left:10px;
width:270px;
height:1px;
margin:0;
padding:0;
z-index:20;
}

#firstNavContainer {
position:relative;
width:120px;
left:0;
top:0;
margin:0 0 0 0;
padding:0;
float:left;
z-index:5;
font-size:0;
line-height:0;
}

#secondNavContainer {
position:relative;
width:60px;
left:0;
top:0;
padding:0;
margin:0 0 0 0;
float:left;
z-index:5;
font-size:0;
line-height:0;
}

#thirdNavContainer {
position:relative;
width:90px;
left:0;
top:0;
padding:0;
margin:0;
float:left;
z-index:5;
left:30px;
font-size:0;
line-height:0;
}

/*** teaser ***/
.teaserContainer {
margin:0 0 10px 0;
padding:0 0 0 0;
}

.teaser {
position:relative;
margin:0;
width:650px;
padding:5px 0 5px 0;
float:left;
z-index:3;
text-align:center;
}

.teaser h1 {
margin:0;
padding:0;
font-size:2em;
text-transform:uppercase;
color:#000;
font-family:Lucida Grande;
letter-spacing:1px;
line-height:120%;
}

/*** content ***/
#contentContainer {
position:relative;
margin:0;
padding:0;
width:650px;
float:right;
z-index:4;
text-align:center;
}

/*** footer ***/
.footerContainer {
margin-top:40px;
}

#footer {
position:relative;
top:0;
left:0;
margin:0;
padding:5px 0 5px 50px;
width:600px;
float:left;
z-index:4;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
}

#footer p {
font-size:1.3em;
float:left;
padding:2px 4px 0 0;
margin:0;
line-height:120%;
}

#footer a {
font-size:1.3em;
float:left;
padding:2px 0 0 4px;
margin:0;
line-height:120%;
}

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

/*** event ***/
.eventContainer {
padding:10px 0 10px 30px;
width:590px;
float:left;
text-align:left;
}

.monthTitle {
padding:0 0 0 30px;
margin:0;
float:left;
}

.monthHomeTitle {
margin:0 0 25px 0;
}

.monthTitle h2 {
padding:10px 0 5px 0;
margin:0;
float:left;
text-align:left;
font-size:2em;
text-transform:uppercase;
line-height:1em;
}

.eventInfo {
position:relative;
top:0;
left:0;
width:350px;
float:left;
margin:0 0 0 0;
padding:0;
}

.eventInfoRight {
float:right;
}

.eventInfoHome {
width:460px;
}

.eventInfo h2 {
padding:0;
margin:0;
float:left;
text-align:left;
font-size:2em;
text-transform:uppercase;
line-height:1em;
width:100%;
}

.homeBox {
margin:25px 0 25px 0;
}

.eventInfo p {
padding:0;
margin:0;
line-height:1.5em;
width:100%;
float:left;
}

.eventImage {
position:relative;
top:0;
left:0;
width:152px;
float:right;
margin:0 50px 0 20px;
padding:2px;
border-top:1px solid #888;
border-right:1px solid #888;
border-bottom:1px solid #202020;
border-left:1px solid #202020;
background-color:#ccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #bd1220;
box-shadow:-2px 2px 6px #000;
-webkit-box-shadow:-2px 2px 6px #000;
-moz-box-shadow:-2px 2px 6px #000;
}

.eventImageNormal {
margin:0 0 0 20px;
}

.eventImage img {
position:relative;
top:0;
left:0;
float:left;
margin:0;
padding:0;
border:1px solid #000;
background-color:#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}

.lupe {
position:absolute;
left:-5px;
top:-5px;
border:none;
background-color:transparent;
background-color:#fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border:1px solid #bd1220;
box-shadow:-2px 2px 6px #000;
-webkit-box-shadow:-2px 2px 6px #000;
-moz-box-shadow:-2px 2px 6px #000;
}

.lupe img {
position:relative;
border:none;
background-color:transparent;
}

/*** gallery ***/
.imageGallery {
width:650px;
float:left;
}

.imageGallery ul {
width:100%;
float:left;
}

.imageGallery ul li {
position:relative;
top:0;
left:0;
width:92px;
float:left;
margin:0 5px 10px 5px;
padding:2px;
border-top:1px solid #888;
border-right:1px solid #888;
border-bottom:1px solid #202020;
border-left:1px solid #202020;
background:transparent url(../pics/box-bg.png) 0 0 repeat;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow:-4px 4px 10px #000;
-webkit-box-shadow:-4px 4px 10px #000;
-moz-box-shadow:-4px 4px 10px #000;
}

.imageGallery ul li a {
filter:alpha(opacity=80);
opacity: 0.8;
-moz-opacity:0.8;
}

.imageGallery ul li a:hover {
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}

.imageGallery ul li img {
position:relative;
top:0;
left:0;
float:left;
margin:0;
padding:0;
border:1px solid #000;
background-color:transparent;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
font-size:0;
line-height:0;
color:#777;
}

.imageGallery ul li a span {
border:none;
}

.imageGallery ul li.gallerySpacer {
position:relative;
height:0;
width:590px;
float:left;
margin:0;
padding:0;
line-height:0;
fontsize:0;
background-image:none;
background-color:transparent;
border:none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
display:block;
}

.galleryZoom {
left:86px;
}

/*** categories ***/
.categoryContainer {
position:absolute;
top:10px;
left:585px;
width:120px;
height:120px;
float:left;
margin:0;
padding:0;
border:1px solid #bd1220;
background:transparent;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #bd1220;
box-shadow:-2px 2px 6px #000;
-webkit-box-shadow:-2px 2px 6px #000;
-moz-box-shadow:-2px 2px 6px #000;
z-index:8000;
}

.categoryLeft {
left:20px;
top:-40px;
background-color:#fff !important;
}

.freesoese {
background:transparent url(../pics/freesoese.png) 0 0 no-repeat;
z-index:9000;
}

.poker {
background:transparent url(../pics/poker.png) 0 0 no-repeat;
z-index:9000;
}

.special {
background:transparent url(../pics/special.png) 0 0 no-repeat;
z-index:9000;
}

.normalbar {
position:relative;
top:0;
left:0;
float:right;
background:transparent url(../pics/normalbar.png) 0 0 no-repeat;
z-index:9000;
}

.normalbarHomeLeft {
position:absolute;
left:20px;
top:-40px;
background-color:#fff !important;
z-index:9000;
}

.konzert {
background:transparent url(../pics/konzert.png) 0 0 no-repeat;
z-index:9000;
}

.film {
background:transparent url(../pics/film.png) 0 0 no-repeat;
z-index:9000;
}

.brunch {
background:transparent url(../pics/brunch.png) 0 0 no-repeat;
z-index:9000;
}

.poetry {
background:transparent url(../pics/poetry.png) 0 0 no-repeat;
z-index:9000;
}

.kunst {
background:transparent url(../pics/kunst.png) 0 0 no-repeat;
z-index:9000;
}

.spiele {
background:transparent url(../pics/spiele.png) 0 0 no-repeat;
z-index:9000;
}

.geschlossen {
background:transparent url(../pics/closed.png) 0 0 no-repeat;
}

.categoryHome {
position:absolute;
top:-40px;
left:510px;
float:right;
background-color:#fff;
z-index:10000;
}

.categoryContainer span.lupe {
height:13px;
margin:0;
padding:0;
font-size:0;
line-height:0;
z-index:11000;
}

.normalbarHomeLeft span.lupe,
.categoryLeft span.lupe {
height:13px;
margin:0 0 0 111px;
padding:0;
font-size:0;
line-height:0;
z-index:11000;
}

/*** esense link ***/
.esense {
position:absolute;
left:-300px;
top:-125px;
float:left;
}

/*** form ***/
.formContainer {
position:relative;
float:left;
margin:0;
padding:0;
line-height:0;
font-size:0;
display:block;
background-color:#fbfbfb;
border-left:10px solid #fbfbfb;
border-right:10px solid #fbfbfb;
width:450px;
}

.formContainer .columnLeftLarge {
margin:0;
padding:0;
border:0;
width:450px;
}

.formContainer .lineWrapperBoth {
border:none;
margin:0 0 10px 0;
width:450px;
}

.formContainer h2 {
width:450px;
padding:10px 0 0 0px;
}

.formContainer ul,
.formContainer ol {
width:100%;
margin:0;
padding:0;
background-color:#fbfbfb;
float:left;
}

.formContainer ul li,
.formContainer ol li {
background-color:#fbfbfb;
line-height:1.5em;
font-size:12px;
color:#000;
}

.formContainer ul li {
list-style-position:outside;
list-style-type:disc;
margin:0 0 0 15px;
}

.formContainer ol li {
list-style-position:outside;
list-style-type:decimal;
margin:0 0 0 20px;
}

.formContainer form {
z-index:100;
}

.selectContainer {
margin:10px 0 0 0;
}

label {
position:relative;
float:left;
width:100px;
padding:0 0 0 0;
margin:0;
line-height:150%;
font-size:12px;
font-weight:bold;
}

label span,
.selectInput span {
background-color:#fbfbfb;
width:auto;
padding:0 2px 0 2px;
}

.selectInput {
width:330px;
float:right;
padding:0;
margin:0 0 10px 0;
line-height:150%;
font-size:12px;
}

textarea,
.input {
position:relative;
width:330px;
border:none;
background-color:#FBEECB;
padding:0;
margin:0;
line-height:150%;
font-size:12px;
float:right;
}

.input {
margin:0 0 8px 0;
line-height:150%;
font-size:12px;
border-bottom:1px solid #ffba00;
}

.hiddenInput {
position:absolute;
left:-10000px;
height:0px;
line-height:0;
font-size:0;
padding:0;
margin:0;
}

.formInputContainer {
width:100%;
float:left;
}

.radio {
float:left;
margin:0 5px 0 0px;
}

.radio span {
width:auto;
float:left;
}

.formInputContainer .submit {
float:right;
margin:20px 0 20px 0;
cursor:pointer;
}

.radio, .checkbox, .selectInput, option {cursor:pointer;}
.selectInput span {cursor:default;margin:0 20px 0 0;}

.selectInput .formBlock {
position:relative;
width:100%;
float:right;
padding:0;
margin:0;
}

/*** footer ***/

/*** end of css ***/