/* >> filename >> global.css >> url >> www.jonleverrier.com >> date >> 1st January 2010 >> version >> 1.2.3 >> info >> Built & developed whilst traveling through Japan during the winter of 2009/2010. */ /* ============================================================== GENERIC ============================================================== */ header, footer, nav, section, article, aside, figure { display: block; } * { margin: 0px; padding: 0px; } img { border: 0px; } .clear { clear: left; } body { font-family: Helvetica, Arial, sans-serif; position: relative; text-align: left; background:url(../img/backgrounds/img_main_bg.gif) bottom fixed repeat-x; } #pagewidth { width: 975px; margin: 0 auto; } .padding15px_lr { padding: 0px 14px 0px 14px; } .margin15px_r { margin-right: 15px; } .margin15px_l { margin-left: 15px; } /* ============================================================== TEMPLATE ELEMENTS ============================================================== */ nav { width: 945px; height: 124px; border-top: 3px solid #000; border-bottom: 1px solid #bfbfbf; background: url(../img/header/img_jl_logo.png) no-repeat right; background-position: 880px 29px; position: relative; } .logo { background: url(../img/header/img_jl_logo_type.png) top no-repeat; width: 186px; height: 35px; position: absolute; top: 44px; left: 0px; z-index: 0; } .logo a { display: block; width: 186px; height: 35px; position: absolute; top: 44px; left: 0px; } .logo span { display: none; } .logo-link { width: 186px; height: 35px; position: absolute; top: 44px; left: 0px; z-index: 40; } .logo-link a { display: block; width: 186px; height: 35px; position: relative; z-index: 40; } nav ul { list-style: none; position: absolute; top: 44px; left: 479px; } nav ul li { height: 33px; width: 79px; display: inline; border-left: 1px solid #000; float: left; } nav ul li a { font-size: 14px; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; font-weight: bold; color: #000; padding-left: 7px; display: block; height: 33px; width: 79px; } nav ul li a:hover { height: 33px; width: 72px; background: #d9dadc; } nav ul li a.selected { color: #d31212; width: 72px; } #tpl_level1 header.intro { width: 945px; padding: 0px 0px 27px 0px; margin-bottom: 31px; border-bottom: 1px solid #bfbfbf; position: relative; float: left; } header.intro h1 { width: 464px; font-family: "ff-meta-serif-web-pro-1", Georgia, "Times New Roman", Times, serif; font-size: 30px; line-height: 32px; letter-spacing: 0px; font-weight: normal; color: #2b1f1f; margin-top: 20px; float: left; } header.intro p.col { font-size: 14px; color: #5b5858; width: 226px; line-height: 22px; margin: 23px 0px 0px 14px; float: left; } header.intro p.cta { font-size: 14px; margin: 10px 0px 0px 14px; float: left; } header.intro p.cta a { color: #d31212; text-decoration: none; font-weight: bold; -webkit-transition: color 0.6s linear; } header.intro p.cta a:hover { color: #000; border-bottom: 1px dotted #d31212; text-decoration: none; font-weight: bold; } header.intro p.col a { color: #d31212; text-decoration: none; } header.intro p.col a:hover { color: #d31212; text-decoration: underline; } section.sec_hpport_summary { width: 465px; float: left; } article.itm_portfoliosum { width: 225px; float: left; } article.itm_portfoliosum h2 { border-bottom: 3px solid #2b1f1f; margin-bottom: 15px; padding-bottom: 10px; } article.itm_portfoliosum h2 a { font-size: 14px; text-transform: uppercase; text-decoration: none; font-weight: bold; color: #2b1f1f; } article.itm_portfoliosum figure { width: 225px; height: 193px; margin-bottom: 25px; float: left; position: relative; } article.itm_portfoliosum figure .level1 { width: 225px; height: 193px; position: absolute; top: 0px; left: 0px; z-index: 0; } article.itm_portfoliosum figure .featured { width: 225px; height: 193px; background: url(../img/backgrounds/img_portthumb_featured.png) no-repeat; position: absolute; top: 0px; left: 0px; z-index: 1; } article.itm_portfoliosum figure .new { width: 225px; height: 193px; background: url(../img/backgrounds/img_portthumb_new.png) no-repeat; position: absolute; top: 0px; left: 0px; z-index: 1; } article.itm_portfoliosum figure .level3 { width: 225px; height: 193px; position: absolute; top: 0px; left: 0px; z-index: 2; } article.itm_portfoliosum figure .level3 a { width: 225px; height: 193px; display: block; position: relative; z-index: 2; } article.itm_portfoliosum p a { font-size: 12px; color: #5b5858; width: 226px; line-height: 21px; text-decoration: none; } article.itm_portfoliosum p a:hover { border-bottom: 1px dotted #d31212; color: #333; } /*non ie*/ article.itm_portfoliosum:hover h2 { border-bottom: 3px solid #908f8f; } article.itm_portfoliosum:hover p a { /*border-bottom: 1px dotted #666;*/ color: #232323; -webkit-transition: color 0.5s linear; } section.sec_hpsociallinks, #tpl_level2 .sec_aboutme { width: 465px; float: left; margin-left: 14px; } aside.itm_sociallinks { float: left; width: 225px; } aside h3 { font-size: 14px; text-transform: uppercase; text-decoration: none; font-weight: bold; color: #2b1f1f; margin: 3px 0px 0px 0px; padding-bottom: 1px; } section.sec_hpsociallinks h3 { padding-bottom: 13px; margin-bottom: 13px; border-bottom: 3px solid #2b1f1f; } section.sec_hpsociallinks article { width: 225px; margin-bottom: 15px; padding: 4px 0px 12px 0px; border-bottom: 1px solid #bfbfbf; overflow: hidden; float: left; } section.sec_hpsociallinks article:hover p a { border-bottom: 1px dotted #d31212; color: #333; } section.sec_hpsociallinks article:hover h4 a { border-bottom: 1px dotted #d31212; } section.sec_hpsociallinks article .posted { width: 65px; margin-top: 2px; float: left; } section.sec_hpsociallinks article .posted a { width: 65px; font-size: 11px; color: #d31212; text-decoration: none; float: left; padding-bottom: 12px; } section.sec_hpsociallinks article h4 { width: 145px; float: right; line-height: 14px; } section.sec_hpsociallinks article p { width: 145px; float: right; line-height: 14px; } section.sec_hpsociallinks article h4 a { font-size: 11px; color: #000; text-decoration: none; } section.sec_hpsociallinks article p a { font-size: 11px; color: #5b5858; text-decoration: none; } /* level 2 */ #tpl_level2 .sec_level2article { width: 465px; float: left; } #tpl_level2 header.intro h1 { padding-bottom: 27px; } #tpl_level2 header.intro { width: 465px; padding: 0px 0px 0px 0px; margin-bottom: 31px; border-bottom: 1px solid #bfbfbf; position: relative; float: left; } #tpl_level2 section.sec_hpsociallinks { width: 465px; float: left; margin-left: 14px; } #tpl_level2 section.sec_hpsociallinks .col1 { width: 225px; float: left; } #tpl_level2 section.sec_hpsociallinks .col2 { width: 225px; float: right; } #tpl_level2 section.sec_hpsociallinks aside { margin-bottom: 28px; } #tpl_level2 .sec_aboutme { width: 465px; float: left; margin-top: 34px; margin-bottom: 11px; position: relative; } .sec_aboutme h3 { font-size: 14px; text-transform: uppercase; text-decoration: none; font-weight: bold; color: #000; border-bottom: 3px solid #000; margin-bottom: 18px; padding-bottom: 13px; } .sec_aboutme p { font-style: italic; font-size: 11px; color: #696767; margin-bottom: 16px; line-height: 18px; } .sec_aboutme p.cta { position: absolute; top: -1px; right: 0px; font-weight: bold; } .sec_aboutme p.cta a { text-decoration: none; color: #d31212; } .sec_aboutme p.cta a:hover { text-decoration: none; color: #d31212; border-bottom: 1px dotted #d31212; } #tpl_level2 section.sec_hpsociallinks ol { font-size: 11px; list-style: none; margin-top: 4px; float: left; } #tpl_level2 section.sec_hpsociallinks ol .chart1 { background: url(../img/bullets/img_chart_01.gif) no-repeat 15px 0px; } #tpl_level2 section.sec_hpsociallinks ol .chart2 { background: url(../img/bullets/img_chart_02.gif) no-repeat 15px 0px; } #tpl_level2 section.sec_hpsociallinks ol .chart3 { background: url(../img/bullets/img_chart_03.gif) no-repeat 15px 0px; } #tpl_level2 section.sec_hpsociallinks ol li { float: left; margin-bottom: 18px; padding: 2px 0px 14px 80px; border-bottom: 1px solid #cccccc; } #tpl_level2 section.sec_hpsociallinks ol li span { width: 145px; float: left; margin-top: 3px; color: #5b5858; } #tpl_level2 section.sec_hpsociallinks ol li a { text-decoration: none; color: #d31212; } #tpl_level2 section.sec_hpsociallinks ol li a:hover { text-decoration: none; color: #d31212; border-bottom: 1px dotted #d31212; } #tpl_level2 section.sec_hpsociallinks a.flickr { padding:0px; margin:0px; float: left; line-height: 0px; } #tpl_level2 section.sec_hpsociallinks div.wrp_flickr { float: left; width: 225px; padding: 0px 0px 0px 0px; margin: 4px 0px 0px 0px; } #tpl_level2_portfolio header.intro h1, #tpl_level3_portfolio_detail header.intro h1 { margin-bottom: 0px; padding-bottom: 0px; } #tpl_level2_portfolio header.intro p, #tpl_level3_portfolio_detail header.intro p { margin-bottom: 0px; padding-bottom: 0px; } #tpl_level2_portfolio header.intro, #tpl_level3_portfolio_detail header.intro { width: 945px; padding: 0px 0px 27px 0px; margin-bottom: 31px; border-bottom: 1px solid #bfbfbf; position: relative; float: left; } section.sec_portfolio_hp { width: 705px; float: left; } section.sec_portfolio_hp .row { width: 705px; margin-bottom: 31px; border-bottom: 1px solid #bfbfbf; padding-bottom: 28px; float: left; } .last { margin-right: 0px; } section.sec_portnav { width: 225px; float: left; } aside.itm_portnav, aside.itm_testimonial { float: left; width: 225px; margin-bottom: 30px; } .itm_portnav h3 { border-bottom: 3px solid #000; margin-top: 0px; padding-bottom: 13px; } .itm_portnav ul { width: 225px; font-family: "ff-meta-serif-web-pro-1", Georgia, "Times New Roman", Times, serif; font-size: 11px; list-style: none; float: left; } .itm_portnav ul a { text-decoration: none; color: #5b5858; display: block; width: 205px; background: url(../img/bullets/img_bullet_listnav_off.gif) no-repeat 0px 20px; padding-left: 20px; -webkit-transition: background-color 0.3s linear; } .itm_portnav ul a:hover { background: #000; text-decoration: none; color: #CCC; display: block; width: 205px; } .itm_portnav ul li { width: 225px; border-bottom: 1px solid #bfbfbf; padding: 0px 0px 0px 0px; float: left; line-height: 44px; } .itm_portnav ul a.selected { background: url(../img/bullets/img_blackbg_whitetri.gif) no-repeat 0px 12px #000; color: #CCC; } .itm_portfolio_content { width: 465px; float: left; } .itm_testimonial h3 { border-bottom: 3px solid #000; padding-bottom: 13px; margin-bottom: 15px; } .itm_testimonial p.quote { font-size: 11px; font-family: "ff-meta-serif-web-pro-1", Georgia, "Times New Roman", Times, serif; font-style: italic; padding-left: 80px; line-height: 21px; color: #5b5858; margin-bottom: 15px; background: url(../img/backgrounds/img_quote_up.gif) top left no-repeat; } .itm_testimonial p.client { font-size: 11px; font-family: Helvetica, Arial, sans-serif; font-style: italic; padding-left: 0px; padding-top: 6px; color: #000; background: url(../img/backgrounds/img_quote_down.gif) bottom right no-repeat; } #sidebar { width: 225px; padding-top: 3px; float: left; } #sidebar h2 { font-size: 14px; text-transform: uppercase; border-bottom: 3px solid #908f8f; margin-bottom: 15px; padding-bottom: 13px; } .itm_portintro p { font-size: 11px; color: #5b5858; margin-bottom: 24px; line-height: 16px; } .itm_portintro p em { font-size: 11px; font-family: "ff-meta-serif-web-pro-1", Georgia, "Times New Roman", Times, serif; color: #5b5858; margin-bottom: 15px; line-height: 16px; } .itm_portintro p a { color: #d31212; text-decoration: none; } .itm_portintro p a:hover { color: #d31212; text-decoration: none; border-bottom: 1px dotted #d31212; } section.sec_portfolio_hp h2 { font-size: 14px; text-transform: uppercase; border-bottom: 3px solid #000; margin-bottom: 15px; padding-bottom: 13px; } #tpl_level3_portfolio_detail .sec_portnav { margin-top: 3px; } /* page not found */ #tpl_pnf { margin-top: 192px; } #tpl_pnf #wpr_global { background: none; } #pnf { width: 480px; margin: 0 auto; } #pnf .wrap { width: 480px; margin: 0 auto; } #pnf .logo { background: url(../img/backgrounds/img_pnf_logo.gif) top no-repeat; width: 465px; height: 65px; margin-bottom: 50px; position: static; } #pnf .logo h1 a { display: block; width: 465px; height: 65px; float: left; position: static; } #pnf span { display: none; } #pnf #wysiwyg { width: 305px; } /* ============================================================== MANAGER STYLES ============================================================== */ /* WYSIWYG STYLES */ #wysiwyg h2, #wysiwyg h3 { font-size: 14px; text-transform: uppercase; border-bottom: 3px solid #000; padding-bottom: 13px; margin-bottom: 15px; margin-top: 3px; color: #2b1f1f; } #wysiwyg p { color: #5b5858; font-size: 14px; line-height: 24px; margin-bottom: 16px; } #wysiwyg img { float: left; margin-bottom: 15px; margin-right: 15px; } #wysiwyg ul { font-size: 14px; color: #5b5858; margin-bottom: 16px; line-height: 16px; margin-left: 0px; list-style: none; float: left; } #wysiwyg ul li { background: url(../img/bullets/img_bullet_x.gif) no-repeat 0px 2px; float: left; width: 204px; padding-left: 20px; margin-bottom: 10px; } #wysiwyg p a { color: #d31212; text-decoration: none; } #wysiwyg p a:hover { color: #d31212; text-decoration: none; border-bottom: 1px dotted #d31212; } #wysiwyg ul li a { color: #d31212; text-decoration: none; } #wysiwyg ul li a:hover { color: #d31212; text-decoration: none; border-bottom: 1px dotted #d31212; } /* ============================================================== FORMS ============================================================== */ #form_prop fieldset, #form_capture fieldset { border: 0px; margin: 0px; padding: 0px; } #form_prop, #form_capture { padding-top: 20px; padding-bottom: 20px; float: left; } #form_prop ul, #form_capture ul { list-style: none; margin: 0px; } #form_prop ul li, #form_capture ul li { width: 225px; float: left; margin-right: 15px; background: none; padding-left: 0px; } #form_prop ul .right, #form_capture right { width: 225px; float: left; margin-right: 0px; } #form_prop ul li .name, #form_prop ul li .company, #form_prop ul li .telephone, #form_prop ul li .email { width: 215px; height: 22px; background: #cdcdcd; border: 1px solid #5c5b5b; margin-top: 4px; margin-bottom: 10px; padding: 4px; line-height: 1.4em; } #form_capture ul li .name, #form_capture ul li .company, #form_capture ul li .telephone, #form_capture ul li .email { width: 215px; height: 22px; background: #cdcdcd; border: 1px solid #5c5b5b; margin-top: 4px; margin-bottom: 10px; padding: 4px; line-height: 1.4em; } #form_prop ul li .time, #form_prop ul li .budget { width: 223px; height: 28px; background: #333; margin-top: 4px; margin-bottom: 10px; padding: 4px; } #form_prop ul li .time, #form_prop ul li .budget { margin-bottom: 15px; } #form_capture ul li .time, #form_capture ul li .budget { width: 223px; height: 28px; background: #CCC; margin-top: 4px; margin-bottom: 10px; padding: 4px; } #form_capture ul li .time, #form_capture ul li .budget { margin-bottom: 15px; } #form_prop ul li .brief, #form_capture ul li .brief { width: 457px; background: #cdcdcd; margin-top: 4px; margin-bottom: 10px; padding: 4px; border: 1px solid #5c5b5b; } #form_prop ul li .name:focus, #form_prop ul li .company:focus, #form_prop ul li .telephone:focus, #form_prop ul li .email:focus { width: 215px; height: 22px; background: white; border: 1px solid #bfbbbb; margin-top: 4px; padding: 4px; } #form_capture ul li .name:focus, #form_capture ul li .company:focus, #form_capture ul li .telephone:focus, #form_capture ul li .email:focus { width: 215px; height: 22px; background: white; border: 1px solid #bfbbbb; margin-top: 4px; padding: 4px; } #form_prop ul li .brief:focus, #form_capture ul li .brief:focus { background: white; border: 1px solid #bfbbbb; margin-top: 4px; padding: 4px; } #form_prop ul li.last, #form_capture ul li.last { width: 465px; margin-top: 10px;} #form_prop h3, #form_capture h3 { width: 465px; } div.errors { background: #CCC; color: #333; text-align: left; padding: 10px; margin-bottom: 15px; width: 445px; font-size: 14px; } div.notice { background: #d9dadc; border: 1px solid #999; color: #333; text-align: center; padding: 10px; font-size: 80%; margin-bottom: 16px; float: left;} /* ============================================================== FOOTER STYLES ============================================================== */ footer { border-top: 3px solid #2b1f1f; margin-top: 48px; position: relative; } footer h3 { font-size: 14px; text-transform: uppercase; text-decoration: none; font-weight: bold; color: #000; margin: 14px 0px 15px 0px; float: left; } footer ul { list-style: none; float: right; font-size: 11px; margin: 15px 0px 0px 0px; } footer ul li { display: inline; margin-left: 15px; } footer ul li a { color: #504e4e; text-decoration: none; -webkit-transition: color 0.4s linear; } footer ul li a:hover { color: #d31212; border-bottom: 1px dotted #d31212; } footer hr { width: 945px; height: 1px; background-color: #bfbfbf; color: #bfbfbf; border: none; margin-bottom: 18px; float: left; } footer p { font-size: 11px; color: #504e4e; float: left; margin-bottom: 135px; } footer p a { font-size: 11px; color: #504e4e; text-decoration: none; -webkit-transition: color 0.4s linear; } footer p a:hover { color: #d31212; border-bottom: 1px dotted #d31212; } footer .hive { position: absolute; top: 55px; right: 0px; } footer .credits { position: absolute; top: 62px; right: 40px; } #wpr_global { background: url(../img/backgrounds/img_footer.png) bottom repeat-x; } /* ============================================================== EXTERNAL JAVASCRIPT ============================================================== */ #grid { background: url(../img/backgrounds/bg-grid-980.gif) repeat-y 0 0; width: 975px; position: absolute; top: 0; left: 50%; margin-left: -490px; } #grid .horiz { height: 15px; border-bottom: 1px dotted #aaa; margin: 0; padding: 0; }