/* ------------------------------------------------------------

Title:   envia TEL Kundenportal screen styles
Author:  webit!
Update:  2008-11-14

------------------------------------------------------------ */

@import url("/assets/etel/gen/css/screen.css");
/* @import url("/assets/etel/gen/css/content.css"); */


/* =FIRST-NAV
----------------------------------------------------------------------------- */

#first-nav ul {
	width: 61em;
	}
.wide #first-nav ul {
	width: 80.6em;
	}

#first-nav li {
	background-image: none;
	}

#first-nav li em {
	color: #585858;
	padding-left: .7em;
	}


/* =SECOND-NAV
----------------------------------------------------------------------------- */

#second-nav a.active {
	color: rgb(9, 157, 217);
}


/* =CHROME
----------------------------------------------------------------------------- */

#first-content div.asym div.first {
	width: 39em;
	}

#first-content div.asym div.second {
	width: 18em;
	}

form#customer-select {
	float: left;
	margin-left: 1em;
	padding-top:.8em;
}

form#logout div, form#customer-select div {
	font-size: 1.2em;
	}

form#logout button, form#customer-select button {
	font-size: 1em;
	margin-left: 1em;
	}

form#customer-select select {
	border: 1px solid #D0D1D2;
	font-size: 1em;
	}


/* =TABLES
----------------------------------------------------------------------------- */

thead th {
	background-color: #FFF;
	}

tbody th {
	font-weight: bold;
	}

th.price,
td.price {
	padding-right: 1em;
	text-align: right;
	}

tr.odd th,
tr.odd td {
	background: #f3f4f7;
	}

div.wrapper-table {
	border: .2em solid #ECEDF0;
	margin: 1em 0;
	}

div.wrapper-table table {
	background-color: #D0D1D2;
	padding: .08em;
	border-collapse: collapse;
	border: .08em solid #D0D1D2;
	margin: 0;
	}

div.wrapper-table td,
div.wrapper-table th {
	border: .08em solid #D0D1D2;
	border-width: 0 .08em;
	vertical-align: top;
	}
div.wrapper-table td.desc,
div.wrapper-table td.button {
	border: 0;
	}
div.wrapper-table td.button {
	padding-right: 1em;
	text-align: center;
	}

div.wrapper-table thead th,
div.wrapper-table thead td {
	border-bottom: .08em solid #D0D1D2;
	}

div.wrapper-table tfoot th,
div.wrapper-table tfoot td {
	border-top: .08em solid #D0D1D2;
	}

div.wrapper-table tr.option th,
div.wrapper-table tr.option td {
	border-width: .08em;
	}

div.wrapper-table th span {
	color: #9E9E9E;
	font-size: .9em;
	font-weight: normal;
	}

/* TABLE FOR INVOICES, CONTRACTS */

#content table.col,
#content table.row {
	border: 0;
	border-spacing: 0;
	dborder-top: 1px solid #E4E4E4;
	}
#content table.row {
	border-top: 1px solid #E4E4E4;
	}


#content table.col caption {
	color: #099CDA;
	font-size: 1.4em;
	}

#content table.col th,
#content table.col td,
#content table.row th,
#content table.row td {
	border-bottom: 1px solid #E4E4E4;
	}
#content table.col thead th {
	border-bottom: 3px double #D8D8D8;
	vertical-align: bottom;
	}

#content table.col tbody th,
#content table.row tbody th {
	background-color: #FFF;
	font-weight: bold;
	}
#content table.col tbody th span,
#content table.row tbody th span {
	background: transparent;
	font-weight: normal;
	padding: 0;
	}

#content table.col tr.product th {
	background-color: #FFF;
	color: #099CDA;
	font-size: 1.5em;
	font-weight: bold;
	padding: 1.4em 0 .3em .3em;
	}

#content table.col tr.em th,
#content table.col tr.em td,
#content table.row tr.em th,
#content table.row tr.em td {
	background-color: #FAFBFB;
	}

#content table label,
#content table select {
	font-size: 1em;
	}

#content p.pagination {
	margin: 2em 0 0; 
	}

#content table#invoices th span {
	background: url(/assets/etel/kunden/img/bas/ico_neu.gif) no-repeat 100% 50%;
	font-weight: bold;
	padding-right: 26px;
	}

#content table#invoices ul {
	list-style-image: none;
	list-style-type: none;
	margin-top: 0;
	margin-left: 0;
	}

#content table#invoices li {
	background-repeat: no-repeat;
	background-position: 0 2px;
	font-size: 1em;
	margin-bottom: .5em;
	padding-left: 23px;
	}

#content table#invoices li.pdf {
	background-image: url(/assets/etel/kunden/img/bas/ico_pdf.gif);
	}
#content table#invoices li.csv {
	background-image: url(/assets/etel/kunden/img/bas/ico_csv.gif);
	}
#content table#invoices li.sig {
	background-image: url(/assets/etel/kunden/img/bas/ico_sig.gif);
	}

/* AVAILABILITY */

#availability-result td {
	line-height: 25px;
	}

#availability-result img {
	background: #FFF;
	border: 0;
	margin-top: 4px;
	padding: 0;
	}

/* =FORMS
----------------------------------------------------------------------------- */

form {
	overflow: hidden;
	}

legend {
	font-size: 1.2em !important;
	}

label {
	font-weight: normal;
	}

form div.em {
	padding: 1em;
	}

span.label {
	background-color: #FFF;
	display: block;
	float: left;
	font-weight: normal;
	margin: 0;
	padding: .3em 0 0;
	}
.row span.label {
	width: 12em;
	}

span.field {
	margin: 0;
	padding: .1em;
	width: 20em;
	}

span.label,
span.field {
	font-size: 1.2em;
	}

span.brand {
	background-color: #FFF !important;
	margin: 0 !important;
	padding: 0 !important;
	}

span.label img {
	border: 0 !important;
	padding: 0 !important;
	}

fieldset p.right {
	margin-top: 1.5em;
	text-align: right;
	}
fieldset.last p.right {
	margin-bottom: 0;
	}

fieldset#agb {
	fmargin-bottom: 2em !important;
	}

select.provider {
	max-width: 40em;
	_width: 40em;
	}

select option {
	padding-right: 8px;
	}

/* FAKEFORM */

div.fakeform span.field {
	display: table-cell;
	display: inline-table;
	display: inline-block;
	background: #ECEDF0;
	margin: .1em 0 1em;
	padding: .2em;
	*padding: .1em .2em; /* IE */
	}

div.fakeform h2 {
	margin-top: .8em;
	}

/* FIELDS */

input.tel,
input.pin,
input#pin,
input#pin2,
input#kdnr,
span#anrede {
	width: 10em;
	}
input.strasse,
#strasse {
	width: 16.5em;
	}
input.nummer,
#nummer,
#etage {
	width: 2.5em;
	}
input.plz,
#plz {
	width: 3.5em;
	}
input.lnum,
span.lnum {
	width: 4em !important;
	}
input.snum,
span.snum {
	width: 2em !important;
	}
input.geburtstag,
input#geburtstag,
span#geburtstag,
input#duedate {
	width: 8em; /* 5.5em */
	}

select#onlinevertrag_adsl_current_provider {
	width: 32em;
	}

form#neukunde p {
	margin-top: 0;
	}

/* BUTTON */

div.right button {
	float: right;
	margin: 0 0 0 2em;
	}

div.right a {
	float: right;
	margin-top: 5px;
	}

/* BUTTON-LINK */

a.button {
	background: none;
	border: none !important;
	cursor: pointer;
	font-size: 1em;
	height: 20px;
	margin: 0;
	overflow: visible;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	width: auto;
	white-space: nowrap;
	}
a.button:hover,
a.button:focus {
	background: transparent !important;
	}

a.button span {
	color: #FFF;
	ddisplay: block;
	display: -moz-inline-box; /* FF2 */
	display: inline-block;

	height: 18px;
	line-height: 18px;
	*line-height: 20px; /* TODO: anpassen */
	margin: 0;
	padding: 0;
	}

a.button span {
	background: url(/assets/etel/gen/img/bas/bg_button_lt_l.gif) no-repeat 0 0;
	padding-left: .5em;
	}

a.button span span {
	background: url(/assets/etel/gen/img/bas/bg_button_lt_r.gif) no-repeat 100% 0;
	font-style: normal;
	padding: 0 .5em 0 0;
	}


a.bd span {
	background-image: url(/assets/etel/gen/img/bas/bg_button_bd_l.gif);
	line-height: 25px;
	height: 25px;
	}

a.bd span span {
	background-image: url(/assets/etel/gen/img/bas/bg_button_bd_r.gif);
	line-height: 25px;
	height: 25px;
	padding: 0 1em 0 .5em;
	}

/* NOTICE */

p.notice {
	background-color: #FFC;
	padding: .5em;
	}

/* ERROR */

p.error {
	background-color: #FCC;
	color: #F00;
	padding: .5em;
	}

/* LOGIN */

#kunde div.em,
#neukunde div.em {
	min-height: 13.2em;
	height: auto !important;
	height: 13em;
	}

/* VERFUEGBARKEIT */

#availability label {
	display: inline-block;
	width: 9em;
	}

#availability button {
	margin-left: 6em;
	vertical-align: baseline;
	}

#availability div.result {
	border-top: 0.08em solid #ECEDF0;
	margin-top: 1em;
	}

#availability div.result a.button {
	margin-right: 1em;
	}

#availability div.result .clearfix {
	margin: 0;
	}

#availability div.free h2 {
	color: #00bf00;
	}
#availability div.taken h2 {
	color: #F7863A;
	}

#availability-notification legend {
	font-weight: normal;
	}

#availability-notification div.check {
	margin-left: 12.7em;
	}

#availability-notification div.controls {
	margin-left: 14em;
	}

/* DOMAIN */

form#domain label {
	width: 7em;
	}

#domain fieldset fieldset {
	margin-top: 1em;
	}

#domain button {
	vertical-align: baseline;
	}

#domain div.row span {
	margin-bottom: 0;
	}

#domain div.row button {
	margin-left: 1em;
	}

#domain div.result {
	border-top: 0.08em solid #ECEDF0;
	margin-top: 1em;
	}

#domain div.result a.button {
	margin-right: 1em;
	}

#domain div.result .clearfix {
	margin: 0;
	}

#domain div.free h2 {
	color: #00bf00;
	}
#domain div.taken h2 {
	color: #F7863A;
	}

/* TELEFONBUCH */

#telefonbuch .kundendaten div {
	float: left;
	margin-right: 1.5em;
	}

#telefonbuch .kundendaten .newline {
	clear: left;
	}

#telefonbuch .kundendaten p.newline {
	margin: 1em 0 .5em;
	}

#telefonbuch .kundendaten input {
	width: 14em;
	}
#telefonbuch .kundendaten input.plz {
	width: 3.5em;
	}

#telefonbuch .kundendaten .titel,
#telefonbuch .kundendaten .historisch {
	width: 14.3em;
	}

.dom #telefonbuch .entry {
	display: none;
	}

#telefonbuch fieldset fieldset legend {
	font-weight: normal;
	padding-bottom: .5em;
	}

#telefonbuch fieldset fieldset div {
	margin: 0;
	padding: 0 0 0 .2em;
	}

#telefonbuch fieldset fieldset label {
	margin-right: 2em;
	}

/* UPLOAD */

#upload fieldset {
	overflow: hidden;
	}

#upload fieldset div {
	float: left;
	margin-right: 1em;
	}

#upload fieldset button {
	margin-top: 1.6em;
	}

/* WRAPPER */

form div.wrapper-em {
	margin-top: 0;
	}

/* SPACER */

form div.spacer {
	margin-bottom: 2em;
	}


/* =KOSTEN
----------------------------------------------------------------------------- */

#kosten tbody td {
	padding-top: 1em;
	padding-bottom: 1em;
	}

#kosten dt {
	font-weight: bold;
	}
#kosten .options dt {
	font-weight: normal;
	}

#kosten dt span {
	color: #EA702F;
	}
#kosten dt small {
	color: #9E9E9E;
	font-size: .9em;
	font-weight: normal;
	}


#kosten dd {
	color: #9E9E9E;
	font-size: .9em;
	}

#kosten form fieldset {
	float: left;
	}

#kosten form span {
	margin-bottom: 0;
	}


/* =OPTIONEN
----------------------------------------------------------------------------- */

div.options dl.image {
	width: auto;
	}
div.options dl.image img {
	border: 0 !important;
	padding: 0!important;
	width: auto;
	}

div.options h3 {
	color: #099CDA;
	}

div.options p.price {
	font-weight: bold;
	}

/* VARIANT */

#variant div.two-cols div.wrapper-em {
	margin: 0;
	width: 28.5em;
	}

#variant div.two-cols div.em {
	overflow: hidden;
	}

#variant div.two-cols h3 {
	line-height: 1.5;
	margin-top: .8em;
	}

#variant div.two-cols h3 sup {
	color: #9E9E9E;
	font-weight: normal;
	line-height: 0;
	}

#variant div.two-cols ul {
	float: left;
	}

#variant div.two-cols p.price {
	float: left;
	font-weight: normal;
	margin: 0;
	}

#variant div.two-cols p.price span {
	color: #0A9DDA;
	font-size: 1.5em;
	font-weight: bold;
	}

#variant div.two-cols p.c2a {
	float: right;
	margin: 1em 0 0;
	}

#variant div.two-cols p.c2a a {
	font-weight: bold;
	}

#variant div.two-cols p.c2a a span span {
	width: 5.5em;
	}

/* CONFIG */

#config p,
.config p {
	margin-top: 0;
	}

#config div.controls
.config div.controls {
	margin-left: 0;
	}

#config div.controls p,
.config div.controls p {
	float: left;
	font-weight: bold;
	}

#config div.controls a,
.config div.controls a {
	margin-top: 0;
	}

#config fieldset fieldset,
.config fieldset fieldset {
	margin-bottom: 0 !important;
	padding-left: 2em;
	}

.config p.add {
	dborder-bottom: 1px solid #e0e0e0;
	padding: 0 0 1em 12em;
	}

.config p.del {
	display: inline;
	margin-left: .5em;
	}

/* Filter */

.filter {
	border: 1px solid #ECEDF0;
	border-width: 1px 0;
	padding: 1em .5em 0;
	overflow: hidden;
	}

.filter label {
	display: none;
	}

.filter input#filter {
	width: 25em;
	}

.filter select {
	width: 10em;
	}

.filter button {
	dfloat: right;
	margin-top: -3px;
	}


/* =FOOTNOTE
----------------------------------------------------------------------------- */

p.note {
	color: #9E9E9E;
	font-size: 1.1em;
	line-height: 1.3em;
	margin-top: .2em !important;
	}

div.footnote {
	color: #9E9E9E;
	font-size: .9em;
	}

div.footnote {
	margin: 1em 0 2em 0;
	}

div.footnote h3 span {
	color: #EA702F;
	}

div.footnote ol {
	padding-left: .5em;
	}

div.footnote p {
	padding-left: .65em;
	}


/* =STEPS
----------------------------------------------------------------------------- */

#steps ol {
	list-style-type: none;
	margin: 2em auto;
	overflow: hidden;
	width: 539px;
	}

#steps li {
	background-position: 0 0;
	background-repeat: no-repeat;
	color: #A5A6A7;
	float: left;
	height: 86px;
	margin: 0;
	text-indent: -1000px;
	width: 148px;
	}
#steps li.current {
	color: #F7863B;
	background-position: 0 -86px;
	}
#steps li.done {
	color: #099DDA;
	background-position: 0 -172px;
	}

#steps li.konfiguration {
	background-image: url(/assets/etel/kunden/img/bas/konfiguration.png);
	}

#steps li.kostenuebersicht {
	background-image: url(/assets/etel/kunden/img/bas/kostenuebersicht.png);
	}

#steps li.kundendaten {
	background-image: url(/assets/etel/kunden/img/bas/kundendaten.png);
	}

#steps li.bankverbindung {
	background-image: url(/assets/etel/kunden/img/bas/bankverbindung.png);
	}

#steps li.zusammenfassung {
	background-image: url(/assets/etel/kunden/img/bas/zusammenfassung.png);
	width: 95px;
	}


/* =DATE PICKER
----------------------------------------------------------------------------- */

table.jCalendar {
	background: #D0D1D2;
	border: 0;
	border-collapse: separate;
	margin: 0;
	padding: 0;
	}
table.jCalendar th,
table.jCalendar td {
	background: #ECEDF0;
	color: #585858;
	padding: .2em .4em;
	text-align: center;
	}
table.jCalendar th {
	font-weight: bold;
	}
table.jCalendar td.other-month {
	background: #FFF;
	}
table.jCalendar td.today {
	background: #7EC9E8;
	color: #FFF;
	}
table.jCalendar td.today:hover {
	background: #128FC4;
	}
table.jCalendar td.selected {
	background: #F5935D;
	color: #FFF;
	}
table.jCalendar td.selected:hover {
	background: #E97130;
	}
table.jCalendar td:hover, table.jCalendar td.dp-hover {
	background: #F5935D;
	color: #FFF;
	}
table.jCalendar td.disabled, table.jCalendar td.disabled:hover {
	background: #FFF;
	color: #D0D1D2;
	}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div.dp-popup {
	background: #CCC;
	border: 0.2em solid #ECEDF0;
	font-size: 0.625em; /* 1em = 10px */
	line-height: 1.2em;
	position: relative;
	width: 17.3em;
	}
div#dp-popup {
	position: absolute;
	z-index: 199;
	}
div.dp-popup h2 {
	background: #FFF;
	border: .1em solid #D0D1D2;
	border-bottom: 0;
	font-size: 1.2em;
	margin: 0;
	padding: .3em 0;
	text-align: center;
	}
a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
	}
div.dp-popup a {
	color: #099CDA;
	padding: .2em .2em 0;
	text-decoration: none;
	}
div.dp-popup div.dp-nav-prev {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 100px;
	}
div.dp-popup div.dp-nav-prev a {
	float: left;
	}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
	cursor: pointer;
	}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
	cursor: default;
	}
div.dp-popup div.dp-nav-next {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 100px;
	}
div.dp-popup div.dp-nav-next a {
	float: right;
	}
div.dp-popup a.disabled {
	cursor: default;
	color: #aaa;
	}
div.dp-popup td {
	cursor: pointer;
	}
div.dp-popup td.disabled {
	cursor: default;
	}

a#date-pick,
#content a.dp-applied {
	border: 0;
	}

a#date-pick img,
#content a.dp-applied img {
	border: 0;
	vertical-align: bottom;
	margin-bottom: 1.3em;
	}

/* =TOOLTIP
----------------------------------------------------------------------------- */

#tooltip {
	background-color: #FFF;
	border: 2px solid #ECEDF0;
	opacity: 0.85;
	position: absolute;
	width: 15em;
	z-index: 3000;
	}
#tooltip h3,
#tooltip div {
	border: 1px solid #D0D1D2;
	font-size: .8em;
	margin: 0;
	padding: 5px;
	}
#tooltip h3 {
	border-bottom: 0;
	}
#tooltip div.body {
	border-top: 0;
	}


/* =E-MAIL-ADMINISTRATION
----------------------------------------------------------------------------- */

/* Misc */

#email-admin img,
#email-admin span {
	background: transparent;
	border: 0;
	}

/* Forms */

#email-admin input,
#email-admin select,
#email-admin textarea {
	border: 1px solid #D0D1D2;
	font-family: Arial,Helvetica,FreeSans,sans-serif;
	padding: 2px;
	}

#email-admin input {
	padding: 3px 2px;
	}

#email-admin option {
	padding-right: 10px;
	}

#email-admin input.button {
	background: #099CDA;
	border: 2px outset #099CDA;
	color: #FFF;
	padding: 2px 1px;
	}
#email-admin input.button:active {
	border-style: inset;
	}

#email-admin td input, #email-admin p input,
#email-admin td select, #email-admin p select {
	font-size: 1em;
	}
#email-admin td select, #email-admin textarea {
	font-size: 1.2em;
	}

/* Tabs */

#email-admin div.tab-container {
	background: transparent;
	border: 0;
	}

#email-admin div.tab-container li.logout {
	float: right;
	}

#first-content ul.ui-tabs-nav li a {
	border-color: #FFF;
	}

#email-admin ul.ui-tabs-nav li.ui-tabs-selected a {
	font-weight: bold;
	}

/* Subnavi */

#email-admin ul.subnavi {
	border-bottom: 1px solid #D0D1D2;
	list-style-image: none;
	list-style-type: none;
	margin: 1em 0;
	overflow: hidden;
	padding: 0 1em;
	}

#email-admin ul.subnavi li {
	border-right: 1px solid #F2F3F7;
	float: left;
	margin: 0 1em .7em 0;
	padding-right: 1em;
	}
#email-admin ul.subnavi li.last {
	border-right: 0;
	margin-right: 0;
	padding-right: 0;
	}

/* Unterkundenauswahl im header */

form#customer-select {
	float: left;
	margin-left: 1em;
	padding-top:.8em;
	}

form#customer-select div {
	font-size: 1.2em;
	}

form#customer-select button {
	font-size: 1em;
	margin-left: 1em;
	}