/*
Hello to whoever has succeeded me and been put in charge of editing this CSS for Tim's website. If you're a CSS veteran, I darly apologise for the state of... All of the following. I was sort of learning as I went. But, hopefully, my commentary has made it a little easier to disentangle.
*/
/* used to prevent images in second columns from having a red border at the bottom. the furthest i could dial it in and still target the content i wanted was #wsuwp-main */
#wsuwp-main img {
	border-bottom: 0;
}

/* some random bits and bobs of code i used while i was setting up the article pages the first time. there's a good chance these can be removed once those pages are renovated */
.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.page-id-23 p {
	word-wrap: break-word;
}

/* the following code is for the non-flexible article preview divs (lefthand title)*/
/* ------------------------------------- */
/* titlebox is the external div containing both the titletext (seperate div) and the preview image. The reason this is set up the way it is is that it enables the descriptive text in the contentbox div to wrap around the image, which would be much more difficult if they were enclosed in completely separate divs */
.titlebox {
	background-color: #981e32;
	overflow: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* formatting for the preview image which is aligned both at the top of the div and floated to the right. */
.titlebox img {
	vertical-align: top;
	float: right;
	margin: 20px;
}

/* actual title text is contained within its own div to enable the addition of padding between the title and the left-hand side of the box */
.titletext {
	padding-left: 20px;
}

/* title should bein h3 format with a bold weight and light accent grey color */
.titletext h3 {
	text-align: center;
	color: #eff0f1;
	font-weight: bold;
}

.contentbox {
	background-color: #eff0f1;
	padding-top: 10px;
	border-left: 20px solid #eff0f1;
	padding-right: 20px;
	padding-bottom: 20px;
	width: inherit;
}

/* the following code is the same as the non-flexible article preview div code above, but several of the properties have been flipped so that the title is on the righthand side & image on the lefthand side */
/* ------------------------------------- */
.titleboxflip {
	background-color: #981e32;
	overflow: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.titleboxflip img {
	vertical-align: top;
	float: left;
	margin: 20px;
}

.titletextflip {
	padding-right: 20px;
}

.titletextflip h3 {
	text-align: center;
	color: #eff0f1;
	font-weight: bold;
}

.contentboxflip {
	background-color: #eff0f1;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	width: inherit;
}

/* here is the beginning of the flexwrap css. it is a bit more advanced than the first template but it is also more adaptive. */
/* ------------------------------------- */
/* on standard desktops+tablets the display should show up in the row format, with the content divs arranged horizontal+consecutively */
@media only screen and (min-width: 601px) {
	.flexywrap {
	/* the y is in there because when i took it out it got upset */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		margin-top: 20px;
		margin-bottom: 20px;
		border-bottom: 5px solid #2a3033;
	}
}

/* if screen width is 600px or less, switch wrap orientation to column */
@media only screen and (max-width: 600px) {
	.flexywrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: stretch;
		margin-top: 20px;
		margin-bottom: 20px;
		border-bottom: 5px solid #2a3033;
	}
}

/* formatting for flextitle div. Title is prioritized as the first div in the box; it has a cougar crimson background and is centered. */
.flextitle {
	flex: 1;
	order: 1;
	background-color: #981e32;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 20px;
}

/* code snippet which prevents the typical link format from occurring within the div, in this case removing the underline that typically signifies a link */
.flextitle a:link, a:visited, a:active, a:hover {
	text-decoration: none;
}

/* title should bein h3 format with a bold weight and light accent grey color */
.flextitle h3 {
	font-weight: bold;
	color: #eff0f1;
}

/* text description div. occurs second in the priority listing. light grey accent background with black text. */
.flextext {
	flex: 2;
	order: 2;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #eff0f1;
}

/* image div. occurs third in the priority listing. padded vertical indent equal to title div's, for aesthetic purposes */
.fleximage {
	flex: 1;
	order: 3;
	background-color: #eff0f1;
	display: block;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.fleximage img {
}

/* because the highlight image is formatted as a block it assumes the same standard link formatting, namely an underline. this code prevents that from occurring. */
.column .fleximage a:link, a:visited, a:active, a:hover {
	border-bottom: 0 solid #eff0f1;
}

/* not sure exactly what i put this in for but im terrified to try to take it out */
.embolden {
	color: #981e32;
	font-weight: bold;
}