/* ---- default theme designed to look good on iPad in horizontal orientation ---- */
/* Define global case */
* { font-family: "Open Sans"; margin: 0; padding: 0; text-align: center; }
html, body { width: 100%; height: 100%; font-size: 89%; overflow: hidden; }
body { background-color: #eeeeee; color: black; font-weight: normal; overflow-y: auto; -webkit-overflow-scrolling: touch; }
a:hover { cursor: pointer; }
h1, h2, h3 { margin: 0 0 5px 0; }
p, h4 { margin: 5px 0 5px 0; }
h3 { font-size: 1.3em; }
ul { margin: 0 0 0 1.5em; text-align: left; }
li { margin-bottom: 3px; padding-left: 0; list-style-position: outside; text-align: left; }
img { border: 0; }

/* Fix box model for all browsers */
button, input, select, textarea, div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Force consistent textarea behavior */
textarea { vertical-align: top; overflow: auto; }

/* Define flexbox layout controls */
.flex {
	display: flex;
}
.row {
	flex-direction: row;
}
.space-between {
	justify-content: space-between;
}
.grid-container {
	margin-left: 1em;
	margin-right: 1em;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 1em;
}

/* Set default button appearance */
button, select { padding: 5px; height: 30px; transition-duration: 0.1s; border-radius: 3px; background-color: #4970b6; color: white; border: 1px solid #bbbbbb; }
button:hover { background-color: #171d40; color: white; }
.hloc { background: #171d40; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.bar { height: 50px; }

/* body layout elements */
span#logo {
	width: 90px; height: 50px;
	background-image: url('images/hloc_logo.png');
	background-position: left top;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
span#longtitle, span#midtitle, span#shorttitle { font-family: "Times New Roman", Times, serif; font-size: 20pt; color: white; text-align: center; margin-top: 10px; margin-left: 10px; }
span#midtitle, span#shorttitle { display: none; }
section#body { position: relative; width: 100%; margin: 10px; }
section#group1 { width: 480px; }
section#group2 { position: absolute; top: 0; left: 480px; right: 20px; bottom: 0; margin-left: 10px; }
span#menu { padding: 3px 0 3px 0; }
span#menu select { margin-top: 5px; margin-right: 10px; }

/* media player window elements */
div.widescreen { position: relative; height: 0; padding: 28.125% 0 28.125% 0; }
iframe#videoplayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; overflow: hidden; }
div#message { position: absolute; bottom: 20px; left: 0; right: 0; color: white; font-size: 12pt; }
div.segments { display: none; position: absolute; transition-duration: 0.2s; bottom: 62px; height: 10px; width: 100%; }
div.timeline { position: relative; transition-duration: 0.2s; top: 0; left: 0; width: 100%; height: 100%; }
div.segment { position: absolute; top:0; bottom:0; }
div.info { display: none; position: absolute; z-index: 1; bottom: 30px; left: 50%; line-height: normal; transform: translateX(-50%); padding: 5px; color: white; background-color: rgba(0,0,0,0.8); border: 1px solid black; border-radius: 2px; }
div.segments:hover { height: 20px; }
div.segment:hover > div.info { display: block; }
section#videopane:hover div.segments { display: block; }

/* content pane elements */
div.pageheight { position: relative; width: 0; padding: 0 64.71% 0 64.71%; }
section#contentpane { height: 610px; margin-top: 10px; margin-bottom: 10px; padding: 5px 0 5px 0; background-color: #dde9f4; box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.75); border-radius: 3px; }
section#contentpane A, section#contentpane A:link, section#contentpane A:visited, section#contentpane A:active, form#billsearch label { text-decoration: none; color: #26425f; }
section#contentpane A:hover { text-decoration: underline; color: #36362a; }
div.center { position: relative; margin: 0 auto; }
div.linkscolumn { display: inline-block; width: 220px; vertical-align: top; text-align: left; margin: 5px 0 0 5px; }
div.linkscolumn h4 { text-align: left; }
div.linkscolumn select { max-width: 210px;}
p.note { text-align: left; font-size: smaller; }
p.left { text-align: left; }

/* document pane elements */
section#documentpane { position: absolute; top: 35px; left: 0; right: 0; bottom: 0; text-align: left; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.75); border-radius: 3px; overflow: hidden; }
section#docwrapper { position: relative; width: 100%; height: 100%; }
iframe#docviewer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; overflow: scroll; -webkit-overflow-scrolling: touch; touch-action: auto; }
section#docloading { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; }
div#documentcontrols a, div#documentcontrols a:link, div#documentcontrols a:visited, div#documentcontrols a:hover { text-decoration: none; }

/* spinner for document loading */
@keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.absolute-center { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; }
.lds-dual-ring:after { content: " "; display: block; width: 10vw; height: 10vw; margin: 0; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; }

/* viewport with less than 690 pixel width - case: iPad, desktop, etc */
/* shorten title */
@media only screen and (max-width: 689px)
{
	span#longtitle { display: none; }
	section#contentpane, section#group1, section#group2 { width: 100%; margin: 0; }
	section#contentpane { height: auto; margin-top: 10px; margin-bottom: 10px; }
	section#body { margin: 0 auto; margin-top: 10px; }
	section#group2 { position: relative; left: 0; height: 800px; }
}

/* ---- force vertical page orientation ---- */
/* viewport with less than 960 pixel width - case: iPad, desktop, etc */
/* show website theme in a single column format with player image at max viewport width */
@media only screen and (max-width: 959px)
{
	section#contentpane, section#group1, section#group2 { width: 100%; margin: 0; }
	section#contentpane { height: auto; margin-top: 10px; margin-bottom: 10px; }
	section#body { margin: 0 auto; margin-top: 10px; }
	section#group2 { position: relative; left: 0; height: 800px; }
}

/* viewport with less than 1140 pixel width */
/* shorten title */
@media only screen and (max-width: 1139px) and (min-width: 690px)
{
	span#longtitle { display: none; }
	span#shorttitle { display: block; }
	section#body { margin: 0 auto; margin-top: 10px; }
	section#group2 { right:0px; }
}

/* viewport with less than 1300 pixel width */
/* shorten title */
@media only screen and (max-width: 1299px) and (min-width: 1140px)
{
	span#longtitle { display: none; }
	span#midtitle { display: block; }
	section#body { margin: 0 auto; margin-top: 10px; }
	section#group2 { right:0px; }
}