Styled imageCarousel.

Author: espenak

less/imageCarousel.less

@@ -1,8 +1,4 @@
-
-//@imageCarouselCaptionWidth: 400px;
-@imageCarouselSidePadding: 20px;
-
-.imageCarouselSizes (@imageCarouselCaptionWidth, @imageWidth) {
+.imageCarouselSizes (@imageCarouselCaptionWidth, @imageCarouselCaptionPadding, @imageWidth) {
     .item {
         img {
             margin-left: @imageCarouselCaptionWidth + 20px;
@@ -11,6 +7,7 @@
         .box-sizing(border-box);
         .carousel-caption {
             width: @imageCarouselCaptionWidth;
+            padding: 0 @imageCarouselCaptionPadding 0 @imageCarouselCaptionPadding;
         }
     }
 
@@ -20,7 +17,7 @@
 }
 
 #imageCarousel {
-    margin: 0;
+    margin: 20px 0 0 0;
     //height: 450px;
     position: relative;
 
@@ -35,15 +32,14 @@
         .box-sizing(border-box);
         .carousel-caption {
             position: absolute;
-            top: 0;
+            top: 45%;
             left: 0;
             bottom: auto;
             //width: @imageCarouselCaptionWidth;
-            height: 100%;
             //background-color: rgba(255, 255, 255, 0.4);
             background: none;
             .box-sizing(border-box);
-            padding: 0 @imageCarouselSidePadding 0 @imageCarouselSidePadding;
+            text-align: center;
             p {
                 font-size: 18px;
                 line-height: 23px;
@@ -55,18 +51,17 @@
 
     .carousel-controls {
         position: absolute;
-        bottom: 0;
-        top: auto;
+        bottom: auto;
+        top: 30px;
         left: 0;
+        height: 42px;
         .box-sizing(border-box);
         //background-color: red;
-        //width: @imageCarouselCaptionWidth;
-        height: 42px;
         ol.carousel-indicators {
             position: static;
             .box-sizing(border-box);
             margin: 0;
-            padding: 16px 0 0 0;
+            padding: 12px 0 0 0;
             width: 100%;
             text-align: center;
             display: block;
@@ -78,28 +73,29 @@
             }
         }
         .carousel-control {
-            position: absolute
-            top: 0;
-            left: @imageCarouselSidePadding;
+            position: absolute;
+            bottom: auto;
+            top: 12px;
+            left: 20px;
             font-size: 120px;
             text-shadow: 0 1px 1px rgba(0,0,0,.4);
             background-color: transparent;
             border: 0;
             z-index: 10;
             &.right {
-                right: @imageCarouselSidePadding;
+                right: 20px;
                 left: auto;
             }
         }
     }
 
-    .imageCarouselSizes(@imageCarouselCaptionWidth: 310px, @imageWidth: 605px);
+    .imageCarouselSizes(@imageCarouselCaptionWidth: 310px, @imageCarouselCaptionPadding: 50px, @imageWidth: 605px);
 
     @media (min-width: 1200px) { /* Large desktop */
-        .imageCarouselSizes(@imageCarouselCaptionWidth: 400px, @imageWidth: 745px);
+        .imageCarouselSizes(@imageCarouselCaptionWidth: 400px, @imageCarouselCaptionPadding: 70px, @imageWidth: 745px);
     }
     @media (min-width: 768px) and (max-width: 979px) { /* Portrait tablet to landscape and desktop */
-        .imageCarouselSizes(@imageCarouselCaptionWidth: 245px, @imageWidth: 455px);
+        .imageCarouselSizes(@imageCarouselCaptionWidth: 245px, @imageCarouselCaptionPadding: 10px, @imageWidth: 455px);
     }
     @media (max-width: 767px) { /* Tablets */
         .item {
@@ -128,7 +124,7 @@
         }
         .carousel-controls {
             width: 100%;
-            //top: 0;
+            top: auto;
             bottom: 10px;
             .carousel-control {
                 &.left {
@@ -144,7 +140,7 @@
         .item {
             .carousel-caption {
                 padding: 12px 50px 12px 50px;
-                min-height: 60px;
+                min-height: 65px;
                 p {
                     font-size: 13px;
                     line-height: 16px;