/**
 * @copyright MBO Verlag GmbH
 */


/**
 * Font for Icons
 */ 
@font-face {
	font-family: 'rechner';
	src: url('../font/rechner.eot?18356468');
	src: url('../font/rechner.eot?18356468#iefix') format('embedded-opentype'),
		 url('../font/rechner.woff?18356468') format('woff'),
		 url('../font/rechner.ttf?18356468') format('truetype'),
		 url('../font/rechner.svg?18356468#rechner') format('svg');
	font-weight: normal;
	font-style: normal;
}

/**
 * Generals
 */ 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-size: 1rem;
    background-color: #fff;
    color: #1e1e1e;
    margin: 0;
    padding: 0;
}
div, h1, h2, h3, h4, p, span {
    text-align: left;
    font-size: 14px;
    font-size: 0.875rem;
}
a, ol li a, ul li a {
    color: #0BA1E2;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
}
a:hover {
    text-decoration: underline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
form {
    padding: 0px;
    margin: 0px;
}
img {
    border: 0px;
}
h1 {
    font-size: 26px;
    color: #000;
    font-weight: normal;
}
h2 {
    font-size: 24px;
    font-size: 1.500rem;
    color: #000;
    font-weight: normal;
}
h3 {
    font-size: 20px;
    font-size: 1.250rem;
    color: #000;
    font-weight: normal;
}
ol, ul {
    margin: 1em;
    padding: 0;
}
.sup {
    vertical-align: top;
    font-size: smaller;
    line-height: 100%;
}
.strong {
	font-family: Arial, sans-serif;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    border: 1px solid transparent;
    border-radius: 3px;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    margin: 15px;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.icon {
	font-family: "rechner";
	font-style: normal;
	font-weight: normal;
	speak: none;     
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	text-align: center;
	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;     
	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;     
	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-calendar {
	position: relative;
    margin-top: -22px;
    margin-right: 10px;
    float: right;
	cursor:pointer;
}
.icon-question {
	position: relative;
    top: -2px;
	color:#1F78B0;
	font-size:18px;
	cursor:help;     
}
.icon-warning {
	position:relative;
	margin-right:10px;
	color:#721c24;
	font-size:18px;
}
.color {
	color:lightcoral;
}
.ui-dialog {
	width:400px !important;
}
.gleitzonenrechner {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
}
.header {
 display:table;
 width:100%;
}
.header h2 {
 display:table-cell;
 vertical-align:bottom;
}
.logo {
    width: 30%;
    margin: 1em 0 1em 0;
}
#intro {
	border-top: 2px solid #009de0;
}

/**
 * Form
 */
.fform {
}
.fform .gray {
    background-color:#f6f8f9;
	padding: 30px 15px 0 15px;
}
.fform fieldset {
	border:0 none;
	margin:0;
	padding-left:0;
}
.fform fieldset.submit {
    padding:0 15px;
	margin:30px 0;
}
.fform div.label,
.fform div.pseudolabel {
    border: 0;
    float: left;
    width: 33.33333333%;
    text-align: left;
    font-weight: normal;
    margin: 0;
    padding: 10px 0 0 0;
}
.fform div.alignLabel {
    padding: 0;
}
.fform div.pseudolabel {
    padding: 0px 5px 0 0;
    font-weight: 600;
}


.doubleLabel {
	line-height:1.6em;
}
.fform div.input {
    width: 66.66666667%;
    float: left;
}
.fform div.flex,
.fform div.flex-right {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.fform div.flex-right {
  -webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	-ms-justify-content: flex-end;
	justify-content: flex-end;
}
.fform div.flex input {    
	border-right: none;
}
.fform .addon {
    padding: 11px 12px !important;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px #c3c9d3 solid;
    border-left: none;
}
input, select {
    display: block;
    width: 100%;
    vertical-align:middle;
    padding: 11px 12px;
    font-family: Arial, sans-serif;	
    font-size:14px;
    font-size:0.875rem;
    line-height:0.875rem;
    background-color: #fff;
    border: 1px #c3c9d3 solid;
	outline:none;
}
input.radio {
    width:20px;
	display:inline-block;
	box-shadow:none;
}
.radioLabel {
    margin: 0 10px 0 0;
	vertical-align: middle;
}
.btn {
    -webkit-transition: background 180ms ease-out 0ms;
    -moz-transition: background 180ms ease-out 0ms;
    -o-transition: background 180ms ease-out 0ms;
    transition: background 180ms ease-out 0ms;
    font-size: 16px;
    line-height: 21px;
    font-weight: bold;    
    border: 0;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    padding: 12px 15px;
    outline: none;
    width: auto;
    letter-spacing: normal;
}
.btn-primary {
    color: #fff;
    background: #E72242;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #000;
    border-color: #fff;
}
.btn-print {
  margin: 30px 0;
}
input:focus,
select:focus {
    border-color: #66afe9;
    outline: 0;
}
input[readonly], select[readonly]
{
    cursor: not-allowed;
	background-color: #f5f5f5;
	color: graytext;
}
input[disabled], select[disabled]
{
	background-color: #f5f5f5;
	color: graytext;
}
select#Jahr,
select#Monat {
/*width:150px;*/
width: 49%;
float: left;	
}
select#Jahr {
float: right;	
}

/**
 * Result Table
 */
 #data-print { display:none; }
.entgelt_result {
   background-color: #fff;
   padding:0;
   margin:0;
   border:none;
   border-collapse:collapse;
   margin: 15px 0 0 0;
}
.entgelt_result {
   width:99%;
}

.entgelt_result td,
.entgelt_result th {
   padding:5px;
}
.entgelt_result tr:nth-child(odd) td {
	background-color:#f6f8f9;
}      
.left { text-align:left; }
.right { 
	text-align:right;
	padding-left:50px; 
}
hr {
	color: #1e1e1e;
	border: none; 
	border-top: 1px solid #1e1e1e; 
	background-color: #FFFFFF; 
	height: 1px;
}
.hr {
	border-bottom: 1px solid #1e1e1e; 
}



/**
 * small Devices
 */

@media only screen and (max-width: 645px) {
	#intro, .header, #entgelt_result, .btn-print {
		padding: 0 15px;
	}
	.fform div.label {
    float: none;
    width:100%;
    text-align: left;
    font-weight: normal;
    margin-bottom: 5px;
    padding-right: 0;
	}
	input, select, .input {
	width:100%;
	}
	
	.ui-dialog {
	width:auto !important;
	}
	
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 5px; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: ""; }
	td:nth-of-type(2):before { content: "Arbeitnehmer"; }
	td:nth-of-type(3):before { content: "Arbeitgeber"; }
	td:nth-of-type(4):before { content: "Gesamt"; }
	
	.hr { 
		border-bottom: 1px solid #eee;
	}
}

/**
 * print
 */

@media print {
    .gleitzonenrechner, #data-print {
    width: 100%;
  }
  #data-print { display:block; }
  #gehalt, .btn-print, #intro { display: none; }

	input.berechnen {
        display: none;
    }

}