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

/* HOA SELF MANAGEMENT */

body {
        /* background: #c0c0c0; */        /* light gray */
        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: 300%;
           margin-top: 2%;
        }
}
@media screen and (max-width: 600px) {
        .mainheader h1 {
           font-size: 150%;
           margin-top: 3.5%;
        }
}
.mainheader h1 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        text-align: center;
}
@media screen and (min-width: 600px) {
        .mainheader h3 {
           font-size: 150%;
        }
}
@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: -1%;
}

/* NAVIGATION */

@media screen and (min-width: 600px) {
        .hdrnavigation {
           font-weight: bold;
           font-size: 100%;
           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: 2%;
        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;
}

/* PHOTO SHOWCASE */
/* HOME PAGE      */

#showcase {
       width: 90%;
       margin: 1% auto 1% auto;
}
#showcase ul {
}
#showcase li {
        background: none;
        list-style-type: none;
}
#showcase img {
        border: 2px solid navy;
}

/* HOME CONTENT01 */

@media screen and (max-width: 600px) {
   .content01 {
        width: 90%;
        margin-left: 5%;
        margin-top: 3%;
        color: #000080;        /* dark blue */
   }
   .content01 h2 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 150%;
   }
   .content01 ul {
        font-weight: bold;
        font-size: 125%;
        font-family: Arial, sans-serif;
        list-style-type: disc;
        margin-left: 2%;
   }
   .content01 li {
        text-align: left;
        margin-top: 2%;
   }
}

@media screen and (min-width: 600px) {
   .content01 {
        width: 60%;
        margin-left: 19.5%;
        margin-top: 3%;
        color: #000080;        /* dark blue */
   }
   .content01 h2 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 200%;
   }
   .content01 ul {
        font-weight: bold;
        font-size: 150%;
        font-family: Arial, sans-serif;
        list-style-type: disc;
        margin-left: 2.5%;
   }
   .content01 li {
        text-align: left;
        margin-top: 2%;
   }
}

/* SERVICES CONTENT */

@media screen and (max-width: 600px) {
   .servcontent {
        width: 90%;
        color: #000080;        /* dark blue */
        margin: 0% auto 0% auto;
        /*background: #ffffff; */       /* white */
   }
   .servcontent ul.listleft {
        border: 2px solid navy;
   }
   .servcontent ul.listright {
        border: 2px solid navy;
   }
}

@media screen and (min-width: 600px) {
   .servcontent {
        width: 70%;
        color: #000080;        /* dark blue */
        margin: 0% auto 0% auto;
        /*background: #ffffff; */       /* white */
   }
   .servcontent ul.listleft {
        border: 2px solid navy;
        width: 45%;
        float: left;
   }
   .servcontent ul.listright {
        border: 2px solid navy;
        width: 45%;
        float: right;
   }
}
.servcontent p.listhdr {
        font-size: 130%;
        font-family: Arial, sans-serif;
        list-style: none;
        font-weight: bold;
        text-align: center;
}
.servcontent li.border {
        list-style: none;
        margin: -1% 2% 2% -8%;
        border-bottom: 2px solid navy;
}
.servcontent li {
        font-size: 115%;
        font-family: Arial, sans-serif;
        list-style: disc;
        text-align: left;
        padding: 1%;
}

/* THE ART OF SELF MANAGEMENT */

#artofselfmgnt {
        width: 90%;
        margin: 3% auto 0% auto;
        color: #000080;        /* dark blue */
}
#artofselfmgnt p {
        font-family: Arial, sans-serif;
        font-size: 1.25em;
        text-align: left;
}
#artofselfmgnt h3 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 1.5em;
        text-align: justify;
}
#artofselfmgnt ul {
        font-weight: bold;
        font-size: 130%;
        font-family: Arial, sans-serif;
        list-style-type: disc;
        margin-left: 2.5%;
}
#artofselfmgnt li {
        text-align: left;
        margin-top: 1.5%;
}

/* FAQ */

#faqcontent {
        width: 70%;
        margin-left: 13%;
        margin-top: 3%;
        color: #000080;        /* dark blue */
}
#faqcontent p {
        font-family: Arial, sans-serif;
        font-size: 1.25em;
        text-align: left;
}
#faqcontent h2 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 1.35em;
        text-align: left;
}

/* BLOG */

#blogcontent {
        width: 90%;
        margin: 3% auto 0% auto;
        color: #000080;        /* dark blue */
}
#blogcontent p.blogdescrip {
        width: 80%;
        font-family: Arial, sans-serif;
        font-size: 1.25em;
        text-align: left;
        margin: 6% auto 6% auto;
}

/* MISSION */

#missioncontent {
        width: 90%;
        margin: 3% auto 0% auto;
        color: #000080;        /* dark blue */
}
#missioncontent p {
        font-family: Arial, sans-serif;
        font-size: 1.25em;
        text-align: left;
}
#missioncontent h2 {
        font-weight: bold;
        font-family: Arial, sans-serif;
        font-size: 1.35em;
        text-align: justify;
}

/* 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;
        margin-right: 2.5%;
        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.blogcomment {
        text-align: center;
        margin-left: 8%;
        margin-top: 4%;
        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 */     
}