/*
 * cssjs/styles.css
 *
 * Appearance styles
 *
 * Copyright 2023 Philippe CROUÉ philippe@croue.com under GNU licence
 *
 * This file is part of Surfin'Data Manager.
 *
 */

:root {

	--TableBorder: 1px solid grey;

	--TableHeadFootColorTH: black;
	--TableHeadFootColorTD: black;

	--TableHeadFootBackgroundColorTH: rgb(250, 160, 120);
	--TableHeadFootBackgroundColorTD: rgb(250, 230, 210);

	--TableFontHeadFootTH: normal small-caps bold 110% sans-serif;
	--TableFontHeadFootTD: normal small-caps bold 90% sans-serif;

	--TableBodyColorTH: black;
	--TableBodyColorTD: black;

	--TableBodyBackgroundColorTH: rgb(250, 230, 210);
	--TableBodyBackgroundColorTDOdd: white;
	--TableBodyBackgroundColorTDEven: rgb(230, 230, 230);

	--TableFontBodyTH: normal small-caps bold 100% sans-serif;
	--TableFontBodyTD: normal normal normal 90% sans-serif;

	--TableHoverBackgroundColor: rgb(255, 255, 150);

	--ConnexionDivBackgroundColor: rgb(80, 170, 130);
	--ConnexionDivFontSize: 75%;

	--SelectValueDIVColor: black;
	--SelectValueDIVBackgroundColor: white;
	--SelectValueFontText: normal normal normal 11px sans-serif;
	--SelectValueFontTitle: normal normal bold 120% sans-serif;
}

/*
 * GLOBAL DEFINITIONS
 *
 */

TABLE {
	border: var(--TableBorder);
	border-collapse: collapse;
}
AUDIO {
	width: 100%;
	min-width: 150px;
}

/* CONNECTION POPUP DIV */

#connexionDIV {
	position: absolute;
	top: 20px;
	right: 0px;
	display: none;
	z-index: 998;
	margin-top: 10px;
	padding: 10px;
	width: 130px;
	max-width: 130px;
	background-color: var(--ConnexionDivBackgroundColor);
	border-radius: 5px;
	box-shadow: 5px 5px 10px rgb(0, 0, 0);
}
#u, #p, #s {
	z-index: 999;
	width: 100px;
	font-size: var(--ConnexionDivFontSize);
}
#u, #p {
	margin-bottom: 10px;
}

/*
 * TABLES DEFINITIONS
 *
 */

/* LIST TABLE */

.table_list THEAD TR TH, .table_list TFOOT TR TH {
	color: var(--TableHeadFootColorTH);
	background-color: var(--TableHeadFootBackgroundColorTH);
	border-left: var(--TableBorder);
	border-right: var(--TableBorder);
	font: var(--TableFontHeadFootTH);
	text-align: center;
	vertical-align: top;
}
.table_list THEAD TR TD, .table_list TFOOT TR TD {
	color: var(--TableHeadFootColorTD);
	background-color: var(--TableHeadFootBackgroundColorTD);
	border-left: var(--TableBorder);
	border-right: var(--TableBorder);
	font: var(--TableFontHeadFootTD);
	text-align: center;
	vertical-align: top;
}

.table_list TBODY TR TH {
	color: var(--TableBodyColorTH);
	background-color: var(--TableBodyBackgroundColorTH);
	border-left: var(--TableBorder);
	border-right: var(--TableBorder);
	font: var(--TableFontBodyTH);
}
.table_list TBODY TR TD {
	color: var(--TableBodyColorTD);
	border-left: var(--TableBorder);
	border-right: var(--TableBorder);
	font: var(--TableFontBodyTD);
}

/* Odd line */

.tr-odd {
	background-color: var(--TableBodyBackgroundColorTDOdd);
}
.tr-odd:HOVER {
	background-color: var(--TableHoverBackgroundColor);
}

/* Even line */

.tr-even {
	background-color: var(--TableBodyBackgroundColorTDEven);
}
.tr-even:HOVER {
	background-color: var(--TableHoverBackgroundColor);
}

/* EDIT TABLE */

.table_edit THEAD TR TH, .table_edit TFOOT TR TH {
	color: var(--TableHeadFootColorTH);
	background-color: var(--TableHeadFootBackgroundColorTH);
	font: var(--TableFontHeadFootTH);
	text-align: center;
	vertical-align: top;
}
.table_edit THEAD TR TD, .table_edit TFOOT TR TD {
	color: var(--TableHeadFootColorTD);
	background-color: var(--TableHeadFootBackgroundColorTD);
	font: var(--TableFontHeadFootTD);
	text-align: center;
	vertical-align: top;
}
.table_edit TBODY TR TH {
	color: var(--TableBodyColorTH);
	background-color: var(--TableBodyBackgroundColorTH);
	font: var(--TableFontBodyTH);
	text-align: left;
	vertical-align: top;
}
.table_edit TBODY TR TD {
	color: var(--TableBodyColorTD);
	background-color: var(--TableBodyBackgroundColorTDOdd);
	font: var(--TableFontBodyTD);
	text-align: left;
	vertical-align: top;
}

/* SELECT VALUE OBJECTS */

#selectValueDIV {
	padding: 12px;
	position: absolute;
	color: var(--SelectValueDIVColor);
	background-color: var(--SelectValueDIVBackgroundColor);
	border: var(--TableBorder);
	border-radius: 5px;
	box-shadow: 5px 5px 10px rgb(0, 0, 0);
	font: var(--SelectValueFontText);
}
.selectValueDIV_title {
	padding: 10px;
	font: var(--SelectValueFontTitle);
}
.selectValueDIV_list {
	padding-left: 20px;
	padding-right: 20px;
	overflow: auto;
	overflow-x: hidden;
	max-height: 300px;
}
.selectValueDIV_button {
}

/* SELECT VALUE POPUP TABLE */

.table_selectvalue THEAD TR TH, .table_selectvalue TFOOT TR TH {
	color: var(--TableHeadFootColorTH);
	background-color: var(--TableHeadFootBackgroundColorTH);
}
.table_selectvalue THEAD TR TD, .table_selectvalue TFOOT TR TD {
	color: var(--TableHeadFootColorTD);
	background-color: var(--TableHeadFootBackgroundColorTD);
}
.table_selectvalue TBODY TR TH {
	color: var(--TableBodyColorTH);
	background-color: var(--TableBodyBackgroundColorTH);
}
.table_selectvalue TBODY TR TD {
	color: var(--TableBodyColorTD);
}
.table_selectvalue TBODY TR: HOVER {
	background-color: var(--TableHoverBackgroundColor);
}

.imageAlbum {
	display: inline-block;
	margin: 1%;
	padding: 5px;
	width: 31%;
}

/*
 * RESPONSIVE UPDATES
 *
 */

@media only screen and (max-width: 640px) {

    TABLE THEAD TR TH,
    TABLE THEAD TR TD,
    TABLE TBODY TR TH,
    TABLE TBODY TR TD,
    TABLE TFOOT TR TH,
    TABLE TFOOT TR TD {
        margin-bottom: 0;
    }

    TABLE,
    TABLE THEAD,
    TABLE TBODY,
    TABLE TFOOT,
    TABLE THEAD TR TH,
    TABLE THEAD TR TD,
    TABLE TBODY TR TH,
    TABLE TBODY TR TD,
    TABLE TFOOT TR TH,
    TABLE TFOOT TR TD,

    .table_edit,
    .table_edit THEAD,
    .table_edit TBODY,
    .table_edit TFOOT,
    .table_edit THEAD TR,
    .table_edit TBODY TR,
    .table_edit TFOOT TR,
    .table_edit THEAD TR TH,
    .table_edit TBODY TR TH,
    .table_edit TFOOT TR TH,
    .table_edit THEAD TR TD,
    .table_edit TBODY TR TD,
    .table_edit TFOOT TR TD,

    .table_list,
    .table_list THEAD,
    .table_list TBODY,
    .table_list TFOOT,
    .table_list THEAD TR,
    .table_list TBODY TR,
    .table_list TFOOT TR,
    .table_list THEAD TR TH,
    .table_list TBODY TR TH,
    .table_list TFOOT TR TH,
    .table_list THEAD TR TD,
    .table_list TBODY TR TD,
    .table_list TFOOT TR TD {
        display: block;
        text-align: left !important;
    }
}