/* Icons */
.ico {
    padding: 10px;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, #CCCCCC, #AAAAAA);
    margin-bottom: 5px;
    opacity: 0.5;
    cursor: pointer;
    width: 32px;
}

.ico:hover {
    opacity: 1;
}
	
.icorow {
    margin-top: 5px;
    width: 100%;
}

.icorow > div {
    float: left;
}
	
.icosp {
    text-align: left;
    color: #666;
    width: 70px;
}

.icosp > span {
    margin-left: 5px;
    color: white;
    display: none;
    font-size: 20px;
    font-weight: 200;
}
	
.icoactive {
    opacity: 1;
    cursor: default;
}

.icoactivesp {
    width: 220px;
}

.icoactivesp > span {
    display: inline;
}

.miniicon {
    height: 16px;
    margin-right: 5px;
}

/* Title */
.header {
    box-shadow: 0 3px 3px #BBBBBB;
    top: 0px;
    position: fixed;
    background-image: linear-gradient(to bottom, #222, #111);
    background-color: #1b1b1b;
    border-color: #252525;
    background-repeat: repeat-x;
    width: 100%;
    z-index: 10000;
}

@media (max-width: 767px) {
    .header {
	position: absolute;
        height: 105px;
    }
}

/* Sidebar */
.sidebar {
    box-shadow: 4px 4px 4px #666666;
    padding: 0;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    overflow-y: auto;
    padding-bottom: 10px;
    background-color: white;
}

.tab-pane {
    padding-left: 10px;
    padding-right: 10px;
}

/* General */
.clickable {
    cursor: pointer;
}

/* Colors */
.red {
    color: red;
}
.blue {
    color: blue;
}
.green {
    color: #008000;
}
.orange {
    color: orange;
}
.gray {
    color: gray;
}
.pill {
    border-radius: 4px;
    color: #FFFFFF;
    height: 26px;
 margin-bottom: 2px;
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 5px;
}
.donepill {
    background-image: linear-gradient(to bottom, #62C462, #51A351);
}
.runningpill {
    background-image: linear-gradient(to bottom, #0088CC, #0044CC);
}
.errorpill {
    background-image: linear-gradient(to bottom, #EE5F5B, #BD362F);
}
.queuedpill {
    background-image: linear-gradient(to bottom, #FBB450, #F89406);
}
.pendingpill {
    background-image: linear-gradient(to bottom, #BBBBBB, #666666);
}

/* Analysis Page Tools */
.tool {
    border: 1px solid #808080;
    border-radius: 6px;
    box-shadow: 2px 2px 2px;
    padding: 4px;
    width: 32px;
    margin: 10px;
    cursor: pointer;
    height: 32px;
}
.tool:hover {
    background-color: #F0F0F0;
}
.tool:active {
    box-shadow: 0px 0px 1px;
}

.glow{
  animation: shadowThrob 0.9s 4;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out 6;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 20px rgba(12,65,190, 0.1);}
  to {box-shadow: 0 0 20px rgba(12,65,190, 0.9);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 20px rgba(12,65,190, 0.1);}
  to {box-shadow: 0 0 20px rgba(12,65,190, 0.9);}
}

/* Stage Pills */
.stage {
    background-color: #3a87ad;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 18px;
}

.stage > a {
    color: white;
}

.stage > a:focus {
    outline: none;
    text-decoration: none;
}

.stage > a:hover {
    text-decoration: none;
}

.stage > a:visited {
    text-decoration: none;
}

.completedstage {
    background-color: #468847;
}

/* Special List */
.helplist {
    counter-reset:li;
    margin-left:0;
    padding-left:0;
}

.helplist > li {
    position:relative;
    margin:0 0 6px 2em;
    padding:4px 8px;
    list-style:none;
}

.helplist > li:before {
    content: "-";
    counter-increment:li;
    position:absolute;
    top: 4px;
    left: -1em;
}

.selectList {
    list-style: none;
    margin: 0px;
}

.selectList > li {
    border-radius: 6px;
    border: 1px solid lightgray;
    padding: 5px;
    margin-bottom: 3px;
}

.selectList > li > a {
    cursor: pointer;
}

.selectList > li:hover {
    background-color: lightgray;
}

.legend {
    font-size: 12px;
}

/* Job Submission Wizard */
.wizard {
    background-color: #9b9b9b;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 20px;
}
.wizard div:first-child {
    position: relative;
    right: 20px;
}
.wizard a {
    padding: 10px;
    color: black;
    width: 350px;
}
.wizard .active {
    color: white;
    cursor: default
}
.wizard a:hover {
    text-decoration: none;;
}
.wizard > div {
    float: left;
    width: 33%;
}
.wizard .separator {
    font-size: 100px;
    font-weight: 100;
    color: white;
    float: left;
    width: 1px;
    position: relative;
    bottom: 7px;
}
.wizard img {
    width: 16px;
    opacity: 0.8;
    margin-left: 15px;
}
.wizard li {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    display: block;
    float: left;
    margin-top: 6px;
    margin-left: 30%;
    height: 10px;
    width: 10px;
}
.wizard li[class=active] {
    background-image: linear-gradient(to bottom, #55bb55, #00FF00);
}

/* Notebook */
.notebook {
    font-family: "Helvetica";
    font-size: 12pt;
    line-height: normal;
}
.notebookTitle {
    font-size: 20pt;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: 300;
}
.notebookSubtitle {
    font-size: 12pt;
    font-style: italic;
    margin-bottom: 10px;
}
.notebookHeader {
    font-size: 14pt;
    margin-bottom: 10px;
    margin-top: 20px;
}
.notebookSubheader {
    font-size: 12pt;
    margin-bottom: 10px;
    margin-top: 20px;
}
.notebookIntroduction {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: justify;
}
.notebookParagraph {
    font-family: "Times New Roman";
    margin-bottom: 10px;
    text-align: justify;
}
.notebookImage {
    margin-top: 25px;
    margin-bottom: 35px;
    text-align: center;
    font-size: 10pt;
}
.notebookTable {
    font-size: 10pt;
}

.box {
    border: 1px outset gray;
    border-radius: 3px;
    padding: 10px;
    box-shadow: 8px 8px 8px #ccc;
    width: 45%;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.box-wide {
    width: 100%;
}

li.active > a.tab-light {
    background-color: #f5f5f5 !important;
}

.tab-content-inner {
    background-color: #f5f5f5 !important;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 20px;
    border-radius: 4px;
    min-height: 585px;
    overflow-y: auto;
}

.tabs-left li.active > a {
    position: relative;
    left: 1px;
    z-index: 1;
}

h3 {
    font-weight: 300;
}

.box h4 {
    font-weight: 300;
}

h4 {
    font-weight: 300;
}

h5 {
    font-weight: 300;
}

.modal-header h3 {
    font-weight: 300;
}

.spacey {
    margin-top: 20px;
    margin-bottom: 30px;
}

.tt {
    font-weight: bold;
    cursor: help;
}

.thumbnail:hover {
    box-shadow: 0px 0px 5px blue;
    cursor: pointer;
}
.thumbnail:active {
    border: 1px inset;
    box-shadow: none;
}

.recipe {
    width: 100%;
    height: 280px;
}

.spaced li {
    margin-bottom: 20px;
}

.excel {
    border: 2px outset gray;
    font-size: 12px;
}

.excel th {
    border: 1px solid gray;
    background-color: #eee;
    font-weight: bold;
    text-align: left;
    padding-left: 3px;
    padding-right: 3px;
}

.excel td {
    border: 1px solid #ddd;
    height: 20px;
}

.editable {
    cursor: cell;
}

.viewtext {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100px;
    max-height: 20px;
}

.editable input {
    border: none;
    box-shadow: none !important;
    transition: none !important;
    background: transparent;
    font-size: 12px;
    padding: 0px;
    margin: 0px;
    height: 17px;
    position: relative;
    bottom: 1px;
}

/* API documentation */
.request {
    border: none;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 30px;
    min-height: 22px;
    color: #47474c;
    background-color: #e0e0e0;
    font-size: 16px;
}

.requestMethod {
    float: right;
    width: 300px;
    font-size: 14px;
    margin-left: 20px;
}

.requestMethod :nth-child(1) {
    border: 1px solid gray;
    border-radius: 5px 0 0 5px;
    background-color: #0095dd;
    color: white;
    padding: 5px;
}

.requestMethod :nth-child(2) {
    border: 1px solid gray;
    border-left: none;
    border-radius: 0 5px 5px 0;
    padding: 5px;
    background-color: white;
    color: #333333;
}

.requestchild {
    margin-top: 15px;
    padding: 5px;
    border-radius: 5px;
    background-color: white;
    font-size: 14px;
}