/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}
 
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}
 
.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}
 
.tab-links a {
    padding:9px 15px;
    display:inline-block;
    border-radius:3px 3px 0px 0px;
    background:#7FB5DA;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
}
 
.tab-links a:hover {
    background:#a7cce5;
    text-decoration:none;
}
 
li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}
 
/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}
 
.tab {
    display:none;
}
 
.tab.active {
    display:block;
}

/* Body split into header and content */
body{
  margin:0;
  padding:105 0 0 0;
 }

div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:105;
  background:#fc9453;
 }

 @media screen{
  body>div#header{
   position: fixed;
  }
 }

 @media print{
  body>div#header{
    display:none;
  }
 }

 * html body{
  overflow:hidden;
 } 

 * html div#content{
  height:100%;
  overflow:auto;
 }

/* Rotated headers */
th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
  background-color: white; 
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 20px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 5px;
}

table.jhp-table-small {
  border-top: none;
}

th.jhp-row-rotate-header {
  background-color: white; 
  vertical-align: bottom
}