/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - * Version: 1.0.0 (10-06-2010) * Website: I'm a Spicy Graphic Designer * Type: XHTML 1.1 * Author: I'm a Spicy Graphic Designer - www.alliante.be - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ /* BODY - HTML ==========================================*/ * { margin: 0; padding: 0; } body { background: url(../images/background.jpg) #7c452c no-repeat top center; margin: 0; padding: 0; font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif; font-size: 12px; color: #1f1f1f; } /* END BODY - HTML */ /* ELEMENTS ==========================================*/ h1 { margin: 0; padding: 0; } h2 { margin: 0; padding: 0; } h3 { margin: 0; padding: 0; } h4 { margin: 0; padding: 0; } h5 { margin: 0; padding: 0; } h6 { margin: 0; padding: 0; } p { margin: 0; padding: 0; } img { border: 0; } a { text-decoration: underline; outline: none; } a :hover { text-decoration: none; outline: none; } a :active, a:focus { outline: none; } .clear { clear: both; } /* END ELEMENTS */ /* LAYOUT ==========================================*/ #layout { position: relative; width: 960px; margin: 0 auto; padding: 0; } #logo { width: 661px; height: 175px; margin: 0; padding: 0; } /* END LAYOUT */ /* FOCUS ==========================================*/ #focus { background: url(../images/focus.jpg) no-repeat 0 0; width: 544px; height: 415px; margin: 0 0 0 410px; padding: 25px 0 0 0; } #see_more { display: block; background: url(../images/see_more.png) no-repeat 0 10px; width: 122px; height: 40px; margin: 0 0 0 814px; padding: 0; } #see_more:hover { background-position: 0 0; } #focus_prev { display: block; float: left; background: url(../images/focus_prev.jpg) no-repeat 0 0; width: 20px; height: 34px; margin: 152px 0 0 6px; padding: 0; } #focus_prev:hover { background-position: 0 -34px; } #focus_image { float: left; display: inline; width: 493px; height: 336px; margin: 0; padding: 0; overflow: hidden; } #focus_image img { width: 493px; height: 336px; margin: 0; padding: 0; top: 0; left: 0; } #focus_next { display: block; float: left; background: url(../images/focus_next.jpg) no-repeat 0 0; width: 20px; height: 34px; margin: 152px 0 0 0; padding: 0; } #focus_next:hover { background-position: 0 -34px; } /* END FOCUS */ /* ABOUT ==========================================*/ #about { clear: both; background: url(../images/about.jpg) no-repeat 0 0; width: 750px; height: 157px; margin: 23px auto 20px auto; padding: 20px 20px 0 150px; } #about h1 { font-size: 29px; font-weight: bolder; color: #fff; margin: 0; padding: 0; } #about p { font-size: 22px; font-weight: normal; color: #eaeaea; margin: 20px 0 0 0; padding: 0 0 0 10px; line-height: 24px; } /* END ABOUT */ /* PORTFOLIO ==========================================*/ .portfolio_nav { position: relative; clear: both; width: 313px; height: 47px; margin: 0 auto; padding: 20px 0 0 0; } .portfolio_pages { float: left; height: 27px; margin: 0; padding: 0; } .portfolio_pages a { display: block; float: left; background: url(../images/nav_page.jpg) no-repeat 0 0; width: 27px; height: 27px; margin: 0 8px 0 0; padding: 0; text-indent: -3000px; } .portfolio_pages a:hover { background-position: 0 -27px; } .portfolio_pages .activeSlide { background-position: 0 -27px; } .prev { display: block; float: left; background: url(../images/nav_prev.png) no-repeat 0 0; width: 18px; height: 27px; margin: 0 18px 0 0; padding: 0; } .prev:hover { background-position: 0 -27px; } .next { display: block; float: left; background: url(../images/nav_next.png) no-repeat 0 0; width: 18px; height: 27px; margin: 0 0 0 10px; padding: 0; } .next:hover { background-position: 0 -27px; } #portfolio { position: relative; clear: both; width: 920px; margin: 0 auto; padding: 0; } .portfolio_element { clear: both; background: url(../images/portfolio_bg.png) no-repeat 0 0; width: 872px; height: 282px; margin: 0; padding: 29px 30px 0 16px; } .portfolio_element img { float: left; display: inline; width: 562px; height: 244px; margin: 0 78px 0 0; padding: 0; } .portfolio_element h2 { font-size: 18px; color: #4a2817; margin: 36px 0 0 0; padding: 0; } .portfolio_element h3 { font-size: 14px; font-weight: normal; font-style: italic; color: #84482a; margin: 0 0 20px 10px; padding: 0; } .portfolio_element p { font-size: 14px; margin: 0 0 0 10px; padding: 0; line-height: 18px; } .portfolio_element .portfolio_infos { float: left; display: inline; width: 232px; margin: 0; padding: 0; } .portfolio_element .portfolio_infos .portfolio_icons { float: right; display: inline; margin: 30px 0 0 0; padding: 0; } .portfolio_element .portfolio_infos .portfolio_icons img { width: 28px; height: 28px; margin: 0 5px 0 0; padding: 0; } /* END PORTFOLIO */ /* FOOTER ==========================================*/ #footer { clear: both; background: url(../images/footer.jpg) repeat-x 0 0; width: 100%; height: 343px; margin: 50px 0 0 0; padding: 0; color: #c0a496; } #footer h3 { color: #d9d2ce; font-weight: bolder; font-size: 16px; margin: 0 0 28px 0; } #footer a { color: #d9d2ce; font-style: italic; text-decoration: none; } #footer a:hover { text-decoration: underline; } #informations { position: relative; background: url(../images/informations.jpg) no-repeat 0 0; width: 920px; height: 308px; margin: 0 auto; padding: 35px 0 0 0; } #quickbio { float: left; display: inline; background: url(../images/icon_bio.jpg) no-repeat 0 0; width: 250px; padding: 0 0 0 52px; margin: 0; } #quickbio ul { list-style-type: none; margin: 0; padding: 0; } #quickbio ul li { margin: 0 0 4px 0; padding: 0; } #cv { float: left; display: inline; width: 65px; margin: 0; padding: 130px 0 0 30px; color: #d9d2ce; width: 85px; background: url(../images/icon_skills.jpg) no-repeat 0 0; } #cv_icon { display: block; background: url(../images/icon_pdf.jpg) no-repeat 0 0; width: 65px; height: 28px; padding: 10px 0 0 0; margin: 5px 0 0 0; font-style: italic; text-align: right; text-decoration: none; color: #d9d2ce; } #skills { float: left; display: inline; width: 249px; padding: 0 0 0 20px; margin: 0; } #skills ul { float: left; display: inline; list-style-type: none; margin: 0; padding: 0; } #skills ul li { background: url(../images/icon_check.jpg) no-repeat 0 2px; margin: 0 0 4px 0; padding: 0 0 0 20px; } #skills ul li#skills_more { background-image: none; margin: 0 0 4px 0; padding: 0 0 0 20px; } #touch { float: left; display: inline; background: url(../images/icon_touch.jpg) no-repeat 0 0; width: 234px; padding: 0; margin: 0; } #touch h3 { margin: 0 0 28px 94px; padding: 0; } #touch ul { list-style-type: none; margin: 0 0 0 94px; padding: 0; } #touch ul li { margin: 0 0 4px 0; padding: 0; } #contact { margin: 20px 0 0 0; } #contact p { width: 241px; padding: 0; margin: 3px 0 0 0; color: #d9d2ce; } #contact input { background: url(../images/form_input.jpg) no-repeat 0 0; width: 219px; height: 25px; padding: 0 10px 0 10px; margin: 0; border: 0; color: #c0a496; font-size: 11px; } #contact textarea { background: url(../images/form_textarea.jpg) no-repeat 0 0; width: 224px; height: 66px; padding: 3px 10px 0 10px; margin: 0; border: 0; color: #c0a496; font-size: 11px; } #contact #submit { background: url(../images/form_submit.jpg) no-repeat 0 0; width: 63px; height: 26px; padding: 0; margin: 2px 0 0 0; border: 0; cursor: pointer; float: right; display: block; } /* END FOOTER */ /* LIGHTBOX ==========================================*/ .hidden { display: none; } div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 30; } div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100; } div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: transparent url(../images/fancybox/fancy_progress.png) no-repeat; } div#fancy_outer { position: absolute; top: 0; left: 0; z-index: 90; padding: 20px 20px 40px 20px; margin: 0; background: transparent; display: none; } div#fancy_inner { position: relative; width: 100%; height: 100%; background: #1d1b18; } div#fancy_content { margin: 0; z-index: 100; position: absolute; } div#fancy_div { background: #000; color: #fff; height: 100%; width: 100%; z-index: 100; } img#fancy_img { position: absolute; top: 0; left: 0; border:0; padding: 0; margin: 0; z-index: 100; width: 100%; height: 100%; } div#fancy_close { position: absolute; top: -18px; right: -18px; height: 46px; width: 49px; background: url(../images/fancybox/fancy_closebox.png) top left no-repeat; cursor: pointer; z-index: 181; display: none; } #fancy_frame { position: relative; width: 100%; height: 100%; display: none; } #fancy_ajax { width: 100%; height: 100%; overflow: auto; } a#fancy_left, a#fancy_right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; z-index: 111; display: none; background-image: url("data:image/gif;base64,AAAA"); outline: none; overflow: hidden; } a#fancy_left { left: 0px; } a#fancy_right { right: 0px; } span.fancy_ico { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; z-index: 112; cursor: pointer; display: block; } span#fancy_left_ico { left: -9999px; background: transparent url(../images/fancybox/fancy_left.png) no-repeat; } span#fancy_right_ico { right: -9999px; background: transparent url(../images/fancybox/fancy_right.png) no-repeat; } a#fancy_left:hover, a#fancy_right:hover { visibility: visible; background-color: transparent; } a#fancy_left:hover span { position: absolute; left: 0px; z-index: 999; } a#fancy_right:hover span { position: absolute; right: 0px; z-index: 999; } #fancy_bigIframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } div#fancy_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 70; border: 0;padding: 0; margin: 0; } div.fancy_bg { position: absolute; display: block; z-index: 70; border: 0; padding: 0; margin: 0; } div#fancy_bg_n { top: -22px; left: 0; width: 100%; height: 22px; background: transparent url(../images/fancybox/fancy_t.png) repeat-x; } div#fancy_bg_ne { top: -22px; right: -25px; width: 25px; height: 22px; background: transparent url(../images/fancybox/fancy_tr.png) no-repeat; } div#fancy_bg_e { right: -25px; height: 100%; width: 25px; background: transparent url(../images/fancybox/fancy_r.png) no-repeat; } div#fancy_bg_se { bottom: -20px; right: -25px; width: 25px; height: 20px; background: transparent url(../images/fancybox/fancy_br.png) no-repeat; } div#fancy_bg_s { bottom: -20px; left: 0; width: 100%; height: 20px; background: transparent url(../images/fancybox/fancy_b.png) repeat-x; } div#fancy_bg_sw { bottom: -20px; left: -25px; width: 25px; height: 20px; background: transparent url(../images/fancybox/fancy_bl.png) no-repeat; } div#fancy_bg_w { left: -25px; height: 100%; width: 25px; background: transparent url(../images/fancybox/fancy_l.png) no-repeat; } div#fancy_bg_nw { top: -22px; left: -25px; width: 25px; height: 22px; background: transparent url(../images/fancybox/fancy_tl.png) no-repeat; } div#fancy_title { position: absolute; z-index: 100; display: none; margin: -20px 0 0 0; } div#fancy_title div { color: #101010; font-size: 12px; font-weight: bolder; padding: 4px 0 0 0; white-space: nowrap; } div#fancy_title table { margin: 0 auto; } div#fancy_title table td { margin: 0; padding: 0; vertical-align: middle; } td#fancy_title_left { height: 40px; width: 12px; background: transparent url(../images/fancybox/fancy_title_left.png) no-repeat; } td#fancy_title_main { height: 40px; background: transparent url(../images/fancybox/fancy_title_main.png) repeat-x; } td#fancy_title_right { height: 40px; width: 11px; background: transparent url(../images/fancybox/fancy_title_right.png) no-repeat; } /* END LIGHTBOX */