/*
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

GENERIC, UNIVERSALLY USEFUL STYLES

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ TEXT
@ COLOR-CLASSES (DEPRECATED)
@ GENERIC TABLE STYLES
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
*/

.newsfeedBlogEntry {
    background-color: lightblue;
    padding: .1em 1em;
    max-width: 640px;
}

.newsfeedBlogEntry h3 {
    margin: 10px 0;
}

.newsfeedBlogEntry h6 {
    margin: 5px 0 -25px 0;
}

.basicExternalBox {
    max-width: 400px;
    margin: 5em auto;
}

.symfonyLoginHolder {
    background-color: var(--color-blue-light);
    padding: 1em;
}

.symfonyLoginHolder input[type=text],
.symfonyLoginHolder input[type=password] {
    width: 100%;
}

.symfonyLoginHolder h3 {
    margin-top: 0;
}
/*
==================================
GENERIC TEXT STYLES
===================================
*/

html {
	height:100%;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.4em;
	background: var(--page-background) url("/img/gradientborderwide.png") top center repeat-y;
}

body {
	height:100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: normal;
}

h1 {
	color: var(--heading-color);
	font-size: 30px;
	line-height:36px;
	margin: 0 0 .8em 0;
}

h2 {
	font-size:26px;
	margin-top: 24px;
	color: #595959;
}

h3 {
	font-size:22px;
	margin-top: 35px;
	color: var(--color-grey-darker);
}

h4 {
	font-size: 18px;
	color: var(--color-grey-darker);
	margin-bottom:5px;
}

dt {
	color: var(--color-grey-darker);
	font-weight: 800;
	margin-bottom:2px;
}

dd {
	margin-bottom: 17px;
}

.inlinetitle {
	font-weight: bold;
}

.biggerize {
	font-size: 120%;
	line-height: 120%;
}

/* VALIDATION STYLES */
.error { 
	float: none; 
	color: red; 
	padding-left: .5em; 
}

.logerror,
.login-error {
	color: #8C0000;
	font-style: italic;
}

/* JQUERY VISIBILITY HACKS */
.invisible {
	display: none;
}

.visible {
	display: inline;
}

.deemphasize {
	color: #666;
}

.fakelink, a {
	text-decoration: none;
	color: #009BC8;
}

.fakelink:hover, a:hover {
	color: var(--color-gold);
}

.fakelink {
	cursor: pointer;
}

.quotation {
	font-family: var(--font-georgia);
	font-size: 150%;
	margin: 0;
	line-height: 1.4em;
}

.highlighted {
	background-color: var(--color-yellow);
}

.similarsessions .highlighted {
	background-color: inherit;
	color: var(--color-yellow);
}

.totalminutes {
	color: var(--color-gold);
	font-weight: 600;
}

.emphasize {
	color: #990055;
}

.small {
	font-size: .8em;
}

.nomargins {
	margin:0;
}

.nopadding {
	padding:0;
}

.givespace li { /* This is for ol and ul li elements that look better without mushing together */
	margin-bottom:1em;
}

.indentedlist {
	list-style-type: none;
	margin: 0 0 0 1.5em;
	padding: 0;
}

.indent {
	margin-left: 2em;
}

.center {
	text-align: center;
	margin: 0 auto;
}

/*
==================================
COLUMNS
===================================
*/

/* Remember to clear floats after */
.half-column {
	float: left;
	width: 44%;
	padding: 0 3% 3% 3%;
	min-width: 200px;
}

/*
==================================
COLOR PALETTE CLASSES
===================================
*/

.whitebg {
	background-color: var(--color-white);
}

.bluebg {
	background-color: var(--color-blue-light);
}

.purplebg {
	background-color: var(--color-purple-light);
}

.yellowbg {
	background-color: var(--color-yellow-pale);
}

.greenbg {
	background-color: var(--color-green-light);
}

.redbg {
	background-color: var(--color-pink);
}

.greybg {
	background-color: var(--color-grey-light);
}

.bluedark {
	color: var(--color-blue);
}

.whitedark {
	color: var(--color-white);
}

.bluedark a, .purpledark a, .bluedark.fakelink, .purpledark.fakelink {
	color: var(--color-yellow);
}

.bluebg a, .purplebg a, .bluebg.fakelink, .purplebg.fakelink, .hold-together a, .hold-together.fakelink {
	color: var(--color-blue);
}

form.whitedark, div.whitedark, th.whitedark, tr.whitedark td, td.whitedark {
	color: #333;
	background-color: var(--color-white);
}

form.bluedark, div.bluedark, th.bluedark, tr.bluedark td, td.bluedark {
	color: var(--color-white);
	background-color: var(--color-blue);
}

form.blueonwhite, div.blueonwhite, th.blueonwhite, tr.blueonwhite td, td.blueonwhite {
	color: var(--color-blue);
	background-color: var(--color-white);
}

.yellowdark {
	color: var(--color-yellow);
}

form.yellowdark, div.yellowdark, th.yellowdark, tr.yellowdark td, td.yellowdark {
	color: var(--color-white);
	background-color: var(--color-yellow);
}

.purpledark {
	color: var(--color-purple);
}

form.purpledark, div.purpledark, th.purpledark, tr.purpledark td, td.purpledark {
	color: var(--color-white);
	background-color: var(--color-purple);
}

.reddark {
	color: var(--color-red);
}

form.reddark, div.reddark, th.reddark, tr.reddark td, td.reddark {
	color: var(--color-white);
	background-color: var(--color-red);
}

.greendark {
	color: #22C84C;
}

form.greendark, div.greendark, th.greendark, tr.greendark td, td.greendark {
	color: var(--color-white);
	background-color: #22C84C;
}

.greydark {
	color: var(--color-grey-dark);
}

form.greydark, div.greydark, th.greydark, tr.greydark td, td.greydark {
	color: var(--color-white);
	background-color: var(--color-grey-dark);
}

.purpleselect td {
	color: var(--color-white);
	background: var(--color-purple);
}

.blueselect td {
	color: var(--color-white);
	background: var(--color-blue);
}

/*
==================================
TABLE SPECIFIC STYLES
===================================
*/

.floating-table-container {
	width: 100%;
	overflow-x: auto;
}

.floating-table-container .header-row {

}

table {
	border-collapse: collapse;
}

th {
	background-color: var(--color-blue);
	color: var(--color-white); /* was #333 */
	vertical-align: bottom;
	padding: .5em;
	font-weight: 400;
	text-align: left;
}

tr {
	background: var(--color-blue-light);
}

.oddrow {
	background-color: var(--color-blue-light);
}

.evenrow {
	background-color: var(--color-yellow-pale);
}

td {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	border: 0;
	color: #222; 
	margin: 0;
	padding: .4em;
	line-height: 1.1em;
	vertical-align:text-top;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
}