/*
	This file's CSS is used on the Mashboard and detail (Google Analytics, Facebook, and so on) pages.

	Note: properties are defined in alphabetical order.
*/

.skystats-page-error-container {
	border: 1px solid #fff;
	border-radius: 5px;
	display: none;
	margin: 20px 25%;
	text-align: center;
}

#skystats-license-check-error {
	border: 1px solid #fff;
	border-radius: 5px;
	display: none;
	margin: 20px auto;
	text-align: center;
	width: 25%;
}

#skystats-page-loading-container {
	margin-top: 40px;
}

/*
	Date Range
*/

/* Date range container */
#skystats-date-range-container {
	display: none;
	text-align: center;
	margin: 20px 0 20px 20px;
}

.skystats-date {
	border-radius: 3px;
	height: 30px;
	padding: 5px 15px;
}

#skystats-date-range-text {
	color: #fff;
}

/* Information container */
.skystats-info-container {
	display: none;
	margin: 20px auto;
	padding: 20px;
	text-align: center;
}

/*
	Grid Icon
*/
.skystats-card-eye, .skystats-grid-icon {
	background: url( '../images/eye.png' ) no-repeat;
	display: inline-block;
	float: right;
	height: 22px;
	width: 25px;
	margin-top: 1px;
}

.skystats-grid-content {
	display: none;
}

.skystats-data-points-container {
	display: none;
	overflow: hidden;
}

/*
	Charts
*/

.skystats-chart-container {
	display: none;
}
.skystats-data-point-column {

}

/*
	Chart Plotting Frequency
*/
.skystats-query-parameter-label {
	color: #fff;
	vertical-align: baseline;
}

.skystats-orange-chart-key-icon {
	background: url('../images/admin-sprite.png') 0 -74px;
	padding: 5px;
}

.skystats-yellow-chart-key-icon {
	background: url('../images/admin-sprite.png') 0 -133px;
	padding: 5px;
}

.skystats-turquoise-chart-key-icon {
	background: url('../images/turquoise-chart-key.png') no-repeat 1px 9px;
	padding: 5px;
}

.skystats-light-blue-chart-key-icon {
	background: url('../images/light-blue-chart-key.png') no-repeat 1px 9px;
	padding: 5px;
}

/* Give jqPlot Chart Marker Crosshair Cursor */
.jqplot-event-canvas {
	cursor: crosshair;
}


.skystats-service-detail-chart-container {

}

.skystats-tooltip {
	cursor: help;
}

/*
 * Tool tips whose content is shown when the tool tip is clicked.
 * The content is intended to be displayed until another click is registered.
 */
.skystats-select-tool-tip {
	cursor: pointer;
}

/* Settings Icon */
.skystats-card-settings, .skystats-settings-icon {
	background: url( '../images/settings-icon.png' ) no-repeat;
	display: inline-block;
	float: right;
	height: 22px;
	vertical-align: top;
	width: 23px;
	cursor: pointer;
}

/*
	Data Points
*/

/* Total value / value for the data point */
.skystats-data-point-value {
	color: #666;
	font-family: 'Montserrat', sans-serif;
	font-size: 45px;
	font-weight: 800;
	letter-spacing: 0;
}

/* Data Point values which are percentages */
.skystats-data-point-value-percentage {
	line-height: 15px;
	position: relative;
}
.skystats-data-point-value-percentage:after {
	content: '%';
	font-size: 22px;
	line-height: 0;
	position: absolute;
	top: 21px;
}

.skystats-donut-value {
	color: #666;
	fill: rgb( 102, 102, 102 ) !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	letter-spacing: 0;
}

.skystats-data-point-change-direction {
	background-image: url( '../images/admin-sprite.png' );
	padding: 10px;
}

.skystats-data-point-change-direction-positive {
	background-position: -6px -265px;
}

.skystats-data-point-change-direction-negative {
	background-position: -34px -264px;
}

/* Data point percentage change */
.skystats-data-point-change {
	color: #666;
	font-family: 'Montserrat', sans-serif;
	font-size: 28px;
	line-height: 27px;
}

.skystats-data-point-change:after {
	content: '%';
	font-size: 17px;
	vertical-align: text-top;
}

.skystats-data-point-change-positive:before {
	content: '+';
}

.skystats-data-point-change-positive {
	color: #72aa3f; /* nice green */
}

.skystats-data-point-change-negative {
	color: #aa3f3f; /* nice red */
}

/* An increase in change but one which is considered negative */
.skystats-data-point-change-direction-increase-negative {
	background: url( '../images/change-direction-up-negative.png' ) 0 11px no-repeat;
	padding: 10px;
}
.skystats-data-point-change-increase-negative:before {
	content: '+';
}
.skystats-data-point-change-increase-negative {
	color: #aa3f3f;
}

/* A decrease in change but one which is considered positive */
.skystats-data-point-change-direction-decrease-positive {
	background: url( '../images/change-direction-down-positive.png' ) 0 11px no-repeat;
	padding: 10px;
}
.skystats-data-point-change-decrease-positive {
	color: #72aa3f;
}

.skystats-dashboard-data-point-heading-info {
	background: url('../images/info.png') no-repeat -2px 2px;
	padding: 0 8px 4px 5px;
	cursor: help;
}

.skystats-service-data-point-change-percentage-info {
	background-position: 0 4px !important;
	margin-top: 0;
	padding: 10px !important;
	position: absolute;
}

/* Save button for the setting tab e.g. when saving a profile for GA or a page for FB */
.skystats-settings-tab-save-data-button {
	display: block;
	margin-top: 5px !important;
}

/* Settings tab content sections */
.skystats-settings-tab-section {
	display: none;
}

/* Decrease space below setting tab section headers */
.skystats-settings-tab-section > h3 {
	margin-bottom: 0;
}
/* Decrease space above setting tab section paragraphs */
.skystats-settings-tab-section > p {
	margin-top: 8px;
}

/* Decrease space for facebook page selection paragraph */
#skystats-facebook-settings-page-selection-section > p {
	margin-bottom: 8px;
}

.skystats-data-point-info-icon {
	background: url('../images/info.png') no-repeat -2px 2px;
	padding: 0 8px 4px 5px;
	cursor: help;
}

#flotTip {
	border: 1px solid #ccc !important;
	color: #444;
}

#skystats-date-range-notice-container {
	display: none;
	margin-top: 15px;
	text-align: center;
}

#skystats-free-data-range-notice {
	margin: 0 auto;
	width: 40%;
}