@charset "utf-8";
/* CSS Document */
/* My customized Buttons HTML5 must be running to use this, will NOT work with XHTML
   You do NOT need bootstrap either to run this style sheet, all colors are all
   UP TO YOU Have fun!
   NOTE: these are scripted for smaller buttons / hint: tables in phpvms etc. that require adding small 
   buttons inside of the table where there is NO room per/say etc. Pay attention to the names; obutton, mbutton are used etc.
   instead of <button> blah blah, so <a href="#" class="mbutton">Blah</a> or <button class="obutton"><span>Hover </span></button>
   */
   
/* Orange Button start */   
.obutton {
	border-radius: 4px;
	background-color: #f4511e;
	border: 2px solid red;
	color: #FFFFFF;
	text-align: center;
	font-size: 14px;	
	/*font-family: Verdana, Arial, Helvetica, sans-serif; */
	font-weight: 600;
	padding: 4px;
	min-width: 100px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;	
}

.obutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.obutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.obutton:hover span {
  padding-right: 25px;
}

.obutton:hover span:after {
  opacity: 1;
  right: 0;
}  
/* large orange btn */
.obutton-lg {
	border-radius: 4px;
	background-color: #f4511e;
	border: 2px solid #CA710C;
	color: #FFFFFF;
	text-align: center;
	font-size: 15px;
	/*font-family: Verdana, Arial, Helvetica, sans-serif; */
	font-weight: 400;
	padding: 10px;
	min-width: 120px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;	
}

.obutton-lg span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.obutton-lg span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.obutton-lg:hover span {
  padding-right: 25px;
}

.obutton-lg:hover span:after {
  opacity: 1;
  right: 0;
}
 
/* maroon button start */
.mbutton {
  border-radius: 4px;
  background-color: #A01A23;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.mbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.mbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.mbutton:hover span {
  padding-right: 25px;
}

.mbutton:hover span:after {
  opacity: 1;
  right: 0;
}


/* steel grey button start */
.gbutton {
  border-radius: 4px;
  background-color: #505050;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.gbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.gbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.gbutton:hover span {
  padding-right: 25px;
}

.gbutton:hover span:after {
  opacity: 1;
  right: 0;
}

/* red button start */
.rbutton {
  border-radius: 4px;
  background-color: #D3232E;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.rbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.rbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.rbutton:hover span {
  padding-right: 25px;
}

.rbutton:hover span:after {
  opacity: 1;
  right: 0;
}

/* Turqouse matches login buttons on default but smaller */
.tbutton {
  border-radius: 4px;
  background-color: #40737C;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.tbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.tbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.tbutton:hover span {
  padding-right: 25px;
}

.tbutton:hover span:after {
  opacity: 1;
  right: 0;
}

/* violet button start */
.vbutton {
  border-radius: 4px;
  background-color: #5D156A;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.vbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.vbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.vbutton:hover span {
  padding-right: 25px;
}

.vbutton:hover span:after {
  opacity: 1;
  right: 0;
}  

/* army green button start */
.abutton {
  border-radius: 4px;
  background-color: #505912;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.abutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.abutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.abutton:hover span {
  padding-right: 25px;
}

.abutton:hover span:after {
  opacity: 1;
  right: 0;
}

/* emerald green button start */
.ebutton {
  border-radius: 4px;
  background-color: #129A72;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.ebutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.ebutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.ebutton:hover span {
  padding-right: 25px;
}

.ebutton:hover span:after {
  opacity: 1;
  right: 0;
}

/* shapphire button start */
.sbutton {
  border-radius: 4px;
  background-color: #056092;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.sbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.sbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.sbutton:hover span {
  padding-right: 25px;
}

.sbutton:hover span:after {
  opacity: 1;
  right: 0;
}

/* large sbutton btn */
.sbutton-lg {
	border-radius: 0px;
	background-color: #337AB7;
	border: 0px solid #ffffff;
	color: #FFFFFF;
	text-align: center;
	font-size: 16px;
	/*font-family: Verdana, Arial, Helvetica, sans-serif; */
	font-weight: 400;
	padding: 14px;
	min-width: 140px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;	
}

.sbutton-lg span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.sbutton-lg span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.sbutton-lg:hover span {
  padding-right: 25px;
}

.sbutton-lg:hover span:after {
  opacity: 1;
  right: 0;
}

/* yellow button start */
.ybutton {
  border-radius: 4px;
  background-color: #FAEB70;
  border: none;
  color: #000000;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.ybutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.ybutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.ybutton:hover span {
  padding-right: 25px;
}

.ybutton:hover span:after {
  opacity: 1;
  right: 0;
}

/* black button start */
.blkbutton {
  border-radius: 4px;
  background-color: #000000;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight:600;
  padding: 8px;
  min-width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.blkbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.blkbutton span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.blkbutton:hover span {
  padding-right: 25px;
}

.blkbutton:hover span:after {
  opacity: 1;
  right: 0;
}
.btn-green {
  background-color: #658538 !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#759a40", endColorstr="#648537");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#759a40), to(#648537));
  background-image: -moz-linear-gradient(top, #759a40, #648537);
  background-image: -ms-linear-gradient(top, #759a40, #648537);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759a40), color-stop(100%, #648537));
  background-image: -webkit-linear-gradient(top, #759a40, #648537);
  background-image: -o-linear-gradient(top, #759a40, #648537);
  background-image: linear-gradient(#759a40, #648537);
  border-color: #648537 #648537 #618035;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-font-smoothing: antialiased;
}
.btn-green span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-green span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-green:hover span {
  padding-right: 25px;
}

.btn-green:hover span:after {
  opacity: 1;
  right: 0;
}
.btn-bronze {
  background-color: #856f38 !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9a8140", endColorstr="#856f37");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#9a8140), to(#856f37));
  background-image: -moz-linear-gradient(top, #9a8140, #856f37);
  background-image: -ms-linear-gradient(top, #9a8140, #856f37);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9a8140), color-stop(100%, #856f37));
  background-image: -webkit-linear-gradient(top, #9a8140, #856f37);
  background-image: -o-linear-gradient(top, #9a8140, #856f37);
  background-image: linear-gradient(#9a8140, #856f37);
  border-color: #856f37 #856f37 #806b35;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-font-smoothing: antialiased;
}
.btn-bronze span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-bronze span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-bronze:hover span {
  padding-right: 25px;
}

.btn-bronze:hover span:after {
  opacity: 1;
  right: 0;
}
.btn-red {
  background-color: #853838 !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9a4040", endColorstr="#853737");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#9a4040), to(#853737));
  background-image: -moz-linear-gradient(top, #9a4040, #853737);
  background-image: -ms-linear-gradient(top, #9a4040, #853737);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9a4040), color-stop(100%, #853737));
  background-image: -webkit-linear-gradient(top, #9a4040, #853737);
  background-image: -o-linear-gradient(top, #9a4040, #853737);
  background-image: linear-gradient(#9a4040, #853737);
  border-color: #853737 #853737 #803535;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-font-smoothing: antialiased;
}
.btn-red span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-red span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-red:hover span {
  padding-right: 25px;
}

.btn-red:hover span:after {
  opacity: 1;
  right: 0;
}
.btn-violet {
  background-color: #813885 !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#96409a", endColorstr="#813785");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#96409a), to(#813785));
  background-image: -moz-linear-gradient(top, #96409a, #813785);
  background-image: -ms-linear-gradient(top, #96409a, #813785);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #96409a), color-stop(100%, #813785));
  background-image: -webkit-linear-gradient(top, #96409a, #813785);
  background-image: -o-linear-gradient(top, #96409a, #813785);
  background-image: linear-gradient(#96409a, #813785);
  border-color: #813785 #813785 #7c3580;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-font-smoothing: antialiased;
}
.btn-violet span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-violet span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-violet:hover span {
  padding-right: 25px;
}

.btn-violet:hover span:after {
  opacity: 1;
  right: 0;
}
.btn-blue {
  background-color: #386685 !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#40769a", endColorstr="#376685");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#40769a), to(#376685));
  background-image: -moz-linear-gradient(top, #40769a, #376685);
  background-image: -ms-linear-gradient(top, #40769a, #376685);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #40769a), color-stop(100%, #376685));
  background-image: -webkit-linear-gradient(top, #40769a, #376685);
  background-image: -o-linear-gradient(top, #40769a, #376685);
  background-image: linear-gradient(#40769a, #376685);
  border-color: #376685 #376685 #356280;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-font-smoothing: antialiased;
}
.btn-blue span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-blue span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-blue:hover span {
  padding-right: 25px;
}

.btn-blue:hover span:after {
  opacity: 1;
  right: 0;
}
   
.btn-aqua {
  background-color: #388582 !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#409a97", endColorstr="#378582");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#409a97), to(#378582));
  background-image: -moz-linear-gradient(top, #409a97, #378582);
  background-image: -ms-linear-gradient(top, #409a97, #378582);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #409a97), color-stop(100%, #378582));
  background-image: -webkit-linear-gradient(top, #409a97, #378582);
  background-image: -o-linear-gradient(top, #409a97, #378582);
  background-image: linear-gradient(#409a97, #378582);
  border-color: #378582 #378582 #35807d;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.09);
  -webkit-font-smoothing: antialiased;
}
.btn-aqua span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-aqua span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-aqua:hover span {
  padding-right: 25px;
}

.btn-aqua:hover span:after {
  opacity: 1;
  right: 0;
}