/* ============================================================

	Author:	Svend Richter <svend.richter@factorial-seven.com>
	Date:	08.02.2013
	File:	admin-style.css
	
	
	*** Table of contents ***
	
	1. General styles and helper classes
		1.1 Buttons
			1.1.1 Button icons
			1.1.2 Buttons main & header
			1.1.3 Buttons primary-bar
			1.1.4 Buttons secondary-bar & main-widgets
			1.1.5 Buttons sidebar-widgets
				1.1.5.1 Buttons sidebar-widgets navigation
				1.1.5.2 Left sidebar navigation active-state
				1.1.5.3 Elements sidebar-widgets navigation
			1.1.6 Buttons thumbnails
			1.1.7 Buttons special
		1.2 Thumbnails
			1.2.1 Thumbnail stack
	2. Layout
		2.1 Header
		2.2 Main
			2.2.1 Main bars
				2.2.1.1 Shared Editor
			2.2.2 Content
			2.2.3 Tables
		2.3 Widgets
			2.3.1 Widgets sidebar
				2.3.2.1 Widgets sidebar active
			2.3.2 Widgets sidebar select menus
			2.3.3 Widgets main
				2.3.3.1 Widgets main slider
			2.3.4 Widget images draggable z-Index fix
		2.4 Login
		2.5 Blog
	3. Individual classes
		3.1 Accordions
		3.2 Placeholder
		3.3 Progressbars
		3.4 Nav-editing
		3.5 Dialogs
		3.6 Datepicker
	4. Formulars
		4.1 Drop-area
		4.2 Validation
	5. Clearfix

	
	*** Color Palette ***
	
	#666666 - Body background
	
	#eeeeee - Main background, sidebar font color
		
	#88aaee - Light blue (Primary bar background)
	#335599 - Dark blue (primary bar active, font color)
	#dfefff	- Very light blue (Button and formular hover)
	#4466aa - ???
	
	#cccccc - Secondary bar background
	#888888 - Secondary bar active, font color
	
	#444444 - Widget background
	#777777 - Widget hover
	#333333 - Widget active

		
	*** Reserved IDs and Classes ***
	
	js-
	
   ============================================================ */


/* ============================================================
	1. General styles and helper classes
   ============================================================ */

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.85em;
	font-weight: normal;
	line-height: 1.3;
	color: #666;
	background: url(/images/background.jpg) repeat #666;
}

a, a:visited {
	color: #666;
	font-weight: normal;
}

a:hover {color: #999;}

a:active {color: #333;}

hr {
	background-color: #888888;
    border: medium none;
    height: 1px;
	margin: 25px 0;
}

ul {
	padding: 0;
	list-style: none;
}

ul li {padding: 0;}

.drop-target {
	background-color: #88aaee !important;
	color: #335599 !important;
}

.float-left		{float: left;}
.float-right	{float: right;}
.center			{text-align: center; margin: 0 auto;}

.table	{display: table;}
.tr		{display: table-row;}
.tc		{
	display: table-cell;
	vertical-align:top;
}


/*	1.1 Buttons
   ============================================================ */

.button {
	cursor: pointer;
	line-height: 1.5em;
	padding: 5px 10px 5px 10px;
	display: block;
	min-width: 1em;
}

.button.icon {
	padding: 5px 10px 5px 25px;
	background-position: 5px center;
	background-repeat: no-repeat;
}

.button.icon-only,
.button.icon-mini {
	text-indent: -9999px;
	background-repeat: no-repeat;
}

.button.icon-only {
	background-position: center center;
	text-indent: -9999px;
	padding: 5px;
}

.buttonset .button {
	display: inline-block;
	margin-right: -0.35em;
}

.buttonset label {
	border-right: none;
}

.secondary-bar .button,
.accordion .button,
.widget .button {
	min-width: 2.25em;
}

.widget .header .button.icon-only {
	width: 16px;
	height: 16px;
	min-width: 16px;
}

.formbuttons {
	text-align: right;
	clear: both;
}

.formbuttons.tc .button {
	margin: 10px 0;
}

.formbuttons .button {
	display: inline-block;
}


/*	1.1.1 Button icons
   ============================================================ */
   
.button.site-admin		{background-image: url(images/applications-blue.png);}
.button.user			{background-image: url(images/user.png);}
.button.users			{background-image: url(images/users.png);}
.button.logout			{background-image: url(images/control-power.png);}
.button.new				{background-image: url(images/plus.png);}
.button.edit			{background-image: url(images/gear.png);}
.button.save.warning	{background-image: url(images/exclamation-red.png);}
.button.save.check		{background-image: url(images/tick.png);}
.button.menu			{background-image: url(images/ui-menu-blue.png);}
.button.module			{background-image: url(images/puzzle.png);}
.button.page			{background-image: url(images/document-text-image.png);}
.button.login			{background-image: url(images/lock.png);}
.button.link			{background-image: url(images/chain.png);}
.button.category		{background-image: url(images/blue-folder-horizontal.png);}
.button.snippet			{background-image: url(images/document-snippet.png);}
.button.homepage		{background-image: url(images/application-blog.png);}
.button.preferences		{background-image: url(images/equalizer.png);}
.button.slider			{background-image: url(images/application-image.png);}
.button.text			{background-image: url(images/application-text.png);}
/*.button.delete			{background-image: url(images/bin-metal.png);}*/

.button.lang-de			{background-image: url(images/lang/de.png);}
.button.lang-en			{background-image: url(images/lang/gb.png);}
.button.lang-fr			{background-image: url(images/lang/fr.png);}

.icon-mini {
	width:16px;
	height:16px;
	display:block;
	margin:0 auto;
}

.secondary-bar .icon-mini,
.accordion .icon-mini,
.upload-list .icon-mini,
.main .widget .icon-mini,
.taglist .icon-mini {
	background-image: url(images/ui-icons_888888_256x240.png);
}

.sidebar .widget.active .icon-mini,
.accordion h3:hover .icon-mini,
.accordion h3.ui-state-active .icon-only:hover .icon-mini,
.upload-list li:hover .icon-mini,
.thumblist .thumb:hover .icon-mini {
	background-image: url("images/ui-icons_4466aa_256x240.png") !important;
}

.sidebar .widget .icon-mini,
.secondary-bar .icon-only:active .icon-mini,
.accordion .icon-only:active .icon-mini,
.accordion h3.ui-state-active .icon-mini,
.accordion h3.ui-state-active .icon-only:active .icon-mini,
.thumblist .thumb .icon-only:active .icon-mini,
.upload-list .icon-only:active .icon-mini,
.main .widget .icon-only:active .icon-mini,
.taglist .icon-only:active .icon-mini {
	background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}

.icon-mini.edit			{background-position: -64px -112px;}
.icon-mini.delete		{background-position: -176px -96px;}
.icon-mini.close		{background-position: -96px -128px;}
.icon-mini.email		{background-position: -80px -96px;}
.icon-mini.home			{background-position: 0 -112px;}
.icon-mini.seek-prev	{background-position: -48px -160px;}
.icon-mini.seek-next	{background-position: -32px -160px;}
.icon-mini.prev			{background-position: -160px -160px;}
.icon-mini.next			{background-position: 0 -160px;}
.icon-mini.comment		{background-position: -128px -96px;}
.icon-mini.alert		{background-position: 0 -144px; background-image: url("images/ui-icons_d20000_256x240.png") !important;}
.icon-mini.check		{background-position: -64px -144px;}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.spinner {
	width: 18px;
	height: 18px;
	margin: 6px;
	background-image: url("images/spinner.png");
	background-position: center;
	background-repeat: no-repeat;

	animation: spin 1s infinite linear;
	-webkit-animation: spin 1s infinite linear;
}

.table .spinner {
	margin: 0 auto;
}


/*	1.1.2 Buttons main & header
   ============================================================ */

#header .button,
#main .button,
.dialog .button,
.ui-dialog .button {
	border-width: 1px;
	border-style: solid;
	border-color: #888;
	background-color: #fff;
	color: #888;
}

#header .button:hover,
#main .button:hover,
.dialog .button:hover {
	border-color: #335599;
	background-color: #dfefff;
	color: #335599;
}

#header .button:active,
#main .button:active,
.dialog .button:active,
#header .button.active,
#main .button.active,
.dialog .button.active {
	border-color: #335599;
	background-color: #335599;
	color: #fff;
}


/*	1.1.3 Buttons primary-bar
   ============================================================ */

.primary-bar .button {
	border-width: 0 !important;
	border-color: #335599 !important;
	background-color: #88aaee !important;
	color: #335599 !important;
	font-weight: bold;
}

.primary-bar .button:hover {
	border-color: #335599 !important;
	background-color: #dfefff !important;
	color: #335599 !important;
}

.primary-bar .button:active,
.primary-bar .button.active {
	background-color: #335599 !important;
	color: #fff !important;
}


/*	1.1.4 Buttons secondary-bar & main-widgets
   ============================================================ */

#main .secondary-bar .button,
#main .widget .header .button,
.taglist th .button {
	/*border-width: 0 1px 0 0 !important;*/
	border-width: 0 !important;
	border-color: #888 !important;
	background-color: #ccc;
	color: #888;
	vertical-align:top;
}

.taglist th .button {
	background-color: #ccc !important;
}

.primary-bar .button,
.secondary-bar .button,
.taglist th .button {
	height: 2.25em;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
}

.secondary-bar .button.icon-only {
	padding: 0;
}

.secondary-bar .button:hover,
#main .widget .header .button:hover,
.taglist th .button:hover {
	background-color: #eee !important;
}

.secondary-bar .button:active,
.secondary-bar .button.active,
#main .widget .header .button:active,
.taglist th .button:active {
	background-color: #888 !important;
	color: #fff !important;
}


/*	1.1.5 Buttons sidebar-widgets
   ============================================================ */

.sidebar .widget .button,
.secondary-bar .language .button {
	border-width: 0;
	border-color: transparent;
	background-color: transparent;
	min-width: 2.25em;
}

.sidebar .widget .button:hover,
.sidebar .widget .button.menu,
.secondary-bar .language .button:hover {
	background-color: #777 !important;
}

.sidebar .widget .button.menu {
	font-weight:bold;
}

.sidebar .widget .button:active,
.sidebar .widget .button.active,
.secondary-bar .language .button:active {
	background-color: #333 !important;
}

.sidebar .widget .buttonset.comments {
	padding: 0 5px;
	background: #444;
	height: 100%;
}

.sidebar .widget .buttonset.comments .icon-only {
	padding: 0;
	min-width: 16px;
	min-height: 100%;
}

.sidebar .widget li:hover .buttonset.comments {
	background: #777;
}

.sidebar .widget li:hover .button.active .buttonset.comments,
.sidebar .widget li .button.active .buttonset.comments,
.sidebar .widget li:active .buttonset.comments {
	background: #333;
}


/*	1.1.5.1 Buttons sidebar-widgets navigation
   ============================================================ */

ul.navigation {
	margin: 0;
}

ul.navigation li {
	position: relative;
}

.navi ul li a {
	color:red;
}

ul.navigation ul {
	padding: 0 0 0 15px;
}

ul.navigation ul li {
	border-width: 1px 0;
	border-style: solid;
    border-color: #444444;
}

ul.navigation ul li span.button {
	overflow: hidden;
}


/*	1.1.5.2 Left sidebar navigation active-state
   ============================================================ */

.sidebar .widget .page-element {margin: 0 0 5px 0;}
.sidebar .widget .page-element:last-child {margin: 0;}

.sidebar .widget .page-element .button.element,
.button.element {
	background-color: #ccc !important;
    border-color: #eee #888 #777 !important;
    border-style: solid;
    border-width: 1px !important;
    color: #666 !important;
    cursor: move;
    font-weight: bold;
    margin: 0;
    text-shadow: 0 1px 0 #eee;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) !important;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
}

.sidebar .widget li:last-child .button.element {
    margin: 0;
}


/*	1.1.5.3 Elements sidebar-widgets navigation
   ============================================================ */
   
.active-arrow {
}


/*	1.1.6 Buttons accordion, thumb, navigation, upload-list
   ============================================================ */

.accordion .buttonset .button,
.navigation .buttonset .button {
	border: none !important;
	margin: 0 !important;
	height: 2.25em !important;
}

.thumb .buttonset .button {
	border: none !important;
	background: #88aaee !important;
}

.accordion .buttonset {
	float: right;
}

.accordion .buttonset .button {float: left;}

.accordion .buttonset .button,
.upload-list .options .button {
	margin: 0;
	height: 2.25em !important;
	background: transparent !important;
	margin: 0 !important;
}

.upload-list .options .button {
	border:none !important;
}

.accordion h3 {
	height: 2.25em;
}

.accordion h3:hover a,
.accordion h3:hover .buttonset .button,
.thumb:hover .buttonset button {
	color: #4466aa;
}

.accordion h3:hover a {
	color: #fff;
}

.navigation li:active .buttonset .button {
	color: #fff !important;
}

.accordion .buttonset .button:hover,
.thumb .buttonset .button:hover,
.upload-list .options .button:hover {
	background: #dfefff !important;
}

.accordion .buttonset .button:active,
.thumb .buttonset .button:active,
.upload-list .options .button:active {
	border-left: 1px solid #4466aa !important;
	background: #4466aa !important;
	color: #fff !important;
}

.accordion .buttonset,
.navigation .buttonset {
	position: absolute;
	right: 0;
	top: 0;
}


   
/*	1.1.7 Buttons special
   ============================================================ */

.open_site {
	position: absolute !important;
	top: 10px;
	right: 10px;
}

.language {
	right: 0;
	display: none;
	margin: 0;
	padding: 0 5px 5px 5px;
	position: absolute;
	top: 4.6em;
	background: none repeat scroll 0 0 #ccc;
	z-index: 1000;
	text-align: left;
	color: #eee !important;
	border-width: 0 0 1px 1px;
	border-style: solid;
	border-color: #888;
	
	box-shadow:          0 5px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:     0 5px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:  0 5px 5px rgba(0, 0, 0, 0.5);
}

.secondary-bar .language .button {
	padding: 5px 5px 5px 35px;
	color: #888 !important;
}

.secondary-bar .language .button:hover {
	background-color: #eee !important;
}

.secondary-bar .language .button:active {
	background-color: #888 !important;
	color: #eee !important;
}

.secondary-bar .buttonset button:hover .ui-icon {
	background-image: url("images/ui-icons_888888_256x240.png");
}

.secondary-bar .buttonset button.ui-state-active .ui-icon {
	background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}


/*	1.2 Thumbnails
   ============================================================ */

.thumb {
	display: block;
	padding: 4px;
	margin: 5px;
	border: 1px solid #888;
	background: #fff;
	position: relative;
	text-align: center;
	
	box-shadow:          0 0 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:     0 0 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:  0 0 5px rgba(0, 0, 0, 0.5);
}

.thumb img {
	max-width: 100px;
}

.thumb:hover {
	background: #88aaee;
	cursor: move;
	border-color: #4466aa;
	color: #335599;
}

.thumb:active,
.thumb.active {
	background: #335599;
	border-color: #335599;
}

.thumb .buttonset {
	display: none;
	background-color: #88aaee;
    bottom: 0;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    width: 100px;
}

.thumb:hover .buttonset {
	display: block;
}

.thumb.big {
	width: 100px;
	height: 100px;
}

.thumb.small {
	width: 50px;
	height: 50px;
}

.thumb.small img {
	max-width: 50px;
}

.thumb.mini {
	width: 25px;
	height: 25px;
	padding: 3px;
}

.thumb.mini img {
	width: 25px;
	height: 25px;
}

.widget .thumb {
	color: #888;
}

.widget .thumb.small {margin: 5px;}

.thumblist {
	margin: 10px auto;
	padding: 0;
	text-align: center;
}

.thumblist .thumb {
	float: left;
	vertical-align: top;
}
.sidebar .widget .thumblist .thumb {display: inline-block;}

.widget .thumblist {
	display:inline-block;
	width: auto;
}

#upload-single-image .thumb {
	margin: 0 10px 10px 0;
}

.thumb.small.delete {
	background-color: #ff6040;
	border: 1px solid #d63301 !important;
}

.thumb.small.delete .overlay {
	position: absolute;
	width: 50px;
	height: 50px;
	background: url(images/cross.png) no-repeat center center rgba(255, 255, 255, 0.75);
	display: none;
}

.sortable-images.thumblist .thumb:active {
	background: #88aaee;
}


/*	1.2.1 Thumbnail stack
   ============================================================ */
/*
.stack {
	position:relative;
	float: left;
	margin: 0;
}

.stack .thumb.big {
	margin: 5px 5px 14px;
	z-index: 12;
}

.stack .thumb.one,
.stack .thumb.two {
	width: 100px;
	height: 100px;
	position: absolute;
	float: none;
}

.stack .thumb.one {
	top: -4px;
	left: 6px;
	width: 90px;
}

.stack .thumb.two {
	top: -2px;
	left: 3px;
	width: 95px;
}

.stack.active .thumb.one {
	top: 0;
	left: 15px;
	width: 100px;
	z-index: 10;
	
	-moz-transform:		rotate(15deg);
	-webkit-transform:	rotate(15deg);
	-o-transform:		rotate(15deg);
	transform:			rotate(15deg);
}
.stack.active .thumb.two {
	top: 0;
	left: -15px;
	width: 100px;
	z-index: 11;
	
	-moz-transform:		rotate(-15deg);
	-webkit-transform:	rotate(-15deg);
	-o-transform:		rotate(-15deg);
	transform:			rotate(-15deg);
}

.thumb .imagecount {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	background: #fff;
	padding: 4px 10px;
	font-weight: bold;
	cursor: pointer;
}

.thumb:hover .imagecount {
	background: #88aaee;
}

.thumb .imagecount:hover {
	background: #dfefff;
}

.thumb .imagecount:active {
	color: #fff;
	background: #335599;
}

.thumb .active-stack {
	display: none;
	height: 25px;
    width: 100%;
	background: url(images/active-stack.png) no-repeat bottom center transparent;
}

.thumblist .imagegroup {
	width: 100%;
	height: 0;
	background: #888888;
	margin: 0;
	padding: 0 10px;
	overflow: hidden;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
	
	box-shadow:          0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
	-moz-box-shadow:     0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
	-webkit-box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
}

.stack.active .active-stack {
	display: block;
}

.stack.active .imagegroup {
	height: 140px;
	padding: 10px;
}

.stack .imagegroup,
.stack.active .imagegroup,
.stack .thumb.one,
.stack.active .thumb.one,
.stack .thumb.two,
.stack.active .thumb.two {
	-webkit-transition:	0.25s all ease;
	-moz-transition:	0.25s all ease;
	-o-transition:		0.25s all ease;		
	-ms-transition:		0.25s all ease;
	transition:			0.25s all ease;	
}

*/

/* ============================================================
	2. Layout
   ============================================================ */

#header {
	width: 100%;
    margin: 0;
    padding: 1em 0;
	height: 2em;
    background: #fff;
	position: absolute;
	z-index: 2;
	text-align: center;
	overflow: hidden;
}

#footer {
	margin: 0;
	padding: 0;
}

#header,
#main {
	box-shadow:          0px 0px 5px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow:     0px 0px 5px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:  0px 0px 5px 5px rgba(0, 0, 0, 0.4);
}

.container {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

#main {
    width: 100%;
    margin: 0;
	padding: 0;
	float: left;
	background: #eee;
	z-index: 1;
}

.sidebar {
	width: 90%;
	padding: 0 0 0 1em;
	color: #eee;
	background: url(/images/background.jpg) repeat #666;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
}

.sidebar.left	{float: left;}
.sidebar.right	{float: left;}

.sidebar .nano > .content {
	padding-top: 1em;
	padding-right: 1em;
}

#main .nano {
	height: 93%;
	margin: 0 0 4.5em 0;
}

#main .nano > .content {
	padding: 1em;
}


#wrapper-box {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	overflow: hidden;
	padding: 4em 0 0 0;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
}

#navigation,
#main,
#sidebar {
	display: block;
	position: relative;
	height: 100%;

	-webkit-transition:	.5s all ease;
	-moz-transition:	.5s all ease;
	-o-transition:		.5s all ease;
	-ms-transition:		.5s all ease;
	transition:			.5s all ease;
}

.js #navigation {	
	margin-left: -100%;
	float: left;
	z-index: 0;	
}

.js #main {
	margin-left: 0;
	background: #eee;
	float: left;
	z-index: 1;
	position: relative;
}

.js #sidebar {	
	margin-right: -100%;
	float: left;
	z-index: 0;			
}

.active-nav #navigation {	
	margin-left: 0;	
	width: 90%;
}

.active-nav #main{
	margin-right: -100%;
}

.active-nav #sidebar {	
	margin-right: -100%;
	float: right;		
}

.active-sidebar #navigation {	
	margin-left: -100%;
}

.active-sidebar #main {
	margin-left: -90%;	
}

.active-sidebar #sidebar {	
	margin-left: 0;
	width: 90%;
}

.active-nav #main {
	-webkit-transition:	.1s all ease;
	-moz-transition:	.1s all ease;
	-o-transition:		.1s all ease;		
	-ms-transition:		.1s all ease;
	transition:			.1s all ease;	
}

#footer {
	clear: both;
	background: transparent;
}

/*	2.1 Header
   ============================================================ */

#header h1 {
    text-align: center;
    margin: 0;
	padding: 0;
	font-size: 1.25em;
	line-height: 1.75em;
}

.off-canvas-navigation {
	padding: 0 20px;
	margin: 0;
	width: 100%;
	position: absolute;
	top: 0.85em;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.off-canvas-navigation li {
	padding: 0;
}

.off-canvas-navigation li.menu-item {
	float: left;
}

.off-canvas-navigation li.sidebar-item {
	float: right;
}


/*	2.2 Main
   ============================================================ */

#main > .content {
	position: relative;
	top: 0;
	margin: 0;
	padding: 0 1em;
	width: 100%;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#main > .content.site {
	padding: 3.25em 10px 10px 10px;
}

#main.login {
	margin: 0 auto;
}

#main .article {
	position: relative;
	margin: 0;
	padding: 10px;
	background: #fff;
	border: 1px solid #888888;
}

#main .article h3:first-child {
	margin-top: 0;
}


/*	2.2.1 Main bars
   ============================================================ */

.primary-bar,
.secondary-bar,
.accordion h3,
.accordion-sortable h3 {
	padding: 0;
}

#main .primary-bar,
#main .secondary-bar {
	height: 2.25em;
	width: 100%;
	z-index: 20;
}

.primary-bar {
	background: #88aaee;
	border-bottom: 1px solid #335599;
	margin: 0;
}

.secondary-bar {
	background: #ccc;
	border-bottom: 1px solid #888;
	text-align: center;
}


/*	2.2.1.1 Shared Editor
   ============================================================ */

#topSpace .cke,
#bottomSpace .cke {
	border: none !important;
}

#topSpace .cke_top,
#bottomSpace .cke_bottom {
	background: #ccc;
	
	box-shadow: none;
	-webkit-box-shadow: none;
}

#topSpace .cke_top {
	border-bottom: 1px solid #888 !important;
}

#bottomSpace .cke_bottom {
	border-top: 1px solid #888 !important;

}


/*	2.2.2 Content
   ============================================================ */

.content > p,
.content > h3 {
	margin-top: 0;
}

.content .drop {
	border-bottom: 1px dashed #aaa;
	text-align: center;
	
	box-shadow:          0px 1px 0px 0px #fff;
	-moz-box-shadow:     0px 1px 0px 0px #fff;
	-webkit-box-shadow:  0px 1px 0px 0px #fff;
}

.content p.drop-text {
	font-size: 2em;
	font-weight: bold;
	margin: 3em 0;
	color: #ddd;
	text-shadow:	0 -1px 0 #bbb,
					0 1px 0 #fff;
}


/*	2.2.3 Tables
   ============================================================ */

.content table.table {
	width: 100%;
	background: #fff;
	border-width: 1px;
	border-style: solid;
	border-color: #888 #888 #777;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
	
	box-shadow:	0 1px 0 0 #eee inset,
				0 1px 0 0 #fff;
}

.content table.table th,
.content table.table td {
	padding: 5px 10px;
}

.content table.table th {
	background: #ccc;
	border-bottom: 1px solid #888;
}

.content table.table tr:nth-child(odd) {
	background: #eee;
}

.content table.table tr:hover,
.content table.table tr:focus {
	background: #dfefff;
	color: #4466aa;
	cursor: pointer;
}

.content table.table th {
	color: #888;
	text-shadow: 0 1px 0 #eee;
}

.content table input {
	border: 0;
	background: transparent;
	border: 1px solid transparent;
	width: 100%;
}

.content table tr:hover input {
	color: #4466aa;
}

.content table input:focus {
	background: #fff;
	color: #666 !important;
	border-color: #c4c4c4;
}

.content table .button {
	width: auto;
	height: auto;
	margin: 0 auto;
}

.content table th .button {
	border: 1px solid transparent !important;
}

.content table .hidden {
	display: none;
}

.content table th.small,
.content table td.small {
	width: 1em;
	padding: 5px;
}


/*	2.3 Widgets
   ============================================================ */

.widget {
	margin: 0 0 20px 0;
}

.widget h2 {
	text-align: left;
	font-size: 1.2em;
	margin: 0 0 0.35em;
}

.widget .header .button {
	width: 16px;
	height: 16px;
	float: right;
	padding: 4px;
	border: none;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
}


/*	2.3.1 Widgets sidebar
   ============================================================ */

.sidebar .widget {
	margin: 0 0 2em 0;
}

.sidebar .widget h2 {
	color: #ccc;
	text-shadow: 0 -1px 0 #000;
}

.sidebar .widget .page-index {
	display: table;
	margin: 0 auto 10px auto !important;
}

.sidebar .widget .page-index .button {
	vertical-align: top;
}

.sidebar .widget .page-index button {
	display: table-cell;
	margin: 0;
	padding: 4px;
	border: none;
	color: #fff;
	background-color: #444;
	height:2.25em;
}

.sidebar .widget .content {
	padding: 9px;
	background: #444;
	
	border-width: 1px;
	border-style: solid;
	border-color: #333 #333 #222;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
	
	box-shadow:		0 1px 0 0 #777 inset,
					0 1px 0 0 #888;
}

.sidebar .widget .content ul {margin: 0;}

.sidebar .widget .content ul .collapse {
	position: absolute;
	left: -10px;
	width: 16px;
	padding: 0.4em 0;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
}
	
.sidebar .widget #calendar {
	width: 100%;
	border-collapse: collapse;
    border-spacing: 0;
}

.sidebar .widget #calendar .cell,
.sidebar .widget #calendar .weekday {
	text-align: center;
	border: 0 none;
	padding: 0.3em;
}

.sidebar .widget #calendar .cell.active {
	background: #eee;
}

/*	2.3.2.1 Widgets sidebar active
   ============================================================ */

.sidebar .widget.activate .content,
.sidebar .widget.activate .content li span,
.sidebar .widget.activate .content li:first-child span,
.sidebar .widget.activate .content li:last-child span,
.sidebar .widget.activate .content li .button {
	transition: 		0.25s;
	-moz-transition:	0.25s;
	-o-transition:		0.25s;
	-webkit-transition:	0.25s;
}

.sidebar .widget.inactivate .content,
.sidebar .widget.inactivate .content li span,
.sidebar .widget.inactivate .content li:first-child span,
.sidebar .widget.inactivate .content li:last-child span,
.sidebar .widget.inactivate .content li .button {
	transition:			0.25s;
	-moz-transition:	0.25s;
	-o-transition:		0.25s;
	-webkit-transition:	0.25s;
}

.sidebar .widget.active ul li {
	border-style: none;
}


.sidebar .widget.active .content {
	background-color: #333;
	border-color: #333 #333 #222;
	padding: 10px 10px 5px 10px;
		
	box-shadow:          0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
	-moz-box-shadow:     0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
	-webkit-box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
}

.sidebar .widget.active .content li {
	margin: 0 0 5px 0;
}

.sidebar .widget.active .content li span {
	display:block;
	border-color: #aaa;
	background-color: #444;
	margin: 0 0 5px 0;
	cursor: move;
	
	box-shadow:          0px 0px 5px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:     0px 0px 5px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.5);
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
}

.sidebar .widget.active .content li .button {
	border-width: 1px;
	border-style: solid;
	border-color: #555 #444 #333;
}

.sidebar .widget.active .content li .button:hover,
.sidebar .widget.active .content li .button.menu {
	border-color: #888 #777 #666;
}


.sidebar .widget.active .content li .button:active,
.sidebar .widget.active .content li .button.active {
	border-color: #444 #333 #222;
}

.sidebar .widget.active .page-index .button.icon-only:active .icon-mini {
	background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}


/*	2.3.2 Widgets sidebar select menus
   ============================================================ */

.sidebar .widget select {
	width:100%;
}

.sidebar .ui-selectmenu {
	border: none;
	background: #333;
	color: #eee;
	width: 100% !important;
	margin: 0 0 10px 0;
}

.ui-selectmenu-menu {
	box-shadow:          0 5px 10px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:     0 5px 10px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow:  0 5px 10px rgba(0, 0, 0, 0.75);
}


.ui-selectmenu.ui-state-hover,
.ui-selectmenu.ui-state-active {
	background: #777;
	color: #eee;
}

.ui-selectmenu.ui-state-focus {
	outline: 0;
}

.ui-selectmenu.ui-state-focus {
	border: none;
}

a.ui-selectmenu.ui-state-hover {
	text-decoration: none;
}

.ui-selectmenu .ui-icon,
.ui-selectmenu.ui-state-hover .ui-icon,
.ui-selectmenu.ui-state-focus .ui-icon {
	background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}

.ui-selectmenu-menu .ui-state-hover a,
.ui-selectmenu-menu .ui-state-hover a:hover {
	background: #777;
	border: none !important;
	color: #eee !important;
}

.ui-selectmenu-menu ul {
	border: none;
	background: #333;
	color: #eee;
}

.ui-selectmenu-menu li {
	color: #eee;
	border: none !important;
}

.ui-selectmenu-menu.ui-state-hover li {
	border: none !important;
}

.ui-selectmenu-menu .ui-state-hover {
	border: none !important;
}

.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label {
	padding-left: 10px;
}


/*	2.3.3 Widgets main
   ============================================================ */

.main .widget {
	background: #ccc;
	cursor: move;
	
	border-width: 1px;
	border-style: solid;
	border-color: #888 #888 #777;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
	
	box-shadow:		0 1px 0 0 #eee inset,
					0 1px 0 0 #fff;
}

.main .widget .header {
	text-shadow: 0 1px 0 #eee;
}

.main .widget .header {
	margin: 0;
	padding: 5px;
}

.main .widget .header .button {
	width: 1.75em;
	height: 1.75em;
}

.main .widget .content {
	padding: 0 10px 10px 10px !important;
	overflow: hidden;
}

.main .widget .content .form-item:first-child {
	margin: 0 0 10px 0;
}

.main .widget .editor-item {
	margin: 0 0 10px 0;
}

.main .widget .element {
	background: #eee;
	padding: 10px;
	border: 1px solid #888888;
	margin: 0 0 10px 0;
}


/*	2.3.3.1 Widgets main slider
   ============================================================ */

.slider.widget .table {
	width: 100%;
}

.slider.widget .slides {
	margin: 0 10px 0 0;
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #888888;
}

.slider.widget .slides > ul {
	margin: 0;
    overflow-y: auto;
	overflow-x: hidden;
	height: 291px;
}

.slider.widget .slides.tc {
	width: 30%;
}

.slider.widget .tc {
	width: 110px;
}

.slider.widget form {
	padding: 0 10px;
	width: auto;
	display: table-cell;
}

.slider.widget .slides .button.active {
    background-color:#335599 !important;
    color:#ffffff !important;
}

.slider.widget .slides .button {
    border: none !important;
}

.slider.widget .button {
	min-width: 1.75em !important;
}

.slider.widget .content .thumb {
	margin: 18px 0 0 0;
}

.slider.widget .content .thumb.validation-form {
	background-color: #ff6040;
    border: 1px solid #d63301;
}

.slider.widget .content .form-item:first-child {
	margin: 0 0 10px 0;
}

.slider.widget .content .form-item:last-child {
	margin: 10px 0 0 0;
}

.slider.widget .content textarea {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

.slidebuttons {
	position: relative;
	display: block;
	border-top: 1px solid #888;
}

.slidebuttons .button {
	width: 1.25em;
	height: 1.7em;
	margin: 0;
}

.slidebuttons .button.new {float: left;}
.slidebuttons .button.edit {float: right;}

.slidebuttons .selector {
	display: none;
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -1px;
	border-top: 1px solid #888 ;
	z-index: 1;
	
	box-shadow:          0 -5px 5px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:     0 -5px 5px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:  0 -5px 5px rgba(0, 0, 0, 0.25);
}

/*
.slidebuttons:hover .selector {
	display: block;
}
*/

.slidebuttons .selector li span {
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: none !important;
}


/*	2.3.4 Widget images draggable z-Index fix
   ============================================================ */

li.ui-draggable {
	list-style:  none;
}

li.ui-draggable:hover {
	color: #888;
	list-style:  none;
}


/*	2.4 Login
   ============================================================ */
   
#main.login {
	background: transparent;
	color: #eee;
	margin: 4em auto 0 auto !important;
	float: none !important;
	
	box-shadow: 		none;
	-moz-box-shadow:    none;
	-webkit-box-shadow:	none;
}

#main.login .content {
	position: relative;
	height: auto;
	overflow: visible;
	padding: 10px;
}

#main.login .button {
	background: #ccc;
	color: #666;
	padding: 5px 10px;
	font-weight: bold;

	border-width: 1px;
	border-style: solid;
	border-color: #333 #333 #222;
	
	box-shadow:	0 1px 0 0 #eee inset,
				0 1px 0 0 #888;
	
	text-shadow: 0 1px 0 #eee;
}

#main.login .button:hover {
	box-shadow:	0 1px 0 0 #eee inset,
				0 1px 0 0 #888,
				0 0 5px 0 #fff;
}

#main.login .button:active {
	background: #999;
	color: #eee;
	padding: 6px 10px 4px 10px;
	
	border-color: #333 #333 #222;
	
	box-shadow:	0 2px 3px 0 #000 inset,
				0 1px 0 0 #888;
	
	text-shadow: 0 -1px 0 #222;
}

#main.login input {
	background: #eee;

	border-width: 1px;
	border-style: solid;
	border-color: #333 #333 #222;
	
	box-shadow:	0 0 3px 0 rgba(0, 0, 0, 0.5) inset,
				0 1px 0 0 #888;
}

/*	2.5 Blog
   ============================================================ */

.article .thumb.big {
	float: left;
	margin: 0 1em 1em 0;
}

.article-content > p {margin-top: 0;}

.blog .article .header {
	border-bottom: 1px solid #888;
	margin: 0 0 1em 0;
}

.blog .article .header .h3,
.blog .article .header .postinfo {
	margin: 0 0 1em 0;
}

.blog .article .header .postinfo li {
	display: inline;
	margin: 0 1em 0 0;
}


/* ============================================================
	3. Individual classes
   ============================================================ */

/*	3.1 Accordions
   ============================================================ */

.accordion {
	width: auto !important;
	border: 1px solid #888 !important;
	background: #fff;
}

.accordion h3 {
	margin: 0 !important;
	border: none;
	height: auto;
}

.accordion h3 a {
	padding: 0.5em 4.5em 0.5em 2em !important;
	font-weight: normal;
}

.accordion h3:hover a {
	color: #4466aa;
}

.accordion h3.ui-state-active a {
	color: #FFFFFF;
	text-decoration: none;
}

.accordion .accordion-content {
	margin-top: 0 !important;
	margin-bottom: 1px !important;
	background: none;
	border-width: 0 0 1px 0 !important;
	border-style: solid;
	border-color: #888;
}

.accordion .accordion-content:last-child {
	border-bottom: none !important;
}


/*	3.2 Placeholder
   ============================================================ */

.placeholder {
	background-color: transparent !important;
	border: 1px dashed #808080 !important;
	
	box-shadow:         none;
	-moz-box-shadow:    none;
	-webkit-box-shadow: none;
}

.content.sortable .placeholder {
	margin: 0 0 20px;
	list-style: none;
}

/*
.sortable-stacks .placeholder {
	background: none repeat scroll 0 0 #335599!important;
	border: 0 none!important;
	box-shadow: none;
	margin: 5px -1px 5px -1px;
	padding: 5px 0;
	width: 2px !important;
	box-shadow: 0 0 5px #335599!important;
}
*/

.sidebar .widget.active .placeholder {
	border-color: #777;
	border-width: 1px;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
}

.sidebar .widget.active .mjs-nestedSortable-error {
	background: #413333 !important;
	border-color: #ff6644 !important;
}


/*	3.3 Progressbars
   ============================================================ */

.progressbar {
	background-color: #eee;
	border: 1px solid #888;
	display: inline-block;
	height: 1em;
	width: 12em;
	vertical-align: middle;
	position: relative;
	margin: 0 5px;
	overflow: hidden;
	
	box-shadow:          0 0 7px 0 #888 inset;
	-moz-box-shadow:     0 0 7px 0 #888 inset;
	-webkit-box-shadow:  0 0 7px 0 #888 inset;
}

.progressbar-value {
	display: block;
	width: 0%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: url(/images/progressbar.png) repeat #88aaee;
	
	box-shadow:          0 0 7px 0 #888;
	-moz-box-shadow:     0 0 7px 0 #888;
	-webkit-box-shadow:  0 0 7px 0 #888;
	
	 /* Animate */
	animation:			progressbar 3s linear infinite;
	-moz-animation:		progressbar 3s linear infinite;
	-webkit-animation:	progressbar 3s linear infinite;
	-o-animation:		progressbar 3s linear infinite;
	-ms-animation:		progressbar 3s linear infinite;
	-khtml-animation:	progressbar 3s linear infinite;
}

li.upload-success:hover .progressbar.complete,
.progressbar.complete:hover {
	border: 1px solid #337733 !important;
}

li.upload-success:hover .progressbar-value,
.progressbar.complete .progressbar-value {
	background: #40bb40 !important;
}

/* Animation keyframes */
@keyframes progressbar {
	from	{ background-position: 0 0; }
	to		{ background-position: 512px 0; }
}

/* Mozilla animation keyframes */
@-moz-keyframes progressbar {
	from	{ background-position: 0 0; }
	to		{ background-position: 512px 0; }
}

/* Webkit animation keyframes */
@-webkit-keyframes progressbar {
	from	{ background-position: 0 0; }
	to		{ background-position: 512px 0; }
}

/* Opera animation keyframes */
@-o-keyframes progressbar {
	from	{ background-position: 0 0; }
	to		{ background-position: 512px 0; }
}


/*	3.4 Nav-editing
   ============================================================ */

.nav-editing {
	border-spacing: 10px;
	width: 100%;
}

.nav-editing .tc {
	vertical-align: top;
}

.nav-editing .options.widget .form-item .ibutton-container {
	float: right;
}

.nav-editing .modules {
	padding: 0;
}

.nav-editing .options {
	padding: 0;
	width: 100%;
}

.nav-editing .options .description {
	margin: 10px;
}

.modules .button {
	width: 80px;
	margin: 5px 0;
	background-color: #444 !important;
	color: #eee !important;
	border: 1px solid #444 !important;
	
	box-shadow: 0 0 5px #888;
}

.modules .button:hover {
	background-color: #777 !important;
	border: 1px solid #777;
}

.modules .button:active {
	background-color: #333 !important;
	cursor: move;
	border: 1px solid #333;
}

.modules .button.active {
	background-color: #88AAEE !important;
	color: #335599 !important;
	border: 1px solid #335599;
}


/*	3.5 Dialogs
   ============================================================ */

#dialog-progressbar.overlay,
#dialog-confirm.overlay,
#dialog-alert.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(/images/dialog-overlay.png) repeat 50% 50%;
	z-index: 10000;
}

.dialog {
	display: block;
	width: 350px;
	position: relative;
	top: 35%;
	margin: 0 auto;
	background: #eee;
	
	box-shadow:          0px 0px 20px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:     0px 0px 20px 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:  0px 0px 20px 5px rgba(0, 0, 0, 0.5);
}

.dialog.big {
	width: 75%;
	top: 15%;
}

.dialog .content {
	padding: 20px;
}

.dialog .primary-bar {
	position: relative !important;
}

.dialog .progressbar {
	width: 100%;
	margin: 10px 0 20px 0;
	overflow:hidden;
}

.dialog .content .button {
	display: inline;
}

.dialog .content .button.ok {
	border-color: #335599;
	color: #335599;
}


/*	3.6 Datepicker
   ============================================================ */

input.datepicker:hover {
	color: #335599;
}

.ui-datepicker {
	margin: 5px 0 0 0;
	padding: 0 !important;
	border: 0 !important;
	
	box-shadow:          0px 0px 8px rgba(0, 0, 0, 1);
	-moz-box-shadow:     0px 0px 8px rgba(0, 0, 0, 1);
	-webkit-box-shadow:  0px 0px 8px rgba(0, 0, 0, 1);
}

.ui-datepicker-header {
	border-width: 0 0 1px 0 !important;
	border-color: #335599 !important;
	background: #88aaee !important;
}

.ui-datepicker-title {
	color: #335599;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	top: 0 !important;
	border: 0 !important;
	height: 2.2em !important;
	width: 2.2em !important;
	cursor: pointer;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
	background-image: url("images/ui-icons_4466aa_256x240.png") !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
	background: #dfefff !important;
}

.ui-datepicker-prev:active,
.ui-datepicker-next:active {
	background: #335599 !important;
}

.ui-datepicker-prev:active .ui-icon,
.ui-datepicker-next:active .ui-icon {
	background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}

.ui-datepicker-prev {left: 0 !important;}
.ui-datepicker-next {right: 0 !important;}

.ui-datepicker-prev .ui-icon {background-position: -96px -16px !important;}
.ui-datepicker-next .ui-icon {background-position: -32px -16px !important;}

.ui-datepicker.ui-widget-content {
	background: #eee !important;
}

.ui-datepicker table {
	width: 95% !important;
	margin: 0 0.5em 0.5em !important;
}

.ui-datepicker table .ui-state-default {
	background: transparent !important;
	color: #666 !important;
	border: 0 !important;
	text-align: center;
	padding: 0.3em;
}

.ui-datepicker table .ui-state-hover {
	background: #fff !important;
	color: #666 !important;
}

.ui-datepicker table .ui-state-highlight {
	background: #ccc !important;
	color: #666 !important;
	border: 0 !important;
}

.ui-datepicker table .ui-state-active {
	background: #888 !important;
	color: #fff !important;
}


/* ============================================================
	4. Formulars
   ============================================================ */

form {
	width: auto;
}

form .button {
	display:inline-block;
}

.form-item {
	margin: 10px 0;
	position: relative;
}

.form-item.small {
	display: inline-block;
	width: 7em;
	margin-right: 1em;
}

.form-item.medium {
	display: inline-block;
	width: 20em;
	margin-right: 1em;
}

.window.login input {
	width: 100%;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
}

input, input:hover, input:active,
select,
textarea, textarea:hover, textarea:active {
	background-color: #fff;
	border: 1px solid #888;
	padding: 5px;
	color: #666;
}

select,
select option {
	background: #fff;
	color: #888;
}

select:hover, 
select:active,
select option:hover, 
select option:active {
	background-color: #88aaee;
	cursor: pointer;
	color: #335599;
}

textarea,
input {
	width: 100%;
	
    box-sizing:			border-box;
	-moz-box-sizing: 	border-box;
    -webkit-box-sizing:	border-box;
}

textarea {
	max-width: 100%;
    min-width: 100%;
}

.login input {
	width: 100%;
	
    box-sizing:			border-box;
	-moz-box-sizing:	border-box;
    -webkit-box-sizing:	border-box;
}

textarea:hover,
input:hover,
select:hover {
	background: #dfefff;
	color: #335599;
	border-color: #335599;
}

textarea {
	height: 10em;
}

input.datepicker {
	width: 7em;
	min-width: 7em;
	max-width: 7em;
	color: #888;
}

.upload-options {
	position: relative;
	top: 0;
	right: 0;
}

.upload-button {
	margin-bottom: 10px;
}


/*	4.1 Drop-area
   ============================================================ */
   
.drop-area {
	border: 1px solid #888;
	width: auto;
	margin-bottom: 10px;
	background: #fff;
	padding: 0.5em 0;
	color: #888;
	min-height: 68px;
}

.drop-area-active {
	background: #88AAEE;
	color: #335599;
}

.drop-area-active > span {
	color: #335599;
}

.drop-area-single,
.drop-area-progress {
	position: absolute;
	background-color: #fff;
	color: #888;
	opacity: 0.75;
    /*display: none;*/
    margin: 0;
    width: 100px;
	height: 100px;
	color: #4466aa;
	padding: 20px 0;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.drop-area-single {
	background-image: url(../images/arrow-270.png);
	background-position: center center;
	background-repeat: no-repeat ;
}

.drop-area-progress .upload-size {
	margin: 30px auto 0 auto;
}

.drop-area-progress .progressbar-value {
	background-color: #4466aa;
}

.drop-area-progress .progressbar {
	width: 90%;
	margin: 10px auto;
	border-color: #4466aa;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-o-box-sizing:		border-box;
	-webkit-box-sizing:	border-box;
}

.drop-area-single-active {
	display: block;
	background: #88AAEE;
	color: #335599;
}

.drop-area.full-padding {
	padding: 0.5em;
}

.drop-area h3 {
	text-align: center;
	margin-top: 0;
}

.drop-area input {
	width: 100px;
	min-width: 100px;
	max-width: 100px;
}

.drop-area ul li {
	padding: 0.25em 0.5em 0.25em 3.5em;
	position: relative;
}

.drop-area ul li:hover {
	background-color: #88aaee;
	color: #335599;
	cursor: move;
}

.drop-area ul li:hover .progressbar-value {
	background-color: #335599;
}

.drop-area ul li:hover .progressbar,
.drop-area ul li:hover .upload-input {
	border-color: #335599;
}

.drop-area .thumb.mini {
	margin: 0 5px 0 0;
	position: absolute;
	left: 0.5em;
	top: 0.25em;
	
	transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	-webkit-transition: 0.25;
}

.drop-area .upload-list li:hover .thumb.mini {
	width: 50px;
	height: 50px;
	padding: 5px;
	left: -10px;
	top: -10px;
	z-index: 1000;
}

.drop-area .thumb.mini:active {
	width: 100px !important;
	height: 100px !important;
	left: -35px !important;
	top: -35px !important;
}

.drop-area .info {
	line-height: 2.3em;
}

.drop-area .options {
	display: block;
	float: right;
}


/*	4.2 Validation
   ============================================================ */

.validation-form input {
	background: #ffccba !important;
	border: 1px solid #d63301 !important;
	color: #d63301 !important;
}

.validation-form textarea {
	background: #ffccba !important;
	border: 1px solid #d63301 !important;
	color: #d63301 !important;
}

.general-error {
	background: #ffccba !important;
	border: 1px solid #d63301 !important;
	color: #d63301 !important;
	margin: 0;
	padding: 5px;
}

.validation-message {
	color: #d63301;
}


/* ============================================================
	5. Clearfix
   ============================================================ */

/* For modern browsers */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom: 1; }



/* ============================================================
	6. Hack Area
   ============================================================ */














.thumblist li {
	list-style:none;
}


.thumbnail {
	position:relative;
	float: left;
}

.thumbnail.stack .thumb.big {
	z-index: 3;
}

.thumbnail.stack .thumb.two,
.thumbnail.stack .thumb.three {
	height: 100px;
	width: 100px;
	position: absolute;
	float: none;
}

.thumbnail.stack .thumb.two {
	top: -4px;
	left: 6px;
	width: 90px;
	height: 90px;
	z-index: 1;
}

.thumbnail.stack .thumb.three {
	top: -2px;
	left: 3px;
	width: 95px;
	height: 95px;
	z-index: 2;
}

.thumbnail.stack .thumb.two img{
	width: 90px;
	height: 90px;
}

.thumbnail.stack .thumb.three img {
	width: 95px;
	height: 95px;
}

.thumbnail.stack.active .thumb.big {
	margin: 5px 5px 13px;
	z-index: 6;
}

.thumbnail.stack.active .thumb.two {
	z-index: 4;
	
	-moz-transform:		scale(1.11) rotate(15deg) translate(15px, -3px);
	-webkit-transform:	scale(1.11) rotate(15deg) translate(15px, -3px);
	-o-transform:		scale(1.11) rotate(15deg) translate(15px, -3px);
	transform:			scale(1.11) rotate(15deg) translate(15px, -3px);
}


.thumbnail.stack.active .thumb.three {
	z-index: 5;
	
	-moz-transform:		scale(1.05) rotate(-15deg) translate(-16px, -7px);
	-webkit-transform:	scale(1.05) rotate(-15deg) translate(-16px, -7px);
	-o-transform:		scale(1.05) rotate(-15deg) translate(-16px, -7px);
	transform:			scale(1.05) rotate(-15deg) translate(-16px, -7px);
}

.thumbnail.stack.closing .thumb.big {
	z-index: 6;
}

.thumbnail.stack.closing .thumb.two {
	z-index: 4;
}

.thumbnail.stack.closing .thumb.three {
	z-index: 5;
}

.thumb .imagecount {
	display: block;
	position: absolute;
	top: -4px;
	right: -4px;
	width: 1em;
	height: 1em;
	background: #b30;
	padding: 3px;
	font-weight: bold;
	border: 2px solid #fff;
	color: #fff;
	
	border-radius:			2em;
	-webkit-border-radius:	2em;
}

.thumb .imagecount .number {
	display: block;
    margin: -2px 0 0;
}

.thumbnail.stack.active .imagegroup {
	height: 140px;
	padding: 10px;
}

.imagegroup,
.thumbnail.stack .thumb.two,
.thumbnail.stack .thumb.three,
.thumbnail.stack.active .thumb.two,
.thumbnail.stack.active .thumb.three,
.thumbnail.stack.active .thumb.big,
.thumbnail.stack .thumb.big,
.thumbnail.stack .active-stack,
.thumbnail.stack.active .active-stack {

transition-property:			width, height, margin, padding, bottom, opacity, transform;
-moz-transition-property:		width, height, margin, padding, bottom, opacity, transform;
-webkit-transition-property:	width, height, margin, padding, bottom, opacity, transform;
-o-transition-property:			width, height, margin, padding, bottom, opacity, transform;

transition-duration:			0.25s;
-moz-transition-duration:		0.25s;
-webkit-transition-duration:	0.25s;
-o-transition-duration:			0.25s;
}

.thumbnail.stack.active .active-stack {
	bottom: -24px;
	opacity: 1.0;
}

.thumbnail.stack .active-stack {
	display: block;
	height: 24px;
    width: 100%;
	position: absolute;
	bottom: -16px;
	background: url(images/active-stack.png) no-repeat bottom center transparent;
    opacity: 0;
}

.thumbnail.stack.active .active-stack.disabled {
	display: none;
}

.imagegroup.active {
	margin-bottom: 10px;
	padding: 10px;
}

.imagegroup {
	height: 0;
	width: 964px;
	background: #888888;
	margin: 0 0 0 -10px;
	padding: 0 10px;
	overflow: hidden;
	
	box-sizing:			border-box;
	-moz-box-sizing:	border-box;
	-webkit-box-sizing:	border-box;
	
	box-shadow:          0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
	-moz-box-shadow:     0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
	-webkit-box-shadow:  0px 0px 5px 3px rgba(0, 0, 0, 0.5) inset, 0 1px 0 0 #888888;
}

.imagegroup .placeholder {
	border-color: #CCCCCC !important;
}