/**
 * The story wrapper is around the subgrid and the text and
 * can be floated to enable a vertical subgrid.
 */
.ss .storyWrapper {
   min-height: 580px;
}

/**
 * The main story content CSS
 */

.ss .storyText {
   padding: 47px 20px 90px 127px;
	font-size: 0.9375em;
	line-height: 1.4;
}

.ss .storyText a {
   font-weight: bold;
}

.ss .storyText a:hover {
   color: #192030;
}

.ss .storyText a:focus {
   color: #fff;
   background: #556DA6;
   padding: 2px 0px;
}

.ss .storyText a:focus:hover,
.ss .storyText a:active {
   color: #192030;
   background: #fff;
   padding: 0;
}

.ss .storyText .image.body,
.ss .storyText .image.body2x {
   max-width: 472px;
}
.ss .storyText .image.body img,
.ss .storyText .image.body2x img {
   width: 100%;
   height: auto;
}

.ss .storyText ul {
   margin: 4px 0px 16px 0px;
}

.ss .storyText ul li {
   padding-left: 17px;
   background: url('../images/bullet.dot.png') 3px 8px no-repeat;
}

.ss .storyText ol {
   margin: 4px 0px 16px 21px;
}

.ss .storyText ol li {
   list-style: decimal inside none;
}

.ss .storyText h1,
.ss .storyText h1 p {
	font-size: 1.4667em;
	line-height: 1.2727;
   font-weight: bold;
   margin-bottom: 0.870em; /* 20px; */
   color: #222;
}

.ss .storyText h2 {
	font-size: 1.2em;
	line-height: 1.2778;
   font-weight: bold;
   margin-bottom: 2px;
}

.ss .storyText p,
.ss .storyText .remote {
   margin: 0.267em 0px 1.067em 0px; /* 4px 16px */
}

.ss .storyText strong em,
.ss .storyText em strong {
   font-weight: bold;
   font-style: normal;
}

.ss .storyText blockquote {
   margin-top: -10px;
}

.ss .storyText h2 + blockquote,
.ss .storyText ul + blockquote,
.ss .storyText ol + blockquote,
.ss .storyText blockquote + blockquote {
   margin-top: 0px;
}

.ss .storyText .image {
   margin: 22px 0px 20px 0px;
   position: relative;
}

.ss .storyText .titleImage {
   float: left;
   margin: 0 -4px 0 -167px;
}

.ss .storyText .teaser {
   font-size: 1.067em; /* 16px; */
   line-height: 1.313em; /* 21px; */
   margin: 0px 0px 1.500em 0px; /* 24px */
}

.ss .storyText .teaser strong {
   font-weight: 500;
}

.ss .storyText .image img {
   display: block;
}


.ss .storyText .image .credit {
   font-size: 11px;
   line-height: 1.3636;
   -webkit-text-size-adjust: none; /* Prevents credit overflow */
   -ms-text-size-adjust: none;
   text-size-adjust: none;
   text-align: right;
   color: #A5A5A5;
   position: absolute;
   margin-top: -1px;
   top: -14px;
   right: 0;
}

.ss .storyText .image .caption {
	font-size: 0.867em;
	line-height: 1.231;
	margin-top: 5px;
}

/**
 * Factbox Layout
 */
.ss .storyText .fact {
   float: left;
   width: 239px;
   margin: 4px 17px 3px -127px;
   padding: 0px 0px 5px 0px;
   display: inline;
   background: #F0F1F4;
}

.ss .storyText .fact .image {
   padding-left: 0px;
   margin: 0px 0px 6px 0px;
}

.ss .storyText .fact .image .credit {
   margin-top: -1px;
}
.ss .storyText .fact .image .caption {
   padding-left: 14px;
   width: 212px;
   margin-top: 3px;
}

/**
 * Opener = big size images with 639px width
 */
.ss .storyText .image.opener {
   padding: 0px;
   margin-left: -167px;
   width: 639px;
}

.ss .storyText .image.opener .credit,
.ss .storyText .image.opener .caption {
   width: 625px;
   padding-left: 14px;
}

.ss .storyText .image.opener .caption {
   margin-top: 3px;
   margin-bottom: 32px;
}

.ss .storyText .fact h2,
.ss .storyText .fact p,
.ss .storyText .fact ol,
.ss .storyText .fact ul,
.ss .storyText .fact blockquote,
.ss .storyText .fact .remote {
   padding-left: 14px;
   font-size: 0.867em; /* 13px; */
   line-height: 1.3846em; /* 18px; */
   margin: 6px 0px;
   width: 212px;
}

.ss .storyText .fact h2:first-child,
.ss .storyText .fact ol:first-child,
.ss .storyText .fact ul:first-child,
.ss .storyText .fact blockquote:first-child,
.ss .storyText .fact p:first-child  {
   margin-top: 10px;
}

.ss .storyText .fact h2 {
   margin-bottom: -2px;
}

.ss .storyText .fact ol {
   margin-left: 21px;
}

.ss .storyText .fact ul {
   list-style: none;
}

.ss .storyText .fact ul li {
   margin: 6px 0px;
   background: url('../images/bullet.dot.small.png') no-repeat 0px 6px;
   padding-left: 10px;
   list-style-image: none;
}

.ss .storyText .fact blockquote p {
   font-size: 1em;
   line-height: 1.308em;
   padding-left: 0;
   width: 100%;
   font-style: italic;
}

.ss .storyMeta {
   border-top: 5px solid #ebecf2;
   clear: both;
}

.ss .storyMeta a {
   text-decoration: none;
   font-weight: normal;
}

.ss .storyMeta a:hover,
.ss .storyMeta a:focus {
   text-decoration: underline;
}

.ss .storyMeta .date {
   float: left;
}
.ss .storyMeta .toplink {
   float: right;
   background: url("../images/arrow.right.png") no-repeat scroll right 6px transparent;
   padding-right: 12px;
}

.ss .storyMeta.socialshare {
    border-bottom: 5px solid #ebecf2;
    border-top: 0 none;
    overflow: hidden;
}

.ss .storyMeta.socialshare p {
    margin-bottom: 4px;
}

/** stripe box formatting overrides **/

.ss .storyText .stripe {
	margin: 0px 0px 15px -127px;
	width: 624px;
   height: 135px;
   padding: 12px 0 0 0;
}

.ss .storyText .stripe::after {
   height: 30px;
   left: 240px;
}

.ss .storyText .stripe-credits {
   margin: 0 -161px 0 0;
}

.ss .storyText .stripe p,
.ss .storyText .stripe h2 {
   font-size: 1em; /* 15px */
   line-height: 1.4;
   margin-top: 0.4em;
   margin-bottom: 0.4em;
}

.ss .storyText .stripe > .remote ~ * {
   margin-left: 256px;
   padding-right: 20px;
}
.ss .storyText .stripe > .remote.playing ~ * {
   margin-left: 127px;
}

.ss .storyText .stripe > .remote.playing ~ :last-child {
   padding-bottom: 10px;
}

.ss .storyText .stripe-credits {
   margin: 0;
   width: auto;
   text-align: right;
}

.ss .storyText .remote .video {
   margin: 0;
}
.ss .storyText .stripe .image,
.ss .storyText .stripe .remote {
   width: 240px;
   height: 135px;
}

.ss .storyText .stripe > .remote {
   margin: -12px 0 0 0;
}

.ss .storyText .stripe .remote.playing {
   float: none;
   width: 624px;
   height: 342px;
   padding-bottom: 10px;
}


/****** stripebox ******/
.ss .stripe > .remote {
   /** if overflow isn't hidden, the player
   forces the width/height of the .remote
   and the transition is not visible
   **/
   overflow: hidden;
   padding-bottom: 0;
   -webkit-transition: width 200ms ease-in, height 200ms ease-in;
   -moz-transition: width 200ms ease-in, height 200ms ease-in;
   -ms-transition: width 200ms ease-in, height 200ms ease-in;
   -o-transition: width 200ms ease-in, height 200ms ease-in;
   transition: width 200ms ease-in, height 200ms ease-in;
}

/* transition only in height when closing to avoid weird effect */
.ss .stripe > .remote:not(.playing) {
   -webkit-transition: height 200ms ease-in;
   -moz-transition: height 200ms ease-in;
   -ms-transition: height 200ms ease-in;
   -o-transition: height 200ms ease-in;
   transition: height 200ms ease-in;
}


/* in this case, it's really an credit */
.ss .stripe-credits {
   width: auto;
   text-align: right;
   color: #A6A6A6;
   font-size: 12px;
   line-height: 1.4167;
}

.ss .stripe-credits a {
   font-weight: normal;
}

.ss .stripe .remote .caption {
   display: none;
}

.ss .stripe .remote .video .bigplaybutton {
   border-radius: 0 !important;
   right: 0px !important;
   bottom: 0px !important;
   padding: 10px 6px 6px 10px !important;
   width: 24px !important;
   height: 24px !important;
}

.ss .stripe .remote .video .bigplaybutton svg {
   width: 24px !important;
   height: 24px !important;
}


.ss .stripe {
   box-sizing: border-box;
   background-color: #F0F1F4 ;
   cursor: pointer;
   overflow: hidden;
   position: relative;
}

.ss .stripe::after {
   content: "";
   right: 0;
   bottom: 0;
   position: absolute;
   background: linear-gradient(to bottom, rgba(240,241,244,0), rgba(240,241,244,1) 95%);
}

.ss .stripe.expanded::after,
.ss .stripe.fitting::after {
   content: none;
}

.ss .stripe.expanded {
   cursor: auto;
   height: auto;
}
.ss .stripe:hover {
   background-color: #E8E9ED;
}
.ss .stripe.expanded:hover {
   background-color: #F0F1F4;
}

.ss .stripe > .remote {
   float: left;
}

.ss .stripe .remote .closeVideoLink {
   display: none;
}
.ss .stripe .remote.playing .closeVideoLink {
   background-image: url("../images/closeSpriteFilledBig.png");
   display: block;
   height: 20px;
   width: 20px;
   outline: 0 none;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 10;
}

.ss .storyListItem .closeVideo a:hover,
.ss .storyListItem .closeVideo a:focus {
   background-position: 0 -20px;
   outline: inherit;
}