/************************************************************************************************/
/*
	element selectors
	e.g.
	body {
		background-color:#d0e4fe;
	}
*/

body {
	margin: 0px;
	padding: 0px;
	background-color:#E4E4E4;
	overflow: hidden;
	height: 100%;
}

/************************************************************************************************/
/*
	id selectors
	e.g.
	#para1 {
		text-align:center;
		color:red;
	}
*/

	#header {
		background: #393442;
		padding:0px;
	}
	
	#headerRow1 {
		height:80px;
		background: #393442;
	}
	
	#headerRow2 {
		height:10px;
		background: #BA9800;
	}
	
	#headerRow3 {
		height:40px;
		background-image: linear-gradient(to bottom, #736C7F 0%, #312439 100%);
		padding-top:5px;
		padding-bottom: 0px;
		padding-right: 20px;
	}
	
	#searchbox {
		position: relative;
		float: right;
		height: 26px;
		width: 320px;
		background-image: transparent;
		border: 0px;
		padding: 3px;
		margin: 0px;
	}
	
	#filter {
		position: absolute;
		font-family:"Arial", sans-serif;
		font-size: 12px;
		border: 0px;
		padding: 0px;
		padding-left: 5px;
		padding-right: 5px;
		width: 190px;
		height: 26px;
		margin:0px;
		box-shadow: 2px 2px 2px #A0A0A0;
		border-top-left-radius: 5px 5px;
		border-bottom-left-radius: 5px 5px;
	}
	
	#year {
		position: absolute;
		font-family:"Arial", sans-serif;
		font-size: 12px;
		border: 0px;
		padding: 0px;
		padding-left: 5px;
		padding-right: 5px;
		left: 206px;
		height: 26px;
		width: 50px;
		box-shadow: 2px 2px 2px #A0A0A0;
		background-color: white;
	}
	
	#btnYear {
		position: absolute;
		left: 266px;
		height: 26px;
		width: 23px;
		background-image: url('../images/downarrow.png');
		background-repeat: no-repeat;
		cursor:pointer;
		background-color: white;
		border: 1px solid white;
		border-left: 1px solid silver;
		padding: 0px;
		margin: 0px;
		box-shadow: 2px 2px 2px #A0A0A0;
	}
	
	#btnSearch {
		position: absolute;
		left: 292px;
		height: 26px;
		width: 26px;
		background-image: url('../images/search.png');
		background-repeat: no-repeat;
		cursor:pointer;
		background-color: white;
		border: 1px solid white;
		padding: 0px;
		margin: 0px;
		box-shadow: 2px 2px 2px #A0A0A0;
		border-bottom-right-radius: 5px 5px;
		border-top-right-radius: 5px;
	}
	
	#spacer {
		height:20px;
	}

	#headerLeft {
		width: 75%;
		float:left;
	}

	#headerRight {
		width: 20%;
		height: 20px;
		float:right;
		padding:20px;
	}
	
	#btnAdd, #btnEdit, #btnDelete, #btnMap {
		font-family:"Arial", sans-serif;
		font-size:12px;
		font-weight:bold;
		width: 80px;
	}
	
	#btnSubmit, #btnDeleteOK, #btnDeleteCancel {
		font-family:"Arial", sans-serif;
		font-size:12px;
		font-weight:bold;
		width: 80px;
	}
	
	#btnGetLocation {
		font-family:"Arial", sans-serif;
		font-size:12px;
		font-weight:bold;
		width: 18px;
		height: 18px;
		margin: 2px;
	}
	
	#btnGetLocation > .ui-button-icon-primary {
		left: 0px;
	}
	
	#btnSignin, #btnRegister, #btnEmail {
		font-family:"Arial", sans-serif;
		font-size:12px;
		font-weight:bold;
	}
	
	#btnDeleteOK {
		float: left;
	}
	
	#btnDeleteCancel {
		float: right;
		margin-left: 10px;
	}
	
	#btnLogin, #btnRegister, #btnEmail {
		box-shadow: 2px 2px 2px #888888;
	}

	#content {
		margin-top: 10px;
	}
	
	#newEntry {
		padding: 10px;
	}
	
	#deleteEntry {
		text-align:center;
	}
	
	#divCenter {
		width:90%;  
		margin-left: auto;
		margin-right: auto;
	}
	
	#thumbnail {
		position:absolute;
		top:5px;
		left:250px;
		width:35px;
		height:35px;
		display: block;
		z-index: 1;
	}

	#thumbnail:hover {
		position:absolute;
		top:-100px;
		left:100px;
		width:200px;
		height:200px;
		display: block;
		z-index: 10;
		border: 1px solid #8C79A5;
		box-shadow: 10px 10px 5px #888888;
		background: white;
	}
	
	#tblTimeline {
		width: 90%;
	}
	
	#iframeUpload {
		display: none;
		border:0px;
		height:0px;
		width:0px;
	}
	
	#session {
		display: none;
	}
	
	#signout {
		color: #FFFFFF;
		font-family:"Arial", sans-serif;
		font-size:12px;
		font-weight:bold;
		text-decoration: underline;
		cursor: pointer;
		margin-top: 10px;
		margin-right: 10px;
		padding: 10px;
	}

/************************************************************************************************/
/*
	class selectors
	e.g.
	.center {
		text-align:center;
	}
*/
	.default-form {
		display: none;
	}

	.divButtons {
		min-width: 300px;
		padding-bottom: 5px;
	}
	
	.btnEdit, .btnDelete, .btnView {
		font-family:"Arial", sans-serif;
		font-size:12px;
		font-weight:bold;
	}
	
	.no-close {
		background: #FFFFFF;
	}
	
	.no-close .ui-dialog-titlebar-close {
		display: none;
	}
	
	.no-close .ui-dialog-titlebar {
		color: white;
		/* background: #55A716; */
		border: 0px;
	}
	
/************************************************************************************************/
/*
	css for location map formatting
*/
	
	.marker-html {
		max-height: 200px;
		line-height:1.35;
		white-space:nowrap;
		overflow: hidden;
		color: #312439;	
	}
	
	.marker-header {
		font-weight: bold;
	}
	
	.marker-content {
		max-height: 180px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	.map-link {
		display: table;
		padding-top: 1px;
		padding-bottom: 1px;
	}
	
	.map-link > div {
		display:table-cell;
		vertical-align: middle;
		padding-right: 5px;
		cursor: pointer;
	}
	
	.map-link-image > img {
		display:table-cell;
		vertical-align: middle;
		width:30px;
		height:30px;
	}
	
	.map-link-text {
		
	}
	
	.map-link-entry {
		font-size: 11px;
		font-weight: bold;
		padding-right: 15px;
	}
	
	.map-link-date {
		font-size: 11px;
		padding-right: 15px;
	}
	

/************************************************************************************************/
/*
	css for timeline form formatting
*/

	#fieldset-timeline {
		border: 0px;
		font-family: "Arial", sans-serif;
		margin: 0px;
		padding: 0px;
		font-size: 12px;
	}

	#fieldset-timeline > .row  {
		position: relative;
		vertical-align: top;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 0px;
		padding: 5px;
		background: #5A515A;
	}
	
	#fieldset-timeline > .row > input:not([type="checkbox"]), 
	#fieldset-timeline > .row > .subrow > input  {
		display: inline-block;
		box-shadow: 0 0 2px #8C79A5;
		border: 2px solid #8C79A5;
		outline: none;
		width: 220px;
		background: white;
	}

	#fieldset-timeline > .row > .subrow > form > input {
		display: inline-block;
		outline: none;
		font-size: 12px;
		width: 216px;
		padding: 2px;
	}
	
	#fieldset-timeline > .row > textarea {
		box-shadow: 0 0 2px #8C79A5;
		border: 2px solid #8C79A5;
		outline: none;
		resize: none;
		width: 216px;
	}

	#fieldset-timeline > .row > label:not(#mediaTypeLabelLink):not(#mediaTypeLabelImage),  
	#fieldset-timeline > .row > .subrow > label, 
	#fieldset-timeline > .row > .subrow > form > label{
		display: inline-block;
		width: 100px;
		font-weight: bold;
		text-align: left;
	}
	
	#fieldset-timeline > #lbl-description {
		float:left;
		padding-top:5px;
		width:103px;
	}
	

/************************************************************************************************/
/*
	css for entry form formatting
*/

	#fieldset-entry {
		border: 0px;
		font-family: "Arial", sans-serif;
		margin: 0px;
		padding: 0px;
		font-size: 12px;
	}
	
	#fieldset-entry > .row  {
		position: relative;
		vertical-align: top;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 0px;
		padding: 5px;
		background: #5A515A;
	}
	
	#fieldset-entry > .row > input,
	#fieldset-entry > .row > .subrow > input {
		display: inline-block;
		box-shadow: 0 0 2px #8C79A5;
		border: 2px solid #8C79A5;
		outline: none;
		width: 220px;
		background: white;
	}
	
	#fieldset-entry > .row > .subrow > form > input {
		display: inline-block;
		outline: none;
		font-size: 12px;
		width: 216px;
		padding: 2px;
	}
	
	#fieldset-entry > .row > textarea {
		box-shadow: 0 0 2px #8C79A5;
		border: 2px solid #8C79A5;
		outline: none;
		resize: none;
		width: 216px;
	}
	
	#fieldset-entry > .row > label,
	#fieldset-entry > .row > .subrow > label:not(#mediaTypeLabelLink):not(#mediaTypeLabelImage),
	#fieldset-entry > .row > .subrow > form > label {
		display: inline-block;
		width: 100px;
		font-weight: bold;
		text-align: left;
	}
	
/************************************************************************************************/
/*
	css for entry map formatting
*/

	#entry-map-overlay {
		height: 335px;
		width: 365px;
		top: 10px;
		left: 15px;
		position:absolute;
		display: none;
		box-shadow: 0 0 2px #8C79A5;
		border: 2px solid #8C79A5;
		z-index: 99997;
		background: #FFFFFF;
	}

	#entry-map {
		height: 335px;
		width: 365px;
		position:absolute;
		z-index: 99998;
	}
	
	#entry-map-close {
		height: 38px;
		width: 38px;
		position:absolute;
		top:0px;
		right:0px;
		z-index: 99999;
		background: rgba(0,0,0,0.10);
		background-image: url('../images/close.png');
		background-position: center; 
		background-repeat: no-repeat;
		border: 1px solid rgba(0,0,0,0.20);
	}
	
	#entry-map-close:hover {
		background: rgba(0,0,0,0.20);
		background-image: url('../images/close-mouseover.png');
		background-position: center; 
		background-repeat: no-repeat;
		border: 1px solid rgba(0,0,0,0.30);
	}

	.info-window {
		max-width:200px;
		max-height: 100px;
		line-height:1.35;
		overflow-y: auto;
		overflow-x: hidden;
		color: black;
	}
	
	.info-window > .select-address {
		padding: 2px 2px;
		max-width:195px;
		cursor: pointer;
		border: 1px solid rgba(0,0,0,0);
	}
	
	.info-window > .select-address:hover {
		background: rgba(0,0,0,0.20);
		background-image: url('../images/use.png');
		background-position: center; 
		background-repeat: no-repeat;
		max-width:195px;
		cursor: pointer;
		border: 1px solid gray;
	}

/************************************************************************************************/
/*
	css for sign in form formatting
*/
	
	.fieldset-signin {
		background: #FFFFFF;
		border: 0px;
		font-family: "Arial", sans-serif;
		margin: 0px;
		padding-top: 10px;
		padding-bottom: 0px;
	}
	
	.fieldset-signin > .row  {
		margin: 5px;
		padding: 5px;
		background: #5A515A;
	}
	
	.fieldset-signin > .row > input {
		width: 250px;
		background: white;
	}
	
	.fieldset-signin > .row > input, 
	.fieldset-signin > .row > input:focus {
		box-shadow: 0 0 2px #8C79A5;
		border: 2px solid #8C79A5;
		outline: none;
		font-size: 14px;
	}
	
	.fieldset-signin > .row > input, 
	.fieldset-signin > .row > label {
		display: inline-block;
	}
	
	.fieldset-signin > .row > label {
		width: 100px;
		font-size: 12px;
		font-weight: bold;
		text-align: left;
	}
	
	.fieldset-signin > .signin-links {
		font-size: 11px;
		color: #7B5973;
		font-weight: bold;
		padding-top: 10px;
	}
	
	#linkSignin, #linkRegister, #linkForgot {
		font-size: 11px;
		color: #7B5973;
		font-weight: bold;
		text-decoration: underline;
		cursor: pointer;
	}
	
	#div_message {
		font-size: 12px;
		font-weight: bold;
		text-align: left;
		color: #A12020;
		background: #EAB7B7;
		padding: 10px;
		margin-top: 10px;
	}
	
/************************************************************************************************/
/*
	css for autocomplete formatting
*/

	/* highlight results */
	.ui-autocomplete span.hl_results {
		background-color: #ffff66;
	}
	 
	/* scroll results */
	.ui-autocomplete {
		max-height: 150px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding for vertical scrollbar */
		padding-right: 5px;
		width: 310px;
	}
	 
	.ui-autocomplete li {
		font-size: 16px;
	}
	
	
/************************************************************************************************/
/*
	css for google chart table
*/	

	.table-div {
		border-collapse: collapse;
		background: #393442;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		width: 90%;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 20px;
		box-shadow: 0px 10px 5px #888888;
	}

	.google-visualization-table-table {
		font-family: "Arial", sans-serif;
		font-size: 12px;
		text-align: left;
		border-collapse: collapse;
		background: #D4E4CA;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;		
	}

	.header-row {
		font-size: 16px;
		font-weight: bold;
		background: #393442;
		border-top: 1px solid #393442;
		border-left: 1px solid #393442;
		border-right: 1px solid #393442;
		border-bottom: 4px solid #BD9A00;
		padding: 8px;
		color: #FFFFFF;
		height:40px;
	}
	
	.table-row, .odd-table-row {
		background: #e8edff;
		border-left: 1px solid #787070;
		border-right: 1px solid #787070;
		border-bottom: 1px solid #FFFFFF;
		color: #666699;
		border-top: 1px solid transparent;
		padding: 8px;
		height: 42px;
	}
	
	.table-row {
		background: #e8edff;
	}
	
	.odd-table-row {
		background: #D0E4FE;
	}
	
	.table-row:last-child, .odd-table-row:last-child {
		border-bottom: 4px solid #BD9A00;
	}
	
	.selected-table-row {
	
	}
	
	.hover-table-row {
	
	}
	
	.header-cell {
		margin: 20px;
	}
	
	.table-cell {
		margin: 20px;
	}
	
	.row-number-cell {
	
	}
	
	
/************************************************************************************************/
/*
	css for flipping page elements
*/	

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper {
	transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}