alchemy_cms 2.1.beta1 → 2.1.beta5

data/app/assets/javascripts/alchemy/alchemy.windows.js

@@ -8,19 +8,23 @@ if (typeof(Alchemy) === 'undefined') {
 
 		getOverlaySpinner : function (options) {
 			var defaults = {
-				x: '47%',
-				y: '33%'
+				x: '400',
+				y: '300'
 			};
 			var settings = $.extend({}, defaults, options);
+			var $spinner_container = $('<div class="spinner_container"/>').css({width: settings.x, height: settings.y});
 			var $spinner = $('<img src="/assets/alchemy/ajax_loader.gif" />');
-			var left = (settings.x - 32) / 2;
-			var top = ((settings.y - 32) / 2) - 16;
-			top = top < 0 ? 0 : top;
+			$spinner_container.append($spinner);
 			$spinner.css({
-				marginLeft: left + 'px',
-				marginTop: top + 'px'
+				position: 'absolute',
+				width: 32,
+				height: 32,
+				left: '50%',
+				top: '50%',
+				marginLeft: '-16px',
+				marginTop: '-16px'
 			});
-			return $spinner;
+			return $spinner_container;
 		},
 
 		AjaxErrorHandler : function($dialog, status, textStatus, errorThrown) {
@@ -49,7 +53,7 @@ if (typeof(Alchemy) === 'undefined') {
 					modal: false,
 					title: title,
 					width: $(window).width() - 504,
-					height: $(window).height() - 90,
+					height: $(window).height() - 78,
 					minWidth: 600,
 					minHeight: 300,
 					show: "fade",
@@ -140,7 +144,7 @@ if (typeof(Alchemy) === 'undefined') {
 			}
 		},
 
-		openElementsWindow : function (path, options) {
+		openElementsWindow : function (path, options, callback) {
 			var $dialog = $('<div style="display: none" id="alchemyElementWindow"></div>');
 			var closeCallback = function() {
 				$dialog.dialog("destroy");
@@ -168,6 +172,7 @@ if (typeof(Alchemy) === 'undefined') {
 						success: function(data, textStatus, XMLHttpRequest) {
 							$dialog.html(data);
 							Alchemy.ButtonObserver('#alchemyElementWindow .button');
+							callback.call();
 						},
 						error: function(XMLHttpRequest, textStatus, errorThrown) {
 							Alchemy.AjaxErrorHandler($dialog, XMLHttpRequest.status, textStatus, errorThrown);
@@ -303,16 +308,16 @@ if (typeof(Alchemy) === 'undefined') {
 			}
 			var $dialog = $('<div style="display:none" id="alchemyOverlay"></div>');
 			$dialog.appendTo('body');
-			$dialog.html(Alchemy.getOverlaySpinner({x: size_x, y: size_y}));
-
+			$dialog.html(Alchemy.getOverlaySpinner({x: size_x === 'auto' ? 400 : size_x, y: size_y === 'auto' ? 300 : size_y}));
 			Alchemy.CurrentWindow = $dialog.dialog({
-				modal: modal, 
-				minWidth: size_x, 
-				minHeight: size_y > 68 ? size_y : 68,
+				modal: modal,
+				minWidth: size_x === 'auto' ? 400 : size_x,
+				minHeight: size_y === 'auto' ? 300 : size_y,
 				title: title,
 				resizable: resizable,
 				show: "fade",
 				hide: "fade",
+				width: size_x,
 				open: function (event, ui) {
 					$.ajax({
 						url: action_url,
@@ -320,6 +325,16 @@ if (typeof(Alchemy) === 'undefined') {
 							$dialog.html(data);
 							$dialog.css({overflow: overflow ? 'visible' : 'auto'});
 							$dialog.dialog('widget').css({overflow: overflow ? 'visible' : 'hidden'});
+							if (size_x === 'auto') {
+								$dialog.dialog('widget').css({
+									left: (($(window).width() / 2) - ($dialog.width() / 2))
+								});
+							}
+							if (size_y === 'auto') {
+								$dialog.dialog('widget').css({
+									top: ($(window).height() - $dialog.dialog('widget').height()) / 2
+								});
+							}
 							Alchemy.SelectBox('#alchemyOverlay select');
 							Alchemy.ButtonObserver('#alchemyOverlay .button');
 						},
@@ -407,7 +422,7 @@ if (typeof(Alchemy) === 'undefined') {
 				hide: "fade",
 				open: function (event, ui) {
 					$.ajax({
-						url: '/admin/trash?page_id=' + page_id,
+						url: Alchemy.routes.admin_trash_path(page_id),
 						success: function(data, textStatus, XMLHttpRequest) {
 							$dialog.html(data);
 							// Need this for DragnDrop elements into elements window.
@@ -428,7 +443,7 @@ if (typeof(Alchemy) === 'undefined') {
 		refreshTrashWindow: function(page_id) {
 			if ($('#alchemyTrashWindow').length > 0) {
 				$('#alchemyTrashWindow').html(Alchemy.getOverlaySpinner({x: 380, y: 270}));
-				$.get('/admin/trash?page_id='+page_id, function(html) {
+				$.get(Alchemy.routes.admin_trash_path(page_id), function(html) {
 					$('#alchemyTrashWindow').html(html);
 				});
 			}

data/app/assets/javascripts/alchemy/preview.js

@@ -0,0 +1 @@
+//= require alchemy/alchemy.preview

data/{vendor/assets/javascripts/tiny_mce/plugins/inlinepopups/skins/alchemy/window.css.erb → app/assets/javascripts/tiny_mce/plugins/inlinepopups/skins/alchemy/window.css.scss}

@@ -1,9 +1,4 @@
-/* @override 
-	http://0.0.0.0:3000/javascripts/alchemy/tiny_mce/plugins/inlinepopups/skins/alchemy/window.css
-	http://localhost:3000/javascripts/alchemy/tiny_mce/plugins/inlinepopups/skins/alchemy/window.css
-*/
-
-/* Alchemy TinyMCE Overlay */
+@import "alchemy/defaults";
 
 /* Reset */
 
@@ -14,9 +9,8 @@
 	border: 0;
 	padding: 0;
 	margin: 0;
-	font-family: "Lucida Grande", Arial, sans-serif;
-	font-size: 12px;
-	color: #333;
+	font: $default-font-style;
+	color: $text-color;
 	text-decoration: none;
 	font-weight: normal;
 	width: auto;
@@ -31,14 +25,8 @@
 .alchemy {
 	position: absolute;
 	direction: ltr;
-	border: 1px solid #afafaf;
-	-webkit-box-shadow: 0px 0px 8px rgba(0, 3, 51, 0.2);
-	-moz-box-shadow: 0px 0px 8px rgba(0, 3, 51, 0.2);
-	-o-box-shadow: 0px 0px 8px rgba(0, 3, 51, 0.2);
-	box-shadow: 0px 0px 8px rgba(0, 3, 51, 0.2);
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
+	border: $default-border;
+	@include rounded-corner;
 }
 
 .alchemy .mceWrapper {
@@ -58,9 +46,7 @@
 	background: #888;
 	top: 0;
 	left: 0;
-	opacity: 0.5;
-	-ms-filter: 'alpha(opacity=50)';
-	filter: alpha(opacity=50)
+	@include opacity(50);
 }
 
 .alchemy_modalBlocker {
@@ -70,9 +56,7 @@
 	width: 100%;
 	height: 100%;
 	background-color: #f4f4f4;
-	opacity: 0.6;
-	-ms-filter: 'alpha(opacity=60)';
-	filter: alpha(opacity=60);
+	@include opacity(50);
 	display: none
 }
 
@@ -92,7 +76,7 @@
 a.mceMove {
 	width: 100%;
 	height: 29px;
-	background: #c6dbe7 url(<%= image_tag "shading.png" %>) repeat-x 50% -66px;
+	background: #c6dbe7;
 	color: #333333;
 	font-weight: bold;
 	border-bottom: 2px solid #ededed;
@@ -204,8 +188,7 @@ a.mceMove {
 .alchemy .mceStatusbar .mceBottom span {
 	display: block;
 	left: 7px;
-	font-family: "Lucida Grande", Arial, sans-serif;
-	font-size: 12px;
+	font: $default-font-style;
 	line-height: 23px
 }
 
@@ -219,7 +202,7 @@ a.mceMove {
 
 .alchemy .mceClose {
 	right: 8px;
-	background: url(<%= image_tag "ui-icons_666666_256x240.png" %>) -96px -128px;
+	background: image-url("alchemy/ui-icons_666666_256x240.png") -96px -128px;
 	width: 16px;
 	height: 16px;
 	top: 6px;
@@ -235,7 +218,7 @@ a.mceMove {
 	right: 28px;
 	width: 16px;
 	height: 16px;
-	background: url(<%= image_tag "ui-icons_666666_256x240.png" %>) -49px -80px;
+	background: image-url("alchemy/ui-icons_666666_256x240.png") -49px -80px;
 	top: 6px;
 }
 
@@ -244,7 +227,7 @@ a.mceMove {
 	right: 28px;
 	width: 16px;
 	height: 16px;
-	background: url(<%= image_tag "ui-icons_666666_256x240.png" %>) -32px -80px;
+	background: image-url("alchemy/ui-icons_666666_256x240.png") -32px -80px;
 	top: 6px;
 }
 
@@ -349,7 +332,7 @@ a.mceMove {
 	bottom: 1px;
 	right: 1px;
 	cursor: se-resize;
-	background: url(<%= image_tag "ui-icons_666666_256x240.png" %>) no-repeat -80px -224px;
+	background: image-url("alchemy/ui-icons_666666_256x240.png") no-repeat -80px -224px;
 	width: 14px;
 	height: 14px;
 }
@@ -361,7 +344,6 @@ a.mceMove {
 	bottom: 10px;
 	width: 80px;
 	height: 31px;
-	background: url(<%= image_tag "shading.png" %>) repeat-x 0 -75px;
 	line-height: 31px;
 	vertical-align: middle;
 	text-align: center;
@@ -401,7 +383,7 @@ a.mceMove {
 }
 
 .alchemy .mceAlert .mceIcon {
-	background: url(<%= image_tag "icons.png" %>) 0 -88px;
+	background: image-url("alchemy/icons.png") 0 -88px;
 }
 
 .alchemy .mceConfirm .mceOk {
@@ -416,5 +398,5 @@ a.mceMove {
 }
 
 .alchemy .mceConfirm .mceIcon {
-	background: url(<%= image_tag "icons.png" %>) 0 -88px;
+	background: image-url("alchemy/icons.png") 0 -88px;
 }

data/app/assets/stylesheets/alchemy/_defaults.scss

@@ -141,20 +141,8 @@ $default-border: 1px solid #AFAFAF;
   -webkit-border-radius: $radius;
 }
 
-@mixin opacity-30 {
-	$opacity: 0.3; 
-	opacity: $opacity;
-	filter: alpha(opacity = $opacity*100);
-}
-
-@mixin opacity-50 {
-	$opacity: 0.5; 
-	opacity: $opacity;
-	filter: alpha(opacity = $opacity*100);
-}
-
-@mixin opacity-95 {
-	$opacity: 0.95; 
-	opacity: $opacity;
-	filter: alpha(opacity = $opacity*100);
+@mixin opacity($opacity) {
+	opacity: $opacity/100;
+	filter: alpha(opacity = $opacity);
+	-ms-filter: 'alpha(opacity=$opacity)';
 }

data/app/assets/stylesheets/alchemy/alchemy.css

@@ -1,5 +1,5 @@
-/* Alchemy CMS Sprocket Manifest
-* ------------------------------
+/* Alchemy CMS Sprockets Manifest
+* -------------------------------
 *= require alchemy/base
 *= require alchemy/elements
 *= require alchemy/flags

data/app/assets/stylesheets/alchemy/base.css.scss

@@ -44,7 +44,7 @@ div#flash_notices {
 
 div.flash {
 	@include rounded-corner;
-	@include opacity-95;
+	@include opacity(95);
 	padding: 8px 8px 8px 30px;
 	font-weight: bold;
 	border-width: 1px;
@@ -52,7 +52,7 @@ div.flash {
 	z-index: 1000;
 	margin: $default-margin;
 	position: relative;
-	max-height: 64px;
+	min-height: 1.3em;
 }
 
 div.flash span.icon {
@@ -87,18 +87,18 @@ div.flash.warning {
 }
 
 div.login_signup_box {
-	width: 380px;
-	padding: 16px;
-	border: 1px solid #9a9a9a;
-	background-color: #dedede;
+	width: 360px;
+	padding: 4*$default-padding;
+	border: $default-border;
+	background-color: $medium-gray;
 	@include rounded-corner;
-	-webkit-box-shadow: 1px 1px 8px rgba(0, 3, 51, 0.5);
-	-moz-box-shadow: 1px 1px 8px rgba(0, 3, 51, 0.5);
-	-o-box-shadow: 1px 1px 8px rgba(0, 3, 51, 0.5);
-	box-shadow: 1px 1px 8px rgba(0, 3, 51, 0.5);
 	margin: 2em auto;
 }
 
+div.login_signup_box select {
+	width: 220px;
+}
+
 /* @end */
 
 /* @group Pagination */
@@ -162,58 +162,65 @@ div.archive_pagination_links a:active {
 }
 
 div.pagination {
-	text-align: center;
+	clear: both;
+	zoom: 1;
+	text-align: right;
 	line-height: 24px;
 	height: 24px;
 	width: 100%;
-	margin-bottom: 16px;
+	margin-top: 4*$default-padding;
 }
 
-div.pagination a,
-div.pagination span,
-div.pagination em {
-	@include button-styles;
+div.pagination a, div.pagination span, div.pagination em {
 	font-size: 12px;
 	height: 25px;
 	line-height: 25px;
-	padding: 4px 8px;
+	padding: $default-padding;
 }
 
 div.pagination a:hover {
-	background-color: #e6f0f5;
-	color: $text-color;
-	border: 1px solid #888;
-	text-shadow: 0 1px 1px #fff;
-	text-decoration: none;
+	color: #000;
+	text-shadow: none;
+	text-decoration: underline;
 }
 
 div.pagination .current {
-	background-color: #e6f0f5;
+	@include button-styles;
+	background: $button-hover-bg-color;
 	color: $text-color;
 	border: 1px solid #888;
 	text-shadow: 0px 1px 1px #fff;
+	cursor: default;
 }
 
 div.pagination .previous_page {
-	margin-right: 16px;
+	margin-right: 2*$default-padding;
 }
 
 div.pagination .next_page {
-	margin-left: 16px;
+	margin-left: 2*$default-padding;
 }
 
 div.pagination .disabled {
 	color: #c0c0c0;
 }
 
+div.pagination span.gap {
+	border: none;
+	background: transparent;
+	cursor: default;
+}
+
 #assign_image_list div.pagination {
 	margin-bottom: 8px;
+	text-align: center;
 }
 
 /* @end */
 
 #login table tbody tr td.label {
 	width: 155px;
+	text-align: right;
 }
 
 #alchemy_greeting h1 {
@@ -222,10 +229,6 @@ div.pagination .disabled {
 	font-size: 1.2em;
 }
 
-td.submit {
-	text-align: right;
-}
-
 form#login.new_user_session {
 	text-align: right;
 }
@@ -468,12 +471,12 @@ div.widget p {
 /* @end */
 
 div#alchemy_greeting {
-	width: 396px;
+	width: 100%;
 	margin-right: auto;
 	margin-left: auto;
 	padding: 2*$default-padding;
 	margin-top: 1em;
-	text-align: right;
+	text-align: center;
 }
 
 #alchemy_greeting p {
@@ -508,13 +511,6 @@ a.drop_down_select img {
 	margin-bottom: 4px;
 }
 
-.new_alchemy_element form .selectbox {
-	float: left;
-	line-height: normal;
-	margin-left: 8px;
-	width: 200px;
-}
-
 .js_filter_field_box {
 	position: relative;
 	float: right;
@@ -571,7 +567,7 @@ div.edit_source_buttons {
 	clear: both;
 }
 
-table.list td.rights {
+table td.rights {
 	width: 60px;
 }
 
@@ -759,6 +755,7 @@ div.tip {
 	border: $default-border;
 	border-bottom-style: none;
 	height: 22px;
+	margin-right: 1px;
 }
 
 #sub_navigation span.page_status_and_name .flag {
@@ -799,6 +796,7 @@ div.tip {
 	position: absolute;
 	right: 3px;
 	top: 3px;
+	line-height: 10px;
 }
 
 #sub_navigation a {
@@ -883,6 +881,10 @@ div.tip {
 	margin-top: 2px;
 }
 
+#main_menu a label {
+	display: block;
+}
+
 #main_navi a.main_navi_entry.active {
 	background: #baced9;
 	color: $text-color;
@@ -1087,7 +1089,7 @@ span.page_status.restricted {
 
 span.page_status.not_restricted {
 	background: image-url('alchemy/icons.png') -290px -39px;
-	@include opacity-30;
+	@include opacity(30);
 }
 
 span.page_status.visible {
@@ -1096,7 +1098,7 @@ span.page_status.visible {
 
 span.page_status.not_visible {
 	background: image-url('alchemy/icons.png') -160px -39px;
-	@include opacity-30;
+	@include opacity(30);
 }
 
 span.page_status.public {
@@ -1105,7 +1107,7 @@ span.page_status.public {
 
 span.page_status.not_public {
 	background: image-url('alchemy/icons.png') -224px -39px;
-	@include opacity-30;
+	@include opacity(30);
 }
 
 #sideboard div.sideboard_widget img {
@@ -1186,11 +1188,10 @@ a.folder_link {
 
 /* @group page_editing */
 
-#page_names td {
+/*#page_names td {
 	height: 22px;
 	padding-bottom: 4px;
-	vertical-align: top;
-}
+}*/
 
 #page_names textarea {
 	height: 78px;
@@ -1232,33 +1233,6 @@ div#page_editing_menu {
 
 h2#sitemap_heading {
 	padding: 0;
-	margin: 16px 16px 0;
-}
-
-#page_status_options .firstcol {
-	float: left;
-}
-
-#page_status_options .firstcol label {
-	width: 80px;
-	margin-right: 10px;
-}
-
-#page_status_options .secondcol {
-	float: left;
-	margin-left: 16px;
-}
-
-#page_status_options .secondcol label {
-	width: 120px;
-	margin-right: 5px;
-}
-
-#page_status_options .thirdcol {
-	float: right;
-	font-size: 11px;
-	text-align: right;
-	width: 90px;
 }
 
 div#userinfo {
@@ -1304,6 +1278,11 @@ div#user_list_legend {
 	float: none;
 	margin: 0;
 	display: inline-block;
+	line-height: 5px;
+}
+
+#toolbar div.button_with_label form label {
+	margin-top: 5px;
 }
 
 #toolbar div.search_field {
@@ -1370,7 +1349,7 @@ button.icon_button.small:hover {
 	color: $dark-gray;
 	border: 1px solid #888;
 	text-shadow: 0 1px 4px #fff;
-	text-decoration: none;	
+	text-decoration: none;
 }
 
 button.icon_button:hover {
@@ -1474,8 +1453,8 @@ span.icon.module {
 	margin-bottom: 4px;
 }
 
-span.module.home {
-	background-position: 0 0;
+span.module.dashboard {
+	background-position: -240px 0;
 }
 
 span.module.pages {
@@ -1556,26 +1535,22 @@ div.table_right span.tools a.icon_button img {
 
 table {
 	border-style: none;
-	border-spacing: 0 4px;
+	border-spacing: 0 $default-padding;
 	padding: 0;
 	font-size: inherit;
-}
-
-table.window_form {
 	width: 100%;
 }
 
-table.list {
+table.window_form {
 	width: 100%;
 }
 
-table.list td,
-table.list th {
+table td, table th {
 	padding: $default-padding;
 	white-space: nowrap;
 }
 
-table.list th {
+table th {
 	text-align: left;
 	height: 22px;
 	vertical-align: top;
@@ -1585,23 +1560,23 @@ th.login_status {
 	width: 16px;
 }
 
-table.list tr.odd td {
-	background-color: white;
-}
-
-table.list tr.even td {
+table tr.odd td {
 	background-color: #eaf3f9;
 }
 
-.even {
-	background-color: #eaf3f9;
+table tr.even td {
+	background-color: white;
 }
 
-.odd {
+li.even {
 	background-color: #fff;
 }
 
-.list li.table_row {
+li.odd {
+	background-color: #eaf3f9;
+}
+
+ul.list li.table_row {
 	display: block;
 	margin: 0 0 8px;
 	background-color: #ffffff;
@@ -1626,29 +1601,8 @@ ul#layoutpages.list li {
 }
 
 ul#sitemap.list {
-	padding: 0 16px 116px;
-}
-
-/*#sitemap .drop_hover {
-	background: url(/images/alchemy/gui/insertpage.png) no-repeat bottom left;
-	outline: 1px dotted #999;
-}
-
-#sitemap .drop_top {
-	background-position: top left;
-	padding-top: 16px;
-}
-
-#sitemap .drop_bottom {
-	background-position: bottom left;
-	padding-bottom: 16px;
-}
-
-#sitemap .drop_insert {
-	background-position: 24px 100%;
-	padding-bottom: 16px;
+	padding: 0;
 }
-*/
 
 ul.list li {
 	list-style-type: none;
@@ -1666,7 +1620,7 @@ ul.list li.legend {
 	float: left;
 }
 
-.list div.detail_row {
+ul.list div.detail_row {
 	background-color: $medium-gray;
 	font-size: 10px;
 	margin-top: 3px;
@@ -1674,12 +1628,12 @@ ul.list li.legend {
 	overflow: hidden;
 }
 
-.list div.detail_row div {
+ul.list div.detail_row div {
 	padding-top: 1px;
 	padding-bottom: 1px;
 }
 
-.list span.right {
+ul.list span.right {
 	float: right;
 }
 
@@ -1713,8 +1667,7 @@ h2#sitemap_heading span.page_infos {
 
 /* @group image_upload */
 
-table.list td.tools .icon,
-table.list td.icon .icon {
+table td.tools .icon, table td.icon .icon {
 	width: 16px;
 	height: 16px;
 	-webkit-user-select: none;
@@ -1722,7 +1675,8 @@ table.list td.icon .icon {
 	user-select: none;
 	margin-top: 0;
 	background-repeat: no-repeat;
-	display: block;
+	display: inline;
+	display: inline-block;
 	margin-right: 4px;
 }
 
@@ -1731,7 +1685,7 @@ input#search_input_field {
 	text-align: left;
 	@include rounded-search-field;
 	padding: 3px 24px 2px;
-	height: 25px;
+	height: 18px;
 }
 
 input.button,
@@ -1852,23 +1806,37 @@ a.small.button.with_icon span.icon {
 	left: -1px;
 }
 
-table.list tr td.tools {
+table tr td.tools {
 	width: 40px;
 	background-color: $light-gray;
 	white-space: nowrap;
 }
 
-td.input,
-td.label {
+td.input, td.label {
 	padding-top: 2px;
 	vertical-align: top;
 }
 
+td.input, td.submit, td.select {
+	text-align: right;
+	padding-right: 0;
+}
+
+td.value {
+	text-indent: 4px;
+}
+
 td.label {
 	white-space: nowrap;
 	width: 80px;
-	padding: 2px 8px 0 0;
-	line-height: 23px;
+	padding: $default-padding 2*$default-padding 0 0;
+	line-height: 6*$default-padding;
+}
+
+td.heading {
+	padding: $default-padding 0;
+	font-weight: bold;
+	text-decoration: underline;
 }
 
 td.input input[type="checkbox"], td.input input[type="radio"] {
@@ -1883,18 +1851,17 @@ td.label.very_long {
 	width: 230px;
 }
 
-table.list tr td.tools a {
-	float: left;
+table tr td.tools a {
 	width: 19px;
 	height: 19px;
 	margin-right: 2px;
 }
 
-table.list tr td.tools.long {
+table tr td.tools.long {
 	width: 60px;
 }
 
-table.list tr td.icon {
+table tr td.icon {
 	background-color: $light-gray;
 	width: 20px;
 	text-align: center;
@@ -1917,6 +1884,14 @@ td.date {
 	width: 150px;
 }
 
+table td.right, table th.right {
+	text-align: right;
+}
+
+table td.center, table th.center {
+	text-align: center;
+}
+
 .list li.table_row div.table_right span{
 	float: left;
 	text-align: left;
@@ -1949,8 +1924,7 @@ td.role {
 }
 
 #archive_all {
-	padding: 16px;
-	overflow: visible;
+	padding: 4*$default-padding;
 }
 
 #archive_all .padding_left_right {
@@ -1961,17 +1935,13 @@ td.role {
 .inplace-edit {
 	background-color: $light-gray;
 	position: absolute;
-	left: -8px;
-	top: 0;
+	left: -5px;
+	top: -8px;
 	width: 204px;
 	z-index: 10;
-	height: 65px;
+	height: 60px;
 	border: $default-border;
 	@include rounded-corner;
-	-webkit-box-shadow: #444 0px 1px 8px;
-	-moz-box-shadow: #444 0px 1px 8px;
-	-o-box-shadow: #444 0px 1px 8px;
-	box-shadow: #444 0px 1px 8px;
 }
 
 .inplace-edit input.save-button {
@@ -1997,6 +1967,7 @@ td.role {
 	position: absolute;
 	left: 4px;
 	top: 4px;
+	height: 18px;
 }
 
 div.spinner {
@@ -2108,8 +2079,7 @@ textarea.thin_border {
 	height: auto;
 }
 
-.thin_border,
-.input_field {
+.thin_border, .input_field {
 	margin: 0;
 	@include rounded-corner;
 	background: #fff;
@@ -2117,9 +2087,8 @@ textarea.thin_border {
 	width: 210px;
 	font-size: 12px;
 	line-height: 19px;
-	height: 27px;
-	padding-left: 4px;
-	padding-right: 4px;
+	height: 25px;
+	padding: 1px $default-padding;
 }
 
 .thin_border.dirty {
@@ -2530,13 +2499,13 @@ div.button_with_label.active label{
 
 div.button_with_label.disabled {
 	position: relative;
-	@include opacity-50;
+	@include opacity(50);
 	cursor: default;
 }
 
 .icon_button.disabled span {
 	position: relative;
-	@include opacity-30;
+	@include opacity(30);
 	cursor: default;
 }
 
@@ -2553,7 +2522,7 @@ div.button_with_label.disabled:before {
 	width: 100%;
 	height: 100%;
 	background-color: transparent;
-	@include opacity-50;
+	@include opacity(50);
 }
 
 div.button_with_label.disabled a:hover, 
@@ -2577,11 +2546,6 @@ div.button_with_label .disabledButton {
 	z-index: 1;
 }
 
-#per_page_links {
-	text-align: center;
-	float: left;
-}
-
 div.button_with_label a.icon_button {
 	float: none;
 	margin-right: auto;
@@ -2594,7 +2558,7 @@ div#toolbar label,
 div#overlay_toolbar label {
 	font-size: 10px;
 	text-shadow: #fff 0 1px 2px;
-	margin-top: 4px;
+	margin-top: 2px;
 	display: block;
 	line-height: 13px;
 }
@@ -2723,26 +2687,10 @@ div#image_assign_filter_and_image_sizing {
 	height: 40px;
 }
 
-label.sup {
-	position: relative;
-	bottom: 3px;
-}
-
-/*div.assign_image_list_detail {
-	background-color: #ffffff;
-	text-align: center;
-	float: left;
-	margin: 0 6px 6px 0;
-	padding: $default-padding;
-	position: relative;
-	overflow: hidden;
-	border: 1px solid #c0c0c0;
-	@include rounded-corner;
-}*/
-
 #assign_image_list {
 	padding: 2*$default-padding;
 	overflow: hidden;
+	text-align: center;
 }
 
 /* @group Picture Thumbnails */
@@ -2751,17 +2699,33 @@ label.sup {
 	padding: $default-padding;
 	margin: 2px 1px 2px 2px;
 	background-color: #fff;
-	float: left;
+	float: none;
+	display: inline;
+	display: inline-block;
 	border: 1px solid #c0c0c0;
 	position: relative;
 	@include rounded-corner;
 }
 
-div#archive_all .picture_thumbnail {
+#picture_archive {
+	padding: 2*$default-padding;
+	border: $default-border;
+	@include rounded-corner;
+	margin: -2*$default-padding;
+	background-color: $medium-gray;
+}
+
+#pictures, #picture_archive .pagination {
+	text-align: center;
+}
+
+#pictures .picture_thumbnail {
 	margin: 0 16px 16px 0;
+	display: inline-block;
+	float: none;
 }
 
-#archive_all .picture_thumbnail:hover .picture_tool_delete {
+#pictures .picture_thumbnail:hover .picture_tool_delete {
 	display: block;
 }
 
@@ -2773,6 +2737,7 @@ div#archive_all .picture_thumbnail {
 	text-align: center;
 	vertical-align: middle;
 	padding: 0;
+	line-height: 0;
 }
 
 .picture_thumbnail.small .thumbnail_background {
@@ -2790,7 +2755,7 @@ div#archive_all .picture_thumbnail {
 	height: 180px;
 }
 
-#archive_all .picture_thumbnail .thumbnail_background {
+#pictures .picture_thumbnail .thumbnail_background {
 	cursor: -webkit-zoom-in;
 	cursor: -moz-zoom-in;
 	cursor: -o-zoom-in;
@@ -2964,10 +2929,6 @@ div#errors {
 	width: 123px;
 }
 
-input#page_name {
-	width: 126px;
-}
-
 input.with_border {
 	margin: 0;
 	padding: 1px;
@@ -2996,7 +2957,7 @@ input#user_admin {
 
 #alchemy div#overlay_toolbar div#image_assign_filter_and_image_sizing form {
 	float: right;
-	width: 232px;
+	width: 290px;
 	height: 25px;
 	margin-top: 2px;
 	padding: 0 !important;
@@ -3160,13 +3121,13 @@ div.elements_for_page {
 }
 
 a.close_elements_from_page_selector {
-	padding-left: 4px;
+	position: absolute;
+	right: 8px;
+	top: 8px;
 	font-size: 0;
-	float: right;
 	padding-right: 2px;
 	width: 11px;
 	height: 15px;
-	margin-top: 5px;
 	background: image-url('alchemy/icons.png') no-repeat 0 -72px;
 	cursor: pointer;
 }
@@ -3244,16 +3205,8 @@ div.assign_file_file_icon img {
 	width: 195px;
 }
 
-#alchemy .ui-dialog-content td.label {
-	padding-top: 2px;
-	padding-bottom: 2px;
-	padding-right: 8px;
-	height: 25px;
-}
-
-#alchemy .ui-dialog-content td.label.right {
-	text-align: right;
-	width: 40px;
+td.label.middle {
+	padding-left: 2*$default-padding;
 }
 
 .elements_for_page .alchemy_selectbox {
@@ -3261,11 +3214,6 @@ div.assign_file_file_icon img {
 	width: 217px;
 }
 
-table.window_form td.input {
-	padding-top: 2px;
-	padding-bottom: 2px;
-}
-
 #alchemy .ui-dialog-content p {
 	min-height: 21px;
 }
@@ -3278,9 +3226,8 @@ select#url_protocol.medium {
 	margin: 0;
 }
 
-#alchemy .ui-dialog-content input.auto_resize,
-#alchemy .ui-dialog-content textarea.auto_resize {
-	width: 100%;
+#alchemy .ui-dialog-content input.auto_resize, #alchemy .ui-dialog-content textarea.auto_resize {
+	width: 98%;
 }
 
 #alchemy .ui-dialog-content td.medium {
@@ -3440,11 +3387,14 @@ a.icon.remove {
 	margin-right: 4px;
 }
 
+a#uploadswitcher, a.underline {
+	text-decoration: underline;
+}
+
 #uploadProgressContainer {
-	overflow: hidden;
-	margin-right: auto;
-	margin-left: auto;
-	padding: 0 8px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: 234px;
 }
 
 #uploadProgressContainer .progressWrapper {
@@ -3513,8 +3463,14 @@ a.icon.remove {
 	right: 8px;
 }
 
-#btnCancel {
+#swf_upload_container {
+	height: 60px;
+}
+
+#swf_upload_container .button {
 	float: right;
+	margin-top: 4*$default-margin;
+	font-size: 11px;
 }
 
 object.swfupload {