@import url('https://fonts.googleapis.com/css?family=Titillium+Web&display=swap');

@charset "utf-8";

/* GENERAL PAGE LAYOUTS */

	img, object, embed, video {
		max-width: 100%;
	}

	.ie6 img {
		width:100%;
	}

	a:link    {color:#199ad6;}
	a:visited {color:#199ad6;}
	a:active  {color:#199ad6;} 

	body {
		background-color: #ffffff;
		font-family: 'Titillium Web', sans-serif;
		font-size:22px;
	  color: #505356
	}

	#page_header{
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		margin-bottom:4px;
		background-color: #ffffff;
		padding:8px;
		/*background-color: #EAD0D1;*/
	}	
	
	#page_headerCGBEC{
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		margin-bottom:0px;
		background-color: #ffffff;
		padding:8px;
		/*background-color: #EAD0D1;*/
	}	
	
	#page_data{
		width: 100%;
		height: 58px;
		margin-right: auto;
		margin-left: auto;
		background-color: #222427;
	}
	#page_dataCGBEC{
		width: 100%;
		height: 48px;
		margin-right: auto;
		margin-left: auto;
		background-color: #0A4879;
	}	
	
	#page_instructions{
		width: 100%;
		height: 65px;
		margin-right: auto;
		margin-left: auto;
		background-color: #f0f0f1;
		border-bottom:3px solid #CACBCC;
		margin-bottom:5px;
	}	
	
	#page_footer{
		width: 100%;
		height: 48px;
		margin-right: auto;
		margin-left: auto;
		background-color: #222427;
		text-align:center;
		padding-top:5px;
		padding-bottom:5px;
		font-size:1em;
		color: white;
		margin-top:10px;
	}		
	
	.footertext{
		padding-top:15px;
	  font-size: .8em;	
	 }
	
	.page_contents{
		padding-left:10px;
		padding-right:10px;
		min-height:580px;
	}

	.location{
		padding-top:15px;
		color: white;
	  font-size: .8em;	
	  padding-left: 15px;
	}
	
	.locationCGBEC{
		padding-top:15px;
		color: white;
	  font-size: .8em;	
	  padding-left: 15px;
	}	
	.venue {
		color: #2a9d49;
		font-size: .8em;
		padding-left: 8px;	
	}	
	
	.instruction{
		padding-top:10px;
	  font-size: .8em;	
	  padding-left: 15px;
	}
	
	.lcol{
		width:48%;
		padding-right:5px;
		float:left;
	}

	.rcol{
		width:48%;
		padding-left:5px;
		float:right;
	}

	.ccol{
		width:75%;
		margin-right:auto;
		margin-left:auto;
	}	

	fieldset {
		border: 1px solid #999999;
		margin-bottom: 10px;
		padding:6px;
	}

	legend {
		font-weight: bold;
		font-size: 1em;
		text-align: left;
		color: #333333;
	}
	
	.MessageBox {
		width: 70%;
		background-color: #3d9bd2;
		margin-top: 10px;
		margin-right: auto;
		margin-bottom: 10px;
		margin-left: auto;	
		padding:5px;
		border-radius: 15px;
		color:#000000;
	}

	.ErrorBox {
		width: 70%;
		background-color: #FF6666;
		margin-top: 10px;
		margin-right: auto;
		margin-bottom: 10px;
		margin-left: auto;	
		padding:5px;
		border-radius: 15px;
		color:#000000;
	}

	.ErrorBox a {
		color: #000;
		text-decoration:none;
	}

	.ErrorBox a:hover {
		text-decoration:underline;
	}
	
	#debug {
		border: 1px solid black;
		width: 80%;
		margin-top: 10px;
		margin-right: auto;
		margin-bottom: 10px;
		margin-left: auto;
		font-size: 1em;
	}

	#debug th {
		text-align: left;
		background-color: #999;
		width:33%;
	}
	
	.dbWrite{
		font-size:.8em;
	}

/* FORM ELEMENTS */
	input[type=text],input[type=url],input[type=email],input[type=password]
	{
		width: 60%;
		height:20px;
		padding:5px;
		font-size:.9em;
		border: 2px solid #ccc;
	}

	input:focus{
		border: 2px solid #2A57FE;
	}

	select
	{
		border: 2px solid #ccc;
		height:35px;
		padding:5px 8px;
		width: 63%;
		font-size:.85em;
		line-height:18px;
		max-width:500px;	
	}

	select:focus{
		border: 2px solid #2A57FE
	}

	checkbox:focus{
		border: 2px solid #2A57FE
	}

	label
	{
		float: left;
		text-align: right;
		margin-right: 10px;
		margin-top: 3px;
		width: 30%;
		padding: 3px;
		font-weight: bold;
		height:20px;
		font-size:.8em;
		/*border: thin solid #333;*/
	}

  input[type=radio] 
  {
  	border: 0px;
  	width: 30px;
  	height: 30px;
	}	
	
  input[type=checkbox] 
  {
  	border: 0px;
  	/*width: 100%;*/
  	width: 1.3em;
  	height: 1.3em;
	}		


/* FIELD VALIDATION */
	input:required:invalid, input:focus:invalid {
	    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
	    background-position: right top;
	    background-repeat: no-repeat;
	    -moz-box-shadow: none;
	}

	input:required:valid {
	    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
	    background-position: right top;
	    background-repeat: no-repeat;
	}

	select:required:invalid, input:focus:invalid {
	  -moz-box-shadow: none;
		background-color:#f0dddd;
	}

	select:required:valid {
	 	background-color:#CDFECD;
	}
	
	.radio_required {
		background-color:#f0dddd;
		width: 50%;
		border: 2px solid #ccc;
		padding:5px 8px;
		font-size:.8em;	
		float:left;
	} 

	.radio_valid {
		background-color:#CDFECD;
		width: 50%;
		border: 2px solid #ccc;
		padding:5px 8px;
		font-size:.8em;	
		float:left;
	} 

	.radio_notrequired {
		width: 50%;
		border: 2px solid #ccc;
		padding:5px 8px;
		font-size:.8em;	
		float:left;
	}  		

/* REG TYPE GRID */
	#regtypegridtable {
		border: 1px solid black;
		width: 100%;
		margin-top: 10px;
		margin-right: auto;
		margin-bottom: 10px;
		margin-left: auto;
		font-size: 1em;
	}

	#regtypegridtable a:link{
		color:#000;	
	}

	#regtypegridtable a:visited{
		color:#000;	
	}


	#regtypegridtable th {
		text-align: center;
		background-color: #999;
		border-bottom: 1px solid #f0f0f1;
		padding: 2px;
		font-size: .9em;
	}

	#regtypegridtable td {
		padding: 2px;
		border-bottom: 1px solid #fff;
		background-color: #f0f0f1;
	}	
	
	.regtypegrid_price{
		font-weight:bold;	
		text-align:center;
		vertical-align:top;
	}

	.regtypegrid_event{
		font-weight:bold;	
		text-align:left;
		vertical-align:top;
		font-size:.9em;
	}
	
	.regtypegrid_eventfee{
		font-weight:bold;	
		text-align:right;
		vertical-align:middle;
		font-size:.9em;
	}	
	
	.regtypegrid_detail{
		font-size:.9em;
		font-weight:normal;
	}
	
	

	

	.tint{
		background-color: #EDF68C !important;
	}

/* REG FILTER GRID */
	#regfiltergridtable {
		width: 100%;
		margin-top: 10px;
		margin-right: auto;
		margin-bottom: 10px;
		margin-left: auto;
	}

	#regfiltergridtable a:link{
		color:#000;	
	}

	#regfiltergridtable a:visited{
		color:#000;	
	}

	#regfiltergridtable td {
		padding: 6px;
		border-bottom: 1px solid #cccccc;
	}	
	


/* BUTTONS */	
	.btn {
	  -webkit-border-radius: 28;
	  -moz-border-radius: 28;
	  border-radius: 28px;
	  font-family: Arial;
	  color: #ffffff;
	  font-size: 20px;
	  background: #3b4145;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;
	  width:90%;
	  min-width:150px;
	  text-align:center;
	  margin-bottom:5px;
	}

	.btn:hover {
	  background: #889399;
	  text-decoration: none;
	}

	.btns {
	  -webkit-border-radius: 28;
	  -moz-border-radius: 28;
	  border-radius: 28px;
	  font-family: Arial;
	  color: #ffffff;
	  font-size: 14px;
	  background: #3b4145;
	  padding: 5px 10px 5px 10px;
	  text-decoration: none;
	}

	.btns:hover {
	  background: #889399;
	  text-decoration: none;
	}

/* MODAL INFO */
	.modaldata
	{
	  width: 50%;
	  height: 600px;
	  padding: 5px;

	  position: absolute;
	  top: 50%;
	  left: 50%;

	  margin: -300px 0 0 -300px;
	  
	  background: #222427;
	}

	.ModalBox{
		width:90%;
		margin:auto;
		height: 520px;	
		padding: 5px;
		background: #ffffff;
		
	}
	.modaldata_hide
	{
		display:none;
	}



.modal_popup_overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 1s;
  visibility: hidden;
  opacity: 0;
  min-width:300px;
}

.modal_popup_overlay_close{
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.modal_popup {
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  font-size:.9em;
}

.modal_popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.modal_popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.modal_popup .close:hover {
  color: #06D85F;
}
.modal_popup .modal_popup_content {
  max-height: 30%;
  overflow: auto;
}


/* SIZED ELEMENTS */
	.gridContainer {
		width: 100%;
		min-width:320px;
	}

	#LayoutDiv1 {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
		/*background-color: #FF9933;*/
	}
				
	/* Phone: 320px or less */
	@media screen and (max-width: 320px) 
	{
		body {
			font-size:18px;
		}		

	  input[type=radio] 
	  {
	  	width: 22px;
	  	height: 22px;
		}		
		
		#LayoutDiv1 {
			/*background-color: #FF9933;*/
		}

		label
		{
			width: 20%;
			font-size:.6em;
		}		

		.lcol{
			width:98%;
			padding-right:0px;
			float:none;
		}

		.rcol{
			width:98%;
			padding-left:0px;
			float:none;
		}		
		
		#regtypegridtable {
			font-size: .7em;
		}			
	}

	/* Phone Plus: 321px to 480px */
	@media only screen and (max-width: 480px) and (min-width: 321px)
	{
		body {
			font-size:20px;
		}		

	  input[type=radio] 
	  {
	  	width: 24px;
	  	height: 24px;
		}
		
		#LayoutDiv1 {
			/*background-color: #E51521;*/
		}

		label
		{
			width: 20%;
			font-size:.6em;
		}
		
		.lcol{
			width:98%;
			padding-right:0px;
			float:none;
		}

		.rcol{
			width:98%;
			padding-left:0px;
			float:none;
		}	

		#regtypegridtable {
			font-size: .7em;
		}				
	}
	
	/* Tablet Portrait: 481px to 768px */
	@media only screen and (max-width: 768px) and (min-width: 481px)
	{
		body {
			font-size:22px;
		}	

	  input[type=radio] 
	  {
	  	width: 26px;
	  	height: 26px;
		}
		
		#LayoutDiv1 {
			/*background-color: #FFFCCC;*/
		}	

		#regtypegridtable {
			font-size: .8em;
		}			

		.lcol{
			width:98%;
			padding-right:0px;
			float:none;
		}

		.rcol{
			width:98%;
			padding-left:0px;
			float:none;
		}
	}

	/* Tablet Landscape: 769px to 1024px */
	@media only screen and (max-width: 1024px) and (min-width: 769px)
	{
	  input[type=radio] 
	  {
	  	width: 28px;
	  	height: 28px;
		}
		
		#LayoutDiv1 {
			/*background-color: #FFC0FF;*/
		}

		#regtypegridtable {
			font-size: .9em;
		}		
		
		label
		{
			width: 25%;
			font-size:.75em;
			/*border: thin solid #333;*/
		}
	}	
	
	/* Everything Else 1025px */
	@media only screen and (min-width: 1025px)
	{
		#LayoutDiv1 {
			/*background-color: #80FFFF;*/
		}
	}