/* FOR IE CSS hacks The following hacks to trigger haslayout have been well tested in IE7 and lower. John Gallant and Holly Bergevin published the Holly hack in 2003: from http://www.satzansatz.de/cssd/onhavinglayout.html */ /* \*/ * html .gainlayout { height: 1%; } /* */ /* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved. http://creativecommons.org/licenses/by/2.0 This style sheet is licensed under a Creative Commons License. */ /* Purpose: undo some of the default styling of common (X)HTML browsers */ * { margin: 0; padding: 0; } /* link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words */ :link,:visited { text-decoration:none } /* no list-markers by default, since lists are used more often for semantics */ ul,ol { list-style:none } /* avoid browser default inconsistent heading font-sizes and pre/code too */ h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } /* remove the inconsistent (among browsers) default ul,ol padding or margin / the default spacing on headings does not match nor align with normal interline spacing at all, so let's get rid of it. zero out the spacing around pre, form, body, html, p, blockquote as well */ /* form elements are oddly inconsistent, and not quite CSS emulatable. nonetheless strip their margin and padding as well */ ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } /* whoever thought blue linked image borders were a good idea? */ a img,:link img,:visited img { border:none } /* de-italicize address */ address { font-style:normal } /* more varnish stripping as necessary... */ /*------------------------------------------------------------------------------------ Global Styles ------------------------------------------------------------------------------------*/ * { padding:0; margin:0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; } li, dd { margin-left:5%; } fieldset { padding: .5em; margin:0; } legend { margin:0; padding:0; } select option{ padding:0 5px; } .hide, .print-logo, .close-button{ display:none; } .clear{ clear:both; height:1px; font-size:1px; line-height:1px; } a img{ border:none; } /*Clear defaults - inspired from Tantek Celik----------------*/ :link,:visited {text-decoration:none;} ul,ol,dl {list-style:none;} h1,h2,h3,h4,h5,h6,pre,code {font-size:1em; font-weight:normal;} ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,dl,dt,dd {margin:0; padding:0;} a img,:link img,:visited img {border:none;} address {font-style:normal;} strong {font-weight:bold;} em {font-style:italic;} i {display:none;} /*------------------------------------------------------------------------------------ Sprites ------------------------------------------------------------------------------------*/ DIV.blogitem DIV.left DIV.date, DIV.functions LI DIV { background-image:url("../images/sprite_blog.gif"); background-position:0 0; background-repeat:no-repeat; } DIV.side_blog UL LI SPAN, DIV.side_contact UL LI DIV, DIV.side_socialmedia UL LI DIV { background-image:url("../images/sprite_page.gif"); background-position:0 0; background-repeat:no-repeat; } /* replaced images */ DIV.side_blog UL LI SPAN { font-size:0px; line-height:0px; display:inline-block; vertical-align:middle; } /*------------------------------------------------------------------------------------ General ------------------------------------------------------------------------------------*/ BODY { font-size: 80%; margin:0; padding:0; text-align:center; background:#ffffff; } BODY, TD, DIV, INPUT { font-family: Arial, Verdana, sans-serif; line-height:1.6em; color:#000000; } A { color:#0066cc; font-weight:normal; text-decoration:none; } A:hover { text-decoration:underline; } IMG { border:0px; } .clear{ clear:both; line-height:0px; font-size:0; height:0px; } /*------------------------------------------------------------------------------------ Text ------------------------------------------------------------------------------------*/ H1 { font-family: "Helvetica Neue LT Std"; font-size:290%; line-height:1em; letter-spacing:0; font-weight:bold; margin:20px 0 5px 0; padding:0; } H2 { font-family: "Helvetica Neue LT Std"; font-size:190%; line-height:1em; letter-spacing:0; font-weight:bold; margin:0 0 10px 0; padding:0; } H2 A { font-weight:bold; } H3 { font-size:160%; line-height:1.3em; letter-spacing:0; font-weight:normal; margin:0 0 5px 0; padding:0; } H4 { font-size:140%; line-height:1.3em; letter-spacing:0; font-weight:normal; margin:0 0 5px 0; padding:0; } /*H5 { font-size:140%; line-height:1.3em; letter-spacing:0; font-weight:normal; margin:0 0 5px 0; padding:0; }*/ H6 { font-size:100%; line-height:1em; letter-spacing:0; font-weight:normal; margin:0 0 5px 0; padding:0; overflow:auto; display:inline; } /* top menu */ DIV.page DIV.left H1 { font-size:100%; line-height:1em; letter-spacing:0; font-weight:bold; margin:0; padding:0; color:#ffffff; } DIV.page DIV.left H2 { font-family:Arial; font-size:180%; line-height:1.2em; letter-spacing:0; font-weight:normal; margin:3px 0 10px 0; padding:0; } DIV.page DIV.left H2 A { font-weight:normal;} DIV.page DIV.left H3 { font-size:150%; line-height:1.3em; letter-spacing:0; font-weight:normal; margin:15px 0 7px 0; padding:0; } DIV.page DIV.left H3 A { font-weight:normal;} DIV.page DIV.left H4 { font-size:130%; line-height:1.3em; letter-spacing:0; font-weight:normal; margin:15px 0 7px 0; padding:0; } DIV.page DIV.left H4 A { font-weight:normal;} DIV.page DIV.left H5 { font-size:120%; line-height:1.3em; letter-spacing:0; font-weight:normal; margin:15px 0 7px 0; padding:0; } DIV.page DIV.left H5 A { font-weight:normal;} DIV.page DIV.left H6 { font-size:110%; line-height:1em; letter-spacing:0; font-weight:bold; margin:15px 0 5px 0; padding:0; overflow:visible; display:block; } DIV.page DIV.left P { margin:6px 0; } /*------------------------------------------------------------------------------------ Layout ------------------------------------------------------------------------------------*/ BODY { background:url('../images/bg.gif') top left repeat-x #ffffff; } DIV.layout { width:910px; margin:0 auto; text-align:left; overflow:auto; clear:both; } /*------- Header --------------------------------------------------------------------*/ DIV.header { background:url('../images/bg_center.gif') top left no-repeat; height:451px; position:relative; } DIV.logo { width:251px; height:143px; position:absolute; margin:0; z-index:9999; } DIV.menu { width:659px; height:143px; position:absolute; left:225px; margin:0; } DIV.menu UL { margin:40px 0 0 0; } DIV.menu UL LI { float:left; padding:5px 10px; margin:0 3px; overflow:auto; } DIV.menu UL LI.current { background-color:#703a78; } DIV.menu UL LI A { color:#fff; font-size:110%; font-weight:bold; } DIV.hero { width:858px; height:293px; position:absolute; top:95px; margin:0; padding:48px 0 0 52px; } DIV.hero H1 { margin-right:220px;} DIV.hero DIV { margin:5px 330px 0 0; font-size:110%; line-height:1.4em; } DIV.hero.hero_home { background:url('../images/hero_home.jpg') top right no-repeat; } DIV.hero.hero_pinwheel { background:url('../images/hero_pinwheel.jpg') top right no-repeat; } DIV.hero.hero_painthand { background:url('../images/hero_painthand.jpg') top right no-repeat; } DIV.hero.hero_samenbouwen { background:url('../images/hero_samenbouwen.jpg') top right no-repeat; } DIV.hero.hero_samenstapelen { background:url('../images/hero_samenstapelen.jpg') top right no-repeat; } DIV.hero.hero_handinhand { background:url('../images/hero_handinhand.jpg') top right no-repeat; } /*------- Blog --------------------------------------------------------------------*/ DIV.blog { background:url('../images/bg_blog.gif') top left repeat-y; font-size:110%; } DIV.blogitem { background:url('../images/bg_blogitem.gif') bottom center no-repeat; width:100%; overflow:auto; padding:35px 0 25px 0; } DIV.blogitem DIV.left { width:85px; float:left; text-align:right; margin:0 0 0 25px; } DIV.blogitem DIV.left DIV.date { font-size:110%; font-weight:bold; color:#ffffff; width:77px; height:62px; text-align:center; padding:15px 0 0 0; } DIV.blogitem DIV.left DIV.date SPAN { font-size:200%; font-weight:normal; } DIV.blogitem DIV.left DIV.author { margin:15px 0 0 0; color:#999999; line-height:1.4em; } DIV.blogitem DIV.right { width:732px; float:left; margin:0 0 0 40px; } DIV.blogitem DIV.right DIV.functions { border-top:5px solid #efefef; padding:15px 0 0 0; margin:15px 0 0 0; } DIV.blogitem DIV.right DIV.functions LI { float:left; width:20%; line-height:1.2em; } DIV.blogitem DIV.right DIV.functions LI DIV { float:left; margin:1px 10px 0 0; width:32px; height:32px; } /* social media icons */ DIV.functions DIV.comments { background-position:-21px -82px; } DIV.functions DIV.facebook { background-position:-21px -115px; } DIV.functions DIV.bookmark { background-position:-21px -150px; } DIV.functions DIV.twitter { background-position:-21px -185px; } DIV.functions DIV.rss { background-position:-21px -221px; } DIV.blog_narrow { background:url('../images/bg_blog_narrow.gif') top left repeat-y; font-size:110%; width:660px; float:left; margin:0 0 15px 0; } DIV#Sidebar { width:220px; margin:25px 30px 0 0; float:left; } DIV#BlogContent { width:650px; margin:0 0 0 0; float:left; } DIV.blog_narrow DIV.blogitem DIV.left { width:85px; margin:0 0 0 0; } DIV.blog_narrow DIV.blogitem DIV.right { width:560px; float:left; margin:0 0 0 15px; } DIV.blog_narrow DIV.blogitem DIV.right DIV.functions LI { font-size:90%; } DIV.blog_narrow DIV.blogitem DIV.right DIV.functions LI DIV { margin:1px 5px 0 0; } DIV#Sidebar DIV.WidgetHolder { background:url('../images/bg_side.gif') bottom left repeat-x; padding:0 0 15px 0; margin:0 0 15px 0; } DIV.blogEntry { font-size:110%; width:660px; float:left; margin:35px 0 15px 0; } DIV#PageComments_holder { font-size:110%; width:660px; float:left; margin:35px 0 15px 0; } UL#PageComments LI { clear:both; width:100%; overflow:auto; border-top:1px solid #e9e8e8; padding:0 0 5px 0; } DIV.blogEntry .authorDate { font-weight:bold; } DIV.blogEntry .tags { display:block; margin:5px 0 10px 0; } P.comment { margin:15px 0 10px 0; clear:both; display:block; } P.info { font-weight:bold; } UL.actionLinks LI { float:left; margin:0 10px 0 0; clear:none !important; width:auto !important; border:0 !important; } P#CommentsRSSFeed { display:block; margin:15px 0 0 0; padding:10px 0 0 0; border-top:3px solid #e9e8e8; } .tagcloud .not-popular { font-size: 0.8em !important; } .tagcloud .not-very-popular { font-size: 1em !important; } .tagcloud .somewhat-popular { font-size: 1.2em !important; } .tagcloud .popular { font-size: 1.4em !important; } .tagcloud .very-popular { font-size: 1.6em !important; } .tagcloud .ultra-popular { font-size: 1.8em !important; } /*------- Page --------------------------------------------------------------------*/ DIV.page { background:url('../images/bg_page.gif') top left repeat-y; width:100%; overflow:auto; padding:35px 0 0 0; font-size:110%; } DIV.page DIV.left { width:550px; float:left; margin:0 0 0 52px; } DIV.page DIV.left TD { vertical-align:top; } DIV.page DIV.right { width:210px; float:left; margin:0 0 0 68px; } DIV.side_blog, DIV.side_contact, DIV.side_socialmedia { clear:both; background:url('../images/bg_side.gif') bottom left repeat-x; padding:0 0 15px 0; margin:0 0 15px 0; } DIV.side_contact UL LI, DIV.side_socialmedia UL LI { clear:both; margin:6px 0; } DIV.side_menu { padding:0 0 15px 0; } DIV.side_menu UL LI { background-color:#82458b; padding:3px 6px; margin:0 0 1px 0; } DIV.side_menu UL LI.current { background-color:#c0a2c5; } DIV.side_menu UL LI A { color:#fff; } DIV.side_blog { padding:0 0 5px 0; } DIV.side_blog UL LI { margin:0 0 15px 0; line-height:1.2em; } DIV.side_blog UL LI SPAN { margin:0 0 0 5px; width:11px; height:11px; background-position:-5px -5px; } DIV.side_contact { } DIV.side_contact UL LI DIV { float:left; margin:1px 5px 0 0; width:22px; height:22px; } DIV.side_contact UL LI SPAN { font-weight:bold; font-size:120%; } DIV.side_contact UL LI SPAN A { font-weight:bold; } /* contact icons */ DIV.side_contact UL LI.email DIV { background-position:0 -22px; } DIV.side_contact UL LI.phone DIV { background-position:0 -44px; } DIV.side_socialmedia { margin:0; background:none; } DIV.side_socialmedia UL LI DIV { float:left; margin:1px 5px 0 0; width:22px; height:22px; } /* social media icons */ DIV.side_socialmedia UL LI.twitter DIV { background-position:0 -69px; } DIV.side_socialmedia UL LI.facebook DIV { background-position:0 -94px; } DIV.side_socialmedia UL LI.rss DIV { background-position:0 -120px; } DIV.side_socialmedia UL LI.bookmark DIV { background-position:0 -120px; } DIV.page DIV.end { background:url('../images/bg_pageend.gif') top left no-repeat; width:100%; height:48px; clear:both; } /* ---------- image styles in content ----------------------- */ DIV.page_content DIV.image { line-height:0; padding: 0 8px 8px 0; float: left; /*position: relative;*/ background: url('../images/bg_shadow.png') no-repeat right bottom; } DIV.page_content DIV.image IMG { border:1px solid #fff; } DIV.page_content DIV.image.alignleft { margin:0 30px 10px 0; } DIV.page_content DIV.image.alignright { float:right; margin:0 0 10px 30px; } /*------- Profiles --------------------------------------------------------------------*/ DIV.profile { width:100%; clear:both; overflow:auto; background:url('../images/bg_side.gif') bottom left repeat-x; padding:0 0 15px 0; margin:0 0 15px 0; } DIV.pullout { font:normal 20px/24px Georgia, Times; color:#999999; margin:0 0 15px 0; } DIV.profile DIV.pullout { margin:15px 0; } DIV.profile P { display:inline !important; } DIV.profile H2 A { display:inline !important; } BLOCKQUOTE { margin:0; color:#666666; font-style:italic; padding:0; } /*------- Footer --------------------------------------------------------------------*/ DIV.footer { background-color:#efefef; padding:20px 30px; width:850px; overflow:auto; margin:20px 0 0 0; } DIV.footer DIV.left { color:#666666; float:right; text-align:right; margin:0 20px 0 0; } DIV.footer DIV.right { color:#666666; float:right; } /*------------------------------------------------------------------------------------ Form ------------------------------------------------------------------------------------*/ FORM { margin:0px; padding:0px; } FORM FIELDSET { border:0px solid #000000; padding:0; border-top:1px solid #eeeeee; } FORM .field { display:block; clear:both; padding:5px 5px; margin-bottom:1px; background-color:#f7f7f7; overflow:auto; border-bottom:1px solid #eeeeee; } FORM DIV.field LABEL { padding:3px 0px; margin:0px; float:left; width:220px; } FORM .field INPUT { padding:3px 4px; width:350px; border:1px solid #cccccc; } FORM .field TEXTAREA { padding:4px; width:350px; font-size: 100%; font-family: Arial, Verdana; } FORM P.field INPUT { width:25px; position:relative; padding:4px; border:0px; margin:2px 0px 0px 0px; } FORM P.field LABEL { float:none; position:relative; padding:0px; margin:0px; } FORM .message { background-color:#ffeded; border:1px solid #e10007; color:#e10007; padding:3px 5px; font-weight:bold; } DIV.Actions { padding:4px 0px; text-align:right; margin-bottom:15px; } DIV.Actions INPUT { padding:4px 10px; border:1px solid #666666; background-color:#000000; color:#FFFFFF; overflow: visible; }