/**
 * Font Definition for Grids
 */
.ws .griditem {
   font-family: 'ORF ON', Arial, Helvetica, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
   -moz-text-size-adjust: none; /* moz doesn't support percentages */
   -webkit-text-size-adjust: 100%; /* percentage needed because otherwise zoom on desktop not possible */
   -ms-text-size-adjust: none;
   -moz-font-feature-settings: "liga", "kern";
   -webkit-font-feature-settings: "liga", "kern";
   font-feature-settings: "liga", "kern";
   scroll-behavior: smooth; /* animates scrolling even when clicking on fragment anchor, for now only in firefox */
}

/**
 * Textimage Grid
 */
.grid.textimage {
   position: relative;
   width: 571px;
   height: 80px;
}
.griditem.textimage {
   width: 307px;
   height: 80px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
   background-color: #f3f4f8;
}
.griditem.textimage.col1 {
   left: 312px;
}
.griditem.textimage > a,
.griditem.textimage > img {
   float: left;
   display: block;
   border-left: 8px solid #005300;
}
.griditem.textimage .storyBox {
   float: left;
   width: 178px;
   margin: 10px 0 0 14px;
}
.griditem.textimage .storyBox p {
   margin-bottom: 2px;
   font-size: 0.933em; /* 14px */
   color: #333;
}
.griditem.textimage .storyBox h2 {
   color: #333;
   font-weight: bold;
   margin:  0;
}


/**
 * Textimage Grid Promo v2
 */

.ws-versionGrid .grid.textimage.promov2fix {
   position: relative;
   width: 143px;
   height: 200px;
} 

.ws-versionGrid .grid.textimage.promov2slide {
   position: relative;
   width: auto;
   height: 250px;
} 

.ws-versionGrid .grid.textimage[class*="promov2"] .griditem.textimage {
   position: unset;
   width: 143px;
   height: 200px;
   float: left;
   margin-right: 10px;
} 
 
.grid.textimage[class*="promov2"] {
   position: relative;
   width: auto;
   height: 180px;
}

.griditem.textimage[class*="promov2"] {
   width: 143px;
   height: 180px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
   background-color: #f3f4f8;
}

.griditem.textimage[class*="promov2"] > a,
.griditem.textimage[class*="promov2"] > img {
   float: none;
   display: block;
   border-left: none;
}
.griditem.textimage[class*="promov2"] .storyBox {
   float: none;
   width: 143px;
   margin: 5px;
}
.griditem.textimage[class*="promov2"] .storyBox p {
   margin-bottom: 2px;
   font-size: 0.833em;
   color: #333;
}
.griditem.textimage[class*="promov2"] .storyBox h2 {
    font-family: 'ORF ON Condensed', Arial, Helvetica, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
   font-size: 1em;
   color: #333;
   font-weight: bold;
   margin:  0;
}

/**
 * Vertical image grid
 */
.grid.verticalimage {
   width: 143px;
}

/**
 * Topstories Linegrid
 */

.griditem.linegrid {
   width: 624px;
   clear: left;
   margin-bottom: 1px;
   background-color: white;
   max-height: 10000px; /* disables android chrome font boosting */
}
.griditem.linegrid .storyBox {
   padding: 10px 0 8px 0;
   color: #333;
   margin: 0 10px 1px 254px;
   border-bottom: 5px solid #f6f6f8;
   font-size: 0.9375em; /* 15px;*/
   line-height: 1.286em; /* 18px */
}
.griditem.linegrid.last .storyBox {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
}
.griditem.linegrid > img,
.griditem.linegrid > a img {
   display: block;
}
.griditem.linegrid > img,
.griditem.linegrid > a {
   float: left;
   margin-right: 15px;
}
.griditem.linegrid h2 {
   font-size: 1.286em; /* 18px */
   font-weight: bold;
   margin: 4px 0 5px 0;
   color: #556da6;
}
.griditem.linegrid a {
   color: #556DA6;
   font-weight: bold;
   text-decoration: none;
}
.griditem.linegrid a:hover,
.griditem.linegrid a:focus {
   text-decoration: underline;
}