Changes that did not get committed. Not sure why.

imports/ui/layouts/Public.import.styl

@@ -8,6 +8,7 @@
 		background: #FDFDFD
 
 		.topBar
+			display: relative
 			.logoLeft
 				cursor: pointer
 				z-index: 1
@@ -23,7 +24,8 @@
 			.menuBar
 				list-style-type:none
 				margin: 15px 0 0 0
-				padding:0
+				padding: 0
+				margin-right: 10px
 				overflow:hidden
 				display: inline-block
 				float: right
@@ -43,10 +45,58 @@
 					a.active
 						color: #777777
 						cursor: default
+			.dropMenu
+				display: none
+				position: absolute
+				width: 100%
+				z-index: 9999
+				background: #d8e3f6
+				height: 104px
+				margin: 0 0 10px 0
+				padding-top: 2px
+				color: white
+				a
+					display: block
+					color: #226699
+					font-family: Corbel, "Helvetica Neue", Helvetica, Arial, sans-serif
+					font-size: 18px
+					font-weight: 800
+					line-height: 19px
+					text-align: left
+					text-decoration: none
+					padding: 2px 0 2px 6px
+					margin: 2px 0
+				a:hover
+					color: white
+					background-color: #226699
+				a:active
+					color: #AAA
+				p
+					color: #DDF
+					font-family: Georgia, serif
+					font-size: 10px
+					text-indent: 0
+					text-wrap: none
+					line-height: 10px
+					margin: 0 0 2px 0
+					padding: 0
+				.leftMenu
+					position: absolute
+					left:0
+					width: 50%
+					div
+						max-height: 30px
+				.rightMenu
+					position: absolute
+					left:50%
+					right:0
+					div
+						max-height: 30px
 
 	.theKey
 		color: #269
-
+		margin-top: 2px
+		margin-left: 4px
 	.footer
 		text-align: center
 		padding-bottom: 40px
@@ -67,7 +117,11 @@
 		text-transform: uppercase
 		font-size: 10px
 
-	@media(max-width: 549px)
+	// Some media settings for the MENU
+	// Small Screens
+	@media(max-width: 699px)
+		.dropMenu
+			visibility: visible
 		.level1, .level2
 			display: none
 		#page
@@ -109,19 +163,11 @@
 				opacity: .7
 				color: black
 				border-bottom: 1px solid red
-		.copyright
-			font-size: 7px
-		.byline
-			float: left
-			clear: both
-			text-align: left
-			font-size: 7px
-		.footer
-			font-size: 7px
-			text-align: left
-
-	// Large Screens
-	@media(min-width: 550px)
+	// Large Screens (MENU)
+	@media(min-width: 700px)
+		.dropMenu
+			display: none
+			visibility: hidden
 		.barButton
 			display: none
 		#page
@@ -169,4 +215,39 @@
 				opacity: 1
 				color: black
 				background: transparent
-				border-bottom: 3px solid #a20010
+				border-bottom: 3px solid #a20010
+
+		//Some settings for the FOOTER
+	@media(max-width: 800px)
+		.copyright
+			font-size: 10px
+		.byline
+			float: left
+			clear: both
+			text-align: left
+			font-size: 10px
+		.footer
+			font-size: 10px
+			text-align: left
+	@media(max-width: 600px)
+		.copyright
+			font-size: 8px
+		.byline
+			float: left
+			clear: both
+			text-align: left
+			font-size: 8px
+		.footer
+			font-size: 8px
+			text-align: left
+	@media(max-width: 500px)
+		.copyright
+			font-size: 7px
+		.byline
+			float: left
+			clear: both
+			text-align: left
+			font-size: 7px
+		.footer
+			font-size: 7px
+			text-align: left