.responsive {
    max-width: 100%;
    height: auto;
}
img.jester {
    max-height: 350px;
}
.centerit {
    display:block;
    margin-right:auto;
    margin-left:auto;
}
.boxit {
    padding:10px;
    border: 3px solid #7A1293;
    border-radius: 10px;
    background-color: #FFFECE;
    width: 70%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 2em;
}
.rightside .boxit {
    width: auto;
}
.boxit p {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    padding: 0;
}
.callout-box {
    margin:20px 40px;
    padding:10px 40px;
    border:2px dotted #7A1293;
    border-radius:10px;
}

h1 {
    color: #7A1293;
    font-size: 2.8em;
    margin-top: 0;
}
h2 {
    font-size: 1.7em;
    margin-bottom: .2em;
}
h3 {
    font-size: 1.3em;
    margin-bottom: .2em;
}
.subh1 {
    font-size:1.8em;
}
body {
    background-color: #FFFECE;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 100%;
    color: black;
    margin: 5px 15px;
    line-height: 1.5;
}
p, ul, ol {
    font-size: 110%;
    margin-top: .5em;
    margin-bottom: .5em;
    padding-bottom: .5em;
}
li {
    padding-top: .4em;
}
a {
    color: #7A1293;
}
div.maincontent {
    max-width: 800px;
}
main {
    background-color: #fff;
    max-width: 800px;
    margin-right:auto;
    margin-left:auto;
    margin-top: 20px;
    padding: 20px;
    border: 2px double #7A1293;
    border-radius: 10px;
}
.topnav ul {
    list-style-type:none;
    font-family: Candara, "Trebuchet MS", sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #7A1293;
    text-align: center;
    padding: 0.25em 0;
    display: inline-flex;
    margin-top:20px;
    margin-bottom: 15px;
}
.topnav li {
    margin-right: 20px;
}
div.topnav {
    border: none; /*1px solid #7A1293;*/
}
/*
.nothome-banner {
    background-image: url("../graphics/CCnameBanner.png");
    height: auto;
} */
table.fees {
    border: 1px solid black;
    border-collapse: collapse;
}
table.fees td, table.fees th {
    border: 1px solid black;
    padding: 5px;
}
table.fees th {
    background-color: #FFFECE;
}
table.fees caption {
    text-align: left;
}
footer {
    background-image: url("../graphics/CCmaskBanner.png");
    background-repeat: repeat-x;
    background-position: bottom;
    width: 100%;
    height: 180px;
    margin-top: 40px;
}
.leftside {
    float:left;
    width:30%;
}
.rightside {
    float:right;
    width:67%;
}
strong.goldborder {
    border-bottom:4px solid goldenrod;
}
.hidden, .offscreen {
    position: absolute;
    border: 0;
    clip: rect(0px, 0px, 0px, 0px);
    overflow: hidden;
    height: 1px;
    margin: -1px;
    padding: 0;
    width: 1px; 
  }
/* @media only screen and (max-width:835px) {
  img.jester {
    max-height: 200px;
  }
} */
@media only screen and (min-width:801px){
    img.responsive {
        max-width: 800px;
    }
}
@media only screen and (max-width:835px){
    div.maincontent {
        width:100%;
    }
    img.jester {
      max-height: 250px;
    }
}
@media only screen and (max-width:725px){
    div.maincontent {
        width:100%;
    }
    img.jester {
      max-height: 220px;
    }
}
@media only screen and (max-width:640px) {
    body {
        /*font-size: 1.1em; */
        line-height: 1.2;
    }
    .topnav ul {
        font-size: 1.2em;
        line-height: 1.3;
        flex-wrap: wrap;
    }
    img.jester {
      max-height: 200px;
    }
    .homepage h1 {
      font-size: 1.8em;
    }
    .subh1 {
      font-size:1.25em;
    }
    .boxit {
      width: auto;
    }
    .boxit p {
      /*font-size: 1em;*/
    }
    .callout-box {
      margin:20px 20px;
      padding:10px 20px;
    }
    footer {
      height: 205px;
    }
}
@media only screen and (max-width:450px) {
  .leftside, .rightside {
    width: auto;
    text-align: center;
  }
  img.jester {
    display: block;
    margin-left: 25%;
    margin-right: auto;
    width: 100%;
  }
  div.boxit {
    /*width: 90%;*/
    width: auto;
  }
  footer {
    height: 230px;
  }
}