Add files via upload
diff --git a/css/dialog.css b/css/dialog.css
index 723795d..313ec29 100644
--- a/css/dialog.css
+++ b/css/dialog.css
@@ -1,3 +1,5 @@
+/* ********** HERE STARTS dialog.css ****** */

+

 #dialog {

 	position: absolute;

 	top: 0px;

diff --git a/css/general.css b/css/general.css
index 4db942e..eda32ac 100644
--- a/css/general.css
+++ b/css/general.css
@@ -1,11 +1,13 @@
-html, body {
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #060606;
-	color: white;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	user-select: none !important;
-	font-family: 'Roboto';
-}
-
+/* ********** HERE STARTS general.css ****** */

+

+html, body {

+	margin: 0;

+	width: 100%;

+	height: 100%;

+	background-color: #060606;

+	color: white;

+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

+	user-select: none !important;

+	font-family: 'Roboto';

+}

+

diff --git a/css/graf.css b/css/graf.css
index 62a67af..de6a5a6 100644
--- a/css/graf.css
+++ b/css/graf.css
@@ -1,3 +1,5 @@
+/* ********** HERE STARTS graf.css ****** */

+

 #graf {

 	width: 100%;

 	height: 100%;

diff --git a/css/option-buttons.css b/css/option-buttons.css
index a7c4fa0..f23168b 100644
--- a/css/option-buttons.css
+++ b/css/option-buttons.css
@@ -1,3 +1,4 @@
+/* ********** HERE STARTS search-bar.css ****** */

 #circle-mode {

 	position: absolute;

 	right: 10px;

@@ -31,4 +32,12 @@
 	right: 10px;

 	bottom: 10px;

 	z-index: 100;

+}

+

+#zoomin.touch {

+	display: none;

+}

+

+#zoomout.touch {

+	display: none;

 }
\ No newline at end of file
diff --git a/css/search-bar.css b/css/search-bar.css
index 8c9cc84..46d121e 100644
--- a/css/search-bar.css
+++ b/css/search-bar.css
@@ -1,3 +1,4 @@
+/* ********** HERE STARTS search-bar.css ****** */

 .md-google-search__metacontainer {

 	position: absolute;

 	top: 10px;

diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..5ce5330
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,302 @@
+/* ********** HERE STARTS general.css ****** */

+

+html, body {

+	margin: 0;

+	width: 100%;

+	height: 100%;

+	background-color: #060606;

+	color: white;

+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

+	user-select: none !important;

+	font-family: 'Roboto';

+}

+

+

+/* ********** HERE STARTS graf.css ****** */

+

+#graf {

+	width: 100%;

+	height: 100%;

+}

+

+span {

+	position: relative;

+	z-index: -1;

+}

+

+

+/* ********** HERE STARTS dialog.css ****** */

+

+#dialog {

+	position: absolute;

+	top: 0px;

+	left: 0px;

+	width: 300px;

+	height: 100%;

+	background-color: white;

+	color: black;

+	z-index: 120;

+	overflow-y: auto;

+}

+

+#backdrop {

+	display: none;

+	position: absolute;

+	top: 0;

+	left: 0;

+	width: 100%;

+	height: 100%;

+	background-color: rgba(0, 0, 0, .5);

+	z-index: 110;

+}

+

+#dialog-vertex, #dialog-edge {

+	padding: 8px;

+	user-select: auto;

+}

+

+#dialog h2 {

+	font-weight: bold;

+	font-size: 20px;

+}

+

+#dialog h3 {

+	font-weight: bold;

+	font-size: 16px;

+	margin-bottom: 0;

+}

+

+#quit-dialog, #quit2-dialog {

+	position: absolute;

+	top: 8px;

+	right: 8px;

+}

+

+#min-dialog, #max-dialog {

+	position: absolute;

+	top: 8px;

+	right: 48px;

+}

+

+#min-dialog {

+	display: none;

+}

+

+#summary-dialog {

+	position: absolute;

+	top: 0px;

+	left: 0px;

+	width: 100%;

+	height: 100px;

+	background-color: white;

+	color: black;

+	z-index: 120;

+}

+

+#summary-vertex {

+	padding: 8px;

+	user-select: auto;

+}

+

+#summary-dialog h2 {

+	font-weight: bold;

+	font-size: 20px;

+	margin: 0;

+}

+

+/* ********** HERE STARTS search-bar.css ****** */

+#circle-mode {

+	position: absolute;

+	right: 10px;

+	bottom: 210px;

+	z-index: 100;

+}

+

+#settings {

+	position: absolute;

+	right: 10px;

+	bottom: 160px;

+	z-index: 100;

+}

+

+#search {

+	position: absolute;

+	right: 10px;

+	bottom: 110px;

+	z-index: 100;

+}

+

+#zoomin {

+	position: absolute;

+	right: 10px;

+	bottom: 60px;

+	z-index: 100;

+}

+

+#zoomout {

+	position: absolute;

+	right: 10px;

+	bottom: 10px;

+	z-index: 100;

+}

+

+#zoomin.touch {

+	display: none;

+}

+

+#zoomout.touch {

+	display: none;

+}

+

+/* ********** HERE STARTS year-list.css ****** */

+#year-list {

+	padding: 10px;

+	padding-top: 0px;

+	float: right;

+	position:relative;

+	z-index:10;

+	display:none

+}

+

+#year-list-span {

+	position:relative;

+	z-index:10;

+}

+

+

+/* ********** HERE STARTS search-bar.css ****** */

+.md-google-search__metacontainer {

+	position: absolute;

+	top: 10px;

+	height: 48px;

+	width: 100%;

+	z-index: 100;

+}

+

+.md-google-search__container {

+	display: block;

+	margin-left: auto;

+	margin-right: auto;

+	height: 48px;

+	width: Calc(100% - 66px);

+	max-width: 720px;

+	white-space: nowrap;

+}

+

+.md-google-search {

+	height: 48px;

+	background-color: rgba(245, 245, 245, 1);

+	border: 1px solid rgba(0, 0, 0, 0);

+	-webkit-border-radius: 4px;

+	border-radius: 4px;

+	max-width: 720px;

+	position: relative;

+	-webkit-transition: background-color 100ms ease-in, width 100ms ease-out;

+	transition: background-color 100ms ease-in, width 100ms ease-out;

+}

+

+.md-google-search:focus-within {

+	border: 1px solid rgba(0, 0, 0, 0.45);

+	background-color: rgba(255, 255, 255, 1);

+	-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, .5);

+	box-shadow: 0 1px 1px rgba(255, 255, 255, .5);

+}

+

+.md-google-search__search-btn {

+	float: left;

+	background: none;

+	border: none;

+	opacity: .54;

+	outline: none;

+	padding: 0 4px;

+	line-height: 0;

+	color: #212121;

+}

+

+.md-google-search__search-btn svg, .md-google-search__empty-btn svg {

+	padding: 7px;

+	margin: 4px;

+}

+

+.md-google-search__field-container {

+	height: 46px;

+	padding: 0 11px;

+	margin-right: 48px;

+}

+

+.md-google-search__field {

+	border: none;

+	font: normal 16px Roboto, sans-serif;

+	height: 24px;

+	outline: none;

+	padding: 11px 0 11px 16px;

+	width: 100%;

+	background: transparent;

+}

+

+.md-google-search__empty-btn {

+	position: absolute;

+	right: 0;

+	top: 0;

+	background: none;

+	border: none;

+	opacity: .54;

+	outline: none;

+	padding: 0 4px;

+	line-height: 0;

+	color: #212121;

+	cursor: pointer;

+}

+

+/**

+  * Search Box Autocomplete

+  */

+.autocomplete-container {

+	z-index: 110;

+	position: absolute;

+	top: 60px;

+	width: 100%;

+}

+

+.autocomplete-items {

+	display: block;

+	margin-left: auto;

+	margin-right: auto;

+	width: Calc(100% - 66px);

+	max-width: 720px;

+	background-color: white;

+	color: black;

+	box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.258824), 0 2px 10px 0

+		rgba(255, 255, 255, 0.156863) !important;

+}

+

+.autocomplete-item {

+	font-size: 16px;

+	padding: 12px 14px;

+	cursor: pointer;

+}

+

+.autocomplete-item:hover, .autocomplete-active {

+	background: #eee;

+}

+

+.autocomplete-year {

+	position: relative;

+	z-index: 120;

+	

+	color: #222;

+}

+

+@media ( max-width : 700px) {

+	#dialog {

+		width: Calc(100% - 32px) !important;

+		height: Calc(100% - 32px) !important;

+		margin: 16px;

+	}

+	#backdrop {

+		display: block;

+	}

+	#min-dialog {

+		display: block !important;

+	}

+}
\ No newline at end of file
diff --git a/css/year-list.css b/css/year-list.css
index 4436d42..45993b2 100644
--- a/css/year-list.css
+++ b/css/year-list.css
@@ -1,6 +1,7 @@
+/* ********** HERE STARTS year-list.css ****** */

 #year-list {

 	padding: 10px;

-	padding-top: 70px;

+	padding-top: 0px;

 	float: right;

 	position:relative;

 	z-index:10;