From 128d02d262839e2725fea2975a3c97852c66271a Mon Sep 17 00:00:00 2001
From: Claude Manahan <claude.manahan@gmail.com>
Date: Tue, 20 Oct 2015 13:27:37 +0800
Subject: [PATCH] changed css and js files

---
 css/foundation.css |  68 ++++---
 index.html         |  27 +--
 style.css          | 447 +++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 458 insertions(+), 84 deletions(-)

diff --git a/css/foundation.css b/css/foundation.css
index 89f7e90..b994e19 100644
--- a/css/foundation.css
+++ b/css/foundation.css
@@ -6,8 +6,8 @@ meta.foundation-mq-small {
   width: 0em; }
 
 meta.foundation-mq-medium {
-  font-family: "/only screen and (min-width:40.063em)/";
-  width: 40.063em; }
+  font-family: "/only screen and (min-width:61em)/";
+  width: 61em; }
 
 meta.foundation-mq-large {
   font-family: "/only screen and (min-width:64.063em)/";
@@ -380,7 +380,7 @@ select {
   .column.small-uncentered.opposite,
   .columns.small-uncentered.opposite {
     float: right; } }
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .medium-push-0 {
     position: relative;
     left: 0%;
@@ -1214,11 +1214,11 @@ button, .button {
       button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
         background-color: #c60f13; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   button, .button {
     display: inline-block; } }
 meta.foundation-mq-topbar {
-  font-family: "/only screen and (min-width:40.063em)/";
+  font-family: "/only screen and (min-width:61em)/";
   width: 58.75em; }
 
 /* Wrapped around .top-bar to contain to grid width */
@@ -1512,7 +1512,7 @@ meta.foundation-mq-topbar {
 .js-generated {
   display: block; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .top-bar {
     background: #333333;
     *zoom: 1;
@@ -1631,9 +1631,7 @@ meta.foundation-mq-topbar {
     .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
       border-bottom: none;
       border-top: none;
-      border-right: solid 1px #4e4e4e;
       clear: none;
-      height: 45px;
       width: 0; }
     .top-bar-section .has-form {
       background: #333333;
@@ -2314,13 +2312,13 @@ meta.foundation-mq-topbar {
 .touch .orbit-bullets {
   display: none; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .touch .orbit-container .orbit-prev,
   .touch .orbit-container .orbit-next {
     display: inherit; }
   .touch .orbit-bullets {
     display: block; } }
-@media only screen and (max-width: 40em) {
+@media only screen and (max-width: 60em) {
   .orbit-stack-on-small .orbit-slides-container {
     height: auto !important; }
   .orbit-stack-on-small .orbit-slides-container > * {
@@ -2410,7 +2408,7 @@ meta.foundation-mq-topbar {
     .tabs-content.vertical > .content {
       padding: 0 0.9375em; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .tabs.vertical {
     width: 20%;
     float: left;
@@ -2497,7 +2495,7 @@ ul.pagination {
     content: " ";
     display: table; }
   .accordion:after {
-    clear: both; }
+    clear: both; } 
   .accordion dd {
     display: block;
     margin-bottom: 0 !important; }
@@ -2531,7 +2529,7 @@ ul.pagination {
 .text-justify {
   text-align: justify !important; }
 
-@media only screen and (max-width: 40em) {
+@media only screen and (max-width: 60em) {
   .small-only-text-left {
     text-align: left !important; }
 
@@ -2555,7 +2553,7 @@ ul.pagination {
 
   .small-text-justify {
     text-align: justify !important; } }
-@media only screen and (min-width: 40.063em) and (max-width: 64em) {
+@media only screen and (min-width: 61em) and (max-width: 64em) {
   .medium-only-text-left {
     text-align: left !important; }
 
@@ -2567,7 +2565,7 @@ ul.pagination {
 
   .medium-only-text-justify {
     text-align: justify !important; } }
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .medium-text-left {
     text-align: left !important; }
 
@@ -2875,7 +2873,7 @@ blockquote p {
   border: none;
   padding: 0 0.0625rem; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   h1, h2, h3, h4, h5, h6 {
     line-height: 1.4; }
 
@@ -3063,10 +3061,10 @@ dialog, .reveal-modal {
   padding: 1.25rem;
   border: solid 1px #666666;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
-  @media only screen and (max-width: 40em) {
+  @media only screen and (max-width: 60em) {
     dialog, .reveal-modal {
       min-height: 100vh; } }
-  @media only screen and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) {
     dialog, .reveal-modal {
       left: 50%; } }
   dialog .column,
@@ -3077,11 +3075,11 @@ dialog, .reveal-modal {
     margin-top: 0; }
   dialog > :last-child, .reveal-modal > :last-child {
     margin-bottom: 0; }
-  @media only screen and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) {
     dialog, .reveal-modal {
       margin-left: -40%;
       width: 80%; } }
-  @media only screen and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) {
     dialog, .reveal-modal {
       top: 6.25rem; } }
   dialog .close-reveal-modal, .reveal-modal .close-reveal-modal {
@@ -3098,7 +3096,7 @@ dialog[open] {
   display: block;
   visibility: visible; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   dialog, .reveal-modal {
     padding: 1.875rem; }
     dialog.radius, .reveal-modal.radius {
@@ -3113,28 +3111,28 @@ dialog[open] {
     height: 100vh;
     min-height: 100vh;
     margin-left: 0 !important; } }
-  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) and (min-width: 61em) {
     dialog.tiny, .reveal-modal.tiny {
       margin-left: -15%;
       width: 30%; } }
-  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) and (min-width: 61em) {
     dialog.small, .reveal-modal.small {
       margin-left: -20%;
       width: 40%; } }
-  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) and (min-width: 61em) {
     dialog.medium, .reveal-modal.medium {
       margin-left: -30%;
       width: 60%; } }
-  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) and (min-width: 61em) {
     dialog.large, .reveal-modal.large {
       margin-left: -35%;
       width: 70%; } }
-  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) and (min-width: 61em) {
     dialog.xlarge, .reveal-modal.xlarge {
       margin-left: -47.5%;
       width: 95%; } }
 
-  @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) and (min-width: 61em) {
     dialog.full, .reveal-modal.full {
       margin-left: -50vw;
       width: 100vw; } }
@@ -3195,7 +3193,7 @@ dialog[open] {
   color: #777777;
   font-weight: normal; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .tooltip > .nub {
     border-color: transparent transparent #333333 transparent;
     top: -10px; }
@@ -3304,7 +3302,7 @@ dialog[open] {
   .clearing-feature li.clearing-featured-img {
     display: block; }
 
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .clearing-main-prev,
   .clearing-main-next {
     position: absolute;
@@ -3591,7 +3589,7 @@ dialog[open] {
   left: 0; }
 
 /* Styles for screens that are at least 768px; */
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .joyride-tip-guide {
     width: 300px;
     left: inherit; }
@@ -3707,7 +3705,7 @@ dialog[open] {
   text-align: center;
   height: 2.8125rem;
   top: 0; }
-  @media only screen and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) {
     .tab-bar-section {
       text-align: left; } }
   .tab-bar-section.left {
@@ -3832,7 +3830,7 @@ ul.off-canvas-list {
   right: 0;
   z-index: 1002;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
-  @media only screen and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) {
     .move-right .exit-off-canvas:hover {
       background: rgba(255, 255, 255, 0.05); } }
 
@@ -3857,7 +3855,7 @@ ul.off-canvas-list {
   right: 0;
   z-index: 1002;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
-  @media only screen and (min-width: 40.063em) {
+  @media only screen and (min-width: 61em) {
     .move-left .exit-off-canvas:hover {
       background: rgba(255, 255, 255, 0.05); } }
 
@@ -4594,7 +4592,7 @@ label.error {
       clear: none; }
     .small-block-grid-12 > li:nth-of-type(12n+1) {
       clear: both; } }
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .medium-block-grid-1 > li {
     width: 100%;
     list-style: none; }
@@ -4843,7 +4841,7 @@ kbd {
   th.show-for-small-only, td.show-for-small-only, th.show-for-small-up, td.show-for-small-up, th.show-for-small, td.show-for-small, th.show-for-small-down, td.show-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.hide-for-medium-up, td.hide-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.show-for-medium-down, td.show-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.hide-for-large-up, td.hide-for-large-up, th.hide-for-large, td.hide-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up {
     display: table-cell !important; } }
 /* medium displays */
-@media only screen and (min-width: 40.063em) {
+@media only screen and (min-width: 61em) {
   .hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xxlarge-only, .hide-for-xxlarge-up {
     display: inherit !important; }
 
diff --git a/index.html b/index.html
index d051c4d..aa28fc5 100644
--- a/index.html
+++ b/index.html
@@ -24,18 +24,6 @@ <h1><a href="#">GOVPH</a></h1>
             </ul>
 
             <section class="top-bar-section">
-              <!-- Right Nav Section -->
-              <ul class="right">
-                <li class="active"><a href="#">Right Button Active</a></li>
-                <li class="has-dropdown">
-                  <a href="#">Right Button Dropdown</a>
-                  <ul class="dropdown">
-                    <li><a href="#">1st link in dropdown</a></li>
-					<li><a href="#">2nd link in dropdown</a></li>
-					<li><a href="#">3rd link in dropdown</a></li>
-                  </ul>
-                </li>
-              </ul>
 
               <!-- Left Nav Section -->
               <ul class="left">
@@ -54,6 +42,19 @@ <h1><a href="#">GOVPH</a></h1>
                 <li><a href="#">Left Nav Button</a></li>
                 <li class="divider"></li>                
               </ul>
+            
+              <!-- Right Nav Section -->
+              <ul class="right">
+                <li class="active"><a href="#">Right Button Active</a></li>
+                <li class="has-dropdown">
+                  <a href="#">Right Button Dropdown</a>
+                  <ul class="dropdown">
+                    <li><a href="#">1st link in dropdown</a></li>
+          					<li><a href="#">2nd link in dropdown</a></li>
+          					<li><a href="#">3rd link in dropdown</a></li>
+                  </ul>
+                </li>
+              </ul>
             </section>
           </nav>         
         </div>
@@ -63,7 +64,7 @@ <h1><a href="#">GOVPH</a></h1>
 
 <!-- masthead -->
     <div id="masthead">
-      <div class="row">
+      <div id="masthead__container" class="row">
         <div id="logo" class="large-6 medium-6 columns">
           <h1>A.G.E.N.C.Y</h1>
           <p>The Goverment Website</p>
diff --git a/style.css b/style.css
index 8fd9d5b..152ede5 100644
--- a/style.css
+++ b/style.css
@@ -1,15 +1,59 @@
+/*
+Theme Name:		GWT-Wordpress 6.4
+Theme URI:		http://i.gov.ph
+Description:	Custom WordPress theme based on the draft Unified Web Content Policy prepared by the PCDSPO, DOST-ASTI, and DOST-ICTO. Theme is built on HTML5 responsive WordPress framework based on ZURB's Foundation.
+Version:		6.4
+Author:			iGovPhil
+Author URI:		http://i.gov.ph
+License:		MIT License
+License URI:	http://www.opensource.org/licenses/mit-license.php
+*/
+
 @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
 
 /*typography*/
 h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif; font-weight: bold; text-transform: uppercase;}
 
-/*top bar*/
-#main{
-	padding: 1.25rem 0px;
+/* accessibility */
+#accessibility-links{
+}
+#accessibility-shortcuts{
+}
+#accessibility-links ul,
+#accessibility-shortcuts ul{
+	margin: 0;
+	overflow: hidden;
+	height: auto;
+	width: auto;
+}
+#accessibility-links ul li,
+#accessibility-shortcuts ul li{
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+#accessibility-links ul li a,
+#accessibility-shortcuts ul li a{
+	display: block;
+	padding: 0 20px;
 }
+#accessibility-links ul li a,
+#accessibility-shortcuts ul li a{
+	font-size: 0;
+}
+#accessibility-links ul li.access-focus a,
+#accessibility-shortcuts ul li.access-focus a{
+	font-size: inherit;
+}
+
+/*top bar*/
 #main-nav {
 background-color: #f7f7f7;
 line-height: 58px;
+position: fixed;
+z-index: 999;
+width: 100%;
+box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 #main-nav .top-bar {
@@ -34,6 +78,103 @@ line-height: 58px;
 	color: #000;
 }
 
+/** auxiliary-menu **/
+#auxiliary {background: #f7f7f7;}
+.aux-nav-btn-container{ height: 58px; background: #f7f7f7; overflow: auto; }
+#aux-nav-btn{ float: right; margin: 0; background: #f7f7f7; color: #000; height: 34px; line-height: 33px; padding: 0; padding-right: 25px; margin-top: 10px; margin-right: 18px; margin-bottom: 14px; font-weight: bold; text-transform: uppercase; font-size: 13px; }
+#aux-nav-btn::after{ content: ""; position: absolute; right: 0; display: block; width: 16px; top: 0; height: 0; color: #000; box-shadow: 0 10px 0 1px #000, 0 16px 0 1px #000, 0 22px 0 1px #000; }
+#aux-nav{ list-style: none;}
+#aux-nav li { border-right: solid 1px #ebebeb; }
+#aux-nav li li {border-right: 0;}
+#aux-nav li a:hover{ background: #ededed; }
+#aux-nav ul{margin: 0;}
+#aux-nav ul li.has-dropdown{ }
+#aux-nav ul li.has-dropdown:hover{ }
+#aux-nav.show-for-medium-up.open{ display: block !important;z-index: 1; }
+#aux-nav.open li.divider{ border: 0; }
+#aux-nav .top-bar-section .dropdown {
+ height: auto; 
+ width: auto; 
+ overflow: visible; 
+ clip: auto; 
+ display: none;
+}
+#aux-nav ul li.has-dropdown{
+
+}
+#aux-nav ul li.has-dropdown:hover .dropdown {
+	display: block;
+}
+
+/** breadcrumbs **/
+#breadcrumbs{
+	border-top: solid 1px #ebebeb;
+}
+
+#breadcrumbs ul.nav{
+	margin: 0;
+	padding-left: 15px;
+}
+
+.breadcrumbs {
+	margin-top: 10px;
+	background: #FCFCFC none repeat scroll 0% 0%;
+	border-color: #F2F2F2;
+	margin-bottom: 0px;
+}
+.breadcrumbs li:first-child::before{
+	content: " ";
+    margin: 0px;
+}
+
+.breadcrumbs li:nth-child(2)::before {
+	content: "";
+	margin: 3px;
+}
+
+.breadcrumbs li::before{
+	color: #AAA;
+	margin: 5px;
+}
+
+.breadcrumbs span.current {
+    color: #333;
+}
+
+/*masthead*/
+#masthead {background:#fff; border-bottom: 1px solid #f2f2f2; padding: 1.25rem 0;}
+	#masthead #logo h1 {margin:0; padding:0;}
+	#masthead #logo p {margin:0; padding:0;}
+
+#masthead__container {
+	margin-top: 50px;
+}
+
+/*banner*/
+#banner {background: #fcfcfc; border-bottom: 1px solid #f2f2f2; padding: 1.25rem 0;}
+	#banner .bg-banner {background: #f2f2f2; border: 1px solid #d8d8d8;}
+	
+	/*banner 3/4 right panel*/
+	#banner #featured01 {padding: 1.25rem;}
+			#featured01 h3, #featured01 h4, #featured01 p {color: #666;}
+			.banner-pads{
+				padding: 30px 0;
+			}
+
+/*main-content*/
+#main-content {padding: 1.25rem 0;}
+
+/*footer*/
+#footer {background: #e9e9e9; padding: 1.25rem 0; border-top: 1px solid #f2f2f2;}
+	#footer img.republic-seal {}
+	#footer h4, #footer p, #footer li, #footer a {color: #999;}
+	#footer h4 {font-size: 60%;}
+	#footer p, #footer li {font-size: 70%;}
+	#footer ul {padding: 0; margin: 0; }
+	#footer li {list-style: none; display: block;}
+	
+/*** GWT for WordPress ***/
+	
 	/* header */
 	.top-bar .name{ height: 58px; }
 	.top-bar.expanded .title-area{ background: #E4E4E4;}
@@ -65,35 +206,6 @@ line-height: 58px;
 	line-height: 58px;
 	color: #000;
 }
-
-/*** edited ****/
-.top-bar-section li.active:not(.has-form) a:not(.button){
-	background: #E4E4E4;
-}
-.top-bar-section ul li.active > a:hover {
-      background: #A5A5A5;
-}
-.top-bar-section li.active:not(.has-form) a:not(.button):hover {
-	background: #A5A5A5;
-}
-.no-js .top-bar-section ul li:active > a {
-    background: #E4E4E4;
-}
-
-.top-bar-section .divider, .top-bar-section [role="separator"] {
-	height:58px;
-	background-color: #EBEBEB;
-	border:none;
-}
-.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
-	height:58px;
-	background-color: #EBEBEB;
-	border:none;
-}
-
-
-/*** edited ****/
-
 .top-bar-section li:not(.has-form).current-menu-item a:not(.button){
 	background: #E4E4E4;
 }
@@ -116,6 +228,7 @@ line-height: 58px;
 }
 .top-bar-section .dropdown li:not(.has-form) a:not(.button){
 	border: 0;
+	line-height: 40px;
 }
 .top-bar-section li:not(.has-form) a:not(.button):hover {
 	background: #E4E4E4;
@@ -123,7 +236,7 @@ line-height: 58px;
 
 	li.search {height: 58px; padding-left: 20px; padding-right: 20px;}
 	
-	.logo {margin: 20px 0;}
+	.logo, .ear-content, .banner-content {margin: 20px 0;}
 	
 	.logo a {display:block; height:100px;}
 	
@@ -138,7 +251,7 @@ line-height: 58px;
 	/* .entry-content {margin-top: 20px;} */
 	.notfound {text-align: center; padding-top: 1.25rem;}
 	.search-404 {padding: 2.75rem 0;}
-	.search-results .panel {background: #fff; border-width: 0; border-bottom: 1px solid #D8D8D8;}
+	.search-results .panel {border-style: solid; border-width: 1px; border-color: #D8D8D8; margin-bottom: 1.25rem; padding: 1.25rem; background: #F2F2F2 none repeat scroll 0% 0%;}
 	h1, h2, h3, h4, h5, h6 {line-height: 0.9;}
 	
 	/* template tags */
@@ -172,7 +285,7 @@ line-height: 58px;
 	}
 
 /** media query for mobile smartphones **/
-@media only screen and (max-width: 40em) {
+@media only screen and (max-width: 60em) {
 	.top-bar .top-bar-section{
 		display: none;
 	}
@@ -191,6 +304,7 @@ line-height: 58px;
 	.top-bar .top-bar-section .search .search-form input{
 		margin: 0;
 	}
+
 	.top-bar-section .has-dropdown > a:after{
 		border: inset 5px;
 		border-color: transparent transparent transparent rgba(0, 0, 0, 0.4);
@@ -199,4 +313,265 @@ line-height: 58px;
 	}
 	.top-bar li{
 		border: 0;
-	}
\ No newline at end of file
+	}
+
+	#aux-nav li{ display: block; border:0;}
+	#aux-nav li a{ height: 58px; line-height: 58px; display: block;}
+	#aux-nav{ margin-left: 0; top: auto !important; left: 0 !important; width:100% !important; position: static !important; border-bottom: 1px solid #D8D8D8;}
+	#aux-nav section > ul{ width: 100%; margin: 0; padding: 0 20px; height: auto; }
+	#aux-nav ul > li{ width: 100%; display: block; }
+	#aux-nav ul li > a{ width: 100%; display: block; line-height: 58px; background: #f7f7f7; color: #000; font-size: 13px; padding: 0 20px; position: relative; border-top: 1px solid #ebebeb; }
+	#aux-nav ul li a:hover{ background: #EDEDED; }
+	#aux-nav ul li.has-dropdown > a:after{ content: ""; display: block; width: 0; height: 0; border: inset 5px; border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent; border-top-style: solid; margin-top: -2.5px; top: 22.5px;
+	margin-top: 1.5px; right: 30px; position: absolute; }
+	#aux-nav ul li.has-dropdown ul{ margin-left: 15px; }
+	#aux-nav ul li.has-dropdown ul > li{ }
+	#aux-nav ul li.has-dropdown ul li > a{ }
+	#aux-nav section > ul {
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		height: auto;
+		background: #f7f7f7
+	}
+
+	#aux-nav .top-bar-section .dropdown {
+	 height: auto; 
+	 width: auto; 
+	 overflow: visible; 
+	 clip: auto; 
+	 display: block;
+	 position: static !important;
+	}
+	#aux-nav ul li.has-dropdown{
+
+	}
+	#aux-nav ul li.has-dropdown:hover .dropdown {
+		display: block;
+	}
+}
+/** media query for large screens **/
+@media only screen and (min-width: 61em){
+	.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
+		border: none;
+		content: "\00bb";
+		top: .5rem;
+		margin-top: 4px;
+		right: 5px;
+		line-height: 1.2;
+	}
+	#main-nav .top-bar li ul{ -webkit-box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5); -moz-box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5); box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5); }
+	#aux-nav{ position: static; width: auto !important; top: auto; left: auto;
+	background: #f7f7f7; color: #000; line-height: 58px; font-size: 13px; }
+	#aux-nav .has-dropdown{ }
+	#aux-nav ul.dropdown{ width: 100%; }
+	#aux-nav ul.dropdown li{ border-bottom: solid 1px #ebebeb; }
+	#aux-nav li.has-dropdown > a:after { content: ""; display: block; width: 0; height: 0; border: inset 5px; border-color: rgba(0, 0, 0, 0.4) transparent transparent transparent; border-top-style: solid; margin-right: 15px; margin-top: -2.5px; position: absolute; top: 50%; right: 0; }
+	#aux-nav li { float: left; padding-right: 0; list-style: none; }
+	#aux-nav li a{ background: #f7f7f7; color: #000; font-size: 13px; line-height: 58px; padding: 0 15px; display: block; white-space: nowrap; }
+	#aux-nav ul li a:hover{ background: #EDEDED; }
+	#aux-nav li.has-dropdown{ position: relative; }
+	/** first level **/
+	#aux-nav li ul{ -webkit-box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5); -moz-box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5); box-shadow: 6px 10px 10px -6px rgba(0,0,0,0.5); }
+	#aux-nav li.has-dropdown > a{ padding-right: 35px !important; }
+	#aux-nav li.has-dropdown .dropdown{ display: none !important; position: absolute; margin-left: 0; z-index: 1; width: auto; }
+	#aux-nav li.has-dropdown > .dropdown > li{ position: relative; width: 100%; }
+	#aux-nav li.has-dropdown > .dropdown > li.has-dropdown > a:after{ border: none; content: "\00bb"; top: 1rem; margin-top: 4px; right: 5px; line-height: 1.2; }
+	#aux-nav li.has-dropdown > .dropdown > li > .dropdown{ position: absolute; top: 0; left: 100%; }
+	#aux-nav li.has-dropdown:hover > .dropdown{ display: block !important; }
+}
+
+/** mega menu **/
+.megamenu {
+  border-top: 2px solid #E9E9E9;
+  /*display: none;*/
+  margin: 0px;
+}
+
+.fullwidth {
+  max-width: initial;
+}
+
+#nav-megamenu {
+  background: #E9E9E9 none repeat scroll 0% 0%;
+}
+	/*left side*/
+	#nav-megamenu .nav-sub {
+	  text-align: right;
+	}
+
+	#nav-megamenu .nav-sub h3 {
+	  padding: 3rem 2rem 0px;
+	}
+
+	#nav-megamenu .tabs.vertical {
+	  margin-bottom: 1.25rem;
+	  margin-left: 0;
+	  width: 100%;
+	  float: left;
+	}
+
+	.tabs.vertical .tab-title {
+	  top: auto;
+	  position: inherit;
+	  float: none;
+	  display: block;
+	}
+
+	#nav-megamenu .tabs .tab-title.active a {
+	  background: #F5F5F5 none repeat scroll 0% 0%;
+	  color: #222;
+	  display: block;
+	}
+
+	#nav-megamenu .tabs .tab-title a {
+	  background: #E9E9E9 none repeat scroll 0% 0%;
+	  font-family: "Roboto";
+	  text-transform: uppercase;
+	  padding: 1rem 2rem;
+	  display: block;
+	  color: #222;
+	}
+
+	/*right side*/
+	#nav-megamenu .nav-sub-content {
+	  background: #F5F5F5 none repeat scroll 0% 0%;
+	  min-height: 15em;
+	}
+
+	#nav-mega-menu {
+		margin-top: 58px;
+	}
+
+	.tabs-content.vertical {
+	  width: 80%;
+	  max-width: 80%;
+	  float: left;
+	  margin-left: -1px;
+	  margin-bottom: 0;
+	  padding-left: 1rem;
+	  display: block;
+	}
+
+	#nav-megamenu .tabs-content.vertical > .content {
+	  padding: 2rem 0.9375rem;
+	}
+
+	.top-bar-section li.active:not(.has-form) a:not(.button), 
+	.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
+	  background: #E4E4E4 none repeat scroll 0% 0%;
+	}
+
+/** accessibility panel **/
+#accessibility-widget {
+    float:left;
+    position:fixed;
+    top: 50%;
+    z-index: 200;
+    left: -42px;
+    margin-top: -42px;
+}
+#accessibility-widget ul {
+    list-style: none;
+    margin:0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+#accessibility-widget ul li {
+    text-align: center;
+    display: block;
+}
+#accessibility-widget ul li a {
+    display: block;
+    color: #000;
+    background: #e2e2e2;
+    text-align: center;
+    border-top: 1px solid #f5f5f5;
+    border-bottom: 1px solid #d2d2d2;
+    padding: 5px;
+}
+#accessibility-widget ul li a span {
+    display: block;
+    text-indent: -9999px;
+    background: url(./images/accessibility-sprites.png) no-repeat;
+    height: 24px;
+    width: 24px;
+    margin: 4px;
+}
+#accessibility-widget ul li #accessibility-mode {
+    position: fixed;
+    left: -10px;
+    border-radius: 0px 3px 0 0px;
+    margin-top: -43px;
+    background: #ff7c7c;
+    border-bottom: 0;
+    opacity: 0.8;
+}
+#accessibility-widget ul li #accessibility-mode span {
+    background-position: 0 0;
+    height: 22px;
+    margin: 5px;
+	margin: 5px 0px;
+}
+#accessibility-widget ul li a#accessibility-mode.active span {
+    background-position: 0px -22px;
+}
+#accessibility-widget ul li a#accessibility-contrast span {
+    background-position: 0px -44px;
+}
+#accessibility-widget ul li a#accessibility-grayscale span {
+    background-position: 0px -69px !important;
+}
+#accessibility-widget ul li a#accessibility-statement span {
+    background-position: 0px -94px !important;
+}
+body.contrast #accessibility-widget ul li a#accessibility-mode span {
+    background: -24px 0px url(./images/accessibility-sprites.png) no-repeat !important;
+}
+body.contrast #accessibility-widget ul li a#accessibility-mode.active span {
+    background: -24px -22px url(./images/accessibility-sprites.png) no-repeat !important;
+}
+body.contrast #accessibility-widget ul li a#accessibility-contrast span {
+    background: -24px -44px url(./images/accessibility-sprites.png) no-repeat !important;
+}
+body.contrast #accessibility-widget ul li a#accessibility-grayscale span {
+    background: -24px -69px url(./images/accessibility-sprites.png) no-repeat !important;
+}
+body.contrast #accessibility-widget ul li a#accessibility-fontsize span {
+    background: -24px -94px url(./images/accessibility-sprites.png) no-repeat !important;
+}
+#accessibility-widget ul li a:hover {
+    background-color: #fff;
+}
+#accessibility-statement-content {
+    background: #fff;
+    border-radius: 5px;
+    border: 1px solid #000;
+    padding: 20px;
+    margin: 10% 10% 0;
+    width: 80%;
+    z-index: 102;
+    display: none;
+    position: absolute;
+}
+#accessibility-statement-content .statement-textarea {
+    min-height: 458px;
+    font-family:'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
+    font-size: 100%;
+    line-height: 1.4em;
+    width: 100%;
+}
+#accessibility-statement-content.statement-active {
+    display: block;
+}
+#darklight {
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    display: none;
+    cursor: hand;
+    z-index: 101;
+}
\ No newline at end of file