/***************************************************************************
converter.css
copyright (c) Kaputa Systems, LLC 2012-2017
***************************************************************************/

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

/* no extra spaces unless explicity listed and set default font size */
* {
font-size: 3vw;  /* this is the font's height portrait  landscape 3 */
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
@media all and (max-aspect-ratio: 3/2) {
	* {font-size: 5vw;}
}

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

/* for any element that needs to be inline */
.inline {
display: inline-block; 
}

.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.5vw;
padding-bottom: 0.5vw;
}

/*------------------------------------------------------------------
this is the green bar that goes across the top 
-------------------------------------------------------------------*/
#apptitle {
background:#00FF00;
}

#captiontext {
color:black;
font-weight:bold;
padding-top: 0.5vw; /* top is a little thicker to move the text down to better middle align it */
padding-left: 1vw; /* 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;
}

/* 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: 37vw; /* portrait 98 landscape 37*/
}
@media all and (max-aspect-ratio: 3/2) {
	.leftelement {
		width: 98vw;
		margin-bottom: 0.3vw;
	}
}

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


.rightelement {
margin-right: 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 {
-webkit-appearance: none; /* otherwise button is wrong on iOS */
border-radius: 0.5vw;
color: black;       /* black text */
background: white;   /* background changes on the resultbox FJK */
height: 5vw; /* portrait   landscape 5 */
}
@media all and (max-aspect-ratio: 3/2) {
	.inputelement {height: 8vw;}
}


/*---------------------------------------------------------*/
/* 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: #FFFFFF;
}
/* waiting extension - black text, gray background */
.resultboxwait {
color:#222;
background: #E9E9E9;
}
/* error extension - red text, white background */
.resultboxerror {
color:#F00;
background: #FFFFFF;
}

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

.goodbutton {
color: green;
}

#quantitytext {
padding-top: 0.5vw; /* extra space on top to better center-align this text */	
}

#equalstext {
font-size: 2vw; /* portrait 4   landscape 2 */
font-style: italic;	
padding-left: 1vw;
}
@media all and (max-aspect-ratio: 3/2) {
	#equalstext {font-size: 4vw;}
}


/*-------------------------------------------------------------------------------------------------
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;}