html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}


/* Primary color definitions */
:root {
	/* This is the color outside the text area */
	/* --bg-color: #000033; /* old blue bg */
	--bg-color: #332c2c; /* new 10/9/21 */
	/* background: #332c2c; */ /* old brown background from 2016 and before... */
	/* background: #0096FF; */
	--link-color: #09549e;
	--button-text-color: white;
	/* button background colors */
	/* background-color:  #FF6600; /* #6699CC; */
	/* background-color:  #2E4C89; /* color of punch card area on inside flap of front cover */
	/* background-color:  #3C5C93; /* color from lighter area of book jacket */
	/* background-color: #6AB0FF; */
	/* --button-bg-color: #000033; */
	--button-bg-color: var(--bg-color);
	/* honestly not sure what this one does... */
	---webkit-tap-highlight-color: #999999; 
	--current-button-bg-color: #999999;
	/* alternate color for hovering. other choice: #9C968B #66000 */
	--hover-button-text-color: white;
	--hover-button-bg-color: red;
	/* --hover-button-bg-color: #6e4848; /* testing */
	/* --hover-button-bg-color: #073642; /* testing, blueish */
	/* --hover-button-bg-color: #520909; /* testing, burgundy */
	/* --hover-button-bg-color: #330606; /* testing, darker more subtle burgundy */
	--hover-button-bg-color: #470808; /* new 10/9/21 */
	--head-text-color: white;
	--main-text-bg-color: white;
	--main-text-color: black;
	/* this is also the color for the entire text of a press entry since the entire entry is a link */
	--press-link-color: black;
	/* note this is semi-transparent */
	--caption-bg-color: black;
	--caption-color: white;
		
	--footer-color:white;
	--footer-link-color: #777777;
	--text-shadow-color: #000033;
}

html {
	background: var(--bg-color);
}

/* TODO can i remove this? */
div {
	/* border: 5px solid blue; /* for debugging */
}

body {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	padding-top: 0px;
	line-height: 20px; /* Set line height for the page to 20px, increases space between lines */
}

/* sets the color of links and removes any decoration, like underline */
a {
	color: var(--link-color);
	text-decoration: none;
}

/* this sets the space after <p> tags */
p {
	padding-bottom: 20px;
	font-size: 16px; /* Set the base font size to 16px */
}

/* This would right align even class text blocks... decided not to use it...
.a_class:nth-of-type(even) {
	text-align: right;
}
*/

.class_statement {
/*	text-align: left; */
}

div#syllabi {
	padding-top: 20px;
}

/* column and row for 2 column layouts
 * Default behavior in screen.css is to render as single column
 * by defualt and 2 column if screen is > 978 pixels
 */
div.column {
    flex:  none;
    padding-bottom: 30px;
    /* border: 1px solid blue; /* for debugging */
}

div.row {
    display: block; 
    /* border: 1px solid red; /* for debugging */
}
/* end 2 column stuff */


/*******************************************************************************
 *
 *  This whole section is related to the heading section of the pages
 *
 ******************************************************************************/
div#heading {
	border: 0px solid yellow; /* for debugging */
	position:relative;
	top: 0px;
	left: 0px;
	width: 100%;
}

/* heading_txt block should contain the title and navigation (title is usually 'Mar Hicks')
   setting absolute position of this div and setting z index 1 to put it above headimg */
div#heading_txt {
	position: absolute;
	bottom: 0px;
	right: 0px;
	top: 0px;
	width: 100%;
	border: 0px solid red; /* for debugging */
	/* z-index: 1; */
}

div#navig {
	border: 0px solid black; /* for debugging */
	margin-bottom: 10px;
/* not sure why there is sometime spacing betweenn button and page top
	position: relative;
	top: -3px;
*/
}

div#navig li {
	display: inline;
	font-family: Courier, serif;
	/* font-family: Georgia, serif;  */
	/* font-size: 12px;  */
	font-size: 2.6vw;
}

/* draws the navigation button */
ul#navi li a {
	display: inline;
	text-decoration: none;
	color: var(--button-text-color);
	background-color: var(--button-bg-color);
	padding-left: 5px;
        padding-right: 5px;
	padding-top: 4px;
	padding-bottom: 6px;
	/* disable top of button white line
	border-radius: 0em;
	border-top: 2px solid white;
	*/
	-webkit-tap-highlight-color: var(---webkit-tap-highlight-color);

}

/****************************************************************
 *
 * Obsolete Last-of-type trickery for the navigation...
 * This would give the last button a special color and a
 * special hover color... 
 *
 * replaced by 'current_page' class to indicate which page
 * the user is looking at...
 *
 ****************************************************************/
/* last of type might not work with IE < 9, which would include windows before vista... */
/* ul#navi li + li + li + li + li a { */
/* ul#navi li:last-of-type a { */
/* this is the color of the 5th button on the top */
	/* background-color: #142251; /* this is the main color of the book jacket */
	/* background-color: #FFBA00; */
	/* background-color: #999999;
}
/* on hover flip nav button to white on black */
/* ul#navi li:last-of-type a:hover{
	color: white;
	background-color: #660000; /* alternate color for hovering. other choice: #9C968B * /
}
*/
/****************************************************************
 *
 * END last-of-type obsolete block...
 *
 ****************************************************************/

/* this is the color of button for the current page */
ul#navi li.current_page a { 
	/* background-color: #142251; /* this is the main color of the book jacket */
	/* background-color: #FFBA00; */
	background-color: var(--current-button-bg-color);
}

ul#navi li.current_page a:hover {
	color: var(--hover-button-text-color);
	background-color: var(--hover-button-bg-color); /* alternate color for hovering. other choice: #9C968B #66000 */
}

/* on hover flip nav button to white on red */
ul#navi li a:hover {
	color: var(--hover-button-text-color);
	background-color: var(--hover-button-bg-color); /* alternate color for hovering. other choice: #9C968B #66000 */
}


/****************************************************************
 *
 * Obsolete headline section, left in for backward compatibility
 *
 ****************************************************************/
/* this makes no sense, but inside an H1 block with the ID head, is where I put page headline,
 * but I adjust color inside an ul/il block...
 */
h1#head {
	font-family: 'Courier', serif;
	/* font-family: 'Adamina', serif; */
	color: var(--head-text-color);
	text-align: center;
	bottom: 0px;
	position: absolute;
	width: 100%;
	border: 0px solid green;
	height: auto;
/*
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	padding-left: 25px;
*/
}

ul#title li {
	font-size: 36px; /* changes font size in header title area */
}

ul#title li + li {
	padding-bottom: 20px;
	font-size: 16px;
	text-align: center;
}
/****************************************************************
 *
 * END h1 + ul based title/headline obsolete block...
 *
 ****************************************************************/

div#headline {
	font-family: 'Courier', serif;
	/* font-family: 'Adamina', serif; */
	color: var(--head-text-color);
	text-align: center;
	bottom: 0px;
	position: absolute;
	width: 100%;
	border: 0px solid green;
	height: auto;
}

div#headline .main {
	border: 0px solid orange;
	font-size: 8.4vw;
	height: 5vw;
}

div#headline .submain {
	border: 0px solid orange;
	font-size: 3.5vw;
	height: 2.8vw;
	padding-bottom:10px;
	
}

div#bottom {
	border: 0px solid green; /* for debugging */
	background: var(--main-text-bg-color);
	position: static;
/* 
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px; 
	padding-bottom:60px;
*/
	/* position: float; */
}

/* This is the content section of the page
 * which is where all the main body text goes
 * so this is where you would change the
 * background color of that text.
 */
div#content {
	padding-top: 15px;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 20px;
	text-align: justify;
	text-justify: inter-word;
	color:var(--main-text-color);
}

img#largeimg {
	display: none;
}

/* WTF?
img {
	max-width: 99%;
}
*/

ul#writing li {
	padding-bottom: 20px;
}

img.clothes {
	max-width: 100%;
}

div#twitter {
 	max-width: 400px; 
	border:0px solid red; 
	margin: 0 auto;
}

img.right_img {
	float:right;
	padding-left:18px;
	padding-top:6px;
	padding-bottom:6px;
}

img.left_img {
	float:left;
	padding-right:18px;
	padding-bottom:6px;
	padding-top:6px;
}
	

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}


.press_event {
	border:0px solid blue; 
	overflow: auto;
	padding-bottom: 20px;
	width:auto;
	text-align: center;
}

span.menu_links { cursor: pointer; text-decoration:underline;}

.newnew {
	border: 1px solid red;
}

#lp {
	display:none;
}
.audio {
	display:none;
}
.video {
	display:none;
}
.press {
	display:none;
}
.long {
	display:none;
}
.review {
	display:none;
}
.opeds {
	display:none;
}
.press_event {
	display: none;
}
.popular {
	display: block;
}



#audio {
	display:none;
}
#video {
	display:none;
}
#press {
	display:none;
}
#long {
	display:none;
}
#review {
	display:none;
}
#opeds {
	display:none;
}

#custom {
	display: none;
}

.press_events  h1 {
	font-size: 32px;
	text-align: center;
	padding: 11px;
	text-shadow: 2px 2px 8px #5A5A5A;

}

.press_type h1 {
	font-size: 48px;
	text-shadow: 2px 2px 8px #5A5A5A;
	line-height: .9;
	padding-bottom:5px;
	text-decoration: underline;
}

.press_event a {
	color: var(--press-link-color);
}

p.event_show {
	padding-bottom:3px;
	font-weight: bold;
	font-size:larger; 
}

p.webarchive {
	display:none;
}

p.backup_copy {
	display:none;
}

p.backup_audio {
	display:none;
}

p.event_logo_text {
	font-size:42px;
	font-weight: bold;
	padding-top:18px;
}

p.event_title {
/*	font-size:20px; */
	padding-bottom:3px;
}

/* to alternate left and right float of an image we use this trick...
   we select the parent of the item we need to alternate over, which is 
   press_events... then we select the odd or even children which are the
   press event divs, then we apply this to all the img in the div, which is
   fine, until we have more than 1 img in a press event...
*/
.press_eventsZ div:nth-child(odd) img {
	float:right; /* important */
	position:relative; /* important(so we can absolutely position the description div */
	margin-left:18px;
}

.press_eventsZ div:nth-child(even) img {
	float:left; /* important */
	position:relative; /* important(so we can absolutely position the description div */
	margin-right:18px;
}

p.event_logo  {
	border:0px solid green; 
	font-weight: bold;
	font-size: 36px;
	padding: 0px;
	margin: 0px;
	line-height: 1;
	padding-bottom: 8px;
	font-family: 'Courier', serif;
	text-shadow: 2px 2px 8px #5A5A5A;
}

img.event_logo {
	max-width: 180px;
	padding: 10px;
}

img.event_logo_blk_bg {
	background-color: black;
	max-width: 180px;
	padding: 10px;
}

img.event_logo_nopad {
        max-width: 180px;
	padding-top: 10px;
}
img.event_logo_1 {
        max-width: 180px;
	padding-top: 10px;
}
img.event_logo_2 {
        max-width: 180px;
	padding: 10px;
	padding-top: 5px;

}

/* set the width of a press event screenshot */
img.event_ss {
	/* width: 400px; */
	width: 66%;
	display:none;
}


div.right_caption_image {
	float:right; /* important */
	position:relative; /* important(so we can absolutely position the description div */
	margin-left:18px;
	/*padding-bottom:6px;*/
}
div.left_caption_image {
	float:left; /* important */
	position:relative; /* important(so we can absolutely position the description div */
	margin-right:18px;
	/*padding-bottom:6px;*/
	margin-top:6px;
}
div.caption{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	width:100%;
	/* styling bellow */
	background-color: var(--caption-bg-color);
/*
	font-family: 'tahoma';
*/
	color:var(--caption-color);
	opacity:0.6; /* transparency */
	filter:alpha(opacity=60); /* IE transparency */
}
p.caption_content{
	font-size:14px;
	text-align: left;
	padding:10px;
	margin:0px;
}


img#headimg {
	display: none;
}

img#headimg_mobile {
	display: block;
	max-width:100%;
	position: static;
	top: 00px;
	left: 0px;
	z-index: 0;
}

/* the background here sets the color down the side of the desktop version */
div#page {
	/* background: #332c2c; */ /* old brown background from 2016 and before... */
	/* background: #0096FF; */
        background: var(--bg-color);
	/* background: #142251; */
	position:relative;
	min-height:100%;
	margin-bottom:-60px;
}

div#clearfooter {
	height: 60px;
	clear: both;
}



div#footer {
	clear:both;
	color: var(--footer-color);
	font-size: 10px;
	position:relative;
	line-height: 1;
	width:100%;
	height:60px;   /* Height of the footer */
	/* background: #332c2c; */ /* old brown background from 2016 and before... */
	/* background: #0096FF; */
	/* background: #142251; */
	background: var(--bg-color);
	padding-top:6px;
}

/* change footer link color since blue blends with the background */
div#footer a {
	color: var(--footer-link-color);
}

div#sigcisblog {
	/*
	padding-top: 20px;
	padding-left: 5%;
	padding-right: 5%;
	*/
	padding-bottom: 24px;
	max-width:315px;
	margin-left: auto;
	margin-right: auto;
}

p.writing_desc {
	margin-top: 10px;
}

div.a_class {
	margin-bottom: 40px;
	padding-top:20px;
	/* this stops the image wrap from continuing after the class */
	clear: both;
	border:0px solid blue; 
}

#headimg_desc {
	font-style: italic;
	font-size: smaller;
	line-height: 16px;
}

img.mobile_only {
	display: none;
}

/* -----------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 978px) {


	img#headimg_mobile {
		display: none;
	}

	img#headimg {
		display: block;
		max-width:953px;
	}


	div#twitter {
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
	 	border:0px solid blue; 
		width: 400px;
		margin: 0 auto;
	}

	div#heading {
		/* Set the width of the heading area to a fixed amount */
		width: 953px;
		/* set the margins to both be auto to center the heading */
		margin-left: auto;
		margin-right: auto;
	}

	/* now we want to position the heading_txt area within the heading, and we
           want to position it on the right edge */
	div#heading_txt {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 100%;
		border: 0px solid red; /* for debugging */
		/* z-index: 1; */
	}



	img#largeimg {
		display: block;
		max-width:100%;
	}

	img {
		max-width: 100%;
	}

	div#bottom {
		/* text-align: center; */
		width: 953px;
		/* height: 1000px; britt thinks too big! */
		/* set the margins to both be auto to center the bottom */
		margin-left: auto;
		margin-right: auto;
	}

	div#headline {
		position: absolute;
		right: 25px; /* move name to right side, otherwise don't set */
	}
	div#headline .main {
		padding-bottom: 20px;
		font-size: 48px;
		text-align: right;
		height: unset;
	}

	div#headline .submain {
		padding-bottom: 20px;
		font-size: 22px;
		text-align: right;
		height: unset;
	}


	h1#head {
		position: absolute;
		top: 120px;
		right: 25px; /* move name to right side, otherwise don't set */
		/*
		font-family: 'Adamina', serif;
		font-family: Helvetica, sans-serif;
		*/
		font-size: 48px;
		text-align: left;
	}

	ul#title li {
		display: block;
		padding-bottom: 20px;
		font-size: 48px;
		text-align: right;
	}

	ul#title li + li {
		display: block;
		padding-bottom: 20px;
		font-size: 22px;
		text-align: right;
	}

	/* this is redundant... same settings exist for mobile */
	div#navig li {
		font-size: 18px; /* sets the size of the font in the navigation */
	}

	/* this draws the navigation buttons, but slightly differntly for desktop 
	 * 1 pixel less top & bottom padding (??)
	 */
	ul#navi li a {
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 3px;
		padding-bottom: 5px;
	}

	/* Overrides narrow screen definitions, to move
	 * the navigation div into the right aligned
	 * area within the heading div
	 */
	div#navig {
		position: absolute;
		right: 0px;
		border: 0px solid black;
/*
		padding-bottom: 0px;
		padding-top: 0px;
		padding-right: 0px;
		top: 40px;
		right: 25px;
*/
		/* font-family: Georgia, serif; */
	}

	/* does this do anything??? - britt 7/4/13 */
	ul#navi {
		text-align: right;
	}

/* try this more 
	ul#writing li {
		margin-top:20px;
	}
*/
	ul#writing li:nth-child(5) {
		margin-bottom: 60px;
		border: 0px solid black;
	}

/*
	ul#writing img {
		border: 1px solid blue;
		clear:both;
	}
*/
	ul#writing img:nth-child(5) {
/*
		border: 1px solid blue;
		padding-bottom: 60px;
*/
	}

	/* column and row for 2 column layouts
	 * Default behavior in screen.css is to render as single column
	 * by defualt and 2 column if screen is > 978 pixels
	 */
	div.column {
	    flex: 50%; 
	    /* border: 1px solid blue; /* for debugging */
	}

	div.row {
	    display: flex; 
	    /* border: 1px solid red; /* for debugging */
	}
	/* end 2 column stuff */


} /* end screen media width > 978 pixels */


/* styles that are ONLY for mobile, now normally we put all the mobile
 * stuff in the main body of this, but there are override issues with
 * with the writing page that we then can't set specific widths in the
 * html, and have this work, so in this case we put this here...
 */
@media screen and (max-width: 736px) {

	/* left justify main content text on mobile only... fully justify on desktop */
	div#content {
		text-align: left;
		text-justify: none;
	}

	/* anything with this class is max 50% on mobile */
	.max_half_screen_mobile {
		max-width: 50%;
	}

	/* on mobile layouts, we're going to do all left_caption_images
         * with a max width of 50%
         */
	div.left_caption_image {
		max-width: 50%;
	}

	/* set max width to avoid overflowing img out of caption div */
	div.left_caption_image img {
		max-width: 100%;
	}

	/* on mobile layouts, we're going to do all right_caption_images
         * with a max width of 50%
         */
	div.right_caption_image {
		max-width: 50%;
	}

	/* set max width to avoid overflowing img out of caption div */
	div.right_caption_image img {
		max-width: 100%;
	}

	/* images with no_wrap_mobile class will not have text wrap around
         * them, instead they'll be on their own line stand alone, and we'll
	 * set a max width, remove the padding.  display: block makes sure
	 * they are on their own line, and that text is after it.  inline
	 * display is the usual for an image and text starts right next to it
	 */
	img.no_wrap_mobile {
		display: block;
		padding-left:unset;
		padding-right:unset;
		max-width: 245px;
	}

	div.right_caption_image.no_wrap_mobile {
		max-width: unset;
	}

	div.left_caption_image.no_wrap_mobile {
		max-width: unset;
	}
	

	/* the key magic to disabling the float is using this no_wrap_mobile_clear
	 * div after the image, so that we can clear the float and make text not
	 * wrap
	 */
	div.no_wrap_mobile_clear {
		clear:both;
	}

	img.mobile_only {
		display: initial;
	}

	img.desktop_only {
		display: none;
	}

}

/* for anything narrower than a vertical iphone 6 plus make the this image fullwidth */
@media screen and (max-width: 415px) {

	img.full_width_small_mobile_pic {
		max-width:unset;
		width:100%;
	}

	.press_events  h1 {
		font-size: 24px;
		padding-bottom: 10px;
		padding: 6px;
		text-shadow: 1px 1px 2px var(--text-shadow-color);
	}

	.press_type h1 {
		font-size: 48px;
		text-shadow: 1px 1px 3px var(--text-shadow-color);
		line-height: .9;
	}


}


@media screen and (max-width: 320px) {

	/* for screens this small, the fractional size of the navigation text
	 * is just too small... using fixed 11 pt.
	 */
	div#navig li {
		font-size: 11px;
	}

	/* on iphone5 and smaller screens we're hiding the DH lab button so the
	   buttons don't wrap
         */
	span.dh_blog_button {
		display: none;
	}		


	.press_events  h1 {
		font-size: 21px;
	}
}

/*
@media screen and (max-height: 320px) and (orientation: landscape)  {

	img.right_img {
		max-width: 50%;
		display: block;
	}

	img.left_img {
		max-width: 50%;
		display: block;
	}
}
*/

/* Course video template div classes */
.course_video_title {
        font-style: italic;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
}

.course_video_info {
        text-align: center;
        padding-bottom: 20px;
}

.course_video {
        text-align: center;
        padding-bottom: 20px;
}
.course_video video {
        width: 85%;
}

.course_video_page {
}

.course_video_comment {
        padding-bottom: 20px;
        position: relative;
        margin: 0 auto;
        width: 85%;
}