@import "definitions.css.scss";
@import "font.css.scss";


@mixin down-arrow($image: "/@spontaneous/static/orange-down-arrow-395ae1929e8662b2ff0977daf12c35bb.png", $height: 7px) {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	bottom: 0 - $height;
	height: $height;
	background: url($image) 50% 0 no-repeat;
}

.no-select {
	@include no-select;
}
.preview-label {
	@include interface;
	color: #333333;
}

.preview-value {
	font-size: $field-preview-font-size;
	font-family: $content-font-family;
	// line-height: $field-preview-font-size + 4;
	line-height: 1.4em;
	color: #666666;
	font-weight: normal;
}

.container-padding {
	padding-left: $container-padding;
	padding-right: $container-padding;
}


img.missing {
	width: 100%;
	height: 50px;
	background: url("/@spontaneous/static/missing-911ce6dbd9f4602e0f3fbcd7e78846a2.png") 50% 50% no-repeat;
	border: none;
	// display: none;
}

.clear {
	clear: both;
}


#top {
	@extend .container-padding;
	@extend .controls-gradient;
	@extend .clearfix;
	@include display-box;
	@include box-align(center);
	position: fixed;
	height: 31px;
	top: 0;
	right: 0;
	left: 0;
	#navigation {
		@include box-flex;
		font-size: 11px;
		font-weight: bold;
		color: #999999;
		width: 100%;
		li {
      @include no-select;
			padding-left: 10px;
			padding-right: 15px;
			background: url("/@spontaneous/static/location-arrow-c1c1d3ca472481c61a0a5f8cb289d743.png") right 0 no-repeat;
			float: left;
			display: block;
			font-weight: bold;
			select {
				@include box-sizing;
				@include interface;
				text-transform: none;
				font-size: 11px;
        line-height: 13px;
				-webkit-appearance: none;
				cursor: pointer;
				display: block;
				background: url("/@spontaneous/static/select-arrow-6e7dd3745b00e934b0d7a3250c46558b.png") 95% 50% no-repeat;
				border: none;
				outline: none;
				position: relative;
				padding-top: 0px;
				padding-right: 25px;
				height: 31px;
				color: #ccc;
				font-weight: bold;
				width: 100%;
			}
			select.unselected {
				color: #888;
				font-weight: normal;
				font-style: italic;
				max-width: 80px;
			}
			a {
				@include box-sizing;
				cursor: pointer;
				// color: #888888;
				color: #ddd;
				height: 31px;
				padding-top: 9px;
				display: block;
				background: url("/@spontaneous/static/select-arrow-6e7dd3745b00e934b0d7a3250c46558b.png") right 50% no-repeat;
				padding-right: 20px;
			}
			a:hover, select:hover {
				color: white;
			}
		}
		li.root a {
			background-image: none;
			padding-right: 5px;
		}
	}
  #spontaneous-root {
    background-image: url("/@spontaneous/static/spontaneous-states-e91ec89db525c62da0105b97cdd781ce.png"), url("/@spontaneous/static/location-arrow-c1c1d3ca472481c61a0a5f8cb289d743.png");
    background-position: 0 5px, right 0;
    background-repeat: no-repeat;
    padding-right: 12px;
    cursor: pointer;
    height: 31px;

    span {
      padding-right: 28px;
    }
    &:hover {
      background-position: 0 -83px, right 0;

    }

    &.active {
      background-position: 0 -39px, right 0;
    }
  }
  #service-outer {
		@include box-flex;
  }
  #cms-navigation-view {
    @include display-box;
    @include box-align(center);
  }
  #service-navigation {
    @include display-box;
    @include box-align(center);
    h2 {
      @include box-flex;
      @include interface;
      text-transform: none;
      font-size: 11px;
      padding-left: $unit;
      color: #fff;
      font-weight: bold;
    }
    a {
      display: block;
      width: 64px;
    }
  }
	#switch-mode, #open-publish {
		@include button;
		@include display-box;
		@include box-orient(vertical);
		@include box-align(center);
		margin: 0;
		width: 70px;
	}
	#open-publish {
		position: relative;
		margin-right: $unit;
		#publish-progress {
			position: absolute;
			left: 4px;
			top: 1px;
		}
		&.disabled {
		}
	}
	#open-publish.progress {
		padding-left: 20px;
		padding-right: 20px;
		width: 124px;
		@include button-color(#666666);
		color: #999999;
	}
}

#content-outer {
	background: url(/@spontaneous/static/texture-03f7627e8264b1d607113ab32c593a58.png) repeat;
	color: #fff;
	font-size: 16px;
	position: fixed;
	top: 31px;
	right: 0;
	bottom: 0px;
	left: 0;
	#content {
		background-color: white;
		overflow: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	#data_pane,
  #preview_pane,
  #services_pane {
		border: none;
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
}

#page-content {
	#page-info {
		@extend .container-padding;
		@include vertical-gradient(#3a3a3a, #222222);
		height: 64px - 10px;
		padding-top: 10px;
		position: relative;
		h1, h3 {
			position: relative;
		}
		h1 {
			font-family: $headline-font-family;
			font-weight: 100;
			color: white;
			font-size: 24px;
			line-height: 21px;
			span {
				color: #888888;
			}
		}
		.path, .path h3, .path h3.developer a {
			@include interface;
			cursor: pointer;
			color: #c1c1c1;
			font-size: 11px;
			line-height: 12px;
			text-transform: none;
		}
		.path .uid, .path .developer {
			// @include rounded;
			// background-color: rgba(0, 0, 0, 0.4);
			// padding: $unit/2;
			margin-left: $unit*4;
			opacity: 0.5;
			&.missing {
				opacity: 0.5;
			}
		}
		& > .path {
			@include display-box;
			position: absolute;
			bottom: 12px;
		}
    .path .titlesync {
      margin-left: $unit;
      margin-right: 10 *$unit;

			position: relative;
      a {
        position: absolute;
        top: 2px;
        position: absolute;
        background: url(/@spontaneous/static/loop_alt1-white-7894b458528e92216196cae26b4c2c96.svg) no-repeat;
        // background-size: 36% 45%;
        background-size: contain;
        width: 20px;
        height: 12px;
        opacity: 0.3;
        &:hover {
          opacity: 1.0;
        }
      }
    }
		.path .edit {
			@include display-box;
			@include box-orient(horizontal);
			@include box-align(center);
			.input-error {
				display: block;
				position: relative;
				top: 0;
				vertical-align: top;
				margin-left: 8px;
				input[type="text"], span {
					height: 16px;
					padding: 4px;
				}
				input[type="text"] {
					@include rounded;
					font-weight: bold;
					width: 400px;
					border: none;
					outline: none;
					vertical-align: top;
				}
				span {
					@include rounded-right;
					padding-left: 8px;
					padding-right: 8px;
					background-color: $error;
					position: absolute;
					right: -1px;
					top: 0;
					color: white;
				}
			}
			input[type="text"].error {
				color: $error;
			}
			.input-error.uid-input {
				input[type="text"] {
					padding-left: 1.05em;
					width: 200px;
				}
			}
			.button {
				display: block;
				margin-left: 8px;
				padding-left: 32px;
				padding-right: 32px;
			}
			.button.cancel {
				padding-left: 10px;
				padding-right: 10px;
			}
			span, a.path {
				display: block;
				position: relative;
			}
			a.path {
				color: #c1c1c1;
				margin-right: 1px;
				&:hover {
					color: white;
				}
			}
			span {
				color: #bbbbbb;
				margin-right: 1px;
			}
			.hash {
				color: #666;
				position: absolute;
				left: 4px;
				font-weight: bold;
				padding-top: ($unit/2)+1;
			}
		}
		.path h3:hover {
			color: white;
		}
		.buttons {
			position: absolute;
			right: $container-padding;
			top: 16px;
			.button.publish {
				width: 120px;
				height: 32px;
				padding-top: 8px;
				background-color: #666666;
				font-size: 12px;
				position: relative;
			}
			.button.publish:hover {
				background-color: $highlight;
			}
			.status {
				@include interface;
				vertical-align: top;
				display: inline-block;
				text-transform: none;
				font-weight: normal;
				margin: 0;
				padding: 0;
				color: #666666;
				font-size: 10px;
				line-height: 11px;
				position: relative;
				top: 5px;
				margin-right: 8px;
				strong {
					display: block;
					text-transform: uppercase;
				}
			}
		}
	}
	#page-fields {
		.fields-preview {
			@extend .container-padding;
			padding-top: 8px;
			padding-bottom: 8px;
			position: relative;
			.overlay {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				border-style: solid;
				border-width: 2px;
				border-color: transparent;
			}
			&.hover {
				.overlay {
					border-color: $action;
				}
			}
		}
	}
}

.fields-preview {
	@extend .clearfix;
	@include box-sizing;
	@include display-box;
	@include box-orient(horizontal);
	@include box-align(stretch);
	@include box-pack(top);
	background-color: #fff;
	// border: solid 3px transparent;
	cursor: pointer;
}

// .fields-preview:hover {
//   border-color: $action !important;
//}

.fields-preview .value p {
	margin: 0 0 8px 0;
	padding: 0;
}

.fields-preview .value p:last-child {
	margin-bottom: 0;
}

.fields-preview .fields-preview-text {
	@include box-sizing;
}
.fields-preview-text {
	&.empty {
		display: none;
	}
	@include box-sizing;
	width: $field-text-preview-width;
	// float: left;
	margin-right: 16px;
	li {
		@include display-box;
		@include box-orient(horizontal);
		@include box-align(stretch);
		@include box-pack(top);
		@extend .clearfix;
		border-bottom: solid 1px $entry-background-colour;
		padding-top: 3px;
		padding-bottom: 3px;
		line-height: $field-preview-font-size + 2;
		font-size: $field-preview-font-size;
		font-family: $content-font-family;
		width: 100%;
		position: relative;
		.name, .value {
			// float: left;
			display: block;
		}
	}
	li:last-child {
		border-bottom: none;
	}
	.name {
		@extend .preview-label;
		@include box-sizing;
		// @include
		width: 100px;
		// right: 100px;
		// margin-left: -100px;
		padding-right: $unit;
		padding-top: 2px;
	}
	.value {
		@extend .preview-value;
		@include box-flex;
		a {
			color: $highlight;
		}
		h1, h2 {
			font-size: 1.2em;
			font-weight: bold;
			margin-bottom: 1em;
		}
		h2 {
			font-size: 1em;
		}
		ul, ol {
			display: block;
			padding-left: 1.4em;
			margin-bottom: $unit;

			li {
				display: list-item;
				list-style-position: outside;
				border: none;
				margin: 0;
				padding: 0;
				float: none;
			}
		}
		ul {
			list-style-type: disc !important;
		}
		ol {
			list-style-type: decimal !important;
		}
	}
}

.fields-preview-image {
	&.empty {
		display: none;
	}
	@extend .clearfix;
	@include box-flex;
	// float: left;
	width: $field-image-preview-width;
	li {
		float: left;
		display: block;
		margin-right: 4px;
		margin-bottom: 4px;
		position: relative;
		width: 49%;
		max-width: 150px;
		min-width: 90px;
		// size restrictions are mostly to stop the images getting too tall
		// so for landscape images we can increase the size bounds a bit
		&.landscape {
			max-width: 250px;
			min-width: 179px;
		}
		.name {
			@extend .preview-label;
			@include image-overlay;
			@include box-sizing;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: auto;
			height: 16px;
			z-index: 4;
		}
		.value {
			@include rounded;
			background-color: #efefef;
			// max-height: 90px;
			min-height: 45px;
			min-width: 90px;
			cursor: pointer;
			text-align: center;
			position: relative;
			.waiting {
				position: absolute;
				display: block;
				left: 0;
				right: 0;
				text-align: center;
				top: 30%;
				height: $unit*2;
				z-index: 3;
			}
			.image-drop {
				@include rounded;
				z-index: 100;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				text-align: center;
				.drop-upload-outer {
					@include rounded(4px);
					border: solid 1px white;
					position: absolute;
					margin: 4px;
					height: 6px;
					left: 0;
					right: 0;
					bottom: 50%;
					padding: 0 1px;
					.drop-upload-inner {
						position: relative;
						margin-right: 2px;
						top: 1px;
						@include rounded(3px);
						background-color: white;
						height: 4px;
					}
				}
			}
			.image-drop.drop-active {
				border: solid 2px $action;
				cursor: copy;
			}
			.image-drop.drop-invalid {
				cursor: no-drop;
			}
			.image-drop.uploading {
				background-color: rgba(0, 0, 0, 0.5);
			}
			img {
				@include no-select;
				@include rounded;
				position: relative;
				max-height: 100%;
				width: 100%;
				display: block;
			}
			.missing-image {
				width: 90px;
				max-width: 90px;
				max-height: 90px;
			}
			img:hover {

			}
		}
	}
}

.fields-preview-text + .fields-preview-image {}

.file-field {
	@extend .preview-value;
	position: relative;
	width: 100%;

	@include display-box;
	@include box-pack(center);

	.file-drop {

		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border: solid 1px transparent;
		&.drop-active {
			border-color: $action;
		}
		z-index:1;

		.drop-upload-outer {
			@include rounded(4px);
			border: solid 1px #333;
			position: absolute;
			height: 7px;
			left: 0;
			right: 0;
			top: 2px;
			padding: 0 1px;

			.drop-upload-inner {
				@include rounded(3px);
				position: relative;
				margin-right: 2px;
				top: 1px;
				background-color: #333;
				height: 5px;
			}
		}
	}

	.filename, .filesize {
		@include box-flex(1);
		@include interface;
		text-transform: none;
		position: relative;
		top: -1px;
		z-index:0;
	}
	.filename {
		@include box-flex(2);
		word-wrap: break-word;
		font-style: italic;
		// max-width: 90%;
		overflow: auto;
		height: auto;
	}
	.filesize {
		text-align: right;
		min-width: 40px;
	}
	&.uploading {
		.filename, .filesize {
			display: none;
		}
	}
}

.editing-panel .field-group .fieldtypes-filefield {
	.value {
		// padding: 0;
	}
	.file-field {
		// height: 36px;
		cursor: pointer;

		.file-drop:hover {
			// border-color: $action;
		}
		.filename, .filesize {
			margin-top: 3px;
		}
		.filesize {
			padding-right: $unit/2;
		}
		.filename {
			padding-left: $unit/2;
		}
		.choose {
			@include button(#333);
			display: block;
			padding-left: 6px;
			padding-right: 6px;
		}
		&:hover .choose {
			@include button;
		}
	}
}

#page-slots.slots {
	height: 100%;

	.slot-tabs {
		@extend .clearfix;
		height: 32px;
		vertical-align: top;
		@include vertical-gradient(#666666, #4d4d4d);
		li {
			@include box-sizing;
			@include interface;
			font-size: 11px;
			color: #dddddd;
			display: block;
			float: left;
			height: 100%;
			padding-left: 16px;
			width: 160px;
			padding-top: 9px;
			cursor: pointer;
			border-left: solid 1px transparent;
			border-right: solid 1px #494949;
			position: relative;
			.down {
				display: none;
			}
		}
		li:hover, li.active {
			@include vertical-gradient($highlight + #111111, $highlight);
			background-color: $highlight;
			color: white;
			border-right-color: $highlight;
			.down {
				@include down-arrow("/@spontaneous/static/orange-down-arrow-395ae1929e8662b2ff0977daf12c35bb.png", 7px);
				z-index: 100;
				display: none;
			}
		}
		li:first-child {
			padding-left: $container-padding;
			width: 160px + $container-padding;
			&.active {
				.down {
					padding-left: $container-padding;
				}
			}
		}
		li.active + li:hover {
			border-left-color: $highlight - #151515;
		}
	}
	.fields-preview.depth-box {
		@extend .container-padding;
		@include vertical-gradient(#eeeeee, #dddddd);
		@include display-box;
		border-top: solid 1px #CCC;
		position:relative;
		padding-top: 12px;
		padding-bottom: 5px;
		.overlay {
			position: absolute;
			left: 0;
			right: 0;
			top: -1px;
			bottom: 0;
			border-style: solid;
			border-width: 2px;
			border-color: transparent;
		}
		&.hover {
			.overlay {
				border-color: $action;
			}
		}
		&:hover {
			// border-top-color: $action;
			// border-bottom-color: $action;
		}
		.value {
			color: #555555;
		}
		.fields-preview-text {
			// @include box-flex;
			// width: 60%;
		}
		.fields-preview-image {
			@include box-flex;
			// width: 40%;
		}
	}
	.slot-addable {
		@extend .container-padding;
		@include box-sizing;
		// @include vertical-gradient($slot-addable-colour, $entry-background-colour);
		background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
		border-top: solid 1px #cccccc;
		text-align: center;
		height: auto;
		padding-top: 8px;
		padding-bottom: 8px;
		position: relative;
		a {
      $add-pad: $unit * 1.5;
			@include button;
      padding-left: $add-pad + $unit;
			padding-right: $add-pad;
			margin-right: 4px;
			margin-left: 4px;
      position: relative;
      min-width: 84px;
      &:before {
        @include awesome-icon("\f063");
        position: absolute;
        left: $unit/2;
        // width: $unit*2;
      }
		}
		// a:hover {
			//   background-color: $highlight;
			//   color: white;
		// }
		a + a {
		}
		.alias {
			font-style: italic;
		}
		.down {
			@include down-arrow("/@spontaneous/static/slot-down-arrow-59ad5f5ee5b52a7ebd00bca4b3104194.png", 18px);
			display: none;
		}
	}
	.slot-addable.floating {
		// @include vertical-gradient($entry-background-colour, $slot-addable-colour);
		// @include corners;
		// margin-top: 10px;
		background: none;
		// margin-left: $container-padding;
		// margin-right: $container-padding;
		border-top: 0;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		text-align: center;
		background: url("/@spontaneous/static/plus-box-dcde74a1e496f68298c9b443caa1c5d5.png") 10px 7px no-repeat;
    height: auto;

		.down {
			display: none;
		}
	}
	.slot-instructions {
		@include header;
		position: absolute;
		left: 0;
		right: 0;
		top: $container-padding;
		display: none;
		text-align: center;
		color: #ccc;
	}
	.slot-addable.drop-active {
		outline: solid 2px $action;
	}
	.slot-content.empty {
		.slot-instructions {
			display: block;
		}
		.slot-addable.bottom {
			// display: none;
		}
	}
}


#page-slots.slots .slot-entries {
	padding-top: 32px;
	padding-bottom: 50%;
	position: relative;
	.fields-preview {
		@include rounded;
		padding: 4px;
		background: none;
		background-color: white;
	}
	.entry-wrap {
		@extend .clearfix;
		position: relative;
		margin-left: $container-padding - 6;
		margin-right: $container-padding;
		.entry-contents {
			@include rounded;
			background-color: $entry-background-colour;
			padding: 2px;
			// padding-top: $title-bar-height + 4px;
		}
		.entry-spacer {
			height: $entry-gap;
			position: relative;
		}
		.entry-spacer.add-entry {
			background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
			margin: 0 4px;
			cursor: pointer;
		}
		.entry-inner {
			@extend .clearfix;
			@include rounded;
			// background-color: gray;
			// padding: $unit;
			position: relative;
      padding-bottom: $unit;
		}
		.title-bar {
			// @include vertical-gradient(gray + #111111, gray);
			@include box-sizing;
			@include rounded-right;
			@include interface;
			$title-bar-width: 20px;

			// background-color: rgba($entry-background-colour, 0.6);
			background-color: transparent;


			width: $title-bar-width;
			color: rgba(255, 255, 255, 0.4);
			padding-top: 4px;
			// padding-left: $unit/2 + 2px;
			text-transform: none;
			font-weight: normal;
			cursor: ns-resize;
			position: absolute;
			left: auto;
			right: -$title-bar-width;
			// top: $unit/2;
			top: -3px;
			// height: $title-bar-height;
			height: auto;
			.actions {
				@include display-box;
				@include box-orient(vertical);
				@include rounded-bottom;
				top: $unit/2;
				a {
					display: inline-block;
          position: absolute;
					width: 15px;
					height: 15px;
					position: relative;
					cursor: pointer;
          color: $entry-background-colour - #111;
          font-size: 14px;
				}
        a:before {
          @include awesome-icon("\f057");
          position: absolute;
          left: 3px;
          top: 2px;
        }
        a:hover {
          color: $highlight;
        }
				.delete:before {
          font-size: 18px;
				}
				// .delete:hover {
					// background-position: -61px -20px;
				// }
				.visibility:before {
          content: "\f070";
					// background-position: -32px 0;
				}
				.visibility:hover {
					background-position: -32px -20px;
				}
			}
		}
		.dialogue {
			@include rounded-bottom;
			@extend .shadow;
			position: absolute;
			top: $title-bar-height + 4;
			left: 4px;
			right: 4px;
			background-color: rgba(0, 0, 0, 0.9);
			z-index: 30;
			padding: $container-padding / 2;
			color: white;
			.buttons {
				a {
					@include button(#cccccc);
					// background-color: ;
					padding-left: 16px;
					padding-right: 16px;
				}
				a + a {
					margin-left: 8px;
				}
				a.default {
					background-color: $action;
				}
			}
		}
		.white-bg, .grey-bg {
			@include box-sizing;
			// @include rounded;
			position: absolute;
			left: 0px;
			right: 40%;
			// top: $title-bar-height;
			top: 0;
			bottom: 0px;
			margin: 0;
			background-color: white;
			z-index: 1;
		}
		.white-bg {
			@include corners($corner-radius - 1, 0, 0, $corner-radius - 1);
			border-width: 2px;
			border-color: transparent;
			border-style: solid;
		}
		.white-bg.active {
			border-color: $action;
		}
		.grey-bg {
			@include corners(0, $corner-radius, $corner-radius, 0);
			left: auto;
			width: 40%;
			right: 0;
			// background-color: #6b6b6b;
			background-color: $entry-background-colour;

			margin-left: 0;
		}
		.entry {
			@include rounded;
			@include box-sizing;
			position: relative;
			z-index: 2;
			float: left;

			.fields-preview {
				@include rounded;
				// margin-right: 3px;
				padding: 4px;
				background: none;
				border-color: white;
			}
			.fields-preview-text {
				width: 100%;
				position: relative;
				margin-bottom: 0;
				@include box-sizing;
				li {
					@include box-sizing;
				}
			}
		}
		.slots {
			@include box-sizing;
			position: relative;
			padding-left: 0;
			float: left;
			width: 40%;
			z-index: 2;
			left: 1px; // kludge (rounding errors?)
			.slot-tabs {
				@extend .clearfix;
				@include rounded-top;
				@include box-sizing;
				height: 24px;
				display: block;
				margin-right: 1px;
				width: 100%;
				background: none;
				li {
					@include box-sizing;
					@include interface;
					float: left;
					width: 25%;
					height: 100%;
					display: block;
					padding-left: 8px;
					padding-top: 6px;
					cursor: pointer;
					border-right: solid 1px darken($slot-addable-colour, 15%);
					background-color: darken($slot-addable-colour, 10%);
					color: #666666;
					// color: #f2f2f2;
				}
				li:first-child {
					// @include rounded-top-left;
				}
				li:nth-child(4) {
					// @include rounded-top-right;
					float: right;
					position: relative;
					border-right: none;
				}
				li:hover {
					background-color: $highlight;
					border-right-color: $highlight;
					color: #fff;
				}
				li.active:hover, li.active {
					background: $slot-addable-colour none;
					border-right: solid 1px darken($slot-addable-colour, 0%);
					// color: white;
					color: #666666;
				}
				li:hover + li:nth-child(4) {
					border-left-color: $highlight;
				}
				li:last-child {
					border-right: none;
				}
				li .down {
					display: none;
				}
			}
			.slot-addable {
				@include interface;
				@include box-sizing;
				border: none;
				background: none;
				// background-color: #565656;
				// background-color: (darken($entry-background-colour, 10%));
				background-color: $slot-addable-colour;
				height: 33px;
				padding: $unit 8px 0 8px;
				a {
					@include button(#6b6b6b);
					// background-color: #6b6b6b;
					padding-left: 8px;
					padding-right: 8px;
					& + a {
						margin-left: $unit;
					}
				}
				.alias {
					font-style: italic;
				}
				// a:hover {
					//   background-color: $highlight;
				//}
				.down {
					display: none;
				}
			}
			.slot-entries {
				padding-top: 8px;
				padding-bottom: 8px;
			}
			.entry-wrap.depth-2 {
				// padding-top: $title-bar-height + ($unit/2);
				margin-left: $unit;
				margin-right: 20px;
				margin-bottom: $unit;
				.white-bg {
					@include rounded($radius - 1);
					width: auto;
					right: 0;
				}
				.grey-bg {
					display: none;
				}
				.entry-contents {
					// padding: $unit/2 $unit/2;
					padding: 0;
				}
				.entry-spacer {
					height: $unit;
				}
				&:last-child .entry-spacer {
					outline: solid 1px red;
					display: none;
				}
				.entry {
					@include rounded;
					width: 100%;
					.fields-preview {
						@include rounded;
						padding: 4px;
						background: none;
						// background-color: white;
						// border-color: white;
						width: 100%;
						display: block;
						.fields-preview-text {
							width: 100%;
							margin-bottom: 0;

						}
						.fields-preview-image {
							float: none;
							width: 100%;
							margin-left: 0;
							margin-top: $unit/2;
							padding-top: $unit/2;
						}
						.fields-preview-text.empty + .fields-preview-image {
							margin-top: 0;
						}
					}
				}
				.entry + .entry {
					margin-top: 8px;
				}
			}
		}
		.alias-target {
			@include rounded-top;
      position: relative;
			padding: $unit/2;
			background-color: #444;
			color: white;
			font-size: $target-name-size;
			font-style: italic;
      cursor: pointer;
			&.no-fields {
				@include rounded;
			}
			&:hover {
				color: $highlight;
			}
      .content-type {
        @include interface;
        position: absolute;
        right: $unit;
        top: 5px;
        font-style: normal;
        color: rgba(255, 255, 255, 0.4);
        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
			.icon-wrap, a {
				display: inline-block;
				vertical-align: top;
				cursor: pointer;
			}
			.icon-wrap {
				margin-right: $unit;
			}
		}
		&.no-boxes {
			.white-bg {
				// @include rounded(0 0 $radius $radius);
				@include rounded($radius - 1);
				right: 0;
			}
			.grey-bg {
				display: none;
			}
			.entry {
				// @include box-flex;
				width: 100%;
				.fields-preview {
					@include display-box;
					.fields-preview-text {
						// @include box-flex;
						// width: 60%;
						width: $field-text-preview-width;
						max-width: $field-text-preview-width;
						padding-right: 0;
					}
					.fields-preview-image {
						@include box-flex;
						width: 40%;
					}
				}
			}
		}
	}
	.entry-wrap.hidden {
		opacity: 0.4 !important;
    .actions {

      .visibility:before {
        content: "\f06e";

      }
    }
	}
	.entry-wrap.editing.hidden {
		opacity: 1 !important;
	}
	.entry-wrap.page {
		.white-bg {
			@include corners(0, 0, $corner-radius, $corner-radius);
			right: 0;
		}
		.page-title {
			@include rounded-top;
			background-color: #444;
			padding: $unit/2;
      cursor: pointer;
			a {
				cursor: pointer;
				font-family: $headline-font-family;
				font-weight: 100;
				color: #fff;
				font-size: 16px;
				line-height: normal;
			}
      &:hover a, a:hover {
        color: $highlight;
      }
      .content-type {
        @include interface;
        position: absolute;
        right: $unit;
        top: $unit+1;
        color: rgba(255, 255, 255, 0.4);
        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
		}
	}
	.entry-wrap.ui-sortable-helper > .entry-contents {
		@extend .shadow;
	}
	.entry-wrap.boxes.depth-1 .entry {
		width: 60%;
		.fields-preview.depth-1 {
			.fields-preview-text {
				margin-right: -110px;
				padding-right: 110px;
			}
			.fields-preview-image {
				width: 94px;
				float: right;
				img {
					max-width: 94px;
				}
				li {
					margin-right: 0;
				}
				li:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
}
#page-content.hidden .slot-entries .entry-wrap.hidden {
	opacity: 1.0 !important;
}

#dialogue-overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.9);
	z-index: 1000;
}


#editing {
	@extend .dialogue-wrapper;
	@extend .clearfix;
	z-index: 1001;
	// background-color: #5b5b5b;
	// background-color: #f0d5a9;
	@extend .shadow;
	.button {
		background-color: $editing;
	}
	.field-group-bg {
		@include rounded;
		// background-color: #6b6b6b;
		position: absolute;
		margin: 8px;
		top: 0px;
		bottom: 0px;
	}
	.field-group-bg.text {
		left: 0;
		right: 343px;
	}
	.field-group-bg.image {
		left: 629px;
		right: 0;
	}
	input[type="submit"] {
		visibility: hidden;
		position: absolute;
		width: 0;
		height: 0;
	}
	.field-group {
		position: relative;
		z-index: 1010;
		float: left;
		// margin: 8px 0 0 8px;
		padding: 8px;
		// margin-top: 8px;
		// margin-bottom: 8px;
		.field + .field {
			margin-top: 8px;
		}
		.name {
			@include rounded-top;
			@include box-sizing;
			@include interface;
			background-color: #d1d1d1;
			display: block;
			height: 24px;
			padding-left: 8px;
			padding-top: 6px;
		}
		.value {
			@include rounded-bottom;
			border: solid 2px transparent;
			padding: 6px;
			background-color: white;
			textarea, input[type="text"] {
				font-family: $input-font-family;
				font-size: 11px;
				line-height: 14px;
				outline: none;
			}
			input[type="file"] {
				visibility: hidden;
				position: absolute;
				width: 0;
				height: 0;
			}
			textarea {
				@include box-sizing;
				border: none;
				width: 100%;
				padding-right: 64px;
			}
			input[type="text"] {
				@include box-sizing;
				width: 100%;
				border: none;
				display: block;
				font-weight: bold;
			}
		}
		.field.focus {
			.name {
				background-color: $editing;
				color: white;
			}
			.value {
				border-color: $editing;
			}
		}
	}
	// .field-group.text {
		//   // width: 621px;
		//   width: 100%;
	// }
	.field-group.image {
		width: 327px;
		.field .value {
			position: relative;
			min-height: 70px;
			img {
				max-width: 50%;
			}
			img.empty {
				width: 50%;
				height: 100px;
			}
			.actions {
				margin: 8px;
				margin-left: 0;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 109px;
				.button {
					display: block;
				}
				.button.clear {
					color: #5b5b5b;
					background-color: #d1d1d1;
					position: absolute;
					bottom: 0;
					width: 100%;
				}
			}
			.landscape {
				img {
					max-width: 100%;
					max-height: 50%;
				}
				.actions {
					width: auto;
					display: block;
					margin: 8px 0 0 0;
					position: relative;
					.button {
						display: inline-block;
						width: 109px;
					}
					.button.clear {
						position: static;
					}
					.button.change {
						position: absolute;
						right: 0;
					}
				}
			}
		}
	}
}

#status-bar {
	@extend .container-padding;
	@include box-sizing;
	@extend .controls-gradient;
	@extend .shadow;
	position: fixed;
	height: 32px;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #cccccc;
	z-index: 100000;
	#progress-container {
		position: relative;
		top: 12px;
		font-size: 10px;
		color: #888888;
		#progress-bars {
			@include rounded;
			position: relative;
			width: 50%;
			height: 8px;
			border: solid 1px #151515;
			.bar {
				@include rounded;
				height: 8px;
				padding: 0;
				background-color: black;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.7;
			}
			#progress-individual {
				opacity: 0.3;
			}
			#progress-total {
				background-color: #fff;
			}
		}
		#progress-name {
			position: absolute;
			right: 2*$unit;
			top: -1px;
			text-align: right;
		}
		#progress-stats {
			position: absolute;
			left: 50%;
			top: -1px;
			margin-left: 10px;
		}
	}
}

#script-load-splash {
	$progress-color: #dddddd;
	background: url("/@spontaneous/static/splash-65b493a714df9b8b3ab170103401b53d.png") 0 0 no-repeat;
	width: 318px;
	height: 43px;
	position: relative;
	margin: 0 auto;
	top: 150px;
	#script-load-progress {
		@include rounded(8px);
		position: relative;
		left: -31px;
		top: 64px;
		border: solid 1px $progress-color;
		padding: 1px;
		width: 380px;
		height: 4px;
		div {
			@include rounded(6px);
			background-color: $progress-color;
			height: 4px;
		}
	}
	#script-load-progress.synchronous {
		border: none;
		color: $progress-color;
		top: 44px;
		left: 47px;
	}
}

#script-load-splash.loaded {
	background-position: 0 -80px;
}

.icon-wrap {
	overflow: hidden;
	position: relative;
	img {
		position: relative;
	}
}
.content-type.piece {
  @include interface;
  height: 0;
  overflow: visible;
  position: absolute;
  top: auto;
  bottom: $entry-gap + ($unit * 2);
  right: $unit;
  left: auto;
  color: rgba(0, 0, 0, 0.3);
  z-index: 21;
  &:hover {
    color: rgba(0, 0, 0, 0.5);
  }
}
@import "dialogue.css.scss";
@import "popover.css.scss";
@import "editing.css.scss";
@import "add_alias_dialogue.css.scss";
@import "developer.css.scss";
@import "meta.css.scss";
@import "jquery-ui-1.8.21.custom/ui-lightness.css.scss";