diff --git a/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/ie.scssc b/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/ie.scssc
new file mode 100644
index 0000000..d7db457
Binary files /dev/null and b/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/ie.scssc differ
diff --git a/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/print.scssc b/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/print.scssc
new file mode 100644
index 0000000..dec6de4
Binary files /dev/null and b/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/print.scssc differ
diff --git a/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/screen.scssc b/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/screen.scssc
new file mode 100644
index 0000000..ba1d940
Binary files /dev/null and b/.sass-cache/28459e2891c35b9c59b26c43012db5357f210683/screen.scssc differ
diff --git a/.sass-cache/7cca6204cdd4858469099b88b5649792007c57b5/_utilities.scssc b/.sass-cache/7cca6204cdd4858469099b88b5649792007c57b5/_utilities.scssc
new file mode 100644
index 0000000..4040348
Binary files /dev/null and b/.sass-cache/7cca6204cdd4858469099b88b5649792007c57b5/_utilities.scssc differ
diff --git a/.sass-cache/8f647c6b4f0f43011051d78bd92bd10caa6adaf9/_reset.scssc b/.sass-cache/8f647c6b4f0f43011051d78bd92bd10caa6adaf9/_reset.scssc
new file mode 100644
index 0000000..22d6a39
Binary files /dev/null and b/.sass-cache/8f647c6b4f0f43011051d78bd92bd10caa6adaf9/_reset.scssc differ
diff --git a/config.rb b/config.rb
new file mode 100644
index 0000000..f4666b4
--- /dev/null
+++ b/config.rb
@@ -0,0 +1,25 @@
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "img"
+javascripts_dir = "js"
+fonts_dir = "fonts"
+
+output_style = :expanded
+line_comments = false
+color_output = false  
+
+require 'fileutils'
+on_stylesheet_saved do |file|
+  if file.match('.min') == nil
+    require 'compass'
+    require 'susy' 
+
+    Compass.add_configuration(
+        {
+            :output_style => :compressed
+        },
+        'min'
+    )
+    Compass.compiler.compile('scss/screen.scss', 'css/screen.min.css')
+  end
+end
diff --git a/css/inc/general.css b/css/inc/general.css
new file mode 100644
index 0000000..9c5a1cb
--- /dev/null
+++ b/css/inc/general.css
@@ -0,0 +1,68 @@
+/*
+Error: Undefined variable: "$bg".
+        on line 2 of /Users/tuc/Desktop/CSS_NAV/scss/inc/general.scss
+
+1: body {
+2:     background: $bg;
+3:     font: 150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+4: }
+5: 
+6: .wrapper {
+7:     max-width: $wrapper;
+
+Backtrace:
+/Users/tuc/Desktop/CSS_NAV/scss/inc/general.scss:2
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/script/tree/variable.rb:49:in `_perform'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/script/tree/node.rb:58:in `perform'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:398:in `visit_prop'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `block in visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `block in with_base'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:115:in `with_frame'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `with_base'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:434:in `block (2 levels) in visit_rule'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:434:in `map'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:434:in `block in visit_rule'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:183:in `with_environment'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:432:in `visit_rule'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `block in visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `block in with_base'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:115:in `with_frame'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/stack.rb:79:in `with_base'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:162:in `visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:in `map'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:52:in `visit_children'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:171:in `block in visit_children'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:183:in `with_environment'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:170:in `visit_children'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `block in visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:190:in `visit_root'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/base.rb:36:in `visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:161:in `visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/visitors/perform.rb:10:in `visit'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/root_node.rb:36:in `css_tree'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/tree/root_node.rb:20:in `render'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/engine.rb:284:in `render'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:494:in `update_stylesheet'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `each'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
+/Library/Ruby/Gems/2.3.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:294:in `watch'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/sass_compiler.rb:46:in `watch!'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/commands/watch_project.rb:41:in `perform'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/commands/base.rb:18:in `execute'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/commands/project_base.rb:19:in `execute'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/lib/compass/exec/sub_command_ui.rb:15:in `run!'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/bin/compass:30:in `block in <top (required)>'
+/Library/Ruby/Gems/2.3.0/gems/compass-1.0.3/bin/compass:44:in `<top (required)>'
+/usr/local/bin/compass:22:in `load'
+/usr/local/bin/compass:22:in `<main>'
+*/
+body:before {
+  white-space: pre;
+  font-family: monospace;
+  content: "Error: Undefined variable: \"$bg\".\A         on line 2 of /Users/tuc/Desktop/CSS_NAV/scss/inc/general.scss\A \A 1: body {\A 2:     background: $bg;\A 3:     font: 150% \"Roboto\", \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, Verdana, sans-serif;\A 4: }\A 5: \A 6: .wrapper {\A 7:     max-width: $wrapper;"; }
diff --git a/css/screen.css b/css/screen.css
new file mode 100644
index 0000000..023cbb9
--- /dev/null
+++ b/css/screen.css
@@ -0,0 +1,157 @@
+/* NETSESSION SCSS
+ * generate /css/screen.css
+ * and a file /css/screen.min.css
+ * have fun
+ */
+/*RESET*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+html {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+q, blockquote {
+  quotes: none;
+}
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+a img {
+  border: none;
+}
+
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block;
+}
+
+/*General*/
+body {
+  background: #FAFAFA;
+  font: 150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+}
+
+.wrapper {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 2.8em;
+  line-height: 1.6em;
+}
+@media (max-width: 960px) {
+  h1 {
+    font-size: 1.6em;
+    line-height: 1em;
+  }
+}
+
+/*NAVIGATION*/
+nav ul ul {
+  display: none;
+}
+nav ul ul li {
+  float: none;
+}
+nav li {
+  float: left;
+}
+nav li a {
+  text-decoration: none;
+  display: inline-block;
+  margin: 10px 20px 5px 0;
+  padding: 8px 10px;
+}
+nav li a:link, nav li a:visited {
+  color: #646565;
+  background: #e8e9eb;
+}
+nav li a:link:hover, nav li a:visited:hover {
+  color: black;
+}
+nav li:hover ul {
+  display: block;
+  position: absolute;
+}
+
+input.toggle,
+label.toggle {
+  display: none;
+}
+
+label.toggle {
+  font-weight: 900;
+  font-size: 1.2em;
+  padding: 10px 20px;
+}
+
+@media (max-width: 960px) {
+  nav {
+    display: none;
+  }
+
+  input.toggle,
+  .toggle span {
+    display: none;
+  }
+
+  input[type=checkbox]:checked ~ nav,
+  label.toggle {
+    display: block;
+    cursor: pointer;
+  }
+
+  nav li {
+    float: none;
+  }
+  nav li:hover ul {
+    display: block;
+    position: relative;
+  }
+  nav li ul {
+    display: block;
+  }
+  nav li ul li {
+    margin-left: 20px;
+  }
+  nav li a {
+    display: block;
+    margin-left: 20px;
+  }
+}
diff --git a/css/screen.min.css b/css/screen.min.css
new file mode 100644
index 0000000..fae9274
--- /dev/null
+++ b/css/screen.min.css
@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}body{background:#FAFAFA;font:150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif}.wrapper{max-width:960px;margin:0 auto}h1{font-size:2.8em;line-height:1.6em}@media (max-width: 960px){h1{font-size:1.6em;line-height:1em}}nav ul ul{display:none}nav ul ul li{float:none}nav li{float:left}nav li a{text-decoration:none;display:inline-block;margin:10px 20px 5px 0;padding:8px 10px}nav li a:link,nav li a:visited{color:#646565;background:#e8e9eb}nav li a:link:hover,nav li a:visited:hover{color:black}nav li:hover ul{display:block;position:absolute}input.toggle,label.toggle{display:none}label.toggle{font-weight:900;font-size:1.2em;padding:10px 20px}@media (max-width: 960px){nav{display:none}input.toggle,.toggle span{display:none}input[type=checkbox]:checked ~ nav,label.toggle{display:block;cursor:pointer}nav li{float:none}nav li:hover ul{display:block;position:relative}nav li ul{display:block}nav li ul li{margin-left:20px}nav li a{display:block;margin-left:20px}}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a4f1d2c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="utf-8">
+    <title>Pure CSS Navigation</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="css/screen.min.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header>
+            <h1>Navigation</h1>
+        </header>
+        <label class="toggle" for="toggle">&#9776; <span>Menue</span></label>
+        <input class="toggle" id="toggle" type="checkbox">
+        <nav>
+            <ul>
+                <li class="current"><a href="#">Home</a></li>
+                <li><a href="#">Arbeiten</a></li>
+                <li><a href="#">Service</a></li>
+                <li class="has_children"><a href="#">Labor</a>
+                    <ul>
+                        <li><a href="#">Builder</a></li>
+                        <li><a href="#">Snippets</a></li>
+                        <li><a href="#">Scripts</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Kontakt</a></li>
+            </ul>
+        </nav>
+    </div>
+</body>
+
+</html>
diff --git a/scss/inc/_navigation.scss b/scss/inc/_navigation.scss
new file mode 100644
index 0000000..ceb5a6e
--- /dev/null
+++ b/scss/inc/_navigation.scss
@@ -0,0 +1,75 @@
+nav {
+    ul {
+        ul {
+            //second nav
+            display: none;
+            li {
+                float: none;
+            }
+        }
+    }
+    li {
+        float: left;
+        a {
+            text-decoration: none;
+            display: inline-block;
+            margin: 10px 20px 5px 0;
+            padding: 8px 10px;
+            &:link,
+            &:visited {
+                color: $dunkelgrau;
+                background: $hellgrau;
+                &:hover {
+                    color: black;
+                }
+            }
+        }
+        &:hover ul {
+            display: block;
+            position: absolute;
+        }
+    }
+}
+
+input.toggle,
+label.toggle {
+    display: none;
+}
+
+label.toggle {
+    font-weight: 900;
+    font-size: 1.2em;
+    padding: 10px 20px;
+}
+
+@media (max-width: $wrapper) {
+    nav {
+        display: none;
+    }
+    input.toggle,
+    .toggle span {
+        display: none;
+    }
+    input[type=checkbox]:checked ~ nav,
+    label.toggle {
+        display: block;
+        cursor: pointer;
+    }
+    nav li {
+        float: none;
+        &:hover ul {
+            display: block;
+            position: relative;
+        }
+        ul {
+            display: block;
+            li {
+                margin-left: 20px;
+            }
+        }
+        a {
+            display: block;
+            margin-left: 20px;
+        }
+    }
+}
diff --git a/scss/inc/_variables.scss b/scss/inc/_variables.scss
new file mode 100644
index 0000000..5816b01
--- /dev/null
+++ b/scss/inc/_variables.scss
@@ -0,0 +1,6 @@
+$wrapper: 960px;
+$weiss: #ffffff;
+$bg: #FAFAFA;
+$hellgrau: #e8e9eb;
+$grau: #a3a6ac;
+$dunkelgrau: #646565;
diff --git a/scss/inc/general.scss b/scss/inc/general.scss
new file mode 100644
index 0000000..094d09f
--- /dev/null
+++ b/scss/inc/general.scss
@@ -0,0 +1,18 @@
+body {
+    background: $bg;
+    font: 150% "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
+}
+
+.wrapper {
+    max-width: $wrapper;
+    margin: 0 auto;
+}
+
+h1 {
+    font-size: 2.8em;
+    line-height: 1.6em;
+    @media (max-width: $wrapper) {
+        font-size: 1.6em;
+        line-height: 1em;
+    }
+}
diff --git a/scss/screen.scss b/scss/screen.scss
new file mode 100644
index 0000000..c4d3b62
--- /dev/null
+++ b/scss/screen.scss
@@ -0,0 +1,13 @@
+/* NETSESSION SCSS
+ * generate /css/screen.css
+ * and a file /css/screen.min.css
+ * have fun
+ */
+@import "inc/variables";
+/*RESET*/
+@import "compass/reset";
+/*General*/
+@import "inc/general";
+/*NAVIGATION*/
+@import "inc/navigation";
+