/* CSS Document */

body {
    font-family: Arial;
    /*background: url(../img/background/center_background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.center_background.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='center_background.jpg', sizingMethod='scale')";*/
    margin: 0;
    text-align: center;
    background: #FEEDD9;
    height: 100%;
}

/*Global Layout*/

#container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: block;
    overflow: auto;
    background: #FEEDD9;
    /*overflow: hidden;*/
    /*border: 4px solid #003674;*/
    box-shadow: -0.5px 1px 1px 3px #FFFFFF;
    position: relative;
    z-index: 10;
}

/*#gallery #container {
    background: url(../img/background/template2.jpg) no-repeat;
}

#contact #container {
    background: url(../img/background/template2.jpg) no-repeat;
}

#services #container {
    background: url(../img/background/template2.jpg) no-repeat;
}

#products #container {
    background: url(../img/background/template2.jpg) no-repeat;
}

#projects #container {
    background: url(../img/background/template2.jpg) no-repeat;
}

#admin #container {
    background: url(../img/background/template2.jpg) no-repeat;
}*/

#bottom-overlay {
    background: url(../img/home/brick-overlay.jpg) no-repeat;
    background-size: cover;
    width: 30%;
    height: 30%;
    z-index: 0;
    position: absolute;
    bottom: 25px;
    left: 0;
}

#header {
    float: left;
    width: 100%;
    z-index: 0;
}

#navigation {
    float: left;
    width: 65%;
    margin-top: -1%;
    z-index: 0;
    background: url(../img/header/nav-bar.png) no-repeat;
}

#topContent {
    float: left;
    width: 55%;
}

#leftContent {
    float: left;
    width: 65%;
    margin: 10px 0 0px 0;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 10;
}

#products #leftContent {
    overflow: hidden;
}

#admin #leftContent {
    width: 100%;
}

#gallery #leftContent {
    padding-bottom: 20px;
}

#rightContent {
    float: left;
    width: 35%;
    /*background: url(../img/home/mainPic.jpg) no-repeat;
    background-size: cover;*/
    margin-top: -18%;
    z-index: 0;
}

/*#services #rightContent {
    background: url(../img/driveway-services/mainPic.jpg) no-repeat;
}*/

/*#products #rightContent {
    background: url(../img/driveway-products/mainPic.jpg) no-repeat;
}*/

/*#contact #rightContent {
    background: url(../img/contact/mainPic.jpg) no-repeat;
}*/

#gallery #rightContent {
    background: none;
}

#testimonials #rightContent {
    background: none;
}

img {
    width: 100%;
}

    img.montage {
        margin: 20px auto 20px auto;
        display: block;
    }

#home img.montage {
    width: 50%;
}

#services img.montage {
    width: 75%;
}

#products img.montage {
    width: 75%;
}

/*#home #montage{
width:30%;
margin:25px 10px 10px 150px;
background:url(../img/home/montage.gif) no-repeat;
}*/

/*#services #montage{
width:75%;
margin:130px 0 10px 2%;
background:url(../img/driveway-services/montage.gif) no-repeat;
}*/

/*#products #montage{
width:490px;
height:250px;
margin:10px 0 10px 5%;
background:url(../img/driveway-products/montage.gif) no-repeat;
}*/

/*#approved_member_logo{
width:15%;
float:right;
margin:5px 1% 0 0;
background:url(../img/logos/safe_local_trades_approved_member.jpg) no-repeat;
}*/

img.approved-logo {
    width: 20%;
    float: right;
    margin-right: 2%;
    margin-bottom: 30px;
}

/*#contact img.approved-logo {
    margin: 5px auto 0 auto;
    float: none;
}*/

/*#contact #approved_member_logo {
    margin: 5px auto 0 auto;
    float: none;
}*/

.imageBox {
    /*width: 10%;*/
    float: left;
    /*margin: 0px 2% 18px 2%;*/
}

#imageContainer {
    width: 100%;
    margin: 0 auto 0 auto;
}

#largePicContainer {
    width: 90%;
    z-index: 100;
    top: 1%;
    left: 1%;
    position: absolute;
}

#divider {
    width: 60%;
    float: left;
}

#spacer {
    width: 60%;
    float: left;
}

.login {
    border: 1px dashed #000000;
    background-color: #FFECEC;
    margin: 10px 2% 20px 2%;
    padding: 0px 0 0px 0;
}

#footer {
    width: 100%;
    float: left;
    background-color: #003674;
    position: relative;
    z-index: 10;
    margin-top: -1%;
}

#footerLeft {
    width: 60%;
    float: left;
}


h1 {
    font-size: 1.2em;
    color: #003674;
    margin: 0px 10% 30px 10%;
    text-align: center;
    text-transform: capitalize;
}

h2 {
    font-size: 0.9em;
    color: #003674;
    margin: 10px 1% 20px 2%;
}

#testimonials h2 {
    color: #999999;
    margin: 0px 0 30px 1%;
}

p {
    font-size: 0.9em;
    margin: 10px 10% 10px 10%;
    text-align: center;
    color: #003674;
    line-height: 15px;
}

#admin p {
    text-align: left;
    margin: 10px 1% 20px 2%;
}

ul {
    font-size: 0.9em;
    float: left;
    margin: 5px 1% 5px 1%;
    padding: 0px 0 0px 0;
    list-style: none;
    color: #003674;
}

#topContent ul {
    font-size: 0.9em;
    margin: 10px 0 10px 6%;
}

#leftContent ul {
    text-align: center;
    float: none;
    margin: 10px 10% 10px 10%;
}

#contact #leftContent ul {
    font-size: 0.9em;
}

#footerLeft ul {
    color: #FFFFFF;
    float: none;
    text-align: center;
    margin: 5px 0 5px 0;
}

#admin ul {
    text-align: left;
}

li {
    display: inline;
    margin: 0px 0 0px 0;
}

#topContent li {
    margin: 0px 0 0px 0;
}

#admin ul {
    float: none;
    display: block;
    margin: 20px 1% 20px 2%;
}

#admin li {
    display: block;
    margin: 5px 0 5px 0;
}

#navigation ul {
    color: #FEEED7;
    font-size: 0.9em;
    margin: 0px 10% 10px 10%;
    width: 80%;
}

#navigation li {
    display: inline;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #003674;
}

#leftContent a {
    text-decoration: underline;
}

#header a {
    color: #FFFFFF;
    font-size: 0.6em;
    float: right;
    margin: 10px 1% 10px 1%;
}

#navigation a {
    float: left;
    color: #FEEED7;
    padding: 6px 4.2% 17px 4.2%;
    margin: 0px 0 0px 0;
    display: block;
}

    #navigation a:hover {
        background-color: #FEEED7;
        color: #003674;
        filter: alpha(opacity=70);
    }

    #navigation a.active {
        background-color: #FEEED7;
        color: #003674;
        filter: alpha(opacity=70);
    }


.label {
    display: block;
    font-size: 0.8em;
    color: #003674;
    margin: 1px 0 0px 0;
    padding: 0px 0 0px 0;
    text-align: center;
}

#admin .label {
    margin: 10px 0 0px 2%;
    text-align: left;
}

.textbox {
    display: block;
    width: 50%;
    border: 2px solid #003674;
    margin: 0 auto 6px auto;
    padding: 0px 0 0px 0;
}

#admin .textbox {
    margin-left: 2%;
    width: 60%;
}

.textarea {
    display: block;
    width: 50%;
    height: 80px;
    border: 2px solid #003674;
    margin: 0px auto 5px auto;
    padding: 0px 0 0px 0;
}

#admin .textarea {
    margin-left: 2%;
    width: 60%;
}

.button {
    display: block;
    border: 2px solid #003674;
    color: #003674;
    margin: 10px auto 10px auto;
    padding: 10px 10px 10px 10px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

#admin .button {
    margin-left: 2%;
}

.image {
    float: left;
    margin: 5px 5px 0 1%;
    border: 2px solid #003674;
    z-index: -2;
    width: 5.8%;
}

.set-height {
    height: 90px;
}

.large-image {
    width: 100%;
    float: right;
    z-index: 0;
}

#admin .image {
    float: none;
    margin: 0px 1% 5px 2%;
}

.top-image {
    border: 2px solid #003674;
    width: 60%;
    display: none;
    position: absolute;
    z-index: 50;
}

.leftImage {
    float: left;
    margin: 5px 0.5% 5px 10%;
    border: 2px solid #834354;
}

.bold {
    font-weight: bold;
}

.bold-red {
    font-weight: bold;
    color: red;
}

.table {
    margin: 10px 1% 20px 2%;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

@media (max-width: 1600px) {
    #navigation a {
        padding-left: 3%;
        padding-right: 3%;
    }

    .set-height {
        height: 80px;
    }

    #largePicContainer {
        width: 100%;
        top: 20%;
    }
}

@media (max-width: 1280px) {

    #navigation a {
        padding-left: 2%;
        padding-right: 2%;
    }

    .set-height {
        height: 70px;
    }
}

@media (max-width: 1070px) {

    #navigation ul {
        font-size: 0.8em;
    }

    .set-height {
        height: 60px;
    }
}

@media (max-width: 940px) {

    /*#rightContent {
        margin-top: -25%;
    }*/

    .set-height {
        height: 50px;
    }

    #navigation ul {
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
    }
}

@media (max-width: 850px) {

    #navigation ul {
        font-size: 0.7em;
    }
}

@media (max-width: 750px) {

    #bottom-overlay {
        display: none;
    }

    #rightContent {
        display: none;
    }

    #leftContent {
        width: 100%;
    }

    #navigation {
        width: 100%;
    }

        #navigation ul {
            width: 80%;
            margin-left: 10%;
            margin-right: 10%;
            font-size: 0.8em;
        }

        #navigation a {
            padding-left: 2.5%;
            padding-right: 2.5%;
        }

    #footerLeft {
        width: 100%;
    }

    .image {
        width: 47.5%;
        height: auto;
    }

    .set-height {
        max-height: 450px;
    }
}

@media (max-width: 700px) {
    #navigation a {
        padding-left: 2%;
        padding-right: 2%;
    }
}

@media (max-width: 620px) {

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    #navigation {
        background: none;
        background-color: #003674;
    }

        #navigation ul {
            width: 100%;
            margin: 0;
            font-size: 0.9em;
        }

        #navigation li {
            display: block;
            width: 100%;
            line-height: 24px;
        }

        #navigation a {
            text-align: center;
            padding: 0;
            float: none;
        }

    #footerLeft ul {
        font-size: 0.8em;
    }

    img.approved-logo {
        width: 40%;
        bottom: 10px;
        right: 30%;
        left: 30%;
    }

    #home img.montage {
        width: 90%;
        margin-bottom: 80px;
    }

    .image {
        width: 97%;
    }

    .set-height {
        max-height: initial;
    }

    .textbox {
        width: 90%;
    }

    .textarea {
        width: 90%;
    }
}

@media (max-width: 480px) {
    img.approved-logo {
        width: 50%;
        right: 25%;
        left: 25%;
    }
}