/**
 * This file defines the 'theme' of the CMS: Colors, fonts, backgrounds, and detailed alignments.
 * Together with _layout.css it provides the presentational backbone to the CMS.
 * Ideally a developer should be able to exchange this file with his own theme easily.
 * 
 * Please don't put any dimension, display or float information on major structural components
 * like '.cms-container' or '.cms-header' in here, use the _layout.scss file instead.
 * 
 * Use SCSS variable definitions in screen.css to avoid repeating styles like background colours
 * or padding dimensions. 
 * 
 * To avoid this file getting too large and complicated, it is encouraged to create new SCSS files
 * for larger components like the CMS menu or tree (see _tree.scss and _menu.scss).
 */

// main styles

body {
	@include global-reset;
	font-size: 13px;
	font-family: Verdana, Arial, sans-serif;
}

body * {
	font-size: 13px;
}

body .ui-widget {
	font-size: 1em;
}

.cms-content-header {
	background-color: #a0b2be;
	@include linear-gradient(color-stops(#abbbc4, #93a8b6));
	
	h2 {
		float: left;
		padding: 10px;
		font-size: 14px;
		font-weight: bold;
	}
	
	.cms-content-header-tabs {
		float: left;
		margin-top: 8px; // TODO Ingo is too dumb to do bottom vertical position
	}
	
	.cms-content-header-actions {
		
	}
}

.cms-content-tools {
	background-color: #c6d7df;
}

// header and logo

.cms-header {
	padding: 10px;
	background-color: #002a43;
	@include linear-gradient(color-stops(#002236, #003050, #002236));
	
	* {
		color: white;
	}
}

.cms-logo {
	
	.version {
		display: none; 
	} 
	
	* {
		color: #3ebae0;
	}
	
	a {
		display: inline-block;
		height: 25px;
		width: 25px;
		float: left;
		margin-right: 10px;
		background: url(../images/logo_small.png) no-repeat;
		text-indent: -9999em;
	}
}

.cms-login-status {
	
	.logout-link {
		display: inline-block;
		height: 25px;
		width: 25px;
		float: left;
		margin-right: 10px;
		background: url(../images/logout.png) no-repeat;
		text-indent: -9999em;
	}
}

// loading screen

.ss-loading-screen, 
.ss-loading-screen .loading-logo {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	background: #fff;
	background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
	background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
	z-index: 100000;
	margin: 0;
	padding: 0;
}

.ss-loading-screen {
	.loading-logo {
		background-url: url(../images/logo.gif);
		background-repeat: no-repeat;
		background-color: transparent;
		background-position: 50% 50%;
	}
	p {
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: 80px;
		
		span.notice {
			display: inline-block;
			font-size: 14px;
			padding: 10px 20px;
			color: #dc7f00;
			border: none;

			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			-o-border-radius: 5px;

			-moz-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
			-webkit-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
			-o-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
			box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
		}
	}
	
	.loading-animation {
		display: none;
		position: absolute;
		left: 49%;
		top: 75%;
	}
}