/**************** ********************************************************************************************************* Project: JPSD - Portfolio Site Level: Global Styles Author: Julian simpson Date: 4th August 2010 Company: JPSD Website: http://www.jpsd.co.uk Contents 01 - GENERAL 02 - HEADER 02.1 - SIGN UP FORM 03 - MAIN NAVIGATION 03.1 - NAVIGATION BUTTON STYLES 03.2 - DONATE BUTTON 04 - BODY 04.1 - TABS 05 - FOOTER 05.1 - SOCIAL MEDIA /**************** ********************************************************************************************************* 01 - GENERAL ********************************************************************************************************* ****************/ *{margin:0;padding:0;} /* Body font size is set to 68.8% which is 11px at default on most browsers (1em or 100% being 16px) */ body{font-family:Helvetica, Arial, sans-serif;font-size:68.8%;height:100%;} html{height:100%;} div#wrapper{position:relative;z-index:1;} a{color:#a7a6a6;text-decoration:none;} a:hover{color:#717170;text-decoration:underline;} img{border:none;padding:0px;} p { color:#e4e4e4; font-size: 14px; } /**************** ********************************************************************************************************* 02 - SUPERSIZE BACKGROUND IMAGE ********************************************************************************************************* ****************/ #supersize{position:fixed;} #supersize img{height:100%;position:absolute;width:100%;z-index:0;} /**************** ********************************************************************************************************* 03 - HEADER ********************************************************************************************************* ****************/ /**************** ********************************************************************************************************* 03.1 - MAIN NAVIGATION ********************************************************************************************************* ****************/ ul#mainNavigation{left:206px;position:absolute;} ul#mainNavigation li{float:left;list-style:none;margin-right:5px;} div#header ul#mainNavigation li a{background-position:0 -64px;display:block;height:64px;text-indent:-999em;width:180px;} ul#mainNavigation li a#hireus{background:url(_images/_navigation/main-navigation-hireus.gif) no-repeat;} ul#mainNavigation li a#aboutus{background:url(_images/_navigation/main-navigation-aboutus.gif) no-repeat;} ul#mainNavigation li a#ourwork{background:url(_images/_navigation/main-navigation-ourwork.gif) no-repeat;} ul#mainNavigation li a#blog{background:url(_images/_navigation/main-navigation-blog.gif) no-repeat;} div#header ul#mainNavigation li a:hover{background-position:0 0;} div#header ul#mainNavigation li a.active{background-position:0 0;} .line { width:160px; height:1px; } .categoryNav { margin-top:10px; margin-bottom:10px; } .largeNav { padding-top:10px; padding-bottom:10px; } /**************** ********************************************************************************************************* 04 - CONTENT ********************************************************************************************************* ****************/ div#content{background-color:#fff;left:206px;padding:0 0 1em;position:relative;top:119px;width:550px;line-height:2em;} div#content h2.toph2{border-top:none;margin-bottom:0;} div#content h2{background-color:#000;border-bottom:1px solid #fff;color:#74a125;font-size:1em;font-weight:400;margin-bottom:2.2em;padding:24px 200px 1.2em 42px;text-transform:uppercase;} div#content h2 span{color:#fff;} div#content h3{font-size:1.3em;font-weight:400;margin-bottom:0;margin-left:42px;margin-right:66px;} div#content h4{color:#74a125;font-size:1.3em;font-weight:400;margin-bottom:1em;margin-left:42px;margin-right:66px;} div#content h5{font-size:1.2em;font-weight:400;margin-bottom:1em;margin-left:42px;margin-right:66px;} div#content p{font-size:1.2em;margin-bottom:2em;margin-left:42px;margin-right:66px;color:#262626} div#content p.error{color:red;} div#content a.visit-site{color:#fff;position:absolute;right:42px;text-transform:uppercase;top:24px;} div#content a.visit-site:hover{color:#74a125;} /**************** ********************************************************************************************************* 04.1 - BLOG ********************************************************************************************************* ****************/ h2.pagetitle{line-height:2em;position:relative;top:119px;width:442px;left:206px;background-color:#000;color:#74a125;font-size:1em;font-weight:400;margin-top:5px;padding:24px 66px 1.2em 42px;text-transform:uppercase;} h2.blogtitle{line-height:2em;position:relative;top:119px;width:442px;left:206px;background-color:#000;color:#74a125;font-size:1em;font-weight:400;margin-top:;padding:24px 66px 1.2em 42px;text-transform:uppercase;} div.post{line-height:2em;background-color:#fff;left:206px;position:relative;top:119px;width:442px;margin-top:5px;padding:2em 66px 2em 42px} div.post h3{line-height:1.2em;font-size: 2.6em;font-weight:700;letter-spacing:-0.05em} div.post h3 a{color:#000} div.post h3 a:hover{color:#74a125;text-decoration:none} div.entry h1{background:none;font-size:1.8em;font-weight:400;height:auto;margin:0 0 1em;padding:0;position:static;text-indent:inherit;width:auto;} div.entry h2{background-color:transparent;border:none;color:#74a125;font-size:1.4em;height:auto;margin:0 0 1em;padding:0;text-transform:none;width:auto;} div.entry ul{font-size:1.2em;list-style:disc inside;margin-bottom:1em;} div.entry ol{font-size:1.2em;list-style:decimal inside;margin-bottom:1em;} div.entry pre{font-size:1.2em;margin-bottom:1em;} div.entry blockquote{border-left:15px solid #ececec;margin-bottom:1.6em;padding-left:1.8em;} div.entry blockquote p{font-size:1em;} div.entry h3{margin-bottom:1em;font-size:1.2em} div.entry h4{margin-bottom:1em;font-size:1.2em} div.entry h5{margin-bottom:1em;font-size:1.2em;font-weight:700} div.entry p{font-size:1.2em;margin-bottom:1.2em;} div.dateandcategory{color:#666;font-size:1em;border-bottom:1px solid #d9d9d9;margin: 0.8em 0 1.7em;} p.date{display:inline} p.category,p.comments{display:inline;margin-left:1.5em;padding:0 0 6px 1.5em;border-left:1px solid #d9d9d9} p.sharethis{font-size:1.2em} p.postmetadata{font-size:1em} div.navigation{font-size:1.2em;line-height:2em;background-color:#fff;left:206px;position:relative;top:119px;width:442px;margin-top:5px;padding:.6em 66px 0 42px;height:30px} .alignright{float:right;} .alignleft{float:left;} h2.leave-comments{position:relative;top:119px;width:442px;left:206px;background-color:#000;color:#74a125;font-size:1em;font-weight:400;margin-top:5px;padding:24px 66px 1.2em 42px;text-transform:uppercase;} ol.commentlist{line-height:1.7em;left:206px;position:relative;top:119px;width:550px;background-color:#fff} ol.commentlist li{list-style:none;padding:2em 66px 2em 42px} ol.commentlist li.odd{background-color:#ececec} ol.commentlist li p{font-size:1em;margin-left:0;margin-right:0} ol.commentlist li img.avatar{float:left;margin:0 1em 1em 0} div#respond{background-color:#fff;left:206px;padding:0 0 1em;position:relative;top:119px;width:550px;margin-top:5px} div#respond h2{background-color:#000;border-bottom:1px solid #fff;color:#74a125;font-size:1em;font-weight:400;margin-bottom:2.2em;padding:24px 66px 1.2em 42px;text-transform:uppercase;} div#respond p.login-message{margin-left:42px;margin-right:66px;font-size:1.2em;margin-bottom:1.2em;} img.ngg-singlepic{} img.ngg-left{float:left;margin:0 1.6em 1em 0} img.ngg-right{float:right;margin:0 0 1em 1.6em} /**************** /**************** ********************************************************************************************************* 04.3 - OUR WORK jQUERY GALLERY ********************************************************************************************************* ****************/ div#tabs{border-bottom:1px solid #fff;position:relative;} div.ui-tabs .ui-tabs-hide{display:none;} ul#tab-navigation{position:absolute;right:0;top:0;z-index:10;} ul#tab-navigation li{float:left;list-style:none;margin-left:1px;} div#tabs ul#tab-navigation li a{background-position:0 -23px;display:block;height:23px;text-indent:-999em;width:23px;outline:none} div#tabs ul#tab-navigation li a:hover{background-position:0 0;} div#tabs ul#tab-navigation li.ui-state-active a{background-position:0 0;} ul#tab-navigation li a#ourwork-nav-01{background:url(_images/_ourwork/_numbernav/work-gallery-01.gif) no-repeat;} ul#tab-navigation li a#ourwork-nav-02{background:url(_images/_ourwork/_numbernav/work-gallery-02.gif) no-repeat;} ul#tab-navigation li a#ourwork-nav-03{background:url(_images/_ourwork/_numbernav/work-gallery-03.gif) no-repeat;} ul#tab-navigation li a#ourwork-nav-04{background:url(_images/_ourwork/_numbernav/work-gallery-04.gif) no-repeat;} ul#tab-navigation li a#ourwork-nav-05{background:url(_images/_ourwork/_numbernav/work-gallery-05.gif) no-repeat;} div#tabs div.tab-content p{background:url(_images/_ourwork/case-study-title-overlay.png) no-repeat 0 0;bottom:0;font-size:1.2em;height:34px;left:0;line-height:1em;margin:0;position:absolute;width:550px;} div#tabs div.tab-content p a{bottom:10px;color:#fff;position:absolute;right:60px;text-decoration:none;} div#tabs div.tab-content p a:hover{text-decoration:underline;} div#tabs div.tab-content{height:230px;}