body{font-size:18px;}

.btgN {width:50%;} 
.playNow {width:0;}
.btgF, .btgM {width:50%;}  

h3 {
    font-weight: 400; 
    font-family: ubuntu;  
    font-size: 150%;
    margin: 20px 0 20px 0;
    color: #333;
    text-align: center;
}

.pnar {font-size: 110%; line-height: 140%; margin-top:20px; margin-left:10%; margin-right: 10%;}

.showMessage{  
    font-weight: bold; color: #444; 
    text-align: center;  
	padding: 12px 0px;
	background-color: #ffff4d;
	width: 100%; 
}

.btn:link, 
.btn:visited,
input[type=submit] {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
}
.btn-full:link, 
.btn-full:visited, 
input[type=submit] {
    background-color: #00e600;
    color: #111;
    border: 1px solid #00e600; 
    margin-right: 15px;
}

.btn:hover, .btn:active,
input[type=submit]:hover, input[type=submit]:active {
    background-color: #00b300;
    color: #fff;
}

.btn-full:hover, btn-full:active,
input[type=submit]:hover, input[type=submit]:active {
    border: 1px solid #00b300; 
}

.nar {
	margin: 24px 0 10px 0;
    line-height: 140%;
    width: 40%;
    /*color: #0f6600;*/
    margin-left: 30%; /* half of 30 to move the p to center */   
}

.section-go {
	background-color: #fff;
	padding: 7px 0px 20px 0px;
}

.section-checks {
	background-color: #fff;
	padding: 50px 0px 20px 0px;
}

.boxy {
	margin: 0 auto;
	width: 40%;
}

.boxy3 {
	/* margin: 0 auto;
	width: 100%; 
    background: white;
    text-align: center;
    */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* If you also want to center vertically */ 
}


.boxy-low {	margin: 0 auto;
	width: 40%; 
}
.boxy-low2 {	
	width:100%; margin-left: 40%; margin-bottom: 12px; margin-top: 20px;
    /*background-color: pink;*/
}
.boxy-clear{ clear:both;}

.section-diffs {
	background-color: #f2f2f2;
    padding: 0px 0px 12px 0px;
}


.noms {
	float: left;
	padding: 7px 20px 0 0;
	font-size: 110%;
	color:#444;
	margin-top: 10px;
}

.noms2 {
	float: left;
	padding: 3px 20px 0 0;
	color:#333;
	margin-top: 10px;
}
.points {
    padding-left: 24px;
    text-align: right; vertical-align: top;
    padding-bottom: 20px;
	color: #777;
}
/* the brackets specifies the input type. Otherwise, the checkbox and submit button 
would also be 100% wide...yuck */
input[type=text] {
    width: 100%;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #ccc;
}

*:focus {outline: none;} 

.reqd {
    margin: 20px auto 0px auto;
	background-color: pink; 
    padding: 12px; 
    text-align:center;
	width: 50%;

}
.c {
    font-size: 90%;
}


.aslink {
	/* same as nar */
	margin: 24px 0 10px 0;
    line-height: 140%;
    width: 40%;
    margin-left: 30%; /* half of 30 to move the p to center */   
}

.aslink a:link, .aslink a:visited {
    text-decoration: none;
    border:0;
    color: #ff6600;
    transition: color 0.2s;
}

.aslink a:hover, .aslink a:active {color: #0066ff;}






/* ========= include Pentatuech =================================*/
.indent {margin-left: 30px; font-style: italic;}

.help {border-bottom: 1px dotted black;}

.help .tooltiptext {
  margin-left: 5px;
  visibility: hidden;
  width: 120px;
  background-color: yellow; /*363636*/
  color: #000; /*fff*/
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  border: 1px solid #777;
  font-size: 90%;
  position: absolute;
  z-index: 1;
}

.help:hover .tooltiptext {
  visibility: visible;
}

.newpent {position: relative; display: inline; top: 25px; left: -50px; 
	color: #006600; font-weight: 700; 	font-size: 90%; background-color: yellow;}
	
hr {color: #ddd;}

.ot {float: left; margin-left: 10%;}
.nt {float: right; margin-right: 10%;}