/* 
	Multiclass CSS
	
	Generally used for creating a quick variant of a specific style.
	Also used in the case where certain HTML attributes are deprecated, such as "align", 
	and not included in JSF HTML Render Kit.

	Use of multiclass per element does not follow W3C standards, but is supported by current browsers.
	
	Read the following before declaring new class!
	===============================================================
	Make sure new class serves its purpose and only its purpose.
	For example, a class of black font should be:
	
	.black {
		color: #000000;
	}
	
	NOT
	
	.black {
		font-family: verdana, arial, helvetica, sans-serif;
	    font-size: 12px;
		color: #000000;
	}
	
	which overdefine attributes.
	
	----
	Naming Convention:
	- All lowercase;
	- Connect parts with "-" (e.g. min-width)
	
	Example: class="medium bold black"
	
	@TODO Remove deprecated class
	===============================================================
*/ /* Font Size */
.small { font-size: 10px; }

.medium { font-size: 12px; }

.large { font-size: 15px; }

.larger { font-size: 18px; }

.x_large { font-size: 22px; }

/* Font Weight/Style/Decoration */
.bold {
	font-weight: bold;
}

.regular {
	font-weight: normal;
	font-style: normal;
}

.italic {
	font-style: italic;
}

/* Text Colors */
.white {
	color: white;
}

.black {
	color: #000000;
}

.gray {
	color: gray;
}

.red {
	color: #ff0000;
}

.blue {
	color: #0052a4;
}

/* Alignment */
/* encouraging class used for table alignment since align attribute on <table> is deprecated  */
.center-by-margin, .cbm{
	margin-left: auto;
	margin-right: auto;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.top {
	vertical-align: top;
}

.bottom {
	vertical-align: bottom;
}

.middle {
	vertical-align: middle;
}

/* Background Colors */ /* Used in dataTable Row as odd row class */
.fadedBlue { /* Deprecated, use .faded-blue-bg */
	background-color: #d1eefc;
}

/* Width */
.width-100px {
	width: 100px;
}

.min-width {
	width: 0%;
}

.max-width {
	width: 100%;
}

.width-33pc {
	width: 33%;
}

.width-50pc {
	width: 50%;
}

.width-20px {
	width: 20px;
}

.width-30px {
	width: 30px;
}

.width-40px {
	width: 40px;
}

.width-50px {
	width: 50px;
}

.width-60px {
	width: 60px;
}

.width-70px {
	width: 70px;
}

.width-80px {
	width: 80px;
}

.width-90px {
	width: 90px;
}

.width-100px {
	width: 100px;
}

.width-120px {
	width: 120px;
}

.width-10pc {
	width: 10%;
}

.width-20pc {
	width: 20%;
}

.width-30pc {
	width: 30%;
}

.width-40pc {
	width: 40%;
}

.width-60pc {
	width: 60%;
}

.width-70pc {
	width: 70%;
}

.width-80pc {
	width: 80%;
}

.width-90pc {
	width: 90%;
}

.width-100pc {
	width: 100%;
}

.width-67pc {
	width: 67%;
}

/* deprecated, use width-50pc */
.balanced-2-columns {
	width: 50%;
}

.nowrap {
	white-space: nowrap;
}

/* Borders used around tables, e.g. dataTable, panelGrid */
.black-border {
	border: 1px solid black;
}

.gray-border {
	border: 1px solid gray;
}

/* Background colors */
.white-bg {
	background-color: white;
}

.blue-bg {
	background-color: #3481c4;
}

.faded-blue-bg {
	background-color: #d1eefc;
}

.faded-purple-bg {
	background-color: #e9e9ff;
}

.grey-bg {
	background-color: #DDDDDD;
}

/* Table attributes */
.fixed-table {
	table-layout: fixed;
}
.scrollable {
	overflow: scroll;
}
.details {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}