update style

2 files changed, 213 insertions, 140 deletions

diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 055f8e9b6..ec5231290 100644
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -2,27 +2,9 @@
  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
  **/
 /* fonts */
-@font-face {
-  font-family: "LiberationSans";
-  src: local("Liberation Sans"), url(LiberationSans-Regular.ttf) format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "LiberationSans";
-  src: local("Liberation Sans"), url(LiberationSans-Bold.ttf) format("truetype");
-  font-weight: bold;
-  font-style: normal;
-}
-@font-face {
-  font-family: "LiberationSans";
-  src: local("Liberation Sans"), url(LiberationSans-Italic.ttf) format("truetype");
-  font-weight: normal;
-  font-style: italic;
-}
 /* global */
 body {
-  font-family: LiberationSans, helvetica, arial, freesans, clean, sans-serif;
+  font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
   font-size: 12px;
   background-color: #FFFFFF;
   color: #2d2d2d;
@@ -41,37 +23,81 @@ a:hover {
 .right {
   float: right;
 }
+/* icons */
+.icon {
+  background-color: transparent ;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: block;
+  overflow: hidden;
+  text-indent: -9999px;
+}
+.icon.s22 {
+  width: 22px;
+  height: 22px;
+  padding: 1px;
+}
+.icon.s22.notify {
+  background-image: url("../../../images/icons/notify_off_22.png");
+}
+.icon.s22.gear {
+  background-image: url("../../../images/icons/gear_22.png");
+}
+/* header */
+header {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 12px;
+  color: #FFFFFF;
+}
+header #site-location {
+  /*font-size:8px;
+		float:left;
+		background-color: @Metalic3;
+		padding: 1px 5px;
+		margin-left: 20px;
+		.roundbottom()*/
+
+  display: none;
+}
 /* nav */
 nav {
   width: 100%;
-  height: 50px;
+  height: 32px;
+  position: fixed;
+  left: 0px;
+  top: 0px;
   background-color: #0e232e;
   color: #FFFFFF;
 }
 nav a,
+nav a:active,
 nav a:visited,
 nav a:link,
 nav a:hover {
   color: #FFFFFF;
   text-decoration: none;
+  outline: none;
 }
-nav #site-location {
-  font-size: 8px;
-  float: left;
-  background-color: #364e59;
-  padding: 1px 5px;
-  margin-left: 20px;
-  -moz-border-radius: 0 0 5px 5px;
-  -webkit-border-radius: 0 0 5px 5px;
-  border-radius: 0 0 5px 5px;
-}
-nav #nav {
-  clear: both;
+nav ul {
+  margin: 0px;
   padding: 0px 20px;
-  height: auto;
-  padding-top: 6px;
 }
-nav #nav .nav-menu-icon {
+nav ul li {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  float: left;
+}
+nav ul li .menu-popup {
+  left: 0px;
+  right: auto;
+}
+nav .nav-menu-icon {
   position: relative;
   height: 22px;
   padding: 5px;
@@ -80,14 +106,17 @@ nav #nav .nav-menu-icon {
   -webkit-border-radius: 5px 5px 0 0;
   border-radius: 5px 5px 0 0;
 }
-nav #nav .nav-menu-icon.selected {
+nav .nav-menu-icon.selected {
   background-color: #364e59;
 }
-nav #nav .nav-menu-icon img {
+nav .nav-menu-icon img {
   width: 22px;
   height: 22px;
 }
-nav #nav .nav-menu {
+nav .nav-menu-icon .nav-notify {
+  top: 3px;
+}
+nav .nav-menu {
   position: relative;
   height: 16px;
   padding: 5px;
@@ -95,10 +124,11 @@ nav #nav .nav-menu {
   font-size: 14px;
   border-bottom: 3px solid #0e232e;
 }
-nav #nav .nav-menu.selected {
+nav .nav-menu.selected {
   border-bottom: 3px solid #9eabb0;
 }
-nav #nav .nav-menu .nav-notify {
+nav .nav-notify {
+  display: none;
   position: absolute;
   background-color: #19aeff;
   -moz-border-radius: 5px 5px 5px 5px;
@@ -111,10 +141,22 @@ nav #nav .nav-menu .nav-notify {
   min-width: 15px;
   text-align: right;
 }
+nav .nav-notify.show {
+  display: block;
+}
+nav #nav-site-link {
+  float: right;
+}
+nav #nav-site-link .menu-popup {
+  right: 0px;
+  left: auto;
+}
+nav #nav-notifications-link.selected .icon.s22.notify {
+  background-image: url("../../../images/icons/notify_on_22.png");
+}
 ul.menu-popup {
   position: absolute;
-  /*display: none;*/
-
+  display: none;
   width: auto;
   background: #FFFFFF;
   color: #2d2d2d;
@@ -135,34 +177,26 @@ ul.menu-popup a:hover {
 ul.menu-popup .menu-sep {
   border-top: 1px solid #9eabb0;
 }
-.left .menu-popup {
-  left: 0px;
-}
-.right .menu-popup {
-  right: 0px;
-}
-/* icons */
-.icon {
-  background-color: transparent ;
-  background-repeat: no-repeat;
-  background-position: center center;
+ul.menu-popup li {
+  float: none;
+  overflow: auto;
+  height: auto;
   display: block;
 }
-.icon.s22 {
-  width: 22px;
-  height: 22px;
+#nav-notifications-menu {
+  width: 400px;
 }
-.icon.s22.notify_off {
-  background-image: url("../../../images/icons/notify_off_22.png");
+#nav-notifications-menu img {
+  float: left;
+  margin-right: 5px;
 }
-.icon.s22.notify_on {
-  background-image: url("../../../images/icons/notify_on_22.png");
+#nav-notifications-menu .contactname {
+  font-weight: bold;
 }
-/* aside */
-aside {
-  display: none;
+#nav-notifications-menu .notif-when {
+  font-size: 10px;
+  color: #9eabb0;
+  display: block;
 }
+/* aside */
 /* section */
-section {
-  display: none;
-}
diff --git a/view/theme/quattro/style.less b/view/theme/quattro/style.less
index e267834a6..53f833cfd 100644
--- a/view/theme/quattro/style.less
+++ b/view/theme/quattro/style.less
@@ -37,25 +37,27 @@
 
  
 /* fonts */
-@font-face {  
-  font-family: "LiberationSans";  
-  src: local("Liberation Sans"), url( LiberationSans-Regular.ttf ) format("truetype");
-  font-weight: normal; font-style: normal;
-}
-@font-face {  
-  font-family: "LiberationSans";  
-  src: local("Liberation Sans"), url( LiberationSans-Bold.ttf ) format("truetype");
-  font-weight: bold; font-style: normal;
-}
-@font-face {  
-  font-family: "LiberationSans";  
-  src: local("Liberation Sans"), url( LiberationSans-Italic.ttf ) format("truetype");
-  font-weight: normal; font-style: italic;
-}
- 
+// @font-face {  
+//   font-family: "LiberationSans";  
+//   src: local("Liberation Sans"),url( LiberationSans-Regular.ttf ) format("truetype");
+//   font-weight: bold; font-style: italic;
+// }
+// 
+// @font-face {  
+//   font-family: "LiberationSans";  
+//   src: local("Liberation Sans"),url( LiberationSans-Bold.ttf ) format("truetype");
+//   font-weight: bold; font-style: normal;
+// }
+// @font-face {  
+//   font-family: "LiberationSans";  
+//   src:  local("Liberation Sans"),url( LiberationSans-Italic.ttf ) format("truetype");
+//   font-weight: normal; font-style: italic;
+// }
+
+
 /* global */
 body {
-	font-family: LiberationSans,helvetica,arial,freesans,clean,sans-serif;
+	font-family: Liberation Sans,helvetica,arial,clean,sans-serif;
 	font-size: 12px;
 	background-color: #FFFFFF;
 	color: @Grey5;
@@ -77,28 +79,70 @@ a:hover {text-decoration: underline; }
 .left { float: left; }
 .right { float: right; }
 
-/* nav */
-nav { 
-	width: 100%; height: 50px; 
-	background-color: @Metalic4;
-	color: #FFFFFF;
-	a, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; }
+/* icons */
+
+
+.icons(@size: 22) {
+	&.notify { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
+	&.gear 	 { background-image: url("../../../images/icons/gear_@{size}.png"); }
+}
+
+
+.icon {
+	background-color: transparent ;
+	background-repeat: no-repeat;
+	background-position: center center;
+	display: block;
+	overflow: hidden;
+	text-indent: -9999px;
+
+	&.s22 {
+		width:22px; height: 22px;
+		padding: 1px;
+		.icons(22);
+	}
+	
+}
+
 
+
+/* header */
+header {
+	position: fixed; left: 0px; top: 0px;
+	margin: 0px; padding: 0px;
+	width: 100%; height: 12px; 
+	color: #FFFFFF;
 	#site-location {
-		font-size:8px;
+		/*font-size:8px;
 		float:left;
 		background-color: @Metalic3;
 		padding: 1px 5px;
 		margin-left: 20px;
-		.roundbottom()
+		.roundbottom()*/
+		display: none;
 	}
+}
+/* nav */
+nav { 
+	width: 100%; height: 32px;
+	position: fixed; left: 0px; top: 0px;
+	background-color: @Metalic4;
+	color: #FFFFFF;
+
+		a, a:active, a:visited, a:link, a:hover { color: #FFFFFF; text-decoration: none; outline: none;  }
+
+		ul {
+			margin: 0px;
+			padding: 0px 20px;
+			li { 
+				list-style: none; 
+				margin: 0px; padding: 0px;
+				float: left;
+				.menu-popup{ left: 0px; right: auto; }
+			}
+			
+		}
 
-	#nav {
-		clear: both;
-		padding: 0px 20px;
-		height: auto;
-		padding-top: 6px;
-	
 		.nav-menu-icon {
 			position: relative;
 			height: 22px;
@@ -110,7 +154,8 @@ nav {
 				background-color: @Metalic3;
 			}
 			
-			img { width: 22px; height: 22px; }
+				img { width: 22px; height: 22px; }
+				.nav-notify { top: 3px; }
 		}
 
 		.nav-menu {
@@ -124,26 +169,37 @@ nav {
 				border-bottom: 3px solid @Metalic2;
 			}
 			
-			.nav-notify {
-				position: absolute;
-				background-color: @Blue1;
-				.rounded();
-				font-size: 10px;
-				padding: 1px 3px;
-				top: 0px;
-				right: -10px;
-				min-width: 15px;
-			    text-align: right;
-			}
+		}
+
+		.nav-notify {
+			display: none;
+			position: absolute;
+			background-color: @Blue1;
+			.rounded();
+			font-size: 10px;
+			padding: 1px 3px;
+			top: 0px;
+			right: -10px;
+			min-width: 15px;
+			text-align: right;
 			
+				&.show{ display: block; }
 		}
 		
-	}
+		
+		
+		#nav-site-link { 
+			float: right;
+			.menu-popup{ right: 0px; left: auto; }
+		}
+	
+		#nav-notifications-link.selected .icon.s22.notify { background-image: url("../../../images/icons/notify_on_22.png") }
+		
 }
 
 ul.menu-popup {
 	position: absolute;
-	/*display: none;*/
+	display: none;
 	width: auto;
 	background: #FFFFFF;
 	color: @Grey5;
@@ -151,43 +207,26 @@ ul.menu-popup {
 	padding: 0px;
 	list-style: none;
 	border: 3px solid @Metalic3;
-	a { display: block; color: @Grey5; padding: 5px 10px;}
-	a:hover { background-color: @Metalic1; }
 	z-index: 100000;
-	
-	.menu-sep  {
-		border-top: 1px solid @Metalic2;
-	}
+		
+		a { display: block; color: @Grey5; padding: 5px 10px;}
+		a:hover { background-color: @Metalic1; }
+		.menu-sep  { border-top: 1px solid @Metalic2; }
+		li { float: none;  overflow: auto; height: auto; display: block; }
 }
-.left .menu-popup{ left: 0px; }
-.right .menu-popup{ right: 0px; }
-
-/* icons */
 
-
-.icons(@size: 22) {
-	&.notify_off { background-image: url("../../../images/icons/notify_off_@{size}.png"); }
-	&.notify_on  { background-image: url("../../../images/icons/notify_on_@{size}.png"); }
+#nav-notifications-menu {
+	width: 400px;
+	img { float: left; margin-right: 5px; }
+	.contactname { font-weight: bold; }
+	.notif-when { font-size: 10px; color: @Metalic2; display: block; }
 }
 
 
-.icon {
-	background-color: transparent ;
-	background-repeat: no-repeat;
-	background-position: center center;
-	display: block;
-
-	&.s22 {
-		width:22px; height: 22px;
-		.icons(22);
-	}
-	
-}
-
 
 
 /* aside */
-aside { display: none; }
+// aside { display: none; }
 
 /* section */
-section { display: none;}
+// section { display: none;}