/* News Articles
*********************************************************************/


#ArticleList { margin-top:1em; }


#ArticleModUI{border-bottom:1px solid #ccc; margin-bottom:15px; padding-bottom:10px; width:100%; position:relative;}
#ArticleModUI .filter { float:left; width:30%;}


.rss {display:none; }

#ArticleModUI .categorylist{background:#555; margin:0; padding:1em 0; width:100%; display:none; float:left; clear:both; z-index: 999; top: 4.1em;}
#ArticleModUI .categorylist li {float:left; list-style:none; margin:0.5em 0.75em;}
#ArticleModUI .categorylist li a{font-size:1.2em;}
#ArticleModUI .categorylist li .Btn1{ background: #333; color:#fff; padding: 0.9em 1.4em; text-transform:uppercase;border:none; border-radius:0;}
#ArticleModUI .categorylist li .Btn1.Current{background:#fff; color:#333;}
#ArticleModUI .categorylist li .Btn1:hover{ background:#fff; color:#333;}

#ArticleModUI .ArticleSearch {margin:0 auto; position: absolute; overflow: hidden; font-size: 1.3em; padding: 0; height: 60px; width:60%; right:0; }
#ArticleModUI .ArticleSearch #SearchPhrase{ line-height:2; border:none; background:#eee;  padding:0 65px 0 10px; height: 60px; width:100%;}
#ArticleModUI .ArticleSearch .Submit{font-family:'FontAwesome'; position: absolute; right:0; top:0;  border: none; background:#03517e; color: white;height: 60px; line-height: 60px; width:50px;padding: 0;}
#ArticleModUI .ArticleSearch .Cancel{background:#c84a55; color:white; border:none; position: absolute; right:50px; top:0; height: 60px; width:50px;padding: 0; line-height: 60px;}
#ArticleModUI .Btn1R{background:#555;height: 60px; padding-top: 0; padding-bottom: 0; line-height: 60px;  padding-right: 1.8em;font-size: 1.3rem;}
#ArticleModUI .Btn1R .ico{line-height: 60px; padding:0;width: 1.5em; }
#ArticleModUI .Btn1R:hover{background:#555; }

#ArticleModUI .rss {float:right; width:30%; position:relative; text-align: right;}


@media screen and (max-width:650px) {
	#ArticleModUI .rss {display: none;}
	#ArticleModUI .filter {  float:left; width:50%;}
	#ArticleModUI .ArticleSearch {width:50%; position: absolute; right:0;}
}
@media screen and (max-width:480px) {
	#ArticleModUI .ArticleSearch {margin:0; left:0;width:100%; top:0;height: 50px;}
	#ArticleModUI .ArticleSearch #SearchPhrase{  height: 50px; }
	#ArticleModUI .ArticleSearch .Submit{height: 50px; line-height: 50px;}
	#ArticleModUI .ArticleSearch .Cancel{height: 50px;line-height: 50px;}
	#ArticleModUI .filter {float:none; width:auto; margin-top: 55px;}
	#ArticleModUI .categorylist{top: 5.5em;}
	#ArticleModUI .Btn1R{height: 50px;  line-height: 50px;}
}

@media screen and (max-width:400px) {
	#ArticleModUI .categorylist li {margin:0.6em 0.4em;}
}






/* Article Listing pg ------ */

#ArticleList header {}
#ArticleList header h1 {text-align:center; color:#f8981d;  }
#ArticleList nav{}
#ArticleList nav .Lbl{display:none;}
#ArticleList nav .RecordStats{text-align:center;}
#ArticleList nav .PagingControl{text-align:center; margin:3px auto;display:none;}


#ArticleItems { font-size: 0;margin-left:-2%; min-height: 85vh;}
#ArticleItems .Tile {width:23%;margin:0 0 1em 2%; display:inline-block; vertical-align: top;font-size: 1rem;position: relative;transition:all 220ms 0s; background: #fff;border:0.5vw solid transparent;}
#ArticleItems .Tile .articleimg{width:100%; height:200px;background-repeat:no-repeat; background-size:cover; background-position:center;}
#ArticleItems .Tile .articleimg.no-image{ background:#fff; text-align: center; line-height: 3em; font-size: 4em; color: #d2d2d2;}
#ArticleItems .Tile .details{ height:9.5em;  margin: 0.3em 0 0; padding-bottom: 30px; overflow: hidden; }
#ArticleItems .Tile a {text-decoration:none;}
#ArticleItems .Tile header{text-align: left; }
#ArticleItems .Tile header h2{  line-height:1.2rem; max-height:2.4rem;  font-size:1rem; padding:0; -webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; }
#ArticleItems .Tile p.intro{
	margin:0.25em 0;
	font-size: 80%;
	padding:0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 20px;     /* fallback */
	max-height: 60px;      /* fallback */
	-webkit-line-clamp: 3; /* number of lines to show */
	-webkit-box-orient: vertical;
}
#ArticleItems .Tile .stamp {font-size:80%; position: absolute; bottom:0px;}

#ArticleItems .Tile:hover {z-index: 10; background: rgba(0,0,0,0.04);}


#ArticleList a.loadData {width:30%; min-width:75px;}

@media screen and (max-width:1000px) {
	#ArticleItems .Tile {width:31.33%;}
}
@media screen and (max-width:720px) {
	#ArticleItems .Tile {width:48%;}
}
@media screen and (max-width:480px) {
	#ArticleItems { margin-left:0; }
	#ArticleItems .Tile {width:100%; margin:0 0 1em 0; }
	#ArticleItems .Tile .articleimg.no-image{display: none;}
	#ArticleItems .Tile .details{ height:auto;  }


}
@media screen and (max-width:350px) {
	#ArticleItems .Tile .articleimg{ height:140px;}
}






/* individual article pg ------ */
body.ArticleDetail #pcontent{ background: none;}
#ArticleView{margin-top:2em;}
#ArticleView article.main .mainImg{max-width: 100%; height: auto;}
#ArticleView article.main .aBody {width:70%; float:left; min-height: 100vh;}
#ArticleView article.main .aBody .SocWrap {margin:1em 0;}
#ArticleView article.main header.main { padding-right: 0.5em;}
#ArticleView article.main header.main h1 {line-height:1.28;font-size:1.8rem;}
#ArticleView article.main header.main.ImgOn {margin-top:-3em; margin-bottom: 1em; max-width: 93%;}
#ArticleView article.main header.main.ImgOn h1 {background: #fff; display:inline; padding:0.15em  0 1em 0; white-space: pre-wrap;}
#ArticleView article.main header.main.ImgOn h1:after{content: " ";}

#ArticleView article.main .articlecopy {margin-bottom:3em; }
#ArticleView article.main .SideCont {width:25%; float:right;}

#ArticleView article.main  iframe.flickr-embed-frame{display:block!important; margin:auto!important;}

#ArticleView .wherewhen {font-size:85%; margin-bottom:1em; line-height:1; margin-top:0;}

#ArticleView .articlecopy h1{font-size: 1.75rem;}
#ArticleView .articlecopy img{display:block; margin:auto; max-width:100%; height:auto!important;}

#ArticleView .Tags {background:#fff;  margin:0 0 2em 0; }
#ArticleView .Tags h4 {  padding-bottom:0.25em;}
#ArticleView .Tags a {display: inline-block; padding: 0.2em 0.5em; background: #dbe7ff; margin: 0 0.2em 0.4em 0; text-decoration: none; font-size: 0.9em;}
#ArticleView .Tags a:hover{}


.OtherArticles{width:100%; margin-bottom: 2em;}
.OtherArticles ul {padding:0; margin:0;}
.OtherArticles li {list-style:none; padding:0; margin:0; border-bottom:1px dotted #ddd;}
.OtherArticles li div.item {padding:0.45em;}
.OtherArticles li p.title{margin:0;line-height:1.2; font-size:0.9rem;}
.OtherArticles li p.datestamp {color:#aaa; font-size:80%; margin:0;margin-top: 0.1em;}
.OtherArticles li a{text-decoration:none; line-height:1.2;color: #666;}
.OtherArticles li a:hover {text-decoration:none; }
.OtherArticles li a:hover div.item {background:#dbe7ff; }

@media screen and (max-width:800px) {
	#ArticleView article.main header.main h1 {font-size:1.6rem;}
	#ArticleView article.main header.main.ImgOn {margin-top:-2.5em;}
	#ArticleView .articlecopy h1{font-size: 1.7em;}
}
@media screen and (max-width:650px) {
	#ArticleView article.main .aBody {width:100%; float:none;}
	#ArticleView article.main .SideCont {width:100%; float:none;}
}

@media screen and (max-width:440px) {
	#ArticleView article.main header.main h1{ font-size: 1.7em; }
	#ArticleView article.main header.main.ImgOn {margin-top:-2.0em;}
	#ArticleView .articlecopy h1{font-size: 1.4em;}
}


/* gallery feed ------ */
#ArticleView article.main ul.ImgFeed{ margin:0; padding: 0; list-style: none;  text-align: center; }
/*#ArticleView article.main ul.ImgFeed li { margin:0 0.5em 1em 0; padding: 0; list-style: none; width:260px; display: inline-block;vertical-align:top;}*/
#ArticleView article.main ul.ImgFeed li { margin:0 0.5em 1em 0; padding: 0; list-style: none; width:100%; display: inline-block;vertical-align:top;}
#ArticleView article.main ul.ImgFeed .FeedImg img { max-width: 100%; display: inline-block; text-align: center;}
#ArticleView article.main ul.ImgFeed p { margin: 0; line-height: 1.3;}
#ArticleView article.main ul.ImgFeed p.info { /*display: none;*/}
#ArticleView article.main ul.ImgFeed p.ttl { color: #252525; }
#ArticleView article.main ul.ImgFeed p.dtStamp { font-size: 90%; color:#aaa; }

@media screen and (max-width:850px) {
	#ArticleView article.main ul.ImgFeed li { margin:0 0 1em 0; width:100%;text-align: center;}
	#ArticleView article.main ul.ImgFeed .FeedImg img { max-width: 100%; }
}