/* ======================================= RESET ======================================== */ /* ======================================================================================= */ html, body, div, span, applet, object, iframe, hr, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; /* vertical-align: baseline; */} :focus { outline: 0; } /* remember to define focus styles! */ body {line-height: 1; color: black; background: white;} ol, ul { list-style: none;} table { border-collapse: separate; border-spacing: 0;} caption, th, td { text-align: left; font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after { content: "";} blockquote, q { quotes: "" "";} /* ====================================== REBUILD ======================================= */ /* ======================================================================================= */ html { font-family: Verdana, "Lucida Grande", sans-serif; font-size: 100%; height: 100%; text-align: center; } body { text-align: center; vertical-align: top; background: #bdecff url(http://n-kids.naturalis.nl/interface/background-body.jpg) repeat-x center top; background-attachment:scroll; } div { font-size:12px; line-height: 18px; } p { text-align: left; margin: 0 0 1em 0; } /* #p:after { content: "."; display: block; clear: both; height: 20px; visibility: hidden; } */ img { display:block; overflow: hidden; } blockquote {margin:1em;} a { color:black; font-weight: bold; text-decoration: none; } a:hover, a:active { text-decoration: underline; } h1,h2,h3,h4,h5,h6 { color: #000; font-weight:bold;display:block } h1 { font-size:1.3em; margin:0 0 1.2em 0; } h2 { font-size:1.1em; margin:0 0 .5em 0; } h3 { font-size:1em; margin:0 0 .3em 0; } h4 { font-size:1em; padding-top:0em; } h5 { font-size:1em; margin:0; } strong {font-weight:bold;} em {font-style:italic;} abbr,acronym { border-bottom:1px dotted #000;cursor:help; } th,td { border:0px solid #000;padding:.5em 0; } th {font-weight:bold;text-align:center;} caption {margin-bottom:.5em;text-align:center;} pre {margin-bottom:1em;} ul { } ol li {list-style:none;} ul li { list-style: disc inside; padding-left:0px; background: transparent url(/images/interface/li_icon.gif) no-repeat 0px 5px; background /**/: transparent url(/images/interface/li_icon.gif) no-repeat 0px 4px; /* actual value for decent browsers: */ } dl { margin-top:10px; line-height:18px; } dt { width:80px; float:left; font-weight:bold; margin:0;padding:0;height:1.6em } dd { margin:0 0 0 80px; padding:0;height:1.6em } label {font-weight:bold;} select { margin: 10px 0 0; width: 10px; } option { padding: 0px 3px; height: 15px; } fieldset { padding:1.4em; margin:0 0 1.5em 0; border:1px solid #ccc; } legend { font-weight:bold; font-size:1em; } /* ==================================== CUSTOMIZE ======================================== */ /* ======================================================================================= */ #wrapper { width:980px; margin: 0px auto; text-align: left; } #content { float:left; width:960px; margin: 20px 0 10px 10px; padding-bottom:100px; text-align: left; clear:both;} #header { position:relative; height:170px; clear:both } #logo { position:absolute; top:10px; left:5px; } #e-card { position:absolute; top:8px; left:440px; width:240px; height:120px; background: transparent url(http://n-kids.naturalis.nl/interface/background-ecard.png) no-repeat; padding:9px 0 0 9px; } #inloggen { position:absolute; top: 20px; left:690px; width:275px; height:160px; } #panel { width:960px; height: 650px; margin:20px 0 0px 10px; text-align: left; clear:both; } .homePanel { background: transparent url(http://n-kids.naturalis.nl/interface/panel_home.png) no-repeat 0 0; } .greenPanel { background: transparent url(http://n-kids.naturalis.nl/interface/panel_home.png) no-repeat 0 0; } .yellowPanel { background: transparent url(http://n-kids.naturalis.nl/interface/panel_home.png) no-repeat 0 0; } .orangePanel { background: transparent url(http://n-kids.naturalis.nl/interface/panel_home.png) no-repeat 0 0; } .lijntjespapierPanel { background: transparent url(http://n-kids.naturalis.nl/interface/panel_lijntjespapier.png) no-repeat 0 0; } #panel:after, #content:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } #panel div > h1 { margin:20px 0 30px 0; } /* ======================================= MENU ========================================== */ /* ======================================================================================= */ #menu { position:absolute; top:130px; left:25px; margin:0 0 0 -22px;padding:0; z-index:55500; font-family:Verdana;} #menu h2 { position: absolute; width: 0; height: 0; overflow: hidden; } #menu ul { list-style: none; margin: 0; padding: 0;} #menu ul li { display: inline; float: left; margin-left: 21px; list-style: none; font-family: Verdana; font-size:12px;} #menu ul li a { display: block; height: 0; width: 150px; overflow: hidden; padding-top: 50px; background-repeat: no-repeat; cursor: pointer; background-position: 0 -50px;font-size:12px;} #menu ul li:hover a, #menu ul li.active a { background-position: 0 0px;} * html #menu ul li a { background: transparent !important;} #menu ul li ul { position: absolute; z-index: 999999; margin-left: 0px; display: none;} #menu ul li:hover ul { display: block;} #menu ul li ul li { float: none; display: block; width: 100%; margin: 0; border-bottom: 5px solid transparent;} * html #menu ul li ul li { padding-bottom: 5px; border-bottom: 0;} #menu ul li ul li a { height: auto; width: 170px !important; padding-top: 0; border: 2px solid #DDD; background: #FFF !important; line-height: 36px; text-indent: 10px; color: #F60; filter: none !important;} #menu ul li ul li a:hover, #menu ul li ul li.active a { border-color: #000; background: #000 !important; text-decoration: none; color: #FFF;} #menu ul li.homepage a { width: 119px; background-image: url(/interface/menu_homepage.png);} * html #menu ul li.homepage a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_homepage.png', sizingMethod='crop');} #menu ul li.n-kids a { width: 75px; background-image: url(/interface/menu_n-kids.png);} * html #menu ul li.n-kids a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_n-kids.png', sizingMethod='crop');} #menu ul li.ozzie a { width: 80px; background-image: url(/interface/menu_ozzie.png);} * html #menu ul li.ozzie a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_ozzie.png', sizingMethod='crop');} #menu ul li.funngames a { width: 126px; background-image: url(/interface/menu_funngames.png);} * html #menu ul li.funngames a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_funngames.png', sizingMethod='crop');} #menu ul li.spreekbeurten a { width: 140px; background-image: url(/interface/menu_spreekbeurten.png);} * html #menu ul li.spreekbeurten a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_spreekbeurten.png', sizingMethod='crop');} #menu ul li.natuurenik a { width: 140px; background-image: url(/interface/menu_natuurenik.png);} * html #menu ul li.natuurenik a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_natuurenik.png', sizingMethod='crop');} #menu ul li.innaturalis a { width: 110px; background-image: url(/interface/menu_innaturalis.png);} * html #menu ul li.innaturalis a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_innaturalis.png', sizingMethod='crop');} #menu ul li.laatvanjehoren a { width: 153px; background-image: url(/interface/menu_laatvanjehoren.png);} * html #menu ul li.laatvanjehoren a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/interface/menu_laatvanjehoren.png', sizingMethod='crop');} /* ====================================== VARIOUS ======================================== */ /* ======================================================================================= */ div.clear {clear:both} div.artikeltje { margin-bottom:20px; min-height:110px; clear:both;} div.artikeltje div.thumb{ float:left; width:120px } div.artikeltje div.text { float:left; width:480px } div.artikeltje h2 { } div.artikeltje:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } div.kolom { float:left; display:inline } div.kolom.links {margin:0} div.kolom.midden {margin-left:20px} div.kolom.rechts {margin-left:20px} div.vak { padding:15px 15px 10px 15px; margin: 0 0 20px 0; } img.thumb { padding:1px; margin: 0px 15px 15px 0px; background-color:white; border:2px solid #F60; } img.thumbHover:hover { padding:2px; margin:-4px 13px 15px -2px; background-color:white; border:3px solid #000; cursor:pointer } .flashthumb { padding:1px; margin: 0px 0px 5px 0px; background-color:white; border:2px solid #F60; } /*.flashthumb:hover { padding:2px; margin:-1px -1px 4px -1px; background-color:white; border:2px solid #000; cursor:pointer }*/ .flashthumb:hover { padding:2px; margin:-2px -2px 3px -2px; background-color:white; border:3px solid #000; cursor:pointer } .links { margin: 0 12px 0 0; } .rechts { margin: 0 0 0 12px; } #tooltip { position:absolute; border:2px solid #000; background:#F60; padding:4px 6px 5px; font-weight:bold; font-size: 12px; color:#FFF; display:none; } #pagemenu h2 .button, h2.submenubutton { padding: 14px 0 14px 0; margin-bottom: 0px; background-color: #FF9900; clear: right } #pagemenu h2 .buttonActive, h2.submenubutton-active { padding: 14px 0 14px 0; margin-bottom: 0px; background-color: #de4900; clear: right } .button:link, .button:visited { margin: 0px 0px 0px 0px; } .button:hover { margin: 0px 0px 0px -200px; } .button:active { margin: 0px 0px 0px -400px; } #pagination { clear:both;width:100%;text-align:center;padding:20px 0 0 0; } div.oranje { background-color: #FF6600; } div.oranje a:link, div.oranje a:visited { color: #FFFFFF; } div.oranje a:hover, div.oranje a:active { color: #990000; } div.oranje a h2 { color: #FFFFFF; } div.oranje a:hover h2 { color: #990000; } div.oranje img.thumb { border-color: #990000; } div.oranje img.thumb:hover { border-color: #000000; } div.wit { background-color: white; } div.wit a:link, div.wit a:visited { color: #FF6600; } div.wit a:hover, div.wit a:active { color: #000000; } div.wit img.thumb { border-color: #FF6600; } div.wit img.thumb:hover { border-color: #000000; } div.geel { background-color: yellow; } div.geel a:link, div.geel a:visited { color: #FF6600; } div.geel a:hover, div.geel a:active { color: #FF0000; } div.geel img.thumb { border-color: #FF6600; } div.geel img.thumb:hover { border-color: #000000; } div.blauw { background-color: #2bb8fa; } div.blauw a:link, div.blauw a:visited { color: #FFFFFF; } div.blauw a:hover, div.blauw a:active { color: #FFFFFF; } div.blauw img.thumb { border-color: #0066CC; } div.blauw img.thumb:hover { border-color: #000000; } div.groen { background-color: #99cc00; } div.groen a:link, div.groen a:visited { color: #FFFFFF; } div.groen a:hover, div.groen a:active { color: #000000; } div.groen img.thumb { border-color: #336600; } div.groen img.thumb:hover { border-color: #000000; } #kruimelpad { position:absolute; top:178px; left:20px; width:775px; height:25px; background-color:transparent; float:left; overflow:hidden; font-size:11px; font-weight:bold; text-align:left; } #kruimelpad a { color:#daf0ff; text-decoration:none; } #kruimelpad a:hover { color:white; text-decoration:underline; } #zoeken { position:absolute; top:171px; left:785px; width:182px; height:37px; background:transparent url(http://n-kids.naturalis.nl/interface/zoeken.png) no-repeat 0 0; overflow:hidden; } #zoeken-text { width:86px; height:14px; margin: 6px 0 0 15px; *margin-top:5px; border-width:0px; background-color:transparent; float:left; } #zoeken-button { margin: 3px 0 0 5px; } #zoeken {display:none;} #footer { width:936px; height:185px; margin:25px 0 20px 10px; padding:8px 10px 10px 10px; border: #CCC 2px solid; background-color: white; text-align: left; clear:both; } #footer:after { content: ""; display: block; clear: both; height: 50px; visibility: visible; } #footer div {font-size:11px;} #footer ul ul a { color:#F60; font-weight:normal; text-decoration: none;} #footer a:hover { color: black; text-decoration: underline} #footer a:visited { color: #F60;} #footer li a:hover { color: #000;} #footer ul { margin:0;padding:0;font-family:Verdana;font-size:11px; color:#AAA;} #footer li { margin:0;padding:0; margin-right:20px; } #footer li.hasSub span {color:black;} #footer ul li { list-style:disc inside; float:left; font-weight:bold; } #footer ul li ul {margin-top:5px;} #footer ul li li { float:none; margin:0; list-style:circle inside; line-height:17px; font-weight:normal; font-size:10px; } #ozzie { position:absolute; width:350px; height:115px; margin-top:-155px; margin-left: 580px; padding-top:30px; overflow: hidden; } /* ======================================= TEMP ========================================== */ /* ======================================================================================= */ #paasei { position:absolute; z-index:1000; overflow:hidden;margin: 550px 0 0 350px; } #topbar { text-align:center; background-color: black; padding:10px; cursor: pointer; } #topbar img { margin:0 auto} #topbar h3 {color:white} #topbar li { font-size:11px; padding-left:0; } #sitemap { display: none; background: black; padding:20px; cursor: default } #sitemap a, a:active, a:visited {color:#F60;} #sitemap a:hover {color:#FFF;}