@charset "UTF-8"; /********************************************************* fixed layout -------------------------------------------------------- #author Tobias Bergmann #version 1.0 #lastmodified 10/07/2009 -------------------------------------------------------- table of contents -------------------------------------------------------- #01 reset #02 base layout #03 different layout variants #04 header #05 content #06 footer -------------------------------------------------------- font-size | basic (defined in -tag) -------------------------------------------------------- 10px = 1.0em 11px = 1.1em 12px = 1.2em (active) @ font-size of the parent element | 0.92em (11px) ------------------------------------------------- 13px: 13px/11px = 1.18em @ font-size of the parent element | 1.2em (12px) ------------------------------------------------- 10px: 10px/12px = 0.83em 11px: 11px/12px = 0.92em 12px: 12px/12px = 1.00em 13px: 13px/12px = 1.08em 14px: 14px/12px = 1.17em 16px: 16px/12px = 1.33em 17px: 17px/12px = 1.42em 18px: 18px/12px = 1.50em 20px: 20px/12px = 1.67em @ font-size of the parent element | 1.08em (13px) ------------------------------------------------- 11px: 11px/13px = 0.85em ________________________________________________________*/ /******************************************************************************************************************************************* #01 | reset __________________________________________________________________________________________________________________________________________*/ * { padding:0; margin:0; font-size:100.01%; } html { height:100%; margin-bottom:1px; overflow-y:scroll; /* CSS3 */ font-size:62.5%; } img, fieldset { border:0; } ul, ol { list-style:none; } a:link, a:visited { text-decoration:none; } a:hover, a:active, a:focus { outline:none; } small { font-size:0.83em; /* 10px */ } big { font-size:1.17em; /* 14px */ line-height:1; } i, em, address { font-style:italic; } /******************************************************************************************************************************************* #02 | base layout __________________________________________________________________________________________________________________________________________*/ body { padding:0 15px 20px 15px; color:#666; background:#f5f5f5; font-family:Arial, Helvetica, sans-serif; font-size:1.2em; text-align:center; } #container { position:relative; width:960px; margin:0 auto; padding-bottom:40px; /* space to footer */ border-bottom:1px solid #e2e2e2; text-align:left; } #header { position:relative; width:100%; height:1%; /* pull bg-image outside of the box */ margin-left:-123px; padding-left:123px; /* um main-menu auch 4px nach rechts rausziehen zu koennen */ padding-right:4px; padding-bottom:36px; color:#ff5119; background:transparent url(../img/bg-header.png) 0 0 no-repeat; /* clearing */ overflow:hidden; } #primary, #col-left, #col-right { position:relative; float:left; line-height:1.5; /* 18px */ /* homepage: bilder mit neg. margin nach links ziehen overflow:hidden;*/ } #footer { position:relative; width:960px; margin:0 auto; border-top:1px solid #fff; text-align:right; clear:both; } /* clearing <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #footer:after, #container:after { display:block; height:0; line-height:0; font-size:0; clear:both; visibility:hidden; overflow:hidden; content:" "; } /******************************************************************************************************************************************* #03 | different layout variants __________________________________________________________________________________________________________________________________________*/ /* col-3-layout <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #col-pair-1 { position:relative; float:left; /* muß die width von #primary + #col-left zusammen haben, auto geht leider nicht * in den IE's und im Netscape */ width:673px; } body.col-3 #primary { float:right; width:483px; } body.col-3 #col-left { float:left; width:190px; } body.col-3 #col-right { float:right; width:287px; margin-right:-7px; /* for image-bg shadow */ } /* col-2-left-layout <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ body.col-2-left #primary { float:right; width:770px; } body.col-2-left #col-left { float:left; width:190px; } /******************************************************************************************************************************************* #04 | header __________________________________________________________________________________________________________________________________________*/ .logo { float:left; width:310px; height:44px; margin:46px 0 0 20px; background:transparent url(../img/logo.png) 0 0 no-repeat; text-indent:-50000px; } #header .line { float:left; width:1px; height:87px; line-height:0; margin:0 19px 0 28px; border-left:1px solid #e2e2e2; background:#fff; font-size:0; } .slogan { float:left; padding-top:47px; color:#999; font-family:'Times New Roman', Times, serif; font-size:1.42em; /* 17px */ } /******************************************************************************************************************************************* #04 | main-menu __________________________________________________________________________________________________________________________________________*/ .main-menu { position:relative; float:left; width:964px; height:53px; /* neg. margin for shadow, 4px each side */ margin:27px -4px 0 -4px; /* sonst liegt erster li ueber shadow */ padding-left:4px; background:transparent url(../img/bg-main-menu.png) 0 0 no-repeat; z-index:10; } .main-menu li { position:relative; float:left; height:45px; margin-top:4px; /* space for shadow */ border-right:1px solid #696969; /* light */ color:#ccc; } .main-menu li a, .main-menu strong { display:block; line-height:45px; padding:0 20px; border-right:1px solid #1a1a1a; /* dark */ color:#ccc; font-weight:normal; } .main-menu a:hover, .main-menu li.active a, .main-menu li.active strong { line-height:45px; color:#97c00e; background:#333; } /* sub-menu <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .sub-menu { width:172px; /* + border = 174px */ margin-bottom:34px; border:1px solid #d9d9d9; -moz-border-radius:2px; -webkit-border-radius:2px; } .sub-menu li { position:relative; border-top:1px solid #f2f2f2; /* light */ border-bottom:1px solid #ccc; /* dark */ } .sub-menu li.first { border-top:none; } .sub-menu li.last { border-bottom:none; } .sub-menu li a { display:block; line-height:29px; padding:0 20px; color:#666; background:#e7e7e7; } .sub-menu a:hover, .sub-menu li.active a, .sub-menu strong { position:relative; display:block; width:100%; line-height:29px; margin-right:-15px; padding:0 20px; color:#333; background:transparent url(../img/bg-sub-menu-active.png) -3px bottom no-repeat; } .sub-menu li.active a { font-weight:bold; } /******************************************************************************************************************************************* #05 | content __________________________________________________________________________________________________________________________________________*/ .content { padding:1px 24px 0 24px; } .col-2-left .content { padding-right:0; } .article, .article-first { padding-bottom:1.5em; /* 18px */ } .content p, #col-left p, .content ul, .content ol, .content dl, .content form, .content table, .content address { margin-bottom:1.5em; /* 18px */ } .content form { /* clearing, nur benoetigt, wenn zwei fieldsets gefloatet werden overflow:hidden; */ } .content a, #col-left table a, #col-right a { color:#97c00e; } .content a:hover, #col-left table a:hover, #col-right a:hover { color:#7ea00c; } .float-l { float:left; } .half-width { width:49%; } .green { color:#97c00e; } .font-weight-normal { font-weight:normal !important; } /* col-left <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #col-left .line { width:174px; height:1px; line-height:0; margin-bottom:25px; border-top:1px solid #e2e2e2; background:#fff; font-size:0; } /* col-right <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #col-right .line { width:280px; height:1px; line-height:0; margin:25px 0; border-top:1px solid #e2e2e2; background:#fff; font-size:0; } #col-right p { margin-bottom:1.5em; /* 18px */ } /* headings <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ h2,h3 { line-height:1em; font-weight:bold; } h2 { margin-bottom:0.67em; /* 8px */ font-family:'Times New Roman', Times, serif; font-size:2.0em; /* 24px */ } h3 { margin-bottom:1em; /* 12px */ padding:6px 0; background:#e7e7e7; font-size:1.33em; /* 16px */ text-align:center; -moz-border-radius:2px; -webkit-border-radius:2px; } /* images <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #col-right dl { margin-bottom:5px; padding-top:10px; /* for background-shadow, 5px mehr als Schatten fuer schoenen Uebergang */ background:transparent url(../img/bg-images.png) left top no-repeat; } #col-right dl img { margin-top:-5px; /* 5px zusaetzliches padding-top von #col-right dl ausgleichen */ padding:0 7px 7px 5px; background:#fff url(../img/bg-images.png) left bottom no-repeat; } /* homepage = uid-8 begin */ .uid-8 .csc-textpic-imagewrap { margin:0 -7px 0 -5px; } .uid-8 .content dl.csc-textpic-firstcol { padding-right:18px; } .uid-8 .content dl.csc-textpic-firstcol, .uid-8 .content dl.csc-textpic-lastcol { padding-bottom:18px; } .uid-8 .content img { padding:5px 7px 7px 5px; background:#fff url(../img/bg-images-home.png) left top no-repeat; } /* homepage = uid-8 end */ /* caption */ div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { } /* lists <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .content ul, .content ol { line-height:1.67; /* 20px */ } .content ul { margin-left:1.17em; /* 14px */ list-style:disc outside; } .content ul ul { margin-left:1.33em; /* 16px */ margin-bottom:0; } .content ol { margin-left:1.42em; /* 17px */ list-style:decimal outside; } .content ol ol { margin-left:1.58em; /* 19px */ margin-bottom:0; } .content dt { margin-top:.92em; /* 11px */ font-weight:bold; } /* forms <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ div.tx-powermail-pi1_formwrap .space-lr { padding:0 25px; } div.tx-powermail-pi1_formwrap .space-t { padding-top:10px; } div.tx-powermail-pi1_formwrap .space-r { padding-right:25px; } div.tx-powermail-pi1_formwrap .indented { padding-left:19px; } /* fieldset * **************************************************************/ div.tx-powermail-pi1_formwrap fieldset legend { display:none; } .tx-powermail-pi1_fieldset_1, .tx-powermail-pi1_fieldset_7, .tx-powermail-pi1_fieldset_17 { padding-bottom:2.5em; /* 30px */ } /* fieldwrap * **************************************************************/ .tx_powermail_pi1_fieldwrap_html { margin-bottom:10px; /* clearing */ overflow:hidden; clear:both; } .tx-powermail-pi1_fieldset_thermotransferfoliedaten .tx_powermail_pi1_fieldwrap_html, .tx-powermail-pi1_fieldset_etikettendaten .tx_powermail_pi1_fieldwrap_html, .tx-powermail-pi1_fieldset_konfektioniertaufrolle .tx_powermail_pi1_fieldwrap_html, .tx-powermail-pi1_fieldset_konfektioniertalsstapelware .tx_powermail_pi1_fieldwrap_html { padding-bottom:11px; background:transparent url(../img/line-3d.png) left bottom repeat-x; } /* last element without line */ .tx-powermail-pi1_fieldset_thermotransferfoliedaten .tx_powermail_pi1_fieldwrap_html_83, #powermaildiv_uid118, #powermaildiv_uid119, #powermaildiv_uid108, #powermaildiv_uid115 { padding-bottom:0; background:none; } /* misc * **************************************************************/ input, button, select, label { cursor:pointer; } input, textarea, button, select { font-family:Arial, Helvetica, sans-serif; } textarea { height:100px; line-height:1.5; /* 18px */ } input, textarea { padding:2px 2px; } option { /* das zurücksetzen von padding + margin verursacht zu kleine selectboxen. dies wird korrigiert */ padding:0 .83em 0 .33em; /* 0.83em=10px, 0.33em=4px */ } .oder { padding:1px 6px; color:#fff; background:#97c00e; font-weight:bold; } /* label * **************************************************************/ label { float:left; display:block; padding:0 0 2px 1px; font-weight:bold; } label.headline { float:none; display:inline-block; padding:0 0 2px 1px; font-weight:bold; } label.inline { float:none !important; display:inline !important; padding:2px 4px 1px 0; font-weight:normal; } .tx-powermail-pi1_fieldset_kontaktdaten label { color:#999; } .validation-failed { border:1px solid #97c00e !important; } /* input type="text", textarea, select * **************************************************************/ .powermail_text, textarea, select { width:429px; margin-bottom:2px; border:1px solid #ccc; color:#333; background:#fbfbfb; font-weight:normal; /* cursor:pointer; für elemente mit der klasse input-text reseten */ cursor:text; } .powermail_text_short { width:120px !important; } .powermail_text_shorter { width:80px !important; } select { /* select-boxen sind 6px kleiner als input type="text" felder, wird hiermit ausgeglichen */ width:435px; } .powermail_text:hover, .powermail_text:focus, textarea:hover, textarea:focus, select:hover, select:focus { border-color:#c0c0c0; outline:2px solid #eaeaea; color:#333; background:#fff; } /* radio-button * **************************************************************/ .tx_powermail_pi1_fieldwrap_html_radio_title, .radio-headline { font-weight:bold; } .powermail_radio_inner { padding-right:30px; line-height:1.2; /* clearing */ overflow:hidden; } .radio-label { padding:4px 0 4px 0; font-weight:normal; } .powermail_radio { float:left; margin:6px 6px 0 1px; } /* radio-button mit icon * **************************************************************/ #powermaildiv_uid122 .powermail_radio_inner, #powermaildiv_uid123 .powermail_radio_inner { float:left; width:93px; margin-top:20px; padding:56px 0 0 15px; } .powermail_radio_inner_uid122_0 { padding-top:44px !important; background:transparent url(../img/icons/a1.png) 0 0 no-repeat; } .powermail_radio_inner_uid122_1 { padding-top:44px !important; background:transparent url(../img/icons/a2.png) 0 0 no-repeat; } .powermail_radio_inner_uid122_2 { padding-top:44px !important; background:transparent url(../img/icons/a3.png) 0 0 no-repeat; } .powermail_radio_inner_uid122_3 { padding-top:44px !important; background:transparent url(../img/icons/a4.png) 0 0 no-repeat; } .powermail_radio_inner_uid122_4 { background:transparent url(../img/icons/i1.png) 0 0 no-repeat; } .powermail_radio_inner_uid122_5 { background:transparent url(../img/icons/i2.png) 0 0 no-repeat; } .powermail_radio_inner_uid122_6 { background:transparent url(../img/icons/i3.png) 0 0 no-repeat; } .powermail_radio_inner_uid122_7 { background:transparent url(../img/icons/i4.png) 0 0 no-repeat; } .powermail_radio_inner_uid123_0 { background:transparent url(../img/icons/s1.png) 0 0 no-repeat; } .powermail_radio_inner_uid123_1 { background:transparent url(../img/icons/s2.png) 0 0 no-repeat; } .powermail_radio_inner_uid123_2 { padding-right:40px !important; /* to push next element in second row */ background:transparent url(../img/icons/s3.png) 0 0 no-repeat; } .powermail_radio_inner_uid123_3 { background:transparent url(../img/icons/l1.png) 0 0 no-repeat; } .powermail_radio_inner_uid123_4 { background:transparent url(../img/icons/l2.png) 0 0 no-repeat; } .powermail_radio_inner_uid123_5 { background:transparent url(../img/icons/l3.png) 0 0 no-repeat; } .powermail_radio_inner_uid123_6 { background:transparent url(../img/icons/l4.png) 0 0 no-repeat; } /* checkbox * **************************************************************/ .checkbox-label { float:none; display:inline; font-weight:normal; } .powermail_check { /* gut für FF2+3, Netscape-7.1, schlecht für Safari-3.2-Win und. keine auswirkung auf Opera-9.01 * und IE7 ...da ist es auch ohne vertical-align gut. -> für Safari rückgängig machen ! */ vertical-align:middle; /* durch den margin ist es auch für den Safari-3.2-Win wieder einigermaßen ok */ margin-bottom:2px; } /* symbol fuer plichtfeld * **************************************************************/ span.powermail_mandatory { padding-left:4px; color:#97c00e; font-size:1.17em; /* 14px */ /* compensate bigger font-size */ line-height:1.2; } /* div wird eingeblendet wenn plichtfeld nicht ausgefuellt * **************************************************************/ div.powermail_mandatory_js { color:#97c00e; } /* description * **************************************************************/ .description-wrap { padding-top:4px; overflow:hidden; } .icon_info { padding:1px 3px 0 0; } dfn { color:#97c00e; font-style:normal; vertical-align:top; } /* title ausblenden * **************************************************************/ .title_101, .title_111 { display:none; } /* button standard (only grey shadow has rounded corners) <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ button, a.btn { display:-moz-inline-box; display:inline-block; margin-top:8px; border:none; color:#fff; font-size:1.17em; /* 14px */ font-weight:bold; vertical-align:middle; cursor:pointer; white-space:nowrap; /* bei eckigen buttons bleiben pixel-werte. mit em-werten liegt ansonsten der * shadow beim skalieren an den ecken nicht mehr auserhalb des buttons, da der * radius sich vergrößert */ -moz-border-radius:4px; -webkit-border-radius:4px; } button::-moz-focus-inner { /* overrides extra padding in FF */ padding:0; border:none; } button span, a.btn span { display:block; border:1px solid #d9d9d9; /* bei eckigen buttons bleiben pixel-werte. mit em-werten liegt ansonsten der * shadow beim skalieren an den ecken nicht mehr auserhalb des buttons, da der * radius sich vergrößert */ -moz-border-radius:0.33em; /* 4px */ -webkit-border-radius:0.33em; } button span span, a.btn span span { line-height:2.17em; /* 26px */ padding:0 1.00em; /* 12px */ border:none; background:#97c00e url(../img/btn-gradient.png) left bottom repeat-x; -moz-border-radius:0.25em; /* 3px */ -webkit-border-radius:0.25em; } button:hover span span, a.btn:hover span span, button:focus span span, a.btn:focus span span { color:#fff; background-color:#82a60c; /*background:#82a60c url(../img/btn-gradient.png) left top repeat-x;*/ } /* recent Opera versions 9 and below <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ html:first-child input[type='submit'], html:first-child input[type='button'], html:first-child input[type='reset'] { padding:2px 5px 2px 5px; } /* der Opera-9.01 stellt checkboxen und radiobutton mit einem voreingestellten margin dar * (wie der IE6+7), wird hierdurch ausgeglichen */ html:first-child input[type='radio'], html:first-child input[type='checkbox'] { margin:0 -2px 0 -2px; } /* bringt label-text neben input-feld, select-box uns so auf eine höhe */ html:first-child select { vertical-align:middle; } /* tables <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ table { border-collapse:collapse; } caption { padding:0.67em 0; /* 8px */ } td, th { padding:1px 0; } th { padding-right:7px; text-align:left; vertical-align:top; } th img { padding-top:3px; } /* google maps | lumogooglemaps (wegbeschreibung in infobox ziehen) <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ /* infobox */ .tx_lumogooglemaps_pi1_infobox { padding:0 0 120px 0; } /* wegbeschreibung box */ .gmapDir { position:absolute; z-index:100; top:185px; left:0; } .gmapDir input { width:200px; } /******************************************************************************************************************************************* #06 | footer __________________________________________________________________________________________________________________________________________*/ /* copyright <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .copyright { line-height:30px; color:#999; }