From 2905a9efee40421cec36d0416dc281399f6ee01a Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Thu, 12 Jan 2017 15:13:09 +0100
Subject: [PATCH 01/21] Changed background color header

---
 website/styles/header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/styles/header.css b/website/styles/header.css
index ffeaab6..038275f 100644
--- a/website/styles/header.css
+++ b/website/styles/header.css
@@ -8,7 +8,7 @@ header {
     width: 100%;
 
     color: white;
-    background-color: #845663;
+    background-color: rgba(132,86,99, 0.98);
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 

From d2ab86c0a255a907d1411db5b204a959d421622a Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Thu, 12 Jan 2017 15:41:46 +0100
Subject: [PATCH 02/21] Prepared for uniform css inputs

---
 website/styles/header.css     | 13 -------------
 website/styles/search.css     |  3 ---
 website/views/search-view.php |  3 +++
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/website/styles/header.css b/website/styles/header.css
index ffeaab6..eb1451e 100644
--- a/website/styles/header.css
+++ b/website/styles/header.css
@@ -25,19 +25,6 @@ header {
     padding-left: 48px;
 }
 
-#header-search input[type="text"] {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-}
-
-#header-search input[type="submit"] {
-    background: none;
-    color: white;
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-
-
 header div {
     display: inline-block;
 }
diff --git a/website/styles/search.css b/website/styles/search.css
index 912723e..e69de29 100644
--- a/website/styles/search.css
+++ b/website/styles/search.css
@@ -1,3 +0,0 @@
-.search-form input {
-    border-bottom: #845663 solid 1px;
-}
\ No newline at end of file
diff --git a/website/views/search-view.php b/website/views/search-view.php
index 27c794c..1bd2286 100644
--- a/website/views/search-view.php
+++ b/website/views/search-view.php
@@ -18,6 +18,9 @@
                 <option value="groups">Groepen</option>x
                 <option value="friends">Vrienden</option>
             </select>
+            <input type="submit"
+                   value="Zoek"
+            />
         </form>
     </div>
     <div class="platform">

From 984800fd0c5a90460be84e571dd5b1b9b0bcf7d2 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Thu, 12 Jan 2017 15:52:14 +0100
Subject: [PATCH 03/21] End of day.

---
 website/styles/settings.css     | 13 +++++++++++--
 website/views/settings-view.php | 13 ++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/website/styles/settings.css b/website/styles/settings.css
index 751d0dc..9a2c753 100644
--- a/website/styles/settings.css
+++ b/website/styles/settings.css
@@ -1,10 +1,11 @@
 .settings input,
-.settings textarea{
+.settings textarea {
     margin: 5px;
+    resize: none;
 }
 
 .settings label {
-    width: 125px;
+    width: 175px;
     display: inline-block;
     text-align: right;
 }
@@ -16,4 +17,12 @@
 .settings input[type="email"],
 .settings textarea {
     width: 200px;
+}
+
+.settings textarea {
+    width: 400px;
+}
+
+.settings label[for="bio"] {
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/website/views/settings-view.php b/website/views/settings-view.php
index 7caf36c..797217e 100644
--- a/website/views/settings-view.php
+++ b/website/views/settings-view.php
@@ -36,7 +36,6 @@
             <label for="bio">Bio</label>
             <textarea name="bio"
                       rows="5"
-                      cols="10"
                       title="bio"
                       id="bio"
             ></textarea>
@@ -48,22 +47,25 @@
             >
         </form>
 
-
         <form class="settings-password platform" method="post">
             <h5>Verander Wachtwoord</h5>
             <br />
+            <label>Oud Wachtwoord</label>
             <input type="password"
                    name="password-old"
                    placeholder="Oud wachtwoord"
             ><br />
+            <label>Nieuw wachtword</label>
             <input type="password"
                    name="password-new"
                    placeholder="Nieuw wachtwoord"
             ><br />
+            <label>Bevestig wachtwoord</label>
             <input type="password"
                    name="password-confirm"
                    placeholder="Bevestig wachtwoord"
             ><br />
+            <label></label>
             <input type="submit"
                    value="Verander wachtwoord"
             >
@@ -72,14 +74,19 @@
         <form class="settings-email platform" method="post">
             <h5>Verander Email</h5>
             <br />
+            <label for="email">Nieuw Email</label>
             <input type="email"
                    name="email"
-                   placeholder="Nieuw Email-adres"
+                   id="email"
+                   placeholder="Nieuw Email"
             ><br />
+            <label for="email-confirm">Bevestig Email</label>
             <input type="email"
                    name="email-confirm"
+                   id="email-confirm"
                    placeholder="Bevestig Email"
             ><br />
+            <label></label>
             <input type="submit"
                    value="Verander Email"
             >

From 807361e65419a77960c420288915c053afe18ee3 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 10:52:05 +0100
Subject: [PATCH 04/21] Updated colour for footer.

---
 website/styles/footer.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/styles/footer.css b/website/styles/footer.css
index 2092a7b..53e28f1 100644
--- a/website/styles/footer.css
+++ b/website/styles/footer.css
@@ -9,4 +9,5 @@ footer p {
     padding: 5px;
 
     font-size: 14px;
-}
+    color: #dddddd;
+}
\ No newline at end of file

From 83de4e4f8a4ed4d212595866a415b848b814dbb4 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 10:57:06 +0100
Subject: [PATCH 05/21] fixed Add friend picture on profile page

---
 website/views/profile.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/views/profile.php b/website/views/profile.php
index 9675a04..e8fae1e 100644
--- a/website/views/profile.php
+++ b/website/views/profile.php
@@ -2,7 +2,7 @@
     <div class="profile-box platform">
         <img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
         <div class="profile-button">
-            <p><img src="../website/img/add-friend.png"> Als vriend toevoegen</p>
+            <p><img src="../img/add-friend.png"> Als vriend toevoegen</p>
         </div>
         <h1 class="profile-username">[gebruikersnaam]</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>

From 057275d513cc4984c50d35171f025164c6a933be Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Fri, 13 Jan 2017 11:09:09 +0100
Subject: [PATCH 06/21] Restyled the search page

Split users and groups
added a search button
made some boxes required
---
 website/styles/header.css     |  5 +++++
 website/styles/search.css     | 12 ++++++++++++
 website/views/header.php      |  9 +++++++--
 website/views/search-view.php | 18 +++++++++++++++++-
 4 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/website/styles/header.css b/website/styles/header.css
index eb1451e..ea3212a 100644
--- a/website/styles/header.css
+++ b/website/styles/header.css
@@ -25,6 +25,11 @@ header {
     padding-left: 48px;
 }
 
+
+#header-search input {
+    border: none;
+}
+
 header div {
     display: inline-block;
 }
diff --git a/website/styles/search.css b/website/styles/search.css
index e69de29..4b2281c 100644
--- a/website/styles/search.css
+++ b/website/styles/search.css
@@ -0,0 +1,12 @@
+.search-output {
+    width: calc(50% - 48px);
+    display: inline-flex;
+}
+
+.search-output:nth-child(n) {
+    display: inline-block;
+}
+
+#search-friends-output {
+    margin-right: 10px;
+}
\ No newline at end of file
diff --git a/website/views/header.php b/website/views/header.php
index ac8ae19..af3d0f0 100644
--- a/website/views/header.php
+++ b/website/views/header.php
@@ -4,8 +4,13 @@
     </div>
     <div id="header-search">
         <form action="search.php" method="get">
-            <input name="search" type="text" placeholder="zoek naar van alles" />
-            <input type="submit" value="Zoek"/>
+            <input name="search"
+                   type="text"
+                   placeholder="Zoek naar wat je wil"
+                   required
+            />
+            <input type="submit"
+                   value="Zoek"/>
         </form>
     </div>
     <div class="right profile-menu">
diff --git a/website/views/search-view.php b/website/views/search-view.php
index 1bd2286..b1418d1 100644
--- a/website/views/search-view.php
+++ b/website/views/search-view.php
@@ -8,6 +8,7 @@
                    name="search"
                    placeholder="zoek"
                    value="Rudolf"
+                   required
             />
             <label for="filter">
                 Filter:
@@ -23,7 +24,8 @@
             />
         </form>
     </div>
-    <div class="platform">
+    <div class="platform item-box left" id="search-friends-output">
+        <h4>Gebruikers</h4>
         <ul class="nav-list">
             <a href="#">
                 <li class="search-item">
@@ -41,6 +43,12 @@
                     </div>
                 </li>
             </a>
+        </ul>
+    </div>
+
+    <div class="platform item-box right" id="search-group-output">
+        <h4>Groepen</h4>
+        <ul class="nav-list">
             <a href="#">
                 <li class="search-item">
                     <div class="group">
@@ -57,6 +65,14 @@
                     </div>
                 </li>
             </a>
+            <a href="#">
+                <li class="group-item">
+                    <div class="group">
+                        <img class="group-picture" src="data:image/jpeg;base64,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">
+                        Hyves
+                    </div>
+                </li>
+            </a>
         </ul>
     </div>
 </div>
\ No newline at end of file

From e07281bbff058e60f27554691ef486593ed7fc79 Mon Sep 17 00:00:00 2001
From: Joey Lai <joeylai96@hotmail.com>
Date: Fri, 13 Jan 2017 11:38:55 +0100
Subject: [PATCH 07/21] FIXED things

---
 website/login.php        |  9 +++----
 website/styles/index.css | 56 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/website/login.php b/website/login.php
index 9211818..cefaf52 100644
--- a/website/login.php
+++ b/website/login.php
@@ -3,6 +3,7 @@
     <head>
         <link rel="stylesheet" type="text/css" href="styles/index.css">
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>        
     		<script src="js/dobPicker.min.js"></script>
         <meta charset="utf-8">
         <title>MyHyvesbook+</title>
@@ -14,6 +15,7 @@
 
         <form action="../profile.php" method="post">
             <h1>Welkom bij MyHyvesbook+</h1>
+
             <div class="login_containerlogin">
                 <label><b>Gebruikersnaam</b></label>
                 <input type="text" placeholder="Voer uw gebruikersnaam in" name="uname"
@@ -60,12 +62,12 @@
                     <div class="login_containerregister">
                         <label><b>Geboortedatum</b></label>
                         <!-- These are the select elements we will target -->
-                    		<select id="dobday" title="Voer een dag in" ></select>
+                    		<select id="dobday" title="Voer een dag in" required></select>
                     		<select id="dobmonth" title="Voer een maand in" required></select>
                     		<select id="dobyear" title="Voer een jaar in" required></select>
                     		<!-- And here's the library being called! -->
                     		<script>
-                    			$(document).ready(function() {
+                    			  $(document).ready(function() {
                         				$.dobPicker({
                           					daySelector: '#dobday',
                           					monthSelector: '#dobmonth',
@@ -124,9 +126,6 @@
                 </form>
             </div>
         </div>
-        <script>
-        $("#default-settings").birthdayPicker();
-        </script>
     </body>
 </html>
 
diff --git a/website/styles/index.css b/website/styles/index.css
index 4f6ed16..14c01ea 100644
--- a/website/styles/index.css
+++ b/website/styles/index.css
@@ -1,6 +1,11 @@
 /* Body */
 body {
-    background-color: #B78996;
+  height: 100%;
+
+  background-color: #B78996;
+  color: #333;
+
+  font-family: Arial, sans-serif;
 }
 
 /* inlogform */
@@ -17,15 +22,16 @@ form {
 h1 {
     padding: 16px;
     text-align: center;
+    font-size: 2.2em;
 }
 
 /* registreer titel*/
 h2 {
     padding: 16px;
     text-align: left;
+    font-size: 2.0em;
 }
 
-/* text */
 label {
     display: block;
 }
@@ -40,6 +46,8 @@ select {
     padding: 12px 20px;
     margin: 8px 0;
     width: 15%;
+    font-family: Arial;
+    font-size: 16px;    
 }
 
 input[type=text], input[type=password], input[type=email] {
@@ -51,6 +59,8 @@ input[type=text], input[type=password], input[type=email] {
     padding: 12px 20px;
     margin: 8px 0;
     width: 50%;
+    font-family: Arial;
+    font-size: 16px;
 }
 
 input[type=submit]{
@@ -63,6 +73,8 @@ input[type=submit]{
     margin: 8px 0;
     padding: 14px 20px;
     width: 50%;
+    font-family: Arial;
+    font-size: 16px;
 }
 
 /* stijl voor alle buttons */
@@ -76,6 +88,8 @@ button {
     margin: 8px 0;
     padding: 14px 20px;
     width: 25%;
+    font-family: Arial;
+    font-size: 16px;
 }
 
 /* padding voor registreer container */
@@ -149,3 +163,41 @@ button {
     from {transform: scale(0)}
     to {transform: scale(1)}
 }
+
+::selection {
+    background: #845663;
+    color: white;
+}
+
+::-moz-selection {
+    background: #845663;
+    color: white;
+}
+
+a, a:link, a:visited, a:hover, a:active {
+    color: inherit;
+    text-decoration: none;
+}
+
+
+a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
+div[data-title]:hover:after{
+    content: attr(data-title);
+    padding: 4px 4px;
+    color: #FFFFFF;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 20;
+    white-space: nowrap;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: 0px 0px 4px #222;
+    -webkit-box-shadow: 0px 0px 4px #222;
+    box-shadow: 0px 0px 4px #222;
+    background-color: #333;
+    font-size: 15px;
+    line-height: normal;
+    font-family: Arial, sans-serif;
+}

From 3cd07722242f7c99dd9664d635c103750b363967 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 11:48:26 +0100
Subject: [PATCH 08/21] Cleanup in main.css

---
 website/styles/main.css | 156 +++++++++++++++++++++-------------------
 1 file changed, 81 insertions(+), 75 deletions(-)

diff --git a/website/styles/main.css b/website/styles/main.css
index cbf9477..fa85d7f 100644
--- a/website/styles/main.css
+++ b/website/styles/main.css
@@ -1,64 +1,10 @@
 /*-----------------------------------------------------------------------------
 Default Stylesheet
 
-last update:    10-01-2017
+last update:    13-01-2017
 Website:        myhyvesbookplus.tk
 -----------------------------------------------------------------------------*/
 
-.profile-picture {
-    border-radius: 50%;
-    height: 42px;
-    width: 42px;
-    object-fit: cover;
-    vertical-align: middle;
-}
-
-.group-picture {
-    border-radius: 5px;
-    height: 42px;
-    width: 42px;
-    object-fit: cover;
-    vertical-align: middle;
-}
-
-html {
-    height: 100%;
-}
-
-body {
-    height: 100%;
-
-    background-color: #B78996;
-    color: #333;
-
-    font-family: Arial, sans-serif;
-}
-
-.content {
-    padding: 20px;
-    margin-top: 80px;
-    margin-left: 256px;
-    min-height: 100%;
-}
-
-.platform {
-    padding: 20px;
-    margin-bottom: 10px;
-    border-radius: 10px;
-    background-color: #FFFFFF;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
-
-::selection {
-    background: #845663;
-    color: white;
-}
-
-::-moz-selection {
-    background: #845663;
-    color: white;
-}
-
 /* Remove padding and margin */
 * {
     margin: 0;
@@ -66,19 +12,15 @@ body {
     border: 0;
 }
 
-/* Move element down (clear), below floating elements */
-.clear {
-    clear: both;
+html {
+    height: 100%;
 }
 
-/* Float element to the left side of its containing block */
-.right {
-    float: right;
-}
-
-/* Float element to the left side of its containing block */
-.left {
-    float: left;
+body {
+    height: 100%;
+    background-color: #B78996;
+    color: #333;
+    font-family: Arial, sans-serif;
 }
 
 /* Font sizes */
@@ -110,23 +52,81 @@ p {
     font-size: 1.2em;
 }
 
+/* Selection colors */
+::selection {
+    background: #845663;
+    color: white;
+}
+
+::-moz-selection {
+    background: #845663;
+    color: white;
+}
+
+/* All content underneath the menu */
+.content {
+    padding: 20px;
+    margin-top: 80px;
+    margin-left: 256px;
+    min-height: 100%;
+}
+
+/* White boxes (squares) */
+.platform {
+    padding: 20px;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    background-color: #FFFFFF;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.profile-picture, .group-picture {
+    height: 42px;
+    width: 42px;
+    object-fit: cover;
+    vertical-align: middle;
+}
+
+.profile-picture {
+    border-radius: 50%;
+}
+
+.group-picture {
+    border-radius: 5px;
+}
+
+/* Move element down (clear), below floating elements */
+.clear {
+    clear: both;
+}
+
+/* Float element to the left side of its containing block */
+.right {
+    float: right;
+}
+
+/* Float element to the left side of its containing block */
+.left {
+    float: left;
+}
+
+/* All links */
 a, a:link, a:visited, a:hover, a:active {
     color: inherit;
     text-decoration: none;
 }
 
+/* All buttons, inputfields/selectfields. */
 button, input, select {
     width: auto;
     height: 32px;
-
     cursor: pointer;
     border: none;
-
-    font-family: Arial, sans-serif;
     font-size: 16px;
     border-radius: 7px;
 }
 
+/* All textinput and sections */
 textarea, input, select {
     padding: 0 5px;
     background: white;
@@ -134,11 +134,12 @@ textarea, input, select {
     border: 1px solid #845663;
     border-radius: 7px;
     font-size: 16px;
-
-
 }
 
-button, input[type="submit"], input[type="reset"] {
+/* All buttons */
+button,
+input[type="submit"],
+input[type="reset"] {
     background-color: #845663;
     color: white;
     padding: 0 10px;
@@ -157,12 +158,17 @@ td {
 }
 
 /* Custom title box, appears instantaneously */
-a[data-title]:hover, img[data-title]:hover, span[data-title]:hover, div[data-title]:hover {
+a[data-title]:hover,
+img[data-title]:hover,
+span[data-title]:hover,
+div[data-title]:hover {
     position: relative;
 }
 
-a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
-div[data-title]:hover:after{
+a[data-title]:hover:after,
+img[data-title]:hover:after,
+span[data-title]:hover:after,
+div[data-title]:hover:after {
     content: attr(data-title);
     padding: 4px 4px;
     color: #FFFFFF;

From d61694b5436161027693222b5bc3e7c2d1802ad3 Mon Sep 17 00:00:00 2001
From: Joey Lai <joeylai96@hotmail.com>
Date: Fri, 13 Jan 2017 11:49:55 +0100
Subject: [PATCH 09/21] FIXED identation

---
 website/login.php | 128 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 94 insertions(+), 34 deletions(-)

diff --git a/website/login.php b/website/login.php
index cefaf52..664746f 100644
--- a/website/login.php
+++ b/website/login.php
@@ -1,36 +1,51 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <link rel="stylesheet" type="text/css" href="styles/index.css">
+        <link rel="stylesheet"
+              type="text/css"
+              href="styles/index.css">
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>        
+        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
     		<script src="js/dobPicker.min.js"></script>
         <meta charset="utf-8">
         <title>MyHyvesbook+</title>
     </head>
     <body>
         <div>
-            <img style="width:50%;margin-left:25%" src="img/top-logo.png" alt="MyHyvesbook+">
+            <img style="width:50%;margin-left:25%"
+                 src="img/top-logo.png"
+                 alt="MyHyvesbook+">
         </div>
 
-        <form action="../profile.php" method="post">
+        <form action="../profile.php"
+              method="post">
             <h1>Welkom bij MyHyvesbook+</h1>
 
             <div class="login_containerlogin">
                 <label><b>Gebruikersnaam</b></label>
-                <input type="text" placeholder="Voer uw gebruikersnaam in" name="uname"
-                pattern=".{6,}" title="Moet 6 of meer karakters bevatten" required>
+                <input type="text"
+                       placeholder="Voer uw gebruikersnaam in"
+                       name="uname"
+                       pattern=".{6,}"
+                       title="Moet 6 of meer karakters bevatten"
+                       required>
             </div>
 
             <div class="login_containerlogin">
                 <label><b>Wachtwoord</b></label>
-                <input type="password" placeholder="Voer uw wachtwoord in" name="psw"
-                pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn" required>
+                <input type="password"
+                       placeholder="Voer uw wachtwoord in"
+                       name="psw"
+                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                       title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
+                       required>
             </div>
 
             <div class="login_containerlogin">
-                <input type="submit" value="Login" name="Submit" id="frm1_submit" />
+                <input type="submit"
+                       value="Login"
+                       name="Submit"
+                       id="frm1_submit" />
             </div>
         </form>
 
@@ -41,30 +56,49 @@
         <div class="login_containerregister">
             <div id="id01" class="modal">
                 <span onclick="document.getElementById('id01').style.display='none'"
-                class="close" title="Close Modal">&times;</span>
+                      class="close"
+                      title="Close Modal">
+                      &times;</span>
 
                 <!-- Register Content -->
-                <form class="modal-content animate" action="../profile.php" onsubmit="return passwordfunction()" method="post">
+                <form class="modal-content animate"
+                      action="../profile.php"
+                      onsubmit="return passwordfunction()"
+                      method="post">
                     <h2>Registreer uw account</h2>
 
                     <div class="login_containerregister">
                         <label><b>Naam</b></label>
-                        <input type="text" placeholder="Voer uw naam in" name="name"
-                        pattern="[A-Za-z]{1,}" title="Mag alleen letters bevatten" required>
+                        <input type="text"
+                               placeholder="Voer uw naam in"
+                               name="name"
+                               pattern="[A-Za-z]{1,}"
+                               title="Mag alleen letters bevatten"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
                         <label><b>Achternaam</b></label>
-                        <input type="text" placeholder="Voer uw achternaam in" name="surname"
-                        pattern="[A-Za-z]{1,}" title="Mag alleen letters bevatten" required>
+                        <input type="text"
+                               placeholder="Voer uw achternaam in"
+                               name="surname"
+                               pattern="[A-Za-z]{1,}"
+                               title="Mag alleen letters bevatten"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
                         <label><b>Geboortedatum</b></label>
                         <!-- These are the select elements we will target -->
-                    		<select id="dobday" title="Voer een dag in" required></select>
-                    		<select id="dobmonth" title="Voer een maand in" required></select>
-                    		<select id="dobyear" title="Voer een jaar in" required></select>
+                    		<select id="dobday"
+                                title="Voer een dag in"
+                                required></select>
+                    		<select id="dobmonth"
+                                title="Voer een maand in"
+                                required></select>
+                    		<select id="dobyear"
+                                title="Voer een jaar in"
+                                required></select>
                     		<!-- And here's the library being called! -->
                     		<script>
                     			  $(document).ready(function() {
@@ -84,44 +118,70 @@
 
                     <div class="login_containerregister">
                         <label><b>Gebruikersnaam</b></label>
-                        <input type="text" placeholder="Voer uw gebruikersnaam in" name="username"
-                        pattern=".{6,}" title="Moet minstens 6 karakters bevatten" required>
+                        <input type="text"
+                               placeholder="Voer uw gebruikersnaam in"
+                               name="username"
+                               pattern=".{6,}"
+                               title="Moet minstens 6 karakters bevatten"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
                         <label><b>Wachtwoord</b></label>
-                        <input type="password" placeholder="Voer uw wachtwoord in" name="password"
-                        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="password"
-                        title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten" required>
+                        <input type="password"
+                               placeholder="Voer uw wachtwoord in"
+                               name="password"
+                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                               id="password"
+                               title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
                         <label><b>Herhaal wachtwoord</b></label>
-                        <input type="password" placeholder="Herhaal wachtwoord" name="confirmpassword"
-                        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" id="confirmpassword"
-                        title="Herhaal wachtwoord" required>
+                        <input type="password"
+                               placeholder="Herhaal wachtwoord"
+                               name="confirmpassword"
+                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                               id="confirmpassword"
+                               title="Herhaal wachtwoord"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
                         <label><b>Straatnaam</b></label>
-                        <input type="text" placeholder="Voer uw straatnaam in" name="name"
-                        pattern="[A-Za-z]{1,}" title="Mag alleen letters bevatten" required>
+                        <input type="text"
+                               placeholder="Voer uw straatnaam in"
+                               name="name"
+                               pattern="[A-Za-z]{1,}"
+                               title="Mag alleen letters bevatten"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
                         <label><b>Straatnummer</b></label>
-                        <input type="text" placeholder="Voer uw straatnummer in" name="name"
-                        pattern="[1-9][0-9]{0,}" title="Mag alleen nummers bevatten" required>
+                        <input type="text"
+                               placeholder="Voer uw straatnummer in"
+                               name="name"
+                               pattern="[1-9][0-9]{0,}"
+                               title="Mag alleen nummers bevatten"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
                         <label><b>Email</b></label>
-                        <input type="email" placeholder="Voer uw email in" id="email"
-                        title="Voer een geldige email in" required>
+                        <input type="email"
+                               placeholder="Voer uw email in"
+                               id="email"
+                               title="Voer een geldige email in"
+                               required>
                     </div>
 
                     <div class="login_containerregister">
-                        <input type="submit" value="Registreer uw account" name="Submit" id="frm1_submit" />
+                        <input type="submit"
+                               value="Registreer uw account"
+                               name="Submit"
+                               id="frm1_submit" />
                     </div>
                 </form>
             </div>

From 8c1bacf8945c326eb50098bd8b984da5448dd5aa Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Fri, 13 Jan 2017 12:01:12 +0100
Subject: [PATCH 10/21] Styled and rearranged chat-view

---
 website/styles/chat.css     | 37 ++++++++-----------------------------
 website/views/chat-view.php | 25 ++++++++++---------------
 2 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/website/styles/chat.css b/website/styles/chat.css
index 7df2169..8f486bb 100644
--- a/website/styles/chat.css
+++ b/website/styles/chat.css
@@ -3,7 +3,6 @@
     position: fixed;
     top: 80px;
     left: 256px;
-    text-align: center;
     padding: 15px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
@@ -12,32 +11,14 @@
 
 .chat-left {
     width: 256px;
-    height: 100%;
-    margin-left: 10px;
-    margin-right: 10px;
-    display: inline-flex;
-
-}
-.chat-recent, .chat-history {
-    width: 100%;
-}
-
-/* List of chats. */
-.chat-recent {
-    height: 600px;
+    height: calc(100% - 100px);
+    margin: 0 10px;
     overflow-y: auto;
-    padding: 10px;
-    text-align: left;
-}
-
-.chat-conversation {
-    margin: 5px;
 }
 
 .chat-right {
     width: calc(100% - 256px - 40px);
     height: calc(100% - 80px);
-    vertical-align: bottom;
     margin-right: 10px;
 }
 
@@ -45,9 +26,10 @@
 .chat-history {
     overflow-y: auto;
     height: 100%;
-    padding: 0 0 10px 0;
+    padding: 10px;
 }
 
+/* Chat-message takes the whole width of the chat area */
 .chat-message {
     width: 100%;
     min-height: 40px;
@@ -56,9 +38,8 @@
 }
 
 .chat-message-self, .chat-message-other {
-    text-align: left;
     border-radius: 20px;
-    padding: 10px 12px;
+    padding: 10px;
     max-width: 45%;
 }
 
@@ -79,7 +60,6 @@
 
 .chat-field {
     width: 100%;
-    padding: 15px 0;
     display: table;
 }
 
@@ -95,8 +75,8 @@
 
 .chat-field input[type="text"] {
     width: 100%;
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
+    border: none;
+    border-radius: 10px 0 0 10px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
@@ -106,7 +86,6 @@
     background-color: #845663;
     color: white;
     padding: 5px 10px;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
+    border-radius: 0 10px 10px 0;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
\ No newline at end of file
diff --git a/website/views/chat-view.php b/website/views/chat-view.php
index 99a64fc..a23a1c5 100644
--- a/website/views/chat-view.php
+++ b/website/views/chat-view.php
@@ -1,20 +1,15 @@
 <div class="content">
     <div class="chat">
-        <div class="chat-left">
-            <nav class="chat-recent platform">
-                <h5>Chats</h5>
-                <a href="#"><div class="chat-conversation">
-                        <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
-                        Rudolf Leslo
-                    </div></a>
-                <a href="#"><div class="chat-conversation">
-                        <img class="profile-picture" src=http://www.kpop-map.com/wp-content/uploads/2016/01/sm-rookies-kun-profile.jpg">
-                        Henk de Boer
-                    </div></a>
-            </nav>
-        </div>
-
-        <div class="chat-right">
+        <nav class="chat-left left platform chat-recent">
+            <h5>Chats</h5>
+            <a href="#">
+                <div class="chat-conversation">
+                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
+                    Rudolf Leslo
+                </div>
+            </a>
+        </nav>
+        <div class="chat-right right">
             <div class="chat-history platform">
                 <div class="chat-message">
                     <div class="chat-message-self">Hi!</div>

From 9db7c6776ce19116a9ca9c0efc93b1d0a5919048 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 12:03:46 +0100
Subject: [PATCH 11/21] Moved <head>-tag to the page files, not all css files
 will be loaded for each page.

---
 website/admin.php      | 35 +++++++++++++++++++----------------
 website/chat.php       | 35 +++++++++++++++++++----------------
 website/group.php      | 35 +++++++++++++++++++----------------
 website/profile.php    | 35 +++++++++++++++++++----------------
 website/search.php     | 35 +++++++++++++++++++----------------
 website/settings.php   | 33 +++++++++++++++++++--------------
 website/template.php   | 35 +++++++++++++++++++----------------
 website/views/head.php | 35 ++++++++++++++---------------------
 8 files changed, 147 insertions(+), 131 deletions(-)

diff --git a/website/admin.php b/website/admin.php
index 8d8f8b5..7529705 100644
--- a/website/admin.php
+++ b/website/admin.php
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <?php
-        include("views/head.php");
-     ?>
-    <body>
-        <?php
-            /*
-             * This view adds the main layout over the screen.
-             * Header and menu.
-             */
-            include("views/main.php");
+<head>
+    <?php include("views/head.php"); ?>
+    <style>
+        @import url("styles/adminpanel.css");
+    </style>
+</head>
+<body>
+<?php
+/*
+ * This view adds the main layout over the screen.
+ * Header and menu.
+ */
+include("views/main.php");
 
-            /* Add your view files here. */
-            include("views/adminpanel.php");
+/* Add your view files here. */
+include("views/adminpanel.php");
 
-            /* This adds the footer. */
-            include("views/footer.php");
-         ?>
-    </body>
+/* This adds the footer. */
+include("views/footer.php");
+?>
+</body>
 </html>
diff --git a/website/chat.php b/website/chat.php
index 218b082..b2ed584 100644
--- a/website/chat.php
+++ b/website/chat.php
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <?php
-        include("views/head.php");
-    ?>
-    <body>
-        <?php
-            /*
-             * This view adds the main layout over the screen.
-             * Header, menu, footer.
-             */
-             include("views/main.php");
+<head>
+    <?php include("views/head.php"); ?>
+    <style>
+        @import url("styles/chat.css");
+    </style>
+</head>
+<body>
+<?php
+/*
+ * This view adds the main layout over the screen.
+ * Header, menu, footer.
+ */
+include("views/main.php");
 
-            /* Add your view files here. */
-            include("views/chat-view.php");
+/* Add your view files here. */
+include("views/chat-view.php");
 
-                        /* This adds the footer. */
-            include("views/footer.php");
-        ?>
-    </body>
+/* This adds the footer. */
+include("views/footer.php");
+?>
+</body>
 </html>
diff --git a/website/group.php b/website/group.php
index ad307e2..819c630 100644
--- a/website/group.php
+++ b/website/group.php
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <?php
-    include("views/head.php");
-    ?>
-    <body>
-        <?php
-            /*
-             * This view adds the main layout over the screen.
-             * Header, menu, footer.
-             */
-            include("views/main.php");
+<head>
+    <?php include("views/head.php"); ?>
+    <style>
+        @import url("styles/profile.css");
+    </style>
+</head>
+<body>
+<?php
+/*
+ * This view adds the main layout over the screen.
+ * Header, menu, footer.
+ */
+include("views/main.php");
 
-            /* Add your view files here. */
-            include("views/group.php");
+/* Add your view files here. */
+include("views/group.php");
 
-            /* This adds the footer. */
-            include("views/footer.php");
-        ?>
-    </body>
+/* This adds the footer. */
+include("views/footer.php");
+?>
+</body>
 </html>
diff --git a/website/profile.php b/website/profile.php
index 2dc9891..b26c354 100644
--- a/website/profile.php
+++ b/website/profile.php
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <?php
-        include("views/head.php");
-    ?>
-    <body>
-        <?php
-            /*
-             * This view adds the main layout over the screen.
-             * Header, menu, footer.
-             */
-            include("views/main.php");
+<head>
+    <?php include("views/head.php"); ?>
+    <style>
+        @import url("styles/profile.css");
+    </style>
+</head>
+<body>
+<?php
+/*
+ * This view adds the main layout over the screen.
+ * Header, menu, footer.
+ */
+include("views/main.php");
 
-            /* Add your view files here. */
-            include("views/profile.php");
+/* Add your view files here. */
+include("views/profile.php");
 
-            /* This adds the footer. */
-            include("views/footer.php");
-        ?>
-    </body>
+/* This adds the footer. */
+include("views/footer.php");
+?>
+</body>
 </html>
diff --git a/website/search.php b/website/search.php
index 6a045c3..33df2fe 100644
--- a/website/search.php
+++ b/website/search.php
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <?php
-        include("views/head.php");
-    ?>
-    <body>
-        <?php
-            /*
-             * This view adds the main layout over the screen.
-             * Header and menu.
-             */
-            include("views/main.php");
+<head>
+    <?php include("views/head.php"); ?>
+    <style>
+        @import url("styles/search.css");
+    </style>
+</head>
+<body>
+<?php
+/*
+ * This view adds the main layout over the screen.
+ * Header and menu.
+ */
+include("views/main.php");
 
-            /* Add your view files here. */
-            include("views/search-view.php");
+/* Add your view files here. */
+include("views/search-view.php");
 
-            /* This adds the footer. */
-            include("views/footer.php");
-        ?>
-    </body>
+/* This adds the footer. */
+include("views/footer.php");
+?>
+</body>
 </html>
diff --git a/website/settings.php b/website/settings.php
index 8d154b1..577cd8b 100644
--- a/website/settings.php
+++ b/website/settings.php
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html>
-<?php include("views/head.php"); ?>
-    <body>
-        <?php
-        /*
-         * This view adds the main layout over the screen.
-         * Header and menu.
-         */
-        include("views/main.php");
+<head>
+    <?php include("views/head.php"); ?>
+    <style>
+        @import url("styles/settings.css");
+    </style>
+</head>
+<body>
+<?php
+/*
+ * This view adds the main layout over the screen.
+ * Header and menu.
+ */
+include("views/main.php");
 
-        /* Add your view files here. */
-        include("views/settings-view.php");
+/* Add your view files here. */
+include("views/settings-view.php");
 
-        /* This adds the footer. */
-        include("views/footer.php");
-        ?>
-    </body>
+/* This adds the footer. */
+include("views/footer.php");
+?>
+</body>
 </html>
diff --git a/website/template.php b/website/template.php
index b594d58..f52a526 100644
--- a/website/template.php
+++ b/website/template.php
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <?php
-        include("views/head.php");
-     ?>
-    <body>
-        <?php
-            /*
-             * This view adds the main layout over the screen.
-             * Header and menu.
-             */
-            include("views/main.php");
+<head>
+    <?php include("views/head.php"); ?>
+    <style>
+        /*Insert own stylesheet here ;)*/
+    </style>
+</head>
+<body>
+<?php
+/*
+ * This view adds the main layout over the screen.
+ * Header and menu.
+ */
+include("views/main.php");
 
-            /* Add your view files here. */
-            include("views/homepage.php");
+/* Add your view files here. */
+include("views/homepage.php");
 
-            /* This adds the footer. */
-            include("views/footer.php");
-         ?>
-    </body>
+/* This adds the footer. */
+include("views/footer.php");
+?>
+</body>
 </html>
diff --git a/website/views/head.php b/website/views/head.php
index 0d51d03..4da866c 100644
--- a/website/views/head.php
+++ b/website/views/head.php
@@ -1,21 +1,14 @@
-<head>
-    <meta charset="utf-8">
-    <title>MyHyvesbook+</title>
-    <!-- Add your javascript files here. -->
-    <script src="js/jquery.js"></script>
-    <script src="js/header.js"></script>
-    <script src="js/menu.js"></script>
-    <style>
-        /* Add your css files here. */
-        @import url("styles/main.css");
-        @import url("styles/profile.css");
-        @import url("styles/font-awesome.css");
-        @import url("styles/header.css");
-        @import url("styles/menu.css");
-        @import url("styles/footer.css");
-        @import url("styles/search.css");
-        @import url("styles/adminpanel.css");
-        @import url("styles/chat.css");
-        @import url("styles/settings.css");
-    </style>
-</head>
+<meta charset="utf-8">
+<title>MyHyvesbook+</title>
+<!-- Add your javascript files here. -->
+<script src="js/jquery.js"></script>
+<script src="js/header.js"></script>
+<script src="js/menu.js"></script>
+<style>
+    /* Add your css files here. */
+    @import url("styles/main.css");
+    @import url("styles/font-awesome.css");
+    @import url("styles/header.css");
+    @import url("styles/menu.css");
+    @import url("styles/footer.css");
+</style>

From 1db9826de53b02bc277c2652186b22813ebd5979 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 12:14:44 +0100
Subject: [PATCH 12/21] Fixed Indent

---
 website/login.php | 350 +++++++++++++++++++++++-----------------------
 1 file changed, 175 insertions(+), 175 deletions(-)

diff --git a/website/login.php b/website/login.php
index 664746f..4fc0321 100644
--- a/website/login.php
+++ b/website/login.php
@@ -1,192 +1,192 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <link rel="stylesheet"
-              type="text/css"
-              href="styles/index.css">
-        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
-    		<script src="js/dobPicker.min.js"></script>
-        <meta charset="utf-8">
-        <title>MyHyvesbook+</title>
-    </head>
-    <body>
-        <div>
-            <img style="width:50%;margin-left:25%"
-                 src="img/top-logo.png"
-                 alt="MyHyvesbook+">
-        </div>
+<head>
+    <link rel="stylesheet"
+          type="text/css"
+          href="styles/index.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+    <script src="js/dobPicker.min.js"></script>
+    <meta charset="utf-8">
+    <title>MyHyvesbook+</title>
+</head>
+<body>
+<div>
+    <img style="width:50%;margin-left:25%"
+         src="img/top-logo.png"
+         alt="MyHyvesbook+">
+</div>
 
-        <form action="../profile.php"
-              method="post">
-            <h1>Welkom bij MyHyvesbook+</h1>
+<form action="../profile.php"
+      method="post">
+    <h1>Welkom bij MyHyvesbook+</h1>
 
-            <div class="login_containerlogin">
-                <label><b>Gebruikersnaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw gebruikersnaam in"
-                       name="uname"
-                       pattern=".{6,}"
-                       title="Moet 6 of meer karakters bevatten"
-                       required>
-            </div>
+    <div class="login_containerlogin">
+        <label><b>Gebruikersnaam</b></label>
+        <input type="text"
+               placeholder="Voer uw gebruikersnaam in"
+               name="uname"
+               pattern=".{6,}"
+               title="Moet 6 of meer karakters bevatten"
+               required>
+    </div>
 
-            <div class="login_containerlogin">
-                <label><b>Wachtwoord</b></label>
-                <input type="password"
-                       placeholder="Voer uw wachtwoord in"
-                       name="psw"
-                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                       title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
-                       required>
-            </div>
+    <div class="login_containerlogin">
+        <label><b>Wachtwoord</b></label>
+        <input type="password"
+               placeholder="Voer uw wachtwoord in"
+               name="psw"
+               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+               title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
+               required>
+    </div>
 
-            <div class="login_containerlogin">
-                <input type="submit"
-                       value="Login"
-                       name="Submit"
-                       id="frm1_submit" />
-            </div>
-        </form>
+    <div class="login_containerlogin">
+        <input type="submit"
+               value="Login"
+               name="Submit"
+               id="frm1_submit" />
+    </div>
+</form>
 
-        <div class="login_containerlogin">
-            <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
-        </div>
+<div class="login_containerlogin">
+    <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
+</div>
 
-        <div class="login_containerregister">
-            <div id="id01" class="modal">
+<div class="login_containerregister">
+    <div id="id01" class="modal">
                 <span onclick="document.getElementById('id01').style.display='none'"
                       class="close"
                       title="Close Modal">
                       &times;</span>
 
-                <!-- Register Content -->
-                <form class="modal-content animate"
-                      action="../profile.php"
-                      onsubmit="return passwordfunction()"
-                      method="post">
-                    <h2>Registreer uw account</h2>
+        <!-- Register Content -->
+        <form class="modal-content animate"
+              action="../profile.php"
+              onsubmit="return passwordfunction()"
+              method="post">
+            <h2>Registreer uw account</h2>
 
-                    <div class="login_containerregister">
-                        <label><b>Naam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw naam in"
-                               name="name"
-                               pattern="[A-Za-z]{1,}"
-                               title="Mag alleen letters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Achternaam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw achternaam in"
-                               name="surname"
-                               pattern="[A-Za-z]{1,}"
-                               title="Mag alleen letters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Geboortedatum</b></label>
-                        <!-- These are the select elements we will target -->
-                    		<select id="dobday"
-                                title="Voer een dag in"
-                                required></select>
-                    		<select id="dobmonth"
-                                title="Voer een maand in"
-                                required></select>
-                    		<select id="dobyear"
-                                title="Voer een jaar in"
-                                required></select>
-                    		<!-- And here's the library being called! -->
-                    		<script>
-                    			  $(document).ready(function() {
-                        				$.dobPicker({
-                          					daySelector: '#dobday',
-                          					monthSelector: '#dobmonth',
-                          					yearSelector: '#dobyear',
-                          					dayDefault: 'Dag',
-                          					monthDefault: 'Maand',
-                          					yearDefault: 'Jaar',
-                          					minimumAge: 12,
-                          					maximumAge: 80
-                        				});
-                      			});
-                    		</script>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Gebruikersnaam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw gebruikersnaam in"
-                               name="username"
-                               pattern=".{6,}"
-                               title="Moet minstens 6 karakters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Wachtwoord</b></label>
-                        <input type="password"
-                               placeholder="Voer uw wachtwoord in"
-                               name="password"
-                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                               id="password"
-                               title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Herhaal wachtwoord</b></label>
-                        <input type="password"
-                               placeholder="Herhaal wachtwoord"
-                               name="confirmpassword"
-                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                               id="confirmpassword"
-                               title="Herhaal wachtwoord"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Straatnaam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw straatnaam in"
-                               name="name"
-                               pattern="[A-Za-z]{1,}"
-                               title="Mag alleen letters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Straatnummer</b></label>
-                        <input type="text"
-                               placeholder="Voer uw straatnummer in"
-                               name="name"
-                               pattern="[1-9][0-9]{0,}"
-                               title="Mag alleen nummers bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Email</b></label>
-                        <input type="email"
-                               placeholder="Voer uw email in"
-                               id="email"
-                               title="Voer een geldige email in"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <input type="submit"
-                               value="Registreer uw account"
-                               name="Submit"
-                               id="frm1_submit" />
-                    </div>
-                </form>
+            <div class="login_containerregister">
+                <label><b>Naam</b></label>
+                <input type="text"
+                       placeholder="Voer uw naam in"
+                       name="name"
+                       pattern="[A-Za-z]{1,}"
+                       title="Mag alleen letters bevatten"
+                       required>
             </div>
-        </div>
-    </body>
+
+            <div class="login_containerregister">
+                <label><b>Achternaam</b></label>
+                <input type="text"
+                       placeholder="Voer uw achternaam in"
+                       name="surname"
+                       pattern="[A-Za-z]{1,}"
+                       title="Mag alleen letters bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Geboortedatum</b></label>
+                <!-- These are the select elements we will target -->
+                <select id="dobday"
+                        title="Voer een dag in"
+                        required></select>
+                <select id="dobmonth"
+                        title="Voer een maand in"
+                        required></select>
+                <select id="dobyear"
+                        title="Voer een jaar in"
+                        required></select>
+                <!-- And here's the library being called! -->
+                <script>
+                    $(document).ready(function() {
+                        $.dobPicker({
+                            daySelector: '#dobday',
+                            monthSelector: '#dobmonth',
+                            yearSelector: '#dobyear',
+                            dayDefault: 'Dag',
+                            monthDefault: 'Maand',
+                            yearDefault: 'Jaar',
+                            minimumAge: 12,
+                            maximumAge: 80
+                        });
+                    });
+                </script>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Gebruikersnaam</b></label>
+                <input type="text"
+                       placeholder="Voer uw gebruikersnaam in"
+                       name="username"
+                       pattern=".{6,}"
+                       title="Moet minstens 6 karakters bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Wachtwoord</b></label>
+                <input type="password"
+                       placeholder="Voer uw wachtwoord in"
+                       name="password"
+                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                       id="password"
+                       title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Herhaal wachtwoord</b></label>
+                <input type="password"
+                       placeholder="Herhaal wachtwoord"
+                       name="confirmpassword"
+                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                       id="confirmpassword"
+                       title="Herhaal wachtwoord"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Straatnaam</b></label>
+                <input type="text"
+                       placeholder="Voer uw straatnaam in"
+                       name="name"
+                       pattern="[A-Za-z]{1,}"
+                       title="Mag alleen letters bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Straatnummer</b></label>
+                <input type="text"
+                       placeholder="Voer uw straatnummer in"
+                       name="name"
+                       pattern="[1-9][0-9]{0,}"
+                       title="Mag alleen nummers bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Email</b></label>
+                <input type="email"
+                       placeholder="Voer uw email in"
+                       id="email"
+                       title="Voer een geldige email in"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <input type="submit"
+                       value="Registreer uw account"
+                       name="Submit"
+                       id="frm1_submit" />
+            </div>
+        </form>
+    </div>
+</div>
+</body>
 </html>
 
 <script>
@@ -197,7 +197,7 @@
         if (event.target == modal) {
             modal.style.display = "none";
         }
-}
+    }
 </script>
 
 <script>

From 5bb7fbf7a9252d2a5a411808370d3310e23ada39 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 12:26:38 +0100
Subject: [PATCH 13/21] Item-box from profile.css to main.css

---
 website/styles/main.css    | 20 ++++++++++++++++++++
 website/styles/profile.css | 20 --------------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/website/styles/main.css b/website/styles/main.css
index fa85d7f..014d05b 100644
--- a/website/styles/main.css
+++ b/website/styles/main.css
@@ -95,6 +95,26 @@ p {
     border-radius: 5px;
 }
 
+.item-box, .item-box-full-width {
+    margin: 20px 0 0 0;
+    padding: 25px;
+    background-color: #FFFFFF;
+}
+
+.item-box {
+    width: calc(50% - 60px);
+}
+
+@media only screen and (max-width: 900px) {
+    .item-box {
+        width: calc(100% - 50px);
+    }
+}
+
+.item-box-full-width {
+    width: calc(100% - 50px);
+}
+
 /* Move element down (clear), below floating elements */
 .clear {
     clear: both;
diff --git a/website/styles/profile.css b/website/styles/profile.css
index 7c6218c..c9029c5 100644
--- a/website/styles/profile.css
+++ b/website/styles/profile.css
@@ -14,26 +14,6 @@
     padding-top: 50px;
 }
 
-.item-box, .item-box-full-width {
-    margin: 20px 0 0 0;
-    padding: 25px;
-    background-color: #FFFFFF;
-}
-
-.item-box {
-    width: calc(50% - 60px);
-}
-
-@media only screen and (max-width: 900px) {
-    .item-box {
-        width: calc(100% - 50px);
-    }
-}
-
-.item-box-full-width {
-    width: calc(100% - 50px);
-}
-
 .posts {
     z-index: -1;
     margin-right: 0;

From faf544252885ae2549123d81b154647e75efd942 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 14:26:38 +0100
Subject: [PATCH 14/21] Moves splt private and public files

---
 website/{php => }/connect.php                      |   0
 website/{ => html}/admin.php                       |   8 ++++----
 website/{ => html}/chat.php                        |   8 ++++----
 website/{ => html}/fonts/FontAwesome.otf           | Bin
 website/{ => html}/fonts/fontawesome-webfont.eot   | Bin
 website/{ => html}/fonts/fontawesome-webfont.svg   |   0
 website/{ => html}/fonts/fontawesome-webfont.ttf   | Bin
 website/{ => html}/fonts/fontawesome-webfont.woff  | Bin
 website/{ => html}/fonts/fontawesome-webfont.woff2 | Bin
 website/{ => html}/group.php                       |   8 ++++----
 website/{ => html}/img/add-friend.png              | Bin
 website/{ => html}/img/leave-group.png             | Bin
 website/{ => html}/img/top-logo.png                | Bin
 website/{ => html}/js/dobPicker.js                 |   0
 website/{ => html}/js/dobPicker.min.js             |   0
 website/{ => html}/js/header.js                    |   0
 website/{ => html}/js/jquery.js                    |   0
 website/{ => html}/js/menu.js                      |   0
 website/{ => html}/login.php                       |   2 +-
 website/{ => html}/profile.php                     |   8 ++++----
 website/{ => html}/search.php                      |   8 ++++----
 website/{ => html}/settings.php                    |   8 ++++----
 website/{ => html}/styles/adminpanel.css           |   0
 website/{ => html}/styles/chat.css                 |   0
 website/html/styles/font-awesome.css               |   4 ++++
 website/{ => html}/styles/footer.css               |   0
 website/{ => html}/styles/header.css               |   0
 website/{ => html}/styles/index.css                |   0
 website/{ => html}/styles/main.css                 |   0
 website/{ => html}/styles/menu.css                 |   0
 website/{ => html}/styles/profile.css              |   0
 website/{ => html}/styles/search.css               |   0
 website/{ => html}/styles/settings.css             |   0
 website/{ => html}/template.php                    |   8 ++++----
 website/styles/font-awesome.css                    |   4 ----
 website/views/group.php                            |   2 +-
 website/views/profile.php                          |   2 +-
 37 files changed, 35 insertions(+), 35 deletions(-)
 rename website/{php => }/connect.php (100%)
 rename website/{ => html}/admin.php (66%)
 rename website/{ => html}/chat.php (66%)
 rename website/{ => html}/fonts/FontAwesome.otf (100%)
 rename website/{ => html}/fonts/fontawesome-webfont.eot (100%)
 rename website/{ => html}/fonts/fontawesome-webfont.svg (100%)
 rename website/{ => html}/fonts/fontawesome-webfont.ttf (100%)
 rename website/{ => html}/fonts/fontawesome-webfont.woff (100%)
 rename website/{ => html}/fonts/fontawesome-webfont.woff2 (100%)
 rename website/{ => html}/group.php (67%)
 rename website/{ => html}/img/add-friend.png (100%)
 rename website/{ => html}/img/leave-group.png (100%)
 rename website/{ => html}/img/top-logo.png (100%)
 rename website/{ => html}/js/dobPicker.js (100%)
 rename website/{ => html}/js/dobPicker.min.js (100%)
 rename website/{ => html}/js/header.js (100%)
 rename website/{ => html}/js/jquery.js (100%)
 rename website/{ => html}/js/menu.js (100%)
 rename website/{ => html}/login.php (99%)
 rename website/{ => html}/profile.php (67%)
 rename website/{ => html}/search.php (66%)
 rename website/{ => html}/settings.php (65%)
 rename website/{ => html}/styles/adminpanel.css (100%)
 rename website/{ => html}/styles/chat.css (100%)
 create mode 100644 website/html/styles/font-awesome.css
 rename website/{ => html}/styles/footer.css (100%)
 rename website/{ => html}/styles/header.css (100%)
 rename website/{ => html}/styles/index.css (100%)
 rename website/{ => html}/styles/main.css (100%)
 rename website/{ => html}/styles/menu.css (100%)
 rename website/{ => html}/styles/profile.css (100%)
 rename website/{ => html}/styles/search.css (100%)
 rename website/{ => html}/styles/settings.css (100%)
 rename website/{ => html}/template.php (66%)
 delete mode 100644 website/styles/font-awesome.css

diff --git a/website/php/connect.php b/website/connect.php
similarity index 100%
rename from website/php/connect.php
rename to website/connect.php
diff --git a/website/admin.php b/website/html/admin.php
similarity index 66%
rename from website/admin.php
rename to website/html/admin.php
index 7529705..5faa096 100644
--- a/website/admin.php
+++ b/website/html/admin.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("views/head.php"); ?>
+    <?php include("../views/head.php"); ?>
     <style>
         @import url("styles/adminpanel.css");
     </style>
@@ -12,13 +12,13 @@
  * This view adds the main layout over the screen.
  * Header and menu.
  */
-include("views/main.php");
+include("../views/main.php");
 
 /* Add your view files here. */
-include("views/adminpanel.php");
+include("../views/adminpanel.php");
 
 /* This adds the footer. */
-include("views/footer.php");
+include("../views/footer.php");
 ?>
 </body>
 </html>
diff --git a/website/chat.php b/website/html/chat.php
similarity index 66%
rename from website/chat.php
rename to website/html/chat.php
index b2ed584..f077a4d 100644
--- a/website/chat.php
+++ b/website/html/chat.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("views/head.php"); ?>
+    <?php include("../views/head.php"); ?>
     <style>
         @import url("styles/chat.css");
     </style>
@@ -12,13 +12,13 @@
  * This view adds the main layout over the screen.
  * Header, menu, footer.
  */
-include("views/main.php");
+include("../views/main.php");
 
 /* Add your view files here. */
-include("views/chat-view.php");
+include("../views/chat-view.php");
 
 /* This adds the footer. */
-include("views/footer.php");
+include("../views/footer.php");
 ?>
 </body>
 </html>
diff --git a/website/fonts/FontAwesome.otf b/website/html/fonts/FontAwesome.otf
similarity index 100%
rename from website/fonts/FontAwesome.otf
rename to website/html/fonts/FontAwesome.otf
diff --git a/website/fonts/fontawesome-webfont.eot b/website/html/fonts/fontawesome-webfont.eot
similarity index 100%
rename from website/fonts/fontawesome-webfont.eot
rename to website/html/fonts/fontawesome-webfont.eot
diff --git a/website/fonts/fontawesome-webfont.svg b/website/html/fonts/fontawesome-webfont.svg
similarity index 100%
rename from website/fonts/fontawesome-webfont.svg
rename to website/html/fonts/fontawesome-webfont.svg
diff --git a/website/fonts/fontawesome-webfont.ttf b/website/html/fonts/fontawesome-webfont.ttf
similarity index 100%
rename from website/fonts/fontawesome-webfont.ttf
rename to website/html/fonts/fontawesome-webfont.ttf
diff --git a/website/fonts/fontawesome-webfont.woff b/website/html/fonts/fontawesome-webfont.woff
similarity index 100%
rename from website/fonts/fontawesome-webfont.woff
rename to website/html/fonts/fontawesome-webfont.woff
diff --git a/website/fonts/fontawesome-webfont.woff2 b/website/html/fonts/fontawesome-webfont.woff2
similarity index 100%
rename from website/fonts/fontawesome-webfont.woff2
rename to website/html/fonts/fontawesome-webfont.woff2
diff --git a/website/group.php b/website/html/group.php
similarity index 67%
rename from website/group.php
rename to website/html/group.php
index 819c630..ee20feb 100644
--- a/website/group.php
+++ b/website/html/group.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("views/head.php"); ?>
+    <?php include("../views/head.php"); ?>
     <style>
         @import url("styles/profile.css");
     </style>
@@ -12,13 +12,13 @@
  * This view adds the main layout over the screen.
  * Header, menu, footer.
  */
-include("views/main.php");
+include("../views/main.php");
 
 /* Add your view files here. */
-include("views/group.php");
+include("../views/group.php");
 
 /* This adds the footer. */
-include("views/footer.php");
+include("../views/footer.php");
 ?>
 </body>
 </html>
diff --git a/website/img/add-friend.png b/website/html/img/add-friend.png
similarity index 100%
rename from website/img/add-friend.png
rename to website/html/img/add-friend.png
diff --git a/website/img/leave-group.png b/website/html/img/leave-group.png
similarity index 100%
rename from website/img/leave-group.png
rename to website/html/img/leave-group.png
diff --git a/website/img/top-logo.png b/website/html/img/top-logo.png
similarity index 100%
rename from website/img/top-logo.png
rename to website/html/img/top-logo.png
diff --git a/website/js/dobPicker.js b/website/html/js/dobPicker.js
similarity index 100%
rename from website/js/dobPicker.js
rename to website/html/js/dobPicker.js
diff --git a/website/js/dobPicker.min.js b/website/html/js/dobPicker.min.js
similarity index 100%
rename from website/js/dobPicker.min.js
rename to website/html/js/dobPicker.min.js
diff --git a/website/js/header.js b/website/html/js/header.js
similarity index 100%
rename from website/js/header.js
rename to website/html/js/header.js
diff --git a/website/js/jquery.js b/website/html/js/jquery.js
similarity index 100%
rename from website/js/jquery.js
rename to website/html/js/jquery.js
diff --git a/website/js/menu.js b/website/html/js/menu.js
similarity index 100%
rename from website/js/menu.js
rename to website/html/js/menu.js
diff --git a/website/login.php b/website/html/login.php
similarity index 99%
rename from website/login.php
rename to website/html/login.php
index 4fc0321..dbce625 100644
--- a/website/login.php
+++ b/website/html/login.php
@@ -17,7 +17,7 @@
          alt="MyHyvesbook+">
 </div>
 
-<form action="../profile.php"
+<form action="profile.php"
       method="post">
     <h1>Welkom bij MyHyvesbook+</h1>
 
diff --git a/website/profile.php b/website/html/profile.php
similarity index 67%
rename from website/profile.php
rename to website/html/profile.php
index b26c354..d82fe48 100644
--- a/website/profile.php
+++ b/website/html/profile.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("views/head.php"); ?>
+    <?php include("../views/head.php"); ?>
     <style>
         @import url("styles/profile.css");
     </style>
@@ -12,13 +12,13 @@
  * This view adds the main layout over the screen.
  * Header, menu, footer.
  */
-include("views/main.php");
+include("../views/main.php");
 
 /* Add your view files here. */
-include("views/profile.php");
+include("../views/profile.php");
 
 /* This adds the footer. */
-include("views/footer.php");
+include("../views/footer.php");
 ?>
 </body>
 </html>
diff --git a/website/search.php b/website/html/search.php
similarity index 66%
rename from website/search.php
rename to website/html/search.php
index 33df2fe..c314791 100644
--- a/website/search.php
+++ b/website/html/search.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("views/head.php"); ?>
+    <?php include("../views/head.php"); ?>
     <style>
         @import url("styles/search.css");
     </style>
@@ -12,13 +12,13 @@
  * This view adds the main layout over the screen.
  * Header and menu.
  */
-include("views/main.php");
+include("../views/main.php");
 
 /* Add your view files here. */
-include("views/search-view.php");
+include("../views/search-view.php");
 
 /* This adds the footer. */
-include("views/footer.php");
+include("../views/footer.php");
 ?>
 </body>
 </html>
diff --git a/website/settings.php b/website/html/settings.php
similarity index 65%
rename from website/settings.php
rename to website/html/settings.php
index 577cd8b..43b1497 100644
--- a/website/settings.php
+++ b/website/html/settings.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("views/head.php"); ?>
+    <?php include("../views/head.php"); ?>
     <style>
         @import url("styles/settings.css");
     </style>
@@ -12,13 +12,13 @@
  * This view adds the main layout over the screen.
  * Header and menu.
  */
-include("views/main.php");
+include("../views/main.php");
 
 /* Add your view files here. */
-include("views/settings-view.php");
+include("../views/settings-view.php");
 
 /* This adds the footer. */
-include("views/footer.php");
+include("../views/footer.php");
 ?>
 </body>
 </html>
diff --git a/website/styles/adminpanel.css b/website/html/styles/adminpanel.css
similarity index 100%
rename from website/styles/adminpanel.css
rename to website/html/styles/adminpanel.css
diff --git a/website/styles/chat.css b/website/html/styles/chat.css
similarity index 100%
rename from website/styles/chat.css
rename to website/html/styles/chat.css
diff --git a/website/html/styles/font-awesome.css b/website/html/styles/font-awesome.css
new file mode 100644
index 0000000..248ea7a
--- /dev/null
+++ b/website/html/styles/font-awesome.css
@@ -0,0 +1,4 @@
+/*!
+ *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}  .fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}  .fa-2x{font-size:2em}  .fa-3x{font-size:3em}  .fa-4x{font-size:4em}  .fa-5x{font-size:5em}  .fa-fw{width:1.28571429em;text-align:center}  .fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}  .fa-ul>li{position:relative}  .fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}  .fa-li.fa-lg{left:-1.85714286em}  .fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}  .fa-pull-left{float:left}  .fa-pull-right{float:right}  .fa.fa-pull-left{margin-right:.3em}  .fa.fa-pull-right{margin-left:.3em}  .pull-right{float:right}  .pull-left{float:left}  .fa.pull-left{margin-right:.3em}  .fa.pull-right{margin-left:.3em}  .fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}  .fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}  @-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}  @keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}  .fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}  .fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}  .fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}  .fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}  .fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}  :root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}  .fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}  .fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}  .fa-stack-1x{line-height:inherit}  .fa-stack-2x{font-size:2em}  .fa-inverse{color:#fff}  .fa-glass:before{content:"\f000"}  .fa-music:before{content:"\f001"}  .fa-search:before{content:"\f002"}  .fa-envelope-o:before{content:"\f003"}  .fa-heart:before{content:"\f004"}  .fa-star:before{content:"\f005"}  .fa-star-o:before{content:"\f006"}  .fa-user:before{content:"\f007"}  .fa-film:before{content:"\f008"}  .fa-th-large:before{content:"\f009"}  .fa-th:before{content:"\f00a"}  .fa-th-list:before{content:"\f00b"}  .fa-check:before{content:"\f00c"}  .fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}  .fa-search-plus:before{content:"\f00e"}  .fa-search-minus:before{content:"\f010"}  .fa-power-off:before{content:"\f011"}  .fa-signal:before{content:"\f012"}  .fa-gear:before,.fa-cog:before{content:"\f013"}  .fa-trash-o:before{content:"\f014"}  .fa-home:before{content:"\f015"}  .fa-file-o:before{content:"\f016"}  .fa-clock-o:before{content:"\f017"}  .fa-road:before{content:"\f018"}  .fa-download:before{content:"\f019"}  .fa-arrow-circle-o-down:before{content:"\f01a"}  .fa-arrow-circle-o-up:before{content:"\f01b"}  .fa-inbox:before{content:"\f01c"}  .fa-play-circle-o:before{content:"\f01d"}  .fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}  .fa-refresh:before{content:"\f021"}  .fa-list-alt:before{content:"\f022"}  .fa-lock:before{content:"\f023"}  .fa-flag:before{content:"\f024"}  .fa-headphones:before{content:"\f025"}  .fa-volume-off:before{content:"\f026"}  .fa-volume-down:before{content:"\f027"}  .fa-volume-up:before{content:"\f028"}  .fa-qrcode:before{content:"\f029"}  .fa-barcode:before{content:"\f02a"}  .fa-tag:before{content:"\f02b"}  .fa-tags:before{content:"\f02c"}  .fa-book:before{content:"\f02d"}  .fa-bookmark:before{content:"\f02e"}  .fa-print:before{content:"\f02f"}  .fa-camera:before{content:"\f030"}  .fa-font:before{content:"\f031"}  .fa-bold:before{content:"\f032"}  .fa-italic:before{content:"\f033"}  .fa-text-height:before{content:"\f034"}  .fa-text-width:before{content:"\f035"}  .fa-align-left:before{content:"\f036"}  .fa-align-center:before{content:"\f037"}  .fa-align-right:before{content:"\f038"}  .fa-align-justify:before{content:"\f039"}  .fa-list:before{content:"\f03a"}  .fa-dedent:before,.fa-outdent:before{content:"\f03b"}  .fa-indent:before{content:"\f03c"}  .fa-video-camera:before{content:"\f03d"}  .fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}  .fa-pencil:before{content:"\f040"}  .fa-map-marker:before{content:"\f041"}  .fa-adjust:before{content:"\f042"}  .fa-tint:before{content:"\f043"}  .fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}  .fa-share-square-o:before{content:"\f045"}  .fa-check-square-o:before{content:"\f046"}  .fa-arrows:before{content:"\f047"}  .fa-step-backward:before{content:"\f048"}  .fa-fast-backward:before{content:"\f049"}  .fa-backward:before{content:"\f04a"}  .fa-play:before{content:"\f04b"}  .fa-pause:before{content:"\f04c"}  .fa-stop:before{content:"\f04d"}  .fa-forward:before{content:"\f04e"}  .fa-fast-forward:before{content:"\f050"}  .fa-step-forward:before{content:"\f051"}  .fa-eject:before{content:"\f052"}  .fa-chevron-left:before{content:"\f053"}  .fa-chevron-right:before{content:"\f054"}  .fa-plus-circle:before{content:"\f055"}  .fa-minus-circle:before{content:"\f056"}  .fa-times-circle:before{content:"\f057"}  .fa-check-circle:before{content:"\f058"}  .fa-question-circle:before{content:"\f059"}  .fa-info-circle:before{content:"\f05a"}  .fa-crosshairs:before{content:"\f05b"}  .fa-times-circle-o:before{content:"\f05c"}  .fa-check-circle-o:before{content:"\f05d"}  .fa-ban:before{content:"\f05e"}  .fa-arrow-left:before{content:"\f060"}  .fa-arrow-right:before{content:"\f061"}  .fa-arrow-up:before{content:"\f062"}  .fa-arrow-down:before{content:"\f063"}  .fa-mail-forward:before,.fa-share:before{content:"\f064"}  .fa-expand:before{content:"\f065"}  .fa-compress:before{content:"\f066"}  .fa-plus:before{content:"\f067"}  .fa-minus:before{content:"\f068"}  .fa-asterisk:before{content:"\f069"}  .fa-exclamation-circle:before{content:"\f06a"}  .fa-gift:before{content:"\f06b"}  .fa-leaf:before{content:"\f06c"}  .fa-fire:before{content:"\f06d"}  .fa-eye:before{content:"\f06e"}  .fa-eye-slash:before{content:"\f070"}  .fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}  .fa-plane:before{content:"\f072"}  .fa-calendar:before{content:"\f073"}  .fa-random:before{content:"\f074"}  .fa-comment:before{content:"\f075"}  .fa-magnet:before{content:"\f076"}  .fa-chevron-up:before{content:"\f077"}  .fa-chevron-down:before{content:"\f078"}  .fa-retweet:before{content:"\f079"}  .fa-shopping-cart:before{content:"\f07a"}  .fa-folder:before{content:"\f07b"}  .fa-folder-open:before{content:"\f07c"}  .fa-arrows-v:before{content:"\f07d"}  .fa-arrows-h:before{content:"\f07e"}  .fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}  .fa-twitter-square:before{content:"\f081"}  .fa-facebook-square:before{content:"\f082"}  .fa-camera-retro:before{content:"\f083"}  .fa-key:before{content:"\f084"}  .fa-gears:before,.fa-cogs:before{content:"\f085"}  .fa-comments:before{content:"\f086"}  .fa-thumbs-o-up:before{content:"\f087"}  .fa-thumbs-o-down:before{content:"\f088"}  .fa-star-half:before{content:"\f089"}  .fa-heart-o:before{content:"\f08a"}  .fa-sign-out:before{content:"\f08b"}  .fa-linkedin-square:before{content:"\f08c"}  .fa-thumb-tack:before{content:"\f08d"}  .fa-external-link:before{content:"\f08e"}  .fa-sign-in:before{content:"\f090"}  .fa-trophy:before{content:"\f091"}  .fa-github-square:before{content:"\f092"}  .fa-upload:before{content:"\f093"}  .fa-lemon-o:before{content:"\f094"}  .fa-phone:before{content:"\f095"}  .fa-square-o:before{content:"\f096"}  .fa-bookmark-o:before{content:"\f097"}  .fa-phone-square:before{content:"\f098"}  .fa-twitter:before{content:"\f099"}  .fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}  .fa-github:before{content:"\f09b"}  .fa-unlock:before{content:"\f09c"}  .fa-credit-card:before{content:"\f09d"}  .fa-feed:before,.fa-rss:before{content:"\f09e"}  .fa-hdd-o:before{content:"\f0a0"}  .fa-bullhorn:before{content:"\f0a1"}  .fa-bell:before{content:"\f0f3"}  .fa-certificate:before{content:"\f0a3"}  .fa-hand-o-right:before{content:"\f0a4"}  .fa-hand-o-left:before{content:"\f0a5"}  .fa-hand-o-up:before{content:"\f0a6"}  .fa-hand-o-down:before{content:"\f0a7"}  .fa-arrow-circle-left:before{content:"\f0a8"}  .fa-arrow-circle-right:before{content:"\f0a9"}  .fa-arrow-circle-up:before{content:"\f0aa"}  .fa-arrow-circle-down:before{content:"\f0ab"}  .fa-globe:before{content:"\f0ac"}  .fa-wrench:before{content:"\f0ad"}  .fa-tasks:before{content:"\f0ae"}  .fa-filter:before{content:"\f0b0"}  .fa-briefcase:before{content:"\f0b1"}  .fa-arrows-alt:before{content:"\f0b2"}  .fa-group:before,.fa-users:before{content:"\f0c0"}  .fa-chain:before,.fa-link:before{content:"\f0c1"}  .fa-cloud:before{content:"\f0c2"}  .fa-flask:before{content:"\f0c3"}  .fa-cut:before,.fa-scissors:before{content:"\f0c4"}  .fa-copy:before,.fa-files-o:before{content:"\f0c5"}  .fa-paperclip:before{content:"\f0c6"}  .fa-save:before,.fa-floppy-o:before{content:"\f0c7"}  .fa-square:before{content:"\f0c8"}  .fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}  .fa-list-ul:before{content:"\f0ca"}  .fa-list-ol:before{content:"\f0cb"}  .fa-strikethrough:before{content:"\f0cc"}  .fa-underline:before{content:"\f0cd"}  .fa-table:before{content:"\f0ce"}  .fa-magic:before{content:"\f0d0"}  .fa-truck:before{content:"\f0d1"}  .fa-pinterest:before{content:"\f0d2"}  .fa-pinterest-square:before{content:"\f0d3"}  .fa-google-plus-square:before{content:"\f0d4"}  .fa-google-plus:before{content:"\f0d5"}  .fa-money:before{content:"\f0d6"}  .fa-caret-down:before{content:"\f0d7"}  .fa-caret-up:before{content:"\f0d8"}  .fa-caret-left:before{content:"\f0d9"}  .fa-caret-right:before{content:"\f0da"}  .fa-columns:before{content:"\f0db"}  .fa-unsorted:before,.fa-sort:before{content:"\f0dc"}  .fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}  .fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}  .fa-envelope:before{content:"\f0e0"}  .fa-linkedin:before{content:"\f0e1"}  .fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}  .fa-legal:before,.fa-gavel:before{content:"\f0e3"}  .fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}  .fa-comment-o:before{content:"\f0e5"}  .fa-comments-o:before{content:"\f0e6"}  .fa-flash:before,.fa-bolt:before{content:"\f0e7"}  .fa-sitemap:before{content:"\f0e8"}  .fa-umbrella:before{content:"\f0e9"}  .fa-paste:before,.fa-clipboard:before{content:"\f0ea"}  .fa-lightbulb-o:before{content:"\f0eb"}  .fa-exchange:before{content:"\f0ec"}  .fa-cloud-download:before{content:"\f0ed"}  .fa-cloud-upload:before{content:"\f0ee"}  .fa-user-md:before{content:"\f0f0"}  .fa-stethoscope:before{content:"\f0f1"}  .fa-suitcase:before{content:"\f0f2"}  .fa-bell-o:before{content:"\f0a2"}  .fa-coffee:before{content:"\f0f4"}  .fa-cutlery:before{content:"\f0f5"}  .fa-file-text-o:before{content:"\f0f6"}  .fa-building-o:before{content:"\f0f7"}  .fa-hospital-o:before{content:"\f0f8"}  .fa-ambulance:before{content:"\f0f9"}  .fa-medkit:before{content:"\f0fa"}  .fa-fighter-jet:before{content:"\f0fb"}  .fa-beer:before{content:"\f0fc"}  .fa-h-square:before{content:"\f0fd"}  .fa-plus-square:before{content:"\f0fe"}  .fa-angle-double-left:before{content:"\f100"}  .fa-angle-double-right:before{content:"\f101"}  .fa-angle-double-up:before{content:"\f102"}  .fa-angle-double-down:before{content:"\f103"}  .fa-angle-left:before{content:"\f104"}  .fa-angle-right:before{content:"\f105"}  .fa-angle-up:before{content:"\f106"}  .fa-angle-down:before{content:"\f107"}  .fa-desktop:before{content:"\f108"}  .fa-laptop:before{content:"\f109"}  .fa-tablet:before{content:"\f10a"}  .fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}  .fa-circle-o:before{content:"\f10c"}  .fa-quote-left:before{content:"\f10d"}  .fa-quote-right:before{content:"\f10e"}  .fa-spinner:before{content:"\f110"}  .fa-circle:before{content:"\f111"}  .fa-mail-reply:before,.fa-reply:before{content:"\f112"}  .fa-github-alt:before{content:"\f113"}  .fa-folder-o:before{content:"\f114"}  .fa-folder-open-o:before{content:"\f115"}  .fa-smile-o:before{content:"\f118"}  .fa-frown-o:before{content:"\f119"}  .fa-meh-o:before{content:"\f11a"}  .fa-gamepad:before{content:"\f11b"}  .fa-keyboard-o:before{content:"\f11c"}  .fa-flag-o:before{content:"\f11d"}  .fa-flag-checkered:before{content:"\f11e"}  .fa-terminal:before{content:"\f120"}  .fa-code:before{content:"\f121"}  .fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}  .fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}  .fa-location-arrow:before{content:"\f124"}  .fa-crop:before{content:"\f125"}  .fa-code-fork:before{content:"\f126"}  .fa-unlink:before,.fa-chain-broken:before{content:"\f127"}  .fa-question:before{content:"\f128"}  .fa-info:before{content:"\f129"}  .fa-exclamation:before{content:"\f12a"}  .fa-superscript:before{content:"\f12b"}  .fa-subscript:before{content:"\f12c"}  .fa-eraser:before{content:"\f12d"}  .fa-puzzle-piece:before{content:"\f12e"}  .fa-microphone:before{content:"\f130"}  .fa-microphone-slash:before{content:"\f131"}  .fa-shield:before{content:"\f132"}  .fa-calendar-o:before{content:"\f133"}  .fa-fire-extinguisher:before{content:"\f134"}  .fa-rocket:before{content:"\f135"}  .fa-maxcdn:before{content:"\f136"}  .fa-chevron-circle-left:before{content:"\f137"}  .fa-chevron-circle-right:before{content:"\f138"}  .fa-chevron-circle-up:before{content:"\f139"}  .fa-chevron-circle-down:before{content:"\f13a"}  .fa-html5:before{content:"\f13b"}  .fa-css3:before{content:"\f13c"}  .fa-anchor:before{content:"\f13d"}  .fa-unlock-alt:before{content:"\f13e"}  .fa-bullseye:before{content:"\f140"}  .fa-ellipsis-h:before{content:"\f141"}  .fa-ellipsis-v:before{content:"\f142"}  .fa-rss-square:before{content:"\f143"}  .fa-play-circle:before{content:"\f144"}  .fa-ticket:before{content:"\f145"}  .fa-minus-square:before{content:"\f146"}  .fa-minus-square-o:before{content:"\f147"}  .fa-level-up:before{content:"\f148"}  .fa-level-down:before{content:"\f149"}  .fa-check-square:before{content:"\f14a"}  .fa-pencil-square:before{content:"\f14b"}  .fa-external-link-square:before{content:"\f14c"}  .fa-share-square:before{content:"\f14d"}  .fa-compass:before{content:"\f14e"}  .fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}  .fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}  .fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}  .fa-euro:before,.fa-eur:before{content:"\f153"}  .fa-gbp:before{content:"\f154"}  .fa-dollar:before,.fa-usd:before{content:"\f155"}  .fa-rupee:before,.fa-inr:before{content:"\f156"}  .fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}  .fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}  .fa-won:before,.fa-krw:before{content:"\f159"}  .fa-bitcoin:before,.fa-btc:before{content:"\f15a"}  .fa-file:before{content:"\f15b"}  .fa-file-text:before{content:"\f15c"}  .fa-sort-alpha-asc:before{content:"\f15d"}  .fa-sort-alpha-desc:before{content:"\f15e"}  .fa-sort-amount-asc:before{content:"\f160"}  .fa-sort-amount-desc:before{content:"\f161"}  .fa-sort-numeric-asc:before{content:"\f162"}  .fa-sort-numeric-desc:before{content:"\f163"}  .fa-thumbs-up:before{content:"\f164"}  .fa-thumbs-down:before{content:"\f165"}  .fa-youtube-square:before{content:"\f166"}  .fa-youtube:before{content:"\f167"}  .fa-xing:before{content:"\f168"}  .fa-xing-square:before{content:"\f169"}  .fa-youtube-play:before{content:"\f16a"}  .fa-dropbox:before{content:"\f16b"}  .fa-stack-overflow:before{content:"\f16c"}  .fa-instagram:before{content:"\f16d"}  .fa-flickr:before{content:"\f16e"}  .fa-adn:before{content:"\f170"}  .fa-bitbucket:before{content:"\f171"}  .fa-bitbucket-square:before{content:"\f172"}  .fa-tumblr:before{content:"\f173"}  .fa-tumblr-square:before{content:"\f174"}  .fa-long-arrow-down:before{content:"\f175"}  .fa-long-arrow-up:before{content:"\f176"}  .fa-long-arrow-left:before{content:"\f177"}  .fa-long-arrow-right:before{content:"\f178"}  .fa-apple:before{content:"\f179"}  .fa-windows:before{content:"\f17a"}  .fa-android:before{content:"\f17b"}  .fa-linux:before{content:"\f17c"}  .fa-dribbble:before{content:"\f17d"}  .fa-skype:before{content:"\f17e"}  .fa-foursquare:before{content:"\f180"}  .fa-trello:before{content:"\f181"}  .fa-female:before{content:"\f182"}  .fa-male:before{content:"\f183"}  .fa-gittip:before,.fa-gratipay:before{content:"\f184"}  .fa-sun-o:before{content:"\f185"}  .fa-moon-o:before{content:"\f186"}  .fa-archive:before{content:"\f187"}  .fa-bug:before{content:"\f188"}  .fa-vk:before{content:"\f189"}  .fa-weibo:before{content:"\f18a"}  .fa-renren:before{content:"\f18b"}  .fa-pagelines:before{content:"\f18c"}  .fa-stack-exchange:before{content:"\f18d"}  .fa-arrow-circle-o-right:before{content:"\f18e"}  .fa-arrow-circle-o-left:before{content:"\f190"}  .fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}  .fa-dot-circle-o:before{content:"\f192"}  .fa-wheelchair:before{content:"\f193"}  .fa-vimeo-square:before{content:"\f194"}  .fa-turkish-lira:before,.fa-try:before{content:"\f195"}  .fa-plus-square-o:before{content:"\f196"}  .fa-space-shuttle:before{content:"\f197"}  .fa-slack:before{content:"\f198"}  .fa-envelope-square:before{content:"\f199"}  .fa-wordpress:before{content:"\f19a"}  .fa-openid:before{content:"\f19b"}  .fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}  .fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}  .fa-yahoo:before{content:"\f19e"}  .fa-google:before{content:"\f1a0"}  .fa-reddit:before{content:"\f1a1"}  .fa-reddit-square:before{content:"\f1a2"}  .fa-stumbleupon-circle:before{content:"\f1a3"}  .fa-stumbleupon:before{content:"\f1a4"}  .fa-delicious:before{content:"\f1a5"}  .fa-digg:before{content:"\f1a6"}  .fa-pied-piper-pp:before{content:"\f1a7"}  .fa-pied-piper-alt:before{content:"\f1a8"}  .fa-drupal:before{content:"\f1a9"}  .fa-joomla:before{content:"\f1aa"}  .fa-language:before{content:"\f1ab"}  .fa-fax:before{content:"\f1ac"}  .fa-building:before{content:"\f1ad"}  .fa-child:before{content:"\f1ae"}  .fa-paw:before{content:"\f1b0"}  .fa-spoon:before{content:"\f1b1"}  .fa-cube:before{content:"\f1b2"}  .fa-cubes:before{content:"\f1b3"}  .fa-behance:before{content:"\f1b4"}  .fa-behance-square:before{content:"\f1b5"}  .fa-steam:before{content:"\f1b6"}  .fa-steam-square:before{content:"\f1b7"}  .fa-recycle:before{content:"\f1b8"}  .fa-automobile:before,.fa-car:before{content:"\f1b9"}  .fa-cab:before,.fa-taxi:before{content:"\f1ba"}  .fa-tree:before{content:"\f1bb"}  .fa-spotify:before{content:"\f1bc"}  .fa-deviantart:before{content:"\f1bd"}  .fa-soundcloud:before{content:"\f1be"}  .fa-database:before{content:"\f1c0"}  .fa-file-pdf-o:before{content:"\f1c1"}  .fa-file-word-o:before{content:"\f1c2"}  .fa-file-excel-o:before{content:"\f1c3"}  .fa-file-powerpoint-o:before{content:"\f1c4"}  .fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}  .fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}  .fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}  .fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}  .fa-file-code-o:before{content:"\f1c9"}  .fa-vine:before{content:"\f1ca"}  .fa-codepen:before{content:"\f1cb"}  .fa-jsfiddle:before{content:"\f1cc"}  .fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}  .fa-circle-o-notch:before{content:"\f1ce"}  .fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}  .fa-ge:before,.fa-empire:before{content:"\f1d1"}  .fa-git-square:before{content:"\f1d2"}  .fa-git:before{content:"\f1d3"}  .fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}  .fa-tencent-weibo:before{content:"\f1d5"}  .fa-qq:before{content:"\f1d6"}  .fa-wechat:before,.fa-weixin:before{content:"\f1d7"}  .fa-send:before,.fa-paper-plane:before{content:"\f1d8"}  .fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}  .fa-history:before{content:"\f1da"}  .fa-circle-thin:before{content:"\f1db"}  .fa-header:before{content:"\f1dc"}  .fa-paragraph:before{content:"\f1dd"}  .fa-sliders:before{content:"\f1de"}  .fa-share-alt:before{content:"\f1e0"}  .fa-share-alt-square:before{content:"\f1e1"}  .fa-bomb:before{content:"\f1e2"}  .fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}  .fa-tty:before{content:"\f1e4"}  .fa-binoculars:before{content:"\f1e5"}  .fa-plug:before{content:"\f1e6"}  .fa-slideshare:before{content:"\f1e7"}  .fa-twitch:before{content:"\f1e8"}  .fa-yelp:before{content:"\f1e9"}  .fa-newspaper-o:before{content:"\f1ea"}  .fa-wifi:before{content:"\f1eb"}  .fa-calculator:before{content:"\f1ec"}  .fa-paypal:before{content:"\f1ed"}  .fa-google-wallet:before{content:"\f1ee"}  .fa-cc-visa:before{content:"\f1f0"}  .fa-cc-mastercard:before{content:"\f1f1"}  .fa-cc-discover:before{content:"\f1f2"}  .fa-cc-amex:before{content:"\f1f3"}  .fa-cc-paypal:before{content:"\f1f4"}  .fa-cc-stripe:before{content:"\f1f5"}  .fa-bell-slash:before{content:"\f1f6"}  .fa-bell-slash-o:before{content:"\f1f7"}  .fa-trash:before{content:"\f1f8"}  .fa-copyright:before{content:"\f1f9"}  .fa-at:before{content:"\f1fa"}  .fa-eyedropper:before{content:"\f1fb"}  .fa-paint-brush:before{content:"\f1fc"}  .fa-birthday-cake:before{content:"\f1fd"}  .fa-area-chart:before{content:"\f1fe"}  .fa-pie-chart:before{content:"\f200"}  .fa-line-chart:before{content:"\f201"}  .fa-lastfm:before{content:"\f202"}  .fa-lastfm-square:before{content:"\f203"}  .fa-toggle-off:before{content:"\f204"}  .fa-toggle-on:before{content:"\f205"}  .fa-bicycle:before{content:"\f206"}  .fa-bus:before{content:"\f207"}  .fa-ioxhost:before{content:"\f208"}  .fa-angellist:before{content:"\f209"}  .fa-cc:before{content:"\f20a"}  .fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}  .fa-meanpath:before{content:"\f20c"}  .fa-buysellads:before{content:"\f20d"}  .fa-connectdevelop:before{content:"\f20e"}  .fa-dashcube:before{content:"\f210"}  .fa-forumbee:before{content:"\f211"}  .fa-leanpub:before{content:"\f212"}  .fa-sellsy:before{content:"\f213"}  .fa-shirtsinbulk:before{content:"\f214"}  .fa-simplybuilt:before{content:"\f215"}  .fa-skyatlas:before{content:"\f216"}  .fa-cart-plus:before{content:"\f217"}  .fa-cart-arrow-down:before{content:"\f218"}  .fa-diamond:before{content:"\f219"}  .fa-ship:before{content:"\f21a"}  .fa-user-secret:before{content:"\f21b"}  .fa-motorcycle:before{content:"\f21c"}  .fa-street-view:before{content:"\f21d"}  .fa-heartbeat:before{content:"\f21e"}  .fa-venus:before{content:"\f221"}  .fa-mars:before{content:"\f222"}  .fa-mercury:before{content:"\f223"}  .fa-intersex:before,.fa-transgender:before{content:"\f224"}  .fa-transgender-alt:before{content:"\f225"}  .fa-venus-double:before{content:"\f226"}  .fa-mars-double:before{content:"\f227"}  .fa-venus-mars:before{content:"\f228"}  .fa-mars-stroke:before{content:"\f229"}  .fa-mars-stroke-v:before{content:"\f22a"}  .fa-mars-stroke-h:before{content:"\f22b"}  .fa-neuter:before{content:"\f22c"}  .fa-genderless:before{content:"\f22d"}  .fa-facebook-official:before{content:"\f230"}  .fa-pinterest-p:before{content:"\f231"}  .fa-whatsapp:before{content:"\f232"}  .fa-server:before{content:"\f233"}  .fa-user-plus:before{content:"\f234"}  .fa-user-times:before{content:"\f235"}  .fa-hotel:before,.fa-bed:before{content:"\f236"}  .fa-viacoin:before{content:"\f237"}  .fa-train:before{content:"\f238"}  .fa-subway:before{content:"\f239"}  .fa-medium:before{content:"\f23a"}  .fa-yc:before,.fa-y-combinator:before{content:"\f23b"}  .fa-optin-monster:before{content:"\f23c"}  .fa-opencart:before{content:"\f23d"}  .fa-expeditedssl:before{content:"\f23e"}  .fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}  .fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}  .fa-battery-2:before,.fa-battery-half:before{content:"\f242"}  .fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}  .fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}  .fa-mouse-pointer:before{content:"\f245"}  .fa-i-cursor:before{content:"\f246"}  .fa-object-group:before{content:"\f247"}  .fa-object-ungroup:before{content:"\f248"}  .fa-sticky-note:before{content:"\f249"}  .fa-sticky-note-o:before{content:"\f24a"}  .fa-cc-jcb:before{content:"\f24b"}  .fa-cc-diners-club:before{content:"\f24c"}  .fa-clone:before{content:"\f24d"}  .fa-balance-scale:before{content:"\f24e"}  .fa-hourglass-o:before{content:"\f250"}  .fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}  .fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}  .fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}  .fa-hourglass:before{content:"\f254"}  .fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}  .fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}  .fa-hand-scissors-o:before{content:"\f257"}  .fa-hand-lizard-o:before{content:"\f258"}  .fa-hand-spock-o:before{content:"\f259"}  .fa-hand-pointer-o:before{content:"\f25a"}  .fa-hand-peace-o:before{content:"\f25b"}  .fa-trademark:before{content:"\f25c"}  .fa-registered:before{content:"\f25d"}  .fa-creative-commons:before{content:"\f25e"}  .fa-gg:before{content:"\f260"}  .fa-gg-circle:before{content:"\f261"}  .fa-tripadvisor:before{content:"\f262"}  .fa-odnoklassniki:before{content:"\f263"}  .fa-odnoklassniki-square:before{content:"\f264"}  .fa-get-pocket:before{content:"\f265"}  .fa-wikipedia-w:before{content:"\f266"}  .fa-safari:before{content:"\f267"}  .fa-chrome:before{content:"\f268"}  .fa-firefox:before{content:"\f269"}  .fa-opera:before{content:"\f26a"}  .fa-internet-explorer:before{content:"\f26b"}  .fa-tv:before,.fa-television:before{content:"\f26c"}  .fa-contao:before{content:"\f26d"}  .fa-500px:before{content:"\f26e"}  .fa-amazon:before{content:"\f270"}  .fa-calendar-plus-o:before{content:"\f271"}  .fa-calendar-minus-o:before{content:"\f272"}  .fa-calendar-times-o:before{content:"\f273"}  .fa-calendar-check-o:before{content:"\f274"}  .fa-industry:before{content:"\f275"}  .fa-map-pin:before{content:"\f276"}  .fa-map-signs:before{content:"\f277"}  .fa-map-o:before{content:"\f278"}  .fa-map:before{content:"\f279"}  .fa-commenting:before{content:"\f27a"}  .fa-commenting-o:before{content:"\f27b"}  .fa-houzz:before{content:"\f27c"}  .fa-vimeo:before{content:"\f27d"}  .fa-black-tie:before{content:"\f27e"}  .fa-fonticons:before{content:"\f280"}  .fa-reddit-alien:before{content:"\f281"}  .fa-edge:before{content:"\f282"}  .fa-credit-card-alt:before{content:"\f283"}  .fa-codiepie:before{content:"\f284"}  .fa-modx:before{content:"\f285"}  .fa-fort-awesome:before{content:"\f286"}  .fa-usb:before{content:"\f287"}  .fa-product-hunt:before{content:"\f288"}  .fa-mixcloud:before{content:"\f289"}  .fa-scribd:before{content:"\f28a"}  .fa-pause-circle:before{content:"\f28b"}  .fa-pause-circle-o:before{content:"\f28c"}  .fa-stop-circle:before{content:"\f28d"}  .fa-stop-circle-o:before{content:"\f28e"}  .fa-shopping-bag:before{content:"\f290"}  .fa-shopping-basket:before{content:"\f291"}  .fa-hashtag:before{content:"\f292"}  .fa-bluetooth:before{content:"\f293"}  .fa-bluetooth-b:before{content:"\f294"}  .fa-percent:before{content:"\f295"}  .fa-gitlab:before{content:"\f296"}  .fa-wpbeginner:before{content:"\f297"}  .fa-wpforms:before{content:"\f298"}  .fa-envira:before{content:"\f299"}  .fa-universal-access:before{content:"\f29a"}  .fa-wheelchair-alt:before{content:"\f29b"}  .fa-question-circle-o:before{content:"\f29c"}  .fa-blind:before{content:"\f29d"}  .fa-audio-description:before{content:"\f29e"}  .fa-volume-control-phone:before{content:"\f2a0"}  .fa-braille:before{content:"\f2a1"}  .fa-assistive-listening-systems:before{content:"\f2a2"}  .fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}  .fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}  .fa-glide:before{content:"\f2a5"}  .fa-glide-g:before{content:"\f2a6"}  .fa-signing:before,.fa-sign-language:before{content:"\f2a7"}  .fa-low-vision:before{content:"\f2a8"}  .fa-viadeo:before{content:"\f2a9"}  .fa-viadeo-square:before{content:"\f2aa"}  .fa-snapchat:before{content:"\f2ab"}  .fa-snapchat-ghost:before{content:"\f2ac"}  .fa-snapchat-square:before{content:"\f2ad"}  .fa-pied-piper:before{content:"\f2ae"}  .fa-first-order:before{content:"\f2b0"}  .fa-yoast:before{content:"\f2b1"}  .fa-themeisle:before{content:"\f2b2"}  .fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}  .fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}  .fa-handshake-o:before{content:"\f2b5"}  .fa-envelope-open:before{content:"\f2b6"}  .fa-envelope-open-o:before{content:"\f2b7"}  .fa-linode:before{content:"\f2b8"}  .fa-address-book:before{content:"\f2b9"}  .fa-address-book-o:before{content:"\f2ba"}  .fa-vcard:before,.fa-address-card:before{content:"\f2bb"}  .fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}  .fa-user-circle:before{content:"\f2bd"}  .fa-user-circle-o:before{content:"\f2be"}  .fa-user-o:before{content:"\f2c0"}  .fa-id-badge:before{content:"\f2c1"}  .fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}  .fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}  .fa-quora:before{content:"\f2c4"}  .fa-free-code-camp:before{content:"\f2c5"}  .fa-telegram:before{content:"\f2c6"}  .fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}  .fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}  .fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}  .fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}  .fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}  .fa-shower:before{content:"\f2cc"}  .fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}  .fa-podcast:before{content:"\f2ce"}  .fa-window-maximize:before{content:"\f2d0"}  .fa-window-minimize:before{content:"\f2d1"}  .fa-window-restore:before{content:"\f2d2"}  .fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}  .fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}  .fa-bandcamp:before{content:"\f2d5"}  .fa-grav:before{content:"\f2d6"}  .fa-etsy:before{content:"\f2d7"}  .fa-imdb:before{content:"\f2d8"}  .fa-ravelry:before{content:"\f2d9"}  .fa-eercast:before{content:"\f2da"}  .fa-microchip:before{content:"\f2db"}  .fa-snowflake-o:before{content:"\f2dc"}  .fa-superpowers:before{content:"\f2dd"}  .fa-wpexplorer:before{content:"\f2de"}  .fa-meetup:before{content:"\f2e0"}  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}  .sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
diff --git a/website/styles/footer.css b/website/html/styles/footer.css
similarity index 100%
rename from website/styles/footer.css
rename to website/html/styles/footer.css
diff --git a/website/styles/header.css b/website/html/styles/header.css
similarity index 100%
rename from website/styles/header.css
rename to website/html/styles/header.css
diff --git a/website/styles/index.css b/website/html/styles/index.css
similarity index 100%
rename from website/styles/index.css
rename to website/html/styles/index.css
diff --git a/website/styles/main.css b/website/html/styles/main.css
similarity index 100%
rename from website/styles/main.css
rename to website/html/styles/main.css
diff --git a/website/styles/menu.css b/website/html/styles/menu.css
similarity index 100%
rename from website/styles/menu.css
rename to website/html/styles/menu.css
diff --git a/website/styles/profile.css b/website/html/styles/profile.css
similarity index 100%
rename from website/styles/profile.css
rename to website/html/styles/profile.css
diff --git a/website/styles/search.css b/website/html/styles/search.css
similarity index 100%
rename from website/styles/search.css
rename to website/html/styles/search.css
diff --git a/website/styles/settings.css b/website/html/styles/settings.css
similarity index 100%
rename from website/styles/settings.css
rename to website/html/styles/settings.css
diff --git a/website/template.php b/website/html/template.php
similarity index 66%
rename from website/template.php
rename to website/html/template.php
index f52a526..17db022 100644
--- a/website/template.php
+++ b/website/html/template.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <?php include("views/head.php"); ?>
+    <?php include("../views/head.php"); ?>
     <style>
         /*Insert own stylesheet here ;)*/
     </style>
@@ -12,13 +12,13 @@
  * This view adds the main layout over the screen.
  * Header and menu.
  */
-include("views/main.php");
+include("../views/main.php");
 
 /* Add your view files here. */
-include("views/homepage.php");
+include("../views/homepage.php");
 
 /* This adds the footer. */
-include("views/footer.php");
+include("../views/footer.php");
 ?>
 </body>
 </html>
diff --git a/website/styles/font-awesome.css b/website/styles/font-awesome.css
deleted file mode 100644
index 540440c..0000000
--- a/website/styles/font-awesome.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
diff --git a/website/views/group.php b/website/views/group.php
index 391ed26..d893b57 100644
--- a/website/views/group.php
+++ b/website/views/group.php
@@ -2,7 +2,7 @@
     <div class="profile-box platform">
         <img class="left group-picture" src="http://i.imgur.com/afjEUx2.jpg">
         <div class="profile-button">
-            <p><img src="../website/img/leave-group.png"> Groep verlaten</p>
+            <p><img src="img/leave-group.png"> Groep verlaten</p>
         </div>
         <h1 class="profile-username">[groepnaam]</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
diff --git a/website/views/profile.php b/website/views/profile.php
index e8fae1e..2f491d2 100644
--- a/website/views/profile.php
+++ b/website/views/profile.php
@@ -2,7 +2,7 @@
     <div class="profile-box platform">
         <img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
         <div class="profile-button">
-            <p><img src="../img/add-friend.png"> Als vriend toevoegen</p>
+            <p><img src="../html/img/add-friend.png"> Als vriend toevoegen</p>
         </div>
         <h1 class="profile-username">[gebruikersnaam]</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>

From 1cffad77d66f52b3dc52d0a80cee8f3d787e83fd Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 14:44:45 +0100
Subject: [PATCH 15/21] rename html folder to public

---
 .idea/WebDB.iml                                     |  10 ----------
 website/{html => public}/admin.php                  |   0
 website/{html => public}/chat.php                   |   0
 website/{html => public}/fonts/FontAwesome.otf      | Bin
 .../{html => public}/fonts/fontawesome-webfont.eot  | Bin
 .../{html => public}/fonts/fontawesome-webfont.svg  |   0
 .../{html => public}/fonts/fontawesome-webfont.ttf  | Bin
 .../{html => public}/fonts/fontawesome-webfont.woff | Bin
 .../fonts/fontawesome-webfont.woff2                 | Bin
 website/{html => public}/group.php                  |   0
 website/{html => public}/img/add-friend.png         | Bin
 website/{html => public}/img/leave-group.png        | Bin
 website/{html => public}/img/top-logo.png           | Bin
 website/{html => public}/js/dobPicker.js            |   0
 website/{html => public}/js/dobPicker.min.js        |   0
 website/{html => public}/js/header.js               |   0
 website/{html => public}/js/jquery.js               |   0
 website/{html => public}/js/menu.js                 |   0
 website/{html => public}/login.php                  |   0
 website/{html => public}/profile.php                |   0
 website/{html => public}/search.php                 |   0
 website/{html => public}/settings.php               |   0
 website/{html => public}/styles/adminpanel.css      |   0
 website/{html => public}/styles/chat.css            |   0
 website/{html => public}/styles/font-awesome.css    |   0
 website/{html => public}/styles/footer.css          |   0
 website/{html => public}/styles/header.css          |   0
 website/{html => public}/styles/index.css           |   0
 website/{html => public}/styles/main.css            |   0
 website/{html => public}/styles/menu.css            |   0
 website/{html => public}/styles/profile.css         |   0
 website/{html => public}/styles/search.css          |   0
 website/{html => public}/styles/settings.css        |   0
 website/{html => public}/template.php               |   0
 website/views/profile.php                           |   2 +-
 35 files changed, 1 insertion(+), 11 deletions(-)
 rename website/{html => public}/admin.php (100%)
 rename website/{html => public}/chat.php (100%)
 rename website/{html => public}/fonts/FontAwesome.otf (100%)
 rename website/{html => public}/fonts/fontawesome-webfont.eot (100%)
 rename website/{html => public}/fonts/fontawesome-webfont.svg (100%)
 rename website/{html => public}/fonts/fontawesome-webfont.ttf (100%)
 rename website/{html => public}/fonts/fontawesome-webfont.woff (100%)
 rename website/{html => public}/fonts/fontawesome-webfont.woff2 (100%)
 rename website/{html => public}/group.php (100%)
 rename website/{html => public}/img/add-friend.png (100%)
 rename website/{html => public}/img/leave-group.png (100%)
 rename website/{html => public}/img/top-logo.png (100%)
 rename website/{html => public}/js/dobPicker.js (100%)
 rename website/{html => public}/js/dobPicker.min.js (100%)
 rename website/{html => public}/js/header.js (100%)
 rename website/{html => public}/js/jquery.js (100%)
 rename website/{html => public}/js/menu.js (100%)
 rename website/{html => public}/login.php (100%)
 rename website/{html => public}/profile.php (100%)
 rename website/{html => public}/search.php (100%)
 rename website/{html => public}/settings.php (100%)
 rename website/{html => public}/styles/adminpanel.css (100%)
 rename website/{html => public}/styles/chat.css (100%)
 rename website/{html => public}/styles/font-awesome.css (100%)
 rename website/{html => public}/styles/footer.css (100%)
 rename website/{html => public}/styles/header.css (100%)
 rename website/{html => public}/styles/index.css (100%)
 rename website/{html => public}/styles/main.css (100%)
 rename website/{html => public}/styles/menu.css (100%)
 rename website/{html => public}/styles/profile.css (100%)
 rename website/{html => public}/styles/search.css (100%)
 rename website/{html => public}/styles/settings.css (100%)
 rename website/{html => public}/template.php (100%)

diff --git a/.idea/WebDB.iml b/.idea/WebDB.iml
index 0d7f9d7..b313593 100644
--- a/.idea/WebDB.iml
+++ b/.idea/WebDB.iml
@@ -14,15 +14,5 @@
         </SOURCES>
       </library>
     </orderEntry>
-    <orderEntry type="module-library">
-      <library name="PHP" type="php">
-        <CLASSES>
-          <root url="file:///usr/share/php" />
-        </CLASSES>
-        <SOURCES>
-          <root url="file:///usr/share/php" />
-        </SOURCES>
-      </library>
-    </orderEntry>
   </component>
 </module>
\ No newline at end of file
diff --git a/website/html/admin.php b/website/public/admin.php
similarity index 100%
rename from website/html/admin.php
rename to website/public/admin.php
diff --git a/website/html/chat.php b/website/public/chat.php
similarity index 100%
rename from website/html/chat.php
rename to website/public/chat.php
diff --git a/website/html/fonts/FontAwesome.otf b/website/public/fonts/FontAwesome.otf
similarity index 100%
rename from website/html/fonts/FontAwesome.otf
rename to website/public/fonts/FontAwesome.otf
diff --git a/website/html/fonts/fontawesome-webfont.eot b/website/public/fonts/fontawesome-webfont.eot
similarity index 100%
rename from website/html/fonts/fontawesome-webfont.eot
rename to website/public/fonts/fontawesome-webfont.eot
diff --git a/website/html/fonts/fontawesome-webfont.svg b/website/public/fonts/fontawesome-webfont.svg
similarity index 100%
rename from website/html/fonts/fontawesome-webfont.svg
rename to website/public/fonts/fontawesome-webfont.svg
diff --git a/website/html/fonts/fontawesome-webfont.ttf b/website/public/fonts/fontawesome-webfont.ttf
similarity index 100%
rename from website/html/fonts/fontawesome-webfont.ttf
rename to website/public/fonts/fontawesome-webfont.ttf
diff --git a/website/html/fonts/fontawesome-webfont.woff b/website/public/fonts/fontawesome-webfont.woff
similarity index 100%
rename from website/html/fonts/fontawesome-webfont.woff
rename to website/public/fonts/fontawesome-webfont.woff
diff --git a/website/html/fonts/fontawesome-webfont.woff2 b/website/public/fonts/fontawesome-webfont.woff2
similarity index 100%
rename from website/html/fonts/fontawesome-webfont.woff2
rename to website/public/fonts/fontawesome-webfont.woff2
diff --git a/website/html/group.php b/website/public/group.php
similarity index 100%
rename from website/html/group.php
rename to website/public/group.php
diff --git a/website/html/img/add-friend.png b/website/public/img/add-friend.png
similarity index 100%
rename from website/html/img/add-friend.png
rename to website/public/img/add-friend.png
diff --git a/website/html/img/leave-group.png b/website/public/img/leave-group.png
similarity index 100%
rename from website/html/img/leave-group.png
rename to website/public/img/leave-group.png
diff --git a/website/html/img/top-logo.png b/website/public/img/top-logo.png
similarity index 100%
rename from website/html/img/top-logo.png
rename to website/public/img/top-logo.png
diff --git a/website/html/js/dobPicker.js b/website/public/js/dobPicker.js
similarity index 100%
rename from website/html/js/dobPicker.js
rename to website/public/js/dobPicker.js
diff --git a/website/html/js/dobPicker.min.js b/website/public/js/dobPicker.min.js
similarity index 100%
rename from website/html/js/dobPicker.min.js
rename to website/public/js/dobPicker.min.js
diff --git a/website/html/js/header.js b/website/public/js/header.js
similarity index 100%
rename from website/html/js/header.js
rename to website/public/js/header.js
diff --git a/website/html/js/jquery.js b/website/public/js/jquery.js
similarity index 100%
rename from website/html/js/jquery.js
rename to website/public/js/jquery.js
diff --git a/website/html/js/menu.js b/website/public/js/menu.js
similarity index 100%
rename from website/html/js/menu.js
rename to website/public/js/menu.js
diff --git a/website/html/login.php b/website/public/login.php
similarity index 100%
rename from website/html/login.php
rename to website/public/login.php
diff --git a/website/html/profile.php b/website/public/profile.php
similarity index 100%
rename from website/html/profile.php
rename to website/public/profile.php
diff --git a/website/html/search.php b/website/public/search.php
similarity index 100%
rename from website/html/search.php
rename to website/public/search.php
diff --git a/website/html/settings.php b/website/public/settings.php
similarity index 100%
rename from website/html/settings.php
rename to website/public/settings.php
diff --git a/website/html/styles/adminpanel.css b/website/public/styles/adminpanel.css
similarity index 100%
rename from website/html/styles/adminpanel.css
rename to website/public/styles/adminpanel.css
diff --git a/website/html/styles/chat.css b/website/public/styles/chat.css
similarity index 100%
rename from website/html/styles/chat.css
rename to website/public/styles/chat.css
diff --git a/website/html/styles/font-awesome.css b/website/public/styles/font-awesome.css
similarity index 100%
rename from website/html/styles/font-awesome.css
rename to website/public/styles/font-awesome.css
diff --git a/website/html/styles/footer.css b/website/public/styles/footer.css
similarity index 100%
rename from website/html/styles/footer.css
rename to website/public/styles/footer.css
diff --git a/website/html/styles/header.css b/website/public/styles/header.css
similarity index 100%
rename from website/html/styles/header.css
rename to website/public/styles/header.css
diff --git a/website/html/styles/index.css b/website/public/styles/index.css
similarity index 100%
rename from website/html/styles/index.css
rename to website/public/styles/index.css
diff --git a/website/html/styles/main.css b/website/public/styles/main.css
similarity index 100%
rename from website/html/styles/main.css
rename to website/public/styles/main.css
diff --git a/website/html/styles/menu.css b/website/public/styles/menu.css
similarity index 100%
rename from website/html/styles/menu.css
rename to website/public/styles/menu.css
diff --git a/website/html/styles/profile.css b/website/public/styles/profile.css
similarity index 100%
rename from website/html/styles/profile.css
rename to website/public/styles/profile.css
diff --git a/website/html/styles/search.css b/website/public/styles/search.css
similarity index 100%
rename from website/html/styles/search.css
rename to website/public/styles/search.css
diff --git a/website/html/styles/settings.css b/website/public/styles/settings.css
similarity index 100%
rename from website/html/styles/settings.css
rename to website/public/styles/settings.css
diff --git a/website/html/template.php b/website/public/template.php
similarity index 100%
rename from website/html/template.php
rename to website/public/template.php
diff --git a/website/views/profile.php b/website/views/profile.php
index 2f491d2..1f7cae5 100644
--- a/website/views/profile.php
+++ b/website/views/profile.php
@@ -2,7 +2,7 @@
     <div class="profile-box platform">
         <img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
         <div class="profile-button">
-            <p><img src="../html/img/add-friend.png"> Als vriend toevoegen</p>
+            <p><img src="img/add-friend.png"> Als vriend toevoegen</p>
         </div>
         <h1 class="profile-username">[gebruikersnaam]</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>

From bd362585484518d7af5a8da46510961a2f38c0b4 Mon Sep 17 00:00:00 2001
From: Joey Lai <joeylai96@hotmail.com>
Date: Fri, 13 Jan 2017 15:38:23 +0100
Subject: [PATCH 16/21] fixed php

---
 website/login.php            | 221 ++----------------------------
 website/styles/index.css     | 247 +++++++++++++++++-----------------
 website/views/login-view.php | 254 +++++++++++++++++++++++++++++++++++
 website/views/login_head.php |  10 ++
 4 files changed, 399 insertions(+), 333 deletions(-)
 create mode 100644 website/views/login-view.php
 create mode 100644 website/views/login_head.php

diff --git a/website/login.php b/website/login.php
index 664746f..c9a87a8 100644
--- a/website/login.php
+++ b/website/login.php
@@ -1,217 +1,14 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <link rel="stylesheet"
-              type="text/css"
-              href="styles/index.css">
-        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
-    		<script src="js/dobPicker.min.js"></script>
-        <meta charset="utf-8">
-        <title>MyHyvesbook+</title>
-    </head>
+    <?php
+        include("views/login_head.php");
+    ?>
     <body>
-        <div>
-            <img style="width:50%;margin-left:25%"
-                 src="img/top-logo.png"
-                 alt="MyHyvesbook+">
-        </div>
-
-        <form action="../profile.php"
-              method="post">
-            <h1>Welkom bij MyHyvesbook+</h1>
-
-            <div class="login_containerlogin">
-                <label><b>Gebruikersnaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw gebruikersnaam in"
-                       name="uname"
-                       pattern=".{6,}"
-                       title="Moet 6 of meer karakters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerlogin">
-                <label><b>Wachtwoord</b></label>
-                <input type="password"
-                       placeholder="Voer uw wachtwoord in"
-                       name="psw"
-                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                       title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
-                       required>
-            </div>
-
-            <div class="login_containerlogin">
-                <input type="submit"
-                       value="Login"
-                       name="Submit"
-                       id="frm1_submit" />
-            </div>
-        </form>
-
-        <div class="login_containerlogin">
-            <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
-        </div>
-
-        <div class="login_containerregister">
-            <div id="id01" class="modal">
-                <span onclick="document.getElementById('id01').style.display='none'"
-                      class="close"
-                      title="Close Modal">
-                      &times;</span>
-
-                <!-- Register Content -->
-                <form class="modal-content animate"
-                      action="../profile.php"
-                      onsubmit="return passwordfunction()"
-                      method="post">
-                    <h2>Registreer uw account</h2>
-
-                    <div class="login_containerregister">
-                        <label><b>Naam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw naam in"
-                               name="name"
-                               pattern="[A-Za-z]{1,}"
-                               title="Mag alleen letters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Achternaam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw achternaam in"
-                               name="surname"
-                               pattern="[A-Za-z]{1,}"
-                               title="Mag alleen letters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Geboortedatum</b></label>
-                        <!-- These are the select elements we will target -->
-                    		<select id="dobday"
-                                title="Voer een dag in"
-                                required></select>
-                    		<select id="dobmonth"
-                                title="Voer een maand in"
-                                required></select>
-                    		<select id="dobyear"
-                                title="Voer een jaar in"
-                                required></select>
-                    		<!-- And here's the library being called! -->
-                    		<script>
-                    			  $(document).ready(function() {
-                        				$.dobPicker({
-                          					daySelector: '#dobday',
-                          					monthSelector: '#dobmonth',
-                          					yearSelector: '#dobyear',
-                          					dayDefault: 'Dag',
-                          					monthDefault: 'Maand',
-                          					yearDefault: 'Jaar',
-                          					minimumAge: 12,
-                          					maximumAge: 80
-                        				});
-                      			});
-                    		</script>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Gebruikersnaam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw gebruikersnaam in"
-                               name="username"
-                               pattern=".{6,}"
-                               title="Moet minstens 6 karakters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Wachtwoord</b></label>
-                        <input type="password"
-                               placeholder="Voer uw wachtwoord in"
-                               name="password"
-                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                               id="password"
-                               title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Herhaal wachtwoord</b></label>
-                        <input type="password"
-                               placeholder="Herhaal wachtwoord"
-                               name="confirmpassword"
-                               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                               id="confirmpassword"
-                               title="Herhaal wachtwoord"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Straatnaam</b></label>
-                        <input type="text"
-                               placeholder="Voer uw straatnaam in"
-                               name="name"
-                               pattern="[A-Za-z]{1,}"
-                               title="Mag alleen letters bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Straatnummer</b></label>
-                        <input type="text"
-                               placeholder="Voer uw straatnummer in"
-                               name="name"
-                               pattern="[1-9][0-9]{0,}"
-                               title="Mag alleen nummers bevatten"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <label><b>Email</b></label>
-                        <input type="email"
-                               placeholder="Voer uw email in"
-                               id="email"
-                               title="Voer een geldige email in"
-                               required>
-                    </div>
-
-                    <div class="login_containerregister">
-                        <input type="submit"
-                               value="Registreer uw account"
-                               name="Submit"
-                               id="frm1_submit" />
-                    </div>
-                </form>
-            </div>
-        </div>
+        <?php
+            /*
+             * This view adds login view
+             */
+             include("views/login-view.php");
+        ?>
     </body>
 </html>
-
-<script>
-    // Get the modal
-    var modal = document.getElementById('id01');
-    // When the user clicks anywhere outside of the modal, close it
-    window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
-}
-</script>
-
-<script>
-    function passwordfunction() {
-        var password1 = document.getElementById("password").value;
-        var password2 = document.getElementById("confirmpassword").value;
-        var passwordmatching = true;
-
-        if (password1 != password2) {
-            document.getElementById("password").style.borderColor = "red";
-            document.getElementById("confirmpassword").style.borderColor = "red";
-            passwordmatching = false;
-            confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
-        }
-        return passwordmatching;
-    }
-</script>
diff --git a/website/styles/index.css b/website/styles/index.css
index 14c01ea..b4daae7 100644
--- a/website/styles/index.css
+++ b/website/styles/index.css
@@ -1,3 +1,47 @@
+::selection {
+  background: #845663;
+  color: white;
+}
+
+::-moz-selection {
+  background: #845663;
+  color: white;
+}
+
+a, a:link, a:visited, a:hover, a:active {
+  color: inherit;
+  text-decoration: none;
+}
+
+
+a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
+div[data-title]:hover:after{
+  content: attr(data-title);
+  padding: 4px 4px;
+  color: #FFFFFF;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  z-index: 20;
+  white-space: nowrap;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  -moz-box-shadow: 0px 0px 4px #222;
+  -webkit-box-shadow: 0px 0px 4px #222;
+  box-shadow: 0px 0px 4px #222;
+  background-color: #333;
+  font-size: 15px;
+  line-height: normal;
+  font-family: Arial, sans-serif;
+}
+
+/* Add Zoom Animation */
+.animate {
+  animation: animatezoom 0.6s
+  -webkit-animation: animatezoom 0.6s;
+}
+
 /* Body */
 body {
   height: 100%;
@@ -8,6 +52,39 @@ body {
   font-family: Arial, sans-serif;
 }
 
+/* stijl voor alle buttons */
+button {
+  background-color: #845663;
+  border: 2px solid black;
+  border-radius: 12px;
+  color: white;
+  cursor: pointer;
+  height: 50%;
+  margin: 8px 0;
+  padding: 14px 20px;
+  width: 25%;
+  font-family: Arial;
+  font-size: 16px;
+}
+
+/* The Close Button */
+.close {
+  /* Position it in the top right corner outside of the modal */
+  color: white;
+  font-size: 100px;
+  font-weight: bold;
+  position: absolute;
+  right: 25px;
+  top: 0;
+}
+
+/* Close button on hover */
+.close:hover,
+.close:focus {
+  color: red;
+  cursor: pointer;
+}
+
 /* inlogform */
 form {
     background-color: #a87a87;
@@ -32,76 +109,47 @@ h2 {
     font-size: 2.0em;
 }
 
+input[type=text], input[type=password], input[type=email], input[type="date"] {
+    border-radius: 12px;
+    border: 5px solid #ccc;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 50%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    width: 50%;
+    font-family: Arial;
+    font-size: 16px;
+}
+
+input[type=submit] {
+    background-color: #845663;
+    border: 2px solid black;
+    border-radius: 12px;
+    color: white;
+    cursor: pointer;
+    height: 50%;
+    margin: 8px 0;
+    padding: 14px 20px;
+    width: 50%;
+    font-family: Arial;
+    font-size: 16px;
+}
+
 label {
     display: block;
 }
 
-/* datepicker */
-select {
-    border-radius: 12px;
-    border: 5px solid #ccc;
-    box-sizing: border-box;
-    display: inline-block;
-    height: 50%;
-    padding: 12px 20px;
-    margin: 8px 0;
-    width: 15%;
-    font-family: Arial;
-    font-size: 16px;    
-}
-
-input[type=text], input[type=password], input[type=email] {
-    border-radius: 12px;
-    border: 5px solid #ccc;
-    box-sizing: border-box;
-    display: inline-block;
-    height: 50%;
-    padding: 12px 20px;
-    margin: 8px 0;
-    width: 50%;
-    font-family: Arial;
-    font-size: 16px;
-}
-
-input[type=submit]{
-    background-color: #845663;
-    border: 2px solid black;
-    border-radius: 12px;
-    color: white;
-    cursor: pointer;
-    height: 50%;
-    margin: 8px 0;
-    padding: 14px 20px;
-    width: 50%;
-    font-family: Arial;
-    font-size: 16px;
-}
-
-/* stijl voor alle buttons */
-button {
-    background-color: #845663;
-    border: 2px solid black;
-    border-radius: 12px;
-    color: white;
-    cursor: pointer;
-    height: 50%;
-    margin: 8px 0;
-    padding: 14px 20px;
-    width: 25%;
-    font-family: Arial;
-    font-size: 16px;
-}
-
 /* padding voor registreer container */
 .login_containerregister {
-    padding: 16px;
-    text-align: left;
+  padding: 16px;
+  text-align: left;
 }
 
 /* padding voor login_containers */
 .login_containerlogin {
-    padding: 16px;
-    text-align: center;
+  padding: 16px;
+  text-align: center;
 }
 
 /* The Modal (background) */
@@ -130,28 +178,23 @@ button {
     height: 80%;
 }
 
-/* The Close Button */
-.close {
-    /* Position it in the top right corner outside of the modal */
-    color: white;
-    font-size: 100px;
-    font-weight: bold;
-    position: absolute;
-    right: 25px;
-    top: 0;
+@keyframes animatezoom {
+  from {transform: scale(0)}
+  to {transform: scale(1)}
 }
 
-/* Close button on hover */
-.close:hover,
-.close:focus {
-    color: red;
-    cursor: pointer;
-}
-
-/* Add Zoom Animation */
-.animate {
-    animation: animatezoom 0.6s
-    -webkit-animation: animatezoom 0.6s;
+/* datepicker */
+select {
+    border-radius: 12px;
+    border: 5px solid #ccc;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 50%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    width: 18%;
+    font-family: Arial;
+    font-size: 16px;
 }
 
 @-webkit-keyframes animatezoom {
@@ -159,45 +202,7 @@ button {
     to {-webkit-transform: scale(1)}
 }
 
-@keyframes animatezoom {
-    from {transform: scale(0)}
-    to {transform: scale(1)}
-}
-
-::selection {
-    background: #845663;
-    color: white;
-}
-
-::-moz-selection {
-    background: #845663;
-    color: white;
-}
-
-a, a:link, a:visited, a:hover, a:active {
-    color: inherit;
-    text-decoration: none;
-}
-
-
-a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
-div[data-title]:hover:after{
-    content: attr(data-title);
-    padding: 4px 4px;
-    color: #FFFFFF;
-    position: absolute;
-    left: 0;
-    top: 100%;
-    z-index: 20;
-    white-space: nowrap;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-box-shadow: 0px 0px 4px #222;
-    -webkit-box-shadow: 0px 0px 4px #222;
-    box-shadow: 0px 0px 4px #222;
-    background-color: #333;
-    font-size: 15px;
-    line-height: normal;
-    font-family: Arial, sans-serif;
+ul {
+  font-family: Arial;
+  font-size: 16px;
 }
diff --git a/website/views/login-view.php b/website/views/login-view.php
new file mode 100644
index 0000000..f8e163b
--- /dev/null
+++ b/website/views/login-view.php
@@ -0,0 +1,254 @@
+<?php
+    // define variables and set to empty values
+    $name = $surname = $bday = $username = $password = $confirmpassword = $streetname = $housenumber = $email = "";
+    $passwordErr = $confirmpasswordErr = "";
+    $correct = true;
+
+    if (isset($_POST["name"])) {
+      $name = $_POST["name"];
+    }
+
+    if (isset($_POST["surname"])) {
+      $surname = $_POST["surname"];
+    }
+
+    if (isset($_POST["bday"])) {
+      $bday = $_POST["bday"];
+    }
+
+    if (isset($_POST["username"])) {
+      $username = $_POST["username"];
+    }
+
+    if (isset($_POST["password"])) {
+      $password = $_POST["password"];
+    }
+
+    if (isset($_POST["streetname"])) {
+      $streetname = $_POST["streetname"];
+    }
+
+    if (isset($_POST["housenumber"])) {
+      $housenumber = $_POST["housenumber"];
+    }
+
+    if (isset($_POST["email"])) {
+      $email = $_POST["email"];
+    }
+
+    if ($_SERVER["REQUEST_METHOD"] == "POST") {
+      if ($_POST["password"]!= $_POST["confirmpassword"]) {
+          $passwordErr = "Wachtwoorden matchen niet";
+          $confirmpasswordErr = "Wachtwoorden matchen niet";
+          $correct = false;
+          ?>
+          <script>document.getElementById('id01').style.display='block'</script>
+          <?php
+      }
+    }
+?>
+<div>
+    <img style="width:50%;margin-left:25%"
+         src="img/top-logo.png"
+         alt="MyHyvesbook+">
+</div>
+
+<form action="../profile.php"
+      method="post">
+    <h1>Welkom bij MyHyvesbook+</h1>
+
+    <div class="login_containerlogin">
+        <label><b>Gebruikersnaam</b></label>
+        <input type="text"
+               placeholder="Voer uw gebruikersnaam in"
+               name="uname"
+               pattern=".{6,}"
+               title="Moet 6 of meer karakters bevatten"
+               required>
+    </div>
+
+    <div class="login_containerlogin">
+        <label><b>Wachtwoord</b></label>
+        <input type="password"
+               placeholder="Voer uw wachtwoord in"
+               name="psw"
+               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+               title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
+               required>
+    </div>
+
+    <div class="login_containerlogin">
+        <input type="submit"
+               value="Login"
+               name="Submit"
+               id="frm1_submit" />
+    </div>
+</form>
+
+<div class="login_containerlogin">
+    <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
+</div>
+
+<div class="login_containerregister">
+    <div id="id01" class="modal">
+        <span onclick="document.getElementById('id01').style.display='none'"
+              class="close"
+              title="Close Modal">
+              &times;</span>
+
+        <!-- Register Content -->
+        <form class="modal-content animate"
+              action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
+              return= $correct
+              method="post">
+            <h2>Registreer uw account</h2>
+
+            <div class="login_containerregister">
+                <label><b>Naam</b></label>
+                <input type="text"
+                       placeholder="Voer uw naam in"
+                       name="name"
+                       value="<?php echo $name ?>"
+                       pattern="[A-Za-z]{1,}"
+                       title="Mag alleen letters bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Achternaam</b></label>
+                <input type="text"
+                       placeholder="Voer uw achternaam in"
+                       name="surname"
+                       value="<?php echo $surname ?>"
+                       pattern="[A-Za-z]{1,}"
+                       title="Mag alleen letters bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Geboortedatum</b></label>
+                <input type="date"
+                       name="bday"
+                       value="<?php echo $bday ?>"
+                       id="bday"
+                       placeholder="01/01/1900">
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Gebruikersnaam</b></label>
+                <input type="text"
+                       placeholder="Voer uw gebruikersnaam in"
+                       name="username"
+                       value="<?php echo $username ?>"
+                       pattern=".{6,}"
+                       title="Moet minstens 6 karakters bevatten"
+                       required>
+            </div>
+
+            <ul>
+              <li>Minstens 6 karakters</li>
+            </ul>
+
+            <div class="login_containerregister">
+                <label><b>Wachtwoord</b></label>
+                <input type="password"
+                       placeholder="Voer uw wachtwoord in"
+                       name="password"
+                       value="<?php echo $password ?>"
+                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                       id="password"
+                       title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
+                       required>
+                <span class="error">* <?php echo $passwordErr;?></span>
+            </div>
+
+            <ul>
+              <li>Minstens 8 karakters</li>
+              <li>Minimaal 1 cijfer</li>
+              <li>Minimaal 1 hoofdletter</li>
+              <li>Minimaal 1 kleine letter</li>
+            </ul>
+
+            <div class="login_containerregister">
+                <label><b>Herhaal wachtwoord</b></label>
+                <input type="password"
+                       placeholder="Herhaal wachtwoord"
+                       name="confirmpassword"
+                       value="<?php echo $confirmpassword ?>"
+                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
+                       id="confirmpassword"
+                       title="Herhaal wachtwoord"
+                       required>
+                <span class="error">* <?php echo $confirmpasswordErr;?></span>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Straatnaam</b></label>
+                <input type="text"
+                       placeholder="Voer uw straatnaam in"
+                       name="streetname"
+                       value="<?php echo $streetname ?>"
+                       pattern="[A-Za-z]{1,}"
+                       title="Mag alleen letters bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Huisnummer</b></label>
+                <input type="text"
+                       placeholder="Voer uw straatnummer in"
+                       name="housenumber"
+                       value="<?php echo $housenumber ?>"
+                       pattern="[1-9][0-9]{0,}"
+                       title="Mag alleen nummers bevatten"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <label><b>Email</b></label>
+                <input type="email"
+                       placeholder="Voer uw email in"
+                       name="email"
+                       value="<?php echo $email ?>"
+                       id="email"
+                       title="Voer een geldige email in"
+                       required>
+            </div>
+
+            <div class="login_containerregister">
+                <input type="submit"
+                       value="Registreer uw account"
+                       name="Submit"
+                       id="frm1_submit" />
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    // Get the modal
+    var modal = document.getElementById('id01');
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+}
+</script>
+
+<script>
+    function passwordfunction() {
+        var password1 = document.getElementById("password").value;
+        var password2 = document.getElementById("confirmpassword").value;
+        var passwordmatching = false;
+
+        if (password1 == password2) {
+            document.getElementById("password").style.borderColor = "red";
+            document.getElementById("confirmpassword").style.borderColor = "red";
+            confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
+        } else {
+            passwordmatching = true;
+        }
+        return passwordmatching;
+    }
+</script>
diff --git a/website/views/login_head.php b/website/views/login_head.php
new file mode 100644
index 0000000..6111b5d
--- /dev/null
+++ b/website/views/login_head.php
@@ -0,0 +1,10 @@
+<head>
+    <meta charset="utf-8">
+    <title>MyHyvesbook+</title>
+    <link rel="stylesheet"
+          type="text/css"
+          href="styles/index.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+    <script src="js/dobPicker.min.js"></script>
+</head>

From 96dd0864ee73c29655f31e6410144718a6dff5d4 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 15:47:35 +0100
Subject: [PATCH 17/21] Fixed login new filetree

---
 website/login.php        |  14 ---
 website/public/login.php | 221 ++-------------------------------------
 2 files changed, 9 insertions(+), 226 deletions(-)
 delete mode 100644 website/login.php

diff --git a/website/login.php b/website/login.php
deleted file mode 100644
index fe3adea..0000000
--- a/website/login.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-<?php
-include("views/login_head.php");
-?>
-<body>
-<?php
-/*
- * This view adds login view
- */
-include("views/login-view.php");
-?>
-</body>
-</html>
diff --git a/website/public/login.php b/website/public/login.php
index dbce625..0018067 100644
--- a/website/public/login.php
+++ b/website/public/login.php
@@ -1,217 +1,14 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <link rel="stylesheet"
-          type="text/css"
-          href="styles/index.css">
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
-    <script src="js/dobPicker.min.js"></script>
-    <meta charset="utf-8">
-    <title>MyHyvesbook+</title>
-</head>
+<?php
+include("../views/login_head.php");
+?>
 <body>
-<div>
-    <img style="width:50%;margin-left:25%"
-         src="img/top-logo.png"
-         alt="MyHyvesbook+">
-</div>
-
-<form action="profile.php"
-      method="post">
-    <h1>Welkom bij MyHyvesbook+</h1>
-
-    <div class="login_containerlogin">
-        <label><b>Gebruikersnaam</b></label>
-        <input type="text"
-               placeholder="Voer uw gebruikersnaam in"
-               name="uname"
-               pattern=".{6,}"
-               title="Moet 6 of meer karakters bevatten"
-               required>
-    </div>
-
-    <div class="login_containerlogin">
-        <label><b>Wachtwoord</b></label>
-        <input type="password"
-               placeholder="Voer uw wachtwoord in"
-               name="psw"
-               pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-               title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
-               required>
-    </div>
-
-    <div class="login_containerlogin">
-        <input type="submit"
-               value="Login"
-               name="Submit"
-               id="frm1_submit" />
-    </div>
-</form>
-
-<div class="login_containerlogin">
-    <button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
-</div>
-
-<div class="login_containerregister">
-    <div id="id01" class="modal">
-                <span onclick="document.getElementById('id01').style.display='none'"
-                      class="close"
-                      title="Close Modal">
-                      &times;</span>
-
-        <!-- Register Content -->
-        <form class="modal-content animate"
-              action="../profile.php"
-              onsubmit="return passwordfunction()"
-              method="post">
-            <h2>Registreer uw account</h2>
-
-            <div class="login_containerregister">
-                <label><b>Naam</b></label>
-                <input type="text"
-                       placeholder="Voer uw naam in"
-                       name="name"
-                       pattern="[A-Za-z]{1,}"
-                       title="Mag alleen letters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Achternaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw achternaam in"
-                       name="surname"
-                       pattern="[A-Za-z]{1,}"
-                       title="Mag alleen letters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Geboortedatum</b></label>
-                <!-- These are the select elements we will target -->
-                <select id="dobday"
-                        title="Voer een dag in"
-                        required></select>
-                <select id="dobmonth"
-                        title="Voer een maand in"
-                        required></select>
-                <select id="dobyear"
-                        title="Voer een jaar in"
-                        required></select>
-                <!-- And here's the library being called! -->
-                <script>
-                    $(document).ready(function() {
-                        $.dobPicker({
-                            daySelector: '#dobday',
-                            monthSelector: '#dobmonth',
-                            yearSelector: '#dobyear',
-                            dayDefault: 'Dag',
-                            monthDefault: 'Maand',
-                            yearDefault: 'Jaar',
-                            minimumAge: 12,
-                            maximumAge: 80
-                        });
-                    });
-                </script>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Gebruikersnaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw gebruikersnaam in"
-                       name="username"
-                       pattern=".{6,}"
-                       title="Moet minstens 6 karakters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Wachtwoord</b></label>
-                <input type="password"
-                       placeholder="Voer uw wachtwoord in"
-                       name="password"
-                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                       id="password"
-                       title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Herhaal wachtwoord</b></label>
-                <input type="password"
-                       placeholder="Herhaal wachtwoord"
-                       name="confirmpassword"
-                       pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
-                       id="confirmpassword"
-                       title="Herhaal wachtwoord"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Straatnaam</b></label>
-                <input type="text"
-                       placeholder="Voer uw straatnaam in"
-                       name="name"
-                       pattern="[A-Za-z]{1,}"
-                       title="Mag alleen letters bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Straatnummer</b></label>
-                <input type="text"
-                       placeholder="Voer uw straatnummer in"
-                       name="name"
-                       pattern="[1-9][0-9]{0,}"
-                       title="Mag alleen nummers bevatten"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <label><b>Email</b></label>
-                <input type="email"
-                       placeholder="Voer uw email in"
-                       id="email"
-                       title="Voer een geldige email in"
-                       required>
-            </div>
-
-            <div class="login_containerregister">
-                <input type="submit"
-                       value="Registreer uw account"
-                       name="Submit"
-                       id="frm1_submit" />
-            </div>
-        </form>
-    </div>
-</div>
+<?php
+/*
+ * This view adds login view
+ */
+include("../views/login-view.php");
+?>
 </body>
 </html>
-
-<script>
-    // Get the modal
-    var modal = document.getElementById('id01');
-    // When the user clicks anywhere outside of the modal, close it
-    window.onclick = function(event) {
-        if (event.target == modal) {
-            modal.style.display = "none";
-        }
-    }
-</script>
-
-<script>
-    function passwordfunction() {
-        var password1 = document.getElementById("password").value;
-        var password2 = document.getElementById("confirmpassword").value;
-        var passwordmatching = true;
-
-        if (password1 != password2) {
-            document.getElementById("password").style.borderColor = "red";
-            document.getElementById("confirmpassword").style.borderColor = "red";
-            passwordmatching = false;
-            confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
-        }
-        return passwordmatching;
-    }
-</script>

From 4bc2bcedd101a17281068cae0df36e50206a131a Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Fri, 13 Jan 2017 15:47:59 +0100
Subject: [PATCH 18/21] Fixed bugs

Bug 1: If you clicked "En nog 2 anderen..." in the menu it send you tot he top of the page
Bug 2: Span didnt close in the footer
---
 website/public/styles/menu.css |  1 +
 website/views/footer.php       |  2 +-
 website/views/menu.php         | 99 +++++++++++++++++++++-------------
 3 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/website/public/styles/menu.css b/website/public/styles/menu.css
index 3aa47a7..7778545 100644
--- a/website/public/styles/menu.css
+++ b/website/public/styles/menu.css
@@ -23,4 +23,5 @@
     padding: 5px 20px;
     color: #666;
     font-size: 14px;
+    cursor: pointer;
 }
diff --git a/website/views/footer.php b/website/views/footer.php
index a7bed4e..02dc0cd 100644
--- a/website/views/footer.php
+++ b/website/views/footer.php
@@ -1,3 +1,3 @@
 <footer>
-    <p>Copyright &copy; 2017 MyHyvesbook+ <span style="float: right">Like ons op Facebook!</span</p>
+    <p>Copyright &copy; 2017 MyHyvesbook+ <span style="float: right">Like ons op Facebook!</span></p>
 </footer>
diff --git a/website/views/menu.php b/website/views/menu.php
index f2fc2ad..bf8b1d7 100644
--- a/website/views/menu.php
+++ b/website/views/menu.php
@@ -4,51 +4,64 @@
             Vrienden
         </h4>
         <ul class="nav-list">
-            <a href="#"><li class="friend-item">
+            <a href="#">
+                <li class="friend-item">
                 <div class="friend">
-                    <img class="profile-picture" src="data:image/jpeg;base64,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">
+                    <img alt="PF" class="profile-picture" src="data:image/jpeg;base64,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">
                     Justin Timberlake
                 </div>
-            </li></a>
-            <a href="#"><li class="friend-item">
+            </li>
+            </a>
+            <a href="#">
+                <li class="friend-item">
                 <div class="friend">
-                    <img class="profile-picture" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxISEhUSEhIVFhUXGBgVFxYXFxUXFxcXFxgXGBgYFxcYHSggGBolHRUYITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGi8lHSUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAQMEBQYCBwj/xABBEAABAwIDBQYEAwYFAwUAAAABAAIRAyEEEjEFQVFhcQYTIoGRoTKxwfBCUtEUI2Jy4fEHM4KSshWDohY1Q2N0/8QAGgEAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/EACkRAQEAAgICAgAFBAMAAAAAAAABAhEDIRIxBEEFIjJRgROxwdEzNGH/2gAMAwEAAhEDEQA/APPkqEBZtAlSJUAJUJEAqEJUAiVCEAqENBOl1MwmBc/SB1MQg5ERdsouOjSegVs7YhEeKZiMgcTreRETyVxgtjtpjMKs9WEERuIgo2fiztHY1d2lMqd/6SxMT+7HIvAPyWooYljBPeMcdYLR6XsmNpYouBIIP8oJHmWmB5othzFjMRsmsyc1M21IIIURzCLEEeSsMdULokWN57wwOoMx5Kqqve02zETqL35xImApmR3A5CEy/aLdHMAPFoy+rL+xCda8ESCq2iwqEqEERKkSoBIQUqEAhSQlSFACEQlQDaEBAQCoQhAKhIlQChCEqARO0KDnmGiSu8Nh81zZou524Drx5aqZQpz8I7psHxnM5zpsCAwiJvb3Mwg5DVPBuEgOE+0jmu6tKsG2ynhc5hF7QZJ4J7B4Sq0+F9MHi5obIPUlO4nEVQCHCkN0tEg8NHJ6VszsrbdUODXlkbiIn0t7rV0DnBg5o3ggRrMfvPJY+hUAf4n06cmfhBvaY1y6C0haA4staAKg0uWht+gJHojQ24x1Ii9y028QM+cEx6qhxNR4MseCTuBMgzxOvupOIx7gXRAGhsZ5/C/KP6eSpsc8H4m+YkRwEGZ6rGztrvoOxFeC4szci0XHKAJ+aYGKEAPouvwE/MZh76Lmm8CzKrm9TA/qU7UxlUW74G+kC8b50JTTVbiSAZILY3O+RRsvEnPIykWtOp3ALrG95cuDSZ4GfKLKPhsYGuzXBFwdYIiOHP0VYxnWzxOHaKQdoNTpMncCYzeUwqhrgdDKmbSxZc0EPB0sJBggweWp+Sz9GuWu5b1WXVKTcWqENM3SoIiEJUByhKUiARKhCAbQkSpAJQhKgFCEJUAJWtJNkiZxmM7pvh/zHDw8gZE9Z0TNIxm0qdKARnLJMTDA7ieLv7JjD7ZbqQCb2uAJ4QDOirKGB3vlxOs6A+Vz5q5wxY3xZ6TeAcCYtoALIhpGE23TEAscNJIJa0HmL25n2V9hq9GsPjJH5WvJbqYtF40VM7DUqgh1ajPGMjiDcEC/zCYpYAsP7oO4y1zo5aOv5lUXS9q7GwhsNBcjMWx1j9U1X7PsF6dV4g2h7pHkQQfMDhKrK9d/4qlrQcxzX0sGEa80tOo4glzXOBIgioIvpFpB5IDutgXGfCDG+C2Z3+A/ouHYAAZTHm8QeADagtu0nqpTBVzeEFu6C4l077Ci6Rb3TZEODHPg9C+N9wQwi3opu1TSqxDWNkdzOplwA9DJPyVRiMYBYEgflzGPdaGtgmuMh+YAQYbUZfeA6TMzqOB1VHtDCSbFpIAHhJcBGgLnG/op9Hq1Uuqk6COQNl09kwYI3GTru+qtKOzju01vYp12AHCwN+fJReSStJw2xwNogsyuy5m+EkxJgwIF48tZUao6ZgdIMjyO9Qa7zTcQBY7jdODEBwA0PsTz581pl3NsZ1dVc7NxEjLvHH5KcqDC14cD5c1e03yEpRY6hCEKiCRKkQAkSoQRlKEISMq6XKUIJ0EqQJUGFAqU8zpJ5CdBNuu/2Uys6GkwTbQT9FBdTc52QkBwsRmzRmsATpMeicDsOy6AHjBHn9E4doOb8TTMXNhre3JWuzKNKi0PcATO4TpYADeJLR1PpPr4OpXqhj2gAOLCYkAtjPlOli4NtvLhuKapN1S4GuACXNnNrdwA/VW2CGbxXcDYNcaj7cnTAHmt/s/sfQLZ7uZvoAb8iOCsmdlaG+n63/oFHm1/pS/bD06DnCf2c7pIqZQDH8WUx671H7oiSG0y6fzOJPW4lemM2BRbpTaipsenrlCVzpzixeVYjCPcYaGRGhZboAZHkmnbJqmxc7kAGtA6AAD5r1VuzKeuUeii1NnMk2WdyrbHDF5h/wBEfcS6NNbxvkjXVH/RA3QboH1PVb/EYRoVdVwsrK5VrMIyZwIA0TFTDBXuMYJsFXVm8ly5W7bRiu0ODjxKkplbjbFAGm7osM0XXo/Gz8sHnfLw8c5f3TKb5vv3j6q/2dWzNvwWXpOgq02biQHe391dmqxl3GgQhCaSISpEAiEqEyMpQkCVIyhCRKgnSEgSoMswCYnd5m31UGk0tLi4wY3RDB/FziLcgOKkYim50NBgTd05Q3qY36QLngVxhtld9UFJpLaLCMzgILhMWa689b3vwTG2n7A7MOJqjEvzClTdLRxyC1uOYz1K1jsAW4gExHwt0/iJ93vM8yd4UfY+Nbh2tpsaAGAANFw5x0b0LiJ5MV2+lnqEjS158UE6RxMSfIcZd9Kwv5mjwGgU1wUPCaBTJWTq0R5so73p+oCojheEqchqdVDqVFImCeChVmXUVrjEHFOm4UGsPDzU+uqvGugBZ1pIpsZcqtqjVWmIG9V1crnyi4rNptlh6LAuZDl6FjBLSFisRRGZw6/fsuj4uWtxyfLx3IrN6dpVISV2mdNU2u/3Hn71Wzwr8zGniAnFG2YP3TOikrNYRKEiCLKRCEA0lSIQCoQhAdJVyuggO6NfL0IiNJJsJI0A1Vgx5a3K3KC4QCAALank0SSVAw78pkdFJxDzBzkeLK0k/lJHLc0Ogcwmel7spjWNY+5qkhwBvlzaPvvDT/5HitjsJ3euyjRtjebAWvzJKweGqOqVnueYE8AYtew6R5r1DslgRSoA73eIzrdLK/TXix+1yxgFl3mhcOdddFw1NlDcOJ5KNWtuXdTED8wUWrWneinEfEVLQodV0xdPVqusqFTPizcFnW8nTuph82ptKrNoM4GwVviMSA0xb+qz+NxGoF1OUVj/AOqrEOIJUKtYSpNSm5xNrfVQq1ON/kVhlFIVcWKx+0xDls3BZbtPSykOCv4/6tMfkT8u1a6nmHuOKhCmforPAkOB9D0+5XX7ODVAA3j+/suvHLV082zfa8oNhrRwAXaEKgEIKEERCEIBlEoQgFShIlQCpQgJUArV6Xg+zlGvs/C5x4zRkP3zJInjGi8zBXqv+H+PGIwXcf8AyYckRvLHlzmEehHkoz9NuCzy7ZvB4ZtN/wCymS/MS7TQHwev0C9SwbcrGjkszi+z572niwIcSKdVp1hoOV4+RHMHctQwcNEb23xx8dua7wFWY17nAxpxNgrOuDFhJ3CDPqFS1ezX7TmOMqPIPw0mPLWMG4uyx3juthoOKXs5J7rGbc23TEg4xjDcWcJ9pO9Vmx8c8umjiy7dDpg9JAlXPabsNSc8FtVzWMnJTDZYzMSXZG5hlBJmFXU9ktGRjZIbIMtAB5xffuSvTbilvudNBs7F1XWcM3Ej6qzaC1pLhG+6kdmdlNYBUuXRBNwDzy7k92qbFMxwSs1Nn5S5ajBdoe0WRwDbwVSjbmJrOilTHL+5Kqdt5nOMKV2e7PVK7Hlx1aQ3xHwm3ij7N0sJtPJ1teU2Y6PHTEHmAfcqqxuKcDBkRrK6q7LxtKq9wrCmxziQxlR+RoJmGsdO6yj18Q8OArlrwbB4EQeDuM8baJZwsd36P0quZU3a1vgb1VtQYAbb92irO1nwNPArHj6ziuX/AI7tSbKZIgC5PrER81a4LBlri5xm0Bd7Fw4bTc6NYE9Y09FLXXjd215+WPjJCISoVoIhKhBEQlQmEcJUiVIFAShIlQChKEiVAKtH2A2kaGNpgaVSKRH8x8J8j8ys4FK2Xiu5rUq0T3dRlQjiGuBI9JRVY3Ve8VxAMHfmjeDvRTcu6nd1KQewghzcwI0IIkH0Uag6QFk7Jdpz7jf5WUZzzpFupPzUikTCYxLbqhr6VGMp5jEeV0YLYwJmysG2Uig4DfdKRpuyajtlINEDRUvawxTdPBXjys12ycTTICWf6aOOfmjyvEUgXEqbsrGuo6GyZqtTDdVz45WOm47XmOxpqN+LyGqqKuFzC4nzU3CYUHXRPYmm1oiLqsv3KT6U9Kll1BHVcY/CNq5Wk71NdbouaAmTprB4LC37TlN9K6qA0d23Rvum0IXoYY+M08rPK5XdCEIVJCRKkQCoSIQDKEqEEEqEqAEqRKgFSrmY1U6hsyo5ucgU2a56hyNjiJufIFBpuw9u4mkadKnWcKZqMGSxaMzgHASPCDJ04r2CjZeQ7DwVJz2vDn1Gse0moBko5muHhYXeKoegA5r15hU546b8WW4lNqQuMRXEFM5lWbcxmQACS5xgAbyVO+nTjNom0dsEOFNl3kwAFb7GwzwCXGXGP7BVuzNnCn4iA6odTw5DkrnEF+Q924NdFiW5hPMSJ9UTFeXJNeMS3WWX7TVYaZurbD4mqGDvsme4JZOU8CAbi266yHanaIA1k7kZ3UHH7ZbEUzdUO0HFj5HVTa+0jMASN5n25qBjHl5lYYTVa+cXOy9pAhSq9fMsnh3ljo3FXVGpN0s4re+0rEO3KK7FANgam08E5XNlARw8cy7rk5+W49T7CEIXY4AhCEAISIQCoQkQZpKuqdMu+Frnfygu+SeZgax0o1T/ANt/6ISjpVdYPszXf8QFMcXXP+0H6q/w/ZLDtHjL3nmcvs39VUxpXKMOB/beeiucB2brP8Tx3TOLviPRuvrC1LKeGw4ljGA8RGb/AHG6qNq7TqPkMHSCJ0uIlVMP3LyQMZjcPhyaOH8VbQVC3O/NwaIgHkBKkYLsmahFTG1H1CYPdz7VD9BG9J2b2U2hNd4BrvJLSRdjTa3BxvJG4wr5r951NtVciabxzgGkABrWNhoiwAGgA0C2+CrZ2MePxNa7/c0Fee7eqxRqkWhhPsvR61HustMaBlOOgaB8ws+Wdbb/AB73YCbhV9emO/D3fhaT5mAFPmVV7ZYQCW75C567Mb9GNkdoKL6r2F7Q5u4kCd1uKvP2hn5gsRS7CUcRRd3k59Q8WcHa5grTsth6lJrqGOOd3eOczEAZWupwAGuiMpkaX1V4+hnqXciZtmmajYZUAPy5rOM7OyCa1TNrdxHstXidkUwHltW8iBIMDLvnWVmNrbAeaPeOqnNExHhEm3Pgpy6PHk47PbFbSwjGPLWvBA5qFUYIJJCv9rbMoYcE1H3DZgxJOggam+5YzEYd1R5eAWsFmtOvUhZSbq/OZfpiSPFlI4q2pWTGysBbMdBon96nkXjejlU+E9FCT2LfUDC+mxtTLBc129t5gak9NEYAMxLC+gYI+Kk4+IH+B34hy16rXgxvjtw/IynloyEJXAgwQQRqCII6gpCVsxCSUISIFCRKgBCEID1hjALCByAgegSuIG8n79kyasX++aiYnGQDouhilGu0Xuq3GbQjf0/t6qDjMda9v6ae/wAlS4vESNfvmgybQ2gXE3sL29lCwANWoGk+EAudxy7/AFsPNRqxt1v9+/orLDEUqU3zVIPRv4Z66+iRrhuJzOkieG49IVox4jeOUhUOzWkwdfvir1jSRomVV233B1Go3iIXqrh+0YSjWbc90x4PEFoleV7TYe7d5lei/wCGWMFXZtAb6eegf+24gT1blPmnrc0JlcbLDNGp5HejEiQndrYfu6kjTUdOHkmmOkLkyxsuq9CWXViRgzFk/VYHcL+6h02Fd1D1RLpcVO0dn05JFuMSOunNVWMwNFzXBxfB/D3lUNMQR4Q6NfkrTGYe0CRN9dyyG2AQTGeAOaVreVSbUw9POcjb73GSfU3UDEck88mVHrTMQsLbarLJLoYkCnA3qK+tdJTabACSbAc1X49xbXfTzTkOWRYEwM3vI8k5j5VzcnL4xYl4cPCfEJIjfxabqqbtGk2pmZDN5+K5+SWnXh1lW7bw0Pzt0fe2528fXzXXj+zgytvdbaltXD4gAVZDoAFQai2/iOqaxOzHtGZpFRn5mXj+YatWTwbi0BXOztqOYZaSDxBgopQ8hWLcbTqmKrBP5m+B089x9FzX2adaTs41iwePL8XklpW0CEiVw3HXhvCRIFhCIQgabjFYjh0VbjMWR4Rfmmn158lEc45tefnu9z7LdkSvXmBP2Lf181DrcPvmpJg3g7/ZNOafi4Sg3OCwxqPjVo8Tv5Ru84jzTWOxfeVd3ABSsbU7ikG6Pf4naWG5vKAVVbMbmde/zQbW7IERu5wrwvt/QKt2dTtId5T+qsPQ+n0TSr9puGR08On6K2/wU2kJxeF4OZXaJ/M0U3f8GrPbYqTa83gDfbhu4qB2Ex5wu16Mnw1WGi6NLhxGv8Qaqx9lfT3TamF7xhA+IXaeB/RZOlWgkGxBhw3tP3fpC2Uql2zs/Me9YPGBBH5hw6jcjkw8o14OXx/Ll6/sSg4EAru3FU2HxWUSJLeG8Hfb6JMRtQbj+oXJ6d2r6ObSr8IVFtgSwny9LqPtDagL8gdc3PKFU7c2vLS1umkrPKtcbpT4h46n70USq4Ac02cRqm8PTdWflbpvdw5DmspjbRnnJNrXYFHM/vHfC357/RY3vc73v/M9zp6uJ+q3u0Kgw+GqOFg1hjqfC33cF53hTYLeTU6cGeXldpT2wZUrCPztLHcZbO5w/XRV1apaJTNKqQZ+auVmsKjIsm8yexVYOaHg8jyP9VAfVVWlFpSr/f392Vhh8Zz/AKLN0q+5SaWIS2bUHFNdap4uejh5/quHYU6sObpr6b/JU7MUp+FxaYdZTwPohSP23+IoS0FnePvRNNaI4T7x+sn0ThPC3t9/1XbXbjuEeenzW7MwaVifTh9/oncPRA8TvhZ4iDvP4W+dz0C7fSmGt13X+fuVA25XAbkaZaPxT8R3kxp5oCk2xizVqHqrPYdCL/cyqCg0uctvsmkGsBcB6fVTFVaYaeFk9WrBoJOmnGeg9FGq4prReQPUeqMGzM4Pdp+AEG0izyD+K9uHnakGhRdBc6cxEfytn4QfIE9Fhu0VZ1OvTqAwWmx5ggj5L0SqLLz/ALU0pdfig30P2Y2s3F4WlXb+JjSRwdHiHkZU97JXin+DnajuKpwdV37uqZpkmzX72/6vmOa9wK2l2zs0z+09nGc7AAdXDc7nydzWd2lhmPF23Gu5wW8qKl2/h6IovqVXiiGie80yjmPxT+XeYWfJxzLv7dPD8i4dXuPK9s0W0hmpktdN5JM+qztRxddzpTe1Ntd64luYiTEjLabHqRBjdKvuyezcLic4D31KrAHCnUDWhw/E5jGuM5fMwZXHMPK629DkymGPlpUUMM6pZoIb+been6rRYLCtpgABWY2aRujlEJqpSAsquHjHFlyXOs127xOXDtZvqPHo2/zIWNw7rQrXtpjO8xOQGRTaG/6jd3zA8lUMG8I10j7O1SVHyWUh7SQkcy0SlAMLV1a7Rwg8ufkmnty2OosuoCXFGQHb9D6WP0TJHm6eD0yxOkffROg+yoVKo4g8VXp1tkgs/wBpPFCrrpUthvmNmOEEnyv+gUek4z5/cp94hjj5W9Tr5KIx9/r9F0s1mNC4GPDFheCQBHC/1Wc2jSc0kTzniFqMOJaN0n5W+ZPooO0MOCMs2Oh3g/pxRYNs7sahmqDyWqxmMbSbfQDjG70VHg290HZrHTopGBw2Z3e1ZiRkp2P+t4+TfMpQ6sNn03PLalRvh1Yw7+DnDroPM7lcyZ4D9VEpTAM6E+9x7qSHz6fL+6aXeI3GdViu01OHj6rYVzbdbT781ku1Qu0tvPv9wg4ochaQWmCCCDwIuCPNfQfYHtF+2YVjif3jRleP4hafPVeDZNFqf8OdqHD4nLPheL9QqxoynT3YloBe4gNaCSTYAASSTwAXjv8AiDtWtiyHAFuHaf3bDYu/+2oOJtAPwjmStt212mIw+Fn/ADy6o/nSoQ+OjqhYCN4DllNu7PNVhgmbmEs8u9Pa/BviY5X+tn/H+3l9RxaSuKWJexwexxa9plrmmHA8QRopG0qeUwdVXPeuW7l07vk3xtxy9PS9g9q/2ymWvAGIpAF5AAFVth3gAs0g/E0WuCN4DW18eKNN9V27QcTuHqvONh491HFU6g3PAcPzMccr2+bSQrLtxtbvKvctMspm5/M/T2mPVaZS3T5vcm9KOgS4ucTJJkniTclPsTeFpGJUpospyhRyyxCKl5XbYXT2cUWAyGb0jmTbyUjLDU274ZNgjQV1IwYPRSuY6qMTmdICmMB9k6HAkrp4+S7DV1lS0NmJ5oT/AHaEaJuq3+WOp+YUOlv6IQt0LnBfCOh/5OUPHfX6FCEwr9ofFT60/mFZHf8AfBCFJrBnwnq35Fdt0CRCYFf4D0HyWb7QfGzqEqECe1VuUrYv+fT6/RCFUXfTcdtf/cdm/wD56vzerKnofP5hCFGft9F+Ef8AW/m/4eXdp/8ANf8AzFUO8efyQhYX9SfxL3kjYb/OZ/O3/kE3jfjd/M75lCFr9vnasR8IXbfqhCmqc09SnKv0+iEJB2fhULaXwDr+qEJz2V9GMNvUtn36IQkbsaodp6IQqJyhCEE//9k=">
+                    <img alt="PF" class="profile-picture" src="data:image/jpeg;base64,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">
                     Alard Rufino
                 </div>
-            </li></a>
-            <a href="#"><li class="friend-item">
+            </li>
+            </a>
+            <a href="#">
+                <li class="friend-item">
                 <div class="friend">
-                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
+                    <img alt="PF" class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
                     Rudolf Leslo
                 </div>
-            </li></a>
-            <a href="#"><li class="friend-item">
+            </li>
+            </a>
+            <a href="#">
+                <li class="friend-item">
                 <div class="friend">
-                    <img class="profile-picture" src="http://www.kpop-map.com/wp-content/uploads/2016/01/sm-rookies-kun-profile.jpg">
+                    <img alt="PF" class="profile-picture" src="http://www.kpop-map.com/wp-content/uploads/2016/01/sm-rookies-kun-profile.jpg">
                     Henk de Boer
                 </div>
-            </li></a>
-            <a href="#"><li class="friend-item">
+            </li>
+            </a>
+            <a href="#">
+                <li class="friend-item">
                 <div class="friend">
-                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgkAdM5qWZAEN2yJf14OXdZjnDWIupOcJRFnuaFLHa12_rNyMn">
+                    <img alt="PF" class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgkAdM5qWZAEN2yJf14OXdZjnDWIupOcJRFnuaFLHa12_rNyMn">
                     Anno Nimus
                 </div>
-            </li></a>
-            <a href="#" class="extra-menu-items"><li class="friend-item">
+            </li>
+            </a>
+            <a href="#" class="extra-menu-items">
+                <li class="friend-item">
                 <div class="friend">
-                    <img class="profile-picture" src="data:image/jpeg;base64,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">
+                    <img alt="PF" class="profile-picture" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQEBUSDxAQEBAVFRUPEBUQDw8VFRUQFRUWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQFS0fHR0tLS0rLSsrLS0rLSstLS0tLS0tLSsrLS0tKy0tLTctLS0tKy0tLTAtNysrLS0tKysrK//AABEIALcBEwMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAADAAIEBQYBBwj/xAA4EAACAQIEAwYFAgYBBQAAAAAAAQIDEQQFITESQVEGImFxgbETMpGhwdHwFCNCUmLhchUkM4Lx/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAECAwQF/8QAIREBAQACAwEAAgMBAAAAAAAAAAECERIhMQMTQTJRYXH/2gAMAwEAAhEDEQA/AI8WEiwKY+LOR2DJhYgIsLFiA0QsAUQsBAWIS9kDiV/aDH/BpO3zPSP6gbG9qce6tZ66Lux8ubKKlTbWnV3v5EqScpdd2/1JlDB+GxtOmXqveHsr9dVp7fYJhsN8zt0frG8vwXEMNHm/S32FGik2lqno+obPSvq82uemnRfnT2C4aso07cm5N/8Ata/2bHzwr0fo/wBRtSg1Fp+HLoPZaQsZgeGN92/fT9SqjRW/r1L/ABKcrK3T7r/TOUcvsk5K9/a4bGlNTq8OiuvWxfZbinKy45R84pr6r/ZzMcpS1jxSb10tbwSK6NWdGVlxxfhK34YtnrTT/wANJaqtB7PWT1/fkAqyin3p073v3m9H4Ii4WvCu0qur/wAkl91ZFxLLqSScKacnrp0GFVTaTvCLqyet2tL7Wjf3I+LoSveu0r3tCPT39vUtcVSrxWkfhJ7Wcfd/gqquFa1qNde827vx5gR1FQtd2itoJ+9lqQq80nZL7c34DcVimno0m+m/0IdKo0+fW/j1DQWEKHFvZR577+mv7RJpQULcN7rqt35DMMtL62bvG/O37ZJUXu0ml5ipwXCt8Snw8M4u9uqPS8DJSpxktmrpdPA86jG8b63ez6eBvcgq3pRjL5rctmuq/QzyXE1xGyiHcRriQaM4g5IkyiDkgCPJA5IkSiCkhgGwh9hATOxYSLAJhYsoDxYWACLCxYgPFhosjxYaDEB4szvbCVoLq9F4LmaCJlO171TafRDx9F8Z3Aq7k9Oi/f0Lpd2Hje702vzb6ldgYpuMdku87dXp+GTMNVc5p6PVtL8l1MScHh3KaXXfy538f9lpUyxNqy8h2VxSncu8HSvq+fsZXJvMVXQylvlvv5+wbE9n243ir8rc7eRq8Jh4tbFlQoJaC5j8byjF5U4S2+3Tf3G0sO2kraq6+/7Z6tjslp1VslLe5VUuzChK9uehXNPBkMDhOHdbdfG6v9inxuSSqKVV87vZdbJJejPUKuRqzSXJv1BxyXucNr6+/MctFjxeplcovvJpdEW+BpTpR+drpGF279L8j0Kt2W+JPayXhzLvDdlqUEu6nba4+VTxjzLDurLX4F3ylJOUn47jMT2cqz3ptP8AxSXpY9gpZVGOyXorBv4OKWyFyquOLwav2XrQTtT3+pVTyiakuNcN+tnqfQ9XBxas4qxle03ZxTT4ElL5l5oPyWD8cvjzWMlHu/K9Fwy5W2S+x34LvquH/k/Y3FDsfGEHOs4yq72je0fV7+Zl87oqErJWS2t+OhUy2i46V1Sb0Sk3yVrWS6Gz7JSfDZu63XVenQwtObvp5aHoPY+SnSd4riTtfwFkI0NhriEUTjRCgGgckSGgckAR5RBSRJkgMkMgLCH2OgTJRYSIFBYlAaLCxYGIWIgNFhoAIhoCA8WUPbSg3Q4l/T+WXsQWZYZVaM4Pmn9Ql7FedZVidNebt+CflCt4O9vToUdFOm2paWk/wWmV1e9b9+ZpknH1q8v+axo8vjZmawUu8vI0+D5GGTpi6w7LCiVmHT5W+pZ0Z9YszrRNpIMkBhNBk0a4scj+C6+zOKmtB8DtjWMqSpJD7HDpSTJIDJB5AZGeTTEOSIuJpX/BLbI9UzrXFV5inwvXy0PNe0ku89Fbqej5w7RPM89q3lro/sVgn6KB1OF9fI9D7EWdJtKybPP8FhnUqqKV7vb3R6zk2AVCkopefmXkyiaNaHnGiFBtA5IM0MkgAEkCkiRJApICR2hD7HQDFRCRBxCRLIWIWAGIWIgNENEBENEQGiMx+J+HTcvoOiRs5jeixRU9eb5rrUcuruGyZ3mGxeGvfw1RHyF/zGa3wsseOTX4OeqNXgdkvYwkcZ8NuXTZX5hsv7TuM1xSTXPkl6GfHbSZaenYdJW1afiW9CL814GXyfOadeOjTfkzSYKVklcji1mXSZGouenmFjTT208mK10PjBdC5GVpRjKO3eQ/jfQdwP8Apl9Tl5c7FeM97OSb8Dqh4jU2+Z1RXPUpLk4oY4oJZLkDqS6k2KxDkR6rOV8ZCO7BOupK6Zlk2xiuzpXpu+p5Rm9Tik10215dT2CtFSi01ozy/PMrf8d8KmtJW4fJj+dL6RP7D5VxSdaS0jpH1NzYbg8EqNKFOKsklfxdh7Q6M8OMhpxoccYMjGhjQRjWBhSQKSDSByQEC0IcIAw0QkQcQkSyEiEiCiFiKgWIaACIaAgPAdUp8UWnzGQDREbD5rQ4HJPkVWTR/mz8vya3tXh9OJbtexmez9O85t9EaS9Ky71TcVCUqnDy8mS6HZapNd1rXmya8LaVy4wWP4GoatvZK1vNsN/0Uxl9ZyWX4zCSulJrm46+tjSZN20rRSVSMJWe97aehNxOZQiv5tajHnZyb9ikqzwtd3hUpce+jcXry7ySv6h77D1ryvQsq7W06llK8G9FxbGnw2IUldNWZ4xSwslez801Z2NZ2cxdSnpfiWmjdtOvnb2F4qd+vQoSHSZFpTurj07D2i4n/EsCq42Efmkl6q5UZ1jpR0pq/VmLxaxNV6JtX04dL6/NJvZC2vjG3xnanD07rju1pom9d+Wxm807bQ/o4r30aS/UpVkLverWVNLfh70td30X4LPK8Dl17K1WfWdSLd/K/gG4nV/4rMRmWIrJyip8G8neLil0eyRLy7O5Qi7SbjvxO/DfS6uzUKlQVkqcYrZXjb72IWLy+nq4RXE1ySJtjThl7tPy7FKrTU1bVX0d1fwKOlh4vNoOeyptx/5cvyW2Q4N0oNPm7pdCPOn/AN/Tl/hK/wBrE4+izel/iWrP7EAmY7l4kMqp+l30RxnTjEzNY1jhrAzGDkEYOSAghHWdAMGgiBoIiyPiEQNBIioFiGiBiFiIDRDRAwDREavz+lxU14MzOW0eCUvGxssfC9N233MjTffZU8VPF9ToXjotSpjgnKuozm6cXpeK1+rNBlLvFB82yriSa3Jl0vW4FiezN8HKnRjFzTU7q3FNLlczfZ3s7XrVHh1h48M6kZzq1KVqlKMdGlN7R/x5s1+VOcbRk5R9XYv6Dkmnxt77/QuZ6K/GX9u512aocP8ALnCm4rZytt0trfwRkJKrh3xQfHFfMuatunbQ3Earlo7Plql9iqzirvGKS0adkTldqxw4zW9rPs/msa8E15NdH5GhUdOR5z2Ufw6so8nb6nodKWg8RnOtq7HUeJ2Su/3qVuKwUo6NqPPVpaF43aV1uCxjcuS87EWKxvemZzzIVVwk+B/EqaNJP+lO7SXNtHmeAy11P5FPDt13VbjUjKpxcNrKDhfhST14rX0PYIQkubRJpqS1i1F87QsaY56Rn8f9UWLyKvhop0Kzmku9Tq96LdteF7x+4/IsQ6ukqc4S5qS0Xk+hb18PKb7zfiS8PRstNDPK7qsZxmrdmyp8JA+FfExfLhZZYhkTDJOur/2sJ6dv7Px71RFDYz52BHWOXpHGdOAk1jWPGsAYwcgkgcgAZ0R0AwSHoZEeiyPiEQOIRCAsQsQUQsBAaAaIGAaIjGiZ/O8rUH8WGi2kvPmaCAHNKPHRkudrr0HAq8lq6mxw8VOJgMqrWdzbZbW2sLJvhdrKnhl0Dwo+A7D6+ZNp0yWl6RpUtNEUuYpLQ0GIVl7mXxlTvtsN0TxHyynwV14m+ovQw2BXHVT6G4wke76F4+s/p/EOesgkYXGLcLSYT1N8CnhxQpdSWxvCVxTzoHwzsloEkgUidHEOuyDRqWqyl0SivUk4uViDRW75vUn9qzy0LJ3dzghDYkcEcYBw4zrGsAbIHIfIZIAYIQgDBRCIHEeiyEiFiCiEiIDRCxAxDREBoBogYhYiMaARq6t6A4BUAY2lDgqyg+TfuabJ8VrZlHnVPgxF/wC5KXrsyThKlpJpjqsbp6Bg6hZ0WZrLq90i7w1XTUhv7HcyrqEXKW1jF4dyruVT+ndLw5F32ocpU5KPRlP2fxMfhqMtHZLXqlsE/s03s/DW76m1w6fDoZTKbRk1pv8AZmuwk9C8PUfT+KPU0GUpNSDVWr6sZFqUlw69bAUvXaVTlcc2CtY62VyZackwFaQSbIlediMsmkmlfjp3v9BqQKprNL1CiiMr2TEI4NJCEcAOMazrGsA42DkOYOTAGtiGtiAMLFj4gkx8WaENEJEDFhYsQGiGgAgw0WIDxDQI8WGgxGPELEDFhYiCn7T4e8Y1F/S7PyZAwNTT2NNXpKcHF7NWMWlKlN05bp6eK6jDbZXU0Re0K6RkMixPFp7l5XUnbgM8p23xy6WlWcZblBmuWQabjZeWhJlP4cleT1673CSpXa73W9+dxzocts3hoYihUTg3OHRvW3gzdZZj5yh3oOL6sjYHB33S8vG5NrYeWllpe3hb0K2X+CK0vnTabtr08uhPw8oxS4UkuSSsRp4Z2SV9LWf/AMFODtb6/wCrB4Vu4sONMZcr1Vd+fiTISuvELUyFUkV+JncPianQqsXiuSe7JO02lLibfoFGU42Vh42ZHBXOXGHTjYjlwDjY1s62MkwBsmDkx0mCkwDjYhjYgDCJhIsAmPjI0SkRYWLI0ZBYyEaVFhYsixkGhIQSoMNFkWEg0ZAEmLCxZGjILGQjSIsou1WETh8ZfNHfxRdKRDztXoTXgEDPZRjtVY3mArqSjf8AbPJ8PWdOXgbHK8wc42W4Z47VhWrzChCpuk/MqZ4Jp92pNLl3r28NR2Ex7k7PdE1y52uiMem+Nh2Do4iHehUT8JcyypZhXlpwJNc76EahjKaV3JLr4E6jiaa2ktfE16b24GwlXvrK3rckUsPOXzTdvBJBqc4vZphlUsRlYyyyl8gDwnBs343YWVWy0OVqxBxNdJXvYzZVGxmJsr30IWCi5S43t/T+oyNGVaV3/wCNfcsXCxaK7cVzlzg0O3EcuNuAOuNbE2NbAE2MbE2MkwDkmCkx0mCkwBNnBohhgVIepEZTHKZaUqMwsZkNTCRmATYyDRmQYzDQmI06Ew0ZEGEw0JgE2MgsZEOMwOIzSnT+aSFrY2t4yK7PMSlT4U9WU1btLGb4KWrfMZVu7cTux3HQl2rMTRHZZj3Smk9tiwlSuisxmE5jNucHUjJRlszR4KCkkeZ5HmLj3JP/AI3N9kmMVk77e5nli0wyXX/TIvl9Eh8Mqjond22vFEnB14vZ3JM66FIdplHBxWi0HSgkdlVSSf1IGLxmu9vwhWQbp1erGCu2VUVLESurqmt/HwQ6MJYmVtVSXzSv8z/tX6lzToqEUoqy2SXJBrRehxopKwDERJyiBqwA6qo103w316BLme7c4r+H4Jwdp3+qIuW9sKc0lU7sttTWfO3HlGFykumqucuAo4mM1eLTXgP4iFHNjWxrkNcgDrkMkzjkDcgDsmDkxNg5MYduIG2IA884zqkIRok5TCKYhCAkZhYzOiAxY1B38XFbv7MQh6JWZl2hjFNQvxeRlKtWU23JtsQjpwxkjDO0bJp2rRN1GndiEY/b1p8hqdHULUy5SQhGLoxirxWS229yRgsVVpK268Gvv1EIcqbF9hO0Nmkm4ve1tGS59o1xaN6b6PpyEIfGFuj085nO8acZSezu4pL6smUMvnV1rStH+2L19WIRF6Vj2u6UUlaKslokgsRCJaU64Kpom/UQgRXjvbfN/j4hxV+GHdXmZuUxCPTwmsZpw5d2rXs92klhXaV5Q+tjeZb2hpV13bp+TOCMfthPV/PK+LXjGuQhHI6DHIY5CEAMbGSZwQyNudEIA//Z">
                     Marijn de Wit
                 </div>
-            </li></a>
+            </li>
+            </a>
             <a href="#" class="extra-menu-items"><li class="friend-item">
                 <div class="friend">
-                    <img class="profile-picture" src="http://3.bp.blogspot.com/-EAc3uLCV5gU/ToR2vXmNPvI/AAAAAAAAAH0/ajH0ospmkLM/s1600/pumping+iron.jpg">
+                    <img alt="PF" class="profile-picture" src="http://3.bp.blogspot.com/-EAc3uLCV5gU/ToR2vXmNPvI/AAAAAAAAAH0/ajH0ospmkLM/s1600/pumping+iron.jpg">
                     Arnold Drups
                 </div>
-            </li></a>
-            <a href="#"><li class="more-item" id="more-friends-click">
+            </li>
+            </a>
+            <li class="more-item" id="more-friends-click">
                     En nog 2 anderen...
-            </li></a>
+            </li>
         </ul>
     </section>
     <section id="groups-menu-section">
@@ -56,36 +69,46 @@
             Groepen
         </h4>
         <ul class="nav-list">
-            <a href="#"><li class="group-item">
+            <a href="#">
+                <li class="group-item">
                 <div class="group">
-                    <img class="group-picture" src="https://4.bp.blogspot.com/-H3G7SSOLe7M/V08Ey2YyC3I/AAAAAAAABYs/QnXOEfjIhugFG8mKGHhxN5gkkJdCEwcugCLcB/s1600/mysace-hacked.png">
+                    <img alt="PF" class="group-picture" src="https://4.bp.blogspot.com/-H3G7SSOLe7M/V08Ey2YyC3I/AAAAAAAABYs/QnXOEfjIhugFG8mKGHhxN5gkkJdCEwcugCLcB/s1600/mysace-hacked.png">
                     Myspace
                 </div>
-            </li></a>
-            <a href="#"><li class="group-item">
+            </li>
+            </a>
+            <a href="#">                 <li class="group-item">
                 <div class="group">
-                    <img class="group-picture" src="data:image/jpeg;base64,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">
+                    <img alt="PF" class="group-picture" src="data:image/jpeg;base64,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">
                     Hyves
                 </div>
             </li></a>
-            <a href="#"><li class="group-item">
+            <a href="#">
+                <li class="group-item">
                 <div class="group">
-                    <img class="group-picture" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAeFBMVEU7WZj///8sT5O3v9RAXJokSpE3VpdacKQzU5Xj5u6Ek7iWosI1VZbq7fRDYJza3+r5+vyrttDQ1+WGmL7L0eH09vpfd6pLZqBrgrFQaaC/xthacaTm6/PDzN9heat5jbemscwMP4yNncAiSJCaqch1h7OAkruxvNRQ5noeAAAEJUlEQVR4nO3dyXLiMBSFYVmAJBLLMwZCBppOwvu/YTNkWDQNit3SvVKdf5ENlZS/soiMLRuRnbNd2xcilYq+7eyHTJx+VrWWRlFv139MGanr6ltY6qR455TR5aewKXLqzfFSXjRnYVmktwPPqaI8Ciud5h48luvqIKwN9XZ4zNSZsDrVMXpMaSs6Sb0VXpOdaFMepIdh2oo+5UF6GKa9SOdQ7XKp+xBCCCGEEEIIIYQQupXKjcmVENPvxPT0glJ5fnjRnF+PtFya9dtuO+lKW2VfVQv7WJZN9/Swr7evu7u3lZ5Sb+mQlJGzflvOF9mtFtbexXfGXsnl3aS6ifvsPjahksW+dObFJ1Sqf3DffREK5XJ/+70XsTAXO3tbFLHQrLuf+2ISypf5EGBEwt0gXzxCuR0IjESoxH4oMBKhGbwHIxHK1+HAKITm5YeHMbEJ882AeT4qoWzGACMQmqETYSxC1Y8aoxEIZ5NxQPZCtR4JZC+UD4kL89WPP/HGJhx+PBqHUE1H70LmQtOOBjIXjjyc4S9U/fhByls49oCNv1CMngyZC0/3JKUt3PxEsrB2fiHW157MuzNvPrl/04WRs79jDBSydvSVq6UyRsV3uXfmNhvaVsZ6LVs6ffZ9XEV745lausz3i57zG+166tnlJOJ9tHvw8MnJ5TRpQ72VY3I6ZnuNd4wehA7n8u060v+ip1wuqJURvwvdJvx93EKHczRx36IsHc4Fr6J+FIKLMO4nBbgIlxCyzkU4TV9IvZGjghBC/kEIIf8ghJB/EELIPwgh5B+EEPJIXcll7azIr/2FY8TAYqP/3dphNc213z+2IT6hau5uG0b2OEtd+ER76SaAsE5eSLzmK4DwnfbilH/hgvjym3/h4yb12aIkvjjlX0i93Ma/kHg6DCAkng4DCHfEazX8C9+SF1IvCvMvpF5Q5F1of6cubKiXvXkXki/s8y4kX1/rXUh+v4x3IfnSRd/CxTP1yUTfwjn1hO9d2JB/g4xv4RM10LtwQj0dehduUxdW9Cv5fQvJp0PfwgX9KnDfQvJd6Fs4p72yFkDI4Hsb85eLt9B/5nCT7LVft+SfnY7EC/fPf/XL4c6uSzfgR3En/qk01mJcC0II+QchhPyDEEL+QQgh/yCEkH8QQsg/CCHkH4QQ8g9CCPkHIYT8gxBC/kEIIf8ghJB/EELIPwgh5B+EEPIPQgj5ByGE/IMQQv5BCCH/IISQfxBCyD8IIeQfhBDyL6CQ6IlZwYSF6GkeZBNKqHpB9LilUELTCqLnvIQSyk5Ymi/6CCRU2oqsJhmmgYSmzkRWaYpnSoUR5ro6CLOyIBinQYSqKLOjMGuK8HsxhDAvmuwszEptQu9G/0JldJl9CrOq1jIs0rNQGanrKvsWZpnt2j7kAZxfYdG3nf34K38ArA5OdTHdpNAAAAAASUVORK5CYII=">
+                    <img alt="PF" class="group-picture" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAeFBMVEU7WZj///8sT5O3v9RAXJokSpE3VpdacKQzU5Xj5u6Ek7iWosI1VZbq7fRDYJza3+r5+vyrttDQ1+WGmL7L0eH09vpfd6pLZqBrgrFQaaC/xthacaTm6/PDzN9heat5jbemscwMP4yNncAiSJCaqch1h7OAkruxvNRQ5noeAAAEJUlEQVR4nO3dyXLiMBSFYVmAJBLLMwZCBppOwvu/YTNkWDQNit3SvVKdf5ENlZS/soiMLRuRnbNd2xcilYq+7eyHTJx+VrWWRlFv139MGanr6ltY6qR455TR5aewKXLqzfFSXjRnYVmktwPPqaI8Ciud5h48luvqIKwN9XZ4zNSZsDrVMXpMaSs6Sb0VXpOdaFMepIdh2oo+5UF6GKa9SOdQ7XKp+xBCCCGEEEIIIYQQupXKjcmVENPvxPT0glJ5fnjRnF+PtFya9dtuO+lKW2VfVQv7WJZN9/Swr7evu7u3lZ5Sb+mQlJGzflvOF9mtFtbexXfGXsnl3aS6ifvsPjahksW+dObFJ1Sqf3DffREK5XJ/+70XsTAXO3tbFLHQrLuf+2ISypf5EGBEwt0gXzxCuR0IjESoxH4oMBKhGbwHIxHK1+HAKITm5YeHMbEJ882AeT4qoWzGACMQmqETYSxC1Y8aoxEIZ5NxQPZCtR4JZC+UD4kL89WPP/HGJhx+PBqHUE1H70LmQtOOBjIXjjyc4S9U/fhByls49oCNv1CMngyZC0/3JKUt3PxEsrB2fiHW157MuzNvPrl/04WRs79jDBSydvSVq6UyRsV3uXfmNhvaVsZ6LVs6ffZ9XEV745lausz3i57zG+166tnlJOJ9tHvw8MnJ5TRpQ72VY3I6ZnuNd4wehA7n8u060v+ip1wuqJURvwvdJvx93EKHczRx36IsHc4Fr6J+FIKLMO4nBbgIlxCyzkU4TV9IvZGjghBC/kEIIf8ghJB/EELIPwgh5B+EEPJIXcll7azIr/2FY8TAYqP/3dphNc213z+2IT6hau5uG0b2OEtd+ER76SaAsE5eSLzmK4DwnfbilH/hgvjym3/h4yb12aIkvjjlX0i93Ma/kHg6DCAkng4DCHfEazX8C9+SF1IvCvMvpF5Q5F1of6cubKiXvXkXki/s8y4kX1/rXUh+v4x3IfnSRd/CxTP1yUTfwjn1hO9d2JB/g4xv4RM10LtwQj0dehduUxdW9Cv5fQvJp0PfwgX9KnDfQvJd6Fs4p72yFkDI4Hsb85eLt9B/5nCT7LVft+SfnY7EC/fPf/XL4c6uSzfgR3En/qk01mJcC0II+QchhPyDEEL+QQgh/yCEkH8QQsg/CCHkH4QQ8g9CCPkHIYT8gxBC/kEIIf8ghJB/EELIPwgh5B+EEPIPQgj5ByGE/IMQQv5BCCH/IISQfxBCyD8IIeQfhBDyL6CQ6IlZwYSF6GkeZBNKqHpB9LilUELTCqLnvIQSyk5Ymi/6CCRU2oqsJhmmgYSmzkRWaYpnSoUR5ro6CLOyIBinQYSqKLOjMGuK8HsxhDAvmuwszEptQu9G/0JldJl9CrOq1jIs0rNQGanrKvsWZpnt2j7kAZxfYdG3nf34K38ArA5OdTHdpNAAAAAASUVORK5CYII=">
                     Facebook
                 </div>
-            </li></a>
-            <a href="#" class="extra-menu-items"><li class="group-item">
+            </li>
+            </a>
+            <a href="#" class="extra-menu-items">
+                <li class="group-item">
                 <div class="group">
-                    <img class="group-picture" src="https://img.clipartfest.com/8f6d5fb0d1d863c10e61e708a0b8077a_-google-plus-icon-google-plus-clipart-png_1047-1024.png">
+                    <img alt="PF" class="group-picture" src="https://img.clipartfest.com/8f6d5fb0d1d863c10e61e708a0b8077a_-google-plus-icon-google-plus-clipart-png_1047-1024.png">
                     Google +
                 </div>
-            </li></a>
-            <a href="#"><li class="more-item" id="more-groups-click">
+            </li>
+            </a>
+            <li class="more-item" id="more-groups-click">
                 En nog 1 andere...
-            </li></a>
+            </li>
+        </ul>
+    </section>
+    <section>
+        <ul>
+            <li style="display:none;" class="more-item" id="menu-back">
+                Ga terug
+            </li>
         </ul>
     </section>
-    <a href="#"><span style="display:none;" class="more-item" id="menu-back">
-        Ga terug
-    </span></a>
 </nav>

From 2ad1b49cfdfe94ffd38c5813ee314f9ee1af1498 Mon Sep 17 00:00:00 2001
From: Joey Lai <joeylai96@hotmail.com>
Date: Fri, 13 Jan 2017 15:52:46 +0100
Subject: [PATCH 19/21] Added popup

---
 website/views/login-view.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/website/views/login-view.php b/website/views/login-view.php
index f8e163b..7ee3d66 100644
--- a/website/views/login-view.php
+++ b/website/views/login-view.php
@@ -42,7 +42,9 @@
           $confirmpasswordErr = "Wachtwoorden matchen niet";
           $correct = false;
           ?>
-          <script>document.getElementById('id01').style.display='block'</script>
+          <script>window.onload = function() {
+            document.getElementById('id01').style.display='block'
+          }</script>
           <?php
       }
     }

From 019f0f71bbf7f5ebf534f8f0b9f1d62ae674f56e Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Fri, 13 Jan 2017 16:09:56 +0100
Subject: [PATCH 20/21] Made an index

---
 website/public/index.php | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 website/public/index.php

diff --git a/website/public/index.php b/website/public/index.php
new file mode 100644
index 0000000..914192b
--- /dev/null
+++ b/website/public/index.php
@@ -0,0 +1,5 @@
+<html>
+<head>
+    <meta http-equiv="refresh" content="0; url=login.php" />
+</head>
+</html>
\ No newline at end of file

From bb0f32ffd91fdde2e9b92dbcbcf5d841ce42c8b7 Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Mon, 16 Jan 2017 13:10:34 +0100
Subject: [PATCH 21/21] Made some pages html valid with a validator

---
 website/public/styles/settings.css |  24 ++--
 website/views/footer.php           |   2 +-
 website/views/settings-view.php    | 196 +++++++++++++++++------------
 3 files changed, 129 insertions(+), 93 deletions(-)

diff --git a/website/public/styles/settings.css b/website/public/styles/settings.css
index 9a2c753..da55ec4 100644
--- a/website/public/styles/settings.css
+++ b/website/public/styles/settings.css
@@ -1,6 +1,17 @@
-.settings input,
-.settings textarea {
+.settings .item-box {
+    display: inline-flex;
+}
+
+.settings-password {
+    margin-right: 15px;
+}
+
+
+.settings li {
     margin: 5px;
+}
+
+.settings textarea {
     resize: none;
 }
 
@@ -14,15 +25,10 @@
 .settings input[type="password"],
 .settings input[type="text"],
 .settings input[type="date"],
-.settings input[type="email"],
-.settings textarea {
+.settings input[type="email"] {
     width: 200px;
 }
 
 .settings textarea {
-    width: 400px;
-}
-
-.settings label[for="bio"] {
-    vertical-align: middle;
+    width: calc(100% - 350px);
 }
\ No newline at end of file
diff --git a/website/views/footer.php b/website/views/footer.php
index 02dc0cd..c43a80c 100644
--- a/website/views/footer.php
+++ b/website/views/footer.php
@@ -1,3 +1,3 @@
 <footer>
-    <p>Copyright &copy; 2017 MyHyvesbook+ <span style="float: right">Like ons op Facebook!</span></p>
+    <p>Copyright &copy; 2017 MyHyvesbook+ <span style="float: right">Like ons op Facebook!</span>   </p>
 </footer>
diff --git a/website/views/settings-view.php b/website/views/settings-view.php
index 797217e..cb22af5 100644
--- a/website/views/settings-view.php
+++ b/website/views/settings-view.php
@@ -1,95 +1,125 @@
 <div class="content">
     <div class="settings">
         <form class="settings-profile platform">
-            <h5>Profiel Instllingen</h5>
-            <label for="first-name">Voornaam</label>
-            <input type="text"
-                   name="first-name"
-                   id="first-name"
-                   placeholder="Voornaam"
-                   title="Voornaam"
-            ><br />
-            <label for="last-name">Achternaam</label>
-            <input type="text"
-                   name="last-name"
-                   id="last-name"
-                   placeholder="Lastname"
-            ><br />
-            <label for="place">Woonplaats</label>
-            <input type="text"
-                   name="place"
-                   id="place"
-                   placeholder="Woonplaats"
-            ><br />
-            <label for="bday">Geboortedatum</label>
-            <input type="date"
-                   name="bday"
-                   id="bday"
-                   placeholder="01/01/1900"
-            ><br />
-            <label for="location">Locatie</label>
-            <input type="text"
-                   name="location"
-                   id="location"
-                   placeholder="Locatie"
-            ><br />
-            <label for="bio">Bio</label>
-            <textarea name="bio"
-                      rows="5"
-                      title="bio"
-                      id="bio"
-            ></textarea>
-            <br />
-
-            <label></label>
-            <input type="submit"
-                   value="Opslaan"
-            >
+            <h5>Profiel Instellingen</h5>
+            <ul>
+                <li>
+                    <label for="first-name">Voornaam</label>
+                    <input type="text"
+                           name="first-name"
+                           id="first-name"
+                           placeholder="Voornaam"
+                           title="Voornaam"
+                    >
+                </li>
+                <li>
+                    <label for="last-name">Achternaam</label>
+                    <input type="text"
+                           name="last-name"
+                           id="last-name"
+                           placeholder="Achternaam"
+                    >
+                </li>
+                <li>
+                    <label for="place">Woonplaats</label>
+                    <input type="text"
+                           name="place"
+                           id="place"
+                           placeholder="Woonplaats"
+                    >
+                </li>
+                <li>
+                    <label for="bday">Geboortedatum</label>
+                    <input type="date"
+                           name="bday"
+                           id="bday"
+                           placeholder="01/01/1900"
+                    >
+                </li>
+                <li>
+                    <label for="location">Locatie</label>
+                    <input type="text"
+                           name="location"
+                           id="location"
+                           placeholder="Locatie"
+                    >
+                </li>
+                <li>
+                    <label for="bio">Bio</label>
+                    <textarea name="bio"
+                              rows="5"
+                              title="bio"
+                              id="bio"
+                    ></textarea>
+                </li>
+                <li>
+                    <label></label>
+                    <input type="submit"
+                           value="Opslaan"
+                    >
+                </li>
+            </ul>
         </form>
 
-        <form class="settings-password platform" method="post">
+        <form class="settings-password platform item-box" method="post">
             <h5>Verander Wachtwoord</h5>
-            <br />
-            <label>Oud Wachtwoord</label>
-            <input type="password"
-                   name="password-old"
-                   placeholder="Oud wachtwoord"
-            ><br />
-            <label>Nieuw wachtword</label>
-            <input type="password"
-                   name="password-new"
-                   placeholder="Nieuw wachtwoord"
-            ><br />
-            <label>Bevestig wachtwoord</label>
-            <input type="password"
-                   name="password-confirm"
-                   placeholder="Bevestig wachtwoord"
-            ><br />
-            <label></label>
-            <input type="submit"
-                   value="Verander wachtwoord"
-            >
+            <ul>
+                <li>
+                    <label>Oud wachtwoord</label>
+                    <input type="password"
+                           name="password-old"
+                           placeholder="Oud wachtwoord"
+                    >
+                </li>
+                <li>
+                    <label>Nieuw wachtwoord</label>
+                    <input type="password"
+                           name="password-new"
+                           placeholder="Nieuw wachtwoord"
+                    >
+                </li>
+                <li>
+                    <label>Bevestig wachtwoord</label>
+                    <input type="password"
+                           name="password-confirm"
+                           placeholder="Bevestig wachtwoord"
+                    >
+                </li>
+                <li>
+                    <label></label>
+                    <input type="submit"
+                           value="Verander wachtwoord"
+                    >
+                </li>
+            </ul>
         </form>
 
-        <form class="settings-email platform" method="post">
+        <form class="settings-email platform item-box" method="post">
             <h5>Verander Email</h5>
-            <br />
-            <label for="email">Nieuw Email</label>
-            <input type="email"
-                   name="email"
-                   id="email"
-                   placeholder="Nieuw Email"
-            ><br />
-            <label for="email-confirm">Bevestig Email</label>
-            <input type="email"
-                   name="email-confirm"
-                   id="email-confirm"
-                   placeholder="Bevestig Email"
-            ><br />
-            <label></label>
-            <input type="submit"
-                   value="Verander Email"
-            >
+            <ul>
+                <li>
+                    <label for="email">Nieuw Email</label>
+                    <input type="email"
+                           name="email"
+                           id="email"
+                           placeholder="Nieuw Email"
+                    >
+                </li>
+                <li>
+                    <label for="email-confirm">Bevestig Email</label>
+                    <input type="email"
+                           name="email-confirm"
+                           id="email-confirm"
+                           placeholder="Bevestig Email"
+                    >
+                </li>
+                <li>
+                    <label></label>
+                    <input type="submit"
+                           value="Verander Email"
+                    >
+                </li>
+            </ul>
         </form>
     </div>
 </div>
\ No newline at end of file