/***************************************************************************
 *                          (css) interface.css
 *                          -------------------
 *   begin                : 18-Jun-2014
 *   modified             : 11-Oct-2016
 *   copyright            : (C) 2016 Daniel Julivert
 *   email                : ghoulwiz@gmail.com
 *   description          : General interface CSS
 *
 ***************************************************************************/


/********************************************************************************
  Table of contents
*********************************************************************************
  Guide for z-index
  Guide for colors
  General page layout
  Links and buttons
  Main content
  Columns layouts
  Tables
  Box messages
  Forms and form fields
  Logo
  Login
  Navigation menu
  Footer
  Footer menu
*/

/********************************************************************************
  Guide for z-index
*********************************************************************************
	20 - Main content
	25 - Sticky headers
	30 - Main logo
	35 - Popup field hints, date field datepickers
	40 - Login floating box
	50 - Popup messages
	60 - Main menu
	70 - Editor popups
*/

/********************************************************************************
  Guide for colors
*********************************************************************************
	#ffffff - WHITE
		Background
		Logo text
		Menu hover text
	#222222 - DARKEST GREY
		Popup messages
		Entity editor glow
	#444444 - DARK GREY
		Text
		Footer background
	#888888 - MEDIUM GREY
		Logo backgroundI
		Input border and text
	#bbbbbb - ALMOST LIGHT GREY
		Text color for inactive data rows
	#cccccc - LIGHT GREY
		Menu hover background
		Menu borders
		Footer text
		Table borders
		Date picker selected date background
	#eeeeee - VERY LIGHT GREY
		Alternate table rows
		Readonly fields background
		Button hover background
		Subtables new button background
		Relational field hint and date picker hover background
	#00ccff - CYAN
		Input hover border
		Links hover text
		Buttons hover text and border
		Relational field hint and date picker hover text
*/

/********************************************************************************
  General page layout
********************************************************************************/

@import url(http://fonts.googleapis.com/css?family=Oswald);

html, body {
	height: 100%;
}
body {
	/*background-color: #ffffff;*/
	background: #ffffff url(../img/background.jpg) no-repeat center center fixed;
	background-size: cover;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	color: #444444;
	margin: 0px;
	padding: 0px;
	line-height: 1.8;
}

h1 {
	font-size: 18px;
	margin: 0px;
	padding: 0px;
}
h2 {
	font-size: 16px;
	margin: 0px;
	padding: 0px;
}
h3 {
	font-size: 14px;
	margin: 0px;
	padding: 0px;
}

.toolTip {
	cursor: help;
}

/********************************************************************************
  Links and buttons
********************************************************************************/

a, span.subTableDeleteButton, a.button, span.button, div.optionsStrip>a {
	color: #888888;
	text-decoration: none;
	outline: none;
}
a:hover, span.subTableDeleteButton:hover, a.button:hover, span.button:hover, div.optionsStrip>a:hover {
	color: #00ccff;
}

a.button, span.button, div.optionsStrip>a {
	font-family: Arial, Helvetica, sans-serif;
	border: 1px #888888 solid;
	padding: 1px 7px;
	background-color: #cccccc;
	transition: all .5s ease-in-out;
}
a.button:hover, span.button:hover, div.optionsStrip>a:hover {
	border-color: #00ccff;
	background-color: #eeeeee;
}

a.button, span.button {
	border-radius: 5px 15px;
}

div.optionsStrip{
	text-align: center;
	white-space: nowrap;
}
div.optionsStrip>a {
	margin-left: -1px;
}
div.optionsStrip>a.selected {
	background-color: #aaaaaa;
	color: #555555;
}
div.optionsStrip>a.selected:hover {
	background-color: #eeeeee;
	color: #00ccff;
}
div.optionsStrip>a:first-of-type {
	margin-left: 0px;
	border-radius: 5px 0px 0px 15px;
}
div.optionsStrip>a:last-of-type {
	border-radius: 0px 15px 5px 0px;
}

span.button, span.subTableDeleteButton {
	cursor: pointer;
}

span.newSubTable {
	font-size: 10px;
	padding: 0px 6px;
	background-color: #eeeeee;
}

a img {
	border: none;
}

span.deleteButton {
	color: #bb3333;
	border-color: #bb3333;
	background-color: #ff9999;
}

/********************************************************************************
  Main content
********************************************************************************/

#wrapper {
	min-height: 100%;
}

#mainContent {
	margin-left: 200px;
	margin-right: 70px;
	padding-top: 130px;
	padding-bottom: 180px;  /* same as #footer height */
	z-index: 20;
	text-align: justify;
}

.centeredContent {
	text-align: center !important;
}
.centeredContent table {
	margin-left: auto;
	margin-right: auto;
}

code {
	border: 1px #bbbbbb solid;
	background-color: #eeeeee;
	padding: 0px 3px;
	border-radius: 5px;
}

/********************************************************************************
  Columns layouts
********************************************************************************/

.equalThreeColumns {
	float: left;
	position: relative;
	margin: 0px 1% 0px 1%;
	overflow: hidden;
	width: 31%;
}

.equalTwoColumns {
	float: left;
	position: relative;
	margin: 0px 1% 0px 1%;
	overflow: hidden;
	width: 48%;
}

/********************************************************************************
  Tables
********************************************************************************/

table {
	border-spacing: 0px;
	border-collapse: collapse;
	text-align: center;
	width: 100%;
}

th, td {
	padding: 0px;
}
table.strippedListNoHover>thead>tr>th,
table.strippedList>thead>tr>th {
	background-color: #ffffff;
	border-top: 2px #cccccc solid;
	border-bottom: 2px #cccccc solid;
}

table.strippedListNoHover>tbody>tr:nth-of-type(odd),
table.strippedList>tbody>tr:nth-of-type(odd) {
	background-color: #ffffff;
}
table.strippedListNoHover>tbody>tr:nth-of-type(even),
table.strippedList>tbody>tr:nth-of-type(even) {
	background-color: #eeeeee;
}
table.strippedList>tbody>tr:hover {
	background-color: #FFFF99 !important;
}

table.strippedListNoHover>tfoot>tr>td,
table.strippedList>tfoot>tr>td {
	background-color: #ffffff;
	border-top: 2px #cccccc solid;
	border-bottom: 2px #cccccc solid;
	font-style: italic;
	color: #888888;
}

tr.inactiveDataRow>td {
	color: #bbbbbb;
}

.filterInput {
	width: 50%;
	margin-bottom: 5px;
	border: 1px #cccccc solid;
}

/********************************************************************************
  Box messages
********************************************************************************/

#boxMessages {
	text-align: center;
	position: relative;
	top: 130px;
	width: 50%;
	left: 25%;
}
#boxPopup {
	text-align: center;
	position: fixed;
	top: 150px;
	width: 300px;
	left: 50%;
	margin-left: -150px;
	z-index: 50;
	padding: 15px;
	box-shadow: 0px 0px 10px #222222;
	border-radius: 10px;
	background-color: #ffffff;
}
#boxPopupClose {
	margin-top: 10px;
	margin-bottom: -10px;
	cursor: pointer;
	color: #888888;
}
#boxPopupClose:hover {
	color: #00ccff;
}

.boxError {
	box-shadow: 0px 0px 10px #cc0000;
	border-radius: 5px 15px;
	background: #ffffff;
	padding: 5px;
}
.boxError b:first-child {
	color: #cc0000;
}

.boxWarning {
	box-shadow: 0px 0px 10px #ff6600;
	border-radius: 5px 15px;
	background: #ffffff;
	padding: 5px;
}
.boxWarning b:first-child {
	color: #ff6600;
}

.boxMessage {
	box-shadow: 0px 0px 10px #009900;
	border-radius: 5px 15px;
	background: #ffffff;
	padding: 5px;
}
.boxMessage b:first-child {
	color: #009900;
}

/********************************************************************************
  Forms and form fields
********************************************************************************/

form {
	margin: 0px;
	padding: 0px;
}

label {
	margin: 0px 5px 0px 10px;
}
.noWrap {
	white-space: nowrap;
}

textarea, input, select {
	font-family: Arial, Helvetica, sans-serif;
	border: 1px #888888 solid;
	font-size: 12px;
	color: #888888;
	padding: 0px 5px 0px 5px;
	transition: all .5s ease-in-out;
}
input, select {
	border-radius: 5px 15px;
}
textarea {
	border-radius: 15px 15px 5px 15px;
}
input, select:not([multiple]) {
	height: 17px;
}
input.inputNumeric {
	text-align: right;
}
input.inputLang {
	background-image: url('../img/icon-languagefield.png');
	background-repeat: no-repeat;
	background-position: right 5px center;
}
input.hourField {
	text-align: center;
}
textarea {
	width: 95%;
	height: 100px;
}

input[readonly] {
	background-color: #eeeeee;
}
input[type=submit] {
	background-color: #cccccc;
	height: 19px !important;
}

#formButtons {
	margin-bottom: 10px;
}

/* ----------- Hovers and focus ----------- */

textarea:hover, textarea:focus, input:hover, input:focus, select:hover, select:focus {
	border: 1px #00ccff solid;
}
textarea:focus, input:focus, select:focus {
	box-shadow: 0px 0px 2px #888888;
}
input[type=submit]:hover, input[type=submit]:focus {
	background-color: #eeeeee;
	color: #00ccff;
}
input[type=submit]:hover {
	cursor: pointer;
}

/* ----------- Select fields ----------- */

select {
	appearance: none;
	-webkit-appearance: none; /*Removes default chrome and safari style*/
	-moz-appearance: none; /*Removes default style Firefox*/
	background-image: url('../img/icon-dropdown.png');
	background-repeat: no-repeat;
	background-position: right 5px center;
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: ""; /* Removes default arrow from firefox */
	padding-right: 15px;
}
select::-ms-expand { display: none; } /* Removes default arrow from internet explorer */

/* ----------- Relational fields ----------- */

input.relField {
	background-image: url('../img/icon-relational.png');
	background-repeat: no-repeat;
	background-position: right 5px center;
	padding-right: 25px;
}
.relWrapper {
	position: relative;
}
.relHint {
	line-height: 0.8;
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	left: 10px;
	top: 17px;
	right: 3px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	border: 1px #cccccc solid;
	border-top: none !important;
	border-radius: 0px 0px 5px 5px;
	color: #888888;
	background: #ffffff;
	display: none;
	z-index: 35;
	cursor: pointer;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 90px;
	white-space: nowrap;
}
.relHint li {
	padding: 5px;
}
.relHint li small {
	padding-left: 10px;
}
.relHint li:hover {
	color: #00ccff;
	background-color: #eeeeee;
}
.relHintHighlight {
	font-weight: bold;
	color: #444444;
}
.relHint li:hover > .relHintHighlight,
.relHint li:hover > small > .relHintHighlight {
	color: #00ccff;
}

/* ----------- Date fields ----------- */

input.dateField, input.dateTimeField {
	background-image: url('../img/icon-date.png');
	background-repeat: no-repeat;
	background-position: right 6px center;
}
input.dateField     { width:  80px; }
input.dateTimeField { width: 130px; }

.dateWrapper {
	position: relative;
}
.datePicker {
	display: none;
	position: absolute;
	left: -35px; /* negative of: half of picker width (170), minus half of field width (80), plus ten (10) */
	top: 17px;
    width: 168px;
	border-radius: 15px;
	border: 1px #cccccc solid;
	background-color: #ffffff;
	padding: 2px;
	z-index: 35;
}

.datePicker table {
	border-spacing: 0px;
	border-collapse: collapse;
	text-align: center;
    display: inline-table;
}
.datePicker table, .datePicker tr, .datePicker tr:hover, .datePicker td, .datePicker th, .datePicker .timePicker div {
	background: none;
	border: none;
	color: #888888;
}
.datePicker tbody tr:nth-of-type(odd) {
	background: none;
}
.datePicker tbody tr:nth-of-type(even) {
	background: none;
}
.datePicker tbody tr:hover {
	background: none !important;
}

.datePicker thead tr:not(:first-child) th {
	font-weight: normal;
}

.datePicker tbody td {
	width: 14%;
}
.datePicker .datePickerClickable {
	cursor: pointer;
	border-radius: 15px;
}
.datePicker .datePickerClickable:hover,
.datePicker .timePickerFace .datePickerClickable:hover,
.datePicker .timePickerControl .datePickerClickable:hover {
	color: #00ccff;
	background-color: #eeeeee;
}
.datePicker tbody td.datePickerSelectedDay,
.datePicker .timePickerFace .datePickerSelectedDay,
.datePicker .timePickerControl .datePickerSelectedDay {
	background-color: #888888;
	color: #ffffff;
}
.datePicker tbody td.datePickerToday {
	background-color: #cccccc;
}
.datePickerSetToday, .datePickerSetNone {
	font-style: normal;
}

.datePicker .timePicker {
    width: 150px; /* width of time picker */
    height: 72px; /* height of time picker */
    display: inline-block;
}
.timePicker .timePickerFace {
    position: relative;
    width: 70px; /* width of clock face */
    height: 70px; /* height of clock face */
    border-radius: 70px; /* clock face round corner radius */
    background: white;
    box-shadow: inset 0 0 10px gray;
    border: 0 solid gray; /* thickness of outer border */
    display: inline-block;
    font-size: 10px;
    margin-right: 3px;
}
.timePicker .timePickerFace .timePickerMarkerHour12,
.timePicker .timePickerFace .timePickerMarkerHour24,
.timePicker .timePickerFace .timePickerMarkerMinute,
.timePicker .timePickerFace .timePickerMarkerSecond {
    position: absolute;
    width: 16px;
    z-index: 0;
    left: 50%;
    height: 50%;
    top: 0;
    margin-left: -8px; /* set this value of 1/2 marker width */
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
}
.timePicker .timePickerControl {
    position: relative;
    display: inline-block;
    width: 70px; /* width of control */
    height: 70px; /* height of control */
    margin-left: 3px;
    top: -5px;
}
.timePicker .timePickerControl div {
    height: 16px;
    line-height: 16px;
}
.timePicker .timePickerControl .timePickerControlHour12,
.timePicker .timePickerControl .timePickerControlHour24 {
    width: 50%;
    display: inline-block;
}

/* ----------- Subtables (inside fieldsets) ----------- */

fieldset {
	border-radius: 15px;
	border: 1px #cccccc solid;
	margin: 10px 10px;
	background-color: #ffffff;
	box-shadow: 0px 0px 10px #cccccc;
}
fieldset legend {
	border-radius: 15px;
	border: 2px #cccccc solid;
	padding: 0px 10px;
	margin-left: 10px;
	font-weight: bold;
	color: #888888;
	background-color: #ffffff;
}

tr.masterRow {
	display: none;
}

/********************************************************************************
  Logo
********************************************************************************/

@keyframes logoAppear {
	from {top: 100%;}
	to {top: 30px;}
}

#logo {
	position: absolute;
	top: 30px;
	left: 50px;
	width: 100px;
	height: 100px;
	background: #888888;
	border-radius: 50px;
	z-index: 30;
	transition: box-shadow .5s ease-in-out;
	font-weight: bold;
	font-size: 20px;
	animation: logoAppear 1.5s ease-out;
	box-shadow: 0px 0px 20px #cccccc;
}
#logo a {
	position: absolute;
	text-align: center;
	width: 100%;
	height: 100%;
	color: #ffffff;
}
#logo:hover {
	box-shadow: 0px 0px 20px #00ccff;
}

/********************************************************************************
  Login
********************************************************************************/

#loginBox {
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 9px;
	z-index: 40;
	text-align: right;
}

#loginBox input {
	font-size: 9px;
	height: 12px !important;
}
#loginBox input[type=submit] {
	height: 14px !important;
}

/********************************************************************************
  Navigation menu
********************************************************************************/

/* ----------- Main menu ----------- */

#navMenu {
	position: absolute;
	top: 50px;
	left: 200px;
	right: 70px;
	z-index: 60;
	font-weight: bold;
	text-transform: uppercase;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	overflow: visible;
	border-bottom: 2px #cccccc solid;
}

#navMenu li {
	float: right;
	overflow: hidden;
	padding-left: 25px;
	padding-right: 25px;
	border-right: 2px #cccccc solid;
}

#navMenu li:first-of-type {
	border: 0px;
}

#navMenu a:link, #navMenu a:visited {
	width: 100px;
	display: block;
	color: #444444;
	text-align: center;
	padding: 4px;
	text-decoration: none;
	overflow: hidden;
}

#navMenu a:hover, #navMenu a:active {
	background-color: #cccccc;
	color: #ffffff;
	border-radius: 10px 10px 0px 0px;
}

/* ----------- Submenus ----------- */

#navMenu li ul {
	position: absolute;
	opacity: 0;
	margin-left: 10px;
	visibility: hidden;
	list-style-type: none;
	overflow: hidden;
	border: 2px #cccccc solid;
	border-radius: 0px 0px 10px 10px;
	margin: 0px;
	padding: 0px;
	text-transform: none;
	font-variant: small-caps;
	transition: all .5s ease-in-out;
}

#navMenu li ul li {
	float: none;
	padding: 0px;
	border: 0px;
}

#navMenu li ul li a:link, #navMenu li ul li a:visited {
	background-color: #ffffff;
}

#navMenu li ul li a:hover, #navMenu li ul li a:active {
	background-color: #cccccc;
	color: #ffffff;
	border-radius: 0px;
}

/*
#navMenu ul li:first-child a:before {
	content: '';
	position: absolute;
	left: 46px;
	top: -8px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid #ffffff;
}
*/

/* ----------- Behaviour ----------- */

#navMenu li:hover > ul {
	opacity: 1;
	visibility: visible;
}

/********************************************************************************
  Footer
********************************************************************************/

footer#footer {
	/*background: #444444 url(../img/background-dark.jpg) no-repeat center center fixed;
	background-size: cover;*/
	background-color: #444444;
	position: relative;
	width: 100%;
	margin-top: -170px; /* same as height, but 10 smaller for some whitespace */
	height: 180px;
	clear:both;
	text-align: center;
	font-size: 9px;
	color: #888888;
	padding-top: 10px;
	line-height: 1.2;
}

footer#footer #footerCopyright {
	/* --- Older style, processed time was not centered but did not overlap
	float: left;
	margin-left: 100px;
	*/
	position: absolute;
	bottom: 15px;
	left: 100px;
	text-align: left;
}

footer#footer #footerVersion {
	/* --- Older style, processed time was not centered but did not overlap
	float: right;
	margin-right: 100px;
	*/
	position: absolute;
	bottom: 15px;
	right: 100px;
	text-align: right;
}

/********************************************************************************
  Footer menu
********************************************************************************/

/* ----------- Main footer menu ----------- */

footer#footer ul#footerMenu {
	text-align: left;
	font-weight: bold;
	text-transform: uppercase;
	list-style-type: none;
	margin: 0px 100px 10px 100px;
	padding: 0px 0px 50px 0px;
	border-bottom: 2px #555555 solid;
}

footer#footer ul#footerMenu li {
	text-align: left;
	display: inline-table;
	padding-left: 25px;
	padding-right: 25px;
}

footer#footer ul#footerMenu a:link, footer ul#footerMenu a:visited {
	width: 100px;
	text-align: left;
	padding: 4px;
	text-decoration: none;
}

/* ----------- Footer submenus ----------- */

footer#footer ul#footerMenu li ul {
	font-weight: normal;
	text-transform: none;
	margin-left: 10px;
	list-style-type: none;
	overflow: hidden;
	margin: 0px;
	padding: 5px 0px 0px 0px;
	transition: all .5s ease-in-out;
}

footer#footer ul#footerMenu li ul li {
	display: block;
	padding: 2px 0px 0px 0px;
}

/********************************************************************************
  Small screens
********************************************************************************/

@media screen and (max-width:680px) {
    #mainContent {
        margin-left: 10px;
        margin-right: 10px;
        padding-top: 130px;
        padding-bottom: 180px;  /* same as #footer height */
        z-index: 20;
        text-align: justify;
    }
    #logo {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 80px;
        height: 80px;
        font-size: 16px;
        animation: none;
    }

    #navMenu {
        top: 30px;
        left: 10px;
        right: 10px;
    }
    #navMenu li {
        padding-left: 10px;
        padding-right: 10px;
    }
    #navMenu a:link, #navMenu a:visited {
        min-width: 50px;
        width: auto;
    }
    #navMenu li ul {
    }
}