html {
   height: 100%;
}
body {
   height: 100%;
   background-color: #fff;
   font-family: Berlin Sans,verdana;
   color:#000000;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
h1 {
   color:#000;
   font-size:250%;
   font-weight:bold;
   padding:4px 0 12px 0;
}
h1.mat {
   font-family: Matisse ITC;
   color:#00B050;
   padding:4px 0 12px 0;
}
h1.h1jokerman {
   font-family: jokerman;
}
h1.H1miro {
   font-family: miro;
}
h2 {
   color:#000;
   padding:2px 0 0 0;
   margin 0;
}
h2.h2jokerman {
   font-family: jokerman;
}
h3 {
   padding:0;
}
h4.smallh4{
   font-size:100%;
}
h4.agp{
   font-family: Adobe Garamond Pro;
   font-size:200%;
}
.agp{
   font-family: Adobe Garamond Pro;
   font-size:130%;
}

ul{ list-style-position: outside;}
ol{}
TD{font-weight:normal;}
LI{ list-style-position: outside;word-break: break-all}
A:link { text-decoration:none; color:#1f9393;}
A:active { text-decoration:none; color:#1f9393;}
A:visited { text-decoration:none; color:#cf342f;}
.white { color:#fff;}
A.white:hover { text-decoration:none; color:#fff;}
A.white:link { text-decoration:none; color:#fff;}
A.white:active { text-decoration:none; color:#fff;}
A.white:visited { text-decoration:none; color:#fff;}
.isistable {background-color:#eee;padding:5px 10px 5px 10px;width:97%;margin:4px auto 8px auto;}
.isistablewhite {background-color:#fff;padding:5px 10px 5px 10px;width:97%;margin:4px auto 8px auto;}

.threecolumn {-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; vertical-align: top;}


.slidingDiv {
    display: block;
    position: relative;
    z-index: 50;
    background-color: #000;
    padding: 8px;
    margin: 0;
    -moz-box-shadow: 0 4px 4px -0.125em rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 4px 4px -0.125em rgba(0,0,0,0.5);
    box-shadow: 0 4px 4px -0.125em rgba(0,0,0,0.5);
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexitem {
    flex: 1;
}
.flexgrow2 {
    flex-grow: 2;
}
.flexmargin8 {
  margin: 0 8px 0 0;
}
.sidebar {
    width:25%;
    margin:2px;
    padding:8px;
    background-color:#cfe8e8;
    word-break: overflow-wrap;
}
.pad8 {
    padding: 8px;
}
.margin0880 {
    margin: 0 8px 8px 0;
}
.margin0088 {
    margin: 0 0 8px 8px;
}
.margin8080 {
    margin: 8px 0 8px 0;
}
.margin0800  {
    margin: 0 8px 0 0;
}
.floatright {
    float: right;
}
.floatleft {
    float: left;
}
.block {
    display:block;
    overflow:hidden;
}
.clearer {
    clear: both;
    height: 0;
}
.lightgrey {
    background-color: #EEE;
}

.width120 {
    width:120px;
}
.width200 {
    width: 200px;
}

.commentTextArea {
  width:400px;
  height:100px;
  outline: none;
}
.commentTextBox {
  width:400px;
}
.commentLabel {
  width: 200px;
  margin: 0 8px 0 0;
  text-align:right;
}
.doshow400 {
    display: none;
    }






.pad4left {
    display: block;
    overflow: hidden;
    padding: 0.25em;
    margin: 0.5em 0.5em 0.5em 0em;
    float: left;
}
.floatLeft {display:inline;float:left;margin:0px 15px 5px 5px;}
.floatRight {display:inline;float:right;margin:0px 5px 5px 15px;}







@media(max-width: 767px){    /* sidebar goes horizontal at 767px */
.flexrow {
    display: flex;
    flex-direction: column;
}
.flex2 {
    flex-grow: 1;
}
.sidebar {
    width:100%;
    margin:2px;
    padding:4px;
    background-color:#cfe8e8;
    word-break:normal;
}
.commentLabel {
  width: 200px;
  margin: 0 8px 0 0;
  text-align:left;
}
}



@media(max-width: 600px){    /* sidebar goes horizontal at 767px */
    .expand400 {
    max-width: 70%;
    float: none;
    }
}



@media(max-width: 464px){
    .expand400 {
    max-width: 100%;
    float: none;
    }
    img.expand400 {
    max-width: 100%;
    }
    .nodisplay400 {
    display:none;
    }
    .dontshow400 {
    display: none;
    }
    .doshow400 {
    display: block;
    }
}