/*------------------------------------------------------------------------------------------------- [Reset Stylesheet] Project: blau.de Version: 2.0 Author: Eric Meyer -------------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; /*font-size: 100%;*/ font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline:0; } body { line-height:1; color:black; background:white; } ol, ul { list-style:none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } a:link, a:visited, a:hover, a:active { text-decoration:none; } /*------------------------------------------------------------------------------------------------- [Basic Stylesheet] For basics and elements outside #verticalMenu and #innerContent Project: blau.de Version: 2.0 -------------------------------------------------------------------------------------------------*/ html { font:1em arial,sans-serif; line-height:1em; } body { background:#fff; color:#44423e; font:0.7em Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif; line-height:1.25em; } small { display:block; font-size:0.85em; line-height:1.15em; } small.recommendationPrivacy { color:#a7b9C3; display:block; float:left; width:360px; margin-top:0; } input, select, textfield { border:1px solid #aaa; font:1em arial,sans-serif; } a:link, a:visited { color:#39a2ce; text-decoration:underline; } a:hover, a:active { color:#39a2ce; text-decoration:none; } a.arrow, .arrow a { background:url(/static/img/sprites/icons.png) 0 -157px no-repeat; padding:1px 0 1px 21px; } a.arrow:hover, .arrow a:hover { text-decoration:none; } h1, h2, h3, h4, h5, h6 { clear:both; color:#12455c; font-weight:bold; } h3.followed { clear:none; float:left; } p.follow { float:right; margin-top:26px; } h3.ico { padding:0 0 5px 35px; width:465px !important; } /* Bestellen und Freischalten */ h3.ico.faqCat263 { background:url(/static/img/sprites/icons.png) 0 -273px no-repeat; } /* Handy und SIM-Karte */ h3.ico.faqCat295 { background:url(/static/img/sprites/icons.png) 0 -313px no-repeat; } /* Guthaben */ h3.ico.faqCat325 { background:url(/static/img/sprites/icons.png) 0 -353px no-repeat; } /* Telefonieren */ h3.ico.faqCat326 { background:url(/static/img/sprites/icons.png) 0 -393px no-repeat; } /* Service */ h3.ico.faqCat86240 { background:url(/static/img/sprites/icons.png) 0 -433px no-repeat; } hr { border:none; border-bottom:1px solid #bdbfbe; clear:both; height:1px; margin-bottom:2em; margin-top:1em; } /*------------------------------------------------------------------------------------------------- [page container] */ #page { margin:0 auto; padding:10px 10px 0 10px; width:970px; } /*------------------------------------------------------------------------------------------------- [header] */ #header #logo { display:block; float:left; margin:0.5em 0 1em 0; } #header .search { float:right; margin:42px 20px 0 0; } #header .search form input.txt { float:left; margin-right:6px; padding:2px 3px; width:185px; } #header .search form .button { background:url(/static/img/sprites/buttons.png) 0 -59px; float:right; margin:0; padding:0 0 0 2px; } #header .search form .button input { background:url(/static/img/sprites/buttons.png) right -59px; border:none; height:20px; margin:0; padding:0 4px 3px 2px !important; } #header .search form .button input:hover { text-decoration:underline; } #header .search .links { clear:both; float:left; margin-bottom:0.5em; } #header .search .links a { margin-right:0.5em; } #header .search .inactive { color:#ccc; } /*------------------------------------------------------------------------------------------------- [topMenu] */ #topMenu { clear:both; float:left; font-size:1.3em; margin-bottom:1.4em; } #topMenu li, #topMenu li a, #topMenu li a span { float:left; } #topMenu li { display:block; height:50px; } #topMenu li a { background-image:url(/static/img/sprites/backgrounds.png); background-repeat:no-repeat; } #topMenu li.first a { background-position:0 -119px; } #topMenu li.last a { background-position:right -239px; } #topMenu li a.active, #topMenu li a:hover { background-position:0 -59px; } #topMenu li.first a.active, #topMenu li.first a:hover { background-position:0 -179px; } #topMenu li.last a.active, #topMenu li.last a:hover { background-position:right -299px; } #topMenu li a { color:#fff; display:block; font-weight:bold; text-decoration:none; text-transform:uppercase; } #topMenu li a span { background:url(/static/img/sprites/backgrounds.png) left -359px; display:block; height:35px; padding:15px 23px 0 20px; } #topMenu li.first a span { background:transparent; } #topMenu li.last a span { padding-left:22px; } /*------------------------------------------------------------------------------------------------- [content] */ #content { clear:both; float:left; width:961px; } /*--------------------------------------------------------------------------------------------- [serviceArea] */ #serviceArea { clear:both; float:right; margin-right:8px; width:255px; } #serviceArea .serviceBox { background:url(/static/img/sprites/backgrounds.png) -180px -479px no-repeat; float:right; margin-bottom:1em; width:255px; } #serviceArea .serviceBox h3 { background:url(/static/img/sprites/backgrounds.png) -180px -419px no-repeat; border:none; color:#fff; font-size:1.2em; height:30px; line-height:1.2em; padding:0.8em 0 0 0.8em; width:248px; } #serviceArea .serviceBox fieldset, #serviceArea .serviceBox ul, #serviceArea .serviceBox dl, #serviceArea .serviceBox img, #serviceArea .serviceBox p, #serviceArea .serviceBox hr, #serviceArea .serviceBox h4 { margin:0 1em; } #serviceArea .serviceBox .disclaimer { font-size:0.8em; } #serviceArea .serviceBox hr { margin-bottom:1em; } #serviceArea .serviceBox .bottom { background:url(/static/img/sprites/backgrounds.png) -180px -839px no-repeat; clear:both; height:22px; } #serviceArea .serviceBox .bottom a { float:right; margin:20px 22px 0 0; } #serviceArea .serviceBox .promotionText { font-weight:bold; margin-bottom: 10px; } #serviceArea .serviceBox dl { clear:both; float:left; } #serviceArea .serviceBox dl dt { clear:left; float:left; width:100px; } #serviceArea .serviceBox dl dd { float:left; width:130px; } #serviceArea .serviceBox dl h4, #serviceArea .serviceBox dl b { float:left; margin-left:0; } #serviceArea .serviceBox dl b { margin-top:1em;} #serviceArea .serviceBox dl.multiple { border-top:1px solid #ccc; margin-top:7px; padding-top:7px; } #serviceArea .serviceBox dl.multiple.borderless, #serviceArea .serviceBox dl.multiple.first { border-top:0; margin-top:0; padding-top:0; } #serviceArea .serviceBox dl.multiple dt { width:90px; } #serviceArea .serviceBox dl.multiple dd { width:140px; } #serviceArea .button, #serviceArea .button input, #serviceArea .button a { width:auto !important; } #serviceArea .button { background:url(/static/img/sprites/buttons.png) 0 -59px; float:right; margin-right:2px; padding:0 0 0 2px; } #serviceArea .button input, #serviceArea .button a { background:url(/static/img/sprites/buttons.png) right -59px; border:none; font-size:1em; height:20px; margin:0 !important; padding:0 4px 2px 2px !important; } #serviceArea .button a { color:#444; height:16px !important; padding:3px 7px 1px 6px !important; text-decoration:none; } #serviceArea .button input:hover, #serviceArea .button a:hover { text-decoration:underline; } /*------------------------------------------------------------------------------------- [accountLogin] */ #serviceArea #accountLogin label { clear:left; display:block; float:left; margin-bottom:3px; padding:3px 0; width:80px; } #serviceArea #accountLogin input, #serviceArea #accountLogin select { font-size:1em; } #serviceArea #accountLogin input { margin-bottom:6px; padding:2px 4px 1px 4px; width:140px; } #serviceArea #accountLogin select { float:left; margin-bottom:3px; padding:1px; height:20px; width:115px; } #serviceArea #accountLogin ul { margin:0px; } /*------------------------------------------------------------------------------------- [accountSummary] */ #serviceArea #accountSummary .button{ margin:23px 12px 0 0; line-height:20px; } #serviceArea #accountSummary .button a{ padding-bottom:3px!important;} /*------------------------------------------------------------------------------------- [bannerWeb] */ #serviceArea #bannerWeb p, #serviceArea #bannerWeb a { margin:0 18px; } #serviceArea #bannerWeb img { margin:5px 18px; } /*------------------------------------------------------------------------------------------------- [footer] */ #footer { border-top:1px solid #b3e2f6; clear:both; float:left; margin-top:1em; padding:10px 0; text-align:center; width:950px; } #footer ul { margin-bottom:2px; } #footer ul li { border-left:1px solid #ccc; display:inline; padding:0 2px 0 5px; margin:0; } #footer ul li.first { border:none; } #footer p { margin:5px 0; text-align:center; } #footer p a { border-left:1px solid #b3e2f6; margin-left:5px; padding-left:9px; text-decoration:underline; } #footer p a:hover { text-decoration:none; } #footer p a.first { border:0; padding:0; } /*------------------------------------------------------------------------------------------------- [disclaimer] */ .disclaimer { clear:both; color:#999; float:left; font-size:10px; margin-bottom:1em; width:950px; } /*------------------------------------------------------------------------------------------------- [Master Stylesheet] For elements inside: body > #page > #content > #contentArea Main child elements: #verticalMenu, #innerContent Project: blau.de Version: 2.0 -------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------- [verticalMenu] */ #verticalMenu { float:left; font-size:1.2em; width:164px; } #verticalMenu ul li a { background:url(/static/img/sprites/backgrounds.png) 0 -419px no-repeat; color:#323232; display:block; height:40px; text-decoration:none; width:164px; } #verticalMenu ul li a:hover { text-decoration:underline; } #verticalMenu ul li.first a { background-position:0 -539px; } #verticalMenu ul li.last a { background-position:0 -659px; height:45px; } #verticalMenu ul li.active a:link, #verticalMenu ul li.active a:visited, #verticalMenu ul li.active a:hover, #verticalMenu ul li.active a:active { background:url(/static/img/sprites/backgrounds.png) 0 -479px no-repeat; color:#fff; text-decoration:none; } #verticalMenu ul li.first.active a:link, #verticalMenu ul li.first.active a:visited, #verticalMenu ul li.first.active a:hover, #verticalMenu ul li.first.active a:active { background-position:0 -599px; } #verticalMenu ul li.last.active a:link, #verticalMenu ul li.last.active a:visited, #verticalMenu ul li.last.active a:hover, #verticalMenu ul li.last.active a:active { background-position:0 -719px; } #verticalMenu ul li a span { background:url(/static/img/sprites/backgrounds.png) 1px -779px no-repeat; display:block; padding:14px 0 0 13px; } #verticalMenu ul li.first a span, #verticalMenu ul li.active a span { background:transparent; } #verticalMenu ul li.last a span { padding-top:13px; } #verticalMenu ul li.active ul { background:url(/static/img/sprites/backgrounds.png) no-repeat 0 -840px; padding:5px 0 10px 0; } #verticalMenu ul li.active ul a:link, #verticalMenu ul li.active ul a:visited, #verticalMenu ul li.active ul a:hover, #verticalMenu ul li.active ul a:active { background:none; color:#323232; height:auto; } #verticalMenu ul li.active ul a.active, #verticalMenu ul li.active ul a:hover { text-decoration:underline; } #verticalMenu ul li.active ul a span { font-size:11px; padding:3px 0 3px 23px; } /*------------------------------------------------------------------------------------------------- [innerContent] */ #innerContent { display:block; float:left; font-size:1.1em; line-height:1.5em; margin-left:18px; width:500px; } #innerContent.full { margin-left:8px; width:950px; } #innerContent.large { width:664px; } #innerContent.large hr, #innerContent.large h3 { width:664px; } /*--------------------------------------------------------------------------------------------- [headlines] */ #innerContent h1 { font-size:1.5em; letter-spacing:0.05em; margin-bottom:0.75em; } #innerContent h2 { border-bottom:1px solid #ccc; font-size:1em; margin:-0.05em 0 1.5em 0; padding:0 0 0.5em 1px; } #innerContent h2.bigHead { padding-top:1em; } #innerContent h2 b { float:left; } #innerContent h2 a { float:right; } #innerContent h3, img.headline { border-top:1px solid #ccc; font-size:1.15em; margin:1em 0 0.75em 0 ; padding-top:0.75em; width:500px; } #innerContent h3.wrapper { float:left; } #innerContent h3.wrapper b { float:left; } #innerContent h3.wrapper p { float:right; font-size:12px; margin-top:1px; } #innerContent h3.wrapper .buttonSmall { margin-bottom:0 !important; margin-left:0.75em !important; } #innerContent h3.wrapper .helpWrapper { float:left; margin:-1px 0 0 0.75em; } #innerContent h3.bigBottom { margin-bottom:1.5em; } #innerContent h4 { font-size:1em; margin:5px 0 2px 0; } /*--------------------------------------------------------------------------------------------- [paragraph] */ #innerContent p { margin-bottom:0.75em; } #innerContent p img { padding:2px 10px 0 0; } /*--------------------------------------------------------------------------------------------- [links] */ #innerContent a.arrowWide, #innerContent .arrowWide a { background:#e5f2fb url(/static/img/sprites/icons.png) 0 -157px no-repeat; color:#27485b; display:block; margin:2px 0; padding:0 0 1px 22px; text-decoration:none; } #innerContent a.arrowWide:hover, #innerContent .arrowWide a:hover { background-color:#cfe8fc; text-decoration:none; } #innerContent a.pdf,#innerContent a.csv { background:url(/static/img/sprites/icons.png) 0 -238px no-repeat; height:20px; line-height:20px; padding:2px 0 2px 22px; vertical-align:middle; } #innerContent a.csv { background-position:0 -800px; } /*--------------------------------------------------------------------------------------------- [lists] */ #innerContent ol { list-style:decimal outside; margin-left:20px; } #innerContent ol li { padding:2px 0; } #innerContent ul { list-style:none; margin:0 0 1.5em 3px; } #innerContent ul li { background:url(/static/img/backgrounds/li.gif) 0 5px no-repeat; clear:both; padding:0 0 2px 10px; } #innerContent ul ul { margin-left:2em; } #innerContent ul.useChecked { list-style:none; margin-left:1px; } #innerContent ul.useChecked li { background:url(/static/img/backgrounds/li_checked.gif) 0 0 no-repeat; padding-left:18px; } #innerContent ul.useDots, #innerContent ul.useDots ul { list-style:outside disc; margin-left:3px; padding-left:13px; } #innerContent ul.useDots li { background:transparent; padding-left:3px; } #innerContent ul.arrowWide,#innerContent ul.arrow { list-style:none; margin:0; } #innerContent ul.arrowWide li,#innerContent ul.arrow li { background:transparent; padding:0; } #innerContent ul.pdf,#innerContent ul.pdf li { background: none; list-style:none; } #innerContent dl { clear:both; float:left; } #innerContent dl dt { clear:left; float:left; margin-right:10px; width: 65px;} #innerContent dl dd { float:left; } #innerContent dl.hover dt { height:25px; } #innerContent dl.hover dd { width:80px; } /*--------------------------------------------------------------------------------------------- [images] */ #innerContent img { margin-bottom:0.75em; } /*--------------------------------------------------------------------------------------------- [fonts] */ strong { font-weight:bold; } /*--------------------------------------------------------------------------------------------- [helpWrapper] */ #innerContent .helpWrapper { font-size:12px; font-weight:normal; margin:0 5px; } #innerContent .helpWrapper ul li { background:none!important; list-style-type:disc; list-style-position:outside; margin-left:10px; } #innerContent .helpWrapper .helpHandle { background:url(/static/img/sprites/icons.png) 0 -80px no-repeat; display:block; width:20px; height:20px; } #innerContent .helpWrapper a.help span.hoverWrapper { background:url(/static/img/backgrounds/help.png) left top no-repeat; color:#000; height:auto; margin:-42px 0 0 25px; position:absolute; visibility:hidden; width:245px; } #innerContent .helpWrapper a.help span.hoverWrapper .content { padding:15px 10px 0 35px; } #innerContent .helpWrapper a.help span.hoverWrapper p { padding:0; } #innerContent .helpWrapper a.help span.hoverWrapper span.bottom { background:url(/static/img/backgrounds/help.png) left -387px no-repeat; float:left; height:10px; margin:0 0 -20px 0; padding:0; position:relative; width:246px; z-index:101; } #innerContent .helpWrapper a.help:hover { cursor:default; } #innerContent .helpWrapper a.help:hover span.hoverWrapper { visibility:visible; } /*--------------------------------------------------------------------------------------------- [tip] */ #innerContent div.tip { background:#fffbcc; border:1px solid #e6db55; float:left; margin:1em 0; padding:8px 10px; width:480px; } #innerContent.large div.tip { width:644px; } #innerContent div.tip h6 { font-size:1.1em; padding-bottom:5px; width:auto; } #innerContent div.tip img { float:left; margin-right:10px; } #innerContent div.tip p { clear:none; float:left; margin:0; width:auto; } #innerContent .bottom { height:0; margin:0; } #innerContent div.tip.blau { background:#e5f2fb; border-color:#cfe8fc; margin-bottom:2.2em; } /*--------------------------------------------------------------------------------------------- [deep] */ #innerContent div.deep { clear:both; height:20px; margin:0 0 1em 0;} #innerContent div.deep a { background:url(/static/img/sprites/icons.png) 0 -157px no-repeat; clear:right; display:block; float:right; font-weight:bold; padding-left:22px; } #innerContent div.deep p { clear:right; float:left; margin-top:1em; } #innerContent div.deep p.light { color:#777; } .bgGradient { background:url(/static/img/sprites/gradients.png) repeat-x left top; padding:0 10px 10px 10px; } /*--------------------------------------------------------------------------------------------- [table] */ #innerContent table { border-collapse:collapse; clear:both; margin-bottom:1em; width:100%; } #innerContent table tr:hover { background:#effeff; cursor:default; } #innerContent table.tableHeaderTable tr:hover { background:#e5f2fb; } #innerContent table tr.result { background:#effeff; } #innerContent table tr th, #innerContent table tr td { color:#12455c; height:23px; padding:0 0.8em; vertical-align:middle; } #innerContent table tr th { background:#e5f2fb; font-weight:bold; } #innerContent table tr th table { margin:0; } #innerContent table tr th table tr td { padding:0; } #innerContent table tr th table tr td a { color:#444; font-weight:bold; text-decoration:none; } #innerContent table tr th table tr td img { margin:1px 0 0 0; } #innerContent table tr th.s{width:100px;} #innerContent table tr th.m{width:250px;} #innerContent table tr th .helpWrapper { float:right; margin:3px -5px 0 0; } #innerContent table tr th .helpWrapper .helpHandle { background:url(/static/img/sprites/icons.png) 0 -720px no-repeat; display:block; height:14px; width:14px; } #innerContent table tr th .helpWrapper a.help { float:left; } #innerContent table tr th .helpWrapper a.help span.hoverWrapper { margin: -27px 0 0 15px; } #innerContent table tr td { border-bottom:1px solid #e5f2fb; white-space:nowrap; } #innerContent table tr td.center { text-align:center; } #innerContent table tr td.price { text-align:right; } #innerContent table tr.tablePages:hover { background:none; } #innerContent table tr.tablePages td { text-align:center; } #innerContent table tr.tablePages td a, #innerContent table tr.tablePages td b { margin:0.2em; padding:0.5em; } /*--------------------------------------------------------------------------------------------- [table.callview] */ #innerContent table.callview tr.totalAmount td { border-bottom:none; border-top:2px solid #e5f2fb; font-weight:bold!important; } #innerContent table.callview tr td.long { white-space:normal; } #innerContent table.callview .KostenColumnHeader td, #innerContent table.callview .DauerColumnHeader td, #innerContent table.callview .MengeColumnHeader td { text-align:right; } /*--------------------------------------------------------------------------------------------- [orderSteps] */ #innerContent #orderSteps { clear:both; list-style-position:inside; margin:0 0 4em 0; } #innerContent #orderSteps li { border-left:1px solid #ccc; float:left; margin-left:10px; padding-left:8px; } #innerContent #orderSteps li.first { background:none; border-left:0; margin-left:0; padding-left:0; } /*--------------------------------------------------------------------------------------------- [numberContainer] */ #innerContent .numberContainer { border:1px solid #ccc; clear:both; color:#12455c; display:block; float:left; font-size:1.5em; height:71px; text-decoration:none; margin-bottom:1em; padding:0 20px; width:620px; } #innerContent a.numberContainer:hover { background-color:#f2fafc; } #innerContent .numberContainer.half { background:url(/static/img/sprites/buttons.png) right -347px no-repeat; clear:none; font-size:1.25em; font-weight:bold; height:auto; margin-right:0; padding:15px 20px; width:280px; } #innerContent .numberContainer.half.right { float:right; } #innerContent .numberContainer.ico { background-image:url(/static/img/sprites/icons.png); background-repeat:no-repeat; padding-left:85px; width:555px; } #innerContent .numberContainer.ico.search { background-position:20px -470px; } #innerContent .numberContainer.ico.mnp { background-position:20px -550px; } #innerContent .numberContainer.btn { background:url(/static/img/sprites/buttons.png) right -280px no-repeat; } #innerContent .numberContainer p { float:left; margin:25px 0 0 0; } #innerContent .numberContainer h2 { border:0; clear:none; float:left; margin:26px 0 0 15px; padding:0; } #innerContent .numberContainer b { background-color:yellow; } #innerContent .numberContainer img { float:right; margin-top:20px; } #innerContent .numberContainer small { font-size:0.75em; margin:20px 0 0 0; } #innerContent .numberContainer input.text { margin:19px 10px 0 20px; width:2.5em; } #innerContent .numberContainer input.submit { border:0; float:right; margin:15px 0 0 0; width:auto; } /*--------------------------------------------------------------------------------------------- [twoCol] */ #innerContent .twoCol { clear:both; float:left; } #innerContent .twoCol.border { border-top:1px solid #ccc; padding-top:1em; } #innerContent .twoCol .col { border-right:1px solid #ccc; float:left; margin-bottom:1em; padding-right:10px; width:230px; } #innerContent .twoCol .col.right { border-left:1px solid #ccc; border-right:none; margin-left:-1px; padding:0 0 0 15px; width:244px; } #innerContent .twoCol .col h3 { border-top:none; float:left; margin-top: 0; padding:0; width:auto; } #innerContent .twoCol .col .helpWrapper { float:right; } #innerContent .twoCol .col .block { margin-right:2em; } #innerContent .twoCol .col .block h4 { margin-top:0; } #innerContent .twoCol .col form {} #innerContent .twoCol .col form input { margin:0 0 10px 0; width:160px; } #innerContent .twoCol .col form label { margin:0 0 5px 0; text-align:left; width:160px; } #innerContent .twoCol .col form .button { clear:both; float:left; } #innerContent .twoCol .col table { margin-bottom:0; } #innerContent .twoCol .col table tr td { padding-right:0; } #innerContent .twoCol .col .thin p { width:200px; } #innerContent.large .twoCol .col, #innerContent.large .twoCol .col h3 { width:315px; } /*--------------------------------------------------------------------------------------------- [threeCol] */ .threeCol { clear:both; margin-bottom:2em; } .threeCol .col { float:left; margin: 0 30px 2em 30px; width:200px !important; } .threeCol .col.left { margin:0; } .threeCol .col.right { float:right; margin:0; } .threeCol .col h3 { width:200px !important; } .threeCol .col ul, .threeCol .col ol { margin-bottom:0.75em !important; } .threeCol .col img { float:right; margin-top:-1em; } .threeCol .col img.right { margin-top:10px; } .threeCol .col p.left { width:140px; } .threeCol .buttonSmall { float:left; margin:1em 0!important; } /*--------------------------------------------------------------------------------------------- [footnote] */ .footnote { clear:both; border-top:1px solid #bdbfbe; float:left; font-size:11px; margin-top:15px; padding-top:1em; width:100%;} /*--------------------------------------------------------------------------------------------- [thin] */ .thin { margin-bottom:0.5em; } .thin .helpWrapper { float:right; } /*--------------------------------------------------------------------------------------------- [accordion] */ #innerContent dl.accordionContent { width:510px; } #innerContent dl.accordionContent dt { float:none; width:auto; } #innerContent dl.accordionContent dd dt { width:472px; } #innerContent dl.accordionContent dt a { background:url(/static/img/sprites/icons.png) 0 0 no-repeat; color:#27485b; cursor:pointer; display:block; text-decoration:none; margin:2px 0 3px 0; padding-left:26px; } #innerContent dl.accordionContent dt a span { background:#e5f2fb; display:block; padding-left:5px; } #innerContent dl.accordionContent dt a:hover span { background:#cfe8fc; } #innerContent dl.accordionContent dt a.on { background:url(/static/img/sprites/icons.png) 0 -40px no-repeat; font-weight:bold; } #innerContent dl.accordionContent dt a.on span { background:#cfe8fc; } #innerContent dl.accordionContent dd { margin:10px 0 25px 27px; } /*------------------------------------------------------------------------------------- [text] */ #innerContent dl.accordionContent dd div.text { margin-right:27px; } #innerContent dl.accordionContent dd div.text a { display:inline; text-decoration:underline; } #innerContent dl.accordionContent dd div.text a:hover { text-decoration:none; } /*------------------------------------------------------------------------------------- [form] */ #innerContent dl.accordionContent dd div.rating { margin:10px 27px 0 0; padding:2px 10px; border:1px solid #cfe8fc; } #innerContent dl.accordionContent dd div.rating div.form { padding: 0.5em 0; } #innerContent dl.accordionContent dd div.rating div.form p { color:#39a2ce; float:left; margin:0; } #innerContent dl.accordionContent dd div.rating div.form .buttonSmall { float:left; margin-left:0.75em; } /*--------------------------------------------------------------------------------------------- [homepage] */ img.home#teaser { float:left; } .home#order a { float:right; margin: -55px 15px 10px 0; } /*--------------------------------------------------------------------------------------------- [promotion area] */ #innerContent .promotion .teaser a { margin: 0 0 1em 1em !important; } #innerContent .promotion img { margin-bottom:0; } #innerContent .promotion table { float:left; margin-left:0.8em; width:300px; } #innerContent .promotion table tr { background-color:#d5f0fb; } #innerContent .promotion table tr.even { background-color:transparent; } #innerContent .promotion table tr td { border:none; } #innerContent .promotion a { float:right; text-decoration:none; } #innerContent .promotion img#orderEinheit { margin-top:6em; } #innerContent .promotion img#orderKlassik { margin-top:6em; } /*--------------------------------------------------------------------------------------------- [compare tariff] */ #innerContent .compareTariff .tariff { width:230px; } #innerContent .compareTariff .tariff.left { border-right:1px solid #ccc; margin-right:10px; padding-right:20px; } #innerContent .compareTariff a { text-decoration:none; } #innerContent .compareTariff .tariff .left, #innerContent .compareTariff .tariff .right { float:none; } #innerContent .compareTariff .tariff h2 { border:none; font-size:1.25em; margin-bottom:0; } #innerContent .compareTariff .tariff ul { font-size:11px; line-height:1.3em; margin-bottom:0; } #innerContent .compareTariff .tariff .col.second .block.right { margin-top:20px; } /*--------------------------------------------------------------------------------------------- [compare tariff #innerContent.large] */ #innerContent.large .compareTariff .tariff { padding:30px 25px 15px 25px; width:272px; } #innerContent.large .compareTariff .tariff.right { float:left; } #innerContent.large .compareTariff .tariff ul { font-size:12px; line-height:1.5em; } /*--------------------------------------------------------------------------------------------- [period] */ #period h4 { float:left; width:auto; } #period .buttonSmall { margin:0.4em 0 1em 1em !important; } #period form { border-top:1px solid #ccc; clear:left; padding:10px 0px 20px 111px; } #period form label { clear:none !important; margin:4px 0 0 0 !important; width:auto !important; } #period form input.date { margin-right:10px; width:80px !important; } #period form .button { float:left; } /*--------------------------------------------------------------------------------------------- [amount selection] */ #amountSelectionForm { float:left; } #amountSelectionForm select { height:26px; margin-left:0 !important; width:75px !important; } #amountSelectionForm .button { clear:none !important; } /*--------------------------------------------------------------------------------------------- [direct topup links] */ .directTopupLinks { clear:left; } .directTopupLinks .directTopupLink { float:left; margin-right:10px; } .directTopupLinks .directTopupLink.last { margin-right:0; } .directTopupLinks .helpWrapper { float:right; margin:-30px 10px 0 0!important; } /*--------------------------------------------------------------------------------------------- [filter input] */ #innerContent .sideBySide { margin-left:0; } #innerContent .sideBySide label { clear:none !important; margin:0 0 0 4px; text-align:left; width:120px !important; } #innerContent .sideBySide input { margin:3px 0 0 0; width:auto; } /*--------------------------------------------------------------------------------------------- [table links] */ .tableLinks { float:right; margin:-2.5em 0 1.5em 0 !important; } /*--------------------------------------------------------------------------------------------- [sand glass] */ #sandGlass img { float:left; margin-right:10px; } /*--------------------------------------------------------------------------------------------- [tag cloud] */ .tagCloud { border-top:1px solid #ccc; clear:both; margin:2em 0; padding-top:1em; text-align:center; width:100%; } .tagCloud a { float:none !important; padding:0 0.5em; text-decoration:none; } .tagCloud a:hover { text-decoration:underline; } .tagCloud h2,.tagCloud h3,.tagCloud h4 { border:none !important; display:inline; white-space:nowrap; } .tagCloud h2 {font-size:1.5em !important;} .tagCloud h3 {font-size:1.25em !important; padding-top:0!important; } .tagCloud h4 {font-size:1em !important;} /*--------------------------------------------------------------------------------------------- [google map] */ #map { border:1px solid #ccc; border-width: 1px 0; margin:3.5em 0 1em 0; } /*--------------------------------------------------------------------------------------------- [shopTeaser] */ #innerContent .shopTeaser { border-top:1px solid #ccc; margin-top:1em; padding-top:1.5em; } #innerContent .shopTeaser .image { display:block; float:left; width:120px; } #innerContent .shopTeaser .content { float:left; width:380px; } #innerContent .shopTeaser h3 { border-top:0; clear:none; margin:-2px 0 0 0; padding-top:0; width:auto; } #innerContent .shopTeaser .partner { font-size:0.8em; font-weight:bold; margin:-0.35em 0 0.75em 1px; } #innerContent .shopTeaser .buttonSmall { float:right; } /*--------------------------------------------------------------------------------------------- [shopContent] */ .shopContent img { float:right; margin-left:1em; } .shopContent .partnerLogo img { margin:-3.5em 0 0 0; } .shopContent table td { height:auto!important;margin-right:1em; width:auto; } .shopContent table tr:hover { background-color:#fff !important; } .shopContent table td.even { background:#effeff; } .shopContent table td .checked { background:url(/static/img/sprites/icons.png) 0 -199px no-repeat; float:left; height:15px; width:15px; } /*--------------------------------------------------------------------------------------------- [landingpage] */ #landingpage .teaser { float:left; margin-bottom:-43px !important; } #landingpage img.order { float:right; margin: 0 20px 0 0; } #landingpage .threeCol { padding-top:20px; } #landingpage .partnerlogo { float:right; margin-top:-40px; } /*------------------------------------------------------------------------------------------------- [Form Stylesheet] For everything related with forms. Project: blau.de Version: 2.0 -------------------------------------------------------------------------------------------------*/ input:focus, textarea:focus, select:focus { border-color:#777 !important; } /*------------------------------------------------------------------------------------------------- [innerContent] */ #innerContent label { clear:both; float:left; margin:2px 3px 0 0; text-align:right; width:10em; } #innerContent label.iRadioLabel, #innerContent label.iCheckboxLabel, #innerContent label.iRadioLabelInline, #innerContent label.iCheckboxLabelInline, #innerContent label.iRadioLabelBlock, #innerContent label.iCheckboxLabelBlock { clear:none; margin:0 30px 15px 0; text-align:left; width:440px; } #innerContent label.iCheckboxLabel { margin-bottom:0; } #innerContent label.iCheckboxLabelBlock { margin-right:0; width:475px; } #innerContent label.iRadioLabel { width:auto; } #innerContent label.iRadioLabelInline, #innerContent label.iCheckboxLabelInline { margin-right:5px; width:auto; } #innerContent label.wide { width:15em; } #innerContent.large label.iRadioLabelBlock, #innerContent.large label.iCheckboxLabelBlock { width:600px; } #innerContent label.iRadioLabel b, #innerContent label.iCheckboxLabel b, #innerContent label.iRadioLabelBlock b, #innerContent label.iCheckboxLabelBlock b { font-weight:normal; } #innerContent input, #innerContent select, #innerContent textarea { border:1px solid #aaa; float:left; margin:0 0.5em 10px; padding:4px 5px; width:200px; } #innerContent select { padding:2px 2px 2px 0; width:212px; } #innerContent input.iRadio, #innerContent input.iCheckbox { border:0; margin:3px 8px 0 0; padding:0; width:auto; } #innerContent #passwordToggleCheckbox { margin-left:132px!important; } #innerContent .reverseSwitch legend, #innerContent .container .inlineElements { margin-left:131px; } #innerContent .reverseSwitch legend { padding-bottom:15px; } #innerContent legend label { display:block; float:none; margin:10px 0; text-align:left; width:auto; } #innerContent form div.bigBottom { margin-bottom:1.5em; } /*------------------------------------------------------------------------------------------------- [fieldset] */ #innerContent form fieldset.lightBlue { background:#e5f2fb; border:1px solid #cfe8fc; margin-bottom:10px; padding:20px 0 10px 0; } #innerContent form fieldset.lightBlue input { width:275px; } #innerContent form fieldset.lightBlue input.half { width:125px; } /*------------------------------------------------------------------------------------------------- [small/.inputHint] */ #innerContent form small, #innerContent form strong.inputHint { float:left; line-height:2em; margin:2px 0 0 5px; width:140px; } #innerContent form strong.inputHint { margin-top:0; width:auto; } #innerContent.large form small { width:auto; } /*------------------------------------------------------------------------------------------------- [dfn] */ #innerContent form dfn { float:left; margin:2px 0 0 5px; } /*------------------------------------------------------------------------------------------------- [sizes] */ /* input */ #innerContent input.xxxsmall { width:63px; } #innerContent input.small, #innerContent input.xxsmall { margin-right:0; width:50px; } #innerContent input.middle, #innerContent input.xsmall { margin-right:0; width:132px; } #innerContent input.long { margin-left:0; width:400px; } /* select */ #innerContent select.xxxsmall { width:124px; } #innerContent select.small, #innerContent select.xxsmall { width:75px; } #innerContent select.middle, #innerContent select.xsmall { margin:0 10px 5px; width:55px; } #innerContent select.large { margin-right:0; width:367px; } /* textarea */ #innerContent textarea.large { margin-right:0; width:355px; } /*------------------------------------------------------------------------------------------------- [buttons] */ #innerContent .buttonAreaNextBack { clear:both; float:left; margin-bottom:1em; width:100%; } #innerContent .buttonNext, #innerContent .button { background:url(/static/img/sprites/buttons.png) right top no-repeat; float:right; line-height:32px; padding:0 2px 0 0; } #innerContent .buttonNext input, #innerContent .button input, #innerContent .button a { background:url(/static/img/sprites/buttons.png) left top no-repeat; border:0; color:#333; margin:0; padding:5px 4px 4px 7px; width:auto; } #innerContent .button a { float:left; line-height:17px; text-decoration:none; } #innerContent .button.topup input { width:auto !important; } #innerContent .buttonBack { background:url(/static/img/sprites/buttons.png) right -179px no-repeat; float:left; line-height:20px; margin-top:6px; padding:0 3px 0 0; } #innerContent .buttonBack a { background:url(/static/img/sprites/buttons.png) left -179px no-repeat; color:#333; float:left; font-size:0.9em; margin:0; padding:0 4px 0 22px; text-decoration:none; } #innerContent .buttonNext input:hover, #innerContent .buttonBack a:hover, #innerContent .button input:hover, #innerContent .button a:hover, #serviceArea .button input:hover, #serviceArea .button a:hover, #header .button input:hover, #header .button a:hover { cursor:pointer; text-decoration:underline; } /*------------------------------------------------------------------------------------------------- [small buttons] */ #innerContent .buttonSmall { background:url(/static/img/sprites/buttons.png) left -59px repeat; display:block; float:left; font-size:11px; font-weight:normal; height:20px; margin:0 1em 1em 0; padding:0 0 0 2px; } #innerContent .buttonSmall a { background:url(/static/img/sprites/buttons.png) right -59px repeat; display:block; height:18px; padding:1px 5px; } #innerContent .buttonSmall a:link, #innerContent .buttonSmall a:visited { color:#444; text-decoration:none; } #innerContent .buttonSmall a:hover, #innerContent .buttonSmall.active a { color:#444; text-decoration:underline; } /*------------------------------------------------------------------------------------------------- [helpHover] */ #innerContent form .helpWrapper { float:left; margin-top:2px; } /*------------------------------------------------------------------------------------------------- [errors] */ #innerContent .error { clear:left; } #innerContent .error legend { color:#e95b2a; font-weight:bold; margin-bottom:0.75em; } #innerContent .error input, #innerContent .error select, #innerContent .error textarea { border:1px solid #e68207; } #innerContent .error.full .errorList { width:100%; } #innerContent .errorList { border:2px solid #e95b2a; border-width:2px 0 1px 0; margin:0 0 20px 0; padding:8px 0 6px 0; width:100%; } #innerContent .errorList li { background-image:none; color:#c66208; margin-left:10px; padding:0; } /*------------------------------------------------------------------------------------------------- [Useful Stylesheet] Project: blau.de Version: 2.0 -------------------------------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------------------------- [floating] */ .left { float:left; } .right { float:right; } .clear { clear:both; } br.clear { clear:both; display:block; font-size:1px; height:1px; margin:0; padding:0; line-height:0; } /*------------------------------------------------------------------------------------------------- [distance] */ .left.followed { margin-right:25px; } /*------------------------------------------------------------------------------------------------- [visibility] */ .show { display:block !important; } .showInline { display:inline !important; } .hide { display:none !important; } /*------------------------------------------------------------------------------------------------- [text] */ .light { color:#a7b9c3; font-weight:normal; } .small { font-size:11px !important; } /*------------------------------------------------------------------------------------------------- [margin] */ .small-margin { margin:10px 10px 0 0; }