*{ margin:0px; padding:0px; outline:none; }
html,body{width: 100%; height: 100%; }


a{text-decoration:none;}
a:hover{ text-decoration: underline; }



/* useful global classes */
.wrapper{margin-top: 50px; display: inline-block;width: 100%; height: 100%; }
.clear{width: 100%; clear:both;height: 1px; display:block; }
.loadErrorMessage, .settingsContainer{ margin: 20% auto 0% auto; width: 50%; text-align:center; display: inline-block; }
.btn{ border-radius: 10px; padding: 10px 20px; display: inline-block; border: solid 1px #999; text-align:center; cursor: pointer; color: #333; transition : all 0.3s; }
.btn:hover{opacity: 0.7;}

.inputGroup{
  margin-top: 20px; width: 100%;
}
.inputGroup input{width: 100%; padding: 10px; border: solid 1px #999; font-size: 15px; }



/* General game stuff */
#counter{position:fixed; width: 60px; height: 80px; background-color: #fff; border: solid 1px #999; z-index:99; top:0px; left: calc(50% - 75px); }
#counterTitle{width: 100%; clear:both; text-align:center; font-size: 12px; }
#counterCount{font-size: 40px; text-align:center; width: 100%; clear:both; }




/* intro styles */
#intro-login{ width: 30%; margin: 25% auto 0 auto; text-align:center;  }
#intro-login input{width: calc(100% - 20px); font-size: 17px; padding: 10px; margin-top: 10px;  }
#intro-login input[type=submit]{ width: 100%; }



/* user menu */
#userMenu{ width: 100%; margin:0px; border-bottom: 1px solid #333; position:fixed; top: 0px; left: 0px; background-color: #fff;  }
.userMenuItem{ display:inline-block; margin: 10px 20px; }




/* map */
#map td{padding: 10px; width: 10%; text-align:center; }
.mapContainer{width: 100%; height: 100%; overflow:hidden; }


/* character creation  */
.inputGroupAlerts{ display: none; border: solid 1px #ff0000; background-color: #ffdddd; padding: 10px 20px;  }
.characterSelectScreen{
  width: 50%; margin: 20% auto 0 auto; text-align:center;
}















/* end */