﻿/*
    Formularelemente
*/

legend {
    font:normal 12px Verdana,Helvetica,Arial,sans-serif;
    color:#222;
}

label[for] {
    cursor:pointer;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
textarea,
select {
    padding:5px;
    border:1px solid #d6d6d6;
    border-radius:0;
    -webkit-appearance:none;
    -moz-transition:border 200ms; -webkit-transition:border 200ms; -o-transition:border 200ms; -ms-transition:border 200ms; transition:border 200ms;
}
input[type="text"]:hover,
input[type="text"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus {
    border:1px solid #6d6d6d;
}

input[type="text"].loading,
input[type="search"].loading,
input[type="email"].loading {
    background-image:url(/Layout/Custom/Boilerplate/img/icons/ajax-loader_32x32.gif);
    background-repeat:no-repeat;
    background-position:98% 5px;
    background-size:16px;
}

input[type="submit"],
input[type="button"],
button,
.szoButton {
    padding:5px;
    background:#005825;
    border:none;
    outline:none;
    -moz-transition:background 200ms; -webkit-transition:background 200ms; -o-transition:background 200ms; -ms-transition:background 200ms; transition:background 200ms;
}
input[type="submit"][disabled],
input[type="button"][disabled],
button[disabled],
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
button:hover,
button:focus,
.szoButton:hover,
.szoButton:focus {
    color:#fff;
    background:#444;
}

input[type="submit"].loading,
button[type="submit"].loading {
    padding-left:30px;
    background-image:url(/Layout/Custom/Boilerplate/img/icons/ajax-loader_32x32.gif);
    background-repeat:no-repeat;
    background-position:5px 5px;
    background-size:16px;
}

output {
    display:block;
}


/** Besondere Buttons **/

.szoNavButton {
    position:relative;
    padding:8px 25px 8px 8px;
    font-size:14px;
}
.szoNavButton:before,
.szoNavButton:after {
    content:"";
    position:absolute;
    top:9px;
    width:0;
    height:0;
}
.szoNavButton:before {
    z-index:1000;
    right:11px;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:8px solid #005825;
}
.szoNavButton:after {
    z-index:100;
    right:8px;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:8px solid #fff;
}


/** Besondere Checkboxen **/

.szoStyledCheckbox {
    position:relative;
    z-index:1;
    display:inline-block;
    margin:0 1em 1em 0;
    vertical-align:middle;
    
}
.szoStyledCheckbox input[type="checkbox"] {
    position:absolute;
    clip:rect(1px, 1px, 1px, 1px);
}
.szoStyledCheckbox label {
    display:block;
    position:relative;
    z-index:11;
    padding:0.5em 2em 0.5em 0.5em;
    border:1px solid #d6d6d6;
}
.szoStyledCheckbox label.hiddenVisibility {
    color:transparent !important;
}
.szoStyledCheckbox label:after {
    content:"\2714\fe0e";
    position:absolute;
    top:0.5em;
    right:0.7em;
    color:#d6d6d6;
}
.szoStyledCheckbox input[type="checkbox"]:checked ~ label,
.szoStyledCheckbox input[type="checkbox"]:checked ~ label:after {
    color:#005825;
}
.szoStyledCheckbox input[type="checkbox"]:checked ~ label {
    border-color:#005825;
}
.szoStyledCheckbox input[type="text"],
.szoStyledCheckbox input[type="email"],
.szoStyledCheckbox input[type="search"] {
    position:absolute;
    z-index:12;
    top:0;
    left:0;
    cursor:pointer;
    background:transparent;
    border:none;
}


/** Synchroner Dateiupload per Drag'n'Drop **/

.szoFileUploadZone {
    position:relative;
    height:150px;
    overflow:hidden;
    padding:10px;
    border:1px dotted #d6d6d6;
}
.szoFileUploadZone.selected {
    border:1px solid #444;
}
.szoFileUploadZone.invalid {
    border:1px solid #fc3333;
    box-shadow:0 0 3px #fc3333;
}
.szoFileUploadZone:hover {
    border-color:#444;
}

.szoFileUploadZone .szoFormMultipleElements {
    display:inline;
}

.szoFileUploadZone input[type="file"] {
    position:absolute;
    z-index:5;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    opacity:0;
    cursor:pointer;
}
.szoFileUploadZone label {
    float:none;
    display:block !important;
    width:auto !important;
    width:80%;
    margin:30px auto;
    overflow:hidden;
    text-align:center;
}
.szoFileUploadZone label:before {
    content:"";
    display:block;
    width:64px;
    height:64px;
    margin:0 auto;
    background-image:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_96x96.png);
    background-repeat:no-repeat;
    background-position:2px 0;
    background-size:600px;
}
.szoFileUploadZone.selected label {
    opacity:0;
}

.szoFileUploadZone .errorMessage {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    width:350px;
    padding:5px;
    color:#444;
    background:#fff;
    border:1px solid #aaa;
    box-shadow:0 0 5px #aaa;
    transition:opacity 250ms;
}
.szoFileUploadZone .errorMessage.animated {
    opacity:0;
}



/*
    Fehlerbehandlung
*/

span.szoFormError {
    display:inline-block;
    color:#940101;
}



/*
    Formularaufbau
*/

.szoForm {
    clear:both;
    margin:1em 0;
    padding:.5em 1em;
    background:#efefef;
}
.szoForm h2,
.szoForm h3 {
    float:none !important;
    margin:0 !important;
}

.szoFormRow {
    clear:both;
    margin:10px 0;
}
.szoFormRow.szoFormRowBorderTop {
    padding-top:10px;
    border-top:1px solid #fff;
}
.szoFormRow.szoFormRowBorderBottom {
    padding-bottom:10px;
    border-bottom:1px solid #fff;
}
ul.szoFormElementList {
    list-style:none;
    margin:0;
    padding:0;
}
.szoSubmitContainer {
    clear:both;
    margin-top:20px;
    padding-top:10px;
    text-align:right;
    border-top:1px solid #fff;
}

.szoFormRow label {
    display:inline-block;
}
.szoFormRow label.inline {
    display:inline;
    width:auto;
    margin:0;
}
.szoFormRow label.autoWidth {
    width:auto;
}
.szoFormRow input[type="text"],
.szoFormRow input[type="email"],
.szoFormRow input[type="search"],
.szoFormRow select,
.szoFormRow textarea {
    width:95%;
    margin:.2em 0 .5em;
}
.szoFormRow input[type="text"].small,
.szoFormRow input[type="email"].small {
    width:90px;
}
.szoFormRow select {
    width:98%;
}
.szoFormRow textarea {
    height:100px;
    -webkit-transition:height 200ms; transition:height 200ms;
}
.szoFormRow textarea:focus {
    height:150px;
}

.szoFormRow input[type="text"].szoDatepicker {
    background-image:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_16x16.png);
    background-position:195% -618px;
    background-repeat:no-repeat;
}
.szoFormRow input[type="text"].szoAutoComplete {
    background-image:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_16x16.png);
    background-position:120% -568px;
    background-repeat:no-repeat;
}
.szoFormRow input[type="text"].szoLocation {
    background-image:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_16x16.png);
    background-position:118% -712px;
    background-repeat:no-repeat;
}

.szoFormRow .szoFormMultipleElements {
    clear:both;
}
.szoFormRow .szoFormMultipleElements .left {
     margin-right:10px;
}
.szoFormRow .szoFormMultipleElements .clear {
    padding-top:10px;
}
.szoFormRow .szoFormMultipleElements label {
    margin-bottom:10px;
}

.szoFormRow .szoFormElementNotice {
    display:block;
    padding:.1em 0 .5em;
}

.szoCaptchaContainer {
    padding-top:1em;
    border-top:1px solid #fff;
}
.szoCaptchaContainer input[type="text"] {
    display:block;
    width:100px;
    margin-bottom:5px;
}
.szoCaptchaContainer input[type="button"] {
    margin-left:1em;
}
.szoCaptchaContainer img,
.szoCaptchaContainer span {
    display:inline-block;
}
.szoCaptchaContainer span {
    margin-top:.5em;
    font-weight:bold;
}



/*
    Suche
*/

/** Schnellsuche im Kopf **/

.szoQuickSearchForm label {
    display:none;
}

.szoQuickSearchForm input[type="search"],
.szoQuickSearchForm button[type="button"] {
    display:inline-block;
}
.szoQuickSearchForm input[type="search"] {
    width:200px;
    padding-right:20px;
}
.szoQuickSearchForm button[type="button"] {
    position:relative;
    width:26px;
    margin-left:-4px;
    text-indent:-9999px;
    border:1px solid #005825;
}
.szoQuickSearchForm button[type="button"]:after {
    content:"";
    position:absolute;
    z-index:20;
    top:5px;
    left:5px;
    width:16px;
    height:16px;
    background:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_16x16.png) no-repeat -48px -335px;
}

.szoQuickSearchForm a#szoQuickSearchLinkToExtended {
    position:relative;
    display:block;
    padding:.5em 0 .5em 1em;
    color:#fff;
}
.szoQuickSearchForm a#szoQuickSearchLinkToExtended:before,
.szoQuickSearchForm a#szoQuickSearchLinkToExtended:after {
    content:"";
    position:absolute;
    top:.8em;
    width:0;
    height:0;
    border-top:.5em solid transparent;
    border-bottom:.5em solid transparent;
}
.szoQuickSearchForm a#szoQuickSearchLinkToExtended:before {
    z-index:20;
    left:0;
    border-left:.5em solid #525252;
}
.szoQuickSearchForm a#szoQuickSearchLinkToExtended:after {
    z-index:10;
    left:.2em;
    border-left:.5em solid #fff;
}



/*
    Feedback
*/

.szoFeedbackForm {
    margin:0;
}



/*
    Umfragen
*/

/*** FI ***/

.szoPollForm {
    margin:0;
    padding:0;
    background:none;
}
.szoPollForm input[type="radio"] {
    float:left;
    margin-right:5px;
}
.szoPollForm label {
    display:block;
    width:auto;
    overflow:hidden;
}
.szoPoll label:hover,
.szoPoll label:focus,
.szoPoll input[type="radio"]:checked + label {
    color:#005825;
}
.szoPollForm .szoSubmitContainer {
    margin:20px -10px -10px;
    padding:10px;
    text-align:right;
    background:#efefef;
    border-top:1px solid #d6d6d6;
}
.szoPollForm .szoSubmitContainer p {
    float:left;
    margin:0;
}
.szoPollForm .SurveyButtonWrapper {
    display:inline-block;
    margin-left:5px;
}


/*** SZO ueberarbeitet ***/

.szoSurveyForm {
    margin:0;
    padding:0;
    background:none;
}
.szoSurveyForm .szoFormRow {
    margin-bottom:2em;
}
.szoSurveyForm label {
    display:block;
    width:auto;
    overflow:hidden;
}
.szoSurveyForm input[type="radio"] {
    float:left;
    margin-right:5px;
}
.szoSurveyForm label span {
    display:block;
    margin-top:-2px;
}
.szoSurveyForm label:focus span {
    color:#005825;
}



/*
    Augusto Restaurantsuche
*/

.szoRestaurantSearchForm {
    position:relative;
}

.szoRestaurantSearchForm .augustoLogo {
    height:40px;
    margin-top:-10px;
}

.szoRestaurantSearchForm label.szoRestaurantKeywords,
.szoRestaurantSearchForm label.szoRestaurantPlace {
    float:left;
    width:32px;
    height:32px;
    text-indent:-9999px;
    background-image:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_32x32.png);
    background-repeat:no-repeat;
} 
.szoRestaurantSearchForm label.szoRestaurantKeywords {
    background-position:-6px -158px;
}
.szoRestaurantSearchForm label.szoRestaurantPlace {
    background-position:-4px -288px;
}
.szoRestaurantSearchForm label.szoRestaurantKeywords + input,
.szoRestaurantSearchForm label.szoRestaurantPlace + input {
    width:calc(95% - 32px);
}

@media (max-width:320px) {
	.szoRestaurantSearch .szoAdvancedSearchAttributes .szoFormRow {
	    margin:0;
	}
}

.szoRestaurantSearch .szoRestaurantSearchAttributes .left,
.szoRestaurantSearch .szoRestaurantSearchAttributes .right {
    width:calc(50% - 10px);
}
@media (max-width:320px) {
	.szoRestaurantSearch .szoRestaurantSearchAttributes .left,
	.szoRestaurantSearch .szoRestaurantSearchAttributes .right {
	    float:none;
	    width:auto;
	}
}
.szoRestaurantSearch .szoRestaurantSearchAttributes select {
    width:40px;
}

.szoRestaurantSearch .szoToggleContainerVisibility {
    position:relative;
}
.szoRestaurantSearch .szoToggleContainerVisibility:before,
.szoRestaurantSearch .szoToggleContainerVisibility:after {
    content:"";
    display:block;
    position:absolute;
    right:-20px;
    width:0;
    height:0;
    border-right:6px solid transparent;
    border-left:6px solid transparent;
}
.szoRestaurantSearch .szoToggleContainerVisibility:before {
    top:5px;
    border-top:8px solid #005825;
}
.szoRestaurantSearch .szoToggleContainerVisibility:after {
    top:3px;
    border-top:8px solid #ebebeb;
}
.szoRestaurantSearch .szoToggleContainerVisibility.open:before,
.szoRestaurantSearch .szoToggleContainerVisibility.open:after {
    border-top:none;
}
.szoRestaurantSearch .szoToggleContainerVisibility.open:before {
    border-bottom:8px solid #005825;
}
.szoRestaurantSearch .szoToggleContainerVisibility.open:after {
    top:7px;
    border-bottom:8px solid #ebebeb;
}



.szoRestaurantSearch .szoAdvancedSearchAttributes {
    display:none;
    margin-top:10px;
}
.szoRestaurantSearch .szoAdvancedSearchAttributes fieldset {
    margin-bottom:20px;
}



/*
    Bildervorschau (Photo Upload)
*/

.szoPhotoVoteUploadForm .szoFileUploadZone .preview {
    width:75%;
    height:160px;
}



/*
    Listenfilter
*/

.szoLF-filterLi {
	padding: 0.5em 1em;
}
input.szoLF-filterInput {
	width:100%;
	padding:5px 0;
	margin:0;
}
input.szoLF-filterInput,
input.szoLF-filterInput:hover,
input.szoLF-filterInput:focus {
	border:none;
	font-size: 16px!important;
	outline: none;
}
.szoLF-filterLi form {
	position:relative;
	margin:0;
	padding:0;
	background:#fff;
	padding:0 5px 0 30px;
	border: 1px solid #d6d6d6;
}
.szoLF-filterLi form:hover,
.szoLF-filterLi form:focus {
	border: 1px solid #6d6d6d;
}
.szoLF-filterLi .szoLF-filterButton {
	position:absolute;
	top:50%;
	left:0px;
	margin: -14px 0 0 0px;
	width:28px;
	height:28px;
	overflow:hidden;
}
.szoLF-filterLi .szoLF-filterButtonSearch {
	background-image:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_64x64.png);
    background-repeat:no-repeat;
    background-position:-126px -126px;
    background-size:192px;
	opacity:0.5;
}
.szoLF-filterLi .szoLF-filterButtonReset {
	cursor:pointer;
	background-image:url(/Layout/Custom/Boilerplate/img/icons/icon-sprites_64x64.png);
    background-repeat:no-repeat;
    background-position:-126px -190px;
    background-size:192px;
}