body {
	background-color: #ffffff;
	color: #000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;	
	max-width:1400px;
}

a:link    {color:#0000FF;}
a:visited {color:#0000FF;}
a:active  {color:#0000FF;} 

body div#toolTip { position:absolute;z-index:1000;width:250px;background-color:#00F;border:2px double #fff;text-align:left;padding:5px;min-height:1em;border-radius:10px; }
body div#toolTip p { margin:0;padding:0;color:#fff;font:11px/12px verdana,arial,sans-serif; }
body div#toolTip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
body div#toolTip p em span { font-weight:bold;color:#fff; }	

fieldset {
	border: 3px solid #999999;
	margin-bottom: 10px;
}

legend {
	font-weight: bold;
	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;
}

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

.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: .8em;
}

#debug th {
	text-align: left;
	background-color: #999;
	width:33%;
}	

#page_body{
	background-color: #CCCCCC;
	padding: 5px;
	width: 90%;
	border: 5px solid #e63d28;
	margin-right: auto;
	margin-left: auto;
	min-width:300px;
	
}

.page_body_head{
	font-size: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 0px;
	color: #333;
}	

#admin_page_body{
	background-color: #fff;
	padding: 5px;
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
	
}

#admin_page_head{
	background-color: #fff;
	padding: 5px;
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
	
}

.radio_required {
	background-color:#ffe7e7;
	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;
}  	

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

input:required:valid {
 	background-color:#CDFECD;
}

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

input[type=text],input[type=url],input[type=email],input[type=password]
{
	width: 50%;
	height:20px;
	padding:5px 8px;
	font-size:.8em;
	border: 2px solid #ccc;
}

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

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

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

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

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

#navigation ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #FFF;
}

#navigation li {
	float: left;
}

#navigation li a {
	display: block;
	color: #cc6600;
	font-weight:bold;
	text-align: center;
	padding: 7px 8px;
	text-decoration: none;
	border:solid 1px #ccc
}

#navigation a:hover:not(.active) {
	background-color: #ccc;
}

#navigation .active {
	background-color:#CCCCCC;
}

.admin_body_content {
	border:solid 1px #000;
	width:80%;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:20px;
}

.admin_body_content_head {
	font-weight: bold;
	color: #FFF;
	background-color: #666;
	padding: 2px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

#regtypegridtable {
	border: 1px solid black;
	width: 95%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	font-size: .9em;
	
}

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

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


#regtypegridtable th {
	text-align: center;
	background-color: #999;
	border-bottom: 1px solid #ddd;
	padding: 2px;
}

#regtypegridtable td {
	padding: 2px;
	border-bottom: 1px solid #fff;
}	

.tint{
	background-color: #EDF68C;
}

.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;
}

.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;
}

.modaldatabak
{
  width: 50%;
  height: 50%;
  top: 0;
  position: absolute;
  display: none;
  background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */	
	z-index: 2;
	display:none;
	
}

.modaldata
{
  width: 600px;
  height: 600px;
  padding: 5px;

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

  margin: -300px 0 0 -300px;
  background: #3b4145;
}

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

.cbimage{
 height: 20px;
 width: 20px;	
}

.rbimage{
 height: 20px;
 width: 20px;	
}

.formButton{
	width:80%;
	height: auto;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:20px;
	text-align:center;
	padding:10px;
	border: thin solid #333;
}

.formButton:hover{
	background:#778899;
}	

/* SIZED ELEMENTS */
#header_text{
	background:#F01F29;
	width:auto;
	height:auto;
	font-size: 1.1em;	
	color:#FFFFFF;
	font-weight: bold;
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 8px;
  padding-left: 8px;
	text-align:left;
	margin-bottom: 4px;
}	

#header_instructions{
	width:auto;
	height:auto;
	font-size: .8em;	
  padding-top: 10px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
	text-align:center;
}	

.footer{
	width:100%;
	text-align:center;
}

/* 
	ORANGE
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px), (min-width: 1025px) and (max-width: 1280px) {
	.footer{
		/*background-color: orange;*/
	}

	#header{
		text-align: center;
	  min-width:769px;
	}	

	#header_logo{
		width:100%;
		height:155px;
		background-image: url("../images/VW21_logo.png"),url("../images/VW21_logo_text.png");
		background-position: left top,right top;
		background-repeat: no-repeat,no-repeat;
	}

	#header_text{
		background:#F01F29;
		width:auto;
		height:auto;
		font-size: 1.1em;	
		color:#FFFFFF;
		font-weight: bold;
	  padding-top: 2px;
	  padding-right: 2px;
	  padding-bottom: 8px;
	  padding-left: 8px;
		text-align:left;
	}	



	#left_col{
		width:48%;
		float:left;
	}	

	#right_col{
		width:48%;
		float:right;
	}	

	legend {
		font-size: 1.2em;
	}	

	.confirmation{
		width:50%;
		font-size:1.2em;
		font-weight:bold;
		text-align:center;
		vertical-align:middle;
		letter-spacing:5px;
		text-transform:uppercase;

	}
	
	.footer{
		text-align: center;		
	}	  

	#badge{
		width:90%;
		height:100%;
		margin-right:auto;
		margin-left:auto;
		border: thin solid #333;
		background-color: orange;
		
	}	
}

/* 
	YELLOW
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
	.footer{
		/*background-color: yellow;*/
	}

	#badge{
		width:90%;
		height:100%;
		margin-right:auto;
		margin-left:auto;

		border: thin solid #333;
		background-color: yellow;
		
	}

}

/* 
	GREEN
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

	.footer{
		/*background-color: green;*/
		font-size:26px;
	}

	body {
		font-size: 46px;	
	}	

	input[type=text],input[type=url],input[type=email],input[type=password]
	{
		height:40px;
	}

	#header_logo{
		width:100%;
		height:209px;
		background-image: url("../images/VW21_logo_768.png");
		background-position: left top;
		background-repeat: no-repeat;
	}
	
	#header_text{
		font-size: 18px;	
	}		

	#header_instructions{
		font-size: 18px;
	}	
		
	#left_col{
		width:98%;
	}	
	
	#right_col{
		width:98%;
	}		
	
	legend {
		font-size: 1em;
	}	

	.confirmation{
		width:40%;
		font-size:1em;
	}

	.cbimage{
	 height: 40px;
	 width: 40px;	
	}

	.rbimage{
	 height: 40px;
	 width: 40px;	
	}


	select
	{
		height:48px;
	 	line-height:22px;
	}
	
	#demographic_info label{
		float:none;
		text-align: right;
		margin-right: 10px;
		margin-top: 3px;
		width: 36%;
		padding: 3px;
		font-weight: bold;
		height:20px;
		font-size:.7em;
		/*border: thin solid #333;*/
	}	
	
	.btn {
	  font-size: 40px;
	}	
	
	#regtypegridtable{
		font-size:20px;
	}

	#badge{
		width:90%;
		height:100%;
		margin-right:auto;
		margin-left:auto;

		border: thin solid #333;
		background-color: green;
		
	}	
}

/* 
	BLUE
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.footer{
		/*background-color: blue;*/
		font-size:26px;
	}
	body {
		font-size: 46px;	
	}	

	input[type=text],input[type=url],input[type=email],input[type=password]
	{
		height:40px;
	}
	#header_logo{
		width:100%;
		height:209px;
		background-image: url("../images/VW21_logo_768.png");
		background-position: left top;
		background-repeat: no-repeat;
	}

	#header_text{
		font-size: 18px;	
	}		
	
	#left_col{
		width:98%;
	}	
	
	#right_col{
		width:98%;
	}		
	
	legend {
		font-size: 1em;
	}	

	.confirmation{
		width:40%;
		font-size:1em;
	}

	.cbimage{
	 height: 40px;
	 width: 40px;	
	}

	.rbimage{
	 height: 40px;
	 width: 40px;	
	}
	select
	{
		height:48px;
	 	line-height:22px;
	}
	
	#demographic_info label{
		float:none;
		text-align: right;
		margin-right: 10px;
		margin-top: 3px;
		width: 36%;
		padding: 3px;
		font-weight: bold;
		height:20px;
		font-size:.7em;
		/*border: thin solid #333;*/
	}	
	
	.btn {
	  font-size: 40px;
	}	

	#regtypegridtable{
		font-size:20px;
	}	
	
	#badge{
		width:90%;
		height:100%;
		margin-right:auto;
		margin-left:auto;

		border: thin solid #333;
		background-color: blue;
		
	}	
}

/* 
	VIOLET
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 0px) and (max-width: 767px) {
	.footer{
		/*background-color: violet;*/
	}
	body {
		font-size: 20px;	
		min-width:400px;
	}	

	input[type=text],input[type=url],input[type=email],input[type=password]
	{
		height:40px;
	}

	#header_logo{
		width:100%;
		height:209px;
		background-image: url("../images/VW21_logo_768.png");
		background-position: left top;
		background-repeat: no-repeat;
	}
	#header_text{
		font-size: 18px;	
	}		
	
	#left_col{
		width:98%;
	}	
	
	#right_col{
		width:98%;
	}		
	
	legend {
		font-size: 1em;
	}	

	.confirmation{
		width:40%;
		font-size:1em;
	}

	.cbimage{
	 height: 40px;
	 width: 40px;	
	}

	.rbimage{
	 height: 40px;
	 width: 40px;	
	}
	select
	{
		height:48px;
	 	line-height:22px;
	}
	
	#demographic_info label{
		float:none;
		text-align: right;
		margin-right: 10px;
		margin-top: 3px;
		width: 36%;
		padding: 3px;
		font-weight: bold;
		height:20px;
		font-size:.7em;
		/*border: thin solid #333;*/
	}	
	
	.btn {
	  font-size: 40px;
	}	
  
	#badge{
		width:90%;
		height:100%;
		margin-right:auto;
		margin-left:auto;
;
		border: thin solid #333;
		background-color: violet;
		
	}	  
}