/* * * * * *    reset    * * * * * * */

/* remove padding */
* {
  padding: 0px;
  margin: 0px;
}


/* * * * * *    page layout * * * * * */
body{
    margin-left: auto;
    margin-right:auto;
    margin-bottom: 30px;
    background-color: #cccc99;
  }

.page-layout {
    margin:auto;
    padding:auto;
    padding-bottom: 40px;

    width:1280px;
    min-width: 1280px;
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    /* z-index:-5; */
    position: relative;
    overflow: hidden;
}


/* * * * * *    section layout    * * * * * */
.section-layout-main {
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 40px;
  margin-bottom: 40px;
  clear: both;
}

.div-layout-full-screen {
  width: 100%;
}

.div-layout-half-screen {
  width: 48%;
  margin-right: 2%;
}

.inline {
  float:left;
}

/*** global properties ****/
/*  Note: the order of syle blocks in the style sheets matter. 
    global properties are overrridden by the individual elements */

.global-page-heading {
    padding-right: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;

    color:#007f00;
    width:auto;
    font-size: 30px;
    font-family: 'Alegreya SC', serif;
    font-weight:bolder;
}

.global-section-heading {
    padding-right: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;

    color:#981e32;
    width:auto;
    font-size: 16px;
    font-weight:bolder;
}

.global-article-heading {
    padding-right: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;

  font-weight:bold;
  color:#981e32;
  font-size:14px;
}

/* default font size */
.global-text-description {
  font-size: 14px;
}

/* paragraphs */

p {
  margin-bottom: 10px;
}

/* lists */
ul {
    margin-left: 30px;
    list-style-position: inside;
    text-align: left;
} 

/* links */
.download-link {
  text-decoration: underline;
  color:#384584;
  font-size: 14px;
}

/* images */
.global-img-caption {
    font-size: 12px;
    text-indent: center;
    font-weight: 700;
    color:#387584;
  }


/* * * * *    header    * * * * */

.header-layout {
    float: clear;
    margin-top: 35px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;

    width:1280px;
    height: 140px;
    background-color: #9ab973;

    overflow: hidden;
}

.mainlogo {
  float: left;
  margin-left: 150px;
  display:block;
  width:100px;
}

img.mainlogo-image-resize {
  width: 100%;
  height: auto;
}

.nsf-logo {
  float: right;
  margin-right: 150px;
  display:block;
  width:140px;
  text-align: center;
}

img.nsf-image-resize {
  width: 60%;
  height: auto;
}

#logotag {
    width:140px;
    font-size: 9px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-weight:bold;
    color:#3b4923;
  }

.main-title {
  margin-top: 25px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.header-one {
  font-weight: normal;
  font-size: 34px;
    font-family: 'Fredoka One', cursive;

    color:#243B0B;
    text-align:center;
    margin-bottom: 10px;
    letter-spacing: 3px;

}

.header-two {
    text-align:center;
    font-family: 'Fredoka One', cursive;
    font-size: 24px;
    font-weight: lighter;
    color:#243B0B;
    letter-spacing: 2px;
}


/* * * * *    navbar    * * * * */

.navbar-wrapper { 
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background-color: black;
  height: 45px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 20px;
}

.navbar-item { 
	height: 100%;
	overflow: hidden;
}

.navbar-item > ul {
	height: 100%;
}

.navbar-item > ul > li {
     display: inline-block;
     width: 100px;
     color: #bbb;
     text-align: center;
     height: 100%;
}

.navbar-item > ul > li > a {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-shadow: none;
    text-decoration: none;
    list-style-type: none;
    color: #aaa;
    position: relative;
    display: block;
    line-height: 45px;
    width: 100%;
}

/* navbar dropdown */
.navbar-item > ul > li > ul {
  position: absolute;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;
}

.navbar-item > ul > li > ul > li {
  list-style-type: none;
  border: solid gray 1px;
  text-align: center;

}

.navbar-item > ul > li > ul > li > a {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    text-shadow: none;
    text-decoration: none;
    background-color: white;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
    color: black;
}

.navbar-item > ul > li:hover > a { 
  color:          white;                      
  text-shadow:    none;
}

.navbar-item > ul > li ul > li > a:hover { 
  background-color: black;
  color:          white;                      
  text-shadow:    none;
}

/* active navigation link */
body#home li#home, body#home li#home > a,
body#about li#about, body#about li#about > a,
body#people li#people, body#people li#people > a,
body#tools li#tools, body#tools li#tools > a,
body#outreach li#outreach, body#outreach li#outreach > a
{
	background-color: #9ab973;
	color: #243B0B;
}

body#home li#home:hover > a,
body#about li#about:hover > a,
body#people li#people:hover > a,
body#tools li#tools:hover > a,
body#outreach li#outreach:hover > a
{ 
  color:          white;                      
  text-shadow:    none;
}

/* * * * *    footer   * * * * */

.footer-layout {
    float: clear;
    margin-top: 35px;
    padding-left: auto;
    padding-right: auto;
    margin-left: auto;
    margin-right: auto;

    width:1280px;
    background-color: #ACC875;
    overflow: hidden;
}

.footer-banner-container {
    margin-left: auto;
    margin-right: auto;
    width:100%;

    padding-top: 35px;
    padding-bottom: 35px;
}

.footer-college-banner {
  width: 18%;
  margin-left: 1%;
  margin-right: 1%;

}

img.footer-image-resize {
  width: 100%;
  height: auto;
}

.errorstring {
  font-weight: bold;
  color: red;
  font-size: 16px;
}

/* ==================================================================================== */
/* -----     prooperties of each page element ------ */ 

/* * * * * *    index    page    * * * * * * */
.index-overview-heading {
}

.index-overview-description {
  width:800px;
  text-align: justify;
}

.index-overview-image {
  float:right;
  margin-top: 65px;
}


/* index page descriptions */


.main-page-layout-example {
  margin-right: 2%;
  width:31%
}

img.resize-index-example-image{
  height: 150px;
  width: auto;
}

/* override font size of global description */
.index-example-text {
  margin-top:15px;
  width: 55%;
  text-align: justify;
  font-size: 12px;
  vertical-align: top;
}

.index-example-image {
  float: right;
  margin-top: 40px;
}

/* override font size of global above */
.index-example-heading {
    font-size: 20px;
}

.index-example-link {
  color:#254A00;
}

.index-example-molecule {
  float: left;
}

.index-example-heading-test {
    font-size: 60px;
}


/* * *   Objectives Page    * * */
.objectives-page-heading {

}

/* * *    Progress page    * * */
.progress-page-heading {
}

.progress-section-heading {
}

.progress-article-layout {
  margin-left: 0px;
  margin-bottom: 30px;
  text-align: justify;
}

.progress-article-heading {
}

.progress-image-discovery {
  float: right;
  width: 500px;
  text-align: center;
}

.progress-discovery-img-caption {
  margin-left: 50px;
  margin-right: 50px;
  text-align: justify;
  width: 80%;
}

.progress-image-download {
  text-align: left;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 30px;
}

.progress-image-download-heading {
  text-align: center;
}

.progress-image-download-links {
  text-align: left;
  font-size: 10px;
}

.progress-article-word-lead {
  font-weight:bold;
  color:#42647f;
  font-size:14px;
}

.progress-article-text-description {
}

.progress-reference-paper-text {
  margin-left: 30px;
  font-size: 12px;
  color: #387584
}

.progress-reference-paper-item {
  margin-bottom: 5px;
}

/* * * people page * * */

.people-page-heading {
}

.section-layout-people {
  border: 1px;

}

.people-article-layout {
  margin-left: 0px;
  margin-bottom: 50px;
  text-align: justify;
}

.people-college-image {
  float: right;
  width: 20%;
  height: auto;
}

.people-college-logo-image {
  width: 100%;
  height: auto;
}

.people-college-lab-image {
  width: 100%;
  text-align: center;
}

.people-college-director-image-holder {
  float: left;
  width: 12%;
  padding-left: 2%;
  padding-right: 5%;
}

.people-college-director-image {
  text-align: center;
}

.people-article-heading {
  margin-bottom: 20px;
}

.people-director-text {
  text-align: justify;
  overflow: hidden;
  padding-right: 4%;
}

.people-lab-member-photo-holder {
  width: 120px;
  height: 140px;
}

.people-lab-member-photo {
}

.people-lab-member-name {
  color: #33337f;
  font-size:12px;
  text-align: justify;
}

.people-washington-lab-members-heading {
}

.people-text-description {
  font-size: 12px;
}

/* * *    pipeline page     * * */
.pipeline-page-heading {
}

.pipeline-article-layout {
  margin-left: 0px;
  margin-bottom: 30px;
  text-align: justify;
}

.pipeline-flowchart-layout {
    float: right;
    width: 55%;
}

.pipeline-overview-description {
    text-align: justify;
    float: left;
    width: 45%;
}

/* svg */

#svgMain{
  margin-top: 0%;
}

.svg-text1 {
font-weight: bold;
color: #78243d;
}

.svg-text2 {
  font-size: 13px;
  color:#42647f;
}

/* pipeline graph */

.nodeContainer {
	position: absolute;
	padding: 50px;
	padding-top: 0;
}

.level {
	display: flex;
	padding: 2px;
}

.node {
	text-align: center;
	padding: 3px;
	margin: auto;
	border: 1px solid black;
	height: 75px;
	width: 117px;
}

.node p {
	margin-bottom: 0;
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.level + .level {
	margin-top: 20px;
}

.node + .node {
	margin-left: 30px;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

/* * *    resources     * * */

.resources-link {
  color:#0066CC;
}

.resources-article-layout {
  margin-bottom: 50px;
  text-align: justify;
}


/* * *   article outreach   * * */

.outreach-page-layout {
  padding-bottom: 0px;
}

.outreach-section-layout {
  margin-top: -10px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

.outreach-article-odd {
  height: 200px;
  display:block;
  background-color: #e6d9c0;
  padding: 25px 35px 25px 35px;
}

.outreach-article-even {
  padding: 25px 35px 25px 35px;
  height: 200px;
  display:block;
}

.outreach-link {
  color:#0066CC;
}

.outreach-text-description {
  text-align: justify;
}

.article-container-odd {
  text-align: right;
  width: 30%;
  float: right;
}

.article-container-odd2 {
  text-align: right;
  width: 50%;
  float: right;
}

.article-container-even {
  text-align: left;
  width: 30%;
  float: left;
}

img.resize-outreach-image{
  height: auto;
  width: 283px;
  margin-top: 10px;
}

/* * * * * *   publications  * * * * * */
.publication-article-heading {
  background-color:#7b945c;
  border:1px solid;
}

.panel {
  padding-bottom: 5px;
}

.panel-heading {
  background-color:#7b945c;
  border:1px solid;
  border-radius: 5px;
  width:100%;
  height: 25px;
  text-align: left;
  font-size: 16px;
}

.panel-body {
  background-color: #e5f2e5;
  border: 1px solid;
  border-radius: 5px;
  border-right: 
  font: ;
}

.panel-body > p {
  margin-left: 15px;
}

.publication-journal-container {
    width: 30%;
    padding-left: 3%;
    float: left;
}
.pub-author {
  display:inline;
  padding-right: 10px;
  font-weight: bold;
}
.pub-year {
  display:inline;
  padding-right: 10px;
  font-weight: lighter;
  font-style: italic;
}

.pub-title {
  display:inline;
  padding-right: 10px;
  font-style: bold;
}

.pub-journal {
    display:inline;
  padding-right: 10px;
  font-style: italic;
}

.pub-volume {
    display:inline;
  padding-right: 10px;
  font-size: 12px;
}

.pub-page {
    display:inline;
  padding-right: 10px;
  font-size: 12px;
}

.pub-doi {
  display:inline;
  padding-right: 10px;
  font-style: italic;
}

.thumbnail {
    text-align: center;
}

/* cotton */

.cotton-article-layout {
  margin-bottom: 30px;
  text-align: justify;
}

.cotton-text-section-layout {
  width: 70%;
  text-align: justify;
}

.cotton-image-pane {
    float: right;
    width: 25%;
    text-align: center;

}

.cotton-image-pane-desc {
  float: clear;
  text-align: justify;
}

.cotton-structure-image {
  width: 30%;
  float: right;
  margin-right: 3%;
}

img.cotton-image-resize {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

img.cotton-stucture-image-resize {
  margin-left: 85px;
  margin-bottom: 30px;
  width: 70%;
  height: auto;
}

.cotton-footnote {
  font-size: 10px;
  color:#3B5998; 
  margin: 5px;
}

/* database */
.dropdown-view-select {
  width:100%;
  height:40px;
  margin-bottom: 15px;
}

.submit-button {
  display: block;
  width: 100px;
  height: 40px;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  background-color: #0073e6;
  margin-bottom: 15px;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: black;
}

.browse-button {
  display: block;
  border: 1px solid;
  height: 40px;
  border-radius: 5px;
  margin-bottom: 15px;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: black;
}

.form-dropdown-text {
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;

}

.form-label {
    font-size: 14px;
    font-weight: bolder;
    font: 'Fredoka One', cursive;
}

.form-input-text {
  width:100%;
  height: 35px;
  margin-bottom: 15px;
}

.table-display {
  width: 100%;
  padding-left: 25px;
}

.table-display  tr {
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

.table-display td {
  border-top: 1px solid #CCC;
  border-collapse: collapse;
}

.ui-datepicker {
    /*background: transparent;*/
    border: 1px solid #66AFE9;
    background:  #f2f2f2;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  cursor: pointer;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  height: 20px;
  line-height: 1;
  margin-top: 2px;
  width: 30px;
  text-decoration: underline;
  color: blue;
}
.ui-datepicker .ui-datepicker-prev {
  float: left;
  text-align: left;
}
.ui-datepicker .ui-datepicker-next {
  float: right;
  text-align: right;
}
.ui-datepicker .ui-datepicker-header {
  margin-bottom: 4px;
  text-align: center;
}
.ui-datepicker .ui-datepicker-calendar td:hover {
  background-color: #eee;
  cursor: pointer;
}