/**
 * Body
 */

/* Generelle Styledefinitionen fuer Hintergrundfarbe, Textfarbe, Schriftgroeße sowie fuer den HTML-body */
body {
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	color: #404040;
	padding: 0;
	margin: 0;
	font-weight: 100;
	background: #fefefe url('../img/background.png') repeat-x left 60px;
}

a {
	text-decoration: none;	
}

a:hover {
	text-decoration: underline;	
}

a, a:visited, a:hover, a:active {
	color: #0077e5;
}

p {
  line-height: 1.5;
}

h2 {
	font-size: 2em;
	color:#404040;
}

h3 {
	font-size: 1.5em;
	color:#404040;	
}

h4 {
	font-size: 1em;
	color:#404040;
	font-weight:normal;	
}

/* Die wrapper-Klasse dient zur zentrierten Positionierung des Inhaltsbereichs. Hier kann ebenfalls die Maximal- und Minimalbreite des Inhaltsbereichs definiert werden */
body div#wrapper{
	max-width: 990px;
	min-width: 500px;
	margin: 0 auto 0px auto;
	padding-top:0px;
	overflow: hidden;
}

/* Header */
#header {
	background: #ffee00;
	height: 60px;
	padding: 0 10px;
}

.wrapper {
	max-width: 990px;
	min-width: 500px;
	margin: auto;
}

#header h1.titelzeile {
	margin: 0;	
	padding: 10px 0px 0 95px;
	font-weight: 100;
	line-height: 53px;
}

/* Applikationsueberschrift + NWB Logo */
h1.titelzeile, h1 {
	padding: 10px 0px 10px 65px;
	background: url('../img/logo.png') no-repeat left 12px;
	font-size: 1.5em;
}

/* p sektion als container für den text link -> Falls dieser angezeigt werden soll, die Klasse 'versteckt' entfernen. Dann wird der a-Link recht aligniert dargestellt */
p.inner-page-link{
	display: block;
	width: 100%;
	text-align:right;	
}

a[href='#top']{
	display:inline-block;
	background:url('../img/up_16.png') no-repeat left center;
	padding-left: 20px;
	font-size:0.9em;
	padding-top: 5px;
}

/* Bereich für den Berechnen Button. Ggf. können hier weitere Buttons platziert werden */
div.button-bar{
	text-align:left;
	text-align:right;
}

/*
 * Toolbar
 */
 
/* Toolbar Beschreibung: Hintergrund und Abmessungen */
menu#toolbar{
	padding: 10px 0;
	min-height: 30px;
	background: #eeeeee;
	border: 1px solid #cccccc;
	border-style: solid none;
	z-index: 10;
	margin: 0;
	overflow: hidden;
}


/* Eintraege innerhalb der Toolbar als li-Elemente  */
menu#toolbar li{
	display: block;
	float: left;
	background: 5px center no-repeat;
	font-size:0.8em;
	border-right: 1px solid #cccccc;
	margin: 0 15px 0 0;
}

menu#toolbar li:last-child{
	border-right: 0 none;
}


/* Anzeige des Pointer-Cursors beim Hover-Event fuer die Toolbar Eintraege */
/* Klasse Toolbar-Button verwendet in Toolbar (gelb) und Footer */

input[type=button].toolbar-button:hover{
	cursor: pointer;
}
input[type=submit].toolbar-button:hover{
	cursor: pointer;
}
input[type=button].toolbar-button,input[type=submit].toolbar-button, a.toolbar-button{
	border:none;
	font-family: Helvetica, Arial, sans-serif;
	font-size:1em;
	margin:0;
	background:none;
	text-transform: uppercase;
	color: #404040;
	font-weight: bold;
}

a.toolbar-button{
	cursor:pointer;
	display: block;
	text-decoration:none;
	color:#000000;
}

/* Spezifische Klasse für Toolbar Buttons (gelb) */
menu#toolbar li input[type=button].toolbar-button,menu#toolbar li input[type=submit].toolbar-button, button,  menu#toolbar li a.toolbar-button{
	padding: 40px 5px 0 5px;
	margin-right: 15px;
	font-size:1.1em;
}

/* Spezifische Klasse 'label-only', falls kein Icon für den Button vorhanden ist */
menu#toolbar li input[type=button].toolbar-button.label-only,menu#toolbar li input[type=submit].toolbar-button.label-only, menu#toolbar li a.toolbar-button.label-only{
	padding: 20px 0 20px 0;
}

/* Spezifische Eintraege fuer die Toolbar Elemente, z.B. fuer die Definition von verschiednen Icons mit Hilfe der ID */
menu#toolbar input#neu, menu#toolbar a#neu{
	background: url(../img/add-page_32.png) no-repeat center top;
}
menu#toolbar input#open, menu#toolbar a#open{
	background: url(../img/open-folder_32.png) no-repeat center top;
}
menu#toolbar input#save, menu#toolbar a#save{
	background: url(../img/save_32.png) no-repeat center top;
}
menu#toolbar input#print, menu#toolbar a#print{
	background: url(../img/print_32.png) no-repeat center top;
}
menu#toolbar input#help, menu#toolbar a#help{
	background: url(../img/help_32.png) no-repeat center top;
}
menu#toolbar input#reset, menu#toolbar a#reset{
	background: url(../img/reset_32.png) no-repeat center top;
}
menu#toolbar input#impr, menu#toolbar a#impr{
	background: url(../img/list_32.png) no-repeat center top;
}



/*
 * Content
 * 
 * Klasse beschreibt den Inhaltsbereich unterhalb der Toolbar. 
 */

div#content {
	display: block;
	width: 100%;
	margin: 25px 0px 0px 0px;
 }
	
/*
 * Fieldsets
 * 
 * Mit Hilfe der fieldsets werden die gruppierten Formularfelder zusammengestellt (z.B. Angaben, Tarifinfo oder Output)
 */

/* Beschreibung des fieldsets*/
fieldset {
	border: 1px solid #ccc;
	margin: 80px 0 0 0;
	padding: 10px 20px 0 20px;
	margin-bottom: 10pt;
	background: #fff;
}

/* Ueberschriften innerhalb der Gruppierungen */
fieldset h3 {
	padding-left: 10px;
}

fieldset h4 {
	padding-left: 10px;
}

/* Diese Klasse trifft auf alle Labels innerhalb eines fieldsets zu -> Ausnahme: Falls Elemente in einem 'form-col'-div und in einem ul-Element gruppiert wurden, dann trifft die KLasse 'fieldset div.form-col ul li label' zu */
fieldset.input label {
	width: 400px;
	float: left; 
	line-height: 1.5;
}

/* Gleiche Schriftart in Select Box */
fieldset select {
	font-family: Helvetica, Arial, sans-serif;
}

/* Aktuell nicht benutzt, kann verwendet werden, um die Tabellenüberschriften komplett zu formatieren */
fieldset.output table th{
	background: #fff;
}

/* Falls einem Label die Klasse bold hinzugefügt wird, trifft diese Klassenbeschreibung zu */
fieldset label.label.bold{
	font-weight:bold;
}

/* Tabellen innerhalb einer Legend-Gruppierung */
fieldset legend {
	float: left;
}

fieldset h2 {
	margin: -60px 20px 20px -20px;
}

fieldset table {
	border-collapse:collapse;
	width:100%;
	margin-bottom:30px;
}

fieldset.output table {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;	
}

fieldset table:first-of-type {
	margin-top: 20px;
}

fieldset table td{
	padding: 8px 10px;
	vertical-align: center;
}

fieldset.input table td:first-child {
	text-align: right;	
}

fieldset table th{
	padding: 10px;
}

fieldset.output table td, fieldset.output table th {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;	
}

fieldset.input table td:last-child{
	width:100%;
}

/*fieldset table tbody>tr:nth-child(odd) {
  background-color: #f8f8f8;
}

fieldset table tbody>tr:nth-child(even) {
  background-color: #fff;
}*/

fieldset.output table tbody>tr:nth-child(odd) {
  background-color: #f8f8f8;
}

fieldset.output table tbody>tr:nth-child(even) {
  background-color: #fff;
}

/* Table Styling for input table in input area */

fieldset.input table.input-table{
	table-layout: fixed;   
}

fieldset.input table.input-table td{
	width:100%;
}

fieldset.input table.input-table th{
	background: #fff;
}

fieldset.input table th.left{
	text-align: left;   
}


fieldset.input table.input-table tbody>tr:nth-child(odd) {
  background-color: #f8f8f8;
}

fieldset.input table.input-table tbody>tr:nth-child(even) {
  background-color: #fff;
}

fieldset.input table.input-table td, fieldset.input table.input-table th {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;	
}

fieldset.input table.input-table {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;	
}

fieldset.input table.label-value{
	width:500px;
}

fieldset.input table.label-value td{
	background-color: none;
	text-align:left;
}

fieldset.input table.label-value td:first-child{
	width:350px;
}

fieldset.input table.label-value td:last-child{
	width:auto;
}

/* Eine form-row kann dazu verwendet werden, ein Label und eine Formularkomponente (z.B. Textfeld) zu gruppieren. Hier koennen inline-Elemente verwendet werden. */
fieldset div.form-row {
	height: auto;
	margin: 10px 0px 10px 0px;
}

/* Fuer den Fall, dass nicht nur eine Komponente hinter einem Label dargestellt werden soll sondern mehrere (z.B. Checkboxen, Radiobuttons), so koennen diese mit Hilfe eine divs mit der Klasse 'form-col' gruppiert werden */
fieldset div.form-col {
	display: inline-block;
	padding:0px;
}

/* Bei der Gruppierung der Elemente soll dieses ul-Element verwendet werden (unordered list). */
fieldset div.form-col ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
}

/* Diese Klasse trifft auf alle Labels innerhalb eines Listenelements und eines 'form-col'-divs zu (z.B. Label einer Checkbox oder Radiobutton) */
fieldset div.form-col ul li label{
	float:none;
	line-height:20px;
}

/* Styling des Text-Eingabe-Controls */
fieldset input[type=text] {
	height: 30px;
	-webkit-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
	border: 1px solid #adadad;
	background: #fff;
	font-size: 1em;
	padding: 0 5px;
}

/* Styling des Dropdown-Eingabe-Controls */
fieldset select {
	height: 30px;
	-webkit-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
	border: 1px solid #adadad;
	font-size: 1em;
	padding: 0 0 0 5px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

fieldset option {
	font-size: 1em;	
}

/* Verwendung des Javascript Custom Select Scripts */
.custom-select-container {
	position: relative;
}

.custom-select-container.inline-block{
	display:inline-block;   
}

select.replaced {
	position: relative;
	z-index: 10;
	border: 0;
	filter: alpha(opacity=0);
	opacity: 0;
	min-width: 100px;
}

.custom-select {
	display: block;
	position: absolute;
	max-width: 100%;
	z-index: 1;
	top: 0;
	left: 0;
}

.custom-select > span {
	display: block;
	height: 30px;
	-webkit-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
	border: 1px solid #adadad;
	font-size: 1em;
	padding: 0 30px 0 10px;
	background: url('../img/custom-select.png') center right no-repeat;
	line-height: 30px;
	min-width: 50px;
}

.custom-select.active > span {
	border: 1px solid #000;	
}

.custom-select > span > span {
	display: block;
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* 
 * Output
 * 
 * Diese Klassen beschreiben den Stil fuer den Ausgabebereich
 */

/* Setzt den Hintergrund der fieldset-Gruppe */
fieldset.output {
	background: #eee;
    font-size:14px;
}

/* Fuer die rechts-alignierte Darstellung von numerischen Werten innerhalb einer Tabellenzelle muss das td-Element die Klasse 'number' erhalten */
td.number {
	text-align: right;
}

/* Falls Werte innerhalb der Tabelle gesondert hervorgehoben werden sollen, dann kann das tr-Element die Klasse 'important' erhalten. */
tr.important {
	font-weight: bold;
}

/* 
 * Application Specific Styles
 * 
 * Hier werden Stile fuer unseren Demo-Showcase deklariert
 */ 

/* jedes fieldset im Showcase erhaelt eine Klasse mit dem gleichen Namen wie die Gruppe. Hierueber koennen spezifische Layout-Anforderungen fuer die verschiedenen Anwendungen beschrieben werden */
.angaben{
	width:300px;
	float:left;
	height:225px;
	margin-right:10px;
	margin-top:0px;
}

.bold {
	font-weight: bold;
}

.ergebnis{
	height:159px;
}

.tarifinfo{
		
}

/* Footer */
ul.footer{
	margin: 60px 0px 15px 0px;
	border-top: 1px solid #D0E0E4;
	padding: 20px 0;
	/*background-color:rgba(219,226,229,0.25);*/
	width:100%;
	display:block;
	overflow: hidden;
	text-align: center;
	font-size:0.9em;
}


/* Eintraege innerhalb des Footer als li- oder span-Elemente  */
ul.footer li{
	display: inline;
	margin: 0;
	padding: 0 2px;
}

ul.footer span{
	color: #40403A;
	padding: 0 2px;
}

/* Anzeige des Pointer-Cursors beim Hover-Event fuer die Toolbar Eintraege */
ul.footer li:hover{
	cursor: pointer;
}

/* Logo im Footer Bereich */
ul.footer input[type=button].toolbar-button, a.toolbar-button {
	color: #40403A;
	font-weight: bold;
	text-transform: none;
	margin: 0;
	padding: 0;
}

ul.footer input[type=button].toolbar-button:hover {
	text-decoration: underline;	
}


/* Verwendet in der styles-print.css */
.page-break{
	
}

/* Result Button -> Gelb */

.result-button {
	background: #0077e5;
	border: 0 none;
	font-weight: bold;
	color: #fff;
	font-size: 1em;
	height: 30px;
	cursor: pointer;
	margin: 20px 0 20px 0;
	padding: 0 30px;
}

/* Button -> Grau */
.result-button-secondary {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(99%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
	border: 1px solid #cccccc;
	font-weight: bold;
	color: #404040;
	font-size: 1em;
	height: 30px;
	cursor: pointer;
	margin: 20px 0 20px 0;
	padding: 0 30px;
}

/* 
 * Versteckte Klassen für die Sprachbedienung
 */ 
	
.skip, .hideme, .versteckt, .print, dfn {
	left: -1000em;
	position: absolute;
	top: -1000em;
}
.skip:focus, .skip:active {
	left: 0;
	position: static;
	top: 0;
}

/*
 * Help Pages
 */

div#content p.untertitel{
	margin-bottom:25px;
}

div#content ul.help-list{
	list-style-type:none;
	margin:0px;
	padding:0px;
	line-height:1.5em;
}

div#content ul.level2-help-list{
	list-style-type:disc;
	padding-left:16px;
}

div#content div.wichtig{
	padding:20px;
	background-color: #eee;
}

div#content div.wichtig h4{
	font-weight:bold;
	margin-top: 0;
}

menu + h2 {
	margin-top:20px;
}


/* Styling des Text-Eingabe-Controls */
.myTextBox {
	height: 30px;
	-webkit-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
	border: 1px solid #adadad;
	background: #fff;
	font-size: 1em;
	padding: 0 5px;
}

.myTextBox1 {
	height: 30px;
	-webkit-border-radius: 0 0 0 0;
	border-radius: 0 0 0 0;
	border: 0px ;
	background: #fe0000;
	font-size: 1em;
	padding: 0 5px;
}
.myTextBox2 {
	
	background: #cccccc !important;
	
}