/* 
  ------------------------------------------------------------
  css3buttongenerator
  http://css3buttongenerator.com/
  ------------------------------------------------------------
*/

/*
<p><a class="btn-aqua btn-inline-group" href="">Click me</a>
<a class="btn-aqua btn-inline-group" href="">And me</a></p>
*/

.btn-light {font-weight: normal !important;}
.btn-upper-lower {text-transform:capitalize !important};
.btn-inline-group {
	/*display: inline;*/
	display: inline-block;
	margin-right: 5px;
}

/* Extra small */

/*
<div class="btn-wrapper-borders">
  <p><a href="{add_new_Src}" id="add_new" class="btn-orange">Start Again</a></p>
</div>

<div class="btn-wrapper1">
  <a class="btn-aqua" href="">Click me</a>
</div>
*/
div.btn-wrapper-borders {
	border-top: 2px solid #CCC;
	border-bottom: 2px solid #CCC;
	margin-bottom: 15px;
}
div.btn-wrapper1 {
	padding-top: 6px;
	padding-bottom: 16px;
}
div.btn-wrapper2 {
	padding-top: 12px;
	padding-bottom: 20px;
}

/*
<p><a class="btn-aqua btn-inline-group" href="">Click me</a>
<a class="btn-aqua btn-inline-group" href="">And me</a></p>
*/

.btn-inline-group {
	/*display: inline;*/
	display: inline-block;
	margin-right: 5px;
}

/* Container td (top of grid, extra padding required. */
.btn-td-padded {
	padding-top: 8px !important;
}

/* Low padding */
.btn-low-padding {
	padding: 8px 16px !important;
}

.btn-shadow {
	box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 8px;
}

/* Blue (EC) -> large button  */
.btn-blue {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #2F67C5;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	border-bottom: none !important;
}
.btn-blue:hover, .btn-blue:active {
	color: #FFF !important;
	background: #234C92;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Pink (EC) -> large button  */
.btn-pink {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: Bold;
	background: #C7306B;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	border-bottom: none !important;
}
.btn-pink:hover, .btn-pink:active {
	color: #FFF !important;
	background: #BB2D65;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Navigation button off */
.btn-pink.off {
	background: #DC6E99;
}
.Navigator .btn-pink {
	font-size: 1.1em !important;
	font-weight: 700;
}

/* White (dark text) */
.btn-white {
	display: inline-block !important;
	color: #000 !important;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #FFF;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	border: none; !important;
}
.btn-white .m-icon {
	color: #000 !important;
}
.btn-white:hover, .btn-white:active {
	color: #EEE !important;
	background: #222;
	text-decoration: none;
	transition: all 0.5s ease;
}
.btn-white:hover .m-icon, .btn-white:active .m-icon {
	color: #EEE !important;
	transition: all 0.5s ease;
}
.btn-white.mid-blue:hover, .btn-white.mid-blue:active {
	color: #FFF !important;
	background: #5685D6;  /* Mid blue */
	text-decoration: none;
	transition: all 0.5s ease;
}
.btn-white.mid-blue:hover .m-icon, .btn-white.mid-blue:active .m-icon {
	color: #FFF !important;
	transition: all 0.5s ease;
}
.btn-white.mid-gray:hover, .btn-white.mid-gray:active {
	color: #FFF !important;
	background: #787878;  /* Mid gray */
	text-decoration: none;
	transition: all 0.5s ease;
}
.btn-white.mid-gray:hover .m-icon, .btn-white.mid-gray:active .m-icon {
	color: #FFF !important;
	transition: all 0.5s ease;
}

/* Red on white -> used for error messages */
.btn-red-white {
	margin: 0 5px;
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	font-weight: 500;
	background: #B41600;
	padding: 6px 12px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-red-white:hover, .btn-red-white:active {
	color: #FFF !important;
	background: #961300;  /* Dark red */
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Aqua on white -> used in grids for add record */
.btn-aqua-white {
	display: inline-block !important;
	background: #FFFFFF;
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: Arial;
	color: #0191C8 !important;
	font-size: .9em;
	font-weight: bold;
	padding: 8px 16px;
	text-decoration: none;
	border-bottom: none !important;
}
.btn-aqua-white:hover, .btn-aqua-white:active {
	color: #0191C8 !important;
	background: #C3EEFF !important;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Aqua -> large button  */
.btn-aqua {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: Bold;
	background: #09ADD8;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	border-bottom: none !important;
}
.btn-aqua:hover, .btn-aqua:active {
	color: #FFF !important;
	background: #0191C8;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Green -> large button  */
.btn-green {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #27A357;
	padding: 8px 20px;
	text-decoration: none;
}
.btn-green:hover, .btn-green:active {
	color: #FFF !important;
	background: #1D7941;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Green -> small button  */
.btn-green-sml {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #27A357;
	padding: 6px 16px;
	text-decoration: none;
}
.btn-green-sml:hover, .btn-green-sml:active {
	color: #FFF !important;
	background: #1D7941;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Orange/gold (EC) -> large button */
.btn-orange {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #FF8A01;
	padding: 10px 20px;
	text-decoration: none;
	border-bottom: none !important;
}
.btn-orange:hover, .btn-orange:active {
	color: #FFF !important;
	background: #D27100;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Red -> large button */
.btn-red {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: normal;
	background: #C0432E;
	padding: 10px 20px;
	text-decoration: none;
	border-bottom: none !important;
}
.btn-red:hover, .btn-red:active {
	color: #FFF !important;
	background: #913323;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Gold -> small */
.btn-gold-sml {
	display: inline-block !important;
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #000 !important;
	font-size: 0.9em;
	font-weight: 500;
	background: #F8941C;
	padding: 6px 12px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-gold-sml:hover, .btn-gold-sml:active {
	color: #000 !important;
	background: #CC7206;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Dark blue -> large button */
.btn-dkblue {
	display: inline-block !important;
	color: #FFF !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: 500;
	background: #0070C3;
	padding: 10px 20px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-dkblue:hover, .btn-dkblue:active {
	color: #FFF !important;
	background: #1D3F79;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Navigation button off */
.btn-dkblue.off {background: #5685D6;}

.Navigator .btn-dkblue {
	font-size: 1.1em !important;
	font-weight: 700;
}

/*
(Replace colour as needed, replace nav via Dreamweaver)
<!-- BEGIN Navigator Navigator --><span class="Navigator">
<!-- BEGIN First_On --><a class="btn-pink btn-shadow margin-right-10" href="{First_URL}">First</a> <!-- END First_On -->
<!-- BEGIN First_Off --><span class="btn-pink off margin-right-10">First</span> <!-- END First_Off -->
<!-- BEGIN Prev_On --><a class="btn-pink btn-shadow margin-right-10" href="{Prev_URL}">Previous</a> <!-- END Prev_On -->
<!-- BEGIN Prev_Off --><span class="btn-pink off margin-right-10">Previous</span> <!-- END Prev_Off -->&nbsp; 
<!-- BEGIN Pages -->
<!-- BEGIN Page_On --><a href="{Page_URL}">{Page_Number}</a>&nbsp;<!-- END Page_On -->
<!-- BEGIN Page_Off -->{Page_Number}&nbsp;<!-- END Page_Off --><!-- END Pages -->of&nbsp;{Total_Pages}&nbsp; 
<!-- BEGIN Next_On --><a class="btn-pink btn-shadow margin-left-10" href="{Next_URL}">Next</a> <!-- END Next_On -->
<!-- BEGIN Next_Off --><span class="btn-pink off margin-left-10">Next</span> <!-- END Next_Off -->
<!-- BEGIN Last_On --><a class="btn-pink btn-shadow margin-left-10" href="{Last_URL}">Last</a> <!-- END Last_On -->
<!-- BEGIN Last_Off --><span class="btn-pink off margin-left-10">Last</span> <!-- END Last_Off --></span><!-- END Navigator Navigator -->
*/

/* Dark -> large button */
.btn-dark {
	display: inline-block !important;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #FFF !important;
	font-size: 1em;
	font-weight: 500;
	background: #222;
	padding: 10px 20px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-dark:hover, .btn-dark:active {
	color: #FFF !important;
	background: #000;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Dark -> small */
.btn-dark-sml {
	display: inline-block !important;
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #FFF !important;
	font-size: 0.9em;
	font-weight: 500;
	background: #222;
	padding: 8px 16px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-dark-sml:hover, .btn-dark-sml:active {
	color: #FFF !important;
	background: #000;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Dark -> extra small */
.btn-dark-xsml {
	display: inline-block !important;
	-webkit-border-radius: 5;
	-moz-border-radius: 5;
	border-radius: 5px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #FFF !important;
	font-size: 0.9em;
	font-weight: 500;
	background: #444;
	padding: 6px 12px !important;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-dark-xsml:hover, .btn-dark-xsml:active {
	color: #FFF !important;
	background: #222;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Gray > large button w gradient */
.btn-gray {
	display: inline-block !important;
	color: #FFF !important;
	background: #444444;
	-webkit-border-radius: 28;
	-moz-border-radius: 28;
	border-radius: 28px;
	font-family: Arial;
	color: #FFF;
	font-size: 1em;
	font-weight: 500;
	padding: 8px 20px;
	text-decoration: none;
	letter-spacing: 0.7px;
}
.btn-gray:hover, .btn-gray:active {
	color: #FFF !important;
	background: #999999;
	background-image: -webkit-linear-gradient(top, #999999, #999999);
	background-image: -moz-linear-gradient(top, #999999, #999999);
	background-image: -ms-linear-gradient(top, #999999, #999999);
	background-image: -o-linear-gradient(top, #999999, #999999);
	background-image: linear-gradient(to bottom, #999999, #999999);
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Dark gray -> extra small */
.btn-gray-xsml {
	display: inline-block !important;
	-webkit-border-radius: 5;
	-moz-border-radius: 5;
	border-radius: 5px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #FFF !important;
	font-size: 0.9em;
	font-weight: 500;
	background: #878787;
	padding: 6px 8px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-gray-xsml:hover, .btn-gray-xsml:active {
	color: #FFF !important;
	background: #333;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Light gray > large button w gradient 
   Like Facebook. See "Interested"
   content_item_inc
   <a href="travel_group_registration.php?c_itemID='.$item_id.'" class="btn-ltgray"><span class="m-icon">star_outline</span><span class="valign-middle">Interested</span></a>
*/
.btn-ltgray {
	display: inline-block !important;
	color: #FFF !important;
	background: #D2D2D2;
	-webkit-border-radius: 12;
	-moz-border-radius: 12;
	border-radius: 12px;
	font-family: Arial;
	color: #000 !important;
	font-size: 1em;
	font-weight: 600 !important;
	padding: 10px 20px;
	text-decoration: none;
	letter-spacing: 0.7px;

	box-shadow: 1px 1px 9px 1px rgba(64,62,62,0.55);
	-webkit-box-shadow: 1px 1px 9px 1px rgba(64,62,62,0.55);
	-moz-box-shadow: 1px 1px 9px 1px rgba(64,62,62,0.55);
}
.btn-ltgray:hover, .btn-ltgray:active {
	color: #000 !important;
	background: #D2D2D2;
	background-image: -webkit-linear-gradient(top, #E2E5E9, #D6D9DD);
	background-image: -moz-linear-gradient(top, #E2E5E9, #D6D9DD);
	background-image: -ms-linear-gradient(top, #E2E5E9, #D6D9DD);
	background-image: -o-linear-gradient(top, #E2E5E9, #D6D9DD);
	background-image: linear-gradient(to bottom, #E2E5E9, #D6D9DD);
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Light gray -> small */
.btn-ltgray-sml {
	display: inline-block !important;
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #000 !important;
	font-size: 0.9em;
	font-weight: 500;
	background: #F0F0F0;
	padding: 8px 16px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-ltgray-sml:hover, .btn-ltgray-sml:active {
	color: #000 !important;
	background: #E1E1E1;
	text-decoration: none;
	transition: all 0.5s ease;
}

/* Light gray -> small */
.btn-ltgray-sml {
	display: inline-block !important;
	-webkit-border-radius: 8;
	-moz-border-radius: 8;
	border-radius: 8px;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	color: #000 !important;
	font-size: 0.9em;
	font-weight: 500;
	background: #F0F0F0;
	padding: 8px 16px;
	text-decoration: none;
	border-bottom: none !important;
	letter-spacing: 0.7px;
}
.btn-ltgray-sml:hover, .btn-ltgray-sml:active {
	color: #000 !important;
	background: #E1E1E1;
	text-decoration: none;
	transition: all 0.5s ease;
}