From 36968d76b607ee364a5e324d0e5aae5ef0d47dd0 Mon Sep 17 00:00:00 2001
From: Kevin Granger <shipowlata@gmail.com>
Date: Wed, 11 Dec 2013 16:55:53 +0100
Subject: [PATCH] // header markup retake

---
 themes/default-bootstrap/css/global.css   | 334 +++++++++++-----------
 themes/default-bootstrap/header.tpl       |  41 +--
 themes/default-bootstrap/sass/global.sass | 305 ++++++++++----------
 3 files changed, 338 insertions(+), 342 deletions(-)

diff --git a/themes/default-bootstrap/css/global.css b/themes/default-bootstrap/css/global.css
index 8c0eaa102..cf7a06863 100644
--- a/themes/default-bootstrap/css/global.css
+++ b/themes/default-bootstrap/css/global.css
@@ -3816,6 +3816,169 @@ textarea {
   position: relative;
   padding-bottom: 50px; }
 
+header {
+  z-index: 1;
+  position: relative;
+  background: white; }
+  header #banner-row {
+    background: black; }
+  header #nav-row {
+    background: #333333; }
+    header #nav-row nav {
+      float: right; }
+  header #header-row {
+    position: relative; }
+    @media (min-width: 768px) and (max-width: 991px) {
+      header #header-row {
+        width: 250px;
+        top: 35px; } }
+    @media (min-width: 480px) and (max-width: 767px) {
+      header #header-row {
+        width: 174px;
+        left: 15px;
+        top: 48px; } }
+    @media (max-width: 479px) {
+      header #header-row {
+        width: 200px;
+        left: 50%;
+        margin-left: -100px;
+        top: 20px; } }
+  header .header_user_info {
+    float: left;
+    border-left: 1px solid #515151;
+    border-right: 1px solid #515151; }
+    @media (max-width: 479px) {
+      header .header_user_info {
+        width: 25%;
+        text-align: center; } }
+    header .header_user_info a {
+      color: white;
+      font-weight: bold;
+      display: block;
+      padding: 8px 9px 11px 8px; }
+      @media (max-width: 479px) {
+        header .header_user_info a {
+          font-size: 11px; } }
+  header .shop-phone {
+    display: block;
+    padding: 5px 0 10px; }
+    @media (max-width: 767px) {
+      header .shop-phone {
+        display: none; } }
+    header .shop-phone i {
+      font-size: 21px;
+      line-height: 21px;
+      color: white;
+      padding-right: 7px; }
+    header .shop-phone strong {
+      color: white; }
+  header #currencies-block-top,
+  header #languages-block-top {
+    float: right;
+    border-left: 1px solid #515151;
+    position: relative; }
+    @media (max-width: 479px) {
+      header #currencies-block-top,
+      header #languages-block-top {
+        width: 25%; } }
+    header #currencies-block-top span.firstWord,
+    header #languages-block-top span.firstWord {
+      display: none; }
+    header #currencies-block-top div.current,
+    header #languages-block-top div.current {
+      font-weight: bold;
+      padding: 8px 10px 10px 10px;
+      color: white;
+      text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
+      @media (max-width: 479px) {
+        header #currencies-block-top div.current,
+        header #languages-block-top div.current {
+          text-align: center;
+          padding: 9px 5px 10px;
+          font-size: 11px; } }
+      header #currencies-block-top div.current strong,
+      header #languages-block-top div.current strong {
+        color: #777777; }
+      header #currencies-block-top div.current:after,
+      header #languages-block-top div.current:after {
+        content: "\f0d7";
+        font-family: "FontAwesome";
+        font-size: 18px;
+        line-height: 18px;
+        color: #686666;
+        vertical-align: -2px;
+        padding-left: 12px; }
+        @media (max-width: 479px) {
+          header #currencies-block-top div.current:after,
+          header #languages-block-top div.current:after {
+            padding-left: 2px;
+            font-size: 13px;
+            line-height: 13px;
+            vertical-align: 0; } }
+      @media (max-width: 479px) {
+        header #currencies-block-top div.current .cur-label,
+        header #languages-block-top div.current .cur-label {
+          display: none; } }
+    header #currencies-block-top ul,
+    header #languages-block-top ul {
+      display: none;
+      position: absolute;
+      top: 37px;
+      left: 0;
+      width: 157px;
+      background: #333333;
+      z-index: 2; }
+      header #currencies-block-top ul li,
+      header #languages-block-top ul li {
+        color: white;
+        line-height: 35px;
+        font-size: 13px; }
+        header #currencies-block-top ul li a,
+        header #currencies-block-top ul li > span,
+        header #languages-block-top ul li a,
+        header #languages-block-top ul li > span {
+          padding: 0 10px 0 12px;
+          display: block;
+          color: white; }
+        header #currencies-block-top ul li.selected, header #currencies-block-top ul li:hover a,
+        header #languages-block-top ul li.selected,
+        header #languages-block-top ul li:hover a {
+          background: #484848; }
+  header #contact-link {
+    float: right;
+    border-left: 1px solid #515151; }
+    @media (max-width: 479px) {
+      header #contact-link {
+        width: 25%;
+        text-align: center; } }
+    header #contact-link a {
+      display: block;
+      color: white;
+      font-weight: bold;
+      padding: 8px 10px 11px 10px;
+      text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
+      @media (max-width: 479px) {
+        header #contact-link a {
+          font-size: 11px;
+          padding-left: 5px;
+          padding-right: 5px; } }
+  header #contact-link a,
+  header #header-row .header_user_info a,
+  header #currencies-block-top div.current,
+  header #languages-block-top div.current {
+    cursor: pointer; }
+    header #contact-link a:hover, header #contact-link a.active,
+    header #header-row .header_user_info a:hover,
+    header #header-row .header_user_info a.active,
+    header #currencies-block-top div.current:hover,
+    header #currencies-block-top div.current.active,
+    header #languages-block-top div.current:hover,
+    header #languages-block-top div.current.active {
+      background: #2b2b2b; }
+
+.ie8 #header #header_logo {
+  width: 350px; }
+
 #center_column .page_product_box h3 {
   color: #555454;
   text-transform: uppercase;
@@ -5283,180 +5446,9 @@ div.star a:hover {
   padding: 5px 0;
   color: #333333; }
 
-.banner-top {
-  background: black; }
-
 .header-container {
   background: white; }
 
-#header {
-  padding-bottom: 21px;
-  position: relative;
-  background: white; }
-  #header .header-row {
-    position: relative; }
-    #header .header-row:first-child {
-      background-color: #333333; }
-    #header .header-row > .container {
-      position: relative; }
-    #header .header-row .shop-phone {
-      display: block;
-      padding: 5px 0 10px; }
-      @media (max-width: 767px) {
-        #header .header-row .shop-phone {
-          display: none; } }
-      #header .header-row .shop-phone i {
-        font-size: 21px;
-        line-height: 21px;
-        color: white;
-        padding-right: 7px; }
-      #header .header-row .shop-phone strong {
-        color: white; }
-    #header .header-row nav {
-      float: right; }
-    #header .header-row .header_user_info {
-      float: left;
-      border-left: 1px solid #515151;
-      border-right: 1px solid #515151; }
-      @media (max-width: 479px) {
-        #header .header-row .header_user_info {
-          width: 25%;
-          text-align: center; } }
-      #header .header-row .header_user_info a {
-        color: white;
-        font-weight: bold;
-        display: block;
-        padding: 8px 9px 11px 8px; }
-        @media (max-width: 479px) {
-          #header .header-row .header_user_info a {
-            font-size: 11px; } }
-  #header #header_logo {
-    position: absolute;
-    left: 0;
-    top: 27px;
-    z-index: 1; }
-    @media (min-width: 768px) and (max-width: 991px) {
-      #header #header_logo {
-        width: 250px;
-        top: 35px; } }
-    @media (min-width: 480px) and (max-width: 767px) {
-      #header #header_logo {
-        width: 174px;
-        left: 15px;
-        top: 48px; } }
-    @media (max-width: 479px) {
-      #header #header_logo {
-        width: 200px;
-        left: 50%;
-        margin-left: -100px;
-        top: 20px; } }
-  #header #currencies-block-top,
-  #header #languages-block-top {
-    float: right;
-    border-left: 1px solid #515151;
-    position: relative; }
-    @media (max-width: 479px) {
-      #header #currencies-block-top,
-      #header #languages-block-top {
-        width: 25%; } }
-    #header #currencies-block-top span.firstWord,
-    #header #languages-block-top span.firstWord {
-      display: none; }
-    #header #currencies-block-top div.current,
-    #header #languages-block-top div.current {
-      font-weight: bold;
-      padding: 8px 10px 10px 10px;
-      color: white;
-      text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
-      @media (max-width: 479px) {
-        #header #currencies-block-top div.current,
-        #header #languages-block-top div.current {
-          text-align: center;
-          padding: 9px 5px 10px;
-          font-size: 11px; } }
-      #header #currencies-block-top div.current strong,
-      #header #languages-block-top div.current strong {
-        color: #777777; }
-      #header #currencies-block-top div.current:after,
-      #header #languages-block-top div.current:after {
-        content: "\f0d7";
-        font-family: "FontAwesome";
-        font-size: 18px;
-        line-height: 18px;
-        color: #686666;
-        vertical-align: -2px;
-        padding-left: 12px; }
-        @media (max-width: 479px) {
-          #header #currencies-block-top div.current:after,
-          #header #languages-block-top div.current:after {
-            padding-left: 2px;
-            font-size: 13px;
-            line-height: 13px;
-            vertical-align: 0; } }
-      @media (max-width: 479px) {
-        #header #currencies-block-top div.current .cur-label,
-        #header #languages-block-top div.current .cur-label {
-          display: none; } }
-    #header #currencies-block-top ul,
-    #header #languages-block-top ul {
-      display: none;
-      position: absolute;
-      top: 37px;
-      left: 0;
-      width: 157px;
-      background: #333333;
-      z-index: 2; }
-      #header #currencies-block-top ul li,
-      #header #languages-block-top ul li {
-        color: white;
-        line-height: 35px;
-        font-size: 13px; }
-        #header #currencies-block-top ul li a,
-        #header #currencies-block-top ul li > span,
-        #header #languages-block-top ul li a,
-        #header #languages-block-top ul li > span {
-          padding: 0 10px 0 12px;
-          display: block;
-          color: white; }
-        #header #currencies-block-top ul li.selected, #header #currencies-block-top ul li:hover a,
-        #header #languages-block-top ul li.selected,
-        #header #languages-block-top ul li:hover a {
-          background: #484848; }
-  #header #contact-link {
-    float: right;
-    border-left: 1px solid #515151; }
-    @media (max-width: 479px) {
-      #header #contact-link {
-        width: 25%;
-        text-align: center; } }
-    #header #contact-link a {
-      display: block;
-      color: white;
-      font-weight: bold;
-      padding: 8px 10px 11px 10px;
-      text-shadow: 1px 1px rgba(0, 0, 0, 0.2); }
-      @media (max-width: 479px) {
-        #header #contact-link a {
-          font-size: 11px;
-          padding-left: 5px;
-          padding-right: 5px; } }
-  #header #contact-link a,
-  #header .header-row .header_user_info a,
-  #header #currencies-block-top div.current,
-  #header #languages-block-top div.current {
-    cursor: pointer; }
-    #header #contact-link a:hover, #header #contact-link a.active,
-    #header .header-row .header_user_info a:hover,
-    #header .header-row .header_user_info a.active,
-    #header #currencies-block-top div.current:hover,
-    #header #currencies-block-top div.current.active,
-    #header #languages-block-top div.current:hover,
-    #header #languages-block-top div.current.active {
-      background: #2b2b2b; }
-
-.ie8 #header #header_logo {
-  width: 350px; }
-
 .breadcrumb {
   display: inline-block;
   padding: 0 11px 0 0;
diff --git a/themes/default-bootstrap/header.tpl b/themes/default-bootstrap/header.tpl
index 9b5ced3b0..4621fd11f 100644
--- a/themes/default-bootstrap/header.tpl
+++ b/themes/default-bootstrap/header.tpl
@@ -100,26 +100,31 @@
 			</div>
 		{/if}
 		<div id="page">
-			<div class="header-container">
-				<header id="header">
-					<div class="header-row">
-						{hook h="displayBanner"}
-						<div class="container">
-							<nav>
-								{hook h="displayNav"}
-							</nav>						
-						</div>
+			<header id="header">
+
+				<div id="banner-row">
+					{hook h="displayBanner"}
+				</div>
+
+				<div id="nav-row">
+					<div class="container">
+						<nav>
+							{hook h="displayNav"}
+						</nav>
 					</div>
-					<div class="header-row">
-						<div class="container">
-							<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
-								<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
-							</a>
-							{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
-						</div>
+				</div>
+
+				<div id="header-row">
+					<div class="container">
+						<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">
+							<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if $logo_image_width} width="{$logo_image_width}"{/if}{if $logo_image_height} height="{$logo_image_height}"{/if}/>
+						</a>
+						{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
 					</div>
-				</header>
-			</div>
+				</div>
+
+			</header>
+
 			<div class="columns-container">
 				<div id="columns" class="container">
 					{if $page_name !='index' && $page_name !='pagenotfound'}
diff --git a/themes/default-bootstrap/sass/global.sass b/themes/default-bootstrap/sass/global.sass
index 51c0bd1cd..5abe444c1 100644
--- a/themes/default-bootstrap/sass/global.sass
+++ b/themes/default-bootstrap/sass/global.sass
@@ -42,6 +42,158 @@ textarea
 #right_column
 #footer
 
+
+
+header
+	z-index: 1
+	position: relative
+	background: $light-background
+	#banner-row
+		background: black
+	#nav-row
+		background: $dark-background
+		nav
+			float: right
+	#header-row
+		position: relative
+		#header_logo
+		// min 768px max 991px
+		@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
+			width: 250px
+			top: 35px
+		// min 480px max 767px
+		@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
+			width: 174px
+			left: 15px
+			top: 48px
+		// max 479px
+		@media (max-width: $screen-xs - 1)
+			width: 200px
+			left: 50%
+			margin-left: -100px
+			top: 20px
+	.header_user_info
+		float: left
+		border-left: 1px solid #515151
+		border-right: 1px solid #515151
+		// max 479px
+		@media (max-width: $screen-xs - 1) 
+			width: 25%
+			text-align: center												
+		a
+			color: $light-text-color
+			font-weight: bold
+			display: block
+			padding: 8px 9px 11px 8px
+			// max 479px
+			@media (max-width: $screen-xs - 1)
+				font-size: 11px
+	.shop-phone
+		display: block
+		padding: 5px 0 10px
+		// max 767px
+		@media (max-width: $screen-xs-max)
+			display: none
+		i
+			font-size: 21px
+			line-height: 21px
+			color: $light-text-color
+			padding-right: 7px
+		strong
+			color: $light-text-color
+	
+
+	//languages/currencies 
+	#currencies-block-top,
+	#languages-block-top 
+		float: right
+		border-left: 1px solid #515151
+		position: relative
+		// max 479px
+		@media (max-width: $screen-xs - 1)
+			width: 25%														
+		span.firstWord
+			display: none
+		div.current
+			font-weight: bold
+			padding: 8px 10px 10px 10px
+			color: $light-text-color
+			text-shadow: 1px 1px rgba(0,0,0,0.2)
+			// max 479px
+			@media (max-width: $screen-xs - 1)
+				text-align: center
+				padding: 9px 5px 10px
+				font-size: 11px
+			strong
+				color: #777777
+			&:after
+				content: "\f0d7"
+				font-family: $font-icon
+				font-size: 18px
+				line-height: 18px
+				color: #686666
+				vertical-align: -2px
+				padding-left: 12px
+				// max 479px
+				@media (max-width: $screen-xs - 1)
+					padding-left: 2px
+					font-size: 13px
+					line-height: 13px
+					vertical-align: 0
+			.cur-label
+				// max 479px
+				@media (max-width: $screen-xs - 1)
+					display: none
+		ul
+			display: none
+			position: absolute
+			top: 37px
+			left: 0
+			width: 157px
+			background: $dark-background
+			z-index: 2
+			li 
+				color: $light-text-color
+				line-height: 35px
+				font-size: 13px
+				a,
+				> span 
+					padding: 0 10px 0 12px
+					display: block
+					color: $light-text-color
+				&.selected, &:hover a 
+					background: #484848
+	#contact-link
+		float: right
+		border-left: 1px solid #515151
+		// max 479px
+		@media (max-width: $screen-xs - 1)
+			width: 25%
+			text-align: center														
+		a
+			display: block
+			color: $light-text-color
+			font-weight: bold
+			padding: 8px 10px 11px 10px
+			text-shadow: 1px 1px rgba(0,0,0,0.2)
+			// max 479px
+			@media (max-width: $screen-xs - 1)
+				font-size: 11px
+				padding-left: 5px
+				padding-right: 5px
+	#contact-link a,
+	#header-row .header_user_info a,
+	#currencies-block-top div.current,
+	#languages-block-top div.current
+		cursor: pointer
+		&:hover, &.active
+			background: #2b2b2b
+
+.ie8 #header #header_logo
+	width: 350px
+
+
+
 //title
 #center_column
 	.page_product_box
@@ -1449,163 +1601,10 @@ div.star a:hover
 
 .listcomment .authorcomment
 
-//HEADER
-.banner-top
-	background: #000
-
 .header-container
 	background: $light-background
 
-#header
-	padding-bottom: 21px
-	position: relative
-	background: $light-background
-	.header-row
-		position: relative
-		&:first-child
-			background-color: $dark-background
-		> .container
-			position: relative
-		.shop-phone
-			display: block
-			padding: 5px 0 10px
-			// max 767px
-			@media (max-width: $screen-xs-max)
-				display: none
-			i
-				font-size: 21px
-				line-height: 21px
-				color: $light-text-color
-				padding-right: 7px
-			strong
-				color: $light-text-color
-		nav
-			float: right
-		.header_user_info
-			float: left
-			border-left: 1px solid #515151
-			border-right: 1px solid #515151
-			// max 479px
-			@media (max-width: $screen-xs - 1) 
-				width: 25%
-				text-align: center												
-			a
-				color: $light-text-color
-				font-weight: bold
-				display: block
-				padding: 8px 9px 11px 8px
-				// max 479px
-				@media (max-width: $screen-xs - 1)
-					font-size: 11px
-	#header_logo
-		position: absolute
-		left: 0
-		top: 27px
-		z-index: 1
-		// min 768px max 991px
-		@media (min-width: $screen-sm) and (max-width: $screen-sm-max)
-			width: 250px
-			top: 35px
-		// min 480px max 767px
-		@media (min-width: $screen-xs) and (max-width: $screen-xs-max)
-			width: 174px
-			left: 15px
-			top: 48px
-		// max 479px
-		@media (max-width: $screen-xs - 1)
-			width: 200px
-			left: 50%
-			margin-left: -100px
-			top: 20px
 
-	//languages/currencies 
-	#currencies-block-top,
-	#languages-block-top 
-		float: right
-		border-left: 1px solid #515151
-		position: relative
-		// max 479px
-		@media (max-width: $screen-xs - 1)
-			width: 25%														
-		span.firstWord
-			display: none
-		div.current
-			font-weight: bold
-			padding: 8px 10px 10px 10px
-			color: $light-text-color
-			text-shadow: 1px 1px rgba(0,0,0,0.2)
-			// max 479px
-			@media (max-width: $screen-xs - 1)
-				text-align: center
-				padding: 9px 5px 10px
-				font-size: 11px
-			strong
-				color: #777777
-			&:after
-				content: "\f0d7"
-				font-family: $font-icon
-				font-size: 18px
-				line-height: 18px
-				color: #686666
-				vertical-align: -2px
-				padding-left: 12px
-				// max 479px
-				@media (max-width: $screen-xs - 1)
-					padding-left: 2px
-					font-size: 13px
-					line-height: 13px
-					vertical-align: 0
-			.cur-label
-				// max 479px
-				@media (max-width: $screen-xs - 1)
-					display: none
-		ul
-			display: none
-			position: absolute
-			top: 37px
-			left: 0
-			width: 157px
-			background: $dark-background
-			z-index: 2
-			li 
-				color: $light-text-color
-				line-height: 35px
-				font-size: 13px
-				a,
-				> span 
-					padding: 0 10px 0 12px
-					display: block
-					color: $light-text-color
-				&.selected, &:hover a 
-					background: #484848
-	#contact-link
-		float: right
-		border-left: 1px solid #515151
-		// max 479px
-		@media (max-width: $screen-xs - 1)
-			width: 25%
-			text-align: center														
-		a
-			display: block
-			color: $light-text-color
-			font-weight: bold
-			padding: 8px 10px 11px 10px
-			text-shadow: 1px 1px rgba(0,0,0,0.2)
-			// max 479px
-			@media (max-width: $screen-xs - 1)
-				font-size: 11px
-				padding-left: 5px
-				padding-right: 5px
-	#contact-link a,
-	.header-row .header_user_info a,
-	#currencies-block-top div.current,
-	#languages-block-top div.current
-		cursor: pointer
-		&:hover, &.active
-			background: #2b2b2b
-
-.ie8 #header #header_logo
-	width: 350px
 
 // BREADCRUMB
 .breadcrumb