body {
	font-family: sans-serif;
	margin: 0;
	}

* {
  box-sizing:border-box;
}

#Home {
	font-weight: 400;
	color: #212121;
	background-color: #f2f8fb;
	font-family: sans-serif;
	width: 100%;
	position: relative;
}

.grp {
	font: 700 1.1em Arial;
	margin: 24px 0px 6px 0px;
}
.grp2 {
	font-size: 130%;
	font-weight: 700;
	margin: 24px 0px 16px 0px;
	text-align: center;
}
.family {
	margin: 0px 0px 0px 12px;
	font-weight: bold;
}
.sn {
	
}
.comment {
	margin: 10px 15px 10px 0px;
}
.aside {
	display: flex; 
	justify-content: flex-end; 
	float: right; 
	padding-right:10px
}
.nav1 {
	border: 1px solid gray; 
	width: 100%; 
	overflow:hidden; 
	height:100%; 
	border-radius: 6px;
}

.cancel_button {
 float: right;
 margin: 2px;
 z-index: 3;
 cursor:pointer;}
 
 .menuhead {
  text-align:left;
  font: bold 14pt Arial,sans-serif;
  border: 2px solid gray;
  min-height: 34px;
  line-height: 30px;
  border-radius:4px;
}

.rpt1 {
	border-radius: 8px;
	margin: 10px 15px 10px 0px;
	border: 1px solid gray;
	box-shadow: 10px 10px 5px #cee;
	float: left;
	max-width: 60%;
	height: auto;
}
.photo1 {
	float:left;
	width: 273px;
	height: 224px;
	border-radius: 8px;
	margin-right: 12px;
	margin-bottom: 5px;
	border: 1px solid gray;
}

.sn2 {
	padding: 0px 0px 0px 10px;
}
.sn2l {
	font-size: 110%;
	padding: 0px 0px 0px 10px;
}

.editButton {
	font:700 14px Arial;
	color: #fff; 
	background-color: #27c;
	border-radius: 4px;
    padding: 2px;
}

.cn {
	float: right; 
	font:400 14px Arial;
	padding: 2px 4px 2px 4px;
	border-radius: 4px; 
	border: 1px solid black;
	margin: 0 4px 0 0;
}

.com {
	float: right; 
	font:400 14px Arial;
	margin: 0 4px 0 0;
	padding: 2px 4px 2px 4px;
	border-radius: 4px; 
	border: 1px solid black; 
	background-color: #def;
}

.comX {
	float: right; 
	font:400 14px Arial;
	margin: 0 4px 0 0;
	padding: 2px 4px 2px 4px;
	border-radius: 4px; 
	border: 1px solid black; 
	background-color: #fff;
}

.comW {
	float: right; 
	font:400 14px Arial;
	margin: 0 4px 0 0;
	padding: 2px 4px 2px 4px;
	border-radius: 4px; 
	border: 1px solid black; 
	background-color: #fcc;
}

.comG {
	float: right; 
	font:400 14px Arial;
	margin: 0 4px 0 0;
	padding: 2px 4px 2px 4px;
	border-radius: 4px; 
	border: 1px solid black; 
	background-color: #cfc;
}

.comO {
	float: right; 
	font:400 14px Arial;
	margin: 0 4px 0 0;
	padding: 2px 4px 2px 4px;
	border-radius: 4px; 
	border: 1px solid black; 
	background-color: #fa6;
}

.comSP {
	float: left; 
	font:400 14px Arial;
	margin: 0 4px 0 0;
	padding: 2px 4px 2px 4px;
	border-radius: 4px; 
	border: 1px solid black; 
	background-color: #def;
}

.linkButton {
	font:700 14px Arial;
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #2f7fcf;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
}
.linkButton1 {
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #0f7f0f;
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
}
.linkButton2 {
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #964B00;
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
}
.linkButton3 {
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #5f5f5f;
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
}
.linkButton4 {
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #af5f5f;
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
}
.linkButton_l {
	font:700 14px Arial;
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #2f7fcf;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
	float: left;
}

.linkButton_r {
	font:700 14px Arial;
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #2f7fcf;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
	float: right;
}

.linkButton_r_red {
	font:700 14px Arial;
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #f66;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
	float: right;
}

.linkButton_rh {
	font:700 14px Arial;
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #2f7fcf;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
	float: right;
	visibility: hidden;
}

.linkButton_red {
	padding: 0px 2px 0px 2px;
	border-radius: 4px;
	color: #fff;
	background-color: #f66;
	font:700 13.3333px Arial;
}

.linkBlue {
	font:700 14px Arial;
	padding: 1px;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #2f7fcf;
}

.blueButton {
	font:700 13.3333px Arial; 
	padding: 0px 2px 0px 2px;
	color: #fff; background-color: #27c; 
	border-radius: 4px;
}

.blueButtonTall {
	font:700 14px Arial;
	padding: 2px 3px 2px 3px;
	color: #fff; background-color: #27c; 
	border-radius: 4px;
}

.navButton {
	font:700 13.3333px Arial; 
	padding: 0px 2px 0px 2px;
	color: #38d; background-color: #fff; 
	border-radius: 4px;
	border: 1px solid #38d; 
}

.redButton {
	font:700 13.3333px Arial; 
	padding: 0px 2px 0px 2px;
	color: #fff; background-color: #f66; 
	border-radius: 4px;
}

.blueBox {
	font:400 14px Arial; 
	padding: 0px 2px 0px 2px; 
	border-radius: 4px; 
	border: 1px solid black; 
	background-color: #def;
}

#SignIn {
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	background-color: #2f7fcf;
	font-weight: 700;
	display: flex;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
}

#SignOut {
	padding: .25rem .5rem;
	border: none;
	border-radius: 3px;
	background-color: #2070c0;
	font-weight: 700;
	display: flex;
	text-align: left;
	line-height: 1.2;
	margin: .25rem;
}


a {
	text-decoration: none;
	cursor: pointer;
}

.left {
	padding: 20px;
	float: left;
	width: 34%;
	background-color: #eff;
	text-align: center;
}
.xcenter {
	padding: 20px;
	float: left;
	width: 33%;
	text-align: center;
}
.right {
	padding: 20px;
	float: left;
	width: 33%;
	background-color: #ffe;
	text-align: center;
}

.form1 {
	padding: 0 20px 20px 20px;
	float: left;
	width: 60%;
	background-color: #eff;
	text-align:left;
}

.form2 {
	padding: 20px;
	float: left;
	width: 40%;
	background-color: #fff;
	text-align:left;
}
.form3 {
	padding: 20px;
	float: left;
	width: 100%;
	background-color: #fff;
	text-align:left;
}

.nav2 {
	text-align: center; 
	border: 2px solid #2f7fcf;
	width: 110px; 
	padding: 5px; 
	background-color: #fff;
	border-radius: 6px;
}
.f1name {
	background-color:#def; 
	width: 100%;
	cursor: text;
	border: 1px solid black;
	padding: 6px 12px;
	font: 400 100% sans-serif;
}
.f1name_l {
	background-color:#def;
	cursor: text;
	border: 1px solid black;
	padding: 6px 12px;
	font: 400 100% sans-serif;
	width: 64%; 
	float: left;
}
.f1name_l2 {
	background-color:#def;
	cursor: text;
	border: 1px solid black;
	padding: 3px 6px;
	font: 400 100% sans-serif;
	width: 64%; 
	float: left;
}
.f2name { 
	width: 100%;
	cursor: text;
	border: 1px solid black;
	padding: 4px 8px;
	font: 400 100% sans-serif;
}
.f2nameA { 
	background-color: #dfd;
	width: 100%;
	cursor: text;
	border: 1px solid black;
	padding: 4px 8px;
	font: 400 100% sans-serif;
}
.f2nameN { 
	background-color: #ffb;
	width: 100%;
	cursor: text;
	border: 1px solid black;
	padding: 4px 8px;
	font: 400 100% sans-serif;
}
.f2nameG { 
	background-color: #eee;
	width: 100%;
	cursor: text;
	border: 1px solid black;
	padding: 4px 8px;
	font: 400 100% sans-serif;
}
.f2nameR { 
	background-color: #fcc;
	width: 100%;
	cursor: text;
	border: 1px solid black;
	padding: 4px 8px;
	font: 400 100% sans-serif;
}
.f3name {
	float:left; 
	padding: 2px 4px 2px 4px;
}

.f3nameA {
	background-color: #dfd;
	float:left; 
	padding: 2px 4px 2px 4px;
}

.f3nameA2 {
	background-color: #dfd;
	float:left;
}

.f3nameN {
	background-color: #ffb;
	float:left; 
	padding: 2px 4px 2px 4px;
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .xcenter, .right, .form1, .form2 {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
.fluff { height: 0px;}
.photo1 { float: none; }
}

p.p1 {
	text-align: left;
}

ul { list-style: none;
     margin-left:1em;
     padding-left:0em;
}

h2 {text-align: center;}
h3 {text-align: center;}
h4 {text-align: center;}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
text-align: center;
}



#main {
  width: 450px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  font: normal 10pt Sans,sans-serif;
}



.small {text-align: center;
font-size: 9pt;
}

.alpha {
  font: bold 13pt Sans,sans-serif;
  text-align: center;
  width: 450px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.i2 {
border-radius: 9px;
border: 0px solid;
box-shadow: 10px 10px 5px #888;
margin: 8px 8px 8px 8px;
padding: 2px;
border: 1px solid black;
}

.i3 {
border-radius: 9px;
border: 0px solid;
box-shadow: 10px 10px 5px #888;
display: block;
margin-left: auto;
margin-right: auto;
padding: 2px;
border: 1px solid black;
}

table
{
border-collapse:collapse;
margin: 3px 3px 3px 3px;
width: 100%;
}

#table2
{
border-collapse:collapse;
background-color:#fff;
margin: 3px 3px 3px 3px;
border: 0px solid #fff;
}
.th3, .td3
{
border: 1px solid #bbb;
text-align:left;
}

.ct
{
text-align: center;
}
.pa
{
position: absolute;
font: normal 8pt Sans,sans-serif;
border-radius: 5px;
border: 0px solid;
/*box-shadow: 10px 10px 5px #888;*/
margin: 0px 8px 8px 8px;
padding: 2px;
background-color:#eef;
border: 1px solid black;
display: none;
}

table, tr
{
border: 1px solid #ccc;
}

.checklist {
	font: 400 90% sans-serif;
}