.relItem {
	display: block; position: relative;
	padding: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
	color: #000;
}

.relItem.darkgray{ background: #151515 !important; color: #fff !important;}

.relItem .relPic{
	background-size: cover; background-position: center center ;
	display: block; padding:0; margin:0; box-sizing: border-box;
}

.relItem .relHeader{
	display:block; font-family: "CF Asty Std", Arial, sans-serif;; color: #000; padding:0; margin:0; font-size: 0.75em; line-height: 0.75em;
}
.relItem .title{
	display:block; font-family: 'Roboto Condensed', 'Arial Narrow', 'Helvetica LT Condensed'; font-size: 17px; font-weight:600; color: #000; 
	padding:0 0 5px 0; margin:0; line-height:17px; clear:both
}
.relItem .date{
	font-family: "CF Asty Std", Arial, sans-serif;; color: #999; padding:0; margin:0; font-weight:500; font-size: 0.875em; line-height: 0.875em;
}

a.relItem:hover, a.relItem:hover h2, a.relItem:hover .relHeader{ color:#002869 !important; text-decoration: none !important; }
a.relItem.relItem:hover{ text-decoration: none !important; } a.relItem.relItem:hover h2{ color:#002869 !important; text-decoration: none !important; }


/* box -------------------------------------------- */
.left.relItem{ display:block; float: left; width: 250px; margin: 0 20px 20px -76px;}
.right.relItem{ display:block; float: right; width: 250px; margin: 0 -76px 20px 20px ;}

.left.relItem .relPic, .right.relItem .relPic{ display:block; width:100%; height: 150px; }
.left.relItem .relTitle, .right.relItem .relTitle{ display:block; padding: 10px 20px 20px 20px; }
.left.relItem .relHeader, .right.relItem .relHeader{ display:block; margin: -20px 0 20px 0;}

.left.relItem .relHeader span, .right.relItem .relHeader span{
	background:#fff; display: inline-block; padding: 4px 7px 7px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* horiz -------------------------------------------- */

.horiz.relItem { display: table; width: 100%; box-sizing:border-box; min-height: 100px; padding:20px; margin: 20px 0; background: #fff; clear:both; }
.horiz.relItem:after{}
.horiz.relItem .relPic { display:table-cell; width: 30%; height:100%; }

.horiz.relItem .relTitle{ display:table-cell; padding: 0 20px; }
.horiz.relItem .relHeader{ display:block; margin: 0 0 10px 0; padding:0;}

/* -------------------------------------------- */


@media only screen and (max-width: 767px){
	.left.relItem, .right.relItem{ float: none; width: 100%; margin: 15px auto; }
}
@media only screen and (min-width: 768px) and (max-width: 979px){
	.left.relItem{ margin-left: 0;}
	.right.relItem{ margin-right: 0; }

	.postRow .boxed .postBody .left.relItem{ margin-left: -84px;}
	.postRow .boxed .postBody .right.relItem{ margin-right: -84px;}
}
@media only screen and (min-width: 980px) and (max-width: 1259px){
	.left.relItem{ margin-left: 0;}
	.right.relItem{ margin-right: 0; }
	
	.postRow .boxed .postBody .left.relItem{ margin-left: -190px;}
	.postRow .boxed .postBody .right.relItem{ margin-right: -190px;}
}
@media only screen and (min-width: 1260px){
	
	.postRow .boxed .postBody .left.relItem{ margin: 0 20px 20px -150px;}
	.postRow .boxed .postBody .right.relItem{  margin: 0 -150px 20px 20px ;}

}