html{
    height:100%;
}

body{
    position:absolute;
    margin:0px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

#piping{
	width:100%;
	overflow:hidden;
	height:100%;
}


.hidden{
	display:none;
}

/* selected objects */
/*=========================================*/

div#selected-objects{
    position:absolute;
    right:20px;
    top:20px;
}

div#selected-objects .obj > td{
	padding:3px 5px;
}

/* bottom right */
/*=========================================*/

div#bottom-right{
    position:absolute;
    right:20px;
    bottom:20px;
}


/* menu box */
/*=========================================*/

div#menu-box{
    position:absolute;
    right:20px;
    top:20px;
}

div#menu-box input{
    background:rgba(256,256,256,0.0);
}

.menu-group p{
    margin:0px 0px 5px 0px;
	font-weight:bold;
}

.menu-group {
	background:rgba(256,256,256,0.8);
	padding:10px;
    margin:0px 0px 10px 0px;
	border-left:3px solid green;
	box-shadow: 10px 5px 10px grey;
}

.menu-group div{
	margin-top:5px;
}

.menu-group  input{
    width:90px;
    border:none;
	vertical-align:middle;
}

.menu-group div .activator{
	display:inline-block;
    min-width:15px;
	vertical-align:middle;
    height:15px;
    border: 1px solid lightGrey;
    border-radius:8px;
}

.menu-group  div:hover .activator{
	background:lightBlue;
}

.menu-group  div.active .activator:hover{
	background:lightCoral;
}

.menu-group  div.active .activator{
	background:lightGrey;
}

div#delta-box{
    display:none;
}

div#delta-box input{
    border:none;
}

/* circle buttons */
/*=========================================*/

.circle-button{
	background-color:white;
	padding:10px;
	width:34px;
    border: 1px solid lightGrey;
    border-radius:27px;
	text-align:center;
	font-size:30px;
	margin:10px;
}

.circle-button:hover{
	background-color:lightGreen;
}

.circle-button.active{
	background:lightBlue;
}

.circle-button.suspended{
	background:lightCoral;
}

.circle-button:hover::after{
	position:absolute;
	left:70px;
	font-size:15px;
}

/* mode box */
/*=========================================*/

div#mode-box{
    position:absolute;
    left:20px;
    top:20px;
}

#view-mode:hover::after{
	content: "View mode";
}

#create-mode:hover::after{
	content: "Create mode";
}

#draw-mode:hover::after{
	content: "Draw mode";
}

#select-mode:hover::after{
	content: "Select mode";
}

/* file box */
/*=========================================*/

div#file-box{
    position:absolute;
    left:20px;
    bottom:20px;
	box-shadow: 10px 5px 10px grey;
	background-color:white;
	padding:5px;
}

#save-file{
	background-color:white;
	padding:5px;
	text-align:center;
}

#save-file:hover{
	background-color:lightgreen;
}

#load-file{
	padding: 5px;
}