/*
PiAnoS (Picture Annotation System), A fingerprint examiner training tool
Copyright (C) 2011-2012 University of Lausanne, Switzerland
https://ips-labs.unil.ch/pianos

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see http://www.gnu.org/licenses/.
*/
body, html {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	/* This is needed to prevent the scrollbars from appearing initially, thus
	screwing the layout computation on the first run. Since the scrollbars will
	disappear right after the first layout(), the second layout() would do the
	correct computation. Hiding the overflow makes it right the first time. */
	overflow: hidden;
	/*background-color:black;*/
}

.ui-widget {
	font-family: Segoe UI, Arial, sans-serif;
	font-size: 0.9em;
}

.ui-inline-icon {
	display: inline-block;
}

.imageeditor_main {
	height: 100%;
	width: 100%;
	/*overflow: hidden;*/
}

.imageeditor_image_view {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	background-image: url("stripe2.png");
	width: 50%;
	height: 100%;
}

.imageeditor_image_view img {
	position: absolute;
}

.imageeditor_tools_view {
	/*background-color: red;*/
	position: absolute;
	top: 0;
	width: 50%;
	/*border: 0;
	padding: 0;*/
	height: 70%;
}

.imageeditor_tools_options {
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.5em;
	border-bottom: 0;
}

.imageeditor_tool_help {
	margin-bottom: 0.5em;
	padding: 0 0.5em;
}

.imageeditor_tool_help a {
	margin-left: 0.5em;
	font-size: 0.8em;
}

.imageeditor_tool_help a:hover, .imageeditor_tool_help a:active {
	text-decoration: underline;
}

.imageeditor_tool_exthelp {
	margin-bottom: 0.5em;
	margin-top: -0.5em;
	padding: 0.2em;
	border-top: 0;
}

.imageeditor_tool_exthelp span {
	font-size: 0.8em;
}

.imageeditor_tools_actions {
	padding: 0.3em;
	text-align: right;
	border-top: 0;
	background: #f7f7f7;
}

.imageeditor_tools_actions a.ui-button span.ui-button-text {
	padding: 0.2em 0.5em;
}

.imageeditor_filters_view {
	/*background-color: green;*/
	position: absolute;
	width: 50%;
	border: 0;
	height: 30%;
}

.imageeditor_filters_view div.ui-widget-content {
	margin: 0;
	padding: 0;
	overflow: auto;
}

.imageeditor_filter {
	padding: 0.2em 0.5em;
}

.imageeditor_tool_slider>span {
	margin: 0em 0.3em;
}

.imageeditor_tool_slider>span._value {
	float: right;
}

.imageeditor_tool_slider .ui-slider {
	margin: 0.2em 0.6em 0.2em 0.6em;
	height: 4px;
	/*display: inline-block;
	width: 50px;*/
}

.imageeditor_tool_slider .ui-slider .ui-slider-handle {
	width: 8px;
	margin-left: -4px;
	height: 8px;
	margin-top: 1px;
}

.imageeditor_tool_button {
	display: inline-block;
	text-align: center;
	min-width: 64px;
	padding: 0.5em;
	cursor: pointer;
	margin-right: 1em;
}

.imageeditor_tool_button .ui-icon {
	width: 48px;
	height: 48px;
	background-color: #dddddd;
	margin-left: auto;
	margin-right: auto;
	/*margin-top: 0.5em;*/
}

.imageeditor_tool_button .ui-label {
	/*height: 3em;*/
	margin: auto;
}

.imageeditor_tool_button .ui-label>span {
	/* Tries to vertically align the text in the button's label. Does not work - I think
	I have misunderstood how vertical-align works, or how to center a block in a block.*/
	display: inline-block;
	vertical-align: middle;
	font-size: 0.8em;
}

.imageeditor_filter>div:last-child {
	padding-left: 2em;
}

.imageeditor_filter>div.ui-icon:first-child {
	float: left;
}

.imageeditor_filter>div.ui-icon-closethick {
	float: right;
}