body {
    font-family: Georgia, Garamond, "Times New Roman", serif;
    background-color: #003344;      /* Color behind the main window, outside the main frame.*/
    background-image: url(../Image/Wallpaper.png);
}

body p {
    font-size: 0.8em;
    line-height: 1.28;
}

#wrapper {
    width: 960px;
    min-height: 400px;
    background-image:  url(../Image/LeafyVine.png); 
    margin: 0 auto;
    border: 5px solid #dedede;
}

#banner {
    width: 420px;
    height: 120px;
    background-image: url(../Image/HSWGLogo.png);
    background-repeat: no-repeat;
    float:left;
    background-size: 400px 115px;
    background-position: center;
}

#content_area {
    float: left;
    width: 850px;
    margin: 0px 0 20px 30px;
    padding: 10px;
}

div.collage {
    width: 750px;
    height: 770px;
    float:left;
    margin-top: -40px;
    margin-left: 60px;
}

div.picframe {
    width: 200px;
    height: 300px;
    background-image:  url(../Image/FrameGrayDavid.png); 
    position: relative;
    animation-name: floatframe;
    animation-duration: 40s;
    animation-iteration-count: infinite;
}

@keyframes floatframe {
      0% {background-image: url(../Image/FrameDavid.png); left:70px; top:200px;} /*David, Color 1 87 142*/
      5% {background-image: url(../Image/FrameDavid.png); left:70px; top:200px;} /*David*/
      10% {background-image: url(../Image/FrameSusan.png); left:590px; top:465px;} /*Susan*/
      17% {background-image: url(../Image/FrameSusan.png); left:590px; top:465px;} /*Susan*/
      22% {background-image: url(../Image/FrameNorma.png); left:275px; top:-85px;} /*Norma*/
      28% {background-image: url(../Image/FrameNorma.png); left:275px; top:-85px;} /*Norma*/
      33% {background-image: url(../Image/FrameKathryn.png); left:600px; top:40px;} /*Kathryn*/
      39% {background-image: url(../Image/FrameKathryn.png); left:600px; top:40px;} /*Kathryn*/
      44% {background-image: url(../Image/FrameLewis.png); left:640px; top:250px;} /*Lewis*/
      50% {background-image: url(../Image/FrameLewis.png); left:640px; top:250px;} /*Lewis*/
      55% {background-image: url(../Image/FrameKate.png); left:145px; top:-10px;} /*Kate*/
      61% {background-image: url(../Image/FrameKate.png); left:145px; top:-10px;} /*Kate*/
      66% {background-image: url(../Image/FrameJane.png); left:440px; top:-85px;} /*Jane*/
      72% {background-image: url(../Image/FrameJane.png); left:440px; top:-85px;} /*Jane*/
      77% {background-image: url(../Image/FrameCarla.png); left:120px; top:405px;} /*Carla*/
      83% {background-image: url(../Image/FrameCarla.png); left:120px; top:405px;} /*Carla*/
      87% {background-image: url(../Image/FrameKen.png); left:350px; top:150px;} /*Ken*/
      96% {background-image: url(../Image/FrameKen.png); left:350px; top:150px;} /*Ken*/
      100% {background-image: url(../Image/FrameDavid.png); left:70px; top:200px;} /*David*/
}

div.bcoveranth {
    width: 720px;
    height: 880px;
    background-image: url(../Image/HSWGGreenBackground.png);  /* Use Leafy if avail. */
    background-repeat: no-repeat;
    box-shadow: 7px 7px #b2baa2;
    float:left;
    margin-left: 70px;
}

div.textanth {
    width: 670px;
    box-sizing: border-box;  /* Suppresses side margins being added to width */
    height: 760px;
    float:left;
    margin-left: 0px;  /* Placeholder in case needed */
    padding: 40px 0px 40px 50px;
    text-align: justify;
}

div.bcoverpunk {
    width: 720px;
    height: 1110px;
    background-image: url(../Image/HSWGPunkBoxBackground.png);
    background-repeat: no-repeat;
    box-shadow: 7px 7px #777;
    float:left;
    margin: 30px 0px 0px 70px;
}

div.textpunk01 {
    width: 600px;
    box-sizing: border-box;  /* Suppresses side margins being added to width */
    height: 300px;
    float: left;
    margin-left: 0px;  /* Placeholder in case needed */
    padding: 160px 0px 40px 125px;
    text-align: justify;
}

div.textpunk02 {
    width: 600px;
    box-sizing: border-box;  /* Suppresses side margins being added to width */
    height: 300px;
    float: left;
    margin-left: 0px;  /* Placeholder in case needed */
    padding: 310px 0px 40px 125px;
    text-align: justify;
}

div.booklinks {
    width: 700px;
    height: 400px;
    float:left;
    margin-left: 120px;
}

div.cont {
    text-align: center;
    font-size: 24px;
}

div.extlinks {
    width: 700px;
    height: 400px;
    float:left;
    margin-left: 110px;
    column-count: 2;
}

/* Placeholder for styling any additional notes below Ext Links */
div.elnotes {
    float:left;
    margin-left: 110px;
}

footer {
    clear: both;
    width: auto;
      height: 90px;
    padding: 5px;
    text-align: center;
    color: #999;    /* Color of the footer text. */
    text-shadow: none;
    background-color: #333;   /* Color of the footer background. */
    background-image: url(../Image/FooterBackground.png);
}

/*Sets basic properties for Nav bar.*/
.nav-list {
    height: 50px;
    margin-top: 0px;
    padding: 25px 30px 0px 0px;
    text-shadow: none;
}

/*Sets default (normal) appearance for Nav elements.*/
.nav-list a {
    font-size: 16px;
    width: 120px;
    padding: 10px 15px 10px 15px;
    text-decoration: none;
    color: #325560;
}

/* N O T E: 
       a:hover MUST come after a:link and a:visited in the 
           CSS definition in order to be effective! 
       a:active MUST come after a:hover in the 
           CSS definition in order to be effective!
       Pseudo-class names are not case-sensitive.  */

/*Highlights Nav links fore- and background colors upon hovering.*/
.nav-list a:hover {
    color: #444;
    background-color: #ccc;
    height: 70px;
}

/*Highlights current Nav link a different background color.*/
.nav-list a:active {
    color: #eee; 
    background-color: #325560;
    text-decoration: none;
}

/*Places Nav bar to far right, less padding and margin.*/
span.right {
  float: right;
}

h1 {
    font-size: 40px;
    color: #383930;
    text-shadow: 2px 2px #989990;
    font-weight: bold;
    text-align: center;
}

h1.idx {
    font-family: Georgia, Garamond, "Times New Roman", serif;
    font-size: 33px;
    font-weight: normal;
    color: #111;
    text-shadow: 0px 1px #111;
    text-align: left;
    margin-top: -15px;
    margin-left: 90px;
}

h2 {
    font-size: 1.4em;  /*    22px/16 = 1.4em */
    font-weight: bold;
    text-align: center;
}

h2.anth {
    color: #383930;
}

h2.punk {
    color: #f9f9f9;
    padding-top: 20px;
}

.p26 {
    margin: 20px 20px 15px 40px;
    font-size: 26px;
}

.p28 {
    margin: 20px 20px 20px 120px;
    font-size: 28px;
    color: #33c;
}

.p20 {
    margin: 20px 20px 30px 40px;
    font-size: 25px;
    text-align: center;
}

p.grntxt {
    font-size: 1.0em;  /*    16px/16 = 1.0em */
    color: #383930;
    font-weight: bold;
}

p.grnital {
    font-size: 0.9em;  /*    14px/16 = 0.9em */
    color: #383930;
    font-style: italic;
    font-weight: bold;
}

p.grntxtrt {
    font-size: 1.0em;  /*    16px/16 = 1.0em */
    color: #383930;
    text-align: right;
    font-weight: bold;    
}

p.grntilde {
    font-size: 1.2em;  /*    19px/16 = 1.2em */
    color: #383930;
    text-align: center;
    font-weight: bold;
    margin-top: -10px;
}

p.whttxt {
    font-size: 1.0em;  /*    16px/16 = 1.0em */
    color: #f9f9f9;
    font-weight: bold;
}

p.whtital {
    font-size: 0.8em;  /*    13px/16 = 0.8em */
    color: #f9f9f9;
    font-style: italic;
    font-weight: bold;
    margin: 16px 0px -10px 0px;
}

p.whttextrt {
    font-size: 0.9em;  /*    14px/16 = 0.9em */
    color: #f9f9f9;
    text-align: right;
    font-weight: bold;
}

p.exlnk {
    padding: 0px 0px 10px 0px;
    margin: 0px;
}

td.authorname {
    width: 150px;
    height: auto;
    font-size: 26px;
    color: #333;
    text-align: center;
    /*font-weight: bold;*/
}

td.authorpic {
    width: 252px;
    height: 372px;
    padding: 10px;
    /*font-weight: bold;*/
}

td.authorbio {
    width: 450px;
    height: auto;
    font-size: 18px;
    color: #333;
    text-align: justify;
    padding: 0px 10px;
    /*font-weight: bold;*/
}

a.bkcover {
    text-decoration: none;
}

a.weblnk {
    font-size: 20px;
    font-family: calibri, sans-serif;
    color: #114466;
    text-decoration: underline rgba(50, 100, 140, 0.6) 4%;
}