body {
 background-color:black;
 color:white;
 font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
 font-size: 14px;
}
ul.MenuUL{
  padding:0;
list-style-type:none;
height:34px;
width:100%;
margin:auto;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#d2d2d2');
    background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#d2d2d2));
    background:-moz-linear-gradient(top,  #fafafa,  #d2d2d2);
border:1px grey solid;
border-radius:3px;
-moz-box-shadow:0px 3px 10px -3px grey;
    -webkit-box-shadow:0px 3px 10px -3px grey;
    box-shadow:0px 3px 10px -3px grey
}
li.MenuLI{float:left}
ul.MenuUL a{
  padding-right:20px;
  padding-left:20px;
  display:block;
  line-height:34px;
  text-decoration:none;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:black;
border-right:1px grey solid
}
ul a:hover{
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d2d2d2', endColorstr='#fafafa');
    background:-webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#fafafa));
    background:-moz-linear-gradient(top,  #d2d2d2,  #fafafa)
}
.header {
  color:white;
}
.collapsible {
  cursor: pointer;
  position:relative;
  padding-top:0px;
  padding-bottom:0px;
  height:100%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  background-color:transparent;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  color: white;
  background-color: #000000;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.addItemResult {
  height: 10em;
  position: relative;
}
.addItemResult p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

    .input-container{
        width: 300px;
        height: 250px;
        float: right;
    }
    .input-container input:focus, .input-container input:active {
        outline: none;
    }
    .input-container input {
        width: 300px;
        float: right;
        border: none;
    }

    .input-container button {
      float: right;
      width: 300px;
    }

    .skillNameGrid      { grid-area: name; }
    .teacherNameGrid    { grid-area: name; }
    .nameGrid    { grid-area: name;      position:relative; bottom:-10;  }
    .levelGrid   { grid-area: level;       }
    .strGrid     { grid-area: strMod;      }
    .intGrid     { grid-area: intMod;      }
    .wisGrid     { grid-area: wisMod;      }
    .hitGrid     { grid-area: hitMod;      }
    .svmdGrid    { grid-area: svmdMod;     }
    .dexGrid     { grid-area: dexMod;      }
    .conGrid     { grid-area: conMod;      }
    .chaGrid     { grid-area: chaMod;      }
    .damGrid     { grid-area: damMod;      }
    .saveGrid    { grid-area: saveMod;     }
    .wornGrid    { grid-area: worn;        }
    .flagGrid    { grid-area: flags;       }
    .affectsGrid { grid-area: affects;     }
    .blankGrid   { grid-area: blankSpace;  }
    .addItemGrid { grid-area: addItem;     }
    .gapGrid     { grid-area: gap;         }
    .head1Grid   { grid-area: head1;       }
    .head2Grid   { grid-area: head2;       }
    .head3Grid   { grid-area: head3;       }
    .armorGrid   { grid-area: armorHeader; }
    .pierceGrid  { grid-area: pierce;      }
    .bashGrid    { grid-area: bash;        }
    .slashGrid   { grid-area: slash;       }
    .MagicGrid   { grid-area: magic;       }
    .filterGrid  { grid-area: applyFilter; }
    
    .right       { float:right; }
    .left        { float:left;  }
    .center      {
      display: block;
      margin-left: auto;
      margin-right: auto;
      text-align:center;
    }
    h1           {
      color: #ccc;
      font-size:32px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
      margin-bottom: 0px;
      text-align:center;
      font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    }
    h2           {
      color: #fff;
      font-size:14px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
      margin-bottom: 0px;
      text-align:center;
      font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    }
    select       { height:225px;width:115px;float:right;border-radius: 4px; }
    input        { border-radius: 4px; }
    textarea     {
      border-radius: 4px;
      background-color: #4c4c4c;
      color:white;
      border: 0px;
      font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-size: 12px;
    }
    table {
        width:100%;
        margin-top:10px;
        table-layout:auto;
        border-collapse: collapse;
    }
    td {
      margin-top:10px;
      margin-bottom:0px;
      line-height:25px;
      padding-left:3px;
      font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-size: 14px;
    }

    td.fitwidth {
        width: 1px;
        white-space: nowrap;
    }

    
    
    .button       {
      margin-top:10px;
      width:566px;
      height:25px;
      border-radius: 4px;
      background-color:lightgrey;
    }
    
    .resetButton       {
      margin-top:10px;
      width:25px;
      height:25px;
      border-radius: 14px;
      background-color:red;
    }
    
    .itemButton {
     border-radius: 4px;
     height:100%;
     width:100%;
     border:none;
     font-size:13px;
     position: relative;
     top: 7px;

    }
    
.bigGrid {
  color:white;
  display: grid;
  grid-template-areas:
  'littleGrid rightCol';
  grid-gap: 0px;
  background-color: #222;
  padding: 10px;
  padding-bottom:0px;
  margin-left:5px;
  margin-right:5px;
  grid-template-columns: 1fr auto;
  border-radius: 4px;
}

.skillGrid {
  display: grid;
  grid-template-areas:
  'skillNameGrid teacherName';
  grid-gap: 0px;
  background-color: #222;
  padding: 10px;
  padding-bottom:0px;
  margin-left:5px;
  margin-right:5px;
  grid-template-columns: 100px auto;
  border-radius: 4px;
}

.littleGrid {
    display: grid;
    grid-template-areas:
           'name        name        name        name         head1       head2       head3       blankSpace'
           'level       level       level       level        worn        flags       affects     blankSpace'
           'strMod      strMod      dexMod      dexMod       worn        flags       affects     blankSpace'
           'intMod      intMod      conMod      conMod       worn        flags       affects     blankSpace'
           'wisMod      wisMod      chaMod      chaMod       worn        flags       affects     blankSpace'
           'hitMod      hitMod      damMod      damMod       worn        flags       affects     blankSpace'
           'svmdMod     svmdMod     saveMod     saveMod      worn        flags       affects     blankSpace'
           'armorHeader armorHeader armorHeader armorHeader  worn        flags       affects     blankSpace'
           'pierce      bash        slash       magic        worn        flags       affects     blankSpace'
           'applyFilter applyFilter applyFilter applyFilter  applyFilter applyFilter applyFilter blankSpace';
    grid-template-columns: 55px 55px 55px 55px 125px 125px 125px auto;
}