/* Basic Stylesheet
   Author: Jesus Ortiz 
   Email: ortiz@cosmocode.de
   ----------------------------------------------------*/

body {
    background: #ddd;
}

#wrapper {
    margin: 0 auto;
    padding: 0;
    width: 888px;
    font-family: "Trebuchet MS", verdana, sans-serif; 
}

pre.debug {
    font-size: 1.4em;
    margin: 0 0 10px;
    padding: 20px;
    background: #fff;
}

/* =Header
   ----------------------------------------------------*/

#menu {
	margin-top: 35px;
}

#menu li {
    float: left;
    font-size: 40px;
    font-weight: bolder;
    text-transform: uppercase;
    margin-right: 20px;
    letter-spacing: -2px;
}

#menu li a {
    color: #fff;
    display: block;
    padding: 0px 6px 0px 4px;
    padding: 0;
    background: #000;
    text-indent: -9999px;
}

#menu li a.admin {
    text-indent: 0;
    padding: 4px;
    margin-top: 2px;
}

#menu li a.blue {
    background-image:url(../images/menu/play.png);
    width: 93px;
}

#menu li.selected a.blue,
#menu li:hover a.blue,
#menu li.hover a.blue {
    color: #47C1FD;
    background-image:url(../images/menu/playh.png);
}

#menu li a.red {
    background-image:url(../images/menu/party.png);
    width: 116px;
}

#menu li.selected a.red,
#menu li:hover a.red,
#menu li.hover a.red{
    color: #F5001A;
    background-image:url(../images/menu/partyh.png);
}

#menu li a.green {
    background-image:url(../images/menu/pictures.png);
    width: 170px;
}

#menu li.selected a.green,
#menu li:hover a.green,
#menu li.hover a.green {
    color: #30BB42;
    background-image:url(../images/menu/picturesh.png);
}

#menu li a.yellow {
    background-image:url(../images/menu/cream.png);
    width: 126px;
}

#menu li.selected a.yellow,
#menu li:hover a.yellow,
#menu li.hover a.yellow {
    color: #FCFF35;
    background-image:url(../images/menu/creamh.png);
}

#menu li a.pink {
    background-image:url(../images/menu/chipps.png);
    width: 126px;
}

#menu li.selected a.pink,
#menu li:hover a.pink,
#menu li.hover a.pink {
    color: #F50079;
    background-image:url(../images/menu/chippsh.png);
}

#menu li a.purple {
    background-image:url(../images/menu/reserve.png);
    width: 157px;
}

#menu li.selected a.purple,
#menu li:hover a.purple,
#menu li.hover a.purple {
    color: #590096;
    background-image:url(../images/menu/reserveh.png);
}

#menu li.last {
	margin-right: 0px;
}

/* =Content
   ----------------------------------------------------*/

#content {
    margin-top: 20px;
    min-height: 400px;
    text-transform: uppercase;
    letter-spacing: -1px;
    position: relative;
    width: 888px;
}

h1, h2, p {
}

span {
    color: #fff;
    margin: 0 0 25px;
    padding: 12px 10px;
    display: inline-block;
    background: #000;
    font-weight: bolder;
    line-height: 1.1em;
}

h1 span {
    font-size: 72px;
}

h2 span {
    font-size: 48px;
}

p span {
    font-size: 25px;
    letter-spacing: 0px;
}

p.strange span {
    background-color:#E4EAE6;
    color:#000000;
    font-size:15px;
    font-weight:bold;
    letter-spacing:-2;
    padding:3px;
}

p.invitation span{
    font-size: 22px;
    margin: 0;
}

p.invitation span strong{
    color: #F5001A;
}

#teaser {
    float: left;
}

#slide_gallery2 {
    top: 0px;
    right: 0px;
    position: absolute;
    z-index: -1;
}

#slide_gallery {
    top: 245px;
    right: 0px;
    position: absolute;
    z-index: -1;
}

#slide_gallery2 .background,
#slide_gallery .background {
    background: #fff;
    height: 240px;
    position: absolute;
    top: 0px;
    width: 320px;
    z-index: -1;
}

.gallery_item {
    width: 175px;
}

#playground {
    background: #fff;
    height: 550px;
    width: 888px;
    display: block;
    position: relative;
    margin-top: 20px;
}

select,
input {
    font-weight: bold;
    font-family: helvetica, arial, sans-serif;
    width: 240px;
    height: 24px;
    padding: 3px 5px;
    float: left;
    border: 2px solid #000;
    margin-right: 10px;
    margin-top: 10px;
}

#name, #to {
    border: 1px solid #000;
    padding: 4px 5px;
}

#tellafriend {
    position: relative;
}

#tellafriend span {
    position: absolute;
    background: #fff;
    color: #F5001A;
    padding: 3px;
    margin: 0 0 0 2px;
    letter-spacing: 1px;
}

#tellafriend span.email {
    left: 264px;
}

.button {
    background: #000;
    color: #fff;
    font-weight: bolder;
    font-size: 20px;
    width: 255px;
    height: 34px;
    padding: 2px;
    cursor: pointer;
    text-transform: uppercase;
}

.buttons a.button {
    margin: 10px 10px 0 0;
    padding: 10px 20px; 
    height: 18px;
    text-align: center;
    width: 240px;
}

.buttons a.button:hover {
    color: #47C1FD;
}

#tellafriend .checkbox {
    border: 1px solid #000;
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
    height: 24px;
    padding: 4px 5px;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    background: #fff;
    width: 240px;
    cursor: pointer;
}

#tellafriend .checkbox span {
    position: static;
    border: 3px solid #000;
    height: 17px;
    width: 17px;
    display: block;
    float: left;
    padding: 0;
    overflow: visible;
}

#tellafriend .checkbox span b {
    display: none;
}

#tellafriend .checkbox span.checked b {
    color: #000;
    display: block;
    font-size: 2.5em;
    line-height: 0.6em;
    padding: 0 0 0 1px;
}

#tellafriend .checkbox p {
    text-transform: uppercase;
    color: #777777;
    float: left;
    font-size: 1.3em;
    margin: 5px 0 0 10px;
    letter-spacing: normal;
}

ul.gallery li {
    float: left;
    margin-right: 22px;
    margin-bottom: 35px;
    height: 180px;
    overflow: hidden;
}

img.gallery_item {
    width: 155px;
    height: 180px;
}

span.caption {
    width: 184px;
    letter-spacing: 0px;
    font-size: 12px;
    line-height: 14px;
    padding: 6px 8px;
}

.hidden {
    display: none;
}

.margin {
    margin: 10px;
}

.success h3 span,
.success p span {
    letter-spacing: 1px;
    font-size: 15px;
}

.success a#again {
    color: #F50079;
    letter-spacing: 1px;
    font-size: 16px;
    padding: 5px;
}

.success a#again:hover {
    color: #47C1FD;
}

#admin_gallery {
    background: #fff;
    border: 3px solid #000;
    letter-spacing: normal;
    padding: 15px 20px;
}

#admin_gallery div.published,
#admin_gallery div.unpublished,
#admin_gallery div.trash {
    float: left;
    width: 33%;
}

#admin_gallery h2 {
    margin: 0 0 15px;
    padding: 0 20px;
}

#admin_gallery h3 {
    margin: 0 0 5px;
}

#admin_gallery ul {
    margin: 15px 0;
    padding: 0 20px;
}

#admin_gallery ul li {
    margin: 0 0 15px;
}

#admin_gallery .galleryimage {
    border: 1px solid #000;
    margin: 0 15px 0 0;
    position: relative;
    float: left;
}

#admin_gallery .galleryimage .alt {
    position: absolute;
    bottom: 1px;
    right: 2px;
    display: none;
}

#admin_gallery ul li p {
    font-size: 1.2em;
    line-height: 1.5em;
}
#admin_gallery ul li p b {
    font-weight: bold;
}

#admin_gallery div.published a.publish,
#admin_gallery div.trash a.trash {
    display: none;
}


#admin_gallery p.empty {
    text-align: center;
}

#imprint {
    font-size: 1.3em;
    line-height: 1.4em;
    width: 270px;
    padding: 55px;
}

a.imprint:hover span {
    color: #F50079;
}

/* =Footer
   ----------------------------------------------------*/

#footer {
    height: 60px;
    margin-top: 10px;
    bottom: 0;
    display: block;
    position: relative;
    width: 888px;
}

#footer .imprint span {
    float: left;
    font-size: 1em;
    text-transform: uppercase;
    margin: 0;
    padding: 8px 6px;
    margin-top: 10px;
}

#logo {
    position: absolute;
    bottom: 10px;
    right: 0;
}


/* =Extras
   ----------------------------------------------------*/

/* default close button positioned on upper right corner */
.apple_overlay {
    display:none;
    background-image:url(../images/overlay/white2.png);
    /* 
        height is automatically calculated
    */
    width:490px;        
    padding:40px;
    font-size:11px;
}

.apple_overlay .close {
    background-image:url(../images/overlay/close2.png);
    position:absolute; right:5px; top:5px;
    cursor:pointer;
    height:35px;
    width:35px;
}

#reservation-overlay {
    background-image:url(../images/overlay/booking.png);
}

#OT_searchWrapperAll {
    display: none;
}

#reservation-overlay dd,
#reservation-overlay dt {
    text-align: left;
    width: 75px;
    top: 35px;
}

#OT_partySize {
    left: 75px;
}

#OT_dateLbl {
    left:150px;
}

#OT_date {
    left:215px;
}

#OT_time {
    left:395px;
}

#OT_partySize select {
    width: 55px;
    height: 32px;
}

#OT_time select {
    width: 80px;
    height: 32px;
}

#reservation-overlay #OT_submitWrap {
    left:350px;
    top:95px;
}

#reservation-overlay #OT_submitWrap input {
    width: 114px;
    height: 21px;
    border: 0;
}

#OT_searchWrapper #dateDisplay {
    float: none;
}

#reservation-overlay select,
#reservation-overlay input {
    background: white;
}

#OT_partySizeLbl {

}
#OT_searchWrapper #startDate, #OT_searchWrapper .OT_feedFormfieldCalendar  {
    margin: 2px;
}

.blurClass {
    color: #777;
    font-weight: bold;
    text-transform: uppercase;
}

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

/* clearfix */
  .clearfix:after{
      content:".";
      display:block;
      height:0;
      clear:both;
      visibility:hidden;
  }
       
  /* WinIE7 only */
  *:first-child+html .clearfix{
      height:1%;
  }
       
  /* WinIE6 and below */
  /*¥*/
  * html .clearfix{
      height:1%;
  }
  /**/
       
  /* MacIE only */
  /*¥*//*/
  .clearfix{
      display:inline-table;
  }
      /**/


/* monthly special styles for main page... ... */

.special {
    background: #000;
    width: 550px;
}

.special h1 span {
    color: yellow;
    font-size: 40px;
    margin-bottom: 0px;
} 
.special p span {
    font-size: 18px;
} 

.special p span  {
    font-size: 18px;
} 

.special p span strong  {
    font-size: 36px;
    line-height: 65px;
    color: #F500F6;
} 

.special p span strong.others  {
    font-size: 18px;
    line-height: 22px;
} 

.flyer {
    width: 195px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: transparent;
    padding: 6px 6px 0px 6px;
}

.flyer span {
    letter-spacing: 0px;
    margin: 0px 0px 10px;
    padding: 2px;
    background-color: #fff;
    display: block;
    color: #333;
}

.flyer h2 span strong {
    font-size: 19px;
    text-align: justify;
}

.flyer h2 span {
    font-size: 14px;
}

.flyer p span {
    font-size: 14px;
}

.flyer h1 span {
    font-size: 22px;
    color: yellow;
}

.flyer p span strong {
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
}

.flyer p span strong.others {
    font-size: 12px;
    line-height: 14px;
}

.flyer p span.price {
    font-size: 11px;
}

.flyer p span.location {
    font-size: 11px;
    background: none;
    text-transform: none;
}