body {
	overflow:hidden;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}

#mainWindow {
	position:relative;
	width:100%;
	height:100%;
}

/* Used for making font loading smoother */
.wf-loading, .wf-inactive, .wf-active {visibility:visible;font-family:'Source Sans Pro',Helvetica,Arial,sans-serif}
/* Universals */
.left {text-align:left}
.right {text-align:right}
.center {text-align:center}
.pull-left {float:left}
.pull-right {float:right}
.pull-center {float:none;margin:0 auto;text-align:center}

.clear{
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0
}

.clearfix{
	display:inline-block;
}

.clearfix:after{
	content:" ";
	display:block;
	font-size:0;
	height:0;
	clear:both;
	visibility:hidden
}
/*\*/
* html .clearfix {height:1%}
.clearfix {display:block}
/**/

/** Alerts **/
.alert             {background-color:#E1F3F8}
.alert-success     {background-color:#E7F4E4}
.alert-info        {background-color:#E1F3F8}
.alert-warning     {background-color:#FFF1D2}
.alert-danger      {background-color:#F9DEDE}
.ui-widget-content {background-image:none}

.alert-success .ui-dialog-titlebar.ui-widget-header {color:#082D00 !important}
.alert-info .ui-dialog-titlebar.ui-widget-header    {color:#011A21 !important}
.alert-warning .ui-dialog-titlebar.ui-widget-header {color:#362500 !important}
.alert-danger .ui-dialog-titlebar.ui-widget-header  {color:#730000 !important}

.alert .ui-dialog-titlebar.ui-widget-header {
	text-align:left !important;
	padding-left:17px !important;
}

#UIAlertDialog {
	padding-top:0;
	line-height:1;
	display:table;
}

#UIAlertDialog span {
	display:inline-block;
	vertical-align:middle;
	line-height:1;
	display:table-cell;
}

.alert {
	font-weight:normal;
	font-size:18px;
	background-repeat:no-repeat;
	background-position:16px 50%;
	background-size:48px 48px;
	padding-left:64px;
}

.alert-success {
	background-image:url('/maps/resources/alerts/success.svg');
	background-image:url('/maps/resources/alerts/success.png');
	background-color:#E7F4E4
}

.alert-info {
	background-image:url('/maps/resources/alerts/info.svg');
	background-image:url('/maps/resources/alerts/info.png');
	background-color:#E1F3F8;
}

.alert-warning {
	background-image:url('/maps/resources/alerts/warning.svg');
	background-image:url('/maps/resources/alerts/warning.png');
	background-color:#FFF1D2;
}

.alert.alert-danger {
	background-image:url('/maps/resources/alerts/error.svg');
	background-image:url('/maps/resources/alerts/error.png');
	background-color:#F9DEDE;
}

.ui-widget-overlay {
	background:url('/maps/resources/images-bg/bg_80_000000.png') top left repeat transparent !important;
	opacity:1 !important;
}

.no-close .ui-dialog-titlebar-close {
	display:none;
}

.inline {
	display:inline-block;
}

.table {
	display:table;
}

.table-cell {
	display:table-cell;
}

label {
	font-weight:normal;
}

.floatLeft {float:left}
.floatRight {float:right}

/* Universal Buttons */
button,
input[type="button"] {
	border:none;
	padding:5px;
	background-color:#245bab;
	color:#fff;
	cursor:pointer;
	font-size:1em;
	line-height:1em;
	transition: all .2s ease;
	border-radius:2px;
}

button:hover,
input[type="button"]:hover {
	background-color:#4e8cc7;
	-moz-transition:all .4s ease;
	-webkit-transition:all .4s ease;
	transition:all .4s ease;
}

button:active,
input[type="button"]:active {
	background-color:#245bab;
	-moz-transition:all .2s ease;
	-webkit-transition:all .2s ease;
	transition:all .2s ease;
}

button:disabled,
input[type="button"]:disabled {
	background-color:#aaa;
	-moz-transition:all .2s ease;
	-webkit-transition:all .2s ease;
	transition: all .2s ease;
}

input[type="text"],
input[type="number"] {
	border-width:1px;
	border-style:solid;
	border-color: #777 #aaa #aaa;
	-moz-transition:all .2s ease;
	-webkit-transition:all .2s ease;
	transition:all .2s ease;
}

a.external {
	background:url('/maps/resources/images/extlink.png') right center no-repeat transparent;
	padding-right:12px;
}
/**********************************************/
body {
	height:100%;
	width:100%;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:-moz-none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

body, .mainWindow, #mainWindow {
	width:100%;
	min-height:100%;
	margin:0 auto;
	overflow:hidden;
}

select {
	padding:5px 25px 5px 5px;
	background-color:#fff;
	border-width:1px;
	border-style:solid;
	border-color:#777 #aaa #aaa;
	appearance:default;
	-moz-appearance:default;
	-webkit-appearance:default;
}

#map {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
}

#UILoadingIcon {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:30;
	opacity:.5;
	background:url('../images/loader_NOAA_66x66.gif') center center no-repeat #fff;
}

.esriSimpleSliderTR {
	right:8px !important;
	top:30px !important;
}

/* Center Marker CSS */
#UICenterMarker {
	position:absolute;
	top:49.75%;
	left:49.75%;
	display:none;
	transform:translate(-50%,-50%);
	z-index:100;
}

#UICenterMarker .pulse {
	width:10px;
	height:10px;
	border:5px solid #a00;
	webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px;
	background-color:#716f42;
	z-index:10;
	position:absolute;
}

#UICenterMarker .dot {
	border:10px solid #d00;
	box-shadow:0 0 7px rgba(0,0,0,0.5);
	background:transparent;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	border-radius:100%;
	height:50px;
	width:50px;
	-webkit-animation:pulse 1s ease-out;
	-moz-animation:pulse 1s ease-out;
	animation:pulse 1s ease-out;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	position:absolute;
	top:-20px;
	left:-20px;
	z-index:1;
	opacity:0;
}

@-moz-keyframes pulse {
	0% {
		-moz-transform: scale(0);
		opacity:0;
	}
	25% {
		-moz-transform: scale(0);
		opacity:0.1;
	}
	50% {
		-moz-transform: scale(0.1);
		opacity:0.3;
	}
	75% {
		-moz-transform: scale(0.5);
		opacity:0.5;
	}
	100% {
		-moz-transform: scale(1);
		opacity:0;
	}
}

@-webkit-keyframes "pulse" {
	0% {
		-webkit-transform: scale(0);
		opacity: 0;
	}
	25% {
		-webkit-transform: scale(0);
		opacity: 0.1;
	}
	50% {
		-webkit-transform: scale(0.1);
		opacity: 0.3;
	}
	75% {
		-webkit-transform: scale(0.5);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 0;
	}
}


#UIMapCanvas {
	background-color:#fff;
	position:relative;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
	z-index:1;
}

#UITitle, .UITitle {
	width:100%;
	background-color:#333;
	color:#fff;
	height:55px;
	border-bottom:1px solid #777;
}

.UITitle h1#mainTitle {
	line-height:55px;
	font-size:80%;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

#UINavMenu .uiClose {
	display:none;
}

#uiMainMenu ul {
	list-style-type:none;
	margin:0;
	padding:0;
	list-position:inside;
}

#uiMainMenu ul li:hover,
#uiMainMenu ul li:active {
	background-color:#444;
}

#UIInfoDialog h2,
#UIInfoDialog h4 {
	color:#009DDA
}

#uiLegend {
	overflow-x:none;
	overflow-y:auto;
	height:200px;
}

#geosearch {
	margin:20px auto;
	width:80%;
}

/* results */
.result-header {
	font-size:12px;
	font-weight:bold;
}
.result-text {
	font-size:12px;
}

/* PANES */
.inset {
	margin:0 auto;
	overflow-x:none;
	overflow-y:auto;
}

.uiClose {
	width:16px;/*35px*/
	height:16px;/*25px*/
	background:url('/maps/resources/images/ui-icon-close.png') center center no-repeat transparent;
	display:block;
	position:absolute;
	right:23px;
	top:7px;/*-25px*/
	opacity:.5;
	cursor:pointer;
	border-radius:0;
}

.uiClose:hover,
.uiClose:active {opacity:1}

.uiPane h2 {font-size:1.2em}

#UINavMenu {
	position:absolute;
	top:48px;
	height:100%;
	width:100%;
	background-color:#0057a5;
	color:#fff;
	list-style-type:none;
	margin:0;
	padding:0;
	list-position:inside;
}

#UINavMenu ul {
	padding:0;
	margin:7px 0 0 0;
}

#UINavMenu ul li {
	padding:0;
	margin:0;
}
#UINavMenu a {
	color:#fff;
	text-decoration:none;
	display:block;
	width:100%;
	padding:20px;
	border-bottom:1px solid #fff;
	transition:all ease .2s;
	background-color:#0057a5;
}

#UINavMenu a:hover {
	background-color:#0180CE;
	transition:all ease .2s;
}

#UIOptionsWindow {
	position:absolute;
	top:80px;
	height:100%;
	width:100%;
	background-color:#fff;
}

#helpWindow {
	position:absolute;
	top:0;
	left:0;
	bottom:33px;
	height:100%;
	width:100%;
	background-color:#333;
	color:#fff;
	overflow-x:hidden;
	overflow-y:auto;
}

/*
#uiLayers select {
	appearance:default;
	-moz-appearance:default;
	-webkit-appearance:default;
}*/

#uiLayers #cag_month {
	width:100px;
}

/********** FORMATTING INTERNAL CONTENT **********/
.contentBlock {
	margin-bottom:1em;
	display:block;
}

#dailyObsMenuInternalContent h3 {
	padding:0 10px;
	margin-bottom:.25em;
	display:block;
}

#dailyObsMenuInternalContent .contentBlock br {
	display:inline-block;
	margin-bottom:.25em;
}

#btnUpdate {
	margin:.5em 0;
	padding:10px 12px;
	width:100%;
	float:right;
	width:200px;
}

#btnUpdate:disabled {
	cursor:default
}

#msgUpdate {
	color:#d00;
	font-size:70%;
	display:none;
	padding:10px;
	opacity:1;
	width:100%;
	text-align:center;
	-webkit-transition:opacity 1s linear;
	-moz-transition:opacity 1s linear;
	transition:opacity 1s linear;
}

input[type='checkbox'] {
	-webkit-appearance:none;
	width:20px;
	height:20px;
	background:white;
	border-radius:5px;
	border:2px solid #555;
}

input[type='checkbox']:checked {
	background: #888;
}

.dailyCalendarIcon {
	background-image:url('/maps/resources/images-mobile/calendar_14x14.png');
	background-repeat:no-repeat;
	width:14px;
	height:14px;
	margin:0 0 0 5px;
	padding:0;
	cursor:pointer;
}
.dailyCalendarIcon.disabled {
	opacity:.25;
	cursor:default;
}

.mfGalleryItem {
	width:170px; 
	height:155px; 
	float:left;
	font-size:14px;
	color:#333;
	border-radius:7px;
	padding:8px;
	border: 2px solid grey;
	margin:5px;
}

/* tools */
.icon-label {
	font-size:9px;
}

/* Tables */
/* introMemo loading indicator */
#introMemo {
	text-align:center;
	margin:0;
	padding:0;
}

#mainLoadPage .container {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}

#mainLoadPage h1 {font-weight:bold;font-size:1.2em;margin:0}
#mainLoadPage h2 {font-weight:bold;font-size:1.2em;margin:0 0 1em 0}
#mainLoadPage img.loaderImage {margin:1em auto}

#mapfinderLogo,
#mapfinderLogo img {
	margin:0 auto 5px auto;
	width:555px;
	height:60px;
}

/* RESULTS */
.layerListItem {
	padding:7px 7px 7px 14px;
	display:table;
	width:100%;
	border-bottom:1px solid #ddd;
	transition: all ease .2s;
}

.layerListItem:last-child {
	border-bottom:none
}

.layerListItem .scaleWarning {
	margin-left:5px;
	display:inline-block;
	visibility:visible;
	text-decoration:none !important;
}

.layerListItem.disabled .scaleWarning {
	display:none;
	visibility:hidden;
	margin-left:0;
}

.layerListItem input.checkbox {
	float:left;
	text-align:center;
	display:table-cell;
	vertical-align:center;
	margin:0 5px 0 0;
	padding:0;
}

.layerListItem .layerDisplayName {
	float:left;
	display:table-cell;
	font-size:18px;
	font-weight:bold;
}

/* Layer Expandable Header */
.layerLabel {
	padding:5px;
	border-bottom:1px solid #f0f0f8;
}

.layerLabel h2 {
	cursor:pointer;
	padding:7px 0 7px 17px;
	display:block;
	background:url('/maps/resources/images/plus.gif') left center no-repeat transparent;
	width:100%;
	margin:0;
	font-size:18px;
	line-height:18px;
	font-weight:normal;
}

.layerLabel h2.expanded {
	background-image:url('/maps/resources/images/minus.gif');
}

/* Daily sublayer options styles */
.subLayersContainer {
	margin-bottom:5px;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}

.subLayersContainer ul {
	margin-left:20px;
	list-style-type:none;
	margin:0 0 0 29px;
	padding:0;
}

.subLayersContainer ul li {
	line-height:20px;
	padding:3px 0;
}

.subLayersContainer ul li input {
	vertical-align:bottom;
}

.subLayersContainer ul li label {
	font-weight:normal;
	color: #777
}

.dateLeft {width:52.5%;float:left}
.dateRight {width:42.5%;float:right}

#optMonth {width:100%}
#optYear {width:100%}

/* UI Elements */
/* LEGEND */
#UILegendDialog {
	padding:0 20px 20px 20px;
	z-index:2 !important;
}

#UILegendDialog .objLabel {
	color:#444;
	text-align:left;
	display:block;
}

#UILegendDialog .objDiv,
#UILegendDialog .objSrc {
	text-align:center;
}

#UILegendDialog td.objDiv {
	text-align:left;
	margin-right:20px;
}

#UILegendDialog div.objLabel {
	margin-bottom:10px;
}

#UILegendDialog .legend-text {
	margin:0;
	font-size:16px;
	width:100%;
	text-align:center;
}

#UILegendDialog table.legend-text th {
	font-weight:bold;
}

#UILegendDialog table.legend-text td {
	vertical-align:middle;
}