/*

Centralstation-Berlin
http://www.centralstation-berlin.de

S C R E E N . C S S

Last modified:  08.07.2011

*/


/*  I M P O R T   S T Y L E S
--------------------------------------------------------------------------------------------------- */

@import url(reset.css); /* Reset CSS */


/*  G L O B A L   S E T T I N G S
--------------------------------------------------------------------------------------------------- */

html { height: 100%; overflow-y: scroll; }
body { height: 100%; background: #fff url('../images/linien.gif') repeat; font: normal 12px/19px Arial, Helvetica, sans-serif; color: #333; text-align: center; }

#container { position: relative; background: #fff url('../images/hintergrund.gif'); text-align: left; width: 790px; min-height: 100%; /* For Modern Browsers */; height: auto !important; /* For Modern Browsers */; height: 100%; /* For IE */ margin: 0 auto; }

/* Global Offset */

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, form, fieldset, input, select, textarea, table, address { margin: 0 0 12px; }

/* Headings */

h1#logo { background: transparent url('../images/logo_centralstation.gif') no-repeat left top; display: block; margin: 6px 0 0 0; }
h1#logo a { text-indent: -9999px; display: block; width: 212px; height: 70px; }

h1 { font: bold 18px/120% Arial, Helvetica, sans-serif; color: #FF7415; margin-bottom: 12px; }
h2 { font: bold 14px/120% Arial, Helvetica, sans-serif; color: #666; margin-bottom: 12px; }
h3 { font: bold 13px/120% Arial, Helvetica, sans-serif; display: block; margin-bottom: 12px; }

/* Links */

a:link, a:visited { color: #06c; text-decoration: none; outline: 0; }
a:hover, a:active { color: #06c; text-decoration: underline; outline: 0; }

:focus { outline: 0; -moz-outline-style: 0 none; }

/* Common Formatting */

small { font-size: 11px; line-height: 14px; }
strong, b { font-weight: bold; }
strike, del { text-decoration: line-through; }
code { font-family: Monaco; monospace; font-size: 10px; line-height: 14px; }
sup, sub { font-size: 8px; line-height: 0 !important; }
blockquote, cite, em, i { font-style: italic; }

img, a img { border: 0; margin: 0; }

hr { display: none; }

.no-border { border: 0 !important; }
.border-bottom { border-bottom: 1px solid #a6b2bb; padding-bottom: 18px; margin-bottom: 18px; }

.no-margin { margin-bottom: 0 !important; }
.small-margin { margin-bottom: 6px !important; }
.margin { margin-bottom: 12px !important; }
.big-margin { margin-bottom: 24px !important; }
.superbig-margin { margin-bottom: 36px !important; }

.no-padding { padding: 0 !important; }

.normal { font-weight: normal !important; letter-spacing: 0 !important; }
.italic { font-style: italic !important; }
.center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Lists */

ul { list-style: none; }
ol { list-style: outside decimal; }

/* Tables */

table { width: 100%; border-spacing: 0; border-collapse: collapse; margin: 12px 0 18px; }

table, th, td { vertical-align: top; }
th { text-align: left; /*border-bottom: 1px solid #C3C5C7;*/ padding: 3px 4px; /*background: #b8d1d9 url("../images/_bg/bg-th.png") no-repeat 0 0; font-weight: bold; border-bottom: 1px solid #86a7b3 !important;*/ }
td { text-align: left; /*border-bottom: 1px solid #C3C5C7;*/ padding: 7px 10px; }

tr.alt { background: #F3F5F7; }

/* Forms */

form { background: transparent; padding: 0px; }
fieldset { margin-bottom: 1em; }
legend { display: none; }
label { font-size: 1em; font-weight: bold; display: block; margin-bottom: 2px; float: left; width: 200px; }
input, textarea, select { font-size: 1em; font-family: Arial, Helvetica, sans-serif; color: #535557; vertical-align: middle; border: 1px solid #C3C5C7; }

input { color: #535557; width: 310px; margin-bottom: 1em; padding: 3px; }
textarea { color: #535557; overflow: auto; width: 400px; margin-bottom: 1em; padding: 3px; }
select { margin-bottom: 1em; padding: 0; }

input.checkbox { border: 0 none !important; width: auto !important; margin: 0; padding: 0; }
input.radio { border: 0 none !important; width: auto !important;  margin: 0; padding: 0; }
input.inputfile { border: 0 none !important; width: 300px; }


/*  G L O B A L   C L A S S E S
--------------------------------------------------------------------------------------------------- */

.normal { font-weight: normal !important; }
.strong { font-weight: bold !important; }
.italic { font-style: italic !important; }

.no-border { border: 0 !important; }
.no-margin { margin: 0 !important; }

.inv { display: none; }

.left { float: left; }
.right { float: right; }

.alignleft { text-align: left; }
.alignright { text-align: right; }
.justify { text-align: justify; }

img.left { margin: 3px 20px 18px 0; }
img.right { margin: 3px 0 18px 10px; }

img.icon { vertical-align: middle; }

a.more, a.icon { padding-left: 12px; background: url('../images/a-more.gif') no-repeat left 4px; }
a.next { padding-left: 2px; padding-right: 9px; background: url('../images/a-more.gif') no-repeat right 4px; }
a.top { padding-right: 12px; background: url('../images/a-top.gif') no-repeat right 5px; }

.light { color: #939597; }
.orange { color: #FF7415; }

.line { border-bottom: 1px solid #999999; clear: both; float: none; height: 6px; margin-bottom: 6px; }


/* Tooltip */

#tooltip { background: #FFF7F1 url('../images/icon-notice.gif') no-repeat 12px center; max-width: 500px; margin-bottom: 18px; padding: 12px 12px 12px 48px; color: #444; text-align: left; position: absolute; z-index: 3000; box-shadow: 0 0 3px #999; -moz-box-shadow: 0 0 3px #999; -webkit-box-shadow: 0 0 3px #999;}
#tooltip h3, #tooltip div { font-weight: normal; font-size: 1em; line-height: 140%; letter-spacing: 0; margin: 0; padding: 0; }
#tooltip a { cursor: default !important; }


/*  C L E A R I N G   F L O A T S
--------------------------------------------------------------------------------------------------- */

.clear { clear: both; }

* html .clearfix { height: 1%; overflow: visible; } /* IE6 Fix */
*+html .clearfix { min-height: 1%; } /* IE7 Fix */
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

/* IE6 */

* html #header,
* html ul#nav,
* html #main,
* html .imgtext,
* html ul.versand li { height: 1%; overflow: visible; }

/* IE 7 */

*+html #header,
*+html ul#nav,
*+html #main,
*+html .imgtext,
*+html ul.versand li { min-height: 1%; }

/* Modern Browsers */

#header:after,
ul#nav:after,
#main:after,
.imgtext:after,
ul.versand li:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }


/*  H E A D E R
--------------------------------------------------------------------------------------------------- */

#header { background: url('../images/linien.gif') repeat; padding: 0 0 6px 6px; margin: 0 15px 0 15px; border: 5px solid #fff; }

#skip { display: none; }

ul#nav { display: block; margin: 15px 20px 0 0; }
ul#nav li { display: inline; float: left; background: transparent; margin-right: 14px; }
ul#nav li a { background: url('../images/trenner.gif') no-repeat center right; display: block; font: 12px Verdana, Arial, Helvetica, sans-serif; padding-right: 15px; float: left; height: 17px; }
ul#nav li.last a { background: transparent; }

ul#nav li a:link, ul#nav li a:visited { color: #333; text-decoration: none; outline: 0; }
ul#nav li a:hover, ul#nav li a:active { color: #333; text-decoration: none; outline: 0; }

.transMenu table { table-layout: auto; margin: 0; }
.transMenu th, td { background: transparent; padding: 2px; border: none; }

#rex_com_userfenster { position: absolute; top: 35px; right: 30px; width: 332px; text-align: right; }
#rex_com_userfenster form { margin: 0; }
#rex_com_userfenster fieldset { padding-bottom: 0; margin-bottom: 0; }
#rex_com_userfenster label { float: left; color: #999; width: auto; font-weight: normal; margin-left: 6px; }
#rex_com_userfenster input { float: left; margin: 0 0 0 5px; width: 100px; font: normal 12px/15px Arial, Helvetica, sans-serif; padding: 0; border-color: #999; }
#rex_com_userfenster input.submit { width: 17px; height: 17px; margin-left: 5px; border: none; }
#rex_com_userfenster ul { position: absolute; right: 22px; width: 310px; border-top: 0px solid #999999; padding-top: 0; margin-bottom: 0; }
#rex_com_userfenster ul li { font-size: 11px; line-height: 11px; margin-left: 9px; padding-top: 6px; display: inline-block; float: right; }
#rex_com_userfenster p { margin-right: 22px; margin-top: 0; height: 20px; margin-bottom: 1px; text-align: right; }
#rex_com_userfenster p small { color: #999; }
#rex_com_userfenster ul li a { height: 11px; display: block; background-position: left 2px; }

/* Login IE6 + IE7 */
* html #rex_com_userfenster { width: 340px; }
* html #rex_com_userfenster ul li { display: block; }
* html #rex_com_userfenster ul li a { display: inline; background-position: 0 4px; }

/* Transmenü IE6 + IE7 */
* html .transMenu table.items { width: auto !important; }
* html .transMenu .item.hover td { background: #ffd5b8; color: #000000;  }
*+html .transMenu .item.hover td { background: #ffd5b8; color: #000000;  }


/* Breadcrumb */

#breadcrumb { background: #fff; height: 11px; position: relative; font: 11px/12px Arial, Helvetica, sans-serif; margin: 0 20px 20px; padding-bottom: 8px; border-bottom: 1px solid #ccc; }
#breadcrumb ul { margin: 2px 6px; padding: 0px; list-style-type: none; float: left; }
#breadcrumb ul li { margin: 0px; padding: 0px; float: left; color: #666; }
#breadcrumb ul.rex-breadcrumb li { padding-left: 14px; padding-right: 5px; background: url('../images/li.gif') no-repeat 4px center; }

/* Grid Layout */

.col1_3, .col2_3, .col3_3 { float: left; display: inline; min-height: 200px; height: auto !important; height: 200px; margin-right: 24px; }
.last { margin: 0; }

.col1_3 { width: 214px; }
.col2_3 { width: 452px; }
.col3_3 { width: 690px; margin-right: 0 !important; }


/*  M A I N
--------------------------------------------------------------------------------------------------- */

#main { margin: 0 50px; padding: 0px 0 60px; }
#main.nb { border: 0 none; padding-top: 0; }

#main ul li { background: url('../images/li.gif') no-repeat left 6px; padding-left: 12px; }
#main ol li { margin: 0 20px 12px; }


div.imgtext { margin: 0 10px 12px 0 }

p.specialtag { background: #f3f5f2; text-align: center; border: 1px solid #d1d9ca; margin: 0 22px 20px; padding: 10px; }
#main p.specialtag { margin: 0 0 20px; }

/* Main / Content */

.leftcol { float: left; width: 500px; }
.rightcol { float: right; width: 240px; }

.leftcol img, .rightcol img { margin-bottom: 12px; }

ul.versand li span { float: left; width: 120px }


/* Info / Error */

.infopanel, .answertext, .form_info, .infopanel-plain { background: #FFF7F1 url('../images/icon-notice.gif') no-repeat 12px center; margin-bottom: 18px; padding: 12px 12px 12px 48px; color: #444; box-shadow: 0 0 3px #999; -moz-box-shadow: 0 0 3px #999; -webkit-box-shadow: 0 0 3px #999; }
.errorpanel, ul.form_warning, .warning { background: #FFF7F1 url('../images/icon-warning.gif') no-repeat 12px center; margin-top: 0; margin-bottom: 18px; padding: 12px 12px 12px 48px; color: #444; box-shadow: 0 0 3px #999; -moz-box-shadow: 0 0 3px #999; -webkit-box-shadow: 0 0 3px #999; }
.infopanel a.button { width: auto; border: 1px solid #C3C5C7; background: #fff; padding: 0 1em; cursor: pointer; display: inline-block; margin-left: 6px; }

.infopanel, .answertext, .form_info, .errorpanel, ul.form_warning, .warning { border: 3px solid #fff; }
.infopanel-plain { background-image: none; padding-left: 12px; }

/* Registrierung */

.formcaptcha { margin-top: 12px; clear: left; }
input.captcha { width: 170px; margin-left: 20px; }
.as-label { width: 120px; float: left; cursor: pointer; }
.formsubmit { margin-left: 200px; }
input.submit { width: 140px; cursor: pointer; }
input.submit.big { width: 210px; }
#rex-xform .formtext, #com-user-box .formtext, #rex-xform .formselect, #rex-xform .formpassword, #rex-xform .formfile, .xform .formtext { margin-bottom: 0; clear: left; }
div.xform { margin-top: 24px; }
div.xform .label-space { margin-left: 200px; }
div.xform h2, h2.styled { font: bold 14px/120% Arial, Helvetica, sans-serif; color: #999; border-bottom: 1px solid #C3C5C7; display: block; margin-top: 12px; margin-bottom: 18px; padding: 10px 0 4px; }
.form-descr { margin-top: -6px; } /* formularfelderklärende Textzeile */
select.select { width: 100px; }
label.form_warning  { color: #cc0000; }
ul.form_warning, .warning { /*border: 1px solid #cc0000; padding: 12px; margin-bottom: 24px;*/ }
.message { border: 1px solid #cc0000; padding: 12px; margin-bottom: 18px; color: #cc0000; font-weight: bold; }

/* searchbox */
#searchbox input { width: 110px; }
#searchbox input.mybutton { width: 60px; cursor: pointer; padding: 3px 6px; }

/* Preislisten */

.preisliste h1 { background-color: #FFAC73; border-bottom: 1px solid #FF7415; color: #FFFFFF; font-size: 14px; margin-bottom: 6px; margin-top: 24px; padding: 2px 4px; }
.preisliste h1 span { font-size: 12px; font-weight: normal;  }
.preisliste table { margin-bottom: 8px; margin-top: 6px; }
.preisliste table tr {  }
.preisliste table tr th { font-weight: bold; }
.preisliste table tr.farbe { background: #F3F5F7; }
* html .preisliste table tr.farbe td  { background: #F3F5F7; }
*+html .preisliste table tr.farbe td  { background: #F3F5F7; }
.preisliste table td { vertical-align: top; border-bottom: 1px solid #C3C5C7; padding: 4px 4px; }
.preisliste table td.abstand { border: none; height: 30px; }
.preisliste table td.r, .preisliste table th.r, table td.r { text-align: right; }
.preisliste table td.l, .preisliste table th.l, table td.l { text-align: left; }
.preisliste table td.c, .preisliste table th.c, table td.c { text-align: center; }
.gruppenform table td { vertical-align: top; padding: 4px 4px; }

/* Kontaktformular */

.privacy:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.privacy label { float: right; width: 490px; font-weight: normal; margin-bottom: 15px; }
.privacy input { float: left; width: 30px !important; margin-left: 160px !important; }


/*  F O O T E R
--------------------------------------------------------------------------------------------------- */

#footer { position: absolute; width: 100%; bottom: 0 !important; bottom: -1px; /* For Certain IE widths */ }
#footer .inner { position: relative; padding: 6px 0 4px 0; margin: 0 20px 0 20px; background: url('../images/linie746.gif') no-repeat top center; }
#footer p { margin-bottom: 6px; font-size: 11px; line-height: 16px; color: #666; text-align: center; }


/*  P R E I S K A L K U L A T O R
--------------------------------------------------------------------------------------------------- */

#calculator { position: relative; }
#calculator-main { position: relative; width: 450px; border: 1px solid #999; padding-bottom: 24px; margin-top: 36px; }
#calculator-header { height: 60px; background: #c3c5c7; border-bottom: 1px solid #999; }
#calculator-header input[type=radio] { width: auto; float: left; margin-right: 6px; margin-bottom: 0px; margin-top: 2px; }
#calculator-main label { float: left; font-weight: normal; width: auto; }
#calculator-header div.header-col1 { float: left; width: 120px; height: 60px; padding: 6px 0 0 6px; margin-right: 0; border-right: 1px solid #999; }
#calculator-header div.header-col2 { float: left; width: 170px; height: 60px; padding: 6px 0 0 6px; margin-right: 0; border-right: 1px solid #999; }
#calculator-header div.header-col3 { float: left; width: 140px; height: 60px; padding: 6px 0 0 6px; }
#calculator-header div.header-col1 div { clear: left; height: 18px; padding: 2px 4px; }
#calculator-header div.header-col2 div { clear: left; height: 18px; padding: 2px 4px; }
#calculator-header div.header-col3 div { clear: left; height: 18px; padding: 2px 4px; }
#calculator-header div div label { cursor: pointer; }
#calculator-header div.header-col1 div.selection { background-color: #eee; }
#calculator-header div.header-col1 div.selection label { font-weight: bold; color: #000; }
#calculator-input { position: relative; background: #f3f5f7; }
#calculator-input #input-pages { /*background: url('double-input-arrow.gif') no-repeat 3px 22px;*/ }
#calculator-input option[disabled=disabled] { color: #ccc; }
#calculator-input div.input-row1 { clear: left; padding: 25px 15px; }
#calculator-input div.input-row2 { clear: left; padding: 0px 15px 10px 15px; }
#calculator-input #binding-input { padding-bottom: 24px; margin-top: -24px; display: none; }
#calculator-input #copies-input { padding-bottom: 24px; }
#calculator-input div.input-col1 { float: left; width: 240px; padding: 0 0 0 0; }
#calculator-input div.input-col2 { float: left; width: 180px; padding: 0 0 0 0; }
#calculator-input div.input-col2 label { margin-top: 2px; }
#calculator-input p#paper-number-to-prints-ratio-string { clear: left; font-size: 0.9em; margin: 0; color: #535557; }
#calculator-input div.input-col1 label { width: 90px; }
#calculator-input div.fullcol { width: 420px; }
#calculator-input select { width: 120px; padding: 1px; margin-bottom: 10px; }
#calculator-input div.fullcol select { width: 223px; }
#calculator-input div.input-col2 input[type=text], #calculator-input #copies-input input[type=text] { width: 65px; float: left; margin-right: 9px; margin-bottom: 6px; padding: 3px; text-align: right; }
#calculator-input div.input-col2 div { clear: left; margin-bottom: 6px; margin-left: 0px; }
#calculator-input input[type=checkbox] { width: auto; float: left; margin-right: 12px; margin-bottom: 0px; margin-top: 3px; }
#calculator-input #input-copies { clear: left; width: 240px; }
#calculator-input #input-copies label { width: 90px; }
#calculator-input button#calculate-now { position: absolute; bottom: -12px; right: 20px; width: 120px; background: #e1e2e3 url('../images/calculator.png') no-repeat 10px 5px; border: 2px solid #c3c5c7; color: #333; padding: 4px 12px 4px 30px; cursor: pointer; }
#calculator-input button#calculate-now:hover { background-color: #f0f0f1; }
#calculator-main button#print-now { position: absolute; bottom: 20px; right: 20px; width: 120px; background: #e1e2e3 url('../images/print.png') no-repeat 10px 5px; border: 2px solid #c3c5c7; color: #333; padding: 4px 12px 4px 30px; cursor: pointer; display: none; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-main button#print-now:hover { background-color: #f0f0f1; }
#calculator-output #parameters { margin-bottom: 30px; }
#calculator-output #parameters h2 { margin-bottom: 2px; margin-top:0; font-size: 1.6em; color: #FF7415; }
#calculator-output #parameters p { padding-bottom: 4px; border-bottom: 1px solid #999; }
#calculator-output { padding: 36px 24px; display: none; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-output h3 { margin-bottom: 6px; margin-top: 4px; font-size: 1.2em; }
#calculator-output #print-string { }
#calculator-output .jobdata p { margin-bottom: 0; }
#calculator-output .jobdata { position: relative; padding-right: 105px; margin-bottom: 9px; }
#calculator-output .price { position: absolute; bottom: 0px; right: 0; width: 100px; text-align: right; font-size: 1.2em; font-weight: normal; }
#calculator-output .price-big { position: absolute; bottom: 0px; right: 0; width: 100px; text-align: right; font-size: 1.5em; font-weight: normal; }
#calculator-output .price span { color: #999; font-size: 1em; font-weight: normal; margin-right: 5px; }
#calculator-description-bottom { position: absolute; width: 215px; bottom: 0; right: 0; display: none; }
#calculator-description-top { position: absolute; width: 235px; top: 0; right: 0; }
#calculator-description-top .descbox { background: url('../images/bg-descrbox.gif') no-repeat left center; padding: 6px 0; margin-bottom: 18px; }
#calculator-description-top .descbox p { padding-left: 24px; padding-right: 4px; margin-bottom: 0; }
#calculator #description-binding { display: none; }
#calculator-input .less { background: url('../images/icon-opt-minus.gif') no-repeat top left; width: 16px; height: 16px; border: 0; float: left; margin-right: 6px; margin-top: 4px; cursor: pointer; display: inline-block; }
#calculator-input .less span { display: none; }
#calculator-input .more { background: url('../images/icon-opt-plus.gif') no-repeat top left; width: 16px; height: 16px; border: 0; float: left; margin-right: 4px; margin-top: 4px; cursor: pointer; display: inline-block; }
#calculator-input .more span { display: none; }

#calculator-output #error { display: none; color: #cc0000; border: 1px solid #cc0000; padding: 3px 6px; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-output #message { display: none; color: #FF7415; border: 1px solid #FF7415; padding: 3px 6px; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-output #edv-data { display: none; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-output #sheets-data { display: none; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-output #material-data { display: none; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-output #binding-data { display: none; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-output #summery-data { display: none; opacity: 0; filter: Alpha(Opacity=0); }

#calculator-toprint { width: 100%; height: 100%; background: #fff; display: none; text-align: left; }
#calculator-toprint .inner { padding: 20px; }
#calculator-toprint p { font-size: 1.2em; }
#calculator-toprint h1 { font-size: 1.8em; color: #000; margin: 30px 0; }
#calculator-toprint h2 { font-size: 1.6em; color: #000; margin: 30px 0 0; text-decoration: underline; }
#calculator-toprint h3 { font-size: 1.4em; margin-bottom: 2px; }
#calculator-toprint #error { display: none; color: #000; opacity: 0; filter: Alpha(Opacity=0); }
#calculator-toprint #error a { display: none; }
#calculator-toprint #message { display: none; color: #000; opacity: 0; filter: Alpha(Opacity=0); margin-left: -9999px; margin-bottom: -50px; }
#calculator-toprint .price { font-size: 1.4em; font-weight: bold; float: right; }
#calculator-toprint .price-big { font-size: 2em; font-weight: bold; float: right; text-decoration: underline; }
#calculator-toprint .jobdata { border-bottom: 1px solid #000; margin-bottom: 4px; padding-bottom: 4px; }
#calculator-toprint .jobdata:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }

#mini-calculator #calculator-main { padding-bottom: 0; margin: 0; margin-bottom: 31px; }
#mini-calculator #calculator-header { height: auto; }
#mini-calculator #calculator-header h3 { margin: 0; padding: 3px 6px; color: #fff; }
#mini-calculator #calculator-input div.input-col1 { width: 210px; }
#mini-calculator #calculator-input div.input-col2 { width: 210px; }
#mini-calculator #calculator-input div.input-col1 label { width: 70px; }

#debug { position: absolute; left: 800px; top: 0px; width: 800px; display: none; }


/*  E N D   S C R E E N . C S S
--------------------------------------------------------------------------------------------------- */