set basic layout. adding status bar

client/app/main.css

@@ -0,0 +1,219 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);
+
+html, body {
+    height: 100%;
+  }
+  
+  body {
+    font-size: 16pt;
+    padding: 0;
+    margin: 0;
+    background: #020625;
+    color: #EDF0F4;
+  }
+  
+  .fill-container {
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%; 
+  }
+  
+  .transparent-button {
+    background-color: Transparent;
+    background-repeat:no-repeat;
+    border: none;
+    cursor:pointer;
+    overflow: hidden;
+    outline:none;
+  }
+  
+  .font-roboto-regular {
+    font-family: 'Roboto';
+    font-weight: 400; 
+  }
+  
+  .font-roboto-thin {
+    font-family: 'Roboto';
+    font-weight: 100;
+  }
+  
+  .font-roboto-light {
+    font-family: 'Roboto';
+    font-weight: 300;
+  }
+  
+  .font-roboto-medium {  
+    font-family: 'Roboto';
+    font-weight: 500;
+  }
+  
+  .font-roboto-medium-italic {  
+    font-family: 'Roboto';
+    font-weight: 500;
+    font-style: italic; 
+  }
+  
+  .dialog {
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%; 
+    background: #020625;
+  }
+  
+    body {
+        font-family: "Roboto"; 
+        font-weight: 400;
+    }
+
+    h1 {
+        font-family: "Roboto";
+        font-size: 22pt;
+        font-weight: 600;
+    }
+
+    .header {
+        width: 100vw;
+        display: flex;
+        overflow: hidden;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #182048;
+        padding: 0 40px 0 40px;
+    }
+
+    .header .logo img {
+        width: 101px;
+        height: 68px;
+    }
+
+    .header .title {
+        text-align: center;
+    }
+
+    .header .user {
+        width: 101px;
+        color: white;
+    }
+
+    .header .user i {
+        float: right;
+    }
+
+    .main-tabs-container {
+        margin-top: 10px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .tab-content {
+        width: 100%;
+    }
+
+    .task-connection-message {
+        position: relative;
+        margin: auto;
+        left: -10%;
+        font-weight: 600;
+        font-size: 19pt;
+    }
+
+    .panel{ 
+        background: #182048;
+        border: 1px solid;
+        border-radius: 30px;
+        border-color: #3573FB;
+    }
+
+    .hand-panel .panel-body{
+        background: #020625;
+    }
+
+    .panel-heading, .panel-footer {
+        background-color: #020625 !important;
+        color: #EDF0F4 !important;
+        text-align: center;
+        font-size: 14pt;
+    }
+
+    .panel-heading {
+        border: 1px solid;
+        border-radius: 30px 30px 0 0;
+        border-color: #3573FB !important;
+
+    }
+
+    .panel-footer {
+        border: 1px solid;
+        border-radius: 0 0 30px 30px;
+        border-color: #3573FB;
+    }
+
+    .control-container {
+        margin: 10px 0;
+    }
+
+    .control-card > .panel-body {
+        height: 150px;
+        padding: 0px;
+    }
+
+    .control-card .button-area {
+        height: 100%;
+    }
+
+    .control-card .button-area > button {
+        height: 100%;
+        border-radius: 0;
+        color: #EDF0F4;
+        font-size : 14pt;
+        background: #182048;
+    }
+
+    .control-card-six .button-area > button {
+        height: 50%;
+        font-size: 12pt;
+    }
+
+    .nav-pills li a {
+        border-radius: 0;
+        color: #EDF0F4;
+        font-size : 16pt;
+        font-weight: 600;
+        background: #020625;
+    }
+
+    .nav-pills {
+        margin-left: 40px;
+    }
+
+    .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, .nav>li>a:focus, .nav>li>a:hover{
+        color: #EDF0F4;
+        background: #182048;
+    }
+
+    .hand-panel .panel-heading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 600;
+    }
+
+    .hand-panel .panel-heading i{
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    
+    .panel-footer .message {
+        font-size : 12pt;
+    }
+
+
+
+
+