/* Special style sheet to handle screen versions of union index documents */
html, body			{ font-size: 100%;  font-family: Arial, Helvetica, sans-serif }
body					{ background-color: #ECFAEE; }
a:link				{ color: green; text-decoration: none}
a:active			{ color: red; text-decoration: none }
a:visited			{ color: green; text-decoration: none }
a:hover				{ text-decoration: none; color: red}

div.main				{ display: inline-block; background-color:white; color:black; line-height:135%; margin:0em 0em 0em 0em; padding: 1em 1em 0.5em 1em; border:.4em solid #95DF9B }
hr					{ text-align: left; color: #96B6E0; background-color: #95DF9B; border:none; height: .2em; margin-left:0em; margin-right:0em }
img.vignette			{ display: block; border: 2px solid #afbece; padding:10px; background-color:#e2e2e2; }
p					{ font-family: 'Quicksand', sans-serif; font-weight: 700; font-size:16px; line-height:1.6em; padding-right:1em }
p.key				{ color: black; font-family: 'Overpass Mono', monospace; font-weight: 600; font-size:17px; line-height: 0.8em; margin-bottom:0.8em; margin-top:0.9em; text-shadow: 2px 2px 2px gray; display: inline }
p.nowrap	 		{ color: black; white-space: normal }
p.nowrap br			{ display: block; height: 3px; background: #DAF6DE; content: "&nbsp"; border: 1px solid #DAF6DE; border-radius: 3px; margin: 2px 0px 2px 10px }
p.title				{ font-family: 'Quicksand', sans-serif; font-size:25px; text-shadow: 2px 2px 2px silver; text-align: center; font-weight: bold; margin-top: 0px}
p.navigation		{ font-family: 'Quicksand', sans-serif; font-size:20px; text-align: center; font-weight: bold; margin-bottom:0px; }



/* Breakpoints for fixed screen devices */
/* ### */

/* Small Mobile Portrait */

@media only screen and (min-width : 320px) and (max-width : 599px) {
/* Styles */
html, body		{ font-size: 16pt }
body				{ margin-top: 10px }
p				{ font-family: 'Overpass Mono', monospace; font-weight: 600; font-size: 100% }
p.key			{ font-size: 12pt; line-height: 1.1; color: crimson }
div.main			{ display: inline-block; margin-right:0px; margin-left:0px; margin-top:0px }
p.nowrap	 		{ color: black; font-size: 10pt;  }
p.nowrap br			{ background: #D4E1F2; border: 1px solid #C0D3EC; border-radius: 3px; margin: 5px 0px 5px 10px }
p.navigation		{   }
}


/* Tablet Portrait */
@media only screen and (min-width : 600px) and (max-width : 1023px) and (orientation : portrait) {
/* Styles */
html, body		{ font-size: 16pt }
body				{ margin-top: 10px }

p				{ font-family: 'Overpass Mono', monospace; font-weight: 600; font-size: 10pt }
p.title			{ font-size: 24pt; line-height: 1.2; padding-top: 20px }
p.key			{ font-size: 11pt; line-height:1.0; color: purple }
div.main			{ margin-right:.5em; margin-left:.5em; margin-top:0em;  }
p.nowrap	 	{ color: black; font-size: 11pt; white-space: normal }
p.nowrap br		{ background: #C0D3EC; content: "&nbsp"; border: 1px solid #C0D3EC; border-radius: 3px; margin: 4px 0px 6px 0px }
p.navigation	{ font-size:22pt; }
img				{ max-width: 100%; }
img.vignette		{ border: 2px solid #C0D3EC }
}


/* Tablet Landscape */
@media only screen and (min-width : 600px) and (max-width : 1023px) and (orientation : landscape) {
/* Styles */
html, body		{ font-size: 16pt }
body				{ margin-top: 15px }

p				{ font-family: 'Overpass Mono', monospace; font-weight: 600; font-size: 14pt }
p.title			{ font-size: 24pt; padding-top: 16px }
p.key			{ font-size: 13pt; color: brown }
div.main			{ margin-right:.5em; margin-left:10px; margin-top:0em; padding-bottom: 0px }
p.nowrap	 	{ color: black; font-size: 13pt; white-space: normal }
p.nowrap br		{ background: #C0D3EC; content: "&nbsp"; border: 1px solid #C0D3EC; border-radius: 3px; margin: 4px 0px 6px 0px }
p.navigation	{ font-size:20pt }
img.vignette		{ border: 3px solid #C0D3EC }
}