/*
   ParkinAll Visitor Parking Style settings 
*/

div.container {
    width: 100%;
    border: 1px solid gray;

}

header {
    padding: 0.4em;
    color: white;
    background-color: #D4D4D4;
    clear: left;
    text-align: center;
    border-style: outset;
    border-width: 2px;
}

footer {
    padding: 0.4em;
	padding-left: 1.4em;
    color: white;
    background-color: #555555;
    clear: left;
    text-align: left;
    border-style: none;   /* inset / outset */
    border-width: 2px;
}

h1 { 
    display: block;
    font-size: 2em;
    margin-top: 0.17em;
    margin-bottom: 0.17em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
} 

h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.13em;
    margin-bottom: 0.53em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
} 

h3 {
    display: block;
    font-size: 1.2em;
    margin-top: 0.13em;
    margin-bottom: 0.13em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
} 

h4 {
    display: block;
    font-size: 1.0em;
    margin-top: 0.00em;
    margin-bottom: 0.0em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
} 

h5 {
    display: block;
    font-size: 1.0em;
    margin-top: 0.00em;
    margin-bottom: 0.0em;
    margin-left: 0;
    margin-right: 0;
    font-weight: normal;
	text-align:left;
	color: #505050;
} 

input:focus {
    background-color: #E0E000;
}


.DisplayFont
{
	font: normal 24px/34px Arial;   /* font size / line height */
	color: #555555;					/* dark text color */
    /* text-shadow: 0 1px 0 rgba(250,250,250,2.75); */
	text-shadow: 2px 2px 4px #707070;
    font-weight: bold;
}

.xDisplayFont
{
	color: #555555;					/* dark text color */
    /* text-shadow: 0 1px 0 rgba(250,250,250,2.75); */
	text-shadow: 2px 2px 4px #707070;
	margin-top: 0.2em;
}    


.middle-background
{
    min-height: 20px;
    padding: 20px; 
    background-color: #B4B4B4; 		/* middle grey */
    border: none;
	
	/* box-shadow: inset 0 10px 30px rgba(100, 100, 100, 0.15); */
	/* not used
	font: normal 16px/28px Arial;
	color: #444444;					dark text color 
    text-shadow: 0 1px 0 rgba(0,0,0,0.75);
    font-weight: bold;
	*/
}

.corner-ui
{
    min-height: 20px; 
	padding: 5px;
    background-color: #D4D4D4;		/* light grey */
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
    border-bottom-right-radius: 14px;
	border-bottom-left-radius: 14px;
	margin-bottom: 20px;
    border: none;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.95); 
}

.picture-frame
{
    min-height: 20px; 
    /* background-color: #D4D4D4; */		/* light grey */
    /* background-color: #A4A4A4; */ 		/* dark grey */
    background-color: white; 
    border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	padding: 2px;
	box-shadow: 4px 4px 3px 0px #202020;  /* horizontal_offset, vertical_offset, blur, spread, shadow_clr*/
    border: none;
	/* not used
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.95); 
	margin-bottom: 20px;
	*/
}

.table-frame
{
    min-height: 20px; 
	padding: 5px;
    background-color: #D4D4D4; 	/* light grey */
    border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
	box-shadow: inset 0px 1px 3px 1px #202020;  /* horizontal_offset, vertical_offset, blur, spread, shadow_clr*/
	/* box-shadow: inset 0px 1px 3px #202020; */
    border: none;
	/* not used
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.95); 
	margin-bottom: 20px;
	*/
}


.field-row
{
	font-size: 200%;
    /* background-color: #FFFF3D; */
	text-align:right;
	
	/* these values make no difference 
    padding: 30px;  
	border: 10px solid black
	border-width: 10px;
	margin: 30px;
    cellpadding:"5px";
	cellspacing:"5px";
	*/
}

.field-row-small
{
	font-size: 80%;
    /* background-color: #FFFF3D; */
	text-align:right;

}

  

/* placement of buttons in a table */
table.NoBorder {
    padding: 0px 0px 0px 0px;       /* padding is inside border */
    margin: -4px 0px -4px 0px;      /* margin is outside of border */
	width: 100%;
}

/* force input field to display capitals */
input.Capitalize {
    text-transform:uppercase;       /* show in upper case */
 }

/* color of font if time is negative */
tr.Xwarning {
   color: #0f0a70;			/* dark violet */
}

/* hover over link buttons */
td#Xhover:hover {
    background: #0F0F0F;
}

/* hover over sortable table headings */
td#Xheading:hover {
    background: #29C9FF;
}


/* hotlink button display */
a.hotlink {
   color:#848484;
   display:block;
   font-weight:700;
   font-size:70%;
   padding:0 2px;
   text-decoration:none;
   font-family:Lato,Verdana,Arial,Tahoma;
   line-height:18px;
   white-space:nowrap;
   position:relative;
   height:20px
}


/* row color in table */
tr#tr_first {
    background-color: #0af1c1;
	font-weight: bold;
}

tr#tr_alternate {
    background-color: #e0e0e0;
}

tr#tr_primary {
    background-color: #f0f0f0;
}

/* simpler way of specifying even/odd colors */
tr#tr_body:nth-child(even) {
    background: #e0e0e0;
}
tr#tr_body:nth-child(odd) {
    background: #f0f0f0;
}


tr#tr_edit {
    background-color: #fffff0;
	border-width:0;
	padding:1em 1.4em 0em 0em;
}

td#td_expired {
    background-color: #F00000 
}

/* background tile */
.showBackground 
{
	background-image:url(../img/V002_tile_yellow.png);
	background-position:right 50%;
	background-repeat:repeat;
	font: Arial;
}

/* background tile for Top Bar */
.showBackgroundTop
{
	background-image:none;
	background-color: #D4D4D4;
	font: Arial;
}


#showBackgroundAdmin
{
	background-image:url(../img/V002_tile_green.png);
	background-position:right 50%;
	background-repeat:no-repeat;
}


.div-left {
	text-align:left;
}

/* for enhancing images */
._disabled_Opaque-filter
{
  z-index: 100001;

  filter: saturate(35%);
  -webkit-filter: saturate(35%);	/* safari 6.0 - 9.0 */
  /*
  filter: sepia(50%);
  filter: opacity(50%);
  filter: blur(5px);
  filter: contrast(50%);
  filter: grayscale(75%) blur(2px);
  filter: invert(50%);
  filter: saturate(50%);
  filter: contrast(50%);
  filter: brightness(200%);
  filter: drop-shadow(4px 4px 10px red);
  filter: hue-rotate(90deg);
  filter: none;

  */
}


.ModalDialog {
  border: 1px solid gray;
  border-radius: 4px;
  overflow: auto;
  box-shadow: 8px 8px 8px 1px #303030;
  background: #E4E4E4;

  padding: 5px;
  position: absolute !important;	/* cursor placement problems if you use Fixed on iOS ver11 */
  top: 2px;
  left: 2px;
  z-index: 100002;
  transition: all 0.25s linear;

  /* important */
  opacity: 1 !important;
  visibility: visible !important;
  display: none;

  /*
  width: 70%;
  height: 60%;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=7, Direction=135, Color='#888888')";
  margin: auto;
  -webkit-box-shadow: 0px 3px 10px rgba(34, 25, 25, 0.4);
  -moz-box-shadow: 0px 3px 10px rgba(34, 25, 25, 0.4);
  -ms-box-shadow: 0px 3px 10px rgba(34, 25, 25, 0.4);
  -o-box-shadow: 0px 3px 10px rgba(34, 25, 25, 0.4);
  border-collapse: separate;
  */
}


.ModalBackground 
{
  position: absolute !important;   /* cursor placement problems on iOS if set to fixed */
  top: 0px;
  left: 0px;
  height: 130%;
  width: 100%;
  z-index: 100001;
  background-color: white;
  display: none;
  transition: all 0.25s linear;
  
  /* important */
  filter: opacity(70%);
}

/* add standard padding to element */ 
 .3pxPadding
{
  padding: 3px;
}

/* checkbox size */
input[type=checkbox] {
  transform: scale(1.3);
}

/* pixel height of left image */
.img1 {
   width: 120px;
   height: 120px;
}
/* pixel height of right image */
.img2 {
    width: 120px;
	height: 120px;
}

/* pixel height of the header row */
.row1 {
    height: 100px;
}

.updateButton {
   font-size:200%;
   box-shadow: 3px 4px 8px 0 rgba(0, 0, 0, 0.5); 
}

/* size of the input fields in Validate */
.input1 {
     width:100%;
	 font-size:170%;
	 background-color:#f0f0f0;
}

/* size of the input fields in Validate */
.input1a {
     width:88%;
	 font-size:170%;
	 background-color:#f0f0f0;
}

.input2 {
     width:93%;
	 font-size:110%;
	 background-color:#f0f0f0;
}

.input3 {
     width:97%;
	 font-size:90%;
	 background-color:#f0f0f0;
	 -webkit-appearance: none; 
	 border-radius: 0;
}

.custom_button {
	font-size:110%; 
	padding: 5px 24px; 
	-webkit-appearance: none; 
	background-color: #E0E0A0; 
	border-radius: 12px;
	box-shadow: 4px 4px 3px 0px #202020;  /* horizontal_offset, vertical_offset, blur, spread, shadow_clr*/

    border-style: outset;
    border-width: 2px;

}

/* position of floating logout button */
.logout  {
	background:#EEEE00; 
	position:absolute; 
	top:1000px;			/* start with button off-screen */
	filter: opacity(60%);
	/* opacity:0.5; */
	border:0px solid black; 
	/*
	right:10px;
	top:160px; 
	display:block; 
	filter:alpha(opacity:20); 
	opacity:0.6; 
	border:0px solid black; 
	border-collapse: collapse;
	z-index: 100001;
	*/
} 

/*
   show a drop down selection box below an edit box.
   if the user clicks in the select box, copy the new value to the input box.
   clear the selection box when the input box loses focus.
*/ 
.dropdown-combo { position:relative;} 
.dropdown-combo select { position:absolute; background-color: #FFFFFF; bottom:-28px; left:0px; width:260px height:25px; font-size:120%; }


/*
   Popup Help List
*/
.popupList {
    color: black;
	padding: 8px 10px;
	text-decoration: none;
	display: block;
	font-style: normal; 
	font-family:verdana;
	cursor:pointer;
}
.popupList:hover {
    background-color:#abb5d5   /* #555555  blue: #4b85c5*/
}

/* 
   Status display.  login, and help button
*/
.statusTable
{
	 margin-right:0px; 
	 margin-left:auto;
	 /* background-color:#FF8888;  */
}


/* conditional formatting for small screen */

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-5a {width: 45%;}	/* 47.66% goes to 100% in smaller screen modes */
.col-6 {width: 50%;}
.col-6a {width: 50%;}	/* goes to 100% in smaller screen modes */
.col-7 {width: 58.33%;}
.col-7a {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-11a {width: 95%;}	/* padding for col-12 */
.col-12 {width: 100%;}

/****  debugging (show contents)
.col-1 {background-color:#DDDDDD;}
.col-2 {background-color:#008800;}
.col-3 {background-color:#000088;}
.col-4 {background-color:#880000;}
.col-5 {background-color:#888800;}
.col-6 {background-color:#880088;}
.col-7 {background-color:#008888;}
.col-8 {background-color:#AA0000;}
.col-9 {background-color:#AAAA00;}
.col-10 {background-color:#AA00AA;}
.col-11 {background-color:#00AAAA;}
.col-12 {background-color:#4000A0;}
******/

/* turn OFF/ON Display elements based on screen width */
.bigScreen {
	display:block;
}
.littleScreen {
	display:none;
	font-size: 130%;
	padding: 5px;
}

[class*="col-"] {
    float: left;
    padding: 5px 00px 5px 00px;		/* top right bottom left */
	display: table-cell;
	/* font-size: 200%; */
	text-align:right;
	min-width: 100px;
}

/* used for floating objects.  Need to clear float after and return to block display */
.row::after {
    content: "";
    clear: both;
    display: block;
	padding: 0px 0px 00px 0px;
}
.padded_row::after {
    content: "";
    clear: both;
    display: block;
	padding: 0px 0px 10px 0px;
}

@media only screen and (max-width: 700px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 95%;
        text-align:left;
	    padding: 2px 0px 2px 0px;		/* top right bottom left */
    }
	.col-6a {
		width: 100%;
	}
	.col-5a {
		width: 95%;
	}
       .bigScreen {
    	display:none;
    }
    .littleScreen {
    	display:block;
		font-size: 130%;
        padding: 5px 00px 5px 00px;		/* top right bottom left */
	}
	/* pixel height of left image */
	.img1 {
		width: 90px;
		height: 90px;
	}
	/* pixel height of right image */
	.img2 {
		width: 90px;
		height: 90px;
	}	

/* pixel height of the header row */
	.row1 {
		height: 70px;
	}
	
	.DisplayFont {
		font: normal 18px/24px Arial;
	}

	/* size of the input fields in Validate */
	.input1 {
		 width:100%;
	}
	
	.input1a {
		 width:85%;		/* 88 */
	}
    .middle-background  {
		padding: 10px; 
	}
	footer {
		padding-left: 10px;
	}
	.updateButton {
		font-size:190%;
   }
	.logout span {
		top:160px; 
	}

	.dropdown-combo select {  font-size: 120%; left:-20px}

	.statusTable
	{
		 margin-right:auto; 
		 margin-left:0px;
	}

}


@media only screen and (max-width: 400px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 90%;
        text-align:left;
	    padding: 1px 0px 1px 0px;		/* top right bottom left */
    }
	.col-6a {
		width: 100%;
	}
	.col-5a {
		width: 95%;
	}
	.col-7a {
		width: 100%;
	}
	.col-11a {
		width: 100%;
	}

    .showBackground  {
		background-image:url(../img/V002_tile_yellow.png);
	}
	
    .bigScreen {
    	display:none;
    }
    .littleScreen {
    	display:block;
		font-size: 80%;
		padding: 5px 00px 5px 00px;		/* top right bottom left */
	}
	/* pixel height of left image */
	.img1 {
		width: 60px;
		height: 60px;
	}
	/* pixel height of right image */
	.img2 {
		width: 60px;
		height: 60px;
	}	

/* pixel height of the header row */
	.row1 {
		height: 20px;
	}
	
	.DisplayFont
	{
		font: normal 15px/24px Arial;
	}

	/* size of the input fields in Validate */
	.input1 {
		 width:100%;
	}
	
	.input1a {
		 width:75%;   /* 77 */
	}
    .middle-background  {
		padding: 5px; 
	}
	footer {
		padding-left: 5px;
	}
	.updateButton {
		font-size:180%;
		width:100%
	}
	.logout span {
		right:2px;
		top:112px; 
	}
	
	.dropdown-combo select { font-size: 110%; left:-20px}

	.statusTable
	{
		 margin-right:auto; 
		 margin-left:0px;
		 /* background-color:#33FF33; */
	}
	

}