/**
 * 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;
}

.icon {
	font-family: "rechner";
	font-style: normal;
	font-weight: normal;
	speak: none;     
	display: inline-block;
	text-decoration: inherit;
	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;
}
.fform span.addon.icon-calendar {
    cursor: pointer;
    padding: 8px 12px;
}
.icon-question {
	position: relative;
    top: -2px;
	color:#0BA1E2;
	font-size:18px;
	cursor:help;
	width: 1em;     
}
.icon-warning {
	position:relative;
	margin-right:10px;
	color:#721c24;
	font-size:18px;
	width: 1em;
}





/**
 * 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-top: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 3em;
    padding: 0 0 0 6px;
}
.sup {
    vertical-align: top;
    font-size: smaller;
    line-height: 100%;
}
.strong {
	font-weight:bold;
}
.clearfix:before, .clearfix:after {
   content: ""; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;    
    max-width: 750px;
    margin: 15px auto;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.gehaltsrechner {
    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;
}
.fform fieldset.submit {
    padding:0;
	margin-top:30px;
}
.fform .visibleFieldset fieldset {
    margin-left:0;
    padding-left:0;
}
.fform .visibleFieldset {
    margin: 10px 0 20px 0;
    border: 1px solid #fff;
    width: auto;
}
.fform fieldset.tableheader,
.fform fieldset.GeschaetztesJahressteuerbrutto { margin-top: 15px; }
.fform legend {
    font-size: 14px;
    font-size: 0,875rem;
    border-bottom: none;
    margin-bottom: 10px;
    width: auto;
    font-weight: bold; 
}
.fform div.label,
.fform div.pseudolabel {
    border: 0;
    float: left;
    width: 33.33333333%;
    text-align: left;
    font-weight: normal;
    margin: 0;
    padding: 5px 0 0 0;
}
.fform div.pseudolabel {
    padding: 0px 5px 0 0;
    font-weight: 600;
}
.fform div.doubleLabel {
    padding: 0 0 5px 0;
}
.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;
}
.grid {
    display: table;
    margin: 0;
    padding: 0;
    width: 66.666666%;
}
.grid-cell {
    display: table-row;
}
.fform .egainput {
display: table-cell;
}
.fform input.egainputleft,
.fform input.egainputright {
  width: 55%;  
}
.fform span.egainputleft {
  float: left;
  font-weight: 600;
}
.fform span.egainputright {
    font-weight: 600;
    float: right;
    text-align:right;
}
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;
}
#ui-datepicker-div select {
    display: inline;    
}
input.datepicker {
    cursor:pointer !important;
}
input#checkNettowunsch {
    width:30px;
    min-height:27px;
    display:inline-block;
    margin: 0 10px 0 0;
}
.fform div.input.checkbox { width:50px; }
#spanNettowunsch label {
    vertical-align: middle;
    padding: 6px 12px;
}
input#Nettowunsch {
    width:100%;
    display:inline-block;
    margin: 0 0 0 10px;
}
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;
    width:32.98%;
}
.btn-primary {
    color: #fff;
    background: #E72242;
}
.btn-primary:before, #main button:before {

}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #000;
    border-color: #fff;
}
.btn-print {
  margin: 30px 0;
}
.fullWidth {
	width:100%;
}
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,
#gehalt_result,
#AGBelastung_result {
   margin-top:50px;
}
.entgelt_result,
.gehalt_result,
.AGBelastung_result {
   background-color: #fff;
   padding:0;
   margin:0;
   border:none;
   border-collapse:collapse;
   margin: 15px 0 0 0;
   width: 100%;
}
.gehalt_result td,
.gehalt_result th,
.AGBelastung_result td,
.AGBelastung_result th {
   padding:5px;
}
.entgelt_result td,
.entgelt_result th {
   padding:5px;
}
.gehalt_result tr:nth-child(odd) td,
.AGBelastung_result tr:nth-child(odd) td,
.entgelt_result tr:nth-child(odd) td {
	background-color:#f6f8f9;
}      
.gehaltsrechner .left { text-align:left; }
.gehaltsrechner .right { 
	text-align:right;
	padding-left:50px; 
}
.gehaltsrechner hr {
	color: #1e1e1e;
	border: none; 
	border-top: 1px solid #1e1e1e; 
	background-color: #FFFFFF; 
	height: 1px;
}
.gehaltsrechner .hr {
	border-bottom: 1px solid #1e1e1e; 
}
.gehaltsrechner .color {
	color:#E72242;
}

/**
 * small Devices
 */

@media only screen and (max-width: 768px) {
	
	#entgelt_result,
	#gehalt_result,
	#AGBelastung_result,
	.btn-print,
	#intro,
	.header	{
	padding:0 15px;
	}

	.fform div.input,
	.grid {
    width:100%;
	}
	.berechnen {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}
	.fform div.label,
	.fform div.pseudolabel {
    float: none;
    width: 100%;
    font-weight: bold;
    margin-bottom: 5px;
    padding-right: 0;
	}
	
	/* Force table to not be like tables anymore */
	.collapsible table, .collapsible thead, .collapsible tbody, .collapsible th, .collapsible td, .collapsible tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.collapsible thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.collapsible tr { border: 1px solid #ccc; }
	
	.collapsible td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 5px; 
	}
	
	.collapsible 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
	*/
	.entgelt_result.collapsible td:nth-of-type(1):before { content: ""; }
	.entgelt_result.collapsible td:nth-of-type(2):before { content: "Arbeitnehmer"; }
	.entgelt_result.collapsible td:nth-of-type(3):before { content: "Arbeitgeber"; }
	.entgelt_result.collapsible td:nth-of-type(4):before { content: "Gesamt"; }

	
	.collapsible #hr { 
		display:none; 
	}
	
}

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

	input.berechnen {
        display: none;
    }

}