/*
//----------------------------------------------------------------------------------------------------------------------
// style.css
//
// R.Lockwood   MyFamPics.net   22-May-2024
//----------------------------------------------------------------------------------------------------------------------
*/
    
body {
	margin:					0;
	border:					0;
	padding:				10px;
	vertical-align:			middle;
	text-align:				center;
	font-family: 			Verdana,Arial,Helvetica,Sans-serif;
	font-size:				10pt;
	line-height:			18px;
	color:					#333;
	background:				#FFFFFF;
}

.pageHeader {
	margin:					0 0 0 0;
	border-bottom:			1px solid blue;
	padding:				35px 0 75px 0;
	height:					80px;
	display:				block;
	vertical-align:			middle;
	z-index:				1;
	position:				sticky;
	top:					0;
	background:				#FFFFFF;
}

.headerTable {
	margin:					0;
    text-align:             center;
    vertical-align:         middle;
	width:					100%;
}

.headerTDLeft  {
	width:					250px;
	vertical-align:			left;
	margin:					0 0 0 25;
}

.headerTDCenter {
	font-weight:			bold;
	font-size:				14pt;
}

.headerTDRight {
	margin:					0 25 0 0;
	width:					250px;
/*    vertical-align:         right; */
}

.pageBody {
	padding:				25px 0 25px 0;
	border:					0;
	margin:					0;
	border-bottom:			1px solid blue;
	position:				relative;
	z-index:				0;
}

.browseSubNav {
	text-align:				center;
	padding:				10px 0 10px 0;
	position:				sticky;
}

.browseStats {
	font-style:				italic;
}

.browseFileName {
	font-style:				italic;
	font-size:				8pt;
	color:					grey;
	vertical-align: 		bottom;
	align:					center;
	position: 				absolute;
	top:					180px;
	z-index:				0;
}

.homeTable {
    width:                  100%;
    margin:                 0;
    border:                 0;
	padding:				20px;
    text-align:             center;
}

.homeTDLeft {
	margin:					0 10 0 10;
    width:                  33%;
    vertical-align:         middle;
}

.homeTDCenter {
	margin:					0 10 0 10;
    width:                  50%;
	vertical-align:			middle;
	padding:				25 10 25 10;
}

.homeTDRight {
	margin:					0 10 0 10;
	vertical-align:			middle;
	padding:				25 10 25 10;
}

.piceditTDLeft {
    width:                  50%;
    vertical-align:         middle;
	padding:				25px 25px 25px 75px;
	margin:					5px 25px 5px 75px;
}

.piceditTR {
	border-bottom:			1px solid blue;
	padding-bottom:			20px;
}

.imgTDLeft {
/*    width:                  500px; */
	width:					100%;
	padding:				25 10 25 10;
}

.piceditTDCenter {
    width:                  50%;
	vertical-align:			middle;
	padding:				25px 75px 25px 25px;
	margin:					5px 75px 5px 25px;
}

/*
.piceditTDRight {
    width:                  5%;
	vertical-align:			middle;
	padding:				25px;
	margin:					5px 25px 5px 25px;
}
*/

.browseTDLeft {
	margin:					0;
    width:                  75%;
    vertical-align:         top;
/*	border:					1pt solid blue; */
}

.browseTDRight {
	margin:					10px;
	border-left:			1pt solid grey;
	padding:				10px;
	vertical-align:			top;
	text-align:				left;
}

.browseRightButtons {
	margin-top:				10px;
	text-align:				center;
}

.subheadingText {
	font-style:				italic;
}

.homeWelcome {
	padding:				0 0 100px 0;
}

.pageFooter {
	margin:					20px 0 20px 0;
	padding:				0 0 0 0;
	text-align:				center;
	width:					100%;
	font-size:				9pt;
	color:					#666666;
	position:				relative;
}

#_loginFormWrap {
    text-align:             left;
    margin:                 0 0 0 50px;
}

.loginText {
	margin:					0 0 25px 0;
    font-family:            'DINWeb-Medium', Verdana, Arial, Helvetica, sans-serif;
    font-size:              18pt;
    color:                  #00246B;
    text-transform:         uppercase;
}

.loginMessage {
	font-family:			Calibri;
	font-style:				italic;
	font-size:				12pt;
	margin:					25px 0;
}

#_loginError {
	color:					red;
}

#_loginInProgress {
	font-size:				14pt;
	color:					blue;
}

.loginText2 {
	margin:					20px 0 5px 0;
	border:					0;
	padding:				0;
	font-size:				10pt;
	color:					#333333;
}

.loginText3 {
	margin:					0;
	border:					0;
	padding:				0;
}

input:-webkit-autofill {
	-webkit-box-shadow:		0 0 0 300px #FFD700 inset;
}

.login {
	margin:					0;
	border:					1pt solid #CCCCCC;
	background-color:		#FFD700;
	height:					20px;
	width:					300px;
	font-size:				10pt;
	font-family:			Verdana,Arial,Helvetica,Sans-serif;
	text-align:				left;
}

.reportbutton {
	margin:					0 0 0 10px;
	border-top: 			1px solid grey;
	padding: 				3px 5px;
	background: 			#0099CC;
	border-radius: 			5px;
	box-shadow: 			rgba(0,0,0,1) 0 1px 0;
	text-shadow: 			rgba(0,0,0,.4) 0 1px 0;
	color: 					white;
	font-size: 				11pt;
	text-decoration:		none;
}

#_loginButton {
	margin:					25px 0 0 0;
}

.actionbutton.inline, .reportbutton.inline {
	display:		inline;
}

.actionbutton:hover, .reportbutton:hover {
	background: 		gold;
}

.actionbutton:active, .reportbutton:active {
	background: 		#006600;
}	

.actionbutton:disabled, .reportbutton:disabled {
	background: 		#EEEEEE;
	color:				#444444;
}

textarea.form-control {
	background: 		#00FFFF;
	white-space:		normal;
}

textarea.form-control:focus {
	background: 		#FFEECC;
}

input.form-control {
	background: 		#00FFFF;
}

input.form-control:focus {
	background: 		#FFEECC;
}

.hideme {
	display:			none;
}

.browseLeftPanel {
	background:			green;
	color:				blue;
}


/* browse page - image gallery */

div.gallery {
	background: 		#FFFFFF;
	margin: 			5px;
	border: 			1px solid #ccc;
	border-radius:		5px;
	float: 				left;
	width: 				200px;
	height:				200px;
/*	display:			flex; */
	align:				center;
	align-items:		center;
	position:			relative;
/*	justify-content:	center; */
	z-index:			2;
}

div.gallery:hover {
	border: 			2px solid blue;
}

div.gallery img {
	max-width:			100%;
	max-height:			100%;
	position:			absolute;
	top:				50%;
	left:				50%;
	transform:			translate(-50%, -50%);
/*	display:			inline-grid;
	max-width:: 		80%;
	max-height: 		80%; */
/*	margin:				auto; */
}

div.general {
	padding: 			15px;
	text-align: 		center;
}

.hideMe {
	display:			none;
}

.fileProgress {
	width:				400px;
	height:				20px;
	border:				2px solid grey;
}

.fileProgress::-webkit-progress-bar {
	background-color: 	#d4af37;
}

.fileProgress::-webkit-progress-value {
	background-color: 	blue;
}

.fileProgressComplete::-webkit-progress-value {
	background-color:	green;
}

.fileProgressError::-webkit-progress-value {
	background-color:	red;
}

.dropzone {
	height: 			250;
  	width: 				100%;
  	border: 			2px dotted aqua;
  	display: 			flex;
  	justify-content: 	center;
  	flex-direction: 	column;
  	align-items: 		center;
  	font-family: 		monospace;
	background:			#F3F4F9;
}

.upload-txt {
	margin:				10 0 0 0;
	border:				0;
	vertical-align:		middle;
	text-align:			center;
	font-family: 		Verdana,Arial,Helvetica,Sans-serif;
	font-size:			12pt;
	font-weight:		bold;
	color:				black;
}

.upload-txt2 {
	margin:				10 0 15 0;
	font-style:			italic;
	font-weight:		normal;
}

.upload-txt3 {
	margin:				10 0 0 0;
	font-style:			italic;
	font-weight:		normal;
}

.upload-txt4 {
	margin:				10 0 20 0;
	font-style:			italic;
	font-weight:		normal;
	color:				red;
}

.hovering {
	background:			gold;
}

.uploadzone {
	height: 			250;
  	width: 				100%;
  	border: 			2px dotted orange;
	padding: 			15px;
	text-align: 		center;
  	display: 			flex;
  	justify-content: 	center;
  	flex-direction: 	column;
  	align-items: 		center;
  	font-family: 		monospace;
	background:			#00FFFF;
}