/* Responsive */

@media screen
{
	* { font-size: 10pt; }
}
@media screen and (min-device-width: 1900px)
{
	* { font-size: 11pt; }
}
@media screen and (max-device-width: 1200px) and (min-resolution: 100dpi) and (orientation: landscape)
{
	* { font-size: 16pt; }
}
@media screen and (max-device-width: 800px) and (min-resolution: 100dpi)
{
	* { font-size: 26pt; }
}

/* Global */

@font-face {
    font-family: 'Open Sans';
    src: url(opensans.ttf) format('truetype');
}
body
{
	margin: 0px;
}
body,
label,
button,
input,
textarea
{
	font-size: 1em;
	font-family: 'Open Sans', 'Verdana', 'Sans';
}
iframe
{
	border: 0;
}
fieldset,
div
{
	margin: 0;
}
form
{
	padding: 0;
	margin: 0;
}
table
{
	width: 100%;
}
a:link,
a:visited,
a:active
{
	color: #000;
	text-decoration: none;
}
a:hover
{
	text-decoration: none;
}
a img
{
	padding: 1px;
	border: 1px solid #EEE;
	border-color: transparent;
}
a img:hover
{
	border-color: #999;
}
h1, h2, h3, h4, h5, h6
{
	margin: 0;
	padding: 0.2em;
}
h1
{
	font-size: 1.5em;
}
h2
{
	font-size: 1.3em;
}
p
{
	margin: 0;
	margin-top: 16px;
	margin-bottom: 16px;
}

/* Inputs */

input,
textarea,
select
{
	border: 1px solid #CCD;
	margin: 0.2em;
	padding: 0.3em;
	border-radius: 0.1em;
	box-shadow: 0 0.1em 0.1em #CCC;
}
select
{
	background-color: white;
}
textarea
{
	height: 3.5em;
	width: 20em;
}
input[type=submit],
input[type=button]
{
	background-color: #EEF;
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus
{
	background-color: #EEF;
	border-color: #BBC;
}
input[type=submit]:hover,
input[type=button]:hover
{
	cursor: pointer;
	background-color: #DDE;
}
input[type=checkbox],
input[type=radio]
{
	width: 0.8em;
	height: 0.8em;
}
button
{
	border: none;
	background-color:  #009688;
	color: white;
	padding: 0.5em;
	cursor: pointer;
}
button.vn
{
	border: none;
	border-radius: 0.1em;
	box-shadow: 0 0.2em 0.2em #DDD;
	background-color: #AD4;
	color: black;
}
button.vn:hover
{
	background-color: #9C3;
	cursor: pointer;
}

/* Date chooser */

.date-chooser button
{
	border: 1px solid #CCD;
	margin: 0.2em;
	padding: 0.3em;
	border-radius: 0.1em;
	box-shadow: 0 0.1em 0.1em #CCC;
	background-color: white;
	color: black;
	text-align: left;
	min-width: 8em;
	min-height: 2.3em;
}

/* Float */

div.clear
{
	clear: both;
}

/* Box */

div.box
{
	background-color: white;
	margin: 0 auto;
	border-radius: 0.1em;
	box-shadow: 0 0.2em 0.2em #CCC;
}
div.box .header
{
	padding: 0.6em 0.8em;
	margin: 0;
	color: white;
	background-color: #009688;
}
div.box .header h1
{
	text-align: left;
	font-size: 1.5em;
	line-height: 1.7em;
	font-weight: normal;
	display: inline;
}
div.box .body
{
	padding: 2em;
}

/* Action bar */

div.action-bar
{
	float: right;
	padding: 0;
	background-color: #009688;
}
div.action-bar button
{
	float: left;
	padding: 0.4em;
	border-left: 1px solid white;
}
div.action-bar button:first-child
{
	border-left: none;
}
div.action-bar img
{
	vertical-align: middle;
	margin-right: 0.4em;
	height: 1.4em;
}

/* Form */

table.form
{
	padding: 1em;
	border-collapse: separate;
	border-spacing: 0.3em;
}
table.form td.label
{
	width: 45%;
	text-align: right;
}
table.form tr
{
	height: 2.8em;
}

/* Icon */

img.icon
{
	height: 1.5em;
}

/* Grid */

table.grid
{
	margin: auto;
	border-collapse: collapse;
	text-align: center;
	margin-bottom: 1em;
}
table.grid thead tr,
table.grid tfoot tr
{
/*	box-shadow: 0px 0.1em 0.1em #DDD;
	background-color: #AD4;
	border: 1px solid #CCD;
*/	background-color:  #009688;
	color: white /* #032 */;
	vertical-align: middle;
	text-align: center;
	height: 3em;
}
table.grid thead th
{
	cursor: pointer;
	font-weight: normal;
	padding: 0 0.4em;
}
table.grid thead th:hover
{
	background-color: #076 /* #DDE */;
}
table.grid tr
{
	height: 3.5em;
}
table.grid tfoot a,
table.grid thead a
{
	color: black;
}
table.grid tr.pair-row
{
	background-color: transparent;
}
td.grid-message
{
	height: 5em;
}
td.grid-message img
{
	vertical-align: middle;
	padding: 0.8em;
	height: 1.8em;
}
table.grid tbody tr
{
	border-top: 1px solid #DDD;
}
table.grid tbody tr:first-child
{
	border-top: none;
}
table.grid tbody td
{
	padding-right: 0.7em;
	padding-left: 0.3em;
}
table.grid tbody td:first-child,
table.grid thead th:first-child
{
	padding-left: 1em;
}
table.grid tbody td:last-child,
table.grid thead th:last-child
{
	padding-right: 1em;
}
input.cell-spin
{
	width: 2.5em;
	text-align: right;
}
button.cell-button
{
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
}
button.cell-button img
{
	height: 1.5em;
}

/* Calendar */

.calendar
{
	width: 20em;
	background-color: white;
	border: none /* 1px solid #CCD */;
	border-radius: 0.1em;
	box-shadow: 0 0.2em 0.2em #AAA;
}
.calendar table
{
	border-collapse: collapse;
}
.calendar thead tr,
.calendar tfoot tr
{
	background-color: #009688 /*#EEF*/;
	color: white;
	font-weight: normal;
	vertical-align: middle;
	text-align: center;
	height: 3em;
}
.calendar thead tr
{
	border-bottom: none /* 1px solid #CCD */;
}
.calendar tfoot tr
{
	border-top: none /* 1px solid #CCD */;
}
.calendar col
{
	width: 14.2%;
}
.calendar tr
{
	height: 2em;
}
.calendar tbody td
{
	text-align: right;
	padding-right: 0.5em;
}
.calendar td.highlight,
.calendar td:hover,
.button:hover
{
	cursor: pointer;
	background-color: #DDE;
}

/* Full image */

div.full-image
{
	position: fixed;
	background-color: #FFF;
	text-align: center;
	border: 1px solid #999;
	border-radius: 2px;
	z-index: 2;
}
div.image-loader
{
	position: fixed;
	background-color: #FFF;
	border: 1px solid #999;
	border-radius: 0.1em;
	z-index: 3;
}
div.image-loader img
{
	padding: 1em;
}

/* Image editor */

img.editable
{
	cursor: pointer;
}
div.image-editor
{
	background-color: white;
	border: 1px solid #999;
	border-radius: 0.1em;
	padding: 1.2em;
	width: 35em;
}
div.image-editor h3
{
	text-align: center;
	padding-bottom: 1em;
}
div.image-editor iframe
{
	display: none;
}
div.image-editor button
{
	margin-left: 0.5em;
	margin-right: 0.5em;
}
div.image-editor img
{
	visibility: hidden;
	vertical-align: middle;
	padding-right: 1em;
}