/* ========================================================================================== Project: Corporate website Opdrachtgever: Paffen Verzekeringen en Financiele diensten Original author : Gaston Jamin (g.jamin@nexwork.nl) ========================================================================================== */ /* Basiselementen */ body { font-family: Arial, Helvetica, sans-serif; background-color: white; text-align: center; padding: 0px; margin: 0px; } #pagecontainer{ width: 775px; text-align: left; background-color: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; margin: 0 auto; } img {border: 0px;} /* printlogo */ .printlogo{ display: none;} /* Dit logo staat hard in de html, en wordt in het print-css gebruikt */ /* Header */ a {outline:none;} #headertop{ width: 775px; height: 27px; background-color: green; background-image: url(../media/header_topbar.gif); margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #header{ width: 775px; height: 114px; background-color: none; } #header .logo{ width: 114px; height: 114px; float: left; } #header .headerfoto_1{ width: 457px; height: 114px; background-image: url(../media/header_foto-01.jpg); float: left; } #header .headerfoto_2{ width: 457px; height: 114px; background-image: url(../media/header_foto-02.jpg); float: left; } #header .headerfoto_3{ width: 457px; height: 114px; background-image: url(../media/header_foto-03.jpg); float: left; } #header .headerfoto_4{ width: 457px; height: 114px; background-image: url(../media/header_foto-04.jpg); float: left; } #header .headerfoto_5{ width: 457px; height: 114px; background-image: url(../media/header_foto-05.jpg); float: left; } #header .headerfoto_6{ width: 457px; height: 114px; background-image: url(../media/header_foto-06.jpg); float: left; } #utilities{ width: 204px; height: 114px; background-image: url(../media/header_utilities-bg.gif); float: left; } /* Utilities: Zoekfunctie */ #utilities .zoeken{ width: 180px; height: 33px; background-color: none; margin: 40px 0px 0px 10px; padding: 0px 0px 0px 0px; } #utilities form{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #utilities input{ width: 135px; height: 16px; background-image: url(../media/input_bg.gif); margin: 0px 0px 0px 0px; padding: 2px 0px 0px 0px; border: 1px black solid; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: black; } #utilities button{ width: 20px; height: 20px; background-image: url(../media/btn_submit-border.gif); margin: 0px 0px 0px 5px; padding: 0px 0px 0px 0px; border: 0px black; cursor: hand; text-indent: -9999px; } /* Utilities: buttons */ #utilities .buttons{ width: 180px; height: 30px; float: left; display: inline; background-color: none; margin: 10px 0px 0px 10px; padding: 0px 0px 0px 0px; } #utilities .buttons ul{ width: 90px; height: 25px; background-color: none; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #utilities .buttons li{ display: inline; list-style: none; } #utilities .buttons a { width: 22px; height: 22px; float: left; text-decoration: none; text-indent: -9999px; margin: 0px 6px 0px 0px; } #utilities .buttons a:hover { background-position: left bottom; } #utilities .buttons .btn_home { background-image: url(../media/btn_home.gif);} #utilities .buttons .btn_mail { background-image: url(../media/btn_mail.gif); } #utilities .buttons .btn_print { background-image: url(../media/btn_print.gif); } /* ----------------------------------------------------------------------------------------- Hoofdmenu Het hoofdmenu bestaat uit een container met daarin een UL. Deze ul heeft een class (active+nummer) die bepaalt welke achtergrond met tabjes zichtbaar is. Bij iedere achtergrond is een andere tab geel. Daarnaast moet ook de tekstkleur van een actieve tab veranderd worden. Daarom is er naast een actieve UL een class A.active, die bepaalt --------------------------------------------------------------------------------------------- */ #hoofdmenu{ width: 775px; height: 33px; background-color: none; margin: 8px 0px 0px 0px; padding: 0px 0px 0px 0px; } #hoofdmenu ul{ width: 775px; height: 33px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: none; background-image: url(../media/hoofdmenu_basis.gif); float: left; } #hoofdmenu ul.active1{ background-image: url(../media/hoofdmenu_tab1active.gif); color: Green; } /* Active + nummer geeft aan welk plaatje met gele tab getoond moet worden */ #hoofdmenu ul.active2{ background-image: url(../media/hoofdmenu_tab2active.gif); color: Green; } #hoofdmenu ul.active3{ background-image: url(../media/hoofdmenu_tab3active.gif); color: Green; } #hoofdmenu ul.active4{ background-image: url(../media/hoofdmenu_tab4active.gif); color: Green; } #hoofdmenu ul.active5{ background-image: url(../media/hoofdmenu_tab5active.gif); color: Green; } #hoofdmenu ul.active6{ background-image: url(../media/hoofdmenu_tab6active.gif); color: Green; } #hoofdmenu a.active{ color: #046456;} /* Deze active heeft niets te maken met de UL achtegrond, maar met tekstopmaak van A */ #hoofdmenu a.active:hover{ color: #eaac27;} #hoofdmenu ul li{ height: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: white; margin: 6px 0px 0px 0px; padding: 0px 15px 0px 14px; border: 0px solid white; line-height: 20px; float: left; display: inline; } /* float is puur nodig om een top-margin in te kunnens stellen voor Firefox, display zorgt dat de bolletjes van de list verdwijnen, en plaatst li naast elkaar */ #hoofdmenu ul li a{ color: white; text-decoration: none; }#hoofdmenu ul li a:hover{ color: #eae827; text-decoration: none; } /* pad */ #pad{ height: 15px; background-color: transparent; margin: 10px 0px 10px 125px; padding: 0px 0px 0px 0px; } #pad ul{ background-color: transparant; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #pad li{ display: inline; list-style: none; } #pad ul a{ height: 15px; background-color: transparant; display: inline; background-image: url(../media/pad_pijltje.gif); background-repeat: no-repeat; background-position: right; padding: 0px 15px 0px 8px; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #183533; } #pad ul a:hover{ text-decoration: none; } #pad .active{height: 15px; background-color: display: inline; transparant; padding: 0px 15px 0px 8px; display: block; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #183533;} /* Content */ #contentcontainer{ width: 775px; background-color: white; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; border: 0px solid red;} #content{ width: 570px; background-color: white; float: left; } #content .paragraaf { width: 555px; background-color: none; overflow: hidden; margin: 0px 0px 15px 0px; padding: 0px 0px 0px 0px; } #content .paragraaf ul {width: 420px; margin: -18px 0 18px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; background-color: transparent; float: right; font-style: italic;} #content .paragraaf ol {width: 420px; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 0px;font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; background-color: transparent; float: right; font-style: italic;} #content .paragraaf li {color: #004d42; background-image: url(../media/bullet.gif); background-repeat:no-repeat; padding: 0px 0px 0px 15px; margin: 0px 0px 0px 0px; list-style: none; background-color: transparent;} #content .paragraaf li a {text-decoration: underline;} #content .paragraaf li a:hover {text-decoration: none;} #content .paragraaf img.afbeelding3 { float: none; margin-top: 10px; display: block; border: 0; } #content .paragraaf img { float: left; margin-right: 5px; border: 1px solid #004d42; } #content .paragraaf .text { margin-left: 135px; border-top: 1px solid #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px;} #content .paragraaf p { margin: 0 0 18px 0; } #content a { color: #004d42;} #content a:hover { text-decoration: none;} #content strong {color: #004d42;} #content h1{ width: 420px; line-height: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 23px; font-weight: bold; margin: 5px 0px 10px 135px; padding: 0px 0px 0px 0px; background-color: transparent; color: #004d42;} #content h1 .plusje{ display: inline; border: 0px solid white; float: none; } #content h2{ font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px; margin: 0px 0px 5px 0px; color: #004d42} #content h3{ width: 420px; height: 15px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; font-style: italic; margin: 5px 0px 10px 135px; padding: 0px 0px 0px 0px; background-color: transparent; color: #004d42;} /* #content p{ width: 420px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; margin: 0px 0px 18px 0px; padding: 0px 0px 0px 0px; float: right; background-color: transparent; } */ #content .paragraaf .left { width: 120px; float: left; } #content .paragraaf .left img { clear: both; } .banneruitvaart a img {border:none!important;} #content .footer{ width: 420px; height: 16px; border-bottom: 1px solid black; margin: 5px 0px 0px 135px; padding: 0px 0px 0px 0px; background-color: none; } #content .footer a{ height: 15px; border: 1px solid black; border-bottom: 0px; margin: 0px 0px 0px 0px; padding: 0px 3px 0px 3px; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; background-color: #eae827; text-decoration: none; color: black; } #content .footer a:hover{ background-color: #c4d8d5; } #content .footerfooter{ width: 420px; height: 5px; border-left: 1px solid black; margin: 0px 0px 10px 135px; padding: 0px 0px 0px 0px; background-color: transparant; line-height: 2px; font-size: xx-small; } /* Het vertikale streepje onder de eigenlijke footer. */ #content form {width: 420px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 18px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: right; background-color: #fdfef0;} #content input {width: 200px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} #content .button {width: 75px; margin-right: 10px;} #content .checkbox {width: 15px; margin-right: 10px;} #content textarea {width: 225px; height: 75px; margin-bottom: 10px;font-family: Arial, Helvetica, sans-serif; font-size: 12px;} /* submenu */ #submenu{ width: 205px; overflow: hidden; border: 0px solid red; margin: 0px 0px 25px 0px; } #submenu ul{ overflow: hidden; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #submenu li{ display: inline; list-style: none;} #submenu ul a{ width: 205px; height: 20px; float: left; padding: 5px 0px 0px 5px; margin: 0px 0px 0px 0px; border-bottom: 1px solid #d3debe; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #004d42; } #submenu a:hover{ background-color: #efee5e; } #submenu .active{ background-color: #efee5e; border-bottom: 1px solid #efee5e;} #submenu .nivo3{ background-color: #f5f497; border-bottom: 1px solid #efee5e; background-image: url(../media/nivo3_bg.gif); background-repeat: no-repeat; padding: 5px 0px 0px 25px; margin: 0px 0px 0px 0px; } /* Nieuwsteasers */ #nieuwscontainer{ min-height: 500px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 205px; background-color: transparant; background-image: url(../media/nieuwskolom_bg.jpg); background-repeat: repeat-x; float: right; border: 0px solid red; } *html #nieuwscontainer{ height: 500px;} #nieuwscontainer .kolomtitel{ font-size: 17px; font-weight: bold; color: white; width: 205px; height: 30px; margin: 15px 0px 10px 0px; padding: 0px 0px 0px 0px; background-color: #015347; } #nieuwscontainer .kolomtitel-nieuws{ font-size: 17px; font-weight: bold; color: white; width: 205px; height: 25px; margin: 10px 0px 20px 0px; padding: 5px 0px 0px 0px; background-color: #015347; } #nieuwscontainer h2{ width: 185px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #004d42; line-height: 18px; margin: 0px 0px 5px 6px; padding: 0px 0px 0px 0px; background-color: none; } #nieuwscontainer p{ width: 185px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #004d42; line-height: 16px; margin: 0px 0px 5px 6px; padding: 0px 0px 0px 0px; background-color: none; } #nieuwscontainer .footer{ width: 185px; height: 16px; border-bottom: 1px solid black; margin: 5px 0px 0px 6px; padding: 0px 0px 0px 0px; background-color: transparant; } #nieuwscontainer .footer a{ height: 15px; border: 1px solid black; border-bottom: 0px; margin: 0px 0px 0px 0px; padding: 0px 3px 0px 3px; float: right; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; background-color: #eae827; text-decoration: none; color: black; } #nieuwscontainer .footer a:hover{ background-color: #c4d8d5; } #nieuwscontainer .footerfooter{ width: 185px; height: 5px; border-left: 1px solid black; margin: 0px 0px 30px 6px; padding: 0px 0px 0px 0px; background-color: transparant; line-height: 2px; font-size: xx-small; } /* Het vertikale streepje onder de eigenlijke footer. */ #nieuwscontainer .hidden {visibility: hidden;} /* banners */ #bannercontainer{ float: right; width: 205px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: transparant; } #bannercontainer .banner{ margin: 0px 0px 0px 2px; } /* Footer */ #logofooter{ width: 775px; height: 83px; margin: 20px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: yellow; background-image: url(../media/logofooter_bg.gif); } #logofooter .top{ width: 775px; height: 9px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-image: url(../media/logofooter_top.gif); background-color: transparant; font-size: 1px; } #logofooter .logocontainer{ margin: 0px 10px 0px 20px; padding: 0px 0px 0px 0px; background-color: transparant; float: right; } #footer{ width: 775px; height: 22px; background-color: #046456; margin: 10px 0px 15px 0px; padding: 6px 0px 0px 5px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 11px; color: white; } #footer a{ color: #eae827; text-decoration: underline; } #footer a:hover{ color: #eae827; text-decoration: none; } #banner { margin:10px 0 0 0; float:left; } #bannercontainer{ overflow: hidden; width: 100%; height: 120px; } #bannercontainer .banner{ float: right; margin: 0px 0px 0px 12px; } .banner_twitter a { display: block; width: 201px; height: 94px; text-indent: -9999px; background: url(/lib/media/paffen-twitter.png) 0 0 no-repeat; } .banner_twitter a:hover { background-image: url(/lib/media/paffen-twitter-over.png); } .banner_facebook a { display: block; width: 201px; height: 94px; text-indent: -9999px; background: url(/lib/media/paffen-facebook.png) 0 0 no-repeat; } .banner_facebook a:hover { background-image: url(/lib/media/paffen-facebook-over.png); } #logofooter { clear: both; } .socialmedia { float: right; width: 120px; margin-right: 10px; } .socialmedia .facebook { float: right; width: 16px; height: 16px; text-indent: -9999px; background: url(/lib/media/facebook_16.png) 0 0 no-repeat; } .socialmedia .twitter { float: right; margin-left: 10px; width: 16px; height: 16px; text-indent: -9999px; background: url(/lib/media/twitter_16.png) 0 0 no-repeat; }