body{
  font-family: Garamond, serif;
    text-align: center;
//  padding: 0px;
//  margin: 0px;
//  background-color: #FFFFFF;
//  background-image: url("images/background.png");
    width: 1400px;
    margin: auto
}

.dice_title{
  color: #FFFFFF;
   font-size: 56px;
   margin: 20px;
   font-weight: bold;
}

.type_of_roll{
   color: #FFFFFF;
   font-size: 24px;

         text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}


.result_success{
  color: #FFFFFF;
  font-weight: bold;
  font-size: 48px;
  text-shadow: -2px -2px 0 #667FB0, 2px -2px 0 #667FB0, -2px 2px 0 #667FB0, 2px 2px 0 #667FB0;
}

.result_exceptional{
  color: #FFFFFF;
  font-weight: bold;
  font-size: 48px;
  text-shadow: -2px -2px 0 #FFD700, 2px -2px 0 #FFD700, -2px 2px 0 #FFD700, 2px 2px 0 #FFD700;
}

.result_fail{
  color: #FFFFFF;
  font-weight: bold;
  font-size: 48px;
  text-shadow: -2px -2px 0 #FF0000, 2px -2px 0 #FF0000, -2px 2px 0 #FF0000, 2px 2px 0 #FF0000;
}

.result_catastrophic{
  color: #FFFFFF;
  font-weight: bold;
  font-size: 48px;
  text-shadow: -2px -2px 0 rgb(197, 131, 29), 2px -2px 0 rgb(197, 131, 29), -2px 2px 0 rgb(197, 131, 29), 2px 2px 0 rgb(197, 131, 29);
}

.rolling_section{
    padding: 0px;
    margin: 0px;
    background-color: #FFFFFF;
    background-image: url("images/background_white.png");
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

.menu_section{
  text-align:center;
  padding-top: 20px;
}

.user_nemu{
  text-align: left;
  font-size: 20px;
}

iframe{
  width: 100%;
  height: 100%;
  border:0px;
}

.bonus{
  font-family: Garamond, serif;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 36px;
  width: 60px;
  //height: 60px;
  padding-top:10px;
  padding-bottom: 10px;
 // margin-top:20px;
 // margin-top: 20px;
 // margin-bottom: 20px;
  background-color: rgba(102, 127, 176, .6);
      text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
    border: 1px solid #DDDDDD;
    vertical-align: middle;
}

.neutral{
  font-family: Garamond, serif;
  font-weight: bold;
    color: #FFFFFF;
  font-size: 36px;
  width: 60px;
 // height: 40px;
  padding-top:10px;
  padding-bottom: 10px;
 // margin-top:20px;
 // margin-top: 20px;
 // margin-bottom: 20px;
  background-color: rgba(255, 255, 255, .6);
      text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    border: 1px solid #DDDDDD;
    vertical-align: middle;
}

 .penalty{
  font-family: Garamond, serif;
  font-weight: bold;
    color: #FFFFFF;
  font-size: 36px;
  width: 60px;
 // height: 40px;
  padding-top:10px;
  padding-bottom: 10px;
//  margin-top:20px;
 // margin-top: 20px;
 // margin-bottom: 20px;
  background-color: rgba(255, 0, 0, .6);
      text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    border: 1px solid #DDDDDD;
    vertical-align: middle;
}

 .exceptional{
  font-family: Garamond, serif;
  font-weight: bold;
    color: #FFFFFF;
  font-size: 36px;
  width: 60px;
 // height: 40px;
  padding-top:10px;
  padding-bottom: 10px;
//  margin-top:20px;
 // margin-top: 20px;
 // margin-bottom: 20px;
  background-color: rgb(255, 215, 0);
      text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    border: 1px solid #DDDDDD;
    vertical-align: middle;
}

 .catastrophic{
  font-family: Garamond, serif;
  font-weight: bold;
    color: #FFFFFF;
  font-size: 36px;
  width: 60px;
 // height: 40px;
  padding-top:10px;
  padding-bottom: 10px;
//  margin-top:20px;
 // margin-top: 20px;
 // margin-bottom: 20px;
  background-color: rgb(197, 131, 29, .6);
      text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    border: 1px solid #DDDDDD;
    vertical-align: middle;
}


.bonus:hover{
  background-color: rgba(102, 127, 176, .7)
}
.neutral:hover{
  background-color: rgba(255, 255, 255, .7);
}
.penalty:hover{
  background-color: rgba(255, 0, 0, .7);
}

.container {
  vertical-align: middle;
    text-align:center;
 //   width:100%;
    padding: 4px;
    border-top: 2px solid #DDDDDD;
    border-bottom: 2px solid #DDDDDD;
    background-color: rgba(250, 250, 250, .7);
}

.underline_fail{
  border-bottom: 10px solid #FF0000;
}

.underline_success{
  border-bottom: 10px solid #667FB0;
}

.underline_exceptional{
  border: 10px solid #FFD700;
}

.underline_catastrophic{
  border: 10px solid #A52A2A;
}

.die_success {
    display:inline-block;   
    margin-left: 20px;
    margin-right: 20px;
  background-image: url("images/die.png");
  width: 154px;
  height: 171px;
  line-height: 171px; /* <-- this is what you must define */
  text-align: center;
font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -2px -2px 0 #667FB0, 2px -2px 0 #667FB0, -2px 2px 0 #667FB0, 2px 2px 0 #667FB0;
  font-weight: bold;
  font-size: 128px;
}

.die_fail{
    display:inline-block;   
    margin-left: 20px;
    margin-right: 20px;
  background-image: url("images/die_fail.png");
  width: 154px;
  height: 171x;
  line-height: 171px; /* <-- this is what you must define */
  text-align: center;
font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -2px -2px 0 #FF0000, 2px -2px 0 #FF0000, -2px 2px 0 #FF0000, 2px 2px 0 #FF0000;
  font-weight: bold;
  font-size: 128px;
}

.die_exceptional {
    display:inline-block;   
    margin-left: 20px;
    margin-right: 20px;
  background-image: url("images/die_exceptional.png");
  width: 154px;
  height: 171px;
  line-height: 171px; /* <-- this is what you must define */
  text-align: center;
font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -2px -2px 0 #FFD700, 2px -2px 0 #FFD700, -2px 2px 0 #FFD700, 2px 2px 0 #FFD700;
  font-weight: bold;
  font-size: 128px;
}

.die_catastrophic {
    display:inline-block;   
    margin-left: 20px;
    margin-right: 20px;
  background-image: url("images/die_catastrophic.png");
  width: 154px;
  height: 171px;
  line-height: 171px; /* <-- this is what you must define */
  text-align: center;
font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -2px -2px 0 #A52A2A, 2px -2px 0 #A52A2A, -2px 2px 0 #A52A2A, 2px 2px 0 #A52A2A;
  font-weight: bold;
  font-size: 128px;
}


.log_container {
  vertical-align: middle;
    text-align:left;
 //   width:100%;
    background-color: rgba(250, 250, 250, 1);
   // padding-top: 2px;
    padding-left: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
    border: 2px solid #DDDDDD;
  //  border-bottom: 2px solid #DDDDDD;
    opacity: 1;
}

.username{
  min-width: 200px;
  font-size: 24px;
  text-align: left;
}

.date{
  min-width: 200px;
  font-size: 14px;
  font-style: italic;
  text-align: left;
}

.roll_string{
  //min-width: 200px;
  font-size: 20px;
  //font-style: italic;
  text-align: left;
}

.log_userdata_box{
  vertical-align: middle;
  display:inline-block;
  opacity: 1;
}

.log_data_box{
  float: right;
  vertical-align: middle;
  display:inline-block;
  opacity: 0.5;
}

.log_message{
  vertical-align: middle;
  display:inline-block;
}

.log_data_box:hover{
    opacity: 1;
 }

 .what_was_rolled_bonus{
    vertical-align: middle;
    text-align: center;
  display:inline-block;
  background-color: rgba(102, 127, 176, .6);
  border: 1px solid rgb(102, 127, 176);
  padding-top: 8px;
  width: 36px;
  height: 28px;

 }

.what_was_rolled_neutral{
    vertical-align: middle;
    text-align: center;
  display:inline-block;
  background-color: rgba(200, 200, 200, .6);
  border: 1px solid rgb(200, 200, 200);
  padding-top: 8px;
  width: 36px;
  height: 28px;
 }

.what_was_rolled_penalty{
    vertical-align: middle;
    text-align: center;
  display:inline-block;
  background-color: rgba(255, 0, 0, .6);
  border: 1px solid rgb(255, 0, 0);
  padding-top: 8px;
  width: 36px;
  height: 28px;
 }


.log_data_box_success{
  vertical-align: middle;
  display:inline-block;
  opacity: 1;
  background-color: rgb(50, 205, 50, 0.5);
  border: 1px solid rgb(50, 205, 50);
   height: 26px;
   width: 300px;
     padding-left: 10px;
     padding-top: 10px;
   padding-right: 40px;
   margin-right: 4px ;
}

.log_data_box_failure{
  vertical-align: middle;
  display:inline-block;
  opacity: 1;
  background-color: rgb(255, 0, 0, 0.5);
  border: 1px solid rgb(255, 0, 0);
   height: 26px;
   width: 300px;
     padding-left: 10px;
     padding-top: 10px;
   padding-right: 40px;
   margin-right: 4px ;
}

.log_data_box_exceptional{
  vertical-align: middle;
  display:inline-block;
  opacity: 1;
  background-color: rgb(255, 215, 0, 0.5);
  border: 1px solid rgb(255, 215, 0);
   height: 26px;
   width: 300px;
     padding-left: 10px;
     padding-top: 10px;
   padding-right: 40px;
   margin-right: 4px;
}

.log_data_box_catastrophic{
  vertical-align: middle;
  display:inline-block;
  opacity: 1;
  background-color: rgb(197, 131, 29, 0.5);
  border: 1px solid rgb(197, 131, 29);
   height: 26px;
   width: 300px;
     padding-left: 10px;
     padding-top: 10px;
   padding-right: 40px;
   margin-right: 4px;
}



.log_data_right_box_success{
  background-color: #677fb0;
  vertical-align: middle;
  display:inline-block;
  text-align: right;
  width:100px;
  height: 64px;
  float: right;
}

.log_data_right_box_fail{
  background-color: ##FF0000;
  vertical-align: middle;
  display:inline-block;
  text-align: right;
  width:100px;
  height: 64px;
  float: right;
}

.log_data_right_box_exceptional{
  background-color: #FFD700;
  vertical-align: middle;
  display:inline-block;
  text-align: right;
  width:100px;
  height: 64px;
  float: right;
}

.log_data_right_box_catastrophic{
  background-color: rgb(197, 131, 29);
  vertical-align: middle;
  display:inline-block;
  text-align: right;
  width:100px;
  height: 64px;
  float: right;
}


.log_underline_fail{
  border-bottom: 3px solid #FF0000;
}

.log_underline_success{
  border-bottom: 3px solid #667FB0;
}

.log_underline_exceptional{
  border: 3px solid #FFD700;
}

.log_underline_catastrophic{
  border: 3px solid rgb(197, 131, 29);
}

.log_die_success {
    display:inline-block;   
    margin-left: 6px;
    margin-right: 6px;

  background-image: url("images/log_die.png");
  width: 48px;
  height: 53px;
  line-height: 53px; /* <-- this is what you must define */
  text-align: center;

font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -1px -1px 0 #667FB0, 1px -1px 0 #667FB0, -1px 1px 0 #667FB0, 1px 1px 0 #667FB0;

  font-weight: bold;
  font-size: 32px;
}

.log_die_fail{
    display:inline-block;   
    margin-left: 6px;
    margin-right: 6px;

  background-image: url("images/log_die_fail.png");
  width: 48px;
  height: 53px;
  line-height: 53px; /* <-- this is what you must define */
  text-align: center;

font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -1px -1px 0 #667FB0, 1px -1px 0 #667FB0, -1px 1px 0 #667FB0, 1px 1px 0 #667FB0;

  font-weight: bold;
  font-size: 32px;
}

.log_die_exceptional {
    display:inline-block;   
    margin-left: 6px;
    margin-right: 6px;

  background-image: url("images/log_die_exceptional.png");
  width: 48px;
  height: 53px;
  line-height: 53px; /* <-- this is what you must define */
  text-align: center;

font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -1px -1px 0 #667FB0, 1px -1px 0 #667FB0, -1px 1px 0 #667FB0, 1px 1px 0 #667FB0;

  font-weight: bold;
  font-size: 32px;
}

.log_die_catastrophic {
    display:inline-block;   
     margin-left: 6px;
    margin-right: 6px;

  background-image: url("images/log_die_catastrophic.png");
  width: 48px;
  height: 53px;
  line-height: 53px; /* <-- this is what you must define */
  text-align: center;

font-family: Garamond, serif;
color: #FFFFFF;
  text-shadow: -1px -1px 0 rgb(197, 131, 29), 1px -1px 0 rgb(197, 131, 29), -1px 1px 0 rgb(197, 131, 29), 1px 1px 0 rgb(197, 131, 29);

  font-weight: bold;
  font-size: 32px;
}

.button_box{
  display:inline-block;    
}

.rating_diff{
  color: #FFFFFF;
  font-weight: bold;
     color: #FFFFFF;
   font-size: 20px;

         text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}


textarea {
  vertical-align: top;
//  display: inline;
  width: 1160px;
  height: 30px;
}

.message_button {
  vertical-align: top;
 //  display: inline;
  width: 120px;
  height: 30px;
}

.skill_button {
  vertical-align: top;
 //  display: inline;
  width: 150px;
  height: 30px;
}

.difficulty_box {
  font-family: Garamond, serif;
  vertical-align: top;
  text-align: center;
 //  display: inline;
  width: 50px;
  height: 30px;
  font-size: 32px;
}

.error_message{
  color: #FFFFFF;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
 // height: 50px;
  border: 2px solid #FF0000;
  vertical-align: middle;
  font-size: 18px;
  background-color: #f34e4e;
}

.separator{
  vertical-align: middle;
//  width: 400px;
  height: 30px;
//  background-color: #FFFFFF;

      text-align:conter;
 //   width:100%;
 //   background-color: rgba(250, 250, 250, 1);
   // padding-top: 2px;
    padding-left: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
    vertical-align: middle;

 //   border: 2px solid #DDDDDD;
  //  border-bottom: 2px solid #DDDDDD;
    opacity: 0.7;
}

.channel_link{
  width: 500px;
}

.physical{
  color: #FFFFFF;
  background-color:#ff0000;
}

.action{
  color: #FFFFFF;
  background-color:#017104;
}

.mental{
  color: #FFFFFF;
  background-color:#001cfe;
}

.social{
  color: #FFFFFF;
  background-color:#b0027b;
}

.physical:hover{
  color: #FFFFFF;
  background-color:#ff0000;
  opacity: 0.9;
}

.action:hover{
  color: #FFFFFF;
  background-color:#017104;
  opacity: 0.9;
}

.mental:hover{
  color: #FFFFFF;
  background-color:#001cfe;
  opacity: 0.9;
}

.social:hover{
  color: #FFFFFF;
  background-color:#b0027b;
  opacity: 0.9;
}

.user_color{
  margin-right: 5px;
  display: inline-block;
  width: 20px;
  height: 36px;
}

.game_master{
  text-align: center;
  vertical-align: middle;
}