<!--
/* GLOBALS */

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

.row {
  --row-display: block;
}

@media screen and (min-width: 600px) {
  .row {
    --row-display: flex;
  }
}


.col {
  --col-grow: 1;
  --col-shrink: 1;
  --col-basis: 100%;
	font-family: Verdana, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
	color: #1246c9;
}

.row {
  display: var(--row-display);
  flex-direction: row;
  flex-wrap: nowrap;
}


/****************************************************/
/* css for all devices */

html {
	min-height: 100%; margin-bottom: 1px; 
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #806F55;
	margin: 0;
	padding: 0px;
	display: block;
}

h1 {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 17px;
	color: #1246c9;
	margin: 0px 0px 8px 0px;
	padding: 0px;
/*	height: 20px;*/
}


img {
	border: 0px;
	margin: 0px;
	padding: 0px;
	vertical-align: text-bottom; 
}


#topsection {
	width: 100%;
	height: 50px;
	margin: 0px;
	padding: 0px;
	background: #017dd3;
} 


#name {
	margin: 0px 0px 0px 50px;
	padding: 0;
	border: 0;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 22px;
	color: #017dd3;
	color: #fbae14;
	text-align: left;
  position: absolute;
  top: 12px;
  left: 12px;
}


p {
	font-family: Verdana, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #1246c9;
	margin: 4px 12px 12px 14px;
	padding: 0px;
}

p a {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #022669;
	text-decoration: underline;
}
p a:visited {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #022669;
	text-decoration: underline;
}
p a:hover {
	color: #000000;
	text-decoration: underline;
}

ul,
ol {
	list-style-position: outside; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: 20px; 
	margin-right: 20px; 
	padding-left: 30px; 
	list-style-image: disc;	
}


ul li a {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #022669;
	text-decoration: underline;
}
ul li a:visited {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #022669;
	text-decoration: underline;
}
ul li a:hover {
	color: #000000;
	text-decoration: underline;
}

/* for hamburger menu */
ul li.hamburger a {
    font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 18px;
    color: #ffffff;
	text-decoration: none;
}
ul li.hamburger a:visited {
    font-family: "Avenir Next", "Avenir", sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-decoration: none;
}
ul li.hamburger a:hover {
	color: #fdba05;
	text-decoration: none;
}

ul a {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #ffffff;
	text-decoration: underline;
}
ul a:visited {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #ffffff;
	text-decoration: underline;
}
ul a:hover {
	color: #fdba05;
	text-decoration: underline;
}


td {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 12px;
	line-height: 110%;
	color: #1246c9;
	margin: 0px;
	padding: 0px;
	vertical-align: top;
}


td a {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 12px;
	line-height: 140%;
	color: #022669;
	text-decoration: underline;
}
td a:visited {
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 12px;
	line-height: 140%;
	color: #022669;
	text-decoration: underline;
}
td a:hover {
	color: #000000;
	text-decoration: underline;

}


ul li {
	font-family: Verdana, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #1246c9;
	margin: 4px 0px 4px 0px;
}
ol li {
	font-family: Verdana, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #1246c9;
	margin: 4px 0px 8px 0px;
}
h2 {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 16px;
	color: #1246c9;
	margin: 16px 0px 0px 0px;
	line-height: 100%;
	padding: 0px;
	height: 20px;
	text-decoration: none;
}

.boxtitle {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 18px;
	color: #1246c9;
	margin: 0px 0px 12px 0px;
	padding: 0px;
	line-height: 120%;
}

/****************************************************/
@media screen and (max-width:500px) {
/* css for phones here */

.col {
  flex-grow: var(--col-grow);
  flex-shrink: var(--col-shrink);
  flex-basis: var(--col-basis);
  box-sizing: border-box;
  text-align: left;
  border: 1px solid #999;
  padding: 15px;
  margin: 4px;
  background: rgba(122, 180, 245, 0.3);
  background: #aad6ff;
  border-radius: 10px;
  }


body {
	background: #ffffff;
} 

ul li {
	font-family: Verdana, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 13px;
	line-height: 140%;
	color: #1246c9;
	margin: 4px 0px 4px 0px;

}

}

/****************************************************/
@media screen and (min-width: 501px) {
  /* css for computers */
.col {
  flex-grow: var(--col-grow);
  flex-shrink: var(--col-shrink);
  flex-basis: var(--col-basis);
  box-sizing: border-box;
  text-align: left;
  border: 1px solid #999;
  padding: 15px;
  margin: 8px;
  background: rgba(122, 180, 245, 0.3);
  background: #aad6ff;
  border-radius: 20px;
  }


body {
	background: #ffffff url("../images/darkgreenbackgnd.jpg") repeat;
}


}


-->