* {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 20px;
}

html
{
    background-color: #ffebcc;
}

body
{
     margin: 0;
}

*:focus{outline: none;}

p
{
    color: black;
    font-size: 100%;
}

p.alert {
    text-align: center;
    max-width:400px;
    float: center;
    margin: auto;
}


h1 {
    text-align: center;
    color: #E32E12;
    font-size: 200%;

}

h2
{
   text-align: left;
   color: #E32E12;
   font-size: 150%;
}

h2.slogan {
    text-align: center;
    font-style: italic;
    max-width:570px;
    margin: auto;

}


h3
{
    text-align: left;
    color: #E32E12;
    font-size: 120%;
}

h3.alert
{
    text-align: center;
}

ul
{
   list-style-type: disc;
}
ul.nobullets
{
    list-style-type:none;
}

li
{
  padding-bottom: 12px;
  color: black;
}

table.list{
    width: 100%;
    border-spacing:0;
    border: solid black;
    margin: auto;
}

table.buttonlist{
    width: 100%;
    border-spacing:0;
    border: solid black;
    margin: auto;
}

th.list{
    width: auto;
    padding: 2px;
    border: 1px solid black;
    
    background-color: black;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

td.list{
    width: auto;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    color: black;
    text-align: left;
    text-decoration: none;
}

td.belt{
    width: auto;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    color: black;
    text-align: left;
    text-decoration: none;
    
    background-repeat: no-repeat;
    background-position: right center;
    background-origin: content-box;
    background-size: contain;
}

td.belt[value*="white"]{background-image: url(/belt10.png);}
td.belt[value*="yellow"]{background-image: url(/belt09.png);}
td.belt[value*="orange"]{background-image: url(/belt08.png);}
td.belt[value*="green"]{background-image: url(/belt07.png);}
td.belt[value*="blue"]{background-image: url(/belt06.png);}
td.belt[value*="purple"]{background-image: url(/belt05.png);}
td.belt[value*="red"]{background-image: url(/belt04.png);}
td.belt[value*="brown"]{background-image: url(/belt03.png);}
td.belt[value*="black"]{background-image: url(/belt00.png);}


.topnav {
    overflow: hidden;
    background-color: black;
}

.topnav ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;

}

.topnav li
{
    float: left;
    display:inline;
    padding: 0;
    margin: 0;
}

.topnav img
{
  display:none;
}

.topnav a {
    float: left;
    display:block;
    color: white;
    font-weight: bold;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.topnav a:hover:not(.active){
    background-color: cornflowerblue;
    color: black;
}

.topnav a.active {background-color: #E32E12;}

img.can-hide {display: block;}

img.karateka {
    display: block;
    width:115px;
    height:200px;
    float: right;
    margin: 8px;

}

img.belt {
    display: block;
    width:25%;
    height:auto;
    float: right;
    margin: 1px;
 }

img.blogpic {
    padding: 4px;
    height: auto;
    width: 40%;
    max-width: 200px;
    float:right;
}

.topnav .icon {display: none;}

@media screen and (max-width: 600px){
    img.can-hide {display: none;}
    img.karateka {display: none;}
  
td.belt{
       font-size: 70%;
        word-break: break-all;
    }
    td.list {
        font-size: 70%;
        word-break: break-all;
   }

    th.list {
        font-size: 70%;
        word-break: break-all;
    }
    
    input.listbutton {
        font-size: 70%;
        font-weight: normal;
        padding:1px 1px;
        border-radius: 2px;

    }

    
td.belt[value*="white"]{background-image: none;}
td.belt[value*="yellow"]{background-image: none;}
td.belt[value*="orange"]{background-image: none;}
td.belt[value*="green"]{background-image: none;}
td.belt[value*="blue"]{background-image: none;}
td.belt[value*="purple"]{background-image: none;}
td.belt[value*="red"]{background-image: none;}
td.belt[value*="brown"]{background-image: none;}
td.belt[value*="black"]{background-image: none;}
td.belt[value*="Birthday"]{background-image: none;}

input[type=button], input[type=submit], input[type=reset] {
    width: 100%;
}

}


@media screen and (max-width: 895px) {
    .topnav li:not(:first-child) {display: none;}
    /*.topnav a:not(.active) {display: none;}
     .topnav li {display: none;} */
    .topnav a.icon {
        display: block;
        width: 23px;
        height: 23px;
        text-align: center;
}


.topnav.responsive {position: relative;}
/*    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
*/
    .topnav img
    {
        float: right;
        display:block;
        padding: 2px;
        height: 50px;
        width: auto;

    }

    
    .topnav.responsive li {
        float: none;
        display: block;
        text-align: left;
    }
        
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

.topnav.responsive a.icon {
    display: block;
    width: 23px;
    height: 23px;
    text-align: center;
}

}

img.logo {
    display: block;
    margin: auto;
    height: auto;
    width: auto;
    max-width:60%;
}

form{
    float: center;
    margin: auto;
    max-width:500px;
    width: auto;
    padding: 12px;
    border: 4px solid black;
    border-radius: 12px;
    border-spacing: 3px;
    background-color: #E32E12;
}

form.list{
    float: center;
    margin: auto;
    max-width:100%;
    width: auto;
    padding: 12px;
    border: 4px solid black;
    border-radius: 12px;
    border-spacing: 3px;
    background-color: #E32E12;
}

div.fields{
    width: auto;
    margin: 3px;
 }


label {
    text-align:left;
    margin: 0px, 8px;
    padding: auto;
    color: white;
    font-weight: bold;
}

input[type=button], input[type=submit], input[type=reset] {
    margin: 8px 8px 0px 0px;
    padding:8px 30px;
  /*  float: left; */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    background: black;
    border: none;
    border-radius: 12px;
   -webkit-appearance: none;
    cursor: pointer;
}

button {
    float: center;
    margin: 8px 8px 0px 0px;
    padding:8px 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    background: black;
    border: none;
    border-radius: 12px;
    -webkit-appearance: none;
    cursor: pointer;
}

input[type=button]:focus, input[type=submit]:focus, input[type=reset]:focus, button:focus {
    background-color: cornflowerblue;
    color: black;
 }

input[type=text], input[type=password], select, textarea {
    width: 100%;
    height: auto;
    border:none;
    border-bottom: 1px solid grey;
    border-radius: 0;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    resize: vertical;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;

}

input[type=file] {
    width: 100%;
    height: auto;
    border:none;
    border-radius: 0;
    margin: auto;
    text-decoration: none;
}


input[type=file]::-webkit-file-upload-button {
    margin: 2px;
    padding:4px 8px;
    text-align: center;
    text-decoration: none;
    color: white;
    background: black;
    border: none;
    border-radius: 8px;
    -webkit-appearance: none;
    cursor: pointer;
}

input.listbutton {
    margin: auto;
    padding:4px 8px;
    text-align: center;
    text-decoration: none;
    color: white;
    background: black;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
}

input.listbutton:disabled
{
    background-color: grey;
    color: black;
    cursor: default;
}


input[type="text"]:disabled, select:disabled, textarea:disabled
{
    opacity:1;
  color: black;
  -webkit-text-fill-color: black;
     background-color: white;
}

input:focus, select:focus, textarea:focus, button:focus, .topnav a:focus
{
    background-color: cornflowerblue;
    color: black;
}

input[type="checkbox"]:focus + label {
    background-color: cornflowerblue;
    color: black;
}

input[type="checkbox"] + label{
    color: black;
    font-weight: normal;
    cursor: pointer;
}

div.graphback{
    background-color: white;
    padding: 4px;
    margin: 0;
 
    height: auto;
    border:none;
}

div.graphbar {
    background-color: black;
    height: auto;
    border-radius: 4px;
   text-align: center;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

div.fileback{
    background-color: white;
    padding: 0;
    margin: 0;
    
    height: auto;
    border:none;
}

div.textblock{
    padding: 8px;
    display: table-cell;
}

div.karateka{
     display: table-cell;
     float:left;
}

div.texttable {
    max-width:680px;
    margin: auto;
}

div.blog {
    display: table-row;
}

div.karatekalist{
    max-width:auto;
    width: auto;
    margin: 3px;
}

div.ruler
{
    border: 0;
    border-bottom: 2px solid lightgrey;
    width: 100%;
    margin: 16px 0px;
}

span.tab { margin-left: 1em;}
span.tab2 { margin-left: 2em;}


div.filter-button
{
    text-align:center;
}

button.filter-button
{
    padding:4px;
  display:inline;
  float: none;
  margin: 4px;

    width: 140px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #E32E12;
    border: none;
    border-radius: 8px;
    cursor: pointer;
 }

button.filter-button:focus
{
    background-color: cornflowerblue;
    color: black;
}

input.belt
{
background-repeat: no-repeat;
background-position: right center;
background-origin: content-box;
background-size: 80px 25px;
}

input.belt[value*="white"]{background-image: url(/belt10.png);}
input.belt[value*="yellow"]{background-image: url(/belt09.png);}
input.belt[value*="orange"]{background-image: url(/belt08.png);}
input.belt[value*="green"]{background-image: url(/belt07.png);}
input.belt[value*="blue"]{background-image: url(/belt06.png);}
input.belt[value*="purple"]{background-image: url(/belt05.png);}
input.belt[value*="red"]{background-image: url(/belt04.png);}
input.belt[value*="brown"]{background-image: url(/belt03.png);}
input.belt[value*="black"]{background-image: url(/belt00.png);}

/* Print Styles */

@media print {
  
    button {display: none;}
    body {background-image: none;}
    .topnav {display: none;}
    form{border: none;}
    form.list{border: none;}

   * {
        font-family: Arial, Helvetica, sans-serif;
        color: black;
    }

   html
   {
       background-color: white;
   }

   h1,h2,h3{color:black;}
   button.filter-button{display: none;}
   input.listbutton{display: none;}
   input[type=button], input[type=submit], input[type=reset]{display: none;}
   
   div.graphback{
       -webkit-print-color-adjust: exact;
       background-color: lightgrey;
       border: 1px solid black;

   }
   
   div.graphbar {
       -webkit-print-color-adjust: exact;
       border: 1px solid black;

   }
   input.belt
   {
       -webkit-print-color-adjust: exact;
   }

td.belt[value*="white"]{background-image: none;}
td.belt[value*="yellow"]{background-image: none;}
td.belt[value*="orange"]{background-image: none;}
td.belt[value*="green"]{background-image: none;}
td.belt[value*="blue"]{background-image: none;}
td.belt[value*="purple"]{background-image: none;}
td.belt[value*="red"]{background-image: none;}
td.belt[value*="brown"]{background-image: none;}
td.belt[value*="black"]{background-image: none;}
td.belt[value*="Birthday"]{background-image: none;}

th.list{-webkit-print-color-adjust: exact;}
/*
table td:last-child {display:none;}
table th:last-child {display:none;} */

table.buttonlist td:last-child {display:none;}
table.buttonlist th:last-child {display:none;}
thead {display: table-header-group;}


input[type="text"]:disabled, select:disabled, textarea:disabled
{
    opacity:1;
    color: black;
    -webkit-text-fill-color: black;
         -webkit-print-color-adjust: exact;
       background-color: lightgrey;
       border: 1px solid black;
 
   }
  
label {
    color: black;
}

input[type=text], input[type=password], select, textarea {
      -webkit-print-color-adjust: exact;
      background-color: lightgrey;
      border: 1px solid black;

  }
   div.ruler
   {
       border: 0;
       border-bottom: 2px solid black;
       width: 100%;
       margin: 16px 0px;
   }
 
 form{
     max-width:auto;
     background-color: white;
 }

form.list{
     max-width:auto;
     background-color: white;
 }

}