@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 {
    margin-top: 40px;
}

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

.content .content-majorhead {
    font-size: 2em;
    margin: 0.67em 0;
    padding-left: 20px;
}

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

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

.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;
}

.right { 
	float:right;
}

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

a {
	text-decoration:none;
	color: #3d3dff;
}

a:hover, a:active, a:focus {
    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 {
    
}

.testimonialCarousel {
    margin-left: auto;
    margin-right:auto;
    margin-top: 15px;
    margin-bottom: 60px;
		 
}

.pureFreeTrial, .pure-skin-BioCyc .pure-button.pureFreeTrial {
    position: relative;
    border: none;
    color: white;
    font-weight: normal;
    background: #181A6F;
    font-family: inherit;
    margin: 0;
    font-size: 16px;
    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: #181A6F;
    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: #5076AF;
    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 */

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

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

.dispatchSlides {
    margin-left: auto;
    margin-right: auto;
    max-width: 582px;
}

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

.dispatchSlides .slidePic {
	line-height: 85%;
	}

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

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


/* - S L I D E S - */
.dispatchSlides .slide {
    padding: 0;
    margin: 0;
    height: 450px;
    background: #FAFAFA;
}

.dispatchSlides .subhead {
	color: #333;
	}

.dispatchSlides .caption a{
    color: #6868af; 
}

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

.dispatchSlides .caption {
    text-align: right;
    font-size: 9px;
    color: #6e6e6e;
    margin: 0;
    padding: 0 .5em 0 2em;
}
/* ---------- END PROMO SLIDE SHOW  ---------- */

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

body {
    background-color: #ffffff;
}

#changeDBBtn:hover {
    background-image: linear-gradient(rgba(255,255,255,0.4),transparent,rgba(255,255,255,0.5));
}

/* from PURE buttons-core.css */
.pure-skin-BioCyc .pure-button, .changeDBBtn {
    /* 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;
    background-color: #c5c7c9;
    color: #161718;
    padding: 1px 6px;
}

/* 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 {
    text-decoration: none;
    border-radius: 2px;
    /* 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)); */
    background-image: linear-gradient(rgba(255,255,255,0.2),transparent,rgba(255,255,255,0.3));
}

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;
}


.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;
}

.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, .changeDBBtn.pure-button {
    height: 36px;
    background: #181A6F;
    font-size: 16px;
    color: white;
    /* margin-top: 10px; MARKUS
    margin-bottom: 10px; */
    vertical-align: middle;
    border-radius: 4px;
    border-width: 1px;
}

/* 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;
}

/* Formatting for the Product-summary page.  Added midford:Sep-16-2022 */

.psummary-sidenav {
    width: 185px;
    position: fixed;
    z-index: 1;
    top: 100px;
    left: 10px;
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
}

.psummary-sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 15px;
    color: #2196F3;
    display: block;
}

.psummary-sidenav a:hover {
    color: #064579;
}
    
.psummary-main {
    margin-left: 195px; /* Same width as the sidebar + left position in px */
    padding: 0px 10px;
}

.psummary-button {
  margin-top: 9px;
  padding: 12px 20px;
  font-size: 18px;
  color: #ffffff;
  background-color: #191E6D;
  border: none;
}


.psummary-button:hover {
  text-decoration: none;
  color: #F5974D;
  cursor: pointer;
}

.psummary-tab-button {
    background: #eee;
    overflow-x: hidden;
    padding: 8px 0;
}

.psummary-tab-button a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 15px;
    color: #2196F3;
    display: block;
}

/* Modified from jquery-ui formatting - not sure how to set the classes correctly */

.ui-tabs .ui-tabs-nav .p-summary-tabs li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
    color: #2196F3;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; 
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor .psummary-tabs-anchor {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
    background: #ddd;
    color: #2196F3;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px; 
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .psummary-tabs {
    color: #444;
    background: #888;
    margin-bottom: -1px;
    padding-bottom: 1px;
}


/* Formatting for the biocyc-checkout page.  Added midford:Sep-23-2022 */

.bc-checkout-main {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 10px;
	max-width: 800px;
	background-color: #EEE;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	box-shadow: 0 0 3px hsla(250, 40%, 30%, 0.8);
        border-radius: 10px;		      
}

#toolQuickLinks {
    display: flex;
    justify-content: center;
    align-items: center;
}

#toolQuickLinks > a {
    height: 22px;
    padding: 0 15px;
    font-size: 16px;
}

#toolQuickLinks > a:not(:first-child) {
    border-left: 2px solid #181A6F;
}

img.quickAccessST, img.quickAccessCellov {
    width: 18px;
    height: 16px;
    display: inline-block;
    margin-bottom: -2px;
}

img.quickAccessGenBro {
    width: 13px;
    height: 17px;
    display: inline-block;
    margin-bottom: -4px;
    transform: rotate(-10deg);
}

img.quickAccessODash {
    width: 19.26px;
    height: 15.59px;
    display: inline-block;
    margin-bottom: -2px;
}

div#kingdomCounts {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 29px;
}

div#kingdomCounts div {
    cursor: pointer;
    padding: 0px 12px;
    text-align: center;
}

.siteLogos {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
}

.siteLogos a {
    padding: 2px;
}