/*
*  Filename: styles-combined-2013-12-29.css
*  CSS stylesheet for Clock History Database Display
*  Created by Bill Stoddard
*  Bill's Clockworks, Flora, Indiana
*  http://billsclockworks.com
*  Created 2013-12-29
*	Combines stylesDB with the new styles for the non-DB pages (responsive design)
*/

/* For HTML 5 to render correctly */
header, footer, article, section, nav, menu, figcaption, figure, aside {
	display: block;
}
html {
	font-size:100%;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: white;
	color: black;
	/*max-width: 1000px;
	max-width: 72rem;
	max-width: 1300px;
	Made wider 2016-10-07 to allow 4 medium images in a row in gallery display  on detail pages */
	max-width: 94rem;	
	margin: .5em auto;
	padding: 1em;
	text-align: left;
	line-height: 1.4;
}
img {
	border-width: 0;
}
a {
	text-decoration: underline;
	color: #0000ee;
}
a:visited { /* added 2019-06-24 */
	color: #9900cc;; 
}
h1 {
	text-align: center;
	display: block;
	font-size: 150%;
	font-weight: bold;
	margin: 0;
	padding: 0;
	clear: both;
}
/* The clear in h1 prevents the right-floated next button from getting into the header  */
h2 {
	text-align: left;
	display: block;
	font-size: 125%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 .4em 0;
	clear: both;
}
h3 {
	text-align: left;
	display: block;
	font-size: 110%;
	font-weight: bold;
	padding: 0;
	margin: .8em 0 .3em 0;
}
h4 {
	text-align: left;
	display: block;
	font-size: 1.00em;
	font-weight: bold;
	padding: 0;
	margin: 1.33em 0;
}
h2.inlineHeader, h3.inlineHeader, h4.inlineHeader {
	display: inline;
	text-align: left;
	font-size: 100%;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
/* The following 2 make paragraphs in tables and figures look correct (otherwise there is gap above and below text */
td p:first-child, figcaption p:first-child {
	margin-top: 0;
}
td p:last-child, figcaption p:last-child {
	margin-bottom: 0
}
/* These styles are for divs and figures that replace the tables that were holding images.
These scale with dispay width, and the images scale down if necessary. The max-width 17em
keeps each caption from being wider than its image if the width in't set in the figcaption in the HTML code
<figcaption style="max-width: 440px;">
I couldn't find a way
to automatically make the caption the same width as the image while preserving the ability of
the images to scale in size with the screen width  */
.imageContainer {
	text-align: center;
	padding: 0;
}
.imageBlock {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	max-width: 100%;
	height: auto;
	padding: .5em;
}
figure {
	display: block;
	text-align: center;
	padding: .5em;
	margin: auto;  /* Necessary or else Firefox puts large margin around it */
}
figcaption {
	text-align: left;
	font-size: 90%;
	display: block;
	max-width: 17em;
	margin: auto;
	padding: .25em;
}
table {
	width: 100%;
	margin: 0;
	padding: .5em;
}
table td {
	border-width: 0;
	vertical-align: top;
	text-align: left;
	padding: .5em;
}

/* Display of document_id at bottom of documentDetail.php*/
.internal-info {
	font-size: 60%
}

/* Table with alternating row color  */
.tableBgRows {
	border-collapse:collapse;
}
.tableBgRows > tbody > tr > td, .tableBgRows > tbody > tr > th {
	padding:7px;
	border:#4e95f4 1px solid;
}
/*  Define the background color for all the ODD background rows  */
.tableBgRows tr:nth-child(odd), .tableBgRows tr:nth-child(odd) a {
 background: #b8d1f3;
}
/*  Define the background color for all the EVEN background rows  */
.tableBgRows tr:nth-child(even), .tableBgRows tr:nth-child(even) a {
 background: #dae5f4;
}
.inline {
	display: inline;
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.block {
	display: block;
}
.inlineBlock {
	display: inline-block;
}
.padded {
	padding: .5em;
}
.floatRight {
	float: right;
	padding: .3em;
}
.red {
	color: red;
}
.fake {
	font-size: 120%;
	color: red;
	font-weight: bold;
	text-align: center;
}
.bills-note {
	font-style: italic;
	color: green;
	font-size: 110%;
}
.bigBenPage { /* Used on page westclox/products/ben/index.html */
	max-width: 18.75em;
	text-align: center;
	font-size: 100%;
}
.bigBenPage h3 {
	margin: .5em;
	text-align: center;
}
.bigBenPage h4 {
	margin: .5em;
	text-align: center;
	max-width: 18.75em;
}
.drowsePage { /* Used on page westclox/products/electric/drowse/index.html */
	max-width: 25em;
	text-align: left;
	font-size: 100%;
}
.drowsePage h3 {
	text-align: center;
}
.drowsePage h4 {
	margin: .5em .2em 0 0;
}
li {
	padding-top: .3em;
	padding-bottom: .3em;
}
/* Header images, top navigation bar,  bottom links (About, etc) very bottom small links, copyright  */

/* Google Search Box */
#cse-search-box {
	text-align: right;
	padding: 0 .5em 0 .5em;
}
.outerLogoContainer {
	display: flex;
	justify-content: space-between;
}
.headerLogoContainer {
	text-align: left;
	/*vertical-align: middle; */
	padding-bottom: .8em;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.headerLogo {
	display: inline-block;
	vertical-align: middle;
}
.donationsLinkLarge {
	text-align: right;
	vertical-align: bottom;
	padding: 3em .5em .5em 0;
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0;
}
.donationsLinkSmall {
	display: none;
	text-align: left;
	vertical-align: top;
	padding: 0 1em .5em 0;
	font-weight: bold;
}
.display-small-only {
	display: none;	
}
.topNav {
	background: #ccffcc;
	text-align: left;
	padding: .7em .7em .7em .7em;
	font-size: 100%;
	margin: .5em;
}
.topNav a {
	background: #ccffcc;
	display: inline-block;
	padding: .7em 0 .7em 0;
}
.topNav img {
	padding: 0 .3em 0 .3em;
}
.topNavHome {
	background: #ccffcc;
	text-align: center;
	padding: .7em .5em .7em .5em;
	font-size: 100%;
}
.topNavHome a {
	background: #ccffcc;
	padding: .7em 1em .7em 1em;
	display: inline-block;
	vertical-align: top;
	color: #0000ee;
}
.topLinkRow {
	text-align: right;
	padding-top: .5em;
}
.topLinks {
	text-align: center;
	padding-left: .5em;
	padding-right: .5em;
	display: inline;
}
.topLinks a {
	background: #ccffcc;
	padding: .7em 1em .7em 1em;
	color: #0000ee;
}
.bottomLinks1 {
	text-align: center;
	background: #ccffcc;
	padding: .8em;
	margin: .5em;
	line-height: 1.5;
}
.bottomLinks1 div {
	display: inline-block;
	padding-top: .2em;
	padding-bottom: .2em
}
.bottomLinks1 a {
	background: #ccffcc;
	padding-left: .5em;
	padding-right: .5em;
}
.footerTopOfPage {
	padding: .5em 0 .5em 0;
	text-align: center;
}
.footerHomePageLink {
	padding: .5em 0 .5em 0;
	text-align: center;
}
.copyright {
	font-size: small;
	text-align: center;
}
.veryBottomLinks {
	text-align: center;
}
.veryBottomLinks a {
	padding: .9em .7em .9em .7em;
	font-size: 80%;
	display: inline-block;
}
.adTop {
	text-align: center;
	padding: .5em;
}
.adBottom {
	text-align: center;
	padding: .5em;
}
/*  Static page navigation: Westclox, ST, Telechron, Set Electric, etc) */
.navHeaderLarge {
	text-align: center;
	font-size: 125%;
	font-weight: bold;
	padding: .2em;
}
.navMenu {
	text-align: center;
	vertical-align: top;
}
.navMenuBlock {
	display: inline-block;
	max-width: 280px;
	max-width: 20rem;
	vertical-align: top;
	padding: .2em;
	text-align: left;
}
.navMenuHead {
	font-size: 110%;
	font-weight: bold;
	padding: .4em;
}
.navMenuBlock li {
	text-align: left;
	padding: .3em;
}

/***************    Database display   *******************/
.gPlusOne {
	text-align: center;
	margin: 1em 0;
}
.mainModelsMenu {
	text-align: center;
	padding-bottom: .5em;
}
.mainModelsMenu h2 {
	text-align: center;
}
.mainModelsMenu a {
	padding: 0 .1em 1em .5em;
	margin: 0 1.5em;
	display: inline-block;
	max-width: 300px;
	max-width: 21rem;
}
.mainModelsMenu div a {
	/*display: flex; */
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	/*justify-content: space-around;
	flex-wrap: wrap; */
}
.series-name-table {
	max-width: 60rem;
	text-align: center;
	padding-bottom: 1em;
	margin: .5em auto;
}
.series-name-data {
	display: inline-block;
	width: 8rem;
	padding: .2em;
	text-align: center;
	vertical-align: middle;
}
.series-name-data a {
	padding: .6em;
	line-height: 1.5;
	display: inline-block;
}
.style-list {
	max-width: 750px;
	max-width: 53.6rem;
	padding: 1em 0 1em 0;
	margin: .5em auto;
}
.style-row {
	border-collapse: collapse;
	border: thin solid black;
}
.style-row h2 {
	text-align: center;
	margin: 0 .3em;
}
.style-name {
	width: 128px;
	width: 8rem;
	padding: .1em;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
}
.style-name a h2 {
	padding: .6em;
	font-size: 100%;
}
.style-photo {
	/*width: 150px;
	width: 10.7rem;*/
	display: inline-block;
	vertical-align: middle;
	padding: .5em;
}
.style-description {
	padding: .5em;
	display: inline-block;
	vertical-align: middle;
	/*max-width: 180px;
	max-width: 12.9rem; */
	/*width: 45%; */
}
.style-dates {
	padding: .5em;
	display: inline-block;
	vertical-align: middle;
	/*max-width: 128px; max-width: 8rem;*/
	/*width: 20%;*/
}

.menuLargeLink {
	font-size: 125%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 .4em 0;
}
@media screen and (max-width: 599px) { /* Wide display */
.style-description {
	display: block;
 width: auto;
}
}
@media screen and (min-width: 600px) and (max-width: 699px) {
.style-description {
 width: 40%;
}
.style-dates {
 display: block;
 width: 100%;
 text-align: center;
}
}

@media screen and (min-width: 700px) and (max-width: 779px) {
 .style-description {
 width: 50%;
}
.style-dates {
 display: block;
 width: 100%;
 text-align: center;
}
}
@media screen and (min-width: 780px) and (max-width: 899px) {
 .style-description {
 width: 55%;
}
.style-dates {
display: block;
 width: 100%;
 text-align: center;
}
}
@media screen and (min-width: 900px) { /* Wide display */
.style-description {
width: 46%;
}
.style-dates {
 max-width: 96px;
 max-width: 6rem;
}
.style-dates h3.inlineHeader {
 display: block;
}
}
.model-numbers-table {
	max-width: 60rem;
	text-align: center;
	margin: .5em auto;
}
.model-numbers-data a, .model-names-data a {
	padding: .6em;
	line-height: 1.5;
	display: inline-block;
}
.model-numbers-data {
	display: inline-block;
	width: 6rem;
	padding: .2em;
	text-align: center;
	vertical-align: middle;
}
.model-names-table {
	max-width: 68rem;
	text-align: center;
	margin: .5em auto;
}
.model-names-data {
	display: inline-block;
	width: 8rem;
	padding: .2em;
	text-align: center;
	vertical-align: middle;
}
.markdownNoP p {
	margin: 0;
	padding: 0;
	display:inline;
}
.markdownNoFirstLineReturnP p {
	margin-top: 0;
}
img.topImageStyleDetail {
	float: right;
	margin: .5em;
}
/* Used only by tabular data entered into the database (markup format) with a model, style, model, etc. Not useg by navigtion */
table.data {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 1em;
}
table.data td {
	padding: .5em 1em .5em 1em;
}
table.data h2 {
	padding: 0;
	margin: 0;
	text-align: center;
}
table.data th {
	padding: .2em .5em .2em .5em;
}

/* New photo gallery used starting May 2016 */
/* Responsive Flex Photo gallery */
.flex-gallery-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start; 
	justify-content: center; 
	padding-top: .5em;
}
.flex-gallery-container div {
	border: solid thin lightgray;
	border: none;
	margin: .1em;
	min-width: 15em;
	padding-bottom: .5em;
}

.flex-gallery-container figure {
	padding: .1em; 
	display: table;  /* Makes caption same width as image */
}

.flex-gallery-container figcaption { 
	display: table-caption; /* Makes caption same width as image */
	caption-side: bottom ; /* Makes caption same width as image */
	text-align: center;
	max-width: 2000px; /* To negate the max-width: 17em in the general figure section */
	padding: 0 .7em 0 .7em; 
	margin-top: -.3em;
}

/* Caption on top for detailSeries */
figcaption.detail-series-group { 
	caption-side: top ; 
}

div.tableCaptionCompact {
	font-size: 80%;
	border: none;
	text-align: left;
	margin-top: .5em;
}
/* Styles for single image such as in examplePhotoDetail.php */
.detail-photo-image {
	text-align: center;
}
.detail-photo-image figcaption {
	text-align: center;
	font-size: 90%;
	display: block;
	max-width: 2000px; /* To negate the max-width: 17em in the general figure section */
	margin: auto;
	padding: .25em;
}

/*   

figcaption.docModelInfoGroupCaption {
	/* need the selector figcaption for the margin to take effect */
	/*
	margin-top: -1.5em;
}

*/
.docModelInfoPhotoCaption {
	font-size: 70%;
}

/* For model information at bottom of saleItemDetail.php  */
.saleItemDetail-model {
	font-size: 80%;
}


/* Previous-Next navigation */

.nav {
	font-size: 90%;
	font-weight: bold;
	padding: 0 .25em;
	vertical-align: middle;
	margin: 0 auto;
	max-width:100%;
	text-align: center;
}
.nav a, .nav div {
	display: inline-block;
	padding: .3em .2em;
	text-align: center;
}
.navPrev {
	text-align: center;
}
.navNext {
	text-align: center;
}

/* End of Previous-Next Navigation */

/* Dials for Sale */
.dialLinks {
	vertical-align: middle;
	background: #ccffcc;
	text-align: center;
	padding-bottom: .5em;
}
.dialLinks a {
	background: #ccffcc;
	padding: .9em;
	display: inline-block;
	max-width: 210px;
	max-width: 15rem;
	vertical-align: middle;
}
.dialForSale {
	vertical-align: top;
	border-bottom: black solid medium;
	margin-bottom: 1em;
}
.dialText {
	vertical-align: top;
	display: inline-block;
	max-width: 20em;
	padding-right: .5em;
}
.dialForSale input[type="submit"] {
	margin: 1.5em;
}
.prevNext {
	font-size: 90%;
	padding: .5em;
	vertical-align: middle;
	margin: .5em auto;
	max-width:80%
}
.prevNext a {
	display: inline-block;
	padding: .3em .5em .3em 0;
}
.prevNext .next {
	float: right;
}
.prevNext .next a {
	padding: .3em 0 .3em .5em;
}
hr {
	clear: both;
}

/* For Medium and small screens, let images scale */
@media only screen and (max-width: 800px) {
/* added 2014-1-1 for responsive design */
/* Moved here 2014-7-14, previously was effective for all screen sizes) */
img {
	max-width: 100%; 
	height: auto;
}
}

/* For small screens */
@media only screen and (max-width: 550px) {
 .headerLogoContainer, .adTop, .donationsLinkLarge {
display: none;
}
body {
 font-size: 110%;
 line-height: 1.6;
}
.mainModelsMenu a {
 padding: 1em;
 margin: .5em;
}
.donationsLinkSmall {
	display: inline;
}
.display-small-only {
	display: inline-block;	
}
}
@media only screen and (max-width: 900px) { /* makes links within text readable on small screens */
.largerLinkText {
 font-size: 110%;
 line-height: 1.6;
}
}

/* PDF Viewer  */
@media screen and (max-width: 400px) {
.pdf {
	width: 265px; 
	width: 100%;
	height: 400px;
}
}
@media screen and (min-width: 401px) and (max-width: 600px) {
.pdf {
	width: 365px; 
	width: 100%;
	height: 500px;
}	
}
@media screen and (min-width: 601px) and (max-width: 800px) {
.pdf {
	width: 565px; 
	width: 100%;
	height: 800px;
}
}
@media screen and (min-width: 801px) and (max-width: 1050px) {
.pdf {
	width: 765px; 
	width: 100%;
	height: 1033px;
}
}
@media screen and (min-width: 1051px) {
.pdf {
	width: 965px; 
	height: 1300px;
}
}

@-ms-viewport {
 zoom: 1.0;
 width: extend-to-zoom;
}
@-o-viewport {
 zoom: 1.0;
 width: extend-to-zoom;
}
@viewport {
 zoom: 1.0;
 width: extend-to-zoom;
}