body{ background-color: darkblue; margin:0; background-size:cover; background-position: center center; } #svgCanvas{ width:100%; height:100vh; /*position: fixed; top:0; left:0; bottom:0; right:0;*/ z-index: -1; } .catNav{ position:absolute; top:0; color:white; /*bottom:0;*/ /*overflow-y: auto;*/ padding: 10px; } #catNav { left:calc(7vh + 10px); } #catNav2 { right:0; } .catNav ul{ list-style:none; padding:0px; margin: 30px 0px; border-width: 3px; width:145px; overflow-x:hidden; /*Due to rotation the overlfow hidden does anoying things*/ padding-top:93px; margin-bottom:-85px; box-shadow: white 0 0 20px; position:relative; font-size: 12px; } .catNav ul:first-child{ margin-top:0; } .catNav ul:before{ content: attr(data-name); position:absolute; top: 68px; transform:rotate(-30deg); transform-origin: top left; font-weight:bold; } #catNav2 ul:before{ transform:rotate(30deg); transform-origin:top right; right:0; top: 66px; } /*#catNav ul { border-left-style: solid; } #catNav2 ul { border-right-style: solid; }*/ .catNav li{ padding: 2px 2px 2px 25px; width:160px; 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; padding-right: 25px; padding-left: 2px; margin-left:-25px; } g{ cursor:grab; } g:active{ cursor:grabbing; } svg text{ fill:white; font-size: 40pt; -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: 10px; text-align:center; width: 300px; left: calc(50% - 150px); } .buttons.buttons-inline{ position:static; margin: 10px; width:100%; } .buttons span, .buttons label{ color:white; cursor:pointer; } .buttons span:hover{ text-decoration:underline; } .buttons #sceneLabel{ display:block; } body.hideImages svg image{ display:none; } body.hideLabels svg text{ display:none; } .supercategory-person:before{ color:rgb(250,8,0); } .supercategory-person li{ background:rgb(250,8,0); } .supercategory-vehicle:before{ color:rgb(128,255,0); } .supercategory-vehicle li{ background:rgb(128,255,0); } .supercategory-outdoor:before{ color:rgb(0,255,255); } .supercategory-outdoor li{ background:rgb(0,255,255); } .supercategory-animal:before{ color:rgb(255,0,255); } .supercategory-animal li{ background:rgb(255,0,255); } .supercategory-accessory:before{ color:rgb(255,255,0); } .supercategory-accessory li{ background:rgb(255,255,0); } .supercategory-sports:before{ color:rgb(0,128,255); } .supercategory-sports li{ background:rgb(0,128,255); } .supercategory-kitchen:before{ color:rgb(250,133,0); } .supercategory-kitchen li{ background:rgb(250,133,0); } .supercategory-furniture:before{ color:rgb(187,0,250); } .supercategory-furniture li{ background:rgb(187,0,250); } .supercategory-food:before{ color:rgb(0,250,133); } .supercategory-food li{ background:rgb(0,250,133); } .supercategory-electronic:before{ color:rgb(250,217,0); } .supercategory-electronic li{ background:rgb(250,217,0); } .supercategory-appliance:before{ color:rgb(255,0,128); } .supercategory-appliance li{ background:rgb(255,0,128); } .supercategory-indoor:before{ color:rgb(133,0,250); } .supercategory-indoor li{ background:rgb(133,0,250); } #save{margin: 5px;} #saved{ text-align: center; } #saved svg{ width: 30vw; height: 20vw; margin: 10px; border:solid 1px white; } #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; } #godraw a,#saved a{ -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }