@import "layout.css";
@import "jquery.ui.all.css";
@import "jquery.ui.jqgrid.css";
@import "jquery.ui.bestdirekt.css";

/* 
   Reset
------------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
{
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: Arial, Verdana, Helvetica, Times New Roman;
    vertical-align: baseline;
}

textarea
{
    margin: 0;
    padding: 0;
    /*border: 0;*/
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: Arial, Verdana, Helvetica, Times New Roman;
    vertical-align: baseline;
}

/*table, td, th
{
    vertical-align: middle;
}*/

td
{
    padding: 4px;
	border-bottom: #ccc solid 2px;
}

td.noborder
{
	border-bottom: none;
}

blockquote:before, blockquote:after, q:before, q:after
{
    content: "";
}

blockquote, q
{
    quotes: "" "";
}

img
{
    vertical-align: middle;
}

hr
{
    border: 1px solid #ccc;
}

:focus
{
    outline: 0;
}

.hideElement
{
    display: none;
}

.showElement
{
    display: block;
}

/* 
   General 
------------------------------------------------------------------- */

html
{
    height: 100%; /*padding-bottom: 1px;*/ /* force scrollbars */
}

body
{
    background: #A9A9A9;
    color: #444;
    font: normal 75% sans-serif;
    line-height: 1.5;
}

#mainContent
{
    width:  100%; 
    height: 100%; 
    padding: 0;
}

/* 
   Typography 
------------------------------------------------------------------- */

/* Headings */

h1, h2, h3, h4, h5, h6
{
    color: #444;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 0.3em;
}

h4, h5, h6
{
    font-weight: bold;
}

h1
{
    font-size: 2.2em;
}

h2
{
    font-size: 2em;
}

h3
{
    font-size: 1.5em;
}

h4
{
    font-size: 1.25em;
}

h5
{
    font-size: 1.1em;
}

h6
{
    font-size: 1em;
}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
{
    margin: 0;
    vertical-align: middle;
}


/* Text elements */

p
{
    margin-bottom: 1em;
}

a:focus, a:hover
{
    color: #002;
}

a
{
    color: #246;
    text-decoration: underline;
}

abbr, acronym
{
    border-bottom: 1px dotted #666;
}

address
{
    margin-bottom: 1.5em;
}

blockquote
{
    margin: 1.2em;
    line-height: 1.4em;
}

blockquote span
{
    font-size: 1.4em;
    color: #000;
}

del
{
    color: #666;
}

em, dfn, blockquote, address
{
    font-style: italic;
}

strong, dfn
{
    font-weight: bold;
}

sup, sub
{
    line-height: 0;
}

cite
{
    color: #666;
}

pre
{
    margin: 1.5em 0;
    white-space: pre;
}

pre, code, tt
{
    font: 1em monospace;
    line-height: 1.5;
}


/* Lists */

li ul, li ol
{
    margin-left: 1.5em;
}

ul, ol
{
    margin: 0 1.5em 1.5em 1.5em;
}

ul
{
    list-style-type: disc;
}

ol
{
    list-style-type: decimal;
}

dl
{
    margin: 0 0 1.5em 0;
}

dl dt
{
    font-weight: bold;
}

dd
{
    margin-left: 1.5em;
}

.separator-horizontal
{
    width: 100%;
    float: left;
    background-color: #fff;
    margin-top: 10px;
}

/* 
   Validation
------------------------------------------------------------------- */
.info, .success, .warning, .error, .validation, .validation-summary-errors
{
    border: 1px solid; /*margin-top: 10px; 	margin-bottom: 10px; 	padding: 15px 10px 15px 50px;*/
    background-repeat: no-repeat;
    background-position: 10px 10px;
    width: auto;
    padding: 1.4em;
    margin: 0 0 4px 0;
}

.info h1, .success h1, .warning h1, .error h1, .validation h1, .validation-summary-errors span
{
    color: #000;
    margin: 0 0 4px 30px;
    font-size: 1em;
    font-weight: bold;
}

.info ul, .success ul, .warning ul, .error ul, .validation ul, .validation-summary-errors ul
{
    list-style-type: square;
    margin-top: 12px;
    margin-left: 46px;
    font-size: 11px;
}

.info li, .success li, .warning li, .error li, .validation li, .validation-summary-errors li
{
    line-height: 1.8em;
    color: #000;
}

.info p, .success p, .warning p, .error p, .validation p
{
    color: #000;
    margin: 0 0 0 30px;
    padding: 0;
    font-size: 1em;
}

.info
{
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('/Content/img/info.png');
}

.success
{
    background-color: #DFF2BF;
    background-image: url('/Content/img/success.png');
}

.warning
{
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('/Content/img/warning.png');
}

.error
{
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('/Content/img/error.png');
}

.errorNoIcon {
    color: #D8000C;
    background-color: #FFBABA;
}

.validation, .validation-summary-errors
{
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url('/Content/img/validation.png');
}

span.error, label.error, .field-validation-error
{
    color: Red;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

input.input-validation-error, input.error, div.input-validation-error, select.input-validation-error
{
    border: solid 2px red !important;
    background-color: #FFFFD5 !important;
}

.validation-summary-errors ul
{
}

.validation-summary-valid
{
    display: none;
}

/* 
   Misc
------------------------------------------------------------------- */

#sliders
{
    width: 200px;
}

#sliders li
{
    margin-bottom: 10px;
}

#sliders div
{
    margin-bottom: 5px;
}

/*    Checkboxen  
	
	http://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/

	better styling only for modern browsers. To identify them, check for pseudoclass (:checked, :not(:checked))
	-----------------------------------------------------------------*/

/* hide standard inputs */
input[type='checkbox'].imo_bigger:checked,
input[type='checkbox'].imo_bigger:not(:checked),
input[type='radio'].imo_bigger:checked,
input[type='radio'].imo_bigger:not(:checked) {
  background: transparent;
  position: relative;
    opacity: 0;
  /*margin: 0 0 5px 0;*/
	margin: 0px 0px 10px;
	padding:0;
    box-sizing: border-box;
}

input[type='checkbox'].imo_bigger ~ label,
input[type='radio'].imo_bigger + label {
  cursor: pointer;
}

label {
	vertical-align: super;
}

label:empty {
	font-size: 0;
}

.option_trenner {
	width: 15px;
	height: 17px;
	border-right: 2px solid #ccc;
	display: inline-block;
}

/* add custom inputs with ::before */
input[type='checkbox'].imo_bigger:checked ~ label::before, 
input[type='checkbox'].imo_bigger:not(:checked) ~ label::before,
input[type='radio'].imo_bigger:checked + label::before,
input[type='radio'].imo_bigger:not(:checked) + label::before {
    content:'';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
    top:7px;
	/*left: -0.5em;*/
    border: 1px solid #bbb;
    background: white;
	margin: 2px 16px 2px 2px;
    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
}

input[type=radio].imo_bigger:checked + label::before,
input[type=radio].imo_bigger:not(:checked) + label::before {
    border-radius: 17px;
    box-sizing: border-box;
}

input[type='checkbox'].imo_bigger:focus  ~ label::before,
input[type='radio'].imo_bigger:focus  + label::before {
    border: 3px solid #bbb;
    box-sizing: border-box;
}

input[type='checkbox'].imo_bigger:hover  ~ label::before,
input[type='radio'].imo_bigger:hover  + label::before {
    background:#ddd;
    box-shadow: inset 0 0 0 2px white;
    box-sizing: border-box;
}
  
input[type='checkbox'].imo_bigger:checked  ~ label::before,
input[type='radio'].imo_bigger:checked  + label::before {
    background:black;
    box-shadow: inset 0 0 0 2px white;
    box-sizing: border-box;
}





/*
	Menu

	http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/
 -------------------------------------------------------------------*/

.mainmenu {
	margin: 0;
	padding: 0;
}

.mainmenu li {
	list-style: none outside none;
	float: left;
	font-size: 14px !important;
	font-weight: bold;
	text-align: left;
	padding-left: 15px;
	padding-top: 2px;
}

.mainmenu li ul {
	background-color: white;
	visibility: hidden;
	position: absolute;
	padding: 0;
	margin: 0;
	border-top: 1px solid #ffffff;
}

.mainmenu li ul li {
	float: none;
	padding:1px 5px 1px;
	font-weight: normal;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

.mainmenu li a:link, .mainmenu li a:visited {
	display: block;
	text-decoration: none;
	margin: 0;
}

.mainmenu li a:hover {
	background-color: #eeeeee;
}

.bestdirekt-checkboxContainer {
    border: 1px solid lightgray;
    padding: 5px;
    margin-left: 10px;
    margin-top: 10px;
}

.bestdirekt-checkboxContainer > input {
    width: 20px;
    position: relative;
    vertical-align: middle;

}

.bestdirekt-checkboxContainer > label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.bestdirekt-optinoptout-conditionpart > textarea {
    min-width: 400px;
    min-height: 80px;
}

.bestdirekt-optinoptout-conditionpart {
    clear: both;
    padding: 5px;
    margin-top: 20px;
}

.bestdirekt-checkboxContainer {
    float: left;
}

.progress-notificationbar-container {
    width: 100%;
    background-color: grey;   
}
.progress-notificationbar {
height: 24px;
 width: 0%;
  background-color: #b4d3fa;    
}
.bestdirekt-confirm-box {
    display: none;
    box-sizing: border-box;
    text-align: center;
}

.bestdirekt-confirm-box button {
 background-color: #ccc;
 display: inline-block;
 border-radius: 3px;
 border: 1px solid #aaa;
 padding: 2px;
    margin: 2px;
 text-align: center;
 width: 80px;
 cursor: pointer;
}

.bestdirekt-confirm-box .button:hover {
  background-color: #ddd;
}

.bestdirekt-confirm-box .message {
  text-align: center;
  margin-bottom: 8px;
}