/* Josh.me Master CSS */ /* 7/15/2011 */ body { background:url(../images/back.jpg) repeat top center; margin:0; padding:0; } h1, h2, h3, h4, h5 { margin:0; padding:0; } a { color:#282828; } *:focus { outline:0; } #header-wrap { background:url(../images/header-wrap.jpg) repeat-x top center; height:99px; width:100%; } #header { background:url(../images/header-lines.png) no-repeat top left; height:99px; margin:0 auto; position:relative; width:960px; } #header h1 { height:74px; left:92px; position:absolute; top:12px; width:194px; } #header h1 a { background:url(../images/logo.png) no-repeat; display:block; height:74px; text-align:left; text-indent:-9999px; width:194px; } #header h1 a:link, #header h1 a:visited {} #header h1 a:hover, #header h1 a:active {} #nav { position:absolute; top:1px; left:455px; } #nav ul { list-style:none; margin:0; overflow:hidden; padding:0; } #nav ul li.selected {} #nav ul li.selected a {} #nav ul li.selected a:link, #nav ul li.selected a:visited {} #nav ul li.selected a:hover, #nav ul li.selected a:active {} #nav ul li { float:left; } #nav ul li.work { height:88px; width:85px; } #nav ul li.hire-me { height:88px; width:109px; } #nav ul li.weblog { height:88px; width:111px; } #nav ul li.about { height:88px; width:91px; } #nav ul li a { display:block; height:88px; text-align:left; text-indent:-9999px; width:85px; } #nav ul li.work a { background:url(../images/header-nav.png) no-repeat top left; height:88px; width:85px; } #nav ul li.hire-me a { background:url(../images/header-nav.png) no-repeat -85px 0px; height:88px; width:109px; } #nav ul li.weblog a { background:url(../images/header-nav.png) no-repeat -194px 0px; height:88px; width:111px; } #nav ul li.about a { background:url(../images/header-nav.png) no-repeat -305px 0px; height:88px; width:91px; } #nav ul li.work a:hover { background:url(../images/header-nav.png) no-repeat 0px -69px; height:88px; width:85px; } #nav ul li.work a:hover, #nav ul li.work.selected a { background:url(../images/header-nav.png) no-repeat 0px -69px; height:88px; width:85px; } #nav ul li.hire-me a:hover, #nav ul li.hire-me.selected a { background:url(../images/header-nav.png) no-repeat -85px -69px; height:88px; width:109px; } #nav ul li.weblog a:hover, #nav ul li.weblog.selected a { background:url(../images/header-nav.png) no-repeat -194px -69px; height:88px; width:111px; } #nav ul li.about a:hover, #nav ul li.about.selected a { background:url(../images/header-nav.png) no-repeat -305px -69px; height:88px; width:91px; } #nav ul li a:link, #nav ul li a:visited {} #nav ul li a:hover, #nav ul li a:active {} #header h2 { background:url(../images/since2004.png) no-repeat; height:24px; margin:0; padding:0; position:absolute; text-align:left; text-indent:-9999px; top:72px; left:0px; width:960px; } #mid-wrap { background:url(../images/mid-wrap.jpg) no-repeat top center; height:582px; padding-bottom:41px; position:relative; width:100%; } #mid { margin:0 auto; position:relative; width:960px; } #sub-mid-wrap { background:url(../images/sub-back.jpg) repeat top center; position:relative; width:100%; } #sub-mid-top-wrap { background:url(../images/sub-back-top.jpg) repeat-x top center; position:relative; width:100%; } #sub-mid-top-wrap-full { background:url(../images/sub-back-top-wide.jpg) repeat-x top center; position:relative; width:100%; } #sub-mid-top-wrap-2 { background:url(../images/sub-back-top-2.jpg) no-repeat top center; overflow:hidden; padding-bottom:41px; position:relative; width:100%; } #sub-mid { margin:0 auto; position:relative; width:960px; } #sub-mid.full { overflow:hidden; padding:75px 0 125px; } #sub-mid.full h2 { font-family:"eb garamond", Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:32px; margin:0; padding:0; text-align:center; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); } #sub-mid.full h2 span { background:#f4f4ec; } span.embellishment { color:#484848; display:block; font-family:"TypeEmbellishmentsW95-O", Georgia, "Times New Roman", Times, serif; font-size:46px; line-height:46px; width:100%; text-align:center; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); } #sub-mid.full h3 { font-family:"eb garamond", Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:24px; margin:0; padding:0; text-align:center; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); } #sub-mid.full p { text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:5px 0; } #sub-mid-top-wrap-blog { background:#fff url(../images/sub-back-top-blog.jpg) repeat-x top center; position:relative; width:100%; } #sub-mid-top-wrap-blog h2.duty-and-humanity { background:url(../images/for-duty-and-humanity.jpg) no-repeat; height:79px; text-align:left; text-indent:-9999px; width:917px; margin:0 auto; } #mid h3.web-design-and-coding-with-care { background:url(../images/web-design-and-coding-with-care.png) no-repeat; height:92px; right:45px; position:absolute; text-align:left; text-indent:-9999px; top:40px;width:539px; } #home-work-examples { height:174px; position:absolute; right:0px; top:160px; width:610px; } #home-work-examples ul { list-style:none; margin:0; padding:0; } #home-work-examples ul li { height:174px; margin:0 3px; width:197px; } #home-work-examples ul li a { font-size:13px; text-decoration:none; text-align:center; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); } #home-work-examples ul li p { margin-top:15px; } #home-work-examples ul li a.screenshot { display:block; height:123px; text-align:left; text-indent:-9999px; width:197px; } #home-work-examples ul li.elexiocom a.screenshot { background:url(../images/elexiocom_sm.png) no-repeat; } #home-work-examples ul li.ampsoftware a.screenshot { background:url(../images/amp_sm.png) no-repeat; } #home-work-examples ul li.vibecms a.screenshot { background:url(../images/vibe_sm.png) no-repeat; } #home-work-examples ul li.newlifeassembly a.screenshot { background:url(../images/newlifeassembly_sm.png) no-repeat; } #home-work-examples ul li.andreaklerew a.screenshot { background:url(../images/andreaklerew_sm.png) no-repeat; } #home-work-examples ul li.templatesforcms a.screenshot { background:url(../images/templatesforcms_sm.png) no-repeat; } #home-work-examples ul li.johnsonlift a.screenshot { background:url(../images/johnsonlift_sm.png) no-repeat; } #home-work-examples ul li.orthman a.screenshot { background:url(../images/orthman_sm.png) no-repeat; } #home-work-examples ul li.avalon a.screenshot { background:url(../images/avalon_sm.png) no-repeat; } #home-work-examples ul li.coppellbible a.screenshot { background:url(../images/coppellbible_sm.png) no-repeat; } #home-work-examples ul li.valleycommunity a.screenshot { background:url(../images/valleycommunity_sm.png) no-repeat; } #home-work-examples ul li.coasthills a.screenshot { background:url(../images/coasthills_sm.png) no-repeat; } #home-work-examples ul li.shaarai a.screenshot { background:url(../images/shaarai_sm.png) no-repeat; } #home-work-examples ul li.vineyard a.screenshot { background:url(../images/vineyard_sm.png) no-repeat; } #home-work-examples ul li.halocaregivers a.screenshot { background:url(../images/halocaregivers_sm.png) no-repeat; } #home-work-examples ul li a:link, #home-work-examples ul li a:visited {} #home-work-examples ul li a:hover, #home-work-examples ul li a:active {} #home-work-skillset { right:0px; position:absolute; top:400px; width:604px; } #home-work-skillset ul { list-style:none; margin:0; overflow:hidden; padding:0; width:604px; } #home-work-skillset ul li { float:left; font-family:"eb garamond", serif; line-height:24px; padding:4px 0; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); width:115px; } #home-work-skillset ul li.design { background:url(../images/icon-brush.png) no-repeat center left; height:24px; padding-left:35px; text-align:left; } #home-work-skillset ul li.coding { background:url(../images/icon-code.png) no-repeat center left; height:24px; padding-left:35px; text-align:left; } #sub-mid { overflow:hidden; height:auto; } #sub-mid-left { float:left; padding-top:20px; width:345px; } #sub-mid-left h2 { color:#282828; font-family:"eb garamond", Georgia, "Times New Roman", Times, serif; font-weight:normal; font-size:30px; height:54px; overflow:hidden; text-align:center; text-shadow:0 1px 0 rgba(255, 255, 255, 1); } #sub-mid-left h2 span { color:#484848; font-family:"TypeEmbellishmentsW95-T 827984", Georgia, "Times New Roman", Times, serif; font-size:30px; line-height:66px; } #sub-mid-left h2 span.left { float:left; } #sub-mid-left h2 span.right { float:right; } #sub-mid-left ul { list-style:none; margin:0; padding:3px 0 0 0; } #sub-mid-left ul li { font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:14px; text-align:right; padding-right:84px; position:relative; } #sub-mid-left ul li a { color:#585858; display:block; height:20px; padding:6px 0; text-decoration:none; text-shadow:0 1px 0 rgba(255, 255, 255, 1); } #sub-mid-left ul li.current a { color:#fff; font-size:16px; text-shadow:0 -1px 0 rgba(0, 0, 0, 1); padding:10px 0 15px; } #sub-mid-left ul li a:hover { color:#000; text-decoration:underline; } #sub-mid-left ul li.current a:hover { color:#fff; text-decoration:none; } #sub-mid-left ul li a.launch-site { background:url(../images/launch-site.png) no-repeat top left; height:14px; overflow:hidden; width:14px; text-align:left; text-indent:-9999px; position:absolute; top:12px; right:30px; padding:0; margin:0; } #sub-mid-left ul li a.launch-site:hover { background:url(../images/launch-site.png) no-repeat bottom left; } #sub-mid-right { float:right; padding:15px 0 35px; width:593px; } #sub-mid-right .work-entry { background:url(../images/work-detail-normal.png); clear:both; height:341px; margin:10px 0; padding:17px 17px; width:558px; } span.prev-project { color:#585858; padding-left:15px; text-decoration:none; font-size:26px; letter-spacing:.1em; float:left; font-family:"TypeEmbellishmentsW95-T 827984", Georgia, "Times New Roman", Times, serif; font-size:22px; margin-bottom:11px; } span.prev-project a { color:#585858; font-family:"eb garamond", Georgia, "Times New Roman", Times, serif; font-size:12px; text-transform:uppercase; text-decoration:none; line-height:40px; } span.next-project { color:#585858; padding-right:15px; text-decoration:none; text-transform:uppercase; letter-spacing:.1em; float:right; font-family:"TypeEmbellishmentsW95-T 827984", Georgia, "Times New Roman", Times, serif; font-size:22px; margin-bottom:11px; } span.next-project a { color:#585858; font-family:"eb garamond", Georgia, "Times New Roman", Times, serif; font-size:12px; text-decoration:none; line-height:40px; } span.next-project:hover, span.prev-project:hover { color:#000; } span.next-project a:hover, span.prev-project a:hover { color:#000; } ul.project-resp { font-size:12px; list-style:none; margin:0; overflow:hidden; padding:0 5%; width:90%; } ul.project-resp li { color:#585858; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-shadow:0 1px 0 rgba(255, 255, 255, 1); float:left; margin:0; padding:0; } ul.project-resp li.design { background:url(../images/project-resp-design.png) no-repeat center left; height:28px; line-height:28px; padding-left:40px; } ul.project-resp li.code { background:url(../images/project-resp-code.png) no-repeat center left; height:28px; line-height:28px; padding-left:40px;margin-left:30px; } ul.project-resp li a { text-decoration:none; } #sub-mid-right p { color:#585858; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); padding:0 30px; text-align:left; } #sub-mid-right ul.details { color:#585858; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; text-shadow:0 1px 0 rgba(255, 255, 255, 1); padding:0 30px; text-align:left; list-style:none; margin:0; padding:0 40px; } #sub-mid-right ul.details li { padding:2px 0; } #tab-wrap { background:url(../images/tab-wrap.png) repeat-x bottom center; bottom:0px; height:41px; position:absolute; width:100%; } #tab h2.work-together { background:url(../images/lets-work-together.png) no-repeat; display:block; height:25px; left:35px; position:absolute; text-align:left; text-indent:-9999px; top:18px; width:306px; } #tab { background:url(../images/tab.png) no-repeat; height:41px; margin:0 auto; position:relative; width:374px; } #mid-bottom-wrap { background:url(../images/mid-back.jpg) repeat top center; width:100%; } #mid-bottom-shadow { background:url(../images/bottom-shadow.png) repeat-x bottom center; width:100%; } #mid-bottom { margin:0 auto; width:960px; } #mid-bottom div.work-together-form { color:#282828; font-family:"eb garamond", serif; padding-left:22px; padding-top:10px; } #mid-bottom div.work-together-form form { margin:0; padding:0; } #mid-bottom div.work-together-form form div.form-left { float:left; width:503px; } #mid-bottom div.work-together-form form div.form-left label { color:#282828; display:block; letter-spacing:.2em; font-size:13px; padding:5px; text-transform:uppercase; } #mid-bottom div.work-together-form form div.form-left textarea { background:url(../images/textarea-left.jpg) no-repeat; border:0; font-family:"eb garamond", serif; height:79px; margin:0; padding:10px; width:483px; } #mid-bottom div.work-together-form form div.form-right { float:left; padding-left:30px; width:277px; } #mid-bottom div.work-together-form form div.form-right label { color:#282828; display:block; letter-spacing:.2em; font-size:13px; padding:5px; text-transform:uppercase; } #mid-bottom div.work-together-form form div.form-right textarea { background:url(../images/textarea-right.jpg) no-repeat; border:0; font-family:"eb garamond", serif; height:79px; margin:0; padding:10px; width:257px; } #mid-bottom div.work-together-form form div.form-submit { } #mid-bottom div.work-together-form form div.form-submit input { background:url(../images/send.png) no-repeat; border:0; cursor:pointer; font-size:0px; height:53px; margin:50px 0 0 18px; padding:0; text-align:left; text-indent:-9999px; width:90px; } #mid-bottom div.work-together-form form div.form-bottom { clear:both; font-style:italic; padding:5px 0 15px; text-align:center; width:100%; } #footer-wrap { background:url(../images/footer-top.jpg) repeat-x top center; width:100%; } #footer { background:url(../images/footer-lines.png) no-repeat top left; color:#a2a2a2; font-family:'TradeGothicW01-BoldCn20 675334', Arial, Helvetica, sans-serif; margin:0 auto; overflow:hidden; padding-top:56px; padding-bottom:45px; position:relative; width:960px; } #footer a { color:#a2a2a2; } #footer h4 { background:url(../images/my-flesh-and-my-heart.png) no-repeat; font-weight:normal; height:90px; position:absolute; text-align:left; text-indent:-9999px; top:6px; width:960px; z-index:0; } #footer div.copyright { color:#fff; float:left; text-shadow: 4px 4px 0px #4d4d4d; filter: dropshadow(color=#4d4d4d, offx=4, offy=4); font-size:24px; letter-spacing:.03em;text-transform:uppercase; width:45%; text-align:center; opacity:.56; filter:alpha(opacity=56); filter: “alpha(opacity=56)”; position:relative; z-index:1; } #footer div.find-me-on { float:right; overflow:hidden; width:45%; position:relative; z-index:1; } #footer div.find-me-on span { color:#fff; float:left; text-shadow: 4px 4px 0px #4d4d4d; filter: dropshadow(color=#4d4d4d, offx=4, offy=4); font-size:24px; letter-spacing:.03em;text-transform:uppercase; padding:0 25px 0 95px; text-align:center; opacity:.56; filter:alpha(opacity=56); filter: “alpha(opacity=56)”;} #footer div.find-me-on ul { list-style:none; margin:0; padding:0; } #footer div.find-me-on ul li { display:block; float:left; height:30px; padding:0 10px; width:30px; } #footer div.find-me-on ul li a { display:block; height:30px; text-align:left; text-indent:-9999px; width:30px; } #footer div.find-me-on ul li.twitter {} #footer div.find-me-on ul li.twitter a { background:url(../images/social-icons.png) no-repeat top left; } #footer div.find-me-on ul li.twitter a:hover { background:url(../images/social-icons.png) no-repeat 0px -31px; } #footer div.find-me-on ul li.dribbble a { background:url(../images/social-icons.png) no-repeat center -1px; } #footer div.find-me-on ul li.dribbble a:hover { background:url(../images/social-icons.png) no-repeat center -32px; } #footer div.find-me-on ul li.flickr a { background:url(../images/social-icons.png) no-repeat right -1px; } #footer div.find-me-on ul li.flickr a:hover { background:url(../images/social-icons.png) no-repeat right -32px; } #footer div.find-me-on ul li.twitter a:link, #footer div.find-me-on ul li.twitter a:visited {} #footer div.find-me-on ul li.twitter a:hover, #footer div.find-me-on ul li.twitter a:active {} #footer div.find-me-on ul li.dribbble {} #footer div.find-me-on ul li.dribbble a:link, #footer div.find-me-on ul li.dribbble a:visited {} #footer div.find-me-on ul li.dribbble a:hover, #footer div.find-me-on ul li.dribbble a:active {}