html {
    background-color: rgb(248, 248, 248);
}

body {
    background-color: #DDDED3;
    font-family: "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
}

nav {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background-color: rgba(100, 100, 100, 0.0) !important;
}

#cy-navbar {
    font-size: 1em;
}

.search-form {
    font-size: 0.9em;
}

.btn {
    border-radius: 0 !important;
}

h1 {
    font-weight: 100;
    font-size: 5em;
}

h2,
h3,
h4,
h5 {
    font-weight: 200;
}

.underline {
    border-bottom: solid 1px #555555;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#image-header img {
    display: inline;
    width: 100%;
}

.v-center {
    height: 150px;
    line-height: 150px;
    text-align: center;
    vertical-align: middle;
}

.v-center img {
    vertical-align: middle;
}

.person {
    height: 200px !important;
    line-height: 200px !important;
}

.institute img {
    width: 150px;
    margin: 20px;
}

.panel {
    background-color: #FFFFFF;
    margin: 0;
    padding: 30px;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.panel h4 {
    border-bottom: solid 1px #777777;
    margin-bottom: 10px;
}

.panel img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.section {
    margin-top: 160px !important;
}

footer {
    background-color: rgb(245, 245, 245);
    margin-top: 0;
    padding-top: 50px;
    padding-bottom: 50px;
}

.people {
    background-color: rgb(245, 245, 245) !important;
}

.cy3-color {
    color: rgb(247, 148, 30) !important;
}

.belt {
    color: #444444 !important;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 0;
    margin-top: 0;
}

.narrow {
    padding-top: 20px;
    padding-bottom: 15px;
    margin-bottom: 0;
    margin-top: 0;
}

.underline {
    border-bottom: solid 1px #cccccc;
    color: #444444;
}

.top {
    padding-top: 20px;
    padding-bottom: 20px;
}

.orange {
    background-color: rgb(247, 148, 30) !important;
}

.blue {
    background-color: #1695A3;
    color: white !important;
}

.light-blue {
    background-color: rgb(0, 150, 255);
    color: #ffffff !important;
}

.light-blue a:visited {
    color: #aaaaaa !important;
}

.light-blue a {
    color: orange !important;
}

.water-blue {
    background-color: #0aeaff;
    color: #ffffff !important;
}

.transparent {
    background-color: rgba(255, 255, 255, 0);
}

.white {
    background-color: #FFFFFF;
    color: #555555 !important;
}

.black {
    background-color: #000000;
    color: #a0a0a0 !important;
}

.snow-white {
    background-color: #F0F0F0;
    color: #555555 !important;
}

.light-gray {
    background-color: #DDDED3;
    color: #222222 !important;
}

.dark-gray {
    background-color: #444444;
    color: #252525 !important;
}

.dark {
    background-color: #3C3C3C;
    color: white;
}

.background-31 {
    /*background-color: rgb(5,81,129);*/
    background-image: url("../images/screenshots/cy3_3_index_page.png");
    /*-moz-background-size: 100% auto;*/
    background-size: 100%;
    /*background-repeat: no-repeat;*/
    background-attachment: fixed;
    /*height: 600px;*/
    padding-top: 60px;
}

.narrow .container h2 {
    font-weight: 100;
    font-size: 2.5em;
}

.line {
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
}

.background-31 h2 {
    font-weight: 100 !important;
    font-size: 32px;
    padding-right: 40px;
    color: #ffffff;
    text-align: right;
    background-color: rgba(255, 255, 255, 0.0);
    padding-bottom: 20px;
}

.background-31 h1 {
    font-weight: 100 !important;
    font-size: 8.5em !important;
}

.container h1 {
    color: #545454;
}

.item {
    margin-top: 30px;
}

.box {
    z-index: 0;
    color: #fafafa;
    background-color: rgba(44, 77, 131, 0.0);
    padding: 1em;
    padding-top: 0;
}

.box p {
    font-weight: 100;
    font-size: 18px;
}

.box h1 {
    font-weight: 700;
    font-size: 90px;
    color: #fafafa;
}

.box p a {
    color: orange;
}

.image-wide img {
    width: 100%;
}

.box .btn {
    height: 80px;
    font-weight: 100;
    color: #FFFFFF;
    border: solid 2px #ffffff;
    font-size: 3.2em;
    /*background-color: #FFFFFF;*/
}

.orange-button {
    color: white !important;
    background-color: orange !important;
    font-weight: 100 !important;
    border: none !important;
}

.centering {
    text-align: center;
}

.image-fit {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 20px;
}

.warn {
    color: red;
}

.light-text {
    color: #aaaaaa !important;
}

.license {
    border: 2em solid #DDDED3;
    height: 400px;
    width: 100%;
    background-color: #DDDED3;
    color: inherit;
    overflow-y: scroll;
}


/*
For download page
*/

.download-button,
.download-button:hover {
    background-color: #ff8c00;
    color: #FFFFFF;
    border: none;
    border-radius: 25px !important;
}

.download-button:hover,
.download-button:hover h1 {
    background-color: #ffc500;
    color: #555555;
}

.download-button:visited,
.download-button:active,
.download-button:hover,
.download-button:focus {
    color: #FFFFFF;
    border: none;
    border-radius: inherit;
}

.download-button h1 {
    font-size: 4.5em;
    color: inherit;
}

.platform {
    padding-top: 0;
    padding-bottom: 10px;
    padding-right: 30px;
    padding-left: 30px;
}

#introduction {
    background-image: url("../images/3_1_title3.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    -moz-background-size: 100% auto;
    background-size: 100% auto;
    height: 800px;
}

.cy3-intro {
    background-image: url("../images/screenshots/cy3_intro.png");
    background-attachment: fixed;
    height: 800px;
}


/* For Cytoscape.js */


/* For what_is_cytoscape.html */

.cyjs-back {
    background-color: #065181;
    color: white;
}

.cyjs-back a {
    color: orange;
    text-decoration: none;
}

.cyjs {
    width: 100%;
    height: 600px;
    background-color: rgb(6, 81, 129);
    margin-top: -530px;
}

.cyjs2,
.cyjs3 {
    width: 100%;
    height: 600px;
    background-color: #fafafa;
}

data-scroll {
    color: white !important;
}


/* For Custom Search */

#___gcse_0 {
    width: 240px !important;
    border-color: #FFFFFF !important;
    height: 4em !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

iframe[id='dummyFrame'] {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    height: 42em;
    width: 100%;
    border: none !important;
}

.bug-report-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100%;
    height: 42em;
}

.center-image {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
}

/** Temp warning */


.warning-banner {
    margin-top: 2em;
    background: #FAFAFA;
    padding: 0.4em;
    color:#333333;
}
.warning-banner-title {
    font-weight: 400;
    font-size: 2em;
    color: red;
    padding-bottom: 0.5em; 
}
.warning-banner p {
    font-weight: 500;
    font-size: 1.2em;
    color:#333333;
}
.warning-link {
    color:red !important;

}
/** IQuery widget */


.i-Query {
    width: 450px;
    margin: auto;
    border: 2px solid #337ab7;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0px 15px 10px 15px;
}