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

/* body and defaults */
body {
    background: "FFF";
    font-family: Roboto, sans-serif;
    margin: 0;
    }
 p {
    margin: 0;
    padding: 0;
    }
 a {
    font-weight: 400;
    color: #992626;
    text-decoration: none; /* underline; */
    }
 a:hover {
    color: #f80;
    }
 span.bold {
    font-weight: 500;
    }
 span.italic {
    font-style: italic;
    font-weight: 100;
    }

/* The negative offset hack, so that when
 one jumps to a within-document link, the
 desired target isn't under the top banner menu.
 Will not be negative when top banner menu is 
 turned off via media queries. */
a.anchor {
  display: block;
  position: relative;
  top: -60px;
}
/* More offset for anchors that appear inside a detail,
  so that the disclosure/summary is in view */
a.anchor-inner {
  display: block;
  position: relative;
  top: -110px;
}

div#menu {
    height: 60px;
    width: 100%;
    line-height: 60px; /* make same as height for vertical center */
    padding-left: 50px;
    padding-right: 30px;
    margin-bottom: 55px;
    background-color: #992626;
    box-shadow: 0px 3px 2px #300; /* horizontal shift, vertical shift, blur, color*/
    -webkit-box-shadow: 0px 3px 2px #300;
    position: fixed;
}
ul#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }
 li, a.no-change {
    float: left;
    font-size: 26px;
    font-weight: 500;
    color: #fff;	
    }
 ul#topmenu {
    float:right;
    margin-right: 200px;
    }
 ul#topmenu li {
    list-style-type:none;
    font-size: 20px;
    color: #fff;
    }
 li a {
    font-weight: 300;
    display: block;
    color: #C48A89;
    text-decoration: none;
    padding-right: 20px;
    padding-left: 20px;
    }
 li a:hover {
    color: #fff;
    }

/* ribbon banner */

div#ribbon-banner {
    display: block;
    position: fixed;
    top: 50px;
    right: -130px;
    width: 400px;
    height: 60px;
    transform:         rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    background-color: #f80;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
    z-index: 1000;
    }
 div#ribbon-banner:hover {
    background-color: #f90;
    }
 a.ribbon {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    } 
 

div#container { 
    max-width: 1100px; /* needed so columns don't resize */
    margin: auto;
    padding: 30px; /* so a narrow page will leave some white space to the left of the left column */
    display:grid;
    grid-template-columns: 1fr 400px;
    grid-template-areas:
       "logo logo"
       "description description"
       "left right";
    column-gap: 40px;
}

img#logo {
    width: 100%; 
}
div#logo {
    width: 712px; /* the width of the logo; this to make it center */
    padding-top: 120px;
    margin: auto;
    grid-area: logo;
}

div#description {
    margin-top: 50px;
    /* margin-bottom: 70px; */
    grid-area: description;
}
p#description {
    font-size: 42px;
    font-weight: 300;
    line-height: 140%;
    color: #000;
    padding: 0;
    text-align: center;
    width: 100%;
}

div#left {
    margin-right: 20px;
    margin-top: 20px;
    grid-area: left;
}
p.left-head {
    font-size: 24px;
    font-weight: 500;
    line-height: 100%;
    margin-bottom: 20px;
}
.left-head::before {
    clear: both;
}
span.left-sublink:before {
    display: block;
    content: "";
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
    }
 p.left-body {
    font-size: 19px;
    font-weight: 300;
    color: #444;
    line-height: 150%;
    margin-bottom: 30px;
    }
 p.left-subtext {
    font-size: 16px;
    font-weight: 300;
    color: #444;
    line-height: 150%;
    margin-bottom: 18px;
    margin-left: 25px;
    }
 p.left-list:before { 
    content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
    }
 p.left-list { /* styled like p.left-subtext */
    font-size: 16px;
    font-weight: 300;
    color: #444;
    line-height: 150%;
    margin-bottom: 6px; 
    padding-left: 0.8em;
    text-indent: -0.8em;
    margin-left: 25px;   
 }
 summary.left-subhead {
    font-size: 24px;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 10px;
    color: #992626;
    outline: none;
    }
 details[open] summary.left-subhead {
    margin-bottom: 10px;
    color: #992626;
    }
 details[open] summary.left-subhead:hover, .left-subhead:hover {
    color: #f80;
    cursor: pointer;
    }
 p.summary {
    margin-bottom: 15px;
    }
 p.left-spacer {
    height: 80px;
    }
 p.left-subspacer {
    height: 20px;
    }
 /* the following two elements are to make headshots circular */
 /* This is not being used currently. */
 div.circular {
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px; 
    background-position: center;
    background: url(anthony_white_background.png) no-repeat;
    background-size: contain;
    }
 div.circular img {
    opacity: 0;
    filter: alpha(opacity=0);
    }
p.bios {
    min-height: 160px;
}
 span.headshot {
    float: left;
    height: 150px;
    width: 120px;
    margin-right: 20px;
    padding-top: 10px;
    }
 span.headshot img {
    height: 150px;
    width:  120px;
    /* width: auto; */
    /* the following for a shadow around an alpha-channeled png 
    -webkit-filter: drop-shadow(0px -2px 5px rgba(0, 0, 0, 0.2) );
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    */
    }
 hr.left {
    border-top: 1px #999 solid;
    margin-top:  30px;
    margin-bottom: 20px;
    width: 90%;
    text-align:right;
 }
 

div#right {
    background-color: #eee; 
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 25px;
    padding-bottom: 35px;
    margin-top: 20px;
    grid-area: right;
}
hr.right {
   border-top: 1px #999 solid;
   margin-top:  30px;
   margin-bottom: 20px;
}
p.right-news-tag {
   text-transform: uppercase;
   color: #333;
   font-size: 12px;
   font-weight: 900;
   margin-bottom: 20px;
   }
p.right-head {
   font-size: 20px;
   font-weight: 300;
   line-height: 150%;
   margin-bottom: 10px;
   }
p.right-body {
   font-size: 16px;
   font-weight: 100;
   line-height: 150%;
   margin-bottom: 10px;
   }
p.right-spacer {
   height: 30px;
   }


/* Footer */

div.footer {
    margin: 40px 0px 0px 0px;
    padding: 40px 0px 50px 0px;
    background-color: #992626;
    width: 100%;
    box-shadow: 0px -3px 2px #300;
 }
 p.bottom {
    color: #C48A89;
    text-align: center;
    font-weight: 100;
    line-height: 100%;
    margin-bottom: 10px;
 }

/* Top banner menu is nice, but starts to break down at narrower
  screen widths. First tighten the space budget by getting
  rid of some padding/marins...*/
@media only screen and (max-width: 1300px) {
    ul#topmenu {
        margin-right: 0px;
        }
    div#menu {
      padding-left: 0px;
      padding-right: 0px;
    }
}

/* As the screen width gets tighter, do away with
 the menu in the top banner entirely. */
@media only screen and (max-width: 1200px) {
    div#menu {
      height: 40px;
      line-height: 40px; /* make same as height for vertical center */
    }
    a.no-change {
      font-size: 18px;
    }
    ul#topmenu {
        visibility: hidden;
    }
    /* Reduce space for top menu */
    div#logo {
        padding-top: 40px;
    } 
  /* And we no longer need to offset anchors as much */
   a.anchor {
    top: -40px;
  } 
}

/* Re-arrange things on smaller screens. */
@media only screen and (max-width: 700px) {  
  div#container {
        grid-template-columns: 1fr;
        grid-template-areas:
           "logo"
           "description"
           "left"
           "right";
    }
    div#right {
        padding-left: 5px;
    	padding-right: 5px;
    }
    div#ribbon-banner {
      display: none;
    }
} 

/* Make div containing logo smaller and smaller
as screen size gets smaller. img will be scaled
accordingly, because it has width: 100% above. */
@media only screen and (max-width: 762px) {
    div#logo {
       width: 600px;
    }
 } 

 @media only screen and (max-width: 662px) { 
    div#logo {
        width: 500px;
    }
}

@media only screen and (max-width: 562px) { 
    a.no-change {
      font-size: 16px;
    }
    div#logo {
       width: 400px; 
    }
 }
 
@media only screen and (max-width: 462px) {  
    a.no-change {
      font-size: 12px;
    }
    div#logo {
       width: 300px; 
    }
 }
 
 @media only screen and (max-width: 362px) {  
    div#logo {
       width: 200px; 
    }
 }

 /* Reduce some font sizes on smaller screens. */
@media only screen and (max-width: 662px) { 
  p#description {
    font-size: 30px;
  }
}