alchemy_cms 2.0.7 → 2.1.beta1

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

@@ -0,0 +1,160 @@
+$text-color: #333333;
+$light-blue: #C6DBE7;
+$light-gray: #EDEDED;
+$medium-gray: #E3E3E3;
+$dark-gray: #666666;
+$button-bg-color: #F7F7F7;
+$button-hover-bg-color: #e6f0f5;
+$button-border-color: #9A9A9A;
+$button-hover-border-color: #888888;
+$button-text-shadow: #f2f2f2 1px 1px 0;
+
+$default-padding: 4px;
+$default-margin: $default-padding;
+
+$default-font-face: "Lucida Grande", Arial, sans-serif;
+$default-font-size: 12px;
+$default-font-style: $default-font-size $default-font-face;
+
+$default-border: 1px solid #AFAFAF;
+
+@mixin button-styles {
+	margin: 0;
+	font: 11px $default-font-face;
+	border: 1px solid $button-border-color;
+	background-color: $button-bg-color;
+	background-image: image-url('alchemy/shading.png');
+	background-repeat: repeat-x;
+	background-position: 0 -73px;
+	cursor: pointer;
+	color: $text-color;
+	text-shadow: $button-text-shadow;
+	@include rounded-corner;
+}
+
+@mixin button-hover-styles {
+	text-decoration: none;
+	text-shadow: none;
+	border: 1px solid $button-hover-border-color;
+	background: $button-hover-bg-color image-url('alchemy/shading.png') repeat-x 50% -75px;
+	font-weight: normal;
+}
+
+@mixin rounded-corner {
+  $radius: 3px;
+  border-radius: $radius;
+  -o-border-radius: $radius;
+  -ms-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+
+@mixin reset-border-radius {
+  $radius: 0px;
+  border-radius: $radius;
+  -o-border-radius: $radius;
+  -ms-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+
+@mixin top-rounded-border {
+	$sidea: top-left;
+	$sideb: top-right;
+	$radius: 3px;
+	border-#{$sidea}-radius: $radius;
+	border-#{$sideb}-radius: $radius;
+	-o-border-#{$sidea}-radius: $radius;
+	-o-border-#{$sideb}-radius: $radius;
+	-ms-border-#{$sidea}-radius: $radius;
+	-ms-border-#{$sideb}-radius: $radius;
+	-moz-border-radius-#{$sidea}: $radius;
+	-moz-border-radius-#{$sideb}: $radius;
+	-webkit-border-#{$sidea}-radius: $radius;
+	-webkit-border-#{$sideb}-radius: $radius;
+}
+
+@mixin left-rounded-border {
+	$sidea: bottom-left;
+	$sideb: top-left;
+	$radius: 3px;
+	border-#{$sidea}-radius: $radius;
+	border-#{$sideb}-radius: $radius;
+	-o-border-#{$sidea}-radius: $radius;
+	-o-border-#{$sideb}-radius: $radius;
+	-ms-border-#{$sidea}-radius: $radius;
+	-ms-border-#{$sideb}-radius: $radius;
+	-moz-border-radius-#{$sidea}: $radius;
+	-moz-border-radius-#{$sideb}: $radius;
+	-webkit-border-#{$sidea}-radius: $radius;
+	-webkit-border-#{$sideb}-radius: $radius;
+}
+
+@mixin right-rounded-border {
+	$sidea: bottom-right;
+	$sideb: top-right;
+	$radius: 3px;
+	border-#{$sidea}-radius: $radius;
+	border-#{$sideb}-radius: $radius;
+	-o-border-#{$sidea}-radius: $radius;
+	-o-border-#{$sideb}-radius: $radius;
+	-ms-border-#{$sidea}-radius: $radius;
+	-ms-border-#{$sideb}-radius: $radius;
+	-moz-border-radius-#{$sidea}: $radius;
+	-moz-border-radius-#{$sideb}: $radius;
+	-webkit-border-#{$sidea}-radius: $radius;
+	-webkit-border-#{$sideb}-radius: $radius;
+}
+
+@mixin bottom-rounded-border {
+	$sidea: bottom-left;
+	$sideb: bottom-right;
+	$radius: 3px;
+	border-#{$sidea}-radius: $radius;
+	border-#{$sideb}-radius: $radius;
+	-o-border-#{$sidea}-radius: $radius;
+	-o-border-#{$sideb}-radius: $radius;
+	-ms-border-#{$sidea}-radius: $radius;
+	-ms-border-#{$sideb}-radius: $radius;
+	-moz-border-radius-#{$sidea}: $radius;
+	-moz-border-radius-#{$sideb}: $radius;
+	-webkit-border-#{$sidea}-radius: $radius;
+	-webkit-border-#{$sideb}-radius: $radius;
+}
+
+@mixin bottom-left-rounded-border {
+	$side: bottom-left;
+	$radius: 3px;
+	border-#{$side}-radius: $radius;
+	-o-border-#{$side}-radius: $radius;
+	-ms-border-#{$side}-radius: $radius;
+	-moz-border-radius-#{$side}: $radius;
+	-webkit-border-#{$side}-radius: $radius;
+}
+
+@mixin rounded-search-field {
+  $radius: 12px;
+  border-radius: $radius;
+  -o-border-radius: $radius;
+  -ms-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -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);
+}

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

@@ -0,0 +1,9 @@
+/* Alchemy CMS Sprocket Manifest
+* ------------------------------
+*= require alchemy/base
+*= require alchemy/elements
+*= require alchemy/flags
+*= require alchemy/jquery-ui.alchemy
+*= require alchemy/jquery.Jcrop
+*= require alchemy/jquery.sb
+*/

data/{assets/stylesheets/alchemy.css → app/assets/stylesheets/alchemy/base.css.scss}

@@ -1,4 +1,4 @@
-/* @override http://localhost:3000/stylesheets/alchemy/alchemy.css */
+@import "defaults";
 
 html {
 	height: 100%;
@@ -12,15 +12,15 @@ html {
 body#alchemy {
 	margin: 0;
 	padding: 0;
-	color: #333;
-	font: 12px "Lucida Grande", Arial, sans-serif;
-	background-color: #ededed;
+	color: $text-color;
+	font: $default-font-style;
+	background-color: $light-gray;
 	height: 100%;
 	cursor: default;
 }
 
 a {
-	color: #333;
+	color: $text-color;
 	text-decoration: none;
 }
 
@@ -43,17 +43,14 @@ div#flash_notices {
 }
 
 div.flash {
+	@include rounded-corner;
+	@include opacity-95;
 	padding: 8px 8px 8px 30px;
 	font-weight: bold;
 	border-width: 1px;
 	border-style: solid;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
 	z-index: 1000;
-	opacity: 0.95;
-	filter: alpha(opacity=95);
-	margin: 4px;
+	margin: $default-margin;
 	position: relative;
 	max-height: 64px;
 }
@@ -94,10 +91,7 @@ div.login_signup_box {
 	padding: 16px;
 	border: 1px solid #9a9a9a;
 	background-color: #dedede;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@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);
@@ -121,7 +115,7 @@ div.archive_pagination_links {
 div.archive_pagination_links span.pagination_current_page {
 	background-position: 0 -21px;
 	font-weight: bold;
-	color: #333;
+	color: $text-color;
 }
 
 div.archive_pagination_links .first_page {
@@ -150,14 +144,12 @@ div.archive_pagination_links .first_page {
 
 .archive_pagination_links span, .archive_pagination_links a {
 	padding: 0;
-	color: #333;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	color: $text-color;
+	@include rounded-corner;
 	width: 21px;
 	height: 21px;
 	display: inline-block;
-	background: url(/images/alchemy/gui/button_background.png) no-repeat 0 0;
+	background: image-url('alchemy/shading.png') no-repeat 0 0;
 }
 
 .archive_pagination_links span {
@@ -180,21 +172,16 @@ div.pagination {
 div.pagination a,
 div.pagination span,
 div.pagination em {
+	@include button-styles;
+	font-size: 12px;
+	height: 25px;
+	line-height: 25px;
 	padding: 4px 8px;
-	border: 1px solid #c0c0c0;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
-	background: white url(/images/alchemy/gui/shading.png) repeat-x 0 -75px;
-	height: 23px;
-	line-height: 23px;
-	font-style: normal;
 }
 
 div.pagination a:hover {
 	background-color: #e6f0f5;
-	color: #333;
+	color: $text-color;
 	border: 1px solid #888;
 	text-shadow: 0 1px 1px #fff;
 	text-decoration: none;
@@ -202,7 +189,7 @@ div.pagination a:hover {
 
 div.pagination .current {
 	background-color: #e6f0f5;
-	color: #333;
+	color: $text-color;
 	border: 1px solid #888;
 	text-shadow: 0px 1px 1px #fff;
 }
@@ -250,7 +237,7 @@ form#login.new_user_session {
 
 #login_notice {
 	overflow: auto;
-	padding: 8px;
+	padding: 2*$default-padding;
 	background-color: #fff;
 	text-align: left;
 }
@@ -290,7 +277,7 @@ div#overlay {
 }
 
 div#overlay_text_box {
-	color: #333;
+	color: $text-color;
 	font-size: 18px;
 	text-align: center;
 	margin-top: 25%;
@@ -330,12 +317,12 @@ div#top_menu {
 	left: 0;
 	width: 65px;
 	overflow: hidden;
-	border-right: 1px solid #afafaf;
+	border-right: $default-border;
 }
 
 #main_menu_background {
 	height: 100%;
-	background: #c6dbe7;
+	background: $light-blue;
 	width: 65px;
 	z-index: 0;
 	position: absolute;
@@ -367,7 +354,7 @@ div#top_menu {
 /* @end */
 
 #main_content {
-	background-color: #ededed;
+	background-color: $light-gray;
 	position: absolute;
 	top: 90px;
 	left: 65px;
@@ -418,18 +405,11 @@ span.updated_at {
 }
 
 div.widget {
-	padding: 8px;
+	padding: 2*$default-padding;
 	margin: 16px 0;
-	background-color: #e3e3e3;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
-	-webkit-box-shadow: 0px 0px 4px rgba(0, 3, 51, 0.2);
-	-moz-box-shadow: 0px 0px 4px rgba(0, 3, 51, 0.2);
-	-o-box-shadow: 0px 0px 4px rgba(0, 3, 51, 0.2);
-	box-shadow: 0px 0px 4px rgba(0, 3, 51, 0.2);
-	border: 1px solid #afafaf;
+	background-color: $medium-gray;
+	border: $default-border;
+	@include rounded-corner;
 }
 
 div.widget p {
@@ -441,18 +421,15 @@ div.widget p {
 #dashboard div.widget ul {
 	padding: 0;
 	list-style-type: none;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	margin-right: -9px;
 	margin-left: -9px;
 	margin-bottom: -9px;
-	border: 1px solid #afafaf;
+	border: $default-border;
 }
 
 #dashboard div.widget ul li {
-	padding: 8px;
+	padding: 2*$default-padding;
 	margin-bottom: 0;
 }
 
@@ -494,7 +471,7 @@ div#alchemy_greeting {
 	width: 396px;
 	margin-right: auto;
 	margin-left: auto;
-	padding: 8px;
+	padding: 2*$default-padding;
 	margin-top: 1em;
 	text-align: right;
 }
@@ -520,13 +497,11 @@ a.drop_down_select img {
 #alchemy a.search_field_clear {
 	width: 16px;
 	height: 16px;
-	background: url(/images/alchemy/jquery-ui/ui-icons_666666_256x240.png) no-repeat -80px -128px;
+	background: image-url('alchemy/ui-icons_666666_256x240.png') no-repeat -80px -128px;
 	position: absolute;
 	right: 8px;
 	top: 4px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 }
 
 #language_select {
@@ -549,9 +524,7 @@ a.drop_down_select img {
 .js_filter_field_box .js_filter_field {
 	width: 170px;
 	text-align: left;
-	-webkit-border-radius: 12px;
-	-moz-border-radius: 12px;
-	border-radius: 12px;
+	@include rounded-search-field;
 	padding: 3px 24px 2px;
 }
 
@@ -572,13 +545,11 @@ a.drop_down_select img {
 .js_filter_field_box .js_filter_field_clear {
 	width: 15px;
 	height: 15px;
-	background: url(/images/alchemy/icons.png) no-repeat 0 -70px;
+	background: image-url('alchemy/icons.png') no-repeat 0 -104px;
 	position: absolute;
 	right: 8px;
 	top: 4px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 }
 
 h1 {
@@ -628,12 +599,9 @@ p {
 div.info {
 	padding: 8px 8px 8px 32px;
 	line-height: 17px;
-	color: #333;
+	color: $text-color;
 	border: 1px solid #0b5c84;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	background-color: #eaf4f9;
 	position: relative;
 	margin-bottom: 8px;
@@ -650,7 +618,7 @@ div#bottom_panel {
 	right: 0;
 	width: 100%;
 	z-index: 10;
-	background: #e3e3e3 url(../../images/alchemy/gui/shading.png) repeat-x 0 0;
+	background: $medium-gray image-url('alchemy/shading.png') repeat-x 0 0;
 }
 
 div#bottom_panel div.info {
@@ -725,19 +693,16 @@ div#page {
 	display: block;
 	width: 16px;
 	height: 16px;
-	background: url(/images/alchemy/icons.png) no-repeat -63px -72px;
+	background: image-url('alchemy/icons.png') no-repeat -63px -72px;
 	cursor: pointer;
 }
 
 div.tip {
 	background-color: #eff8d0;
 	border: 1px solid #cce21c;
-	padding: 8px;
+	padding: 2*$default-padding;
 	margin: 8px 0;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	width: 450px;
 }
 
@@ -754,8 +719,8 @@ div.tip {
 	height: 22px;
 	line-height: 23px;
 	padding-left: 5px;
-	background: #c6dbe7;
-	border-bottom: 1px solid #afafaf;
+	background: $light-blue;
+	border-bottom: $default-border;
 	padding-top: 4px;
 	z-index: 5;
 	position: relative;
@@ -781,7 +746,7 @@ div.tip {
 
 #sub_navigation span.page_status_and_name {
 	padding: 0 8px;
-	background-color: #e3e3e3;
+	background-color: $medium-gray;
 	text-shadow: #fff 0 1px 2px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -790,12 +755,8 @@ div.tip {
 	cursor: default;
 	line-height: 20px;
 	float: left;
-	-webkit-border-top-right-radius: 3px;
-	-webkit-border-top-left-radius: 3px;
-	-moz-border-radius: 3px 3px 0 0;
-	-o-border-radius: 3px 3px 0 0;
-	border-radius: 3px 3px 0 0;
-	border: 1px solid #afafaf;
+	@include top-rounded-border;
+	border: $default-border;
 	border-bottom-style: none;
 	height: 22px;
 }
@@ -823,12 +784,8 @@ div.tip {
 	text-shadow: #fff 0 0px 4px;
 	background: #d6e0e6;
 	color: #444;	
-	-webkit-border-top-right-radius: 3px;
-	-webkit-border-top-left-radius: 3px;
-	-moz-border-radius: 3px 3px 0 0;
-	-o-border-radius: 3px 3px 0 0;
-	border-radius: 3px 3px 0 0;
-	border: 1px solid #afafaf;
+	@include top-rounded-border;
+	border: $default-border;
 	border-bottom-style: none;
 	margin-right: 1px;
 }
@@ -849,7 +806,7 @@ div.tip {
 }
 
 #sub_navigation div.subnavi_tab:hover {
-	color: #333;
+	color: $text-color;
 	text-decoration: none;
 }
 
@@ -858,8 +815,8 @@ div.tip {
 	position: relative;
 	padding: 0px 8px;
 	height: 22px;
-	color: #333;
-	background-color: #e3e3e3;
+	color: $text-color;
+	background-color: $medium-gray;
 	text-shadow: #fff 0 1px 2px;
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -900,11 +857,7 @@ div.tip {
 	overflow: hidden;
 	display: block;
 	padding-top: 7px;
-	-webkit-border-top-left-radius: 3px 3px;
-	-webkit-border-bottom-left-radius: 3px 3px;
-	-moz-border-radius: 3px 0px 0px 3px;
-	-o-border-radius: 3px 0px 0px 3px;
-	border-radius: 3px 0px 0px 3px;
+	@include left-rounded-border;
 	margin-bottom: 1px;
 	margin-top: 1px;
 	border: 1px none #afafaf;
@@ -918,7 +871,7 @@ div.tip {
 #main_navi a.main_navi_entry:hover {
 	cursor: pointer;
 	text-decoration: none;
-	color: #333;
+	color: $text-color;
 }
 
 #main_navi a.main_navi_entry img {
@@ -932,10 +885,10 @@ div.tip {
 
 #main_navi a.main_navi_entry.active {
 	background: #baced9;
-	color: #333;
+	color: $text-color;
 	cursor: default;
 	text-shadow: #fff 0 1px 2px;
-	border: 1px solid #afafaf;
+	border: $default-border;
 	padding-left: 0;
 	border-right-style: none;
 	padding-top: 6px;
@@ -1000,7 +953,7 @@ a.sitemap_pagename_link:hover:after {
 	height: 16px;
 	float: left;
 	margin-right: 4px;
-	background: url(/images/alchemy/icons.png) -160px -168px;
+	background: image-url('alchemy/icons.png') -160px -168px;
 	margin-top: 4px;
 }
 
@@ -1053,11 +1006,11 @@ div.sitemap_left_images {
 	margin-top: 3px;
 	float: left;
 	margin-right: 8px;
-	background-color: #ededed;
+	background-color: $light-gray;
 }
 
 #sitemap a.page_folder {
-	background-image: url(/images/alchemy/gui/toggle.png);
+	background-image: image-url('alchemy/gui/toggle.png');
 	background-repeat: no-repeat;
 	height: 9px;
 	width: 9px;
@@ -1077,7 +1030,7 @@ div.sitemap_left_images {
 
 div.sitemap_right_tools {
 	height: 22px;
-	background-color: #ededed;
+	background-color: $light-gray;
 	padding-left: 16px;
 	float: right;
 	width: 100px;
@@ -1096,7 +1049,6 @@ ul.list li .sitemap_toolrow {
 
 ul#sitemap .sitemap_sitename,
 ul.list .sitemap_sitename {
-  -moz-border-radius: 3px 2px 2px 2px;
   background-color: #EDEDED;
   height: 22px;
   line-height: 22px;
@@ -1104,9 +1056,7 @@ ul.list .sitemap_sitename {
 }
 
 div.page_infos {
-  -webkit-border-radius: 0 3px 3px 0;
-  -moz-border-radius: 0 3px 3px 0;
-  border-radius: 0 3px 3px 0;
+  @include top-rounded-border;
   background-color: #FFFFFF;
   border-left: 1px solid #EDEDED;
   float: right;
@@ -1132,30 +1082,30 @@ div.page_infos {
 }
 
 span.page_status.restricted {
-	background: url(/images/alchemy/icons.png) -258px -39px;
+	background: image-url('alchemy/icons.png') -258px -39px;
 }
 
 span.page_status.not_restricted {
-	background: url(/images/alchemy/icons.png) -290px -39px;
-	opacity: 0.3;
+	background: image-url('alchemy/icons.png') -290px -39px;
+	@include opacity-30;
 }
 
 span.page_status.visible {
-	background: url(/images/alchemy/icons.png) -128px -39px;
+	background: image-url('alchemy/icons.png') -128px -39px;
 }
 
 span.page_status.not_visible {
-	background: url(/images/alchemy/icons.png) -160px -39px;
-	opacity: 0.3;
+	background: image-url('alchemy/icons.png') -160px -39px;
+	@include opacity-30;
 }
 
 span.page_status.public {
-	background: url(/images/alchemy/icons.png) -192px -39px;
+	background: image-url('alchemy/icons.png') -192px -39px;
 }
 
 span.page_status.not_public {
-	background: url(/images/alchemy/icons.png) -224px -39px;
-	opacity: 0.3;
+	background: image-url('alchemy/icons.png') -224px -39px;
+	@include opacity-30;
 }
 
 #sideboard div.sideboard_widget img {
@@ -1167,7 +1117,7 @@ span.page_status.not_public {
 	float: left;
 	width: 16px;
 	height: 16px;
-	background: url(/images/alchemy/icons.png) no-repeat 0 -40px;
+	background: image-url('alchemy/icons.png') no-repeat 0 -40px;
 }
 
 .locked .site_status {
@@ -1200,14 +1150,6 @@ ul#sitemap li img {
 
 /* @group site_tools */
 
-.sitemap_line {
-	float: left;
-	width: 15px;
-	height: 30px;
-	margin: 0 2px 1px 4px;
-	background: url(/images/alchemy/gui/sitemap_lines.png) no-repeat;
-}
-
 a.folder_link {
 	text-decoration: none;
 	outline: none;
@@ -1342,15 +1284,12 @@ div#user_list_legend {
 	z-index: 10;
 	padding: 6px;
 	height: 40px;
-	background: #e3e3e3 url(/images/alchemy/gui/shading.png) repeat-x 0 -40px;
+	background: $medium-gray image-url('alchemy/shading.png') repeat-x 0 -40px;
 	margin-right: 0px;
-	border: 1px solid #afafaf;
+	border: $default-border;
 	border-top-style: none;
 	border-right-style: none;
-	-webkit-border-radius: 0 0 0 3px;
-	-moz-border-radius: 0 0 0 3px;
-	-o-border-radius: 0 0 0 3px;
-	border-radius: 0 0 0 3px;
+	@include bottom-left-rounded-border;
 	position: relative;
 	margin-left: 5px;
 }
@@ -1407,20 +1346,11 @@ div#toolbar a.button:active {
 	background-position: 0 -21px;
 }
 
-div#toolbar_buttons span.file_upload {
-	background-image: url(/images/alchemy/icons/file_upload.png);
-}
-
 /* @group add, edit and delete buttons */
 
 button.icon_button {
-	background: #f7f7f7 url(/images/alchemy/gui/shading.png) repeat-x 0 -75px;
-	border: 1px solid #9a9a9a;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
-	cursor: pointer;
-	padding: 4px;
+	@include button-styles;
+	padding: $default-padding;
 	height: 25px;
 	line-height: 19px;
 	font-size: 0;
@@ -1437,7 +1367,7 @@ button.icon_button.small {
 
 button.icon_button.small:hover {
 	background-color: #e6f0f5;
-	color: #666;
+	color: $dark-gray;
 	border: 1px solid #888;
 	text-shadow: 0 1px 4px #fff;
 	text-decoration: none;	
@@ -1445,7 +1375,7 @@ button.icon_button.small:hover {
 
 button.icon_button:hover {
 	background-color: #e6f0f5;
-	color: #666;
+	color: $dark-gray;
 	border: 1px solid #888;
 	text-shadow: 0 1px 4px #fff;
 	text-decoration: none;
@@ -1466,14 +1396,12 @@ a.icon_button {
 	width: 23px;
 	height: 23px;
 	background-color: #f7f7f7;
-	background-image: url(/images/alchemy/gui/shading.png);
+	background-image: image-url('alchemy/shading.png');
 	background-repeat: repeat-x;
 	background-position: 0 -75px;
 	margin-right: 8px;
 	border: 1px solid #9a9a9a;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
@@ -1504,7 +1432,7 @@ a.icon_button.old_icon {
 
 a.icon_button:hover {
 	background-color: #e6f0f5;
-	color: #666;
+	color: $dark-gray;
 	border: 1px solid #888;
 	text-shadow: 0 1px 4px #fff;
 	text-decoration: none;
@@ -1577,15 +1505,15 @@ a.icon_button span.icon {
 }
 
 span.icon.zoom-out {
-	background: url(/images/alchemy/icons.png) -416px -72px;
+	background: image-url('alchemy/icons.png') -416px -72px;
 }
 
 span.icon.zoom-equal {
-	background: url(/images/alchemy/icons.png) -448px -72px;
+	background: image-url('alchemy/icons.png') -448px -72px;
 }
 
 span.icon.zoom-in {
-	background: url(/images/alchemy/icons.png) -480px -72px;
+	background: image-url('alchemy/icons.png') -480px -72px;
 }
 
 a.icon_button.small span.icon {
@@ -1597,7 +1525,7 @@ a.icon_button.small span.icon {
 }
 
 span.icon.delete-small {
-	background: url(/images/alchemy/icons.png) 0 -72px;
+	background: image-url('alchemy/icons.png') 0 -72px;
 }
 
 a.icon_button span.old_icon {
@@ -1623,7 +1551,7 @@ div.table_right span.tools a.icon_button img {
 
 #user_edit form {
 	margin: 0;
-	padding: 8px;
+	padding: 2*$default-padding;
 }
 
 table {
@@ -1643,7 +1571,7 @@ table.list {
 
 table.list td,
 table.list th {
-	padding: 4px;
+	padding: $default-padding;
 	white-space: nowrap;
 }
 
@@ -1685,7 +1613,7 @@ table.list tr.even td {
 
 ul.list {
 	margin: 0;
-	padding: 8px;
+	padding: 2*$default-padding;
 	list-style-type: none;
 }
 
@@ -1701,7 +1629,7 @@ ul#sitemap.list {
 	padding: 0 16px 116px;
 }
 
-#sitemap .drop_hover {
+/*#sitemap .drop_hover {
 	background: url(/images/alchemy/gui/insertpage.png) no-repeat bottom left;
 	outline: 1px dotted #999;
 }
@@ -1720,6 +1648,7 @@ ul#sitemap.list {
 	background-position: 24px 100%;
 	padding-bottom: 16px;
 }
+*/
 
 ul.list li {
 	list-style-type: none;
@@ -1738,10 +1667,10 @@ ul.list li.legend {
 }
 
 .list div.detail_row {
-	background-color: #e3e3e3;
+	background-color: $medium-gray;
 	font-size: 10px;
 	margin-top: 3px;
-	padding: 4px;
+	padding: $default-padding;
 	overflow: hidden;
 }
 
@@ -1800,31 +1729,15 @@ table.list td.icon .icon {
 input#search_input_field {
 	width: 170px;
 	text-align: left;
-	-webkit-border-radius: 12px;
-	-moz-border-radius: 12px;
-	border-radius: 12px;
+	@include rounded-search-field;
 	padding: 3px 24px 2px;
 	height: 25px;
 }
 
-input.button, 
+input.button,
 a.button,
 button.button {
-	margin: 0;
-	font: 11px "Lucida Grande", "Lucida Sans", Lucida, sans-serif;
-	border: 1px solid #9a9a9a;
-	background-color: #f5f5f5;
-	background-image: url(/images/alchemy/gui/shading.png);
-	background-repeat: repeat-x;
-	background-position:  0 -73px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	-ms-border-radius: 3px;
-	border-radius: 3px;
-	cursor: pointer;
-	color: #333;
-	text-shadow: #f2f2f2 1px 1px 0;
+	@include button-styles;
 }
 
 #new_element button.button {
@@ -1861,11 +1774,7 @@ a.button:hover,
 a.button:focus,
 button.button:hover,
 button.button:focus {
-	text-decoration: none;
-	text-shadow: none;
-	border: 1px solid #888888;
-	background: #e6f0f5 url(/images/alchemy/gui/shading.png) repeat-x 50% -75px;
-	font-weight: normal;
+	@include button-hover-styles;
 }
 
 input.button:active,
@@ -1884,7 +1793,7 @@ input.button.disabled:active,
 button.button.disabled,
 button.button.disabled:hover,
 button.button.disabled:active {
-	color: #333;
+	color: $text-color;
 	text-shadow: none;
 	border-color: #ccc;
 	cursor: default;
@@ -1929,11 +1838,11 @@ a.button.small {
 	height: 14px;
 	padding-top: 2px;
 	padding-bottom: 2px;
-	-webkit-border-radius: 10px;
-	-moz-border-radius: 10px;
+	border-radius: 10px;
 	-o-border-radius: 10px;
 	-ms-border-radius: 10px;
-	border-radius: 10px;
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
 }
 
 a.small.button.with_icon span.icon {
@@ -1945,7 +1854,7 @@ a.small.button.with_icon span.icon {
 
 table.list tr td.tools {
 	width: 40px;
-	background-color: #ededed;
+	background-color: $light-gray;
 	white-space: nowrap;
 }
 
@@ -1986,7 +1895,7 @@ table.list tr td.tools.long {
 }
 
 table.list tr td.icon {
-	background-color: #ededed;
+	background-color: $light-gray;
 	width: 20px;
 	text-align: center;
 }
@@ -2050,18 +1959,15 @@ td.role {
 }
 
 .inplace-edit {
-	background-color: #ededed;
+	background-color: $light-gray;
 	position: absolute;
 	left: -8px;
 	top: 0;
 	width: 204px;
 	z-index: 10;
 	height: 65px;
-	border: 1px solid #afafaf;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	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;
@@ -2149,21 +2055,13 @@ div.spinner {
 .short_element input {
 	width: 190px;
 	float: left;
-	font: 11px "Lucida Grande", "Lucida Sans", Lucida, sans-serif;
+	font: 11px $default-font-face;
 }
 
 .dashed_border {
 	border: 1px dashed;
 }
 
-a.rename_link {
-	background: url(/images/alchemy/icons/edit.png) 0 0;
-}
-
-a.delete_link {
-	background: url(/images/alchemy/alchemy/trash.png) no-repeat 0 0;
-}
-
 ul#all_files {
 	list-style-type: none;
 	display: block;
@@ -2177,7 +2075,7 @@ a.file_archive_download_file:hover {
 }
 
 form#archive_upload_form {
-	padding: 4px;
+	padding: $default-padding;
 	overflow: auto;
 	width: 390px;
 }
@@ -2203,21 +2101,17 @@ div.all_rights {
 
 textarea.thin_border {
 	border-style: inset;
-	font: 12px "Lucida Grande", "Lucida Sans", Lucida, sans-serif;
-	padding: 4px;
+	font: $default-font-style;
+	padding: $default-padding;
 	border-width: 1px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	height: auto;
 }
 
 .thin_border,
 .input_field {
 	margin: 0;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	background: #fff;
 	border: 1px inset #e5e5e5;
 	width: 210px;
@@ -2236,105 +2130,105 @@ textarea.thin_border {
 
 span.icon {
 	display: inline-block;
-	background: url(/images/alchemy/icons.png) no-repeat;
+	background: image-url('alchemy/icons.png') no-repeat;
 	width: 16px;
 	height: 16px;
 }
 
 span.icon.user_add {
-	background: url(/images/alchemy/icons.png) -96px -104px;
+	background: image-url('alchemy/icons.png') -96px -104px;
 }
 
 span.icon.language_add {
-	background: url(/images/alchemy/icons.png) -47px -120px;
+	background: image-url('alchemy/icons.png') -47px -120px;
 }
 
 span.icon.user {
-	background: url(/images/alchemy/icons.png) 0 -104px;
+	background: image-url('alchemy/icons.png') 0 -104px;
 }
 
 span.icon.language {
-	background: url(/images/alchemy/icons.png) 0 -120px;
+	background: image-url('alchemy/icons.png') 0 -120px;
 }
 
 span.icon.user.female {
-	background: url(/images/alchemy/icons.png) -128px -104px;
+	background: image-url('alchemy/icons.png') -128px -104px;
 }
 
 a.icon.user_edit {
-	background: url(/images/alchemy/icons.png) -64px -104px;
+	background: image-url('alchemy/icons.png') -64px -104px;
 }
 
 a.icon.language_edit {
-	background: url(/images/alchemy/icons.png) -32px -120px;
+	background: image-url('alchemy/icons.png') -32px -120px;
 }
 
 a.icon.user_edit.female {
-	background: url(/images/alchemy/icons.png) -192px -104px;
+	background: image-url('alchemy/icons.png') -192px -104px;
 }
 
 span.icon.settings {
-	background: url(/images/alchemy/icons.png) -320px -40px;
+	background: image-url('alchemy/icons.png') -320px -40px;
 }
 
 span.icon.visit_page {
-	background: url(/images/alchemy/icons.png) -32px -136px;
+	background: image-url('alchemy/icons.png') -32px -136px;
 }
 
 span.icon.upload {
-	background: url(/images/alchemy/icons.png) 0 -136px;
+	background: image-url('alchemy/icons.png') 0 -136px;
 }
 
 span.icon.pdf {
-	background: url(/images/alchemy/icons.png) -161px -136px;
+	background: image-url('alchemy/icons.png') -161px -136px;
 }
 
 span.icon.text {
-	background: url(/images/alchemy/icons.png) -448px -136px;
+	background: image-url('alchemy/icons.png') -448px -136px;
 }
 
 span.icon.archive {
-	background: url(/images/alchemy/icons.png) -416px -136px;
+	background: image-url('alchemy/icons.png') -416px -136px;
 }
 
 span.icon.audio {
-	background: url(/images/alchemy/icons.png) -192px -136px;
+	background: image-url('alchemy/icons.png') -192px -136px;
 }
 
 span.icon.image {
-	background: url(/images/alchemy/icons.png) -224px -136px;
+	background: image-url('alchemy/icons.png') -224px -136px;
 }
 
 span.icon.vcard {
-	background: url(/images/alchemy/icons.png) -416px -104px;
+	background: image-url('alchemy/icons.png') -416px -104px;
 }
 
 span.icon.psd {
-	background: url(/images/alchemy/icons.png) -128px -136px;
+	background: image-url('alchemy/icons.png') -128px -136px;
 }
 
 span.icon.flash {
-	background: url(/images/alchemy/icons.png) -256px -136px;
+	background: image-url('alchemy/icons.png') -256px -136px;
 }
 
 span.icon.video {
-	background: url(/images/alchemy/icons.png) -288px -136px;
+	background: image-url('alchemy/icons.png') -288px -136px;
 }
 
 span.icon.rtf {
-	background: url(/images/alchemy/icons.png) -320px -136px;
+	background: image-url('alchemy/icons.png') -320px -136px;
 }
 
 span.icon.word {
-	background: url(/images/alchemy/icons.png) -384px -136px;
+	background: image-url('alchemy/icons.png') -384px -136px;
 }
 
 span.icon.excel {
-	background: url(/images/alchemy/icons.png) -176px -72px;
+	background: image-url('alchemy/icons.png') -176px -72px;
 }
 
 span.icon.file {
-	background: url(/images/alchemy/icons.png) 0 -40px;
+	background: image-url('alchemy/icons.png') 0 -40px;
 }
 
 span.icon.flush {
@@ -2358,7 +2252,7 @@ span.icon.sync {
 }
 
 span.icon.close.small {
-	background: url(/images/alchemy/jquery-ui/ui-icons_666666_256x240.png) -84px -132px;
+	background: image-url('alchemy/ui-icons_666666_256x240.png') -84px -132px;
 	width: 8px;
 	height: 8px;
 	position: absolute;
@@ -2416,15 +2310,15 @@ span.icon.element_draft {
 }
 
 span.icon.new_element {
-	background: url(/images/alchemy/icons.png) -384px -40px;
+	background: image-url('alchemy/icons.png') -384px -40px;
 }
 
 span.icon.element_window {
-	background: url(/images/alchemy/icons.png) -512px -72px;
+	background: image-url('alchemy/icons.png') -512px -72px;
 }
 
 span.icon.preview_window {
-	background: url(/images/alchemy/icons.png) -448px -40px;
+	background: image-url('alchemy/icons.png') -448px -40px;
 }
 
 span.icon.clipboard {
@@ -2444,76 +2338,74 @@ span.icon.trash.full {
 }
 
 a.icon.file_download {
-	background: url(/images/alchemy/icons.png) -480px -136px;
+	background: image-url('alchemy/icons.png') -480px -136px;
 }
 
 .icon.download {
-	background: url(/images/alchemy/icons.png) -240px -72px;
+	background: image-url('alchemy/icons.png') -240px -72px;
 }
 
 a.icon.file_delete {
-	background: url(/images/alchemy/icons.png) -64px -40px;
+	background: image-url('alchemy/icons.png') -64px -40px;
 }
 
 a.icon.file_edit {
-	background: url(/images/alchemy/icons.png) -32px -40px;
+	background: image-url('alchemy/icons.png') -32px -40px;
 }
 
 .icon.edit {
-	background: url(/images/alchemy/icons.png) -160px -168px;
+	background: image-url('alchemy/icons.png') -160px -168px;
 }
 
 .icon.create {
-	background: url(/images/alchemy/icons.png) -192px -568px;
+	background: image-url('alchemy/icons.png') -192px -568px;
 }
 
 span.icon.add_page {
-	background: url(/images/alchemy/icons.png) -96px -40px;
+	background: image-url('alchemy/icons.png') -96px -40px;
 }
 
 span.icon.copy_page {
-	background: url(/images/alchemy/icons.png) -544px -40px;
+	background: image-url('alchemy/icons.png') -544px -40px;
 }
 
 span.icon.delete_page {
-	background: url(/images/alchemy/icons.png) -64px -40px;
+	background: image-url('alchemy/icons.png') -64px -40px;
 }
 
 a.icon.user_delete {
-	background: url(/images/alchemy/icons.png) -32px -104px;
+	background: image-url('alchemy/icons.png') -32px -104px;
 }
 
 a.icon.language_delete {
-	background: url(/images/alchemy/icons.png) -16px -120px;
+	background: image-url('alchemy/icons.png') -16px -120px;
 }
 
 .icon.destroy {
-	background: url(/images/alchemy/icons.png) -224px -168px;
+	background: image-url('alchemy/icons.png') -224px -168px;
 }
 
 span.icon.configure_page {
-	background: url(/images/alchemy/icons.png) -320px -40px;
+	background: image-url('alchemy/icons.png') -320px -40px;
 }
 
 span.icon.search {
-	background: url(/images/alchemy/jquery-ui/ui-icons_666666_256x240.png) -160px -112px;
+	background: image-url('alchemy/ui-icons_666666_256x240.png') -160px -112px;
 }
 
 a.icon.user_delete.female {
-	background: url(/images/alchemy/icons.png) -160px -104px;
+	background: image-url('alchemy/icons.png') -160px -104px;
 }
 
 /* @end */
 
 select.select_box {
 	border: 1px solid #9a9a9a;
-	color: #333;
+	color: $text-color;
 	padding: 1px;
 	margin: 0;
 	font-size: 12px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	background: #f4f4f4;
 	height: 21px;
 }
@@ -2523,15 +2415,13 @@ select.select_box {
 	color: #333333;
 	position: absolute;
 	display: none;
-	padding: 4px;
+	padding: $default-padding;
 	font-size: 11px;
 	max-width: 200px;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
-	-moz-box-shadow: 0 2px 8px #666;
-	-webkit-box-shadow: 0 2px 8px #666;
-	box-shadow: 0 2px 8px #666;
+	@include rounded-corner;
+	-moz-box-shadow: 0 2px 8px $dark-gray;
+	-webkit-box-shadow: 0 2px 8px $dark-gray;
+	box-shadow: 0 2px 8px $dark-gray;
 	background-color: #eaf4f9;
 }
 
@@ -2549,11 +2439,11 @@ select.select_box {
 }
 
 .with_medium_padding {
-	padding: 8px;
+	padding: 2*$default-padding;
 }
 
 .with_padding {
-	padding: 8px;
+	padding: 2*$default-padding;
 }
 
 .element_spinner {
@@ -2640,15 +2530,13 @@ div.button_with_label.active label{
 
 div.button_with_label.disabled {
 	position: relative;
-	opacity: 0.5;
-	filter: alpha(opacity=50);
+	@include opacity-50;
 	cursor: default;
 }
 
 .icon_button.disabled span {
 	position: relative;
-	opacity: 0.3;
-	filter: alpha(opacity=30);
+	@include opacity-30;
 	cursor: default;
 }
 
@@ -2665,7 +2553,7 @@ div.button_with_label.disabled:before {
 	width: 100%;
 	height: 100%;
 	background-color: transparent;
-	opacity: 0.5;
+	@include opacity-50;
 }
 
 div.button_with_label.disabled a:hover, 
@@ -2676,7 +2564,7 @@ div.button_with_label.disabled a:active {
 }
 
 div.button_with_label.disabled:hover label {
-	color: #333;
+	color: $text-color;
 	cursor: default;
 }
 
@@ -2717,14 +2605,11 @@ div.button_with_label:hover label {
 }
 
 #toolbar_links a {
-	padding: 4px;
+	padding: $default-padding;
 	border: 1px solid #9a9a9a;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	margin-right: 4px;
-	background: #fff url(/images/alchemy/gui/shading.png) repeat-x 0 -75px;
+	background: #fff image-url('alchemy/shading.png') repeat-x 0 -75px;
 	text-decoration: none;
 }
 
@@ -2737,7 +2622,7 @@ div.js_filter_field_box span.icon {
 
 #toolbar_links a:hover {
 	background-color: #e6f0f5;
-	color: #333;
+	color: $text-color;
 	border: 1px solid #888;
 	text-shadow: 0 1px 1px #fff;
 	text-decoration: none;
@@ -2754,22 +2639,19 @@ div#per_page_values {
 
 #toolbar_links a.active {
 	background-color: #e6f0f5;
-	color: #333;
+	color: $text-color;
 	border: 1px solid #888;
 	text-shadow: 0 1px 1px #fff;
 }
 
 #errorExplanation {
 	background: #ffdfdf;
-	padding: 8px;
+	padding: 2*$default-padding;
 	text-align: left;
 	margin-bottom: 8px;
 	border: 1px solid #d08f91;
 	color: #690001;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 }
 
 #errorExplanation h2 {
@@ -2796,13 +2678,13 @@ p.foot_note {
 }
 
 #sitemap .placeholder {
-	background-color: #e3e3e3;
+	background-color: $medium-gray;
 	margin-bottom: 0px;
 	margin-left: 22px;
 }
 
 div#jscropper {
-	padding: 8px;
+	padding: 2*$default-padding;
 	display: inline-block;
 }
 
@@ -2828,14 +2710,12 @@ textarea#essence_picture_caption {
 
 #page_selector_container {
 	height: 230px;
-	background-color: #ededed;
+	background-color: $light-gray;
 	margin-bottom: 4px;
 	border: 1px inset #e8e8e8;
 	overflow: auto;
 	padding: 4px 0 0 4px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 }
 
 div#image_assign_filter_and_image_sizing {
@@ -2853,34 +2733,28 @@ label.sup {
 	text-align: center;
 	float: left;
 	margin: 0 6px 6px 0;
-	padding: 4px;
+	padding: $default-padding;
 	position: relative;
 	overflow: hidden;
 	border: 1px solid #c0c0c0;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 }*/
 
 #assign_image_list {
-	padding: 8px;
+	padding: 2*$default-padding;
 	overflow: hidden;
 }
 
 /* @group Picture Thumbnails */
 
 .picture_thumbnail {
-	padding: 4px;
+	padding: $default-padding;
 	margin: 2px 1px 2px 2px;
 	background-color: #fff;
 	float: left;
 	border: 1px solid #c0c0c0;
 	position: relative;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 }
 
 div#archive_all .picture_thumbnail {
@@ -2895,7 +2769,7 @@ div#archive_all .picture_thumbnail {
 	display: table-cell;
 	width: 160px;
 	height: 120px;
-	background-color: #666;
+	background-color: $dark-gray;
 	text-align: center;
 	vertical-align: middle;
 	padding: 0;
@@ -3004,19 +2878,19 @@ div.picture_thumbnail.large div.image_spinner img {
 }
 
 div.image_spinner {
-	background-color: #666;
+	background-color: $dark-gray;
 	width: 1px;
-	margin: 4px;
+	margin: $default-margin;
 }
 
 div.picture_thumbnail.small .image_spinner {
 	height: 60px;
-	margin: 4px;
+	margin: $default-margin;
 }
 
 div.picture_thumbnail.medium .image_spinner {
 	height: 120px;
-	margin: 4px;
+	margin: $default-margin;
 }
 
 div.picture_thumbnail.large .image_spinner {
@@ -3045,9 +2919,7 @@ div#errors {
 	padding: 8px 8px 4px 28px;
 	border-width: 1px;
 	border-style: solid;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	border-color: #c49c9c;
 	color: #592e2e;
 	background-color: #efd3d3;
@@ -3075,7 +2947,7 @@ div#errors {
 }
 
 #alchemyConfirmation_content div.alchemy_window_message {
-	padding: 8px;
+	padding: 2*$default-padding;
 }
 
 #page_select {
@@ -3158,7 +3030,7 @@ div.assign_file_file {
 
 div.assign_file_file_icon {
 	float: left;
-	margin: 4px;
+	margin: $default-margin;
 }
 
 #alchemy .ui-dialog-content a img {
@@ -3178,8 +3050,8 @@ input#link_to_text {
 }
 
 .link_window_tab_body {
-	background-color: #ededed;
-	padding: 8px;
+	background-color: $light-gray;
+	padding: 2*$default-padding;
 	margin: 0;
 }
 
@@ -3277,17 +3149,14 @@ div.elements_for_page {
 	z-index: 15;
 	background-color: white;
 	width: 206px;
-	padding: 4px;
+	padding: $default-padding;
 	border: 1px solid #9c9d9c;
 	-webkit-box-shadow: #9ea09f 0px 0px 4px;
 	-moz-box-shadow: #9ea09f 0px 0px 4px;
 	-o-box-shadow: #9ea09f 0px 0px 4px;
 	box-shadow: #9ea09f 0px 0px 4px;
 	line-height: 13px;
-	border-radius: 3px;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
-	-o-border-radius: 3px;
+	@include rounded-corner;
 }
 
 a.close_elements_from_page_selector {
@@ -3298,7 +3167,7 @@ a.close_elements_from_page_selector {
 	width: 11px;
 	height: 15px;
 	margin-top: 5px;
-	background: url(/images/alchemy/icons.png) no-repeat 0 -72px;
+	background: image-url('alchemy/icons.png') no-repeat 0 -72px;
 	cursor: pointer;
 }
 
@@ -3319,7 +3188,7 @@ a.close_elements_from_page_selector {
 	width: 16px;
 	height: 16px;
 	position: relative;
-	background: url(/images/alchemy/icons.png) no-repeat -512px -72px;
+	background: image-url('alchemy/icons.png') no-repeat -512px -72px;
 	margin: 2px;
 	font-size: 0;
 	text-decoration: none;
@@ -3519,12 +3388,12 @@ div.info ol li {
 }
 
 div#overlay_toolbar {
-	background: #e3e3e3 url(/images/alchemy/gui/shading.png) repeat-x 0 -42px;
-	border: 1px solid #afafaf;
+	background: $medium-gray image-url('alchemy/shading.png') repeat-x 0 -42px;
+	border: $default-border;
 	height: 38px;
 	border-left-style: none;
 	border-right-style: none;
-	padding: 8px;
+	padding: 2*$default-padding;
 }
 
 div#overlay_toolbar div.toolbar_spacer {
@@ -3562,7 +3431,7 @@ div#overlay_toolbar a.button:active {
 }
 
 a.icon.remove {
-	background: url(/images/alchemy/icons/element-icons.png) no-repeat -64px;
+	background: image-url('alchemy/icons.png') no-repeat -64px;
 	width: 16px;
 	height: 16px;
 	display: inline-block;
@@ -3579,14 +3448,12 @@ a.icon.remove {
 }
 
 #uploadProgressContainer .progressWrapper {
-	padding: 8px;
-	background-color: #e3e3e3;
+	padding: 2*$default-padding;
+	background-color: $medium-gray;
 	position: relative;
 	margin-bottom: 8px;
 	border: 1px solid #9e9e9e;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 }
 
 #uploadProgressContainer .progressName,
@@ -3603,46 +3470,42 @@ a.icon.remove {
 }
 
 #uploadProgressContainer .progressBarContainer {
-	background: #F9F9F9 url("/images/alchemy/gui/shading.png") repeat-x 0 0;
+	background: #F9F9F9 image-url('alchemy/shading.png') repeat-x 0 0;
 	border:1px solid #9E9E9E;
-	-moz-border-radius:3px;
-	-webkit-border-radius:3px;
-	border-radius:3px;
+	@include rounded-corner;
 	height:16px;
 	overflow: hidden;
 	width:100%;
 }
 
 #uploadProgressContainer .progressBarInProgress {
-	background: #77AAD5 url("/images/alchemy/gui/shading.png") repeat-x 0 -75px;
+	background: #77AAD5 image-url('alchemy/shading.png') repeat-x 0 -75px;
 	height: 16px;
 	width: 0;
 }
 
 #uploadProgressContainer .progressBarComplete {
-	background: #00D827 url("/images/alchemy/gui/shading.png") repeat-x 0 -75px;
+	background: #00D827 image-url('alchemy/shading.png') repeat-x 0 -75px;
 	height: 16px;
 	width: 0;
 }
 
 #uploadProgressContainer .progressBarError {
-	background: #F00 url("/images/alchemy/gui/shading.png") repeat-x 0 -75px;
+	background: #F00 image-url('alchemy/shading.png') repeat-x 0 -75px;
 	height: 16px;
 	width: 0;
 }
 
 #uploadProgressContainer .progressBarCanceled {
-	background: #E4E4E4 url("/images/alchemy/gui/shading.png") repeat-x 0 -75px;
+	background: #E4E4E4 image-url('alchemy/shading.png') repeat-x 0 -75px;
 	height: 16px;
 	width: 0;
 }
 
 #uploadProgressContainer .progressCancel {
-	background: #f1f1f1 url(/images/alchemy/icons.png) no-repeat -1px -72px;
+	background: #f1f1f1 image-url('alchemy/icons.png') no-repeat -1px -72px;
 	border: 1px solid #9e9e9e;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
+	@include rounded-corner;
 	width: 15px;
 	height: 16px;
 	position: absolute;
@@ -3660,7 +3523,7 @@ object.swfupload {
 }
 
 #alchemy .ui-dialog #alchemyConfirmation.ui-dialog-content {
-	padding: 8px;
+	padding: 2*$default-padding;
 }
 
 #preview_load_info {
@@ -3680,7 +3543,7 @@ object.swfupload {
 }
 
 #clipboard_items ul li {
-	padding: 4px;
+	padding: $default-padding;
 	background: white;
 }