/* --------------------------------------------------------------------------------- Master Stylesheet Author: Pixel House Website: www.pixel-house.com.au --------------------------------------------------------------------------------- */ body { background: #202020; font-family: 'Merriweather', serif; font-weight: 300; margin: 0; padding: 0; color: #606060; } p, li { font-size: 1.0em; line-height: 1.6em; } p, ul, ol { margin: 0 0 1.5em 0; } p.sm { font-size: 0.8em; } p strong { font-weight: 700; color: #202020; } a { color: #c6151b; } a img { border: none; } blockquote { font-size: 20px; line-height: 1.5em; margin: 0 0 1.45em 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; color: #000; font-weight: 700; font-family: 'Open Sans', sans-serif; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none!important; color: #000; } h1 { font-size: 50px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 25px 0; line-height: 60px; } h2 { font-size: 1.7em; font-weight: 800; } h3 { font-size: 1.05em; text-transform: uppercase; margin: 0 0 5px 0; } h4 { font-size: 1.05em; font-family: 'Merriweather', serif; } .black { color: #000; } .orange { color: #e16e00; } .green { color: #549d27; } .grey { color: #555555; } .bold { font-weight: bold; } .no-margin { margin: 0 0 2px 0!important; } .left { float: left; } .right { float: right; } .right.img { margin-left: 20px; } #header-wrap, #heading-wrap, #feature-wrap, #content-wrap, #mid-wrap, #footer-wrap { float: left; width: 92%; padding: 40px 4%; } #header, #heading, #feature, #content, #mid, #footer { width: 100%; margin: 0 auto; position: relative; } #header-wrap { background: #fff; padding: 15px 4% 11px 4%; position: fixed; z-index: 999; } #content-wrap { background: #fff; padding-top: 60px; } #footer-wrap { padding: 30px 4%; background: #99d903; } /* --------------------------------------------------------------------------------- HEADER --------------------------------------------------------------------------------- */ #logo { float: left; margin: 15px 0 13px 0; } #logo img { width: 140px; } #mob-menu-btn { position: absolute; z-index: 999; right: 0; display: block; margin-top: 10px; cursor: pointer; cursor: hand; width: 28px; height: 28px; padding: 10px; background: url(../images/mobile/nav-menu-black.png) no-repeat center center; } .expand-menu-btns { display: none; } #nav { float: left; position: absolute; width: 70%; margin: 0 0 0 15%; padding: 14px 0 0 0; font-family: 'Open Sans', sans-serif; font-weight: 700; } #nav li { float: left; list-style-type: none; text-transform: uppercase; padding: 0; width: 20%; margin: 0; } #nav li a { text-decoration: none; color: #4c4c4c; float: left; width: 96%; text-align: center; padding: 5px 0; border: solid 2px #fff; } #nav li a:hover { border: solid 2px #dfdfdf; color: #000; } *.unselectable, #logo a, #mob-menu-btn, #nav, #feature-wrap { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #header-wrap.small { background: #fff!important; border-bottom: solid 1px #dfdfdf; padding: 15px 3% 11px 3%; width: 94%; } #header-wrap.small #logo { margin: 7px 0 5px 0; } #header-wrap.small #logo img { width: 100px; } #header-wrap.small #mob-menu-btn { margin-top: -6px; background-size: 24px auto; } #header-wrap.small #nav { padding-top: 0px; } #header-wrap, #logo, #logo img, #mob-menu-btn, #folio-bg-02 { transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ } #feature-wrap .feat-logo { transition: all 1s; -moz-transition: all 1s; /* Firefox 4 */ -webkit-transition: all 1s; /* Safari and Chrome */ -o-transition: all 1s; /* Opera */ } /* --------------------------------------------------------------------------------- FEATURE --------------------------------------------------------------------------------- */ #feature-wrap { padding: 270px 4% 0 4%; background: url(../images/featured/store-bg.jpg) no-repeat center center; height: 390px; background-size: 100% auto; text-align: center; } #feature h1 { color: #fff; margin: 0 0 40px 0; } #feature .feat-logo { width: 300px; margin: 0 0 50px 0; } #feature .btn { color: #fdff3e; border: solid 4px #fdff3e; } #feature .btn:hover { border: solid 4px #fff; } /* --------------------------------------------------------------------------------- CONTENT --------------------------------------------------------------------------------- */ .btn { font-family: 'Open Sans', sans-serif; font-weight: 700; background: none; color: #99d903; border: solid 4px #99d903; padding: 15px 45px; text-decoration: none; font-size: 18px; text-transform: uppercase; } .btn:hover { border: solid 4px #000; color: #000; } .btn span { padding-right: 15px; background: url(../images/arrow-black.png) no-repeat right center; } .btn-margin { float: left; width: 100%; padding: 30px 0 20px 0; } #home-intro { width: 700px; margin: 0 auto; text-align: center; } #home-intro h2 { font-size: 50px; font-weight: 800; } /* --------------------------------------------------------------------------------- FOLIO --------------------------------------------------------------------------------- */ #folio #content-wrap { padding-top: 90px; padding-bottom: 20px; } #folio-intro { width: 730px; margin: 0 auto; text-align: center; } #folio-intro h1 span { float: left; width: 100%; font-size: 28px; margin: 0 0 20px 0; } #folio-btm { float: left; width: 100%; text-align: center; background: #fff; padding: 130px 0 50px 0; } #folio-btm .btn { position: relative; z-index: 998; } #folio-btm .more-text { float: left; width: 70%; padding: 20px 15% 0 15%; } .folio-white { float: left; width: 100%; text-align: center; height: 715px; padding: 50px 0 0 0; position: relative; } .folio-white p { color: #fff; width: 620px; margin: 0 auto; position: relative; z-index: 998; } .folio-white p a { color: #fff; text-decoration: none; } .folio-white p a:hover { text-decoration: underline; } .folio-black p { color: #000; } .folio-black p a { color: #000; } #imac-wrap { width: 772px; position: relative; margin: 0 auto; } #imac { float: left; width: 715px; height: 597px; padding: 28px 29px 0 29px; background: url(../folio/images/imac.png) no-repeat 0 0; position: absolute; top: 45px; } #imac-reflection { float: left; pointer-events: none; width: 772px; height: 600px; position: absolute; z-index: 990; top: 0; left: 0; background: url(../folio/images/imac-reflection.png) no-repeat 0 0;} #folio-bg-02 { float: left; width: 100%; position: absolute; height: 837px; top: 0px; left: 0; } #folio-bg-02.shift { top: -30px; } #gallery img { float: left; width: 715px; z-index: 100; } #folio-coupons { background: url(../folio/images/bigcoupons/bg.gif) repeat-y center 0 #5dbadd; background-size: 100% auto; } #folio-coupons .url a { color: #fdff3e; } #folio-coupons #folio-bg-02 { background: url(../folio/images/bigcoupons/bg-02.png) no-repeat center 0; } #folio-shoereveal { background: url(../folio/images/shoereveal/bg.jpg) repeat-y center 0 #000; } #folio-bargain { background: url(../folio/images/bargainspot/bg.jpg) repeat-y center 0 #ddc098; } #folio-health { background: url(../folio/images/aussiehealth/bg.jpg) repeat-y center 0 #fff; background-size: 120% auto; } #folio-health.folio-white p { width: 730px; } #folio-fashion { background: url(../folio/images/fashionsaver/bg.gif) repeat-y center 0 #000; } #folio-cases4kids { background: url(../folio/images/cases4kids/bg.gif) repeat-y center 0 #5f3f9e; background-size: 100% auto; } #folio-runneradvisor { background: url(../folio/images/runneradvisor/bg2.jpg) repeat center bottom #f3f3f1; background-size: 100% auto; } #folio-lockmobile { background: url(../folio/images/lockmobile/bg.jpg) repeat center 0 #f05446; } #folio-buzzcases { background: url(../folio/images/buzzcases/bg.gif) repeat 0 0 #efefef; } #folio-sudoku { background: url(../folio/images/sudokusaviour/bg.jpg) repeat center 0 #981b22; } #folio-canvas { background: url(../folio/images/justcanvas/bg.gif) repeat center 0 #333332; } #folio-oceanscape { background: url(../folio/images/oceanscape/bg.jpg) repeat-x center 0 #3a53ba; } #folio-lowsplumbing { background: url(../folio/images/lowsplumbing/bg.jpg) repeat center 0 #1d164f; } #folio-paylaterfinder { background: url(../folio/images/paylaterfinder/bg.jpg) repeat center 0 #5749a1; } #coupon-stores { float: left; width: 90%; padding: 0 5% 40px 5%; background: #fff; text-align: center; } #coupon-stores .thumb { width: 100%; height: 104px; text-align: center; display: table-cell; vertical-align: middle; } #coupon-stores .thumb img { width: 92%; max-height: 104px!important; margin-bottom: 5px; } #coupon-stores .thumbnails { float: left; width: 96%; padding: 0 0 0 4%; margin: 0; } #coupon-stores .thumbnails li { float: left; width: 10%; padding: 15px 2% 0 2%; /* min-height: 147px; */ min-height: 115px; background: #fff; line-height: 0.8em; margin: 0 2% 20px 0; list-style-type: none; border: solid 1px #d2d2d2; } #coupon-stores .thumbnails li:hover { border: solid 1px #000; } #coupon-stores .thumbnails li a { float: left; width: 100%; text-align: center; } /* --------------------------------------------------------------------------------- ABOUT & SERVICES --------------------------------------------------------------------------------- */ #about-wrap, #services-wrap { float: left; width: 80%; padding: 50px 10% 20px 10%; background: #f4f4f4; border-top: solid 1px #dfdfdf; } #about-wrap .left, #services-wrap .left { float: left; width: 48%; } #about-wrap .right, #services-wrap .right { float: right; width: 44%; } #about-wrap .content-btm, #services-wrap .content-btm { float: left; width: 100%; text-align: center; padding: 30px 0 60px 0; } #infographic-wrap { float: left; width: 80%; padding: 50px 10% 20px 10%; background: #f4f4f4; border-top: solid 1px #dfdfdf; text-align: center; } #infographic-wrap p { width: 700px; margin: 0 auto 50px auto; } #infographic-wrap .infographic { float: left; width: 100%; margin-bottom: 50px; } #infographic-wrap .infographic img { width: 100%; max-width: 1000px; } #infographic-wrap .infographic-bottom { float: left; width: 100%; text-align: left; padding-bottom: 30px; } #infographic-wrap .infographic-bottom p { float: left; width: 100%; margin: 10px 0 20px 0; } #infographic-wrap .infographic-bottom p span { font-weight: bold; color: #ff7e17; } #infographic-wrap .infographic-bottom .left { float: left; width: 45%; } #infographic-wrap .infographic-bottom .right { float: right; width: 45%; } #infographic-wrap .infographic-bottom h2 { float: left; width: 100%; text-align: center; border-bottom: solid 1px #dfdfdf; margin: 0 0 30px 0; padding: 0 0 20px 0; } #infographic-wrap .infographic-bottom h3 { float: left; width: 100%; margin-top: 15px; } #contact-wrap, #questionaire-wrap { float: left; width: 50%; padding: 50px 25% 20px 25%; background: #f4f4f4; border-top: solid 1px #dfdfdf; text-align: center; } #contact-wrap h2 { font-weight: 800; margin: 0 0 10px 0; } #contact-wrap p { margin: 0 0 50px 0; } #questionaire-wrap { text-align: left; width: 80%; padding: 30px 10%; } #services-wrap .third { float: left; width: 30%; padding: 0 3% 30px 0; } #services-wrap .third img { width: 100%; } .services-continued { float: left; width: 100%; padding: 50px 0 0 0; border-top: solid 1px #dfdfdf; } /* --------------------------------------------------------------------------------- PROJECTS PAGE --------------------------------------------------------------------------------- */ #new-projects-wrap { float: left; width: 86%; padding: 50px 7%; background: #f4f4f4; border-top: solid 1px #dfdfdf; border-bottom: solid 1px #dfdfdf; } #new-projects #featured { margin: 0; padding: 0; width: 100%; } #new-projects #featured h2 { } #new-projects #featured h2 a { color: #000; } #new-projects #featured li { list-style-type: none; float: left; width: 24.3%; padding: 0 4% 20px 4%; } #new-projects #featured li img { width: 100%; margin: 0 0 20px 0; } #new-projects #featured li p { } #more { float: left; width: 100%; border-top: solid 1px #dfdfdf; padding-top: 30px; } #more h2 { float: left; width: 100%; text-align: center; padding: 30px 0; border-bottom: solid 1px #dfdfdf; } #more ul { float: right; width: 100%; padding: 20px 0 0 0; margin: 0 0 16px 0; } #more ul li { float: left; width: 32.3%; list-style-type: none; font-size: 0.9em; } #more ul li a { text-decoration: none; float: left; width: 76%; padding: 0 12%; } #more ul li a span { color: #000; width: 100%; float: left; padding-top: 20px; } #more ul li a:hover { } #more ul li a:hover, #more ul li a:hover span { text-decoration: underline; } /* --------------------------------------------------------------------------------- FOOTER PROJECTS --------------------------------------------------------------------------------- */ #projects-wrap { float: left; width: 100%; } #projects-wrap .project { float: left; width: 50%; } #projects-wrap .thumb { float: left; width: 50%; overflow-x: hidden; text-align: center; position: relative; } #projects-wrap .thumb img { height: 280px; float: right; } #projects-wrap .text { float: left; padding: 40px 5% 10px 5%; width: 40%; } #projects-wrap .text h3, #projects-wrap .text h3 a { color: #fff; } #projects-wrap .text p { color: #cecece; font-size: 0.9em; } #projects-wrap .text a.sm { color: #cecece; font-size: 13px; text-decoration: none; } #projects-wrap .text a:hover, #projects-wrap h3 a:hover { color: #99d903; } #projects-wrap .arrow { right: 0; position: absolute; top: 50%; margin-top: -20px; background: url(../images/project-arrow.png) no-repeat right center; width: 40px; height: 40px; } /* --------------------------------------------------------------------------------- FOOTER --------------------------------------------------------------------------------- */ #footer-logos { float: left; width: 90%; padding: 40px 5%; background: #fff; } #footer-logos h4 { float: left; margin: 0; padding: 12px 0; } #footer-logos ul { float: right; width: 100%; margin: 0; padding: 0; right: 3%; position: absolute; } #footer-logos ul li { float: right; padding: 0 1.8% 0 1.8%; list-style-type: none; } #footer-logos ul li img { height: 40px; } #footer-logos ul li span { float: left; padding: 12px 0; } #footer-logos .logo-02 { display: none; } #footer #footer-nav { float:right; position:relative; left:-50%; text-align:left; } #footer ul { list-style:none; position:relative; left:50%; margin: 0; padding: 0; font-family: 'Open Sans', arial; } #footer ul li { float:left; position:relative; padding: 5px 30px; margin: 0; font-weight: 700; } #footer ul li a { color: #fff; text-transform: uppercase; text-decoration: none; } #footer ul li a:hover { text-decoration: underline; }