/* Style sheet for ENCODE data matrix */

table { 
    border-width: 0px; 
    border-style: hidden; 
    border-collapse: collapse; 
    font-family: arial, Geneva, Helvetica, sans-serif;
}

th {
    vertical-align: bottom;
    text-align: left;
    padding: 5px;
}

td {
    border: none;
    padding: 3px;
}

/* vertical column headers (th child of columnHeaders row) */
#columnHeaders th {
    /* height is dynamically reset based on max label length */
    height: 180px;
}

.verticalText {
    /* NOTE: width setting needed by non-IE, but messes up IE, so will add this from JS */
    /* width: 1em; */
    padding-left: 4px;
    padding-right: 4px;
    white-space: nowrap;
    /* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);                 
    /* for IE */
    /* replaced with writing-mode below */
    /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */
}

/* for IE, referenced by rotateCells jquery */
table div.rotated {
    writing-mode: tb-rl;
    filter: flipv fliph;  /* 180 degrees */
}

.groupType {
    color: white;
    background-color: #004D99;
    border: 1px solid grey;
}

.elementType {
    color: black;
    background-color: lightgrey;
    border: 1px solid grey;
}

.axisType {
    vertical-align: bottom;
    font-family: arial, Geneva, Helvetica, sans-serif; 
    font-weight: bold;
    font-size: 120%;
    color: #004D99;
}

.experiment {
    background-color: #00994D;
    text-align: center;
    border: 1px solid darkgray;
    cursor: pointer;
}

.todoExperiment {
    border: 1px solid darkgray;
}

.experimentHover {
   background-color: #FFFF80;
}

.experiment a {
    text-decoration: none;
}

.axisType a {
    text-decoration: none;
}

.elementType a {
    text-decoration: none;
}

#searchTypePanel {
    margin: auto;
    margin-top: 3em;
    padding: 5px;
    background-color: #EEE;
    width: 13em;
}

#cellHeaderLabel {
    margin-top: 4em;
}

/*
This will drop a white->blue gradient background on the header (if desired)
.encodeHeader {
    background: -moz-linear-gradient(left, #FFF, #004D99);
    background: -webkit-gradient(linear, left center, right center, from(#FFF), to(#004D99));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF', endColorstr='#004D99', gradientType='1');
}
*/


/* colored bullets on cell types based on karyotype CV field */

.karyotype {
    font-size: large;
}

.cancer {
    color: brown;
}

.normal {
    color: yellow;
}

.unknown {
    color: lightgrey;
}

.crossHair {
    background-color: #EDEDED;
}

.helpText {
    position: relative;
    margin: 10px;
}

.helpLauncher {
    color: gray;
    cursor: pointer;
    font-size: medium;
    position: absolute;
    top; 0;
    right: 0;
    margin-right: 15px;
    text-align: right;
}

.xIcon {
    font-size: x-large;
    color: #636363;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 0;
}

#chipButton {
    font-size: small;
    cursor: pointer;
    padding: 1px 4px 1px 4px;
    border: 1px inset gray;
    background-color: #E0E0E0;
}