/***************************************************************************************
PAGE LAYOUT
***************************************************************************************/
body, html {
	/*background-color: #aaa;*/
	background-color: #f3f3f3;	
	color: #111;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	width: auto;
	height: 100%;
}
/*****
DEBUG - make main_container 100% of browser window and records_list and map 
fill the vertical height so that there is no scrolling of the web page, only
the #record_list
*****/
#centralColumn {
	width: 900px;
	margin: 0 auto 0 auto;
}
#main_container {
	width: auto;
	margin: 0;
	/******
	background-color: #f3f3f3;
	border: solid 1px #999;
	border-top: none;
	******/
}

#banner {
	/*140 x 103*/
	/*background-color: #377bbb;*/

	background-color: rgb(23, 61, 133);
	background-image: linear-gradient(bottom, rgb(23,61,133) 1%, rgb(76,103,153) 74%);
	background-image: -o-linear-gradient(bottom, rgb(23,61,133) 1%, rgb(76,103,153) 74%);
	background-image: -moz-linear-gradient(bottom, rgb(23,61,133) 1%, rgb(76,103,153) 74%);
	background-image: -webkit-linear-gradient(bottom, rgb(23,61,133) 1%, rgb(76,103,153) 74%);
	background-image: -ms-linear-gradient(bottom, rgb(23,61,133) 1%, rgb(76,103,153) 74%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.01, rgb(23,61,133)),
		color-stop(0.74, rgb(76,103,153))
	);



	height: 80px;
	line-height: 80px;
	/*padding-left: 100px;	*/
	padding-top: 20px;
}
#banner h1 {
	background-image: url(../images/ssec_logo.png); 
	background-repeat: no-repeat;
	background-position: 5px center;
	background-size: 82px 60px;
	width: 800px;	
	color: white;
	margin: 0 auto 0 auto;
	padding: 0;
	padding-left: 100px;
	font-size: 40px;
}
.horizontal_list {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
	padding-left: 5px;
}
.horizontal_list li {
	margin: 0;
	padding: 0;
	display: inline-block;
}
.horizontal_list li a {
	text-decoration: none;
	font-weight: bold;
}
#breadcrumb_trail {
	/*background-color: #173d85;*/
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	/*border-bottom: solid 1px #88a8e3;*/
	position: absolute;
	top: 0;
	left: 0;
}
#breadcrumb_trail, #breadcrumb_trail a {
	color: white;
}
#breadcrumb_trail li:before {
	content: "/\00a0";
}
#breadcrumb_trail > li:last-child:after {
	content: "\00a0/";	
}
#navbar {
	background-color: #ffefcf; /*#fffaf0;*/
	border: solid 1px #bd5b2a;
	border-left: none;
	border-right: none;
	font-size: 14px;
	height: 20px;
	line-height: 20px;
}
#navbar li {
	margin-right: 1.5em;
}

/***************************************************************************************
CONTROLS 
***************************************************************************************/
#controls {
	/***
	background-color: #ccc;
	****/
}
#controls .control_line {
	padding: 5px;
	/***
	border-bottom: solid 1px #999;	
	****/
}
#controls #nav_controls {
	/****
	background-color: #eee;
	***/
}
#controls #nav_controls {
	text-align: right;
}
#controls #nav_controls #view_controls {
	float: left;
}
#controls #nav_controls #pagination_controls {
	/*
	display: inline-block;
	*/
	display: block;
	text-align: center;
}
#controls input[type=button] {
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
#controls .control_line .control_set {
	margin-left: 1em;
}
#controls .control_line > .control_set:first-child {
	margin-left: 0;
}
#controls, #controls input {
	font-size: 12px;
}
#controls label {
	background-color: transparent !important;
}
#controls *[disabled=disabled] {
	color: #aaa !important;
}

/***************************************************************************************
BOTTOM PANEL RECORD LIST VIEW
***************************************************************************************/
/* DEBUG maybe rename #top_panel to #record_summary and #bottom_panel 
to #record_list (and then rename record_list button/view/controller ... 
to something else like records_table*/
#bottom_panel {
	margin-bottom: 15px;
	clear: both;
}

/***************************************************************************************
RECORD SUMMARY
***************************************************************************************/
#record_summary_container {
	display: block;
	clear: both; 
	background-color: #72aba5;
	border: solid 1px #999;
	border-left: none;
	border-right: none;
	padding: 0;
	margin-bottom: 2px;	
	position: relative;	
}

.record_summary {
	font-size: 0;
	background-color: transparent;
}

.record_summary .recordSlideshowButton {
	position: absolute;
	z-index: 99999;
	background-image: url(../js/fancyapps-fancyBox-0ffc358/source/fancybox_sprite.png);
	background-repeat: no-repeat;
	display: block;
	width: 36px;
	height: 36px;
	top: 50%;	
	margin-top: -18px;
	font-size: 14px;
	opacity: 0.3;
	cursor: pointer;
}
.record_summary .recordSlideshowButton:hover {
	opacity: 1.0;
}
.record_summary #prevRecordButton {
	left: 15px;
	background-position: 0 -36px;
	
}
.record_summary #nextRecordButton {
	right: 15px;
	background-position: 0 -72px;	
}


.record_summary .record_summary_inner_container {
	padding: 0 15px 0 15px;
}

.record_summary .properties {
	font-size: 14px;
	border: solid 1px #ccc;	
	border-left: none;
	border-top: none;
	margin-bottom: 15px;
	width: 365px; /* DEBUG - this is a hack - find a better way */
}
.record_summary .properties .record_property .record_label {
	border: solid 1px #ccc;	
	border-right: none;
	border-bottom: none;
	background-color: #aaa;
	text-align: left;
	padding: 5px 15px 5px 5px;
	white-space: nowrap;
}
.record_summary .properties .record_property .record_value {
	border: solid 1px #ccc;	
	border-right: none;
	border-bottom: none;
	background-color: #eee;	
	text-align: left;	
	padding: 5px 15px 5px 15px;
	white-space: nowrap;	
}
.record_summary .properties > .record_property:nth-child(even) .record_value {
	background-color: white;
}

.record_summary .thumbnails_container {
	width: 1px;
	white-space: nowrap;
}
.record_summary .thumbnails_container .thumbnail {
	height: 175px !important;
	width: 117px !important;
	background-size: 100% 100%;
	margin-right: 0px;
	border: solid 1px #ccc;
}
.record_summary .thumbnails_container > div {
	margin-right: 5px;
	display: inline-block;	
}
.record_summary .thumbnails_container > div:last-child {
	margin-right: 0;
}
.caption {
	font-size: 12px; 
	display:block; 
	text-align: center;
}

.record_summary #record_location_static_map {
	/* width and height specified via image src */
	float: right; 
}

#record_summary_header {
	padding: 5px 5px 0 0;
	text-align: right;
	/*DEBUG background-color: #bd5b2a;*/
	margin-bottom: 10px;
}

#record_summary_header #closeRecordSummaryButton {
}

#record_summary_header h3 {
	float: left; 
	font-size: 14px; 
	margin: 5px; 
	color: white;
}
#record_summary_footer {
	clear: both;
	padding: 10px 0px 15px 10px;
	font-size: 14px;
	text-align: right;
	font-weight: bold;
}

#record_summary_footer a {
	text-decoration: none;
}

/***************************************************************************************
RECORD VIEW 
***************************************************************************************/

#record_view {
	padding: 15px;
	padding-bottom: 0px !important;
}
#record_view h2 {
	font-size: 20px;
	margin-top: 0;
}

/***************************************************************************************
MISC
***************************************************************************************/

#records_being_displayed_info {
	text-align: center;
	font-size: 12px;
	font-style: italic;
	padding: 5px;
}

.table {
	display: table;
}
.table .tr {
	display: table-row;	
}
.table .th, .table .td {
	display: table-cell;
}
.table .th {
	font-weight: bold;
}

.loadingMessage, .errorMessage {
	text-align: center;
	padding: 60px;
}
.record_thumbnail {
	position: relative !important;
}
.record_thumbnail .loadingMessage {
	padding: 0;
	position: absolute;
	background-color: rgba(50, 50, 50, 0.8);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.record_thumbnail .loadingMessage img {
	margin-top: 40px;
}
.errorMessage {
	color: red;
	font-weight: bold;
}
.thumbnail {
	display: inline-block;
	background-color: #666;
	border: none;
	background-repeat: no-repeat;
}

.no_underline {
	text-decoration: none;
}


/******* SKY AND GROUND TYPE ICONS: BEGIN ******************/
.record_summary .sky_type_container > img, .record_summary .ground_type_container > img {
	vertical-align: middle;
	height: 64px;
}	
.record_summary .ground_type_0, .record_summary .ground_type_3, .record_summary .ground_type_5 {
	margin-left: 7px;
}
/******* SKY AND GROUND TYPE ICONS: END ******************/

/***************************************************************************************
JQUERY UI CUSTOMIZATION
***************************************************************************************/

.ui-widget-overlay {
	background-image: none !important;
}