body,table,td,p,div,tr{
font-family:Arial;font-size:1em
}
td.tabhead{
font-size:1.3em;font-weight:bold
}
div.footer{
font-size:1em;font-family:Arial
}
div.menu{
font-size:1.1em;font-family:Arial
}
a.ilink{
font-weight:bold
}
.small{
font-size:1.1em
}
h2,.box-title{
font-size:1.1em;
font-weight:bold;
font-family:Arial;
padding:3px;
background-color:#ADF;
border:1px solid #B6D7CE;
-moz-border-radius:2px;
background-image:url('/images/hea_b.png');
border-bottom:1px solid #96B7AE;
border-right:1px solid #96B7AE;
}
.header2{
font-size:1.1em;
font-weight:bold;
font-family:Arial;
padding:0.1em;
padding-left:0.7em !important;
background-color:#FFFFD0;
border-top:1px solid #C0C0B0;
border-bottom:1px solid #AA9;
border-radius:4px;
}
.header1{
font-size:1.1em;
font-weight:bold;
font-family:Arial;
padding:1px;
background-color:#FEB;
border-bottom:1px solid #773;
margin:auto;
}
.header3{
font-size:1em;
font-weight:bold;
font-family:Arial;
padding:2px;
background-color:#ADF;
border:1px solid #B6D7CE;
-moz-border-radius:2px;
background-image:url('/images/hea_b.png');
}
.box1{
background-color:#FFD;
border:1px solid black;
border-top:0px solid black;
padding:5px;
margin:auto;
}

.box-title-red{
font-size:1.3em;
font-weight:bold;
font-family:Arial;
padding:3px;
background-color:#FCC;
border:1px solid #000;
margin:auto;
}
.box-title-green{
font-size:1.3em;
font-weight:bold;
font-family:Arial;
padding:3px;
background-color:#CFC;
border:1px solid #000;
margin:auto;
}
.box-title-cyan{
font-size:1.3em;
font-weight:bold;
font-family:Arial;
padding:3px;
background-color:#6EF;
border:1px solid #000;
margin:auto;
}

.box-gray{
background-color:#EEE;
border:1px solid black;
border-top:0px solid black;
padding:5px;
margin:auto;
}

.box-gray-full{
background-color:#EEE;
border:1px solid black;
padding:5px;
margin:auto;
}

.box-title-green-small{
font-size:1.1em;
font-weight:bold;
font-family:Arial;
padding:3px;
background-color:#CFC;
border:1px solid #000;
margin:auto;
}

.log{
font-size:8pt;
font-weight:bold;
font-family:Tahoma,Arial;
margin:0px;
padding-left:10px;
padding-bottom:0px;
padding-top:0px;
padding-right:0px;
color:#377;
}

.generalInfoContent{
font-size:0.9em;
padding-left:10px;
padding-top:5px;
}

.hlink{text-decoration:none}
a.hlink:hover{text-decoration:underline}

.tshwanedje{
font-size:0.9em;
margin:1px;
font-size:0.9em;
padding:10px;
border:1px solid #676767;
font-family:Arial;
-moz-border-radius:5px;
background-color:#F3FFF3
}
.tshwanedje:hover{
background-color:#EBFFEB;
border:1px solid green
}

div.softtable{display:table;}
div.softtable_row{display:table-row;}
div.softtable_cell{display:table-cell;}

@media only screen and (max-device-width: 480px){
img{max-width:100% !important; padding:0 !important;}
table,td,tr{max-width:100% !important;}

div.softtable{display:block;}
div.softtable_row{display:block;}
div.softtable_cell{display:block;}

blockquote{margin-left:10px !important;margin-right:0 !important;}

/*otherwise tap targets too close together*/
div.footer{line-height:150% !important;}

/*dj2016-10 need this for mobile-friendliness for for things like noun class table - rotate 90 degrees so user can view whole table .. this isn't perfect/ideal yet */
div.bigtable{transform:rotate(90deg) !important;writing-mode: lr-tb; zoom:0.8;}
}