refinerycms-core 4.0.3 → 4.1.0

data/app/assets/stylesheets/refinery/sections/_layout.scss

@@ -1,14 +1,16 @@
 $admin_width: 1080px;
 $menu_width: 120px;
-$standard_rounding: 0px;
+$standard_rounding: 0;
 
 p {
   font-size: 14px;
   line-height: 18px;
 }
+
 html {
   height: 100%;
 }
+
 body {
   height: 100%;
   margin: -52px 0;
@@ -19,43 +21,52 @@ body {
   color: #41403C;
   background: rgb(217, 217, 217);
 }
+
 acronym {
   cursor: help;
 }
+
 label[for] {
   cursor: pointer;
 }
+
 #admin_container,
 #login_container {
   font-size: 13px;
-  margin: 0px auto 15px auto;
+  margin: 0 auto 15px auto;
   text-align: left;
   position: relative;
   margin-top: 15px;
   @include rounded($standard_rounding);
+
   a {
     color: #41403C;
     text-decoration: none;
   }
+
   #menu {
     a:hover {
-      border-bottom: 0px;
+      border-bottom: 0;
     }
   }
+
   .hidden {
     display: none;
   }
 }
+
 #login_container {
   background: white;
   width: 620px;
 }
+
 #admin_container {
   width: $admin_width;
-  margin: -5px auto 0px auto;
+  margin: -5px auto 0 auto;
   height: 100%;
   @include faux_columns_2($menu_width, transparent, white);
 }
+
 #page_container {
   background-color: white;
   padding: 1.5em 1em;
@@ -65,48 +76,59 @@ label[for] {
   @include box-sizing(border-box);
   @include right-rounded($standard_rounding);
 }
+
 #content .field,
 #content .form-actions {
   position: relative;
 }
+
 input.widest,
 textarea.widest {
   width: 99%;
 }
+
 select.widest {
   max-width: 99%;
 }
+
 #records {
   float: left;
   width: 67.7%;
 }
+
 #actions {
   float: right;
   width: 30%;
   padding-left: 15px;
-  padding-top: 0px;
+  padding-top: 0;
+
   ul {
-    margin: 0px 0px 18px 0px;
+    margin: 0 0 18px 0;
     padding: 0;
     list-style: none;
+
     &#current_locale {
       margin-top: 30px;
     }
   }
+
   li {
     margin-bottom: 10px;
     background-color: $action-background-colour;
     border: 1px solid $action-border-colour;
     padding: 9px;
     display: block;
+
     &:empty {
       display: none
     }
   }
 }
+
 #sort-status {
-  padding: 5px 5px 5px 0px;
+  padding: 5px 5px 5px 0;
 }
+
 hr {
   border: 0;
   border-top: 1px solid #484743;
@@ -114,82 +136,97 @@ hr {
 
 .errorExplanation {
   background-color: #FFB1B1;
-  padding: 0px 5px 5px 30px;
+  padding: 0 5px 5px 30px;
   font-weight: bold;
   margin-top: 5px;
   margin-bottom: 5px;
   border: 1px solid red;
+
   h2 {
     color: red;
     text-transform: none;
     display: none;
   }
+
   p {
     font-weight: normal;
   }
 }
+
 .fieldWithErrors input,
 .fieldWithErrors textarea {
   border: 1px solid red !important;
   background-color: #FFECF0 !important;
 }
+
 .fieldWithErrors iframe,
 .fieldWithErrors .visual_editor_box {
   border-color: red !important;
 }
+
 #message,
 .flash {
   padding: 8px 8px 8px 30px;
   margin-bottom: 15px;
   position: relative;
 }
+
 .flash_notice,
 .flash_message {
   border: 1px solid #00A017;
   color: #00A017;
   @include icon('check-circle', green)
 }
+
 .flash_notice,
 .flash_notice * {
   color: #00A017;
 }
+
 .flash_error,
 .flash_alert {
   border: 1px solid #A00027;
   color: #A00027;
   @include icon('question-circle', red)
 }
+
 .flash.flash_notice #flash_close,
 .flash.flash_error #flash_close,
 .flash.flash_alert #flash_close {
   text-transform: lowercase;
   @include icon('times-circle', $icon_done_colour, 1.2em)
 }
+
 .flash.flash_message {
   background: #E0F5E0;
   padding: 9px;
   position: relative;
   margin-bottom: 32px;
+
   h2 {
     margin-top: 12px;
   }
 }
+
 .flash.flash_message.flash_message,
 .flash_message * {
   color: #262719;
   font-size: 14px;
 }
+
 .flash a,
 .flash a:hover {
   color: #e20003;
   border-bottom-color: #e20003;
 }
+
 .flash.flash_error a,
 .flash.flash_error a:hover,
 .flash.flash_alert a,
 .flash.flash_alert a:hover {
   display: none;
 }
+
 noscript .flash.flash_error a,
 noscript .flash.flash_error a:hover,
 noscript .flash.flash_alert a,
@@ -197,6 +234,7 @@ noscript .flash.flash_alert a:hover {
   display: inline;
   font-weight: bold;
 }
+
 .flash #flash_close {
   background: none;
   border: none;
@@ -206,25 +244,31 @@ noscript .flash.flash_alert a:hover {
   font-size: 1em;
   margin-top: 3px;
 }
+
 #content .visual_editor_box a,
 #content .ui-tabs a {
-  border-bottom: 0px none;
+  border-bottom: 0 none;
 }
+
 .index #content,
 .splash #content {
   background-color: white;
   background-repeat: repeat-y;
 }
+
 #content {
-  padding: 0px;
+  padding: 0;
   background-color: white;
+
   a {
     border-bottom: 1px dotted #727272;
+
     &.locale {
       border-bottom: 0;
-      display:inline;
+      display: inline;
     }
   }
+
   h1 {
     font-size: 18px;
     font-weight: lighter;
@@ -232,71 +276,117 @@ noscript .flash.flash_alert a:hover {
     border-bottom: 1px solid #99998B;
     padding-bottom: 10px;
   }
+
   h2 {
     font-size: 18px;
-    color:#41403c;
+    color: #41403c;
     margin-bottom: 15px;
     margin-top: 10px;
     font-weight: bold;
   }
+
   form.edit_image {
-    width: 70%;
-    float: left;
+    width: 30%;
+    float: right;
+    margin-top: 3em
   }
+
   #existing_image {
-    float: right;
-    width: 25%;
+    float: left;
+    width: 60%;
+
+    #original-image {
+      img {
+        max-width: 100%;
+      }
+    }
+
+    #crops {
+      margin-top: 2em;
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+          float: left;
+          margin-right: 1em;
+          margin-bottom: 1em;
+
+          img {
+            display: block;
+          }
+
+          a.delete_icon {
+            display: block;
+            float: right;
+          }
+        }
+      }
+    }
   }
+
   .actions {
     a {
       display: block;
       float: right;
       margin: 3px 3px;
       line-height: inherit;
-      border-bottom: 0px none;
+      border-bottom: 0 none;
     }
   }
 }
+
 .less-important {
   color: #727272;
 }
+
 header,
 footer,
 nav {
   display: block;
 }
+
 #page_container .login #page h1 {
   margin: 0;
   padding: 5px;
   font-size: 20px;
-  line-height:22px
+  line-height: 22px
 }
+
 #login_container {
   #page_container {
     background: transparent;
     width: 100%;
+
     div.remember_me label,
     label.inline {
       display: inline;
     }
+
     div.actions {
       margin-top: 12px;
     }
+
     div.remember_me {
       width: 300px;
       float: left;
     }
+
     div.forgot_password {
       float: right;
       width: 250px;
     }
   }
+
   header {
     background: #eaeaea;
     height: auto;
     float: none;
     width: 100%;
     @include top-rounded($standard_rounding);
+
     h1 {
       color: #41403c;
       vertical-align: middle;
@@ -308,72 +398,90 @@ nav {
       padding-top: 15px;
     }
   }
+
   label {
-    margin-top: 0px;
+    margin-top: 0;
   }
+
   label,
   a {
     font-size: 14px;
   }
+
   .field {
     margin-bottom: 20px;
+
     &.remember_me,
     &.forgot_password {
-      margin-bottom: 0px;
-      margin-top: 0px;
+      margin-bottom: 0;
+      margin-top: 0;
     }
+
     &.forgot_password {
       text-align: right;
     }
+
     &.remember_me label {
       margin-top: 20px;
     }
   }
+
   #flash_container,
   .errorExplanation {
     margin-bottom: 12px;
   }
+
   /* Works in Firefox, Safari, Chrome, IE8+ */
   input.larger {
     background: image_url('refinery/text_field_background.png') repeat-x white;
     height: 31px;
   }
+
   input.larger:focus {
-    background-position: 0px -41px;
+    background-position: 0 -41px;
   }
+
   .fieldWithErrors input.larger {
-    background-position: 0px -82px;
+    background-position: 0 -82px;
     border: 1px solid red;
   }
 }
+
 div.field.checkbox_access {
   margin-top: 20px;
+
   ul.checkboxes li {
     margin-top: 3px;
   }
+
   .label_with_help a {
     font-weight: normal;
   }
 }
-#menu, {
+
+#menu {
   display: block;
-  margin: 45px 0px 0px 0px;
-  padding: 0px;
+  margin: 45px 0 0 0;
+  padding: 0;
   position: absolute;
   background: transparent;
 }
+
 header {
   float: left;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   width: $menu_width;
+
   a, a:hover {
-    border-bottom: 0px none;
+    border-bottom: 0 none;
   }
+
   #logo {
     position: absolute;
     right: 20px;
     top: 25px;
   }
+
   h1, h1 a {
     color: white;
     font-size: 20px;
@@ -382,6 +490,7 @@ header {
     padding-bottom: 4px;
     margin-top: 0;
   }
+
   p {
     color: white;
     font-size: 90%;
@@ -389,15 +498,19 @@ header {
     margin: 0;
   }
 }
+
 #menu {
   display: block;
   position: relative;
+
   &.ui-sortable a {
     cursor: move;
   }
+
   &.ui-sortable-disabled a {
     cursor: pointer;
   }
+
   a {
     @include box-sizing(border-box);
     display: block;
@@ -408,10 +521,12 @@ header {
     color: rgba(7, 112, 173, 1);
     font-weight: normal;
     position: relative;
+
     &.active, &:hover, &:focus {
       background-color: rgba(37, 169, 244, 1);
       color: white;
     }
+
     &.active {
       margin-left: -0.5em;
       font-weight: bold;
@@ -430,6 +545,7 @@ header {
     float: right;
     @include box-sizing(content-box);
   }
+
   a#menu_reorder_done {
     background: white;
   }
@@ -439,174 +555,188 @@ pre {
   margin: 0;
   padding: 0;
 }
+
 .preview {
   color: #A3A093;
 }
+
 #site_link {
   display: block;
   color: #C2C2B3;
   float: left;
 }
+
 #site_link:hover {
   text-decoration: underline;
 }
+
 .filter {
   float: right;
 }
+
 #records {
-  > ul, > #recent_activity > ul, > #recent_inquiries > ul,
-  .pagination_container > ul, .pagination_frame > ul {
+  > ul, .pagination_container > ul, .pagination_frame > ul {
     margin-left: 0;
     margin-top: 0;
     padding-left: 0;
   }
-  > ul li, > #recent_activity > ul li, > #recent_inquiries > ul li,
-  .pagination_container > ul li, .pagination_frame > ul {
+
+  > ul li, .pagination_container > ul li, .pagination_frame > ul {
     list-style: none;
-    padding: 0px 5px;
+    padding: 0 5px;
     vertical-align: top;
     margin-bottom: 2px;
     line-height: 35px;
     position: relative;
   }
-  > #recent_activity > ul li, > #recent_inquiries > ul li {
-    max-height: 35px;
-  }
-}
-#recent_activity li a, #recent_inquiries li a {
-  overflow: hidden;
-  white-space: nowrap;
-  -o-text-overflow: ellipsis;
-  -ms-text-overflow: ellipsis;
-  text-overflow: ellipsis;
 }
+
 #content #records {
   > ul li .actions a, .pagination_container > ul li .actions a {
     line-height: 29px;
   }
 }
+
 #records {
   ul {
     &.clickable {
       li {
-        padding: 0px;
-        margin-bottom: 0px;
+        padding: 0;
+        margin-bottom: 0;
+
         a {
-          padding: 0px 5px;
+          padding: 0 5px;
           vertical-align: top;
           margin-bottom: 2px;
           line-height: 35px;
           display: block;
-          border-bottom: 0px none;
+          border-bottom: 0 none;
         }
       }
     }
   }
+
   .left-column {
     float: left;
     width: 65%;
+
     img {
       vertical-align: bottom;
       margin-top: 1px;
       margin-right: 5px;
     }
   }
+
   .right-column {
     float: right;
     width: 34%;
     text-align: right;
   }
+
   .on {
     background-color: #EAEAEA;
   }
+
   .off, .on-hover {
     background-color: white;
   }
+
   ul.empty {
     display: none;
   }
+
   ul#sortable_list, ul.sortable_list {
     margin-top: 6px;
   }
-  > #recent_activity, > #recent_inquiries {
-    float: left;
-    width: 48%;
-  }
-  > #recent_inquiries {
-    margin-left: 21px;
-  }
-}
-#records.one_list > #recent_activity, #records.one_list > #recent_inquiries {
-  width: 100%;
 }
+
 #pagination ul a:hover, #pagination .on {
   background: image_url('refinery/hover-gradient.jpg') repeat-x bottom #D4D4C6;
 }
+
 #records.tree ul li ul, .tree ul li ul {
   padding: 0;
 }
+
 #records.tree ul li, .tree ul li {
-  margin: 0px;
+  margin: 0;
   padding: 4px 0 0 40px;
-  background: image_url('refinery/branch.gif') no-repeat 15px 0px;
+  background: image_url('refinery/branch.gif') no-repeat 15px 0;
 }
+
 #records.tree li.record ul {
   margin-left: 0;
 }
+
 #records.tree .on-hover, #pagination ul.tree a:hover, #pagination .tree .on {
-  background: image_url('refinery/branch.gif') no-repeat 15px 0px;
+  background: image_url('refinery/branch.gif') no-repeat 15px 0;
 }
+
 #records.tree ul li.branch_start, .tree ul li.branch_start {
   background-image: image_url('refinery/branch-start.gif');
 }
+
 #records.tree ul li.branch_end, .tree ul li.branch_end {
   background-image: image_url('refinery/branch-end.gif');
 }
+
 #records.tree li {
   line-height: 25px;
 }
+
 #records.tree li span.spacing, .tree li span.spacing {
   display: none;
 }
+
 #records.tree ul li > div:hover, .tree ul li > div:hover {
   background-color: #EAEAEA;
 }
+
 #sortable_list.reordering > li, .sortable_list.reordering > li {
   cursor: move;
 }
+
 #records h2, #actions h2 {
-  margin-top: 0px;
+  margin-top: 0;
 }
+
 .pagination {
   background-color: #C9DAE2;
   padding: 5px 5px 4px 5px;
-  margin: 10px 0px;
+  margin: 10px 0;
+
   em {
     font-weight: bold;
     font-style: normal;
-    padding: 0px 6px;
+    padding: 0 6px;
   }
 }
+
 .pagination {
   .disabled {
     color: #A8B9C1;
   }
-  a, #content a, .current, .disabled, em  {
+
+  a, #content a, .current, .disabled, em {
     padding: 7px;
     line-height: 20px;
-    border-bottom: 0px none;
+    border-bottom: 0 none;
   }
+
   .current, a:hover, em {
     background: #A8B9C1;
   }
 }
+
 textarea {
   line-height: 20px;
   padding: 5px;
 }
+
 .field-couple {
   margin-bottom: 20px;
 }
+
 .submit {
   border: inherit;
   width: auto;
@@ -618,6 +748,7 @@ label, .label_with_help {
   margin-top: 20px;
   display: block;
 }
+
 label.input_label {
   font-size: inherit;
   margin-bottom: inherit;
@@ -625,53 +756,63 @@ label.input_label {
   font-weight: normal;
   margin-top: inherit;
 }
+
 small label {
   font-size: inherit;
   font-weight: inherit;
   display: inherit;
 }
+
 label.stripped {
   float: none;
   display: inline;
   font-weight: normal;
   font-size: 1em;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
+
 #body_field {
   float: left;
   width: 60%;
 }
+
 .no_side_body {
   width: 72% !important;
 }
+
 #side_body_field {
   float: left;
   width: 38%;
   margin-left: 18px;
 }
+
 #body_field textarea, #side_body_field textarea {
   width: 99%;
 }
+
 .record .title span {
   line-height: 30px;
 }
 
 #records.files .record .title, #dialog_main #resource_file_area .pages_list ul li a.page_link {
-  display:inline-block;
-  padding-left:24px;
-  min-height:16px;
-  background-repeat:no-repeat;
-  background-position:left;
+  display: inline-block;
+  padding-left: 24px;
+  min-height: 16px;
+  background-repeat: no-repeat;
+  background-position: left;
   @include icon('file-o', blue)
 }
-#dialog_main #resource_file_area .pages_list ul li a.page_link{
-  background-position:5px center;
-  display:block;
+
+#dialog_main #resource_file_area .pages_list ul li a.page_link {
+  background-position: 5px center;
+  display: block;
 }
+
 #records.files .record .title.pdf, #dialog_main #resource_file_area .pages_list ul li a.page_link.pdf {
   @include icon('file-pdf-o')
 }
+
 #records.files .record .title.jpg,
 #records.files .record .title.gif,
 #records.files .record .title.jpeg,
@@ -688,27 +829,33 @@ label.stripped {
 #records.files .record .title.doc, #records.files .record .title.pages, #records.files .record .title.docx, #dialog_main #resource_file_area .pages_list ul li a.page_link.doc, #dialog_main #resource_file_area .pages_list ul li a.page_link.docx, #dialog_main #resource_file_area .pages_list ul li a.page_link.pages {
   @include icon('file-word-o');
 }
+
 #records.files .record .title.ppt, #records.files .record .title.keynote, #dialog_main #resource_file_area .pages_list ul li a.page_link.ppt, #dialog_main #resource_file_area .pages_list ul li a.page_link.keynote {
   @include icon('file-powerpoint-o');
 }
+
 #records.files .record .title.xls, #records.files .record .title.numbers, #dialog_main #resource_file_area .pages_list ul li a.page_link.xls, #dialog_main #resource_file_area .pages_list ul li a.page_link.numbers {
   @include icon('file-excel-o');
 }
+
 #records.files .record .title.zip, #records.files .record .title.rar, #dialog_main #resource_file_area .pages_list ul li a.page_link.zip, #dialog_main #resource_file_area .pages_list ul li a.page_link.rar {
   @include icon('file-zip-o');
 }
+
 #records.files .record .title.mp3, #records.files .record .title.wav, #records.files .record .title.aiff, #records.files .record .title.m4a, #dialog_main #resource_file_area .pages_list ul li a.page_link.mp3, #dialog_main #resource_file_area .pages_list ul li a.page_link.wav, #dialog_main #resource_file_area .pages_list ul li a.page_link.aiff, #dialog_main #resource_file_area .pages_list ul li a.page_link.m4a {
   @include icon('file-audio-o');
 }
+
 #records .actions {
   position: absolute;
-  right: 0px;
-  top: 0px;
+  right: 0;
+  top: 0;
   width: 120px;
   text-align: right;
   display: block;
   line-height: 28px;
 }
+
 #records.tree.icons .title {
   display: block;
   margin: 0 120px 0 20px;
@@ -717,29 +864,36 @@ label.stripped {
     cursor: pointer;
   }
 }
+
 #records.tree .actions {
   line-height: 22px;
   top: 1px;
 }
+
 .published {
   width: 25px;
   text-align: center;
 }
+
 #content #records.tree > ul li .actions a {
-  margin: 3px 3px 0px 3px;
+  margin: 3px 3px 0 3px;
   line-height: 24px;
 }
+
 .actions a * {
   padding: 4px 4px 1px 4px;
 }
+
 .actions a img {
   vertical-align: middle;
   padding: 2px 4px 4px 4px;
 }
+
 #records.tree .actions a img {
   padding-top: 4px;
 }
-#records.tree li span.item {
+
+#records.tree li span.icon {
   display: block;
   float: left;
   width: 16px;
@@ -749,15 +903,18 @@ label.stripped {
 
   &.toggle {
     cursor: pointer;
-    @include icon('folder',$icon_folder_colour);
+    @include icon('folder', $icon_folder_colour);
   }
+
   &.toggle.expanded {
-    @include icon('folder-open',$icon_folder_colour);
+    @include icon('folder-open', $icon_folder_colour);
   }
 }
+
 #records.tree li.loading > div > span.icon {
   @include icon('spinner');
 }
+
 #image_grid .actions a img {
   padding: 4px 4px 1px 4px;
   vertical-align: top;
@@ -767,54 +924,70 @@ label.stripped {
   background: inherit !important;
   cursor: move;
 }
+
 #other_records {
   width: 68%;
 }
+
 #common_actions {
   margin: 0;
   padding: 0;
+
   li {
     margin: 0;
     list-style: none;
-    padding: 5px 0px 5px 0px;
+    padding: 5px 0 5px 0;
+  }
+
+  a {
+    font-weight: bold;
   }
-    a {
-      font-weight: bold;
-    }
 }
+
 .larger {
   font-size: 200%;
 }
+
 .brown_border {
   border: 1px solid #99998B;
 }
+
 #inquiry, .inquiry {
   border-collapse: collapse;
   width: 100%;
 }
+
 #inquiry td, .inquiry td {
   border-bottom: 1px solid #CCCCCC;
   padding: 7px;
 }
+
 #inquiry tr:last-child td, .inquiry tr:last-child td {
-  border-bottom: 0px;
+  border-bottom: 0;
 }
+
 #inquiry td label.stripped, .inquiry td label.stripped {
   font-weight: bold;
 }
+
 body.dialog {
   background: #FFF;
 }
+
 body.dialog, body.visual_editor_dialog {
   text-align: left;
 }
+
 body.dialog form {
   width: 100% !important;
 }
+
 .visual_editor_dialog_table {
   height: 250px;
 }
+
 .no_picked_image_selected {@include icon('warning', $icon_warning_colour)}
+
 .dialog {
   #dialog_main {
     float: left;
@@ -822,35 +995,42 @@ body.dialog form {
     min-height: 405px;
     width: 696px;
   }
+
   span.radio {
     display: block;
     line-height: 18px;
-    padding: 6px 0px;
+    padding: 6px 0;
   }
+
   span.radio * {
     cursor: pointer;
     font-weight: bold;
   }
+
   #dialog_menu_left {
     position: fixed;
     left: 12px;
     top: 9px;
     width: 130px;
   }
+
   #existing_image_content {
     position: relative;
     height: 300px;
     padding: 12px;
   }
-  #existing_image_area_content {
+
+  #existing_image_area_content, #existing_image_area_crops {
     margin-top: 28px;
+
     ul {
-      margin: 0px;
-      padding: 0px;
+      margin: 0;
+      padding: 0;
+
       li {
         list-style: none;
-        padding: 0px;
-        margin: 0px 2px 0px 0px;
+        padding: 0;
+        margin: 0 2px 0 0;
         float: left;
         height: 114px;
         max-height: 114px;
@@ -860,30 +1040,38 @@ body.dialog form {
         cursor: pointer;
         text-align: center;
         vertical-align: middle;
+
         img {
           border: 4px solid transparent;
         }
+
         &.selected img {
           border: 4px solid #22A7F2;
         }
       }
     }
   }
+
   #existing_image_size_area {
     margin-top: 18px;
+    margin-bottom: 50px;
+
     ul {
-      margin: 0px;
-      padding: 10px 0px 0px 0px;
+      margin: 0;
+      padding: 10px 0 0 0;
+
       li {
         float: left;
         list-style: none;
-        margin: 0px 18px 0px 0px;
-        text-align:center;
+        margin: 0 18px 0 0;
+        text-align: center;
+
         a {
           display: block;
           border: 1px solid #999999;
           font-size: 10px;
         }
+
         &.selected {
           a {
             border-color: #22A7F2;
@@ -895,41 +1083,53 @@ body.dialog form {
       }
     }
   }
+
   #existing_image_size_area {
     #image_dialog_size_0 a { height: 30px; width: 30px; line-height: 30px; margin-top: 10px }
-    #image_dialog_size_1 a { height: 50px; width: 50px; line-height: 50px; margin-top:  0px }
-    #image_dialog_size_2 a { height: 70px; width: 70px; line-height: 70px; margin-top:-10px }
-    #image_dialog_size_3 a { height: 90px; width: 90px; line-height: 90px; margin-top:-20px }
+
+    #image_dialog_size_1 a { height: 50px; width: 50px; line-height: 50px; margin-top: 0 }
+
+    #image_dialog_size_2 a { height: 70px; width: 70px; line-height: 70px; margin-top: -10px }
+
+    #image_dialog_size_3 a { height: 90px; width: 90px; line-height: 90px; margin-top: -20px }
   }
+
   #content {
-    padding: 0px;
+    padding: 0;
   }
 }
+
 #upload_image_area, #upload_resource_area {
   padding: 12px;
 }
+
 .visual_editor_dialog #page {
   width: 940px;
   padding: 6px;
 }
+
 #dialog_main {
   .pagination {
-    margin: 0px;
+    margin: 0;
     position: fixed;
     bottom: 5px;
     right: 12px;
     z-index: 1000;
   }
+
   .pages_list {
     width: 100%;
     padding-bottom: 40px;
+
     ul {
-      margin: 0px 12px 0px 12px;
-      padding: 0px;
+      margin: 0 12px 0 12px;
+      padding: 0;
+
       li {
         cursor: pointer;
         line-height: 24px;
         list-style: none;
+
         a {
           display: block;
           padding: 3px 3px 3px 27px;
@@ -937,57 +1137,72 @@ body.dialog form {
           border-bottom: none;
           border: 1px solid transparent;
         }
+
         &:hover {
           background-color: #C9DAE2;
         }
       }
+
       li.child a {
         padding-left: 27px;
       }
+
       li.child1 a {
         padding-left: 47px;
       }
+
       li.child2 a {
         padding-left: 67px;
       }
+
       li.child3 a {
         padding-left: 87px;
       }
+
       li.child4 a {
         padding-left: 107px;
       }
     }
   }
+
   .actions {
     margin-right: 48px;
   }
+
   .pages_list .linked a, .pages_list .linked a:hover {
     border: 1px solid #00A017;
     color: #00A017;
     @include icon('check-circle', green);
   }
+
   .pages_list .linked a em {
     color: #00A017;
   }
+
   #web_address_area, #dialog_main #email_address_area {
     padding: 12px;
   }
 }
+
 #link_title {
   margin-top: 12px;
+
   label {
-    margin: 3px 0px 0px 0px !important;
+    margin: 3px 0 0 0 !important;
     width: 130px;
     display: block;
     float: left;
   }
+
   input {
     width: 770px;
   }
 }
+
 ul#menu.reordering_menu li a {
   cursor: move;
 }
+
 #search {
   border: 1px solid #b3b3b3;
   line-height: 18px;
@@ -995,36 +1210,46 @@ ul#menu.reordering_menu li a {
   font-size: 16px;
   width: 10em;
 }
+
 .cancel-search {
   float: right;
 }
+
 .pt-BR #search {
   width: 107px;
 }
+
 .en #search {
   width: 130px;
 }
+
 .search_form {
   position: relative;
+
   .button, .button-wrapper {
     position: absolute;
-    right: 0px;
+    right: 0;
     top: 2px;
   }
 }
+
 form input[type=submit]:hover {
   background: #65c3f7;
 }
+
 .clearfix:after {
-  content:".";
-  display:block;
-  height:0;
-  clear:both;
-  visibility:hidden;
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
 }
-.clearfix {display:inline-block;}
+
+.clearfix {display: inline-block;}
+
 /* Hide from IE Mac \*/
-.clearfix {display:block;}
+.clearfix {display: block;}
+
 /* End hide from IE Mac */
 /*
 Firefox Dotted Line Fix
@@ -1033,16 +1258,17 @@ Firefox Dotted Line Fix
 a:focus {
   outline: none;
 }
+
 a img {
-  border: 0px none;
+  border: 0 none;
 }
 
 
 /* page parts */
 
-ul#page_parts, 
+ul#page_parts,
 ul#page_parts_controls {
-  margin: 0;
+  margin: 12px 0 0 0;
   padding: 0;
 }
 
@@ -1063,7 +1289,7 @@ ul#page_parts_controls {
     margin: 0 3px;
 
     a {
-      border: 0px none;
+      border: 0 none;
     }
   }
 }
@@ -1072,95 +1298,116 @@ ul#page_parts_controls {
 #page-tabs.ui-sortable.reordering {
   li {
     cursor: move;
+
     a {
       cursor: move;
     }
   }
 }
+
 #page_part_editors {
-  clear:left;
+  clear: left;
 }
 
 /* dialog stuff */
 #dialog_frame {
-  width:952px;
-  height:460px;
-  padding: 0px;
-  border: 0px solid #F2F1ED;
+  width: 952px;
+  height: 460px;
+  padding: 0;
+  border: 0 solid #F2F1ED;
 }
+
 .visual_editor_hideables {
   display: none;
 }
+
 #content .form-actions, .wym_dialog .form-actions, .ui-dialog .form-actions {
   @include form-actions;
 }
+
 .dialog form {
   margin-bottom: 45px;
 }
+
 .dialog .dialog_area > div > .field label:first-child, .dialog .dialog_area > div > label:first-child {
-  margin-top: 0px;
+  margin-top: 0;
 }
+
 .visual_editor_dialog .form-actions, #content.form-actions.dialog-form-actions, .ui-dialog .form-actions {
   margin-top: 16px;
 }
+
 #content .form-actions .form-actions-left, #content .form-actions .form-actions-right,
-  .visual_editor_dialog .form-actions .form-actions-left, .visual_editor_dialog .form-actions .form-actions-right,
-  .ui-dialog .form-actions .form-actions-left, .ui-dialog .form-actions .form-actions-right {
+.visual_editor_dialog .form-actions .form-actions-left, .visual_editor_dialog .form-actions .form-actions-right,
+.ui-dialog .form-actions .form-actions-left, .ui-dialog .form-actions .form-actions-right {
   position: absolute;
   top: 10px;
 }
+
 #content .form-actions .form-actions-left, .visual_editor_dialog .form-actions .form-actions-left, .ui-dialog .form-actions .form-actions-left {
   left: 10px;
 }
+
 #content .form-actions .form-actions-right, .visual_editor_dialog .form-actions .form-actions-right, .ui-dialog .form-actions .form-actions-right {
   right: 10px;
 }
+
 #content .form-actions .save-loader {
   position: absolute;
   right: -24px;
   top: 4px;
 }
+
 .visual_editor_dialog .form-actions, .ui-dialog .form-actions {
-  border: 0px none;
+  border: 0 none;
   border-top: 1px solid #E8E8E8;
 }
+
 #dialog_iframe {
   position: relative;
 }
+
 #dialog_container #content .form-actions, .ui-dialog .form-actions, .dialog_container .form-actions {
   position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  border-right: 0px;
-  border-left: 0px;
-  border-bottom: 0px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: 0;
   width: auto;
 }
+
 #dialog_container.dialog.iframed #content .form-actions {
   position: fixed;
 }
+
 body.dialog #content .search_form {
   float: right;
   width: auto !important;
   min-width: 300px;
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
+
 #existing_image_area {
-  padding-top:6px;
+  padding-top: 6px;
 }
+
 .ui-dialog div.field {
-  margin: 0px 10px;
+  margin: 0 10px;
 }
+
 #dialog_container, .dialog_container {
-  margin: 0px;
+  margin: 0;
   padding: 12px;
 }
+
 ul#image_grid, .pagination_container > ul#image_grid {
   width: 100%;
   padding: 0px;
   margin: 10px 0px 15px 0px;
 }
+
 ul#image_grid li, .pagination_container > ul#image_grid li {
   position: relative;
   float: left;
@@ -1173,170 +1420,214 @@ ul#image_grid li, .pagination_container > ul#image_grid li {
   text-align: center;
   overflow: hidden;
 }
+
 ul#image_grid li.image_3 {
   margin-left: 0px;
   margin-right: 0px;
 }
+
 #records ul#image_grid li .actions {
   top: auto;
   bottom: 0px;
 }
+
 #records ul#image_grid li .actions a {
   line-height: 24px;
 }
+
 ul#image_grid li.row-end {
   margin-right: 0px;
   float: right;
 }
+
 ul#image_grid li a {
   border: 0 none;
 }
+
 ul#image_grid li p {
   margin: 3px 0;
 }
+
 ul#image_grid li span.actions {
   width: 100%;
 }
+
 ul.checkboxes {
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
 }
+
 ul.checkboxes li {
   list-style: none;
 }
+
 .label_inline_with_link label {
   float: left;
   margin-right: 6px;
 }
+
 .label_inline_with_link a {
-  border: 0px none;
+  border: 0 none;
   margin-top: 19px;
   line-height: 17px;
   float: left;
 }
+
 .label_inline_with_link a img {
   vertical-align: middle;
 }
+
 .remove_picked_image {
-  margin-top:8px;
-  display:inline-block;
-  width:auto;
+  margin-top: 8px;
+  display: inline-block;
+  width: auto;
 }
+
 #new_page_part_dialog .field {
-  padding: 0px 10px;
+  padding: 0 10px;
 }
+
 .hide-overflow {
   overflow: hidden;
 }
+
 #remove_resource {
-  margin-top:8px;
-  display:inline-block;
-  width:auto;
+  margin-top: 8px;
+  display: inline-block;
+  width: auto;
 }
+
 .visual_editor_dialog_paste .field textarea {
   width: 98%;
 }
+
 .ui-dialog .visual_editor_dialog_paste .field, .ui-dialog .visual_editor_dialog_paste .field textarea {
-  margin: 0px 0px 45px 0px;
+  margin: 0 0 45px 0;
   height: 300px;
 }
+
 input.button, a.button, #content a.button, span.button-wrapper, span.button-wrapper input {
-  cursor:pointer;
+  cursor: pointer;
   background: #22a7f2;
   color: white;
-  padding: 0px 14px 0px 14px;
+  padding: 0 14px 0 14px;
   font-size: 14px;
   line-height: 24px;
   height: 24px;
   display: inline-block;
-  border: 0px none;
-  margin-top: 0px;
-  margin-bottom: 0px;
+  border: 0 none;
+  margin-top: 0;
+  margin-bottom: 0;
 }
+
 /* for those pesky IE browsers */
 span.button-wrapper {
-  padding: 0px;
+  padding: 0;
 }
+
 span.button-wrapper input {
   display: inherit;
 }
+
 /* fixes firefox display */
 input.button {
   padding-bottom: 3px;
 }
+
 input.button.close_dialog, a.button.close_dialog, #content a.button.close_dialog, span.button-wrapper.close_dialog, span.button-wrapper.close_dialog input {
   background: #bcbcbc;
 }
+
 input.button:hover, a.button:hover, #content a.button:hover, span.button-wrapper:hover, span.button-wrapper:hover input {
-  background:#62bef2;
+  background: #62bef2;
 }
+
 input.button.close_dialog:hover, a.button.close_dialog:hover, #content a.button.close_dialog:hover, span.button-wrapper.close_dialog:hover {
   background: #cdcdcd;
 }
+
 input.button:active, a.button:active, #content a.button:active, span.button-wrapper:active, span.button-wrapper:active input {
   background: #004a8f;
 }
-input.button.close_dialog:active, a.button.close_dialog:active, #content a.button.close_dialog:active, span.button-wrapper.close_dialog:active,  span.button-wrapper.close_dialog:active input {
+
+input.button.close_dialog:active, a.button.close_dialog:active, #content a.button.close_dialog:active, span.button-wrapper.close_dialog:active, span.button-wrapper.close_dialog:active input {
   background: #808080;
 }
+
 .visual_editor_dialog a.button.visual_editor_cancel.close_dialog {
   margin-left: 6px;
 }
+
 #content a.button.close_dialog:active {
   color: white;
 }
+
 .form-actions a.confirm-delete, #content .form-actions a.confirm-delete {
   background: #ee1100;
   position: absolute;
-  right: 0px;
+  right: 0;
 }
+
 .form-actions a.confirm-delete:hover, #content .form-actions a.confirm-delete:hover {
   background: #ff3322;
 }
+
 .form-actions a.confirm-delete:active, #content .form-actions a.confirm-delete:active {
   background: #bb0000;
 }
+
 .field input[type=text], .field input[type=password], .field input[type=email], .field input[type=tel], .field input[type=number], .field textarea {
   border: 1px solid #7f9db9;
   padding: 0.4% 0.5%;
   line-height: 20px;
 }
+
 /* ## Advanced Page Options --------------------------------------------- */
 #more_options_field {
   span#draft_field {float: right;}
 }
-#more_options{
-  overflow:hidden;
+
+#more_options {
+  overflow: hidden;
 }
+
 .hemisquare {
   padding: 10px;
-  margin: 0px 0px;
+  margin: 0 0;
   margin-left: 10px;
   float: left;
   width: 45%;
+
   &.right_side {
-      float: right;
+    float: right;
   }
+
   input, textarea, select {
-    margin: 7px 0px;
+    margin: 7px 0;
   }
+
   textarea {
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
+
   label {
-    margin: 0px;
+    margin: 0;
   }
+
   small {
     font-size: 0.9em;
   }
 }
+
 #content .hemisquare h2 {
-  margin-top: 0px;
+  margin-top: 0;
 }
+
 #content .hemisquare .field {
-  margin: 0 0 20px 0px;
+  margin: 0 0 20px 0;
   width: 98%;
 }
+
 .label_with_help {
   vertical-align: middle;
 }
@@ -1361,124 +1652,46 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
   margin-bottom: 12px;
   display: inline-block;
 }
+
 #upgrade_wrapper li a {
   line-height: 20px;
 }
+
 /* resource-picker */
 #resource_actions {
   float: right;
   margin-right: 20px;
 }
 
-/* Locale picker */
-#switch_locale_picker {
-  margin: 0px;
-  padding: 0px;
-  li {
-    float: left;
-    padding: 0px;
-    margin: 0;
-    list-style: none;
-    a {
-      background-color: #cdcdcd;
-      background-position: 12px;
-      background-repeat: no-repeat;
-      border-bottom: 0;
-      border-right: solid 1px white;
-      margin-bottom: 1px;
-      display: block;
-      padding: 7px 3px 3px 3px;
-      line-height: 0;
-      &:hover {
-        background-color: #cae7fb;
-      }
-      &:active {
-        background-color: #22A7F2;
+body.edit {
+  div.locales {
+    @include locale_group {
+      a {
+        @include locale_button;
+        &:after {
+          top: 0.5rem;
+        }
       }
+      &:first-child {  @include left-rounded(5px); }
+      &:last-child  {  @include right-rounded(5px); }
     }
-    &:first-child a {
-      border-radius-left: 5px;
-      -moz-border-radius-topleft: 5px;
-      -moz-border-radius-bottomleft: 5px;
-      -webkit-border-top-left-radius: 5px;
-      -webkit-border-bottom-left-radius: 5px;
-    }
-    &:last-child a {
-      border-radius-right: 5px;
-      -moz-border-radius-topright: 5px;
-      -moz-border-radius-bottomright: 5px;
-      -webkit-border-top-right-radius: 5px;
-      -webkit-border-bottom-right-radius: 5px;
-    }
-    &.selected a {
-      background-color: #65c3f7;
-    }
+
   }
 }
-#locale_picker {
-  li {
-    list-style: none;
-    margin: 0;
-    a {
-      background-color: #cdcdcd;
-      background-position: 12px;
-      background-repeat: no-repeat;
-      border: 0;
-      border-bottom: solid 1px white;
-      display: block;
-      padding: 3px 14px 3px 9px;
-      position: relative;
-      &:hover {
-        background-color: #cae7fb;
-      }
-      &:active {
-        background-color: #22A7F2;
-      }
-      span.action {
-        border-bottom: 1px dotted #727272;
-        position: absolute;
-        right: 9px;
-        top: 5px;
-      }
-    }
-    &:first-child a {
-      border-radius-top: 5px;
-      -moz-border-radius-topleft: 5px;
-      -moz-border-radius-topright: 5px;
-      -webkit-border-top-left-radius: 5px;
-      -webkit-border-top-right-radius: 5px;
-    }
-    &:last-child a {
-      border-radius-bottom: 5px;
-      -moz-border-radius-bottomleft: 5px;
-      -moz-border-radius-bottomright: 5px;
-      -webkit-border-bottom-left-radius: 5px;
-      -webkit-border-bottom-right-radius: 5px;
-    }
-  }
-  #current_locale,
-  #other_locales {
-    margin: 0;
-  }
-  #current_locale li {
-    a {
-      background-color: #65c3f7;
+
+body.index {
+  span.locales {
+    @include locale_group {
+      a:after { top: 0; }
     }
   }
 }
-.locale_marker {
-  font-size:8px;
-  display: inline;
-  .fa-stack .fa-comment {color: $icon_locale_colour; font-size: 24px;}
-}
 
-#content #records .title .preview a.locale {
-  border-bottom: 0px none;
-}
 /* AJAX pagination */
 .pagination_container {
   position: relative;
 }
+
 .pagination_frame {
   padding: 0;
   width: 100%;
@@ -1488,12 +1701,15 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 }
+
 .pagination_container > div.pagination_frame {
   top: 40px;
 }
+
 .pagination_frame.frame_left {
   left: -3000px;
 }
+
 .pagination_frame.frame_right {
   left: 3000px;
   -moz-transition: all 0.3s ease-in-out;
@@ -1501,21 +1717,26 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 }
+
 .pagination_frame.frame_center {
   left: 0;
 }
+
 .pagination_frame li {
   position: relative;
   padding-left: 5px;
 }
+
 a.information:hover {
   background: #22a7f2;
 }
+
 /* dubiously in here */
 .current_image_link {
   display: inline-block;
   width: auto;
 }
+
 .label {
   padding: 1px 3px 2px;
   font-size: 9.75px;
@@ -1525,16 +1746,20 @@ a.information:hover {
   white-space: nowrap;
   background-color: #bfbfbf;
   margin-right: 0.25em;
-  &.important{
+
+  &.important {
     background-color: #c43c35;
   }
-  &.warning{
+
+  &.warning {
     background-color: #f89406;
   }
-  &.success{
+
+  &.success {
     background-color: #46a546;
   }
-  &.notice{
+
+  &.notice {
     background-color: #62cffc;
   }
 }