/*                                                             */
/*    style.css                                                */
/*                                                             */
/*    Style Sheet for all Pages                                */
/*                                                             */
/*    Copyright: May 2019 - Mike Wagner (pibooklist.com)       */
/*                                                             */
/*    Version:                                                 */
/*       2.0 - 07/25/19 - Added these CSS Components           */
/*       2.1 - 08/07/19 - Fixed sticky header in Safari        */
/*                                                             */

/* ------------------      Header Style     ------------------ */
h1, h2 {
   font-family: "Arial";
}

h1 {
   font-size: 32px;
   color: Black;
}

h2 {
   font-size: 26px;
   color: Red;
}


/* ------------------     Body Style       ------------------ */ 
p.b, p.n {
   font-family: "Arial";
   font-size: 20px;
   color: Black;
}

p.b {
   font-weight: bold;
}

p.n {
   font-weight: normal;
}


/* ------------------     Debug Style      ------------------ */    
p.d {
   font-family: "Calibri";
   font-size: 14px;
   font-weight: normal;
   color: Red;
}

/* ------------------     Table 1 Style     ------------------ */ 
#tblResults {
   font-family: Arial, Helvetica, sans-serif;
   border-collapse: collapse;
   width: 100%;
   font-size: 20px;
}

#tblResults caption, #tblResults th {
   padding-top: 12px;
   padding-bottom: 12px;
   color: White;
   font-weight: bold;
   /* v2.1: Following 3 lines of code were moved from the th section */
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0;
}

#tblResults caption {
   text-align: left;
   background-color: RoyalBlue;
   border: 1px solid LightGray;
}

#tblResults th {
   text-align: left;
   background-color: DodgerBlue;
}

#tblResults td, #tblResults th{
   border: 1px solid LightGray;
   padding: 8px;
}

#tblResults tr:nth-child(even) {
   background-color: WhiteSmoke;
}
      
#tblResults tr:nth-child(odd) {
   background-color: White;
}

#tblResults tr:hover {
   background-color: Silver;
   cursor: pointer;
}


/* ------------------     Table 2 Style     ------------------ */ 
#tblFiltered {
   font-family: Arial, Helvetica, sans-serif;
   width: 100%;
   font-size: 20px;
   padding-top: 12px;
   padding-bottom: 12px;
   color: White;
   text-align: left;
   background-color: RoyalBlue;
   border: 1px solid LightGray;
}

/* ------------------     Table 3 Style     ------------------ */ 
#tblError {
   font-family: Arial, Helvetica, sans-serif;
   width: 100%;
   font-size: 20px;
   padding-top: 12px;
   padding-bottom: 12px;
   color: White;
   text-align: left;
   background-color: Red;
   border: 1px solid LightGray;
}

/* ------------------        Form Style     ------------------ */ 
input[type=text], select {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid Gray;
   border-radius: 4px;
   box-sizing: border-box;
}

input[type=password], select {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid Gray;
   border-radius: 4px;
   box-sizing: border-box;
}

input[type=submit] {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   width: 100%;
   background-color: DeepSkyBlue;
   color: black;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

input[type=reset] {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   width: 100%;
   background-color: DeepSkyBlue;
   color: black;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

input[type=submit]:hover {
   background-color: DodgerBlue;
   color: white;
}

input[type=reset]:hover {
   background-color: DodgerBlue;
   color: white;
}

div {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
}

/* ------------------      Radio Button    ------------------ */ 

/* The container */
.container {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   display: block;
   position: relative;
   padding-left: 35px;
   margin-bottom: 12px;
   margin-left: 20px;
   margin-top: 12px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* Hide the browser's default radio button */
.container input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 20px;
   width: 20px;
   background-color: LightGray;
   border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
   background-color: DarkGray;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
   background-color: DodgerBlue;
}

/* Create the indicator (the dot - hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
}

/* Show the indicator (dot) when checked */
.container input:checked ~ .checkmark:after {
   display: block;
}

/* Style of the indicator (dot) */
.container .checkmark:after {
   top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* ---------------------       Button    --------------------- */ 
.button {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   width: 35%;
   background-color: DeepSkyBlue;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   text-decoration: none;
   display: block;
}

.button:hover {
   background-color: DodgerBlue;
}

/* ---------------------       Layout    --------------------- */ 

.header {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 80px;
   z-index: 10;
   background: white;

}

.content {
  margin-top: 100px;
  background: white;
}