/*  CSS des Plugins. Teils im Admin und im Frontend verwendet */

/* Die Mini-Suche der Schnellbuchung oben im Header */


#tqzzsb-mini-header {
    margin: 10px 0px 10px 0px;
    padding: 10px;
    font-size: 90%;
    background-color: rgba( 255, 255, 255, 0.2 );
}

#tqzzsb-mini-header input,
#tqzzsb-mini-header select,
#tqzzsb-mini-header button {
    font-size: 90% !important;
    height: 28px !important;
    padding: 3px 6px;
}

#tqzzsb-mini-header button {
    width: 100px !important;
}

#tqzzsb-mini-header label {
    display: none;
}

#tqzzsb-mini-header div.form-group {
    margin-bottom: 5px;
}


/* Die Schnellbuchung */

#tqsb-container select option:disabled {
    color: #cccccc !important;
    background-color: #a0a0a0;
}

span.tqzzsb-admindebug {
    font-size: 10px;
    color: #606060;
    display: block;
}

span.tqzzsb-debug-red {
    color: #a00000;
}

span.tqzzsb-debug-green {
    color: #00a000;
}

#tqsb-ort-treffer {
    display: none;
    position: absolute;
    width: 95%;
    z-index: 9999;
    text-align: left;
}

#tqsb-ort2-treffer {
    display: none;
    position: absolute;
    width: 95%;
    z-index: 9999;
    text-align: left;
}

#tqzz_altort1_name-treffer {
    display: none;
    position: absolute;
    width: 95%;
    z-index: 9999;
    text-align: left;
}

#tqzz_altort2_name-treffer {
    display: none;
    position: absolute;
    width: 95%;
    z-index: 9999;
    text-align: left;
}

span.tqsb-hit {
    display: block;
    padding: 2px;
    margin: 1px;
    background-color: #ffe0e0;
    cursor: pointer;
}

span.tqsb-hit-fix {
    background-color: #ffffff;
    color: #008000;
}

span.tqsb-hit-google {
    background-color: #f0f0f0;
    color: #000080;
}

#tqsb-container-wannwo {
    background-color: #f0f0f0;
	padding: 5px;
}

/* Der Container für ein Modell (Name, Bild, Details */
div.sb-modelldatabox {
	font-weight: normal;
    background-color: #80E0FF;
    padding: 5px;
    background-color: rgba( 255, 255, 255, 0.149 );
    min-height: 350px;
}

div.sb-modelldatabox h4 {
    font-size: 100%;
	font-weight: normal;
    text-align: center;
}

div.sb-modelldatabox label {
    font-size: 95%;
	font-weight: normal;
}

/* Die Box mit dem wanted-Modell (Link aus Availiability-Liste) */ 
div.tqzzsb-wantedmodel {
    background-color:rgba( 253, 242, 225, 0.30 );
}

a.smallbutton {
	font-size: 90%;
    padding: 2px;
    width: 100%;
    font-weight: bold;
}

/* Container mit einem Modell, welches markiert ist (Warenkorb ist :-) */
div.tqsb-modell-marked {
    background-color: rgba( 253, 242, 225, 0.5 );
}

#tqsb-container a.btn,
#tqsb-container button.btn {
	width: 300px;
}

#tqsb-container div.sb-modelldatabox a.btn,
#tqsb-container div.sb-modelldatabox button.btn {
	width: 100%;
}

#tqsb-container .btn-default,
#tqsb-container .btn-warning,
#tqsb-container .btn-primary {
	color: #202020;
}

#tqsb-container .btn-primary[name="submit_booknow"] {
	font-weight: bold;
    color: #ffffff;
    background-color: #2060ff;
}

div.tqzzsb-modellbild img {    max-width: 240px;
    display: block;
    margin: 0px auto 0px auto;
}

#tqsb-container-payment div.tqzzsb-modellbild img {
    max-width: 180px;
}

div.tqzzsb-modellprofillink {
	text-align: center;
    font-size: 100%; 
}

div.tqzzsb-modellprofillink a {
	color: #346E80 !important;
}

div.tqsb-modell-marked div.tqzzsb-modellprofillink a {
	color: #ffffff !important;
}

/* Container um Sterne-Deteils */
div.tqzzsb-geschenksterne {
    margin: 5px 0px 5px 0px;
    font-size: 90%;
    text-align: center;
}

div.tqzzsb-geschenksterne span {
    padding: 0px 3px 0px 3px;
}

div.tqzzsb-geschenkkosten {
    margin: 2px 0px 2px 0px;
}

/* Payone ersetzt unsere spans durch iframes in denen es die CC-Daten
   unterbringt, ohne dass diese Bestandteil der Website werden*/
span.tqzzsb-payoneinputiframe {
    display: block;
}

/* Anzeige der Buchungs-Mail auf der Fertig-Seite */
div.buchungsmailanzeige {
    background-color: #333333;
    max-width: 550px;
    padding: 10px;
    margin-top: 10px;
}

div.buchungsmailanzeige td {
    font-weight: 16px;
}

#tqsb-container-creditcard div.text-right img {
    margin: 0px auto 0px auto;
}

@media ( min-width:768px ){
    #tqsb-container-creditcard div.text-right img {
        margin: 0px 0px 0px auto;
    }
}

/****
    Modell-Seite:
    Neue Buttons wie "Anfrage" und "Verfuegbarkeit"-Anzeige CSS-Technisch umsetzen.

    WICHTIG: Es werden zuerst die Definitionen für die schmalste Version gemacht:

             In der sind die Buttons und Aufklappanhänge je 100% breit und untereinander.

             Ab 768px sind die mit begrenzte Breite links

             Ab 992px oben in einer Zeile links, mittig, rechts platziert.

    */

#modell-steckbrief {
	z-index: 1000;
}

.show-profile,
.show-request,
.show-availability {
    position: absolute;
    display: block;
    margin: 0px;
    top: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0.8);
    height: 40px;
    padding: 8px 20px;
    width: 100%;
    text-align: left;
    z-index: 900;
}

.single-tqzz_modell .show-profile {
    top: 50px;
}

.single-tqzz_modell .show-request {
    top: 100px;
}

.single-tqzz_modell .show-availability {
    top: 150px;
}

.single-tqzz_modell #modell-steckbrief {
    top: 90px;
    right: 0px;
    margin: 100px 0 0;
    z-index: 1000;
}

.single-tqzz_modell #modell-availability {
    position:absolute;
    width:100%;
    background-color:rgba(255,255,255,0.85);
    color:#333;
    padding:10px 10px;
    top:190px;
    right:0px;
    margin:100px 0 0;
    z-index: 1000;
    max-height: 450px;
    overflow-y: auto;
}

#modell-availability .table td {
	font-size: 90%;
    padding: 5px;
}

.single-tqzz_modell .show-profile,
.single-tqzz_modell .show-availability,
.single-tqzz_modell .show-request,
.single-tqzz_modell #modell-availability,
.single-tqzz_modell #modell-steckbrief {
    margin: 60px 0px 0px 0px !important;
}

.admin-bar .show-profile,
.admin-bar .show-availability,
.admin-bar .show-request,
.admin-bar #modell-availability,
.admin-bar #modell-steckbrief {
    margin: 106px 0px 0px 0px !important;
}

body.single-tqzz_modell .show-profile,
body.single-tqzz_modell .show-profile:active,
body.single-tqzz_modell .show-profile:focus,
body.single-tqzz_modell .show-availability,
body.single-tqzz_modell .show-availability:active,
body.single-tqzz_modell .show-availability:focus,
body.single-tqzz_modell .show-request,
body.single-tqzz_modell .show-request:active,
body.single-tqzz_modell .show-request:focus {
    text-decoration:none;
    background-color:rgba( 241, 223, 191, 0.80 );
	color: #333;
}

body.single-tqzz_modell .show-profile:hover,
body.single-tqzz_modell .show-availability:hover,
body.single-tqzz_modell .show-request:hover {
    text-decoration: none;
    background-color: rgba( 241, 223, 191, 1.00 );
	color: #333;
}

.show-availability:after {
    content:"Verfügbarkeit verstecken"
}

body.en .show-availability:after {
    content:"hide availability"
}

.show-availability.collapsed:after {
    content:"Verfügbarkeit anzeigen"
}

body.en .show-availability.collapsed:after {
    content:"show availability"
}


@media ( min-width:768px ){

    /* Zweitkleinste Darstellung. Die Buttons bleiben wie in der kleineren Version untereinander platziert,
       aber die Breiten werden begrenzt. */

    .single-tqzz_modell .show-profile {
        width: 340px;
        left: 120px;
        top: 0px;
    }

    .single-tqzz_modell .show-request {
        width: 340px;
        left: 120px;
        top: 50px;
    }

    .single-tqzz_modell .show-availability {
        width: 340px;
        left: 120px;
        top: 100px;
    }

    .single-tqzz_modell #modell-steckbrief {
        width: 340px !important;
        left: 120px;
        top: 40px;
    }

    .single-tqzz_modell #modell-availability {
        overflow-y: auto;
        width: 340px;
        left: 120px;
        top: 140px;
    }

}

@media ( min-width:992px ) {

    /* Zweitbreiteste Variante: Die Buttons werden nun in einer Zeile auf links, mitte und rechts verteilt, aber "Request" ist noch schmal */

    .single-tqzz_modell .show-profile {
        width: 340px;
        left: 30px;
        top: 0px;
    }

    .single-tqzz_modell .show-request {
        width: 160px;
        left: 400px;
        top: 0px;
        text-align: center;
    }

    .single-tqzz_modell .show-availability {
        width: 340px;
        left: auto;
        right: 30px;
        top: 0px;
        text-align: right;
    }

    .single-tqzz_modell #modell-steckbrief {
        width: 340px !important;
        left: 30px;
        top: 40px;
    }

    .single-tqzz_modell #modell-availability {
        overflow-y: auto;
        width: 340px;
        left: auto;
        right: 30px;
        top: 40px;
    }

    .single-tqzz_modell .show-profile,
    .single-tqzz_modell .show-availability,
    .single-tqzz_modell .show-request,
    .single-tqzz_modell #modell-availability,
    .single-tqzz_modell #modell-steckbrief {
        margin: 10px 0px 0px 0px !important;
    }

    .admin-bar .show-profile,
    .admin-bar .show-availability,
    .admin-bar .show-request,
    .admin-bar #modell-availability,
    .admin-bar #modell-steckbrief {
        margin: 10px 0px 0px 0px !important;
    }

}

@media (min-width:1200px){

    /* Volle Breite. Request wird in die Mitte gestellt */

    .single-tqzz_modell .show-request {
        width: 340px;
        left: 415px;
    }

}