/* ===============  html elements ============ */
hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  /* border-style: inset; */
  border: 1px solid #b0b0b0;
  width: 400px;
  text-align: center;
}

input[type="radio"],
input[type="checkbox"]{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
    padding: 5px;
}

input[type="radio"]:hover,
input[type="checkbox"]:hover{
	border: 1px solid #8c8c8c;
	background-color: #ededed;
	color:#0000ff;
}

input[type=text],
select {
	border: 2px solid #d9d9d9;
	border-radius: 8px;
	border-bottom:2px solid #006937;
	outline: none;
	margin: 0 0 20px 4px auto;  
	text-align: left;
	font-family: Roboto, Arial, sans-serif;
	font-size: 17px;
	color: #000;
	line-height: 22px;
	padding:6px;
	max-width:500px;
}

input[type=text]:hover {
	border:2px solid #006937;
}

input[type=text]:focus {
	border:2px solid #006937;
	background-color:#f0fff0;
}

.inputSet {
	border: 2px solid #d9d9d9;
	border-radius: 8px;
	border-bottom:2px solid #006937;
	outline: none;
	margin: 0 0 20px 4px auto;  
	text-align: left;
	font-family: Roboto, Arial, sans-serif;
	font-size: 17px;
	color: #000;
	line-height: 22px;
	padding:6px;
	max-width:500px;
}

.inputSet:hover {
	border:2px solid #006937;
}

.inputSet:focus {
	border:2px solid #006937;
	background-color:#f0fff0;
}


textarea {
	border: 2px solid #d9d9d9;
	border-radius: 8px;
	border-bottom:2px solid #006937;
	outline: none;
	margin: 0 0 20px 4px auto;  
	text-align: left;
	font-family: Roboto, Arial, sans-serif;
	font-size: 17px;
	color: #000;
	line-height: 22px;
	padding:6px;
	max-width:500px;
}

textarea:hover {
	border:2px solid #006937;
}

textarea:focus {
	border:2px solid #006937;
	background-color:#f0fff0;
}
/* === End elements ============== */
/* === Start CSS classes ========= */

.charCtr {
	font-family:helvetica;
	font-size:13px;
	color:purple;
	text-align:center;
}
.divGrey {
 	margin:0 auto; 
 	width: 530px; 
 	padding: 6px; 
 	border: 10px solid #e5e5e5; 
	border-radius: 10px; 
	background-color: #fff;
}
.errDiv {
	margin:3px;
	max-width:600px;
	border:1px solid #e8b321;
	border-radius: 4px;
	background-color:#fdffa3;
	padding:2px;
	font-family:helvetica, arial;
	font-size:15px;
	text-align:center;
	font-weight: 500;
	color:#ff0000;
	text-shadow: 1px 1px #fff;
}

.homeFull {
	margin:0 auto;
	border:0px solid #e6e6e6;
	border-radius:5px;
	padding:20px;
	max-width: 100%;
	min-width: 350px;
	color:#080660;
	font-size:17px;
	height:100%;
	text-align: justify;
	vertical-align: top;
}

.homeMain {
	float:left;
	border:0px solid #e6e6e6;
	border-radius:5px;
	padding:20px;
	vertical-align: top;
	max-width: 70%;
	min-width: 250px;
	color:#080660;
	font-size:17px;
	height:100%;
	text-align: justify;
}


.labelCat {
	/* form input exp "name" */
	font-family: Roboto, Arial, sans-serif;
	font-size:14px;
	font-weight:200;
	color:#500b6f;
	padding:15px 0 4px 0px;
	border:0px solid #fff;
}

.pgTitle {
	/* Top Main WM Banner */
	color:#030250; 
	font-weight:400; 
	font-size:20px; 
	font-family: 'Roboto', cursive;
	max-width:100%;
	text-align:center;
}

.subBut {
	font-size:14px; 
	font-family:Helvetica, Arial, Verdana, sans-serif; 
	font-weight: 500; 
	text-align: center; 
	text-decoration:none; 
	position: relative; 
	bottom: 2px; 
	border: 1px solid #000; 
	color: #02069C; 
	padding:4px 15px; 
	text-align:center; 
	display:inline-block; 
	background-color:#fffcad; 
	margin: 8px auto; 
	curser: pointer; 
	border-radius: 6px 6px;  
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)"
}

.subBut:hover {
	background-color: #0000ff; 
	border: 1px solid #0000ff; 
	color: #fff;
	/*
	onmouseover="this.style.backgroundColor='#0000ff'; this.style.borderColor='#0000ff'; this.style.color='#fff';" 
	onmouseout="this.style.backgroundColor='#fffcad';this.style.borderColor='#000000'; this.style.color='#02069C';">
	*/
}

.subButYR {
	font-size:15px; 
	font-family:Helvetica, Arial, Verdana, sans-serif; 
	font-weight: 500; 
	text-align: center; 
	text-decoration:none; 
	position: relative; 
	bottom: 2px; 
	border: 1px solid #ff0000; 
	background-color:#ff0; 
	color: #000; 
	padding:4px 15px; 
	text-align:center; 
	display:inline-block; 
	margin: 1px 1px; 
	curser: pointer; 
	border-radius: 6px 6px;  
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)"
}

.subButYR:hover {
	border: 1px solid #ff0; 
	background-color: #f00; 
	color: #fff;
}


/*
			<div id="ewan" class="awit">
				<!-- <div style="font-size:13px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; 
					position: relative; bottom: 2px; border: 1px solid #ff0000; color:#0000ff; background-color:#ffff00; padding:4px 15px; 
					text-align:center; display:inline-block; margin: 4px 4px; curser:pointer; border-radius: 6px 6px;" 
					onmouseover="this.style.backgroundColor='#ff0000'; this.style.borderColor='#ffff00'; this.style.color='#fff';" 
					onmouseout="this.style.backgroundColor='#ffff00';this.style.borderColor='#ff0000'; this.style.color='#0000ff';"> 
				-->					
				<a href="iDirMain.php?Cx=CancelGame&Sx=<?php print time(); ?>&Ux=<?php print $Ux; ?>&Ox=GetReason&Zx=<?php
					print $Zx; ?>&GameID=<?php print $nextGameID; ?>" style="text-decoration:none;">
					&#8678; Cancel <?php echo $nextDateShort; ?> Game</a>
			</div>
*/
.sucDiv {
	margin:3px;
	max-width:600px;
	border:1px solid #076e13;
	border-radius: 4px;
	background-color:#fdffa3;
	padding:2px;
	font-family:helvetica, arial;
	font-size:15px;
	text-align:center;
	color:#076e13;
	font-weight: 500;
	text-shadow: 1px 1px #fff;
}

.subTitle {
 	background-color: #d9daff; 
 	font-size: 18px; 
 	font-family: Helvetica, Arial, Verdana, sans-serif; 
 	font-weight: 500; 
 	text-align: center; 
 	color: #000;
 	padding: 8px;
 	border-radius: 5px;
}

.topDiv {
	margin:0 auto;
	border:0px solid #ff0000;
	max-width:1200px;
	min-width: 350px;
	min-height:600px;
	text-align:center;
	padding:4px;
	display: inline-block;
}
/* === End CSS classes ========= */

/* === Start Index CSS =================== */
.container {
  position: relative;
  font-size: 94px;
  font-weight:bold;
  font-family: Arial;
}
.text-block {
  position: absolute;
  bottom: 40px;
  left: 120px;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}
.inEPBTitle {
  margin:20px auto;
  height: 60px;
  width: 75%;
  border: 0px solid #f00;
  background-color: #fff;
  text-align: center;
  font-size: 50px;
  padding: 15px;
  /*  font-family: 'Yellowtail', cursive; */
  font-family: 'Parisienne', cursive;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 8px;
  text-decoration: none;
}
.inshadow {
	background: url('https://epbridge.club/images/<?php print $BannerPic; ?>') no-repeat;
	background-size: 100%;
	border-radius:10px; 
	margin:0 0 20px 0;
	height:500px;
	max-width:1000px;
	box-shadow:2px 2px 9px 0px #2e2e2e inset;
	border:1px solid #000;
	text-decoration: none;
}
/* == separate clock == */
.pox {
	margin:0 auto;
	border:1px solid #f00;
	border-radius: 4px;
	font-family: sans-serif;
	text-align: center;
	font-size: 30px;
	font-weight:200;
	margin-top: 0px;
	max-width: 780px;
	padding:10px;
	background-color: #069306;
	color:#fff;
}