/* LICENSE ********************************************************************/


/*
 * TODO
 */


/* CODE ***********************************************************************/


#workspace,
#workspace div,
#workspace canvas {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: absolute;
	margin: 0;
	padding: 0;
}


ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}


#workspace {
	top: 25px;
	left: 0;
	width: 100%;
	height: calc(100% - 25px - 25px);
}


#curvesView {
	top: 0;
	left: 0;
	width: 35%;
	height: 100%;
	border-right: 1px solid gray;
}


#curvesView .optionPanel > * {
	display: inline-block;
}


.paramPanel {
	top: 0;
	left: 0;
	width: 30%;
	height: calc(100% - 42px);
	background-color: #DDD;
	border-right: 1px solid gray;
	box-sizing: content-box;
	overflow-x: hidden;
	overflow-y: auto;
}


.paramPanel hr {
	border-color: #CCC;
	margin: 0.75em 3px;
}


.optionPanel {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 42px;
	background-color: #DDD;
	border-top: 1px solid gray;
	overflow-x: hidden;
	overflow-y: auto;
}


.paramPanel div.wrapper,
.optionPanel div.wrapper {
	position: static !important;
}


#curvesView canvas, #meridianCanvas2, #revolCanvas2 {
	top: 0;
	right: 0;
	width: calc(70% - 1px);
	height: calc(100% - 42px);
	background-color: white;
	/*border: solid #5f8 1px;*/
}


.viewer {
	background-color: #BBB;
}


/* Fix firefox bug for "outline: none"
 * (see: http://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox)
 */
input[type=range]::-moz-focus-outer {
    border: 0;
}


.buttonGroup {
	width: 100%;
	height: 100%;
}


.buttonGroup label {
	height: 100%;
	width: 42px;
	box-sizing: border-box;
    border-style: none solid;
}


.buttonGroup input[type=radio] + div {
	position: relative !important;
	left: 2px;
	display: none;
}


.buttonGroup input[type=radio]:checked + div {
	display: inline-block;
	vertical-align: top;
}


.buttonGroup .ui-corner-left,
.buttonGroup .ui-corner-right {
	border-radius: 0;
}


.buttonGroup label[for] {
	background-position: center;
	background-repeat: no-repeat;
}


.optionGroup p {
	text-align: center;
	padding: 0;
	margin: 0;
}


label[for=meridianPrimitive], label[for=revolPrimitive] {
	background-image: url("wave.png");
}


label[for=meridianFreeHand] {
	background-image: url("pencil.png");
}


label[for=meridianFormula], label[for=revolFormula] {
	background-image: url("formula.png");
}



	/*** Menu ***/


/*fileMenu*/
/*viewMenu*/
/*	camera*/
/*toolsMenu*/
/*	handFreeDrawing*/
/*surfaceMenu*/
/*	showSlice*/
/*exportMenu*/
/*	downloadImage*/
/*	tool3D*/
/*helpMenu*/
/*translatemenu*/



	/*** Meridian ***/


#meridianView {
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	border-bottom: 1px solid gray;
}


#meridianType .optionGroup {width: calc(100% - 3 * 42px - 1px);}
#revolType .optionGroup {width: calc(100% - 2 * 42px - 2px);}


#meridianOption .formulaInput input {
	width: calc(100% - 4em);
}


#meridianCanvas {
	border: 1px solid gray;
}



	/*** Revolution ***/


#revolView {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
}


#revolOption .formulaInput input {
	width: calc(100% - 7em);
}



	/*** Surface ***/


#surfaceView {
	top: 0;
	right: 0;
	width: 65%;
	height: 100%;
}


#surfaceView .paramPanel {
	top: 2em;
	right: 0;
	left: auto;
	width: 20%;
	height: calc(100% - 2em);
	border-right: none;
	border-left: 1px solid gray;
}


#surfaceView .optionPanel {
	top: 0;
	left: 0;
	width: 100%;
	height: 2.1em;
	line-height: 1.99em;
	border-top: none;
	border-bottom: 1px solid gray;
	padding-right: 20%;
	text-align: center;
}


#surfaceView .optionPanel .wrapper {
/*	padding: 0.2em 0 0 0;*/
	vertical-align: middle;
}


#surfaceCanvas,
#surfaceCanvas .popupMessage {
	bottom: 0;
	left: 0;
	width: 80%;
	height: calc(100% - 2em);
	background-color: #121214;
}



	/*** Messages ***/


.popupMessage {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 100;
	text-align: center;
}


.popupMessage .flexWrapper {
	height: 100%;
}


.popupMessage > * {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}


.popupMessage p {
	width: 70%;
	color: white;
	text-shadow: 0px 0px 5px #666;
	font-family: "Liberation Sans", "Arial", sans-serif;
	font-size: 2em;
	text-align: center;
	margin: 0;
	margin-top: 25%;
}


.popupMessage button,
.popupMessage .buttonLike {
	color: white;
	background-image: -moz-linear-gradient(#4E88C7, #396EA8);
	border-radius: 0.5em;
	-moz-box-shadow: 2px 2px 5px #0C427D;
	-webkit-box-shadow: 2px 2px 5px #0C427D;
	box-shadow: 2px 2px 5px #0C427D;
	padding: 0.3em 0.5em;
	margin: 0 1.5em;
	font-size: 1em;
	font-family: "Ubuntu", "Liberation Sans", "Arial", sans-serif;
}


.popupMessage a,
.popupMessage a:visited,
.popupMessage a:hover,
.popupMessage a:active {
	color: white;
	text-decoration: none;
}


.popupMessage .buttonBar {
	margin-top: 0;
	margin-bottom: 25%;
}