Updated navigation and some CSS in header

src/templates/base.html

@@ -14,6 +14,7 @@
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
 		<link href="https://www.mendix.com/favicon.ico" rel="shortcut icon">
         <link href="/content/style/default.css" rel="stylesheet" type="text/css">
+		<link href="/content/style/fonts.css" rel="stylesheet" type="text/css">
         <script type='text/javascript' src='/content/js/com.cnprog.utils.js'></script>
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="{{ mxid_url }}/navigation/mxid/mxidtopbar.js"></script>

src/templates/base_content.html

@@ -10,6 +10,7 @@
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
 		<link href="https://www.mendix.com/favicon.ico" rel="shortcut icon">
         <link href="/content/style/default.css" rel="stylesheet" type="text/css">
+		<link href="/content/style/fonts.css" rel="stylesheet" type="text/css">
 		 {% spaceless %}
         {% block forestyle %}{% endblock %}
         {% endspaceless %}

src/templates/base_homepage.html

@@ -14,6 +14,7 @@
 		<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
 		<link href="https://www.mendix.com/favicon.ico" rel="shortcut icon">
         <link href="/content/style/default.css" rel="stylesheet" type="text/css">
+		<link href="/content/style/fonts.css" rel="stylesheet" type="text/css">
         <script type='text/javascript' src='/content/js/com.cnprog.utils.js'></script>
         <script src="https://www.google.com/jsapi"></script>
         <script type="text/javascript" src="{{ mxid_url }}/navigation/mxid/mxidtopbar.js"></script>

src/templates/content/style/default.css

@@ -243,12 +243,12 @@ button,
 	cursor: pointer;
 }
 .btn-start-for-free, .btn-start-for-free:visited {
-	padding: 6px 15px 5px 15px;
+	padding: 6px 12px 5px 10px;
 	background: #76ca02;
-	font-size: 15px;
+	font-size: 14px;
 }
 .btn-start-for-free:hover, .btn-start-for-free:focus {
-	background: #ff9e00;
+	background: #4ba303;
 }
 .site-header {
 	position: relative;
@@ -333,7 +333,7 @@ ul.nav-menu, div.nav-menu > ul {
 }
 .nav-menu .sub-menu li a {
 	display: block;
-	padding: 0 0 0 20px;
+	padding: 0;
 	white-space: nowrap;
 	font-size: 14px;
 	color: #1b82ba;
@@ -344,28 +344,11 @@ ul.nav-menu, div.nav-menu > ul {
 	-o-transition: none;
 	transition: none;
 }
-.nav-menu .sub-menu li a.navFAQs { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-faqs.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navHowTos { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-how-tos.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navReferenceGuide { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-reference-guide.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navAPIs { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-apis.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navReleaseNotes { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-release-notes.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navDeveloperTools { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-developer-tools.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navGetStarted { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-get-started.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navVideoTutorials { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-video-tutorials.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navClassroomCourses { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-classroom-courses.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navIntroductionCourse { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-introduction-course.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navOnDemandWebinars { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-webinars.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navCertification { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-certification.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navJobs { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-jobs.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navForum { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-forum.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navModelShare { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-model-share.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navAppStore { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-app-store.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navBlog { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-blog.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navEvents { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-events.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a.navSupportOverview { background: transparent url(https://developers.mendix.com/wp-content/themes/mendix/images/nav-support-overview.png) 0 0 no-repeat; }
-.nav-menu .sub-menu li a:hover, .nav-menu .sub-menu li a:focus {
+.nav-menu .sub-menu li a span {
+	color: #797979;
+}
+.nav-menu .sub-menu li a:hover, .nav-menu .sub-menu li a:focus, .nav-menu .sub-menu li a:hover span, .nav-menu .sub-menu li a:focus span {
 	color: #23a7e8 !important;
-	background-position: 0 -20px !important;
 }
 .menu-toggle {
 	display: none;
@@ -378,6 +361,7 @@ ul.nav-menu, div.nav-menu > ul {
 }
 .header-buttons a.btn-start-for-free {
 	margin-right: 7px;
+	border-radius: 3px;
 }
 .header-buttons a.btn-start-for-free, #mxid_topbar_attachpoint {
 	float: left;
@@ -438,11 +422,11 @@ a.mxid_topbar_login:hover {
 	display: block;
 	position: absolute;
 	top: 67px;
-	left: -146px;
+	right: 0;
 	z-index: 99999;
 	background: #f0f0ee;
 	padding: 28px 21px 12px 27px;
-	width: 170px;
+	width: 218px;
 }
 .mxid_topbar .mxid_topbar_menuTrigger:hover .mxid_topbar_menu a {
 	display: block;

src/templates/content/style/fonts.css

@@ -0,0 +1,243 @@
+@font-face {
+	font-family: 'icomoon';
+	src:url('../fonts/icomoon.eot?-a5in3b');
+	src:url('../fonts/icomoon.eot?#iefix-a5in3b') format('embedded-opentype'),
+		url('../fonts/icomoon.woff2?-a5in3b') format('woff2'),
+		url('../fonts/icomoon.ttf?-a5in3b') format('truetype'),
+		url('../fonts/icomoon.woff?-a5in3b') format('woff'),
+		url('../fonts/icomoon.svg?-a5in3b#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+	position: relative;
+	top: 1px;
+	font-family: 'icomoon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	color: #888;
+	}
+	a [class^="icon-"], a [class*=" icon-"] {
+		color: inherit;
+	}
+
+.icon-calendar:before {
+	content: "\ea5f";
+}
+.icon-calendar:after {
+	content: " ";
+}
+.icon-arrow-right:before {
+	content: "\edc5";
+}
+.icon-user:before {
+	content: "\eb05";
+}
+.icon-user:after {
+	content: " ";
+}
+.icon-newwindow:before {
+	content: "\eec6";
+}
+.icon-location:before {
+	content: "\ea38";
+}
+.icon-location:after {
+	content: " ";
+}
+.icon-modelshare:before {
+	content: "\e600";
+}
+.icon-modelshare:after {
+	content: " ";
+}
+.icon-webinars:before {
+	content: "\ec82";
+}
+.icon-webinars:after {
+	content: " ";
+}
+.icon-blog:before {
+	content: "\e90e";
+}
+.icon-blog:after {
+	content: " ";
+}
+.icon-intro:before {
+	content: "\e99e";
+}
+.icon-intro:after {
+	content: " ";
+}
+.icon-advanced:before {
+	content: "\e993";
+}
+.icon-advanced:after {
+	content: " ";
+}
+.icon-appstore:before {
+	content: "\e9fe";
+}
+.icon-appstore:after {
+	content: " ";
+}
+.icon-forum:before {
+	content: "\ead9";
+}
+.icon-forum:after {
+	content: " ";
+}
+.icon-certification:before {
+	content: "\eb9d";
+}
+.icon-certification:after {
+	content: " ";
+}
+.icon-jobs:before {
+	content: "\ebff";
+}
+.icon-jobs:after {
+	content: " ";
+}
+.icon-tools:before {
+	content: "\ec1c";
+}
+.icon-tools:after {
+	content: " ";
+}
+.icon-start:before {
+	content: "\ec36";
+}
+.icon-start:after {
+	content: " ";
+}
+.icon-play:before {
+	content: "\e601";
+}
+.icon-play:after {
+	content: " ";
+}
+.icon-tag:before {
+	content: "\ecb4";
+}
+.icon-tag:after {
+	content: " ";
+}
+.icon-github:before {
+	content: "\ef10";
+}
+.icon-google-plus:before {
+	content: "\eee5";
+}
+.icon-facebook:before {
+	content: "\eee9";
+}
+.icon-twitter:before {
+	content: "\eeee";
+}
+.icon-linkedin:before {
+	content: "\ef24";
+}
+.icon-menu:before {
+    content: "\ec6e";
+}
+.icon-x:before {
+	content: "\e603";
+}
+.icon-plus:before {
+	content: "\ed5a";
+}
+.icon-minus:before {
+	content: "\ed5b";
+}
+.icon-arrow-up:before {
+	content: "\edc4";
+}
+.icon-quotes-left:before {
+	content: "\eb18";
+}
+.icon-quotes-left:after {
+	content: " ";
+}
+.icon-quotes-right:after {
+	content: "\eb19";
+}
+.icon-quotes-right:before {
+	content: " ";
+}
+.icon-community:before {
+    content: "\eaf5";
+}
+.icon-community:after {
+    content: " ";
+}
+.icon-graduate:before {
+    content: "\e800";
+}
+.icon-arrow-down:before {
+	content: "\edc6";
+}
+.icon-checkmark:before {
+	content: "\ed6c";
+}
+.icon-checkmark:after {
+	content: " ";
+}
+.icon-question:before {
+	content: "\ed53";
+}
+.icon-bullet:before {
+	content: "\ee75";
+}
+.icon-bullet:after {
+	content: "\00a0\00a0\00a0";
+}
+.icon-mvp:before {
+	content: "\eba5";
+}
+.icon-mvp:after {
+	content: " ";
+}
+.icon-essentials:before {
+	content: "\e963";
+}
+.icon-essentials:after {
+	content: " ";
+}
+.icon-api:before {
+	content: "\eb5c";
+}
+.icon-api:after {
+	content: " ";
+}
+.icon-reference:before {
+	content: "\e9a2";
+}
+.icon-reference:after {
+	content: " ";
+}
+.icon-howto:before {
+	content: "\e9aa";
+}
+.icon-howto:after {
+	content: " ";
+}
+.icon-sdk:before {
+	content: "\e9cf";
+}
+.icon-sdk:after {
+	content: " ";
+}
+.icon-release:before {
+	content: "\e9ad";
+}
+.icon-release:after {
+	content: " ";
+}

src/templates/header.html

@@ -11,27 +11,36 @@
 						<a class="screen-reader-text skip-link" href="#content" title="Skip to content">Skip to content</a>
 						<div class="menu-nav-container">
 							<ul id="menu-nav" class="nav-menu">
-								<li><a href="https://world.mendix.com/display/docs/Overview">Docs &amp; API</a></li>
+								<li>
+									<a href="https://world.mendix.com/display/docs/Overview">Docs &amp; API</a>
+									<ul class="sub-menu">
+										<li><a href="https://world.mendix.com/display/apidocs/"><span class="icon-api"></span>API Documentation</a></li>
+										<li><a href="https://world.mendix.com/display/refguide6/"><span class="icon-reference"></span>Reference Guide</a></li>
+										<li><a href="https://world.mendix.com/display/howto6/"><span class="icon-howto"></span>How-to's</a></li>
+										<li><a href="{{ mxdevsite_url }}/model-sdk/"><span class="icon-sdk"></span>Model SDK</a></li>
+										<li><a href="https://world.mendix.com/display/ReleaseNotes/"><span class="icon-release"></span>Release Notes</a></li>
+									</ul>
+								</li>
 								<li>
 									<a href="{{ mxdevsite_url }}/training/">Training</a>
 									<ul class="sub-menu">
-										<li><a href="{{ mxdevsite_url }}/training/get-started/" class="navGetStarted">Get Started</a></li>
-										<li><a href="{{ gettingstarted_url }}/link/courses/introductioncourse" class="navIntroductionCourse" target="_blank">Introduction Course</a></li>
-										<li><a href="{{ mxacademy_url }}/training/courses" class="navClassroomCourses">Classroom Courses</a></li>
-										<li><a href="{{ mxdevsite_url }}/training/certification" class="navCertification">Certification</a></li>
-										<li><a href="{{ mxdevsite_url }}/training/webinars/" class="navOnDemandWebinars">On-Demand Webinars</a></li>
+										<li><a href="{{ mxdevsite_url }}/training/"><span class="icon-start"></span>Online &amp; Classroom Training</a></li>
+										<li><a href="{{ mxdevsite_url }}/training/mendix-essentials/"><span class="icon-essentials"></span>Mendix Essentials</a></li>
+										<li><a href="{{ mxdevsite_url }}/training/certification/"><span class="icon-certification"></span>Certification</a></li>
+										<li><a href="{{ mxdevsite_url }}/training/webinars/"><span class="icon-webinars"></span>On-Demand Webinars</a></li>
 									</ul>
 								</li>
 								<li>
 									<a href="{{ mxdevsite_url }}/community/">Community</a>
 									<ul class="sub-menu">
-										<li><a href="{{ mxdevsite_url }}/jobs" class="navJobs">Jobs</a></li>
-										<li><a href="{{ my_url }}" class="navForum">Forum</a></li>
-										<li><a href="{{ modelshare_url }}" class="navModelShare">Model Share</a></li>
-										<li><a href="{{ mxappstore_url }}/" target="_blank" class="navAppStore">App Store</a></li>
-										<li><a href="{{ mxwww_url }}/tag/developers/" class="navBlog">Developer Blog</a></li>
-										<li><a href="{{ mxdevsite_url }}/spotlight/" class="navBlog">Community Blog</a></li>
-										<li><a href="{{ mxdevsite_url }}/community#devtools" class="navEvents">Developer Tools</a></li>
+										<li><a href="{{ mxdevsite_url }}/jobs/"><span class="icon-jobs"></span>Jobs</a></li>
+										<li><a href="{{ my_url }}"><span class="icon-forum"></span>Forum</a></li>
+										<li><a href="{{ mxdevsite_url }}/mvp-program/"><span class="icon-mvp"></span>MVP Program</a></li>
+										<li><a href="{{ modelshare_url }}"><span class="icon-modelshare"></span>Model Share</a></li>
+										<li><a href="{{ mxappstore_url }}/" target="_blank"><span class="icon-appstore"></span>App Store</a></li>											
+										<li><a href="{{ mxwww_url }}/tag/developers/"><span class="icon-blog"></span>Developer Blog</a></li>
+										<li><a href="{{ mxdevsite_url }}/spotlight/"><span class="icon-community"></span>Community Blog</a></li>
+										<li><a href="{{ mxdevsite_url }}/community/#devtools"><span class="icon-tools"></span>Developer Tools</a></li>
 									</ul>
 								</li>
 								<li>