@charset "UTF-8";


/* ----------------------READ THIS------------------------

   INTENDED TO ONLY INCLUDE STYLES NEEDED FOR THE HOMEPAGE

   Any directives needed for the banner or menus or other stuff 
   that needs to appear on every page in our site should either 
   be moved to style.css (if they're intended for remote ptools
   users too) or to userWebsiteCustomization.css (if they're 
   specific to BioCyc).

   ----------------------READ THIS------------------------ */


/* ---------- FROM layouts/marketing.css  ---------- */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    line-height: 1.7em;
}

.l-box {
    padding: 1em;
}

.header {
    margin: 0 0;
}

body .primary-button {
    background: #02a6eb;
    color: #fff;
}

.learn-more-href {
    text-decoration: underline;
    color: #181A6F;
    font-weight: 600;
}

.content .content-subhead {
    color: #999;
    padding-bottom: 0.3em;
    text-transform: uppercase;
    margin: 0;
    border-bottom: 2px solid #eee;
    display: inline-block;
}

.content-footer-subhead {
    color: white;
    padding-top: 20px;
    padding-bottom: 0.9em;
    margin: 0;
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
}

table.footer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    height: 85px;
}

.footer div {
    margin-left: 95px;
}

/* ---------- BEGIN GENERAL  ---------- */

/*
.showBorder {
	border:1px solid #000;
}
.showRedBorder {
	border:2px solid #f00;
}
.showGreenBorder {
	border:3px solid #0f0;
}

.showOrangeBG {
	    background: #F89838;

}
 .temp-nav {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 20px;
	max-width: 1200px;
	border: 0px;
	 color:#FFFFFF;
	 background:#F89838;
	 height:100px;
    box-shadow: 0 0 3px hsla(250, 40%, 30%, 0.8);
 }

*/

.caption {
	font-size: 75%;
	color: #999;
	margin: 0;
    padding: 0 0 0 2em;
}

.whitespace-none {
	margin: 0;
    padding: 0;
}

/*
.whitespace-min {
	margin: 1em;
    padding: 1em;
}

.whitespace-wide-margin {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
    padding: 0px;
	max-width: 1200px;
	border: 0px;
}
*/

.whitespace-wide-margin-border {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	max-width: 1200px;
	background-color: #FFF;
/*	border-top: 0px;
	border-bottom: 0px;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	box-shadow: 0 0 3px hsla(250, 40%, 30%, 0.8);*/
}

.menubar-wide-margin-border {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	max-width: 1200px;
	background-color: #181A6F;
	color: white;
}

.top-menubar-cell {
    background-color:#181A6F; 
    height:49px;
}

.footer-wide-margin-border {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-color: #181A6F;
	color: white;
}

.footer-wide-margin-border-alt-color {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-color: #F89838;
	color: white;
}

.footer-wide-margin-border .pure-g-r {
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
}

.right { 
	float:right;
}

body, p, li, h1, h2, h3, h4, h5, h6, td {
	font-family: Arial, Helvetica, sans-serif;
}

a {
	text-decoration:none;
	color: #00f;
}

a:hover, a:active {
	text-decoration:underline;
}

/*
.content {
	border:1px solid #CCC;
	background-color: #ebebeb;
	font-size: 16px;
}
*/

.content {
	background-color: #FFFFFF;
	font-size: 16px;
}


.subhead {
	margin-top: 0px;
	color: #999;
	font-weight: 300;
	line-height: 1.4em;
	font-size: 100%;
}

.divider {
	margin-left: 48px;
	margin-right: 48px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #CCC;

}

.l-box-home {
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: 0.5em;
	padding-bottom: 0;
	line-height: 1.5em;
	font-size: 100%;
	background: #FAFAFA;
	margin-left: 40px;
}


    .l-box-home .splash-head {
        line-height: 1.25em;
    }

#footerNav .pure-g-r img {
    
}

.pureFreeTrial {
    position: relative;
    border: none;
    outline: none;
    color: #181A6F;
    font-weight: 600;
    background: #F89838;
    font-family: inherit;
    margin: 0;
    font-size: 18px;
    height: 39px;
    width: fit-content;
    margin-bottom: 31px;
}

.pureOrangeQuote {
    width: 283px;
    height: 186px;
    margin-left: auto; /* 17px; */
    margin-right: auto;
    margin-top: -21px; /* Who the hell knows why */
    position: relative;
    color: white;
    background: #F89838;
    box-shadow: 4px 5px 12px rgba(0, 0, 0, 0.30);
}

.pureBlueQuote {
    width: 283px;
    height: 186px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -21px; /* Who the hell knows why */
    position:relative;
    color: white;
    background: #181A6F;
    box-shadow: 4px 5px 12px rgba(0, 0, 0, 0.30);
}

.pureBlueQuote p,
.pureOrangeQuote p {
    font-size: 22px;
    margin-left: 30px;
    margin-right: 8px;
    margin-block: 21px;
    padding-top: 23px;
}

.pureBlueQuote .attribution,
.pureOrangeQuote .attribution {
    font-size: 14px;
    margin-left: 0px;
    padding-right: 21px;
    text-align: right;
    width: inherit;
    position: absolute;
    bottom: 0px;
}

.pureBlueQuote .attribution-img,
.pureOrangeQuote .attribution-img {
    position: absolute;
    bottom: 33px;
    margin-left: 10px;
}

div#ilogin { 
    height: 0px;
}

.login {
    height: 49px;
    padding-top: 14px;
}

.login a {
    position: relative;
    font-size: 16px;
    color: white;
}

.login a:hover {
	color:#AAA;
}

.chooseTitle {
    font-size: 25px;
    line-height: 36px;
    color: #181A6F;
}

/* Homepage Modules */

box-shadow: 4px 5px 12px rgba(0, 0, 0, 0.15);
}

/* ---------- END  GENERAL  ---------- */


/* ---------- BEGIN PAGE FOOTER  ---------- */

#footerNav {
    margin: 0 auto 0;
    padding: 0em 0.5em;
    background: #eee;
}
/*    .footerNav .splash-head {
        font-size: 300%;
        margin: 0em 0;
        line-height: 1.2em;
    }
    .footerNav .splash-subhead {
        color: #999;
        font-weight: 300;
        line-height: 1.4em;
    }
    .footerNav .primary-button {
        font-size: 150%;
    }
*/

#footerNav .l-box {
    padding-bottom: 20px;
}

#footerNav a {
	color: white;
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
}

#footerNav a:hover {
	color: #AAA;
}

.footer {
    background: #F89838;
    color: white;
    padding: 1em;
    font-size: 10px;
    line-height: 125%;
}

.footer a {
    text-align: left;
    color: white;
}

.footer a:hover {
	color:#0000FF;
}

/* ---------- END PAGE FOOTER  ---------- */


/* ---------- BEGIN PROMO SLIDE SHOW  ---------- */

/* - GENERAL - */
/*
#spiffySlides {
   position: relative;
    overflow: hidden;
    /* display: inline-block; /
    margin: 0;
    padding: 2em 2em 0.5em;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
    background: #eee;
    zoom: 1; *display: inline;
}
*/
#spiffySlides {
   position: relative;
    overflow: hidden;
    /* display: inline-block; */
    margin: 0;
    padding: 2em 2em 0.0em;
    background: #FAFAFA;
    zoom: 1; *display: inline;
    margin-left: 18px;
}

@media screen and (max-width: 768px){
	#spiffySlides {
	border-top: 1px solid #CCC;
	}
}

#spiffySlides .slidePic {
/*	float: left;
	width: 650px;
*/
	line-height: 85%;
/*	padding-bottom: 1em; */
	}

#spiffySlides .slidePic img {
	box-shadow: 0 0 3px hsla(250, 40%, 30%, 0.8);
	width: 100%;
	}

#spiffySlides .slideText {
/*	margin-left: 670px; */
	padding: 0 1.5em;
	}


/* - S L I D E S - */
#spiffySlides .slides {
    margin: 0;
    padding: 0;
    height: 450px;
 /*   position: relative; */
}
#spiffySlides .slides li {
    position: absolute;
    left: 0;
    top: 0;
	margin: 0;
	padding: 0;
    list-style: none;
    display: inline;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition:    opacity 0.3s ease-out;
    -o-transition:      opacity 0.3s ease-out;
    transition:         opacity 0.3s ease-out;
    z-index: -1;
    width: 582px;
}
#spiffySlides .slides .active {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition:    opacity 0.3s ease-out;
    -o-transition:      opacity 0.3s ease-out;
    transition:         opacity 0.3s ease-out;
    z-index: 0;
}

#spiffySlides .subhead {
	color: #333;
	}

#spiffySlides .caption a{
	color: #99f
}

#spiffySlides .caption a:hover, a:active{
	color: #00f;
}

#spiffySlides .caption {
    text-align: right;
    font-size: 9px;
    color: #999;
    margin: 0;
    padding: 0 .5em 0 2em;
}


/* - C O N T R O L S - */

#spiffySlides .controls {
    text-align: left;
    padding: 0px 0 0;
    position: absolute;
    z-index: 1;
    font-size: 1px;
    bottom: 22px;
    left: 23px;
}

#spiffySlides .controls li {
    list-style: none;
    display: inline;
}
#spiffySlides .controls li a {
    display: inline-block;
    zoom: 1; *display: inline;
    border: solid 1px #191e6d;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    color: white;
}
#spiffySlides .controls a:hover {
	background-color: #FFFFFF;
	color: #FFFFFF;
}

#spiffySlides .controls .active a,
#spiffySlides .controls .active a:hover {
    background-color: #191e6d;
    border: solid 1px #191e6d;
    color: #191e6d;
}


/* - P A U S E   M E S S A G E - */

#spiffySlides .paused {
    opacity: 0;
    filter: alpha(opacity=0);
 /*   letter-spacing: 18px; */
	padding-right: 1.5 em;
   color: #999;
    width: 630px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;
}
#spiffySlides:hover .paused {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;
}

/* ---------- END PROMO SLIDE SHOW  ---------- */

/* ---------- BEGIN BIOCYC SKIN ---------- */

body {
    background-color: #ffffff;
}

/* from PURE buttons-core.css */
.pure-skin-BioCyc .pure-button {
    /* Structure */
    display: inline-block;
    *display: inline; /*IE 6/7*/
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Firefox: Get rid of the inner focus border */
.pure-skin-BioCyc .pure-button::-moz-focus-inner{
    padding: 0;
    border: 0;
}
/* end from PURE buttons-core.css */
/* from PURE buttons.css */
/*csslint unqualified-attributes:false*/

.pure-skin-BioCyc .pure-button {
    font-size: 100%;
    *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
    *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
    padding: 0.5em 1.0em 0.5em;
    color: #161718; /* rgba not supported (IE 8) */
    /* color: rgba(0, 0, 0, 0.80); rgba supported */
    /* *color: #444; IE 6 & 7 */
    border: 1px solid #b7babd; /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
    background-color: #c5c7c9;
    text-decoration: none;
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
    /* Transitions */
    -webkit-transition: 0.1s linear -webkit-box-shadow;
    -moz-transition: 0.1s linear -moz-box-shadow;
    -ms-transition: 0.1s linear box-shadow;
    -o-transition: 0.1s linear box-shadow;
    transition: 0.1s linear box-shadow;
}

.pure-skin-BioCyc .pure-button-hover,
.pure-skin-BioCyc .pure-button:hover {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000', GradientType=0);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.05)));
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.05));
    background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.05));
}

details summary {
    cursor: pointer;
}

.accordion details {
    margin-bottom: 4px;
}

.accordion details>div {
    margin-top: 6px;
    margin-left: 26px;
}

/* Modifications to htdocs/style.css for new website look billington:Apr-22-2021 */

input.inputQuickSearch {
    font-size: 16px;
    color: black;
    background-color: white;
    white-space: nowrap;
    border: 0;
    width: 95%;
}

/*** ADDED RAB BEGIN ***/

div#topBannerMenuHome {
 z-index: 10;
 position:relative;
 margin-bottom: 60px;
}


#pathwayToolsMenubarNew {z-index: 10000;
		     background: #181A6F;
		     overflow: hidden;
		     height: 49px
}

.toolbar-navigation {
    position: absolute;
    left: 96px;
    width: 300px;
    height: 49px;
}

.toolbar-account-info {
    position: absolute;
    left: 700px;
    width: 500px;
    height: 49px;
}

/* The dropdown container */
.toolbar-dropdown {
  float: left;
  overflow: hidden;
  height: 49px;
}

.sub-toolbar-dropdown {
}

/* Dropdown button */
.toolbar-dropdown .toolbar-dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.sub-toolbar-dropdown .sub-toolbar-dropbtn {
  font-size: 13px;
  border: none;
  outline: none;
  color: black;
  line-height: 26px;
  padding-left: 3px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.toolbar-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  box-sizing:border-box;
}

.sub-toolbar-dropdown-content {
  display: none;
  margin-left: 25px;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  box-sizing:border-box;
}

/* Links inside the dropdown */
.toolbar-dropdown-content a:not(.removedLink) {
  float: none;
  color: black;
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  line-height: 26px;
}

.sub-toolbar-dropdown-content a {
  float: none;
  color: black;
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  line-height: 26px;
}

.login a {
    color: white;
}

.login .toolbar-dropdown {
  float: right;
  overflow: hidden;
}

.login .toolbar-dropdown .toolbar-dropbtn {
  height: 30px;
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding-right: 16px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 31px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.login .toolbar-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  box-sizing:border-box;
  margin-left: -64px;
  min-width: unset;
}

/* Links inside the dropdown */
.login .toolbar-dropdown-content a {
  float: none;
  color: black;
  padding: 3px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  line-height: 26px;
  font-size: 13px;
}

/* Add a grey background color to dropdown links on hover */
.toolbar-dropdown-content a:hover {
  background-color: #ddd;
}

.sub-toolbar-dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.toolbar-dropdown:hover .toolbar-dropdown-content {
  display: block;
}

.sub-toolbar-dropdown:hover .sub-toolbar-dropdown-content {
  display: block;
}

.toolbar-toploginbtn {
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    font-size: 16px;
}

.toolbar-topsignbtn {
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-size: 16px;
    font-family: inherit;
    margin: 0;
}

.mega-column {
  float: left;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.mega-column a {
  float: none;
  color: black;
  padding-left: 3px;
  text-align: left;
}

.mega-column h3 {
    margin-bottom: 4px;
    color: black;
    font-size: 20px;
}

.mega-column hr {
    margin-top: 0px;
    margin-left: 0px;
    width: 116px;
    height: 0px;
    color: #F89838;
    opacity: unset;
    border: 2px solid #F89838;
}

.mega-column a:hover {
  background-color: #ddd;
}

.mega-row { 
    display: flex;
    flex-direction: row;
}

/* Clear floats after the columns */
.mega-row:after {
  content: "";
  display: table;
  clear: both;
}

.vl {
    border-right: 2px solid #D0D0D0;
    flex-grow: 1;
}

.sub-vl {

}


/* Used for the input text box of the quick search */

.changeDBBtn {
    height: 36px;
    background: #181A6F;
    font-size: 16px;
    color: white;
    /* margin-top: 10px; MARKUS
    margin-bottom: 10px; */
    vertical-align: middle;
}

/* billington:May-3-2021 moved to userWebsiteCustomization.css
.searchMenuDatabaseName {
    font-size: 16px;
    color: #1c2243;
    text-align: left;
    white-space: nowrap;
    padding-top: 2px;
}
*/

/* midford:May-24-2021 Changed font-size from 18px to prevent
   the containing table from overflowing for long org names */
#currentDatabaseName {
    vertical-align: baseline;
    font-size: 16px; 
}

form.lgSearchMenu {
    font-size: 16px;
    color: blue; /* #1c2243; */
    margin: 0;
    white-space: nowrap;
    display: inline-block;
}

#QSContainer {
    padding: 2px;
    color: black;
    background-color: white;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
    margin-right: 2px;
    margin-top: 11px;
    margin-bottom: 10px;
    width: 548px;
    height: 36px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

#qsIcon{
    font-size: 23px;
}


.dividerQuickAccessTools { 
            border-left: 2px solid #181A6F; 
            height: 22px; 
	    width: 15px;
        } 

/*** END ADDED RAB ***/

div#topBannerMenu {
 line-height: 1em; /* removed for new site */
 z-index: 10;
 position:relative;
}

.navBox {
    /* font-family: Helvetica, Arial, Verdana, sans-serif; */
	font-size: 12px;
	color: #333333;
	border: 1px solid #CCCCCC;
	position: fixed;
	top: 175px;
	right: 0px;
	padding: 0px;
	background-color: #EBEBEB;
	z-index: 6;
	width: 215px;
	max-height:100%;
	overflow-y:auto;
}

/* from htdocs/cgbrowser.css */
#cgControls {
    position:absolute;
    z-index: 10;
    top: 161px;
    right: 0px;
    border: 1px solid;
    background-color: white;
    vertical-align: top;
    border-radius: 5px;
    font-size: 90%
}

.pure-g {
    letter-spacing: normal;
}