/* --- // doc: wfi.css // --- */ /*------------------------ doc: wellfire css site: Wellfire Interactive development: Cobey Potter, Wellfire Interactive version: q4, 2008 newest: q3, 2009 TOC: [a] general elements [b] general classes [c] layout areas [d] layout classes [e] unique elements [f] utility controls [g] modules [h] forms [i] navigation [j] template/section specific [k] jsActive specific ------------------------*/ @import "/media/styles/init.css"; @font-face { font-family:"LGothic"; src:url("/media/scripts/LeagueGothic.otf") format("opentype"); } /* --- [a] general elements --- */ html { background: #FCF9F0 url("/media/images/bkg_html.gif"); color: #333; font: 11px/20px Tahoma, Helvetica, Arial, sans-serif; } body { background: #FCF9F0; border: 1px solid #F7EDD2; margin: 20px auto 100px; padding: 0; position: relative; width: 909px; } h3, h4, h5 { color: #9A3D19; text-align:left; } h3 { font: 25px/29px "LGothic", 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; letter-spacing:1px; padding:15px 0 5px; } h4 { font: 13px/15px Tahoma, Helvetica, Arial, sans-serif; } h5 { font: 11px/13px Tahoma, Helvetica, Arial, sans-serif; padding:2px 0 0; text-transform: uppercase; } a { color: #A4B087; text-decoration: none; } a:hover { color: #5A672F; text-decoration: underline; } a.on, a:active { color: #9A3D19; text-decoration:none; } /* --- [b] general classes --- */ .clear, #container, #tmpl_clients #content ul, #tmpl_form form, .txt-cap { display: inline-block; } .clear:after, #container:after, #tmpl_clients #content ul:after, #tmpl_form form:after, .txt-cap:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; } /* --- [c] layout areas --- */ #header { position:relative; width: 910px; } #header h1 { background: url("/media/images/bkg_header.jpg") no-repeat; height: 415px; margin: -20px 0 0 -55px; position: relative; width: 1008px; } #header h1 a { background: url("/media/images/elm_logo.png") no-repeat; bottom: -66px; display: block; height: 164px; left: 62px; overflow: hidden; position: absolute; text-indent: -1000px; width: 199px; z-index: 200; } #header h2 { border: 1px solid #F7EDD2; border-left:0; height: 30px; letter-spacing:1px; position: absolute; text-align: right; top: 50px; width: 450px; padding-bottom:1px; } #header h2 .title { background: #fff; color: #9A3D19; display: block; font: 26px/37px "proxima-nova-1","proxima-nova-2", 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 31px; margin-top:-1px; padding: 0 10px 1px; -webkit-opacity:.75; -moz-opacity:.75; } #footer { bottom: -15px; color: #A4B087; font: 11px/12px Helvetica, Arial, sans-serif; right: 10px; position: absolute; text-align: right; } #footer p, #footer ul, #footer li { float:left; } #footer ul { border-right:1px solid #A4B087; padding:0 2px 0 2px; margin:0 5px 0 0; } #footer li a { font-weight:bold; padding:0 3px; } #container { border-left: 1px solid #F1E6CB; margin: 10px 0 10px 326px; padding: 0 20px; position: relative; width: 540px; z-index: 0; } #content .txt-cap { border-left: 1px solid #c0c0c0; clear: both; width: 240px; margin: 10px 0 10px 264px; padding:0 0 0 24px; } #content .txt-cap div { float: left; position: relative; } #content .txt-cap div:first-child { margin-left: -264px; width:220px; } #content p { clear: both; padding: 8px 0; } #content .intro { color: #C06245; font: 12px/21px Tahoma, Helvetica, Arial, sans-serif; letter-spacing:1px; padding: 0 0 15px; } #content ul li { background: url("/media/images/elm_list.gif") 0 9px no-repeat; padding:0 0 4px 12px; } #content img { display: block; margin-left: auto; margin-right: auto; } #sidebar { margin-left:-344px; } #sidebar .elm-cta { background: #fff; border: 1px solid #F7EDD2; border-left: 0; line-height:18px; bottom: 25px; height: 28px; position: absolute; text-align: right; width: 450px; } #sidebar .vcard { border-left: 1px solid #C8D5A1; font: 10px/18px Tahoma, Helvetica, Arial, sans-serif; letter-spacing:1px; padding-left: 15px; position: absolute; top: 82px; left: -200px; height: 82px; } #sidebar .adr { margin-top: -5px; } #sidebar .url { display: none; } #sidebar .adr a { background: url('/media/images/elm_vcard.gif') right 0px no-repeat; padding-right: 24px; } #sidebar .adr a:hover { background-position: right -14px; } #post-title { padding: 15px 10px 10px 10px;font-size: 28px; } #post-body { padding-left: 25px; padding-right: 25px; font-size: 13px;} #post-body blockquote { padding-left: 20px; padding-right: 20px; font-weight: bold;} /* --- [d] layout classes --- */ .elm-cta a { font: 22px/28px "proxima-nova-1","proxima-nova-2", 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-right: 10px; } .elm-cta a:hover { text-decoration: none; } .txt-cap h3 { padding: 0 0 10px; } /* --- [e] unique elements --- */ #proj-info { background: url("/media/images/bkg_proj-info_2.png") no-repeat; display:block; float: right; margin: -161px -13px 0 0; min-height: 130px; padding: 21px; position: relative; width: 210px; } #content #proj-info li { background: none; clear: both; color: #333; font: 11px/14px Tahoma, Helvetica, Arial, sans-serif; letter-spacing:1px; padding: 5px 0 6px; } #proj-info span { color: #9A3D19; display: block; float: left; font: 16px/20px "LGothic", 'Franklin Gothic Medium', Helvetica, Arial, sans-serif; letter-spacing: .05em; margin: -3px 5px 10px 0; width: 60px; } #proj-view { left: -274px; position: absolute; top: -306px; } #proj-view a { background: url("/media/images/bkg_proj-view.png") no-repeat; display: block; height:251px; overflow:hidden; padding: 1px 0 0; width:800px; } #proj-view img { display: block; height:250px; } /* --- [f] utility controls --- */ #proj-control { float: left; height: 26px; margin: 14px 0 8px -5px; } #content #proj-control li { background: none; float: left; padding: 0; } #proj-control li a { background: url("/media/images/elm_proj-control.png") no-repeat; border:1px solid #F1E6CB; border-bottom: 0; border-top: 0; display: block; height:26px; margin-left: 5px; overflow: hidden; text-indent: -1000px; width: 30px; } #proj-control #ctrl-launch:hover a { background-position: 0 -28px; } #proj-control #ctrl-launch.on a, #proj-control #ctrl-launch:active a { background-position: 0 -56px; } #proj-control #ctrl-1 a { background-position: -30px 0; } #proj-control #ctrl-1:hover a { background-position: -30px -28px; } #proj-control #ctrl-1.on a, #proj-control #ctrl-1:active a { background-position: -30px -56px; } #proj-control #ctrl-2 a { background-position: -60px 0; } #proj-control #ctrl-2:hover a { background-position: -60px -28px; } #proj-control #ctrl-2.on a, #proj-control #ctrl-2:active a { background-position: -60px -56px; } #proj-control #ctrl-3 a { background-position: -90px 0; } #proj-control #ctrl-3:hover a { background-position: -90px -28px; } #proj-control #ctrl-3.on a, #proj-control #ctrl-3:active a { background-position: -90px -56px; } #proj-control #ctrl-4 a { background-position: -120px 0; } #proj-control #ctrl-4:hover a { background-position: -120px -28px; } #proj-control #ctrl-4.on a, #proj-control #ctrl-4:active a { background-position: -120px -56px; } #proj-control #ctrl-5 a { background-position: -150px 0; } #proj-control #ctrl-5:hover a { background-position: -150px -28px; } #proj-control #ctrl-5.on a, #proj-control #ctrl-5:active a { background-position: -150px -56px; } #proj-control #ctrl-6 a { background-position: -180px 0; } #proj-control #ctrl-6:hover a { background-position: -180px -28px; } #proj-control #ctrl-6.on a, #proj-control #ctrl-6:active a { background-position: -180px -56px; } /* --- [h] forms --- */ form div { float:left; } form p.required { font: 11px/12px Tahoma, Helvetica, Arial, sans-serif; margin: 35px 0 32px 66px; } fieldset { padding-top: 6px; position: relative; } fieldset.first { padding-top: 0; } label { color: #9A3D19; font: 9px/28px Tahoma, Helvetica, Arial, sans-serif; left: 5px; position: absolute; } input, select, textarea { background: #fff; border: 1px solid #F7EDD2; color: #9A3D19; font: italic 11px/14px Tahoma, Helvetica, Arial, sans-serif; height: 21px; padding: 5px 0 0 100px; width: 225px; } textarea { font: italic 11px/18px Tahoma, Helvetica, Arial, sans-serif; height: 100px; padding: 5px 0 0 100px; } input:focus, select:focus, textarea:focus, form .on { background: #E4D7B7; color: #666; font-style:normal; } button { background: url('/media/images/elm_btns.gif') no-repeat; cursor:pointer; display: block; height: 28px; width:120px; } button span { display: block; overflow: hidden; text-indent: -1000px; } #btn_submit, #btn_clear { margin: 0 0 6px 60px; } #btn_submit:hover { background-position: 0 -29px; } #btn_clear { background-position: -121px 0; } #btn_clear:hover { background-position: -121px -29px;} /* --- [i] navigation --- */ #nav-helper { position: absolute; right: 0px; top: -19px; } #nav-helper ul li { float: left; margin-right: 10px; } #nav-helper .on a { color: #9A3D19; text-decoration:none; } #nav-main { position: absolute; left: 10px; top: 473px; } #nav-main li a { display:block; font:100 22px/23px "proxima-nova-1","proxima-nova-2", Helvetica, Arial, sans-serif;width:110px; } #nav-main li a:hover { text-decoration:none; } #nav-main .on > a { color:#9A3D19; } #nav-main li ul { display: none; } #nav-main .on ul { border-left: 1px solid #C8D5A1; display: block; height:115px; left: 115px; margin-left: 5px; padding-left: 12px; position: absolute; top: 0; } #nav-main .on ul li a { width: 160px; } #nav-port { background: #b6bf9c; bottom:8px; clear:both; height: 22px; margin:0; padding: 0 1px; position:absolute; width:541px; } #nav-port #lnk-prev { background: url("/media/images/elm-arrows.gif") left 3px no-repeat; float: left; padding: 0 0 0 18px; } #nav-port #lnk-next { background: url("/media/images/elm-arrows.gif") right 3px no-repeat; float: right; padding: 0 18px 0 0; } #nav-port li a { background: #b6bf9c; color: #FCF9F0; } /* --- [j] template/section specific --- */ #tmpl_index #container { border: 0; margin: 0 0 0 334px; min-height: 260px; padding:0 0 0 10px; width:560px; } #tmpl_index #content { letter-spacing: 2px; padding: 85px 0 0 0; } #tmpl_index #content p { padding: 0 25px 0 80px; } #tmpl_clients #container { min-height:160px; padding: 40px 0 40px 18px; width: 580px; } #tmpl_clients #container .desc { margin-top:-35px; } #tmpl_content #container { padding: 0 10px; width: 570px; } #tmpl_content #content { background: url("/media/images/bkg_gencontent.jpg") no-repeat; padding: 2px 8px; width: 546px; margin: -317px 19px 0 0; min-height: 500px; } #tmpl_form #container { min-height: 240px; } #tmpl_port #container { min-height: 240px; } #tmpl_port #content { padding:0 0 44px; } #tmpl_content #content .port-projects { letter-spacing:3px; padding:50px 0; } #tmpl_content #content .port-projects li { background: none !important; font: 11px/18px Tahoma, Helvetica, Arial, sans-serif; padding:0 5px 8px; } .sct_contact #sidebar .elm-cta { background: url('/media/images/elm_btns.gif') -241px 0 no-repeat; border: 0; left: -328px; height: 28px; text-align: left; width: 279px; } .sct_contact #sidebar .elm-cta a { display: block; overflow: hidden; text-indent: -1000px; width: 100%; height: 100%; } .sct_contact #sidebar .elm-cta a:hover { background: url('/media/images/elm_btns.gif') -241px -28px no-repeat;} /* --- [k] jsActive specific --- */