.content {
	position: relative;
	overflow: auto;
	padding-bottom: 64px;
}
.leftsidebar{
	/*based on 12 col design, w/ 3col/9col split*/
	width: 23.31%;
	float: left;
}
.maincontent{
	width: 74.37%;
	float: right;
	padding-left: 2.22%; /*was a margin-right on leftsidebar, but had to move when I moved the middle line*/
	border-left: 1px solid #d8d8d8;
}


.articleview .maincontent{
	border-left: none;
}
.articleview .leftsidebar{
	border-right: 1px solid #d8d8d8;
}
.articleview .maincontent img{
	max-width: 100%;
}

.articleview table{
	/*fix for images overflowing on small screens
	afraid of unintended consequences from the width lines
	think worst case a table that needs to be wide will be squished and an important is required
	use case im fixing more common than use case of hypothetical new bug
	unable to find other solutions without replacing large amounts of old content*/
	width: 100%;
	max-width: 330px;
	table-layout: fixed;
}


#breadcrumbs{
	margin-bottom: 0;
}
#breadcrumbs .content{
	padding-bottom: 0;
}

#article
{
	float:right;
	padding:20px;
	display: inline-block;
	vertical-align: top;
	margin:auto;
}

#article:not(.old-article-format) img
{
	max-width: 100%;
	margin: 0 15px;
	float:left;
}

#article .img-container {
	max-width: 75%;
}

#article .img-container img {
	display: block;
	float: none !important;
	overflow: hidden;
}

#article .img-container .caption {
	display: block;
	margin-top: 10px;
}

#article .img-container.align-left {
	float: left;
	margin: 0 15px 15px 0;
}

#article .img-container.align-right {
	float: right;
	margin: 0 0 15px 15px;
}

#article h1{
	margin: 0px 0 40px;
}

#article td {
	padding: 15px;
}

#article td li {
	margin: 10px 0;
}

.search-result {
    margin: 48px 0;
    color: #222;
    font-family: "Roboto", sans-serif;
}

.search-result a {
    font-family: "PT Serif",serif;
    line-height: 26px;
}

.search-result-title, .search-result-title:hover {
	font-size: 20px;
	text-decoration:none;
	color: black;
}

.search-result-summary {
    display: block;
    margin: 1em 0;
    line-height: 26px;
    font-size:16px;
}

.search-result-url {
    display: block;
    color: #bbb;
    word-wrap: break-word;
}

.searchpaginationprev {
    margin-right: 30px;
}

.searchpaginationnext {
    margin-left: 30px;
}

.searchpagination {
    font-family: "Roboto", sans-serif;
}

.SearchSpacer {
	margin: 0 10px;
}

#news-archive-search{
	height:37px;
	border: 1px solid grey;
	min-width:175px;
}

#news-archive-search-submit, #news-archive-search-text{
	border:none;
	display:inline-block;
	height:35px;
	margin:0px;
	padding:0px;
}
#news-archive-search-submit{
	float:right;
	background:none;
	border:none;
	width:18px;
	height:18px;
	margin-top: 8px;
	margin-right: 2px;
	cursor: pointer;
}
#news-archive-search-submit:hover{
	opacity: .5;
}
#news-archive-search-text, #news-archive-search-text:hover, #news-archive-search-text:active, #news-archive-search-text:focus{
	border:none;
	width:85%;
	min-width:140px;
	font-size:15px;
	padding-left:10px;
	outline: 0;
	outline-style: none;
 	outline-width: 0;
 	outline-color: transparent;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    outline-width: 0;
    outline-color: transparent;
}
.newsleftsidebar h2 {
	margin-top: 40px !important;
}
.ShowInMobile {
	display:none;
	margin:10px auto;
	padding-right:auto;
	width:90%;
}
.HideInMobile{
	display:block;
	margin-top:50px;
	margin-right:0px;
	padding-right:0px;
	width:100%;
}
@media (max-width: 560px) {
	.HideInMobile{
		display:none;
	}
	.ShowInMobile{
		display:block;
	}
	.mobilePH {
		margin-bottom:10px;
	}
}

@media (max-width: 900px) {
	#article .img-container,
	#article .img-container.align-left,
	#article .img-container.align-right {
		float: none;
		margin: 0 0 15px 0;
		max-width: 100%;
		width: 100%;
	}

	#article table[align] {
		float: none !important;
		margin-left: 0 !important;
		width: 100% !important;
	}

	#article img {
		width: 100% !important;
		height: auto !important;
	}
}

@media (min-width: 450px)
{
	#article
	{
		width:calc(100% - 260px);
		min-width: 220px;
	}
}

@media (max-width: 450px)
{
	#article
	{
		width:100%;
		margin:auto;
	}
	.newsleftsidebar
	{
		margin:auto;
	}
}

h1{
	margin: 64px 0 40px;
}

.newsleftsidebar{
	padding-right: 4%; /*design smaller than full 3 cols*/
}

.newsleftsidebar h2{
	margin-top: 64px;
}

.newstile{
	width: 100%;
	overflow: auto;
	margin-bottom: 48px;
}
.newstilecontent{
	width: calc(100% - 391px - 32px);
	float: right;
}
.smallimg .newstilecontent {
	width: calc(100% - 144px);
}
.noimg .newstilecontent{
	width: 100%;
}
.newstile img, .newstile picture{
	float: left;
	/*margin-right: 32px;*/
	max-width: 391px !important;
	height: auto;
}
.newstile h3 a{
	text-decoration: none;
	font: inherit;
	color: inherit;
}
.newstile .prettydate_container{
	color: #777777;
	margin-right: .5em;
}
.newstile .newspagereadmore{
	margin-left: .5em;
}
.newstile .newspagearticleinfo{
	color: #bbb;
}

.news_audio, .news_video{
	fill: #bbb;
	display: inline;
	vertical-align: middle;
	margin-right: .5em;
	margin-left: .5em;
}
.news_audio{
	width: 12px;
	height: 16px;
}
.news_video{
	width: 22px;
	height: 17px;
}
.news_readmore{
	margin-left: .5em;
}

.newspagination{
	font-family: "Roboto", sans-serif;
}
span.newspaginationprev, span.newspaginationnext{
	color: #777777;
}
.newspaginationprev{
	margin-right: 30px;
}
.newspaginationnext{
	margin-left: 30px;
}

hr{
	margin: 2em 0;
	border: 0; /*reset*/
	border-top: 1px solid #d9d9d9;
}


/* categories section*/
.news_archives_deptnav_links{
	margin-top: 40px;
	font-family: "Roboto", sans-serif;
	line-height: 32px;
}
.news_archives_deptnav_links ul{
	padding-left: 0;
}
.news_archives_deptnav_links li{
	list-style: none;
}



.newsleftsidebar h3{
	margin: 1em 0;
}

/*"LU in the News" section*/
.news_published_media{
	padding-left: 0;
	overflow-y: auto;
}
.news_published_media > li {
    margin: 1em 0;
    overflow: auto;
}
.news_published_media img{
	width: 50px;
	border: 1px solid #d9d9d9;
}
.news_published_media .news_headline{
	float: right;
	width: calc(100% - 60px);
}
.news_published_media .news_headline a{
	font-size: 14px;
	line-height: 20px;
}
.publishednewsmorelinks{
	margin-top: 1em;
}
.publishednewsmorelinks > h6 {
    margin: 2em 0;
}

/*liberty journal section*/
.newspagejournal img{
	max-width: 100%;
}


/* 1240 + 32 on each side*/
@media (max-width: 1304px) {
	.content{
		/*margin: 0 32px;*/
	}
}

@media (max-width: 1023px) {

	/*switch to 4col/8col split*/
	.leftsidebar{
		width: 31.82%;
	}
	.maincontent{
		width: 65.86%;
	}


	.content{
		/*margin: 0 2.22%;*/
	}
	.newstile > *{
		width: 100%;
	}
	.newstile h3{
		margin: 1em auto;
	}
	.newstile img{
		max-width: 100%;
	}
	.newstilecontent .newstiledescription{
		display: none;
	}
}


@media (max-width: 670px) {
	/*make sidebar wider, because long categories overflow*/
	.leftsidebar{
		width: 35%;
		padding-right: 2%;
	}
	.maincontent{
		width: 62.68%;
	}
}

@media (max-width: 560px) {
	.nomobile, .newsarchivescalendar, .news_published_media img{
		display: none;
	}

	/*rearrange margins to allow some divs to be full width
	(so they can have fullwidth bg
	currently just being done for LU in the News section
	TODO: rework this to use some kinda fullwidth class somewhere
	*/
	.content{
		margin: 0;
		width: 100%; /*override shared.css, because its width is causing problems*/
	}
	/*these sections get normal looking margin*/
	.maincontent, .newsarchivescalendar{
		width: 95.66%;
		margin-left: 2.22%;
		margin-right: 2.22%;
	}
	.maincontent{
		border-left: none;
	}
	.leftsidebar{
		border-right: none;
	}

	.news_archives_deptnav_links{
		margin: 40px 0;
		display: block; /*to prevent margins from getting eaten*/
	}

	/*override bugs in shared.css. these 2 rules should be removed in phase */
	.boxed {
		margin-bottom:30px;
	}
	.boxed:after{
		top: 28px;
	}
	.boxed select{
		max-width: none; /*override bad style in shared.css*/
	}

	.boxed:before {
		background:#fff;
		top:1px;
		bottom:1px;
		right:1px;
		height:auto;
	}
	.boxed select {
		background:#fff;
		border:1px solid #e9e9e9;
		font-size:.94em;
		font-family:inherit;
		font-weight:bold;
		margin:0;
	}

	.news_published_media .news_headline{
		width: 100%;
	}


	/*this gets full width, and its children get a margin or a background and padding*/
	.leftsidebar{
		width: 100%;
	}
	.newspagemediasection{
		padding: 0 2.22%;
	}

	.newspagination{
		border: 1px solid #d8d8d8;
		border-radius: 3px;
		height: 3em;
		padding: 1em;
	}
	.newspaginationfirst{
		margin-right: 30px;
	}
	/*reposition the pagination links*/
	.newspaginationfirst, .newspaginationprev{
		float: left;
	}
	.newspaginationnext{
		float: right;
	}
	/*turn previous and next links into arrows, create styles for firstpage link too*/
	.newspaginationfirst, .newspaginationprev, .newspaginationnext {
		visibility: hidden;
		position: relative;
		display: inline-block;
		overflow: hidden; /*nope. no content here. it totaly never existed*/
		width: 1em;
		height: 1em;
		line-height: 1em; /*prevent link style from changing heigh*/
	}
	.newspaginationfirst:after, .newspaginationprev:after, .newspaginationnext:after {
		visibility: visible;
		position: absolute;
		top: 0;
		left: 0;
	}
	.newspaginationfirst:after{
		content: '';
		height: 1em;
		width: 1em;
		/*using background instead of content because it allows me to fix a vcentering issue*/
		background: url('//cdndev.liberty.edu/templates/edu/svg/build/svg/defs-svg/DoubleLeftArrow.svg');
		background-repeat: no-repeat;
		background-position: center;
	}
	.newspaginationprev:after{
		content: url('//cdndev.liberty.edu/templates/edu/svg/build/svg/defs-svg/LinkArrow.svg');
		transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
	}
	.newspaginationnext:after{
		content: url('//cdndev.liberty.edu/templates/edu/svg/build/svg/defs-svg/LinkArrow.svg');
	}

	.maincontent, .newsleftsidebar{
		float: none;
		padding-right: 2.22%;
		// padding-right: 0;
	}

	.newspagemediasection{
		border-top: 1px solid #d8d8d8;
		margin-top: 32px;
	}

	.news_published_media a{
		margin: 2em 0;
	}

	.newspagejournal{
		text-align: center;
	}
	.newspagejournal img{
		max-width: 60%;
	}
}