Cleaned up checkout stylesheet

assets/checkout.css.liquid

@@ -4,8 +4,12 @@
 ==============================================================================*/
 
 /*================ #General ================*/
-body, #main, #container, #header, #footer {
-  background: #fff;
+body,
+#main,
+#container.slim #main,
+#container,
+#header {
+  background: {{ settings.color_body_bg }};
 }
 
 body {
@@ -28,8 +32,8 @@ select {
    font-size: 87.5%;
    line-height: 1.6;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-   color: #333;
-   font-weight: 300;
+   color: {{ settings.color_body_text }};
+   font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
 }
@@ -50,6 +54,12 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
 
+.group h3,
+.pgroup h3 {
+  text-shadow: none;
+  color: #999;
+}
+
 a {
   color: #515151;
 }
@@ -59,7 +69,9 @@ a:hover {
 }
 
 /*================ #Layout ================*/
-#container {
+#container,
+#container.slim {
+  width: 100%;
   max-width: 100%;
   margin: 0 auto;
   font-size: 100%;
@@ -72,13 +84,18 @@ a:hover {
   width: auto;
 }
 
-#main {
+#main,
+#container.slim #main {
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
   padding: 0;
 }
 
+#container.slim #main {
+  max-width: 500px;
+}
+
 #content,
 #overview {
   float: left;
@@ -89,15 +106,22 @@ a:hover {
   padding-left: 20px;
 }
 
+.slim #content {
+  float: none;
+  width: 100%;
+  padding: 0;
+}
+
 #overview {
- width: 25%;
+  width: 25%;
 }
 
 /*================ Box colors ================*/
 #email,
 #addresses,
-#buttons {
-  background: #f6f6f6;
+#buttons,
+.group {
+  background: none;
 }
 
 /*================ #Responsive Layouts ================*/
@@ -152,24 +176,34 @@ a:hover {
   padding: 0;
 }
 
-#header {
+#header,
+#container.slim #header {
   width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
   margin-bottom: 20px;
+  background: none;
 }
 
-#tagline .subtitle {
-  display: none;
+h1#tagline {
+  text-align: center;
+  font-size: 1.733em;
+  line-height: 1.4;
+  margin: 0;
+  padding: 20px 0;
+  color: {{ settings.color_body_text }};
+}
+
+#tagline span.subtitle {
+  display: block;
 }
 
 {% if settings.logo_use_image %}
 #logo {
   width: 100%;
-  height: 150px;
+  min-height: 150px;
   background-image: url({{ 'logo.png' | asset_url }});
   background-repeat: no-repeat;
-  background-position: 20px 50%;
+  background-position: 50% 50%;
+  background-size: {{ settings.logo_max_width }}px auto;
 }
 
 #tagline { display: none; }
@@ -183,6 +217,17 @@ a:hover {
   overflow: hidden;
   height: 1%;
   padding: 140px 10px 10px;
+  background: #f6f6f6;
+}
+
+.slim #overview {
+  width: 100%;
+  float: none;
+  padding: 20px;
+}
+
+#overview #wallet {
+  background: none!important;
 }
 
 /* "You're purchasing this.." text */
@@ -220,7 +265,7 @@ a:hover {
   font-size: 26px;
   line-height: 1.9;
   text-shadow: none;
-  border-bottom: dotted 1px #ccc;
+  border-bottom: dotted 1px #e5e5e5;
 }
 
 #overview .hint {
@@ -234,7 +279,7 @@ a:hover {
   padding: 0 0 8px 0;
   display: block;
   font-size: 22px;
-  border-bottom: dotted 1px #ccc;
+  border-bottom: dotted 1px #e5e5e5;
 }
 
 #overview br { display: none; }
@@ -250,7 +295,7 @@ a:hover {
   text-align: center;
   vertical-align: top;
   padding: 4px;
-  border: dotted 1px #ccc
+  border: dotted 1px #e5e5e5;
 }
 
 #thumbs div {
@@ -267,20 +312,20 @@ a:hover {
   padding: 1px;
 }
 
-
 /* Product title color */
 #thumbs h3 {
-
+  text-align: left;
+  font-size: 13px;
+  color: {{ settings.color_body_text }};
 }
 
 /* Product variant and price color */
 #thumbs span {
-
+  display: block;
+  text-align: left;
+  color: {{ settings.color_primary }};
 }
 
-.slim #overview { display: none; }
-
-
 /*================ #Checkout Form ================*/
 #container input[type="text"] {
   font-size: 13px;
@@ -368,7 +413,7 @@ a:hover {
 }
 
 #billing-is-shipping td {
-  border: solid 1px #ccc;
+  border: solid 1px #e5e5e5;
   padding: 5px;
 }
 
@@ -416,7 +461,6 @@ a:hover {
   }
 }
 
-
 /*================ #Buttons ================*/
 #buttons {
   clear: both;
@@ -440,13 +484,16 @@ a:hover {
 
 #buttons #commit-button,
 #buttons #complete-purchase,
+#create-account-btn,
 input[type="submit"] {
   display: inline-block;
   padding: 8px 20px;
   margin: 0;
   line-height: 1.42;
   text-decoration: none;
   text-align: center;
+  font-size: 14px;
+  font-weight: bold;
   vertical-align: middle;
   white-space: nowrap;
   cursor: pointer;
@@ -456,12 +503,8 @@ input[type="submit"] {
   -ms-user-select:     none;
   -o-user-select:      none;
   user-select:         none;
-  -webkit-appearance: none;
+  -webkit-appearance:  none;
   border-radius: 2px;
-  {% if settings.type_button_transform %}
-  text-transform: uppercase;
-  {% endif %}
-
   background-color: {{ settings.color_primary }};
   color: #fff;
 }
@@ -479,7 +522,10 @@ input[type="submit"] {
 }
 
 /*================ #Footer ================*/
-#footer {
+#footer,
+#container.slim #footer {
+  background: none;
+  width: 100%;
   clear: both;
   padding: 15px 0;
 }
@@ -505,6 +551,7 @@ input[type="submit"] {
 #container fieldset {
   border-radius: 2px;
   max-width: 100%;
+  background-color: transparent;
 }
 
 #container input,
@@ -534,7 +581,7 @@ input[type="submit"] {
 #container input[type="tel"],
 #container textarea,
 #container select {
-  border: 1px solid #ececec;
+  border: 1px solid #e5e5e5;
   width: 100%;
   max-width: 100%;
   display: block;
@@ -584,7 +631,6 @@ input[type="submit"] {
   background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNy43cHgiIGhlaWdodD0iNC4zcHgiIHZpZXdCb3g9IjAgMCA3LjcgNC4zIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3LjcgNC4zIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM5OTk5OTkiIGQ9Ik03LjEsMC4xQzYuNywwLjUsMy45LDMuMiwzLjksMy4yUzEsMC41LDAuNiwwLjFTMCwwLjcsMCwwLjdsMy45LDMuNmwzLjgtMy42QzcuNywwLjcsNy41LTAuMyw3LjEsMC4xeiIvPg0KPC9zdmc+DQo=");
   background-repeat: no-repeat;
   background-position: right 10px center;
-  background-color: #fff;
   padding-right: 28px;
   text-indent: 0.01px;
   text-overflow: '';