add bg-primary classes

resources/js/components/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex bg-orange-200 h-screen overflow-y-hidden">
+    <div class="flex bg-gray-200 h-screen overflow-y-hidden">
         <Nav />
         <div v-if="authUser" class="w-full overflow-y-auto">
             <TopBar />

resources/js/components/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-center items-center rounded-full bg-orange-600 hover:bg-orange-800">
+    <div class="flex justify-center items-center rounded-full bg-primary-600 hover:bg-primary-800">
         <img v-if="avatar" src="avatar" alt="alt" class="avatar" v-bind:class="'avatar' + size">
         <span v-else class="text-2xl font-bold"  v-bind:class="'text-' + size">{{ alt[0] }}</span>
     </div>

resources/js/components/Nav.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
+    <nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-primary-400 flex flex-col justify-between">
         <div class="">
             <router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
                 <svg-vue icon="logo" />

resources/js/components/TopBar.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="top-bar flex justify-between bg-orange-300">
+    <div class="top-bar flex justify-between bg-primary-300">
         <router-link v-if="authUser" :to="'/profile'" class="flex items-center m-2">
             <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="w-10 h-10"/>
-            <span class="ml-2 hover:text-orange-900">{{ authUser.data.attributes.name }}</span>
+            <span class="ml-2 hover:text-primary-900">{{ authUser.data.attributes.name }}</span>
         </router-link>
         <form v-if="authUser && search" class="m-2">
             <input type="search" name="search" placeholder="Search">
@@ -10,7 +10,7 @@
                 <svg-vue icon="search" />
             </button>
         </form>
-        <router-link to="/dashboard" v-if="authUser" class="text-orange-600 hover:text-orange-800">
+        <router-link to="/dashboard" v-if="authUser" class="text-primary-600 hover:text-primary-800">
             <svg-vue icon="params" class="w-10 m-2 fill-current" />
         </router-link>
         <router-link v-else to="/login">

resources/js/views/CssTesteur.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="m-2">
+    <div class="m-2 p-2 bg-white">
         <h1>testeur CSS</h1>
         <h2>testeur CSS</h2>
         <h3>testeur CSS</h3>

resources/js/views/Memo/MemoIndex.vue

@@ -13,10 +13,10 @@
                 <div class="m-2 max-w-lg rounded overflow-hidden shadow-lg bg-white">
                     <img :src="memo.data.attributes.cover_image.data.attributes.path" alt="" class="w-full">
                     <div class="px-6 py-4">
-                        <h1 class="text-gray-700 text-">{{ memo.data.name }}</h1>
+                        <h1 class="text-gray-700">{{ memo.data.name }}</h1>
                     </div>
                     <div class="flex justify-end py-2">
-                        <span class="inline-block bg-orange-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
+                        <span class="inline-block bg-primary-400 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{{ memo.data.last_updated }}</span>
                     </div>
                 </div>
             </router-link>

resources/js/views/Memo/MemoShow.vue

@@ -31,7 +31,7 @@
             <div class="p-4">
 
                 <div class="memo-style p-4 pb-3 -mb-1 bg-white" v-html="memoMarkdown"></div>
-                <div class="bg-orange-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
+                <div class="bg-primary-400 px-2 py-1 flex justify-end">@last update {{ memo.last_updated }}</div>
             </div>
         </div>
     </div>

resources/js/views/Meteo/OpenWeatherCard.vue

@@ -6,7 +6,7 @@
 
             <div class="flex flex-wrap -m-2 mt-2">
                 <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
-                    <div class="bg-orange-300 rounded text-black m-2 p-2 flex flex-col">
+                    <div class="bg-primary-300 rounded text-black m-2 p-2 flex flex-col">
                         <h3 class="text-2xl font-bold text-center">{{ meteo.city.name }}</h3>
                         <div class="flex">
                             <div class="flex flex-col justify-end">

resources/js/views/ToDoLists/ToDo.vue

@@ -11,7 +11,7 @@
         <input type="text"
                v-model="toDo.data.attributes.data.name"
                @keypress.enter="updateToDo"
-               class="flex-1 rounded-sm border border-orange-600 pl-1">
+               class="flex-1 rounded-sm border border-primary-600 pl-1">
         <span @click="edit = !edit">
             <svg-vue icon="close"  class="inline w-4 fill-current cursor-pointer mx-2" />
         </span>

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -23,10 +23,10 @@
                       :to="'/to-do-lists/' + toDoList.data.to_do_list_id"
                       :to-do-list="toDoList"
                       class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" >
-                <div class="bg-orange-300 rounded text-black m-2 p-2">
+                <div class="bg-primary-300 rounded text-black m-2 p-2">
                     <div class="flex justify-between">
                         <span class="font-bold">{{ toDoList.data.attributes.data.name }}</span>
-                        <span class="text-orange-900">
+                        <span class="text-primary-900">
                             {{ toDoList.data.attributes.data.to_dos.to_dos_count_check }} / {{ toDoList.data.attributes.data.to_dos.to_dos_count }}
                         </span>
                     </div>

resources/js/views/ToDoLists/ToDoListShow.vue

@@ -12,7 +12,7 @@
             <router-link to="/to-do-lists/" class="btn-secondary">Back</router-link>
             <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
         </div>
-        <div v-if="!loading" class="bg-orange-400 rounded p-1">
+        <div v-if="!loading" class="bg-primary-400 rounded p-1">
             <h1 class="mb-2 ml-2 todo" >
                 <span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
                     <span @click="listNameEdit = !listNameEdit">

resources/sass/components/_btn.scss

@@ -1,77 +1,10 @@
 // Button
 
-//.btn {
-//    font-size: 1.6rem;
-//    border: 1px solid transparent;
-//    padding: 0.5rem 1rem;
-//    border-radius: 0.5rem;
-//    cursor: pointer;
-//    box-shadow: 1px 1px 2px $grey;
-//    text-decoration: none;
-//    transition: background-color 0.2s, color 0.2s;
-//
-//    &:hover {
-//        transition: background-color 0.2s, color 0.2s;
-//        background-color: $mediumDark;
-//        color: $white;
-//    }
-//}
-//
-//.btn-primary {
-//    @extend .btn;
-//    background-color: $medium;
-//    border-color: $medium;
-//    color: $white;
-//
-//    &:visited,
-//    &:focus {
-//        color: $white;
-//    }
-//}
-//
-//.btn-secondary {
-//    @extend .btn;
-//    background-color: $mediumLight;
-//    border-color: $mediumLight;
-//    color: $dark;
-//}
-//
-//.btn-alert {
-//    @extend .btn;
-//    background-color: $error;
-//    border-color: $error;
-//    color: $white;
-//
-//    &:hover {
-//        background-color: $dark;
-//    }
-//}
-//
-//.btn-icon {
-//    @extend .btn;
-//    display: flex;
-//    align-items: center;
-//    height: 4rem;
-//
-//    &:hover svg {
-//        fill: $white;
-//    }
-//
-//    svg {
-//        height: 3rem;
-//        margin-right: 1rem;
-//
-//        &:hover {
-//            fill: $white;
-//        }
-//    }
-//}
-
 .btn {
-    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
+    @apply border bg-primary-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
 
     &:hover {
-        @apply text-white bg-orange-600 transition-all duration-300;
+        @apply text-white bg-primary-600 transition-all duration-300;
     }
 
     svg {
@@ -81,19 +14,19 @@
 
 .btn-primary {
     @extend .btn;
-    @apply bg-orange-600;
+    @apply bg-primary-600;
 
     &:hover {
-        @apply bg-orange-800;
+        @apply bg-primary-800;
     }
 }
 
 .btn-secondary {
     @extend .btn;
-    @apply bg-orange-600;
+    @apply bg-primary-600;
 
     &:hover {
-        @apply bg-orange-800;
+        @apply bg-primary-800;
     }
 }
 

resources/sass/components/_elements.scss

@@ -20,15 +20,38 @@
     max-height: 16rem;
 }
 
+@for $i from 1 through 9 {
+
+    .bg-primary-#{$i}00 {
+        @apply bg-green-#{$i}00;
+    }
+
+    .hover:bg-primary-#{$i}00 {
+        @apply bg-green-#{$i}00;
+    }
+
+    .bg-secondary-#{$i}00 {
+        @apply bg-blue-#{$i}00;
+    }
+
+    .text-primary-#{$i}00 {
+        @apply text-gray-#{$i}00;
+    }
+
+    .hover:text-primary-#{$i}00 {
+        @apply text-gray-#{$i}00;
+    }
+}
+
 .page-title {
-    @apply text-3xl font-bold text-orange-900;
+    @apply text-3xl font-bold text-primary-900;
 }
 
 a {
-    @apply text-orange-700;
+    @apply text-primary-700;
 
     &:hover {
-        @apply text-orange-900;
+        @apply text-primary-900;
     }
 }
 
@@ -50,10 +73,10 @@ a {
     @apply shadow;
 
     &-header {
-        @apply flex justify-between items-center px-4 py-2 rounded bg-orange-400 font-bold cursor-pointer;
+        @apply flex justify-between items-center px-4 py-2 rounded bg-primary-400 font-bold cursor-pointer;
 
         svg {
-            @apply w-8 text-orange-600 fill-current;
+            @apply w-8 text-primary-600 fill-current;
         }
     }
 
@@ -73,7 +96,7 @@ a {
 }
 
 .card {
-    @apply bg-orange-300 rounded;
+    @apply bg-primary-300 rounded;
 
     svg {
         @apply max-w-full max-h-64 m-auto fill-current;
@@ -84,10 +107,10 @@ a {
     }
 
     &:hover {
-        @apply bg-orange-500;
+        @apply bg-primary-500;
 
         h2 {
-            @apply text-orange-700;
+            @apply text-primary-700;
         }
     }
 }

resources/sass/components/alert_box.scss

@@ -1,21 +0,0 @@
-.alert-box {
-    border: 1px solid $medium;
-    color: $medium;
-    font-weight: bold;
-    border-radius: 3px;
-
-}
-
-.alert-success {
-    @extend .alert-box;
-    border-color: $success;
-    background-color: $success;
-    color: $white;
-}
-
-.alert-error {
-    @extend .alert-box;
-    border-color: $error;
-    background-color: $error;
-    color: $white;
-}

resources/sass/components/avatar.scss

@@ -1,35 +0,0 @@
-.avatar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: $dark;
-    border-radius: 50%;
-    color: $light;
-    font-weight: bold;
-    text-decoration: none;
-
-    &-small {
-        $size: 3rem;
-        width: $size;
-        height: $size;
-        font-size: $size *2/3;
-    }
-
-    &-medium {
-        $size: 5rem;
-        width: $size;
-        height: $size;
-        font-size: $size *2/3;
-    }
-
-    &-large {
-        $size: 8rem;
-        width: $size;
-        height: $size;
-        font-size: $size *2/3;
-    }
-}
-
-.avatar-box {
-    text-decoration: none;
-}

resources/sass/components/events.scss

@@ -1,7 +0,0 @@
-.text-alert {
-    color: $error;
-}
-
-.error-field {
-    border-color: $error;
-}

resources/sass/components/images.scss

@@ -1,14 +0,0 @@
-.cover {
-    width: 100%;
-    //height: 100%;
-    object-fit: cover;
-    object-position: 50% 50%;
-}
-
-.profile {
-    width: 20rem;
-    height: 20rem;
-    border-radius: 50%;
-    left: 3rem;
-    bottom: -3rem;
-}

resources/sass/components/loader.scss

@@ -1,5 +0,0 @@
-.loader {
-    margin-top: 25vh;
-    stroke: $dark;
-    width: 10rem;
-}

resources/sass/components/main.scss

@@ -1,10 +0,0 @@
-body {
-    overflow: hidden;
-    height: 100vh;
-}
-
-main {
-    overflow: auto;
-    width: 100%;
-    height: calc(100vh - 4.5rem);
-}

resources/sass/components/modal.scss

@@ -1,25 +0,0 @@
-$modal-duration: 1s;
-
-.modal-container {
-    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
-}
-
-.modal {
-    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 400px;
-    animation-name: modalopen;
-    animation-duration: $modal-duration;
-}
-
-@keyframes modalopen {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}

resources/sass/components/nav.scss

@@ -1,117 +1,14 @@
 
-//nav {
-//    background-color: $mediumDark;
-//    height: 100vh;
-//    width: 15rem;
-//    flex-shrink: 0;
-//    display: flex;
-//    flex-direction: column;
-//    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
-//    transition: width $transition-delay;
-//
-//    &.small {
-//        width: 5.5rem;
-//    }
-//
-//    hr {
-//        width: 90%;
-//        border-radius: 1px;
-//        border: 1px solid $dark;
-//    }
-//
-//    .nav-item {
-//        display: flex;
-//        align-items: center;
-//        text-decoration: none;
-//        color: $light;
-//        padding-top: 1rem;
-//        padding-bottom: 1rem;
-//
-//        span {
-//            overflow: hidden;
-//        }
-//
-//        svg {
-//            margin: 0 1rem;
-//            width: 3rem;
-//            transition: fill 0.2s;
-//            fill: $light;
-//        }
-//
-//        &:hover {
-//            color: $dark;
-//            background-color: $light;
-//            transition: color 0.2s, background-color 0.2s;
-//
-//            svg {
-//                fill: $dark;
-//                transition: fill 0.2s;
-//            }
-//        }
-//
-//        //&:visited {
-//        //    color: $dark;
-//        //}
-//    }
-//}
-//
-//.site-logo {
-//    width: 3rem;
-//    fill: $light;
-//    transition: fill 0.2s;
-//
-//    &:hover {
-//        fill: $dark;
-//        transition: fill 0.2s;
-//    }
-//}
-//
-//.navhidden {
-//    width: 0;
-//}
-//
-//
-//.site-logo-main {
-//    @extend .site-logo;
-//    display: block;
-//    margin: 1rem;
-//    width: 13rem;
-//    transition: width $transition-delay;
-//
-//    svg {
-//
-//        width: 100%;
-//    }
-//
-//    &.small {
-//        //padding-bottom: 10rem;
-//        width: 3.5rem;
-//    }
-//}
-//
-//.nav-toggle {
-//    @extend .site-logo;
-//    align-self: center;
-//
-//    svg {
-//        transition: transform $transition-delay;
-//    }
-//
-//    svg.small {
-//            transform: rotate(-180deg);
-//    }
-//}
-
 nav {
     @apply w-48;
     transition: width 0.3s;
 
     svg {
-        @apply fill-current text-orange-600 w-12 p-2;
+        @apply fill-current text-primary-600 w-12 p-2;
         transition: color 0.3s;
 
         &:hover {
-            @apply text-orange-800;
+            @apply text-primary-800;
         }
     }
 
@@ -133,16 +30,16 @@ nav {
             transition: width 0.3s;
 
             &:hover {
-                @apply text-orange-800;
+                @apply text-primary-800;
             }
         }
 
         &:hover {
-            @apply bg-orange-500;
+            @apply bg-primary-500;
 
             span,
             svg {
-                @apply text-orange-800;
+                @apply text-primary-800;
             }
         }
     }

resources/sass/components/search_box.scss

@@ -1,14 +0,0 @@
-.search-box {
-    display: flex;
-    align-items: center;
-
-    button {
-        background: none;
-        border: none;
-        cursor: pointer;
-    }
-
-    svg {
-        width: 2.4rem;
-    }
-}

resources/sass/components/topbar.scss

@@ -1,16 +0,0 @@
-.topbar {
-    background-color: $medium;
-    width: initial;
-    box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
-
-    svg {
-        width: 3rem;
-        fill: $light;
-        transition: fill 0.2s;
-
-        &:hover {
-            fill: $dark;
-            transition: fill 0.2s;
-        }
-    }
-}

resources/sass/pages/auth.scss

@@ -1,24 +0,0 @@
-// Auth box
-
-.auth {
-    max-width: 350px;
-    width: 100%;
-    background-color: $light;
-    margin: 3rem auto;
-    border-radius: 1rem;
-    box-shadow: 1px 1px 2px $grey;
-
-    .title-page {
-        font-size: 2.4rem;
-        font-weight: bold;
-        text-align: center;
-        color: $fontTitle;
-    }
-}
-
-.logo {
-    text-align: center;
-    font-size: 2.8rem;
-    color: $dark;
-    font-weight: bold;
-}

resources/sass/pages/games.scss

@@ -1,5 +0,0 @@
-
-.card {
-
-
-}

resources/sass/pages/meteo.scss

@@ -1,11 +0,0 @@
-.meteo {
-    width: 25rem;
-
-    &-date {
-        font-size: 1.2rem;
-    }
-
-    .owf {
-        color: $mediumDark;
-    }
-}

resources/sass/pages/users.scss

@@ -1,8 +0,0 @@
-.profile-title {
-    position: relative;
-    color: $white;
-    z-index: 2;
-    padding-bottom: 2rem;
-    left: 25rem;
-    text-shadow: 1px 1px 2px $dark;
-}

resources/sass/setup/_colors.scss

@@ -1,25 +0,0 @@
-// Colors
-
-$white: #ffffff;
-$black: #1a1a1a;
-$grey: grey;
-$greyLight: #eeeeee;
-
-
-
-$dark: #1F2605;
-$mediumDark: #1F6521;
-$medium: #53900F;
-$mediumLight: #A4A71E;
-$light: #D6CE15;
-
-
-$primary: $mediumDark;
-$secondary: #000;
-$interactive: #000;
-$success: green;
-$error: red;
-$disabled: #000;
-
-$font: $black;
-$fontTitle: $dark;

resources/sass/setup/_containers.scss

@@ -1,81 +0,0 @@
-.container-cards-list {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-gap: 10px;
-    grid-auto-rows: minmax(100px, auto);
-}
-
-.card {
-    background-color: $light;
-    display: flex;
-    //padding: 1rem;
-    box-shadow: 1px 1px 2px $grey;
-    border-radius: 2px;
-    text-decoration: none;
-    flex-direction: column;
-    justify-content: space-between;
-    cursor: pointer;
-
-    img,
-    svg {
-        max-height: 15rem;
-    }
-}
-
-
-.bg-b {
-    background-color: royalblue;
-}
-
-@media (max-width: 1200px) {
-    .container-cards-list {
-        grid-template-columns: repeat(3, 1fr);
-
-    }
-}
-
-@media (max-width: 800px) {
-    .container-cards-list {
-        grid-template-columns: repeat(2, 1fr);
-
-    }
-}
-
-@media (max-width: 500px) {
-    .container-cards-list {
-        grid-template-columns: repeat(1, 1fr);
-
-    }
-}
-
-
-.box-toggle {
-    box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
-
-    &-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: $light;
-        padding: 0.5rem 1rem;
-        border-radius: 0.2rem;
-        cursor: pointer;
-
-        svg {
-            width: 2rem;
-        }
-    }
-
-    svg {
-        transform: rotate(270deg);
-        transition: transform 0.3s;
-
-        &.open {
-            transform: rotate(90deg);
-        }
-    }
-
-    &-content {
-        padding: 0.5rem 1rem;
-    }
-}

resources/sass/setup/_effects.scss

@@ -1 +0,0 @@
-$transition-delay: 0.2s;

resources/sass/setup/_fonts.scss

@@ -1,15 +0,0 @@
-// Fonts
-@import url('https://fonts.googleapis.com/css?family=Open+Sans');
-
-$fontMain: 'Open Sans', sans-serif;
-
-html {
-    font-size: 62.5%;
-}
-
-body {
-    font-family: $fontMain;
-    font-size: 1.6rem;
-    color: $font;
-}
-

resources/sass/setup/_positions.scss

@@ -1,164 +0,0 @@
-// Positions
-
-$base: 1rem;
-
-.relative {
-    position: relative;
-}
-
-.absolute {
-    position: absolute;
-}
-
-.block {
-    display: block;
-}
-
-.inline {
-    display: inline;
-}
-
-.flex {
-    display: flex;
-}
-
-.flex-col {
-    display: flex;
-    flex-direction: column;
-}
-
-.flex-center {
-    display: flex;
-    justify-content: center;
-}
-
-.flex-middle {
-    display: flex;
-    align-items: center;
-}
-
-.flex-end {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.flex-between {
-    display: flex;
-    justify-content: space-between;
-}
-
-.flex-shrink {
-    flex-shrink: 0;
-}
-
-.w-100{
-    width: 100%;
-}
-
-.h-100{
-    height: 100%;
-}
-
-.m-auto {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.p-auto {
-    padding-left: auto;
-    padding-right: auto;
-}
-
-@for $i from 0 through 5 {
-    .flex-#{$i} {
-        flex: $i;
-    }
-
-    .m-#{$i} {
-        margin: $i * $base;
-    }
-
-    .mx-#{$i} {
-        margin-left: $i * $base;
-        margin-right: $i * $base;
-    }
-
-    .my-#{$i} {
-        margin-top: $i * $base;
-        margin-bottom: $i * $base;
-    }
-
-    .mt-#{$i} {
-        margin-top: $i * $base;
-    }
-
-    .ml-#{$i} {
-        margin-left: $i * $base;
-    }
-
-    .mr-#{$i} {
-        margin-right: $i * $base;
-    }
-
-    .mb-#{$i} {
-        margin-bottom: $i * $base;
-    }
-
-    .p-#{$i} {
-        padding: $i * $base;
-    }
-
-    .px-#{$i} {
-        padding-left: $i * $base;
-        padding-right: $i * $base;
-    }
-
-    .py-#{$i} {
-        padding-top: $i * $base;
-        padding-bottom: $i * $base;
-    }
-
-    .pt-#{$i} {
-        padding-top: $i * $base;
-    }
-
-    .pl-#{$i} {
-        padding-left: $i * $base;
-    }
-
-    .pb-#{$i} {
-        padding-bottom: $i * $base;
-    }
-}
-
-.t-0 {
-    top: 0;
-}
-
-.l-0 {
-    left: 0;
-}
-
-.r-0 {
-    right: 0;
-}
-
-.b-0 {
-    bottom: 0;
-}
-
-.z-10 {
-    z-index: 10;
-}
-
-.text-left {
-    text-align: left;
-}
-
-.text-right {
-    text-align: right;
-}
-
-.text-center {
-    text-align: center;
-}

resources/sass/setup/_reset.scss

@@ -1,25 +0,0 @@
-// Reset
-
-body {
-    margin: 0;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-@for $i from 1 through 6 {
-    h#{$i} {
-        margin: 0;
-    }
-}
-
-ul {
-    margin-top:0;
-    margin-bottom: 0;
-    padding-left: 0;
-
-    li {
-        list-style: none;
-    }
-}