employeehours report

public/css/main.css

@@ -10,8 +10,8 @@
     color: #5A9101;
 }
 
-.whiteish{
-    color:#fff;
+.whiteish {
+    color: #fff;
 }
 
 .pointer {
@@ -22,7 +22,7 @@
     text-align: right;
 }
 
-.align-center{
+.align-center {
     text-align: center;
 }
 
@@ -52,6 +52,7 @@
     background-color: #0099B8;
     color: #fff !important;
 }
+
 .table-cyanish-header-light {
     background-color: #54CDE3;
     color: #fff !important;
@@ -72,6 +73,33 @@
     color: #fff !important;
 }
 
+th.rotate {
+    height: 100px;
+    white-space: nowrap;
+    position:relative;
+    top:-53px;
+}
+
+th.rotate > div {
+    transform:
+        /* Magic Numbers */
+        translate(25px, 51px)
+        /* 45 is really 360 - 45 */
+        rotate(315deg);
+    width: 30px;
+    float:left;
+}
+th.rotate > div > span {
+    padding: 5px 3px;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+}
+.pie-test{
+    width:20px;
+    height:20px;
+    border:1px solid #777;
+}
+
 /*********SWITCH************/
 .onoffswitch {
     position: relative;
@@ -178,22 +206,24 @@
     z-index: 10;
     top: 7px;
 }
+
 /**********END: percentage input***********/
 
-.pointer{
-    cursor:pointer;
+.pointer {
+    cursor: pointer;
 }
 
-.comment-text{
-    padding:5px;
-    margin-bottom:10px;
+.comment-text {
+    padding: 5px;
+    margin-bottom: 10px;
     background-color: #fffad9;
-    float:left;
-    width:100%;
-    border:1px solid #fffda0;
-    border-radius:5px;
+    float: left;
+    width: 100%;
+    border: 1px solid #fffda0;
+    border-radius: 5px;
 }
-.comment-text:hover{
+
+.comment-text:hover {
     background-color: #e9f3e9;
 }
 
@@ -202,7 +232,7 @@
     position: relative;
     overflow: hidden;
     display: inline-block;
-    width:100%
+    width: 100%
 }
 
 .upload-btn {
@@ -213,7 +243,7 @@
     border-radius: 8px;
     font-size: 15px;
     font-weight: bold;
-    width:100%
+    width: 100%
 }
 
 .upload-btn-wrapper input[type=file] {
@@ -225,39 +255,42 @@
 }
 
 /*********project page*************/
-.project-page{
-    position:fixed;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
-    width:100%;
-    height:100%;
+.project-page {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
     background-color: #CCD5DB;
-    z-index:1035;
-    display:none;
+    z-index: 1035;
+    display: none;
 }
-.project-page-header{
-    height:50px;
+
+.project-page-header {
+    height: 50px;
     background-color: #3e8ef7;
-    width:110%;
-    float:left;
-    position:relative;
-    left:-30px;
+    width: 110%;
+    float: left;
+    position: relative;
+    left: -30px;
 }
-.project-page-header > h3{
-    color:#fff;
-    margin-top:10px;
-    margin-left:20px;
+
+.project-page-header > h3 {
+    color: #fff;
+    margin-top: 10px;
+    margin-left: 20px;
 }
-.project-page > .container{
+
+.project-page > .container {
     background-color: #fff;
 }
 
-.graph-holder{
-    padding:10px 10px;
+.graph-holder {
+    padding: 10px 10px;
     background-color: #4c4c4c;
-    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgb(22, 20, 17)), to(rgb(76, 76, 76)));
+    background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(rgb(22, 20, 17)), to(rgb(76, 76, 76)));
     background-image: -webkit-radial-gradient(50% 50%, rgb(76, 76, 76), rgb(22, 20, 17));
     background-image: -moz-radial-gradient(50% 50%, rgb(76, 76, 76), rgb(22, 20, 17));
     background-image: -o-radial-gradient(50% 50%, rgb(76, 76, 76), rgb(22, 20, 17));