#newsDisplay{
	margin-top:15px;
}

.StoryList{
   list-style-type:none;
}
.story-container {
  margin-bottom: 15px;
  overflow: auto;
	/*min-height: 110px;*/
}
.story-summary-home *{
	font-size:1.0em !important;
}

.story-thumb img {
  display: block;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
	border-radius: 2px;
}

.story-thumb-home {
    float: left
}

.story-text{
	margin-left: 170px;
}

#s4-workspace .story-title h2{
  margin-top:0px !important;
  margin-bottom:0px !important;
  font-size: 1.25rem;
}

.story-title h3{ /* unused*/
  margin-top:5px !important;
  margin-bottom:0px !important;
}


input[type=checkbox], input[type=radio] {
    margin: 0 0 4px 0;
}


/****************************
 Filter stuff
 *****************************/

#filterlisting input {
  position: absolute;
  left: -9999px;
}

#filterlisting label {
  display: block;
  position: relative;
  margin: 0;
  padding: 15px 10px 15px 57px;
  line-height: 1.25em;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  user-select: none;
  /*transition: background-color .2s, box-shadow .2s;*/
  font-size:1rem;
	/*border-left: 11px solid #003385;*/
}

/* red when checked (csecondary):
#filterlisting input:checked + label { background-color:#e52626; color:#FFF; border-left: 11px solid #6D0000; }
*/
/* blue when checked (cprimary): */
#filterlisting input:checked + label { background-color:#003385; color:#FFF }
#filterlisting input:checked + label::before { text-shadow: none; }


#filterlisting label::before {
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 14px;
  width: 26px;
  height: 26px;
	padding: 4px 0 0 3px;
  font-size: 1.25rem;
  margin: auto 0;
  border-radius: 0px;
  color: #f5f5f5;
  line-height: 1em;
  font-weight: bold;
  background-color: #f5f5f5;
  transition: background-color .2s;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.1);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	/*  content: attr(data-before); - changed to FA */
}

/* blue outline on checkbox and label focus (must separate to work) for accessibility */
#filterlisting input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) solid 2px;
}
#filterlisting input[type="checkbox"]:focus + label {
	outline: none;
	-webkit-box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem rgba(77,144,254,0.5);
	box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem rgba(77,144,254,0.5);
}

#filterlisting input:checked + label::before {
  color: #333;
  background-color: #ffffff;
  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.6);
	outline: transparent solid 2px !important; /* don't visibly show outline on inner checkbox when checked */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	/*content: '\2713'; -- entity for ✓ checkmark */
}

#filterlisting input:checked:hover + label, #filterlisting input:checked:active + label, #filterlisting input:checked:focus + label {
    outline: none;
    -webkit-box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem rgb(77 144 254 / 50%) !important; /* for red shadow: rgb(229 38 38 / 50%) */
    box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem rgb(77 144 254 / 50%) !important;
}

#filterlisting {
  /*border-top: 1px solid #111;*/
}
#filterlisting .finputwrap {
	margin: 15px 0;
}

#s4-workspace .story-title h2 {
	font-size: 1.5rem;
	font-family: inherit;
	margin-bottom: 5px !important;
}
#s4-workspace .story-job {
	font-size:1rem;
	font-weight:bold;
}
.program-tag-wrap { margin-top: 1.1875em; }
@media screen and (max-width: 768px){
	#s4-workspace .story-title { text-align: center; }
	#s4-workspace .story-job { text-align: center; }
	.program-tag-wrap { text-align: center; }
	.program-tag { margin: 10px 3px 0 3px !important; font-size: 1rem !important; } /* negate 'small' font class on sm/xs */
}
.story-container {
	padding:25px;
}

#storyTable {
	padding-top: 8px;
	padding-bottom: 20px;
	width: 100% !important;
}
#storyTable_filter{
	float: right;
	margin-bottom: 10px;
	/*padding-right: 10px;*/
}
#storyTable_length{
	display: inline-block;
	margin-top: 2px;
}
#storyTable_length label{
	/*margin-bottom:0;*/
}
.dt_pageSel {
	width:auto;
	display: inline-block;
	padding: 6px 0px 6px 6px;
	margin: 0 3px;
	height:auto;
}
#dt_searchTxt{
	background: #fff;
	border: 1px solid #003385;
	padding: 4px 12px;
	border-radius: 4px;
	font-family: "Montserrat";
	font-weight:normal;
}
#dt_searchTxt .dt-search-bar__button{
	border-radius: 0 4px 4px 0;
	padding-left: .5em;
	padding-right: .5em;
	width: 2.125rem;
}

#storyTable_filter input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #003385;
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight:normal;
	opacity: 1; /* Firefox */
}
#storyTable_filter input:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #003385;
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight:normal;
}
#storyTable_filter input::-ms-input-placeholder { /* Microsoft Edge */
	color: #003385;
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight:normal;
}

.dataTables_wrapper .dataTables_filter input {
	margin: 0;
	color:#444;
	font-weight:normal;
}

/*********************************************************
The following emulates both bg-cgrey-05 and shadow-3. Has to be a separate element due to jQuery datatables handling all striping dynamically,
and applying those existing classes to table rows. However they need to be added to the container div within each cell, so doing so here.
**********************************************************/
.bg-experience-row-striped .story-container {
	background-color: #f7f3e8;
	color: #111;
	-webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-ms-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-o-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}
.bg-experience-row .story-container {
	-webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-ms-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	-o-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.story-text {
		margin-left: 0;
}
.story-thumb {
	padding: 0 5px 0 0 !important;
	text-align: center;
	margin: 0 auto;
}
#storyTable .thumbnail {
	background-color: transparent;
	padding:1px;
}
.story-thumb img {
	width:200px;
	margin:0 auto;
}
/*
@media screen and (min-width: 768px) and (max-width: 1549px) { .story-thumb img { width: 100%; }}
@media screen and (min-width: 1550px) and (max-width: 1879px) { .story-thumb img { width: 90%; }}
@media screen and (min-width: 1880px) { .story-thumb img { width: 75%; }}
@media screen and (min-width: 992px) { #schoolExperienceRow .story-thumb img { width: 75%; }}
*/


.filter-tag-hidden, .filter-cat-hidden {
	display:none;
}
#s4-workspace .story-summary {
	padding-top:3px;
}
#s4-workspace .story-summary p {
		margin: 0 0 0.5rem;
}
.category-tag {
	padding: 5px 12px;
	display: inline-block;
	color: #333333;
	border-radius: 6px;
	margin: 3px 5px 2px 0;
	font-weight:600;
	/*text-shadow: 1px 1px 4px rgba(0,0,0,0.5);*/
}
a.category-tag-link span:hover {
	outline: none;
	-webkit-box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem #4D90FE;
	box-shadow: 0 0 0 0.0825rem #fff, 0 0 0.0625rem 0.225rem #4D90FE;
}

#storyMain .h3, #storyMain .h4{
	margin-top: 0;
}

/* override top of datatable*/
table.dataTable thead th, table.dataTable thead td {
		border-top: 1px solid #111;
		border-bottom:0;
}