spontaneous 0.1.0.alpha1

data/application/css/v2.scss

@@ -0,0 +1,1606 @@
+@import "definitions";
+
+@mixin image-overlay {
+	opacity: 0.7;
+	color: black;
+	padding-left: 4px;
+	padding-top: 2px;
+	background-color: #efefef;
+}
+
+
+
+@mixin down-arrow($image: "/@spontaneous/static/orange-down-arrow.png", $height: 7px) {
+	position: absolute;
+	display: block;
+	left: 0;
+	right: 0;
+	bottom: 0 - $height;
+	height: $height;
+	background: url($image) 50% 0 no-repeat;
+}
+
+.preview-label {
+	@extend .interface;
+	color: #333333;
+}
+
+.preview-value {
+	font-size: $field-preview-font-size;
+	font-family: $content-font-family;
+	line-height: $field-preview-font-size + 2;
+	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.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 {
+			padding-left: 10px;
+			padding-right: 15px;
+			background: url("/@spontaneous/static/location-arrow.png") right 0 no-repeat;
+			float: left;
+			display: block;
+			font-weight: bold;
+			select {
+				@include box-sizing;
+				@extend .interface;
+				text-transform: none;
+				font-size: 11px;
+				-webkit-appearance: none;
+				cursor: pointer;
+				display: block;
+				background: url("/@spontaneous/static/select-arrow.png") 95% 50% no-repeat;
+				border: none;
+				outline: none;
+				position: relative;
+				padding-top: 0px;
+				padding-right: 25px;
+				height: 31px;
+				color: #888888;
+				font-weight: bold;
+				width: 100%;
+			}
+			select.unselected {
+				color: #555555;
+				font-weight: normal;
+				font-style: italic;
+				max-width: 80px;
+			}
+			a {
+				@include box-sizing;
+				cursor: pointer;
+				color: #888888;
+				height: 31px;
+				padding-top: 9px;
+				display: block;
+				background: url("/@spontaneous/static/select-arrow.png") right 50% no-repeat;
+				padding-right: 20px;
+			}
+			a:hover, select:hover {
+				color: white;
+			}
+		}
+		li.root a {
+			background-image: none;
+		}
+		li:first-child {
+			background-image: url("/@spontaneous/static/spontaneous.png"), url("/@spontaneous/static/location-arrow.png");
+			background-position: 0 70%, right 0;
+			background-repeat: no-repeat;
+			padding-right: 12px;
+			a {
+				padding-right: 28px;
+			}
+		}
+	}
+	#switch-mode, #open-publish {
+		@include button;
+    @include display-box;
+    @include box-orient(vertical);
+    @include box-align(center);
+    margin: 0;
+		width: 64px;
+	}
+	#open-publish {
+    position: relative;
+		margin-right: $unit;
+		#publish-progress {
+			position: absolute;
+			left: 4px;
+			top: 1px;
+		}
+	}
+	#open-publish.progress {
+		padding-left: 20px;
+		padding-right: 20px;
+		width: 124px;
+		@include button-color(#666666);
+		color: #999999;
+	}
+}
+
+#content {
+	position: fixed;
+	overflow: auto;
+	top: 31px;
+	right: 0;
+	bottom: 0px;
+	left: 0;
+	#data_pane, #preview_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 {
+			@extend .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 .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 {
+				@extend .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;
+	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;
+	// border: dotted 1px transparent;
+}
+.fields-preview.hover .fields-preview-text {
+	// border: dotted 1px $action;
+}
+.fields-preview-text {
+  &.empty {
+    display: none;
+  }
+	@include box-sizing;
+	width: $field-text-preview-width;
+	float: left;
+	padding-right: 100px;
+	margin-right: 16px;
+	li {
+		@extend .clearfix;
+		border-bottom: solid 1px #cccccc;
+		padding-top: 3px;
+		padding-bottom: 3px;
+		display: block;
+		line-height: $field-preview-font-size + 2;
+		font-size: $field-preview-font-size;
+		font-family: $content-font-family;
+		float: left;
+		width: 100%;
+		position: relative;
+		padding-left: 100px;
+		.name, .value {
+			float: left;
+		}
+	}
+	li:last-child {
+		border-bottom: none;
+	}
+	.name {
+		@extend .preview-label;
+    @include box-sizing;
+		width: 100px;
+		right: 100px;
+		margin-left: -100px;
+    padding-right: $unit;
+	}
+	.value {
+		@extend .preview-value;
+		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;
+	float: left;
+	width: $field-image-preview-width;
+	li {
+		float: left;
+		display: block;
+		margin-right: 4px;
+		margin-bottom: 4px;
+		position: relative;
+		.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 {
+				@extend .no-select;
+        @include rounded;
+				position: relative;
+				max-height: 90px;
+			}
+			img:hover {
+
+			}
+		}
+	}
+}
+
+.fields-preview-text + .fields-preview-image {}
+
+#page-slots.slots {
+	.slot-tabs {
+		@extend .clearfix;
+		height: 32px;
+		vertical-align: top;
+		@include vertical-gradient(#666666, #4d4d4d);
+		li {
+			@include box-sizing;
+			@extend .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.png", 7px);
+				z-index: 1;
+			}
+		}
+		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;
+    position:relative;
+		padding-top: 12px;
+		padding-bottom: 5px;
+    .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;
+      }
+    }
+		&: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(#dddddd, #eeeeee);
+		border-top: solid 1px #cccccc;
+		height: 40px;
+		padding-top: 10px;
+		position: relative;
+		a {
+			@include button;
+			padding-right: 16px;
+			padding-left: 16px;
+		}
+		// a:hover {
+		//   background-color: $highlight;
+		//   color: white;
+		// }
+		a + a {
+			margin-left: 8px;
+		}
+    .alias {
+      font-style: italic;
+    }
+		.down {
+			@include down-arrow("/@spontaneous/static/slot-down-arrow.png", 18px);
+		}
+	}
+	.slot-addable.drop-active {
+		outline: solid 2px $action;
+	}
+}
+
+#page-slots.slots .slot-entries {
+	padding-top: 32px;
+	.fields-preview {
+		@include rounded;
+		padding: 4px;
+		background: none;
+		background-color: white;
+	}
+	.entry-wrap {
+    @extend .clearfix;
+		position: relative;
+		margin-left: $container-padding;
+		margin-right: $container-padding;
+
+    .entry-contents {
+      @include rounded;
+      background-color: gray;
+      padding: 1px;
+      padding-top: $title-bar-height + 4px;
+    }
+    .entry-spacer {
+      height: $container-padding/2;
+    }
+		.entry-inner {
+			@extend .clearfix;
+			@include rounded;
+			background-color: gray;
+			// padding: $unit;
+			position: relative;
+		}
+		.title-bar {
+			@include vertical-gradient(gray + #111111, gray);
+      @include box-sizing;
+			@include rounded-top;
+      @extend .interface;
+      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: 0;
+			right: 0;
+			top: 0;
+			height: $title-bar-height;
+			.actions {
+				@include rounded-bottom;
+				background-color: rgba(0, 0, 0, 0.2);
+				position: absolute;
+				top: 0;
+				right: $unit/2;
+				a {
+					background: url("/@spontaneous/static/item-buttons.png") 0 0 no-repeat;
+					display: inline-block;
+					width: 15px;
+					height: 15px;
+					position: relative;
+					top: 4px;
+					cursor: pointer;
+					padding: 0 10px;
+				}
+				.delete {
+					background-position: -54px 0;
+				}
+				.delete:hover {
+					background-position: -54px -20px;
+				}
+				.visibility {
+					background-position: -25px 0;
+				}
+				.visibility:hover {
+					background-position: -25px -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(0, 0, 0, $corner-radius);
+			border-width: 2px;
+			border-color: transparent;
+			border-style: solid;
+		}
+		.white-bg.active {
+			// -webkit-border-image: url(/@spontaneous/static/inner-glow.png) 8 8 8 8 repeat;
+			border-color: $action;
+		}
+		.grey-bg {
+			@include corners(0, $corner-radius, $corner-radius, 0);
+			left: auto;
+			width: 40%;
+			right: 0;
+			background-color: #6b6b6b;
+			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;
+					@extend .interface;
+					float: left;
+					width: 25%;
+					height: 100%;
+					display: block;
+					padding-left: 8px;
+					padding-top: 6px;
+					cursor: pointer;
+					border-right: solid 1px #565656;
+					background-color: #6b6b6b;
+					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.active:hover, li.active {
+					background: #565656 none;
+					border-right: solid 1px #565656;
+					color: white;
+				}
+				li:hover {
+					background-color: $highlight;
+					border-right-color: $highlight;
+				}
+				li:hover + li:nth-child(4) {
+					border-left-color: $highlight;
+				}
+				li .down {
+					display: none;
+				}
+			}
+			.slot-addable {
+				@extend .interface;
+				@include box-sizing;
+				border: none;
+				background: none;
+				background-color: #565656;
+				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;
+			}
+			.entry-wrap.depth-2 {
+				// padding-top: $title-bar-height + ($unit/2);
+				margin-left: $unit;
+				margin-right: $unit;
+				margin-bottom: $unit;
+				.white-bg {
+          @include rounded(0 0 $radius $radius);
+					width: auto;
+					right: 0;
+				}
+				.grey-bg {
+					display: none;
+				}
+        .entry-contents {
+          // padding: $unit/2 $unit/2;
+          // padding: 0;
+        }
+        .entry-spacer {
+          height: $unit;
+        }
+				.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 {
+      padding: $unit/2;
+      background-color: #444;
+      color: white;
+      font-size: 14px;
+      font-style: italic;
+      .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);
+        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%;
+            padding-right: 0;
+          }
+          .fields-preview-image {
+            @include box-flex;
+            width: 40%;
+          }
+        }
+      }
+    }
+	}
+	.entry-wrap.hidden {
+		opacity: 0.4 !important;
+	}
+  .entry-wrap.page {
+    .white-bg {
+			@include corners(0, 0, $corner-radius, $corner-radius);
+      right: 0;
+    }
+    .page-title {
+      background-color: #444;
+      padding: $unit/2;
+      a {
+        cursor: pointer;
+        font-family: $headline-font-family;
+        font-weight: 100;
+        color: #fff;
+        font-size: 16px;
+        line-height: normal;
+        &:hover {
+          color: $highlight;
+        }
+      }
+    }
+  }
+	.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;
+				}
+			}
+		}
+	}
+}
+
+#dialogue-overlay {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: rgba(255, 255, 255, 0.9);
+	z-index: 1000;
+}
+
+#dialogue-wrap {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	overflow: auto;
+	z-index: 1001;
+  $dialogue-frame-width: 2px;
+  #dialogue-outer {
+    @include rounded;
+    @include display-box;
+    @include box-orient($direction: vertical);
+    @extend .shadow;
+    background-color: $chrome-bg;
+    position: relative;
+    top: 50px;
+    // width: $dialogue-width;
+    margin: 0 auto;
+    margin-bottom: 50px;
+    // max-height: 90%;
+    #dialogue-title {
+      $height: 32px;
+      @extend .controls-gradient;
+      @include header;
+      @include rounded-top;
+      height: $height - 6px;
+      color: #fff;
+      padding: 0 $unit 0 ($unit+$dialogue-frame-width);
+      padding-top: 6px;
+    }
+    #dialogue-body {
+      // @extend .box-flexible;
+      // position: absolute;
+      // top: 32px;
+      // right: 2px;
+      // bottom: 32px;
+      // left: 2px;
+      // min-height: 100px;
+      overflow: auto;
+      margin: 0 $dialogue-frame-width;
+      background-color: #fff;
+      // max-height: 70%;
+      // margin-top: 32px;
+      // margin-bottom: 32px;
+    }
+    #dialogue-control-wrap {
+      // position: fixed;
+      // top: 0;
+      // right: 0;
+      // left: 0;
+      // z-index: 1002;
+
+      #dialogue-controls {
+        position: relative;
+        // display: block;
+        // height: 46px;
+        .dialogue-actions {
+          @include display-box;
+          .spacer {
+            @include box-flex;
+          }
+          .button {
+            display: block;
+            width: 128px;
+            margin: $unit 0;
+            & + .button {
+              margin-left: $unit;
+            }
+          }
+          .button:last-child {
+            margin-right: $unit;
+          }
+          .cancel {
+            @include button-color(#6b6b6b);
+          }
+          .save {
+            background-color: $action;
+            float: right;
+          }
+          .disabled, .disabled:hover {
+            background-color: #333333 !important;
+            color: #6b6b6b !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.dialogue-wrapper {
+	@include rounded;
+	@include box-sizing;
+	position: relative;
+	// top: 32px;
+	background-color: #cccccc;
+	width: $dialogue-width;
+	// margin: 32px auto;
+}
+
+#create-home-dialogue {
+  .instructions {
+		@extend .interface;
+		margin: 0;
+		background-color: #f2f2f2;
+		color: #666;
+		padding: $unit/2 $unit;
+    margin-bottom: $unit;
+    .button {
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+  }
+
+	.type {
+		@include rounded;
+		@include display-box;
+		cursor: pointer;
+    padding: $unit/2 $unit;
+		background-color: #fbfbfb;
+		border: solid 1px #f2f2f2;
+		margin: $unit;
+		margin-top: 0;
+		&:hover {
+			background-color: #666;
+			color: #fff;
+		}
+		&.selected {
+			background-color: $action;
+			color: #fff;
+		}
+	}
+}
+
+#publishing-dialogue {
+  min-height: 200px;
+  max-height: 90%;
+  position: relative;
+  @include display-box;
+  @include box-orient(horizontal);
+  .change-list {
+    @include box-flex;
+    width: 50%;
+    &#changes {
+      border-right: solid 2px #000;
+    }
+    .actions {
+      @extend .interface;
+      @include display-box;
+      @include box-orient(horizontal);
+      @include box-align(center);
+      color: #666;
+      background-color: #f2f2f2;
+      padding: $unit/2 $unit;
+
+      div {
+        @include box-flex;
+      }
+      .button {
+        padding-left: $unit;
+        padding-right: $unit;
+      }
+    }
+    .change-sets {
+      overflow: auto;
+      .instructions {
+        font-family: $headline-font-family;
+        color: #999;
+        text-align: center;
+        position: relative;
+        padding-top: 50px;
+      }
+    }
+  }
+  // background-color: #fff;
+  // width: 600px;
+	// @extend .dialogue-wrapper;
+	// padding-top: $container-padding / 2;
+	// padding-bottom: $container-padding / 2;
+	.publish-up-to-date {
+    @include rounded;
+    @extend shadow;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: 60px 200px 60px 200px;
+    text-align: center;
+    background-color: #333;
+    opacity: 0.95;
+    font-family: $headline-font-family;
+    font-size: 24px;
+    padding-top: 24px;
+    color: #fff;
+		// margin: $container-padding / 2;
+		// margin-top: 0;
+		// .publish-all {
+		// 	@include button(#666);
+		// 	@extend .interface;
+		// 	width: 128px;
+		// 	float: right;
+		// 	text-align: left;
+		// 	// background-color: #666666;
+		// 	input {
+		// 		margin: 1px 8px 0 8px;
+		// 		padding: 0;
+		// 		vertical-align: top;
+		// 		position: relative;
+		// 	}
+		// }
+		// .publish-all.checked {
+		// 	background-color: $action;
+		// }
+	}
+	.change-set {
+		cursor: pointer;
+    padding: $unit $unit 0 $unit;
+    .inner {
+      @include rounded;
+      @include display-box;
+      border: solid 3px transparent;
+      background-color: #fbfbfb;
+      border: solid 1px #f2f2f2;
+    }
+    .pages {
+      @include box-flex;
+      .title {
+        padding: $unit/2 $unit;
+        color: #333;
+        & + .title {
+          border-top: solid 1px #f2f2f2;
+        }
+      }
+      .url {
+        font-size: 10px;
+        color: #666;
+      }
+    }
+    .add {
+      @include rounded-right;
+      @include display-box;
+      @include box-pack(center);
+      @include box-align(center);
+      width: $container-padding;
+      background-color: #f2f2f2;
+      position: relative;
+      color: #999;
+      span {
+        @extend .interface;
+        font-size: 40px;
+        position: relative;
+        top: -5px;
+      }
+      &:hover {
+        background-color: $action;
+        color: #fff;
+      }
+    }
+		.titles a {
+			display: block;
+			margin-bottom: 2px;
+			span {
+				font-size: 11px;
+				margin-left: 1em;
+			}
+		}
+	}
+	.change-set:hover {
+		border-color: $action;
+	}
+	.change-set.selected {
+	}
+}
+
+#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;
+			@extend .interface;
+			background-color: #d1d1d1;
+			// background-image: url(/@spontaneous/static/paper-texture-dark.png);
+			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.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;
+  }
+}
+@import "popover";
+@import "editing";
+@import "add_alias_dialogue";
+@import "developer";