/* Theme Name: Leone Design Author: Alex Dewez-lopez Author URI: http://www.alexdewezlopez.com Description: A custom theme for LeoneDesign.com.au Version: 1 License: May not be sold or redistibuted. All Contents Copyright 2011 Alex Dewez-Lopez * * www.leonedesign.com.au *** Primary Stylesheet *** Media Queries from www.getskeleton.com *** Copyright 2011, Alex Dewez-Lopez // alexdewezlopez.com *** Thanks and credits in /humans.txt // more info www.humanstxt.org *** Feel free to use my bits and pieces, I learned from borrowing anyway. Always evolve & love what you do. */ /* For styles where you want CSS3 to occur in ie7 / ie8, add behavior:url(css/PIE.htc); at the end of the style. */ /* SITE STYLES * ================================================== */ body {padding:0; margin:0; min-width:960px;} /*logo*/ div#header {z-index:2; display:block; position:relative; width:100%; height:75px; margin:0; background:#fff; opacity:0.7; -moz-opacity:0.7; filter: alpha(opacity=70); border-bottom:1px solid #666; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);} header {z-index:3; position:relative; display:block; overflow:none; width:100%; height:75px; margin-top:-75px; } header img {float:left; height:75px; margin:0 10px 0 20px; text-shadow:0px 1px #fff;} header h1 {float:left; margin-top:8px; font-family: 'Open Sans', sans-serif; font-size:3em; font-weight:300; } header a, header a:visited {color:#000; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; -ms-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out;} header a:hover {color:#179bc1; text-decoration:none;} /*main menu*/ nav {float:right; margin:0; height:74px;} nav ul {display:block; height:74px; font-family:'Oswald', serif; text-transform:uppercase; border-left:1px solid #ccc; border-right:1px solid #fff; text-shadow:0px 1px #fff;} nav ul li {display:block; float:left; height:74px; } nav ul li a, nav ul li a:visited {display:block; padding:35px 20px 13px; color:#666; border-left:1px solid #fff; border-right:1px solid #ccc; border-bottom:1px solid #666; background:rgba(255,255,255,0); -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; -ms-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out;} nav ul li a:hover {color:#179bc1; background:#fff; background:rgba(255,255,255,1); border-bottom:1px solid #ccc;} /*drop down menu*/ nav ul li ul {display:none; position:absolute; height:42px; border:0; font-size:0.9em;} nav ul li:hover ul {display:block;} nav ul li ul li {height:42px; float:none;} nav ul ul li a, nav ul ul li a:visited {height:30px; padding:8px 20px 2px; border-top:1px solid #fff; border-bottom:1px solid #ddd; background:#fff; color:#666; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; -ms-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out;} nav ul ul li a:hover {background:#eee; color:#179bc1; border-bottom:1px solid #bbb;} #facebook-icon {padding:30px 20px 14px; border-left:1px solid #fff; border-right:1px solid #ccc; border-bottom:1px solid #666; height:30px;} #facebook-icon a {background:url('img/facebook.png') no-repeat 0 0; height:30px; width:30px; display:block; padding:0; border:0;} #facebook-icon a:hover {background-position:0 -30px;} /*content styles*/ #main {z-index:1; position:relative; display:block; clear:both; width:960px; margin:30px auto 0; overflow:auto; padding-bottom:100px;} #main h2 {position:relative; display:block; width:960px; text-align:center; font-family:'Oswald', serif; font-size:2.4em; } #main h3 {position:relative; display:block; clear:left; padding:20px 20px 0; font-family:'Oswald', serif; font-size:1.6em; text-transform:uppercase; color:#333;} #main #tagline {text-align:center; font-size:1.3em; font-style:italic;} #main.hidden {display:none;} .no-js #main.hidden {display:block;} #content, #special {display:block; float:left; background:url('img/trans-bg.png'); background:rgba(255,255,255,0.9); padding-bottom:10px; border:2px solid white; -webkit-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.5); box-shadow: 0px 0px 3px rgba(50, 50, 50, 0.5);} #content {margin-right:12px; margin-left:20px; width:650px;} #content h2 {position:relative; display:block; width:auto; margin:20px 0 5px; padding:0 20px; font-family:'Oswald', serif; font-size:2em; text-align:left; text-transform:uppercase; color:#999; text-shadow:0px 1px #fff;} #content p {padding:0 20px 0; } #content ul {padding:0 20px 0; } #special {width:260px;} #special ul {list-style:none; font-size:1.2em; padding:0 20px 0; margin-left:0; font-family: sans-serif;} #special ul li {position:relative; display:block ; width:100%;} #special ul li a {position:relative; display:block; width:100%; color:#333; border-top:1px solid #fff; border-bottom:1px solid #ccc; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; -ms-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } #special ul li a:hover {width:100%; background:#fff; color:#179bc1; border-bottom:1px solid #ddd;} /*contact stuff*/ .contact #content {width:530px;} .contact #content form {padding:0 20px 0; } .contact #content form input, .contact #content form textarea {width:520px;} .contact #content form img {border:2px solid #000;} .contact #special {width:380px;} .contact #special iframe {border:2px solid #000; margin-left:20px;} .contact #special p {padding:0 20px 0; } .contact #special a, .contact #content a, .contact #special a:visited, .contact #content a:visited {color:#888; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; -ms-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out; } .contact #special a:hover, .contact #content a:hover {color:#179bc1;} #main.range {margin-top:30px} /*gallery*/ .ngg-galleryoverview{padding:20px; padding-right:0px; border-top:1px solid #ddd;} .ngg-galleryoverview div a img {opacity:0.7; -moz-opacity:0.7; filter: alpha(opacity=70); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} .ngg-galleryoverview div a:hover img {opacity:1; -moz-opacity:1; filter: alpha(opacity=100);} .ngg-galleryoverview img {float:left; margin-right:15px; -webkit-box-shadow: 2px 2px 1px rgba(100, 100, 100, 0.4); -moz-box-shadow: 2px 2px 1px rgba(100, 100, 100, 0.4); box-shadow: 2px 2px 1px rgba(100, 100, 100, 0.4);} /*footer*/ div#footer {z-index:1; position:fixed; display:block; width:100%; height:45px; bottom:0; left:0; background:#fff; border-top:1px solid #eee; opacity:0.7; -moz-opacity:0.7; filter: alpha(opacity=70); -webkit-box-shadow: 0px -1px 5px rgba(50, 50, 50, 0.85); -moz-box-shadow: 0px -1px 5px rgba(50, 50, 50, 0.85); box-shadow: 0px -1px 5px rgba(50, 50, 50, 0.85); } footer {z-index:2; position:fixed; display:block; width:100%; height:45px; bottom:0; left:0; } footer p {margin:0;} footer a, footer a:visited {color:#222; -webkit-transition: color 0.15s ease-in-out; -moz-transition: color 0.15s ease-in-out; -o-transition: color 0.15s ease-in-out; -ms-transition: color 0.15s ease-in-out; transition: color 0.15s ease-in-out;} footer a:hover {color:#027090;} footer #phone {display:block; float:left; margin:0 0 0 20px; font-family:'Oswald', serif; color:#027090; font-size:2.6em; line-height:1em; text-shadow:0px 1px #fff;} footer #email {float:left; padding-left:8px; margin-top:-3px; font-family:'Oswald', serif; font-size:1.2em; text-align:left; text-shadow:0px 1px #fff;} footer #email .addy {font-size:0.8em; line-height:0.8em;} footer #copy {float:right; margin-right:20px; margin-top:-3px; font-family:'Oswald', serif; font-size:1.2em; text-align:right; text-shadow:0px 1px #fff;} footer #copy .copy-link {margin-top:-5px; font-size:0.7em;} /*background*/ #background {z-index:0; position:fixed; left:50%; bottom:0; width:auto; height:auto; min-width:100%; margin:0 0 0 -50%;} #jsnotice {width:650px; margin:30px auto; padding:1em; border:3px solid #ccc; text-align:center;} .js #jsnotice {display:none; } /* MEDIA QUERIES * ================================================== */ /* LESS THAN 700px */ @media only screen and (max-height: 700px) { #main h2 {font-size:30px; margin-bottom:8px; } #main #tagline {text-align:center; font-size:16px; font-style:italic; margin-bottom:1em;} #content h2 {font-size:26px;} #content p {font-size:14px; margin-bottom:16px;} #content ul {font-size:14px; margin-bottom:16px;} #background {top:-30px;} } @media only screen and (max-height: 550px) { #main h2 {font-size:26px; margin-bottom:6px; } #main h3 {font-size:22px;} #main #tagline {text-align:center; font-size:14px; font-style:italic; margin-bottom:10px;} div#footer {height:30px;} footer {z-index:2; position:fixed; display:block; width:100%; height:30px; bottom:0; left:0; } footer #phone {font-size:28px;text-shadow:0px 0px #fff;} footer #email {font-size:13px; text-shadow:0px 0px #fff; margin-top:-4px; padding-left:4px;} footer #email .addy {float:left;} footer #copy {float:right; margin-right:20px; margin-top:-3px; font-family:'Oswald', serif; font-size:13px; text-align:right; text-shadow:0px 0px #fff;} footer #copy .copy-link {margin-top:-5px; font-size:10px; text-shadow:0px 0px #fff;} } /* iPad Portrait/Browser */ @media only screen and (min-width: 768px) and (max-width: 991px) { } /* Mobile/Browser */ @media only screen and (max-width: 767px) { } /* Mobile Landscape/Browser */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Anything smaller than standard 960 */ @media only screen and (max-width: 959px) { } /* iPad Portrait Only */ @media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) { } /* Mobile Only */ @media only screen and (max-width: 767px) and (max-device-width: 1000px) { } /* Mobile Landscape Only */ @media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) { }