/* NOTTS-PARIS 2009 by GREGORY WOOD VERSION 1.0 CONTENTS ---------- 1.BODY 2.DEFAULT STYLING 3.HEADINGS 4.LINKS 5.IMAGES 6.LAYOUT 7.BRANDING/MASTHEAD 8.NAVIGATION 9.SITEINFO/FOOTER ..etc.. ------------------- COLOURS ----------- yellow #ffff00 green #339900 cream #D6C7A4 brown #A1967A darker brown #7C745F ------------------- */ @import url(reset.css); /* RESET CSS */ @import url(forms.css); /* FORMS CSS */ @import url(scratch.css); /* SCRATCH */ /* 1.BODY ---------------------------------------------------------------------- */ body { font-family:Georgia,serif; color:#000; background:#eee2c8 url(../images/site/body_bg.jpg) 0 0; font-size:14px; line-height:21px; } ul#nav_access { position:absolute; top:-9999px; left:-9999px; } /* 2.DEFAULT STYLING ---------------------------------------------------------------------- */ p,ul,dl,ol { margin-bottom:18px; } ul { list-style:circle; } ol { list-style:lower-roman; } hr { height:0; border:none; background:none; border-top:2px solid rgba(0,0,0,0.1); margin-bottom:18px; } blockquote { color:#7C745F; font-style:italic; padding-left:20px; border-left:2px solid rgba(0,0,0,0.2); margin-bottom:18px; } blockquote cite { color:#A1967A; text-transform:uppercase; font-size:10px; font-style:normal; display:block; padding-top:10px; letter-spacing:1px; } abbr { border-bottom:1px dotted #A1967A; cursor:help; } del { color:#7C745F; } strong { font-weight:bold; } em { font-style:italic; } /* 3.HEADINGS ---------------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { } h1 { font-size:36px; line-height:30px; font-family:"ITCAvantGardeStd-Bold","AvantGardeLT-Bold",Helvetica,Arial,sans-serif; text-transform:uppercase; } h2 { font-size:24px; line-height:24px; font-family:"ITCAvantGardeStd-Bold","AvantGardeLT-Bold",Helvetica,Arial,sans-serif; text-transform:uppercase; } h3 { font-size:16px; line-height:16px; font-family:"ITCAvantGardeStd-Bold","AvantGardeLT-Bold",Helvetica,Arial,sans-serif; text-transform:uppercase; margin-bottom:10px; } p + h3, ul + h3 { padding-top:10px; } h4 { font-size:12px; font-weight:bold; font-family:Verdana,sans-serif; text-transform:uppercase; color:#a1967a; } h5 { font-size:11px; font-weight:bold; line-height:11px; font-family:Verdana,sans-serif; color:#a1967a; margin-bottom:7px; } h6 { } /* 4.LINKS ---------------------------------------------------------------------- */ a { font-weight:bold; color:#339900; text-decoration:none; } a:hover, a:focus { text-decoration:underline; } /* 5.IMAGES ---------------------------------------------------------------------- */ img { background:rgba(0,0,0,0.15); padding:5px; } img.left { float:left; margin:3px 20px 10px 0; } img.right { float:right; margin:3px 0 10px 15px; } /* 6.LAYOUT ---------------------------------------------------------------------- */ div#page { } div#content_wrapper { width:880px; background:url(../images/site/content_wrapper_bg.png) repeat-y 0 0; padding-bottom:60px; float:left; } div#content_pri { width:540px; float:right; } div#content_sec { width:260px; float:left; color:#f3e9c9;; } /* 7.BRANDING/MASTHEAD ---------------------------------------------------------------------- */ div#title { width:540px; padding-left:340px; background:url(../images/site/title_bg.jpg) no-repeat 0 0; position:relative; margin-bottom:70px; } div#title h1 { width:523px; height:184px; background:url(../images/site/title_h1_bg.png) no-repeat 0 bottom; padding-top:16px; margin-bottom:25px; } div#title h1 a { display:block; width:320px; height:184px; text-indent:-9999px; } div#title h2 { font-family:Georgia,serif; font-size:22px; line-height:30px; font-style:italic; text-transform:none; margin-bottom:20px; } div#title h3 { font-family:Georgia,serif; font-size:17px; line-height:26px; font-style:italic; text-transform:none; color:#444; margin:10px; } div#title h3 a { text-decoration:underline; color:#444; font-weight:normal; } div#title h3 a:hover, div#title h3 a:focus { color:#111; } div#title p { width:164px; height:66px; position:absolute; top:0; right:0; } div#title p a { display:block; width:164px; height:66px; text-indent:-9999px; background:url(../images/site/title_viewroute.png) no-repeat 0 0; } div#title p a:hover, div#title p a:focus { background-position:0 -66px; } /* 8.SITEINFO/FOOTER ---------------------------------------------------------------------- */ div#siteinfo { height:197px; clear:both; position:relative; background:url(../images/site/siteinfo_bg.jpg) repeat-x 0 bottom; margin-left:270px; } div#getintouch { width:220px; padding:0 20px; float:left; position:relative; left:-270px; background:rgba(0,0,0,0.8); color:#a1967a; font-size:18px; line-height:27px; font-style:italic; min-height:197px; } div#getintouch h4 { width:169px; height:18px; text-indent:-9999px; background:url(../images/site/getintouch_h4.png) no-repeat 0 0; position:relative; top:-18px; } div#getintouch p { margin:0; } div#getintouch a { color:#c4bca8; text-transform:uppercase; text-decoration:underline; } div#getintouch a:hover, div#getintouch a:focus { color:#fff; } div#twowheelsgood { position:absolute; bottom:0; left:0px; width:610px; height:197px; text-indent:-9999px; background:url(../images/site/twowheelsgood_bg.jpg) no-repeat left top; } /* 9.JOURNAL ---------------------------------------------------------------------- */ /* 9.1 JOURNAL HEADER --------------- */ div#journal_header { padding-bottom:15px; border-bottom:2px solid #000; position:relative; margin-bottom:35px; } div#journal_header h2 span { display:inline-block; width:115px; height:19px; text-indent:-9999px; background:url(../images/site/journal_h2.png) no-repeat 0 0; } div#journal_header h2 a { display:inline-block; width:18px; height:18px; text-indent:-9999px; background:url(../images/site/icon_rss_18.png) no-repeat 0 0; } div#journal_header form { position:absolute; top:0; right:0; } div#journal_header form label { display:none; } /* 9.2 JOURNAL LISTING --------------- */ ul#journal_listing { list-style:none; } ul#journal_listing li { padding-bottom:35px; margin-bottom:35px; border-bottom:2px solid #000; position:relative; overflow:hidden; } ul#journal_listing li h3 { width:430px; } ul#journal_listing h3 a:hover, ul#journal_listing h3 a:focus { border-bottom:2px solid #339900; text-decoration:none; } ul#journal_listing li h6 { font-family:Verdana,sans-serif; font-size:36px; font-weight:bold; color:#d6c7a4; position:absolute; top:5px; right:0; } ul#journal_listing li h6 span { display:none; } ul#journal_listing li p.meta { margin:0; color:#a1967a; font-family:Verdana,sans-serif; font-size:10px; text-transform:uppercase; font-weight:bold; } ul#journal_listing li p.meta a { color:#7C745F; } ul#journal_listing li.older { margin:0; border:none; padding:0; } ul#journal_listing li.older a { display:block; width:234px; height:15px; text-indent:-9999px; background:url(../images/site/journal_viewolder.png) no-repeat 0 0; } ul#journal_listing li.older a:hover, ul#journal_listing li.older a:focus { height:13px; border-bottom:2px solid #000; } /* 9.3 JOURNAL POST --------------- */ p#breadcrumbs { color:#9fc085; font-size:11px; font-weight:bold; font-family:Verdana,sans-serif; line-height:7px; margin-bottom:20px; } p#breadcrumbs a.backtohome { display:inline-block; width:68px; height:13px; text-indent:-9999px; background:url(../images/site/breadcrumbs_home.png) no-repeat 0 0; padding-top:1px; } p#breadcrumbs a.backtohome:hover, p#breadcrumbs a.backtohome:focus { height:11px; border-bottom:2px solid #339900; } p#breadcrumbs span { display:inline-block; padding-left:5px; width:112px; height:11px; padding-top:1px; text-indent:-9999px; background:url(../images/site/breadcrumbs_journalentry.png) no-repeat right 0; } h4.journalpost_meta { margin-bottom:20px; } /* 9.4 COMMENTS --------------- */ /* 9.4.1 COMMENTS HEADING --------------- */ div#comments { border-top:2px solid #000; padding-top:35px; } div#comments h2 { position:relative; left:-7px; line-height:14px; font-size:14px; } div#comments h2 strong { display:inline-block; width:76px; height:40px; padding:24px 0 12px 0; background:url(../images/site/comment_number.png) no-repeat 0 0; text-align:center; font-size:40px; font-weight:normal; font-style:italic; font-family:Georgia,serif; letter-spacing:-1px; } div#comments h2 span { display:inline-block; width:106px; height:16px; text-indent:-9999px; background:url(../images/site/comment_span.png) no-repeat 0 0; margin-right:10px;} div#comments h2 span.one { width:96px; } div#comments h2 a { color:#a1967a; font-style:italic; font-weight:bold; font-family:Georgia,serif; font-size:14px; font-weight:normal; text-transform:none; text-decoration:underline; } div#comments h2 a:hover, div#comments h2 a:focus { color:#7C745F; } /* 9.4.2 COMMENTS LISTING --------------- */ div#comments ol { list-style:none; font-size:12px; line-height:18px; border-bottom:2px solid #000; padding-bottom:20px; margin-bottom:50px; } div#comments ol li { border-top:2px solid rgba(0,0,0,0.15); margin:0; padding:18px 80px 0 0; overflow:hidden; } div#comments ol li:first-child { border:none; } div#comments ol li h5 { font-size:11px; text-transform:uppercase; margin-bottom:10px; } div#comments ol li h5 a { text-decoration:underline; color:#7c745f; } div#comments ol li h5 a:hover, div#comments ol li h5 a:focus { color:#605a49; } div#comments ol li h5 img { float:right; position:relative; right:-80px; margin:0 0 18px -60px; padding:3px; width:54px; } div#comments ol li h5 a:hover img, div#comments ol li h5 a:focus img { background:rgba(0,0,0,0.2); } div#comments ol li p { margin-bottom:18px; } /* 9.4.3 COMMENTS FORM --------------- */ div#comments form { border-bottom:2px solid #000; margin-bottom:20px; padding-bottom:40px; } div#comments form h3 { width:210px; height:18px; text-indent:-9999px; background:url(../images/site/comment_form_h3.png) no-repeat 0 0; left:0; margin-bottom:25px; } div#comments form fieldset { position:relative; width:540px; height:160px; margin-bottom:15px; } div#comments form label { display:none; } div#comments form textarea { background:rgba(255,255,255,0.5); border:3px solid #dacfb2; width:278px; height:138px; padding:8px; position:absolute; top:0; left:0; margin:0; font-family:Georgia,sans-serif; font-size:16px; color:#b9ab8b; } div#comments form textarea:focus { background:rgba(255,255,255,0.7); border:3px solid #c6bda1; color:#968c72; } div#comments form input[type="text"] { background:rgba(255,255,255,0.5); border:3px solid #dacfb2; width:198px; height:18px; padding:8px; position:absolute; right:0; display:block; font-family:Georgia,sans-serif; font-size:16px; color:#b9ab8b; } div#comments form input[type="text"]:focus { background-color:rgba(255,255,255,0.7); border:3px solid #c6bda1; color:#968c72; } div#comments form input#comment_name { top:0; } div#comments form input#comment_email { top:60px; } div#comments form input#comment_url { top:120px; } div#comments form input.no_content, div#comments form textarea.no_content { background-repeat:no-repeat; background-position:10px 8px; } div#comments form textarea#comment_comment.no_content { background-image:url(../images/site/comment_comment.png); } div#comments form input#comment_name.no_content { background-image:url(../images/site/comment_name.png); } div#comments form input#comment_email.no_content { background-image:url(../images/site/comment_email.png); } div#comments form input#comment_url.no_content { background-image:url(../images/site/comment_url.png); } div#comments form div { position:relative; } div#comments form div p { font-size:11px; line-height:18px; color:rgba(80,76,67,0.8); font-style:italic; width:300px; margin:0; } div#comments form div input { position:absolute; right:0; top:5px; } /* 9.5 JOURNAL FOOTER --------------- */ ul#journal_prevnext { list-style:none; margin:0; height:11px; position:relative; } ul#journal_prevnext li { position:absolute; top:0; } ul#journal_prevnext li a { display:block; text-indent:-9999px; } ul#journal_prevnext li.home { left:0; } ul#journal_prevnext li.home a { width:134px; height:11px; background:url(../images/site/journal_prevnext_home.png) no-repeat 0 0; } ul#journal_prevnext li.home a:hover, ul#journal_prevnext li.home a:focus { background-position:0 -11px; } ul#journal_prevnext li.prev { right:110px; } ul#journal_prevnext li.prev a { width:108px; height:11px; background:url(../images/site/journal_prevnext_prev.png) no-repeat 0 0; } ul#journal_prevnext li.prev a:hover, ul#journal_prevnext li.prev a:focus { background-position:0 -11px; } ul#journal_prevnext li.next { right:0; } ul#journal_prevnext li.next a { width:76px; height:10px; background:url(../images/site/journal_prevnext_next.png) no-repeat 0 0; } ul#journal_prevnext li.next a:hover, ul#journal_prevnext li.next a:focus { background-position:0 -10px; } /* 10.SIDEBAR ---------------------------------------------------------------------- */ div#content_sec h4 { text-indent:-9999px; background-repeat:no-repeat; background-position:0 0; position:relative; } /* 10.1 PROGRESS --------------- */ div#sub_progress { padding:0 20px 45px 20px; background:url(../images/site/content_sec_alt_bg.jpg); } div#sub_progress h4 { width:126px; height:17px; background-image:url(../images/site/sub_progress_h4.png); top:-17px; } div#sub_progress p.daily_status { font-size:11px; font-style:italic; margin-bottom:5px; } div#sub_progress p.daily_status span { font-size:10px; font-weight:bold; font-family:Verdana,sans-serif; font-style:normal; color:#443e30; letter-spacing:1px; text-transform:uppercase; } div#sub_progress div { padding:5px; background:rgba(0,0,0,0.25); } div#sub_progress div iframe { display:block; } div#sub_progress div:hover { background:rgba(0,0,0,0.4); } div#sub_progress div img { padding:0; background:none; } div#sub_progress p.viewfullmap { text-align:right; font-size:9px; text-transform:uppercase; font-family:Verdana,sans-serif; margin:0; } div#sub_progress p.viewfullmap a { color:#443e30; } /* 10.2 PARTICIPANTS --------------- */ div#sub_participants { padding:8px 20px 40px 20px; } div#sub_participants h4 { width:168px; height:17px; background-image:url(../images/site/sub_participants_h4.png); top:-25px; } div#sub_participants ul { list-style:none; font-size:13px; } div#sub_participants ul li { padding-left:80px; margin-bottom:25px; } div#sub_participants ul li h5 { font-family:Georgia,serif; font-size:13px; margin-bottom:5px; font-style:italic; } div#sub_participants ul li h5 a { color:#f3e9c9; font-weight:normal; } div#sub_participants ul li h5 img { float:left; position:relative; left:-80px; margin-right:-60px; } div#sub_participants ul li p { margin-bottom:5px; } div#sub_participants ul li p.leg { font-size:10px; font-weight:10px; font-family:Verdana,sans-serif; text-transform:uppercase; font-weight:bold; color:#98927e; } /* 10.3 MILESTONES --------------- */ div#sub_milestones { padding:0 20px 40px 20px; background:url(../images/site/content_sec_alt_bg.jpg); } div#sub_milestones h4 { width:143px; height:18px; background-image:url(../images/site/sub_milestones_h4.png); top:-18px; } div#sub_milestones ol { list-style:none; margin:0; font-style:italic; line-height:18px; } div#sub_milestones ol li { position:relative; padding:0 0 10px 60px; } div#sub_milestones ol li h5 { display:inline-block; text-transform:uppercase; color:#413e35; font-size:9px; position:absolute; left:0; top:5px; font-style:normal; } div#sub_milestones ol li h5 span { display:inline-block; width:20px; height:20px; background-repeat:no-repeat; background-position:0 0; text-indent:-9999px; position:relative; top:-5px; } div#sub_milestones ol li.zero h5 span { background-image:url(../images/site/milestone_0.png); } div#sub_milestones ol li.one h5 span { background-image:url(../images/site/milestone_1.png); } div#sub_milestones ol li.two h5 span { background-image:url(../images/site/milestone_2.png); } div#sub_milestones ol li.three h5 span { background-image:url(../images/site/milestone_3.png); } div#sub_milestones ol li.four h5 span { background-image:url(../images/site/milestone_4.png); } div#sub_milestones ol li.five h5 span { background-image:url(../images/site/milestone_5.png); } div#sub_milestones ol li small { font-size:9px; font-family:Verdana, sans-serif; display:block; font-style:normal; color:#413e35; } /* 10.4 SPONSOR --------------- */ div#sub_sponsor { padding:12px 20px 0 20px; } div#sub_sponsor h4 { width:118px; height:18px; background-image:url(../images/site/sub_sponsor_h4.png); top:-30px; } div#sub_sponsor p { margin:0; line-height:18px; font-size:12px; } div#sub_sponsor a strong { display:block; width:165px; height:25px; background:url(../images/site/sub_sponsor_strong.png) no-repeat 0 0; text-indent:-9999px; margin-bottom:5px; } div#sub_sponsor a { font-weight:normal; font-style:italic; color:#a7a394; display:block; } div#sub_sponsor a:hover, div#sub_sponsor a:focus { color:#cfcab7; text-decoration:none; }