/***************************************************************************
tmx.css
copyright (c) Thermaxx Jackets 2017-2026

2019-04-02 added bigtextbox
2019-04-24 removed bigtextbox, added .explanation

***************************************************************************/

/* 
default is landscape
@media is used for portrait
*/

/* no extra spaces unless explicity listed and set default font size */
* {
	font-size: 4vh;  /* this is the font's height portrait  landscape 3 */
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;
}

body {
	background: #DDDDDD;
	overflow-x: hidden; /* need this otherwise x space is allocated for a vertical scrollbar and when elements' widths sum to 100 then there is overflow */
}

/*------------------------------------------------------------------
this is the  bar that goes across the top 
-------------------------------------------------------------------*/
#apptitle {
	background:#4B0082;
	text-align:center;
	padding: 0px 0.5em 0px 0.5em;
	overflow-x: hidden;
	overflow-y: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	z-index: 300;
	height: 5vh;
}

#captiontext {
color:white;
font-weight:bold;
padding-top: 0.25vh; /* top is a little thicker to move the text down to better middle align it */
padding-left: 0.5vw; /* matches margin-left on other elements */ 
text-overflow: ellipsis;
white-space: nowrap;
}

/* the container for the buttons on the title bar */
#titlebuttons {
/*padding: 0.5vw 1vw; */
}

/* used to float the buttons right - needed because some browsers might round the viewport units */
.right {
float: right;
}

/*------------------------------------------------------------------
this is the  main container - everything but the title goes in here 
-------------------------------------------------------------------*/
#maincontainer {
	position: absolute;
	top: 5vh; /* this needs to match the apptitle above */
	left: 0px;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	/*height: 97vh; /*remainder of top and footer */
	/*overflow-y: scroll;*/
	overflow-x: hidden;
}
@media all and (max-aspect-ratio: 1/1) {
	#maincontainer {} /* this needs to match the apptitle above */
}

/* this div spans the entire width - like a tr - generally a label and input goes in each one */
.maindivs {
box-sizing: border-box; /* width will include padding and content */
width: 100vw;
overflow-y: auto; /* hack: exists only so the children divs' heights force the height of this div to grow */
/* no left/right padding since it causes problems when the div goes two rows (portrait) */
padding-top: 0.5vh;
padding-bottom: 0.5vh;
}

.extraspace {
	/*margin-bottom:0.5vw;*/
	border-bottom: 1px solid #AAAAAA;
}
/* for any element that needs to be inline */
.inline {
display: inline-block; 
}

/* to alternate background color from body */
.even1 {
background: #DAD7DD;
}

/* leftelement, centerelement, and rightelement are defined to allow only 1vw spacing between elements */
.leftelement {
margin-left: 1vw; 
margin-bottom: 0vw; /* portrait 0.3 landscape 0 this addes a little space vertically between elements */
width: 40vw; /* portrait 98 landscape 37*/
text-align: right;
}
@media all and (max-aspect-ratio: 1/1) {
	.leftelement {
		width: 30vw;
	}
}

.centerelement {
margin-left: 1vw;
/*width: 55vw; /* portrait 91 landscape 55 */
}
@media all and (max-aspect-ratio: 1/1) {
	.centerelement {width: 91vw;}
}

.rightelement {
	margin-right: 1vw;
	margin-left: 1vw;	
}

/* inputelement is all the input text, selects, and buttons 
    padding doesn't seem to work correctly here - like it's internal to element */
.inputelement {
	padding-left: 0.1em; /* fjk I think this padding might mess up total width */
	padding-right: 0.1em; /* that's why padding is set to 0 for the doc */
	-webkit-appearance: none; /* otherwise button is wrong on iOS */
	border-radius: 1vh;
	color: #000000;       /* black text */
	background: white;   /* background changes on the resultbox FJK */
	height: 5vh; /* portrait   landscape 5 fjk changed to 4*/
}
@media all and (max-aspect-ratio: 1/1) {
	.inputelement {}
}

/* the text inputs */
.textbox {
	width: 10vh;
	text-align: right;
}
@media all and (max-aspect-ratio: 1/1) {
	.textbox {}
}

/* for any input elements that are clickable */
.handcursor{
	cursor: pointer;
}

/*---------------------------------------------------------*/
/* inputbox and resultbox 
   - black text white background - although do they always match default colors? 
   these match the constants in constants.php
   _RESULTBOXOK
   _RESULTBOXWAIT
   _RESULTBOXERROR
*/

/* extension ok - black text, white background */
.resultboxok {
	color:#000;
	background: #F7FFF7;
	/*border: 3px solid green;*/
}
/* waiting extension - black text, gray background */
.resultboxwait {
	color:#222;
	background: #E9E9E9;
}
/* error extension - red text, white background */
.resultboxerror {
	color:#F00;
	background: #FFF7F7;
}

/* information button  ----------------------------------------------------------*/
.button {
	font-weight: bold;
}
.ibutton {
	width: 4vw;   /* portrait 6 landscape 4 */
}
@media all and (max-aspect-ratio: 1/1) {
	.ibutton {
		width: 6vw;
	}
}

.notetext {
	font-size: 1.5vh;
	text-align: center;
}

#calcbutton {
	width: 35vw;
	background: #A0E0A0;
}

#addlayerbutton {
	padding-left: 1em;
	padding-right: 1em;
	width: 15vw;
	background: #E6E6FA;
	height:1.75vh;
}
@media all and (max-aspect-ratio: 1/1) {
	#addlayerbutton {
		height: 2vh;
		font-size: 1vh;
		width: 25vw;
	}
}

#pipesize {
	width: 10vh; /* to match text input */
}

/* any elements that are initially hidden because of which system is inititally selected */
.hidden {
	display:none;
}

/*-------------------------------------------------------------------------------------------------
here are the popup information "windows"
--------------------------------------------------------------------------------------------------*/

/* infocontainer - this is the whole screen, grayed out */
.infocontainer {
display: none;
z-index: 1;
position: fixed;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
height: 100vh;
background-color: gray;
background-color:rgba(221,221,221,0.9); /* alpha 1.0 is opaque */
/* need the overflow-y because the definition my be too long and may require scrolling */
overflow-y: auto;

/* give it a little space on each side */
box-sizing: border-box; /* width will include padding and content */
padding: 3vw; 
/* but it still might overflow on the bottom - see overflow-y above */
}

.infotable {
background: black;
color: white;

border-spacing:0px;
border-radius: 0.5vw;

/* auto margins will center it horizontally */
margin-left: auto;
margin-right: auto;
}

.idtitle {
text-align: center;
font-weight: bold;
border-bottom: 1px solid green;
padding: 0.4em;
}

.idfield {
text-align:left;
padding-right:1em;
padding-left: 0.5em;
padding-bottom: 0.7em;
}

.data {
font-weight: bold;
padding-right: 0.5em;
padding-bottom: 0.7em;
}

/* for the quantity and unit definitions */
.definition {
max-width: 25em;
padding-right: 0.5em;
padding-bottom: 0.7em;  /* this makes a nice, larger space on the bottom */
}

/* the only link is the email address.  This scheme works on black background  */
a:link    {color: #00FF00;}
a:visited {color: green;}
a:hover   {color: red;}

/* bottom and top are for the popup tables */
.bottom {vertical-align: bottom;}
.top    {vertical-align: top;}


/*   for explanation window */
.explanation {
font-family: "Lucida Console", Monaco, monospace;
font-size:medium;
color:#FFF;
background: #000000;
}