Updated styles

diff --git a/cloudcms/static/cloudcms/css/styles.css b/cloudcms/static/cloudcms/css/styles.css
index c989319..c461b6c 100644 (file)
--- a/cloudcms/static/cloudcms/css/styles.css
+++ b/cloudcms/static/cloudcms/css/styles.css
@@ -460,144 +460,6 @@ a.button {
 a.button:hover {
   color: #fff !important;
 }
-/*
-    ColorBox Core Style:
-    The following CSS is consistent between example themes and should not be altered.
-*/
-#colorbox, #cboxOverlay, #cboxWrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  overflow: hidden;
-}
-#cboxOverlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-}
-#cboxMiddleLeft, #cboxBottomLeft {
-  clear: left;
-}
-#cboxContent {
-  position: relative;
-}
-#cboxLoadedContent {
-  overflow: auto;
-}
-#cboxTitle {
-  margin: 0;
-}
-#cboxLoadingOverlay, #cboxLoadingGraphic {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-#cboxPrevious,
-#cboxNext,
-#cboxClose,
-#cboxSlideshow {
-  cursor: pointer;
-}
-.cboxPhoto {
-  float: left;
-  margin: auto;
-  border: 0;
-  display: block;
-}
-.cboxIframe {
-  width: 100%;
-  height: 100%;
-  display: block;
-  border: 0;
-}
-/* 
-    User Style:
-    Change the following styles to modify the appearance of ColorBox.  They are
-    ordered & tabbed in a way that represents the nesting of the generated HTML.
-*/
-#cboxOverlay {
-  background: #000;
-}
-#cboxContent {
-  margin-top: 20px;
-}
-.cboxIframe {
-  background: #fff;
-}
-#cboxError {
-  padding: 50px;
-  border: 1px solid #ccc;
-}
-#cboxLoadedContent {
-  border: 5px solid #000;
-  background: #fff;
-}
-#cboxTitle {
-  position: absolute;
-  top: -20px;
-  left: 0;
-  color: #ccc;
-}
-#cboxCurrent {
-  position: absolute;
-  top: -20px;
-  right: 0px;
-  color: #ccc;
-}
-#cboxSlideshow {
-  position: absolute;
-  top: -20px;
-  right: 90px;
-  color: #fff;
-}
-#cboxPrevious {
-  position: absolute;
-  top: 50%;
-  left: 5px;
-  margin-top: -32px;
-  background: url(../images/colorbox/controls.png) no-repeat top left;
-  width: 28px;
-  height: 65px;
-  text-indent: -9999px;
-}
-#cboxPrevious:hover {
-  background-position: bottom left;
-}
-#cboxNext {
-  position: absolute;
-  top: 50%;
-  right: 5px;
-  margin-top: -32px;
-  background: url(../images/colorbox/controls.png) no-repeat top right;
-  width: 28px;
-  height: 65px;
-  text-indent: -9999px;
-}
-#cboxNext:hover {
-  background-position: bottom right;
-}
-#cboxLoadingOverlay {
-  background: #000;
-}
-#cboxLoadingGraphic {
-  background: url(../images/colorbox/loading.gif) no-repeat center center;
-}
-#cboxClose {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  display: block;
-  background: url(../images/colorbox/controls.png) no-repeat top center;
-  width: 38px;
-  height: 19px;
-  text-indent: -9999px;
-}
-#cboxClose:hover {
-  background-position: bottom center;
-}
 .border-box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -626,13 +488,14 @@ body {
   font-weight: normal;
   line-height: 22px;
   letter-spacing: 1px;
+  font-size: 12px;
 }
 .topbar {
   background-color: #cfcdc7;
 }
 .topbar .head {
   float: left;
-  padding: 6px;
+  padding: 2.333333333333333px;
 }
 .topbar .links {
   zoom: 1;
@@ -652,7 +515,7 @@ body {
   display: block;
   float: left;
   margin-left: 10px;
-  padding: 12px;
+  padding: 8.333333333333332px;
 }
 .topbar .links a:hover {
   background-color: #1a1a1a;
@@ -737,8 +600,8 @@ a img {
 }
 div.header {
   position: relative;
-  margin-top: 88px;
-  margin-bottom: 22px;
+  margin-top: 36.666666666666664px;
+  margin-bottom: 14.666666666666666px;
 }
 div.header h1 {
   color: #cfcdc7;
@@ -759,8 +622,8 @@ div.header h1 {
 .footer {
   border-bottom: 1px solid #808080;
   border-top: 1px solid #a6a6a6;
-  padding-top: 22px;
-  padding-bottom: 22px;
+  padding-top: 14.666666666666666px;
+  padding-bottom: 14.666666666666666px;
 }
 ul.inline {
   zoom: 1;
@@ -781,7 +644,7 @@ ul.inline li {
 .mainnav.quicknav {
   position: absolute;
   right: 0;
-  top: -57.2px;
+  top: -38.13333333333333px;
   margin: 0;
 }
 .mainnav.quicknav li {
@@ -790,18 +653,22 @@ ul.inline li {
 }
 .navigation {
   height: 83px;
+  position: absolute;
+  right: -15px;
+  top: -23px;
 }
 .mainnav {
-  font-size: 1.2em;
+  font-size: 1.3em;
 }
 .mainnav.subnav {
-  margin-bottom: -22px;
+  margin-bottom: -14.666666666666666px;
 }
 .mainnav.subnav li {
-  margin-top: 1.2em;
+  margin-top: 5.866666666666667px;
+  float: right;
 }
 .mainnav li {
-  margin-top: 66px;
+  margin-top: 29.333333333333332px;
 }
 .mainnav li.active a {
   /*border-bottom: 1px solid @linkColor;*/
@@ -850,7 +717,7 @@ div.page {
   margin-left: -22px;
   zoom: 1;
   margin-left: -22px;
-  margin-top: 132px;
+  margin-top: 73.33333333333333px;
   font-size: 1.1em;
 }
 div.page:before, div.page:after {
@@ -989,7 +856,7 @@ input, textarea, .form-widget {
   background-color: #f89a1c !important;
 }
 .section {
-  margin-bottom: 66px;
+  margin-bottom: 44px;
 }
 .section em {
   color: #3582ac;
@@ -1014,7 +881,7 @@ input, textarea, .form-widget {
 }
 .section.positioned h3 {
   font-size: 1.2em;
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
 }
 .section.positioned .text {
   color: #000000;
@@ -1072,22 +939,22 @@ form.withlabels input[type=text].long, form.withlabels input[type=password].long
   background-image: none !important;
 }
 form.login {
-  margin-bottom: 33px;
+  margin-bottom: 22px;
 }
 form h2 {
   color: #000000;
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
   font-size: 1.1em;
 }
 form h2 span {
   padding-bottom: 3px;
 }
 form .form-row {
-  min-height: 44px;
+  min-height: 29.333333333333332px;
   position: relative;
 }
 form .form-row.submit {
-  margin-top: 33px;
+  margin-top: 22px;
 }
 form .form-row .extra-link {
   color: #808080;
@@ -1097,9 +964,12 @@ form .form-row .extra-link {
   margin-top: 1.3em;
   float: right;
 }
+form .form-row label {
+  font-size: 1.1em;
+}
 form.innerlabels label {
   position: absolute;
-  top: 1em;
+  top: 1.1em;
   left: 1.5em;
   color: #aaa;
 }
@@ -1209,13 +1079,13 @@ div.form-stacked {
   background-image: url("../images/dashed_border.png");
   background-repeat: repeat-x;
   background-position: left bottom;
-  padding-bottom: 44px;
-  margin-bottom: 44px;
+  padding-bottom: 29.333333333333332px;
+  margin-bottom: 29.333333333333332px;
 }
 .section h2 {
   font-size: 1.1em;
   line-height: 1.3em;
-  margin-bottom: 33px;
+  margin-bottom: 22px;
 }
 .section h2 a {
   color: #4085A6;
@@ -1225,13 +1095,13 @@ div.form-stacked {
 .section h3 {
   font-size: 1.1em;
   line-height: 1.3em;
-  margin-bottom: 33px;
+  margin-bottom: 22px;
 }
 .section p {
   line-height: 1.7em;
 }
 .section .section-img {
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
 }
 .messages {
   display: inline;
@@ -1241,6 +1111,7 @@ div.form-stacked {
   margin: 2em 0;
   background-color: #ddd;
   margin-left: 0;
+  font-size: 1.1em;
 }
 .messages li {
   padding: 1em;
@@ -1324,10 +1195,10 @@ table tr.consumed td.consumed {
   color: #000 !important;
 }
 .footer li {
-  margin-bottom: 11px;
+  margin-bottom: 7.333333333333333px;
 }
 .footer li.header {
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
 }
 .footer .col {
   display: inline;
@@ -1407,9 +1278,9 @@ table tr.consumed td.consumed {
 }
 /*blog styles*/
 .blog-entry {
-  margin-bottom: 66px;
-  zoom: 1;
   margin-bottom: 44px;
+  zoom: 1;
+  margin-bottom: 29.333333333333332px;
 }
 .blog-entry em {
   color: #3582ac;
@@ -1434,7 +1305,7 @@ table tr.consumed td.consumed {
 }
 .blog-entry.positioned h3 {
   font-size: 1.2em;
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
 }
 .blog-entry.positioned .text {
   color: #000000;
@@ -1463,7 +1334,7 @@ table tr.consumed td.consumed {
 .blog-entry h2 {
   font-size: 1.1em;
   line-height: 1.3em;
-  margin-bottom: 33px;
+  margin-bottom: 22px;
 }
 .blog-entry h2 a {
   color: #4085A6;
@@ -1473,13 +1344,13 @@ table tr.consumed td.consumed {
 .blog-entry h3 {
   font-size: 1.1em;
   line-height: 1.3em;
-  margin-bottom: 33px;
+  margin-bottom: 22px;
 }
 .blog-entry p {
   line-height: 1.7em;
 }
 .blog-entry .section-img {
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
 }
 .blog-entry:before, .blog-entry:after {
   display: table;
@@ -1498,23 +1369,26 @@ table tr.consumed td.consumed {
   border: 1px solid #808080;
 }
 .blog-entry .intro-content, .blog-entry .content {
-  margin-top: 22px;
+  margin-top: 14.666666666666666px;
 }
 .blog-entry .intro-content object, .blog-entry .content object {
-  margin: 22px 0;
+  margin: 14.666666666666666px 0;
 }
 .blog-entry .entry-info {
   font-size: 0.7em;
-  margin-top: 22px;
+  margin-top: 14.666666666666666px;
 }
 .blog-entry.single .entry-info {
   margin-top: 0;
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
+}
+.section.twitter-feed {
+  font-size: 1.1em;
 }
 .section.twitter-feed .tweet {
   line-height: 1.3em;
   font-size: 0.9em;
-  margin-bottom: 22px;
+  margin-bottom: 14.666666666666666px;
   color: #808080;
 }
 .section.twitter-feed .tweet:last-child {
@@ -1562,7 +1436,7 @@ table tr.consumed td.consumed {
   float: left;
 }
 .resources .categories .title {
-  margin-bottom: 11px;
+  margin-bottom: 7.333333333333333px;
 }
 .resources .categories ul li a {
   text-decoration: none;
@@ -1570,7 +1444,7 @@ table tr.consumed td.consumed {
   margin-right: 22px;
 }
 .resources .list {
-  margin-top: 88px;
+  margin-top: 58.666666666666664px;
 }
 .resources .list .resource {
   -moz-box-sizing: border-box;
@@ -1578,10 +1452,10 @@ table tr.consumed td.consumed {
   box-sizing: border-box;
   *behavior: url(boxsizing.htc);
   width: 33%;
-  padding: 44px;
+  padding: 29.333333333333332px;
   float: left;
   border: 1px solid #faaf40;
-  height: 264px;
+  height: 176px;
 }
 .resources .list .resource .description {
   display: none;
@@ -1608,5 +1482,5 @@ table tr.consumed td.consumed {
   display: block;
   float: left;
   cursor: pointer;
-  margin-top: 9px;
+  margin-top: 5.333333333333333px;
 }

diff --git a/cloudcms/static/cloudcms/less/styles.less b/cloudcms/static/cloudcms/less/styles.less
index 47ee23a..d2d47bf 100644 (file)
--- a/cloudcms/static/cloudcms/less/styles.less
+++ b/cloudcms/static/cloudcms/less/styles.less
@@ -2,7 +2,6 @@
 @import "../less/django_forms.less";
 @import "../less/tables.less";
 @import "../less/xtra.less";
-@import "../less/colorbox.less";
 
 
 // mixins
@@ -16,16 +15,18 @@
 
 .clearme { .clearfix() }
 
+@verticalSpacing: @gridGutterWidth/1.5;
 @gradCol: #ddd;
 body {
     #font.main();
+    font-size: 12px;
 }
 
 .topbar {
     background-color: @shadowColor;
     .head {
         float: left;    
-            padding: @gridGutterWidth/2-5;
+            padding: @verticalSpacing/2-5;
     }
     .links {
         .clearfix();
@@ -35,7 +36,7 @@ body {
             display: block;
             float: left;
             margin-left: 10px;
-            padding: @gridGutterWidth/2+1;
+            padding: @verticalSpacing/2+1;
 
             &:hover {
                 background-color: lighten(@black, 10%);
@@ -107,8 +108,8 @@ a img {
 
 div.header {
     position: relative;
-    margin-top: 4*@gridGutterWidth;
-    margin-bottom: @gridGutterWidth;
+    margin-top: 2.5*@verticalSpacing;
+    margin-bottom: @verticalSpacing;
     h1 {
         color: @shadowColor;
         display: inline;
@@ -129,8 +130,8 @@ div.header {
 .footer {
     border-bottom: 1px solid @mainBorderColor;
     border-top: 1px solid lighten(@mainBorderColor, 15%);
-    padding-top: @gridGutterWidth;
-    padding-bottom: @gridGutterWidth;
+    padding-top: @verticalSpacing;
+    padding-bottom: @verticalSpacing;
 }
 
 ul.inline {
@@ -145,7 +146,7 @@ ul.inline {
 .mainnav.quicknav {
     position: absolute;
     right: 0;
-    top: -2.6*@gridGutterWidth;
+    top: -2.6*@verticalSpacing;
     margin:0;
 
     li {
@@ -156,20 +157,24 @@ ul.inline {
 
 .navigation {
     height: 83px;    
+    position: absolute;
+    right: -15px;
+    top: -23px;
 }
 
 .mainnav {
-    font-size: 1.2em;
+    font-size: 1.3em;
     
     &.subnav {
-        margin-bottom: -@gridGutterWidth;
+        margin-bottom: -@verticalSpacing;
         li {
-            margin-top: 1.2em;
+            margin-top: 0.4*@verticalSpacing;
+            float: right;
         }
     }
 
     li {
-        margin-top: 3*@gridGutterWidth;
+        margin-top: 2*@verticalSpacing;
     }
 
     li.active {
@@ -210,7 +215,7 @@ ul.inline {
 
 div.page {
     .makeRow();
-    margin-top: 6*@gridGutterWidth;
+    margin-top: 5*@verticalSpacing;
     font-size: 1.1em;
     .page-inner {
         position: relative;    
@@ -329,7 +334,7 @@ input, textarea, .form-widget {
         
         h3 {
             font-size: 1.2em;
-            margin-bottom: @gridGutterWidth;    
+            margin-bottom: @verticalSpacing;    
         }
 
         .text {
@@ -337,7 +342,7 @@ input, textarea, .form-widget {
         }
     }
 
-    margin-bottom: 3*@gridGutterWidth; 
+    margin-bottom: 3*@verticalSpacing; 
 
     .left, .right {
         width: 50%;
@@ -405,12 +410,12 @@ form.withlabels {
 form {
     
     &.login {
-        margin-bottom: 1.5*@gridGutterWidth; 
+        margin-bottom: 1.5*@verticalSpacing; 
     }
 
     h2 {
         color: @black;
-        margin-bottom: @gridGutterWidth;
+        margin-bottom: @verticalSpacing;
         font-size: 1.1em;
 
         span {
@@ -419,10 +424,10 @@ form {
     }
 
     .form-row {
-        min-height: 2*@gridGutterWidth;
+        min-height: 2*@verticalSpacing;
         position: relative;
         &.submit {
-            margin-top: 1.5*@gridGutterWidth;
+            margin-top: 1.5*@verticalSpacing;
         }
 
         .extra-link {
@@ -433,12 +438,16 @@ form {
             margin-top: 1.3em;
             float: right;
         }
+
+        label {
+            font-size: 1.1em;    
+        }
     }
     
     &.innerlabels label { 
         position: absolute;
-        top:1em;
-        left:1.5em;
+        top: 1.1em;
+        left: 1.5em;
         color: #aaa;
     }
 
@@ -494,8 +503,8 @@ div.form-stacked {
     background-image: url("../images/dashed_border.png");
     background-repeat: repeat-x;
     background-position: left bottom;
-    padding-bottom: 2*@gridGutterWidth;
-    margin-bottom: 2*@gridGutterWidth;
+    padding-bottom: 2*@verticalSpacing;
+    margin-bottom: 2*@verticalSpacing;
 
 }
 
@@ -503,7 +512,7 @@ div.form-stacked {
     h2 {
         font-size: 1.1em;
         line-height: 1.3em;
-        margin-bottom: 1.5*@gridGutterWidth;    
+        margin-bottom: 1.5*@verticalSpacing;    
 
         a {
             color: #4085A6;
@@ -515,7 +524,7 @@ div.form-stacked {
     h3 {
         font-size: 1.1em;    
         line-height: 1.3em;
-        margin-bottom: 1.5*@gridGutterWidth;    
+        margin-bottom: 1.5*@verticalSpacing;    
     }
 
     p {
@@ -523,7 +532,7 @@ div.form-stacked {
     }
 
     .section-img {
-        margin-bottom: 1*@gridGutterWidth;    
+        margin-bottom: 1*@verticalSpacing;    
     }
 }
 
@@ -535,7 +544,7 @@ div.form-stacked {
     margin: 2em 0;
     background-color: #ddd;
     margin-left: 0;
-
+    font-size: 1.1em;
     li {
         padding: 1em;    
 
@@ -595,10 +604,10 @@ table {
     }
 
     li {
-        margin-bottom: @gridGutterWidth/2;
+        margin-bottom: @verticalSpacing/2;
 
         &.header {
-            margin-bottom: @gridGutterWidth;    
+            margin-bottom: @verticalSpacing;    
         }
     }
 
@@ -664,7 +673,7 @@ table {
 
     .section();
     .clearfix();
-    margin-bottom: 2*@gridGutterWidth;    
+    margin-bottom: 2*@verticalSpacing;    
 
     .title {
         margin-bottom: 1em;    
@@ -679,33 +688,34 @@ table {
     }
     
     .intro-content, .content {
-        margin-top: @gridGutterWidth;
+        margin-top: @verticalSpacing;
 
         object {
-            margin: @gridGutterWidth 0;    
+            margin: @verticalSpacing 0;    
         }
     }
 
     .entry-info {
         font-size: 0.7em;
-        margin-top: @gridGutterWidth;    
+        margin-top: @verticalSpacing;    
     }
 
     &.single {
         .entry-info {
             margin-top: 0;
-            margin-bottom: @gridGutterWidth;
+            margin-bottom: @verticalSpacing;
         }    
     }
 }
 
 .section.twitter-feed {
     
+    font-size: 1.1em;
     .tweet {
         &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none }
         line-height: 1.3em;
         font-size: 0.9em;
-        margin-bottom: @gridGutterWidth;
+        margin-bottom: @verticalSpacing;
         color: @gray;
 
         .date {
@@ -754,7 +764,7 @@ table {
         ul { .clearfix() }
         ul li { float: left; }
         .title {
-            margin-bottom: @gridGutterWidth/2;    
+            margin-bottom: @verticalSpacing/2;    
         }
 
         ul li a {
@@ -766,15 +776,15 @@ table {
 
     .list {
         
-        margin-top: 4*@gridGutterWidth;
+        margin-top: 4*@verticalSpacing;
 
         .resource {
             .border-box();
             width: 33%;
-            padding: 2*@gridGutterWidth;
+            padding: 2*@verticalSpacing;
             float: left;
             border: 1px solid @resCol;
-            height: 12*@gridGutterWidth;
+            height: 12*@verticalSpacing;
 
             .description {
                 display: none;    
@@ -810,7 +820,7 @@ table {
     display: block;
     float: left;
     cursor: pointer;
-    margin-top: @gridGutterWidth/2 - 2;
+    margin-top: @verticalSpacing/2 - 2;
 }