﻿.contentIcon-premium {
    border-bottom: none !important;
}

.contentIcon-premium:after {
    background: url(BloodHorsePlusIcon.png) no-repeat center center;
    background-size: 100% auto;
    content: '';
    display: inline-block;
    height: 20px;
    margin-left: 5px;
    width: 20px;
    vertical-align: text-bottom;
}
.river .contentIcon-premium:after { margin-bottom: 2px; }

.contentIcon-premium-racing:before {
    background: url(BloodHorsePlusIcon.png) no-repeat center center;
    background-size: 100% auto;
    content: '';
    display: inline-block;
    height: 15px;
    margin-right: 5px;
    width: 15px;
    vertical-align: bottom;
}

#bh-eql-container {
    width: 100%;
    border: solid 1px #d9d5ce;
    padding: 1rem;
}

.btn,
.btn-bh,
.btn-bh:visited {
    appearance: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(47, 79, 79);
    background-image: none;
    background-origin: padding-box;
    background-position: 0% 0%;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(255, 255, 255);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(255, 255, 255);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    /*display: block;*/
    /*float: right;*/
    font-family: "proxima-nova", "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: 18px;
    margin-right: 0px;
    margin-top: 0px;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 11.25px;
    padding-left: 13.5px;
    padding-right: 13.5px;
    padding-top: 13.5px;
    text-align: center;
    touch-action: manipulation;
}

.btn-secondary-bh,
.btn-secondary-bh,
.btn-secondary-bh:visited {
    appearance: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #d9d5ce;
    background-image: none;
    background-origin: padding-box;
    background-position: 0% 0%;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(255, 255, 255);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(255, 255, 255);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: #2f4f4f;
    cursor: pointer;
    display: block;
    float: right;
    font-family: "proxima-nova", "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 0px;
    margin-left: 18px;
    margin-right: 0px;
    margin-top: 0px;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 11.25px;
    padding-left: 13.5px;
    padding-right: 13.5px;
    padding-top: 13.5px;
    text-align: center;
    touch-action: manipulation;
}

    .btn-secondary-bh:hover,
    .btn-primary:hover {
        text-decoration: none;
        background: #a59163;
        color: #fff;
    }

.article-head.stakesShell {
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
}

.stakesShell-raceRecord, .StakesShell-PedBox, .stakesShell-familyNotes {
	margin-top: 50px;
}

.stakesShell-body {
    font-family: "proxima-nova","Montserrat", sans-serif;
}
.stakesShell-body p {
	    text-indent: -25px;
	    max-width: 42em;
	    line-height: 1.3em;
	    margin-bottom: 1.0em;
	    padding-left: 25px;
}

.stakesShell-bold {
    font-weight: bold;
}

.stakesShell-chart h3 {
	font-size: 1.75rem;
}
.stakesShell-body .ad-block {
    margin-bottom: 0;
	line-height: 0;
}


table.StakesShell-Pedigree tbody > tr:hover {
	background: none;
}

.stakesShell-raceRecap p {
    text-indent: 0;
    padding-left: 0;
    /*font-family: Georgia, Times, 'Times New Roman', serif;*/
    line-height: 1.75;
    font-size: 1.25rem;
}

.stakesShell-body table {
	font-size: 1.125rem;
}
.stakesShell-body tr.lifetime, .stakesShell-body tr:last-child td {
    border-top: 2px solid #d9d5ce;
    border-bottom: 0;
}
p.NewHorsePed {
	text-indent: 0;
	padding-left: 0;
	margin-bottom: 0;
}

.stakesShell-familyNotes-damProgeny {
    padding-left: 25px;
}

.stakesShell-familyNotes-damProgeny-subject {
	padding-left: 25px;
}

.StakesShell-FamilyNotes-SecondLine {
	padding-left: 50px;
}

.plus-featureVideo {
    background: #ecebea;
}
.plus-featureVideo article {
	margin-bottom: 1.0em;
}
.plus-featureVideo  figure {
    margin-bottom: 0.5em;
}
.plus-featureVideo h4 {
	    text-align: center;
	    padding: 1.5%;
}


li.content-video a:before {
    content: '';
    background: url(//cdn.bloodhorse.com/assets/2017/img/bh-icon-sprite.svg) no-repeat;
    background-position: 29% 85%;
    background-size: 400%;
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: .25em;
}

div#bh-horsecard-metering {
    /*position: fixed;*/ /* Here's what sticks it */
    top: 0; /* to the bottom of the window */
    left: 0; /* and to the left of the window. */
    height: 220px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #1A232E;
    color: #FFF3E0;
    text-align: center;
    border-top: 10px solid #09482f;
    border-bottom: 5px solid #FF0000;
    margin-bottom: 5px;
}

div#bh-content-metering {
    position: fixed; /* Here's what sticks it */
    bottom: 0; /* to the bottom of the window */
    left: 0; /* and to the left of the window. */
    height: 145px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #1A232E;
    color: #FFF3E0;
    text-align: center;
	border-top: 5px solid #FF0000;
    border-bottom: 10px solid #09482f;
}

 div#bh-content-metering .flexBox {
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    max-width: 1140px;
	    margin: auto;
}

div#bh-content-metering .counter-flexBox {
        display: flex;
        flex-direction: column;
        padding-right: 55px;
        border-right: 1px solid #2C3B4B;
        align-items: center;
    }
    div#bh-content-metering .content-flexBox {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-grow: 2;
	    padding-right: 25px;
    }

div#bh-content-metering #buttonContainer {
        padding-left: 31px;
        border-left: 1px solid #2C3B4B;
        height: 64px;
        display: flex;
        align-items: center;
    }



.cm-copy {
	text-align: center;
	font-family: 'Proxima Nova', sans-serif;
	font-weight: 600;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 1.07143px;
	text-transform: uppercase;
	color: #FFFFFF;
	opacity: 0.5;
}

#cm-counter {
	
	color: #FFF3E0;
	font-family: 'Proxima Nova', sans-serif;
	font-weight: bold;
	line-height: 43px;
	letter-spacing: 3.85714px;
	margin-bottom: 10px;
	text-align: center;
	
    width: 65px;height: 65px;border-radius: 50%;background: rgb(44, 59, 75);font-size: 20px;padding: 12px 13px;
}
.cm-header-1 {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    letter-spacing: 1.28571px;
    text-transform: uppercase;
    color: #FFF3E0;
    text-align: center;
    margin: 0 auto 7px auto;
	display: block;
}
.cm-header-2 {
    font-family: 'Proxima Nova', sans-serif;
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    color: #FFF3E0;
    text-align: center;
    margin: 0 auto;
	display: block;
}
.cm-header-3 {
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 24px;
    font-style: italic;
    text-align: center;
	color: #FFF3E0;
    opacity: 0.5;
    text-align: center;
    margin: 14px auto 14px auto;
    display: block;
}
#cm-buttonContainer {
	padding-left: 31px;
	border-left: 1px solid #2C3B4B;
	height: 64px;
	display: flex;
	align-items: center;
}
.content-flexBox-horseCard {
	margin-top: 10px;
}

#cm-buttonContainer-horseCard {
    border-left: 1px solid #2C3B4B;
    height: 64px;
    display: block !important;
    align-items: center;
    padding: 5px !important;
    margin: auto !important;
}

.cm-subscribe-button {
    background: #2f4f4f;
    color: #FFF3E0 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: "proxima-nova","Montserrat", sans-serif;
    text-align: center;
    padding: 18px 19px;
    width: 164px;
    height: 55px;
    text-decoration: none;
}

@media only screen and (max-width: 1279px) {
    /* For landscape layouts only */
    div#bh-content-metering .flexBox {
        max-width: 1024px;
    }

    .cm-header-2 {
        font-size: 24px;
        line-height: 24px;
    }

    .cm-header-3 {
        font-size: 14px;
        line-height: 14px;
    }
}

@media only screen and  (max-width: 1024px)  {
	/* For landscape layouts only */
	div#bh-content-metering .flexBox {
		max-width: 768px;
	}

	.cm-header-2 {
		font-size: 18px;
		line-height: 18px;
	}

	.cm-header-3 {
		font-size: 13px;
		line-height: 13px;
	}
}

@media only screen and (max-width: 769px) {
	/* For portrait layouts only */
	div#bh-content-metering .flexBox {
		max-width: 570px;
	}

	div#bh-content-metering .counter-flexBox,
	div#bh-content-metering .content-flexBox {
		padding-right: 10px;
	}

	div#bh-content-metering .content-flexBox {
		padding-left: 10px;
	}

	#cm-counter {
		background: transparent;
		color: #FFF3E0;
		font-family: 'Proxima Nova', sans-serif;
		font-weight: bold;
		font-size: 18px;
		line-height: 32px;
		letter-spacing: 3.85714px;
		margin-bottom: 10px;
		text-align: center;
		padding: 0;
		border-radius: unset;
		height: 25px;
		width: 40px;
	}

	.cm-header-2 {
		font-size: 12px;
		line-height: 12px;
	}

	.cm-header-3 {
		font-size: 12px;
		line-height: 12px;
	}
}

@media only screen and (max-width: 570px) {
	div#bh-content-metering .flexBox { max-width: 540px; }
	div#bh-content-metering .counter-flexBox {
		padding-left: 10px;
	}
    .cm-header-2 {
        display: none;
    }
    .cm-header-3 { margin-top: 4px;}
}

.plus-helper,
.plus-helper-member {
    color: #000000;
    padding: 5px;
    margin: 0 0 1em 0;
}
.plus-helper-faq {
	background: gold;
}

.plus-helper img {
    margin-top: 5px;
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 25px;
}
.plus-helper p {
	margin-left: 20px;
	margin-bottom: 0.25em;
	font-size: .95rem;
}
.plus-helper .title {
	font-weight: bold;
	font-size: 1.1rem;
}

a.plus-mainnav { color: #F00 !important; font-weight: 600; }

@media only screen and (min-width: 48em) {
    a.plus-mainnav {
	    color: #FF0 !important;
    }
}

    .plus-header-join a {
        text-transform: uppercase;
        margin-left: 25px;
        font-size: 20px;
        line-height: 33px;
        margin-bottom: 22px;
        font-weight: 600;
    }

    #new-payment-method-form .account-already {
        float: right;
        font-weight: 600;
        font-style: italic;
    }

        #new-payment-method-form .account-already a {
	        font-weight: 600;
	        font-style: italic;
        }

.plus-landing-page ul { list-style: disc; margin-left: 22px; }




/*== start of code for tooltips ==*/
.tool {
    cursor: help;
    position: relative;
}


/*== common styles for both parts of tool tip ==*/
.tool::before,
.tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100;
}


/*== pointer tip ==*/
.tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #3E474F transparent transparent transparent;
    bottom: 100%;
    content: "";
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
    transform: scale(.6) translateY(-90%);
}

.tool:hover::before,
.tool:focus::before {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}


/*== speech bubble ==*/
    .tool::after {
        background: #1A232E;
        border-radius: .25em;
        bottom: 180%;
        color: #FFF3E0;
        content: attr(data-tip);
        margin-left: -8.75em;
        padding: 1em !important;
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
        transform: scale(.6) translateY(50%);
        width: 17.5em;
        font-family: 'Proxima Nova', sans-serif;
        font-size: .8em;
        text-indent: 0 !important;
    }

.tool:hover::after,
.tool:focus::after {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}

@media (max-width: 760px) {
.tool::after {
    font-size: .75em;
    margin-left: -5em;
    width: 10em;
}
}

.plus-subscribe-buttonContainer {
    padding-left: 31px;
    height: 64px;
    display: flex;
    align-items: center;
}

.plus-subscribe-button {
    background: #2f4f4f;
    color: #FFF3E0 !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: "proxima-nova","Montserrat", sans-serif;
    text-align: center;
    padding: 18px 19px;
    width: 164px;
    height: 55px;
    text-decoration: none;
}