/* share bar for news articles */
div.sharebar
	{
	clear: both;
	margin: 0px 0px 0px 15px;
	padding-top: 2px;
	padding-right: 3px;
	text-align: right;
	background-color: #EDECEC;
	background-repeat: repeat-x;
	width: 640px;
	overflow: hidden;
	padding: 5px;
	}
div.sharebar a
	{
	border: none;
	text-decoration: none;
	color: #333;
	}
div.sharebar .twitter-share-button
	{
	width: 85px;
	}
	
div.sharebar div.aTags
	{
	margin-left: 5px;
	margin-top: 1px;
	padding-left: 17px;
	clear: left;
	background: url(../images/icon-tag-small.png) left center no-repeat;
	width: 350px;
	float: left;
	text-align: left;
	overflow: hidden;
	}
	
div.sharebar div.aTags a
	{
	font-size: 95%;
	text-decoration: none;
	border: none;
	color: #666;
	}
/* end sharebar */

/* year/month selector on news page */
div#archiveDates
	{
	width: 635px;
	height: 80px;
	border: 1px solid #999;
	margin-left: 15px;
	}
div#archiveDates a
	{
	color: #333;
	border: none;
	}
div#archiveYears
	{
	width: 70px;
	height: 80px;
	border-right: 1px solid #999;
	float: left;
	margin-right: 10px;
	}
div#archiveYearsScroller
	{
	height: 64px;
	overflow: auto; 
	padding-top: 10px; 
	padding-bottom: 6px;
	}
div#archiveYearsBottom
	{
	position:relative; 
	background-color: #FFF; 
	top: -10px; 
	height: 10px; 
	width: 55px;
	}
div#archiveYears a
	{
	display: block;
	padding-left: 10px;
	margin-bottom: 4px;
	}
div#archiveYears a.active
	{
	color: #FFF;
	background: #999;
	}
div#archiveMonths a
	{
	width: 70px;
	padding-left: 10px;
	padding-right: 10px;
	display: block;
	float: left;
	text-align: center;
	height: 20px;
	line-height: 20px;
	margin-top: 13px;
	}
div#archiveMonths a.active
	{
	color: #FFF;
	background-color: #999;
	}
	
/* News archive page */
div.newsArchiveBox
	{
	padding: 5px;
	margin-left: 15px;
	}
div.newsArchiveBox a, div.newsArchiveBox a:hover
	{
	color: #333;
	border: none;
	}
div.newsArchiveBox p
	{
	padding: 10px 0px 0px 0px;
	margin: 0px;
	}
div.newsArchiveBox h3
	{
	margin: 0px;
	padding: 0px;
	}
div.row2
	{
	background-color: #F5F5F5;
	}
/* End news archive */

/* HOMEPAGE STUFF: */

/*common layout/appearance for main featured article and
 * small feature items underneath.*/
div#mainFeature,
div.articleBox {
	margin: 10px 20px 0px 15px;
	display: flex;
	flex-direction: column;

	background-repeat: no-repeat;
	background-repeat: no-repeat;
	background-position: top left;
	box-shadow: 4px 4px 2px -2px rgba(0,0,0,0.35);
}

div#mainFeature h2,
div.articleBox h2 {
	padding: 0px;
	font-size: 105%;
	font-family: LightSans;
	width: 100%;
	position: relative;
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
	background:linear-gradient(rgba(44, 120, 166, 1), rgba(58, 149, 203, 1)); 
	margin: 0px 0px 10px 10px;
}

div#mainFeature div#mfText,    
div.articleBox p {
	text-align: justify;
	order: -1;
}

div#mainFeature h2 a,
div.articleBox a {
	display: block;
	color: #FFF; 
	text-shadow: 1px 1px 2px #000;
	border: none; 
	text-decoration: none;
	margin: 0px;
	display: inline-block;
	overflow: hidden;
	padding: 0px 0px 0px 10px;
}


/*stuff specific to just the main feature 
 * (article text hover expandy thing (tm)*/
div#mainFeature {
	height: 465px;
	background-repeat: no-repeat;
	justify-content: flex-end;

	/* quick hacky thing for background. Fix properly later with scaling img */
	background-position: center;
	background-size: cover;
}

div#mfText {
	flex: 1;
	justify-content: flex-end;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

div#mainFeature div#mfText p {
	background-color: rgba(0,0,0,0.7);
	margin: 0px 0px 0px 20px;
	padding: 5px;
	color: #EFEFEF;
}

div#mainFeature div#mfText a {
	text-decoration: none;
}

div#mainFeature:hover div#mfText p:not(:first-of-type) {
	opacity: 1;
	transition: all 450ms linear;
	line-height: 20px;
}

div#mainFeature:not(:hover) div#mfText p:not(:first-of-type) {
	overflow: hidden;
	padding: 0px 5px 0px 5px;
	line-height: 0px;
	opacity: 0.5;
	transition: all 450ms linear;
	background-color: #000;
	color: #000;
}

div#mainFeature h2 a {
	padding: 3px 10px 3px 10px;
}

/*Stuff specific to just the smaller features*/
div#features div.articleBox {
	/*DS: STRETCHING BG VERTICALLY TO FIT. FIX LATER ON TO
	 * DO IT NICELY AND SCALE WELL. USE MAIN ARTICLE IMAGE OR SOMETHING
	 * INSTEAD OF THE FEATURE THUMBNAIL.*/
	background-size: 150px 100%;
	background-color: #F9F9F9;
	border: 1px solid #DDD;
	padding-left: 0px;
	padding-top: 0px;
	min-height: 100px;
}


div.articleBox p {	
	padding: 3px;
	margin-left: 152px;
	flex:1;
}


div.articleBox h2 a {
display: flex;
justify-content: space-between;
align-items: center;
}

div.articleBox h2:hover {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}	
div.articleBox h2 a:after {
	content: "⌘ Read now";
	margin: 0px 0px 0px 0px;
	padding: 3px 5px 3px 5px;
	/*top: 7px;*/
	position: relative;
	color: #2674A5;
	text-shadow: none;
	text-align: center;
	background-color: rgba(255,255,255,0.95);
	opacity: 0;
	border: 1px solid rgba(038,112,165,0);
	font-size: 95%;
	border-radius: 3px;
}

div.articleBox h2 a:hover:after {
	top: 0px;
	transition: all 300ms ease-in-out;
	opacity: 1;
}

div.articleBox h2 a:not(:hover):after{
	transition: all 300ms ease-in-out;
}

div.hackyImgBox {
	width: 300px;
	height: 200px;
	position: absolute;
	background-size: 300px;
	background-repeat: no-repeat;
}
div.hackyArticleBox   {
	height: 200px;
	margin-bottom: 15px;
}

div.hackyArticleBox p {
	margin-left: 300px;
	padding: 5px;
}

div.moreStories
	{
	margin-top: 10px; 
	margin-left: 15px; 
	padding-left: 5px; 
	height: 25px; 
	line-height: 25px;
	background-color: #F3F3F3;
	}

div.moreStories a:not(:hover) {
	text-decoration: none;
}
div.moreStories a
	{
	display: block;
	color: #333;
	border: none;
	}
/* end homepage stuff */

/* Page navigation for search and tag lists */
div#content ul.pageSel
	{
	margin: 10px 10px 0px 15px;
	padding: 0px 0px 0px 5px;
	text-align: left;
	height: 25px;
	width: 635px;
	line-height: 25px;
	color: #666;
	background-color: #EDECEC;
	list-style-type: none;
	font-family: MediumSans;
	}
div#content ul.pageSel li
	{
	float: left;
	padding: 2px;
	}
div#content ul.pageSel a
	{
	text-decoration: none;
	color: #666;
	margin: 0px 3px 0px 3px;
	border: none;
	}
div#content ul.pageSel a.currPage
	{
	background-color: #666;
	color: #FFF;
	padding-left: 2px;
	padding-right: 2px;
	text-shadow: none;
	}
/* end page number selector */

/* recent news page stuff- article boxes */
div.aBox
	{

	}

div.aBoxImg
	{
	height: 220px;
	margin-right: 10px;
	background-position: center;
	background-repeat: no-repeat;
	}

div.aBoxImg div
	{
/*	width: inherit;
	height: inherit;
	background-image: url(../images/bg-abox-image.png);*/
	}

div.aBoxShare
	{
/*	margin: 0px 10px 0px 230px;
	position: absolute;
	margin-top: 193px;
	width: 395px;
*/
	}

div.sbNoImage
	{
/*	margin-left: 15px;
	width: 610px; */
	}
	
div.aBoxArticle
	{
/*	margin-right: 10px;
	height: 190px;
	overflow: hidden;*/
	}

div.noImage
	{
/*	margin-left: 15px;
	padding-top: 5px;*/
	}
	
	
div.aBox h2
	{
	font-size: 130%;
	margin: 0px 10px 5px 0px;
	padding: 5px 0px 0px 0px;
	}
	
div.aBox p
	{
	font-size: 95%;
	text-align: justify;
	line-height: 16px;
	margin: 0px 10px 8px 0px;
	padding: 0px;
	}
	
a.readFull
	{
	/*DS: REMOVE BG IMAGE: */
/*		background-image: url(../images/bg-readmore-button.png);
		background-repeat: no-repeat;
		background-size: contain;
	float: right; 
	display: block;*/
	border: none;
	box-sizing: border-box;
	font-size: 90%;
	text-decoration: none;
	color: #333;
	 padding: 2px 5px 2px 5px;
	text-shadow: 0px 1px 1px #FFFFFF;
	}
	
a.readFull:hover
	{
	/*background-image: url(../images/bg-readmore-button-hover.png);
	line-height: 21px;*/
	}

/* end recent news page */

/* News article display stuff */
div.newsArticle p.date
	{
	padding-bottom: 0px;
	}
div.newsArticle
	{
	clear: both;
	}
div.newsImgLeft
	{
	float: left;
	}
div.newsImgLeft
	{
	margin: 5px 10px 10px 15px;
	border: 1px solid #cccccc;
	padding: 5px;
	font-size: 95%;
	color: #333;
	}
div.newsImgLeft img
	{
	display: block;
	margin-bottom: 5px;
	}
/* end news article display */

/* Article asides. What, when, where, etc. */

.wat {
	max-width: 18em;
	white-space: initial;
	font-size: 0.9em;
	display: inline;
	padding: 0.5em;
	border: 0.15em solid #2674a5;
	border-radius: 0.5em;
	margin: 0.5em 0 0.5em 1em;
	float: right;
}

/*
	For what/when/where:
	aside.wat > dl > dt:	what/when/where
	aside.wat > dl > dd:	desc
*/

.wat dl {
	white-space: nowrap;
	padding-left: 5em;
}

.wat dt {
	width: 4.5em;
	float: left;
	margin-left: -4.5em;
	font-family: BlackSans;
	color: #2674a5;
}

.wat dl > :not(:nth-last-child(2)):not(:last-child) {
	margin-bottom: 0.25em;
}

.wat h3 {
	font-family: HeavySans;
	font-size: 1.3em;
	margin: initial;
}

/* More general/generic list of things, rather than what/when/where */
.wat ul {
	padding: 0 0 0 2em;
}