/* ========================================================	*
 *  Controls all the button states							*
 * --------------------------------------------------------	*

/* ========================================================	*
 *  Universal Button Rules									*
 * --------------------------------------------------------	*/
.fix {
	clear: both;
	height: 1%;
}
.gauzy {
	opacity: 0.25;
	filter: alpha (opacity=25);
}
.buttons {
	clear: both;
	overflow: hidden;
	margin: 15px 0;
	text-align: center;
}
.btn-navy,
.btn-blue,
.btn-smallblue,
.btn-azure,
.btn-green,
.btn-lightgreen,
.btn-gray,
.btn-darkgray,
.btn-smallgray,
.btn-dashgray,
.btn-yellow,
.btn-gold,
.btn-orange,
.btn-largeorange,
.btn-red { 
	padding: 0 8px 0 0;
	margin: 0 2px 0 0;
	border: 0; 
	cursor: pointer; 
	text-align: center; 
	text-decoration: none !important;
	float: left;
}

.btn-navy span,
.btn-blue span,
.btn-smallblue span,
.btn-azure span,
.btn-green span,
.btn-lightgreen span,
.btn-gray span,
.btn-darkgray span,
.btn-smallgray span,
.btn-dashgray span,
.btn-yellow span,
.btn-gold span,
.btn-orange span,
.btn-largeorange span,
.btn-red span {
	padding: 0 0 0 8px;
	font-size: 12px; 
	height: 31px; 
	line-height: 31px;
	color: #333;
	border: none; 
	position: relative; 
	display: block;
	white-space: nowrap; 
	text-decoration: none !important;
	text-transform: capitalize;
	font-family: 'Arial', Verdana, sans-serif !important;
	font-weight: bold;
}

.btn-smallgray,
.btn-smallblue {
	padding: 0 8px 0 0;

}

.btn-smallgray span,
.btn-smallblue span {
	padding: 0 0 0 8px;
	font-size: 11px; 
	height: 26px; 
	line-height: 26px;
	color: #333;
}
.btn-red span,
.btn-green span,
.btn-azure span,
.btn-orange span {
	color: #fff;
}

.btn-navy span {
	color: #fe7100;
}

.btn-darkgray span {
	color: #ff9946;
}

.btn-largeorange {
	padding: 0 20px 0 0;
}

.btn-largeorange span {
	padding: 0 0 0 20px;
	font-size: 16px; 
	height: 40px; 
	line-height: 40px;
	color: #fff;
}
.btn-navy span img,
.btn-blue span img,
.btn-azure span img,
.btn-green span img,
.btn-lightgreen span img,
.btn-gray span img,
.btn-dashgray span img,
.btn-darkgray span img,
.btn-yellow span img,
.btn-gold span img,
.btn-orange span img,
.btn-red span img {
	float: left;
	border: none;
	margin: 7px 7px 0 0;
}
.icon {
	padding: 0 8px 0 0;
	float: right;
}
.icon span {
	padding: 0 0 0 5px;	
}
.icon span img {
	float: left;
	border: none;
	margin: 6px 5px 0 0;
}

a.left,
button.left {
	float: left !important;
}
a.right,
button.right {
	float: right !important;
}

/* ========================================================	*
 *  Dark Gray 												*
 * --------------------------------------------------------	*/
.btn-darkgray {
	background: url(/static/images/buttons/btn-darkgray.gif) right no-repeat; 
}
.btn-darkgray span { 
	background: url(/static/images/buttons/btn-darkgray-span.gif) left no-repeat;
}
.btn-darkgray:hover {
	background: url(/static/images/buttons/btn-darkgray-hover.gif) right no-repeat; 
}
.btn-darkgray:hover span {
	background: url(/static/images/buttons/btn-darkgray-span-hover.gif) left no-repeat; 
}
/* ========================================================	*
 *  Large Gray 												*
 * --------------------------------------------------------	*/
.btn-gray {
	background: url(/static/images/buttons/btn-gray.gif) right no-repeat; 
}
.btn-gray span { 
	background: url(/static/images/buttons/btn-gray-span.gif) left no-repeat;
}
.btn-gray:hover {
	background: url(/static/images/buttons/btn-gray-hover.gif) right no-repeat; 
}
.btn-gray:hover span {
	background: url(/static/images/buttons/btn-gray-span-hover.gif) left no-repeat; 
}
/* ========================================================	*
 *  Dashboard Gray											*
 * --------------------------------------------------------	*/
.btn-dashgray {
	background: url(/static/images/buttons/btn-dashgray.gif) right no-repeat; 
}
.btn-dashgray span { 
	background: url(/static/images/buttons/btn-dashgray-span.gif) left no-repeat;
}
.btn-dashgray:hover {
	background: url(/static/images/buttons/btn-dashgray-hover.gif) right no-repeat; 
}
.btn-dashgray:hover span {
	background: url(/static/images/buttons/btn-dashgray-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Green (login)											*
 * --------------------------------------------------------	*/
.btn-green { 
	background: url(/static/images/buttons/btn-green.gif) right no-repeat; 
}
.btn-green span { 
	background: url(/static/images/buttons/btn-green-span.gif) left no-repeat;
}
.btn-green:hover {
	background: url(/static/images/buttons/btn-green-hover.gif) right no-repeat; 
}
.btn-green:hover span {
	background: url(/static/images/buttons/btn-green-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Light Green (current course progress)					*
 * --------------------------------------------------------	*/
.btn-lightgreen { 
	background: url(/static/images/buttons/btn-lightgreen.gif) right no-repeat; 
}
.btn-lightgreen span { 
	background: url(/static/images/buttons/btn-lightgreen-span.gif) left no-repeat;
}
.btn-lightgreen:hover {
	background: url(/static/images/buttons/btn-lightgreen-hover.gif) right no-repeat; 
}
.btn-lightgreen:hover span {
	background: url(/static/images/buttons/btn-lightgreen-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Navy (sidebar headings & newsletter signup)				*
 * --------------------------------------------------------	*/
.btn-navy { 
	background: url(/static/images/buttons/btn-navy.gif) right no-repeat; 
}
.btn-navy span { 
	background: url(/static/images/buttons/btn-navy-span.gif) left no-repeat;
}
.btn-navy:hover {
	background: url(/static/images/buttons/btn-navy-hover.gif) right no-repeat; 
}
.btn-navy:hover span {
	background: url(/static/images/buttons/btn-navy-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Azure (preview)											*
 * --------------------------------------------------------	*/
.btn-azure { 
	background: url(/static/images/buttons/btn-azure.gif) right no-repeat; 
}
.btn-azure span { 
	background: url(/static/images/buttons/btn-azure-span.gif) left no-repeat;
}
.btn-azure:hover {
	background: url(/static/images/buttons/btn-azure-hover.gif) right no-repeat; 
}
.btn-azure:hover span {
	background: url(/static/images/buttons/btn-azure-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Blue (footer)											*
 * --------------------------------------------------------	*/
.btn-blue { 
	background: url(/static/images/buttons/btn-blue.gif) right no-repeat; 
}
.btn-blue span { 
	background: url(/static/images/buttons/btn-blue-span.gif) left no-repeat;
}
.btn-blue:hover {
	background: url(/static/images/buttons/btn-blue-hover.gif) right no-repeat; 
}
.btn-blue:hover span {
	background: url(/static/images/buttons/btn-blue-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Small Blue (sidebar content)							*
 * --------------------------------------------------------	*/
.btn-smallblue { 
	background: url(/static/images/buttons/btn-smallblue.gif) right no-repeat; 
}
.btn-smallblue span { 
	background: url(/static/images/buttons/btn-smallblue-span.gif) left no-repeat;
}
.btn-smallblue:hover {
	background: url(/static/images/buttons/btn-smallblue-hover.gif) right no-repeat; 
}
.btn-smallblue:hover span {
	background: url(/static/images/buttons/btn-smallblue-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Orange (supplemental call-to-action)					*
 * --------------------------------------------------------	*/
.btn-orange { 
	background: url(/static/images/buttons/btn-orange.gif) right no-repeat; 
}
.btn-orange span { 
	background: url(/static/images/buttons/btn-orange-span.gif) left no-repeat;
}
.btn-orange:hover {
	background: url(/static/images/buttons/btn-orange-hover.gif) right no-repeat; 
}
.btn-orange:hover span {
	background: url(/static/images/buttons/btn-orange-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Large Orange (welome message)							*
 * --------------------------------------------------------	*/
.btn-largeorange { 
	background: url(/static/images/buttons/btn-largeorange.gif) right no-repeat; 
}
.btn-largeorange span { 
	background: url(/static/images/buttons/btn-largeorange-span.gif) left no-repeat;
}
.btn-largeorange:hover {
	background: url(/static/images/buttons/btn-largeorange-hover.gif) right no-repeat; 
}
.btn-largeorange:hover span {
	background: url(/static/images/buttons/btn-largeorange-span-hover.gif) left no-repeat; 
}


/* ========================================================	*
 *  Red (account logout)									*
 * --------------------------------------------------------	*/
.btn-red { 
	background: url(/static/images/buttons/btn-red.gif) right no-repeat; 
}
.btn-red span { 
	background: url(/static/images/buttons/btn-red-span.gif) left no-repeat;
}
.btn-red:hover {
	background: url(/static/images/buttons/btn-red-hover.gif) right no-repeat; 
}
.btn-red:hover span {
	background: url(/static/images/buttons/btn-red-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Yellow (account logout)									*
 * --------------------------------------------------------	*/
.btn-yellow { 
	background: url(/static/images/buttons/btn-yellow.gif) right no-repeat; 
}
.btn-yellow span { 
	background: url(/static/images/buttons/btn-yellow-span.gif) left no-repeat;
}
.btn-yellow:hover {
	background: url(/static/images/buttons/btn-yellow-hover.gif) right no-repeat; 
}
.btn-yellow:hover span {
	background: url(/static/images/buttons/btn-yellow-span-hover.gif) left no-repeat; 
}

/* ========================================================	*
 *  Gold (attention)										*
 * --------------------------------------------------------	*/
.btn-gold { 
	background: url(/static/images/buttons/btn-gold.gif) right no-repeat; 
}
.btn-gold span { 
	background: url(/static/images/buttons/btn-gold-span.gif) left no-repeat;
}
.btn-gold:hover {
	background: url(/static/images/buttons/btn-gold-hover.gif) right no-repeat; 
}
.btn-gold:hover span {
	background: url(/static/images/buttons/btn-gold-span-hover.gif) left no-repeat; 
}


/* ========================================================	*
 *  Small Gray  (resources lists)							*
 * --------------------------------------------------------	*/
.btn-smallgray { 
	background: url(/static/images/buttons/btn-smallgray.gif) right no-repeat; 
}
.btn-smallgray span { 
	background: url(/static/images/buttons/btn-smallgray-span.gif) left no-repeat;
}
.btn-smallgray:hover {
	background: url(/static/images/buttons/btn-smallgray-hover.gif) right no-repeat; 
}
.btn-smallgray:hover span {
	background: url(/static/images/buttons/btn-smallgray-span-hover.gif) left no-repeat; 
}