html, body {
   height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
}

#wrapper {
   min-height: 100%;
}

#body {
   padding-bottom: 50px;
}

#footer {
   margin-top: -40px;
   height: 40px;
   color: white;
   background: black;
}

.chain{
    size: 3;
    width:10px;
}

.footernav{
    list-style: none;
    text-align: right;
}

.footernav li{
    text-align: center;
    display: inline-block;
    margin-left: 30px;
}

.footernav li a{
    color: white;
}

.navbar {
    position: relative;
    margin-bottom: 20px;
}

.navbar-inner {
    border-radius: 0px !important;
}



/* Helpers
================================================== */

/*Colors*/
.green {color: #9FC569;}
.red {color: #ED7A53;}
.gray {color: #a2aaac;}
.orange {color: #FF8A00;}
.dark {color: #1F3140;}
.blue {color: #3399cc;}
.white {color: #ffffff;}

.bgwhite {background:#ffffff;}

/*position elements*/
.left {float:left;}
.right {float:right;}
.center {text-align:center;}
.center i {float:none; display: inline;}

/*margins*/
.marginR5 {margin-right: 5px;}
.marginR10{margin-right: 10px;}
.marginT5 {margin-top:5px;}
.marginT10{margin-top:10px;}
.marginB5 {margin-bottom: 5px;}
.marginB10 {margin-bottom: 10px;}
.marginL5 {margin-left: 5px;}
.marginL10 {margin-left: 10px;}
.marginL20 {margin-left: 20px;}
.marginL30 {margin-left: 30px;}
.margin10 {margin: 10px;}
.margin20 {margin: 20px;}

/*paddings*/
.padding15 {padding:15px;}
.padingR5 {padding-right: 5px;}
.padingR10{padding-right: 10px;}
.padingT5 {padding-top:5px;}
.padingT10{padding-top:10px;}
.padingT20{padding-top:20px;}
.padingB5 {padding-bottom: 5px;}
.padingB10 {padding-bottom: 10px;}
.padingL5 {padding-left: 5px;}
.padingL10 {padding-left: 10px;}
.padding {padding: 10px;}

/* Boxes
================================================== */

.box {
    width:100%;
    -moz-box-shadow:0 1px 0px rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
    box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
    margin-bottom: 10px;
}

.box .title {
    position: relative;
    border:1px solid #c4c4c4;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -moz-box-shadow:0 1px 0px rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
    box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
}

.box.gradient .title {
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 1%, rgba(243,243,243,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
    background: linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(243,243,243,1) 100%);
}

.box .title h4 {
    padding-left:15px;
    margin-bottom: 0;
    padding-top: 0px;
    padding-bottom: 12px;
}

.box .content {
    padding:20px 20px 10px 20px;
    border:1px solid #c4c4c4;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top: none;
    background-color: #fff;
    position: relative;
}

.box .content.minh{
    min-height:90px;
}
.box .title span[class*="icon-"]{
    margin: 7px 5px 0 0px;
}

.alignment {
    font-family: courier;
    padding: 0px;
    margin: 0px;
}

/* Protein-protein
================================================== */
#protein-protein,#degradation{
	overflow: auto;
}

button {
	margin: auto;
	display: block;
}

#graph{
  height:450px;
  width:775px;
  overflow: auto;
  border: 1px solid;
}

#legend{
  height:200px;
  width:470px;
  position:absolute;
/*  right:10px;
  top:250px;
*/  background-color:Gainsboro;
  z-index:1;
}
#accordion_residue_scores_pyp{
  overflow:auto;
}
#chain_a{
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position:absolute;
  left:-4px;
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.closePopover {
    position: absolute;
    top: 5px;
    right: 15px;
    color: black;
    font-weight: bold;
    transition: 0.3s;
}
.closePopover:hover,
.closePopover:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}