Changed style and added friendrequests

website/public/styles/main.css

@@ -18,7 +18,7 @@ html {
 
 body {
     height: 100%;
-    background-color: #B78996;
+    background-color: #EEE;
     color: #333;
     font-family: Arial, sans-serif;
 }
@@ -37,11 +37,12 @@ h3 {
 }
 
 h4 {
-    font-size: 1.6em;
+    font-size: 1.2em;
 }
 
 h5 {
-    font-size: 1.4em;
+    font-size: 1.0em;
+    color: #666;
 }
 
 ul {
@@ -54,12 +55,12 @@ p {
 
 /* Selection colors */
 ::selection {
-    background: #845663;
+    background: #FBC02D;
     color: white;
 }
 
 ::-moz-selection {
-    background: #845663;
+    background: #FBC02D;
     color: white;
 }
 
@@ -75,7 +76,7 @@ p {
 .platform {
     padding: 20px;
     margin-bottom: 10px;
-    border-radius: 10px;
+    border-radius: 5px;
     background-color: #FFFFFF;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
@@ -143,7 +144,7 @@ button, input, select {
     cursor: pointer;
     border: none;
     font-size: 16px;
-    border-radius: 7px;
+    transition-duration: 250ms;
 }
 
 /* All textinput and sections */
@@ -151,19 +152,53 @@ textarea, input, select {
     padding: 0 5px;
     background: white;
     color: #333333;
-    border: 1px solid #845663;
-    border-radius: 7px;
+    border-radius: 5px;
+    border-bottom: 1px solid #4CAF50;
     font-size: 16px;
+    outline: none;
+    transition-duration: 250ms;
+}
+
+textarea {
+    padding: 5px;
+    resize: none;
+}
+
+textarea:hover, input:hover, select:hover {
+    border-radius: 10px;
+}
+
+textarea:focus, input:focus, select:focus {
+    border-radius: 10px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 /* All buttons */
 button,
 input[type="submit"],
 input[type="reset"] {
-    background-color: #845663;
+    background-color: #FBC02D;
     color: white;
     padding: 0 10px;
     border: none;
+    border-radius: 5px;
+}
+
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus {
+    outline: none;
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="reset"]:active {
+    outline: none;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
+}
+
+input[type="radio"] {
+    border-radius: 100%;
 }
 
 /* Tables */
@@ -190,19 +225,17 @@ img[data-title]:hover:after,
 span[data-title]:hover:after,
 div[data-title]:hover:after {
     content: attr(data-title);
-    padding: 4px 4px;
+    padding: 7px 7px;
     color: #FFFFFF;
     position: absolute;
     left: 0;
-    top: 100%;
-    z-index: 20;
+    top: 150%;
+    z-index: 200;
     white-space: nowrap;
-    -moz-border-radius: 5px;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    -moz-box-shadow: 0 0 4px #222;
-    -webkit-box-shadow: 0 0 4px #222;
-    box-shadow: 0 0 4px #222;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     background-color: #333;
     font-size: 15px;
     line-height: normal;