:root {
    /*--border_radius:  0px;*/
    /*--colorA: rgba(210, 110, 0, 0.9);*/
    /*--colorA_06: rgba(210, 110, 0, 0.5);*/
    /*--col_ORANGE: rgb(255,130,0);*/
    /*--box-shadow: 5px 5px 5px rgba(80, 35, 0, 0.5);*/
    /*--box-shadow-button: 0px 0px 5px rgba(0, 0, 0, 1);*/
}

.unselectable{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.selectable-text{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;
}


*{
    margin: 0px;
    padding: 0px;
}


html{
    width:100%;
    height:100%;
}

body{
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,1);
    font-family: FontAwesome, Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: small;
    color: rgb(200, 200, 200);
}

#easycamhud {
  position: fixed;
  top: 10px;
  left: 10px;
}

#statehud{
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 900px;
  /* height: 170px; */
  /* background-color: rgba(0,0,0,0.2); */
  /* text-align: justify; */
  font-variant: normal;
  font-size: medium;
  text-align: center;
}

.container{
  display: inline-block;
  width: 25%;
  vertical-align: top;
  /* height: 200px; */
  /* background-color: rgba(0,0,0,0.2); */

}

.camstate {
  /* display: block; */
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 20px 3px #000;
  
  /* border-radius: 10px; */
  /* overflow:hidden; */
}

.setState{
  /* display: block; */
  /* position: absolute; */
  /* width: 150px; */
  line-height: 30px;
  margin: auto;
  background-color: rgba(48,48,48,0.7);
}

.getState {
  /* width: 150px; */
  height: 120px;
  margin: auto;
  background-color: rgba(48,48,48,0.2);
}

.camstate:hover{
  box-shadow: 0px 0px 20px 8px #000;
}

.setState:hover{
  
  background-color: rgba(64,64,64,0.75);
}

.getState:hover{
  background-color: rgba(64,64,64,0.75);
}

.setState:active{
  background-color: rgba(128,128,128,1);
}

.getState:active{
  background-color: rgba(128,128,128,1);
}

canvas{
}

canvas.screenshot{
}

canvas.screenshot:hover{
   box-shadow: 0px 0px 2px 1px #888;
} 

canvas.screenshot:active{
   box-shadow: 0px 0px 2px 2px #888;
} 


.hud {
	background-color: rgba(0,0,0,0.9);
	color: #FFFFFF;
	font-size: 10pt;
	padding: 10px;
  border: 1px solid #000;
  border-radius: 0px;
  box-shadow: 0px 0px 10px 1px #000;
}

ul {
  list-style-type: none;
  padding: 10px;
  color: 0xFFFFFF;
}

ul.two{
  display: inline-block;
  vertical-align:top;
}

li[gap]{
  margin-top: 10px;
}

ul .green{
  color: rgb(100,200,0);
}
ul .orange{
  color: rgb(255,128,0);
}










