/********************************************
SETUP AND RESET RULES
********************************************/
html, body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	width: 100%;
	height: 100%;
}

h1, h2, h3, section, nav, form, div, fieldset, ul, ol {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: none;
}

table, td, th {
	margin: 0;
	padding: 0;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
	vertical-align: top;
}

/********************************************
PAGE LAYOUT
********************************************/
.table {
	display: table;
	width: 100%;
	height: 100%;
}

.tr {
	display: table-row;
}

.td {
	display: table-cell;
}

.navbar {
	height: 1px; /* will stretch */
	background-color: #173d85;
	vertical-align: middle;
	padding: 10px 20px 10px 20px;
}

#bottomNavBar.navbar {
	padding-top: 25px;
	padding-bottom: 25px;
}

.column, .single-column {
	display: inline-block;
	width: 50%;
	height: auto; /* reset via JavaScript */
	vertical-align: top;
	position: relative;
}

.single-column {
	width: 100%;
	vertical-align: top;
}

.column > *, .single-column > * {
	background-color: rgba(255, 255, 255, 0.8);
	overflow: auto;
	display: block;
	width: 90%;
	height: 80%;
	border: solid 2px #999;
	border-radius: 20px;

	/* align at top and centered horizontally
	 and then use JavaScript to reset vertical position */
	position: absolute;
	top: 0; /* reset via JavaScript */
	right: 0;
	left: 0;
	margin: auto;
}

.single-column > * {
	/* align verticaly in center */
	top: 0;
	bottom: 0;
	margin: auto;
	height: 90%;
}

#directory_table_rounded_corners {
	overflow: hidden;
}

#directory_table_container {
	/*overflow: auto;*/
	overflow-y: auto;
	overflow-x: hidden;
	width: auto;
	height: 100%; /* height reset via javascript to account for department filter controls above this element */
}

.fht-tbody {
	/* remove horizontal scroll bar that appears when #directory_table_container's height is reset via JavaScript */
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

#directory_table_rounded_corners {
	position: relative;
}

#directoryTableLoadingMessage, #departmentLoadingMessage, #eventsListLoadingMessage {
	font-size: 46px;
	color: #444;
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	text-align: center;
	width: 100%;
}

#contentContainer {
	/* background image changed via JavaScript by changing class of contentContainer */
}

#contentContainer.backgroundWithText {
	background: #000 url(/aoss-building-directory/images/page-layout/background-with-title.jpg) no-repeat;
	background-size: 100% 100%;
}

#contentContainer.backgroundWithNoText {
	background: #000 url(/aoss-building-directory/images/page-layout/background.jpg) no-repeat;
	background-size: 100% 100%;
}

#topNavBar {
	position: relative;
}

/*------------ Current time and Questions text: BEGIN --------------*/
#current_datetime {
	font-size: 16px;
	color: #CCC;
	position: absolute;
	right: 10px;
	bottom: 10px;
}

#bottomNavBarContainer {
	position: relative;
}

/*------------ Current time and Questions text: END --------------*/

/***************************************************
FONTS
***************************************************/
button, input {
	font-size: 26px !important;
	height: 55px !important;
	border-radius: 5px !important;
	vertical-align: middle !important;
}

#bottomNavBar button {
	font-size: 32px !important;
	height: 61px !important;
	background-color: #798db5 !important;
	background-image: none !important;
	color: white;
	border-color: #265582;
}

#bottomNavBar button .ui-button-text {
	line-height: 61px;
	margin: 0 !important;
	padding: 0 0.4em 0 0.4em !important;
	position: relative;
	top: -3px;
}

.navbar a button {
	color: #06C;
}

.department-list button {
	font-size: 18px !important;
	height: 47px !important;
}

.nameHighlightOuter {
	color: #888;
}

.nameHighlight {
	/*
	background-color: #fffecc !important;
	display: inline-block;
	border-bottom: solid 1px #999;
	*/
	color: #000 !important;
}

/******************************************************
DIRECTORY LIST VIEW
*******************************************************/

#directory-list-controls.column > form {
	/*
	make keyboard container only tall enough
	to fit it's contents and then set it's
	position so that it's top is aligned with
	the directory list table that is next to it.
	Do this via JavaScript.
	*/
	bottom: auto;
	display: table;
	height: 1px;
	overflow: hidden;
}

#directory-list-controls.column #search_box_container {
	text-align: center;
	padding: 10px 0;
	border-bottom: solid 1px #ccc;
}

#search_box_container input {
	width: 60%;
}

.ui-keyboard-input-current {
	box-shadow: none !important;
}

#directory_table_container table {
	width: 100%;
	font-size: 18px;
}

#directory_table_container table tr:nth-child(even) > * {
	background-color: rgba(213, 221, 237, 0.8);
}

#directory_table_container table tr > * {
	padding: 15px;
	border: solid 1px #aaa;
	border-right: none;
	border-top: none;
	background-color: rgba(255, 255, 255, 0.8);
	vertical-align: middle;
	text-align: left;
}

#directory_table_container thead th, #search_box_container {
	background-image: none !important;
	background-color: rgba(23, 61, 133, 0.5) !important;
}

#directory_table_container table {
	border-top: solid 1px #aaa;
}

#table_filter_controls {
	text-align: left;
	font-size: 24px;
	padding: 0; /*5px 20px 5px 5px;*/
	overflow: hidden;
	white-space: nowrap;
	background-color: rgba(199, 199, 199, 1);
}

#dep_filter, #dep_filter_set_1, #dep_filter_set_2 {
	margin: 0 !important;
	width: 100%;
}

#table_filter_controls #dep_filter_set_1 .ui-button {
	width: 25%;
}

/* IMPROVE - use flex box or something else so that i don't have to put in a special
rule for just one button */
#table_filter_controls #dep_filter_set_2 .ui-button {
	width: 23%;
}

#table_filter_controls #dep_filter_set_2 .ui-button[for=climatology] {
	width: 31%;
}

/* IMPROVE - THIS IS KIND OF A HACK */
#table_filter_controls #dep_filter_set_2 .ui-button[for=climatology] .ui-button-text {
	font-size: 14px;
	height: 39px;
	padding-top: 0.7em;
	font-weight: bold;
}

#table_filter_controls .ui-button {
	border-radius: 0 !important;
}

/***************************************************
REMOVE WHITE SPACE THAT CAUSES PROBLEMS
***************************************************/
body, #topNavBar {
	font-size: 0;
}

.content {
	font-size: 14px;
}

/***************************************************
KEYBOARD
***************************************************/
#keyboard_container .ui-keyboard.ui-widget-content {
	background-color: transparent !important;
	background-image: none;
	border: none;
}

#keyboard_container {
	/*background-color: #ddd;*/
	position: relative;
	overflow: hidden;
}

#keyboard_container .ui-keyboard {
	top: 0 !important;
	left: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.ui-keyboard-button {
	font-size: 1.8em;
	/*
	padding-top: .5em;
	padding-bottom: .5em;
	*/
	padding: 5px 10px 5px 10px !important;
	height: auto !important;
	border: solid 1px #aaa !important;
}

.ui-keyboard-spacer {
	background: transparent !important;
	border: none !important;
}

.ui-keyboard-spacer {
	vertical-align: middle;
	min-height: 0 !important;
}

/***************************************************
DEPARTMENTS VIEW
***************************************************/
.deparments-list-container.column {
	width: 100%;
	vertical-align: top;
}

.deparments-list-container.column > * {
	background-color: rgba(255, 255, 255, 0.9);
}

.deparments-list-container.column > * {
	/* align verticaly in center */
	top: 0;
	bottom: 0;
	margin: auto;
	height: 90%;
}

table.department-list {
	margin: 0;
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	border: none;
}

table.department-list td {
	vertical-align: top;
	text-align: left;
	padding: 20px;
	clear: both;
}

table.department-list td {
	background-color: rgba(255, 248, 235, 0.8);
	border: solid 1px #e5dfd3;
	width: 50%;
}

.department-list h2 {
	font-size: 18px;
}

.department-list .logo_container {
	width: 80px;
	text-align: right;
	vertical-align: top;
	display: table-cell;
	padding-right: 10px;
}

.department-list .dep_info {
	display: table-cell;
	vertical-align: top;
}

.department-list .dep_description {
	font-size: 16px;
}

.department-list button {
	float: right;
}

/***************************************************
EVENTS LIST VIEW
***************************************************/
/* IMPROVE: simplify selectors */

#events-list-view .content {
	font-size: 16px;
}

#events-list-view h2 {
	text-align: center;
}

#events-list-view.single-column > * {
	max-width: 1500px;
	overflow: hidden;
}

#events-list-view.single-column > * {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 0;
}

table#events-list-two-column-table {
	width: 100%;
	height: 100%;
}

table#events-list-two-column-table thead th[colspan='2'] {
	background-color: rgba(255, 248, 235, 0.8);
	padding-top: 15px;
	padding-bottom: 15px;
	vertical-align: middle;
	border-bottom: solid 1px #ccc;
}

td#events-list-left-column {
	width: 80%;
	padding: 0;
	border-right: solid 2px #bbb;
}

td#events-list-right-column {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
}

#events-list-left-column > * > table {
	width: 100%;
}

#events-list-left-column > * > table tr > * {
	vertical-align: top;
	text-align: left;
	padding: 10px;
}

#events-list-left-column > * > table tr:nth-child(even) > * {
	background-color: rgba(213, 221, 237, 0.8);
}

#events-list-left-column > * > table tbody tr > td:first-child {
	text-align: right;
}

#events-list-left-column > * > table tbody tr > td:first-child + td {
	text-align: left;
}

#events-list-left-column > * > table thead th {
	background-color: rgba(23, 61, 133, 0.5);
	font-size: 1.2em;
}

#events-list-left-column button {
	font-size: 14px !important;
	height: auto !important;
}

td.no_events {
	font-weight: bold;
	text-align: center !important;
	padding-top: 2em !important;
	padding-bottom: 2em !important;
}

.event-title {
	margin-bottom: 10px;
	font-weight: bold;
}

.event-subtitle {
	font-weight: normal;
	font-style: italic;
}

.event-presenter strong {
	color: #444;
}

/*---------- for events-list-inner-container resizing: BEGIN -----------*/
#events-list-inner-container {
	height: 1px;
	/*height reset via javascript*/
	overflow-y: auto;
	position: relative;
}

#events-list-inner-container > table {
	display: none;
}

#events-list-two-column-table > thead th {
	height: 1px;
}

#events_filter .ui-button {
	display: block !important;
	margin-bottom: 20px;
}

/*---------- for events-list-inner-container resizing: END --------------*/

/***************************************************
EVENT DESCRIPTION VIEW
***************************************************/
/* IMPROVE: simplify selectors */

#event-description-view .content {
	font-size: 16px;
}

#event-description-view h2 {
	text-align: center;
}

#event-description-view.single-column > * {
	max-width: 1500px;
	overflow: hidden;
}

#event-description-view.single-column > * {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 0;
}

table#event-description-two-column-table {
	width: 100%;
	height: 100%;
}

table#event-description-two-column-table thead th[colspan='2'] {
	background-color: rgba(255, 248, 235, 0.8);
	padding-top: 15px;
	padding-bottom: 15px;
	vertical-align: middle;
	border-bottom: solid 1px #ccc;
}

td#event-description-left-column {
	width: 55%;
	padding: 0;
	border-right: solid 2px #bbb;
}

td#event-description-right-column {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
}

#event-description-left-column > * > table {
	width: 100%;
}

#event-description-left-column > * > table tr > * {
	vertical-align: middle;
	text-align: left;
	padding: 10px;
}

#event-description-left-column > * > table tr:nth-child(even) > * {
	background-color: rgba(213, 221, 237, 0.8);
}

#event-description-left-column > * > table tbody tr > td:first-child {
	text-align: right;
}

#event-description-left-column > * > table tbody tr > td:first-child + td {
	text-align: left;
}

#event-description-left-column > * > table thead th {
	background-color: rgba(23, 61, 133, 0.5);
	font-size: 1.2em;
}

#event-description-left-column button, td#event-back-button-container input {
	font-size: 16px !important;
	height: auto !important;
}

td#event-back-button-container {
	text-align: left !important;
}

#event_poster {
	display: none;
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;
}

.logo_placeholder {
	cursor: auto !important;
	max-width: 400px !important;
}

#poster_container {
	font-size: 0;
}

#poster_container, #poster_container div {
	text-align: center;
}
#poster_container div {
	margin-top: 10px;
	margin-bottom: 10px;
}

#poster_container div button {
	font-size: 18px !important;
	height: auto !important;
}

#poster_background {
	position: absolute;
	z-index: 1000000;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: black;
}

#poster_background > * {
	position: absolute;
}

#poster_background > img {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
	max-width: 90%;
	max-height: 90%;
}

#poster_background > #poster_close_button {
	top: 10px;
	right: 10px;
	font-size: 20px !important;
	transition: background-color 0.2s ease-in 0s;
	border-radius: 50% !important;
	background-clip: padding-box !important;
	padding: 0 !important;
	border: medium none !important;
	background-color: #666 !important;
	width: 32px !important;
	height: 32px !important;
	cursor: pointer;
}

/*---------- for event-description-inner-container resizing: BEGIN -----------*/
#event-description-inner-container {
	height: 1px;
	/*height reset via javascript*/
	overflow-y: auto;
	position: relative;
}

#event-description-inner-container > table {
	display: none;
}

#event-description-two-column-table > thead th {
	height: 1px;
}

/*---------- for event-description-inner-container resizing: END --------------*/

/***************************************************
DOCUMENTATION VIEW
***************************************************/
#doc-view.single-column > * {
	max-width: 1500px;
	background-color: white !important;
}

#doc-view > .content {
	padding: 15px;
}

#doc-view h2 {
	text-align: center;
	margin-bottom: 1em;
}

#doc-view h3, #doc-view h4 {
	padding: 5px;
}

#doc-view h3 {
	background: rgba(23, 61, 133, 0.5);
}

#doc-view h4 {
	background: rgba(213, 221, 237, 0.8);
}

/***************************************************
MISC RULES
***************************************************/
#bottomNavBar button {
	margin-right: 20px;
}

.current_view_button {
	color: #000 !important;
}

/*jQuery UI's button() function applies .ui-state-active class to buttons when they are clicked*/
#bottomNavBar button:active, #bottomNavBar button.ui-state-active,
.department-list-container button:active, .department-list-container button.ui-button:active,
.department-list-container button.ui-state-active, button.ui-state-active, .key_press, label.ui-state-active {
	background-color: white !important;
	background-image: none !important;
	color: #550000 !important;
}

#dep_filter label.ui-state-active {
	/*text-decoration: underline;*/
	font-weight: bold;
}

#screensaver {
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
	position: absolute;
	height: 0; /*changed via JavaScript */
}

.nowrap {
	white-space: nowrap;
}

.nice_list {
	margin-left: 1.5em;
}
.nice_list li {
	margin-bottom: 1em;
}