improved window tiling

resources/css/style.css

@@ -7,12 +7,21 @@ html{
 }
 body{
   min-height: 100%;  
+  background: #c6dbd2;
 }
 
-#plan{
-	background: #c6dbd2;
+#plan,
+.window{
 	height: 100%;
 	width: 100%;
+	overflow: auto;
+	position: absolute;
+}
+
+.window{
+	bottom: 0;
+	right: 0;
+	background: white;
 }
 
 .tile{
@@ -69,7 +78,7 @@ svg circle{
 	position: fixed;
 	width: 100%;
 	height: 30px;
-	bottom: 0px;
+	bottom: 20px;
 }
 
 .menu > div{
@@ -95,8 +104,9 @@ svg circle{
 .menu > div > .list{
 	position: fixed;
 	height: 30px;
-	bottom: 30px;
+	bottom: 50px;
 	width: 100%;
+	z-index: 10;
 }
 
 .menu > div > .list > *{
@@ -119,32 +129,29 @@ svg circle{
 	z-index: 100;
 }
 
-.window{
-	position: fixed;
-	top: 50%;
-	bottom: 10px;
-	left: 10px;
-	right: 10px;
-	background: #ecffa2;
-	padding: 5px;
-	overflow: scroll;
-}
-
 h2{
 	margin: 0 0 10px;
 	text-align: center;
 	background: #627fda;
 }
 
+.swapbtn,
 .closebtn{
 	position: absolute;
-	right: 10px;
 	top: 10px;
 	font-size: 30px;
 	background: red;
 	color: white;
 }
 
+.closebtn{
+	right: 10px;	
+}
+
+.swapbtn{
+	right: 50px;
+}
+
 #Eraser polygon{
 	stroke: red;
 }