spontaneous 0.2.0.alpha2 → 0.2.0.alpha3

data/application/css/{v2.scss → core.css.scss}

@@ -1,16 +1,8 @@
-@import "definitions";
-
-@mixin image-overlay {
-	opacity: 0.7;
-	color: black;
-	padding-left: 4px;
-	padding-top: 2px;
-	background-color: #efefef;
-}
-
+@import "definitions.css.scss";
+@import "font.css.scss";
 
 
-@mixin down-arrow($image: "/@spontaneous/static/orange-down-arrow.png", $height: 7px) {
+@mixin down-arrow($image: "/@spontaneous/static/orange-down-arrow-395ae1929e8662b2ff0977daf12c35bb.png", $height: 7px) {
 	position: absolute;
 	display: block;
 	left: 0;
@@ -20,15 +12,19 @@
 	background: url($image) 50% 0 no-repeat;
 }
 
+.no-select {
+	@include no-select;
+}
 .preview-label {
-	@extend .interface;
+	@include interface;
 	color: #333333;
 }
 
 .preview-value {
 	font-size: $field-preview-font-size;
 	font-family: $content-font-family;
-	line-height: $field-preview-font-size + 2;
+	// line-height: $field-preview-font-size + 4;
+	line-height: 1.4em;
 	color: #666666;
 	font-weight: normal;
 }
@@ -42,9 +38,9 @@
 img.missing {
 	width: 100%;
 	height: 50px;
-	background: url("/@spontaneous/static/missing.png") 50% 50% no-repeat;
+	background: url("/@spontaneous/static/missing-911ce6dbd9f4602e0f3fbcd7e78846a2.png") 50% 50% no-repeat;
 	border: none;
-  // display: none;
+	// display: none;
 }
 
 .clear {
@@ -56,35 +52,37 @@ img.missing {
 	@extend .container-padding;
 	@extend .controls-gradient;
 	@extend .clearfix;
-  @include display-box;
-  @include box-align(center);
+	@include display-box;
+	@include box-align(center);
 	position: fixed;
 	height: 31px;
 	top: 0;
 	right: 0;
 	left: 0;
 	#navigation {
-    @include box-flex;
+		@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.png") right 0 no-repeat;
+			background: url("/@spontaneous/static/location-arrow-c1c1d3ca472481c61a0a5f8cb289d743.png") right 0 no-repeat;
 			float: left;
 			display: block;
 			font-weight: bold;
 			select {
 				@include box-sizing;
-				@extend .interface;
+				@include interface;
 				text-transform: none;
 				font-size: 11px;
+        line-height: 13px;
 				-webkit-appearance: none;
 				cursor: pointer;
 				display: block;
-				background: url("/@spontaneous/static/select-arrow.png") 95% 50% no-repeat;
+				background: url("/@spontaneous/static/select-arrow-6e7dd3745b00e934b0d7a3250c46558b.png") 95% 50% no-repeat;
 				border: none;
 				outline: none;
 				position: relative;
@@ -109,7 +107,7 @@ img.missing {
 				height: 31px;
 				padding-top: 9px;
 				display: block;
-				background: url("/@spontaneous/static/select-arrow.png") right 50% no-repeat;
+				background: url("/@spontaneous/static/select-arrow-6e7dd3745b00e934b0d7a3250c46558b.png") right 50% no-repeat;
 				padding-right: 20px;
 			}
 			a:hover, select:hover {
@@ -120,32 +118,69 @@ img.missing {
 			background-image: none;
 			padding-right: 5px;
 		}
-		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;
+  #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-orient(vertical);
     @include box-align(center);
-    margin: 0;
-		width: 64px;
+    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;
+		position: relative;
 		margin-right: $unit;
 		#publish-progress {
 			position: absolute;
 			left: 4px;
 			top: 1px;
 		}
+		&.disabled {
+		}
 	}
 	#open-publish.progress {
 		padding-left: 20px;
@@ -156,14 +191,27 @@ img.missing {
 	}
 }
 
-#content {
+#content-outer {
+	background: url(/@spontaneous/static/texture-03f7627e8264b1d607113ab32c593a58.png) repeat;
+	color: #fff;
+	font-size: 16px;
 	position: fixed;
-	overflow: auto;
 	top: 31px;
 	right: 0;
 	bottom: 0px;
 	left: 0;
-	#data_pane, #preview_pane {
+	#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;
@@ -197,34 +245,54 @@ img.missing {
 			}
 		}
 		.path, .path h3, .path h3.developer a {
-			@extend .interface;
+			@include interface;
 			cursor: pointer;
 			color: #c1c1c1;
 			font-size: 11px;
 			line-height: 12px;
 			text-transform: none;
 		}
-    .path .uid, .path .developer {
+		.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;
-      }
-    }
+			margin-left: $unit*4;
+			opacity: 0.5;
+			&.missing {
+				opacity: 0.5;
+			}
+		}
 		& > .path {
-      @include display-box;
+			@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);
+			@include display-box;
+			@include box-orient(horizontal);
+			@include box-align(center);
 			.input-error {
-        display: block;
+				display: block;
 				position: relative;
 				top: 0;
 				vertical-align: top;
@@ -262,17 +330,17 @@ img.missing {
 				}
 			}
 			.button {
-        display: block;
+				display: block;
 				margin-left: 8px;
-        padding-left: 32px;
-        padding-right: 32px;
+				padding-left: 32px;
+				padding-right: 32px;
 			}
 			.button.cancel {
 				padding-left: 10px;
 				padding-right: 10px;
 			}
 			span, a.path {
-        display: block;
+				display: block;
 				position: relative;
 			}
 			a.path {
@@ -313,7 +381,7 @@ img.missing {
 				background-color: $highlight;
 			}
 			.status {
-				@extend .interface;
+				@include interface;
 				vertical-align: top;
 				display: inline-block;
 				text-transform: none;
@@ -338,22 +406,22 @@ img.missing {
 			@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;
-        }
-      }
+			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;
+				}
+			}
 		}
 	}
 }
@@ -361,6 +429,10 @@ img.missing {
 .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;
@@ -381,35 +453,32 @@ img.missing {
 
 .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;
-  }
+	&.empty {
+		display: none;
+	}
 	@include box-sizing;
 	width: $field-text-preview-width;
-	float: left;
-	padding-right: 100px;
+	// 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;
-		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;
+			// float: left;
+			display: block;
 		}
 	}
 	li:last-child {
@@ -417,14 +486,17 @@ img.missing {
 	}
 	.name {
 		@extend .preview-label;
-    @include box-sizing;
+		@include box-sizing;
+		// @include
 		width: 100px;
-		right: 100px;
-		margin-left: -100px;
-    padding-right: $unit;
+		// right: 100px;
+		// margin-left: -100px;
+		padding-right: $unit;
+		padding-top: 2px;
 	}
 	.value {
 		@extend .preview-value;
+		@include box-flex;
 		a {
 			color: $highlight;
 		}
@@ -460,11 +532,12 @@ img.missing {
 }
 
 .fields-preview-image {
-  &.empty {
-    display: none;
-  }
+	&.empty {
+		display: none;
+	}
 	@extend .clearfix;
-	float: left;
+	@include box-flex;
+	// float: left;
 	width: $field-image-preview-width;
 	li {
 		float: left;
@@ -472,6 +545,15 @@ img.missing {
 		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;
@@ -487,22 +569,22 @@ img.missing {
 		.value {
 			@include rounded;
 			background-color: #efefef;
-			max-height: 90px;
+			// 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;
+			.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;
@@ -511,7 +593,7 @@ img.missing {
 				right: 0;
 				bottom: 0;
 				left: 0;
-        text-align: center;
+				text-align: center;
 				.drop-upload-outer {
 					@include rounded(4px);
 					border: solid 1px white;
@@ -543,9 +625,16 @@ img.missing {
 				background-color: rgba(0, 0, 0, 0.5);
 			}
 			img {
-				@extend .no-select;
-        @include rounded;
+				@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 {
@@ -557,6 +646,107 @@ img.missing {
 
 .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%;
 
@@ -567,7 +757,7 @@ img.missing {
 		@include vertical-gradient(#666666, #4d4d4d);
 		li {
 			@include box-sizing;
-			@extend .interface;
+			@include interface;
 			font-size: 11px;
 			color: #dddddd;
 			display: block;
@@ -590,7 +780,7 @@ img.missing {
 			color: white;
 			border-right-color: $highlight;
 			.down {
-				@include down-arrow("/@spontaneous/static/orange-down-arrow.png", 7px);
+				@include down-arrow("/@spontaneous/static/orange-down-arrow-395ae1929e8662b2ff0977daf12c35bb.png", 7px);
 				z-index: 100;
 				display: none;
 			}
@@ -611,26 +801,26 @@ img.missing {
 	.fields-preview.depth-box {
 		@extend .container-padding;
 		@include vertical-gradient(#eeeeee, #dddddd);
-    @include display-box;
+		@include display-box;
 		border-top: solid 1px #CCC;
-    position:relative;
+		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;
-      }
-    }
+		.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;
@@ -638,43 +828,53 @@ img.missing {
 		.value {
 			color: #555555;
 		}
-    .fields-preview-text {
-      @include box-flex;
-      width: 60%;
-    }
-    .fields-preview-image {
-      @include box-flex;
-      width: 40%;
-    }
+		.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/diagonal-texture.png");
+		background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
 		border-top: solid 1px #cccccc;
 		text-align: center;
-		height: 40px;
+		height: auto;
 		padding-top: 8px;
+		padding-bottom: 8px;
 		position: relative;
 		a {
+      $add-pad: $unit * 1.5;
 			@include button;
-			padding-right: 16px;
-			padding-left: 16px;
+      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;
+			//   background-color: $highlight;
+			//   color: white;
 		// }
 		a + a {
 		}
-    .alias {
-      font-style: italic;
-    }
+		.alias {
+			font-style: italic;
+		}
 		.down {
-			@include down-arrow("/@spontaneous/static/slot-down-arrow.png", 18px);
+			@include down-arrow("/@spontaneous/static/slot-down-arrow-59ad5f5ee5b52a7ebd00bca4b3104194.png", 18px);
 			display: none;
 		}
 	}
@@ -689,14 +889,13 @@ img.missing {
 		padding-left: 10px;
 		padding-right: 10px;
 		padding-top: 5px;
+		padding-bottom: 5px;
 		text-align: center;
-		background: url("/@spontaneous/static/plus-box.png") 10px 7px no-repeat;
+		background: url("/@spontaneous/static/plus-box-dcde74a1e496f68298c9b443caa1c5d5.png") 10px 7px no-repeat;
+    height: auto;
 
 		.down {
 			display: none;
-			// background-image: url("/@spontaneous/static/slot-up-arrow.png");
-			// bottom: auto;
-			// top: -18px;
 		}
 	}
 	.slot-instructions {
@@ -734,22 +933,22 @@ img.missing {
 		background-color: white;
 	}
 	.entry-wrap {
-    @extend .clearfix;
+		@extend .clearfix;
 		position: relative;
-		margin-left: $container-padding;
+		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: $container-padding/2;
+		.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/diagonal-texture.png");
+			background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
 			margin: 0 4px;
 			cursor: pointer;
 		}
@@ -759,12 +958,13 @@ img.missing {
 			// background-color: gray;
 			// padding: $unit;
 			position: relative;
+      padding-bottom: $unit;
 		}
 		.title-bar {
 			// @include vertical-gradient(gray + #111111, gray);
-      @include box-sizing;
+			@include box-sizing;
 			@include rounded-right;
-      @extend .interface;
+			@include interface;
 			$title-bar-width: 20px;
 
 			// background-color: rgba($entry-background-colour, 0.6);
@@ -772,11 +972,11 @@ img.missing {
 
 
 			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;
+			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;
@@ -789,28 +989,35 @@ img.missing {
 				@include display-box;
 				@include box-orient(vertical);
 				@include rounded-bottom;
-				// background-color: rgba(0, 0, 0, 0.2);
-				// position: absolute;
 				top: $unit/2;
-				// right: $unit/2;
 				a {
-					background: url("/@spontaneous/static/item-buttons-highlight.png") 0 0 no-repeat;
-					display: block;
+					display: inline-block;
+          position: absolute;
 					width: 15px;
 					height: 15px;
-					// position: relative;
-					// top: 4px;
+					position: relative;
 					cursor: pointer;
-					// padding: 0 10px;
-				}
-				.delete {
-					background-position: -61px 0;
+          color: $entry-background-colour - #111;
+          font-size: 14px;
 				}
-				.delete:hover {
-					background-position: -61px -20px;
+        a:before {
+          @include awesome-icon("\f057");
+          position: absolute;
+          left: 3px;
+          top: 2px;
+        }
+        a:hover {
+          color: $highlight;
+        }
+				.delete:before {
+          font-size: 18px;
 				}
-				.visibility {
-					background-position: -32px 0;
+				// .delete:hover {
+					// background-position: -61px -20px;
+				// }
+				.visibility:before {
+          content: "\f070";
+					// background-position: -32px 0;
 				}
 				.visibility:hover {
 					background-position: -32px -20px;
@@ -863,7 +1070,6 @@ img.missing {
 			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 {
@@ -919,7 +1125,7 @@ img.missing {
 				background: none;
 				li {
 					@include box-sizing;
-					@extend .interface;
+					@include interface;
 					float: left;
 					width: 25%;
 					height: 100%;
@@ -963,7 +1169,7 @@ img.missing {
 				}
 			}
 			.slot-addable {
-				@extend .interface;
+				@include interface;
 				@include box-sizing;
 				border: none;
 				background: none;
@@ -977,15 +1183,15 @@ img.missing {
 					// background-color: #6b6b6b;
 					padding-left: 8px;
 					padding-right: 8px;
-          & + a {
-            margin-left: $unit;
-          }
+					& + a {
+						margin-left: $unit;
+					}
+				}
+				.alias {
+					font-style: italic;
 				}
-        .alias {
-          font-style: italic;
-        }
 				// a:hover {
-				//   background-color: $highlight;
+					//   background-color: $highlight;
 				//}
 				.down {
 					display: none;
@@ -993,6 +1199,7 @@ img.missing {
 			}
 			.slot-entries {
 				padding-top: 8px;
+				padding-bottom: 8px;
 			}
 			.entry-wrap.depth-2 {
 				// padding-top: $title-bar-height + ($unit/2);
@@ -1000,20 +1207,20 @@ img.missing {
 				margin-right: 20px;
 				margin-bottom: $unit;
 				.white-bg {
-          @include rounded($radius - 1);
+					@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;
-        }
+				.entry-contents {
+					// padding: $unit/2 $unit/2;
+					padding: 0;
+				}
+				.entry-spacer {
+					height: $unit;
+				}
 				&:last-child .entry-spacer {
 					outline: solid 1px red;
 					display: none;
@@ -1028,7 +1235,7 @@ img.missing {
 						// background-color: white;
 						// border-color: white;
 						width: 100%;
-            display: block;
+						display: block;
 						.fields-preview-text {
 							width: 100%;
 							margin-bottom: 0;
@@ -1041,9 +1248,9 @@ img.missing {
 							margin-top: $unit/2;
 							padding-top: $unit/2;
 						}
-            .fields-preview-text.empty + .fields-preview-image {
-              margin-top: 0;
-            }
+						.fields-preview-text.empty + .fields-preview-image {
+							margin-top: 0;
+						}
 					}
 				}
 				.entry + .entry {
@@ -1051,83 +1258,116 @@ img.missing {
 				}
 			}
 		}
-    .alias-target {
+		.alias-target {
 			@include rounded-top;
-      padding: $unit/2;
-      background-color: #444;
-      color: white;
-      font-size: 14px;
-      font-style: italic;
+      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;
 			}
-      .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%;
-            padding-right: 0;
-          }
-          .fields-preview-image {
-            @include box-flex;
-            width: 40%;
-          }
+      .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 {
+	.entry-wrap.page {
+		.white-bg {
 			@include corners(0, 0, $corner-radius, $corner-radius);
-      right: 0;
-    }
-    .page-title {
+			right: 0;
+		}
+		.page-title {
 			@include rounded-top;
-      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;
+			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: $highlight;
+          color: rgba(255, 255, 255, 0.8);
         }
       }
-    }
-  }
+		}
+	}
 	.entry-wrap.ui-sortable-helper > .entry-contents {
 		@extend .shadow;
 	}
@@ -1154,6 +1394,9 @@ img.missing {
 		}
 	}
 }
+#page-content.hidden .slot-entries .entry-wrap.hidden {
+	opacity: 1.0 !important;
+}
 
 #dialogue-overlay {
 	position: fixed;
@@ -1165,280 +1408,6 @@ img.missing {
 	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;
@@ -1486,9 +1455,8 @@ img.missing {
 		.name {
 			@include rounded-top;
 			@include box-sizing;
-			@extend .interface;
+			@include interface;
 			background-color: #d1d1d1;
-			// background-image: url(/@spontaneous/static/paper-texture-dark.png);
 			display: block;
 			height: 24px;
 			padding-left: 8px;
@@ -1536,8 +1504,8 @@ img.missing {
 		}
 	}
 	// .field-group.text {
-	//   // width: 621px;
-	//   width: 100%;
+		//   // width: 621px;
+		//   width: 100%;
 	// }
 	.field-group.image {
 		width: 327px;
@@ -1623,7 +1591,7 @@ img.missing {
 			.bar {
 				@include rounded;
 				height: 8px;
-        padding: 0;
+				padding: 0;
 				background-color: black;
 				position: absolute;
 				top: 0;
@@ -1634,7 +1602,7 @@ img.missing {
 				opacity: 0.3;
 			}
 			#progress-total {
-        background-color: #fff;
+				background-color: #fff;
 			}
 		}
 		#progress-name {
@@ -1654,7 +1622,7 @@ img.missing {
 
 #script-load-splash {
 	$progress-color: #dddddd;
-	background: url("/@spontaneous/static/splash.png") 0 0 no-repeat;
+	background: url("/@spontaneous/static/splash-65b493a714df9b8b3ab170103401b53d.png") 0 0 no-repeat;
 	width: 318px;
 	height: 43px;
 	position: relative;
@@ -1688,13 +1656,32 @@ img.missing {
 }
 
 .icon-wrap {
-  overflow: hidden;
-  position: relative;
-  img {
-    position: relative;
+	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 "popover";
-@import "editing";
-@import "add_alias_dialogue";
-@import "developer";
+@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";
+