@charset "utf-8";
:root{
	--bodyBg:#000;
	--headerBg:#CCC;
	--selectedBtnTxt:#FFF;
	--btnBg:#EEE;
	--subBtnBg:#D5F9E8;
	--selectedBtnBg:#555;
	--boxBorder:#d2d2d2 1px solid;
	--boxBorderRadius:3px;
	--boxShadow:0px 1px 2px rgba(64,64,64,0.1);
	--boxBg:rgba(242, 242, 233, 1);
	--boxTxt:#666;
}

body{ 
/*	max-width: 1200px;
	min-width: 200px;
*/	text-align:center;
	margin: 0px auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
	background-color:var(--bodyBg);
}

#upload-links{
	position:relative;
	top:70px;
	font-size:150%;
}
#upload-links button{
	min-width:200px;
	margin:5px;
}
#upload-links a{
	display:inline-block;
	color: #AAA;
}

/* General formating  ------------------------------------------------- */
.title{
	font-weight:bold;
}
/* Common elements ---------------------------------------------------- */
li{
	margin-bottom:5px;
}

.photo-table .row,
.border-box{
	margin:10px;
	padding:3px;
	background-color:var(--boxBg);
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
	box-shadow:var(--boxBg);
	color:var(--boxTxt);
	border-collapse: initial;
	display:inline-block;
}
.border-box .sub-menu{
	text-align:center;
	background-color:transparent;
}
.border-box .sub-menu button,
.border-box .sub-menu .selectedButton{
	background-color:var(--btnBg);
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
}
.border-box .help-button{
	font-size:120%;
	position:absolute;
}
.border-box .help-text{
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
	padding:10px;
	margin-bottom:10px;
	text-align:left;
	max-width:450px;
}
.help-text{
	max-width:450px;
}
.help-text p,
.help-text ul{
	margin-top:2px;
	margin-bottom:2px;
}

/* Header ------------------------------------------------------------- */
#header{
	width:100%;
	height:auto;
	background:var(--headerBg);
	padding-top:10px;
	padding-bottom:10px;
}
#page-title{
	color:#666;
	font-size:180%;
	margin-bottom:20px;
}
#page-description{
	font-size:110%;
	margin-bottom:20px;
	max-width:800px;
	line-height:initial;
	margin:0px;
	margin-bottom:20px;
}

/* Content ------------------------------------------------------------- */
#contentArea{
	width:100%;
}
#left-column{
	min-width:300px;
	width:25%;
	float:left;
}
#right-column{
	width:75%;
	float:right;
}

/* Footer ------------------------------------------------------------- */
#footer{
	margin-top:20px;
}

/* Login ------------------------------------------------------------- */
#login{
	margin:5px;
	margin-right:15px;
	background-color:var(--boxBg);
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
	box-shadow:var(--boxBg);
	color:var(--boxTxt);
	padding:5px;
	position: absolute;
  	right: 0px;
}
#login #toggle{
	float:right;
	color:#726914;
	font-size:170%;
	cursor:pointer;
	margin-left:5px;
}
#login #logged-out{
	display:block !important;
}

/* Menus    ------------------------------------------------------------- */
.menu{
	text-align:center;
	color:#333;
	margin-left:5px;
	margin-right:5px;
}
#section5 .menu{
	margin-top:10px;
}
.menu button{
	border-radius:var(--boxBorderRadius);
	width:150px;
	padding:2px;
	margin-right:4px;
	background-color:var(--btnBg);
	
}
.menu .selectedButton{
	border-style:inset;
	color:var(--selectedBtnTxt);
	background-color:var(--selectedBtnBg);
}

#group-menu{
	margin-bottom:3px;
}
#main-menu{
}
#main-menu .selectedButton{
	padding-bottom:8px;
	
}
.sub-menu{
	position:relative;
	top:-7px;
	padding:7px;
	padding-bottom:2px;
	margin-top:5px;
	background-color:var(--selectedBtnBg);
	border-radius:var(--boxBorderRadius);
}
.sub-menu button{
	border:none;
	margin-bottom:5px;
	vertical-align:top;
	background-color:var(--subBtnBg);
}
.sub-menu .selectedButton{
	border-style: none;
	background-color:var(--subBtnBg);
	color: inherit;
}
.select-menu{
	margin-top:5px;
	margin-left:0px;
	background-color:rgba(100, 100, 100, 0.66);
	padding:5px;
	border-radius:var(--boxBorderRadius);
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
	box-shadow:var(--boxBg);
	color:var(--boxTxt);

}
.select-menu .title{
	display:block;
	background-color:#FFF;
	font-weight:normal;
	border-radius:var(--boxBorderRadius);
	padding:2px;

}
.select-menu button{
	display:block;
	margin:0px auto; 
	margin-top:2px;
	width:100%;
	min-width:150px;
}
.select-menu button:hover{
	background-color:#999;
	color:#FFF;
}

/* Tables  ------------------------------------------------------------------ */
.category-title{
	margin-top:10px;
	font-size:150%;
	font-weight:bold;	
	
}
.custom-column-title{
	margin-top:10px;
	font-size:150%;
	font-weight:bold;	
	
}

.table{
	color:#666;
	margin-top:20px;
	width:100%;
}
.table .header{
}
.table label,
.table .value{
}
/* Border Box Table  ------------------------------------------------------------------ */
.border-box-table{
	text-align:center;
	margin:0px auto;
	margin-top:10px;
}
.border-box-table .header{
	display:none;
}
.border-box-table caption{
	font-weight:800;
	margin-bottom:5px;
}
.border-box-table .row{
	display: inline-block;
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
	padding:3px;
}
.border-box-table .row label{
	display: inline-block;
	text-align:left;
	font-weight:700;
	margin-right:4px;
}
.border-box-table .column{
	margin:5px;
	padding-right:5px;
	display:block;
	text-align:left;
}
.border-box-table input,
.border-box-table select{
	padding:0px;
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
}
/* Input Dialog  ------------------------------------------------------------- */
.input-dialog .row label{
	width:100px;
}
.input-dialog input,
.input-dialog select{
	width:200px !important;
	text-align:center;
}
.input-dialog input{
	width:198px !important;
}
.input-dialog input[type="checkbox"]{
	width:20px !important;
	text-align:center;
}
.input-dialog .column label:after{
	content:":";
}
.validation-msg{
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
	margin-bottom:3px;
	padding:2px;
	color:#900;
	background-color: #FFC;
	text-align:center;
	width:100%;
}

/* Terms  ------------------------------------------------------------- */
.accept-terms{
	margin-top:0px;
}
/* Photo Table  ------------------------------------------------------------- */
.photo-table{
	border-collapse:separate;
	border-spacing:5px;
	table-layout:fixed;
}
.photo-table caption{
	font-size:160%;
	font-weight:400;
	margin-bottom:10px;
}
.photo-table tbody{
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-around;
	height:auto;
	padding:0px;
	margin-bottom:5px;
}
.photo-table .header{
	display:none;
}

.photo-table .row{
	display: inline-block;
}
.photo-table .value{
	display: inline-block;
}
.photo-table .column{
	display:block;
	text-align:left;
	padding-left:10px;
	clear: both;
}
.photo-table .column_f_name{
	width:300px;
	display:block;
	text-align:center;
	padding-left:0px;
}
.photo-table .column_f_name label{
	display:none;
}
.photo-table .column_f_name .value{
	margin-bottom:10px;
}
.photo-table .column_checked{
	width:30px;
}
.photo-table .column_index{
	width:30px;
}
.photo-table .column input,
.photo-table .column textarea{
	width:200px;
	border:none;
}
.photo-table label{
	width:70px;
	height:20px;
	display:inline-block;
	vertical-align:top;
}
.photo-table .column_event label{
	display:none;
}
.photo-table .column_event{
	font-weight:bold;
	margin-bottom:5px;
}
.photo-table .column_index label::after,
.photo-table .column_photos label::after,
.photo-table .column_checked label::after{
	content: normal;
}
.photo-table .column_index,
.photo-table .column_checked{
	width:25px;
	display: inline-block;
	float:left;
	clear:none;
}
.photo-table .column_index label{
	display:inline;
}
.photo-table .column_category{
	margin-top:20px;
	margin-bottom: 5px;
}
.photo-table .column_custom_1{
	margin-top:8px;
	margin-bottom: 5px;
}
.photo-table .column_category.input-disabled label,
.photo-table .column_custom_1.input-disabled label
{
	width: 70px;
  height: auto;
  display: inline-block;
  vertical-align: top;
}
.photo-table .column_category.input-disabled,
.photo-table .column_custom_1.input-disabled
{
	display:block;
	font-size:110%;
	margin-top:0px;
}
.photo-table .column_checked label{
	display:none;
}
.photo-table .textInput label{
	width:70px;
	display:inline-block;
}
.photo-table .column_award select{
	border:none;
}
.photo-table .column_award label{
}
.photo-table .column_orig_f_name label{
	width:auto;
	display:block;
}
.photo-table .column_orig_f_name .value{
	margin-bottom:20px;
}

.photo-table .column_p_description,
.photo-table .column_s_description{
	max-width:350px;
	margin-bottom:7px;
}
/* Photo Series Table  -------------------------------------------------------- */
.photo-series{
}
.photo-series .column_artwork_type{
	margin-bottom:5px;
	display:inline-block;
	float:left;
	font-weight:bold;
}
.photo-series .column_artwork_type label{
	display: none;
}
.photo-series .column_index{
	margin-bottom:5px;
	width:20px;
}
.photo-series .column_checked{
	width:20px;
}
.photo-series .column_photos label{
	display:none;
}
.photo-series tbody{
	align-items:normal;
}

/* Photo sub Table  -------------------------------------------------------- */
.photo-subtable{
	margin-top:0px;
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
	box-shadow:var(--boxBg);
	width:auto;
}
.photo-subtable .column label{
	display: inline-block;
}
.photo-subtable .column_f_name label,
.photo-subtable caption{
	display:none;
}
.photo-subtable.pair .column_p_name,
.photo-subtable.pair .column_order_nr,
.photo-subtable.photo .column_p_name,
.photo-subtable.photo .column_order_nr{
	display:none;
}
/* Results Table  ------------------------------------------------------------- */

/* Points Table  ------------------------------------------------------------- */
#points{
	text-align:center;
	margin:0px auto;
	margin-top:10px;
    display: table;
	text-align:left;
}

#points-table{
	border-collapse:separate;
	border-spacing:5px;
	margin:0px auto;
	width:auto;
	border:var(--boxBorder);
	border-radius:var(--boxBorderRadius);
}
#points-table caption{
	font-weight:800;
	margin-bottom:5px;
}

#points-table .header{
	display: inherit;
	
}
#points-table label::after{
	content:"";
}

#points-table .row label{
	display:none;
	
}
#points-table .column{
	width:40px;
	padding-right:5px;
	display:  inline-block;
	padding-left:0px;
	text-align:center;
}
#points-table .column input{
	text-align:center;
}
#points-table .error input{
	color:#F00;
	background-color:#FF0;
}
#points-table .column_index{
	width:15px;
	text-align:center;
}
#points-table .column_error_message{
	width:100px;
}


/* Options Table  ------------------------------------------------------------- */
#options{
}
#options .row label{
	width:300px;
}
#options  .column{
	width:600px;
}
#options input,
#options select{
	width:100px !important;
	text-align:center;
}
#options input[type="checkbox"]{
	width:20px !important;
	text-align:center;
}
#options .row .value{
	width:60%;
}
#options .textAreaInput label{
	width: 100%;
	margin-bottom:5px;
}
#options .textAreaInput .value{
	width: 100%;
}
#options .column_privacyPolicy .value{
	height: 260px;
}
#options .column_photoCategories input,
#options .column_customColumn_1_values input{
	display:block;
	width: 100% !important;
}
#options .column_uploadOpen:before{
	content:"-------- Kuvien lataus --------";
	display:block;
	text-align:center;
	line-height:20px;
}
#options .column_judgingMethod:before{
	content:"-------- Arvostelu --------";
	display:block;
	text-align:center;
	line-height:20px;
}
#options .column_slideShowDelay:before{
	content:"-------- Slideshow --------";
	display:block;
	text-align:center;
	line-height:20px;
}

/* Users Table  ------------------------------------------------------------- */
.users{
	text-align:left;
	width:400px;
	margin:0px auto;
	margin-top:10px;
	padding:5px;
}
.users .help-text{
	max-width:100%;
}

/*.add-user{
	width:500px;
}
*/
#users-table{
	border-collapse:separate;
	border-spacing:2px;
	margin-bottom:15px;
}
#users-table caption{
	font-weight:bold;
	font-size:120%;
	margin-bottom:5px;
}
#users-table caption .pageNumber{
	display:none;
}
#users-table .row label{
	display:none;
}
#users-table td {
}
#users-table .column{
	text-align:left;
}
#users-table .column_username{
	width:200px;
}
#users-table .column_checked{
	width:20px;
}
/* Groups Table  ------------------------------------------------------------- */
#groups-table{
	text-align:left;
	width:350px;
	margin:0px auto;
	margin-top:10px;
	margin-bottom:15px;
	padding:5px;
	border-collapse:separate;
	border-spacing:2px;
}
#groups-table caption{
	font-weight:bold;
	font-size:120%;
	margin-bottom:5px;
}
#groups-table .row label{
	display:none;
}
#groups-table .column_gid input{
	width:150px;
}
#groups-table .column_group_name {
	width:200px;
}
#groups-table .column_active{
	text-align:center;
}
#groups-table .column_checked input{
	margin:5px;
}
/* Upload Table  ------------------------------------------------------------- */
#upload-instructions{
	text-align:left;
	max-width:450px;
	margin:0px auto;
	margin-top:10px;
}
#photo-series-upload,
#usage-terms,
#upload-instructions{
	max-width:700px;
}
#usage-terms .competition-terms{
	width:95%;
}
#photo-series-upload .row label{
	width:20%;
}
#photo-series-upload  .column{
	width:420px;
}
#photo-series-upload .column .value{
	text-align: left;
}
#photo-series-upload .row .value{
	width:77%;
}
#photo-series-upload textarea{
	border:none;
}
#upload-table{
	color:#666;
	table-layout:fixed;
	margin-top:20px;
	width:auto;
	border-collapse:separate;
	border-spacing:5px;
}
#upload-table .column{
	display:block;
	text-align:left;
	padding-left:10px;
}
#upload-table .column input{
	width:200px !important;
	border:none;
}
#upload-table label,
#upload-table .value{
	display: inline-block;
}
#upload-table label{
	width:90px;
	height:20px;
}

#upload-table .column_f_name{
	width:300px;
	display:block;
	text-align:center;
	padding-left:0px;
}
#upload-table .column_f_name label{
	display:none;
}
#upload-table .column_f_name .value{
	margin-bottom:10px;
}
#upload-table .column_upload_status label{
	width:0px;
}
#upload-table .column_upload_status label::after{
	content:normal;
}
#upload-table .column_upload_status .value{
	color:#F00;
    vertical-align: bottom;
}
#upload-table .load-ok{
	color:#0F0;
}
#upload-table .column_upload_status{
	padding:2px;
	text-align:center;
	display:inline-block;
}
#upload-table .column_delete_button{
	display:inline-block;
}
#upload-table .fa,
#photo-series-upload .fa{
	font-size:160%;
}
/* Reports  ------------------------------------------------------------- */
.report .table .row label{
	display:none;
}
.report .table caption {
    font-size: 120%;
    font-weight: 600;
    margin-bottom: 10px;
}	
.report{
	min-width:400px;
}

/* Instructions  ------------------------------------------------------------- */
.instructions{
	text-align:left;
	max-width:600px;
	padding:20px;
}

.message{
	display:block;
	width:400px;
	color: #930;
}