/* Karner Blue Butterfly Microsite - Style Sheet 2009.12.29 Ian McNamara The Creative Company */ /* GENERAL */ html, h1, h2, h3, h4, h5, h6 { font-family:Arial,sans-serif; font-size:12px; font-weight:normal; } body { behavior: url("htc/csshover3.htc"); } /* IE :hover fix */ h1,h2,h3,h4,h5,h6 { font-family:Georgia,serif; font-weight:normal; } h2 { font-size:36px; } h2.sub { font-size:18px; font-style:italic; } h3 { line-height:14px; font-weight:bold; font-size:14px; margin:0px 0px 10px 0px; } h4 { font-family:Georgia,serif; color:#053b35; font-size:14px; font-weight:bold; } p { line-height:24px; } a { text-decoration:none; color:#000000; } /* REUSED ELEMENTS **************************** */ b.line { font-size:1px; height:1px; overflow:hidden; display:block; margin:0px; background-color:#FF0000; } /* nav */ .nav { padding:8px 0px 8px 0px; height:32px; z-index:10; } .nav .element { display:inline; float:right; } .nav .box { padding:0px 7px 0px 7px; margin:0px 0px 0px 6px; } .nav .box.last { margin-left:0px; } .nav h4 { font-family:Georgia,serif; color:#053b35; font-size:12px; font-weight:bold; line-height:32px; } .nav .wrapper { position:relative; display:none; } /* nav option measurements... needed for IE */ .nav .involved .arrow { width:103px; } .nav .eligible .arrow { width:103px; } .nav .process .arrow { width:94px; } .nav .stories .arrow { width:59px; } .nav .overview .arrow { width:77px; } .nav .benefits .arrow { width:67px; } /* nav arrow */ .nav .arrow { position:absolute; } .nav .arrow.bottom { left:0px; top:0px; } .nav .arrow.top { left:0px; top:-8px; } .nav .line { background-color:#D09036; border:#D5B078 solid 0px; border-width:0px 1px 0px 1px; margin-left: auto; margin-right: auto; } .nav .bottom .line.a, .nav .top .line.h { width:14px; } .nav .bottom .line.b, .nav .top .line.g { width:12px; } .nav .bottom .line.c, .nav .top .line.f { width:10px; } .nav .bottom .line.d, .nav .top .line.e { width:8px; } .nav .bottom .line.e, .nav .top .line.d { width:6px; } .nav .bottom .line.f, .nav .top .line.c { width:4px; } .nav .bottom .line.g, .nav .top .line.b { width:2px; } .nav .bottom .line.h, .nav .top .line.a { width:2px; background-color:#D5B078; border-width:0px; } /* nav selection */ .nav .box.current, .nav .box:hover{ background-color:#d09036; } .nav .box.current .wrapper, .nav .box:hover .wrapper { display:block; } /* nav per section */ #involved .nav .line { background-color:#603a06; } #involved .nav .bottom .line.h, #involved .nav .top .line.a { background-color:#D5B078; } #involved .nav .box.current, #involved .nav .box:hover { background-color:#603a06; } #involved .nav .box.current h4, #involved .nav .box:hover h4 { color:#ffffff; } /* spacer */ .spacer { line-height:1px; font-size:1px; /*background-color:#ffeeee;*/ } .spacer b.line.top { background-color:#E5D3B0; } .spacer b.line.bottom { background-color:#F2F2F2; } .spacer .post_intro { margin:14px 0px 22px 0px; } .spacer .post_overview { margin:0px 0px 35px 0px; } .spacer .post_benefits { margin:36px 0px 0px 0px; } .spacer .post_stories { margin:10px 0px 10px 0px; } /* anchors */ a.nav_anchor { position:absolute; left:0px; top:0px; } #stories a.nav_anchor { top:-10px; } #stories a.nav_anchor.sub { top:100px; } /* image loader */ img { background:url('../img/loader.gif') center center no-repeat; } img.noloader { background:none; } /* PAGE CONTENT */ #page_content { display:block; position:relative; background:#f0e5d0 url('../img/page_content_tile.jpg') center 35px repeat; width:100%; /* IE6 fix */ } /* CENTER BACKGROUND */ #center_backdrop { position:relative; margin-right:auto; margin-left:auto; width:960px; z-index:-1; } #center_backdrop .bg { position:absolute; top:0px; left:0px; width:960px; height:4600px; background:#f0e5d0 url('../img/page_content_tile.jpg') -28px 35px repeat-y; /*z-index:-1;*/ } /* TITLE IMAGE */ #header { height:201px; } #header .image { position:relative; margin-left:auto; margin-right:auto; width:960px; } #header img { position:absolute; left:-20px; top:0px; } #header .bar { width:100%; height:37px; background-color:#034751; } #header .line.top { background-color:#022b31; height:3px; } #header .line.bottom { background-color:#c0732f; height:3px; } /* SOCIAL BAR */ #social { position:absolute; left:0px; top:0px; width:100%; } #social .bar { width:960px; margin-right:auto; margin-left:auto; padding-right:16px; } #social .item { display:inline; float:right; margin:0px 0px 0px 26px; line-height:36px; cursor:pointer;} #social .item img { display:inline; float:left; padding:12px 8px 0px 0px; } #social h6 { font-family:Georgia,serif; font-size:12px; color:#b6d1d5; display:inline; float:left; } /* TOP NAVIGATION */ #top_nav { position:absolute; left:0px; top:65px; width:100%; } #top_nav .bar { margin-left:auto; margin-right:auto; width:960px; } /* INTRO */ #intro { margin-left:auto; margin-right:auto; width:960px; height:341px; position:relative; } #intro img.bg { position:absolute; left:-8px; } #intro img.help { position:absolute; left:70px; top:200px; } #intro .plaque { position:relative; top:42px; left:613px; width:254px; height:169px; padding:30px 12px 0px 30px; } #intro h2 { font-size:23px; font-weight:bold; } #intro h2.sub { font-size:28px; font-weight:normal; font-style:italic; line-height:22px; } #intro .plaque p { padding-top:5px; letter-spacing:-0.3px; } #intro .plaque a { font-family:Georgia; color:#E5FF86; } /* OVERVIEW */ #overview { height:266px; } #overview .col_image { position:relative; } #overview img.deer { position:absolute; left:-15px; top:-33px; } #overview_butterfly { position:absolute; left:306px; top:71px; } #overview .col_title { padding:20px 0px 28px 48px; } #overview .col_what { padding:28px 0px 0px 0px; } #overview .col_karner { height:212px; padding:28px 36px 0px 36px; background:#034751 url('../img/overview_bg_bfs.gif') 23px 48px no-repeat; } #overview .c_dark_blue { color:#034751; } #overview .c_gold { color:#D09036; } #overview .c_grey { color:#555555; } #overview .c_white { color:#FFFFFF; } #overview .c_light_blue { color:#B5C6C9; } /* BENEFITS */ #benefits { position:relative; height:436px; } #benefits .fade { position:absolute; left:10px; width:940px; height:436px; } #benefits .fade img { opacity:0.3; filter: alpha(opacity = 30); } #benefits .nav_row { position:absolute; width:100%; z-index:24; } #benefits .nav_row .nav { position:relative; right:70px; top:31px; } #benefits .title { position:relative; padding:43px 0px 0px 0px; } #benefits .title img { position:absolute; left:45px; top:130px; } #benefits h2 { padding-left:39px; } #benefits h2.sub { line-height:24px; } #benefits .content { padding:115px 0px 0px 0px; } #benefits .content .row { padding:0px 0px 37px 0px; } #benefits .content .row.last{ padding-bottom:0px; } #benefits .item { position:relative; width:240px; display:inline; float:left; margin-right:60px; } #benefits .item.last { margin:0px; } #benefits .item .icon { position:absolute; left:-39px; top:-9px; } /* STORIES */ #stories { position:relative; height:780px; } #stories .nav_row { position:absolute; width:100%; } #stories .nav_row .nav { position:relative; right:70px; top:27px; } #stories .title { height:105px; } #stories .title h2 { padding-top:26px; padding-left:4px; } #stories .title h2.sub { padding-top:4px; } #stories .menu { height:160px; overflow:hidden; } #stories .menu .story1, #stories .menu .story2, #stories .menu .story3 { position:relative; } #stories .menu .image, #stories .menu .frame { position:absolute; top:0px; } #stories .menu .image { top:25px; } #stories .menu .story1 .image { left:22px; } #stories .menu .story2 .image { left:290px; } #stories .menu .story2 .frame { left:268px; } #stories .menu .story3 .image { right:22px; } #stories .menu .story3 .frame { right:0px; } #stories .substory { position:relative; height:472px; } #stories .substory .arrow { position:absolute; top:-37px; } #stories .substory1 .arrow { left:110px; } #stories .substory2 .arrow { left:450px; } #stories .substory3 .arrow { right:110px; } #stories .substory .butterfly { position:absolute; /*top:-160px;*/ top:-128px; } #stories .substory1 .butterfly { /*left:0px;*/ left:120px; } #stories .substory2 .butterfly { /*left:332px;*/ left:448px; } #stories .substory3 .butterfly { /*left:664px;*/ left:776px; } #stories .substory .fade { position:absolute; width:940px; height:472px; } #stories .substory .fade img { opacity:0.45; filter: alpha(opacity = 45);} #stories .substory .title { position:relative; } #stories .substory .title h2 { padding-top:50px; padding-left:66px; } #stories .substory .title h2.sub { padding-top:4px; } #stories .substory .main_frame { position:relative; margin-top:28px; } #stories .substory .title .frame { /*position:absolute; top:147px; left:52px;*/ position:absolute; left:52px; top:0px; } #stories .substory .title .image { /*position:absolute; top:161px; left:66px;*/ position:absolute; left:66px; top:14px; } #stories .substory .content { position:relative; padding-top:54px; } #stories .substory .content h3 {} #stories .substory .content p { padding-right:60px; } #stories .substory .content img.thumb { border:#ddcaa6 solid 5px; display:inline; float:left; margin:28px 22px 0px 0px; cursor:pointer; } #stories .substory .content img.thumb:hover { border-color:#669999; } #stories .substory .content img.thumb.current { border-color:#336666; } #stories .substory .content .ribbon_wrapper { position:relative; } #stories .substory .content .quote_ribbon { position:absolute; top:0px; left:0px; background:#034751 url('../img/stories_sub_quote.gif') 18px 14px no-repeat; /*height:123px;*/ width:475px; margin:28px 0 0 0; /*position:absolute; top:298px; left:0px;*/ } #stories .substory .content .quote_ribbon img.quote { position:absolute; left:18px; top:14px; } #stories .substory .content .quote_ribbon img.corner { position:absolute; right:0px; bottom:-13px; } #stories .substory .content .quote_ribbon p { font-family:Georgia,serif; font-size:18px; padding:24px 30px 24px 48px; font-style:italic; } /* PROCESS */ #process { position:relative; height:557px; } #process .nav_row { position:absolute; width:100%; } #process .nav_row .nav { position:relative; right:6px; top:18px; } #process .title { height:128px; } #process .title h2 { padding-top:23px; padding-left:6px; } #process .title h2.sub { padding-top:3px; } #process .images { position:relative; height:160px; } #process .images img { position:absolute; left:-10px; top:0px; } #process .info { padding-top:27px; } #process .info h4 { padding-top:10px; } #process .info p { padding-top:6px; } /* PLAN */ #plan { position:relative; height:564px;} #plan .background { background:url('../img/plan_bg.jpg') no-repeat; width:968px; height:538px; position:absolute; left:-2px; } #plan .top { height:172px; } #plan .top h2 { padding-top:64px; padding-left:58px; } #plan .top h2.sub { padding-top:3px; } #plan .top p { width:250px; padding-top:74px; font-family:Georgia,serif; font-style:italic; font-size:14px; font-weight:bold; letter-spacing:-1.2px; line-height:18px; } #plan .points .row { height:162px; } #plan .points .row h4 { position:relative; left:-6px; padding-right:66px; color:#603a06; line-height:24px; } #plan .points .row p { position:relative; left:-6px; padding-right:66px; color:#555555; font-weight:normal; letter-spacing:-0.2px; } /* ELIGIBILITY */ #eligibility { position:relative; height:390px; } #eligibility .nav_row { position:absolute; width:100%; } #eligibility .nav_row .nav { position:relative; right:6px; top:31px; } #eligibility .title { height:144px; } #eligibility .title h2 { padding-top:36px; padding-left:8px; } #eligibility .title h2.sub { padding-top:3px; } #eligibility .info { position:relative; } #eligibility .info h4 { padding-right:60px; line-height:24px; } #eligibility .info p { padding-right:60px; letter-spacing:-0.2px; } #eligibility .location img { position:absolute; left:-202px; top:8px;} #eligibility .ground img { position:absolute; left:-156px; top:1px;} /* CONTACT */ #contact { position:relative; height:228px; } #contact .title h2 { padding-left:179px; padding-top:69px; } #contact .title h2.sub { padding-top:3px; } #contact .butterfly { position:absolute; left:41px; top:41px; } #contact .icons { position:absolute; left:567px; top:69px; } #contact .info { padding-top:68px; } #contact .info h5 { font-family:Arial,sans-serif; height:24px; color:#666666; font-size:14px; letter-spacing:-0.2px; font-weight:bold; } /* INVOLVED */ #involved { position:relative; height:560px; } #involved .background { background:url('../img/involved_bg.jpg') no-repeat; width:968px; height:538px; position:absolute; left:-2px; } #involved .nav_row { position:absolute; width:100%; } #involved .nav_row .nav { position:relative; right:34px; top:53px; } #involved .title { height:126px; } #involved .title h2 { padding-top:63px; padding-left:52px; } #involved .title h2.sub { padding-top:3px; color:#603a06; } #involved .content { position:relative; } #involved .content h4{ position:relative; left:-7px; color:#603a06; } #involved .content p { position:relative; left:-7px; color:#555555; letter-spacing:-0.1px; padding:6px 20px 28px 0px; } #involved .content a { color:#034751; } #involved .content .ribbon { position:absolute; left:-7px; top:198px; background-color:#002a28; width:547px; height:104px; } #involved .content .ribbon .corner { position:absolute; right:0px; bottom:-13px; } #involved .content .row { height:40px; padding-left:20px; } #involved .content .row.top { padding-top:16px; } #involved .content .row .item { display:inline; float:left; width:200px; } #involved .content .row .item img.icon { display:inline; float:left; margin-right:16px; } #involved .content .row .item h5 { display:inline; font-family:Georgia,serif; font-size:14px; line-height:28px; font-style:italic; color:#ddcaa6; } /* FOOTER */ #footer { position:relative; height:116px; } #footer .background { position:absolute; left:0px; top:0px; } #footer .bar {} #footer .bar .item { display:inline; float:left; background-color:#8b857a; height:34px; line-height:34px; } #footer .bar .item a { font-family:Georgia,serif; font-size:14px; font-weight:bold; color:#ffffff; padding:0px 14px; } #footer .bar .item .sub { font-weight:normal; font-style:italic; } #footer .bar .item1 { margin-right:50px; } #footer .bar .item2 {} #footer .bar .item3 { float:right; } /* SIGNATURE */ #signature { width:100%; height:42px; line-height:40px; background-color:#002a28;} #signature div { width:100%; color:#67938f; text-align:center; } #signature a { color:#94bbb7; } /* COLORS */ /* average background color - f0e5d0; dark blue - 034751; header / stories ribbon deep blue - 022b31; header deeper aqua - 002a28 involved ribbon sig light blue - b6d1d5; social / B5C6C9 orange - c0732f; header dark aqua - 053b35; nav text gold - d09036; nav background grey - 555555; intro white - ffffff; dark tan - ddcaa6; stories thumbs border brown - 603a06; plan involved gold - e0c088; */ .c_dark_blue { color:#034751; } .c_gold { color:#D09036; } .c_grey { color:#555555; } .c_white { color:#FFFFFF; } .c_light_blue { color:#b6d1d5; } .c_near_black { color:#032c27; } .c_tan { color:#EDE3D8; } .c_yellow { color:#E5FF86; } .c_brown { color:#603a06; }