/* -------------------------------------------------------------- ----------------------------------------------------------------- DEFINITIONS: Layout AUTHOR: Elliot Jay Stocks VERSION: 30.10.2009 CONTENTS: 1 Essentials 2 Basic layout 3 Footer 4 Home 5 Blog 6 Portfolio 7 Speaking 8 Publication 9 About 10 Contact 11 Fusion Ads 12 Starkers Ad 13 Parallax effects ----------------------------------------------------------------- -------------------------------------------------------------- */ /* 1 Essentials */ html { background:#edece0 } body { background-image: url(/images/bg_main2.jpg); } div.grid { background:url(http://cdn.images.elliotjaystocks.com/presentation/960_grid.png); position:absolute; top:0; left:10px; width:940px; height:100%; z-index:4; display:none } /* 2 Basic layout */ div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 } ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 } ul.nav li { display:inline; margin:0 10px 0 0 } div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px } div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 } object, div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 } div.wrapper a:hover img { background:#fff } input, textarea { background:#ccc; border:10px solid #999; padding:10px } input:focus, textarea:focus { background:#fff; border:10px solid #ccc; outline:none } input.submit { background:#900; border:10px solid #600; color:#fff; cursor:pointer } input.submit:active { background:#c00; border:10px solid #900 } /* 3 Footer */ div.footer_decoration { background:url(http://cdn.images.elliotjaystocks.com/presentation/footer_decoration.gif) 80% 0 repeat-x; height:9px; margin:40px -10px 0 -10px; z-index:3 } div.footer { background:#0a0d10 url(http://cdn.images.elliotjaystocks.com/presentation/footer.jpg); margin:0 -10px -30px -10px; z-index:3 } div.footer div.wrapper { padding:40px 10px; width:940px } div.footer div.wrapper p.top { background:#0a0d10; width:80px; margin:0; padding:10px; text-align:center; position:absolute; top:-43px; left:850px } div.footer div.container { background:url(http://cdn.images.elliotjaystocks.com/presentation/footer_borders.jpg) center center; margin:-4px 0 -2px 0 } div.delicious ul li { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_delicious.gif) 0 5px no-repeat; margin:0 0 20px 0; padding:0 0 0 40px } form#searchform { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long_inverted.png) bottom center no-repeat; padding:20px 0 70px 0 } form#searchform input { width:540px; position:absolute; top:0; left:240px } form#searchform input#searchsubmit { margin:0 0 0 10px; width:100px; position:absolute; top:0; left:830px } div.copyright { background:url(http://fernandoescobar.net/images/hr_long_inverted.png) 200px 0 repeat-x; padding:20px 0 0 0 } div.bookmarks { float:left; width:200px; padding:0 20px 20px 0 } /* The border is achieved via a background image on div.container - see above */ div.subscribe_and_support { float:left; width:220px } /* The border is achieved via a background image on div.container - see above */ div.subscribe { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long_inverted.png) bottom 200px repeat-x; padding:0 20px 30px 20px } div.subscribe ul li { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_feed.gif) center left no-repeat; height:16px; padding:5px 0 5px 36px } div.other_stuff { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long_inverted.png) bottom center no-repeat; padding:0 20px 40px 20px } div.other_stuff a.has_image img { border:none; padding:0 } div.other_stuff a.has_image:hover img { border:none } div.support { padding:0 20px } div.support ul li { float:left; margin:0 10px 20px 0 } div.support ul li a { text-indent:-9999px; display:block; height:30px } div.support ul li a:hover { border:none } div.support ul li.greenpeace a { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_charity_greenpeace.gif); width:31px } div.support ul li.wwf a { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_charity_wwf.gif); width:31px } div.support ul li.foe a { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_charity_foe.gif); width:22px } div.twitter_and_delicious { float:left; width:500px } div.twitter { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long_inverted.png) bottom 400px repeat-x; padding:0 0 30px 20px } div.delicious { padding:0 0 10px 20px } /* 4 Home */ div.intro { height:100px; margin:40px 0 0 0; background:#fff } body.home ul.featured_projects { margin:40px 0 0 0 } body.home ol.mini_events li { margin:0 0 -20px 0 } /* 5 Blog */ div.post_wrapper.blog { background:none; margin:0; padding:0 } div.odd_posts { } div.even_posts { position:absolute; top:-11px; left:560px } div.odd_posts div.post { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom 70px no-repeat; margin:0; padding:0 0 40px 70px; width:340px } div.even_posts div.post { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom 0 no-repeat; padding:0 0 40px 0; margin:0 70px 0 -10px; width:340px } div.comment_count { background:#000; position:absolute; top:0; right:0; color:#fff } img.article_illustration { margin:10px 0 10px -70px } body.blog div.post img, body.blog div.post object { margin:10px 0 10px -70px } body.blog div.even_posts div.post img.article_illustration { margin:10px 0 10px -10px } ol.comment_list li { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom center no-repeat; min-height:140px; margin:20px 0; padding:20px 0 } ol.comment_list li.alt { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_2.png) bottom center no-repeat } ol.comment_list li div.gravatar { position:absolute; top:24px; left:70px; padding:10px; background:#d3d4cb; border:1px solid #999 } ol.comment_list li div.gravatar img { padding:0; border:none } ol.comment_list li div.text { padding:0 190px } ol.comment_list li div.text li { background:none; min-height:0; margin:10px 0; padding:0 } div.post ul li { list-style:disc } div.post ol li { list-style:decimal-leading-zero } div.column.sidebar { margin:70px 64px 0 0; padding:0 0 0 70px; width:346px } /* A 2px change to the margins / width of this particular column, due to the 1px borders on the images */ div.recent_comments { margin:0 0 60px 0 } div.recent_comments ul li { width:340px; border-bottom:1px solid #999 } div.recent_comments ul li a { display:block; padding:10px 0 } div.recent_comments ul li a:hover { background:#fff } form#commentform { margin:20px 70px } form#commentform p { padding:0 0 0 180px } form#commentform div { margin:20px 0 } form#commentform div h3 { margin:0; position:absolute; top:0; left:0 } form#commentform div input { width:620px; margin:0 0 0 180px; border:none } form#commentform div input.submit { width:640px; background:#900; border:10px solid #600 } /* Putting those background / border roles back in */ form#commentform div input.submit:active { background:#c00; border:10px solid #900 } /* Putting those background / border roles back in */ form#commentform textarea { border:none; width:620px; height:200px; margin:0 0 0 180px } div.flickr ul li { display:inline } div.flickr ul li a img { margin:0 25px 25px 0 } div.full_archives { padding:0 70px } /* div.full_archives { min-height:140px; padding:0 0 0 490px } div.full_archives img.article_illustration { margin:0; position:absolute; top:-14px; left:0 } div.full_archives div.article_illustration_mini { position:absolute; top:-14px; left:240px } div.full_archives div.article_illustration_mini a { display:block; text-indent:-9999px; width:90px; height:90px } */ /* 6 Portfolio */ div.post_wrapper.portfolio { margin:10px 0 0 0; padding:0 } div.post_wrapper.portfolio_inner h2 { position:relative } div.post_wrapper.portfolio_inner h2 span { position:absolute; top:0; right:70px } ul.featured_projects { margin:40px 0 0 0 } ul.featured_projects li { float:left } ul.featured_projects li a { position:relative; width:200px; /*height:130px*/ } ul.featured_projects li a span { padding:10px; background:#fff; color:#000; display:block; margin:0; position:absolute; top:-50px; left:30px } ul.featured_projects li a:hover span { background:#000; color:#fff } ul.featured_projects li a img { width:200px; /*height:130px;*/ margin:0 9px 40px 9px } /* 9px left and right margins instead of 10px because of the 1px border */ ul.featured_projects li a img.swd { /*height:250px*/ } div.portfolio_intro { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom center no-repeat; margin:0 0 50px 0; padding:0 0 50px 0 } div.portfolio_intro p { margin:0 70px 0 0; position:absolute; top:0; left:490px } div.client_list { float:left; width:220px; padding:0 0 0 70px } div.selected_posts { float:left; width:660px; padding:0 0 40px 10px } div.selected_posts ul li { float:left } div.selected_posts ul li a { position:relative; width:80px; height:80px } div.selected_posts ul li a span { display:none } div.selected_posts ul li a:hover span { display:block; background:#000; color:#fff; padding:10px; margin:0; position:absolute; top:-20px; left:30px; z-index:2 } div.selected_posts ul li a img { width:80px; height:80px; margin:10px 9px; position:relative; z-index:1 } img.image_inner_01 { /*width:500px;*/ margin:0 0 18px 0 } img.image_inner_02 { /*width:320px*/ } img.image_inner_03 { /*width:140px;*/ margin:0 0 18px 18px } img.image_inner_04 { /*width:140px;*/ margin:0 0 18px 18px } img.image_inner_05 { /*width:140px*/ margin:0 0 18px 18px } div.additional_images { width:430px; margin:30px 0 10px -20px } div.additional_images img { float:left } div.column.focus { margin:20px 0 0 -50px; padding:0 } div.credits { width:510px } div.container div.credits { position:absolute; top:-4px; left:364px; width:150px } div.browse_all { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) top center no-repeat; padding:10px 0 0 0 } div.browse_all ul li { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom center no-repeat; padding:0 0 40px 0 } div.browse_all ul li.alt { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_2.png) bottom center no-repeat } div.browse_all ul li p { margin:0 550px 0 70px } div.browse_all ul li p.top { margin:0; position:absolute; bottom:40px; left:850px } div.browse_all ul li ul li { background:none; padding:0 } div.browse_all ul li ul li { float:left } div.browse_all ul li ul li a { position:relative; width:80px; height:80px } div.browse_all ul li ul li a span { display:none } div.browse_all ul li ul li a:hover span { display:block; background:#000; color:#fff; padding:10px; margin:0; position:absolute; top:-20px; left:30px; z-index:2 } div.browse_all ul li ul li a img { width:80px; height:80px; margin:10px 9px; position:relative; z-index:1 } div.browse_by_client ul li { float:left; width:220px; background:none; margin:10px 10px 0 10px; padding:0 } div.browse_by_client ul li ul li { float:none; margin:0 } /* 7 Speaking */ div.column.future img { margin:20px 0 0 -70px } ol.mini_events.future_events { margin:-48px 0 0 0 } ol.mini_events li { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom left no-repeat; padding:20px 0; position:relative } ol.mini_events li p.url { position:absolute; bottom:20px; right:0 } ol.past_events li { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom left no-repeat; margin:0 70px; padding:20px 0; min-height:200px; position:relative } ol.past_events li ul li { background:none; padding:0 } span.country { display:block; text-indent:-9999px; width:16px; height:11px; position:absolute; top:26px; right:0 } span.country.australia { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_flag_australia.gif) } span.country.belgium { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_flag_belgium.gif) } span.country.slovenia { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_flag_slovenia.gif) } span.country.uk { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_flag_uk.gif) } span.country.usa { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_flag_usa.gif) } span.country.nz { background:url(http://cdn.images.elliotjaystocks.com/presentation/icon_flag_nz.gif) } ol.past_events li span.country { top:100px; left:0 } div.column.past img { margin:-30px 0 0 -10px } ul.downloads { position:absolute; top:8px; left:360px } ul.photos { position:absolute; top:70px; right:-10px; width:350px; text-align:right } ul.photos li { display:inline; margin:0 10px 0 14px; min-height:none } /* 8 Publication */ ul.interviews li { margin:20px 70px; width:820px; border:1px solid #fff } ul.interviews li span.date { position:absolute; top:0; left:410px; width:400px; padding:0 0 0 10px } ul.interviews li span.media { position:absolute; top:0; left:540px; color:#999 } div.column.swd_blurb { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_2.png) bottom 70px no-repeat; padding:0 0 20px 70px } div.column.swd_cover { margin:-24px 0 0 0 } div.column.swd_cover ul li { display:inline } div.column.swd_cover img { width:160px; margin:30px 0 0 -70px; position:relative } div.column.swd_cover div.info { width:220px; position:absolute; top:10px; left:250px } div.column.swd_cover div.embellishment { background:url(http://cdn.images.elliotjaystocks.com/presentation/swd_bg.png) bottom left no-repeat; width:321px; height:244px; position:absolute; top:80px; left:-70px } div.other_books ul li { float:left; width:360px; margin:0 0 0 60px; position:relative } ul.magazines li { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_short_1.png) bottom left no-repeat; padding:20px 0; margin:0 70px; min-height:160px } ul.magazines li img { width:100px; position:absolute; top:20px; left:350px } div.post_wrapper.interviews { background:none } /* 9 About */ div.column.help { margin:-24px 70px 0 0 } div.help ul li { display:inline } div.press_shot { margin:130px 0 0 -10px } div.press_shot div { background:url(http://cdn.images.elliotjaystocks.com/content/about/press-shot-01-overlay.png); width:242px; height:236px; position:absolute; bottom:11px; left:150px } ul.elsewhere { background:url(http://cdn.images.elliotjaystocks.com/presentation/social_media_icons.gif); width:717px; height:36px; margin:20px 0 20px 70px } ul.elsewhere li a { display:block; text-indent:-9999px; height:36px; position:absolute; top:0 } ul.elsewhere li a.twitter { width:129px; left:0 } ul.elsewhere li a.flickr { width:104px; left:150px } ul.elsewhere li a.lastfm { width:83px; left:277px } ul.elsewhere li a.dopplr { width:200px; left:380px } ul.elsewhere li a.sourhaze { width:116px; left:599px } div.post_wrapper.faqs { background:none; margin:0; padding:0 } ul.faqs { margin:0 60px } /* 10 Contact */ div#more_info { background:#fff; border:1px solid #000; padding:30px 40px 10px 40px; margin:40px 130px } /* 11 Fusion Ads */ div.ads { background:#fff; width:330px; min-height:130px; margin:0 0 40px -10px; padding:10px; border:1px solid #999 } div.ads h3 { margin:0 0 8px 0 } div.ads a { display:block } div.ads a img { float:left; margin:0 10px 10px 0; padding:0; border:none } div.ads a:hover { border:none } div.ads p { margin:0 } div.ads br { display:none } div.ads p.powered { font-style:italic; margin:10px 0 0 0 } /* 12 Starkers Ad */ a.starkers_ad { margin:0 0 0 -10px } /* 13 Parallax effects */ div.ooh, div.isnt, div.this, div.fun { position:fixed; top:10px; left:0; width:100%; z-index:1 } div.ooh { background:url(http://cdn.images.elliotjaystocks.com/presentation/parallax_bits1.gif) 80% 0 repeat-x; height:482px; top:100px } div.isnt { background:url(http://cdn.images.elliotjaystocks.com/presentation/parallax_bits2.gif) 15% 0 repeat-x; height:418px; top:400px } div.this { background:url(http://cdn.images.elliotjaystocks.com/presentation/parallax_logoBig.png) 90% 0 no-repeat; height:191px } div.fun { background:url(http://cdn.images.elliotjaystocks.com/presentation/parallax_logoHuge.png) 30% 0 no-repeat; height:220px }