@charset "UTF-8";
/* CSS Document */

/* HOA SELF MANAGEMENT */

body {
        background: #ffffff;              /* white */
        margin: 0px;
        padding: 0px;
        font-size: 1em;
        font-family: Arial,sans-serif;
        width: 100%;
}

/* HEADER */

.mainheader {
        /* background: #c0c0c0; */
        background: #ffffff;
        width: 90%;
        height: 150px;
        margin: 1% 0% 1.5% 4%;
        border: 2px solid navy;
        color: #000080;        /* dark blue */
}
@media screen and (min-width: 600px) {
        .mainheader h1 {
           font-size: 400%;
           margin-top: 1%;
        }
}
@media screen and (max-width: 600px) {
        .mainheader h1 {
           font-size: 150%;
           margin-top: 2.5%;
        }
}
.mainheader h1 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
}
@media screen and (min-width: 600px) {
        .mainheader h3 {
           font-size: 200%;
        }
}
@media screen and (max-width: 600px) {
        .mainheader h3 {
           font-size: 140%;
        }
}
.mainheader h3 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
        margin-top: -2%;
}

/* NAVIGATION */

@media screen and (min-width: 600px) {
        .hdrnavigation {
           font-weight: bold;
           font-size: 125%;
           width: 90%;
           margin: 2% 0% 2% 4%;
           height: 45px;
        }
}
@media screen and (max-width: 600px) {
        .hdrnavigation {
           font-weight: bold;
           font-size: 100%;
           width: 90%;
           margin: 2% 0% 2% 4%;
           height: 58px;
        }
}
.hdrnavigation {
        font-family: Arial, sans-serif;
        color: #708090;          /* slate gray */
        text-align: center;
        background: #c0c0c0;
}
.hdrnavigation ul {
        padding-top: .5%;
}
.hdrnavigation li {
        display: inline;
        padding-right: 10%;
        list-style: none;
}
.hdrnavigation a:link, .ftrnavigation a:active, .ftrnavigation a:visited {
        font-weight: bold;
        color: #000080;        /* dark blue */
        text-decoration: none;
}
.hdrnavigation a:hover {
        font-weight: bold;
        /* color: #000080; */       /* dark blue */
        color: #ffffff;
        text-decoration: none;
}

/* HOME PAGE      */

.imagehdr {
       width: 90%;
       margin: 1% auto 1% auto;
}
.imagehdr img {
        border: 5px solid navy;
}

/* HOME CONTENT */

@media screen and (max-width: 600px) {
   .homecontent01 {
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
        color: #000080;        /* dark blue */
   }
   .homecontent01 p {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 125%;
   }
}

@media screen and (min-width: 600px) {
   .homecontent01 {
        width: 60%;
        margin-left: 19.5%;
        margin-top: 3%;
        color: #000080;        /* dark blue */
   }
   .homecontent01 p {
        font-weight: 500;
        font-family: Arial, sans-serif;
        font-size: 125%;
   }
}

@media screen and (max-width: 600px) {
   .homecontent02 {
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
        color: #000080;        /* dark blue */
   }
   .homecontent02 ul {
        font-weight: bold;
        font-size: 150%;
        font-family: Arial, sans-serif;
        list-style-type: none;
        margin-left: 2.5%;
   }
   .homecontent02 li {
        display: block;
        padding-right: 2%;
        list-style: none;
   }
   .homecontent02 li p.colhdr {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 125%;
   }
   .homecontent02 li p.coldata {
        text-align: left;
        margin-top: 2%;
   }
}

@media screen and (min-width: 600px) {
   .homecontent02 {
        width: 60%;
        margin-left: 19.5%;
        margin-top: 3%;
        color: #000080;        /* dark blue */
   }
   .homecontent02 p {
        font-weight: 500;
        font-family: Arial, sans-serif;
        font-size: 125%;
   }
   .homecontent02 ul {
        font-weight: bold;
        font-size: 150%;
        font-family: Arial, sans-serif;
        list-style-type: none;
        margin-left: 2.5%;
   }
   .homecontent02 li {
        display: block;
        padding-right: 2%;
        list-style: none;
   }
   .homecontent02 li p.colhdr {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 125%;
   }
   .homecontent02 li p.coldata {
        text-align: left;
        margin-top: 2%;
   }
}

/* SERVICES CONTENT */

h3.servicedescrip  {
        font-size: 200%;
        font-family: Arial, sans-serif;
        color: #000080;        /* dark blue */
        list-style: none;
        font-weight: bold;
        text-align: center;
}

@media screen and (max-width: 600px) {
   .servicecontent {
        width: 90%;
        color: #000080;        /* dark blue */
        margin: 0% auto 0% auto;
   }
   .servicecontent ul {
        border: 5px solid navy;
   }
}

@media screen and (min-width: 600px) {
   .servicecontent {
        width: 60%;
        color: #000080;        /* dark blue */
        margin: 0% auto 0% auto;
   }
   .servicecontent ul {
        border: 8px solid navy;
   }
}
.servicecontent li.subhdr01 {
        font-size: 150%;
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #000080;        /* dark blue */
        background: #c0c0c0;
        list-style: none;
        margin-right: 2.5%;
        margin-bottom: 2%;
        margin-top: 2%;
        border: 4px solid navy;
        text-align: center;
}
.servicecontent li.subhdr02 {
        font-size: 120%;
        font-weight: bold;
        font-family: Arial, sans-serif;
        color: #000080;        /* dark blue */
        background: #ffffff;
        list-style: none;
        margin-right: 2.5%;
        border: 2px solid navy;
        text-align: center;
}
.servicecontent li {
        font-size: 115%;
        font-family: Arial, sans-serif;
        list-style: disc;
        text-align: left;
        padding: 1%;
}

/* ABOUT */

.aboutcontent {
        width: 80%;
        margin: 3% auto 0% auto;
        color: #000080;        /* dark blue */
}
.aboutcontent p {
        font-family: Arial, sans-serif;
        font-size: 1.25em;
        text-align: left;
}
.aboutcontent h3 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 2.0em;
        text-align: justify;
}
.aboutcontent h2 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 1.35em;
        text-align: justify;
}
.aboutcontent li {
        font-size: 115%;
        font-family: Arial, sans-serif;
        list-style: disc;
        text-align: left;
}

/* FOOTER */

@media screen and (min-width: 600px) {
        .ftrnavigation {
           margin: 3% auto 5% auto;
           height: 45px;
        }
}
@media screen and (max-width: 600px) {
        .ftrnavigation {
           margin: 3% auto 5% auto;
           height: 58px;
        }
}
.ftrnavigation {
        font-weight: bold;
        font-size: 90%;
        font-family: Arial, sans-serif;
        color: #708090;          /* slate gray */
        text-align: center;
        width: 90%;
        background: #c0c0c0;
}
.ftrnavigation ul {
        padding-top: .5%;
}
.ftrnavigation li {
        display: inline;
        padding-right: 10%;
        list-style: none;
}
.ftrnavigation a:link, .ftrnavigation a:active, .ftrnavigation a:visited {
        font-weight: bold;
        color: #000080;        /* dark blue */
        text-decoration: none;
}
.ftrnavigation a:hover {
        font-weight: bold;
        /* color: #000080; */       /* dark blue */
        color: #ffffff;
        text-decoration: none;
}

p.copyright {
        font-weight: 600;
        font-size: 100%;
        font-family: Arial, sans-serif;
        color: #708090;          /* slate gray */
        text-align: center;
        margin: 0px;
        padding: 4px 0px 20px;
}

/* This id should be placed on a div or break element and should be the final element */
/* before the close of a container that should fully contain a float */

.clearfloat {
        clear: both;
        height: 0px;
        line-height: 0px;
}
@media screen and (max-width: 600px) {
   .callcomment {
        text-align: left;
        margin-top: 2%;
        margin-bottom: 3%;
        margin-left: 8%;
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 120%;
        color: #000080;        /* dark blue */
        width: 90%;
   }
}
@media screen and (min-width: 600px) {
   .callcomment {
        text-align: left;
        margin-top: 2%;
        margin-bottom: 3%;
        margin-left: 10%;
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 150%;
        color: #000080;        /* dark blue */
        width: 80%;
   }
}
p.servcomment {
        text-align: center;
        margin-bottom: 2%;
        margin-left: 10%;
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 150%;
        color: #000080;        /* dark blue */
        width: 80%;
}
p.missioncomment {
        width: 80%;
        margin: 1% auto 2% auto;
        text-align: left;
        font-family: Arial, sans-serif;
        font-size: 150%;
        color: #000080;        /* dark blue */
}