﻿/* DEFAULTS----------------------------------------------------------*/
.body {
    background-color: transparent;
}

.content {
    padding: 5px 10px 5px 10px;
}

.mainContent {
    /*display: inline-block;*/
    margin: 10px auto 10px auto;
    padding: 15px 15px 15px 15px;
    background-color: #ffffff;
    text-align: left;
    line-height: 30px;
    /*font-size: 13px; */
    /*box-shadow: 0px 5px 10px #555555, 0px -1px 10px #555555;     box-shadow: 2px 3px 2px #555555, -2px 3px 2px #555555;*/
    vertical-align: top;
    border-radius: 5px;
}

    .mainContent .pageTitle {
        text-align: center;
        color: Black;
        font-weight: bold;
        font-size: 24px;
        width: 100%;
        margin-bottom: 10px auto auto 10px;
    }


    .mainContent .title {
        width: 100%;
        display: block;
        background-color: #FFFFFF;
        border-bottom: #CCCCCC 1px dotted;
        color: #000000;
        font-size: 20px;
        text-align: left;
    }

    .mainContent .content {
        width: 100%;
        display: block;
        /*line-height: 24px;*/
        color: #666666;
        /*font-size: 12px;*/
        text-align: justify;
        border: none;
    }


        .mainContent .content a:hover {
            background-color: #286090;
        }

.contactUsForm {
    width: 47%;
    display: inline-block;
    margin: 15px 1px 0px 15px;
    padding-left: 10px;
    text-align: left;
    vertical-align: top;
    border-right: 1px solid Silver;
}

    .contactUsForm .formLabel {
        margin-top: 10px;
        display: inline-block;
        width: 20%;
        text-align: left;
        vertical-align: top;
        clear: left;
    }

    .contactUsForm .formField {
        margin-top: 10px;
        display: inline-block;
        width: 70%;
        text-align: left;
        padding-left: 0px;
        clear: right;
    }

        .contactUsForm .formField input, .contactUsForm .formField textarea {
            width: 100%;
        }

    .contactUsForm .formSubmit {
        margin: 10px auto 5px auto;
        width: 50%;
        text-align: center;
    }

.contactUsInfo {
    width: 100%;
    display: inline-block;
    margin: 30px 1px 20px 10px;
    background-color: #6BC8E7;
    text-align: center;
    box-shadow: 0px 5px 10px #ababab, 0px -1px 10px #ababab;
    vertical-align: top;
    min-height: 270px;
}

    .contactUsInfo .title, .contactUsForm .title {
        margin: 10px 0px 15px 0px;
        font-weight: bold;
    }

    .contactUsInfo .phone, .contactUsInfo .email, .contactUsInfo .mailAddress {
        width: 70%;
        margin: 0px auto 0px auto;
        padding-top: 7px;
        padding-bottom: 7px;
        text-align: right;
        font-size: 15px;
        border-bottom: 1px dotted black;
    }

    .contactUsInfo .phone {
        background-image: url(/images/mobile_phone.png);
        background-size: 25px auto;
        background-repeat: no-repeat;
        background-position: 50px center;
    }

    .contactUsInfo .email {
        background-image: url(/images/email.png);
        background-size: 25px auto;
        background-repeat: no-repeat;
        background-position: 50px center;
    }

        .contactUsInfo .email A:hover {
            border-bottom: 1px dashed black;
        }

    .contactUsInfo .mailAddress {
        background-image: url(/images/Castle1.png);
        background-size: 150px auto;
        background-repeat: no-repeat;
        background-position: left bottom;
    }

    .contactUsInfo .phone {
        margin-top: 25px;
    }

.resellerCard {
    min-height: 175px;
}

label.error {
    display: block;
    color: Red;
}

.googleMaps {
    width: 100%;
    margin-left: 10px;
    min-height: 300px;
}

@media screen and (max-width:1024px) {
    .contactUsForm {
        border-right: none;
        width: 100%;
        text-align: left;
    }

    .contactUsInfo {
        /*min-width: 420px;*/
        width: 90%;
        margin-left: 1px;
    }

        .contactUsInfo .phone, .contactUsInfo .email, .contactUsInfo .mailAddress {
            width: 90%;
        }

    .googleMaps {
        width: 90%;
        margin-left: 0px;
    }
}

@media screen and (max-width:500px) {
    .contactUsInfo .mailAddress {
        background-size: 150px auto;
        background-position: left middle;
    }

    .contactUsForm .formSubmit {
        width: 100%;
    }
}
