/*
'************************************************************************
' Comments: This is the main sheet for responsive flexbox.
'           It includes basis an enhanced styles.
'
' Program: Searltech Scheduler
' Module:IndexHeader.css
' Version: 6
'
' Owner: Searltech LLC
'
' Date        Developer       			Action
' ------------------------------------------------------------------------
' 11/25/2017  Richard L Sevcik      Created
'*************************************************************************
*/

html {
  text-align: center;
  font-size: 100%;
}

body {
  width: 100%;
  padding: .5rem;
  margin: 0 auto;
  position: relative;  
  color: #333333;
  background-color: #fff;
  text-align: left;
  vertical-align: top;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5;
}

submit {background:#0099ff;
	color: white;
	border-style: outset;
	border-color: #0066A2;
	height: 1.5rem;
	width: 3rem;
	font: bold 15px arial, sans-serif;
	text-shadow:none;
}

header, section, footer, aside, nav, article, figure, figcaption, hgroup {
  display: block;
}

a.body:link, a.body:visited, a.body:active, a.body:hover {
  font-style: normal;
  font-weight: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  text-decoration: none;
  color: #333333;
  cursor: pointer;
}

a.body:visited {
  color: #333333;
}

a.body:hover {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  word-spacing: normal;
  text-transform: none;
  color: blue;
  font-style: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  letter-spacing: normal;
  text-decoration: none;
  margin: 1rem 0 .5rem 0;
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: .9rem;
}

h6 {
  font-size: .8rem;
}

div, p, ul, ol, li, dl, dt, dd, table, pre, form, fieldset, blockquote, input {
  color: #000000;
  line-height: 1.5;
  font-size: 1rem;
  font-style: normal;
  font-weight: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  margin: 0;
  padding: 0;
}

div, th, td {
  margin: 0;
  padding: 0;
}

a:link, a:visited, a:active, a:hover {
  font-style: normal;
  font-weight: normal;
  font-family: Segoe UI, Helvetica, Arial, 'Trebuchet MS', Sans-Serif;
  text-decoration: none;
  color: #3333ff;
}

a:visited {
  color: #3333ff;
}

a:hover {
  text-decoration: underline;
}

ol, ul {
  list-style: none;
  padding-left: 1rem;
}

ul li {
  list-style-type: square;
  font-size: 1rem;
}

ul li li {
  list-style-type: disc;
  font-size: 1rem;
}

ul li li li {
  list-style-type: circle;
  font-size: 1rem;
}

ol li {
  list-style-type: decimal;
  font-size: 1rem;
}

ol ol li {
  list-style-type: lower-alpha;
  font-size: 1rem;
}

ol ol ol li {
  list-style-type: lower-roman;
  font-size: 1rem;
}

ol li ul li {
  list-style-type: square;
  font-size: 1rem;
}

ul, ol {
  list-style-position: outside;
  margin-left: 1rem;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
}

hr {
  height: 1px;
  color: #000000;
  background-color: #000000;
  border: solid 0px #000000;
}

img, fieldset {
  border: 0;
}

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*----------------------------*/
/* All screens: Common styles */
/*----------------------------*/
a.topheader {
  text-decoration: none;
  color: #0066CC;
}

a.topheader:hover {
  color: darkblue;
}

input#nav {
  display: none;
}

nav.header-nav {
  background-color: blue;
  width: 100%;
  text-align: center;
}

ul.header-nav {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
}

a.header-nav {
  text-decoration: none;
  display: block;
  color: white;
}
/*----------------------------*/
/* Large screen basic: Generated content */
/*----------------------------*/
@media (min-width: 851px) {
  a.topheader:after {
    content: "";
  }
}
/*------------------------------------------*/
/* Smaller screens basic: Generated content */
/*------------------------------------------*/
@media (max-width: 850px) {
  a.topheader:after {
    content: "";
  }
}
/*--------------------------*/
/* Small and medium screens */
/*--------------------------*/
@media (max-width: 850px) {
  
  /* Basic */
  header.topheader {
    text-align: center;
  }

  a.topheader {
    font-size: 2.3rem;
  }

  label#menu {
    display: none;
  }

  nav.header-nav {
    display: block;
  }

  ul.header-nav {
    background-color: blue;
  }

  a.header-nav {
    font-size: 1.1rem;
    line-height: 2.333333;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  a.header-nav:hover {
    background-color: deepskyblue;
  }
  /*----------*/
  /* Enhanced */
  /*----------*/
  .flexbox.flexwrap {
    /* Checkbox hack */
    /* Ordinary style rules  */
  }
  .flexbox.flexwrap nav.header-nav {
    display: none;
  } 
  
  
  .flexbox.flexwrap input#nav:checked ~ nav.header-nav {
    display: block;
  }
  .flexbox.flexwrap a.topheader {
    color: #0066CC;
    font-size: 1.4rem;
    line-height: 2.3333333;
  }
  .flexbox.flexwrap header.topheader {
    width: auto;
    background-color: black;
    color: #0066CC;
    line-height: 2.333333;
    text-align: left;
    padding-left: 1.5rem;
  }
  .flexbox.flexwrap label#menu {
    display: block;
    width: auto;
    background-color: black;
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 2.333333;
    text-align: center;
    cursor: pointer;
  }
  .flexbox.flexwrap label#menu:hover {
    background-color: darkblue;
  }
  .flexbox.flexwrap ul.header-nav {
    background-color: deepskyblue;
  }
  .flexbox.flexwrap a.header-nav:hover {
    background-color: darkblue;
  }
  .flexbox.flexwrap input#nav:checked ~ label#menu:hover {
    background-color: darkblue;
  }
}
/*------------------------*/
/* Small screen: Enhanced */
/*------------------------*/
@media (max-width: 500px) {
  /* Enhanced */
  .flexbox.flexwrap {
    /* Flexbox properties */
    /* Generated label content*/
    /* hamburger icon */
    /* x icon */
  }
  
  .flexbox.flexwrap .topheader img{
    max-width: 15%;
    height: auto;
  }
  
  .flexbox.flexwrap div.header-nav {
    display: flex;
    flex-wrap: wrap;
  }
  .flexbox.flexwrap header.topheader {
    flex: 1 1 auto;
  }
  .flexbox.flexwrap label#menu {
    flex: 0 0 90px;
  }
  .flexbox.flexwrap label#menu:before {
    content: "\2630";
  }
  .flexbox.flexwrap input#nav:checked ~ label#menu:before {
    content: "X";
  }
}/*---------------*/
/* Medium screen: */
/*----------------*/
@media (min-width: 501px) and (max-width: 850px) {
  /* Enhanced */
  .flexbox.flexwrap {
    /* Flexbox properties */
    /* Generated label content*/
    /* unicode down arrow */
    /* unicode up arrow */
  }
  
  .flexbox.flexwrap .topheader img{
    max-width: 8%;
    height: auto;
  }
  
  .flexbox.flexwrap div.header-nav {
    display: flex;
    flex-wrap: wrap;
  }
  .flexbox.flexwrap header.topheader {
    flex: 1 1 auto;
  }
  .flexbox.flexwrap label#menu {
    flex: 0 0 140px;
    font-weight: normal;
  }
  .flexbox.flexwrap label#menu:before {
    content: "Menu \25BC";
  }
  .flexbox.flexwrap input#nav:checked ~ label#menu:before {
    content: "Menu \25B2";
  }
}
/*---------------------*/
/* Large screen: Basic */
/*---------------------*/
@media (min-width: 851px) {
  div.header-nav {
    display: block;
    background-color: black;
  }

  header.topheader {
    display: block;
    padding: 1rem 0;
    width: 100%;
    background-color: black;
    color: blue;
    text-align: center;
  }

  a.topheader {
    font-size: 2.8rem;
    background-color: black;
  }

  label#menu {
    display: none;
  }

  nav.header-nav {
    display: block;
    height: 3.5rem;
  }

  ul.header-nav {
    background-color: blue;
    max-width: 980px;
  }

  ul.header-nav li {
    display: inline-block;
  }

  a.header-nav {
    font-size: 1.4rem;
    line-height: 2.9166667;
    line-height: 2.5;
    padding: 0 2rem;
  }

  a.header-nav:hover {
    background-color: deepskyblue;
  }
}
/*-------------------------*/
/* Large screen: Enhanced  */
/*-------------------------*/
@media (min-width: 851px) {
  /* Menu items equally spaced */
  .flexbox.flexwrap ul.header-nav {
    display: flex;
    justify-content: space-around;
  }

 /* One item to the right 
.flexbox.flexwrap { 
    ul.header-nav { display:flex; }
    ul.header-nav li:last-child { margin-left:auto; }
}  */
}
/* ul li:last-child { background-color: darkblue; } */
/* Common basic styles */
footer {
  background-color: white;
  margin-top: 1rem;
}

nav.footer-nav {
  background-color: blue;
  width: 100%;
  text-align: center;
}

ul.footer-nav {
  list-style: none;
  background-color: blue;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
}

.footer-nav li {
  display: inline-block;
}

a.footer-nav {
  display: inline-block;
  text-decoration: none;
  color: white;
  line-height: 3;
}

a.footer-nav:hover {
  background-color: deepskyblue;
}

div.footer-details {
  max-width: 980px;
  margin: 1rem auto;
  text-align: center;
}
/*---------------*/
/* Small screens */
/*---------------*/
@media (max-width: 500px) {
  /* Basic */
  a.footer-nav {
    font-size: 1rem;
    padding: 0 .5rem;
  }
}
/*----------------*/
/* Medium screens */
/*----------------*/
@media (min-width: 501px) and (max-width: 850px) {
  /* Basic */
  a.footer-nav {
    font-size: 1.1rem;
    padding: 0 1.5rem;
  }
}
/*---------------*/
/* Large screens */
/*---------------*/
@media (min-width: 851px) {
  /* Basic */
  a.footer-nav {
    font-size: 1.2rem;
    padding: 0 2rem;
  }
}
/*------------------------*/
/* Common enhanced styles */
/*------------------------*/
.flexbox.flexwrap ul.footer-nav {
  display: flex;
  justify-content: space-around;
}
/*---------------------------------------*/
/* Large screens: Optional added content */
/*---------------------------------------*/
@media (min-width: 501px) {
  ul.footer-nav li:nth-child(1) a:after {
    content: "";
  }

  ul.footer-nav li:nth-child(2) a:after {
    content: "";
  }

  ul.footer-nav li:nth-child(3) a:after {
    content: "";
  }
}
div.main_content {
  width: 100%;
}

div.xaxis1, div.xaxis2, div.xaxis3 {
  margin: 0rem auto;
  max-width: 980px;
  padding: 0;
}

div.main_content p, div.main_content li {
  margin: 1rem 0;
  color: white;
}

div.subcontent1, div.subcontent2, div.subcontent3, div.subcontent4, div.subcontent5, div.subcontent6 {
  margin: .5rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
  color: white;
}
/*---------------------------------*/
/* Tweak layout for small screens  */
/*---------------------------------*/
@media (max-width: 620px) {
  div.subcontent1, div.subcontent2, div.subcontent3, div.subcontent4, div.subcontent5, div.subcontent6 {
    margin: .5rem 0;
  }
}
div.subcontent1 {
  background-color: #0066CC;
}

div.subcontent2 {
  background-color: blue;
}

div.subcontent3 {
  background-color: darkblue;
}

div.subcontent4 {
  background-color: limegreen;
}

div.subcontent5 {
  background-color: forestgreen;
}

div.subcontent6 {
  background-color: lightseagreen;
}


/* xaxis1: Enhanced 
.flexbox.flexwrap { 
    div.xaxis1 { display:flex; justify-content:center; flex-wrap:wrap; }
    div.subcontent1 { flex:1 1 200px;}
    } */
/* xaxis2 and xaxis3: Enhanced */
.flexbox.flexwrap div.xaxis2, .flexbox.flexwrap div.xaxis3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flexbox.flexwrap div.subcontent2, .flexbox.flexwrap div.subcontent3, .flexbox.flexwrap div.subcontent4, .flexbox.flexwrap div.subcontent5, .flexbox.flexwrap div.subcontent6 {
  flex: 1 0 300px;
}