body {
	background: #f8f8f8 url(bg-rechner.jpg) top center no-repeat;
	color: #00203e;
}

/* CSS3 Fonts  
----------------------------------------------------------*/

@font-face
{
    font-family: "Palatino";
    src: url('Font/Palatino/Normal.eot');
	src: local('☺'),
		 url('Font/Palatino/Normal.woff') format('woff'),
		 url('Font/Palatino/Normal.ttf') format('truetype');
		 /* url('Font/Palatino/Normal.otf') format('opentype'); */
}

@font-face
{
    font-family: "Palatino";
    font-weight: 600;
    src: url('Font/Palatino/Bold.eot');
	src: local('☺'),
		 url('Font/Palatino/Bold.woff') format('woff'),
		 url('Font/Palatino/Bold.ttf') format('truetype');
		 /* url('Font/Palatino/Bold.otf') format('opentype'); */
}

@font-face
{
    font-family: Palatino;
    font-style: italic;
    src: url('Font/Palatino/Italic.eot');
	src: local('☺'),
		 url('Font/Palatino/Italic.woff') format('woff'),
		 url('Font/Palatino/Italic.ttf') format('truetype');
		 /* url('Font/Palatino/Italic.otf') format('opentype'); */
}


/* DEFAULT LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* #main
{
	float: left;
	margin-top: 40px;
} */

@media (max-width: 960px) {
	body { 
		background-position: -240px 0%;
	}
	#main {
		width: 640px;
	}
}

#main p
{
    margin: 0;
}


#main h1
{
	color: #a51f1d;
    margin: 0 0 0 0;
    padding: 0.5em 0 0.5em 0;
}

#main h2
{    
	color: #76bee7;
	font-size: 1.4em;
    margin: 1em 0;
    padding: 0;
    font-style: italic;
    font-weight: 400;
}

/* #main a
{
	color: #a51f1d;
    text-decoration: none;
}

#main a:hover
{
    text-decoration: underline;
} */

#familienrechner-footer
{
    margin: 1em 0 0 0;
    padding: 0;
}

#haudelink
{
    text-decoration: none;
}

#familienrechner-logo
{
    border: none;
    width: 30px;
    height: 50px;
    float: left;
}

#disclaimer
{
    font-size: 1em !important;
    font-style: italic;
    color: #666666;
    display: block;
    width: 80%;
    margin: 10px 0 0 10px !important;
    padding: 0px;
    float: left;
}

/* master page
-----------------------------------------------------------*/
/*
#overall-viewport
{
    width: 600px; 
    margin: 0 auto; 
    padding: 10px; 
    background: #f1f1f1;
}


#main
{
    margin: 0;
    padding: 0;
}

#footer {
	color: #cccccc;
	padding: 40px 20px 20px 0px;	
}

#haudelink
{
    text-decoration: none;
}

#logo
{
    border: none;
    width: 30px;
    height: 50px;
    float: left;
}

#disclaimer
{
    font-size: 0.9em;
    font-style: italic;
    color: #666666;
    display: block;
    width: 550px;
    margin: 0px 0px 0px 10px;
    padding: 20px 0 0 0;
    float: left;
}*/

/* div-based styling
-----------------------------------------------------------*/

.left
{
    float: left;
}

.right
{
    float: right;   
}

.clear
{
    clear: both;
}

/* Custom
-----------------------------------------------------------*/

#bmflogo
{
    border: none;
    width: 129px;
    height: 40px;
}

.light
{
    background: #f1f1f1;
}

.green
{
    background: #D2DEBF;
}

#children
{
    margin: 1em 0 0 0;
    padding: 0;
    list-style: none;
}

#children li
{
    padding: 0;
    display: inline;
}

#AddChild,
#children li a.childlink
{
    display: block;
    float: left;
    color: #333333;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: normal;
    margin: 0px 3px 0px 0px;
    padding: 5px 10px 4px 10px;
    border: 1px solid #76bee7;
    background: #ffffff;
    border-radius: 3px;
}

#AddChild,
#children li a.childlink:hover
{
    text-decoration: underline;
}

#children li a.selected
{
    display: block;
    float: left;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    margin: 0px 3px 0px 0px;
    padding: 5px 10px 4px 10px;
    background: #76bee7;
    border: 1px solid #76bee7;
    border-radius: 3px;
}

#children li div
{
    float: left;
    margin-left: -10px;
    margin-top: -5px;
    border: 1px solid #76bee7;
    background: #990000;
    width: 10px;
    height: 10px;
    font-size: 0.8em;
    text-align: center;
    font-weight: 600;
    border-radius: 6px;
}

#children li div a.delete-child
{
    display: inline;
    float: none;
    position: relative;
    top: -3px;
    color: #ffffff;
    text-decoration: none;    
    font-size: 1.5em;
    font-weight: 600;
    margin: 0;
    padding: 0;
    border: none;
}

#children li div a.delete-child:hover
{
    cursor: pointer;
}

#child
{
    margin-top: 0.5em;
    padding: 0.5em;
}

#partner1, #partner2, #child
{
    background: #ddeff9;
	border: 1px solid #76bee7; 
}

.watermark
{
    color: #888888;
    font-style: italic;
}

/* Form 
----------------------------------------------------------*/

form p
{
    margin: 0.3em 0 0 0;
}

input[type="text"]
{
    width: 105px;
    border: 1px solid #aaa;
    padding: 4px;
    font-size: 1em;
    text-align: right;
    margin: 0 0.2em 0 0;
}

@media only screen and (max-width: 660px) {
	input[type="text"], textarea {
		font-size: 16px;
	}
}

input[type="submit"], 
input[type="button"]
{
    font-size: 1.1em;
    padding: 0.1em 0.3em;
}

select
{
    width: 113px;
    border: 1px solid #cccccc;
    padding: 2px;
    font-size: 1em;
}

label
{
    font-size: 1em;
    margin: 0 1em 0 0;
}

/* Headers 
----------------------------------------------------------*/

h3
{
    display: inline;
    font-size: 1.5em;
    margin: 0 2em 0 0;
    padding: 0;
}

/* Table 
----------------------------------------------------------*/

table
{
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;    
}

th,
td
{
    padding: 0.3em 0.5em;
    border: 1px solid #76bee7;
    color: #76bee7;
    font-style: italic;
    font-size: 1.1em;
}

th
{
    background: #ddeff9 ! important;
    text-align: left;
    font-weight: 400;
}

td
{
    background: #ddeff9 ! important;
    width: 90px;
    text-align: right;
    color: #555555 ! important;
}

caption
{
    text-align: left;
    font-size: 1.8em;
    font-weight: 400;
    padding: 0;
    margin: 1em 0;
    color: #A51F1D;
    font-style: italic;
}

/* help panel
-----------------------------------------------------------*/

#HilfePanel
{
	font-size: 0.9em;
}

#HilfePanel table th
{
    width: 90px;
    padding: 3px;
    text-align: left;
}

#HilfePanel table td
{
    width: 250px;
    padding: 3px;
    text-align: left;
}

#HilfePanel p
{
    margin-top: 20px;
}

#SteuervorteilListe li
{
    font-style: italic;
    color: #76bee7;
    font-size: 1.1em;
}

/* tooltip
-----------------------------------------------------------*/

.tooltip-icon 
{
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 0 -4px 2px;
	padding: 0;
	background: url('../../Images/information2.png');				
}
			
.tooltip-msg 
{
	position: absolute;
	max-width: 340px;
	padding: 2px;
	border: 1px solid #000000;
	background: #FFFFE0;
	font-family: "Palatino", Arial, Verdana, Helvetica, Sans-Serif;
	font-size: 13px;
}

.mobile {
	display: inline;
}

#chkAlleinerzieher {
	margin-left: 1em;
}

#lblPartner1_Name, #lblPartner1_Brutto, 
#lblPartner2_Name, #lblPartner2_Brutto {
	width: 5.5em;
}

#Partner1_Name, #Partner2_Name, #Name {
	width: 15em;
}

#Partner1_Brutto, #Partner1_Netto,
#Partner2_Brutto, #Partner2_Netto {
	width: 6em;
}

#lblPartner1_Netto, #lblPartner2_Netto {
	margin-left: 2em;
	width: 11.5em;
	text-align: right;
}

#lblName {
	width: 5.5em;
}

#lblAlter {
	margin-left: 2em;
	width: 2.5em; 
	text-align: right;
}

#Alter, #Monate {
	width: 2.5em;
}

#fs1 {
	margin: 0.5em 2.0em 0 0; 
}

#fs2 {
	margin: 0.5em 0 0 1.5em; 
	width: 22.5em;
}

#lblMonate {
	margin-left: 8em;
}


@media only screen and (max-width: 660px) {
	body {
		background-image: none;
		background: white; 
		font-size: 0.9em;
	}

	h1 {
		font-size: 1.9em;
	}

	#wrapper {
		width: 100%; 
	}

	#main {
		width: 100%; 
	}

	#menu-icon {
		display: inline-block;
	}

	#navi {
		display: none;
		margin: 5% 0 0 0;
	}

	#navi li {
		display: block;
		border-right: none;
		margin: 0.5% 0 0 0;
	}

	#image_small {
		display: inline-block;
		width: 98%;
	}

	#content, #content_small, #content_smaller {
		width: 93.75%;
	}

	.mobile {
		display: block;
	}

	#chkAlleinerzieher {
		margin-left: 0em;
	}

	#Partner1_Name, #Partner2_Name, #Name {
		width: 13em;
	}

	#lblPartner1_Name, #lblPartner1_Brutto, 
	#lblPartner2_Name, #lblPartner2_Brutto {
		width: 5.7em;
	}

	#lblPartner1_Netto, #lblPartner2_Netto, #lblName, #lblAlter, #lblMonate {
		margin-left: 0em;
		width: 5.8em;
		text-align: left;
	}

	#children li div a.delete-child
	{
		left: -2px;
		font-size: 1.4em;
		padding: 2px 5px 2px 5px;
		border-radius: 10px;
		background: #cc0000;
	}

	#fs1 {
		margin: 0.5em 0 0 0; 
		width: 95.5%;
	}

	#fs2 {
		margin: 0.5em 0 0 0; 
		width: 95.5%;
	}

	#accordion
	{
		font-size: 1.0em;
	}

	h3, h4 {
		font-size: 1.1em;
	}

	.button a {
		font-size: 0.8em;
	}

	#button_download_mb {
		font-size: 0.9em;
	}

	#button_rechner {
		display: none; 
	}

	#rechner-link {
		display: none; 
	}

	#rightbox {
		margin: 4.5% 3.125% 0% 3.125%;
		width: 93.75%;
	}
}

@media only screen and (min--moz-device-pixel-ratio: 2),
	   only screen and (-o-min-device-pixel-ratio: 2/1),
	   only screen and (-webkit-min-device-pixel-ratio: 2),
	   only screen and (min-device-pixel-ratio: 2) {
	#menu-icon {
		background: #ffffff url(../../Images/bg-menu-mobile-retina.png) center no-repeat;
		background-size: 56px 18px;	
	}
}