/********************************************/
/* Basic Styles for the Ford Family Website */
/********************************************/

/***************/
/* Fundamental */
/***************/

* { box-sizing: border-box; border: 0; margin: 0; padding: 0 }
body { font-family: Arial, Helvetica, sans-serif; color: white;
	background: url('img/Bottom_texture.jpg') repeat top left }
a { outline: 0 }
input, textarea, select, button { font-family: Arial, Helvetica, sans-serif }
table { border-collapse: collapse }
.bordered td, th { border: 1px solid black }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}

/*******************************************************/
/* Wrapper, Header, Nav, Middle, Container, and Footer */
/*******************************************************/

#wrapper { position: relative; width: 97%; max-width: 1340px; 
	margin: 0 auto; box-shadow: 4px 4px 4px #422109 }
#header { height: 150px; margin-top: 8px; position: relative;
	background: #503000 url('img/header.jpg') no-repeat center }
#header-debug { position: absolute; left: 5px; z-index: 2; color: #EFAF2E; display: block; }
#header-facts { position: absolute; left: 5px; z-index: 4; color: #EFAF2E; display: block; top: 20px; }
#header-image { position: absolute; right: 0; width: 373px; height: 150px;
	background: url('img/Fords1975.png') no-repeat right }
#header-ident { position: absolute; top: 35%; width: 360px; text-align: center; 
	left: -50px; margin-left: 10% }
#header-name { font-size: 30px; letter-spacing: 2px; color: #EFAF2E }
#header-text { font-size: 17px; letter-spacing: 1px; color: #E2DFDA; text-transform: uppercase }
/*@media (max-width: 760px){ */
@media (max-width: 1760px){ /* originally 760px */ 
	#header-image { opacity: 0.2 } 
	#header-ident { left: -30px; margin: 0 5px 0 -5px }
}
#nav { position: relative; height: 25px; line-height: 25px;
	background: url('img/nav.png') no-repeat center; color: #F4F4F4 }
#nav a, #nav button { margin: 0 3px; font-size: 18px; color: #F4F4F4; 
	text-decoration: none; background: none; cursor: pointer }
#nav form { display: inline }
#nav-left { position: absolute; top: 0; left: 3px }
#nav-center { position: absolute; top: 0; left: 50% }
#nav-right { position: absolute; top: 0; right: 3px }
@media (max-width: 1035px ) { #show_table { display: none }}
#middle { position: relative; overflow: auto; font-size: 18px; 
	background: ivory; color: black; padding: 10px 0 }	/* does not restrict height */
#container { position: relative; padding: 10px; text-align: left;
	background: ivory; color: rgb(95, 86, 73); font-size: 20px;
	height: calc(100vh - 230px) }						/* restricts maximum height */
#footer { height: 30px; line-height: 27px; font-size: 16px; padding-top: 3px;
	background: #433728; color: #D7D2CB; text-align: center }

/**************/
/* Logging In */
/**************/

#login_div { position: absolute; top: -170px; /* top: -100px; */ right: 3px; background: #ca521e; 
	width: 200px; height: 170px; /* max-width: 200px; max-height: 182px; */
	z-index: 5; left: calc(50vw - 110px); }
/* #login_div label { margin-left: 8px; margin-top: 12px; font-size: 18px; color: white } */
#login_div label { display: inline-block; margin: 6px 0 6px 8px; font-size: 18px; color: white; }

#username, #password { width: 180px; line-height: 25px; margin-left: 10px; 
	padding: 0 5px; border-radius: 5px }
#login_help { text-align: center; color:white; font-size: 14px; }

input[type=submit] { width: 60px; height: 24px; margin: 15px 0 2px 70px; 
	cursor: pointer; }
input[type=gethelp] { width: 70px; height: 24px; margin: 7px 0 11px 3px; 
	cursor: pointer; text-align: center; }

/************************/
/* Left and Right Sides */
/************************/

#left_side, #right_side { height: 100%; float: left }
#left_side { width: 60%; padding-right: 5px }
#right_side { width: 40%; padding-left: 5px }

/*******************/
/* Tabs and Thumbs */
/*******************/

.tabs li { display: inline-block; color: black; margin-left: 10px; 
	padding: 1px 10px; font-size: 18px; line-height: 22px; cursor: pointer; 
	border: 4px solid green; border-bottom: 0; border-radius: 10px 10px 0 0 }
.tabs li.current { background: chocolate;  color: white; }

.tab-content { display: none; position: relative; 
	/* tabs height is 28px (22px line-height + 2 px padding + 4 px border) */
	height: calc(100% - 28px); 
	overflow: hidden; background: beige; border: 5px solid green }
.tab-content.current { display: block }

/*****************/
/* The Help Area */
/*****************/

#help_area { z-index: 15; position: absolute; bottom: 0; left: 0; padding: 8px; display: none; 
	width: calc(100% - 20px); height: calc(100% - 220px); margin: 10px; line-height: 20px; 
	text-align: left; border: 5px solid green; background: Lavender; overflow-y: auto }

/****************************/
/* The Recent Changes Popup */
/****************************/

#recent_changes { position: absolute; z-index: 5; top: 5px; width: 360px; 
	left: 50%; transform: translateX(-50%); overflow: hidden; 
	border: 5px solid #00cc66; border-radius: 5px; display: none }
#recent_changes, #recent_results { background: #d9d9d9 }
#recent_header { position: relative; text-align: center; background-color: #CA521E; 
	color: white; font-size: 20px; font-weight: 400; height: 40px; line-height: 38px; }
#recent_close { height: 20px; z-index: 6; float: right; margin: 10.5px }
#recent_title { padding-top: 3px }
#recent_content { display: block; width: 350px; color: #222222; 
	padding: 3px; margin: 0 auto; text-align:center; border: 3px solid #CA521E }
#recent_results { margin: 1px 1px; width: 100%; height: 410px; overflow-y: auto; 
	padding-top: 5px; color: black }

/******************/
/* The Slide Show */
/******************/

#slide_show { z-index: 30; display: block; display: none; overflow: hidden;
	width: 100%; max-width: 450px; vertical-align: top; text-align: center; 
	position: absolute; top: 0; left: 50%; 
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%); 
	background: #503000 url('img/header.jpg'); background-size: cover; color: white;
}
#slide_seen { width: auto; height: auto; max-width: 100%; max-height: 84vh; }
#slide_caption, #slide_details { width: 100%; text-align: center; display: block; 
	line-height: 20px; padding-bottom: 3px; }
#show_controls { width: 100%; text-align: center; padding: 3px }
#last_slide, #close_show, #next_slide { cursor: pointer }
#close_show { background: red; font-size: 20px }
#last_slide { width: 35px; float: left }
#next_slide { width: 25px; float: right }
#close_show { display: inline-block; width: 52px; color: white; margin: 0 auto }

/****************************************************************/
/* The following styles would NOT be required for all web pages */
/****************************************************************/

#thumbs { overflow-y: auto; height: 100% }
.thumb { border: 5px solid grey; margin: 5px 0 0 5px; float: left;
	background-position: center; background-size: cover;
	/* remove 5px for left margin and 1px for possible roundoff */
	width: calc(1/6 * 100% - 6px); 
}
.thumb.current { border-color: red }
.thumb.finished { display: none }

@media (max-width: 900px) { .thumb { width: calc(1/4 * 100% - 6px) }}
.thumb:before { content: ""; display: block; padding-top: 100% }

#bigbox { position: relative; display: none; overflow: hidden; margin: 5px; 
	height: calc(100% - 10px); width: calc(100% - 10px); border: 5px solid red;  }
#bigpic { position: relative }
#plus, #minus { position: absolute; bottom: 0; right: 0; z-index: 5 }
#plus { right: 40px }

#info { display: block }
.info { display: none }
.label { margin: 5px 0 0 3%; }

/*************************/
/* The Find Person Popup */
/*************************/

#find_person { position: absolute; z-index: 5; top: 6px; 
	width: 360px; left: 0; right: 0; margin: 0 auto;
	border: 5px solid #00cc66; border-radius: 5px; 
	overflow: hidden; background-color: #d9d9d9; display: none }
#find_header { position: relative; text-align: center; background-color: #CA521E; 
	color: white; font-size: 20px; font-weight: 400; height: 40px; line-height: 38px }
#find_close { height: 24px; z-index: 6; float: right; margin: 10.5px }
/*#find_close { height: 24px; z-index: 6; float: right; margin-top: 9px; margin-right: 9px }*/
#find_title { padding-top: 3px }
#find_content { display: block; width: 350px; color: #222222; 
	padding: 3px; margin: 0 auto; text-align:center; border: 3px solid #CA521E }

#find_table { width: 338px }

#find_table td { text-align: center; color: black; }
#find_first, #find_last { width: 130px; width: 125px; border: 1px solid black;
	border-radius: 5px 5px 5px 5px; padding: 2px 4px; }

#find_search { width: 60px; border: 2px solid green }

#find_results { margin: 1px 1px; width: 100%; height: 400px; overflow-y: auto; display: none;
	padding-top: 5px; background-color: #d9d9d9; color: black }
#find_data a { text-decoration: none }
#find_data td { text-align: left }

/***************************/
/* The Show Persons Popup */
/***************************/
#show_persons { position: absolute; z-index: 5; top: 6px;				top: 0px;
	width: 500px; width: 402px; left: 0; right: 0; margin: 0 auto;
	border: 5px solid #00cc66; border-radius: 5px; 
	overflow: hidden; background-color: #d9d9d9; display: none }
#show_header { position: relative; text-align: center; background-color: #CA521E; 
	color: white; font-size: 20px; font-weight: 400; height: 40px; line-height: 38px }
#show_close { height: 24px; z-index: 6; float: right; margin-top: 8px; margin-right: 9px }
#show_title { padding-left: 31px; padding-top: 1px }
#show_middle { display: block; color: #222222; margin: 0 auto; padding-left:3px; padding-right: 4px; text-align:center }
#show_middle button { width: 105px; height: 27px; margin: 0 0px; 
	text-align: center; background: white; font-size: 16px; cursor: pointer;
	border-style: solid; border-radius: 8px; border-width: 3px; border-color: white }
#show_explain { position: relative; text-align: center; background: coral;
	border: 2px solid black; text-align: center; padding: 8px 0;
	color: black; font-size: 18px; font-weight: bold }
#show_results { overflow-y: auto; height: 530px; background: #E5C9BB; 
	font-size: 18px; text-align: center; color: black }
#show_results table { width: 100%; color: black; font-size: 18px; background: pink }
#show_results td:first-child { display: none }
#show_results table td, th { vertical-align: bottom; padding: 3px; text-align: center }
#show_results td { padding: 8px; border-bottom: 1px solid black; }
#show_results tr { cursor: pointer; background-color: #E5C9BB }

/*#find_results { margin: 1px 1px; width: 100%; height: 400px; overflow-y: auto; display: none;
	padding-top: 5px; background-color: #d9d9d9; color: black }*/
/*#show2_results { margin: 1px 1px; width: 100%; height: 400px; overflow-y: auto; display: none;
	padding-top: 5px; background-color: #d9d9d9; color: black }*/
/*#show2_content button { width: 105px; height: 27px; margin: 0 3px;
	text-align: center; background: white; font-size: 16px; cursor: pointer;
	border-style: solid; border-radius: 8px; border-width: 3px; border-color: #0000FF }
#show2_table { width: 338px }
#show2_table td { text-align: center; color: black; }
#show2_first, #show2_last { width: 130px; width: 125px; border: 1px solid black;
	border-radius: 5px 5px 5px 5px; padding: 2px 4px; }
#show2_search { width: 60px; border: 2px solid green }
*/