/* Special style sheet to handle screen versions of union index documents */
html, body			{ font-size: 100% }
.brown				{ color:#CD853F }
.brownbold			{ color:#bb8822; font-weight: bold; }
.cen				{ text-align:center; margin-top: 2.0em }
.eqh3				{ font-size:1.0em; padding-top:1em }
.gb					{ border: green solid; margin-left: 5% }
.graybg1			{ background-color:rgb(220,220,220) }
.graybg0			{ background-color:rgb(230,230,230) }
.navtext			{ font-size: 70%; }
.shadow				{ box-shadow: 5px 5px 5px whitesmoke }
.volumenumber		{ font-family: 'Inconsolata', 'Courier New', Courier, monospace; font-size:19px; font-weight:bold; line-height:2.4em; color:#CC5039; text-align: left; text-shadow: 2px 2px 2px silver }
.zdblack			{ background: rgb(5, 0, 45 ) }
.zdblue 				{ background: rgb(5, 0, 75 ) }
a:link				{ color: #0045D5; text-decoration: none}
a:active			{ color: red; font-size:100%; text-decoration: none }
a:visited			{ color: #0045D5; font-size:100%; text-decoration: none }
a:hover				{ text-decoration: none; color: #cc0066}
body					{ background-color: #EDF2FA; font-family: Arial, Helvetica, sans-serif }
div.graphic			{ background-color:silver; border-width: 3px; border-style: solid; border-color: rgb(200,200,200); padding-left:16px; margin-bottom:1em; border-radius:5px }
div.graphicsmall		{ background-color:silver; border-width: 3px; border-style: solid; border-color: rgb(200,200,200); margin-bottom:0em; padding-left:6px; padding-top:6px; padding-right:6px; padding-bottom:3px; border-radius:5px }

/* first tab */
div.navigation1	{
				background-color: rgb(255,245,220);
				border-left:2px #96B6E0 solid;
				border-right:2px #96B6E0 solid;
				border-top:2px #96B6E0 solid;
				border-top-left-radius:10px;
				border-top-right-radius:10px;
				cursor:pointer;
				float:left;
				height:35px;
				margin-bottom:0em;
				margin-left:0px;
				padding-left:.8em;
				position:absolute;
				width:19em;
				z-index:1;
				}
div.navigation1:hover	{ background-color: #ffffff }

/* second tab */
div.navigation2	{
				background-color:rgb(234,234,234);
				border-top:2px #96B6E0 solid;
				border-left:2px #96B6E0 solid;
				border-right:2px #96B6E0 solid;
				border-top-left-radius:10px;
				border-top-right-radius:10px;
				cursor:pointer;
				height:35px;
				margin-bottom:0em;
				margin-left:19em;
				padding-left:1.8em;
				position:relative;
				width:19em;
				z-index:0;	/* set behind navigotion1 */
				}
div.navigation2:hover	{ background-color: #ffffff }
div.info				{ background-color:whitesmoke; border-width: 3px; border-style: solid; border-color: rgb(200,200,200); padding:.2em; border-radius:5px; margin-bottom:2em; margin-top:2em}
div.main				{ display: inline-block; background-color:white; color:black; line-height:135%; margin:0em 0em 0em 0em; font-size:95%; font-family:Arial, Helvetica, sans-serif; padding: 1em 1em 0.5em 1em; border:.4em solid #96B6E0 }
h2					{ text-align:center; margin-top:1.34em; font-size:1.34em }
h2.issue			{ font-family:'Inconsolata', 'Courier New', Courier, monospace; font-size:17px; padding-top:0em; padding-bottom:0em; color:green; text-align: left; text-shadow: 2px 2px 2px silver }
h2.volume			{ font-family:'Inconsolata', 'Courier New', Courier, monospace; font-size:19px; padding-top:0.5em; padding-bottom:0.4em; color:#CC5039; text-align: left; text-shadow: 2px 2px 2px gray }
hr					{ text-align: left; color: #96B6E0; background-color: #96B6E0; border:none; height: .2em; margin-left:0em; margin-right:0em }
p					{ font-family:'Cousine', 'Courier New', Courier, monospace; font-size:95%; line-height:1.4em; padding-right:1em }
p.index				{ font-family:'Inconsolata', 'Courier New', Courier, monospace; font-size:15px; line-height: 1.4em } /* if needed */
p.key				{ font-family:'Inconsolata', 'Courier New', Courier, monospace; font-size:16px; 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: #E7EFF8; content: "&nbsp"; border: 1px solid #D8E4F3; border-radius: 3px; margin: 2px 0px 2px 10px }
p.shadedbackground	{ background-color:#eeeeee; padding:0.5em; font-size:smaller }
p.subtitle			{ font-family:'Inconsolata', 'Courier New', Courier, monospace; font-size:18px; margin-left:0em; padding-bottom:1.0em }
p.title				{ font-family:'Inconsolata', 'Courier New', Courier, monospace; font-size:23px; text-shadow: 2px 2px 2px silver; margin-left:0em;  display: inline }
table.info			{ border-collapse:collapse; padding-top:3em; font-size:82% }
td.sh				{ padding-top:0.3em }
td					{ text-align:left }
tr					{ vertical-align:top }
tr.sh				{ border-top:solid; border-top-color:rgb(200,200,200); border-top-width:2px }
.continued			{ font-size:18px; color: #C14239 }
.extra				{ font-size:18px; color: #3974C1 }



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

/* Small Mobile Portrait */

@media only screen and (min-width : 320px) and (max-width : 599px) {
/* Styles */
html, body		{ font-size: 90% }
body				{ margin-top: 10px }
p				{ font-size: 100% }
p.title			{ font-size: 15pt; line-height: 1.2 }
p.subtitle		{ font-size: 13pt }
p.key			{ font-size: 12pt; line-height: 1.1; color: crimson }
.navtext		{ font-size: 11pt }
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 }
div.navigation1	{height: 50px; 
				border-left:4px #96B6E0 solid;
				border-right:4px #96B6E0 solid;
				border-top:4px #96B6E0 solid;
				margin-left: 0px;
				width: 18em;
				padding:0 0 1em 1.5em;
				position: relative;
				float: left;
				}
				div.navigation2	{height: 50px; 
				border-left:4px #96B6E0 solid;
				border-right:4px #96B6E0 solid;
				border-top:4px #96B6E0 solid;
				margin-left: 0px;
				width: 18em;
				padding:0 0 1em 1.5em;
				position: relative;
				float: left;
				border-top-left-radius:0px;
				border-top-right-radius:0px;
				}
}


/* 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-size: 20pt }
p.title			{ font-size: 32pt; line-height: 1.2 }
p.subtitle		{ font-size: 28pt }
p.key			{ font-size: 28pt; line-height:1.1; color: crimson }
.navtext		{ font-size: 24pt }
div.main			{ margin-right:.5em; margin-left:.5em; margin-top:0em }
p.nowrap	 		{ color: black; font-size: 23pt; white-space: normal }
p.nowrap br			{ background: #C0D3EC; content: "&nbsp"; border: 1px solid #C0D3EC; border-radius: 3px; margin: 4px 0px 6px 0px }
div.navigation1	{ height: auto; min-height: 100%;
				border-left:6px #96B6E0 solid;
				border-right:6px #96B6E0 solid;
				border-top:6px #96B6E0 solid;
				margin-left: .5em;
				width: 24em;
				padding:0 0 0 1em;
				position: relative;
				float: left;
				}
div.navigation2	{ height: auto; min-height: 100%;
				border-left:6px #96B6E0 solid;
				border-right:6px #96B6E0 solid;
				border-top:6px #96B6E0 solid;
				margin-left: .5em;
				width: 24em;
				padding:0 0 0 1em;
				position: relative;
				float: left;
				vertical-align: middle;
				border-top-left-radius:0px;
				border-top-right-radius:0px;
				}
}


/* 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-size: 14pt }
p.title			{ font-size: 23pt }
p.subtitle		{ font-size: 18pt }
p.key			{ font-size: 20pt; color: crimson }
.navtext		{ font-size: 15pt }
div.main			{ margin-right:.5em; margin-left:10px; margin-top:0em; padding-bottom: 0px }
p.nowrap	 		{ color: black; font-size: 14pt; white-space: normal }
p.nowrap br			{ background: #C0D3EC; content: "&nbsp"; border: 1px solid #C0D3EC; border-radius: 3px; margin: 4px 0px 6px 0px }
div.navigation1	{ height: auto; min-height: 100%;
				border-left:6px #96B6E0 solid;
				border-right:6px #96B6E0 solid;
				border-top:6px #96B6E0 solid;
				margin-left: 10px;
				width: 24em;
				padding:0 0 0 1em;
				position: relative;
				float: left;
				}
div.navigation2	{ height: auto; min-height: 100%;
				border-left:6px #96B6E0 solid;
				border-right:6px #96B6E0 solid;
				border-top:6px #96B6E0 solid;
				margin-left: 10px;
				width: 24em;
				padding:0 0 0 1em;
				position: relative;
				float: left;
				vertical-align: middle;
				border-top-left-radius:0px;
				border-top-right-radius:0px;
				}
}