/**
 * common.css
 *
 * @author Julian E.Spina (jes@acca3.it)
 */

/* Color Palette */

/* Play and Pause Icons */

:root {
	--bg: #e0e0e0;
	--bg-dark: #d0d0d0;
	--bg-light: #eee;
	--fg: #333;

	--bg-col1: #000;
	--fg-col1: #eee;
	--fg-col2: #333;

	--bg-col1-menuhover: #3498db; /* blue */

	--fg-col1-logo: #3498db;
	
	/** 
	 * Icons 
	 * Used by play/pause buttons and TABS 
	 */

	--bg-icon: transparent;
	--bg-icon-selected: #999;	/* selected icon, button or graphical element */	
	--bg-icon-border: #666;		/* icon border at hover */
	--fg-icon-disabled: #aaa;	/* icon disables */

	/**
	 * Accordions
	 */
	 
	--bg-accordion: #999;
	--bg-accordion-hover: #666;
	--bg-accordion-active: #333;
	--fg-accordion: #000;
		
	/**
	 * Buttons
	 */
	
	--fg-button: #333;		/* dark gray */
	--fg-button-selected: #eee;
	--bg-button-hover: #eee;
	--bg-button: #3498db;		/* blue */
	
	/** 
	 * MENU links 
	 */
	
	--bg-menubox-selected: #fefe66;
	--bg-menubox-hover: #eee;
	
	/**
	 * Table 
	 */
	
	--fg-table: #333;
	--bg-table: #c1c1c1;
	--bg-tr-dark: #d0d0d0;
	--bg-tr-light: #e0e0e0;
	--bg-tr-hover: #c1c1c1;
	--bg-td-border: #999;

	--fg-nav-link: #666;
	--fg-nav-link-selected: #000;
	--fg-nav-icon: #666;
	
	/**
	 * Input fields
	 */
	 
	--border-normal: #333;
	--border-error: red;
	
	/** 
	 * TOAST & MESSAGES 
	 */
	 
	--bg-toast-ok: green;
	--fg-message-ok: green;
}

/*
 * CSS RESET
 */
 	html, body { height: 100%; }
 	
	body {
		background: var(--bg);
		font-family: arial;
		font-size: 16px;
		z-index: 5;
	}

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		border-style: none;
		border-color: inherit;
		border-width: 0;
		margin: 0;
		padding: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
	}
	
	SELECT { padding: 0.25em 0.5em }

/* Basic classes */

.left { float: left; }
.right { float: right; }
.relative { position: relative; }
.absolute { position: absolute; }

.small { font-size: 0.837em; }
.uppercase { text-transform: uppercase; }
.hidden { display: none !important; }
.push { clear: both; }

.clearfix {
  overflow: auto;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.pointer { cursor: pointer; }

/*
 * COMMON
 */

.top05 { margin-top: 0.5em; }
.top1 { margin-top: 1em; }
.top2 { margin-top: 2em; }
.bottom05 { margin-bottom: 0.5em; }
.bottom1 { margin-bottom: 1em; }
.no-margin { margin: 0 !important; }
.right1 { margin-right: 1em; }
.line15 { line-height: 1.5em; }
.text-left { text-align: left; }
.center { text-align: center; }
.text-right { text-align: right; }
.f07 { font-size: 0.75em; }
.f08 { font-size: 0.875em; }
.f09 { font-size: 0.937em; }
.f12 { font-size: 1.2em; }
.w33 { width: 33.3%; }
.w95 { width: 95%; }


/*
 * COMPONENTS - buttons
 */

.standardDatePicker {
	font-size: 0.937rem;
	background: white; 
	cursor: pointer; 
	padding: 5px 10px; 
	border: 1px solid #ccc;	
}

.smallButton {
    font-size: 0.8rem;
    background: var(--bg-icon) none repeat scroll 0 0;
    border: 1px solid var(--bg-icon-border);
    padding: 0.3rem 0.9rem;
    color: var(--fg);
}
.smallButton:hover {
	cursor: pointer;
	background: var(--bg-button-hover);
}

.smallButton.buttonDisabled:hover {
	background: #999999 none repeat scroll 0 0;
}

.buttonDisabled {
	opacity: 0.50;
	font-style: italic;
	color: #bbb;
}

/* This button is used expecially in col2 */

.roundBigButton {
    font-size: 1rem;
    background: var(--bg-icon) none repeat scroll 0 0;
    border: 1px solid var(--bg-icon-border);
    padding: 0.3rem 0.9rem;
    color: var(--fg);
}
.roundBigButton:hover {
	cursor: pointer;
	background: var(--bg-button-hover);
}

.roundBigButton.buttonDisabled:hover {
	background: #999999 none repeat scroll 0 0;
}

.buttonPanel {
	background: #eee;
	padding: 1em;
	border: 1px solid #aaa;
	margin-top: 1em;
	text-align: center;
}

/* new buttons */

.btnForm {
	font-family: 'Ubuntu', sans-serif;
	cursor: pointer;
	padding: 0.45rem 1.9rem;		
	color: #fff;
	border: 1px solid var(--bg-button);
	background: var(--bg-button);
	outline: 0;
	-moz-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;	
}

.btnForm:hover {
	background: #217dbb;
}

INPUT[type='text'], INPUT[type='password'] { 
	border-radius: 3px; 
	border-color: var(--border-normal);
	height: 1.8em;
	padding: 0 0.5em 0;
	outline: none;
}

SELECT.error, INPUT[type='text'].error { 
	border-color: var(--border-error); 
}

I.helpIcon { cursor: pointer; }

I.helpIcon:hover {
  color: var(--bg-col1-menuhover);
}

/*
 * Popup
 */
 
#popupLog textarea.logContext { 
	width: 90%; 
	padding: 0.5rem 1rem; 
	font-family: "Courier New", monospace;
	font-size: 0.8rem;
}

/*
 * Header
 */

.header I { color: var(--fg); }
.header > p { font-size: 1em; }
.header .iconHeader { margin-right: 0.7em; cursor: pointer; }
.header .iconHeader.hasNotification { color: red; }
 
.commonUsername { font-size: 0.937em; cursor: pointer; }

/*
 * Menu
 */

NAV.horizontalMenu { 
	height: 5em; 
	font-size: 0.837em; 
}

NAV.horizontalMenu.small { height: 3em; }

NAV.horizontalMenu a, NAV.horizontalMenu a:active, NAV.horizontalMenu a:visited, NAV.horizontalMenu a:link {
	color: var(--fg-button);
	text-decoration: underline;
}

/* This is a link type - horizontal menu */

NAV.horizontalMenu > A { margin-right: 0.5em; }

/* This is a button type - horizontal menu */

NAV.horizontalMenu .menuEntry { 
	float: left;
	margin-right: 0.6em;
	border: 1px solid #aaa;
}

NAV.horizontalMenu .line {
	height: 2.25em; 
	margin-bottom: 0.5em;
}

NAV.horizontalMenu .line1 .menuEntry { 
	padding: 0.5em;
}

NAV.horizontalMenu .line:not(.line1) .menuEntry { 
	padding: 0.2em 0.5em;
}

NAV.horizontalMenu .menuEntry:hover { background: var(--bg-menubox-hover); }

NAV.horizontalMenu .menuEntry.selected { 
	color: var(--fg-button-selected);
	background: var(--bg-col1-menuhover); 
}

NAV.horizontalMenu .line2 { clear: both; }

/* 
 * Icons in page
 */

I.clickable { cursor: pointer; border: 1px solid transparent; padding: 2px; font-size: 1.25rem; }
I.clickable:hover { border: 1px solid var(--bg-icon-border); border-radius: 3px; }
 
/*
 * Page titles and tables
 */

H1.pageTitle { padding: 0.5em 0; }

TABLE, TABLE a:active, TABLE a:visited, TABLE a:link { color: var(--fg-table); }

TABLE td { zoom: 90% }

TABLE.tblFilter { 
	width: 100%; 
	margin-bottom: 1.2rem;
}

TABLE.tblFilter TD { padding: 0 0.5em; }
TABLE.tblFilter.noBorder { border:0; }

TABLE.tblDataHeader { width: 100%; background: var(--bg-table); margin: 0; border-radius: 4px; height: 2em; font-size: 1.125rem;}
TABLE.tblDataHeader TH { padding: 0 1em; vertical-align: middle; }
TABLE.tblDataHeader TH.last { padding: 0 1em 0 0; } 
TABLE.tblDataHeader TH I { cursor: pointer; border: 1px solid transparent; padding: 2px; }
TABLE.tblDataHeader TH I:hover { border: 1px solid var(--bg-icon-border); border-radius: 3px; }

TABLE.tblData { width: 100%; background: var(--bg-table); margin: 0 0 0.1em; border-radius: 4px; }
TABLE.tblData td { 
	border-right: 1px solid var(--bg-td-border); 
	height: 1.875em; 
	max-height: 1.875em; 
	overflow: hidden; 
}
TABLE.tblData td span { font-size: 0.837rem; }
TABLE.tblData .trHeader { background: #e0e0e0; color: #666; font-weight: bold; }
TABLE.tblData .trHeader TD { text-align: center; }
TABLE.tblData TR TH { font-size:1rem; background: var(--bg-tr-light); color: #666; height: 2em; line-height: 2em;}
TABLE.tblData TR:nth-child(2n+3) {background: var(--bg-tr-light); }
TABLE.tblData TR:nth-child(2n+3):hover {cursor: auto; background: var(--bg-tr-hover); }
TABLE.tblData TR:nth-child(2n+2) {background: var(--bg-tr-dark); }
TABLE.tblData TR:nth-child(2n+2):hover {cursor: auto; background: var(--bg-tr-hover);}
TABLE.tblData TR { line-height: 1.6em; }

TABLE.tblData I.iconSort {
	margin: 0 0 0 4px;
}
TABLE.tblData I.iconSort.sortAsc {
	margin: 0 0 0 10px;
}

.popup .popupBody I, TABLE.tblData I { 
	cursor: pointer; 
	border: 1px solid transparent; 
	padding: 2px;
	font-size: 1.125rem; 
}
.popup .popupBody I.disabled, TABLE.tblData I.disabled { cursor: auto; color: var(--fg-icon-disabled); }
.popup .popupBody I:hover:not(.disabled), TABLE.tblData I:hover:not(.disabled) { border: 1px solid var(--bg-icon-border); border-radius: 3px; }

/*
TABLE .tblActions { 
	padding-right: 0.75em;
}
TABLE .tblActions.last { padding-right: 0; }
*/
TABLE INPUT[type='text'] { max-width: 15.625em; } /* max: 250px */

/*
 * Col1 and Col2 specific
 */

UL { list-style-type: none; }

a { text-decoration: none; }

.innerContainer { 
	display: table; 
	width: 99%;
}

.col1 { 
	display: table-cell;
	vertical-align: top;
	position: relative; 
	width: 18%;
	min-width: 95px;
	max-width: 200px;	
	background: var(--bg-col1); 
	color: var(--fg-col1); 
	overflow: hidden; 
}

.col1.clicked { width: 1.875em; }
.col1 DIV.menuButton { height: 2.5em; line-height: 2.5em; width: 100%; overflow: hidden; }
.col1 DIV.menuButton SPAN { display: none; } /* hide menu text at landing */
.col1 DIV.menuButton:hover { background: var(--bg-col1-menuhover); }
.col1 DIV.menuButton.selected  { background: var(--bg-col1-menuhover); }
.col1 A, .col1 A:active, .col1 A:visited, .col1 A:link { color: var(--fg-col1); }
.col1 DIV SPAN { font-size: 0.9em; }

nav#leftMenu {	
	margin-bottom: 1rem;
}

nav#leftMenu DIV.fg-logo {
	height: 4rem;
	margin-bottom: 5.5rem;
	text-align: center;
}

.col1 .fg-logo P { 
	font-size: 1.2rem; 
	font-weight: bold; 
	color: var(--fg-col1-logo); 
	padding-top: 2rem;	
}

nav#leftMenu DIV.fg-logo IMG { 
	width: 98%; 
	margin-left: 1%;
	padding-top: 0.5rem;
}

.col1 DIV.firstLineMenu { position: relative; }

.col1 i { 	 
	width: 0.9em; 
	border-radius: 5px; 
	margin: 0 0.75em; 
	text-align: center;
}

.col1 i.resizeMenuColumn { 
	position: absolute; 
	cursor: pointer; 
	z-index: 10; 
	top: 0.75rem; 
	right: 0; 
	transition: all 0.5s;
}
.col1 i.resizeMenuColumn:hover { 
	color: #999;
	/* background: var(--bg-icon-selected);  */
}
.col1 i.resizeMenuColumn.clicked { transform: rotate(180deg);}

.col2 { 
	display: table-cell;
	color: var(--fg-col2); 
	height: 100%; 
	padding-left: 2%; 
	/* width: 78%; */
	min-width: 250px; 
	overflow: hidden; 
}
.col1.clicked ~ .col2 { width: calc(90% - 1.85em) }
.col2 .header { padding: 1em 0; margin-bottom: 1em; border-bottom: 1px solid #999; }

.col2 .content { 
	margin-bottom: 1em; 
	font-size: 1rem;
}

ul.tabElementHeader.nav > li { float: left; }
ul.tabElementHeader.nav > li.last { float: none; }

ul.tabElementHeader.nav > li > a {
	color: #333;
	background: var(--bg-icon);
	padding: 16px; /* pixel for perfect alignment with box beneath */
	margin-right: 0.5em;
	border-radius: 3px 3px 0 0;
	border: 1px solid var(--bg-icon-border);
}

ul.tabElementHeader.nav > li > a:hover {
	background: var(--bg-button-hover);
}

ul.tabElementHeader.nav > li > a.selected {
	background: var(--bg-icon-selected);
}

div.tabElementBody {
	border: 1px solid #333;
	min-height: 500px;
	padding: 0.9em;
	margin-top: 16px;
	border-radius: 3px;
}

/*
 * Page messages
 */

DIV.validationError {
	border: 1px solid red;
	font-size: 0.837em;
	margin-bottom: 1em;
	padding: 0.5em;
}

DIV.messageOkColor {
	font-size: 0.837em;
	margin-bottom: 1em;
	color: var(--fg-message-ok);
}

DIV.pageErrorMessage {
	border: 1px solid red;
	font-size: 0.837em;
	margin-bottom: 1em;
	padding: 0.5em;
}

/*
 * Footer
 */

#footer, #pushFooter3 { 
	height: 7em; /* subtract this from container, it's the footer's full high margin included */
	clear: both;
}

#footer {		
	background: var(--bg-dark);
	width: 100%;
}

.innerFooter {
	height: 7em; /* fallback if calc isn't supported */
	height: calc(7em - 2px);
	border-top: 0.01em solid #666;
	border-bottom: 0.01em solid #666;
}

#footer p { 
	font-size: 0.9em; 
}

#footer .footerBlock { 
	height: 100%; 
	padding: 0 1%; 
	width: 31.33%;
}

/* Media Queries: Desktop vertical min-height */

@media screen and (min-height: 1024px) and (min-width: 1280px) {
    nav#leftMenu { 
    	min-height: 560px;
    }   
}

@media screen and (min-height: 720px) and (min-width: 1280px) {
    nav#leftMenu { 
    	min-height: 460px;
    }   
}

@media screen and (min-width: 561px) and (max-width: 1024px) {
    body{ 
    	zoom: 160%;
    	font-size: 24px; 
    }   
}

@media screen and (max-width: 560px) {
    body{ font-size: 24px; }    
    ul.tabElementHeader.nav > li > a { padding: 1em 0; } 
}

@media screen and (min-width: 1025px) {
    body{ font-size: 16px; }    
}

@media screen and (max-height: 560px) {
    DIV.overlay .popup{ margin-top: 0.2em; }    
}

@media screen and (max-height: 590px) {
    DIV.overlay .popup{ margin-top: 1em; }    
}


/* DEBUG */

#debugDiv { z-index: 99; display: none; position: fixed; bottom:2.625em; left:0; height: 1.625em; border:1px solid black; background: red; color: #fff; font-size: 0.75em; padding: 2px; text-align: center; }