/* temporary shoehorn with !important */ 

@font-face { font-family: "Impact"; src: url("/css/impact.woff") format("woff"); }

div.newLayout { 
  min-height: 44vh;				/* was 09vh to draw box on full-screen when page is short */
  margin: 0 auto 			!important;
  border: 4px solid crimson 		!important;
}

h1 { 
  border-top: 2px solid crimson 	!important;
  background-color: mistyrose 		!important;
  font-family: Impact, Arial, Sans-Serif; 
  font-size: 2em 			!important; 
  font-weight: normal 			!important;
  margin-left: -10px			!important;
  padding-left: 10px			!important;
  
}

.plinth {					/* for status boxes, describing each form */
  border: 1px solid silver;
  background-color: lightYellow;
  margin: 0.7em 0em 1.2em 0.2em;
  padding: 0.5em;
  font-size: 0.8em;
  line-height: 1.5em;  
} 

ul.heading { margin-left: -1.3em; }				/* for list on index page */

ul.heading li { font-size: 1.2em; }  				/* for list on index page */

ul.nested li { margin-top: 10px; line-height: 1.4em;  } 	/* for list on index page */


/* ========== make H2 like H1 ========== */

H2 {
  border-top: 1px solid crimson;
  background-color: antiqueWhite;
  padding-bottom: 3px;
  margin-left: -10px;
  padding-left: 10px;
}  


/* ========== items for order form ========== */

H3 { margin-bottom: 0; }
H4 { margin: 1em 0 0 1em ; color: crimson; }

label.H3 {			/* Match H3 style. Im not using labels here, but just in case ... */
  display: block;
  font-size: 1.2em;
  margin: 1em 0 0 0 ;
  font-weight: bold;
}

label.H4 {			/* Match H4 style. Im not using labels here, but just in case ... */
  display: block;
  margin: 1em 0 0 1em ;
  font-weight: bold;
  color: crimson; 
}

P.form 		{ margin: 0; }
P.form_indent 	{ margin: 0 1em; }

INPUT 		{ font-size: 1em; 	padding: 0.2em 1em; 	margin-top: 0.5em;	background-color: azure;  border: 1px solid silver; }
INPUT.indent 	{ margin-left: 3%;	width: 97%; 		max-width: 600px;	box-sizing: border-box; }
INPUT.noindent 	{ margin-left: 0%;	width: 100%; 		max-width: 600px;	box-sizing: border-box; }

SELECT 		{ font-size: 1em; 	padding: 0.2em; 	margin-top: 0.5em;	background-color: azure;  border: 1px solid silver; }

#LIKE_FORM 	{ font-size: 1em; 	padding: 0.2em; 	margin-top: 0.5em;	background-color: azure;  border: 1px solid silver; 
		  margin-left: 0%;	width: 100%; 		max-width: 600px;	box-sizing: border-box; }

TEXTAREA 	{ width: 100%; 		max-width: 600px;	box-sizing: border-box; 
		  font-size: 1em; 	background-color: azure;  border: 1px solid silver; }


img.url {
  border: 0;
  padding-left: 0.5em;
  height: 12px;
  width: 12px;
}


/* ========== header ========== */

.header {
  float: right;
  width: 100px; height: auto; max-width: 15vw;
  margin-right: -20px;
  border: 5px solid white;
}


/* ========== footer ========== */

.footer {
  text-align: left;
  font-family: sans-serif;
  font-size: 10pt;
  line-height: 1.2em;
  padding: 20px 10px ;
  margin-top: 12px;
  background-color: honeydew;
}

.footer img {
  float: right;
  margin: -22px 10px 5px; 0 ;
}

.keepTogether {
  white-space: nowrap;
}


/* ========== highlighters ========== */

.highlighter { background-color: yellow; }
.crimson     { background-color: crimson; color: white; font-style: italic; font-weight: bold; padding: 0 0.3em;}
.crimson_text { color: brown; font-weight: bold; font-variant: small-caps; }

/* ========== special form elements ========== */

.url {
  width: 100%;
}


/* ========== order confirmation box ========== */

div.orderConfirmation {
  max-width: 360px; /* 90%; */
  margin: auto;
  text-align: left;
  font-family: monospace;
  white-space: pre;
  font-size: 10pt;
  line-height: 1.2em;
  padding: 10px 10px ;
  background-color: azure;
  border: 1px solid silver;
}


/* ========== development box ========== */

.devbox {
  margin: 10px 0;
  padding: 10px 10px ;
  background-color: ghostwhite;
  border: 3px dashed orange;
  display: none;		/* initial default */
}

span.technotes {
  background-color: gold;
} 

*:not(span).technotes {
  margin-left: 30px;
  padding: 5px 10px ;
  background-color: gold;
  font-size: smaller !important;
} 

/* ========== data tables ========== */

table.datatable 	{ white-space: pre; }
table.datatable td	{ padding: 0.3em 0.5em; }
table.datatable thead 	{ font-weight: bold; }