Change theme colors to variables (#329)

* Fix a wrong color in style.default

This line in style.default was using a color from style.turquoise instead of the color used throughout the rest of style.default

* Change theme colors into variables

* Fix pink, red, turqoise, violet styles for color at line 3096

In fact, these styles DO use a unique color at line 3096. The variable `navbar-focus` is changed to match it.
This means that all styles now have a unique color for `navbar-focus`

* Fix missing curly bracket

8 files changed, 944 insertions, 848 deletions

diff --git a/static/css/style.blue.css b/static/css/style.blue.css
index 76c6994..5290682 100644
--- a/static/css/style.blue.css
+++ b/static/css/style.blue.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #467fbf;
+  --navbar-border-top: #294d76;
+  --button-border: #336194;
+  --link-focus: #2f5a89;
+  --form-shadow: rgba(70, 127, 191, 0.6);
+  --pagination-bg: #b8cee6;
+  --link-hover-bg: #36669c;
+  --navbar-focus: #92b3d9;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #467fbf;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #467fbf;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #467fbf;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #467fbf;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #467fbf;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #294d76;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #294d76;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #294d76;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #467fbf;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #467fbf;
-  color: #467fbf;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #467fbf;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #467fbf;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #467fbf;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #467fbf;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #336194;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #467fbf;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #467fbf;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #467fbf;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #467fbf;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #467fbf;
-  border-color: #467fbf;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #36669c;
-  border-color: #336194;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #467fbf;
-  border-color: #467fbf;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #467fbf;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #467fbf;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #467fbf;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #467fbf;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #467fbf;
-  border-color: #467fbf;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #467fbf;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #467fbf;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #467fbf;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #467fbf;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #467fbf;
-  border-color: #467fbf;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #467fbf;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #467fbf;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #467fbf;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #467fbf;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #467fbf;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #467fbf;
-  border-bottom: solid 1px #467fbf;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #467fbf;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #467fbf;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #467fbf;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #467fbf;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #467fbf;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #467fbf;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #467fbf;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #467fbf;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #467fbf;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #467fbf;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #467fbf;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #467fbf;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #467fbf;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #467fbf;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #92b3d9;
+  background-color: var(--navbar-focus);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #467fbf;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #467fbf;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #467fbf;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #2f5a89;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #467fbf;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 127, 191, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #467fbf;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #467fbf;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #467fbf;
-  background-color: #b8cee6;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #467fbf;
-  border-color: #467fbf;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #467fbf;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #36669c;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #36669c;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #467fbf;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #467fbf;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #467fbf;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #467fbf;
-  border-color: #467fbf;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #467fbf;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #467fbf;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #467fbf;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #467fbf;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #467fbf;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/static/css/style.default.css b/static/css/style.default.css
index 8c95019..fe124ac 100644
--- a/static/css/style.default.css
+++ b/static/css/style.default.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #38a7bb;
+  --navbar-border-top: #20616d;
+  --button-border: #2a7d8c;
+  --link-focus: #267280;
+  --form-shadow: rgba(56, 167, 187, 0.6);
+  --pagination-bg: #a7dbe5;
+  --link-hover-bg: #2c8494;
+  --navbar-focus: #80cbd9;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #38a7bb;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #38a7bb;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #38a7bb;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #4fbfa8;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #38a7bb;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #20616d;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #20616d;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #20616d;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #38a7bb;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #38a7bb;
-  color: #38a7bb;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #38a7bb;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #38a7bb;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #38a7bb;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #38a7bb;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #2a7d8c;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #38a7bb;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #38a7bb;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #38a7bb;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #38a7bb;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #38a7bb;
-  border-color: #38a7bb;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #2c8494;
-  border-color: #2a7d8c;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #38a7bb;
-  border-color: #38a7bb;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #38a7bb;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #38a7bb;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #38a7bb;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #38a7bb;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #38a7bb;
-  border-color: #38a7bb;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #38a7bb;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #38a7bb;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #38a7bb;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #38a7bb;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #38a7bb;
-  border-color: #38a7bb;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #38a7bb;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #38a7bb;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #38a7bb;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #38a7bb;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #38a7bb;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #38a7bb;
-  border-bottom: solid 1px #38a7bb;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #38a7bb;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #38a7bb;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #38a7bb;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #38a7bb;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #38a7bb;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #38a7bb;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #38a7bb;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #38a7bb;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #38a7bb;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #38a7bb;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #38a7bb;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #38a7bb;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #38a7bb;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #38a7bb;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #80cbd9;
+  background-color: var(--navbar-focus);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #38a7bb;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #38a7bb;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #38a7bb;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #267280;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #38a7bb;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(56, 167, 187, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(56, 167, 187, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #38a7bb;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #38a7bb;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #38a7bb;
-  background-color: #a7dbe5;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #38a7bb;
-  border-color: #38a7bb;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #38a7bb;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #2c8494;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #2c8494;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #38a7bb;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #38a7bb;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #38a7bb;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #38a7bb;
-  border-color: #38a7bb;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #38a7bb;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #38a7bb;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #38a7bb;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #38a7bb;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #38a7bb;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/static/css/style.green.css b/static/css/style.green.css
index efe7919..f36c0b8 100644
--- a/static/css/style.green.css
+++ b/static/css/style.green.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #6aae7a;
+  --navbar-border-top: #3f734b;
+  --button-border: #4d8e5c;
+  --link-focus: #488456;
+  --form-shadow: rgba(106, 174, 122, 0.6);
+  --pagination-bg: #cde4d2;
+  --link-hover-bg: #519461;
+  --navbar-focus: #acd2b5;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #6aae7a;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #6aae7a;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #6aae7a;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #6aae7a;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #6aae7a;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #3f734b;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #3f734b;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #3f734b;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #6aae7a;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #6aae7a;
-  color: #6aae7a;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #6aae7a;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #6aae7a;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #6aae7a;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #6aae7a;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #4d8e5c;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #6aae7a;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #6aae7a;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #6aae7a;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #6aae7a;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #6aae7a;
-  border-color: #6aae7a;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #519461;
-  border-color: #4d8e5c;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #6aae7a;
-  border-color: #6aae7a;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #6aae7a;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #6aae7a;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #6aae7a;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #6aae7a;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #6aae7a;
-  border-color: #6aae7a;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #6aae7a;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #6aae7a;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #6aae7a;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #6aae7a;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #6aae7a;
-  border-color: #6aae7a;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #6aae7a;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #6aae7a;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #6aae7a;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #6aae7a;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #6aae7a;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #6aae7a;
-  border-bottom: solid 1px #6aae7a;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #6aae7a;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #6aae7a;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #6aae7a;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #6aae7a;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #6aae7a;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #6aae7a;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #6aae7a;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #6aae7a;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #6aae7a;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #6aae7a;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #6aae7a;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #6aae7a;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #6aae7a;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #6aae7a;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #acd2b5;
+  background-color: var(--navbar-focus);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #6aae7a;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #6aae7a;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #6aae7a;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #488456;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #6aae7a;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(106, 174, 122, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(106, 174, 122, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #6aae7a;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #6aae7a;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #6aae7a;
-  background-color: #cde4d2;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #6aae7a;
-  border-color: #6aae7a;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #6aae7a;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #519461;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #519461;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #6aae7a;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #6aae7a;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #6aae7a;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #6aae7a;
-  border-color: #6aae7a;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #6aae7a;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #6aae7a;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #6aae7a;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #6aae7a;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #6aae7a;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/static/css/style.marsala.css b/static/css/style.marsala.css
index 8b595bd..3c0230d 100644
--- a/static/css/style.marsala.css
+++ b/static/css/style.marsala.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #955251;
+  --navbar-border-top: #532e2d;
+  --button-border: #6d3c3b;
+  --link-focus: #633736;
+  --form-shadow: rgba(149, 82, 81, 0.6);
+  --pagination-bg: #d2adad;
+  --link-hover-bg: #74403f;
+  --navbar-focus: #c08c8c;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #955251;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #955251;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #955251;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #955251;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #955251;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #955251;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #955251;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #532e2d;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #532e2d;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #532e2d;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #955251;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #955251;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #955251;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #955251;
-  color: #955251;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #955251;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #955251;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #955251;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #955251;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #955251;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #6d3c3b;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #955251;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #955251;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #955251;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #955251;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #955251;
-  border-color: #955251;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #74403f;
-  border-color: #6d3c3b;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #955251;
-  border-color: #955251;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #955251;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #955251;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #955251;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #955251;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #955251;
-  border-color: #955251;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #955251;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #955251;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #955251;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #955251;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #955251;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #955251;
-  border-color: #955251;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #955251;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #955251;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #955251;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #955251;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #955251;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #955251;
-  border-bottom: solid 1px #955251;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #955251;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #955251;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #955251;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #955251;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #955251;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #955251;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #955251;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #955251;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #955251;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #955251;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #955251;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #955251;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #955251;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #955251;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #955251;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #955251;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #955251;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #955251;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #955251;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #955251;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #c08c8c;
+  background-color: var(--navbar-focus);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #955251;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #955251;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #955251;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #955251;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #633736;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #955251;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(149, 82, 81, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(149, 82, 81, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #955251;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #955251;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #955251;
-  background-color: #d2adad;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #955251;
-  border-color: #955251;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #955251;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #74403f;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #74403f;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #955251;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #955251;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #955251;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #955251;
-  border-color: #955251;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #955251;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #955251;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #955251;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #955251;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #955251;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/static/css/style.pink.css b/static/css/style.pink.css
index afce258..475f852 100644
--- a/static/css/style.pink.css
+++ b/static/css/style.pink.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #c27baa;
+  --navbar-border-top: #934478;
+  --button-border: #af518f;
+  --link-focus: #a44c87;
+  --form-shadow: rgba(194, 123, 170, 0.6);
+  --pagination-bg: #f2e4ed;
+  --link-hover-bg: #b25894;
+  --navbar-focus: #e2c1d7;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #c27baa;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #c27baa;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #c27baa;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #c27baa;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #c27baa;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #934478;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #934478;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #934478;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #c27baa;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #c27baa;
-  color: #c27baa;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #c27baa;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #c27baa;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #c27baa;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #c27baa;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #af518f;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #c27baa;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #c27baa;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #c27baa;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #c27baa;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #c27baa;
-  border-color: #c27baa;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #b25894;
-  border-color: #af518f;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #c27baa;
-  border-color: #c27baa;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #c27baa;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #c27baa;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #c27baa;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #c27baa;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #c27baa;
-  border-color: #c27baa;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #c27baa;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #c27baa;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #c27baa;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #c27baa;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #c27baa;
-  border-color: #c27baa;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #c27baa;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #c27baa;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #c27baa;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #c27baa;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #c27baa;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #c27baa;
-  border-bottom: solid 1px #c27baa;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #c27baa;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #c27baa;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #c27baa;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #c27baa;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #c27baa;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #c27baa;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #c27baa;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #c27baa;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #c27baa;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #c27baa;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #c27baa;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #c27baa;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #c27baa;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #c27baa;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #e2c1d7;
+  background-color: var(--navbar-focus)
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #c27baa;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #c27baa;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #c27baa;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #a44c87;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #c27baa;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194, 123, 170, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194, 123, 170, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #c27baa;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #c27baa;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #c27baa;
-  background-color: #f2e4ed;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #c27baa;
-  border-color: #c27baa;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #c27baa;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #b25894;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #b25894;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #c27baa;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #c27baa;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #c27baa;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #c27baa;
-  border-color: #c27baa;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #c27baa;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #c27baa;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #c27baa;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #c27baa;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #c27baa;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/static/css/style.red.css b/static/css/style.red.css
index 684a000..4b97850 100644
--- a/static/css/style.red.css
+++ b/static/css/style.red.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #da4d4d;
+  --navbar-border-top: #a02121;
+  --button-border: #c22828;
+  --link-focus: #b52626;
+  --form-shadow: rgba(218, 77, 77, 0.6);
+  --pagination-bg: #f4cccc;
+  --link-hover-bg: #ca2a2a;
+  --navbar-focus: #eca1a1;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #da4d4d;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #da4d4d;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #da4d4d;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #da4d4d;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #da4d4d;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #a02121;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #a02121;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #a02121;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #da4d4d;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #da4d4d;
-  color: #da4d4d;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #da4d4d;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #da4d4d;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #da4d4d;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #da4d4d;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #c22828;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #da4d4d;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #da4d4d;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #da4d4d;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #da4d4d;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #da4d4d;
-  border-color: #da4d4d;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #ca2a2a;
-  border-color: #c22828;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #da4d4d;
-  border-color: #da4d4d;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #da4d4d;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #da4d4d;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #da4d4d;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #da4d4d;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #da4d4d;
-  border-color: #da4d4d;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #da4d4d;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #da4d4d;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #da4d4d;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #da4d4d;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #da4d4d;
-  border-color: #da4d4d;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #da4d4d;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #da4d4d;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #da4d4d;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #da4d4d;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #da4d4d;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #da4d4d;
-  border-bottom: solid 1px #da4d4d;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #da4d4d;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #da4d4d;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #da4d4d;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #da4d4d;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #da4d4d;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #da4d4d;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #da4d4d;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #da4d4d;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #da4d4d;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #da4d4d;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #da4d4d;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #da4d4d;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #da4d4d;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #da4d4d;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #eca1a1;
+  background-color: var(--navbar-focus);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #da4d4d;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #da4d4d;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #da4d4d;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #b52626;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #da4d4d;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(218, 77, 77, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(218, 77, 77, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #da4d4d;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #da4d4d;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #da4d4d;
-  background-color: #f4cccc;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #da4d4d;
-  border-color: #da4d4d;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #da4d4d;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #ca2a2a;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #ca2a2a;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #da4d4d;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #da4d4d;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #da4d4d;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #da4d4d;
-  border-color: #da4d4d;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #da4d4d;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #da4d4d;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #da4d4d;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #da4d4d;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #da4d4d;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/static/css/style.turquoise.css b/static/css/style.turquoise.css
index cc7d5f9..6525ec2 100644
--- a/static/css/style.turquoise.css
+++ b/static/css/style.turquoise.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #4fbfa8;
+  --navbar-border-top: #2d7b6b;
+  --button-border: #389985;
+  --link-focus: #348e7b;
+  --form-shadow: rgba(79, 191, 168, 0.6);
+  --pagination-bg: #bfe8df;
+  --link-hover-bg: #3aa18c;
+  --navbar-focus: #9adacd;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #4fbfa8;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #4fbfa8;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #4fbfa8;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #4fbfa8;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #4fbfa8;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #2d7b6b;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #2d7b6b;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #2d7b6b;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #4fbfa8;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #4fbfa8;
-  color: #4fbfa8;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #4fbfa8;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #4fbfa8;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #389985;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #4fbfa8;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #4fbfa8;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #4fbfa8;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #4fbfa8;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #4fbfa8;
-  border-color: #4fbfa8;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #3aa18c;
-  border-color: #389985;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #4fbfa8;
-  border-color: #4fbfa8;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #4fbfa8;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #4fbfa8;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #4fbfa8;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #4fbfa8;
-  border-color: #4fbfa8;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #4fbfa8;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #4fbfa8;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #4fbfa8;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #4fbfa8;
-  border-color: #4fbfa8;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #4fbfa8;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #4fbfa8;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #4fbfa8;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #4fbfa8;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #4fbfa8;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #4fbfa8;
-  border-bottom: solid 1px #4fbfa8;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #4fbfa8;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #4fbfa8;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #4fbfa8;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #4fbfa8;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #4fbfa8;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #4fbfa8;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #4fbfa8;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #4fbfa8;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #4fbfa8;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #4fbfa8;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #4fbfa8;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #4fbfa8;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #4fbfa8;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #4fbfa8;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #9adacd;
+  background-color: var(--navbar-focus);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #4fbfa8;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #4fbfa8;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #348e7b;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #4fbfa8;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(79, 191, 168, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(79, 191, 168, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #4fbfa8;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #4fbfa8;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #4fbfa8;
-  background-color: #bfe8df;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #4fbfa8;
-  border-color: #4fbfa8;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #4fbfa8;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #3aa18c;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #3aa18c;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #4fbfa8;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #4fbfa8;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #4fbfa8;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #4fbfa8;
-  border-color: #4fbfa8;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #4fbfa8;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #4fbfa8;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #4fbfa8;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #4fbfa8;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
diff --git a/static/css/style.violet.css b/static/css/style.violet.css
index 77c7333..2db14d2 100644
--- a/static/css/style.violet.css
+++ b/static/css/style.violet.css
@@ -1,3 +1,15 @@
+/* Themed colors */
+:root {
+  --primary-accent: #986dbd;
+  --navbar-border-top: #653d87;
+  --button-border: #7a4aa3;
+  --link-focus: #724599;
+  --form-shadow: rgba(152, 109, 189, 0.6);
+  --pagination-bg: #e2d6ed;
+  --link-hover-bg: #7f4daa;
+  --navbar-focus: #cab3dd;
+}
+
 .clearfix:before,
 .clearfix:after,
 .navbar:before,
@@ -59,10 +71,10 @@ button {
   cursor: pointer !important;
 }
 .required {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 .accent {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 .text-uppercase {
   text-transform: uppercase;
@@ -95,7 +107,7 @@ div.section {
 .heading h4,
 .heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #986dbd;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -109,7 +121,7 @@ div.section {
 .heading h4 i[class^="fa"],
 .heading h5 i[class^="fa"] {
   display: inline-block;
-  background: #986dbd;
+  background: var(--primary-accent);
   width: 30px;
   height: 30px;
   vertical-align: middle;
@@ -144,7 +156,7 @@ div.section {
 .ul-icons li i {
   width: 20px;
   height: 20px;
-  background: #986dbd;
+  background: var(--primary-accent);
   color: #fff;
   text-align: center;
   border-radius: 10px;
@@ -255,7 +267,7 @@ ul.list-style-none {
 }
 #top .social a:hover {
   color: #fff;
-  background: #986dbd;
+  background: var(--primary-accent);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
@@ -310,12 +322,12 @@ ul.list-style-none {
   border-top: solid 5px transparent;
 }
 .navbar ul.nav > li > a:hover {
-  border-top: solid 5px #986dbd;
+  border-top: solid 5px var(--primary-accent);
 }
 .navbar ul.nav > li.active > a,
 .navbar ul.nav > li.open > a {
   text-decoration: none !important;
-  border-top: solid 5px #653d87;
+  border-top: solid 5px var(--navbar-border-top);
 }
 @media (max-width: 768px) {
   .navbar ul.nav > li.active > a,
@@ -327,18 +339,18 @@ ul.list-style-none {
   }
 }
 .navbar.navbar-light ul.nav > li.active > a {
-  border-top: solid 5px #653d87;
+  border-top: solid 5px var(--navbar-border-top);
   background: #fff !important;
   color: #555555 !important;
 }
 .navbar.navbar-light ul.nav > li.active > a:hover {
-  border-top: solid 5px #653d87;
+  border-top: solid 5px var(--navbar-border-top);
 }
 .navbar.navbar-light ul.nav > li > a:hover,
 .navbar.navbar-light ul.nav > li.open > a:hover,
 .navbar.navbar-light ul.nav > li > a:focus,
 .navbar.navbar-light ul.nav > li.open > a:focus {
-  border-top: solid 5px #986dbd;
+  border-top: solid 5px var(--primary-accent);
   background: #fff !important;
   color: #555555 !important;
 }
@@ -364,7 +376,7 @@ ul.list-style-none {
   left: 0;
 }
 .navbar ul.dropdown-menu li a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
   text-decoration: none;
   background: none;
   left: 2px;
@@ -416,7 +428,7 @@ ul.list-style-none {
   transition: all 0.2s ease-out;
 }
 .navbar .yamm-content ul li a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
   text-decoration: none;
   padding-left: 2px;
 }
@@ -449,12 +461,12 @@ ul.list-style-none {
 .navbar .btn-default:focus,
 .navbar .btn-default.navbar-toggle:focus {
   background-color: #fff;
-  border-color: #986dbd;
-  color: #986dbd;
+  border-color: var(--primary-accent);
+  color: var(--primary-accent);
 }
 .navbar #search {
   clear: both;
-  border-top: solid 1px #986dbd;
+  border-top: solid 1px var(--primary-accent);
   text-align: right;
 }
 .navbar #search form {
@@ -501,7 +513,7 @@ ul.list-style-none {
   margin-bottom: 20px;
 }
 #login-modal a {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 #login-modal p {
   font-weight: 300;
@@ -541,18 +553,18 @@ ul.list-style-none {
   border-radius: 0;
 }
 .btn-template-main {
-  color: #986dbd;
+  color: var(--primary-accent);
   background-color: #ffffff;
-  border-color: #986dbd;
+  border-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active,
 .open > .dropdown-toggle.btn-template-main {
-  color: #986dbd;
+  color: var(--primary-accent);
   background-color: #e6e6e6;
-  border-color: #7a4aa3;
+  border-color: var(--button-border);
 }
 .btn-template-main:active,
 .btn-template-main.active,
@@ -575,19 +587,19 @@ fieldset[disabled] .btn-template-main:active,
 .btn-template-main[disabled].active,
 fieldset[disabled] .btn-template-main.active {
   background-color: #ffffff;
-  border-color: #986dbd;
+  border-color: var(--primary-accent);
 }
 .btn-template-main .badge {
   color: #ffffff;
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 .btn-template-main:hover,
 .btn-template-main:focus,
 .btn-template-main:active,
 .btn-template-main.active {
-  background: #986dbd;
+  background: var(--primary-accent);
   color: #ffffff;
-  border-color: #986dbd;
+  border-color: var(--primary-accent);
 }
 .btn-template-transparent-primary {
   color: #ffffff;
@@ -635,7 +647,7 @@ fieldset[disabled] .btn-template-transparent-primary.active {
 .btn-template-transparent-primary:active,
 .btn-template-transparent-primary.active {
   background: #fff;
-  color: #986dbd;
+  color: var(--primary-accent);
   border-color: #fff;
 }
 .btn-template-transparent-black {
@@ -689,8 +701,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 }
 .btn-template-primary {
   color: #ffffff;
-  background-color: #986dbd;
-  border-color: #986dbd;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary:hover,
 .btn-template-primary:focus,
@@ -698,8 +710,8 @@ fieldset[disabled] .btn-template-transparent-black.active {
 .btn-template-primary.active,
 .open > .dropdown-toggle.btn-template-primary {
   color: #ffffff;
-  background-color: #7f4daa;
-  border-color: #7a4aa3;
+  background-color: var(--link-hover-bg);
+  border-color: var(--button-border);
 }
 .btn-template-primary:active,
 .btn-template-primary.active,
@@ -721,11 +733,11 @@ fieldset[disabled] .btn-template-primary:active,
 .btn-template-primary.disabled.active,
 .btn-template-primary[disabled].active,
 fieldset[disabled] .btn-template-primary.active {
-  background-color: #986dbd;
-  border-color: #986dbd;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .btn-template-primary .badge {
-  color: #986dbd;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 #intro {
@@ -801,7 +813,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #986dbd;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -884,7 +896,7 @@ fieldset[disabled] .btn-template-primary.active {
 .panel.sidebar-menu .panel-heading h4,
 .panel.sidebar-menu .panel-heading h5 {
   display: inline-block;
-  border-bottom: solid 5px #986dbd;
+  border-bottom: solid 5px var(--primary-accent);
   line-height: 1.1;
   margin-bottom: 0;
   padding-bottom: 10px;
@@ -971,7 +983,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 5px;
   border: solid 1px #eeeeee;
   border-radius: 0;
-  color: #986dbd;
+  color: var(--primary-accent);
   margin: 5px 5px 5px 0;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -980,12 +992,12 @@ fieldset[disabled] .btn-template-primary.active {
   text-decoration: none;
 }
 .panel.sidebar-menu ul.tag-cloud li a:hover {
-  color: #986dbd;
-  border-color: #986dbd;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a {
   color: #FFFFFF;
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 .panel.sidebar-menu ul.tag-cloud li.active a:hover {
   color: #FFFFFF;
@@ -1076,7 +1088,7 @@ fieldset[disabled] .btn-template-primary.active {
   padding: 6px 20px 6px 20px;
   margin: 30px 10px 10px -71px;
   color: #fff;
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
   font-family: "Roboto", Helvetica, Arial, sans-serif;
 }
 .ribbon .theribbon:before,
@@ -1120,7 +1132,7 @@ fieldset[disabled] .btn-template-primary.active {
 .owl-theme .owl-controls .owl-page.active span,
 .owl-carousel .owl-controls.clickable .owl-page:hover span,
 .owl-theme .owl-controls.clickable .owl-page:hover span {
-  background: #986dbd;
+  background: var(--primary-accent);
 }
 .owl-carousel .owl-controls .owl-buttons,
 .owl-theme .owl-controls .owl-buttons {
@@ -1135,7 +1147,7 @@ fieldset[disabled] .btn-template-primary.active {
   line-height: 25px;
   margin: 0 5px 0 0;
   font-size: 18px;
-  color: #986dbd;
+  color: var(--primary-accent);
   padding: 0;
   background: #fff;
   border-radius: 13px;
@@ -1158,7 +1170,7 @@ fieldset[disabled] .btn-template-primary.active {
   left: 0;
   width: 100%;
   height: 100%;
-  background: #986dbd;
+  background: var(--primary-accent);
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
@@ -1301,7 +1313,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 50px;
 }
 .testimonials .item .testimonial .bottom .icon {
-  color: #986dbd;
+  color: var(--primary-accent);
   font-size: 30px;
   float: left;
   width: 20%;
@@ -1437,8 +1449,8 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 40px;
 }
 .box-simple .icon {
-  color: #986dbd;
-  border-color: #986dbd;
+  color: var(--primary-accent);
+  border-color: var(--primary-accent);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
@@ -1513,7 +1525,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #986dbd;
+  background: var(--primary-accent);
 }
 .box-image .name {
   position: absolute;
@@ -1591,7 +1603,7 @@ fieldset[disabled] .btn-template-primary.active {
   height: 100%;
   opacity: 0;
   filter: alpha(opacity=0);
-  background: #986dbd;
+  background: var(--primary-accent);
 }
 .box-image-text .top .name {
   position: absolute;
@@ -1754,7 +1766,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .bar {
   position: relative;
-  background: #986dbd;
+  background: var(--primary-accent);
   padding: 60px 0;
 }
 .bar.background-pentagon {
@@ -1888,14 +1900,14 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 20px;
   padding-bottom: 15px;
   text-align: center;
-  border: solid 1px #986dbd;
+  border: solid 1px var(--primary-accent);
   overflow: hidden;
 }
 .packages .package .package-header {
   height: 57px;
   color: #fff;
   line-height: 57px;
-  background: #986dbd;
+  background: var(--primary-accent);
 }
 .packages .package .package-header h5 {
   color: #fff;
@@ -1968,8 +1980,8 @@ fieldset[disabled] .btn-template-primary.active {
   height: 300px;
 }
 #map.with-border {
-  border-top: solid 1px #986dbd;
-  border-bottom: solid 1px #986dbd;
+  border-top: solid 1px var(--primary-accent);
+  border-bottom: solid 1px var(--primary-accent);
 }
 #blog-listing-big .post,
 #blog-homepage .post {
@@ -1992,7 +2004,7 @@ fieldset[disabled] .btn-template-primary.active {
 #blog-homepage .post h2 a:hover,
 #blog-listing-big .post h4 a:hover,
 #blog-homepage .post h4 a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 #blog-listing-big .post .author-category,
 #blog-homepage .post .author-category {
@@ -2012,7 +2024,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #blog-listing-big .post .date-comments a:hover,
 #blog-homepage .post .date-comments a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-big .post .date-comments,
@@ -2062,7 +2074,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #555555;
 }
 #blog-listing-medium .post h2 a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 #blog-listing-medium .post .author-category {
   float: left;
@@ -2084,7 +2096,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-right: 20px;
 }
 #blog-listing-medium .post .date-comments a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 @media (min-width: 768px) {
   #blog-listing-medium .post .date-comments {
@@ -2351,7 +2363,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #productMain .sizes a.active,
 #productMain .sizes a:hover {
-  background: #986dbd;
+  background: var(--primary-accent);
   color: #fff;
 }
 #productMain .sizes input {
@@ -2368,7 +2380,7 @@ fieldset[disabled] .btn-template-primary.active {
   border: solid 1px transparent;
 }
 #thumbs a.active {
-  border-color: #986dbd;
+  border-color: var(--primary-accent);
 }
 #product-social {
   text-align: center;
@@ -2421,7 +2433,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 #checkout .nav {
   margin-bottom: 20px;
-  border-bottom: solid 1px #986dbd;
+  border-bottom: solid 1px var(--primary-accent);
 }
 #checkout .nav li {
   height: 100%;
@@ -2488,7 +2500,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin-bottom: 30px;
 }
 #get-it {
-  background: #986dbd;
+  background: var(--primary-accent);
   padding: 50px 0 30px;
   color: #fff;
   text-align: center;
@@ -2534,7 +2546,7 @@ fieldset[disabled] .btn-template-primary.active {
   color: #999999;
 }
 #footer ul a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 #footer .photostream div {
@@ -2601,7 +2613,7 @@ fieldset[disabled] .btn-template-primary.active {
   margin: 0 10px 0 0;
 }
 #footer .social a:hover {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 #copyright {
   background: #333;
@@ -2677,10 +2689,10 @@ fieldset[disabled] .btn-template-primary.active {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #986dbd;
+  border-color: var(--primary-accent);
 }
 .nav-tabs {
-  border-bottom: 1px solid #986dbd;
+  border-bottom: 1px solid var(--primary-accent);
 }
 .nav-tabs > li {
   float: left;
@@ -2693,20 +2705,20 @@ fieldset[disabled] .btn-template-primary.active {
   border-radius: 0 0 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #986dbd;
+  border-color: #eeeeee #eeeeee var(--primary-accent);
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
-  border: 1px solid #986dbd;
+  border: 1px solid var(--primary-accent);
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
-  border-bottom: solid 1px #986dbd;
+  border-bottom: solid 1px var(--primary-accent);
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
@@ -2727,11 +2739,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #986dbd;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #986dbd;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
@@ -2753,7 +2765,7 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 .nav-stacked > li {
   float: none;
@@ -2764,7 +2776,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .nav-justified {
   width: 100%;
-  border-bottom: solid 1px #986dbd;
+  border-bottom: solid 1px var(--primary-accent);
 }
 .nav-justified > li {
   float: none;
@@ -2787,11 +2799,11 @@ fieldset[disabled] .btn-template-primary.active {
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
-  border: 1px solid #986dbd;
+  border: 1px solid var(--primary-accent);
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #986dbd;
+    border-bottom: 1px solid var(--primary-accent);
     border-radius: 0 0 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3081,13 +3093,13 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #555555;
-  background-color: #cab3dd;
+  background-color: var(--navbar-focus);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #ffffff;
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3100,7 +3112,7 @@ fieldset[disabled] .btn-template-primary.active {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
@@ -3112,7 +3124,7 @@ fieldset[disabled] .btn-template-primary.active {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
   color: #ffffff;
 }
 @media (max-width: 767px) {
@@ -3121,13 +3133,13 @@ fieldset[disabled] .btn-template-primary.active {
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #986dbd;
+    color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
-    background-color: #986dbd;
+    background-color: var(--primary-accent);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -3163,12 +3175,12 @@ body {
   color: #555555;
 }
 a {
-  color: #986dbd;
+  color: var(--primary-accent);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #724599;
+  color: var(--link-focus);
   text-decoration: underline;
 }
 a:focus {
@@ -3250,10 +3262,10 @@ label {
   border-radius: 0;
 }
 .form-control:focus {
-  border-color: #986dbd;
+  border-color: var(--primary-accent);
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(152, 109, 189, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(152, 109, 189, 0.6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--form-shadow);
 }
 .form-group {
   margin-bottom: 20px;
@@ -3273,14 +3285,14 @@ label {
 .pager li > a,
 .pager li > span {
   background-color: #ffffff;
-  border: 1px solid #986dbd;
+  border: 1px solid var(--primary-accent);
   border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   color: #fff;
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
@@ -3301,7 +3313,7 @@ label {
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
-  color: #986dbd;
+  color: var(--primary-accent);
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
@@ -3309,8 +3321,8 @@ label {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  color: #986dbd;
-  background-color: #e2d6ed;
+  color: var(--primary-accent);
+  background-color: var(--pagination-bg);
   border-color: #dddddd;
 }
 .pagination > .active > a,
@@ -3321,8 +3333,8 @@ label {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #986dbd;
-  border-color: #986dbd;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
@@ -3404,17 +3416,17 @@ p {
   font-style: italic;
 }
 .text-primary {
-  color: #986dbd;
+  color: var(--primary-accent);
 }
 a.text-primary:hover {
-  color: #7f4daa;
+  color: var(--link-hover-bg);
 }
 .bg-primary {
   color: #fff;
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 a.bg-primary:hover {
-  background-color: #7f4daa;
+  background-color: var(--link-hover-bg);
 }
 abbr[title],
 abbr[data-original-title] {
@@ -3424,7 +3436,7 @@ blockquote {
   padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 14px;
-  border-left: 5px solid #986dbd;
+  border-left: 5px solid var(--primary-accent);
 }
 blockquote footer,
 blockquote small,
@@ -3441,7 +3453,7 @@ blockquote .small:before {
 }
 .blockquote-reverse,
 blockquote.pull-right {
-  border-right: 5px solid #986dbd;
+  border-right: 5px solid var(--primary-accent);
 }
 address {
   margin-bottom: 20px;
@@ -3486,22 +3498,22 @@ address {
   border-color: #ccc;
 }
 .panel-primary {
-  border-color: #986dbd;
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #986dbd;
-  border-color: #986dbd;
+  background-color: var(--primary-accent);
+  border-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #986dbd;
+  border-top-color: var(--primary-accent);
 }
 .panel-primary > .panel-heading .badge {
-  color: #986dbd;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #986dbd;
+  border-bottom-color: var(--primary-accent);
 }
 .panel-primary .panel-title {
   font-weight: 300;
@@ -3518,14 +3530,14 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #986dbd;
+  color: var(--primary-accent);
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .progress-bar-primary {
-  background-color: #986dbd;
+  background-color: var(--primary-accent);
 }
 .progress-striped .progress-bar-primary {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);