/* ~~~ COMMON ~~~ */
* html {overflow:auto;width:100%;height:100%;}

body {background:url() 0 0 no-repeat #fff;height:100%;margin:0;padding:0;}

body * {outline:0;margin:0;padding:0;}
body, legend, legend em, input, select, textarea {font:12px arial,helvetica,verdana,sans-serif;color:#000;}

p,
table {margin-top:10px;}

div.text,
p,
p.advice,
p.suggestion,
p.conclusion,
ol,
table.profile {width:600px;margin-top:15px;}

/* ~~~ LAYOUT ~~~ */
#branding {}
#content {padding:15px 30px 0 30px;}

/* ~~~ DIVISIONS ~~~ */
#reference {text-align:right;width:600px;min-height:250px;margin-top:20px;}
#reference img {float:left;margin-right:10px;}

#suggestion {position:relative;background:url(/i/esp/esp-layer-haus.png) 0 0 no-repeat transparent;width:600px;height:343px;margin-top:20px;}
#suggestion img {position:absolute;left:0;top:0;}

#credits {position:absolute;bottom:0;right:0;font-size:10px;text-align:right;color:#999;padding:30px 30px 0 30px;}
#credits.start,
#credits.suggestion {position:static;clear:both;}

/* Overlay BEGIN */
.overlay {z-index:10000;position:absolute;left:0;top:-10px;width:100%;height:100%;color:#fff;text-align:center;vertical-align:middle;}
.overlay table {background:url(/i/esp/esp-message-bg.png) 0 0 repeat transparent;}
.overlay table td {margin:0;padding:0;}

.overlay table a.close {position:relative;display:block;font-weight:bold;text-align:left;text-decoration:none;background:url(/i/esp/esp-message.png) 0 0 no-repeat transparent;width:235px;height:165px;}

.overlay table a.close * {cursor:pointer;}
.overlay table a.close span {color:#fff;position:absolute;left:15px;top:25px;display:block;width:200px;height:40px;}
/* Overlay END */

/* ~~~ HEADINGS ~~~ */
h1#branding {font-size:30px;font-weight:normal;color:#da251d;border:solid #da251d;border-width:30px 0 0 0;background:url(/i/esp/esp-solvis-logo.gif) right 10px no-repeat #fff;padding:30px 30px 10px 30px;}
h2 {font-size:14px;}
h3 {font-size:14px;margin-top:20px;}
h3.profile {clear:left;color:#da251d;}

/* ~~~ PARAGRAPHS ~~~ */
p {clear:left;}

p.advice,
p.error {padding:5px;}

p.advice {border-color:#999;padding:5px;margin-bottom:20px;}
p.info {background:url(/i/esp/esp-info.gif) 0 0 no-repeat transparent;width:560px;padding-top:10px;padding-bottom:25px;padding-left:40px;}

p.conclusion {font-weight:bold;}

.error p {}

/* ~~~ LISTS ~~~ */
ul {}

ul#components {clear:both;}

ul.links {position:absolute;right:30px;top:300px;width:140px;}
ul.links li {list-style:none outside;}
ul.links li a {display:block;text-decoration:none;color:#000;border:solid #DF957A;border-width:0 0 0 16px;background-color:#e6e7e8;margin:0;padding:1px 5px;}
ul.links li a:hover {color:#da251d;background-color:#e6e7e8;}

ul#components li {float:left;clear:none;list-style:none outside;font-weight:bold;background:#e6e7e8;width:185px;padding-bottom:10px;}

ol {}
ol.steps {margin-left:20px;}

ol li {width:580px;}

/* ~~~ TABLES ~~~ */
table {}
table.profile {}

table th,
table td {padding:3px 0;}

table th {}
table.profile th {font-weight:normal;text-align:left;width:200px;}

table td {}
table.profile td {font-weight:bold;}

/* ~~~ FORMS ~~~ */
form {}
form.suggestion {/*position:relative;*/right:0;top:50px;}

fieldset {clear:both;border:0;height:240px;}
fieldset.hint {font-size:11px;color:#999;}
fieldset.compass {position:relative;background:url(/i/esp/esp-10-kompass.gif) 0 0 no-repeat transparent;height:280px;}
fieldset.slope {height:290px;}

fieldset.input,
fieldset.navigation {height:auto;}

fieldset.navigation {position:absolute;top:375px;right:30px;/*float:right;*/width:140px;}

legend {}
legend em {display:block;font-style:normal;font-weight:bold;margin-bottom:10px;}

label,
input.text,
input.submit {display:block;float:left;margin-bottom:10px;}

label {cursor:pointer;font-weight:bold;background:url() 0 0 no-repeat transparent;}

.accommodation label,
.residents label,
.consumption label,
.house-type label,
.new-boiler label,
.use label,
.comfort label,
.new-energy label,
/*.compass label,*/
.slope label,
.collector label {text-align:center;margin-left:20px;padding-top:20px;padding-bottom:20px;}

/* set margin-left to 0 on first label in row */
label.first {margin-left:0;}

/* set background-images for labels */
.accommodation label {width:237px;height:153px;}
.accommodation label.a1 {background-image:url(/i/esp/esp-00-einfamilienhaus.gif);}
.accommodation label.a2 {background-image:url(/i/esp/esp-00-mehrfamilienhaus.gif);}

.residents label {width:56px;height:83px;}
.residents label.r1 {background-image:url(/i/esp/esp-01-1-3-personen.gif);}
.residents label.r2 {background-image:url(/i/esp/esp-01-4-5-personen.gif);}
.residents label.r3 {background-image:url(/i/esp/esp-01-6-8-personen.gif);}
.residents label.r4 {background-image:url(/i/esp/esp-01-9-12-personen.gif);}
.residents label.r5 {background-image:url(/i/esp/esp-01-mehr-als-12-personen.gif);}

.house-type label {width:172px;height:93px;}
.house-type label.h1 {background-image:url(/i/esp/esp-02-1-haustyp.gif);}
.house-type label.h2 {background-image:url(/i/esp/esp-02-2-haustyp.gif);}
.house-type label.h3 {background-image:url(/i/esp/esp-02-3-haustyp.gif);}
.house-type label.h4 {background-image:url(/i/esp/esp-02-4-haustyp.gif);}

.consumption label {width:73px;height:87px;}
.consumption label.c1 {background-image:url(/i/esp/esp-04-1-oel.gif) !important;}
.consumption label.c2 {background-image:url(/i/esp/esp-04-2-gas.gif) !important;}
.consumption label.c3 {background-image:url(/i/esp/esp-04-3-andere.gif) !important;}

.new-boiler label {width:119px;height:101px;}
.new-boiler label.n1 {background-image:url(/i/esp/esp-06-1-solviskessel.gif);}
.new-boiler label.n2 {background-image:url(/i/esp/esp-06-2-fremdkessel.gif);}

.use label {width:152px;height:135px;}
.use label.u1 {background-image:url(/i/esp/esp-07-1-nutzung.gif);}
.use label.u2 {background-image:url(/i/esp/esp-07-2-nutzung.gif);}
.use label.u3 {background-image:url(/i/esp/esp-07-3-nutzung.gif);}
.use label.u4 {background-image:url(/i/esp/esp-07-4-nutzung.gif);}

.comfort label {width:121px;height:94px;}
.comfort label.c1 {background-image:url(/i/esp/esp-08-1-komfort.gif);}
.comfort label.c2 {background-image:url(/i/esp/esp-08-2-komfort.gif);}

.new-energy label {width:70px;height:80px;}
.new-energy label.n1 {background-image:url(/i/esp/esp-09-1-gas.gif);}
.new-energy label.n2 {background-image:url(/i/esp/esp-09-2-oel.gif);}
.new-energy label.n3 {background-image:url(/i/esp/esp-09-3-pellets.gif);}
.new-energy label.n4 {background-image:url(/i/esp/esp-09-4-erdwaerme.gif);}
.new-energy label.n5 {background-image:url(/i/esp/esp-09-5-holz.gif);}
.new-energy label.n6 {background-image:url(/i/esp/esp-09-6-fernwaerme.gif);}
.new-energy label.n7 {background-image:url(/i/esp/esp-09-7-bhkw.gif);}

.compass label {position:absolute;background:none;}
.compass label.c1 {left:54px;top:89px;} /* West */
.compass label.c2 {left:78px;top:150px;} /* Süd-West */
.compass label.c3 {left:209px;top:150px;} /* Süd-West */
.compass label.c4 {left:232px;top:89px;} /* Ost */
.compass label.c5 {left:143px;top:179px;} /* Süd-Ost */

.slope label {height:104px;margin-left:0;}
.slope label.s1 {clear:left;background-image:url(/i/esp/esp-11-1-neigung.gif);width:84px;}
.slope label.s2 {background-image:url(/i/esp/esp-11-2-neigung.gif);width:100px;}
.slope label.s3 {background-image:url(/i/esp/esp-11-3-neigung.gif);width:96px;}
.slope label.s4 {background-image:url(/i/esp/esp-11-4-neigung.gif);width:96px;}
.slope label.s5 {background-image:url(/i/esp/esp-11-5-neigung.gif);width:107px;}

.collector label {width:173px;height:138px;}
.collector label.c1 {background-image:url(/i/esp/esp-12-1-flachkollektor.gif);}
.collector label.c2 {background-image:url(/i/esp/esp-12-2-roehrenkollektor.gif);}
.collector label.c3 {background-image:url(/i/esp/esp-12-1-flachkollektor.gif);}
.collector label.c4 {background-image:url(/i/esp/esp-12-2-roehrenkollektor.gif);}

.input label {clear:left;width:350px;padding-top:3px;padding-bottom:3px;}

/* hide labels for navigation */
.navigation label {display:none;}

input {}

input.text {border:1px inset #999;width:160px;padding:2px;}
input.text.error {color:#000;border:1px solid #da251d;}
input.text.amount {width:50px;}
input.text.date {width:50px;}

.accommodation label input {margin-top:153px;}
.residents label input {margin-top:83px;}
.house-type label input {margin-top:93px;}
.consumption label input {margin-top:87px;}
.new-boiler label input {margin-top:101px;}
.use label input {margin-top:135px;}
.comfort label input {margin-top:94px;}
.new-energy label input {margin-top:80px;}
.compass label input {}
.slope label input {margin-top:104px;}
.collector label input {margin-top:138px;}

input.submit {overflow:visible;text-align:center;}

.navigation input.submit {width:70px;margin-bottom:0;}

.navigation input#start.submit,
.navigation input#previous.submit,
.navigation input#next.submit,
.navigation input#new.submit,
.navigation input#references.submit {}

.navigation input#previous.submit {}
.navigation input#next.submit {float:right;}
.navigation input#start.submit,
.navigation input#new.submit,
.navigation input#references.submit {clear:left;width:140px;}

/* contact BEGIN */
.esp-contact fieldset {height:auto;margin-bottom:20px;}

.esp-contact label, .esp-contact .label,
.esp-contact input, .esp-contact .input,
textarea {display:block;float:left;margin-bottom:5px;padding:2px;}

.esp-contact label,
.esp-contact input {}

.esp-contact .label label,
.esp-contact .input label,
.esp-contact .input input {margin-right:0;}

.esp-contact .label label,
.esp-contact .input input {display:inline;float:none;clear:none;}

.esp-contact .input label {width:auto;}

.esp-contact label, .esp-contact .label {font-weight:normal;clear:left;width:200px;margin-right:20px;padding:3px 0;}
.esp-contact .label label {}

.esp-contact .input label.call-from,
.esp-contact .input label.call-to {display:inline;float:none;clear:none;width:auto;margin-left:1px;}


.esp-contact input, .esp-contact .input {}

.esp-contact .input {border:0;padding:0;}

.esp-contact .input input {margin-bottom:0;}
.esp-contact label input {}

.esp-contact input.text {width:299px}

.esp-contact input#company.text,
.esp-contact input#department.text {width:145px;}
.esp-contact input#degree.text {width:50px;}
.esp-contact input#firstname.text,
.esp-contact input#lastname.text {width:145px;}
.esp-contact input#street.text {width:250px;}
.esp-contact input#housenumber.text {width:40px;}
.esp-contact input#zipcode.text {width:46px;}
.esp-contact input#locality.text {width:196px;}
.esp-contact input#phone-code.text,
.esp-contact input#fax-code.text {width:94px;}
.esp-contact input#phone.text,
.esp-contact input#fax.text {width:196px;}
.esp-contact input#call-from.text,
.esp-contact input#call-to.text {width:50px;}
.esp-contact input#email.text {}
.esp-contact input#occupation-misc-content.text {clear:left;}

.esp-contact input.submit,
.esp-contact input.reset {padding-right:3px;padding-left:3px;}

.esp-contact select {padding:1px;}

.esp-contact textarea {overflow:auto;}

/* contact END */

/* ~~~ IMAGES ~~~ */
img {border:0;}
h1#branding img {float:right;font-size:12px;color:#000;}
.slope img {display:block;float:left;}
#components img {float:left;}

/* ~~~ ANCHORS ~~~ */
a {text-decoration:underline;color:#000;}
a:hover {text-decoration:none;}

/* ~~~ SPANS ~~~ */
.info span.info {display:none;}
span.mandatory-field {color:#da251d;}
ul#components li span {display:block;float:none;font-weight:bold;margin-left:10px;}

/* ~~~ MISCELLANEOUS ~~~ */
sup, sub {line-height:0;}
label b {}
.residents label b,
.compass label b,
.slope label b {display:none;}

/* ~~~ CLASSES ~~~ */
.error {color:#da251d;}