/* SYNTAX REMINDERS 
     padding: top, right, bottom, left
     e.g. padding: 5px, 10px, 5px, 10px; 
     margin: top, right, bottom, left
     e.g. margin: 5px, 10px, 5px, 10px; 
*/

/* GENERAL USE */
h3 { font-family: "DejaVu Serif", verdana, sans-serif;
    color: #2e81b4; }
h5 { font-family: "DejaVu Serif", verdana, sans-serif;
    color: #2e81b4; }


/* DESKTOP/LAPTOP CODE (DEFAULT) */

  /* NON PAGE SPECIFIC */ 

    .content-pc {
      display:inline;
    }
    .content-tablet {
      display:none;
    }
    .content-phone {
      display:none;
    }

  /* FOR INDEX.HTML MAIN SITE PAGE */ 

    img.splash-pc {
      height: 84%;
      width: 75%;
    }

    h1.splash-pc { font-family: "DejaVu Serif", verdana, sans-serif;
      color: #2e81b4; font-size: 40px;
    }

    div.index-main-image-flex-pc {
      float: left;
      margin-top: 0px;
      margin-right:5px;
      margin-bottom:5px;
      margin-left:10%;
    }

    div.index-main-image-pc {
      /* width: 650px; */
      width: 450px;
      float: left;
      margin-top: 0px;
      margin-right:5px;
      margin-bottom:5px;
      margin-left:10%;
    }

    div.extras-pc {
      width: 60%;
      margin-left:auto;
      margin-right:auto;
      font-family: verdana, sans-serif;
      font-size: 20px;
    }

    div.social-pc {
      width: 60%;
      margin-left:auto;
      margin-right:auto;
      margin-top: 60px;
      margin-bottom: 40px; 
      font-family: verdana, sans-serif;
      font-size: 20px;
      text-align: center;
    }

    img.facebook-pc {
      width: 30px;
    }

    div.recents-left-pc {
      margin-left:10%;
      margin-right:10px;
      float: left;
      width: 320px;
    }

    div.recents-right-pc {
      font-family: verdana, sans-serif;
      font-size: 18px;
      vertical-align: top;
      text-align: left;
      padding: 5px;
      margin-bottom:220px;
    }

  /* FOR RECENT POST PAGES */

    div.post-header-logo-pc {
      display: inline-block; 
      margin-left:10%;
      margin-top:6px;
      margin-bottom:4px;
      width: 100px; 
      vertical-align: bottom; 
    }

    div.post-header-text-pc {
      display: inline-block;
      margin-left: 12px; 
      width: 300px; 
      margin-bottom:4px;
      vertical-align: bottom; 
      text-align: left;
    }

    div.post-header-home-pc {
      display: inline-block; 
      margin-right:10%; 
      position: absolute;
      right: 13px; 
      top: 80px;
      width: 100px; 
    }

    div.main-image-flex-pc {
      float: left; 
      margin-right:25px;
      margin-bottom:10px; 
      margin-left:10%; 
      text-align: center;
      font-family: verdana, sans-serif;
      font-weight: bold;
      color: #2e81b4;
    }

    div.main-image-pc {
      width: 500px;
      float: left; 
      margin-right:25px;
      margin-bottom:10px; 
      margin-left:10%; 
      text-align: center;
      font-family: verdana, sans-serif;
      font-weight: bold;
      color: #2e81b4;
    }
 
    img.main-image-flex-pc {
      margin-top:0px;
      margin-right:25px; 
      margin-bottom:5px; 
      margin-left:0px;
    }

    img.main-image-pc {
      margin-top:0px;
      margin-right:25px; 
      margin-bottom:5px; 
      margin-left:0px;
      width: 500px;
    }


/* TABLET CODE */
  @media only screen and (max-width: 1024px) {

  /* NON PAGE SPECIFIC */ 

    .content-tablet {
      display:inline;
    }
    .content-pc {
      display:none;
    }
    .content-phone {
      display:none;
    }

  /* FOR INDEX.HTML MAIN SITE PAGE */ 

    img.splash-tablet {
      height: auto;
      width: 100%;
    }

    h1.splash-tablet { font-family: "DejaVu Serif", verdana, sans-serif;
      color: #2e81b4; font-size: 40px;
    }

    div.index-main-image-flex-tablet {
      float: left;
      margin-top: 0px;
      margin-right:10px;
      margin-bottom:5px;
      margin-left:10%;
    }

    div.index-main-image-tablet {
      width: 350px;
      float: left;
      margin-top: 0px;
      margin-right:10px;
      margin-bottom:5px;
      margin-left:10%;
    }

    div.extras-tablet {
      width: 70%;
      margin-left:auto;
      margin-right:auto;
      font-family: verdana, sans-serif;
      font-size: 20px;
    }

    div.social-tablet {
      width: 60%;
      margin-left:auto;
      margin-right:auto;
      margin-top: 60px;
      margin-bottom: 40px; 
      font-family: verdana, sans-serif;
      font-size: 20px;
      text-align: center;
    }

    img.facebook-tablet {
      height: 30px;
    }

    div.recents-left-tablet {
      margin-left:10%;
      margin-right:10px;
      float: left;
      width: 320px;
    }

    div.recents-right-tablet {
      font-family: verdana, sans-serif;
      font-size: 18px;
      vertical-align: top;
      text-align: left;
      padding: 5px;
      margin-right:10%;
      /* bottom margin test tweak   margin-bottom:220px; */
      margin-bottom:200px;
    }

  /* FOR RECENT POST PAGES */

    div.post-header-logo-tablet {
      display: inline-block;
      margin-left:10%;
      margin-top:6px;
      margin-bottom:4px;
      width: 100px; 
      vertical-align: bottom; 
    }

    div.post-header-text-tablet {
      display: inline-block;
      margin-left: 12px; 
      width: 300px; 
      margin-bottom:4px;
      vertical-align: bottom; 
      text-align: left;
    }

    div.post-header-home-tablet {
      display: inline-block;
      margin-right:10%; 
      position: absolute;
      right: 13px; 
      top: 80px;
      width: 100px; 
    }

    div.main-image-flex-tablet {
      float: left; 
      margin-right:25px;
      margin-bottom:10px; 
      margin-left:10%; 
      text-align: center;
      font-family: verdana, sans-serif;
      font-weight: bold;
      color: #2e81b4;
    }

    div.main-image-tablet {
      width: 500px;
      float: left; 
      margin-right:25px;
      margin-bottom:10px; 
      margin-left:10%; 
      text-align: center;
      font-family: verdana, sans-serif;
      font-weight: bold;
      color: #2e81b4;
    }

    img.main-image-flex-tablet {
      margin-top:0px;
      margin-right:25px; 
      margin-bottom:5px; 
      margin-left:0px;
    }

    img.main-image-tablet {
      margin-top:0px;
      margin-right:25px; 
      margin-bottom:5px; 
      margin-left:0px;
      width: 500px;
    }

  }


/* PHONE CODE */
  @media only screen and (max-width: 480px) {

  /* NON PAGE SPECIFIC */ 

    .content-phone {
      display:inline;
    }
    .content-tablet {
      display:none;
    }
    .content-pc {
      display:none;
    }

  /* FOR INDEX.HTML MAIN SITE PAGE */ 

      img.splash-phone {
        height: auto;
        width: 100%;
      }

      h1.splash-phone { font-family: "DejaVu Serif", verdana, sans-serif;
        color: #2e81b4; font-size: 20px;
      }

    div.index-main-image-flex-phone {
      margin-left:auto;
      margin-right:auto;
      margin-top: 0px;
      margin-bottom:5px;
    }

    div.index-main-image-phone {
      width: 300px;
      margin-left:auto;
      margin-right:auto;
      margin-top: 0px;
      margin-bottom:5px;
    }

    div.extras-phone {
      width: 60%;
      margin-left:auto;
      margin-right:auto;
      font-family: verdana, sans-serif;
      font-size: 20px;
      text-align: center;
    }

    div.social-phone {
      width: 60%;
      margin-left:auto;
      margin-right:auto;
      font-family: verdana, sans-serif;
      font-size: 20px;
      text-align: center;
    }

    img.facebook-phone {
      height: 20px;
    }

    div.recents-left-phone {
      width: 300px;
      margin-left:auto;
      margin-right:auto;
      margin-top: 0px;
      margin-bottom:5px;
    }

    div.recents-right-phone {
      font-family: verdana, sans-serif;
      font-size: 18px;
      vertical-align: top;
      margin-left:10%;
      margin-right:10%;
      margin-bottom:10px;
    }

  /* FOR RECENT POST PAGES */

    div.post-header-logo-phone-orig {
      margin-top:6px;
      margin-bottom:0px;
      margin-right:auto;
      margin-left:auto; 
      width: 100px; 
      vertical-align: bottom; 
    }
    div.post-header-logo-phone {
      display: inline-block; 
      margin-left:10%; 
      margin-bottom:0px; 
      width: 50px;
      vertical-align: bottom; 
    }

    div.post-header-text-phone {
      width: 100%; 
      margin-top:0px;
      margin-bottom:60px;
      margin-right:auto;
      margin-left:auto; 
      vertical-align: top; 
      /* text-align: left; */
      text-align: center;
    }

    div.post-header-home-phone-orig {
      width: 100px; 
      margin-right:auto;
      margin-left:auto; 
      margin-bottom:20px;
    }

    div.post-header-home-phone {
      display: inline-block; 
      margin-right:10%; 
      position: absolute;
      right: 13px; 
      top: 27px; 
      width: 100px; 
    }

    div.main-image-flex-phone {
      margin-left:auto;
      margin-right:auto;
      /* margin-right:25px; */
      margin-bottom:10px; 
      text-align: center;
      font-family: verdana, sans-serif;
      font-weight: bold;
      color: #2e81b4;
    }

    div.main-image-phone {
      width: 300px;
      margin-left:auto;
      margin-right:auto;
      /* margin-right:25px; */
      margin-bottom:10px; 
      text-align: center;
      font-family: verdana, sans-serif;
      font-weight: bold;
      color: #2e81b4;
    }

    img.main-image-flex-phone {
      margin-top:0px;
      margin-bottom:10px; 
    }

    img.main-image-phone {
      width: 300px;
      margin-top:0px;
      margin-bottom:10px; 
      /* margin-right:25px; */
      /* margin-left:0px; */
    }

  }


/* 

 NON-DEVICE SPECIFIC SECTION FOR INDEX.HTML MAIN SITE PAGE

*/

/* main site title - index.html */
h1 { font-family: "DejaVu Serif", verdana, sans-serif;
    color: #2e81b4; font-size: 40px;
}
/* index.html top header section */
div.index-header {
    font-family: "DejaVu Serif", verdana, sans-serif;
    font-size: 100%;
    margin-left:auto; 
    margin-right:auto;
}
img.splash {
    height: 84%;
    width: 75%;
}

/* table style top header section */
table.main { font-family: "DejaVu Serif", verdana, sans-serif;
    font-size: 100%;
    border-collapse: collapse;
    margin-left:auto; 
    margin-right:auto;
}

/* index.html featured article/post */
div.index-main-image {
    width: 650px;
    /* shows border of div section */
    /* border:1px solid black; */
    float: left; 
    /* inline margin: style order is: top, right, bottom, left */
    margin-top: 0px;
    margin-left:10%; 
    margin-right:25px;
    margin-bottom:25px; 
}
div.index-main-text {
    /* border:1px solid black; */
    font-family: arial, sans-serif;
    font-size: 25px; 
    margin-left:10%; 
    margin-right:10%;
    padding-top: 2px;
}
/* index.html feaatured post */
h3.featured { font-family: Palatino, "DejaVu Serif", verdana, sans-serif;
    margin-bottom: 0.20em;
    color: #2e81b4; }
h3.featured-notop { font-family: Palatino, "DejaVu Serif", verdana, sans-serif;
    margin-top: 0px;
    margin-bottom: 0.20em;
    color: #2e81b4; }
h5.featured { font-family: Palatino, "DejaVu Serif", verdana, sans-serif;
    margin-top: 0.20em;
    font-size: .85em;
    color: #2e81b4; 
}

div.byline {
    text-align: center;
    font-family: verdana, sans-serif; 
    color: #2e81b4; 
    font-size: 22px;
    font-variant: small-caps;
    margin-bottom:20px; 
}

/* table style featured article index.html */
table.featured {
    width: 80%;
    margin-left:auto; 
    margin-right:auto;
}
td.featured {
    font-family: arial, sans-serif;
    font-size: 25px; 
}
img.featured {
    float: left; 
    margin: 0 25px 25px 0;
    /* to set img size here,  width: 500px;  */
}

/* Extras are used in the index.html featured post AND the recent post pages */
div.extras {
    width: 40%;
    margin-left:auto; 
    margin-right:auto;
    font-family: verdana, sans-serif;
    font-size: 20px;
}
a.extras:link {
    color: #2e81b4;
}
a.extras:hover {
    color: #000000;
}
a.extras:visited {
    color: #2e81b4;
}

/* index.html recent post section */
div.recents-caption {
    margin-left:10%; 
    font-family: verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    /* padding: top, right, bottom, left */
    padding: 0 0 35px 0;
}
div.recents-left {
    margin-left:10%; 
    margin-right:10px; 
    float: left; 
    width: 320px;
}
div.recents-right {
    font-family: verdana, sans-serif;
    font-size: 18px;
    vertical-align: top;
    text-align: left;
    padding: 5px;
    margin-bottom:220px; 
}

/* index.html recent post section - IMAGES */
img.thumb {
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 5px;
    width: 300px;
}
img.thumb:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
img.thumb2 {
    width: 300px;
}
img.thumb2:hover {
    opacity: 0.8;
}

/* index.html social media Links */
a.social:link {
    font-variant: small-caps;
    font-weight: bold;
    font-size: 22px;
    color: #000000;
    text-decoration: none; 
}
a.social:hover {
    color: #2e81b4;
}
a.social:visited {
    color: #000000;
    text-decoration: none; 
}

/* index.html recent post section - STYLE and LINKS */
.smallcapsheading {
    font-family: verdana, sans-serif;
    color: #000000; 
    font-size: 22px;
    font-variant: small-caps;
}
a.recents:link {
    color: #2e81b4;
    text-decoration: none; 
}
a.recents:hover {
    color: #000000;
}
a.recents:visited {
    color: #2e81b4;
    text-decoration: none; 
}

/* table style index.html recent post section */
table.recents {
    width: 80%;
    margin-left:auto; 
    margin-right:auto;
}
th.recents {
    font-family: verdana, sans-serif;
    font-size: 20px;
    text-align: left;
    /* padding: top, right, bottom, left */
    padding: 0 0 35px 0;
}
td.recents-left {
    font-family: verdana, sans-serif;
    font-size: 15px;
    width: 320px;
    text-align: left;
    /* Show border for troubleshooting  border: 5px solid black;   */
}
td.recents-right {
    font-family: verdana, sans-serif;
    font-size: 18px;
    /* width: 70%; */
    vertical-align: top;
    text-align: left;
    padding: 5px;
    /* Show border for troubleshooting  border: 5px solid black;   */
}

/* index.html copyright */
div.copyright {
    text-align: center;
    font-family: verdana, sans-serif;
    font-size: 15px;
    line-height: 150%;
    margin-bottom:20px; 
}



/*

 NON-DEVICE SPECIFIC SECTION FOR RECENT POST PAGES

*/

/* image,text,home header for Recent Post pages */
div.post-header {
    width: 80%;
    margin-left:auto; 
    margin-right:auto;
}
div.post-header-logo {
    display: inline-block;
    margin-left:10%;
    margin-top:6px;
    margin-bottom:4px;
    width: 100px; 
    vertical-align: bottom; 
/*  padding: 5px 5px 0 0; */
}
div.post-header-text {
    display: inline-block;
    margin-left: 12px; 
    width: 300px; 
    margin-bottom:4px;
    vertical-align: bottom; 
    text-align: left;
   /*  padding: 25px 5px 0 0; */
}
div.post-header-home {
    display: inline-block;
    margin-right:10%; 
    position: absolute;
    right: 13px; 
    top: 80px;
    /* margin-bottom:8px; */
    /* vertical-align: bottom; */
    width: 100px; 
    /* margin-left: 625px; */
}
img.header {
    margin: 0 0 0 0;
}
hr.post-header {
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left:auto; 
    margin-right:auto;
    width: 80%;
}
hr.post-header-clear {
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left:auto; 
    margin-right:auto;
    width: 80%;
    clear: both;
}
h3.heading { font-family: "DejaVu Serif", verdana, sans-serif;
    margin-bottom: 0.20em;
    color: #2e81b4; }

/* table style logo image,text,home header for recent post pages */
table.header { font-family: "DejaVu Serif", verdana, sans-serif;
    margin-left:auto; 
    margin-right:auto;
    width: 80%;
}
td.header-left {
    vertical-align: bottom;
    width: 100px; 
    padding: 5px 5px 0 0;
}
td.header-text {
    vertical-align: bottom; 
    text-align: left;
    padding: 25px 5px 0 0;
}
td.header-home {
    vertical-align: bottom;
    width: 100px; 
}

/* Recent Post articles */
div.main-image {
    width: 500px;
    float: left; 
    margin-right:25px;
    margin-bottom:10px; 
    margin-left:10%; 
    text-align: center;
    font-family: verdana, sans-serif;
    font-weight: bold;
    color: #2e81b4;
}
div.main-txt {
    margin-left:10%; 
    margin-right:10%;
    font-family: arial, sans-serif;
    font-size: 25px; 
    /* line-height: 150%; */
}
h3.main-title { font-family: Palatino, "DejaVu Serif", verdana, sans-serif;
    margin-bottom: 0.20em;
    color: #2e81b4;
}
h2.main-title { font-family: Palatino, "DejaVu Serif", verdana, sans-serif;
    margin-bottom: 0.20em;
    color: #2e81b4;
}

/* recent posts footer */
div.footer-home {
    width: 100px; 
    margin-right:auto;
    margin-left:auto; 
}


/* VARIOUS HORIZONTAL LINE DIVIDERS */
hr {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left:auto; 
    margin-right:auto;
    width: 80%;
}
hr.thirty {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left:auto; 
    margin-right:auto;
    width: 30%;
}
hr.forty {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left:auto; 
    margin-right:auto;
    width: 40%;
}
hr.sixty {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left:auto; 
    margin-right:auto;
    width: 60%;
}
hr.seventy {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left:auto; 
    margin-right:auto;
    width: 70%;
}
hr.footer {
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left:auto; 
    margin-right:auto;
    width: 80%;
}

/* EOF */