body {
	background-color: black;
	background-image: url("img/game_table.png");
	background-size: 40%; /*was 700px but didnt look great on smaller screens*/ 	
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 42% 50%;
  font-family: georgia;  	
}

a:link, a:visited {
  background-color: #333333;
  color: white;
  padding: 2px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:6px;
  border: 2px solid #4CAF50; /* Green */
}

a:hover, a:active {
  background-color: #666666;
}

.form-fancy{
  background-color: #ffffff;
  color: black;
  padding: 2px 5px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  border-radius:6px;
  border: 2px solid #333333; /* Gray */ 
}

/* MENU MARKUP */

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {  
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 97%;
}

/* Style the links inside the navigation bar */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #666;
  color: white;
}

/* Add a green background color to the active link */
.navbar a.active {
  background-color: green;
  color: white;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
  display: none;
}


/* NORMAL MARKUP */
.button {
  background-color: #333;
  color: white;
  border: 2px solid #4CAF50; /* Green */
  border-radius:6px;
  padding: 2px 5px;
}

.button.active {
  background-color: red;
  color: white;
}

.button:focus {
  background-color: green;
  color: white;
}

.button:hover {
  background-color: #666;
  color: white;
}
/* Button 2 is used for the Modal DM screen at the top to add activated buttons*/
.button2 {
  background-color: #333;
  color: white;
  border: 2px solid #4CAF50; /* Green */
  border-radius:6px;
  padding: 2px 5px;
}
.button2.active {
  background-color: red;
  color: white;
}

.button2:focus {
  background-color: green;
  color: white;
}


.button_lrg {
  background-color: #333;
  color: white;
  border: 2px solid #4CAF50; /* Green */
  border-radius:6px;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 17px;
  font-family: georgia; 
}

.roll{
  background-color: #000000;
  opacity:0.75;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:6px;
  border: 1px solid orange;  
}

.audiobox2{   
 padding:0px 15px; 
 position: absolute; 
 height: 50px;
 width: 100px;
}

.moveable {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #333333;
  color: #fff;
  border-radius:20px;
  overflow-y:auto;
  resize: both;
  overflow: auto;
}

/*THE DICE ON THE GAME TABLE*/
.gametable{   
 padding:0px 15px; 
 position: absolute;
 top: 43%; 
 left: 41%;   
}

/*THE DM IS PLAYER 1 then P2 is TOP RIGHT, P3 is TOP LEFT, P4 is BOTTOM RIGHT, P5 is BOTTOM LEFT and P6 is BOTTOM Middle*/
.player1{   
 padding:0px 15px; 
 position: absolute;
 top: 6%; 
 left: 43%;   
}

.player2{   
 padding:0px 15px; 
 position: absolute;
 top: 31%; 
 right: 30%;  
}

.player3{   
 padding:0px 15px; 
 position: absolute;
 top: 31%; 
 right: 65%;  
}

.player4{   
 padding:0px 15px; 
 position: absolute;
 top: 55%; 
 right: 30%;  
}

.player5{   
 padding:0px 15px; 
 position: absolute;
 top: 55%; 
 right: 65%;  
}

.player6{   
 padding:0px 15px; 
 position: absolute;
 top: 78%; 
 left: 36%;  
}


/* The new strategic map*/
.map{
 display:inline-block;
 vertical-align:top;
 height:300px;
 width:280px;
 padding:0px 15px;
 position:relative; 
 border: 2px solid #666;
 border-radius:6px;
 background:#333333;
 color:white;  
 left: 0%;
 top: 50%;

 overflow-y:auto;
 resize: both;
 overflow: auto; 
}

/* The other maps*/
.minimaps{
 display:inline-block;
 vertical-align:top;
 height:120px;
 width:280px;
 padding:0px 15px;
 position:relative; 
 border: 2px solid #666;
 border-radius:6px;
 background:#333333;
 color:white; 
 left: 0%;
 top: 50%; 

 overflow-y:auto;
 resize: both;
 overflow: auto; 
}

.sheet{
 display:inline-block;
 vertical-align:top;
 height:230px;
 width:280px;
 padding:0px 5px;
 position:relative;  
 border: 2px solid #666;
 border-radius:6px;
 background:#333; 
 color:white; 
 overflow-y:auto;
 left: 0%;
 top: 0%; 
 resize: both;
 overflow: auto; 
}

.fireplace{  
 display:inline-block;
 vertical-align:top; 
 background-image: url('img/fireplace.gif');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: 23% 0%;
 background-size: 260px;   
 padding:0px 15px; 
 position: absolute;
 top: 0%; 
 left: 20%;
 height: 141px;
 width: 340px; 
}

.dmscreen{ 
 border: 2px solid #666;
 border-radius:6px;
 background:#333333;
 color:white;
 top: 0%; 
 left: 29%;
 width:35%;
 height:50px; 
 display:inline-block;
 padding:0px 15px; 
 position: absolute;
   
 overflow-y:auto;  
 resize: both;
 overflow: auto;
 z-index: 9;  
 text-align: center;
}

/** CHATBOX MARKUP **/
/* This changes the user window background color, font color and width of the box */
.chat .users{ 
 border: 2px solid #666;
 border-radius:6px;
 background:#333333;
 color:white;
 width:280px;
 height:75px; 
 display:inline-block;
 vertical-align:top; 
 padding:0px 15px;
 position:relative;
 resize: both;
 overflow: auto;
}

.sidebyside {
      display: inline-block;
      width: 49%;
      vertical-align: top;
 } 

 /* The text box you enter mesages into */
.submission-control{  
 height: 50px; 
 width:98%;
 border: 1px solid #999999; 
 padding: 3px; 
 background:black;
 color:white;  
}

/* This changes the actual width, background color, text color of the message box */
.chat .chatbox{  
 background:#000; /* background color for entire chat log*/
 border: 2px solid #666;
 border-radius:6px; 
 color:white;
 margin-left:4px;
 width:25%;
 height:97vh;
 float: right;
 vertical-align:top; 
 padding:0px 10px;
 position:relative;
 overflow-y:auto;  
 resize: both;
 overflow: auto;

}

/* This changes the actual height of the message box */
.chat .chatbox .msgs{
 border-top:1px solid white;
 border-bottom:1px solid white;
 overflow-y:auto;
 height:460px;


}

/* For The Entire ChatBox Form*/
.chat .chatbox #msg_form{
 padding-top:1.5px;

}
.chat .error{color:red;}
.chat .success{color:green;}

.chat .msgs .msg, .chat .users .user{
  border-bottom:1px solid #333333;
  padding:4px 0px;
  white-space:pre-line;
  word-break:break-word;
}

/* For chat Bubbles*/
p.bubble {
    position: relative;
    background: #FFF;
    text-align: center;
    border: 2px solid #666;
    max-width:350px;
    padding:10px;
    font-family: georgia; /* arial */
    margin:0 auto;
    font-size:14px;
    border-radius:6px;

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
     
    white-space:pre-line;
    word-break:break-word;
}
p.bubble:after, .bubble:before {
    right: 100%;
    top: 50%;    
    border: solid transparent;    
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

p.bubble:before { 
  left: 20%;  /* was 20px*/
  top: 100%;
  border: 15px solid;
  border-color: #666 transparent transparent #666;
}

p.bubble:after {  
  left: 20.7%; /* was 23px*/
  top: 100%;
  border: 12px solid;
  border-color: #fff transparent transparent #fff;
}

/* For chat Bubbles for all players*/

p.bubble2 {
    position: relative;
    background: #FFF;
    text-align: center;
    border: 2px solid #666;
    max-width:350px;
    padding:10px;
    font-family: georgia; /* arial */
    margin:0 auto;
    font-size:14px;
    border-radius:6px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;

    white-space:pre-line;
    word-break:break-word;
}

/* BY DEFAULT - Display on all screens unless they are flagged mobile only*/
.screen-only
{
  display: block;
}

.mobile-only
{
  display: none;
}


/* DISPLAY - Remove extras for older screens or smaller resolutions less than 1367 pixels IE fireplace*/
@media screen and (max-width: 1367px) {
  .screen-only
  {
  display: block; /*display: none or block; */
  }  

  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar {  
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 97%;
  }
  /* Style the links inside the navigation bar */
  .navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 17px;
  }
  p.bubble {
    position: relative;
    background: #FFF;
    text-align: center;
    border: 2px solid #666;
    max-width:375px;
    padding:7px;
    font-family: georgia; /* arial */
    margin:0 auto;
    font-size:12px;
    border-radius:6px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;     
    white-space:pre-line;
    word-break:break-word;
  }

  /* For chat Bubbles for all players*/

  p.bubble2 {
    position: relative;
    background: #FFF;
    text-align: center;
    border: 2px solid #666;
    max-width:375px;
    padding:7px;
    font-family: georgia; /* arial */
    margin:0 auto;
    font-size:12px;
    border-radius:6px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;

    white-space:pre-line;
    word-break:break-word;
  }

  .chat .chatbox{  
  background:#000; /* background color for entire chat log*/
  border: 2px solid #666;
  font-size: 14px;
  border-radius:6px; 
  color:white;
  margin-left:4px;
  width:25%;
  height:97vh;
  float: right;
  vertical-align:top; 
  padding:0px 10px;
  position:relative;
  overflow-y:auto;  
  resize: both;
  overflow: auto;
  }
  /* This changes the actual height of the message box */
  .chat .chatbox .msgs{
  border-top:1px solid white;
  border-bottom:1px solid white;
  overflow-y:auto;
  height:320px;
  }  

  /*THE DICE ON THE GAME TABLE*/
  .gametable{   
  padding:0px 15px; 
  position: absolute;
  top: 41%; 
  left: 39%;   
  }

  .fireplace{  
  display: none;
  }
}

/* DISPLAY - Differently for small screens and devices less than 1024 pixels (MOST CELL PHONES)*/
@media screen and (max-width: 1024px){
  .screen-only
  {
  display: none;
  }

  .gametable{
  display: none; /*dont display table */
  } 

  .mobile-only /* Display things ONLY on mobiles */
  {
  display: block;  
  } 

  .navbar {  
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 97%;
  } 

  .chat .users{ 
  border: 2px solid #666;
  border-radius:6px;
  background:#333333;
  color:white;
  width:92%;
  height:165px;
  overflow-y:auto;
  display:inline-block;
  vertical-align:top; 
  padding:0px 15px;
  position:relative;
  float: right;
  }  

  .chat .chatbox{ 
  background:#000; /* background color for entire chat log*/
  opacity:0.8;
  border: 2px solid #333;
  border-radius:6px; 
  color:white;
  margin-left:4px;
  width:76%;
  height:97vh; /*height:580px; */
  float: right;
  vertical-align:top; 
  padding:0px 10px;
  position:relative;
  float: right;
  }
  /* This changes the actual height of the message box */
  .chat .chatbox .msgs{
  border-top:1px solid white;
  border-bottom:1px solid white;
  overflow-y:auto;
  height:400px; /* This was 360 but changed it to 400 so cell phones could see better */

  .submission-control{  
  height: 100px; 
  width:97%;
  border: 1px solid #999999; 
  padding: 5px; 
  background:black;
  color:white; 
  }


}


/* DISPLAY - Remove extras for older screens or really small resolutions less than 600 pixels IE fireplace*/

@media screen and (max-width: 600px) {
  .screen-only
  {
  display: none; /*display: none or block; */
  } 
  .gametable{
  display: none; /*dont display table */
  }
  .navbar {  
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 97%;
  } 
  .chat .chatbox{
  background:#000; /* background color for entire chat log*/
  opacity:0.8;
  border: 2px solid #333;
  border-radius:6px; 
  color:white;
  margin-left:4px;
  width:100%;
  height:97vh; /*height:520px; */
  float: right;
  vertical-align:top; 
  padding:0px 10px;
  position:relative;
  float: right;
  }
  .modal1 { /* USERS */  
  left: 30%;
  top: 8%; 
  height:100px;
  width:200px;      
  resize: both;
  overflow: auto;
  float: left; 
  }
  .modal2 { /* MINI MAPS */  
  left: 30%;
  top: 54%; 
  height:120px;
  width:200px;
  float: left;       
  }
  .modal3 { /* STRAT MAPS */  
  left: 30%;
  top: 30%; 
  height:150px;
  width:200px;
  float: left;        
  }
  .modal4 { /* CHARACTER WINDOW */  
  left: 30%;
  top: 78%; 
  height:150px;
  width:200px; 
  float: left;      
  }
  .modal5 { /* DM SCREEN */  
  left: 50%;
  top: 20%;
  width:97vw;
  height:30vh; /* this must stay this size or the zoom can't get to the corners of the image*/
  resize: both;
  overflow: auto;
  background:#333;
  color:white;       
  }
  .modal6 { /* PC RECORDS WINDOW */  
  background-image: url('img/parchment_dark.png');
  background-repeat: no-repeat;
  background-size:auto;
  background-position:center;
  background-size: 100%;
  color:black;  
  padding: 15px 70px;
  left: 50%;
  top: 40%;
  height:57vh;
  width:97vw;
  font-size: 8px; 
  resize: both;
  overflow: auto; 
  overflow-y:auto;      
  }  
}