body {
    background-color: #0d647f;
    margin: 0px;
    padding: 0px;
    font-family: Muli;
}
.clear { clear: both; }
p { margin: 0px;}
#head {
    background-color: #0d647f;
    background-image: url(images/headerBG.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    height: 220px;
    width: 100%;
    float: left;
    display: block;
    color: #ffffff;
    clear: both;
}
#headerWrap {
    width: 1022px;
    height: 220px;
    display: block;
    margin: auto;
}
.titleTop {
    width: 380px;
    float: left;
    margin: 96px 0px 0px 0px;
}
.topImage {
    float: left;
    display: inline;
    margin: 0px 10px 30px 0px;
}
.titleA {
    font-family: Muli;
    font-size: 44px;
    font-weight: 400;
    color: #ffffff;
    display: block;
}
.titleB {
    font-family: Muli;
    font-size: 31px;
    font-weight: 300;
    color: #ffffff;
}
#main {
    margin: auto;
    width: 100%;
    display: block;
    clear: both;
    background-color: #ffffff;
}
#mainInner {
    width: 1002px;
    margin: auto;
    padding: 30px 10px 60px 10px;
}
#main h1 {
    color: #0d647f;
    font-size: 24px;
    margin: 0px 0px 20px 0px;
}
#main p {
    color: #424242;
    font-size: 14px;
    margin: 0px 0px 20px 0px;
}
#main h2 {
    color: #424242;
    font-size: 24px;
    margin: 0px 0px 20px 0px;
}
#bodyInner {
    margin: 30px 10px 30px 10px;
    color: #424242;
}
#footer {
    display: block;
    clear: both;
}
.leftFooter { font-size: 12px; float: left; width: 320px; display: inline; }
.rightFooter { float: right; display: inline; margin-top: 0px; padding-top: 0px; }
.rightFooter li { float: left; display: inline; padding: 0px 5px 10px 5px; }
.rightFooter li a, .rightFooter li a:visited { color: #ffffff; font-size: 12px; text-decoration: none; }
.footerWrap {
    width: 1002px;
    margin: auto;
    padding: 10px;
    color: #ffffff;
}
.profilePicture {
    float: right;
    display: inline;
    width: 300px;
    margin-left: 80px;
    margin-bottom: 15px; 
}
.services ul, .servicesPage ul { padding: 0px; margin: 0px 0px 0px 0px; }
.services li, .servicesPage li { background: url(images/listImage.jpg) no-repeat left center; padding: 6px 5px 6px 40px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0; }
.services a { text-decoration: none; color: #0a4c5b; }
.services { float: left; width: 250px; display: inline; }
.servicesPage { float: left; display: inline; width: 380px; }
.servicesLeft { margin-right: 15px; }

.contentBoxA { font-size: 17px; padding: 10px; background-color: #0d647f; width: 230px; float: left; display: inline; margin: 0px 15px 15px 0px; height: 32px; }
.contentBoxA img { float: left; display: inline; border: 0; }
.contentBoxA a, .contentBoxA a:visited { float: left; display: inline; padding: 2px; text-decoration: none; color: #ffffff; }
a.contentBoxATxt { padding: 8px; }

.leftCol { width: 43%; margin-right: 50px; float: left; display: inline; }
.rightCol { width: 43%; margin-right: 0px; float: left; display: inline; }

#nav { float: right; margin-top: 172px; }
.active { background-image: url(images/activeNav.png); background-repeat: no-repeat; background-position: center bottom; }

.formRow { display: block; clear: both; margin-top: 10px; }
.textType { width: 140px; float: left; }
.textTypeLong { width: 400px; }
.formRow .textInput, .formRow textArea { border: 1px solid #8e8e8e; padding: 3px; width: 270px; font-size: 16px; }
.submitForm { color: #ffffff; background-color: #0d647f; padding: 8px 12px 8px 12px; border: 0px; font-size: 14px; cursor: inherit; }
.formMessage { margin-left: 140px; }

@media screen and (max-width: 1024px) {
    #headerWrap {
        width: 768px;
        height: 220px;
        display: block;
        margin: auto;
    }
    .titleTop {
        width: 380px;
        float: left;
        margin: 96px 0px 0px 0px;
    }
    .footerWrap {
        width: 768px;
        margin: auto;
        padding: 10px;
        color: #ffffff;
    }
    #mainInner {
        width: 748px;
    }
    #nav li { padding: 0px 0px 25px 0px; }
    .services { width: 250px; }
    .profilePicture {
        float: right;
        display: inline;
        width: 220px;
        margin-left: 0px;
    }
}

@media screen and (max-width: 768px) {
    .showNav, .hideNav { padding: 7px; color: #ffffff; text-decoration: none; }
    #nav { float: left; display: inline; width: 100%; text-align: center; background-color: #0d647f; }
    #nav .active { background-image: none; }
    #nav li { padding: 3px 10px 3px 10px; border-top: 1px solid #41859a; }
    #head {
        height: auto;
    }
    #headerWrap {
        width: 100%;
        height: auto;
        display: block;
        margin: auto;
    }
    .topImage {
        float: left;
        display: inline;
        margin: 0px 10px 0px 15px;
    }
    .titleTop {
        width: 320px;
        float: none;
        margin: auto;
        padding: 20px 0px 20px 0px;
    }
    .titleA {
        font-family: Muli;
        font-size: 34px;
        font-weight: 400;
        color: #ffffff;
        display: block;
    }
    .titleB {
        font-family: Muli;
        font-size: 21px;
        font-weight: 300;
        color: #ffffff;
    }
    .footerWrap {
        width: 90%;
        margin: auto;
        padding: 10px;
        color: #ffffff;
    }
    #mainInner {
        width: 90%;
    }
    .profilePicture { float: none; margin-left: 5px; clear: both; display: block; }
    #nav { margin-top: 0px; }
    
    .servicesPage { width: 270px; }
    
    .leftCol { width: 100%; margin-right: 0px; float: left; display: block; clear: both; }
    .rightCol { width: 100%; margin-right: 0px; float: left; display: block; clear: both; }
    
    .leftFooter { font-size: 12px; float: left; width: 100%; display: inline; }
    .rightFooter { float: left; display: inline; margin-top: 0px; padding-top: 0px; padding-left: 0px; margin-left: 0px; }
    .rightFooter li { padding: 0px 10px 0px 0px; }
}