/*
Theme Name: ScottEng
Theme URI:
Author: Rod Pattison
Author URI:
Description: The updated Scott and Associates Website Theme
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url('css/normalize.css');

@-ms-viewport{ width: auto !important; } 

body { color: #fff; overflow-y:scroll; padding-bottom: 60px; }

main { margin-top: 10px }

section {  }

aside {
    position:fixed;
    top: 50%;
    right: 0px;
    height:512px;
    margin-top: -256px;
    z-index: 1000;
}

nav { position: relative;}

nav ul#main-menu { margin: 0; padding: 0; list-style: none; position: relative; }
nav ul#main-menu li {
    position:relative;
    display: block;
    left: 180px;
    width: 240px;
    line-height: 60px;
    margin-bottom: 4px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-image: url(img/nav-icons.png);
    -webkit-transition : left 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;
    -moz-transition    : left 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;
    -o-transition      : left 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;
    transition         : left 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 50ms;
}
nav ul#main-menu li:hover  { left: 0; }
nav ul#main-menu li a { display: block; color: #fff; text-decoration: none; padding-left:60px; }
nav ul#main-menu li a:hover { color: #fff; }
nav ul#main-menu li.icon-home { }

footer { 
    color:#fff;
    bottom: 0;
    padding: 10px;
    position: fixed;
    text-align: center;
    width: 100%;
    height: 40px;
}

footer ul#footer-menu { margin: 0; padding: 0; list-style: none; }
footer ul#footer-menu li { display: inline-block; padding:0 7px; border-right:1px solid grey;}
footer ul#footer-menu li:last-child { border-right:none; }

footer ul#footer-menu li a { color: #fff; text-decoration: none; }
footer ul#footer-menu li a:hover { color: #fff; text-decoration: underline; }
footer i.fa { font-size: 28px; }

h1 { font-family: 'Raleway', sans-serif;  font-weight: 800; font-size: 36px; text-transform: uppercase; }
h2 { font-family: 'Raleway', sans-serif;  font-weight: 700; font-size: 24px; text-transform: uppercase; }

article { padding:20px; margin-right: 70px;  }
article p { font-size: 14px; }
article p i.fa { font-size: 16px; }

article.home { margin-top: 100px; }
article.home h1 { font-size: 58px; }
article.home p { font-family: 'Raleway', sans-serif;  font-weight: 600; font-size: 16px; }

a:link, a:hover, a:active, a:visited { color: #ffffff; text-decoration: underline }
header.page-header { padding:10px;}

form p.help-block { color: #aaa; }
form button:hover { box-shadow: 0 0 8px #faedbb; }

#request-form button { color: #bd282d; }
#contact-form button { color: #cf5402; }

.has-error .form-control { background-color: #f2dede; }

#logo { position: absolute; top: 10px; left: 10px; }

.gallery .thumbnail {
    float:left;
    display: block;
    height: auto;
    max-width: 100%;
    margin-top: 10px;
    margin-right:10px;
    text-align: center;
    padding:0;
    border: 1px solid #cfcfcf;
    border-radius: 0;
    width: 150px;
    height: 150px;
    position: relative;
}
.gallery .thumbnail img {
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}
.gallery .thumbnail .caption { 
    font-size: 11px;
    color: #fff;     
    background-color: rgba(0,0,0,0.75);
    padding: 4px; 
    position: absolute;
    bottom: 0;
    width:148px;
    display: none;
}
.gallery .thumbnail:hover .caption { display:block; }
.gallery .thumbnail:hover img { opacity: .9; }

/**
 * Page, menu colours
 */
nav ul#main-menu li.home { background-color: #133338; background-position: 0 0; }
nav ul#main-menu li.about-us { background-color: #175248; background-position: 0 -64px; }
nav ul#main-menu li.commercial { background-color: #408560; background-position: 0 -128px; }
nav ul#main-menu li.civil { background-color: #029699; background-position: 0 -192px; }
nav ul#main-menu li.investigation { background-color: #2f364f; background-position: 0 -320px; }
nav ul#main-menu li.residential { background-color: #02749e; background-position: 0 -256px; }
nav ul#main-menu li.request-a-quote { background-color: #bd282d; background-position: 0 -384px; }
nav ul#main-menu li.contact-us { background-color: #cf5402; background-position: 0 -448px; } /*#e65d02*/

ul#home-page-menu { margin: 0; padding: 0; list-style: none; text-align: center; margin-top: 50px; }
ul#home-page-menu li { display: inline-block; border: 1px solid #fff;  margin-left: 10px; }
ul#home-page-menu li a { display: block; color:#fff; text-decoration: none; font-weight: 800; text-transform: uppercase; padding: 12px 15px; }
ul#home-page-menu li.about a:hover { background-color:#175248; }
ul#home-page-menu li.quote a:hover { background-color:#bd282d; }

body.home { background-color: #222; background-image: url(img/home-background.jpg) }
body.about-us { background-color: #175248 }
body.commercial { background-color: #408560 }
body.civil { background-color: #029699 }
body.residential { background-color: #02749e }
body.investigation { background-color: #2f364f }
body.request-a-quote { background-color: #bd282d }
body.contact-us { background-color: #cf5402 }

body.about-us footer { background-color: #113D36 }
body.commercial footer { background-color: #306448 }
body.civil footer { background-color: #017073 }
body.residential footer { background-color: #015776 }
body.investigation footer { background-color: #23283B }
body.request-a-quote footer { background-color: #8E1E22 }
body.contact-us footer { background-color: #9B3F01; }

@media (max-width: 359px) {
    aside {
        height: 480px;
        margin-top: -240px;
    }
    nav ul#main-menu li { 
        margin-bottom:0; 
    }
}

@media (max-width: 767px) {
    h1 { font-size: 24px; }
    article.home h1 { font-size: 36px; }
}
@media (max-width: 991px) {
    .gallery .thumbnail {
        margin-right:2px;
    }
}
@media (min-width: 992px) {
    footer ul#footer-menu li { padding:0 15px; }
}

@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}