From 17d5ff788a620aa3b4c27807f57ce92123bb6380 Mon Sep 17 00:00:00 2001
From: arzynik <github@arzynik.com>
Date: Tue, 13 Aug 2013 16:54:53 -0700
Subject: [PATCH] updated order-begin box

---
 .../crunchbutton/frontend/restaurant.phtml    | 21 +++--
 www/assets/css/style.css                      | 51 +-----------
 www/assets/css/styles.revised.css             | 82 +++++++++++++++++++
 3 files changed, 95 insertions(+), 59 deletions(-)

diff --git a/include/views/default/crunchbutton/frontend/restaurant.phtml b/include/views/default/crunchbutton/frontend/restaurant.phtml
index e9810515f..5c92b1a37 100644
--- a/include/views/default/crunchbutton/frontend/restaurant.phtml
+++ b/include/views/default/crunchbutton/frontend/restaurant.phtml
@@ -51,18 +51,21 @@
 				<div class="your-order-label" style="font-weight: bold; display: none;">(we've chosen the most popular order, but you can order anything you want)</div>
 				<div class="divider"></div>
 
-				<div ng-show="!order.cart.hasItems()" class="order-begin">
-					<div class="icon">
-						<i class="icon-arrow-left desktop"></i> 	
-						<i class="icon-arrow-down mobile"></i> 
-					</div>
-					<div class="text">
-						Begin by clicking on anything from our curated menu 
-						<span class="desktop"> on the left!</span>
-						<span class="mobile"> below!</span>
+				<div ng-show="!order.cart.hasItems()" class="order-begin-wrap">
+					<div class="order-begin">
+						<div class="icon">
+							<i class="icon-arrow-left desktop"></i> 	
+							<i class="icon-arrow-down mobile"></i> 
+						</div>
+						<div class="text">
+							Begin by clicking on anything from our curated menu 
+							<span class="desktop"> on the left!</span>
+							<span class="mobile"> below!</span>
+						</div>
 					</div>
 					<div class="divider"></div>
 				</div>
+					<div class="divider"></div>
 
 				<div ng-show="order.info.deliveryMinDiff && order.cart.hasItems()" class="delivery-minimum-error">
 					Add $<span class="delivery-min-diff">{{order.info.deliveryMinDiff}}</span> from menu to meet delivery minimum.
diff --git a/www/assets/css/style.css b/www/assets/css/style.css
index 7873fec2f..8ed41df9f 100644
--- a/www/assets/css/style.css
+++ b/www/assets/css/style.css
@@ -977,19 +977,6 @@ html[xmlns] .clearfix {
 
 @media only screen and (max-width : 1023px) {
 
-	.order-begin{
-		margin-right: auto !important;
-		margin-left: auto !important;
-		margin-bottom: 30px !important;
-	}
-
-	.order-begin .desktop{
-		display: none !important;
-	}
-	.order-begin .mobile{
-		display: inline !important;
-	}
-
 	.home-tagline, .home-welcome {
 		text-align: center;
 	}
@@ -2787,43 +2774,7 @@ strong {
 	clear: both;
 }
 
-.order-begin{
-	background: #fdf6f0;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
-	border:2px solid #f34b24;
-	color: #666;
-	font-size:13px;
-	line-height: 22px;
-	text-align: left !important;
-	text-shadow: 1px 1px 0 rgba(0,0,0,.10);
-	width: 310px;
-	color: #d74924;
-	display: block;
-	font-size: 15px;
-	font-weight: bold;
-	padding: 15px;
-	margin-top: 30px;
-}
-	.order-begin .icon, .order-begin .content{
-		float: left;
-		display: block;
-		height: 30px;
-	}
-	.order-begin .icon{
-		font-size: 25px;
-		width: 35px;
-		padding-top: 10px;
-	}
-	.order-begin .text{
-		width: 300px;
-	}
-	.order-begin .desktop{
-		display: inline;
-	}
-	.order-begin .mobile{
-		display: none;
-	}
+
 /**
  * unused blurs
 
diff --git a/www/assets/css/styles.revised.css b/www/assets/css/styles.revised.css
index b24838366..0355a3b10 100644
--- a/www/assets/css/styles.revised.css
+++ b/www/assets/css/styles.revised.css
@@ -641,3 +641,85 @@ html {
 .side-menu-wrap {
 	height: 28px;
 }
+
+
+
+
+.order-begin-wrap {
+	background: #fff6f4;
+	background: -moz-linear-gradient(top, #fff6f4 0%, #fdf6f0 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff6f4), color-stop(100%,#fdf6f0));
+	background: -webkit-linear-gradient(top, #fff6f4 0%,#fdf6f0 100%);
+	background: -o-linear-gradient(top, #fff6f4 0%,#fdf6f0 100%);
+	background: -ms-linear-gradient(top, #fff6f4 0%,#fdf6f0 100%);
+	background: linear-gradient(to bottom, #fff6f4 0%,#fdf6f0 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff6f4', endColorstr='#fdf6f0',GradientType=0 );
+
+	color: #d74924;
+	text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0px;
+	box-shadow: inset 0px 1px 0px 0px #fff;
+	border: 2px solid #f34b24;
+
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	padding: .9em;
+
+	line-height: 1.5em;
+	text-align: left;
+	font-weight: bold;
+	font-size: 14px;
+}
+
+.order-begin {
+	display: table-row;
+}
+
+.order-begin .icon, .order-begin .text {
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.order-begin .icon {
+	padding: 0 .5em 0 0;
+	font-size: 25px;
+}
+
+@media only screen and (max-width : 767px) {
+	.order-begin .icon {
+		font-size: 23px;
+	}
+	.order-begin-wrap {
+		margin-bottom: 20px;
+		background: #f34b24;
+		color: #fff;
+		text-shadow: none;
+		text-shadow: 1px 1px 0px #b43518;	
+		box-shadow: none;
+		border: none;
+	}
+}
+
+@media only screen and (min-width : 768px) {
+	.order-begin-wrap {
+		margin-top: 20px;
+	}
+}
+
+@media only screen and (max-width : 1023px) {
+	.order-begin .desktop{
+		display: none;
+	}
+}
+
+@media only screen and (min-width : 1024px) {
+	.order-begin-wrap {
+		width: 310px;
+	}
+	.order-begin .mobile {
+		display: none;
+	}
+	.order-begin-wrap {
+		font-size: 15px;
+	}
+}
+