/* Buttons fuer das Relaunch-Layout */
/* Buttons sollten im Zweifel immer in dein div.button_container gepackt werden */

/*
Folgende Buttons sind moeglich:
    GROSSE BUTTONS (C2A):
    <s:submit theme="gui" type="submit" cssClass="c2abutton orange" value="weiter" src="arrow-right" />
    <s:submit theme="gui" type="button" cssClass="c2abutton orange" value="weiter" src="arrow-right" /> 
    
    NORMALE / KLEINE BUTTONS:
    <s:submit theme="gui" type="submit" cssClass="button orange" value="Tagungspauschale einfügen" />
    <s:submit theme="gui" type="button" cssClass="button orange" value="Tagungspauschale einfügen" />
    <s:a      theme="gui"               cssClass="button orange" href="#">klick hier</s:a>

    ... + verschiedene Kombinationen mit Icons

    ZURUECK:
    ========
    GROSSE BUTTONS:
    <s:submit theme="gui" type="submit" cssClass="c2abutton back" value="zurück" src="arrow-left" />
    <s:submit theme="gui" type="button" cssClass="c2abutton back" value="zurück" src="arrow-left" />
    <s:a      theme="gui"               cssClass="c2abutton back" href="#">zur&uuml;ck</s:a>
    
    NORMALE / KLEINE BUTTONS:
    <s:submit theme="gui" type="submit" cssClass="button back" value="zurück" src="arrow-left" />
    <s:submit theme="gui" type="button" cssClass="button back" value="zurück" src="arrow-left" />
    <s:a      theme="gui"               cssClass="button back" href="#">zur&uuml;ck</s:a>
    
    
    Details:
    - die css-Klasse button bzw c2aButton bestimmt die Groesse des Buttons
    - css-Klassen fuer Hintergruende: orange, blue, (back)
    - Positionierungs-css-Klassen: die zusätzliche Angabe der Klasse right floatet den Button nach rechts, Standard ist links
    
    
    ACHTUNG !!! 
    Diese Liste ist nicht vollstaendig! Alle erdenklichen Buttons sind auf unserer Testseite ersichtlich
*/

button, input[type="submit"], input[type="button"], a {
    cursor: pointer;
}

.left {
    float: left;
}

.right {
    float: right;
}

/* Container fuer die Buttons */
div.button_container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

div.button_container.abstandOben {
    margin-top: 27px;
}

div.button_container.abstandUnten {
    margin-bottom: 27px;
}

* + div.button_container {
    margin-top: 20px;
}

.formularelement > div.button_container {
    display: inline;    
}

/* Klasse margin kann evtl. weg... pruefen ob die Breitenangabe nicht wg. Browserkomp. war */
div.button_container.margin {
/*     padding: 30px 0 20px 0; */
/*     padding: 10px 0 0 0; */
    width: auto;
/*     border-top: 1px solid #C8C8C8; */
}

/* Buttons */
div.button,
div.c2abutton {
    position: relative;
    text-align: center;
}

/* kleiner Button */
div.button {
    margin: 0 20px 0 0; /* Buttons bekommen margin nach rechts */
}

div.button.right {
    margin: 0 0 0 20px; /* Buttons bekommen margin nach links */
}

/* grosser Button */
div.c2abutton {
    margin: 0 20px 0 0; /* Buttons bekommen margin nach rechts */
}

div.c2abutton.right {
    margin: 0 0 0 20px; /* Buttons bekommen margin nach links */
}

/* Container fuer Button-Icons */
div.button span,
div.c2abutton span {
    cursor:pointer;
    position:absolute;
}

/* weisses Pfeil-Icon nach rechts fuer den kleinen Button */
div.button span.pfeil_rechts,
div.button span.pfeil_rechts_booking,
div.button span.pfeil_rechts_dunkel {
    background: url('../../img/gui/buttons/icon_pfeil_weiter_klein.png') no-repeat;
    width: 9px;
    height: 17px;
    right: 8px;
    top: 6px;
}

/* dunkles Pfeil-Icon nach rechts fuer den kleinen Button */
div.button span.pfeil_rechts_dunkel {
    background: url('../../img/gui/buttons/icon_pfeil_weiter_dunkel_klein.png') no-repeat;
}

/* weisses Pfeil-Icon nach links fuer den kleinen Button */
div.button span.pfeil_links,
div.button span.pfeil_links_dunkel {
    background: url('../../img/gui/buttons/icon_pfeil_zurueck_klein.png') no-repeat;
    width: 9px;
    height: 17px;
    left: 8px;
    top: 6px;
}

/* dunkles Pfeil-Icon nach links fuer den kleinen Button */
div.button span.pfeil_links_dunkel {
    background: url('../../img/gui/buttons/icon_pfeil_zurueck_dunkel_klein.png') no-repeat;
}

/* weisses Plus-Icon nach rechts fuer den kleinen Button */
div.button span.plus_rechts, 
div.button span.plus_links {
    background: url('../../img/gui/buttons/icon_plus.png') no-repeat;
    width: 13px;
    height: 12px;
    right: 8px;
    top: 8px;
}

/* weisses Plus-Icon nach links fuer den kleinen Button */
div.button span.plus_links {
    left: 8px;
}

/* weisses Haekchen nach rechts fuer den kleinen Button */
div.button span.haekchen_rechts, 
div.button span.haekchen_links {
    background: url('../../img/gui/buttons/icon_haken.png') no-repeat;
    width: 13px;
    height: 12px;
    right: 8px;
    top: 8px;
}

/* weisses Haekchen-Icon nach links fuer den kleinen Button */
div.button span.haekchen_links {
    left: 8px;
}

/* weisses Lupe-Icon nach rechts fuer den kleinen Button */
div.button span.lupe_rechts, 
div.button span.lupe_links {
    background: url('../../img/gui/buttons/icon_lupe.png') no-repeat;
    width: 19px;
    height: 20px;
    right: 7px;
    top: 4px;
}

/* weisses Lupe-Icon nach links fuer den kleinen Button */
div.button span.lupe_links {
    left: 7px;
}

/* weisses Karte-Icon nach rechts fuer den kleinen Button */
div.button span.karte_rechts, 
div.button span.karte_links {
    background: url('../../img/gui/buttons/icon_karte.png') no-repeat;
    width: 19px;
    height: 20px;
    right: 4px;
    top: 5px;
}

/* weisses Karte-Icon nach links fuer den kleinen Button */
div.button span.karte_links {
    left: 10px;
}

/* weisses Pfeil-Icon nach rechts fuer den allgemeinen grossen Button */
div.c2abutton span.pfeil_rechts,
div.c2abutton span.pfeil_rechts_dunkel {
    background: url('../../img/gui/buttons/icon_pfeil_weiter.png') no-repeat;
    height: 19px;
    width: 11px;
    right: 24px;
    top: 24px;
}

/* dunkles Pfeil-Icon nach rechts fuer den allgemeinen grossen Button */
div.c2abutton span.pfeil_rechts_dunkel {
    background: url('../../img/gui/buttons/icon_pfeil_weiter_dunkel.png') no-repeat;
}

/* weisses Pfeil-Icon nach links fuer den allgemeinen grossen Button */
div.c2abutton span.pfeil_links,
div.c2abutton span.pfeil_links_dunkel {
    background: url("../../img/gui/buttons/icon_pfeil_zurueck.png") no-repeat;
    height: 19px;
    width: 11px;
    left: 24px;
    top: 24px;
}

/* dunkles Pfeil-Icon nach links fuer den allgemeinen grossen Button */
div.c2abutton span.pfeil_links_dunkel {
    background: url("../../img/gui/buttons/icon_pfeil_zurueck_dunkel.png") no-repeat;
}

/* Lupe-Icon nach rechts fuer den allgemeinen grossen Button */
div.c2abutton span.lupe_rechts {
    background: url('../../img/gui/buttons/icon_lupe.png') no-repeat;
    width: 19px;
    height: 20px;
    right: 24px;
    top: 21px;
}

/* Lupe-Icon nach link fuer den allgemeinen grossen Button */
div.c2abutton span.lupe_links {
    background: url('../../img/gui/buttons/icon_lupe.png') no-repeat;
    width: 19px;
    height: 20px;
    left: 24px;
    top: 21px;
}

/* Pfeil-Icon nach links fuer den back-Button (submit-Tag! a-Tag nutzt Hintergrund-Grafik) */
div.c2abutton.back span.pfeil_links {
    background: url("../../img/gui/buttons/icon_pfeil_zurueck_dunkel.png") no-repeat;
    height: 19px;
    width: 11px;
    left: 0px;
    top: 23px;
}

/* Pfeil-Icon nach links fuer den kleinen back-Button (submit-Tag! a-Tag nutzt Hintergrund-Grafik) */
div.button.back span.pfeil_links {
    background: url("../../img/gui/buttons/icon_pfeil_zurueck_dunkel_klein.png") no-repeat;
    height: 19px;
    width: 11px;
    left: 0px;
    top: 8px;
}

/* x-Icon nach links fuer den back-Button (submit-Tag! a-Tag nutzt Hintergrund-Grafik) */
div.c2abutton.back span.x_links {
    background: url("../../img/gui/buttons/icon_x.png") no-repeat;
    height: 18px;
    width: 18px;
    left: 0px;
    top: 24px;
}

/* x-Icon nach links fuer den kleinen back-Button (submit-Tag! a-Tag nutzt Hintergrund-Grafik) */
div.button.back span.x_links {
    background: url("../../img/gui/buttons/icon_x_klein.png") no-repeat;
    height: 11px;
    width: 11px;
    left: 0px;
    top: 11px;
}

/* grosse Buttons (Typ Button oder Submit) */
div.c2abutton {
    border: 1px solid #A4A4A4;
    border-radius: 5px;
}

div.c2abutton a,
div.c2abutton input[type="button"],
div.c2abutton input[type="submit"] {
    position: relative;
    float: none;
    padding: 0 72px 0 72px;
    height: 57px;
    font: 24px 'OpenSansRegular', Arial, sans-serif;
    color: #fff;
    text-shadow: 0px 1px 2px #515151;
    border: none;
    background: transparent;
    z-index: 6;
    
    display: block; /* fuer IE 7 */
    overflow:visible; /* fuer den IE7, sonst sind die Buttons extrem breit */     
}

div.c2abutton a,
div.c2abutton a:link, 
div.c2abutton a:visited, 
div.c2abutton a:focus, 
div.c2abutton a:hover, 
div.c2abutton a:active {
    font: 24px/60px 'OpenSansRegular', Arial, sans-serif;
    padding: 0 75px 0 75px;
    height: 57px;
    display: block;
    text-decoration: none;
}

/* der zurueck-c2a-Button (input-Tag) muss gesondert gestylt werden */
div.c2abutton.back input[type="submit"],
div.c2abutton.back input[type="button"] {
    color: #999999;
    text-shadow: 0px 1px 2px #c8c8c8;
    border: none;
    border-radius: none;
    padding: 2px 2px 2px 15px;
    height: auto;
    margin: 12px 0 0 0;
}

div.c2abutton.back.cancel input[type="submit"],
div.c2abutton.back.cancel input[type="button"] {
    padding-left: 21px;
}
            
/* der zurueck-c2a-Button (a-Tag) muss gesondert gestylt werden */
div.c2abutton.back {
    border: none;
}

div.c2abutton.back a {
    float:left;
    height: 48px;
    border: none;
    color: #999999;
    font: 24px 'OpenSansRegular', Arial, sans-serif;
    text-shadow: 0px 1px 2px #c8c8c8;
    padding-left: 18px;
    padding-top:15px;
    padding-right:0;
    background: transparent;
}

div.c2abutton.back.cancel a {
    padding-left: 24px;    
}

/* kleine Buttons (Typ Button) */
div.button {
    border: 1px solid #A4A4A4;    
    border-radius: 4px;
}

div.button a,
div.button input[type="button"],
div.button input[type="submit"] {
    float: none;
    margin: 0;
    padding: 0 30px 1px 30px;
    height: 27px;
    font: 14px/20px 'OpenSansRegular', Arial, sans-serif;
    /*     text-indent: 0px; */ /* sollte weg koennen */
    color: #fff;
    text-shadow: 1px 1px 1px #515151;
    border: none;
    box-shadow: none;
    background: transparent;
    z-index: 6;    
    
    overflow:visible; /* fuer den IE7, sonst sind die Buttons extrem breit */
}

div.button a,
div.button a:link, 
div.button a:visited, 
div.button a:focus, 
div.button a:hover, 
div.button a:active {
    font: 14px/27px 'OpenSansRegular', Arial, sans-serif;
    padding: 0 33px 0 33px;
    height: 27px;
    display: block;
    text-decoration: none;
}
   
/* der kleine zurueck-Button (input-Tag) muss gesondert gestylt werden */
div.button.back input[type="submit"],
div.button.back input[type="button"] {
    color: #999999;
    text-shadow: 0px 1px 2px #c8c8c8;
    border: none;
    border-radius: none;
    padding: 0 2px 2px 13px;
    height: auto;
    margin: 5px 0 0 0;
}

div.button.back.cancel input[type="submit"],
div.button.back.cancel input[type="button"] {
    padding-left: 15px;
}
            
/* der kleine zurueck-Button (a-Tag) muss gesondert gestylt werden */
div.button.back {
    border: none;
}

div.button.back a {
    float:left;
    /*     height: 50px; */
    border: none;
    color: #999999;
    font: 14px/29px 'OpenSansRegular', Arial, sans-serif;
    text-shadow: 0px 1px 2px #c8c8c8;
    padding-left: 15px;
    margin-top: 1px;
    background: transparent;
}

div.button.back.cancel a {
    padding-left: 18px;
}

/* a.back { */
/*     float:left; */
/*     height: 50px; */
/*     border: none; */
/*     color: #999999; */
/*     font: 24px 'OpenSansRegular', Arial, sans-serif; */
/*     text-shadow: 0px 1px 2px #c8c8c8; */
/*     margin-left: 62px; */
/*     padding-left: 18px; */
/*     padding-top:14px; */
/*     background: transparent; */
/*     background-image: url("../../img/gui/buttons/icon_pfeil_zurueck_dunkel.png"); */
/*     background-position: left center; */
/*     background-repeat: no-repeat; */
/* } */

/* a.back:hover { */
/*     color: #555; */
/* } */


/* BEGINN: HINTERGRUNDFARBEN */

/* ORANGE */
div.orange,
div.orange.deaktiviert:hover,
div.orange.deaktiviert:active,
.back-to-process {
    /* Fallback */
    background-color: orange;

    background-image: linear-gradient(top, #F4AB37 5%, #F18F1F 44%, #EE780A 85%);
    background-image: -o-linear-gradient(top, #F4AB37 5%, #F18F1F 44%, #EE780A 85%);
    background-image: -moz-linear-gradient(top, #F4AB37 5%, #F18F1F 44%, #EE780A 85%);
    background-image: -webkit-linear-gradient(top, #F4AB37 5%, #F18F1F 44%, #EE780A 85%);
    background-image: -ms-linear-gradient(top, #F4AB37 5%, #F18F1F 44%, #EE780A 85%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F4AB37), color-stop(0.44, #F18F1F), color-stop(0.85, #EE780A));
    -pie-background: linear-gradient(top, #F4AB37 5%, #F18F1F 44%, #EE780A 85%);
    
    /* Nutzung von PIE zur Anzeige von CSS3 in den IEs */
    behavior:url('/morehotel/style/gui/PIE/PIE.htc');
}

/* div.orange a:hover, */
div.orange:hover,
.back-to-process:hover {
    background-image: linear-gradient(top, #FFBB55 5%, #FFAA43 44%, #FF9531 85%);
    background-image: -o-linear-gradient(top, #FFBB55 5%, #FFAA43 44%, #FF9531 85%);
    background-image: -moz-linear-gradient(top, #FFBB55 5%, #FFAA43 44%, #FF9531 85%);
    background-image: -webkit-linear-gradient(top, #FFBB55 5%, #FFAA43 44%, #FF9531 85%);
    background-image: -ms-linear-gradient(top, #FFBB55 5%, #FFAA43 44%, #FF9531 85%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FFBB55), color-stop(0.44, #FFAA43), color-stop(0.85, #FF9531));
    -pie-background: linear-gradient(top, #FFBB55 5%, #FFAA43 44%, #FF9531 85%);
    
    /* Nutzung von PIE zur Anzeige von CSS3 in den IEs */
    behavior:url('/morehotel/style/gui/PIE/PIE.htc'); 
}

/* div.orange a:active, */
div.orange:active,
.back-to-process:active {
    background-image: linear-gradient(top, #EE8828 5%, #F19B3A 44%, #FAB958 85%);
    background-image: -o-linear-gradient(top, #EE8828 5%, #F19B3A 44%, #FAB958 85%);
    background-image: -moz-linear-gradient(top, #EE8828 5%, #F19B3A 44%, #FAB958 85%);
    background-image: -webkit-linear-gradient(top, #EE8828 5%, #F19B3A 44%, #FAB958 85%);
    background-image: -ms-linear-gradient(top, #EE8828 5%, #F19B3A 44%, #FAB958 85%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #EE8828), color-stop(0.44, #F19B3A), color-stop(0.85, #FAB958));
    -pie-background: linear-gradient(top, #EE8828 5%, #F19B3A 44%, #FAB958 85%);

    /* Nutzung von PIE zur Anzeige von CSS3 in den IEs */
    behavior:url('/morehotel/style/gui/PIE/PIE.htc');
}

/* BLAU */
div.blue,
div.blue.deaktiviert:hover,
div.blue.deaktiviert:active {
    background-image: none;
    background-color: #8AB4CE;
    
    /* Nutzung von PIE zur Anzeige von CSS3 in den IEs */
    behavior:url('/morehotel/style/gui/PIE/PIE.htc');    
}

div.blue:hover {
    background-color: #8DC7EE;
    
    /* Nutzung von PIE zur Anzeige von CSS3 in den IEs */
    behavior:url('/morehotel/style/gui/PIE/PIE.htc');
}

div.blue:active {
    background-image: linear-gradient(top, #65addd 16%, #81bae0 65%);
    background-image: -o-linear-gradient(top, #65addd 16%, #81bae0 65%);
    background-image: -moz-linear-gradient(top, #65addd 16%, #81bae0 65%);
    background-image: -webkit-linear-gradient(top, #65addd 16%, #81bae0 65%);
    background-image: -ms-linear-gradient(top, #65addd 16%, #81bae0 65%);
    -pie-background: linear-gradient(left , #65addd 16%, #81bae0 65%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.16, #65addd), color-stop(0.65, #81bae0));
    
    /* Nutzung von PIE zur Anzeige von CSS3 in den IEs */
    behavior:url('/morehotel/style/gui/PIE/PIE.htc');     
}

/* Styling fuer 'deaktiviert' */
div.button.deaktiviert,
div.c2abutton.deaktiviert {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

/* IE FIX wegen PIE.js */
.button_container .deaktiviert>*>*>*>* {
    filter: alpha(opacity=30);
}

/* ENDE: HINTERGRUNDFARBEN */


/* ZURUECK - BACK (gibts aktuell nur fuer a-Tag und input vom Typ submit */
div.back a,
div.back input[type="submit"],
div.back input[type="button"] {
    color: #222222;
    background: transparent;   
}

div.back a:hover,
div.back input[type="submit"]:hover,
div.back input[type="button"]:hover {
    color: #555;
    background: transparent;    
}

div.back a:active,
div.back input[type="submit"]:active,
div.back input[type="button"]:active {
    color: #555;
    background: transparent;    
}

div.c2abutton.back a,
div.c2abutton.back a:hover,
div.c2abutton.back a:active {
    background-image: url("../../img/gui/buttons/icon_pfeil_zurueck_dunkel.png");
    background-position: left 23px;
    background-repeat: no-repeat;
}

div.c2abutton.back.cancel a,
div.c2abutton.back.cancel a:hover,
div.c2abutton.back.cancel a:active {
    background-image: url("../../img/gui/buttons/icon_x.png");
    background-position: left 24px;
}

div.button.back a,
div.button.back a:hover,
div.button.back a:active {
    background-image: url("../../img/gui/buttons/icon_pfeil_zurueck_dunkel_klein.png");
    background-position: left 7px;
    background-repeat: no-repeat;
}

div.button.back.cancel a,
div.button.back.cancel a:hover,
div.button.back.cancel a:active {
    background-image: url("../../img/gui/buttons/icon_x_klein.png");
    background-position: left 10px;
}


/* deaktivierte Back-Buttons sollen die Schriftfarbe beim Hover/Active nicht aendern */
div.back.deaktiviert a:hover,
div.back.deaktiviert input[type="submit"]:hover,
div.back.deaktiviert input[type="button"]:hover,
div.back.deaktiviert a:active,
div.back.deaktiviert input[type="submit"]:active,
div.back.deaktiviert input[type="button"]:active {
    color: #999999;
}

/*BEGINN: PAGINATION-BUTTONS*/
div.button.pagination span,
div.button.pagination a {
    position: relative;
    cursor: default;
    padding: 0 5px 0 5px;
    font: 14px/27px 'OpenSansRegular', Arial, sans-serif;
    color: #ffffff;
    text-shadow: 1px 1px 1px #515151;
    float: left;
}

div.button.pagination a.pfeil_rechts,
div.button.pagination a.pfeil_links,
div.button.pagination div.spacer,
div.button.pagination input.pfeil_links,
div.button.pagination input.pfeil_rechts {
    position: relative;
    float: left;    
    width: 30px;
    height: 27px;
    display: inline;
    padding: 0;
    background-repeat: no-repeat;
}

div.button.pagination a.pfeil_rechts,
div.button.pagination input.pfeil_rechts {
    background-image: url('../../img/gui/buttons/icon_pfeil_weiter_klein.png');
    background-position: 12px 6px;
}

div.button.pagination a.pfeil_links,
div.button.pagination input.pfeil_links {
    background-image: url('../../img/gui/buttons/icon_pfeil_zurueck_klein.png');
    background-position: 10px 6px;
}

div.button.pagination div.spacer {
    width: 17px;
}

div.button.haekchen input {
    background: url('../../img/gui/buttons/icon_haken.png') no-repeat;
    background-position: 12px 6px;
    
}

.booking {
	padding: 4px;
}

div.button span.pfeil_rechts_booking {
    top: 9px;
}

/*ENDE: PAGINATION-BUTTONS*/

.eventButtonSidebar {
	font: 14px/27px 'OpenSansRegular', Arial, sans-serif !important;
	padding: 0 33px 0 33px;
}