/*--------------------------------------------- [Style Stylesheet] ----------------------------------------------*/ @charset "utf-8"; html { overflow-x: hidden; } body { width: 100%; height: 100%; background: #ffffff url(../images/body-background.jpg) no-repeat fixed center; font-family: Verdana, Arial, Sans-serif; font-size: 11px; } @font-face { font-family: utility; src: url("../fonts/UtilityPro.eot") /* EOT file for IE */ } @font-face { font-family: utilityBold; src: url("../fonts/UtilityPro-Bold.eot") /* EOT file for IE */ } @font-face { font-family: utility; src: url("../fonts/UtilityPro.ttf") /* TTF file for CSS3 browsers */ } @font-face { font-family: utilityBold; src: url("../fonts/UtilityPro-Bold.ttf") /* TTF file for CSS3 browsers */ } /* JQuery UI Tabs - Needed for the TABs */ .ui-tabs { position: relative; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ .ui-tabs .ui-tabs-nav { margin: 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; border-bottom: 0 !important; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 0px; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs .ui-tabs-panel { display: block; border-width: 0; background: none; } .ui-tabs .ui-tabs-hide { display: none !important; } #wrapper { position: relative; } #container { position: relative; margin:0 auto; width:969px; height: auto; background: #ffffff; } a, a:link, a:active, a:visited { text-decoration: none; color: #B10303; } a:hover { text-decoration: underline; color: #B10303; } #logo { position: absolute; left: 33px; top: 18px; } /* NAVIGATION: only change the background height for other pages in the #navigation. See :hover statements for the heights. */ #navigation { position: absolute; left: 8px; top: 64px; margin: 0 auto; width: 995px; height: 44px; background: url(../images/navigation-background.png) no-repeat 0 0px; z-index: -300; } #navigation2 { position: absolute; left: 8px; top: 64px; margin: 0 auto; width: 995px; height: 44px; background: url(../images/navigation-background.png) no-repeat 0 -45px; z-index: -300; } #navigation3 { position: absolute; left: 8px; top: 64px; margin: 0 auto; width: 995px; height: 44px; background: url(../images/navigation-background.png) no-repeat 0 -90px; z-index: -300; } #navigation ul { position: absolute; top: 0; left: 430px; float: right;} #navigation ul li { height: 44px; display: block; float: left; font-family: Verdana, Arial, Sans-serif; font-size: 11px; color: #B10303; } #navigation ul li#basis { padding-top: 6px; width: 109px; text-align: center; } #navigation ul li#familie { padding-top: 6px; width: 117px; text-align: center; } #navigation ul li#entertainment { padding-top: 6px; width: 159px; text-align: center; } #navigation ul li#top { padding-top: 6px; width: 99px; text-align: center; } #navigation ul li#basis:hover { background: url(../images/navigation-background.png) no-repeat -430px 0; } #navigation ul li#familie:hover { background: url(../images/navigation-background.png) no-repeat -539px -45px; } #navigation ul li#entertainment:hover { background: url(../images/navigation-background.png) no-repeat -656px -90px; } #navigation ul li#top:hover { background: url(../images/navigation-background.png) no-repeat -815px -135px; } #navigation ul li.active, #navigation ul li:hover { color: #ffffff; text-decoration: none; cursor: pointer; } #navigation2 ul { position: absolute; top: 0; left: 430px; float: right;} #navigation2 ul li { height: 44px; display: block; float: left; font-family: Verdana, Arial, Sans-serif; font-size: 11px; color: #D85416; } #navigation2 ul li#basis { padding-top: 6px; width: 109px; text-align: center; } #navigation2 ul li#familie { padding-top: 6px; width: 117px; text-align: center; } #navigation2 ul li#entertainment { padding-top: 6px; width: 159px; text-align: center; } #navigation2 ul li#top { padding-top: 6px; width: 99px; text-align: center; } #navigation2 ul li#basis:hover { background: url(../images/navigation-background.png) no-repeat -430px 0; } #navigation2 ul li#familie:hover { background: url(../images/navigation-background.png) no-repeat -539px -45px; } #navigation2 ul li#entertainment:hover { background: url(../images/navigation-background.png) no-repeat -656px -90px; } #navigation2 ul li#top:hover { background: url(../images/navigation-background.png) no-repeat -815px -135px; } #navigation2 ul li.active, #navigation ul li:hover { color: #ffffff; text-decoration: none; cursor: pointer; } #navigation3 ul { position: absolute; top: 0; left: 430px; float: right;} #navigation3 ul li { height: 44px; display: block; float: left; font-family: Verdana, Arial, Sans-serif; font-size: 11px; color: #D85416; } #navigation3 ul li#basis { padding-top: 6px; width: 109px; text-align: center; } #navigation3 ul li#familie { padding-top: 6px; width: 117px; text-align: center; } #navigation3 ul li#entertainment { padding-top: 6px; width: 159px; text-align: center; } #navigation3 ul li#top { padding-top: 6px; width: 99px; text-align: center; } #navigation3 ul li#basis:hover { background: url(../images/navigation-background.png) no-repeat -430px 0; } #navigation3 ul li#familie:hover { background: url(../images/navigation-background.png) no-repeat -539px -45px; } #navigation3 ul li#entertainment:hover { background: url(../images/navigation-background.png) no-repeat -656px -90px; } #navigation3 ul li#top:hover { background: url(../images/navigation-background.png) no-repeat -815px -135px; } #navigation3 ul li.active, #navigation ul li:hover { color: #ffffff; text-decoration: none; cursor: pointer; } #navigation4 { position: absolute; left: 8px; top: 64px; margin: 0 auto; width: 995px; height: 44px; background: url(../images/navigation-background.png) no-repeat 0 -135px; z-index: -300; } #navigation4 ul { position: absolute; top: 0; left: 430px; float: right;} #navigation4 ul li { height: 44px; display: block; float: left; font-family: Verdana, Arial, Sans-serif; font-size: 11px; color: #D85416; } #navigation4 ul li#basis { padding-top: 6px; width: 109px; text-align: center; } #navigation4 ul li#familie { padding-top: 6px; width: 117px; text-align: center; } #navigation4 ul li#entertainment { padding-top: 6px; width: 159px; text-align: center; } #navigation4 ul li#top { padding-top: 6px; width: 99px; text-align: center; } #navigation4 ul li#basis:hover { background: url(../images/navigation-background.png) no-repeat -430px 0; } #navigation4 ul li#familie:hover { background: url(../images/navigation-background.png) no-repeat -539px -45px; } #navigation4 ul li#entertainment:hover { background: url(../images/navigation-background.png) no-repeat -656px -90px; } #navigation4 ul li#top:hover { background: url(../images/navigation-background.png) no-repeat -815px -135px; } #navigation4 ul li.active, #navigation ul li:hover { color: #ffffff; text-decoration: none; cursor: pointer; } #header { position: absolute; left: 8px; top: 108px; width: 953px; height: 255px; background: #B10303; border-left: 1px solid #D1D1D1; border-right: 1px solid #D1D1D1; z-index: -300; } h1 { margin: 0 0 0 10px; padding-left: 6px; width: 922px; background: url(../images/Magneta_small_hp.gif) no-repeat 779px 50%; font-family: Verdana, Arial, Sans-serif; font-size: 48px; color: #ffffff; border-bottom: 1px dashed #ECAA8B;} h2 { margin: 0 0 0 10px; padding-left: 6px; width: 901px; font-family: Verdana, Arial, Sans-serif; font-size: 21px; color: #ffffff; } #usps { position: absolute; left: 0; top: 144px; margin: 0 0 0 15px; width: 901px; font-family: utility, Arial, Sans-serif; font-size: 15px; line-height: 30px; color: #ffffff; } #usps li { padding-left: 22px; background: url(../images/usp-item.png) no-repeat left 4px; } span.utilityBold { font-family: utilityBold, Arial, Sans-serif; } #content { position: absolute; left: 8px; top: 363px; width: 954px; background: url(../images/footer-background.jpg) no-repeat left bottom #ffffff; z-index: -300; } #tab-menu { margin: 20px 0 0 10px; width: 591px; border-top: 1px solid #AFAFAF; } #tab-menu ul#tabs { width: 591px height: 37px; list-style-type: none; } #tab-menu ul#tabs li { display: inline; float: left; height: 37px; } #tab-menu ul#tabs li#tv a { padding: 10px 14px 0 14px; height: 37px; background: url(../images/tab-background.png) no-repeat -60px 30px; text-align: center; text-decoration: none; font-weight: bold; color: #333333; } #tab-menu ul#tabs li#tv a:hover, #tab-menu ul#tabs li#tv.ui-tabs-selected a { background: url(../images/tab-background.png) no-repeat -8px 30px; color: #B10303; } #tab-menu ul#tabs li#internet a { padding: 10px 14px 0 14px; height: 37px; background: url(../images/tab-background.png) no-repeat -60px 30px; text-align: center; text-decoration: none; font-weight: bold; color: #333333;} #tab-menu ul#tabs li#internet a:hover, #tab-menu ul#tabs li#internet.ui-tabs-selected a { background: url(../images/tab-background.png) no-repeat -49px -18px; color: #B10303; } #tab-menu ul#tabs li#bellen a { padding: 10px 14px 0 14px; height: 37px; background: url(../images/tab-background.png) no-repeat -60px 30px; text-align: left; text-decoration: none; font-weight: bold; color: #333333;} #tab-menu ul#tabs li#bellen a:hover, #tab-menu ul#tabs li#bellen.ui-tabs-selected a { background: url(../images/tab-background.png) no-repeat -116px -66px; color: #B10303; } #tab-menu ul#tabs li#installatie a { padding: 10px 150px 0 14px; height: 37px; background: url(../images/tab-background.png) no-repeat -60px 30px; text-align: left; text-decoration: none; font-weight: bold; color: #333333;} #tab-menu ul#tabs li#installatie a:hover, #tab-menu ul#tabs li#installatie.ui-tabs-selected a { background: url(../images/tab-background.png) no-repeat -176px -114px; color: #D85416; } #tab-menu .tab-content { position: absolute; top: 31px; left: 0px; padding-bottom: 14px; width: 591px; border-left: 1px solid #AFAFAF; border-right: 1px solid #AFAFAF; border-bottom: 1px solid #AFAFAF; } .tab-content h3 { margin: 18px 0 0 16px; width: 555px; font-family: Verdana, Arial, Sans-serif; font-size: 12px; color: #333333; } .tab-content p { margin: 9px 0 0 16px; width: 555px; font-family: Verdana, Arial, Sans-serif; font-size: 11px; color: #333333; line-height: 14px; } .tab-content table { margin: 9px 0 0 16px; width: 555px; border: 0; } .tab-content table td { padding: 10px 0 10px 10px; vertical-align: middle; } .tab-content table td.field-name { width: 145px; vertical-align: middle; padding-right: 42px; } .tab-content table td.field-answer { width: 350px; vertical-align: middle; padding-right: 42px; } .tab-content table td.oddrow { background: #E7E7E7; } .tab-content table td.evenrow { background: #ffffff; } #singlepack { margin: 250px 0 28px 678px; } #singlepack h4 { font-family: Verdana, Arial, Sans-serif; font-size: 14px; color: #666666; } #singlepack a, #singlepack a:link, #singlepack a:visited, #singlepack a:active { text-decoration: underline; color: #666666; } #singlepack a:hover { text-decoration: underline; color: #D85416; } /* CASHBACK: if you want to change the incetive then you only have to change te REAL picture. Nothing to do in the code! * Don't change the 'width' or 'height' of the original image. They are also set here in the CSS */ #front { position: absolute; top: 131px; left: 380px; width: 295px; height: 322px; background: url(../images/Magneta_large_hp2.png) no-repeat left top; z-index: -100;} #front2 { position: absolute; top: 131px; left: 380px; width: 295px; height: 322px; background: url(../images/Magneta_large_diensten.png) no-repeat left top; z-index: -100;} #front3 { position: absolute; top: 131px; left: 380px; width: 295px; height: 322px; background: url(../images/Magneta_large_downloads.png) no-repeat left top; z-index: -100;} #front4 { position: absolute; top: 131px; left: 380px; width: 295px; height: 322px; background: url(../images/Magneta_large_contact.png) no-repeat left top; z-index: -100;} #form { position: absolute; top: 233px; right: 14px; width: 290px; height: 393px; background: url(../images/form-background.png) no-repeat left top; z-index: -100; } #form h2 { margin: 5px 0 0 21px; font-family: utilityBold, Verdana, Arial, Sans-serif; font-size: 21px; color: #FF0000; } #form h3 { margin: -3px 0 0 29px; height: 30px; font-family: utility, Verdana, Arial, Sans-serif; font-size: 13px; color: #333333; } #form #form-input { margin: 35px 0 0 29px; } #form #form-input td.input-name { height: 35px; width: 85px; font-size: 12px; color: #ffffff; font-weight: bold; text-align: right; vertical-align: middle;} #form #form-input td.input-field { width: 150px; vertical-align: middle; color: #ffffff; } #form #form-input td.input-field .radio { color: #ffffff; } td.input-field #firstname, td.input-field #lastname, td.input-field #email, td.input-field #telefoon { margin-left: 6px; width: 130px; height: 16px; border: 1px solid #afafaf; } #form #form-input #submit-field { padding-top: 21px; } #form #form-input #submit-button { margin-left: 38px; display: block; width: 185px; height: 45px; background: url(../images/submit-button.png) no-repeat 0 0; border: 0px solid #ffffff; text-indent: -99999px; } #form #form-input #submit-button:hover { display: block; width: 185px; height: 45px; background: url(../images/submit-button.png) no-repeat 0 -50px; border: 0px solid #ffffff; text-indent: -99999px; cursor: pointer; }