.setup-fonts {
   font-family: 'Droid Serif', Arial, serif;
   font-family: Arial, Helvetica, sans-serif;
   font-family: Georgia, Times New Roman, Times, serif;
   font-size: 11pt;
}
.masthead {
   background: yellow;
   color: black;
   font-weight: bold;
   line-height: 2.2em;
   font-size: 2.8em;
   border-top: 8px solid black;
   border-bottom: 8px solid black;
   padding: 0px 0px 0px 0.5em;
   white-space: nowrap;
   text-overflow: clip;
}
.redhead {
   margin: 1.2em 0.5em 0.6em 0.5em;
   padding: 0px;
   font-size: 16px;
   color: #990000;
   line-height: 22pt;
   font-weight: bold;
}
.courselist {
   margin: 0.5em 0 0 0;
   padding: 0.5em 0.8em 1.8em 0.8em;
   border: 1px solid #CCCCCC;
   background: #EEEEEE;
}
.courselist li {
   padding-top: .25em;
}
.tlbox {
   float: right;
   width: 50%;
   font-size: 2.2em;
   margin-top: 8em;
   margin-left: 1.5em;
   margin-right: 1em;
   border: 3px solid black;
   padding: 0px;
}
.tltitle {
   border-bottom: 2px solid black;
   background: yellow;
   height: 2.2em;
   padding-top: 0.6em;
   margin: 0px;
   text-align: center;
   font-size: 1.25em;
   font-weight: bold;
   color: black;
}
.tl {
   font-size: 120%;
   line-height: 150%;
   padding: 0px .5em;
}
#cchk-widget {
    left: calc (50% - 110px);
    padding-left: 5px;
    line-height: 120%;
    font-size: 18pt important!;
    border: none;
}

.further-training {
   margin: 1.2em 0px 2.5em 0px;
   font-size: 16px;
   padding: 1em 3%;
   border: 5px solid #ccc;
   border-radius: 6px;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
}
.further-training p {
   font-size: 0.88em;
}

.topdiv {
   width: 100%;
   height: auto;
   background: linear-gradient(white 20%,#feff97);
}
.bottomdiv {
   width: 100%;
   background-image: url(../images/skyline.jpg);
   background-repeat: repeat-x;
   background-position: 0px 100%;
   height: 180px;
}
.headshot {
   float: left;
   width: 15%;
   background-size: 90%;
   padding: 1em .25em;
   margin-right: 3.5em;
}
.trainer {
   color: #990000;
   font-weight: bold;
   font-size: 0.75em;
   padding-top: 2em;
   width: 90%;
}
.trainer-section {
   display: block;
   width: 100%;
   position: relative;
   font-size: 0.65em;
}
.rightside-image {
   float: right;
   width: 40%;
   max-height: 30em;
   margin-top: 1em;
   margin-right: 5%;
  -webkit-box-shadow: inset 0 12px 0 rgba(255,255,255,.1), 0 0px 0 rgba(255,255,255,.1);
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}
/* use this with class=rightside-image for better landscape-image positioning */
.rightside-landscape {
   margin-right: 2%;
}

/* tablet-like devices */
@media screen and (orientation: portrait) and (min-device-width: 4.2in) {
div p {
   margin-left: 0.75em;
   margin-right: 0.75em;
}
.tlbox {
   width: 35%;
   min-width: 200px;
   max-width: 4.0in;
   font-size: 1.15em;
}
.trainer-section {
   font-size: 1.5em;
}
.further-training {
   font-size: 1.0vw;
}
.further-training p {
   font-size: 1.2em;
}
}

/* larger tablet or laptop devices */
@media screen and (orientation: landscape) and (min-device-width: 6.0in) {
.tlbox {
   width: 20%;
   min-width: 4.0in;
   max-width: 5.0in;
   font-size: 1.0em;
}
.trainer-section {
   font-size: 1.25em;
}
.further-training {
   font-size: 0.5vw;
}
.further-training p {
   font-size: 1.5em;
}
.headshot {
   float: left;
   width: 10%;
   max-width: 12em;
}
.group img {
   background: black;
   max-width: 20em;
}
/* positioning for portrait-ratio images */
.rightside-image {
   width: 30%;
   margin-top: 3em;
   margin-right: 15%;
  -webkit-box-shadow: inset 0 12px 0 rgba(255,255,255,.1), 0 0px 0 rgba(255,255,255,.1);
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}
/* use this with class=rightside-image for better landscape-image positioning */
.rightside-landscape {
   margin-right: 2%;
}
}