create two version old and new

new/styles/nav.css

@@ -0,0 +1,102 @@
+
+/*---------------------------------------------*/
+/*NAVBAR*/
+nav iframe {
+	width: 100%;
+}
+body#body_navbar {
+	background-color: transparent;
+	overflow: hidden;
+}
+.navbar {
+	flex-direction: row;
+	/*we have to set the height to use the height % for childs elements*/
+	height: var(--nav-height);
+	background-color: var(--color-back-base);
+	border-bottom: 1px solid var(--color-lines-4);
+}
+.navbar * {
+	display: flex;
+	flex-direction: row;
+	margin: auto;
+	height: 100%;
+}
+/* nav_left is used for links to pages*/
+.navbar .nav_left {
+	margin-left: 0px;
+}
+.navbar .nav_left a {
+	padding: 0px 20px;
+}
+.navbar .nav_left #nav_logo {
+	padding-left: 40px;
+	padding-right: 40px;
+}
+.navbar a > * {
+	/*to center vertically the text*/
+	height: auto;
+}
+.navbar .nav_left img {
+	height: calc(100% - 4px);
+}
+.navbar a:hover, .navbar a:focus {
+	background-color: var(--color-back-dark);
+}
+.navbar a#nav_logo:hover, .navbar a#nav_logo:focus {
+	background-color: var(--color-back-base);
+}
+/* nav_right is used for actions such as connection, search or language*/
+.navbar .nav_right {
+	margin-right: 0px;
+}
+
+
+
+
+
+
+/*---------------------------------------------*/
+/*LANGUAGE*/
+/*
+	nav_right
+		language selected
+		language
+		language inactive
+*/
+.navbar .nav_right .language {
+	position: relative;
+	padding: 0px 10px;
+}
+/* horizontal space between flag and name*/
+.navbar .nav_right .language > * {
+	margin: auto 3px;
+}
+/*flag size*/
+.navbar .nav_right .language img.flag {
+	height:  12px;
+}
+/*text size*/
+.navbar .nav_right .language p {
+	font-size:  1.6em;
+}
+/*selected language*/
+.navbar .language.selected {
+	background-color: var(--color-back-dark);
+	pointer-events: none;
+}
+/*inactive language*/
+.navbar .language.inactive {
+	pointer-events: none;
+	filter: grayscale(100%);
+}
+
+
+/*menu burger responsive*/
+nav.navbar input#burger {
+		display: none;
+}
+nav.navbar .burger {
+	margin: 0px;
+}
+
+