/* Constants */
:root {
    --orange:#EE993D;
    --light_purple:#E59CF9;
    --dark_purple:#A500BD;
    --light_blue:  #ABCCF5;
    --light_gray:#EFEFEF;
    --dark_blue:   #276287;
    --bart_red:#DA5649;
    --bart_yellow:#F8E677;
    --bart_blue:#6897D1;
    --bart_green:#6BB787;
    --four:#e8f9ff;
    --eigt:#e8ffee;
    --twel:#fff6e8;
    --twfr:#ffe8e8;
    --hot_pink: #FF69B4;
}

/* All Pages */

html {
    width: 100%;
}

body {
  font-family:  "Lucida Sans Unicode", "Lucida Grande", sans-serif;	
  margin: 2em 2em 2em 2em;

}

-h1 {
    margin-top: 10px;
    margin-bottom: 1px;
    color: var(--dark_blue);
    }

-h2 {
    font-size: 18pt;
    color: var(--dark_blue);
    margin: 0em;
}

a {
    color: var(--light_blue)
    visited: var(--light_purple)
}

.plain { 
  text-decoration: none; 
}

img {
    width: 100%;
    height: 100%; 
    object-fit: contain;
}

.square-image {
  float: top;
  width: 100%;
  height: 10em;
}

.small-text {
    font-size: 10pt;
}

/* All Pages, Tables */

th {
    text-align: center;
    font-size: 14pt;
    color: var(--dark_blue)
    padding: 0 15px;
}

td {
    padding: 0 15px;
  }

xtr:nth-child(even) {
  background-color: var(--light_gray);
}

.br { background-color: var(--bart_red);    color: var(--bart_red)     }
.by { background-color: var(--bart_yellow); color: var(--bart_yellow); }
.bb { background-color: var(--bart_blue);   color: var(--bart_blue);   }
.bg { background-color: var(--bart_green);  color: var(--bart_green);  }
/*.bt { background-color: transparent;        color: transparent;  }*/
.bt { background-color: white;        color: white;  }

.four { background-color: var(--four);}
.eigt { background-color: var(--eigt);}
.twel { background-color: var(--twel);}
.twfr { background-color: var(--twfr);}

.nowrap {white-space: nowrap;}




/* NavBar */

.navbar {
    background: #EEEEEE;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    }

.navbar_group {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px 10px 20px
}

.navbar_primary {
  font-size: 16pt;
  color: var(--dark_blue);
}

.navbar_secondary {
  font-size: 10pt;
  color: var(--dark_blue);
  padding-left: 10px;
}

.current {
  color: var(--hot_pink);
  font-size: 30pt;
  font-weight: bold;
}


/* Hero */

.hero {
    display: flex;
    justify-content: space-around;
}

.hero_left {
  width: 30%;
  height: 16em;
  padding: 1em 1em 1em 1em;
  background-color:var(--testing);
}

.hero_right {
  width: 60%;
  padding: 1em 1em 1em 1em;
  background-color:var(--testing);
}

/* Things */

section-heading {
  color: var(--testing);
  color: var(--testing); 
}

.thing-box {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
	border-top: 0em
}

.thing {
  background-color:var(--testing);
  padding: 1em 1em 1em 1em;
  margin: 1em 1em 1em 1em;
  width: 10em; 
}


.thing-title {
color: var(--dark_blue); 
font-size: 14pt;
font-weight: bold;
margin-top: 1em;
}

.thing-text {
 
}


/* Tap Tap Page */

.FAQBox {
    width: 97%;
    background-color: #A3CFCC;
    margin: 0pt 0pt 8pt 0pt;
    padding: 10pt 10pt 10pt 10pt;
    text-align: justified;
    border-radius: 5px;
}

.FAQ {
  font-size: 11pt;
}

content {
  width: 80%;
}

.link_box {
    width: 8em;
    border: 2px solid;
    border-radius: 1em;
    position: fixed;
    top: 10em;
    right: 3em;
}

.link_box p {
    text-align: center;
    padding: .5em 0em .5em 0em;
    margin: 0em;
}

.screenshot {
	height: 150px;