coco/www/coco.css

body{
	background-color: darkblue;
	margin:0;
	background-size:cover;
	background-position: center center;
	font-size:12.8px;
}

body.drawspace{
	overflow: hidden;
}

#svgCanvas{
	width:100%;
	height:100vh;
	/*position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;*/
	z-index: -1;
}
.catNav{
	position:absolute;
	top:0;
	bottom:0;
	color:white;
	padding: 90px 10px 10px 10px;
	overflow-y: auto;
	overflow-x: hidden;
}
#catNav {
	left:calc(7vh + 10px);
	direction: rtl;
}
#catNav ul{
	direction: ltr;
	margin-left:10px;
}
#catNav2 {
	right:0;
}
#catNav2 ul{
	margin-right:10px;
}

.catNav ul{
	list-style:none;
	padding:0px;
	margin: 70px 0px 10px 0;
	border-width: 3px;
	width:145px;
	/*box-shadow: white 0 0 20px;*/
	position:relative;
	font-size: 12.8px;

}
.catNav ul:first-child{
	margin-top:0;
}
.catNav ul:before{
	content: attr(data-name);
	position:absolute;
	bottom: 100%;
	transform:rotate(-30deg);
	transform-origin: top left;
	font-weight:bold;
	padding: 2px 10px;
	margin-left: -4px;
	border-radius: 2px;
	margin-bottom: 1em;
}
#catNav2 ul:before{
	transform:rotate(30deg);
	transform-origin:top right;
	right:0;
	bottom: 100%;
	margin-right: -4px;
	margin-left: 0px;
}
/*#catNav ul {
	border-left-style: solid;
}
#catNav2 ul {
	border-right-style: solid;
}*/

.catNav li{
	padding: 2px;
	/*margin-left:-12px;*/
	/*text-shadow: black 0 0 2px;*/
}
.catNav li:hover{
	cursor:pointer;
	text-decoration:underline;
}
#catNav li{
	transform: rotate(-30deg);
	transform-origin: top left;
}
#catNav2 li{
	transform: rotate(30deg);
	text-align:right;
	transform-origin: top right;
	
}

g{
	cursor:grab;
}

g:active{
	cursor:grabbing;
}

svg text{
	fill:white;
	font-size: 16pt;

	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.buttons{
	position:absolute;
	top: 20px;
	text-align:center;
	width: 600px;
	left: calc(50% - 300px);

}
.buttons.buttons-inline{
	position:static;
	margin: 10px;
	width:100%;
}
.buttons #buttons-top{
	display: block;
}
.buttons span, .buttons label:not(#scenelabel){
	/*color:white;*/
	cursor:pointer;
}
.buttons #convert{
	margin-right:15px;
}
.buttons span:hover{
	text-decoration:underline;
}
.buttons #sceneLabel{
	display:block;
}

body{
	color:white;
}
body.saved{
	background:yellow;
	color:black;
	margin-left: 7vh;
}
body.saved label{

}

body.hideImages svg image{
	display:none;
}
body.hideLabels svg text{
	display:none;
}

.supercategory-person:before{
	/* background:rgb(250,8,0); */
	background: black;
}
.supercategory-person li{
}
.supercategory-vehicle:before{
	/* background:rgb(128,255,0); */
	background: black;
}
.supercategory-vehicle li{
}
.supercategory-outdoor:before{
	/* background:rgb(0,255,255); */
	background: black;
}
.supercategory-outdoor li{
}
.supercategory-animal:before{
	/* background:rgb(255,0,255); */
	background: black;
}
.supercategory-animal li{
}
.supercategory-accessory:before{
	/* background:rgb(255,255,0); */
	background: black;
}
.supercategory-accessory li{
}
.supercategory-sports:before{
	/* background:rgb(0,128,255); */
	background: black;
}
.supercategory-sports li{
}
.supercategory-kitchen:before{
	/* background:rgb(250,133,0); */
	background: black;
}
.supercategory-kitchen li{
}
.supercategory-furniture:before{
	/* background:rgb(187,0,250); */
	background: black;
}
.supercategory-furniture li{
}
.supercategory-food:before{
	/* background:rgb(0,250,133); */
	background: black;
}
.supercategory-food li{
}
.supercategory-electronic:before{
	/* background:rgb(250,217,0); */
	background: black;
}
.supercategory-electronic li{
}
.supercategory-appliance:before{
	/* background:rgb(255,0,128); */
	background: black;
}
.supercategory-appliance li{
}
.supercategory-indoor:before{
	/* background:rgb(133,0,250); */
	background: black;
}
.supercategory-indoor li{
}


#save{
	margin: 5px;
}

#saved{
	text-align: center;
}
#saved svg{
	width: 30vw;
	height: 20vw;
	margin: 10px;
	border:solid 1px yellow;
}

body.hideBg #saved svg{
	border:solid 1px white;
}
body.hideBg #saved svg{
	background-image: none !important;
	background-color:black;
}


#saved svg.scene1{
	background-image:url('drone_simple.svg');
	background-size: cover;
	background-origin: center center;
}
#saved svg.scene2{
	background-image:url('car_simple.svg');
	background-size: cover;
	background-origin: center center;
}
#saved svg.scene3{
	background-image:url('room_simple.svg');
	background-size: cover;
	background-origin: center center;
}

a, a:link, a:visited{
	color:white;
	text-decoration:none;
}
a:hover{
	text-decoration: underline;
}

select{
	padding: 2px;
	color:white;
	background:black;
	border:none;
	white-space: nowrap;

	font-family: "space_grotesk";
	font-feature-settings: "salt";
	font-size: 12.8px;
	cursor: pointer;
}
option{
	font-family: sans-serif;
	line-height: 1.4;
}

button, input[type='submit'],#godraw a,#saved a{
	cursor: pointer;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    /*color: initial;*/

	padding: 4px 7px;
	color:white;
	background:black;
	border:none;
	white-space: nowrap;

	font-family: "space_grotesk";
	font-feature-settings: "salt";
	font-size: 12.8px;

	border-radius: 2px;
}

/*input:checked + span{
	color:red;
}*/