/* stefangrambart.ca version 4.6 All design and original development by 2009-2010 Stefan Grambart , with support from James King Thanks to James King for helping out with code, and thanks to Kim for her eternal support! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * PLEASE DON'T STEAL THIS SITE * * * * * * * * * * You can now download an open-sourced template * * * * * version of this site called Klaveer * * * * * http://stefangrambart.ca/klaveer * * * * * * * * * * If you have any questions regarding how this site * * * * * was built, feel free to contact me at: * * * * * * * * * * hello@stefangrambart.ca * * * * * * * * * * and I'll help you out as best I can! * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Mootools JS framework & Accordion.js functionality developed by Mootools Slimbox developed by Christophe Beyls Thumblight and InkFill JS developed by James King Aquaticus Social Icons designed by ~jwloh Delarge font designed by Pintassilgo Prints No Actionscript was harmed in the making of this website! */ html { height:100%;} body { color:#111; font-family:Arial, Helvetica, sans-serif; font-size:100.1%; background:url(bg_paper.jpg); margin:0; } a { color:#74573A; text-decoration:none; } a:hover { color:#222; text-decoration:underline; } img { border:none; } hr { border-top:1px dashed #958E77; border-bottom:none; border-left:none; border-right:none; background:none; } #fullheight { height:100%; width:auto; text-align:left; border:none; } #headerbg { background:#111 url(bg_header.jpg); z-index:0; height:80px; width:100%; position:absolute; top:0px; border-bottom:1px solid #000; } #fullpage { z-index:1; position:relative; padding-bottom:30px; } img.feature { display:block; padding-top:50px; padding-bottom:0px; margin:0px; } .fixedwidth { width:900px; margin:auto; } .fixedwidth h1 { display:block; width:387px; height:16px; text-indent:-9999px; background:url(bg_tagline.png) no-repeat bottom left; margin:10px 0; } /* ACCORDION */ #accordion { margin:0; } h3.toggler { height: 42px; position: relative; text-indent: -9999px; cursor: pointer; margin:0; padding:0; } h3.logo { clear:left; width:auto; width:188px; height:80px; float:left; background:url(img_logo.png) no-repeat bottom left; } h3.toggler .filled { position:absolute; /*left: 9999px;*/ bottom:0px; left:0px; overflow:hidden; height:0px; width:100%; } h3.illustration { background:url(btn_illustration.png) no-repeat bottom left; } h3.illustration .filled { background:url(btn_illustration-ink.png) no-repeat bottom left; } h3.design { background:url(btn_design.png) no-repeat bottom left; } h3.design .filled { background:url(btn_design-ink.png) no-repeat bottom left; } h3.about { background:url(btn_about.png) no-repeat bottom left; } h3.about .filled { background:url(btn_about-ink.png) no-repeat bottom left; } h3.contact { background:url(btn_contact.png) no-repeat bottom left; } h3.contact .filled { background:url(btn_contact-ink.png) no-repeat bottom left; } h3.projects { background:url(btn_projects.png) no-repeat bottom left; } h3.projects .filled { background:url(btn_projects-ink.png) no-repeat bottom left; } h3.blog { background:url(btn_blog.png) no-repeat bottom left; } h3.blog .filled { background:url(btn_blog-ink.png) no-repeat bottom left; } .element { margin:0; padding:0; } #key { display:none; } /* CONTACT */ #contact { color:#787363; width:600px; margin-left:300px; float:right; vertical-align:middle; position:absolute; text-align:right; font-size:0.84em; } #contact ul { list-style:none; padding-top:30px; } #contact li { float:right; padding-left:10px; } #contact li.text { padding-top:2px; } #contact li.social { padding-left:3px; } #contact a { color:#BEB8A5; cursor:default; text-decoration:none; } /* CONTENT */ .element h4 { color:#111; margin:10px 0; padding:0; font-size:1.06em; text-indent:0; font-weight:normal; margin-bottom:4px; } .element p { text-align:left; text-indent:0; font-size:0.69em; } .content { width:100%; padding:0; margin:0; border:none; } .content h2 { padding:14px 0 10px 0; margin:0; font-size:1.48em; font-weight:normal; } .content h4 { margin:20px 0 6px 0; padding:0; } .content h5 { display:block; width:200px; height:45px; text-indent:-9999px; margin:0; padding:0; } h5.editorial { background:url(bg_editorial.png) no-repeat bottom left; } h5.logo { background:url(bg_logo.png) no-repeat bottom left; } h5.custom { background:url(bg_custom.png) no-repeat bottom left; } h5.interface { background:url(bg_interface.png) no-repeat bottom left; } .content p { font-size:0.75em; } .content ul { margin:0; padding:6px 0 12px 0; font-size:0.69em; } .content ul li { list-style:none; text-indent:0; } .info { clear:left; margin:0; padding:10px 0 20px 10px; list-style:none; font-size:0.69em; } .column { float:left; margin-right:33px;vertical-align:top; } .column h2 { padding:14px 0 10px 0; margin:0; font-size:1.48em; font-weight:normal; } .column h4 { padding:0; margin: 0 0 10px 0; font-weight:normal; } .column p { color:#685635; font-size:0.76em; padding:0 0 8px 0; margin:0; } .column a { color:#333; } .column a:hover { color:#000; text-decoration:underline; } .column ul { color:#685635; font-size:0.76em; text-indent:0; padding-left:14px; } /* THUMBLIGHT GALLERIES */ .thumblight ul { padding:0px; margin:0 0 40px 0; } .thumblight li { padding:0; margin:0; text-indent:0; list-style:none; } ul.thumblight { padding:10px 0 10px 0; width:100%; } ul.thumblight li { float:left; margin-right:33px; height:224px; width:200px; background:url(../images/thumb_shadow.png) bottom no-repeat; } ul.thumblight h3 { margin:8px 0 0 0; padding:0; font-size:1.12em; font-weight:normal; } ul.thumblight h4 { margin:0; padding:0; font-size:0.74em; color:#74573A; } /* FORM */ .element h5 { color:#111; text-indent:0; font-weight:normal; padding:10px 0 5px 0; margin:0; } #thanks { color:#111; font-size:0.88em; margin:10px 0 0 15px; } .fib { display:none; } textarea:focus, input:focus { border:2px solid #A0967E; } /* TWITTER */ div.twitter { background:#BAB196; padding:5px 20px 5px 15px; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; } div.twitter table { margin:0; padding:0; } div.twitter img { margin-right:10px; align:left; vertical-align:middle; } /* FOOTER */ #footer { width:900px; margin:auto; color:#787363; text-align:center; font-size:0.63em; padding-top:8px; border-top:1px #AFA68F solid; line-height:1.34em; } #footer a { color:#766E59; text-decoration:underline; } #footer a:hover { color:#333; text-decoration:none; } #banner { background:url(bnr_getKlaveer.png) no-repeat; position:absolute; z-index:4; top:0; right:0; width:93px; height:93px; } /* KLAVEER PAGE */ .fixedwidth2 { width:1140px; margin:auto; } .klavgal img { margin:0 16px 8px 0; border:1px solid #333; }