From 86ef9b54614c525e70adb0923bc9386cdb924d28 Mon Sep 17 00:00:00 2001
From: Kevin Granger <shipowlata@gmail.com>
Date: Thu, 17 Oct 2013 11:22:03 +0200
Subject: [PATCH] // calendar

---
 admin-dev/themes/default/css/admin-theme.css  | 282 +++++++++---------
 .../admin-theme/_admin-date-range-picker.sass |  96 +++---
 .../template/helpers/calendar/calendar.tpl    |   2 +-
 3 files changed, 196 insertions(+), 184 deletions(-)

diff --git a/admin-dev/themes/default/css/admin-theme.css b/admin-dev/themes/default/css/admin-theme.css
index ad8174e82..61b7419d0 100644
--- a/admin-dev/themes/default/css/admin-theme.css
+++ b/admin-dev/themes/default/css/admin-theme.css
@@ -8888,115 +8888,120 @@ textarea {
   -webkit-font-smoothing: antialiased;
   *margin-right: 0.3em; }
 
-/* line 17, admin-theme/_admin-date-range-picker.sass */
-#datepicker {
-  padding: 6px; }
-/* line 20, admin-theme/_admin-date-range-picker.sass */
+/* line 19, admin-theme/_admin-date-range-picker.sass */
 #datepicker .input-selected {
   margin: 0; }
-/* line 22, admin-theme/_admin-date-range-picker.sass */
+/* line 21, admin-theme/_admin-date-range-picker.sass */
 #datepicker #date-start.input-selected, #datepicker #date-end.input-selected {
-  border: solid 3px #004968; }
-/* line 24, admin-theme/_admin-date-range-picker.sass */
+  border: solid 3px #00a4e7; }
+/* line 23, admin-theme/_admin-date-range-picker.sass */
 #datepicker #date-start-compare.input-selected, #datepicker #date-end-compare.input-selected {
-  border: solid 3px #004968; }
-/* line 27, admin-theme/_admin-date-range-picker.sass */
+  border: solid 3px #ff8000; }
+/* line 26, admin-theme/_admin-date-range-picker.sass */
+#datepicker div#datepicker-form #date-range {
+  border: solid 1px #0092ce; }
+/* line 28, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form #date-range .form-date-heading {
   background-color: #0092ce; }
-/* line 29, admin-theme/_admin-date-range-picker.sass */
+/* line 30, admin-theme/_admin-date-range-picker.sass */
+#datepicker div#datepicker-form #date-compare {
+  border: solid 1px #e67300; }
+/* line 32, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form #date-compare .form-date-heading {
-  background-color: #dd7d5b; }
-/* line 31, admin-theme/_admin-date-range-picker.sass */
+  background-color: #e67300; }
+/* line 34, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-heading {
   height: 30px;
   line-height: 30px;
-  padding: 0 8px; }
-/* line 35, admin-theme/_admin-date-range-picker.sass */
+  padding: 0 0 0 8px; }
+/* line 38, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-heading .title, #datepicker div#datepicker-form .form-date-heading .checkbox-title label {
   font-size: 1.15em;
   color: white;
   font-weight: 200;
   text-transform: uppercase;
   line-height: 2em; }
-/* line 41, admin-theme/_admin-date-range-picker.sass */
+/* line 44, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-heading .btn-default {
   background-color: rgba(255, 255, 255, 0.3);
   font-weight: 700;
   color: white;
   border: none; }
-/* line 46, admin-theme/_admin-date-range-picker.sass */
+/* line 49, admin-theme/_admin-date-range-picker.sass */
+#datepicker div#datepicker-form .form-date-heading select {
+  margin: 2px 2px 0 0; }
+/* line 51, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-body, #datepicker div#datepicker-form .form-date-actions {
   width: 100%;
   padding: 10px;
   background-color: white;
   display: inline-block; }
-/* line 51, admin-theme/_admin-date-range-picker.sass */
+/* line 56, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-actions {
-  border: solid 1px black; }
-/* line 53, admin-theme/_admin-date-range-picker.sass */
+  border: solid 1px #cccccc; }
+/* line 58, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-group {
+  clear: both;
   width: 100%;
-  margin: 0 auto 6px auto;
-  border: solid 1px black; }
-/* line 57, admin-theme/_admin-date-range-picker.sass */
+  margin: 0 auto 6px auto; }
+/* line 62, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-group label {
   font-size: 0.8em;
   font-weight: 700;
   text-transform: uppercase;
   color: #666666; }
-/* line 63, admin-theme/_admin-date-range-picker.sass */
+/* line 67, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-group input {
   margin: 4px 4px 0 0; }
-/* line 65, admin-theme/_admin-date-range-picker.sass */
+/* line 69, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-group input[type='text'] {
   width: 35%; }
-/* line 67, admin-theme/_admin-date-range-picker.sass */
+/* line 71, admin-theme/_admin-date-range-picker.sass */
 #datepicker div#datepicker-form .form-date-group button {
   margin: 5px 0 0 0; }
-/* line 70, admin-theme/_admin-date-range-picker.sass */
+/* line 74, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker {
   position: relative;
   margin: 0 0 8px 0;
   width: 100%;
-  background-color: #00a4e7;
   font-size: 13px;
-  border: solid 1px black; }
-/* line 77, admin-theme/_admin-date-range-picker.sass */
+  border: solid 1px #cccccc; }
+/* line 81, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker table {
   width: 100%;
   margin: 0;
   border-spacing: 1px; }
-/* line 82, admin-theme/_admin-date-range-picker.sass */
+/* line 86, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker thead tr th:after {
   content: "";
   border-top: 1px solid #0080b4;
   width: 100%;
   display: block; }
-/* line 87, admin-theme/_admin-date-range-picker.sass */
+/* line 91, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker thead tr th {
   background-color: #0092ce;
-  color: #68d3ff;
+  color: #004968;
   font-size: 0.7em;
   font-weight: 700;
   border-bottom: solid 1px #0cb8ff;
   text-transform: uppercase; }
-/* line 94, admin-theme/_admin-date-range-picker.sass */
+/* line 98, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker thead tr:first-child th {
   background-color: white;
   font-weight: 200;
   font-size: 1.4em;
-  color: #004968; }
-/* line 99, admin-theme/_admin-date-range-picker.sass */
+  color: #00a4e7; }
+/* line 103, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td, #datepicker .datepicker th {
   text-align: center;
   padding: 0;
-  color: white;
   position: relative; }
-/* line 104, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td {
-  height: 2.4em;
-  padding: 0 10px; }
 /* line 107, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td {
+  color: #00a4e7;
+  height: 2.4em;
+  padding: 0 8px; }
+/* line 111, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td.day:after {
   content: "";
   position: absolute;
@@ -9006,69 +9011,99 @@ textarea {
   width: 100%;
   z-index: 0;
   background-color: transparent; }
-/* line 116, admin-theme/_admin-date-range-picker.sass */
+/* line 120, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td.day:hover {
   cursor: pointer; }
-/* line 118, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.day.disabled {
-  color: #006e9b; }
-/* line 120, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.old, #datepicker .datepicker td.new {
-  color: #006e9b; }
 /* line 122, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.start-selected:not(.old):not(.new):not(.end-selected) {
-  font-weight: 700;
-  background-color: #004968;
-  border-bottom-left-radius: 15px;
-  border-top-left-radius: 15px; }
+#datepicker .datepicker td.day.disabled {
+  color: #cccccc; }
+/* line 124, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.old, #datepicker .datepicker td.new {
+  color: #cccccc; }
 /* line 127, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.end-selected:not(.old):not(.new):not(.start-selected) {
+#datepicker .datepicker td.start-selected:not(.old):not(.new):not(.end-selected) {
+  color: white;
   font-weight: 700;
-  background-color: #004968;
-  border-bottom-right-radius: 15px;
-  border-top-right-radius: 15px; }
-/* line 132, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.start-selected-compare:not(.old):not(.new):not(.end-selected-compare) {
-  font-weight: 700;
-  background-color: #ad4924;
+  background-color: #00a4e7;
   border-bottom-left-radius: 15px;
   border-top-left-radius: 15px; }
+/* line 133, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.start-selected:not(.old):not(.new):not(.end-selected).range-compare {
+  background-color: #4ca0b1; }
+/* line 135, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.start-selected:not(.old):not(.new):not(.end-selected).end-selected-compare, #datepicker .datepicker td.start-selected:not(.old):not(.new):not(.end-selected).start-selected-compare {
+  background-color: #4c99a1; }
 /* line 137, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.end-selected-compare:not(.old):not(.new):not(.start-selected-compare) {
+#datepicker .datepicker td.end-selected:not(.old):not(.new):not(.start-selected) {
+  color: white;
   font-weight: 700;
-  background-color: #ad4924;
+  background-color: #00a4e7;
   border-bottom-right-radius: 15px;
   border-top-right-radius: 15px; }
-/* line 142, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.end-selected.start-selected {
-  -webkit-border-radius: 15px;
-  -moz-border-radius: 15px;
-  -ms-border-radius: 15px;
-  -o-border-radius: 15px;
-  border-radius: 15px;
+/* line 143, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected:not(.old):not(.new):not(.start-selected).range-compare {
+  background-color: #4ca0b1; }
+/* line 145, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected:not(.old):not(.new):not(.start-selected).end-selected-compare, #datepicker .datepicker td.end-selected:not(.old):not(.new):not(.start-selected).start-selected-compare {
+  background-color: #4c99a1; }
+/* line 147, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.start-selected-compare:not(.old):not(.new):not(.end-selected-compare) {
+  color: white;
   font-weight: 700;
-  background-color: #004968; }
-/* line 146, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.end-selected-compare.start-selected-compare {
-  -webkit-border-radius: 15px;
-  -moz-border-radius: 15px;
-  -ms-border-radius: 15px;
-  -o-border-radius: 15px;
-  border-radius: 15px;
-  font-weight: 700;
-  background-color: #ad4924; }
-/* line 150, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker td.range {
-  color: #4eccff;
-  background-color: #006e9b; }
+  background-color: #ff8000;
+  border-bottom-left-radius: 15px;
+  border-top-left-radius: 15px; }
 /* line 153, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.start-selected-compare:not(.old):not(.new):not(.end-selected-compare).range {
+  background-color: #ba924c; }
+/* line 155, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected-compare:not(.old):not(.new):not(.start-selected-compare) {
+  color: white;
+  font-weight: 700;
+  background-color: #ff8000;
+  border-bottom-right-radius: 15px;
+  border-top-right-radius: 15px; }
+/* line 161, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected-compare:not(.old):not(.new):not(.start-selected-compare).range {
+  background-color: #ba924c; }
+/* line 163, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected.start-selected {
+  color: white;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  -ms-border-radius: 15px;
+  -o-border-radius: 15px;
+  border-radius: 15px;
+  font-weight: 700;
+  background-color: #00a4e7; }
+/* line 168, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.end-selected-compare.start-selected-compare {
+  color: white;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  -ms-border-radius: 15px;
+  -o-border-radius: 15px;
+  border-radius: 15px;
+  font-weight: 700;
+  background-color: #ff8000; }
+/* line 175, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.range {
+  color: #cef1ff;
+  background-color: #1bbdff; }
+/* line 178, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.range.range-compare {
+  background-color: #8dab99; }
+/* line 180, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td.range-compare {
-  color: #f3d1c4;
-  background-color: #d45c31; }
-/* line 156, admin-theme/_admin-date-range-picker.sass */
+  color: #fff2e5;
+  background-color: #ff9933; }
+/* line 183, admin-theme/_admin-date-range-picker.sass */
+#datepicker .datepicker td.range-compare.range {
+  background-color: #8dab99; }
+/* line 185, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td.today {
   background-color: white; }
-/* line 158, admin-theme/_admin-date-range-picker.sass */
+/* line 187, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td span {
   padding: 0;
   display: block;
@@ -9079,60 +9114,31 @@ textarea {
   float: left;
   text-transform: uppercase;
   cursor: pointer; }
-/* line 168, admin-theme/_admin-date-range-picker.sass */
+/* line 197, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td span:hover {
-  background-color: #004968; }
-/* line 170, admin-theme/_admin-date-range-picker.sass */
+  background-color: #00a4e7; }
+/* line 199, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td span.active {
-  background-color: #004968;
+  background-color: #00a4e7;
   color: white; }
-/* line 173, admin-theme/_admin-date-range-picker.sass */
+/* line 202, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker td span.old {
-  color: #006e9b; }
-/* line 176, admin-theme/_admin-date-range-picker.sass */
+  color: #cccccc; }
+/* line 205, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker th.switch {
   width: 145px; }
-/* line 178, admin-theme/_admin-date-range-picker.sass */
+/* line 207, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker th.next, #datepicker .datepicker th.prev {
   font-size: 1.3em; }
-/* line 180, admin-theme/_admin-date-range-picker.sass */
+/* line 209, admin-theme/_admin-date-range-picker.sass */
 #datepicker .datepicker thead tr:first-child th {
   cursor: pointer; }
-/* line 183, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare {
-  background-color: #e18e70; }
-/* line 186, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare thead tr th:after {
-  border-top: 1px solid #d86d46; }
-/* line 188, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare thead tr th {
-  background-color: #dd7d5b;
-  color: #f7e1d9;
-  border-bottom: solid 1px #e7a58e; }
-/* line 192, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare thead tr:first-child th {
-  color: #ad4924; }
-/* line 194, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare td {
-  border-bottom: solid 1px #e18e70; }
-/* line 196, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare td.day.disabled {
-  color: #d45c31; }
-/* line 198, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare td.old, #datepicker .datepicker.datepicker-compare td.new {
-  color: #d45c31; }
-/* line 201, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare td span:hover, #datepicker .datepicker.datepicker-compare td span.active {
-  background-color: #ad4924; }
-/* line 203, admin-theme/_admin-date-range-picker.sass */
-#datepicker .datepicker.datepicker-compare td span.old {
-  color: #d45c31; }
 
-/* line 206, admin-theme/_admin-date-range-picker.sass */
+/* line 212, admin-theme/_admin-date-range-picker.sass */
 .chevron-left, .chevron-right {
   position: relative; }
 
-/* line 208, admin-theme/_admin-date-range-picker.sass */
+/* line 214, admin-theme/_admin-date-range-picker.sass */
 .chevron-left:before, .chevron-right:before {
   display: block;
   content: "";
@@ -9141,23 +9147,23 @@ textarea {
   border-style: solid;
   position: absolute; }
 
-/* line 215, admin-theme/_admin-date-range-picker.sass */
+/* line 221, admin-theme/_admin-date-range-picker.sass */
 .chevron-left:before {
   right: 0;
   top: 0;
   border-width: 1.2em 0 1.2em 0.5em;
-  border-color: transparent transparent transparent #004968;
-  background-color: #006e9b; }
+  border-color: transparent transparent transparent #00a4e7;
+  background-color: #1bbdff; }
 
-/* line 221, admin-theme/_admin-date-range-picker.sass */
+/* line 227, admin-theme/_admin-date-range-picker.sass */
 .chevron-right:before {
   left: 0;
   top: 0;
   border-width: 1.2em 0 1.2em 0.5em;
-  border-color: transparent transparent transparent #006e9b;
-  background-color: #004968; }
+  border-color: transparent transparent transparent #1bbdff;
+  background-color: #00a4e7; }
 
-/* line 227, admin-theme/_admin-date-range-picker.sass */
+/* line 233, admin-theme/_admin-date-range-picker.sass */
 .input-complete {
   -webkit-animation: one 0.2s ease-in-out;
   -moz-animation: one 0.2s ease-in-out;
@@ -9166,21 +9172,21 @@ textarea {
   animation: one 0.2s ease-in-out; }
 
 @-webkit-keyframes one {
-  /* line 235, admin-theme/_admin-date-range-picker.sass */
+  /* line 241, admin-theme/_admin-date-range-picker.sass */
   0% {
     background-color: #00a4e7; }
 
-  /* line 237, admin-theme/_admin-date-range-picker.sass */
+  /* line 243, admin-theme/_admin-date-range-picker.sass */
   100% {
     background-color: white; } }
 
 @-webkit-keyframes two {
-  /* line 241, admin-theme/_admin-date-range-picker.sass */
+  /* line 247, admin-theme/_admin-date-range-picker.sass */
   0% {
     -webkit-box-shadow: #00a4e7 0 0 0 20px inset;
     box-shadow: #00a4e7 0 0 0 20px inset; }
 
-  /* line 243, admin-theme/_admin-date-range-picker.sass */
+  /* line 249, admin-theme/_admin-date-range-picker.sass */
   100% {
     -webkit-box-shadow: #00a4e7 0 0 0 inset;
     box-shadow: #00a4e7 0 0 0 inset; } }
diff --git a/admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass b/admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass
index 50cef4ec9..b6896e107 100644
--- a/admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass
+++ b/admin-dev/themes/default/css/admin-theme/_admin-date-range-picker.sass
@@ -1,37 +1,40 @@
 $color-bright: white
 
 $color-calendar: #00A4E7
-$color-calendar-compare: #E18E70
+$color-calendar-compare: #FF8000
 
 $color-calendar-day: $color-bright
 
-$color-calendar-outrange: darken($color-calendar,15%)
-$color-calendar-outrange-compare: darken($color-calendar-compare,15%)
+$color-calendar-outrange: #ccc
 
-$color-calendar-day-selected: darken($color-calendar,25%)
-$color-calendar-day-selected-compare: darken($color-calendar-compare,25%)
 
-$color-calendar-range: darken($color-calendar,15%)
-$color-calendar-range-compare: darken($color-calendar-compare,15%)
+$color-calendar-day-selected: $color-calendar
+$color-calendar-day-selected-compare: $color-calendar-compare
+
+$color-calendar-range: lighten($color-calendar,10%)
+$color-calendar-range-compare: lighten($color-calendar-compare,10%)
 
 #datepicker
-	padding: 6px
 	//background-color: darken($color-calendar,10%)
 	.input-selected
 		margin: 0
 	#date-start.input-selected, #date-end.input-selected,
 		border: solid 3px $color-calendar-day-selected
 	#date-start-compare.input-selected, #date-end-compare.input-selected,
-		border: solid 3px $color-calendar-day-selected
+		border: solid 3px $color-calendar-day-selected-compare
 	div#datepicker-form
-		#date-range .form-date-heading
-			background-color: darken($color-calendar,5%)
-		#date-compare .form-date-heading
-			background-color: darken($color-calendar-compare,5%)
+		#date-range
+			border: solid 1px darken($color-calendar,5%)
+			.form-date-heading
+				background-color: darken($color-calendar,5%)
+		#date-compare
+			border: solid 1px darken($color-calendar-compare,5%)
+			.form-date-heading
+				background-color: darken($color-calendar-compare,5%)
 		.form-date-heading
 			height: 30px
 			line-height: 30px
-			padding: 0 8px
+			padding: 0 0 0 8px
 			.title, .checkbox-title label
 				font-size: 1.15em
 				color: $color-bright
@@ -43,23 +46,24 @@ $color-calendar-range-compare: darken($color-calendar-compare,15%)
 				font-weight: 700
 				color: $color-bright
 				border: none
+			select
+				margin: 2px 2px 0 0
 		.form-date-body, .form-date-actions
 			width: 100%
 			padding: 10px
 			background-color: white
 			display: inline-block
 		.form-date-actions
-			border: solid 1px black
+			border: solid 1px #ccc
 		.form-date-group
+			clear: both
 			width: 100%
 			margin: 0 auto 6px auto
-			border: solid 1px black
 			label
 				font-size: 0.8em
 				font-weight: 700
 				text-transform: uppercase
 				color: #666
-				//line-height: 3.2em
 			input
 				margin: 4px 4px 0 0
 			input[type='text']
@@ -71,9 +75,9 @@ $color-calendar-range-compare: darken($color-calendar-compare,15%)
 		position: relative
 		margin: 0 0 8px 0
 		width: 100%
-		background-color: $color-calendar
+		//background-color: $color-calendar
 		font-size: 13px
-		border: solid 1px black
+		border: solid 1px #ccc
 		table
 			width: 100%
 			margin: 0
@@ -86,7 +90,7 @@ $color-calendar-range-compare: darken($color-calendar-compare,15%)
 				display: block
 			tr th
 				background-color: darken($color-calendar,5%)
-				color: lighten($color-calendar,25%)
+				color: darken($color-calendar,25%)
 				font-size: 0.7em
 				font-weight: 700
 				border-bottom: solid 1px lighten($color-calendar,7%)
@@ -99,11 +103,11 @@ $color-calendar-range-compare: darken($color-calendar-compare,15%)
 		td, th
 			text-align: center
 			padding: 0
-			color: $color-calendar-day
 			position: relative
 		td
+			color: $color-calendar-day-selected
 			height: 2.4em
-			padding: 0 10px
+			padding: 0 8px
 			&.day:after
 				content: ""
 				position: absolute
@@ -119,40 +123,65 @@ $color-calendar-range-compare: darken($color-calendar-compare,15%)
 				color: $color-calendar-outrange
 			&.old, &.new
 				color: $color-calendar-outrange
+
 			&.start-selected:not(.old):not(.new):not(.end-selected)
+				color: $color-bright
 				font-weight: 700
 				background-color: $color-calendar-day-selected
 				+border-left-radius(15px)
 				//@extend .chevron-left
+				&.range-compare
+					background-color: mix($color-calendar-day-selected,$color-calendar-range-compare,70%)
+				&.end-selected-compare, &.start-selected-compare
+					background-color: mix($color-calendar-day-selected,$color-calendar-day-selected-compare,70%)
 			&.end-selected:not(.old):not(.new):not(.start-selected)
+				color: $color-bright
 				font-weight: 700
 				background-color: $color-calendar-day-selected
 				//@extend .chevron-right
 				+border-right-radius(15px)
+				&.range-compare
+					background-color: mix($color-calendar-day-selected,$color-calendar-range-compare,70%)
+				&.end-selected-compare, &.start-selected-compare
+					background-color: mix($color-calendar-day-selected,$color-calendar-day-selected-compare,70%)
 			&.start-selected-compare:not(.old):not(.new):not(.end-selected-compare)
+				color: $color-bright
 				font-weight: 700
 				background-color: $color-calendar-day-selected-compare
 				+border-left-radius(15px)
 				//@extend .chevron-left
+				&.range
+					background-color: mix($color-calendar-day-selected-compare,$color-calendar-range,70%)
 			&.end-selected-compare:not(.old):not(.new):not(.start-selected-compare)
+				color: $color-bright
 				font-weight: 700
 				background-color: $color-calendar-day-selected-compare
 				//@extend .chevron-right
 				+border-right-radius(15px)
+				&.range
+					background-color: mix($color-calendar-day-selected-compare,$color-calendar-range,70%)
 			&.end-selected.start-selected
+				color: $color-bright
 				+border-radius(15px)
 				font-weight: 700
 				background-color: $color-calendar-day-selected
 			&.end-selected-compare.start-selected-compare
+				color: $color-bright
 				+border-radius(15px)
 				font-weight: 700
 				background-color: $color-calendar-day-selected-compare
+
+
 			&.range
 				color: lighten($color-calendar-range,35%)
 				background-color: $color-calendar-range
+				&.range-compare
+					background-color: mix($color-calendar-range,$color-calendar-range-compare,50%)
 			&.range-compare
 				color: lighten($color-calendar-range-compare,35%)
 				background-color: $color-calendar-range-compare
+				&.range
+					background-color: mix($color-calendar-range,$color-calendar-range-compare,50%)
 			&.today
 				background-color: $color-bright
 			span
@@ -180,29 +209,6 @@ $color-calendar-range-compare: darken($color-calendar-compare,15%)
 		thead tr:first-child th
 			cursor: pointer
 
-	.datepicker.datepicker-compare
-		background-color: $color-calendar-compare
-		thead
-			tr th:after
-				border-top: 1px solid darken($color-calendar-compare,10%)
-			tr th
-				background-color: darken($color-calendar-compare,5%)
-				color: lighten($color-calendar-compare,25%)
-				border-bottom: solid 1px lighten($color-calendar-compare,7%)
-			tr:first-child th
-				color: $color-calendar-day-selected-compare
-		td
-			border-bottom: solid 1px $color-calendar-compare
-			&.day.disabled
-				color: $color-calendar-outrange-compare
-			&.old, &.new
-				color: $color-calendar-outrange-compare
-			span
-				&:hover, &.active
-					background-color: $color-calendar-day-selected-compare
-				&.old
-					color: $color-calendar-outrange-compare
-
 .chevron-left, .chevron-right
 	position: relative
 .chevron-left:before, .chevron-right:before
diff --git a/admin-dev/themes/default/template/helpers/calendar/calendar.tpl b/admin-dev/themes/default/template/helpers/calendar/calendar.tpl
index 0f0b375c8..35ec4ee70 100644
--- a/admin-dev/themes/default/template/helpers/calendar/calendar.tpl
+++ b/admin-dev/themes/default/template/helpers/calendar/calendar.tpl
@@ -53,7 +53,7 @@
 								{l s='Compare to'}
 							</label>
 						</span>
-						<select id="compare-options" name="compare_date_option" disabled="disabled">
+						<select id="compare-options" class="form-control fixed-width-lg pull-right" name="compare_date_option" disabled="disabled">
 							<option value="1"{if $compare_option == 1}selected="selected"{/if} label="{l s='Previous period'}">{l s='Previous period'}</option>
 							<option value="2"{if $compare_option == 2}selected="selected"{/if} label="{l s='Previous Year'}">{l s='Previous Year'}</option>
 							<option value="3"{if $compare_option == 3}selected="selected"{/if} label="{l s='Custom'}">{l s='Custom'}</option>