body
{
	background-color: #EEEEEE;
	margin: auto;
	padding: 10px;
	background-image: url(https://3.bp.blogspot.com/-f2XX6_CJNNc/VCaHU7fHwJI/AAAAAAAAGig/ORo4Kah5u-Q/s1600/simple-gray-texture.jpg);
	background-attachment: fixed;
	font-family: Verdana, Geneva, sans-serif;
}

/* positioning the Lakeside logo on login page */
img.center 
{
  display: block;
  margin: 0 auto;
}

/* general header text */
.h1
{
	text-align: center;
	color: #8E2B23;
	font-weight: bold;
	font-size: 48px;
}

/* general header text pt 2*/
.h2
{
	text-align: center;
	font-size: 23px;
  color: #8E2B23;
}

/* modifies the displayed header text on signin.php*/
.header-text
{
  text-align: center;
  color: #8E2B23;
  font-weight: bold;
  font-size: 64px;
}

/* modifies the displayed text on signin.php */
.text
{
  padding-top: 100px;
  font-size: 40px;
  text-align: center;
  color: #8E2B23;
}

/* modifies "create account" and "back to login" button on login.php and createaccount.php*/
.button 
{
  width: 100%;
  background-color: #8E2B23;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover 
{
  background-color: #701811;
}

/* centers the outer div for a form */
#outer-form
{
  text-align: center;
}

/* modifies and centers the body of a form */
#form
{
  background-color: lightgrey;
  width: 50%;
  padding: 50px;
  margin: 20px;
  display: inline-block;
  margin: 0 auto;
}

/* modifies the text on the forms */
.form-text
{
	float: left;
  position: relative;
  left: 0%;
}

/* centers the forms */
form
{
  text-align: center;
}


/* MODIFIES THE STRUCTURE OF THE FORM */
/* code borrowed and modified from w3schools */
/* https://www.w3schools.com/css/css_form.asp */ 

/* affects the input type "text" of the form */
input[type=text], select 
{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* affects the input type "password" of the form */
input[type=password], select 
{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* affects the input type "number" of the form */
input[type=number], select 
{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* affects the submit button of the form */
input[type=submit] 
{
  width: 49.5%;
  background-color: #8E2B23;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover 
{
  background-color: #701811;
}

/* affects the reset button of the form */
input[type=reset] 
{
  width: 49.5%;
  background-color: #8E2B23;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=reset]:hover 
{
  background-color: #701811;
}


/* MODIFIES THE CREATE ACCOUNT CHECKBOXES */
/* code borrowed and modified from w3schools */
/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */ 

/* The container */
.contain {
  display: block;
  position: relative;
  padding-bottom: 15px;
  margin: auto;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 30%;
  user-select: none;
}

/* Hide the browser's default checkbox */
.contain input {
  position: absolute;
  margin: auto;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.check {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.contain:hover input ~ .check {
  background-color: #ccc;
}

/* When the checkbox is checked, add a maroon background */
.contain input:checked ~ .check {
  background-color: #8E2B23;
}

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

/* Show the checkmark when checked */
.contain input:checked ~ .check:after {
  display: block;
}

/* Style the checkmark/indicator */
.contain .check:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* MODIFIES SIGNIN/OUT MODAL */
/* makes the modal body text left-aligned */
label[for=absence]
{
  width:100%;
  text-align: left;
}

/* makes the community expectations checkbox left-aligned and slightly padded */
.community-expectations
{
  text-align: left;
  padding-bottom: 5px;
}

/* centers the div for the sign in/out button */
#button
{
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* colors and modifies the shape of the sign in/out button */
.button-info
{
  background-color: #8E2B23;
  color: #fff;
  border-color: #701811;
  width: 50%;
  display: inline-block;
  padding-top: 70px;
  padding-bottom: 70px;
  font-size: 36px;
}

.button-info:hover
{
  background-color: #701811;
  color: #fff;
}

/* when signin.php refreshes, this makes the $_GET request form invisible */
#invisible
{
  position: absolute;
  margin: auto;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* modifies the cancel and submit button inside the modal */
#modal-buttons
{
  border-color: #701811;
  background-color: #8E2B23;
  color: white;
  cursor: pointer;
  width: auto;
  padding: 10px;
  margin: auto;
  border: none;
}

#modal-buttons:hover
{
  background-color: #701811;
}