@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: snow;
}

#main{
  width : 100%;
  max-width: 500px;
  margin : auto;
}

.infodesc{
  margin : 10px;
  
}

.tab{
  margin-left : 20px;
}

.listking:hover{
  background-color: WhiteSmoke;
}

#canvaContainer{
  position:relative;
}

.section{
  width : 100%;
  max-width: 500px;
  margin : 10px 0px;
  padding-bottom : 10px;
  padding-left : 10px;
}

.azure{
  background-color: azure;
}

.lavender{
  background-color: lavender;
}

.lavenderblush
{
  background-color: lavenderblush;
}

.papayawhip{
  background-color: papayawhip;
}

.honeydew{
  background-color: honeydew;
}

.info{
  left : 95%;
}

#canvas{
  border : solid black 1px;
}

.hidden{
  display : none;
}

.visiAlign{
  display : inline-block;
  margin-right : 10px;
  vertical-align: top;
}



/*
 *CUSTOM BOOTSTRAP BUTTONS
 */

.btn-save {
  background-color: hsl(0, 100%, 86%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#feb7b7", endColorstr="#feb7b7");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#feb7b7), to(#feb7b7));
  background-image: -moz-linear-gradient(top, #feb7b7, #feb7b7);
  background-image: -ms-linear-gradient(top, #feb7b7, #feb7b7);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feb7b7), color-stop(100%, #feb7b7));
  background-image: -webkit-linear-gradient(top, #feb7b7, #feb7b7);
  background-image: -o-linear-gradient(top, #feb7b7, #feb7b7);
  background-image: linear-gradient(#feb7b7, #feb7b7);
  border-color: #feb7b7 #feb7b7 hsl(0, 100%, 86%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
  -webkit-font-smoothing: antialiased;
}

.btn-hill {
  background-color: hsl(145, 62%, 78%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a4e9c1", endColorstr="#a4e9c1");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#a4e9c1), to(#a4e9c1));
  background-image: -moz-linear-gradient(top, #a4e9c1, #a4e9c1);
  background-image: -ms-linear-gradient(top, #a4e9c1, #a4e9c1);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a4e9c1), color-stop(100%, #a4e9c1));
  background-image: -webkit-linear-gradient(top, #a4e9c1, #a4e9c1);
  background-image: -o-linear-gradient(top, #a4e9c1, #a4e9c1);
  background-image: linear-gradient(#a4e9c1, #a4e9c1);
  border-color: #a4e9c1 #a4e9c1 hsl(145, 62%, 78%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
  -webkit-font-smoothing: antialiased;
}

.btn-land {
  background-color: hsl(38, 65%, 39%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a47422", endColorstr="#a47422");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#a47422), to(#a47422));
  background-image: -moz-linear-gradient(top, #a47422, #a47422);
  background-image: -ms-linear-gradient(top, #a47422, #a47422);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a47422), color-stop(100%, #a47422));
  background-image: -webkit-linear-gradient(top, #a47422, #a47422);
  background-image: -o-linear-gradient(top, #a47422, #a47422);
  background-image: linear-gradient(#a47422, #a47422);
  border-color: #a47422 #a47422 hsl(38, 65%, 39%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
  -webkit-font-smoothing: antialiased;
}

.btn-coin {
  background-color: hsl(60, 100%, 54%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#feff14", endColorstr="#feff14");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#feff14), to(#feff14));
  background-image: -moz-linear-gradient(top, #feff14, #feff14);
  background-image: -ms-linear-gradient(top, #feff14, #feff14);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feff14), color-stop(100%, #feff14));
  background-image: -webkit-linear-gradient(top, #feff14, #feff14);
  background-image: -o-linear-gradient(top, #feff14, #feff14);
  background-image: linear-gradient(#feff14, #feff14);
  border-color: #feff14 #feff14 hsl(60, 100%, 54%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
  -webkit-font-smoothing: antialiased;
}

/*
 *CUSTOM FILE BUTTONS
 */
 
.inline-block{
  display : inline-block;
 }

.selectedCharLi{
  background-color: lavender;
  }