/*@import url(http://www.vrijegemeente.nl/libraries/fonts/index.css) all;*/ @font-face{font-family:GraublauWeb;font-weight:bold;src:url(http://www.vrijegemeente.nl/libraries/fonts/GraublauWebBold.otf) format('opentype')} @font-face{font-family:Museo;font-weight:normal;src:url(http://www.vrijegemeente.nl/libraries/fonts/Museo300-Regular.otf) format('opentype')} /* Filename: screen.css Created: Cinnamon Interactive BV (DC). Date: 20070814 COLORS: d.blue #001e47 l.blue #afd3ff yellow #ffd200 green #6db200 */ /* ================= =STYLES ================= */ html, body { height: 100%; } body { margin: 0 0 -50px 0; padding: 0px; font: 62.5%/1.33 "Arial", "Helvetica", sans-serif; color: #666; background-color: #666; } /* start undo */ /* ul,ol { list-style:none } */ h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } h1,h2,h3,h4,h5,h6 { font-family: "Georgia", "Times New Roman", serif; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0; font-size: 1em; } .onderwerp #col1 p, .onderwerp #col1 ul { margin-left: 1em; } a img,:link img,:visited img { border:none } address { font-style:normal } /* end undohtml.css */ /* Layout */ #header p.explanation span, #header p.activities span, #header #organisatie span, #skip-links { display:block; left:-9999em; position:absolute; visibility:hidden; } #container { margin:0 auto; max-width:990px; width: 88%; min-width: 700px; padding-bottom:0; position:relative; background-color: #fff; } /* define a two or three column layout body class="two-cols" OR body class="three-cols" Voor twee-cols, haal

weg. */ body.three-cols #container #main-content { position: relative; margin: 0 270px 0 220px; } body.two-cols #container #main-content { position: relative; margin: 0 2em 0 220px; } /* end */ #container #portrait { position: absolute; width: 265px; top: 0; right: 0; font: 12px/16px "Georgia", "Times New Roman", serif; color: #000; } #container #portrait blockquote { position: absolute; top: 223px; right: 0; padding: 150px 0 0 0; color: #001e47; width: 233px; background: #fff6cc url("../img/blockquote-bg.jpg") no-repeat left top; } /* Verander achtergrond image van portrait div voor de hoofd navigatie. Ik heb de image namen gedefinieerd. MAAR de achtergrondkleuren niet. Je moet de achtergrond kleur veranderen als die anders dan licht geel wordt. Probeer die van stiltezoekers toe te passen. Ik heb een alternatieve beeld gemaakt als voorbeeld. Zet class in body tag als stiltezoekers en bekijk de resultaat. */ body.zondagszoekers #container #portrait blockquote { /* Zo ziet de body tag eruit: */ background: #fff6cc url("../img/zondagszoekers-bg.jpg") no-repeat left top; } body.stiltezoekers #container #portrait blockquote { /* */ background: /*#bff9ff*/ #fff6cc url("../img/stiltezoekers-bg.jpg") no-repeat left top; } body.kenniszoekers #container #portrait blockquote { /* */ background: #fff6cc url("../img/kenniszoekers-bg.jpg") no-repeat left top; } body.cursuszoekers #container #portrait blockquote { /* */ background: #fff6cc url("../img/cursuszoekers-bg.jpg") no-repeat left top; } body.podiumzoekers #container #portrait blockquote { /* */ background: #fff6cc url("../img/podiumzoekers-bg.jpg") no-repeat left top; } #container #portrait blockquote p { padding: .75em 1.25em; } #container #portrait blockquote p.quote { background: transparent url("../img/begin-quote.gif") no-repeat left top; /*font-style:italic; color: #666;*/ padding-top: 55px; margin-left: -5px; } #container #portrait blockquote cite { font-size: 23px; color: #ffd200; } #container #portrait blockquote cite span { font: 13px/16px "Arial", "Helvetica", sans-serif; display: block; text-align: center; background: transparent url("../img/end-quote.gif") no-repeat right bottom; height: 50px; } #container #sub-navigation { position: absolute; width:210px; top: 0; left: 0; } #container #sub-navigation em { font-family: georgia, serif; } #container #sub-navigation #nieuwsbrief { background: transparent url("../img/yellow-gradient.jpg") repeat-y left top; margin-top: 1.66em; padding: 1em 1em 4em 1em; font-size: .86em; border-top: 1px dotted #ffd200; border-bottom: 1px dotted #ffd200; } #container #nieuwsbrief h2 { background: transparent url("../img/email-nieuwsbrf.jpg") no-repeat top left; height: 37px; width: 191; margin-top: -6px; margin-bottom: 6px; } #container #nieuwsbrief h2 span { margin-left: -9999em; visibility:hidden; } #container #sub-navigation #nieuwsbrief .formrow { padding-bottom: .66em; } #container #sub-navigation #nieuwsbrief .formrow label span { display: block; } /* BUTTONS */ .buttons a, .buttons button { display:block; float:left; margin:0 7px 0 0; background-color:#fee77f; border:1px solid #ffd200; text-decoration:none; font-weight:bold; color:#001e47; cursor:pointer; padding:2px 4px 4px 3px; /* Links */ margin-top: 1em; } .buttons button { width:auto; overflow:visible; padding:2px 4px 4px 3px; /* IE6 */ margin-top: 1em; } .buttons button[type] { padding:2px 4px 4px 3px; /* Firefox */ line-height:17px; /* Safari */ margin-top: 1em; } *:first-child+html button[type] { padding:2px 4px 4px 3px; /* IE7 */ margin-top: 1em; } /* De middelste column is position: relative. De rechter een linker column zijn 'absolute' gepositioneerd het kan gebeuren dat men de min-height moet vergroten omdat de linker column te lang wordt. Je kunt dat ook per onderdeel aangeven. Voorbeelden volgen hieronder */ #container #main-content, #container #portrait, #container #sub-navigation { min-height: 720px; /*orig. 550*/ padding-top: 220px; font-size: smaller; } /* body.zondagszoekers #container #main-content, body.zondagszoekers #container #portrait, body.zondagszoekers #container #sub-navigation { min-height: 550px; } body.stiltezoekers #container #main-content, body.stiltezoekers #container #portrait, body.stiltezoekers #container #sub-navigation { min-height: 550px; } body.kenniszoekers #container #main-content, body.kenniszoekers #container #portrait, body.kenniszoekers #container #sub-navigation { min-height: 550px; } body.cursuszoekers #container #main-content, body.cursuszoekers #container #portrait, body.cursuszoekers #container #sub-navigation { min-height: 550px; } body.podiumzoekers #container #main-content, body.podiumzoekers #container #portrait, body.podiumzoekers #container #sub-navigation { min-height: 550px; } */ #footer { display: block; padding-top: 10px; margin-top: 10px; height: 77px; width: 100%; background-color: #001e47; position: relative; color: #fff; } #footer .information { margin-left: 155px; float: left; background: transparent url("../img/logo.gif") no-repeat scroll left top; min-height: 56px; font-size: small; } #footer span.activities { color: #ffd200;display: block; } #footer .information * { padding-left: 66px; } #footer .information * * { padding-left: 0; } #footer .location { font-size: x-small; float: right; margin-right: 3em; } #footer a { color: #fff; } #header { background: transparent url("../img/header/background.gif") no-repeat scroll right top; position: absolute; top: 0; left: 0; width: 100%; height: 179px; } #header #main-navigation { height: 30px; width: 100%; background-color: #ffd200; position: absolute; top: 150px; left: 0; } #header #main-navigation ul { height: 30px; position: relative; } #header #main-navigation ul li { height: 20px; padding: .25em 1em; margin-top: 0; display: inline; text-transform: lowercase; font-weight: 500; } #header #main-navigation ul li.home { position: absolute; top: 3px; left: 0px } #header #main-navigation ul li.zondagszoekers { position: absolute; top: 3px; left: 65px; } #header #main-navigation ul li.stiltezoekers { position: absolute; top: 3px; left: 211px } #header #main-navigation ul li.kenniszoekers { position: absolute; top: 3px; left: 328px; } #header #main-navigation ul li.cursuszoekers { position: absolute; top: 3px; left: 461px; } #header #main-navigation ul li.podiumzoekers { position: absolute; top: 3px; left: 593px; } #header #main-navigation ul li.current { background-color: #6db200; padding-bottom: 7px; } #header #main-navigation ul li a { color: #fff; text-decoration: none; } #header #main-navigation ul li a:hover { text-decoration: underline; } #header #organisatie { background: transparent url("../img/header/dvg.gif") no-repeat scroll right top; height: 150px; width: 466px; position: absolute; top: 0; left: 0; } #header p.explanation { background: transparent url("../img/header/centrum-voor-vrije.gif") no-repeat scroll right top; height: 20px; width: 402px; z-index: 999; position: absolute; top: 65px; left: 126px; } #header p.activities { background: transparent url("../img/header/activities.gif") no-repeat scroll right top; height: 17px; width: 248px; z-index: 999; position: absolute; top: 103px; right: 343px; } #container #sub-navigation ul {list-style-type:none} #container #sub-navigation li { min-height: 30px; background: #fff url("../img/dotted-lines.gif") no-repeat scroll left top; position: relative; } #container #sub-navigation li a { color: #666; text-decoration: none; position: absolute; top: 10px; left: 1em; } #container #sub-navigation li a:hover { color: #666; text-decoration: underline; } /* begin rules sub-sub navigatie */ #container #sub-navigation li li { min-height: 25px; font-size: .92em; position: relative; } #container #sub-navigation li li a { position: absolute; top: 7px; left: 2em; } #container #sub-navigation li li.first { margin-top: 28px; } .menuopen{display:block} .menuclosed{display:none} /* einde rules sub-sub navigatie */ p { padding-bottom: 1em;} /* Intro - blauwe variant */ p.intro { color: #001e47; font-weight: 700; } /* Groene variant */ p.intro-portaal { color: #6DB200; font-family: georgia, serif; font-size: 1.25em; font-weight: 500; font-style: oblique; } #content #main-content h1 { /*font-family: GraublauWebBold, Arial, Helvetica, sans-serif;*/ font-family: GraublauWeb, "Lucida Grande", Tahoma, Arial, sans-serif; font-size: 1.8em; color:#8099b6; line-height: 2; margin-bottom:0; clear:both; /*letter-spacing: 0.1em; */ } #content #main-content h2 { font-size: 1.6em; font-family: GraublauWeb, Arial, Helvetica, sans-serif; color: #8099b6; line-height: 1.8; } #content #main-content h3 { font-size: 1.6em; line-height: 1.66; font-family:Museo,"Lucida Grande",Tahoma,Arial,sans-serif; color: #888; padding:0.5em 0 } #content #main-content h4 { font-weight: 700; } #content #main-content h4.profile { font-weight: 700; padding: 1.8em 0.2em 0.4em 0.2em } p.bird-talk { background: transparent url("../img/little-bird.jpg") no-repeat scroll left top; margin-top: 4em; padding-left: 62px; } table { background: transparent url("../img/yellow-gradient.jpg") repeat-y left top; padding: 0.5em; border-collapse: separate; } table { background: transparent url("../img/yellow-gradient.jpg") repeat-y left top; clear: right; border-collapse: collapse; border-left: 1px solid #fff; border-top: 2px solid #fff; border-right: 1px solid #fff; } td,th { padding: 2px 0.5em 2px 0.5em; border: none; text-align: left; vertical-align: top; border-left: 0px solid #fff; border-bottom: 3px solid #fff; } thead tr { background-color: #FFF0AA; } tr { background-color: transparent; } tr.odd { background-color: #fff; } table a { color: #001e47; } #content #main-content p img { float: left; clear: right; margin: 0.4em 1em 0.2em 0; } #content #main-content p img.right { float: right; clear: left; margin-left: 1em; margin-top: 0.5em } .clear { clear: both } #content #main-content ul { margin: 1em 0 1em 2em; } #main-content a { color: #001e47; text-decoration: underline; } #main-content blockquote, q { font-style: oblique; font-family: Georgia, "Times New Roman", serif; font-size: larger; margin: 12px 25px 18px 25px; padding: 6px 12px 1px 38px; width: 70%; background: url(http://www.vrijegemeente.nl/img/open_quote.gif) no-repeat 10px 10px; background-color: #fef9dc; border-left: 3px double #ffd200; } #content #main-content .addthis { float: right; clear: right; margin: -2em 1em 0 0; } cite { font-family:Arial, Helvetica, sans-serif; font-size: .76em; font-style: normal; } #main-content .sidequote { color: #A56C67; font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; letter-spacing:0.1em; display: block; float: right; padding: 0 10px 0 10px; margin: 0 4px 10px 16px; width: 216px; font-size: 1.5em; line-height: 1.4em; text-align: right; border-left: 3px double #ffd200; } #main-content .sidequote cite { font-family:Arial, Helvetica, sans-serif; font-size: .68em; font-style: normal; } div.poetry { text-indent: 18px; line-height: 12px; font-style:italic } /*exception classes*/ span.exception { color: #6db200; font-weight: bold; } span.exception h3 { color: #ff0000; font-weight: bold; } /*memberform*/ .required { color:#ff0000 } .smallText {font-size:89%; font-style:italic; color: #001e47; margin:6px 0 0 0} /* news-display */ /* main news display page */ dl.news-display { margin: 0; line-height: 1.8em; color: #333; } dl.news-display dt { margin:1.5em 0 0 0; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.33em; font-weight:bold; line-height: 1.66; color:#666 } dl.news-display dd { margin:8px 0; line-height: 1.66; color:#666 } .news-display .item-link { /*font-size:80%;*/ padding-bottom:10px; color: #001e47; text-decoration: underline; } /* single item */ #display-item{ padding:0; line-height:1.66em; color: #666; } #itemwrapper { width:70%; margin:2% auto; padding:10px 20px; border:1px dashed #ccc; } #display-item { } .news-link{ font-size:80%; margin:10px 0; } a:link img, a:visited img, a:hover img, a:active img { border: none !important } .right { text-align:right; } /* special classes */ .post-date { font-size:80%; } .news-link{ font-size:80%; margin:10px 0; } .xml1, .xml2 { list-style:none; padding:0; margin:0; } .xml1 { position:absolute; top:0; right:5px; } .xml2 { margin:20px -5px 0; padding:5px 0 0; text-align:center; background:#999; color:#fff; border-top:1px solid #666; } /* Hoverbox Code */ .hoverbox { cursor: default; list-style: none; } .hoverbox a { cursor: default; } .hoverbox a .preview { display: none; } .hoverbox a:hover .preview { display: block; position: absolute; top: -253px; left: -45px; z-index: 1; } .hoverbox img { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 100px; height: 75px; } .hoverbox li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 6px; padding: 3px; position: relative; } .hoverbox .preview { border-color: #000; width: 400px; height: 300px; } /*drop shadow*/ .alpha-shadow { float: left; background: url(img/shadow1.gif) no-repeat bottom right; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; } .alpha-shadow div { background: url(img/shadow2.png) no-repeat left top !important; background: url(img/shadow2.gif) no-repeat left top; padding: 0px 5px 5px 0px; } .alpha-shadow img { background-color: #fff; border: 1px solid #a9a9a9; padding: 4px; } div.clear {clear: both} #content #main-content #profile dl { width:400px; float:left; margin-right:2em; padding-left:2em } #content #main-content #profile dt { font-weight:bold; font-size:1.1em; font-family: georgia, serif; margin-bottom:0.7em; } #content #main-content #profile dd{ color:#444; font-family: georgia, serif; font-size: 1em; font-weight: 500; margin:0 0 2em 0; padding-left:4.5em; line-height:1.8em; background:none no-repeat left top; } #content #main-content #profile dd.promotional1{ background-image:url('../img/paper_small.gif'); } /*cursusinfo*/ #content #main-content #cursusinfo dl { width:600px; float:left; margin-right:2em; margin-left:2.2em; font-family: Georgia, "Times New Roman", Times, serif; clear:both } #content #main-content #cursusinfo dt{ font-weight:bold; font-size:1.1em; color:#6db200; font-variant:small-caps; border-bottom: 1px solid #ccc; border-bottom-color:#ffd200; margin-bottom:0.7em; padding-bottom:0.2em; } #content #main-content #cursusinfo dd{ color:#444; font-size:1em; margin:1em 0 2em 0; padding-left:5.8em; line-height:1.6em; background:none no-repeat left top; } .post .date { height: 50px; width: 45px; background: url(../img/calendar.gif) no-repeat; font: normal 22px Arial, Helvetica, sans-serif; color: #666666; text-align: center; padding: 0px 2px 0 0; line-height: 100%; float: left; margin:6px 0 0 12px } .post .date span { height: 16px; display: block; font: normal 11px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; padding-top: 5px; } /* rounded box style */ .box { width: 241px; float: right; margin: 0 0 14px 0; background: #fffae4 /*#F8F8EC url(http://www.vrijegemeente.nl/img/box-tile.gif) repeat-y top left;*/ } .box-inner { /*background: url(http://www.vrijegemeente.nl/img/box-bottom.gif) no-repeat bottom left;*/ } .box h3 { margin: 0; padding: 15px 18px 0 18px; font-family: "Trebuchet MS", sans-serif; font-size: 110%; color: #E97E00; /*background: url(http://www.vrijegemeente.nl/img/box-top.gif) no-repeat top left;*/ } .box p, .box ul, .box ol, .box dl, .box form { margin: 0; padding: 1em 18px 18px 18px; font-size: 90%; font-family: "Lucida Grande", Arial, Verdana, sans-serif; line-height: 1.4em; } .box ul li { margin: 0 0 2px 10px; padding-left: 15px; list-style: none; background: url(http://www.vrijegemeente.nl/img/bullet-event.gif) no-repeat 0 3px; } .box dl dt { margin: 0 0 2px 0; font-weight: bold; } .box dl dd { margin: 0; padding: 0; } /* vevents */ #events-list li { margin-bottom: 1em; list-style: none; } #events-list li.last { margin-bottom: 0; } #events-list li abbr { border: none; } /* microformats list */ .box dl#mf-list { margin-left: 10px; } .box dl#mf-list dt { margin: 0; padding-left: 15px; font-weight: normal; background: url(http://www.vrijegemeente.nl/img/bullet-event.gif) no-repeat 0 3px; } .box dl#mf-list dd { margin: 0 0 8px 15px; } /* search form */