@font-face {
	font-family: "Aileron";
	src: url("/fonts/Aileron-Regular.eot?#iefix") format("embedded-opentype"),
		 /* url("/fonts/Aileron-Regular.woff2") format("woff2"), */
		 url("/fonts/Aileron-Regular.woff") format("woff"),
		 url("/fonts/Aileron-Regular.ttf") format("truetype"),
		 url("/fonts/Aileron-Regular.svg#Aileron-Regular") format("svg");
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family: "Aileron";
	src: url("/fonts/Aileron-SemiBold.eot?#iefix") format("embedded-opentype"),
		 /* url("/fonts/Aileron-SemiBold.woff2") format("woff2"), */
		 url("/fonts/Aileron-SemiBold.woff") format("woff"),
		 url("/fonts/Aileron-SemiBold.ttf") format("truetype"),
		 url("/fonts/Aileron-SemiBold.svg#Aileron-SemiBold") format("svg");
	font-style: normal;
	font-weight: 600;
}

@font-face {
	font-family: "Aileron";
	src: url("/fonts/Aileron-Bold.eot?#iefix") format("embedded-opentype"),
		 /* url("/fonts/Aileron-Bold.woff2") format("woff2"), */
		 url("/fonts/Aileron-Bold.woff") format("woff"),
		 url("/fonts/Aileron-Bold.ttf") format("truetype"),
		 url("/fonts/Aileron-Bold.svg#Aileron-Bold") format("svg");
	font-style: normal;
	font-weight: bold;
}

@font-face {
	font-family: "Aileron";
	src: url("/fonts/Aileron-Heavy.eot?#iefix") format("embedded-opentype"),
		 /* url("/fonts/Aileron-Heavy.woff2") format("woff2"), */
		 url("/fonts/Aileron-Heavy.woff") format("woff"),
		 url("/fonts/Aileron-Heavy.ttf") format("truetype"),
		 url("/fonts/Aileron-Heavy.svg#Aileron-Heavy") format("svg");
	font-style: normal;
	font-weight: 900;
}

body {
    font-family: "Aileron", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.45em;
    background-color: white;
    background-repeat: repeat-x;
}

.whitePaperGridTax a,
.whitePaperGridTax a:link,
.whitePaperGridTax a:visited,
.sourceName a,
.sourceName a:link,
.sourceName a:visited
{
    color: #808080;
}


.white-links a {
    color: #FFF !important
}

.header {
    -moz-box-shadow: inset 0 -10px 10px -50px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.5);
    box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.5);
    padding-bottom:15px;
    padding-top:15px;
    position: relative;
    z-index: 11;
}

    .header ul {
        margin-bottom: 0
    }

    .header li {
        margin-left:24px
    }

        .header li a {
            font-size: 14px
        }

.navbar-brand {
    height:auto;
    float:none;
}

.sponsored-by-top {
    max-height:32px;
}

.sponsored-by-label {
    font-size:11px;
}

#welcome-bar {
	padding-top: 15px;
	padding-bottom: 15px;
}

    #welcome-bar a.logo {
        font-size: 20px;
        font-weight: bold;
        padding: 0px;
    }

    #welcome-bar a.logo span {
        font-weight:lighter;
    }

#welcome-bar div.welcome-col {
    margin-top: 14px;
    margin-bottom: 14px;
}

#main-menu {
    padding: 0;
    border-radius: 0;
    border:0;
}

    #main-menu ul {
        display: -moz-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        width: 100%;
        margin-bottom: 0;
        box-shadow: 1px 1px 5px #D0D0D088;
    }

    #main-menu a {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        padding: 13px 15px;
    }

.main-menu-white {
    background-color: #FFF;
    /* box-shadow: 0px 0px 10px #D0D0D0; */
    position: relative;
    z-index: 10;
}

    .main-menu-white li {
        border-right: 1px solid #E6E6E6;
        background-color: #4e8f01
    }

/*
        .main-menu-white li:first-child {
            border-left: 1px solid #E6E6E6
        }
*/

        .main-menu-white li:last-child {
            border-right: none;
        }

#marquee h2 {
    margin-top:0;
}

.blue-links a.logo {
    color: #102E58
}

.form-control,
.btn{
    border-radius:20px;
}

.search-bar {
    padding:12px 0 0 0;
}

    .search-bar input {
        background-color: #EFEFEF;
        border: none;
        border-radius: 20px
    }

    .search-bar .glyphicon {
        padding-right: 10px
    }

    .search-bar button{
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 0
    }


.text-muted {
    color:#999;
}

.text-error {
    color: red;
}

#divPromoBanner {
    background-color:#333;
    color:#FFF;
}

    #divPromoBanner a,
    #divPromoBanner a:link,
    #divPromoBanner a:visited {
        color:#FFF;
    }

.promo-details {
    padding:10px 0;
}

/* Marquee Styles */
#marquee {
    background-color: #FFF;
    -webkit-box-shadow: 0px 5px 10px #D0D0D0;
       -moz-box-shadow: 0px 5px 10px #D0D0D0;
            box-shadow: 0px 5px 10px #D0D0D0;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 9;
}

.featured-post {
    margin-bottom:0;
}

    .featured-post img {
        width: 100%;
    }

    .featured-post p {
        font-size: 0.89em;
        line-height: 1.5;
    }

.learn-more {
    font-size: 0.89em;
    font-weight: bold
}

    .learn-more span {
        font-size: 10px
    }

.featured-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px
}

.marquee-item {
    margin-bottom: 30px
}

    .marquee-item img {
        border: 1px solid #838383;
        margin-bottom: 15px;
        width: 100%
    }

    .marquee-item h4 {
        font-size: 16px;
        margin-bottom: 5px;
        margin-top: 0
    }

    .marquee-item p {
        font-size: 12px
    }


/* Homepage body Styles */
#body-content {
    min-height: 600px;
    padding-top: 30px
}

#positioning {
    margin-bottom: 30px;
    padding-left: 40px;
    padding-right: 40px
}

    #positioning h1 {
        font-weight: bold;
        margin-top: 0
    }

        #positioning h1 span {
            font-weight: lighter
        }

    #positioning p {
        color: #595959;
        font-size: 16px;
        line-height: 1.5
    }

/* Border Box Styles */
#border-boxes {
    margin-bottom: 30px;
    margin-top: 30px
}

.border-box {
    background-color: #FFF;
    border: 2px solid #000;
    color: #808080;
    font-size: 12px;
    padding: 20px
}

    .border-box li {
        margin-bottom: 10px
    }

    .border-box h3 {
        border-bottom: 2px solid;
        margin: 0 0 10px;
        padding: 0 0 10px
    }

        .border-box h3 span {
            font-weight: lighter
        }

    .border-box a {
        font-weight: bold;
        text-decoration: underline
    }

.border-box-link {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 30px;
    margin-left: 22px;
    padding: 5px 10px
}

    .border-box-link .glyphicon {
        font-size: 10px
    }

#divWhitePaperSearch {
    padding:10px 20px;
    background-color:#333;
    color:#FFF;
    vertical-align:middle;
}


.btn-primary {
    background-color: #4e8f01;
    border-color: #4e8f01;
}

/* Square border around an oval button looked terrible.
 * just change background color instead.
 */
.btn-primary:focus {
    outline: none;
    background-color: #3d7101;
}

.whitePaperGridTitle {
    font-size:1.0625em;
}

/* Link Box Styles */
.link-box {
    background-color: #FFF;
    margin-bottom: 30px;
    -webkit-box-shadow: 0px 5px 10px #D0D0D0;
       -moz-box-shadow: 0px 5px 10px #D0D0D0;
            box-shadow: 0px 5px 10px #D0D0D0;
    /* font-size: 14px; */
}

    .link-box h3 {
        font-size: 24px;
        margin: 0;
        padding: 10px 25px;
    }

        .link-box h3 span {
            font-weight: lighter
        }

.link-box-inner {
    padding:15px 25px
}

.dataGridFooter {
    padding:10px 8px 0;
}

.link-box-inner div.sourceName {
    font-style: italic;
}

.link-box-inner .table {
    margin-bottom: 0;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    border-top:0;
    border-bottom:0;
}

.link-box:not(.no-style-lists) ol,
.link-box:not(.no-style-lists) ul {
    margin: 0 0 0 25px;
    padding: 0;
    list-style-position: outside;
    font-weight: bold
}

    .link-box:not(.no-style-lists) ol li,
    .link-box:not(.no-style-lists) ul li {
        margin-bottom: 5px
    }

    .link-box:not(.no-style-lists) ol a,
    .link-box:not(.no-style-lists) ul a {
        text-decoration: underline
    }


.link-box-blue h3 {
    background-color: #1F5CAF;
    color: #FFF;
}

.link-box-blue ol,
.link-box-blue ul {
    color: #1F5CAF
}

.link-box-green h3 {
    background-color: #2c4e01;
    color: #FFF;
}


/* Whitepapers are in link-box-green, so don't style the lists in them. */
.link-box-green:not(.no-style-lists) ol,
.link-box-green:not(.no-style-lists) ul {
    color: #2c4e01;
}

.link-box-green:not(.no-style-lists) ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0
}


/* The Related Quotes box on the home page */
div#quotes {
    display: none; /* Display is changed by JS. */
}

    div#quotes picture {
        position: absolute;
        top: 10px;
        right:10px;
    }

    div#quotes img {
        vertical-align: top;
    }


/* Footer Styles */
footer {
    padding-bottom: 30px
}

#footer-nav {
    /* box-shadow: 0px 0px 10px rgba(0,0,0,0.5); */
    margin-bottom: 15px;
    font-weight: 600;
}

    #footer-nav ul {
        columns: 4;
        -webkit-columns: 4;
        -moz-columns: 4;
        margin-bottom:0;
    }

        #footer-nav ul li {
            margin-bottom:0;
        }

.footer-top {
    background-color: #FFF;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
    height: 22px;
    position: relative;
    z-index: 10;
}

#footer-logo {
    padding-top:0
}

    #footer-logo h3 {
        font-size: 30px
    }

        #footer-logo h3 span {
            font-weight: lighter
        }

.main #footer-nav {
    padding: 5px 0px 5px 0px
}

.navbar-default .navbar-toggle {
    border-color: transparent
}

#marquee h2 {
    font-size:1.7em;
}

#marquee .featured-img {
    margin-bottom:15px;
}

/* Spacing on whitepapers.aspx page. */
table.table>tbody>tr>td.searchResults>input {
    margin-bottom: 10px;
}

/* Notification box on registerShort and MyAccount. */
.alert-container {
    padding:20px;
    font-style: italic;
}

/* Smaller notifications at the bottom of MyAccout */
td.notify-container {
    text-align: center;
    font-style: italic;
}

/* Header in RegisterShort.aspx */
#regFormHeader {
    margin-bottom: 1em;
}

input.responsive-placeholder::-moz-placeholder          { color: rgba(255, 255, 255) }
input.responsive-placeholder:-ms-input-placeholder      { color: rgba(255, 255, 255) }
input.responsive-placeholder::-webkit-input-placeholder { color: rgba(255, 255, 255) }

.table>tbody>tr>td.regShortFormLeft {
    width: 10em;
}

@media(max-width:580px) {
    .table>tbody>tr>td.regFormLeft,
    .table>tbody>tr>td.regFormRight,
    .table>tbody>tr>td.searchResults,
    .table>tbody>tr>td.tdSubmit
    {
        display: block;
        padding: 0px;
    }

    /* For popup forms, we hide the label altogether and use placeholders instead. */
    .table>tbody>tr.d-580-none,
    .table>tbody>tr>td.d-580-none
    {
        display: none;
    }

    /* For popup forms, leave a small space to squeeze a lot onto the popup. */
    .table>tbody>tr>td.popup-form {
        padding-bottom: 6px;
    }

    .table>tbody>tr>td.vspace {
        padding-top: 1em;
    }

    /* Show placeholders only when we're narrow. (When wide,  we show labels instead.)
     *  https://stackoverflow.com/questions/18176102/swap-placeholder-text-based-on-resolution-media-query
     */
    input.responsive-placeholder::-moz-placeholder          { color: rgba(125, 125, 125) }
    input.responsive-placeholder:-ms-input-placeholder      { color: rgba(125, 125, 125) }
    input.responsive-placeholder::-webkit-input-placeholder { color: rgba(125, 125, 125) }
}

@media(max-width:440px) {
    /* For footer */
    .col-xxs-12 {
        width: 100%
    }

    .narrow-gutter-xxs {
        padding-right:5px;
        padding-left:5px;
    }
}

@media(min-width:500px) and (max-width:767px) {
    /* For ThisOrThat.aspx, text at bottom */
    /* Size between sm and xs */
    .col-ss-1 {
        width: 8%;
        float: left;
    }

    .col-ss-2 {
        width: 17%;
        float: left;
    }

    .col-ss-3 {
        width: 25%;
        float: left;
    }

    .col-ss-6 {
        width: 50%;
        float: left;
    }

    .col-ss-8 {
        width: 66%;
        float: left;
    }

    .col-ss-10 {
        width: 84%;
        float: left;
    }
}

@media(min-width:544px) {
    .header li {
        margin-left: 10px
    }

    .header li a {
        font-size: 12px
    }
}

@media(min-width:768px) {

    #main-menu a.logo {
        font-size: 20px
    }

    #main-menu a.logo {
        display: inline-block;
    }

    .navbar-brand {
        margin-left:0;
    }

    /* Header 'Sponsored By' logo */
    .float-right-sm {
        float: right
    }

    .text-center-sm {
        text-align: center
    }

    .text-right-sm {
        text-align: right
    }

    ul.nav li.list-inline-item {
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
                flex-grow: 1;
        text-align: center;
    }

    div.navbar-collapse {
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media(min-width:992px) {
    .sidebar-header {
        margin-top:0;
        padding-bottom:10px;
        border-bottom:1px solid #CCC;
    }
    
    #marquee .featured-img {
        margin-bottom: 0;
    }

    #main-menu a {
        font-size: 14px
    }

    div.navbar-collapse {
        padding-right: 0px;
        padding-left: 0px;
    }

    /* 5 1/2 Bootstrap columns for this/that with 1 col between. */
    .col-md-5_5 {
        width: 45.83333333%;
    }

    .float-right-md {
        float: right;
    }
}


@media(min-width:1200px) {
    div.navbar-collapse {
        padding-right: 0px;
        padding-left: 0px;
    }
}



/* We're switching the nav bar to flexbox, but it doesn't linearize for mobile
 * properly like that, so we switch back to straight-up block elements on mobile.
 */
@media not screen and (min-width: 768px) {  /* < 768px */
    #main-menu ul {
        display: block;
    }
}





.primary-color,
.primary-color-links a {
    color: #4e8f01;
}

.secondary-color,
.secondary-color-links a {
    color: #4e8f01 !important
}

.primary-color-bg {
    background-color: #4e8f01;
    color: #FFF
}

    .primary-color-bg a {
        color: #FFF
    }

.secondary-color-bg {
    background-color: #4e8f01;
    color: #FFF
}

    .secondary-color-bg a {
        color: #FFF
    }

.primary-color-border {
    border-color: #4e8f01;
}

.secondary-color-border {
    border-color: #4e8f01
}

.dark-primary-color,
.dark-primary-color-links a {
    color: #2c4e01 !important
}

/* Specific Footer Color Styles */
.main footer,
.main footer a,
.main footer a:link,
.main footer a:visited{
    color: rgba(0, 0, 0, 0.64);
    font-size: 15px;
    line-height: 1.74em;
}

.main #footer-nav {
    background-color: #4e8f01
}

    .main #footer-nav a {
        color:rgba(255,255,255,0.85);
        /* Make footer nav buttons bigger--easier to click. */
        display: inline-block;
        width: 100%;
        padding: 3px 0px;
    }

.main #footer-logo h3 {
    color: #4e8f01
}

/* Cheap and dirty way of making an approximate sticky footer.
 * It's not exact, but it's good enough for now. Expand the div
 * above the footer to roughly the right size.
 */
div.fill-page {
    min-height:    -moz-calc(100vh - 445px);
    min-height: -webkit-calc(100vh - 445px);
    min-height:         calc(100vh - 445px);
}

/* Right-justify the journal source. If no room left-justify on the next line.
   https://stackoverflow.com/questions/26815404/remove-float-right-on-wrap
   Flexbox shows better promise once browser support improves. */
div.wrap {
    text-align: justify;
}
div.wrap div {
    vertical-align: top;
    display: inline-block;
    text-align: left;
}
div.wrap::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

/* Gradient Styles */
.primary-gradient {
    background: white; /* Old browsers */
    background: -moz-linear-gradient( white, rgb(208, 217, 200) ); /* FF3.6-15 */
    background: -webkit-linear-gradient( white, rgb(208, 217, 200) ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient( white, rgb(208, 217, 200) ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF0', endColorstr='#2c510138',GradientType=0 ); /* IE6-9 */

}

    .primary-gradient a {
        color: #FFF
    }

a:link,
a:visited,
a{
    color: #4e8f01;
}

/* Navbar Color Overrides */
#main-menu.navbar-default .navbar-nav > li > a {
    color:white;
    width: 100%;
}

#utility a,
#utility a:link,
#utility a:visited {
    color:#FFF;
}

.navbar-brand, h1, h2, h3, h4, .whitePaperGridTitle {
    font-family: 'Roboto Slab', serif;
}


/* Make whitepaper title links stand out so they actually look like titles. */
div.no-style-lists td.searchResults a.openCallHeadline {
    display: inline-block;
    margin-bottom: 0.25em;
    font-size: 1.333em;
}


div.no-style-lists td.searchResults a.whitepaper-footer-link {
    display: block;
    margin-top: 0.5em;
}

/* Spread out the search form elements from each other and the content. */
input.whitepaper-search-field {
    margin-bottom: 6px;
    vertical-align: baseline !important; /* Override bootstrap */
}

div.no-style-lists div.form-inline {
    margin-bottom: 1.5em;
}

/* h1, h2, etc. relative instead of absolute, so they can be resized. */
.h1, h1 {
    font-size: 2em;
}

.h2, h2 {
    font-size: 1.667em;
}


div.link-box div.link-box-inner p.largerPageHeadline {
    font-size: 1.333em;
}

/* For the Contact Us page. Space out the addresses. */
a.contact-address {
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 5px;
}

/* For rotating images, they are all the same size. The first image is in the
 * flow like any normal single image. All the other images in the rotation are
 * hidden behind the main image by making position absolute, top: 0 and z-index
 * -1, so they are literally behind the main image. So the main image will
 * leave space (since it's in the flow), and will handle clicks (since it's out
 * in front of the others).
 */
input.next-rotating-image {
	position: absolute;
	/* padding-right: 30px; Don't need, since img is float right now. */
	top: 0px;
	z-index: -1;
}

input.rotating-images {
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}


/* Div containing floated image(s) on home page */
div.home-images {
	position: relative;
	float: right;
	padding-left: 30px;
	padding-bottom: 5px;
}
	div.home-images input, div.home-images img {
		width: 441px;
	}

@media(max-width: 1199px) {
	div.home-images input, div.home-images img {
		width: 357px;
	}
}

/* Let it stretch across the page */
@media(max-width:991px) {
	div.home-images {
		padding-left: 0px;
		padding-bottom: 0px;
	}
		div.home-images input, div.home-images img {
			width: 100%;
		}
}

@media(max-width:767px) {
	div.home-images input, div.home-images img {
		width: 100%;
	}
}


/* Font-scaling buttons */
span.scalefont {
	display: inline-block;
	color: white;
	background-color: #4e8f01;
	border-color: #4e8f01;
	-webkit-border-radius: 14px;
	   -moz-border-radius: 14px;
	        border-radius: 14px;
	margin-right: 10px;
}

span.scalefontdown {
	font-size: 12px;
	height: 21px;
	width: 21px;
	padding-left: 6.6px;
}

span.scalefontnaught {
	font-size: 16px;
	height: 23px;
	width: 23px;
	padding-left: 6px;
}

span.scalefontup {
	font-size: 20px;
	height: 24px;
	width: 24px;
	padding-left: 5px;
}


/* Bootstrap modal popup finds a missing function in JQuery. So we come up with
 * some of our own code to make the modal popup login box work.
 * Curtain backdrop for the background.
 */
#login div#curtainbackdrop, div.curtainbackdrop {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: none;
	background-color: lightslategray;
	opacity: 0.5;
}


/* Notice displayed before we drop tracking cookies. */
#notice {
    position: fixed;
    z-index: 1000;
    background-color: #FEE;
    padding: 10px;
    bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 1em;
    -webkit-box-shadow: 2px 2px 15px #000000;
       -moz-box-shadow: 2px 2px 15px #000000;
            box-shadow: 2px 2px 15px #000000;
            box-shadow: 2px 2px 15px #00000055;
    transform: translateY(100%);
    opacity: 0;
    transition-duration: 500ms;
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

#notice p {
    margin-bottom: 0px;
}


h2.cookie-type {
    margin-top: 1.5em;
}

div.cookie-row {
    margin-bottom: 0.3em;
}

    div.cookie-row div.cookie-name {
        width: 11.5em;
        float: left;
        padding-left: 1em;
        font-weight: 600;
    }

    div.cookie-row div.cookie-info {
        width: 11.5em;
        float: left;
        padding-left: 1.5em;
    }


/* Drop cap on the default page. Since we're doing these stories manually now,
 * the formatting is badly inconsistent. As such, trying to find the appropriate
 * letter to drop-cap is like hitting a moving target. Skip it for now.
 */
/* div.featured-post p::first-letter {
	float: left;
	font-size: 3.25em;
	line-height: 0.68em;
	padding-top: 0.11em;
	padding-right: 0.12em;
}
*/
div.featured-post p.abstract::first-letter {
	float: left;
	font-size: 3.25em;
	line-height: 0.68em;
	padding-top: 0.11em;
	padding-right: 0.12em;
}

.clear-left {
	clear: left;
}