@import url(http://fonts.googleapis.com/css?family=Montserrat);

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
	{
	padding: 0;
	margin: 0;
}

body,input,textarea,select {
	font-family: montserrat, arial, verdana;
	font-size: 12px;
	color: #4c4c4c;
}

.fs-title {
	font-size: 20px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}

input[type=text],input[type=password],select{
	width: 200px;
	height: 30px;
	-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
	-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
	border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
	background-color: #fff;
	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, .09);
	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, .09);
	box-shadow: 1px 2px 5px rgba(0, 0, 0, .09);
	border: solid 1px #cbc9c9;
	margin-left: -5px;
	margin-top: 3px;
	padding-left: 10px;
}

input[type=checkbox] {
	width: 20px;
	height: 20px;
	margin-left: 5px;
	margin-top: 3px;
	padding-left: 10px;
	float: left;
	cursor: pointer;
}

input[type=textarea] {
	-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
	-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
	border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
	background-color: #fff;
	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, .09);
	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, .09);
	box-shadow: 1px 2px 5px rgba(0, 0, 0, .09);
	border: solid 1px #cbc9c9;
	margin-left: -5px;
	margin-top: 3px;
	padding-left: 10px;
}

div#mainDiv{
	height: 490px;
	padding-left:10px;
	padding-right:10px;
}


.roundBox {
	margin: 10px auto;
	max-width: 450px;
	height: 115px;
	-webkit-border-radius: 8px/7px;
	-moz-border-radius: 8px/7px;
	border-radius: 8px/7px;
	background-color: #ebebeb;
	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, .31);
	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, .31);
	box-shadow: 1px 2px 5px rgba(0, 0, 0, .31);
	border: solid 1px black;
}

html {
	background-color: #ffffff;
}

form {
	margin: 0 10px;
}

hr {
	color: #a9a9a9;
	opacity: 0.3;
}

h1 {
	font-size: 32px;
	font-weight: 300;
	color: #4c4c4c;
	text-align: center;
	padding-top: 10px;
	margin-bottom: 10px;
}

.labelClass {
	font-size: 13px;
	vertical-align: middle;
}

a.button {
  font-size: 14px;
  font-weight: 600;
  color: white;
  padding: 6px 25px 0px 20px;
  margin: 10px 8px 20px 0px;
  display: inline-block;
  float: left;
  text-decoration: none;
  text-align:center;
  width: 50px; height: 27px; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  background-color: #398990; 
  -webkit-box-shadow: 0 3px rgba(58,87,175,.75); 
  -moz-box-shadow: 0 3px rgba(58,87,175,.75); 
  box-shadow: 0 3px rgba(0,128,128,.75);
  transition: all 0.1s linear 0s; 
  top: 0px;
  position: relative;
}

a.button:hover {
	top: 3px;
	background-color: #307481;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

div.rdiv{
	float:left;
	margin-left: 50px;
	padding-top: 7px;
	width: 310px;
}
div.ldiv{
	float:left;
	margin-left: 10px;
	padding-top: 7px;
	width: 190px;
}
div.threeDiv{
	float:left;
	margin-left: 9px;
	padding-top: 7px;
	width: 165px;
}

html {
	/*Image only BG fallback*/
	/*background: url('http://thecodeplayer.com/uploads/media/gs.png');*/
	/*background = gradient + image pattern combo*/
	/*background: 
		linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
		url('http://thecodeplayer.com/uploads/media/gs.png');*/
}

fieldset {
    border: 1.5px solid #a9a9a9;
    border-style:dashed;
    border-radius: 5px;
    padding-left: 10px;
    padding-bottom: 15px;
    padding-top: 10px;
    padding-right: 10px;
	margin-top: 12px;
}

fieldset legend {
    background: #a9a9a9;
    color: #fff;
    padding: 2px 3px ;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
}

.errorLabel {
	font: 10px/13px "Helvetica Neue", HelveticaNeue, Helvetica, Arials,sans-serif;
	font-weight: bold;
	color: red;
	position: inherit;
	top: -48px;
	right: -60px;
	margin: 0;
	background: #a9a9a9;
	/*opacity: .7;*/
	filter: alpha(opacity =     70);
	color: #660000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 0 5px #ddd;
	-webkit-box-shadow: 0 0 0 5px #ddd;
	box-shadow: 0 0 0 5px #ddd;
	border: 2px solid #fff;
	padding: 3px 3px;
}

.errorField {
	border: 1px solid;
	border-color: red;
}


label.radio {
  cursor: pointer;
  text-indent: 35px;
  overflow: visible;
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
}

label.radio:before {
  background: #3a57af;
  content:'';
  position: absolute;
  top:2px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

label.radio:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 0.5em;
	height: 0.25em;
	background: transparent;
	top: 7.5px;
	left: 4.5px;
	border: 3px solid #ffffff;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

input[type=radio]:checked + label:after {
	opacity: 1;
}


/*progressbar*/
ul li{
	text-align:center;	
}

#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: black;
	text-transform: uppercase;
	font-size: 9px;
	width: 10%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: red;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: red;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}

.overlayimg {
	width:45px;
    height:45px;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-50px; /* negative half the size of height */
    margin-left:-30px; /* negative half the size of width */
}

.overlay {
  background-color: BFBABA;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  opacity:1.8; /* also -moz-opacity, etc. */
}

body {
  -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
}

#overlay 

.overlayImage {
    margin: 20px auto;
	max-width: 780px;
	height: 750px;
	-webkit-border-radius: 8px/7px;
	-moz-border-radius: 8px/7px;
	border-radius: 8px/7px;
	background-color: #ebebeb;
	-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, .31);
	-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, .31);
	box-shadow: 1px 2px 5px rgba(0, 0, 0, .31);
	border: solid 1px black;
	z-index: 10;
}
.overlayImage img {
    width:45px;
    height:45px;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-50px; /* negative half the size of height */
    margin-left:-30px; /* negative half the size of width */
}
.overlayImage:after {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 1s;
    -webkit-transition: all 1s;
	    opacity:0.4;
}

input[type="radio"] {
  margin-right: 0;
}

label{
	padding: 5px;
	vertical-align: bottom;
	cursor: pointer;
}

input[type=radio] {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    margin-top: 13px;
    padding-left: 10px;
    cursor: pointer;
    vertical-align: middle;
}