@charset "utf-8";
/*!
 * @copyright:	https://github.com/divio/django-cms
 */

#cms_toolbar {
position:absolute; left:0; top:5px; z-index:9999999; width:100%;
//######################################################################################################################
// #TOOLBAR#
.cms_toolbar { display:none; position:fixed; left:0; top:0; z-index:999999; width:100%; min-width:320px; height:30px;
	border-bottom:1px solid $color-grey !important; background-color:white; background:rgba($color-grey-5, 0);
	@include background-image($gradient-toolbar); @include box-shadow(0 0 5px rgba(0, 0, 0, 0.2));
	/* hack for ie9 */ background/**/:#fcfcfc;

	.cms_toolbar-left { float:left; padding-left:10px; position:relative; z-index:10; }
	.cms_toolbar-right { float:right; padding-right:32px; position:relative; z-index:10; }

	.cms_toolbar-left .cms_toolbar-item { margin-left:10px; }
	.cms_toolbar-right .cms_toolbar-item { margin-right:20px; }

	// items
	.cms_toolbar-item { float:left; }
	.cms_toolbar-item-buttons a { border-bottom:none !important; }
}

// do some responsive magic
@media only screen and (max-width: 800px) {
	.cms_toolbar-right { display:none; }
}

//######################################################################################################################
// #TOOLBAR/debug#
&.cms_toolbar-debug {
	.cms_toolbar { top:5px !important; }
	.cms_toolbar-trigger { top:5px !important; }

	.cms_debug-bar { position:fixed; left:0; top:0; z-index:99999999; width:100%; height:4px;
		border-bottom:1px solid #ddd; background:#fdffc8 url('../img/toolbar/sprite_toolbar.png') repeat-x left -444px; }
}
&.cms_toolbar-debug #container { padding-top:35px !important; }

//##################################################################################################################
// #TOOLBAR/navigation#
.cms_toolbar-item-navigation {
	li { float:left; position:relative; zoom:1; }
	li a { float:left; padding:5px 10px; zoom:1; cursor:default; }
	li ul { display:none; }
	> li:first-child > a span { font-weight:800; line-height:12px; }

	// hover effect
	.cms_toolbar-item-navigation-hover {
		ul { position:absolute; left:0; top:30px;
			display:block; min-width:180px; padding:4px 0;
			@include border-radius(0 0 4px 4px);
			border:1px solid white; border-top:none;
			background-color:white; background:rgba(white, 0.97);
			@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
		ul li { float:none; zoom:1; }
		ul li a { float:none; display:block; zoom:1; cursor:pointer; white-space:nowrap;
			padding:2px 10px 2px 15px; }
		ul ul { @include border-radius(0 4px 4px 0); border-top:1px solid #f5f5f5; }

		// second level
		.cms_toolbar-item-navigation-children {
			ul { display:none; left:100%; top:-5px; }
			> a { cursor:default; }
			> a span { display:block; background:url('../img/toolbar/sprite_toolbar.png') no-repeat right -270px; }
		}

		// anchor hover
		> a { color:white !important;
			background:adjust-hue($color-blue, 15deg);
			@include background-image($gradient-blue); }
		> a span { background-position:right -300px !important; }

		// add active style
		.cms_toolbar-item-navigation-active > a { font-weight:800; }
	}

	.cms_toolbar-item-navigation-break { height:1px; margin:0 0 4px; padding:0 0 3px; @include hide-text();
		border-bottom:1px solid $color-grey-10; }

	.cms_toolbar-item-navigation-disabled {
		a { cursor:default !important; @include opacity(0.2);
			&:hover, &:active, &:focus { @include box-shadow(none); background:none !important;
				color:black !important; } }
		ul { display:none !important; }
	}
}
.cms_toolbar-item-cms-mode-switcher { display:none; }

//##################################################################################################################
// #TOOLBAR/dialog#
.cms_messages { display:none; position:fixed; z-index:999999; top:30px;
	width:300px; min-height:14px; margin:0; padding:6px 10px 8px; background:rgba(black, 0.74);
	@include border-radius(0 0 3px 3px);
	color:white; font-size:12px; line-height:16px; font-weight:200;
	* { color:white; font-size:12px; line-height:16px; font-weight:200; }

	a { color:$color-blue; }
	a:hover { text-decoration:underline; }
	strong { color:lighten($color-blue, 10%); font-weight:200; }
	ul { display:inline; color:white; }
	ul li { display:inline; color:white; font-weight:200; }

	.cms_messages-close { display:none; float:right; cursor:pointer;
		width:20px; height:14px; margin-left:10px; position:relative; top:-2px; left:3px;
		background:url('../img/toolbar/sprite_toolbar.png') no-repeat -100px -90px; }
	.cms_messages-close:hover { background-position:-120px -90px; }
}
.cms_messages-error strong { color:$color-red; }

//##################################################################################################################
// #TOOLBAR/elements#
// #TOOLBAR/elements/logo#
.cms_toolbar-item-logo {
	margin:0 !important;

	a { display:block; width:92px; height:20px; margin:5px 0; @include hide-text();
		background:url('../img/toolbar/sprite_toolbar.png') no-repeat left top;
		&:hover, &:active, &:focus { background-position:left -20px; } }
}

// #TOOLBAR/elements/form#
.cms_form-login {
	padding:3px 0 0 0;

	label { float:left; cursor:pointer; padding-left:10px; }
	label span { padding-top:1px; @include inline-block(); }
	input[type="text"], input[type="password"] { font-size:13px; line-height:13px; width:100px;
		padding:3px 5px; margin:0; @include border-radius(3px);
		color:$color-grey; border:1px solid lighten($color-grey, 45%);
		@include box-shadow(0px 1px 0px white);

		&:focus { border-color:$color-blue;
			@include box-shadow(inset 0px 0px 2px $color-grey-10);
			@include single-transition(outline 0.2s);
		}
	}
	input[type="submit"] { display:block; color:white; font-size:12px; text-transform:uppercase; cursor:pointer;
		height:23px; padding:1px 15px 0; @include border-radius(3px);
		border:1px solid darken($color-grey, 20%);
		background-color:$color-grey;
		@include box-shadow(inset 0 1px 0 lighten($color-grey, 20%));
		@include background-image($gradient-dark);

		&:hover, &:active, &:focus { background:$color-grey-70; @include box-shadow(none); }
		&:active, &:focus { background:darken($color-grey-70, 50%); }
	}

	.cms_error { color:$color-red; }
	.cms_error input { border:1px solid $color-red; }
}

// #TOOLBAR/elements/buttongroups#
.cms_toolbar-item-buttons {
	margin:4px 0 4px;

	a { float:left; font-size:11px; line-height:1; padding:5px 12px; }
	a:first-child { @include border-radius(3px 0 0 3px); }
	a:last-child { @include border-radius(0 3px 3px 0); }
	a:only-child { @include border-radius(3px); }
}

// #TOOLBAR/elements/toggler#
.cms_toolbar-trigger { position:fixed; right:0; top:0; z-index:999999;
	border-left:1px solid $color-grey; border-bottom:1px solid $color-grey;

	a { display:block; width:30px; height:29px; @include hide-text();
		color:$color-grey-70;
		border-left:1px solid white; border-top:1px solid white;
		background:$color-grey-5 url('../img/toolbar/sprite_toolbar.png') no-repeat -60px -40px;
		&:hover, &:active, &:focus { background-position:-90px -40px; background-color:white; }
	}
 }
// #TOOLBAR/elements/loader#
.cms_toolbar-trigger-expanded a { background-position:0 -40px;
	&:hover, &:active, &:focus { background-position:-30px -40px; }
}
.cms_toolbar-loader a { background:#fcfcfc url('../img/loader.gif') no-repeat center center !important;
	background-size:20px 20px !important; }

// TODO Reimplement blinking if unpublished content is present
//##################################################################################################################
// #TOOLBAR/blocker#
.cms_screenblock { color:white; text-align:center;
	position:fixed; right:0; top:0; z-index:100;
	width:100%; height:100%;
	background-color:black; background:rgba(black, 0.9); }

.cms_screenblock .cms_screenblock-inner { margin-top:300px;
	h1 { font-size:28px; line-height:30px; }
	h1, p { color:$color-grey-20; text-align:center; }
	a { color:white; }
	a:hover { text-decoration:underline; }
}

// end of toolbar
}