/* Title: gottfridvaneck.nl Author: Jochem van Grondelle Website: http://www.thatsconsulting.com ================================ COMMON STYLES ================================*/ img {border: solid 1px gray } img {margin: 5px; margin-left: 0} img.left {margin-left: 0} img.right {margin-right: 0; margin-left: 5px;} .left { float: left; } .right { float: right; } .hide, .printonly { display: none; } .pointer { cursor: pointer; } .clearBoth { clear: both; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { display: inline-block; } a:active { outline: none; } a:focus { outline: none; } hr {border:0; border-top: solid 1px #245267} /* ================================ MAIN STYLES ================================*/ a { color: #720036;font-weight:bold; text-decoration: none; cursor: pointer} a:hover, a:focus, a:active {text-decoration:none; color: #D52C02} html, form { margin: 0; padding: 0; height:100% } body { background-color: #900045; font-size: 13px; line-height: 18px; color: #330066; height: 100%; font-family: Frutiger, "Trebuchet MS", Universe, "Gill Sans", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, Sans-Serif} #container { width: 1000px; margin: 0 auto; } #preheader { text-transform:uppercase; color: #5C006D; font-size: 20px; letter-spacing: 1px; padding-left: 110px; margin-top:30px; font-weight: bold; line-height:20px; height:17px; width:1000px; position:relative; overflow:hidden; z-index: 0} /*#preheader span { z-index: 1; display:block; position:absolute; left:0; top:0; width: 1000px; height: 17px; background: url(/images/wildeeendprodukties.png) no-repeat top left }*/ #preheader span { z-index: 1; display:block; position:absolute; left:0; top:0; width: 1000px; height: 17px; } #main {background-color: #FFEAD9 } #main #siteheader h1 {font-size: 28px; font-weight: bold; letter-spacing:5px; text-transform:uppercase; line-height:17px; text-align: center; position: relative; overflow: visible; height:19px; width: 1000px; } #main #siteheader h1 a {color: #D52D00; text-decoration:none; display: block; width: 1000px; height: 19px; position:absolute; top: 0; left: 0; z-index: 1; background: url(/images/gottfridvaneck.png) no-repeat top left; text-indent: -9999px } #main #siteheader h1 a span {color: #720036} #main #siteheader h1 a:hover { text-decoration:none} #main #headercontainer {} #main #contentcontainer #content, #main #headercontainer #contentheader {float:right; width: 710px; padding: 0 20px; position: relative } #main #contentcontainer #subnav, #main #headercontainer #navheader {float: left; width: 230px; padding-left:20px} #main #headercontainer #contentheader h2 {color: #900045; font-size: 26px; font-weight:normal; letter-spacing: 1px; line-height: 26px; margin: 35px 0} #main #headercontainer #navheader {} #main #contentcontainer {position: relative} #main #contentcontainer #subnav ul {margin: 0; list-style:none} #main #contentcontainer #subnav li {list-style: none; margin: 0} #main #contentcontainer #subnav a{color: #720036; font-size: 14px; font-weight: bold; letter-spacing: 1px; line-height: 28px} #main #contentcontainer #subnav a:hover {text-decoration:none; color: #D52C02} #main #contentcontainer #subnav li.selected a {cursor: default; color: #d52c02} #main #navplaceholder {height: 73px} #silhouet {background-repeat:no-repeat; background-position: left bottom; bottom: 0; position: absolute; text-indent:-9999px; z-index: 0} #silhouet, #silhouet.home {background-image:url(/images/home-groot-transp.png); width:294px ; height:368px ;} #silhouet.nieuws {background-image:url(/images/nieuws-groot-transp.png); width:274px ; height:369px ; margin-left: 110px} #silhouet.verhalen {background-image:url(/images/verhalen-groot-transp.png); width:187px ; height:326px ; margin-left: 230px} #silhouet.muziek {background-image:url(/images/muziek-groot-transp.png); width:175px ; height:370px ; margin-left: 380px} #silhouet.media {background-image:url(/images/media-groot-transp.png); width:234px ; height:302px ; margin-left: 450px} #silhouet.agenda {background-image:url(/images/agenda-groot-transp.png); width:181px ; height:350px ; margin-left: 595px} #silhouet.links {background-image:url(/images/links-groot-transp.png); width:189px ; height:404px ; margin-left: 667px} #silhouet.contact {background-image:url(/images/contact-groot-transp.png); width:143px ; height:213px ; margin-left: 857px} /* ================================ HEADER STYLES ================================*/ #nav {position: absolute; bottom: -10px; z-index: 300; width: 100%; padding: 0; margin: 0} #nav ul { height: auto; width: 100%; padding: 0; margin: 0} #nav ul li {padding: 0; margin: 0;display: block; float:left; list-style: none; width: 125px; height: 160px; } #nav ul li a {font-family: Frutiger,"Frutiger 55 Roman",Verdana,"Lucida Grande",Verdana, Sans-Serif; color: #b73102; display: block; width: 125px; text-transform: lowercase; font-size: 14px; text-align: center;} #nav ul li a span.link {padding-top: 10px; padding-bottom: 10px;display: block} #nav ul li.selected a, #nav ul li:hover a, #nav ul li a:hover, #nav ul li a:focus {color:#fff; text-decoration: none} #nav ul li.selected a {cursor: default; } /* exceptions */ #nav ul li a.home {text-align: left} #nav ul li a.home span.link {padding-left: 24px; width: 101px} #nav ul li a.contact {text-align:right; } /* navigation backgrounds default */ #nav ul li a span.img {z-index: 100; display:block; height: 150px; text-indent: -9999px; background: url('/images/silhouetten.png') no-repeat 0 0; } /* navigation background position :link */ #nav ul li a.home span.img {background-position: 0px 0} #nav ul li a.nieuws span.img {background-position: -125px 0} #nav ul li a.verhalen span.img {background-position: -250px 0} #nav ul li a.muziek span.img {background-position: -375px 0} #nav ul li a.media span.img {background-position: -500px 0} #nav ul li a.agenda span.img {background-position: -625px 0} #nav ul li a.links span.img {background-position: -750px 0} #nav ul li a.contact span.img { background-position: -875px 0;} /* navigation background position :hover & :focus */ #nav ul li:hover a.home span.img, #nav ul li.selected a.home span.img, #nav ul li:hover a.home span.img, #nav ul li a.home:hover span.img, #nav ul li a.home:focus span.img {background-position: 0 -150px} #nav ul li:hover a.nieuws span.img, #nav ul li.selected a.nieuws span.img, #nav ul li a.nieuws:hover span.img, #nav ul li a.nieuws:focus span.img {background-position: -125px -150px} #nav ul li:hover a.verhalen span.img, #nav ul li.selected a.verhalen span.img, #nav ul li a.verhalen:hover span.img, #nav ul li a.verhalen:focus span.img {background-position: -250px -150px} #nav ul li:hover a.muziek span.img, #nav ul li.selected a.muziek span.img, #nav ul li a.muziek:hover span.img, #nav ul li a.muziek:focus span.img {background-position: -375px -150px} #nav ul li:hover a.media span.img, #nav ul li.selected a.media span.img, #nav ul li a.media:hover span.img, #nav ul li a.media:focus span.img {background-position: -500px -150px} #nav ul li:hover a.agenda span.img, #nav ul li.selected a.agenda span.img, #nav ul li a.agenda:hover span.img, #nav ul li a.agenda:focus span.img {background-position: -625px -150px} #nav ul li:hover a.links span.img, #nav ul li.selected a.links span.img, #nav ul li a.links:hover span.img, #nav ul li a.links:focus span.img {background-position: -750px -150px} #nav ul li:hover a.contact span.img, #nav ul li.selected a.contact span.img, #nav ul li a.contact:hover span.img, #nav ul li a.contact:focus span.img { background-position: -875px -150px;} /* ================================ CONTENT STYLES ================================*/ #main #contentcontainer #content { font-family: Verdana, Frutiger, "Trebuchet MS", Universe, "Gill Sans", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 13px; height: 400px; margin-bottom:150px; overflow: auto; line-height: 150%} #main #contentcontainer #content * { z-index: inherit} #content h1, #content h2, #content h3 {color: #D52D00; font-size: 18px; font-weight: normal; margin: 0 0 5px } #content h4 {font-weight: bold; margin-bottom: 0; padding-bottom: 0} #content li h4 {display: inline} #content ul, #content ol, #content li, #content p {margin-bottom: 10px} #content strong { font-weight: bold; } #content em { font-style: italic; } /* ================================ CONTACT STYLES ================================*/ .form .text { margin: 0 10px 0 0; width: 300px; } .form .fields { width: 300px; } fieldset {margin-top: -10px} fieldset legend { display: none; } fieldset label { display: block; margin: 10px 0 0 0; } fieldset label.first { margin: 0; } fieldset input, fieldset textarea {MARGIN: 0 0 3px; padding: 2px; width: 300px; border: 1px solid #900045; font-family: Frutiger, "Trebuchet MS", Universe, "Gill Sans", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 14px} fieldset input:focus, fieldset textarea:focus, fieldset input:active, fieldset textarea:active {border: 2px solid #900045; padding: 1px } fieldset input.error, fieldset textarea.error, fieldset input.error:focus, fieldset textarea.error:focus, fieldset input.error:active, fieldset textarea.error:active { border: 2px solid #D52C02; padding: 1px } fieldset button { border: none; margin: 10px 0; padding: 5px; background-color: #fff; border: 1px solid #900045; width: 100px; font-weight:bold; color: #900045 } fieldset button:hover {padding: 4px; border: 2px solid #900045} .error, .errorMessage {color: #D52C02} /* big background images */ /* agenda */ table {border: 0} table td, table th {border: 0; padding-left: 0} table th {border-bottom: solid 1px #330066; text-align: left} /*================================ COMMON STYLES ================================*/ ul.guestbook {width:100%} ul.guestbook li {list-style-type: none; overflow:hidden; width:250px; padding: 5px; margin-right:20px; display:block; float:left; border-style: solid; border-width: 2px; border-color:#245267; padding-top: 10px; } ul.guestbook li dl dt {font-weight:bold;} ul.speellijst {width:100%} ul.speellijst li {list-style-type: none; overflow:hidden; width:40%; padding: 10px; margin-right:20px; display:block; float:left; border-style: solid; border-width: 2px; border-color:#245267; padding-top: 10px; } ul.speellijst li dl dt {font-weight:bold;} dl.optreden {list-style-type: none; overflow:hidden; display:block; margin-bottom:10px } dl.optreden dt {font-weight:bold;} ul.photos {list-style-type:none !important} #footer{font-size: 10px; margin-top: 50px; text-align: center} #footer ul li {display:inline; margin-right: 10px} #footer a:hover, #footer a:focus, #footer a:active {color:#fff; text-decoration: none} /* custom scroll */ .scrollgeneric { line-height: 1px; font-size: 1px; position: absolute; } .vscrollerbase, .vscrollerbar { width: 15px; top: 0px; } .vscrollerbar { left: 0px; } .hscrollerbase, .hscrollerbar { height: 15px; left: 0px; } .hscrollerbar { top: 0px; } .vscrollerbar, .hscrollerbar { /*padding information of these elements are only used for padding of the scroll-bar with respect to the scroll base, the padding will automatically be turned off by the script*/ padding: 5px; /* z-index for scrollbars no longer has to be given as of version 1.7.5 for correct operation, but it is still recommended, as this decides the z-index for content.*/ z-index: 999; } .vscrollerbarbeg { /*top image holder for vertical scroll bar*/ width: 15px; height: auto; top: 0px; } .vscrollerbarend { /*bottom image holder for vertical scroll bar*/ width: 15px; height: 10px; } .hscrollerbarbeg { height: 15px; width: auto; left: 0; } .hscrollerbarend { height: 15px; width: 10px; } #content { clear: both; overflow: auto; padding-right: 2px; position: relative; width: 710px; outline: none } #content .vscrollerbarbeg { background: url(/images/vscroller2.png) 0 -9px; height: auto; width: 18px; } #content .vscrollerbarend{ background: url(/images/vscroller2.png); height: 9px; width: 18px; } #content .vscrollerbase { background: #ffead9 none; width: 18px; } #content .vscrollerbar { background-color: #ffead9; padding: 0; } #content .vscrollerbasebeg, #content .vscrollerbaseend { background-image: none; } /* photo gallery */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 9999; 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; } /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */