@charset "utf-8";
/* -------------------------------------------------------------------------------

    Project: Saalplan
    Author: Stephan Hinz

    0. General
    1. Colors
    2. Stage & Playground
    3. Categories
    4. Zoom
    5. Map & Minimap
    6. Shopping Basket
    7. Loader

*/



/* ------------------------------------------------------------------------------- */
/*  -1. responsive Helper-Classes
/* ------------------------------------------------------------------------------- */
 .disp-none {
   display:none;
 }

.sl-left-small {
  width: 100%;
  margin: 0px;  /* no room right for legend & zoom fkt */
}

/* ------------------------------------------------------------------------------- */
/*  0. General
/* ------------------------------------------------------------------------------- */
.header {
    margin: 0;
    margin-top: 20px;
    width: 950px;
}

.header h2 {
    color: #ed1c24;
    font-weight: bold;
    font-size: 22px;
}

.saalplan {
    position: relative;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 40px;
    width: 950px;
    border: 1px solid #C0C0C0;
    background-color: #fff;
    font-size: 12px;
    line-height: 16px;
}

/* ------------------------------------------------------------------------------- */
/*  1. Colors
/* ------------------------------------------------------------------------------- */

.sc-special,
.cat-color-special {
    border: 6px solid #C74DE6;
    background: #ffffff;
    fill: #ffffff;
    stroke: #C74DE6;
    stroke-width: 4px; // Der Radius des Kreises ändert sich bei einem RS-Platz, damit dann mit der dickeren Kontur wieder die selbe Groesse rauskommt
}

.sc-red,
.cat-color1 {
    border: 1px solid #c8303c;
    background-color: #ff3f40;
    fill: #ff3f40;
    stroke: #c8303c;
}

.sc-yellow,
.cat-color2 {
    border: 1px solid #d6b81a;
    background-color: #fcd000;
    fill: #fcd000;
    stroke: #d6b81a;
}

.sc-green,
.cat-color3 {
    border: 1px solid #77a14d;
    background-color: #88ce5c;
    fill: #88ce5c;
    stroke: #77a14d;
}

.sc-blue,
.cat-color4 {
    border: 1px solid #4479a3;
    background-color: #4898d7;
    fill: #4898d7;
    stroke: #4479a3;
}

.sc-orange,
.cat-color5 {
    border: 1px solid #ca7c32;
    background-color: #ff902e;
    fill: #ff902e;
    stroke: #ca7c32;
}

.sc-lightblue,
.cat-color6 {
    border: 1px solid #89bbd6;
    background-color: #93d4fc;
    fill: #93d4fc;
    stroke: #89bbd6;
}

.sc-grey,
.seat-notavailable {
    border: 1px solid #c0c0c0;
    background-color: #e4e4e4;
    fill: #e4e4e4;
    stroke: #c0c0c0;
}

/* ------------------------------------------------------------------------------- */
/*  2. Stage & Playground
/* ------------------------------------------------------------------------------- */

#stage {
    z-index: 10;
}

.sl-playground {
    position: relative;
    width: 100%;
    height: 500px;
}

.sl-playground .sl-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 245px;
    height: 100%;
}

.sl-playground .sl-left {
    position: relative;
    overflow: hidden;
    margin-right: 245px;
    height: 100%;
    border-right: 1px solid #c0c0c0;
}

.sl-playground .sl-left .sl-message {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background: url(../images/message-background.png);
}

.sl-playground .sl-left .sl-message .sm-message {
    position: relative;
    top: 50%;
    margin: 0 auto;
    margin-top: -124px;
    padding: 10px;
    width: 366px;
    height: 218px;
    border: 5px solid #c0c0c0;
    background-color: #eee;
}

.sm-message .btn.close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    background: url(../images/sprite.png) -216px 0 no-repeat;
    cursor: pointer;
}

.sm-message .btn.close:hover {
    background-position: -216px -25px;
}

.sm-message .message {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 16px;
}

.sm-message .message.error {
    color: #c40000;
}

.sl-playground .sl-right .sl-zoom {
    width: 100%;
    height: 164px;
    border-bottom: 1px solid #c0c0c0;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#dfdfdf 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#dfdfdf 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#dfdfdf 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */

}

.sl-playground .sl-right .sl-categories {
    width: 100%;
    height: 334px;
    border-top: 1px solid #fff;
    background-color: #eee;
}

/* ------------------------------------------------------------------------------- */
/*  3. Categories
/* ------------------------------------------------------------------------------- */

ul.sm-categories {
    margin: 0 10px;
    padding: 0;
    list-style-type: none;
    opacity: 0;
}

ul.sm-categories li {
    position: relative;
    padding: 10px 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #c0c0c0;;
}

ul.sm-categories li.first {
    border-top: 0;
}

ul.sm-categories li.last {
    border-bottom: 0;
}

ul.sm-categories div.cat-meta {
    float: left;
    width: 90px;
}

ul.sm-categories div.cat-desc {
    float: right;
    width: 125px;
    text-align: right;
}

ul.sm-categories span.circle {
    position: absolute;
    top: 8px;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

ul.sm-categories span.cat-color-special.circle {
    width: 6px !important;
    height: 6px !important;
}

ul.sm-categories span.cat-price {
    margin-left: 30px;
    font-weight: bold;
}

/* ------------------------------------------------------------------------------- */
/*  4. Zoom
/* ------------------------------------------------------------------------------- */

.sm-zoom {
    padding-top: 72px;
    opacity: 0;
}

.sm-zoom .zoom-bar {
    position: relative;
    margin: 0 auto;
    margin-bottom: 15px !important;
    width: 201px;
}

.sm-zoom .amount {
    text-align: center;
    font-weight: bold;
}

.sm-zoom .btn {
    position: absolute;
    top: -7px;
    width: 33px;
    height: 33px;
    cursor: pointer;
}

.sm-zoom .btn.minusZoom {
    left: 0;
    margin: 0;
    background: url(../images/sprite.png) -14px 0 no-repeat;
}

.sm-zoom .btn.minusZoom:hover {
    background-position: -14px -33px;
}

.sm-zoom .btn.plusZoom {
    right: 0;
    margin: 0;
    width: 39px;
    background: url(../images/sprite.png) -47px 0 no-repeat;
}

.sm-zoom .btn.plusZoom:hover {
    background-position: -47px -33px;
}

.sm-zoom .ui-slider-horizontal .ui-slider-handle {
    position: absolute;
    top: -6px;
    z-index: 2;
    margin-left: 0;
    width: 5px;
    height: 32px;
    border: 0;
    border-radius: 4px;
    background-color: #858585;
    background-image: none;
    cursor: pointer;
}

.sm-zoom .ui-slider-horizontal {
    position: relative;
    margin: 0 auto;
    margin-left: 33px;
    width: 130px;
    height: 19px;
    border: 0;
    border-radius: 0;
    background: url(../images/sprite.png) -322px 0 no-repeat;
    text-align: left;
}

/* ------------------------------------------------------------------------------- */
/*  5. Map & Minimap
/* ------------------------------------------------------------------------------- */

.sm-map {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.sm-map circle {
    cursor: pointer;
}

.sm-map circle:hover {
    stroke: #000;
}

.sm-map circle.seat-notavailable:hover {
    stroke: #c0c0c0;
}

.sm-map:active,
.sm-minimap-selection:active {
    cursor: move;
}

.sm-minimap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    max-height: 480px; /* Die Höhe der Map-Darstellungs-Fläche */
    width: 170px;
    border: 10px solid #c0c0c0;
    background-color: #fff;
}

.sm-minimap img {
    width: 100%;
}

.sm-minimap-selection {
    position: absolute;
    top: 0;
    z-index: 3;
    width: 61px; /* entspricht in der Standardbreite der Map einem Verhältnis von 1:10 (inkl. dem Rand) - Default Breite 655px */
    height: 46px; /* entspricht in der Standardbreite der Map einem Verhältnis von 1:10 (inkl. dem Rand) - Default Höhe 500px */
    border: 2px solid #5e6460;
    cursor: pointer;
    background: url(../images/trans.png);
}

/* ------------------------------------------------------------------------------- */
/*  6. Shopping Basket
/* ------------------------------------------------------------------------------- */

.sl-basket {
    width: 100%;
    border-top: 1px solid #c0c0c0;
    background-color: #f9f9f9;
}

.sl-basket li.ticket .trash-btn {
    display: block;
    width: 15px;
    height: 19px;
    background: url(../images/sprite.png) -241px 0 no-repeat;
    cursor: pointer;
}

.sl-basket li.ticket .trash-btn:hover {
    background-position: -241px -19px;
}

.sm-basket {}

.sm-basket .sl-basket-head {
    padding: 10px 20px;
    color: #4b4b4b;
    font-weight: bold;
}

.sm-basket .sl-basket-head #sl-basket-empty {
    margin-left: 20px;
    font-weight: normal;
}

.sm-basket .sm-basket-list {}

.sm-basket .sm-basket-list table.sl-basket-list {
    width: 100%;
}

.sm-basket .sm-basket-list table.sl-basket-list tr {
    border-top: 1px solid #c0c0c0;
}

.sm-basket .sm-basket-list table.sl-basket-list tr#calc-tr {
    display: none;
}

.sm-basket .sm-basket-list table.sl-basket-list tr.ticket td {
    padding: 4px 0;
}

tr.ticket {
    -webkit-transition: background-color .3s ease;
    -moz-transition: background-color .3s ease;
    -ms-transition: background-color .3s ease;
    -o-transition: background-color .3s ease;
    transition: background-color .3s ease;
}

tr.ticket.highlight {
    background-color: #eeeeee;
}

tr.ticket td.unit { }

tr.ticket td.unit div {
    padding: 5px 20px;
    border-right: 1px solid #c0c0c0;
}

tr.ticket td.cat {
    width: 160px;
}

tr.ticket td.cat div {
    padding: 5px 20px;
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #fff;
    font-weight: bold;
}

tr.ticket td.cat div span.circle {
    position: relative;
    top: 2px;
    display: inline-block;
    margin-right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

tr.ticket td.cat span.cat-color-special.circle {
    border-width: 4px !important;
    width: 4px !important;
    height: 4px !important;
}

tr.ticket td.cat-price {
    width: 90px;
}

tr.ticket td.cat-price div {
    padding: 5px 20px;
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #fff;
    text-align: center;
    font-weight: bold;
}

tr.ticket td.reduction {}

tr.ticket td.reduction div {
    padding: 5px 20px;
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #fff;
}

tr.ticket td.reduction form select {
    width: 100%;
    height: 17px;
}

tr.ticket td.trash {
    width: 55px;
}

tr.ticket td.trash div {
    padding: 5px 20px;
    /*border-left: 1px solid #fff;*/
}

tr.ticket td.trash div span.trash-btn {
    display: block;
    width: 15px;
    height: 19px;
    background: url(../images/sprite.png) -241px 0 no-repeat;
    cursor: pointer;
}

tr#calc-tr td#calc-td {
    padding: 0;
    width: 90px;
}

tr#calc-tr td#calc-td div {
    padding: 10px 20px;
    background-color: #dfdfdf;
    text-align: center;
    font-weight: bold;
    border-right: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
}

.sm-basket .sm-basket-list ul.sl-basket-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.sm-basket .sm-basket-list ul.sl-basket-list li.ticket {
    padding: 5px 0;
    border-top: 1px solid #c0c0c0;
}

.sm-basket .sm-basket-list ul.sl-basket-list li.ticket form select {
    width: 200px;
    height: 17px;
}

li.ticket .unit {
    float: left;
    padding: 5px 20px;
    width: 290px;
    border-right: 1px solid #c0c0c0;

}

li.ticket .cat {
    float: left;
    padding: 5px 20px;
    width: 120px;
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #fff;
    font-weight: bold;
}

li.ticket .cat span.circle {
    position: relative;
    top: 2px;
    display: inline-block;
    margin-right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

li.ticket .cat span.cat-color-special.circle {
    border-width: 4px !important;
    width: 4px !important;
    height: 4px !important;
}

li.ticket .cat-price {
    float: left;
    padding: 5px 20px;
    width: 50px;
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #fff;
    text-align: center;
    font-weight: bold;
}

li.ticket .reduction {
    float: left;
    padding: 5px 20px;
    border-right: 1px solid #c0c0c0;
    border-left: 1px solid #fff;
}

li.ticket .trash {
    float: left;
    padding: 5px 20px;
    border-left: 1px solid #fff;
}

li#calc {
    padding: 0;
}

li#calc div {
    position: relative;
    left: 492px;
    padding: 10px 20px;
    width: 53px;
    background-color: #dfdfdf;
    text-align: center;
    font-weight: bold;
}

/* ------------------------------------------------------------------------------- */
/*  7. Loader
/* ------------------------------------------------------------------------------- */

#saalplan-loader {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: url(../images/loader-background.png) ;

}

#saalplan-loader > div {
    position: relative;
    top: 50%;
    margin: 0 auto;
    width: 50%;
}

#saalplan-loader .loader-image {
    margin: 0 auto;
    margin-top: -111px;
    width: 238px;
    height: 223px;
    background: url(../images/loader.gif) no-repeat;
}