/* New membership form, May 2014 */

.membershipform { background-color: #fff9e3;  width: 780px;  border-width: 1px; border-color: black; border-style: solid;
				  font-size:14px; padding: 10px; position:relative;
				  -webkit-box-sizing: content-box;
				  box-sizing: content-box;
	}

.membershipform .active { display:block; }
.membershipform .dormant { display:none; }
.membershipform .highlighted { background-color:#00672c;  color:white; }

/* support for non-rectangular buttons */
.membershipform .stageindicatorblock {
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.membershipform .stageindicator { display:inline-block; 
                                  width:189px; height: 50px;
								  font-size:30px;
								  position: relative; }

.membershipform .stageindicatorblockcentre {
  position: relative;
  text-align: center;
  padding: 1px;
  margin-bottom: 6px;
  height: 40px;
  width: 174px;
}

.membershipform .stageindicatorblockcentre:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
  border-width: 1px; border-color: black; border-style: solid solid none solid;
}

.membershipform .stageindicatorblockcentre:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
  border-width: 1px; border-color: black; border-style: none solid solid solid;
}


.membershipform .stageindicatorblockleft {
  position: relative;
  text-align: center;
  padding: 1px;
  margin-bottom: 6px;
  height: 40px;
  width: 174px;
}
.membershipform .widestageindicatorblockleft {
  position: relative;
  text-align: center;
  padding: 1px;
  margin-bottom: 6px;
  height: 40px;
  width: 374px;
}
.membershipform .widestageindicatorblockleft:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
  border-width: 1px; border-color: black; border-style: solid solid none solid;
}

.membershipform .widestageindicatorblockleft:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
  border-width: 1px; border-color: black; border-style: none solid solid solid;
}

.membershipform .stageindicatorblockleft:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
  border-width: 1px; border-color: black; border-style: solid solid none solid;
}

.membershipform .stageindicatorblockleft:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
  border-width: 1px; border-color: black; border-style: none solid solid solid;
}

.membershipform .stageindicatorblockright {
  position: relative;
  text-align: center;
  padding: 1px;
  margin-bottom: 6px;
  height: 40px;
  width: 174px;
}

.membershipform .stageindicatorblockright:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
  border-width: 1px; border-color: black; border-style: solid solid none solid;
}

.membershipform  .stageindicatorblockright:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 18px;
  width: 100%;
  padding: 1px;
  background: white;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
  border-width: 1px; border-color: black; border-style: none solid solid solid;
}

.membershipform  .highlightedstageindicatorblock:before {
  background: #00672c;
}

.membershipform  .highlightedstageindicatorblock:after {
  background: #00672c;
}

.membershipform  .stageindicatortext {  z-index: 1;   
   position: absolute;
   display: inline-block; 
   text-align:center;  line-height: 40px;
   font-size: 20px;
   color: black;
   background-color: white;
   margin: 0px;
   border-color: black;
   border-width: 1px;
}

.membershipform  .stageindicatortextcentre {   
   width: 154px; 
   left: 12px;
   height: 42px;
   border-style: solid none solid none;
 }

 
.membershipform  .stageindicatortextleft { 
   width: 180px; 
   height: 42px; 
   left: -11px;
   border-style: solid none solid solid;
 }
 
 .membershipform  .stageindicatortextright {  
   width: 179px; 
   height: 42px; 
   left: 11px;
   margin: 0px;
   border-style: solid solid solid none;
 }
 
 .membershipform  .widestageindicatortextleft { 
   width: 380px; 
   height: 42px; 
   left: -11px;
   border-style: solid none solid solid;
 }
 
 
.membershipform .highlightedstageindicatortext { color: white; background-color: #00672c; }

.membershipform .nextbutton {
	z-index: 1;   
	position: absolute;
	text-align:center;  line-height: 40px;
    left: -10px;
	width: 174px; 
	height: 42px; 
	font-size: 18px;
	color: white; background-color:#00672c;  margin: 0px;
	border-style: solid none solid solid;
}
.membershipform .widenextbutton {
	z-index: 1;   
	position: absolute;
	text-align:center;  line-height: 40px;
    left: -10px;
	width: 374px; 
	height: 42px; 
	font-size: 18px;
	color: white; background-color:#00672c;  margin: 0px;
	border-style: solid none solid solid;
}
.membershipform .next {  width: 180px; position: relative; margin-left:auto; margin-right:10px; }
.membershipform .widenext {  width: 380px; position: relative; margin-left:auto; margin-right:10px; }
/* end of non-rectangular buttons */

.membershipform button { background-color:white; height: 32px; border-width: 1px; border-color: black; border-style: solid; cursor: pointer; 
   padding-top : 0px;
   padding-bottom : 0px;
   padding-left : 10px;
   padding-right : 10px;
   margin: 0px 0px 0px 0px;
   font-size: 14px; 
   color: black;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}

.membershipform p { margin-top: 12px; }
	
.membershipform form { margin: 0; padding: 0; }
.membershipform tr { margin: 0; padding: 0; }
.membershipform td { margin: 0; padding: 0; border: none; }
.membershipform .name { width: 200px; margin: 0; padding: 0; }
.membershipform .email { width: 354px; margin: 0; padding: 0; }
.membershipform .address { width: 766px; margin: 0; padding: 0; }
.membershipform .postcode  { width: 100px; margin: 0; padding: 0; }

.membershipform .highlighted { background-color:#00672c;  color:white; }
.membershipform .largeText { font-size: 16px; }

.membershipform .right2 {  width: 290px; position: relative; margin-left:auto; margin-right:0px; }
.membershipform .halfwidth { width: 380px; }
.membershipform input { height: 24px; width: auto; padding: 0; }
.membershipform #paymentdetails { border-width: 1px; border-color: black; border-style: solid; padding: 10px; }
.membershipform .payment { width: 760px; text-align:left }
.membershipform .digit { width: 24px; }
.membershipform .error { font-weight: bold; color: tomato; padding: 2px;}