Master

css/beer.css

@@ -5,37 +5,12 @@
     margin-left: 150px;
     margin-right: 150px;
 }
-#leftSide {
-    /*position: relative;*/
-    float: left;
-    margin-bottom: 20px;
-}
 span {
     width: 300px;
 }
-#payButton {
-    float: left;
-    width: 64px;
-    height: 40px;
-    background-color: white;
-    border: 5px solid white;
-    border-radius: 5px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    margin-left: 30px;
-}
-
-
-input.search {
-    height: 20px;
-    margin-top: 10px;
-    margin-left: 10px;
-    margin-bottom: 20px;
-}
-#add{
-    background-color: #FFF;
-    border: 0;
-}
 #cost p {
     font-weight: bold;
 }
+#icon {
+    cursor: pointer;
+}

css/beer80s.css

@@ -0,0 +1,54 @@
+#beerContainer {
+    position: relative;
+    height: 600px;
+    margin-top: 200px;
+    margin-left: 150px;
+    margin-right: 150px;
+}
+#leftSide {
+    /*position: relative;*/
+    float: left;
+    margin-bottom: 20px;
+}
+span {
+    width: 300px;
+}
+#payButton {
+    float: left;
+    width: 64px;
+    height: 40px;
+    background-color: white;
+    border: 5px solid white;
+    border-radius: 5px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-left: 45px;
+}
+button.typeButton {
+    cursor: pointer;
+    background-color: white;
+    border: 3px solid white;
+}
+button.typeButton:hover {
+    font-weight: bold;
+    background-color: #26C6B0;
+    color: #D76DA9;
+    border: 3px solid #639BF1;
+}
+input.search {
+    height: 20px;
+    width: 150px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+#add{
+    background-color: #FFF;
+    border: 0;
+}
+#cost p {
+    font-weight: bold;
+}
+#icon {
+    cursor: pointer;
+}

css/index.css

@@ -42,17 +42,23 @@ img.icon_language {
 }*/
 
 #username-wrapper {
-    margin-left: 62px;
+    margin-left: 32px;
     margin-top: 45px;
     align-items: center;
 }
 
 #password-wrapper {
-  margin-left: 63px;
+  margin-left: 32px;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
+#login-btn{
+    display:inline;
+    margin: auto;
+    margin-left: 50px;
+}
+
 /*#password-wrapper {
   margin-left: 30px;
   margin-top: 10px;

css/paypage.css

@@ -1,41 +1,35 @@
-
-
-#leftBox {
-    position: fixed;
-    width: 500px;
-    background-color: #FFFFFF;
+#container {
+    position: relative;
+    width: 2000px;
+    background-color:  #222930;
     border-radius: 8px;
-    margin-top:10px;
-    margin-left: 100px;
+    margin-top: 20px;
     overflow: auto;
-    min-height: 350px;
+
+    min-height: 420px;
+
 }
-/*rightBox is in start.css*/
 #paymentButton{
     width: 200px;
     height: 20px;
     padding: 25px;
-    border-radius: 3px;
     line-height: 1px;
-    background-color: green;
-    /*text style*/
+    background-color: mediumseagreen;
     text-align:center;
-    color: white;
     font-style: italic;
-
-    /*hover*/
-    position: fixed;
+    position: absolute;
     display: inline-block;
     margin-left: 280px;
     margin-top: 280px;
+    opacity: 1;
 }
+
 #cancel{
-    font-family:"Verdana", Verdana, sans-serif ;
-    color: #000000;
-    text-decoration: underline;
-    position: fixed;
-    margin-left:40px;
-    margin-top: 310px;
+  color: #000000;
+  position: absolute;
+  margin-left: 27px;
+  margin-top: 289px;
+  background: salmon;
 }
 
 
@@ -50,14 +44,6 @@
     margin-left: 150px;
 
 }
-/*#part0 {
-    border: 2px solid #a1a1a1;
-    padding: 10px 40px;
-    width: 300px;
-    border-radius: 25px;
-    position: absolute;
-}
-*/
 #credit{
     font-size: 26px;
     line-height: 300%;
@@ -72,7 +58,6 @@
     margin-top: 10px ;
 }
 
-/*common with setting*/
 div#black_wrapper{
 	background-color: rgba(0, 0, 0, 0.7);
 	width: 100%;
@@ -96,6 +81,18 @@ div#confirm_editer{
     box-shadow: 10px 10px 5px black;
 }
 
+#confirm_btn{
+	float: left;
+	margin-left: 50px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+#cancel_btn{
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
 .hidden{
 	visibility: hidden;
 	display: none;

css/settings.css

@@ -27,7 +27,7 @@
     margin: 200px 150px 0px;
 	*/
 	position: relative;
-	float: left;
+	/*float: left;*/
 	margin-bottom: 20px;
 }
 /*
@@ -49,13 +49,6 @@ span {
 	width: 300px;
 }
 
-input.search {
-	height: 20px;
-	margin-top: 10px;
-	margin-left: 10px;
-	margin-bottom: 20px;
-}
-
 div#black_wrapper{
 	background-color: rgba(0, 0, 0, 0.7);
 	width: 100%;
@@ -70,19 +63,20 @@ div#item_editer{
 	left: 25%;
 	padding: 10px;
 	width: 500px;
-	min-height: 450px;
+	/*min-height: 450px;*/
 	text-align: center;
 	background-color: #4EB1BA;
     overflow: auto;
     border: 5px solid #4EB1BA;
     border-radius: 5px;
     box-shadow: 10px 10px 5px black;
+    padding-bottom: 30px;
 }
 
-#user_btn, #stock_btn{
+/*#user_btn, #stock_btn{
 	background-color: #FFF;
  	   border: 0;
-}
+}*/
 
 .hidden{
 	visibility: hidden;
@@ -99,8 +93,8 @@ div#item_editer{
 }
 
 #rightSide{
-	margin-top: 0px;
 	height: 400px;
+    color: black;
 }
 #rightSide table{
 	margin-left: 10px;
@@ -109,5 +103,4 @@ div#item_editer{
 #confirm_button{
 	float: left;	
 }
-}