/* =========================================== Begin Reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

/* ================ End Reset =============================================== */

a {
    text-decoration: none;
    color: #328cd0;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
}

b {
    font-style: italic;
    font-weight: 600;
}

i {
    font-style: italic;
}

h1 {
    font-size: 3em;
}

h2 {
    font-family: 'Robo', sans-serif;
    font-size: 2.5em;
    font-weight: 100;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.2em;
    font-family: 'Open Sans'
}

#title {
    font-family:'Fira Sans', sans-serif;
    margin: 1em 0 0 1em;
    padding: 0 0 0 0;
}

#heading {
    font-family:'Robo', sans-serif;
    font-size: 1.5em;
    margin: 0 0 1.5em 2em;
    padding: 0 0 0 0;
}

#topLine {
    width: 100%;
    border: .2em solid black;
}

.tabLines {
    width: 100%;
    border: .1em dotted black;
    margin: 2em 0;
}

.topTabline {
    width: 100%;
    border: .1em solid black;
    margin: .2em 0;
}

.tipbox {
    position: relative;
}

.ptLogo {
    background-color: #bcd792;
    height: 2em;
    margin: 0 0;
    position: relative;
    bottom: -1.5em;
    left: 1em;
    width: 4em;
}

.ptLogo p {
    font-weight: 600;
    position: relative;
    bottom: -.5em;
    left: .5em;
    
}

.proTip {
    background-color: #f6ffea;
    margin: 0 0;
}

.proTip p {
    font-size: .9em;
    padding: 1em;
}

.proTip p:before {
    content: "\f02e  ";
    font-family: FontAwesome;
}

.special {
    background: #f8f8f8;
}

.special p:first-child {
    font-size: .9em;
    padding: 1em;
}

.special p {
    padding: 0 1em 1em 1em;
    font-size: .9em;
}

.special ol {
    font-family: arial, sans-serif;
    font-size: 15px;
    line-height: 1.2em;
    list-style: decimal;
    margin: .2em 3em;
    
}

/* ===================================== Tab Style ======================== */
header {
    height: 12em;
}

p.update {
    border: .2em solid black;
    width: 5em;
    margin-left: 1em;
    margin-bottom: .2em;
    display: inline-block;
    position: relative;
    bottom: .8em;
    padding: .2em;
}

#head {
    position: relative;
    float: left;
    margin-left: 2em;
    margin-top: 1em;
    width: 32em;
}

#headLogo img {
    position: absolute;
    height: 5em;
    float: left;
    margin-left: 7em;
    margin-top: 3.5em;
}

#navBar {
    min-width: 200em;
    position: relative;
    float: left;
}

/* ======= ASIDE ACTION ====== */
aside {
    background: #f9f9f9;
    border-radius: 12px;
    float: left;
    font-family: 'Robo' , sans-serif;
    min-width: 11em;
    margin-top: 4em;
    min-height: 35em;
    margin-right: 6em;
    position: fixed;
}
aside h3 {
    font-size: 1.2em;
    padding: .3em .3em;
}

aside ul {
    font-size: .95em;
    margin-left: 1em;
    padding-top: .1em;
}

aside ul a {
    text-decoration: none;
    color: black;
}

aside ul a:hover {
    text-decoration: underline;
}
/* ===== End ASIDE ===== */
/* == Begin ASIDE right == */

.asideRight {
    position: fixed;
    left: 65em;
}
/* == end ASIDE right == */

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1-x solid #ccc;
    background-color: #f4f4f4;
}

/* Float the list items side by side */
ul.tab li {
    float: left;
}

ul.tab li:first-child {
    margin-left: 2em;
}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: .5em .8em;
    text-decoration: none;
    transition: 0.6s;
    font-size: 1em;
    font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
    letter-spacing: .05em;
    max-width: 8em;
}

/* change background color of links on hover */
ul.tab li a:hover {
    background-color: #bcd792;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #bcd792;
}

/* Style the tab content */

.tabContent {
    border-top: .5em solid #bcd792;
    display: none;
    margin-top: 2em;/*ensures content rests just below tab */
    padding: .5em 1em;
}

/*Style the ul and p content inside of tabContent*/

.tabContent ul,p {
    font-family: 'Robo' , sans-serif;
    letter-spacing: .01em;
    margin-left: 0;
}

.tabContent p {
    font-size: 15px;
    line-height: 1.3em;
    margin-top: 1em;
    max-width: 60em;
}

.tabContent h3 {
    font-size: 2em;
    font-family: 'Robo' , sans-serif;
    padding: 0;
    font-weight: 300; 
    letter-spacing: .01em;
}

.tabContent h4 {
    font-size: 1.45em;
}

.tabContent img {
    width: 24em;
    box-shadow: -.2em .5em 1.2em .5em rgba(192, 192, 192, .8);
}

.tabContent h3:first-child {
    float: none;
    padding: 0;
}


.tabContent ul {
    padding-left: 0em;
}

.tabContent ul li {
    margin: .2em 2em;
    line-height: 1.2em;
    font-size: 15px;
}

.tabContent ul ul {
    list-style: circle;
}

.playNice li {
    list-style: circle;
    display: list-item;
}

.playNice > li:first-line {
    font-weight: bold;
}


.content {
    float: left;
    position: absolute;
    max-width: 45em;
    min-width: 40em;
    margin-left: 15em;
    margin-bottom: 1em;
}

/* inserted below because of CSS specificity*/

.glossary:before {
    content: "\f02e  ";
    font-family: FontAwesome;
}

.introDiv {
    /*background: linear-gradient(#bcd792, #fff);*/
    height: 3em;
}

.introDiv h2 {
    font-weight: 800;
}
/*The below was removed to take out the circles, yo.*/
/*.dropDown h3:before {
    content: ' \25CF';
    padding-right: .2em;
    text-decoration: none;
}*/

/* DropDown Style ========================== */

/*
.dropDown ul { 
/*changing the UL beneath its parent Div to be 50% the total length 
    max-width: 10%
}
*/

.dropDown h3 {
    cursor: pointer;
    transition: 0.1s;
    padding: .3em;
    font-size: 1.1em;
    font-weight: 400;
}

.dropDown h3::before {
    color: #bcd792;
    content: "\f0ab  ";
    font-family: FontAwesome;
    font-size: .85em;
    padding-right: .5em;
    text-decoration: none;
    
}

.dropDown h3:hover::before {
    text-decoration: none;
}

.dropDown h3:hover {
    cursor: pointer;
    text-decoration: underline;
}

.dropDown h3:active {
    transition: 0.3s;
}

.dropDown ul {
    display: none;
}

.policy {
    display: grid;
    color: #2B9933;
}