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

//######################################################################################################################
// #IMPORT SETTINGS#
@import "partials/settings";

//######################################################################################################################
// #RESET#
.cms_reset {
	div, p, a, a:hover, a:active, a:focus, ul, li,
	form, fieldset, label, input, textarea {
		font:normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
		color:#222; font-weight:normal; text-decoration:none; text-align:left; outline:none;
		list-style-type:none; list-style-type:none; height:auto; padding:0; margin:0; border:none; background:none;
	}

// end of reset
}

//######################################################################################################################
// #TOOLBAR#

#cms_toolbar { position:absolute; left:0; top:0; z-index:9999999; width:100%; }
#cms_toolbar {
	.cms_toolbar { 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-grey-5;
		@include background-image($gradient-toolbar); @include box-shadow(0 0 15px rgba(0, 0, 0, 0.2));

		.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/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:600; 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 $color-grey-10; background:white;
				@include box-shadow(0 2px 2px $color-grey-10); }
			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 .cms_toolbar-item-navigation-active a { font-weight:bold; color:black; }
			ul .cms_toolbar-item-navigation-active a:hover { color:white; }

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

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

			strong { color:white !important; }
		}

		.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/sidebar#
	.cms_sideframe {
		display:none; position:fixed; left:0; top:0; z-index:999; width:0; height:100%; overflow:visible !important;

		.cms_sideframe-frame { position:relative; z-index:10; width:100%; height:100%; overflow:hidden; background:white; }
		iframe { height:100%; width:100%; border:none; background:white; overflow:auto; }

		.cms_sideframe-resize { position:absolute; right:-2px; top:0; z-index:30; width:2px; height:100%; cursor:col-resize;
			background:$color-grey-70; }
			.cms_sideframe-shim { position:absolute; left:0; top:0; z-index:1; width:100%; height:100%;
			background:transparent; }
		.cms_sideframe-knob { width:6px; height:50px;
			position:absolute; right:-2px; top:50%; margin-top:-15px; @include border-radius(3px);
			background:$color-grey-70; }

		.cms_sideframe-btn { position:absolute; right:-20px; top:50px; z-index:40; }
		.cms_sideframe-btn {
			div { cursor:pointer; width:20px; height:20px; margin-bottom:2px; @include border-radius(0 3px 3px 0);
				background:$color-grey-70 url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat; }
			div:hover { background-color:$color-grey-90; }

			.cms_sideframe-close { background-position:-80px -90px; }
			.cms_sideframe-close:hover { background-position:-100px -90px; }
			.cms_sideframe-hide { background-position:-101px -150px; }
			.cms_sideframe-hide:hover { background-position:-121px -150px; }
			.cms_sideframe-hidden { background-position:-60px -150px; }
			.cms_sideframe-hidden:hover { background-position:-80px -150px; }
			.cms_sideframe-maximize { background-position:-40px -91px; }
			.cms_sideframe-maximize:hover { background-position:-60px -91px; }
			.cms_sideframe-minimize { background-position:-60px -111px; }
			.cms_sideframe-minimize:hover { background-position:-60px -91px; }

			.cms_sideframe-hide { border:5px solid $color-grey-70; border-left:none; border-right:none; }
		}
	}

	//##################################################################################################################
	// #TOOLBAR/clipboard#
	.cms_clipboard { position:fixed; left:0; top:130px; z-index:99;
		p { pading:0; margin:0; }

		ul li { margin:0 0 2px; }
		ul a { display:block; width:20px; height:20px; @include hide-text(); @include border-radius(0 3px 3px 0);
			border:5px solid $color-grey-70; border-left:none; border-right:none; overflow:hidden;
			background:$color-grey-70 url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat left -130px;
			&:hover, &:active, &:focus { background-color:$color-grey-90; background-position:-20px -130px; }
		}
		ul li ul { display:none !important; }

		.cms_clipboard-empty a { display:block; width:20px; height:20px; @include hide-text(); @include border-radius(0 3px 3px 0);
			background:$color-grey-70 url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat left -110px; cursor:pointer;
			&:hover, &:active, &:focus { background-color:$color-grey-90; background-position:-20px -110px; }
		}

		// placeholders
		.cms_clipboard-triggers { position:relative; z-index:999; }
		.cms_clipboard-triggers li:nth-child(n+6) { display:none; }

		.cms_clipboard-containers { position:absolute; top:0; left:-1px; z-index:99; width:0; }
		.cms_clipboard-containers li { margin-left:-220px; width:190px; }

		// custom style for draggable item
		.cms_draggable { border:1px solid $color-grey-70; @include border-radius(0 3px 3px 0); }
		.cms_draggable .cms_dragitem { padding-left:20px; }
		.cms_draggable .cms_dragitem .cms_submenu { display:none !important; }
		.cms_draggable .cms_dragitem-text { @include inline-block(); width:140px; height:21px; overflow:hidden; }

		.cms_plugins { display:none; }
	}

	//##################################################################################################################
	// #TOOLBAR/dialog#
	.cms_messages { display:none; position:fixed; z-index:9999; 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; }

		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('/static/cms/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/modal#
	.cms_modal {
		display:none; position:fixed; left:50%; top:50%; z-index:999999; overflow:hidden;
		@include border-radius(5px); @include box-shadow(0 0 15px rgba(0, 0, 0, 0.2));
		background:white;

		.cms_modal-body { position:relative; z-index:10; width:800px; height:400px;
			border-top:1px solid $color-grey-10; border-bottom:1px solid $color-grey-10; }
		.cms_modal-foot { position:relative; height:32px;
			@include border-radius(0px 0px 5px 5px); clar:both; overflow:hidden;
			background:$color-grey-5; }
		.cms_modal-shim { display:none; position:absolute; left:0; top:0; z-index:20; width:100%; height:100%; }
		.cms_modal-frame { position:relative; z-index:10; width:100%; height:100%; }
		.cms_modal-frame iframe { width:100%; height:100%; }

		.cms_modal-title { display:block; font-size:13px; font-weight:bold; text-align:center; cursor:move;
			padding:3px 75px 4px; @include border-radius(5px 5px 0px 0px);
			color:$color-grey-70; background:$color-grey-5; }

		.cms_modal-collapse, .cms_modal-close, .cms_modal-maximize { display:block; position:absolute; right:3px; top:3px;
			@include hide-text(); cursor:pointer; width:20px; height:20px;
			background:url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat left top; }
		.cms_modal-collapse { right:40px; background-position:0 -70px; }
		.cms_modal-collapse:hover, .cms_modal-collapse:active, .cms_modal-collapse:focus { background-position:-20px -70px; }
		.cms_modal-collapsed { background-position:-100px -70px; }
		.cms_modal-collapsed:hover, .cms_modal-collapsed:active, .cms_modal-collapsed:focus { background-position:-100px -70px; }

		.cms_modal-maximize { right:22px; background-position:0 -90px; }
		.cms_modal-maximize:hover, .cms_modal-maximize:active, .cms_modal-maximize:focus { background-position:-20px -90px; }
		.cms_modal-maximize-active { background-position:-20px -90px !important; }

		.cms_modal-close { background-position:-40px -70px; }
		.cms_modal-close:hover, .cms_modal-close:active, .cms_modal-close:focus { background-position:-60px -70px; }

		.cms_modal-resize { position:absolute; right:0; bottom:0; z-index:102; width:20px; height:20px; cursor:nw-resize;
			background:url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat -117px -67px;
			&:hover { background-position:-137px -67px; }
		}

		.cms_modal-breadcrumb { display:none; float:left; font-size:12px; line-height:12px; position:relative; z-index:100;
			height:32px; min-width:225px; overflow:hidden; width:100%;

			.cms_modal-breadcrumb-items { position:absolute; left:35px; top:0; width:9999px; background:$color-window; }

			a { float:left; font-size:12px; line-height:12px; margin-left:-10px; position:relative; z-index:100; padding-right:10px;
				color:$color-grey; background:url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat right -200px; }
			a span { float:left; padding:10px 15px 10px 25px; color:black; }

			// z-index ordering
			a:nth-child(1) { z-index:100; }
			a:nth-child(2) { z-index:80; }
			a:nth-child(3) { z-index:70; }
			a:nth-child(4) { z-index:60; }
			a:nth-child(5) { z-index:50; }
			a:nth-child(6) { z-index:40; }
			a:nth-child(7) { z-index:30; }
			a:nth-child(8) { z-index:20; }
			a:nth-child(9) { z-index:10; }
			a:nth-child(10) { z-index:1; }

			// custom styles
			a span, .cms_modal-breadcrumb-title { float:left; position:relative; z-index:120; color:$color-grey; }
			.cms_modal-breadcrumb-title { padding:10px 20px 10px 15px;
				border-right:1px solid $color-grey-10; @include border-radius(0 0 0 5px);
				background:white url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat -113px -104px; @include hide-text(); }

			a:hover { color:black; background-position:right -232px !important; }
			a:hover span { color:black; background-color:white; }

			.cms_modal-breadcrumb-last { cursor:default; span { color:$color-blue; } }
		}

		// buttons
		.cms_modal-buttons {
			position:absolute; right:0; top:0; z-index:101;
			float:right; padding:0 20px 0 10px; @include border-radius(0 0 5px 0);
			background:$color-window;
			div { float:right; font-size:12px; cursor:pointer; padding:2px 10px; margin:3px 5px 3px 0; }
		}
	}

	//##################################################################################################################
	// #TOOLBAR/buttons#
	// #TOOLBAR/buttons/styles#
	.cms_btn { color:$color-grey; @include border-radius(3px);
		border:1px solid $color-grey-10;
		background:$color-grey-10; @include background-image($gradient-light);
		@include box-shadow(inset lighten($color-grey-10, 5%) 0px 1px 0px);
		&:hover, &:active, &:focus { background:$color-grey-10; border:1px solid $color-grey-10; @include box-shadow(none); }
		&:active, &:focus { border:1px solid darken($color-grey-10, 10%); background:darken($color-grey-10, 10%); }
	}

	.cms_btn-disabled {
		border-right:1px solid darken($color-grey-10, 10%); border-top:1px solid darken($color-grey-10, 10%);
		@include box-shadow(inset 0px 1px 0px $color-grey-10);
		background:darken($color-grey-5, 5%);
		&:hover, &:active, &:focus { background-color:$color-grey-10; }
	}

	.cms_btn-active { color:white;
		border:1px solid darken($color-grey, 20%) !important; border-bottom:none !important;
		@include box-shadow(inset 0 1px 0 lighten($color-grey, 20%));
		background:$color-grey; @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_btn-action { color:white;
		border:1px solid adjust-hue($color-blue, 15deg) !important;
		@include box-shadow(inset lighten($color-blue, 10%) 0px 1px 0px);
		background:$color-blue; @include background-image($gradient-blue);
		&:hover, &:active, &:focus { background:adjust-hue($color-blue, 15deg); @include box-shadow(none); }
		&:active, &:focus { background:darken(adjust-hue($color-blue, 15deg), 10%); }
	}
	.cms_btn-caution {
		color:white; border:1px solid adjust-hue($color-red, 15deg) !important;
		@include box-shadow(inset lighten($color-red, 20%) 0px 1px 0px);
		background:$color-red; @include background-image($gradient-red);
		&:hover, &:active, &:focus { background:adjust-hue($color-red, 15deg); @include box-shadow(none); }
		&:active, &:focus { background:darken(adjust-hue($color-red, 15deg), 10%); }
	}
	.cms_btn-publish { display:none; }
	.cms_btn-publish-active { display:block; }

	//##################################################################################################################
	// #TOOLBAR/elements#
	.cms_loader { background:$color-window url('/static/cms/img/loader.gif') no-repeat center center !important; }

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

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

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

		label { float:left; cursor:pointer; padding-left:10px; }
		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"] { font-size:12px; text-transform:uppercase; cursor:pointer;
			padding:1px 15px 0; @include border-radius(3px);
			color:white; border:1px solid darken($color-grey, 20%);
			@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/buttongroups#
	.cms_toolbar-item-buttons {
		margin:4px 0 4px;

		a { float:left; font-size:11px; line-height:11px; 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/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('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat -60px -40px;
			&:hover, &:active, &:focus { background-position:-90px -40px; background-color:white; }
		}
	 }
	.cms_toolbar-trigger-expanded a { background-position:0 -40px;
		&:hover, &:active, &:focus { background-position:-30px -40px; }
	}

	// #TOOLBAR/switch#
	.cms_toolbar-item_switch { position:relative; left:0; top:0; margin:4px 0 4px; @include border-radius(20px);
		border-top:1px solid $color-grey-10; background:darken($color-grey-5, 5%);
		@include box-shadow(inset $color-grey-10 0px 1px 0px);
		&:hover, &:active, &:focus { background-color:$color-grey-10; }

		a { float:left;	position:relative; z-index:100; font-size:11px; line-height:11px;
			text-transform:uppercase; letter-spacing:1px; padding:6px 14px 4px 28px;
			color:black; @include text-shadow(0 1px 0 white); }
		.cms_toolbar-item_switch-knob {
			float:left; position:absolute; left:2px; top:1px; z-index:99; width:16px; height:16px;
			@include border-radius(16px); @include hide-text();

			border:1px solid black; background:$color-grey-70;
			@include box-shadow(inset 0 1px 0 lighten($color-grey, 20%));
			@include background-image($gradient-dark);
		}
		.cms_toolbar-item_switch-on { display:none; position:relative; top:-1px; }
		.cms_toolbar-item_switch-off { display:inline; position:relative; top:-1px; }
	}
	.cms_toolbar-item_switch-active {
		a {	padding:6px 28px 4px 14px; color:$color-green; }
		.cms_toolbar-item_switch-knob { left:auto; right:2px;
			border:1px solid lighten($color-green, 10%); background:lighten($color-green, 10%);
			@include box-shadow(inset 0 1px 0 lighten($color-green, 30%));
			@include background-image($gradient-green); }
		.cms_toolbar-item_switch-on { display:inline; }
		.cms_toolbar-item_switch-off { display:none; }
	}
	// highlight
	.cms_toolbar-item_switch-highlight {
		a {	color:$color-blue; }
		.cms_toolbar-item_switch-knob {
			border:1px solid darken($color-blue, 10%); background:lighten($color-blue, 10%);
			@include box-shadow(inset 0 1px 0 lighten($color-blue, 20%));
			@include background-image($gradient-blue);
		}
	}

	// #TOOLBAR/tooltip#
	.cms_placeholders-tooltip { display:none; position:absolute; left:0; top:0; @include border-radius(3px);
		font-size:11px; line-height:11px; font-weight:bold; white-space:nowrap; padding:5px 7px 7px 24px; margin:0;
		color:$color-grey-10;
		background:$color-grey-70 url('/static/cms/img/toolbar/sprite_toolbar.png') no-repeat -78px -169px;
	}

// end of toolbar
}

//######################################################################################################################
// #RETINA#
@media print,
	(-o-min-device-pixel-ratio: 5/4),
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) {

	.cms_toolbar-item-navigation-children > a span,
	.cms_sideframe-btn div,
	.cms_clipboard ul a, .cms_clipboard-empty a,
	.cms_messages .cms_messages-close,
	.cms_modal-collapse, .cms_modal-close, .cms_modal-maximize, .cms_modal-resize,
	.cms_modal-breadcrumb a, .cms_modal-breadcrumb-title,
	.cms_toolbar-item-logo a, .cms_toolbar-trigger a,
	.cms_placeholders-tooltip, .cms_placeholders-menu {
		background-image:url('/static/cms/img/toolbar/sprite_toolbar@2x.png') !important;
		background-size:190px !important; }

	#cms_toolbar .cms_loader {
		background-image:url('/static/cms/img/loader@2x.gif') !important;
		background-size:32px !important; }

// end of retina
}