Clean CSS

- Remove unnecessary CSS
- Correct indentation
- Split into smaller files

Fixes #895

oscar/static/oscar/css/responsive.css

@@ -1158,6 +1158,9 @@
     width: auto;
     min-height: 0;
   }
+  .basket-items img {
+    margin: 0 0 10px;
+  }
   .nav-checkout .previous span,
   .nav-checkout .visited,
   .nav-checkout .disabled {

oscar/static/oscar/css/styles.css

@@ -6172,28 +6172,71 @@ body {
 .page_inner:after {
   clear: both;
 }
-h1 {
-  font-size: 30px;
-  line-height: 40px;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+form,
+.control-group,
+.table,
+.page-header,
+.sub-header {
+  margin: 0 0 20px;
 }
-h2 {
-  font-size: 24px;
+ul,
+ol {
+  margin-bottom: 20px;
+}
+.page-header h1,
+.sub-header h1,
+.table h1,
+.page-header h2,
+.sub-header h2,
+.table h2,
+.page-header h3,
+.sub-header h3,
+.table h3,
+.page-header h4,
+.sub-header h4,
+.table h4,
+.page-header h5,
+.sub-header h5,
+.table h5,
+.page-header h6,
+.sub-header h6,
+.table h6,
+.page-header form,
+.sub-header form,
+.table form {
+  margin-bottom: 0;
+}
+h1,
+.h1 {
+  font-size: 30.099999999999998px;
   line-height: 40px;
 }
-h3 {
-  font-size: 18px;
-  line-height: 20px;
+h2,
+.h2 {
+  font-size: 24.5px;
+  line-height: 40px;
 }
-h4 {
-  font-size: 16px;
-  line-height: 20px;
+h3,
+.h3 {
+  font-size: 17.5px;
+  line-height: 24px;
 }
-.page-header,
-.sub-header {
-  margin: 0 0 30px;
+h4,
+.h4 {
+  font-size: 16.099999999999998px;
+  line-height: 24px;
 }
-.well .sub-header {
-  margin: 0 0 20px;
+h5,
+.h5 {
+  font-size: 14px;
+  line-height: 20px;
 }
 .sub-header {
   padding-bottom: 9px;
@@ -6201,73 +6244,16 @@ h4 {
 }
 .page-header h1,
 .page-header h2 {
-  font-size: 30px;
+  font-size: 29.96px;
   line-height: 40px;
-  margin: 0;
 }
 .sub-header h2,
 .sub-header h3,
 .sub-header h4 {
-  font-size: 22px;
-  line-height: 24px;
-  margin: 0;
-}
-.price_color {
-  display: block;
-  color: #46a546;
-  font-weight: bold;
-}
-.product_pod .price_color {
-  margin-top: 0;
-}
-.es-carousel .price_color {
-  font-size: 20px;
-}
-.navbar.primary {
-  margin-bottom: 0px;
-}
-.navbar.primary .brand.hidden {
-  display: none;
-}
-.navbar.primary .form-search .btn {
-  margin-top: 0px;
-}
-.header .page_inner {
-  padding: 50px 0 40px;
-}
-.well {
-  *zoom: 1;
-}
-.well:before,
-.well:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.well:after {
-  clear: both;
-}
-.well-success {
-  background-color: #dff0d8;
-  border-color: #d6e9c6;
-}
-.well-danger {
-  background-color: #f2dede;
-  border-color: #eed3d7;
-}
-.well-info {
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-}
-.well-blank {
-  background-color: #ffffff;
-  border-color: rgba(0, 0, 0, 0.1);
-}
-.well-rm-padding {
-  padding: 19px 0;
-}
-.pull-clear {
-  clear: both;
+  font-size: 22.400000000000002px;
+  line-height: 30px;
+  font-weight: normal;
+  color: #333333;
 }
 .align-right,
 .table .align-right,
@@ -6310,346 +6296,61 @@ form:after {
   position: relative;
   z-index: 2;
 }
+.header .page_inner {
+  padding: 50px 0 40px;
+}
 .header h1 {
   line-height: inherit;
   margin: 0;
   font-size: 30px;
 }
-.cart {
-  margin: 0px;
-  *zoom: 1;
-}
-.cart:before,
-.cart:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.cart:after {
-  clear: both;
-}
-.cart .cart_summary strong {
-  padding: 4px 10px 4px;
-  display: block;
-}
-.cart .cart_summary strong span {
-  font-weight: normal;
-}
-.cart li {
-  display: block;
-  float: right;
+#language_selector select {
+  width: 100px;
 }
-.cart li .btn-group {
-  white-space: normal;
+.basket-mini .btn-group {
+  margin-left: 10px;
 }
-.cart li .btn-group .dropdown-menu {
+.basket-mini .dropdown-menu {
   width: 400px;
   padding-bottom: 0px;
   max-width: none;
 }
-.cart li .btn-group .dropdown-menu li {
-  float: none;
+.basket-mini .dropdown-menu li {
   display: block;
 }
-.basket_item {
-  margin: 0px;
-}
-.basket_item li {
-  width: auto;
+.basket-mini-item li {
   border-top: 1px solid #eeeeee;
   padding: 10px 15px;
 }
-.basket_item li:first-child {
+.basket-mini-item li:first-child {
   border-top: none;
 }
-.basket_item .image_container {
+.basket-mini-item .image_container {
   min-height: 70px;
 }
-.basket_item .image_container img {
+.basket-mini-item .image_container img {
   max-height: 70px;
 }
-.basket_item .image_container a {
+.basket-mini-item .image_container a {
   padding: 0;
 }
-.basket_item .form-actions {
-  -webkit-border-radius: 0 0px 6px 6px;
-  -moz-border-radius: 0 0px 6px 6px;
-  border-radius: 0 0px 6px 6px;
-  margin: 0px;
-}
-.basket_item .form-actions p {
-  *zoom: 1;
-}
-.basket_item .form-actions p:before,
-.basket_item .form-actions p:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.basket_item .form-actions p:after {
-  clear: both;
-}
-.basket_item .form-actions p .btn {
-  float: right;
-}
-.basket_item .form-actions h4 {
-  text-align: right;
-  margin-bottom: 14px;
-}
-.basket_item .form-actions h4 small {
-  display: block;
-}
-.basket_item a {
+.basket-mini-item a {
   color: #0088cc;
   font-weight: inherit;
   white-space: normal;
 }
-.basket_item a.btn {
+.basket-mini-item a.btn {
   color: #fff;
 }
-.basket_item h4 {
-  font-size: 14px;
-  margin: 0;
-}
-.basket_item h4 a {
-  padding: 0px;
-}
-.footer_links {
-  padding: 0px;
+.basket-mini-item .form-actions {
+  -webkit-border-radius: 0 0px 6px 6px;
+  -moz-border-radius: 0 0px 6px 6px;
+  border-radius: 0 0px 6px 6px;
   margin: 0px;
-  *zoom: 1;
-  border-bottom: 1px solid #cccccc;
-  padding: 14px;
-  margin-bottom: 20px;
-}
-.footer_links:before,
-.footer_links:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.footer_links:after {
-  clear: both;
-}
-.footer_links > li {
-  list-style: none;
-}
-.footer_links li {
-  float: left;
-}
-.footer_links li li {
-  float: none;
-}
-.footer_links:before,
-.footer_links:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.footer_links:after {
-  clear: both;
-}
-.footer_links li {
-  margin-left: 10px;
-  padding-left: 10px;
-  border-left: 1px solid #cccccc;
-}
-.footer_links li:first-child,
-.footer_links li:last-child {
-  margin-left: 0px;
-  padding-left: 0px;
-  border-left: none;
-}
-.footer_links .top_page {
-  float: right;
-}
-#browse > .dropdown-menu {
-  top: 109%;
-}
-.login_form form,
-.register_form form {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  *zoom: 1;
-}
-.login_form form blockquote,
-.register_form form blockquote {
-  border-color: #ddd;
-  border-color: rgba(0, 0, 0, 0.15);
-}
-.login_form form:before,
-.register_form form:before,
-.login_form form:after,
-.register_form form:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.login_form form:after,
-.register_form form:after {
-  clear: both;
-}
-.nav-profile {
-  margin-bottom: 0;
-}
-.account-pages .content,
-.account-profile .tab-content {
-  padding: 30px;
-  border: 1px solid #e1e1e1;
-  border-top-width: 0;
-}
-.nav-stacked .icon-chevron-right {
-  margin-top: 5px;
-  margin-right: -6px;
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-.nav-stacked .active .icon-chevron-right {
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
-#language_selector select {
-  width: 100px;
-}
-.basket_summary,
-.later_summary {
-  padding-left: 0px;
-}
-.basket_summary .actions,
-.later_summary .actions {
-  margin-left: 0px;
-}
-.basket_summary .checkout-quantity input,
-.later_summary .checkout-quantity input {
-  width: 10%;
-  margin-right: 2px;
-  margin-bottom: 0px;
-}
-.basket_summary .basket-products,
-.later_summary .basket-products {
-  border-bottom: 1px solid #E0E0E0;
-  padding: 0 0 10px;
-  margin-bottom: 18px;
-}
-.basket-title {
-  clear: both;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 0 10px;
-}
-.basket-title h4 {
-  margin: 0;
-}
-.basket-items {
-  border-bottom: 1px solid #e5e5e5;
-  padding: 10px;
-}
-.basket-items .image_container {
-  min-height: 0;
-}
-.basket-items .image_container img {
-  max-height: 100px;
-}
-.basket-items:nth-child(even) {
-  background: #f8f8f8;
-}
-.basket-items .price_color {
-  font-size: 16px;
-  font-weight: bold;
-}
-#basket_totals th small {
-  font-weight: normal;
-}
-.shipping_address h2 {
-  margin-bottom: 20px;
-}
-.choose-block {
-  margin-top: 10px;
 }
-.choose-block ul {
-  margin: 0;
-  padding: 0;
-  *zoom: 1;
-}
-.choose-block ul li {
-  padding: 0;
-  list-style: none;
-}
-.choose-block ul:before,
-.choose-block ul:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.choose-block ul:after {
-  clear: both;
-}
-.choose-block .well {
-  position: relative;
-  min-height: 240px;
-}
-.choose-block .well form {
-  margin-bottom: 0;
-}
-.choose-block address {
-  margin-bottom: 0;
-}
-.choose-block address span:first-child {
-  display: block;
-  font-weight: bold;
+.basket-mini-item .form-actions h4 {
   margin-bottom: 10px;
 }
-.choose-block .btn-primary,
-.choose-block .btn-success {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-}
-.choose-block .btn-remove-address {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-}
-.choose-block .alert-actions {
-  *zoom: 1;
-}
-.choose-block .alert-actions:before,
-.choose-block .alert-actions:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.choose-block .alert-actions:after {
-  clear: both;
-}
-.choose-block .alert-actions form,
-.choose-block .alert-actions a {
-  float: left;
-  margin: 0px 5px;
-}
-.choose-block .alert-actions form input {
-  width: auto;
-}
-.total {
-  background-color: #FDF5D9!important;
-}
-.nav-checkout {
-  text-align: center;
-}
-.nav-checkout.navbar .nav {
-  margin: 0;
-}
-.nav-checkout .active .navbar-text {
-  color: #fff;
-}
 ol.row-fluid,
 ul.row-fluid {
   margin-left: 0;
@@ -6659,93 +6360,48 @@ ul.row-fluid {
   margin-left: 0;
 }
 .product_pod {
-  position: relative;
-  height: 400px;
+  height: 370px;
   overflow: hidden;
   text-align: center;
   margin: 20px 0;
-  *zoom: 1;
-}
-.product_pod:before,
-.product_pod:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.product_pod:after {
-  clear: both;
+  position: relative;
 }
-.product_pod p {
+.product_pod p,
+.product_pod h3,
+.product_pod h2,
+.product_pod form {
   margin-bottom: 0;
 }
 .product_pod h3 {
-  font-size: 1em;
-  margin-bottom: 0;
-  line-height: 20px;
-}
-.product_pod h3 a {
+  font-size: 14px;
   line-height: 20px;
+  margin-bottom: 0;
 }
 .product_pod .price_color {
-  min-height: 50px;
-}
-.product_pod h4 {
-  *zoom: 1;
-  margin-bottom: 20px;
-  margin-top: 10px;
-  line-height: 20px;
-  font-size: 17px;
-}
-.product_pod h4:before,
-.product_pod h4:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.product_pod h4:after {
-  clear: both;
-}
-.product_pod form p {
-  min-height: 40px;
+  font-size: 16.099999999999998px;
+  line-height: 24px;
 }
-.product_pod .availability {
-  margin-bottom: 10px;
-  text-align: center;
+.product_pod .availability,
+.product_pod .price_color {
   min-height: 30px;
   white-space: nowrap;
 }
-.product_pod button {
-  width: 100%;
+.product_pod .image_container,
+.product_pod .availability,
+.product_pod .price_color {
+  margin-bottom: 10px;
 }
 .product_pod .product_price {
   position: absolute;
   bottom: 0;
   left: 5%;
   width: 90%;
-  min-height: 130px;
-}
-.product_pod .product_price form {
-  margin-bottom: 0px;
-}
-.product_pod .product_price form input#id_quantity,
-.product_pod .product_price form #id_product_id {
-  width: 90%;
-}
-.product_pod .product_price form label {
-  display: none;
 }
-.product_pod .product_price .btn {
-  padding-left: 0px;
-  padding-right: 0px;
-  width: 100%;
-}
-/* Product list image container */
 .image_container {
   width: 100%;
   min-height: 165px;
   overflow: hidden;
   text-align: center;
-  margin-bottom: 10px;
   position: relative;
 }
 .image_container img {
@@ -6763,36 +6419,19 @@ a:hover .thumbnail {
 .availability.outofstock {
   color: #9d261d;
 }
-.availability.instock {
-  color: #46a546;
-}
-/* review styles */
-.review {
-  margin-bottom: 20px;
-  *zoom: 1;
-}
-.review:before,
-.review:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.review:after {
-  clear: both;
-}
-.review h3 {
-  margin-bottom: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.availability.instock {
+  color: #46a546;
 }
-.review h3 small {
-  font-size: 13px;
+.price_color {
+  display: block;
+  color: #46a546;
+  font-weight: bold;
 }
-.review form {
-  display: inline-block;
-  *display: inline;
-  zoom: 1;
-  margin-bottom: 0;
+.product_pod .price_color {
+  margin-top: 0;
+}
+.es-carousel .price_color {
+  font-size: 20px;
 }
 .review_add,
 .review_all,
@@ -6855,7 +6494,188 @@ a:hover .thumbnail {
 .btn-wishlist {
   margin-bottom: 20px;
 }
-/* Elastislide Style */
+.review {
+  margin-bottom: 20px;
+  *zoom: 1;
+}
+.review:before,
+.review:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.review:after {
+  clear: both;
+}
+.review h3 {
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.review form {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  margin-bottom: 0;
+}
+.star-rating {
+  color: #CBCBCB;
+}
+.star-rating i {
+  letter-spacing: -1px;
+  width: auto;
+}
+.star-rating a {
+  margin-left: 10px;
+}
+.star-rating.One i:first-child {
+  color: #E6CE31;
+}
+.star-rating.Two i:first-child,
+.star-rating.Two i:first-child + i {
+  color: #E6CE31;
+}
+.star-rating.Three i:first-child,
+.star-rating.Three i:first-child + i,
+.star-rating.Three i:first-child + i + i {
+  color: #E6CE31;
+}
+.star-rating.Four i:first-child,
+.star-rating.Four i:first-child + i,
+.star-rating.Four i:first-child + i + i,
+.star-rating.Four i:first-child + i + i + i {
+  color: #E6CE31;
+}
+.star-rating.Five i {
+  color: #E6CE31;
+}
+.promotion_single .image_container {
+  min-height: 210px;
+  margin-bottom: 20px;
+}
+.promotion_single .image_container img {
+  max-height: 200px;
+}
+.sidebar .promotion_single h2 {
+  font-size: 17.5px;
+  line-height: 24px;
+}
+.sidebar .promotion_single h3 {
+  font-size: 14px;
+  line-height: 20px;
+}
+.sidebar .promotion_single .row-fluid > [class*="span"] {
+  float: none;
+  width: auto;
+}
+input[type="text"][id*="quantity"] {
+  width: 30px;
+}
+.checkout-quantity input {
+  margin-right: 2px;
+  margin-bottom: 0px;
+}
+.basket-title {
+  clear: both;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 0 10px;
+}
+.basket-title h4 {
+  margin: 0;
+}
+.basket-items {
+  border-bottom: 1px solid #e5e5e5;
+  padding: 10px;
+}
+.basket-items:nth-child(even) {
+  background: #f8f8f8;
+}
+.basket-items img {
+  margin-left: auto;
+  margin-right: auto;
+}
+.basket-items .price_color {
+  font-size: 16.099999999999998px;
+  line-height: 24px;
+  font-weight: bold;
+}
+#basket_totals th small {
+  font-weight: normal;
+}
+.total {
+  background-color: #FDF5D9!important;
+}
+.choose-block ul {
+  *zoom: 1;
+}
+.choose-block ul:before,
+.choose-block ul:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.choose-block ul:after {
+  clear: both;
+}
+.choose-block .well {
+  position: relative;
+  min-height: 240px;
+}
+.choose-block .well form {
+  margin-bottom: 0;
+}
+.choose-block address {
+  margin-bottom: 0;
+}
+.choose-block address span:first-child {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.choose-block .btn-primary,
+.choose-block .btn-success {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+}
+.choose-block .btn-remove-address {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+.nav-checkout {
+  text-align: center;
+}
+.nav-checkout.navbar .nav {
+  margin: 0;
+}
+.nav-checkout .active .navbar-text {
+  color: #fff;
+}
+.well {
+  *zoom: 1;
+}
+.well:before,
+.well:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.well:after {
+  clear: both;
+}
+.well-success {
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+.well-info {
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.well-blank {
+  background-color: #ffffff;
+  border-color: rgba(0, 0, 0, 0.1);
+}
 .es-carousel-wrapper {
   padding: 1px 20px;
   -moz-border-radius: 4px;
@@ -6928,7 +6748,6 @@ a:hover .thumbnail {
 .es-nav span:hover {
   background-color: #ddd;
 }
-/* Gallery */
 .rg-image-wrapper {
   position: relative;
   padding: 20px 30px;
@@ -7035,8 +6854,6 @@ a:hover .thumbnail {
   position: absolute;
   top: 50%;
   left: 50%;
-  /*  background:#000 url(../responsivegallery/ajax-loader.gif) no-repeat center center;*/
-
   margin: -23px 0px 0px -23px;
   z-index: 100;
   -moz-border-radius: 10px;
@@ -7044,79 +6861,6 @@ a:hover .thumbnail {
   border-radius: 10px;
   opacity: 0.7;
 }
-/* Modal modifications */
-.large-content {
-  height: 300px;
-  overflow: auto;
-  padding-right: 30px;
-}
-.sub-header h2 small {
-  *zoom: 1;
-}
-.sub-header h2 small:before,
-.sub-header h2 small:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.sub-header h2 small:after {
-  clear: both;
-}
-.sub-header h2 a {
-  float: right;
-  line-height: 40px;
-}
-/* Star Rating using font icons */
-.star-rating {
-  color: #CBCBCB;
-}
-.star-rating i {
-  letter-spacing: -1px;
-  width: auto;
-}
-.star-rating a {
-  margin-left: 10px;
-}
-.star-rating.One i:first-child {
-  color: #E6CE31;
-}
-.star-rating.Two i:first-child,
-.star-rating.Two i:first-child + i {
-  color: #E6CE31;
-}
-.star-rating.Three i:first-child,
-.star-rating.Three i:first-child + i,
-.star-rating.Three i:first-child + i + i {
-  color: #E6CE31;
-}
-.star-rating.Four i:first-child,
-.star-rating.Four i:first-child + i,
-.star-rating.Four i:first-child + i + i,
-.star-rating.Four i:first-child + i + i + i {
-  color: #E6CE31;
-}
-.star-rating.Five i {
-  color: #E6CE31;
-}
-/*** Promotional block styles ***/
-.promotion_single .image_container {
-  min-height: 210px;
-}
-.promotion_single .image_container img {
-  max-height: 200px;
-}
-.sidebar .promotion_single h2 {
-  font-size: 18px;
-  line-height: 22px;
-}
-.sidebar .promotion_single h3 {
-  font-size: 14px;
-  line-height: 18px;
-}
-.sidebar .promotion_single .row-fluid > [class*="span"] {
-  float: none;
-  width: auto;
-}
 .pull-right {
   float: right;
 }

oscar/static/oscar/less/page/account.less

@@ -1,28 +0,0 @@
-// OSCAR ACCOUNTS UNIQUE STYLES
-// -----------
-.login_form, .register_form {
-  form {
-    .well();
-  }
-}
-.nav-profile {
-  margin-bottom:0;
-}
-.account-pages .content,
-.account-profile .tab-content {
-   padding:@baseLineHeight + 10px;
-   border:1px solid darken(@grayLighter, 5%);
-   border-top-width:0;
-}
-.nav-stacked .icon-chevron-right {
-  margin-top: 5px;
-  margin-right: -6px;
-  .opacity(50);
-}
-.nav-stacked .active .icon-chevron-right {
-  .opacity(100);
-}
-//Language select
-#language_selector select {
-  width:100px;
-}

oscar/static/oscar/less/page/checkout.less

@@ -1,120 +1,100 @@
 // OSCAR CHECKOUT UNIQUE STYLES
 // -----------
-.basket_summary,
-.later_summary {
-  padding-left:0px;
-  .actions {
-    margin-left:0px;
-  }
-  .checkout-quantity {
-      input {
-          width: 10%;
-          margin-right: 2px;
-          margin-bottom:0px;
-      }
-  }
-  .basket-products {
-      border-bottom: 1px solid #E0E0E0;
-      padding: 0 0 10px;
-      margin-bottom: 18px;
-  }
+
+//Set Width of all quantity fields
+input[type="text"][id*="quantity"] {
+    width:30px;
+}
+// Quantity on the basket
+.checkout-quantity {
+    input {
+        margin-right: 2px;
+        margin-bottom:0px;
+    }
 }
+
+// Basket items like table headers
 .basket-title {
-  clear:both;
-  border-bottom:1px solid lighten(@grayLight, 30%);
-  padding:0 10px;
-  h4 {
-    margin:0;
-  }
+    clear:both;
+    border-bottom:1px solid lighten(@grayLight, 30%);
+    padding:0 10px;
+    h4 {
+        margin:0;
+    }
 }
+
+// Basket items
 .basket-items {
-  border-bottom:1px solid lighten(@grayLight, 30%);
-  padding:10px;
-  .image_container {
-    min-height: 0;
+    border-bottom:1px solid lighten(@grayLight, 30%);
+    padding:10px;
+    &:nth-child(even) {
+        background:lighten(@grayLighter, 4%);
+    }
     img {
-    max-height: 100px;
+        margin-left:auto;
+        margin-right:auto;
+    }
+    .price_color {
+        .h4();
+        font-weight:bold;
     }
-  }
-  &:nth-child(even) {
-      background:lighten(@grayLighter, 4%);
-  }
-  .price_color {
-    font-size:@baseFontSize + 2;
-    font-weight:bold;
-  }
 }
+
+// Descriptions next to shipping prices - basket totals table
 #basket_totals {
 	th small {
 		font-weight: normal;
 	}
 }
 
-.shipping_address {
-  h2 {
-    margin-bottom: @baseLineHeight;
-  }
+// Table background for totals
+.total {
+    background-color:#FDF5D9!important;
 }
+
+
+// Choosing a shipping address
 .choose-block {
-  margin-top:10px;
-  ul {
-    .remove_bullets();
-    .clearfix();
-  }
-  .well {
-    position:relative;
-    min-height:240px;
-    form {
-      margin-bottom:0;
+    ul {
+        .clearfix();
     }
-  }
-  address {
-    margin-bottom:0;
-    span:first-child {
-      display:block;
-      font-weight:bold;
-      margin-bottom:@baseLineHeight / 2;
+    .well {
+        position:relative;
+        min-height:240px;
+        form {
+        margin-bottom:0;
+        }
     }
-  }
-  .btn-primary, 
-  .btn-success {
-    position:absolute;
-    bottom: @gridGutterWidth;
-    left: @gridGutterWidth;
-  } 
-  .btn-remove-address {
-    position:absolute;
-    top: @gridGutterWidth;
-    right: @gridGutterWidth;
-  }
-  .alert-actions {
-    .clearfix();
-    form,
-    a {
-      float:left;
-      margin:0px 5px;
+    address {
+        margin-bottom:0;
+        span:first-child {
+        display:block;
+        font-weight:bold;
+        margin-bottom:@baseLineHeight / 2;
+        }
     }
-    form {
-      input {
-        width:auto;
-      }
+    .btn-primary,
+    .btn-success {
+        position:absolute;
+        bottom: @gridGutterWidth;
+        left: @gridGutterWidth;
+    }
+    .btn-remove-address {
+        position:absolute;
+        top: @gridGutterWidth;
+        right: @gridGutterWidth;
     }
-  } 
-}
-
-.total {
-  background-color:#FDF5D9!important;
 }
 
 // Checkout navigation - uses navbar
 .nav-checkout {
-  text-align:center;
-  &.navbar .nav {
-    margin:0;
-  }
-  .active {
-    .navbar-text {
-      color:#fff;
+    text-align:center;
+    &.navbar .nav {
+        margin:0;
+    }
+    .active {
+        .navbar-text {
+        color:#fff;
+        }
     }
-  }
 }

oscar/static/oscar/less/page/forms.less

@@ -0,0 +1,24 @@
+// Oscar FORMS
+
+form {
+  .clearfix();
+}
+//For IE: adds width for selects inside overflow hidden containers
+.select-open {
+  width:300px!important;
+}
+
+// Additional errors
+.errorlist {
+    margin:0;
+    padding:0 0 10px 0;
+    color:#B94A48;
+    li {
+        padding:0 0 5px 0;
+        list-style:none;
+    }
+}
+
+.control-label.required span {
+    color: #FF0000;
+}

oscar/static/oscar/less/page/head_foot.less

@@ -1,120 +0,0 @@
-// OSCAR HEADER
-// -----------
-.header {
-  position:relative;
-  z-index:2;
-  h1 {
-    line-height:inherit;
-    margin:0;
-    font-size:30px;
-  }
-}
-.cart {
-  margin:0px;
-  .clearfix();
-  .cart_summary {
-    strong {
-      padding: 4px 10px 4px;
-      display:block;
-      span {
-        font-weight:normal;
-      }
-    }
-  }
-  li {
-    display:block;
-    float:right;
-    .btn-group {
-      white-space: normal;
-      .dropdown-menu {
-        width:400px;
-        padding-bottom:0px;
-        max-width:none;
-        li {
-          float:none;
-          display:block;
-        }
-      }
-    }
-  }
-}
-.basket_item {
-  margin:0px;
-  li {
-    width:auto;
-    border-top:1px solid @grayLighter;
-    padding:10px 15px;
-    &:first-child { border-top:none; }
-  }
-  .image_container {
-    min-height: 70px;
-    img {
-      max-height: 70px;
-    }
-    a {
-      padding:0;
-    }
-  }
-  .form-actions {
-    -webkit-border-radius: 0 0px 6px 6px;
-    -moz-border-radius: 0 0px 6px 6px;
-    border-radius: 0 0px 6px 6px;
-    p {
-     .clearfix();
-     .btn {
-       float:right;
-     }
-    }
-    margin:0px;
-    h4 {
-      text-align:right;
-      margin-bottom:@baseFontSize;
-      small {
-        display:block;
-      }
-    }
-  }
-  a {
-    color:@linkColor;
-    font-weight:inherit;
-    white-space:normal;
-    &.btn {
-      color:#fff;
-    }
-  }
-  h4 {
-    font-size:14px;
-    margin:0;
-    a {
-      padding:0px;
-    }
-  }
-}
-// OSCAR FOOTER UNIQUE STYLES
-// -----------
-.footer_links {
-  .horiz_col();
-  .clearfix();
-  border-bottom:1px solid lighten(@black, 80%);
-  padding:@baseFontSize;
-  margin-bottom:@baseLineHeight;
-  li {
-    margin-left:10px;
-    padding-left:10px;
-    border-left:1px solid lighten(@black, 80%);
-  }
-  li:first-child,
-  li:last-child {
-    margin-left:0px;
-    padding-left:0px;
-    border-left:none;
-  }
-  .top_page {
-    float:right;
-  }
-}
-// OSCAR DROPDOWN NAVBAR
-// -----------
-#browse > .dropdown-menu {
-  top: 109%;
-}

oscar/static/oscar/less/page/header.less

@@ -0,0 +1,73 @@
+// OSCAR HEADER
+// -----------
+
+.header {
+    position:relative;
+    z-index:2;
+    .page_inner {
+        padding:50px 0 40px;
+    }
+    h1 {
+        line-height:inherit;
+        margin:0;
+        font-size:30px;
+    }
+}
+
+//Language select
+#language_selector select {
+    width:100px;
+}
+
+// Basket Mini Dropdown
+.basket-mini {
+    .btn-group {
+        margin-left:10px;
+    }
+    .dropdown-menu {
+        width:400px;
+        padding-bottom:0px;
+        max-width:none;
+        li {
+            display:block;
+        }
+    }
+}
+
+// Basket Mini Item
+.basket-mini-item {
+    li {
+        border-top:1px solid @grayLighter;
+        padding:10px 15px;
+        &:first-child {
+            border-top:none;
+        }
+    }
+    .image_container {
+        @imagecontainerheight: 70px;
+        min-height: @imagecontainerheight;
+        img {
+            max-height: @imagecontainerheight;
+        }
+        a {
+            padding:0;
+        }
+    }
+    a {
+        color:@linkColor;
+        font-weight:inherit;
+        white-space:normal;
+        &.btn {
+            color:#fff;
+        }
+    }
+    .form-actions {
+        -webkit-border-radius: 0 0px 6px 6px;
+        -moz-border-radius: 0 0px 6px 6px;
+        border-radius: 0 0px 6px 6px;
+        margin:0px;
+        h4 {
+            margin-bottom:@baseLineHeight / 2;
+        }
+    }
+}

oscar/static/oscar/less/page/layout.less

@@ -1,152 +1,30 @@
 // OSCAR PAGE STRUCTURE
 // -----------
+
 body {
-  background-color: @grayLighter;
+    background-color: @grayLighter;
 }
 .container-fluid {
-  //Unique styles
-  padding:0px;
-  margin:0px auto;
-  max-width:@oscarpagewidth;
-}
-.page {
-  background:@white;
-  -webkit-border-radius: 0 0 6px 6px;
-  -moz-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
-  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-  box-shadow: 0 1px 2px rgba(0,0,0,.15);
-}
-.page_inner {
-   padding:@gridGutterWidth;
-   .clearfix();
+    padding:0px;
+    margin:0px auto;
+    // Here is the page width: editable in page/mixins.less
+    max-width:@oscarpagewidth;
 }
-// FONTS MODIFICATIONS
-// -----------
-h1 { font-size: 30px; line-height: 40px; }
-h2 { font-size: 24px; line-height: 40px; }
-h3 { font-size: 18px; line-height: 20px; }
-h4 { font-size: 16px; line-height: 20px; }
 
-.page-header,
-.sub-header {
-  margin: 0 0 (@baseLineHeight * 1.5);
-}
-.well .sub-header {
-  margin: 0 0 (@baseLineHeight);
-}
-.sub-header {
-  padding-bottom: (@baseLineHeight / 2) - 1;
-  border-bottom: 1px solid @grayLighter;
-}
-.page-header {
-  h1,h2 {
-    font-size: 30px;
-    line-height: 40px;
-    margin:0;
-  }
-}
-.sub-header {
-  h2,h3,h4 {
-    font-size: 22px;
-    line-height: 24px;
-    margin:0;
-  }
-}
-
-// PRICE SIZE/COLOR
-// -----------
-.price_color {
-  display:block;
-  color:@green;
-  font-weight:bold;
-}
-.product_pod .price_color { margin-top:0 }
-.es-carousel .price_color { font-size:20px; }
-
-
-
-// OSCAR NAV BAR MODIFICATIONS
-// -----------
-.navbar.primary {
-  margin-bottom:0px;
-  .brand.hidden {
-    display: none;
-  }
-  .form-search {
-    .btn {
-      margin-top: 0px; // make buttons vertically centered in navbar
-    }
-  }
-}
-.header {
-  .page_inner {
-    padding:50px 0 40px;
-  }
-}
-// WELLS
-// -----
-.well {
-  .clearfix();
-}
-.well-success {
-  background-color: @successBackground;
-  border-color: @successBorder;  
-}
-.well-danger {
-  background-color: @errorBackground;
-  border-color: @errorBorder;
-}
-.well-info {
-  background-color: @infoBackground;
-  border-color: @infoBorder;
-}
-.well-blank {
-  background-color: @white;
-  border-color: rgba(0,0,0,.1);
-}
-.well-rm-padding {
-  padding:19px 0;
-}
-// UTILITY CLASSES
-// ---------------
-.pull-clear {
-  clear: both;
-}
-.align-right,
-.table .align-right,
-.table .align-right {
-  text-align:right;
-}
-
-.align-center,
-.table .align-center,
-.table .align-center {
-  text-align:center;
-}
-// FORMS
-// ------------
-form {
-  .clearfix();
-}
-//For IE: adds width for selects inside overflow hidden containers
-.select-open {
-  width:300px!important;
-}
-
-// ADDITIONAL ERRORS
-.errorlist {
-    margin:0;
-    padding:0 0 10px 0;
-    color:#B94A48;
-    li {
-        padding:0 0 5px 0;
-        list-style:none;
-    }
-}
-
-.control-label.required span {
-    color: #FF0000;
+// The page container
+.page {
+    background:@white;
+    -webkit-border-radius: 0 0 6px 6px;
+    -moz-border-radius: 0 0 6px 6px;
+    border-radius: 0 0 6px 6px;
+    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+    box-shadow: 0 1px 2px rgba(0,0,0,.15);
 }
 
+// Some padding for the inner container
+// Also usefull for the mobile
+.page_inner {
+    padding:@gridGutterWidth;
+    .clearfix();
+}

oscar/static/oscar/less/page/mixins.less

@@ -1,35 +1,7 @@
 // OSC VARIABLES
 // --------------------------------------------------
-@oscarpagewidth: 960px;
-
-@fifth: 20%;
-@quart: 25%;
-@third: 33.33333333333333%;
-@half: 50%;
-@three_quart: 75%;
-@full:100%;
 
-// OSC MIXINS
-// --------------------------------------------------
-.remove_bullets() {
-  margin: 0;
-  padding: 0;
-  li {
-    padding: 0;
-    list-style:none;
-  }
-}
-.horiz_col() {
-  padding:0px;
-  margin:0px;
-  .clearfix();
-  > li {
-    list-style:none;
-  }
-  li { 
-    float:left; 
-    li {
-      float:none;
-    }
-  }
-}
+// Page width
+@oscarpagewidth: 960px;
+// Image height
+@imagecontainerheight: 165px;

oscar/static/oscar/less/page/plugins.less

@@ -1,6 +1,8 @@
 // OSCAR PLUGINS STYLES
 // -----------
-/* Elastislide Style */
+
+// These styles relate to the Elastislide carousel used for product promotion
+// and the gallery
 .es-carousel-wrapper {
   padding:1px 20px;
   -moz-border-radius: 4px;
@@ -73,7 +75,7 @@
 .es-nav span:hover {
   background-color:#ddd;
 }
-/* Gallery */
+// Gallery styles
 .rg-image-wrapper{
 	position:relative;
 	padding:20px 30px;
@@ -141,8 +143,7 @@
 	margin-top:15px;
 	position:relative;
 }
-.rg-caption p{
-	//font-size:11px;
+.rg-caption p {
 	font-size:0.846em;
 	letter-spacing:2px;
 	font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
@@ -182,64 +183,10 @@
 	position:absolute;
 	top:50%;
 	left:50%;
-/*  background:#000 url(../responsivegallery/ajax-loader.gif) no-repeat center center;*/
 	margin:-23px 0px 0px -23px;
 	z-index:100;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
 	border-radius: 10px;
 	opacity:0.7;
-}
-/* Modal modifications */
-.large-content {
-  height:300px;
-  overflow:auto;
-  padding-right:30px;
-}
-.sub-header {
-  h2 {
-    small {
-     .clearfix(); 
-    }
-    a {
-      float:right;
-      line-height: @baseLineHeight * 2;
-    }
-  }
-}
-/* Star Rating using font icons */
-.star-rating {
-    color:#CBCBCB;
-    i {
-    	letter-spacing: -1px;
-    	width:auto;
-    }
-    a {
-        margin-left:10px;
-    }
-}
-.star-rating.One {
-    i:first-child {
-        color:#E6CE31;
-    }
-}
-.star-rating.Two {
-    i:first-child, i:first-child + i {
-        color:#E6CE31;
-    }
-}
-.star-rating.Three {
-    i:first-child, i:first-child + i, i:first-child + i + i {
-        color:#E6CE31;
-    }
-}
-.star-rating.Four {
-    i:first-child, i:first-child + i, i:first-child + i + i, i:first-child + i + i + i {
-        color:#E6CE31;
-    }
-}
-.star-rating.Five {
-    i {
-        color:#E6CE31;
-    }
 }

oscar/static/oscar/less/page/product_lists.less

@@ -1,100 +1,76 @@
 //no margin on lists
 ol,
 ul {
-  &.row-fluid {
-    margin-left:0;
-    list-style: none;
-  }
+    &.row-fluid {
+        margin-left:0;
+        list-style: none;
+    }
 }
 
 //Remove margin if condition
 .row-fluid [class*="span"] {
-  &.no-margin {
-    margin-left:0;
-  }
+    &.no-margin {
+        margin-left:0;
+    }
 }
 
-//Product listed container
+//Products listed container
+// Space between products in a list is determined by the Grid and therfore the
+// gutter width: 20px
 .product_pod {
-  position:relative;
-  height:400px;
-  overflow:hidden;
-  text-align:center;
-  margin: @baseLineHeight 0;
-  .clearfix();
-  & p {
-    margin-bottom:0;
-  }
-  h3 {
-    font-size:1em;
-    margin-bottom:0;
-    line-height:@baseLineHeight;
-    a {
-      line-height:@baseLineHeight;
-    }
-  }
-  .price_color {
-    min-height:50px;
-  }
-  h4 {
-    .clearfix();
-    margin-bottom: @baseLineHeight;
-    margin-top: @baseLineHeight / 2;
-    line-height:@baseLineHeight;
-    font-size:@baseFontSize + 3;
-  }
-  form p {
-    min-height:40px;
-  }
-  .availability {
-    margin-bottom:@baseLineHeight / 2;
+    height:370px;
+    overflow:hidden;
     text-align:center;
-    min-height:30px;
-    white-space:nowrap;
-  }
-  button {
-    width:100%;
-  }
-  .product_price {
-    position:absolute;
-    bottom:0;
-    left:5%;
-    width:90%;
-    min-height:130px;
-    form {
-      margin-bottom:0px;
-      input#id_quantity,
-      #id_product_id {
-        width:90%;
-      }
-      label {
-        display:none;
-      }
+    margin: @baseLineHeight 0;
+    position:relative;
+    p, h3, h2, form {
+        margin-bottom:0;
+    }
+    h3 {
+        .h5();
+        margin-bottom:0;
+    }
+    .price_color {
+        .h4();
     }
-    .btn {
-      padding-left:0px;
-      padding-right:0px;
-      width:100%;
+    .availability,
+    .price_color {
+        min-height:30px;
+        white-space:nowrap;
+    }
+    .image_container,
+    .availability,
+    .price_color {
+        margin-bottom: @baseLineHeight / 2;
+    }
+    // This could be set to 100% but this gives a little more space around products.
+    .product_price {
+        position:absolute;
+        bottom:0;
+        left:5%;
+        width:90%;
     }
-  }
 }
-/* Product list image container */
+
+// Product list image container sets a height so images don't breakout
+// This can be used to verically align the image with same line-height
+// Alternatively if you are cropping images and have a specific W & H this isn't neccessary
 .image_container {
-  width:100%;
-  min-height:165px;
-  overflow:hidden;
-  text-align: center;
-  margin-bottom: @baseLineHeight / 2;
-  position:relative;
-  img {
-    max-height:155px;
-    max-width:90%;
-    width:auto;
-    margin:0px auto;
-  }
+    width:100%;
+    min-height:@imagecontainerheight;
+    overflow:hidden;
+    text-align: center;
+    position:relative;
+    img {
+        max-height:@imagecontainerheight - 10px;
+        max-width:90%;
+        width:auto;
+        margin:0px auto;
+    }
 }
+
 // Add a hover state for thumbnail
 a:hover .thumbnail {
-  border-color: @linkColor;
-  .box-shadow(0 1px 4px rgba(0,105,214,.25));
+    border-color: @linkColor;
+    .box-shadow(0 1px 4px rgba(0,105,214,.25));
 }

oscar/static/oscar/less/page/product_page.less

@@ -1,59 +1,54 @@
 // OSCAR PRODUCTS UNIQUE STYLES
 // -----------
 .availability {
-  &.outofstock {
-    color:@red;
-  }
-  &.instock {
-   color:@green;
-  }
+    &.outofstock {
+        color:@red;
+    }
+    &.instock {
+    color:@green;
+    }
 }
 
-/* review styles */
-.review {
-  margin-bottom:@baseLineHeight;
-  .clearfix();
-  h3 {
-    margin-bottom: 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    small {
-      font-size: @baseFontSize - 1;
-    }
-  }
-  form {
-    display:inline-block;
-    *display:inline;
-    zoom:1;
-    margin-bottom:0;
-  }
+// PRICE SIZE/COLOR
+// -----------
+.price_color {
+    display:block;
+    color:@green;
+    font-weight:bold;
 }
+.product_pod .price_color { margin-top:0 }
+.es-carousel .price_color { font-size:20px; }
+
+// Added Well mixin to page elements
+// TODO: good to have this as this it is easy to remove/update rather than a
+// class in the template. But maybe better moved from here.
 .review_add,
 .review_all,
 .review_read,
 .side_categories {
-  .well();
+    .well();
 }
 
-//Align wish list button with add to basket button
+// Wish lists
+// Align wish list button with add to basket button
 .add-to-basket {
-  //Width of default input/select/textarea
-  width: 220px;
-  margin-bottom:0;
-  margin-right:10px;
-  *margin-right:20px;
+    //Width of default input/select/textarea
+    width: 220px;
+    margin-bottom:0;
+    margin-right:10px;
+    *margin-right:20px;
 }
 .add-to-basket,
 .btn-wishlist {
-  display:inline-block;
-  *display:inline;
-  zoom:1;
+    display:inline-block;
+    *display:inline;
+    zoom:1;
 }
-//For responsive - when button falls under each other
+// For responsive - when button falls under each other
 .btn-wishlist {
-  vertical-align:bottom;
+    vertical-align:bottom;
 }
 .add-to-basket .btn,
 .btn-wishlist {
-  margin-bottom:@baseLineHeight;
+    margin-bottom:@baseLineHeight;
 }

oscar/static/oscar/less/page/promotions.less

@@ -1,27 +1,27 @@
-/*** Promotional block styles ***/
+// Promotional block styles
 .promotion_single {
-  .image_container {
-    min-height: 210px;
-    img {
-      max-height: 200px;
+    .image_container {
+        @imagecontainerheight: 210px;
+        min-height: @imagecontainerheight;
+        margin-bottom: @baseLineHeight;
+        img {
+            max-height: @imagecontainerheight - 10;
+        }
     }
-  }
 }
 .sidebar {
-  .promotion_single {
-    h2 {
-      font-size:18px;
-      line-height:22px;
+    .promotion_single {
+        h2 {
+            .h3();
+        }
+        h3 {
+            .h5();
+        }
+        .row-fluid {
+            > [class*="span"] {
+                float:none;
+                width:auto;
+            }
+        }
     }
-    h3 {
-      font-size:14px;
-      line-height:18px;
-    }
-    .row-fluid {
-      > [class*="span"] {
-        float:none;
-        width:auto;
-      } 
-    }
-  }
 }

oscar/static/oscar/less/page/responsive-767px-max.less

@@ -98,6 +98,13 @@
 		}
 	}
 
+	// Basket items
+	.basket-items {
+	  img {
+	    margin: 0 0 @baseLineHeight / 2;
+	  }
+	}
+
 	// Checkout navigation
 	.nav-checkout {
 		// For mobile lets only show the active and the previous link in the checkout

oscar/static/oscar/less/page/reviews.less

@@ -0,0 +1,54 @@
+// Review styles
+.review {
+    margin-bottom:@baseLineHeight;
+    .clearfix();
+    h3 {
+        margin-bottom: @baseLineHeight / 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    // Vote forms inline with "Is this review helpful?"
+    form {
+        display:inline-block;
+        *display:inline;
+        zoom:1;
+        margin-bottom:0;
+    }
+}
+
+// Star Rating using font icons for 5 stars
+.star-rating {
+    color:#CBCBCB;
+    i {
+	letter-spacing: -1px;
+	width:auto;
+    }
+    a {
+        margin-left:10px;
+    }
+}
+.star-rating.One {
+    i:first-child {
+        color:#E6CE31;
+    }
+}
+.star-rating.Two {
+    i:first-child, i:first-child + i {
+        color:#E6CE31;
+    }
+}
+.star-rating.Three {
+    i:first-child, i:first-child + i, i:first-child + i + i {
+        color:#E6CE31;
+    }
+}
+.star-rating.Four {
+    i:first-child, i:first-child + i, i:first-child + i + i, i:first-child + i + i + i {
+        color:#E6CE31;
+    }
+}
+.star-rating.Five {
+    i {
+        color:#E6CE31;
+    }
+}

oscar/static/oscar/less/page/type.less

@@ -0,0 +1,67 @@
+// Re setting margins to the bottom only
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+form,
+.control-group,
+.table,
+.page-header,
+.sub-header {
+    margin:0 0 @baseLineHeight;
+}
+ul,
+ol {
+    margin-bottom:@baseLineHeight;
+}
+.page-header,
+.sub-header,
+.table {
+    h1, h2, h3, h4, h5, h6, form {
+        margin-bottom:0;
+    }
+}
+
+// Heading fonts a little smaller
+h1, .h1 { font-size: @baseFontSize * 2.15; line-height: @baseLineHeight * 2; } // 30px
+h2, .h2 { font-size: @baseFontSize * 1.75; line-height: @baseLineHeight * 2; } // 24px
+h3, .h3 { font-size: @baseFontSize * 1.25; line-height: @baseLineHeight * 1.2; } // 18px
+h4, .h4 { font-size: @baseFontSize * 1.15; line-height: @baseLineHeight * 1.2; } // 16px
+h5, .h5 { font-size: @baseFontSize; line-height: @baseLineHeight; } // 14px
+
+// Page / sub headers consistant
+.sub-header {
+    padding-bottom: (@baseLineHeight / 2) - 1;
+    border-bottom: 1px solid @grayLighter;
+}
+.page-header {
+    h1,h2 {
+        font-size: @baseFontSize * 2.14;
+        line-height: 40px;
+    }
+}
+// Sub header a little lighter
+.sub-header {
+    h2,h3,h4 {
+        font-size: @baseFontSize * 1.6; // 22px
+        line-height: @baseLineHeight * 1.5;
+        font-weight:normal;
+        color:@grayDark;
+    }
+}
+
+// Text alignment
+.align-right,
+.table .align-right,
+.table .align-right {
+    text-align:right;
+}
+
+.align-center,
+.table .align-center,
+.table .align-center {
+    text-align:center;
+}

oscar/static/oscar/less/page/wells.less

@@ -0,0 +1,16 @@
+// Modifications / additons to wells
+.well {
+	.clearfix();
+}
+.well-success {
+	background-color: @successBackground;
+	border-color: @successBorder;
+}
+.well-info {
+	background-color: @infoBackground;
+	border-color: @infoBorder;
+}
+.well-blank {
+	background-color: @white;
+	border-color: rgba(0,0,0,.1);
+}

oscar/static/oscar/less/styles.less

@@ -12,7 +12,7 @@
 @import "bootstrap/variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "bootstrap/mixins.less";
 
-// Oscar variables and mixins
+// Oscar variables
 @import "page/mixins.less"; // Kept separtate for bootstrap updates - but should be imported into bootstap mixins.
 
 // CSS Reset
@@ -65,15 +65,19 @@
 @import "bootstrap/carousel.less";
 @import "bootstrap/hero-unit.less";
 
-// Unique Page Styles
-@import "page/layout.less"; // Note: combine and remove with layout.less in bootstrap - it was kept separate on intital for bootstrap updates
-@import "page/head_foot.less";
-@import "page/account.less";
-@import "page/checkout.less";
+// Oscar: Unique
+@import "page/layout.less";
+@import "page/type.less";
+@import "page/forms.less";
+@import "page/header.less";
 @import "page/product_lists.less";
 @import "page/product_page.less";
-@import "page/plugins.less";
+@import "page/reviews.less";
 @import "page/promotions.less";
+@import "page/checkout.less";
+@import "page/wells.less";
+@import "page/plugins.less";
+
 
 // Utility classes
 @import "bootstrap/utilities.less"; // Has to be last to override when necessary

oscar/templates/oscar/basket/partials/basket_content.html

@@ -46,13 +46,11 @@
                         <div class="row-fluid">
                             <div class="span2">
                                 {{ form.id }}
-                                <div class="image_container">
-                                    {% with image=product.primary_image %}
-                                        {% thumbnail image.original "100x100" upscale=False as thumb %}
-                                        <a href="{{ product.get_absolute_url }}"><img class="thumbnail" src="{{ thumb.url }}" alt="{{ product.get_title }}"/></a>
-                                        {% endthumbnail %}
-                                    {% endwith %}
-                                </div>
+                                {% with image=product.primary_image %}
+                                    {% thumbnail image.original "100x100" upscale=False as thumb %}
+                                    <a href="{{ product.get_absolute_url }}"><img class="thumbnail" src="{{ thumb.url }}" alt="{{ product.get_title }}"/></a>
+                                    {% endthumbnail %}
+                                {% endwith %}
                             </div>
                             <div class="span4">
                                 <h4><a href="{{ product.get_absolute_url }}">{{ line.description }}</a></h4>
@@ -165,13 +163,11 @@
                         <div class="row-fluid">
                             <div class="span2">
                                 {{ form.id }}
-                                <div class="image_container">
-                                    {% with image=form.instance.product.primary_image %}
-                                        {% thumbnail image.original "100x100" upscale=False as thumb %}
-                                        <a href="{{ form.instance.product.get_absolute_url }}"><img class="thumbnail" src="{% static thumb.url %}" alt="{{ form.instance.product.get_title }}"></a>
-                                        {% endthumbnail %}
-                                    {% endwith %}
-                                </div>
+                                {% with image=form.instance.product.primary_image %}
+                                    {% thumbnail image.original "100x100" upscale=False as thumb %}
+                                    <a href="{{ form.instance.product.get_absolute_url }}"><img class="thumbnail" src="{% static thumb.url %}" alt="{{ form.instance.product.get_title }}"></a>
+                                    {% endthumbnail %}
+                                {% endwith %}
                             </div>
                             <div class="span6">
                                 <h4><a href="{{ form.instance.product.get_absolute_url }}">{{ form.instance.description }}</a></h4>

oscar/templates/oscar/basket/partials/basket_quick.html

@@ -6,7 +6,7 @@
 {% load i18n %}
 {% load staticfiles %}
 
-<ul class="basket_item">
+<ul class="basket-mini-item unstyled">
     {% if request.basket.num_lines %}
         {% for line in request.basket.all_lines %}
             <li>
@@ -21,7 +21,7 @@
                         </div>
                     </div>
                     <div class="span6">
-                        <h4><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h4>
+                        <h5><a href="{{ line.product.get_absolute_url }}">{{ line.description }}</a></h5>
                     </div>
                     <div class="span1 align-center"><strong>{% trans "Qty" %}</strong> {{ line.quantity }}</div>
                     <div class="span2 price_color align-right">{{ line.unit_price_excl_tax|currency:request.basket.currency }}</div>
@@ -29,7 +29,7 @@
             </li>
         {% endfor %}
         <li class="form-actions">
-            <h4>
+            <h4 class="align-right">
                 {% if request.basket.is_tax_known %}
                     <small>{% trans "Total:" %} {{ request.basket.total_incl_tax|currency:request.basket.currency }}</small> 
                 {% else %}

oscar/templates/oscar/catalogue/partials/product.html

@@ -36,7 +36,7 @@
         <div class="product_price">
             {% include "catalogue/partials/stock_record.html" %}
             {% if product.is_group %}
-                <a class="btn btn-full" href="{% url 'catalogue:detail' product.slug product.id %}">{% trans "View" %}</a>
+                <a class="btn btn-block" href="{% url 'catalogue:detail' product.slug product.id %}">{% trans "View" %}</a>
             {% else %}
                 {% include "catalogue/partials/add_to_basket_form_compact.html" %}
             {% endif %}

oscar/templates/oscar/checkout/shipping_address.html

@@ -22,7 +22,7 @@
         {% if addresses %}
             <h3>{% trans "An address from your addressbook?" %}</h3>
             <div class="choose-block">
-                <ul class="row-fluid">
+                <ul class="row-fluid unstyled">
                     {% for address in addresses %}
 					<li class="span6">
 						<div class="well">

oscar/templates/oscar/customer/login_registration.html

@@ -22,7 +22,7 @@
 
     <div class="row-fluid">
         <div class="span6 login_form">
-            <form id="login_form" action="{{ request.get_full_path }}" method="post" class="form-stacked" >
+            <form id="login_form" action="{{ request.get_full_path }}" method="post" class="well" >
                 <h2>{% trans 'Log In' %}</h2>
                 {% csrf_token %}
                 {% include "partials/form_fields.html" with form=login_form %}
@@ -31,7 +31,7 @@
             </form>
         </div>
         <div class="span6 register_form">
-            <form id="register_form" action="{{ request.get_full_path }}" method="post" class="form-stacked">
+            <form id="register_form" action="{{ request.get_full_path }}" method="post" class="well">
                 <h2>{% trans 'Register' %}</h2>
                 {% csrf_token %}
                 {% include "partials/form_fields.html" with form=registration_form %}

oscar/templates/oscar/partials/footer.html

@@ -4,7 +4,7 @@
         {% comment %}
             Could be used for displaying links to privacy policy, terms of service, etc.
             We have a CSS class defined:
-                <ul class="footer_links">
+                <ul class="footer_links inline">
                     ...
                 </ul>
          {% endcomment %}

oscar/templates/oscar/partials/mini_basket.html

@@ -2,23 +2,21 @@
 {% load currency_filters %}
 {% load i18n %}
 
-<ul class="cart span5 hidden-phone">
-    <li>
-        <div class="btn-group">
-            <a class="btn" href="{% url 'basket:summary' %}">{% trans "View basket" %}</a>
-            <button class="btn dropdown-toggle" data-toggle="dropdown">
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu pull-right">
-                <li>{% include "basket/partials/basket_quick.html" %}</li>
-            </ul>
-        </div>
-    </li>
-    <li class="cart_summary"><strong>{% trans "Basket total:" %} <span>
-        {% if request.basket.is_tax_known %}
-            {{ request.basket.total_incl_tax|currency:request.basket.currency }}
-        {% else %}
-            {{ request.basket.total_excl_tax|currency:request.basket.currency }}            
-        {% endif %}
-    </span></strong></li>
-</ul><!-- /cart -->
+<div class="basket-mini pull-right hidden-phone">
+    <strong>{% trans "Basket total:" %}</strong>
+    {% if request.basket.is_tax_known %}
+        {{ request.basket.total_incl_tax|currency:request.basket.currency }}
+    {% else %}
+        {{ request.basket.total_excl_tax|currency:request.basket.currency }}
+    {% endif %}
+
+    <span class="btn-group">
+        <a class="btn" href="{% url 'basket:summary' %}">{% trans "View basket" %}</a>
+        <button class="btn dropdown-toggle" data-toggle="dropdown">
+            <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu pull-right">
+            <li>{% include "basket/partials/basket_quick.html" %}</li>
+        </ul>
+    </span>
+</div>