/* * ---------------------------------------------------------- * Title: MediaFlirt - CSS Main Stylesheet * Author: Kenny van Ooijen * ---------------------------------------------------------- * MediaFlirt - Webdesign bureau * www.mediaflirt.nl */ /* Algemene styles * ---------------------------------------------------------- */ html { background: #f9d09a url('../../images/htmlBg.gif') repeat-x; height: 100%; } body { font: 11px Arial; margin: 0px auto; height: auto; } /* Container * ---------------------------------------------------------- */ .container { position: relative; width: 842px; margin: 0px auto; } /* Header * ---------------------------------------------------------- */ .header { float: left; width: 842px; } .header .logo { border: 0px; } /* top menu * ---------------------------------------------------------- */ .menu { margin: 0px; padding: 0px; } .menu span { float: left; text-indent: -999999px; } .menu li { list-style: none; margin: 0px; padding: 0px; } .menu .home a{ float: left; width: 95px; height: 43px; background: url('../../images/menu/home.gif') no-repeat; } .menu .home a:hover { background: url('../../images/menu/home.gif') 0 -43px; } .menu .homeActive a{ float: left; width: 95px; height: 43px; background: url('../../images/menu/homeOn.gif') no-repeat; } .menu .over a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/over.gif') no-repeat; } .menu .over a:hover { background: url('../../images/menu/over.gif') 0 -43px; } .menu .overActive a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/overOn.gif') no-repeat; } .menu .nieuws a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/nieuws.gif') no-repeat; } .menu .nieuws a:hover { background: url('../../images/menu/nieuws.gif') 0 -43px; } .menu .nieuwsActive a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/nieuwsOn.gif') no-repeat; } .menu .verslagen a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/verslagen.gif') no-repeat; } .menu .verslagen a:hover { background: url('../../images/menu/verslagen.gif') 0 -43px; } .menu .verslagenActive a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/verslagenOn.gif') no-repeat; } .menu .agenda a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/agenda.gif') no-repeat; } .menu .agenda a:hover { background: url('../../images/menu/agenda.gif') 0 -43px; } .menu .agendaActive a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/agendaOn.gif') no-repeat; } .menu .galerij a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/galerij.gif') no-repeat; } .menu .galerij a:hover { background: url('../../images/menu/galerij.gif') 0 -43px; } .menu .galerijActive a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/galerijOn.gif') no-repeat; } .menu .regels a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/regels.gif') no-repeat; } .menu .regels a:hover { background: url('../../images/menu/regels.gif') 0 -43px; } .menu .regelsActive a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/regelsOn.gif') no-repeat; } .menu .contact a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/contact.gif') no-repeat; } .menu .contact a:hover { background: url('../../images/menu/contact.gif') 0 -43px; } .menu .contactActive a{ float: left; width: 94px; height: 43px; background: url('../../images/menu/contactOn.gif') no-repeat; } /* Content * ---------------------------------------------------------- */ .content { float: left; width: 610px; margin-top: 15px; } .content h1 { font: 14px Arial; font-weight: bold; width: 598px; height: 27px; margin: 0px; padding: 8px 0px 0px 12px; background: url('../../images/contentTop.gif') no-repeat; } .content h2 { font: 14px Arial; font-weight: bold; width: 598px; margin: 0px; padding: 15px 0px 0px 12px; } .content p { font: 11px Arial; color: #000000; margin: 0px; padding: 5px 12px 0px 12px; line-height: 20px; } .content .titel { font: 12px Arial; font-weight: bold; color: #000000; } .content .lijn { font: 11px Arial; color: #000000; margin: 0px 12px 0px 12px; padding: 10px 0px 10px 0px; line-height: 18px; border-bottom: 1px solid #d1b085; } .content .lijn a { font: 11px Arial; font-weight: bold; color: #f08801; text-decoration: underline; } .content .lijn a:hover { text-decoration: none; } .content .color { color: #f08801 } .content .bg { float: left;width: 608px; background-color: #ffffff; border-left: 1px solid #d0b087; border-right: 1px solid #d0b087; } .content .link { font: 12px Arial; font-weight: bold; text-decoration: none; color: #000000; margin-left: 12px; } .content .link:hover { text-decoration: underline; } .content .link2 { font: 11px Arial; font-weight: bold; color: #f08801; text-decoration: underline; } .content .link2:hover { text-decoration: none; } /* gallerij * ---------------------------------------------------------- */ .gallerij { margin: 0px; padding: 0px; } .gallerij li { float: left; list-style: none; margin: 11px; padding: 0px; } .gallerij li a { float: left; border: 1px solid #ffc89c; padding: 1px; } .gallerij li a:hover { border: 1px solid #ff7200; } .gallerij img { border: 0px; } /* contact * ---------------------------------------------------------- */ .contact { margin: 10px 0px 0px 12px; padding: 0px; border: 0px; } .contact label { float: left; text-align: right; width: 150px; padding: 5px 20px 0px 0px; font: 12px Arial; font-weight: bold; } .contact input { width: 200px; padding: 5px; border: 1px solid #f5ad4e; } .contact textarea { width: 350px; height: 150px; padding: 5px; border: 1px solid #f5ad4e; font: 12px Arial; } .contact .button{ float: right; width: 100px; margin: 10px 64px 10px 0px; background-color: #fe6102; border: 0px; font: 12px Arial; font-weight: bold; color: #ffffff; cursor: pointer; } .contact .error { text-align: center; padding: 10px 0px 10px 0px; font: 12px Arial; color: #ff0000; } /* Content Small * ---------------------------------------------------------- */ .contentSmall { float: right; width: 217px; margin-top: 15px; } .contentSmall h2 { font: 14px Arial; font-weight: bold; width: 205px; height: 24px; margin: 0px; padding: 8px 0px 0px 12px; background: url('../../images/contentSmallTop.gif') no-repeat; } .contentSmall p { font: 11px Arial; color: #000000; margin: 0px; padding: 5px 12px 0px 12px; line-height: 20px; } .contentSmall a { font: 11px Arial; color: #f08801; text-decoration: underline; } .contentSmall a:hover { text-decoration: none; } .contentSmall .color { color: #f08801 } .contentSmall .bg { width: 215px; background-color: #ffffff; border-left: 1px solid #d0b087; border-right: 1px solid #d0b087; } /* Footer * ---------------------------------------------------------- */ .footer { float: left; width: 842px; margin-top: 14px; } .footer ul { text-align: center; height: 27px; margin: 0px 0px 10px 0px; padding: 10px 0px 0px 0px; background: url('../../images/footerBg.gif') no-repeat; } .footer li { display: inline; list-style: none; } .footer .hyves a { display: inline-block; height: 16px; font: 11px Arial; color: #000000; margin: 0px 7px 0px 7px; padding: 2px 0px 0px 25px; text-decoration: none; background: url('../../images/hyves.gif') no-repeat; } .footer .hyves a:hover { text-decoration: underline } .footer .overig a { display: inline-block; height: 16px; font: 11px Arial; color: #000000; margin: 0px 7px 0px 7px; padding: 2px 0px 0px 25px; text-decoration: none; background: url('../../images/overig.gif') no-repeat; } .footer .overig a:hover { text-decoration: underline } .footer .copyright { float: left; font: 11px Arial; color: #000000; } .footer .made { float: right; font: 11px Arial; color: #000000; } .footer .made a { color: #000000; text-decoration: none; } .footer .made a:hover { text-decoration: underline; } /* Light Box * ---------------------------------------------------------- */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url('../../images/prevlabel.gif') left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url('../../images/nextlabel.gif') right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }