html, body {
	  margin: 0;
	  height: 100%;
	}
	
	body {
	  padding: 0;
	  background-color: #202020;
	  font-family: arial;
	}

    .screen {
	  width:100%;
	  height: 100%;
	  position: relative;
	  overflow: hidden;
	}

    .hemi {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	}
	
	.menu {
	  width:400px;
	  position: absolute;
	  right:0;
	  top: 0;
	  bottom: 0;
	  background-color: #202020e0;
	  box-shadow: -5px 0 10px 0 rgb(0,0,0,0.4);
	}
	.menu.hidden {
	  right: -400px;
	  transition: right 0.5s;
	}
	.menu.hidden .onoff {
	  display: none;
	}
	
	.menu.visible {
	  right: 0;
	  transition: right 0.5s;
	}
	
	.menu .submenu {
	  display: none;
	}
	
	.menu .onoff {
	  width:40px;
	  height: 50px;
	  position: absolute;
	  left:-40px;
	  background-color: #202020;
	  box-shadow: -5px 0 10px 0 rgb(0,0,0,0.4);
	  border-bottom-left-radius: 10px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon points='0,0 10,10 0,20' fill='gray'/></svg>");
	  background-position-x: 15px;
	  background-position-y: 21px;
    }
	.menu .title {
	   color: #eeeeee;
	   font-size: 20px;
	   margin: -32px 5px 5px 5px;
	   padding: 4px;
	   text-shadow: 0 0 3px black;
	}
	
	.menu .content {
	  position: absolute;
	  overflow: auto;
	  padding: 20px;
	  color: white;
	  top: 200px;
	  bottom: 0;
	  left: 0;
	  right: 0;
    }

    .menu .content a {
	  color: #f0f0f0;
    }		
	
	.menu .collapse {
 	   display: none;
	   margin: 4px;
	   padding: 4px;
	}
	.menu .collapse.open {
	  display: block;
	}
	.menu .show {
	   margin: 4px;
	   padding: 4px;
	}
	.menu input {
       border: none;
       background-color: #303030;
       font-size: 25px;
       color: #c0c0c0;
       cursor: default;
       border-radius: 10px;
	}
	
	.menu .timage {
	  width: 100%;
	}
	
	.menu .stobject {
	  width: 400px;
	  height: 400px;
	  margin-left: -20px;
	  margin-top: -20px;
	  position: relative;
	}
	
	.menu .stimage {
	  position: absolute;
	}
	
	.menu #stmask {
	  position: absolute;
	}

	.menu .stcredit {
		font-size: 11px;
		text-align: right;
		margin-top: -15px;
		position: relative;
	}
	
	.menu .close {
		position: absolute;
		right: 10px;
		top: 62px;
		width: 30px;
		height: 30px;
		border: none;
		background-color: #303030;
		padding: 8px 8px;
		border-radius: 10px;
		box-shadow: 0 2px 8px 0 #000000;
		display: none;
	}
	
	.menu .close img {
		width: 15px;
	}
	
	.search {
		position: absolute;
		right: 10px;
		width: 360px;
		top: 10px;
		background-color: #303030;
		padding: 5px 10px;
		border-radius: 10px;
		box-shadow: 0 2px 8px 0 #000000;
	}
	
	.search input {
		background: none;
		border: none;
		font-size: 15px;
		color: #c0c0c0;
		width: 320px;
		height: 30px;
	}
	
	.search .mglass {
		background: none;
		border: none;
	}
	
	.search .burger {
		display: none;
	}
	
	.search button img { width:15px; }
	
	.icons {
		position: absolute;
		right: 10px;
		width: 370px;
		top: 80px;
		background-color: #303030;
		padding: 5px;
		border-radius: 10px;
		box-shadow: 0 2px 8px 0 #000000;
		color: #c0c0c0;
		font-size: 12px;
		display: flex;
	}
	
	.iconmenu {
		padding: 5px;
		color: #c0c0c0;
		font-size: 12px;
		display: flex;
		flex-wrap: wrap;
	}
	
	.icon {
		text-align: center;
		flex: 1 1 25%;
	}
	
	.icon img {
		width:60px;
	}

    .control {
		position: absolute;
		bottom: 10px;
		left: 10px;
		font-size: 15px;
		display: flex;
	}
	
	.popup-display {
		position: relative;
		color: rgb(224,224,224,0.7);
		margin: 5px;
	}
	
	.popup-display .disp {
		border: 2px solid rgb(224,224,244,0.5);
		border-radius: 10px;
		background-color: rgb(64,64,64,0.5);
		height: 18px;
		padding: 10px;
	}
	
	.popup-display .popup {
		position: absolute;
		bottom: 10px;
		display: none;
	}
	
	#settings, #viewmode, #viewtype {
		padding: 0;
		width: 38px;
		height: 38px;
	}
	
	img.settings { width: 30px; margin: 4px; }
	img.settings.off { display: none; }
	
	.num2 {
	  width: 40px;
	  margin: 20px 2px;
	}
	.num4 {
	  width: 80px;
	  margin: 20px 2px;
	}
	.arrow_input {
	  position: relative;
	  display: inline;
	}
	.arrow_input input {
	  margin: 20px 2px;
	  text-align: center;
	}
	.arrow_input .up {
	  width: 20px; height: 10px;
	  position: absolute;
	  left: 50%;
	  margin-left:-10px;
	  top: -22px;
	  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon points='0,10 10,0 20,10' fill='gray'/></svg>");
	}
	.arrow_input .down {
	  width: 20px; height: 10px;
	  position: absolute;
	  left: 50%;
	  margin-left:-10px;
	  bottom: -12px;
	  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon points='0,0 10,10 20,0' fill='gray'/></svg>");
	}
	.show .display label {
	  width:100px;
	  font-size: 15px;
	  font-weight: bold;
	  color: rgb(128,128,128,0.8);
	  display: inline-block;
	}
	.show .display input {
	  width:180px;
	  border: solid 1px #404040;
	  background-color: rgb(80,80,80,0.5);
	  font-size: 15px;
	  font-weight: bold;
	  color: rgb(128,128,128,0.8);
	}
	
	#constellationlist table {
	    width: 100%;
	}
	
	#constellationlist td {
		cursor: default;
	}
	
	#constellationlist td:hover {
		background-color: #404040;
	}

	#starlist table {
	    width: 100%;
	}
	
	#starlist td {
		cursor: default;
	}
	
	#starlist td:hover {
		background-color: #404040;
	}
	
	input[type="checkbox"] {
	  display: none;
	}

	input[type="checkbox"] + label {
	  position: relative;
	  display: inline-flex;
	  cursor: pointer;
	  line-height: 1.3;
	  margin-bottom: 10px;
	}

	input[type="checkbox"] + label:before {
	  width: 40px;
	  height: 20px;
	  border-radius: 20px;
	  border: 1px solid #555;
	  background-color: #333;
	  content: "";
	  margin-right: 15px;
	  transition: background-color 0.5s linear;
	}

	input[type="checkbox"] + label:after {
	  width: 20px;
	  height: 20px;
	  border-radius: 20px;
	  background-color: #aaa;
	  content: "";
	  transition: margin 0.1s linear;
	  box-shadow: 0px 0px 5px #aaa;
	  position: absolute;
	  left: 1px;
	  top: 1px;
	}

	input[type="checkbox"]:checked + label:before {
	  background-color: #207010;
	}

	input[type="checkbox"]:checked + label:after {
	  margin: 0 0 0 20px;
	}
	
	td.link {
	  cursor: pointer;
	}
	
	td.link:hover {
	  text-decoration: underline;
	}

@media only screen and (max-width: 400px) {
	.menu { width: 100% }
	
	.search { width: auto; left: 10px; right: 60px; }
	
	.search input { width: 100%; }
	.search .mglass { position: absolute; right: 10px; top: 14px; }
	
	.search .burger {
		display: block;
		position: absolute;
		right: -50px;
		width: 42px;
		height: 42px;
		top: 0;
		border: none;
		background-color: #303030;
		padding: 14px 10px;
		border-radius: 10px;
		box-shadow: 0 2px 8px 0 #000000;
	}
	
    #searchitems { display: none; }
	
	.submenu .timage { display: none; }
	.menu .title { margin-top: 57px; }
	.menu .content { top: 75px; }
	.menu .close { display: block; }

	.icon {
		text-align: center;
		flex: 1 1 50%;
		height: 100px;
	}

}

@media only screen and (max-width: 768px) {
	.control { left: 0; bottom: 0; font-size: 10px; width: 100%; }
	.popup-display { margin: 0 }
	.popup-display .disp { border-radius: 0; border: none; border-right: 1px solid rgb(224,224,224,0.5); }
}