/*
Theme Name: Bob Thall
Theme URI: http://bobthall.com
Description: Theme for bobthall.com 
Version: 1.0
Author: Brandon Sorg
Author URI: http://brandonsorg.com
*/

/* @ TEMP
	
light 300
reg 400
semi bold 600
bold 700
extra bold 800

*/


/*************************************************/

/* -----------------------------------------------
	SIMPLE RESET
----------------------------------------------- */

:link,:visited { text-decoration:none }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

a img,:link img,:visited img { border:none }

address { font-style:normal }


/* -----------------------------------------------
	MAIN / LAYOUT
----------------------------------------------- */
body {	
	background-color: #fff;
	font-family: 'Open Sans', Helvetica, Arial, "Lucida Grande", sans-serif;
	color: #222; font-size: 14px; line-height: 1.5;
}

#container, #sidebar, #content { position: relative; box-sizing: border-box; }

#container { padding-left: 30px; padding-top: 20px; margin: 0; min-height: 785px; /* previously 700 - also set in ipad section */ min-width: 800px; }

#sidebar { width: 370px; position: fixed; left: 0; padding-left: 20px; height: 100%; min-height: 785px; /* previously 700 - also set in ipad section */ /* @@@ make this js dynamic? */ }

	#header {  }
	
	#nav { float: left; margin-top: 20px; width: 100%; /* position: absolute; top: 60px; */  }

#content { margin-left: 360px; /* min-height: 550px; margin-top: 60px; */ margin-top: 60px;  }


/* -----------------------------------------------
	NAVIGATION
----------------------------------------------- */
/* @@@ will have to rework nav in mobile, and also consider getting dates into anchor so can do as display:block again */

#nav { line-height: 1.8; }
#nav a { /* display: block; */ color: #666; }

#nav .navgroup { margin-bottom: 18px; }
	#nav .navgroup h2 { font-size: 13px; font-weight: 600; color: #000; display: block; margin-bottom: 5px;  }
	#nav .navgroup > ul { font-size: 12px; color: #000;  margin-bottom: 7px;  }
		#nav .navgroup > ul > li { position: relative; left: -4px; }
		#nav .navgroup > ul > li > a {  display: block; }
		
		#nav .navgroup > ul > li .bullet { position: relative; left: -4px; visibility: hidden; }
		#nav .navgroup > ul > li.current_page_item .bullet, #nav .navgroup > ul > li:hover .bullet { visibility: visible; }

/* nav ident and line break .nav_indent added directly into wordpress header */
#nav .nav_indent { position: relative; left: 30px;}
#nav .nav_indent::before{
    content: "\a";
    white-space: pre;
}

/* this is added via walker in functions.php */
.year_range { color: #ccc; margin-left: 6px; }
	
/*
#nav ul.pages {  }
#nav ul.pages > li { margin-bottom: 5px; }
	#nav ul.pages a { font-size: 11px; }
*/

#nav .current_page_item a { /* color: #b59663; */  }


/* -----------------------------------------------
	HEADERS / TYPOGRAPHY / STYLING
----------------------------------------------- */
h1, h2, h3, h4, #site-header { /* font-family: 'Volkhov', serif; */ }
#site-header {
	font-size: 25px;
	color: #aaa;
	font-weight: 600;
}
h2 { color: #333; font-size: 14px; margin-bottom: 20px; font-weight: 800; }
h3 {  }
h4 {  }

/* PARAGRAPHS */
p { margin-bottom: 15px; }
* p:last-child {margin-bottom: 0;}


/* LISTS */
ul { }
li { }

/* LINKS */
a { color: #006699; text-decoration: none; }
a:hover { color: #000; }

hr {  }
strong { font-weight: bold; }
em { font-style: italic; }
small { font-size: 80%; }


/* -----------------------------------------------
	INDIVIDUAL PAGES
----------------------------------------------- */

/* flash of content, revealed in js */
/* .page #content, .single-writing #content { visibility: hidden; } */
/* #slideshow, #project_nav { display: none; } */
/* .single-photographs #content { visibility: hidden; } */
/* #slideshow img { visibility: hidden; } */
/* #content_cover { border: 1px solid red; position: absolute; top: 0; width: 1000px; height: 1000px; z-index: 10000 ; } */

#content, #project_nav, .image_meta { visibility: hidden; }

/* -----------------------
	PROJECT
----------------------- */
html, body, #container, #content { height: 100%; box-sizing: border-box; }
.home #content, .single-photographs #content { margin-top: 0; padding-bottom: 125px; padding-right: 20px; } /* @@@ temp fix - this is padding top plus padding bottom needed for slideshow top/bottom alignment, padding-top only is added to #slideshow as top positioning */

/*
html, body { border: 1px solid red; }
#container { background: #fff; border: 1px solid black;  }
#sidebar { border: 1px solid red; }
	#nav, #header { border: 1px solid yellow; }
	#content { border: 1px solid blue; }
#slideshow { border: 1px solid red; }
	#slideshow li { border: 1px solid green; }
*/

#slideshow li { display: none; }
#slideshow li:first-child { display: block }

ul#slideshow {  height: 100%; position: relative; top: 60px;  }
	#slideshow li {  width: 100%; height: 100%;  }
#slideshow img {  width: 100%; height: 100%; object-fit: contain; max-width: 2000px; }

.image_meta {  }

/*
#logik {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:white;
    top: 0;
    z-index: 9999;
}
*/

/* THUMBS */
ul#slideshow_thumbs { display: none; z-index: 99998; position: relative }
	#slideshow_thumbs li { width: 30%; display: inline-block; padding: 5px; box-sizing: border-box; }
		#slideshow_thumbs li img { width: 100%; height: auto; } /* overridden by js */

/* SLIDESHOW - META */
#slideshow .image_meta { /* display: none; */ } /* moves to Project Nav via js */
#slideshow_meta {  }
	.image_meta { font-size: 11px; color: #999; position: relative; top: 10px; }
		.image_meta > span { display: block; }
		.image_title {  }
/* 		.image_caption { font-size: 11px; color: #666; } */


/* PROJECT NAV */
#project_nav_place { position: absolute; bottom: 55px; width: 300px; } /* moves to sidebar via js */

/* copyright */
.copyright { font-size: 11px; color: #ccc;   }
.copyright_sidebar { position: absolute; bottom: 53px; visibility: hidden; }
.copyright_footer { display: none; }
.home .copyright_sidebar { visibility: visible; }

#project_nav {  /* height: 40px; */ position: relative; }
	#project_nav .group {  height: 20px;  }
		#project_nav .group div, #project_nav .group span, #project_nav .group a { font-size: 12px; color: #aaa; display: inline-block; height: 20px; line-height: 20px; vertical-align: bottom; }
		#project_nav .group a:hover { color: #777; }
		#project_nav .divider { padding: 0 3px; }
		#nextprev #count { margin-left: 10px; color: #ccc; }



/* PROJECT STATEMENT */
/*
#statement { position: absolute; top: 0px; background: #fff; z-index: 10; left: 0; }
	#statement_inner { max-width: 600px; min-width: 450px; padding-bottom: 20px; margin-right: 50px; }
#statement { display: none; }
*/



/* COMING SOON NOTE */
#coming_soon { position: relative; top: 65px; }



/* OVERLAY NAV */
#overlay_wrap { position: absolute; height: 100%; width: 100%; z-index: 1001; }
.overlay {  display: block; height: 100%; width: 300px; background: transparent; position: absolute; top: 0; z-index: 1000; opacity: 0;   }
	.overlay.next { right: 0; }
	.overlay.prev { left: 0; }
	.overlay span { position: absolute; font-size: 50px; }
		.overlay.next span { right: 20px; }
		.overlay.prev span { left: 20px; }		

		.overlay.prev {
		    cursor: url("lib/cursor-left.png") 0 0, pointer; /* Legacy */
		    cursor: url("lib/cursor-left.png") 0 0, pointer; /* FF */
		    cursor: -webkit-image-set(url("lib/cursor-left.png") 1x, url("lib/cursor-left@2x.png") 2x) 0 0, pointer; /* Webkit */
		}
		
		.overlay.next {
		    cursor: url("lib/cursor-right.png") 0 0, pointer; /* Legacy */
		    cursor: url("lib/cursor-right.png") 0 0, pointer; /* FF */
		    cursor: -webkit-image-set(url("lib/cursor-right.png") 1x, url("lib/cursor-right@2x.png") 2x) 0 0, pointer; /* Webkit */
		}
		
		.overlay.prev { /* cursor: w-resize; */ }
		.overlay.next { /* cursor: e-resize; */ }

		

/* -----------------------
	PAGE
----------------------- */

/* GENERIC */
.page #container, .single-writing #container {  }
.page #content, .single-writing #content { padding-left: 50px; max-width: 700px; /* min-width: 500px;  */ padding-bottom: 20px; margin-right: 45px; line-height: 1.8; height: auto;  margin-bottom: 50px;  }


/* RESUME */
.page-id-31 #content { font-size: 12px;  line-height: 1.8;}

.page-id-31 #content p {
    padding-left: 80px;
    text-indent: -80px;
	margin: 0px; margin-bottom: 0px;
}


/* SLIDESHOW with narration */
.slideshow-template-default #content { max-width: 1000px; }

.slideshow-template-default iframe { background-color: #FFFFFF; }

.video-embed-container {
  margin-right: 20px;

  --video--width: 1020; /* 1000 plus 20 margin on right */
  --video--height: 750;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
}

.video-embed-container iframe,
.video-embed-container object,
.video-embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* ----------------
	PUBLICATION
---------------- */

.publication { /* min-width: 640px; */ } /* @@@ temp, and figure responsive better for mobile */

.publication { margin-bottom: 60px; font-size: 12px; }
	.publication h3 { font-size: 14px; font-weight: 800; margin-bottom: 20px; }
	.publication_image { /* width: 215px; height: 215px; */ margin: 0 15px 15px 0; float: left;  }
		.publication_image img { max-width: 215px; max-height: 215px;   }
	.publication_info { float: right; width: 400px;  position: relative;  }
		.publication_info p { margin-bottom: 0; }
		.publication_info .publications_links { margin: 15px 0; display: block; }
	.publication_text { clear: both; }
	




/* -----------------------------------------------
	MISC & CLASSES
----------------------------------------------- */
.floatLeft { float: left; }
.floatRight {float: right; }
.hidden { display: none; }
.clear { clear: both; } .clearLeft { clear: left; } .clearRight { clear: right; }

.ir { display:block; text-indent:-999px; overflow:hidden; background-repeat: none; }

.group:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

html { overflow-y: scroll; } /* force scrollsbar in non-ie */

/* REMOVE OUTLINING OF LINKS */
a:focus, a:hover, a:active { outline:none }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }

/* pagination generic */
.pagination { display: block; }
	.pagination .next { float: right; }
	.pagination .prev { float: left; }


/* USER STATUS */
#userStatus-wrapper {
	padding: 0px 0px 15px 15px; position: absolute; top: 0px; right: 0px; opacity: .40;
	-webkit-transition: opacity .3s ease-in;
	-moz-transition: opacity .3s ease-in;
	-o-transition: opacity .3s ease-in;
	transition: opacity .3s ease-in;
	}
#userStatus-wrapper:hover { opacity: 1; }
#userStatus {  font-size: 10px; background-color: #bbb; color: #fff; padding: 2px 5px; }
	#userStatus a { color: #fff; padding: 6px; }
	#userStatus a:hover { color: #333; }
#login { display: block; cursor: pointer; position: absolute; top: 0px; right: 0px; background-color: transparent; color: #fff; padding: 4px 5px; text-align: center; font-size: 10px; }
	#login { 
		-webkit-transition: background .5s ease-in;
		-moz-transition: background .5s ease-in;
		-o-transition: background .5s ease-in;
		transition: background .5s ease-in;
	}	
	#login:hover { background: #bbb; }



/* WP EDITOR - POST CONTENT */

/* padding does left/right, margins top/bottom */
.alignleft, img.alignleft { float: left; padding: 0 15px 0 0; margin: 5px 0; }
.alignright, img.alignright { float: right; padding: 0 0 0 15px; margin: 5px 0;  }
.aligncenter, img.aligncenter { padding: 0; margin: 5px auto; display: block; clear: both; }
.alignnone, img.alignnone { padding: 0; margin: 5px auto; }

/* for post content, set some standard styling */
	/* @ do these up better, new section and correspond with base beginning */
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin: 0 0 15px 0 !important; padding: 0; font-weight: bold; }
.post-content h1 { font-size: 18px; }
.post-content h2 { font-size: 16px; }
.post-content h3 { font-size: 14px; }
.post-content h4 { font-size: 12px; }
.post-content h5 { font-size: 11px; }
.post-content h6 { font-size: 10px; }

.post-content ul, .post-content ol { margin: 20px 0; padding-left: 20px; }
.post-content ul { list-style-type: disc; }
.post-content ol { list-style-type: decimal; }
.post-content li { margin-bottom: 2px; }

/* #content img { max-width: 600px; height: auto; } */ /* rule to insure images never expand out of the box, rest of sizing is done with wp */
/* #content div.wp-caption[style] { max-width: 600px; } */ /* a larger width is applied by wp, inline, this overrides that */

/* captions */
.wp-caption { padding-top: 4px; margin: 10px 0; }
.wp-caption img { margin: 0; padding: 0; border: none; }
.wp-caption p.wp-caption-text {	text-align: center; font-size: 10px; font-style: italic; line-height: 17px; padding: 4px 5px; margin: 0; }




/*************************************************
	MEDIA QUERIES FOR RESPONSIVE DESIGN
*************************************************/



#menu { display: none; } /* only for mobile - hide for others */


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 736px)  {	 /* 480? 568? 600? 736? */

	html, body, #container, #content { height: auto; }
	.home #content, .single-photographs #content { margin-top: 0; padding-bottom: 0px; padding-right: 0px; }

	#container { padding: 0 10px; min-height: none; min-width: 0; }
	#sidebar { padding: 0; width: auto; position: relative; min-height: 0; height: auto; z-index: 999;    }
		#header { padding: 10px 0 5px 0; }
	#content {  margin: 0; min-height: 0; min-width: 0 !important; max-width: none; width: 100%;  }
	
	#menu { display: block; position: relative; margin-top: 10px; margin-bottom: 20px; padding: 10px 0; background: #f3f3f3; padding-left: 5px; color: #333;  }	



	#nav { padding: 0; margin: 0; display: none; padding-bottom: 10px; margin-bottom: 25px; border-bottom: 1px solid #ccc;  }	
			
	#nav .navgroup {  }
		#nav .navgroup h2 {  }
		#nav .navgroup > ul {   }
			#nav .navgroup > ul > li { left: 0px;/*  border: 1px solid red;  */ display: block; padding: 5px 0;  }
			#nav .navgroup > ul > li > a { padding: 10px 0 10px 5px; background: transparent; /* border: 1px solid green; */ background: #f3f3f3;  }
			
			#nav .navgroup > ul > li .bullet { left: 0px; display: none; }
			#nav .navgroup > ul > li.current_page_item .bullet, #nav .navgroup > ul > li:hover .bullet { display: none; }
			
	
	/* project */
	ul#slideshow, #slideshow * { margin: 0; padding: 0; width: 100%; height: auto; top: 0px; }
		#slideshow li {  margin-bottom: 25px;  display: block;}
			#slideshow li img {  width: 100%; height: auto; margin-bottom: 5px; }
	
	#overlay_wrap,
	#project_nav { display: none !important; }
			
	#slideshow .image_meta { display: block; width: 100% !important; } /* width overrides js that scales caption width for standard site */
		.image_meta {    display: block; margin: 0;  }
			.image_meta > span { display: block; }
			.image_title { width: 100% !important;  }
	
	/* headers alter */
	h2 { margin: 20px 0px 15px 0px; }

			
	/* index  @ temp position for wide img */
	.home #slideshow { margin-top: 40px; }
	
	
	.publication { margin-bottom: 30px; }
		.publication_image { width: 100%; }
			.publication_image img {  max-width: none; max-height: none; width: 100%; height: auto; margin: 0px; margin-bottom: 10px; display: block; }
			.publication_info { display: block; float: none; padding-left: 20px; box-sizing: border-box; margin-bottom: 20px; width: 100%;  }
				.publication_info p { margin-bottom: 0; font-size: 12px; }
				.publication_info .publications_links { margin: 5px 0;  }
		
	.page #content, .single-writing #content { padding: 0px; margin: 0px; }
	.page-id-31 #content p { padding-left: 60px; text-indent: -60px; }

	.copyright_sidebar { display: none; }
	.copyright_footer { display: block; margin: 30px 0; }
	
	/* slideshow with narration */
	.video-embed-container { margin-right: 0px; }
	
	
}


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)  /* 568?*/
and (orientation : landscape) {



}

/* Smartphones (portrait) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) {



}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

	/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ 
	#overlay_wrap { display: none; }

	#container {  min-height: 700px; /* previously 700 */ }
	#sidebar { width: 420px; min-height: 700px; /* previously 700 */ }
	#content { margin-left: 400px;  }
		
		#nav .navgroup { margin-bottom: 10px; }
		#nav .navgroup h2 { font-size: 12px;  }
		#nav .navgroup > ul { font-size: 11px;   }
			#nav .navgroup > ul > li { left: -4px; }
			#nav .navgroup > ul > li > a {   }
			
			#nav .navgroup > ul > li .bullet { position: relative; left: -4px; }
			

	


}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {



}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {




}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {



}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {



}	


/* //////
all except desktop and large screens were min/max-device-width	
*/


.image_meta { margin: 0 auto; }

/*************************************************
	DEBUG $
*************************************************/


/*
#container { background: #fff; border: 1px solid black; }
#sidebar { border: 1px solid red; }
	#nav, #header { border: 1px solid yellow; }
#content { border: 1px solid black; }


ul#slideshow { border: 1px solid yellow; }
	#slideshow li { border: 1px solid blue; }
		#slideshow li img { border: 1px solid green; }
#statement { border: 1px solid red; }

#project_nav { border: 1px solid red; }
	#project_nav_bar { border: 1px solid red;   }
		#project_nav_bar > div { border: 1px solid red; }
		
#slideshow_meta { border: 1px solid red; }
	.image_meta {   border: 1px solid red;  }
		.image_meta > span { display: block; }
		.image_title { border: 1px solid red; }
		.image_caption { border: 1px solid red; }
*/