added comments to label which stylings belong to which, added styling for pop up chat window and fixed syntax

Author: jv-cortez

client/styles/main.scss

@@ -1,48 +1,79 @@
-$brand-color: tomato;
-
 body{
   background: white;
   margin: 0;
 }
 h1, h2 {
-  color: $brand-color;
+  color: tomato;
   display: flex;
   justify-content: center;
 }
 //navbar and dropdown styles
 nav {
-  background: peachpuff;
-  display: flex;
+  background: none;
+  border-color: none;
   justify-content: space-between; 
   padding: 10px;
+  margin: 0px;
+}
+button {
+  color: lightgray;
+}
+
+button:hover {
+  color: grey;
+}
+
+a:hover{
+  color: grey;
 }
-  .title {
-    margin: 0;
-  }
 
+.navbar-brand {
+  color: lightgray;
+  font-weight: bold;  
+  font-size: 25px;
+}
+.title {
+  margin: 0;
+}
 
-  .dropdown {
+.dropdown {
     margin: 0;
   }
 
   .navbar, .navbar-default{
     display: block;
+    font-size: x-large;
+    font-weight: bold;
+  }
+
+  .nav, .navbar-nav, .navbar-right {
+    background: lightgray;
+    border-radius: 5px;
+    opacity: .6;  
   }
 
+  .nav, .navbar-nav, .navbar-right:hover {
+    color: lightgrey;
+    cursor: pointer;
+  }
+  
   .caret {
     display: none;
   }
 // card swipe styles  
 .master-root {
   // margin: 20px auto;
+  background: grey;
+  border-radius: 5px;
+  border: 1px solid grey;
   height: 50px;
-  position: relative;
   min-height: 400px;
   max-height: 100px;
-  width: 300px;
-  overflow: hidden;
-  border: 1px solid grey;
   padding: 0px 0px 10px 0px;
+  position: relative;
+  opacity: 0.6;
+  overflow: hidden;
+  width: 300px;
 
 }
 
@@ -130,7 +161,6 @@ nav {
 }
 
 //css style for pop up box
-
 .popupbox {
   width:100%;
   height:100%;
@@ -243,7 +273,6 @@ nav {
 .popupbox[data-title='bottom'] .popupbox-titleBar { box-shadow: none; border-top: 1px #ccc solid }
 
 //popupbox button style
-
 .popupbox-trigger:hover {
   box-shadow: 2px 3px 5px rgba(0,0,0,.2);
   margin-top: -12px;
@@ -301,19 +330,100 @@ nav {
 
 .matchmakerEventAndChat-container {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: center;
   margin-bottom: 100px;
 }
+//chat window
+//chat header for the chat window
+.chatheaderClicked {
+  background: darkgrey;
+  width: 296px;
+  position: relative;
+  border-radius: 5px;
+  z-index: 101;
+  margin: 5px;
+  padding: 0 10px;
+  height: 35px;
+  line-height: 35px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #616161;
+  text-align: left;
+  display: block;
+  cursor: pointer;
+  opacity: .9;
+}
+
+.messagelist {
+  background: grey;
+  border-radius: 5px;
+  width: 310px;
+  height: 230px;
+  position: fixed;
+  right: 49px;
+  transition: all .3s;
+  border: 1px solid transparent;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+  z-index:100;
+  opacity: .9;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px 2px;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition:  all 0.5s ease;
+  -o-transition:  all 0.5s ease;
+  transition:  all 0.5s ease;
+}
+
+.message {
+  font-weight: bold;
+  padding-left: 5px;
+}
+
+.messagelist.shown {
+  bottom: 0px;
+}
+
+.messagelist.bottom {
+  bottom: -183px;
+}
 
 #chatbar {
-  border: black solid 1px;  
+  background: #f8f8f8;
+  border: grey solid 1px;  
+  border-radius: 5px;
+  position: absolute; 
+  bottom: 4px;
   width: 300px;
+  z-index: 101;
+  right: 4px;
 }
 
-.messagelist {
-  border: black solid 1px;  
-  height: 300px;
-  width: 300px;
-  overflow: auto;
-  word-wrap: normal;
+//matchmaker page styligs
+#react-root {
+  background: black;
+  background-position: center;
+  background-image: url(http://cdn.dota2.com/apps/dota2/images/international2017/overview/bg_battlepass.jpg); 
+}
+
+.slider-container {
+  border-radius: 5px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 35px;
+}
+
+.sliderSpace {
+  width: 525px;
+  margin: 30px;
+}
+
+.slideText{
+  font-size: x-large;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  width: 530px;
 }