/**************** ********************************************************************************************************* Project: Grow Media - Portfolio Site Level: Global Styles Author: Rob McKenzie Date: 8th September 2009 Company: Grow Media Website: http://www.growmedia.ca 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 Colors Used Green : #74a125 Light Grey: #d9d9d9 /**************** ********************************************************************************************************* 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:#74a125;text-decoration:none;} a:hover{text-decoration:underline;} img{border:none} /**************** ********************************************************************************************************* 02 - SUPERSIZE BACKGROUND IMAGE ********************************************************************************************************* ****************/ #supersize{position:fixed;} #supersize img{height:100%;position:absolute;width:100%;z-index:0;} /**************** ********************************************************************************************************* 03 - HEADER ********************************************************************************************************* ****************/ div#header{height:64px;left:0;overflow:hidden;position:absolute;top:50px;width:100%;z-index:80;} h1{background:url(_images/_general/grow-logo.png) no-repeat 0 0;height:64px;left:0;position:fixed;text-indent:-999em;width:201px;} a#home-link{display:block;height:64px;left:0;position:absolute;text-indent:-999em;width:201px;} div#tagline{background-color:#000;filter:alpha(opacity=80);height:64px;left:761px;opacity:0.8px;position:fixed;text-indent:-999em;width:100%;} /**************** ********************************************************************************************************* 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;} /**************** ********************************************************************************************************* 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.2 - CASE STUDIES - OUR WORK PAGE ********************************************************************************************************* ****************/ ul#case-studies{background:#000;border-bottom:1px solid #fff;color:#333;font-size:1em;line-height:2.4em;padding:21px 66px 42px 42px;width:442px;} ul#case-studies li{list-style:none;} ul#case-studies li a{color:#fff;text-decoration:none;text-transform:uppercase;} ul#case-studies li a:hover{color:#74a125;text-decoration:underline;} /**************** ********************************************************************************************************* 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;} /**************** ********************************************************************************************************* 04.4 - FORMS ********************************************************************************************************* ****************/ form{margin:0 0 32px;padding:0 66px 0 42px;position:relative;} fieldset{background:url(_images/_general/horizontal-dotted-line.gif) repeat-x 0 0;border:none;clear:both;padding-top:5px;} fieldset#xhtml-set{margin-top:10px;padding:0;} fieldset#submit-set{background:none;margin-top:18px;padding:32px 0 0;} legend{background-color:#fff;color:#666;font-size:1em;padding:10px 10px 10px 0;text-transform:uppercase;} label{background:#000;color:#fff;float:left;height:21px;padding:10px 10px 0;width:130px;} input[type="text"]{border-bottom:1px solid #bfbfbf;border-left:none;border-right:1px solid #bfbfbf;border-top:1px solid #bfbfbf;color:#74a125;float:left;height:24px;margin:0 0 12px;padding:5px 5px 0;width:281px;} input[type="image"]{bottom:0;position:absolute;right:66px;} textarea{border:1px solid #bfbfbf;color:#74a125;height:100px;padding:5px;width:430px;} div#content form p{font-size:1em;line-height:1.2em;margin:0;padding:0;} /**************** ********************************************************************************************************* 05 - FOOTER ********************************************************************************************************* ****************/ div#footer{background-color:#000;color:#fff;filter:alpha(opacity=80);height:46px;left:206px;opacity:0.8px;padding-top:18px;position:relative;top:124px;width:550px;} div#footer p{color:#74a125;font-size:.8em;margin:0;text-align:center;} div#footer ul{font-size:1.1em;margin:0 0 6px;text-align:center;} div#footer ul li{border-left:1px solid #fff;display:inline;list-style:none;margin-right:5px;padding:3px 0 0 7px;} div#footer ul li.first{border:none;} div#footer ul li a{color:#fff;text-decoration:none;} div#footer ul li a:hover{text-decoration:underline;} div#footer img#rss-tiny{padding:1px 4px 0 0;} /**************** ********************************************************************************************************* 05 - CODE HIGHLIGHTING ********************************************************************************************************* ****************/ /* Layout */ .codecolorer { padding: 5px; text-align: left; } code.codecolorer { padding: 2px; } .codecolorer-container { margin-bottom: 1.6em; text-align: left; } .codecolorer, .codecolorer *, .codecolorer-container, .codecolorer-container * { font: 1em/1.4em Monaco, Lucida Console, monospace } .codecolorer-container table { border: 0px; } .codecolorer-container table td { margin: 0px; padding: 0px; border: 0px; } .codecolorer-container table td.line-numbers { padding: 5px; text-align: right; } .codecolorer-container table td.line-numbers div { width: 23px; } /* Layout styles */ .codecolorer-container { border: 1px solid #9F9F9F; } .codecolorer-container table td.line-numbers { color: #888888; background-color: #EEEEEE; border-right: 1px solid #9F9F9F; } .codecolorer-noborder, .codecolorer-noborder table td.line-numbers { border: 0px; } /* "Dawn" color scheme */ .dawn, .dawn .codecolorer { color: #080808; background-color: #F9F9F9; } .dawn .codecolorer .co0, .dawn .codecolorer .co1, .dawn .codecolorer .co2, .dawn .codecolorer .co3, .dawn .codecolorer .co4, .dawn .codecolorer .coMULTI, code.dawn .co0, code.dawn .co1, code.dawn .co2, code.dawn .co3, code.dawn .co4, code.dawn .coMULTI { color: #5A525F; font-style: italic; } .dawn .codecolorer .nu0, .dawn .codecolorer .re3, code.dawn .nu0, code.dawn .re3 { color: #811F24; } .dawn .codecolorer .st0, .dawn .codecolorer .st_h, .dawn .codecolorer .es0, .dawn .codecolorer .es1, code.dawn .st0, code.dawn .st_h, code.dawn .es0, code.dawn .es1 { color: #0B6125; } .dawn .codecolorer .me1, .dawn .codecolorer .me2, code.dawn .me1, code.dawn .me2 { color: #BF4F24; } .dawn .codecolorer .kw1, .dawn .codecolorer .kw2, .dawn .codecolorer .sy1, code.dawn .kw1, code.dawn .kw2, code.dawn .sy1 { color: #794938; } .dawn .codecolorer .kw3, .dawn .codecolorer .kw4, .dawn .codecolorer .kw5, .dawn .codecolorer .re2, code.dawn .kw3, code.dawn .kw4, code.dawn .kw5, code.dawn .re2 { color: #A71D5D; } .dawn .codecolorer .re0, .dawn .codecolorer .re1, code.dawn .re0, code.dawn .re1 { color: #234A97; } .dawn .codecolorer .br0, .dawn .codecolorer .sy0, code.dawn .br0, code.dawn .sy0 { color: #080808; } .dawn .xml .re1 { color: #A71D5D; } .dawn .xml .re0 { color: #811F24; }