/* Colors
============================================================= */

/*
	For reference, all colors used have been given a class.
	Some colors have been given an alias noted by an additional selector.
	
	By default colors (text) are auto assumed to have a hover.
	Applying a no-hover class will disable the hover.
	
	By default background-colors (bg) are auto assumed to not have a hover.
	Applying a hover class will enable the hover.

	All colors should have the following selectors
	.color-text-xxxx
	.color-text-xxxx:not(.no-hover):hover
	.color-bg-xxxx
	.color-bg-xxxx.hover:hover
*/

/* White
----------------------------- */

.color-text-white {
	color: #ffffff;
}

.color-text-white:not(.no-hover):hover {
	color: #ffffff;
}

.color-bg-white {
	background-color: #ffffff;
}

.color-bg-white.hover:hover {
	background-color: #ffffff;
}

/* Black
----------------------------- */

.color-text-black {
	color: #000000;
}

.color-text-black:not(.no-hover):hover {
	color: #000000;
}

.color-bg-black {
	background-color: #000000;
}

.color-bg-black.hover:hover {
	background-color: #000000;
}

/* Dark
----------------------------- */

.color-text-dark-1 {
	color: #242d39;
}

.color-text-dark-1:not(.no-hover):hover {
	color: #242d39;
}

.color-bg-dark-1 {
	background-color: #242d39;
}

.color-bg-dark-1.hover:hover {
	background-color: #242d39;
}

/* Gray 1
----------------------------- */

.color-text-gray-1 {
	color: #6E7881;
}

.color-text-gray-1:not(.no-hover):hover {
	color: #6E7881;
}

.color-bg-gray-1 {
	background-color: #6E7881;
}

.color-bg-gray-1.hover:hover {
	background-color: #6E7881;
}

/* Gray 2
----------------------------- */

.color-text-gray-2 {
	color: #ececec;
}

.color-text-gray-2:not(.no-hover):hover {
	color: #ececec;
}

.color-bg-gray-2 {
	background-color: #ececec;
}

.color-bg-gray-2.hover:hover {
	background-color: #ececec;
}

/* Gray 3
----------------------------- */

.color-text-gray-3 {
	color: #212121;
}

.color-text-gray-3:not(.no-hover):hover {
	color: #212121;
}

.color-bg-gray-3 {
	background-color: #212121;
}

.color-bg-gray-3.hover:hover {
	background-color: #212121;
}

/* Gray 4
----------------------------- */

.color-text-gray-4 {
	color: #caccd2;
}

.color-text-gray-4:not(.no-hover):hover {
	color: #caccd2;
}

.color-bg-gray-4 {
	background-color: #caccd2;
}

.color-bg-gray-4.hover:hover {
	background-color: #caccd2;
}

/* Teal 1
----------------------------- */

.color-text-teal-1 {
	color: #3F808A; 
}

.color-text-teal-1:not(.no-hover):hover {
	color: #3F808A;
}

.color-bg-teal-1 {
	background-color: #3F808A; /* UT Official */
}

.color-bg-teal-1.hover:hover {
	background-color: #3F808A;
}

/* Teal 2
----------------------------- */

.color-text-teal-2,
.color-text-teal {
	color:#3F808A; 
}

.color-text-teal-2:not(.no-hover):hover,
.color-text-teal:not(.no-hover):hover {
	color: #00808b;
}

.color-bg-teal-2,
.color-bg-teal {
	background-color: #3F808A; /* Web Accessible teal, also alias "teal" */
}

.color-bg-teal-2.hover:hover,
.color-bg-teal.hover:hover {
	background-color: #00808b;
}

/* Blue 1 / Cerulean Blue
----------------------------- */

.color-text-blue-1,
.color-text-cerulean-blue {
	color: #005f86;
}

.color-text-blue-1:not(.no-hover):hover,
.color-text-cerulean-blue:not(.no-hover):hover {
	color: #00466b;
}

.color-bg-blue-1,
.color-bg-cerulean-blue {
	background-color: #005f86;
}

.color-bg-blue-1.hover:hover,
.color-bg-cerulean-blue.hover:hover {
	background-color: #00466b;
}

/* Blue 2 / Navy Blue
----------------------------- */

.color-text-blue-2,
.color-text-navy-blue {
	color: #04152a;
}

.color-text-blue-2:not(.no-hover):hover,
.color-text-navy-blue:not(.no-hover):hover {
	color: #030e1d;
}

.color-bg-blue-2,
.color-bg-navy-blue {
	background-color: #04152a;
}

.color-bg-blue-2.hover:hover,
.color-bg-navy-blue.hover:hover {
	background-color: #030e1d;
}

/* Orange 1 / Burnt Orange
----------------------------- */

.color-text-orange-1,
.color-text-burnt-orange {
	color: #bf5700;
}

.color-text-orange-1:not(.no-hover):hover,
.color-text-burnt-orange:not(.no-hover):hover {
	color: #ac4e00;
}

.color-bg-orange-1,
.color-bg-burnt-orange {
	background-color: #bf5700;
}

.color-bg-orange-1.hover:hover,
.color-bg-burnt-orange.hover:hover {
	background-color: #ac4e00;
}

/* Slate
----------------------------- */

.color-text-slate {
	color: #626D75;
}

.color-text-slate:not(.no-hover):hover {
	color: #4f5465;
}

.color-bg-slate {
	background-color: #626D75;
}

.color-bg-slate.hover:hover {
	background-color: #4f5465;
}