/***********************************************************************************************************************/
/***********************************************************************************************************************
	    file: cornell.css
	contents: Simple CSS stylesheet for my academic website as a Postdoc in Cornell
	  author: Bruno Salcedo (http://www.brunosalcedo.com)
	    date: July 2016
	 version: 5.5
************************************************************************************************************************/
/*********************************************************************************************************** CSS reset */
html{font-size:100%; -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;
	text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;}
html, body, div, span, h1, h3, h4, p, a, code, em, img, strong, ol, ul, li, label, table, tbody, tfoot, thead, tr, th, td,
blockquote,header, nav, article, figure, figcaption, main{ margin: 0;padding: 0;border: 0;font-size: 100%; vertical-align: baseline;}
header,nav, article, figure, figcaption, main{display: block;}
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;top: -0.5em;}
a{background-color: transparent; text-decoration: none;}
a:active, a:hover {outline: 0;}
img { -ms-interpolation-mode: bicubic; }
/*,body > header:after{border:1px solid black !important;}  /* show all borders to edit design  */
/***********************************************************************************************************************/
/************************************************************************************************************* general */
body{width:90%;max-width:800px;margin:0 auto;overflow-y:scroll;line-height:2;
	font-family:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;}
/***********************************************************************************************************************/
/******************************************************************************************************* header & menu */
body > header{top:0;position:fixed;height:7em;width:90%;max-width:800px;white-space:nowrap;z-index:2;}
body > header:after{content:"";position:absolute;left:0;bottom:-1em;height:1em;width:100%;}
h1{position: absolute;top:0.5em;left: 0;height:1em;line-height:1em;font-size:200%;font-weight:bold;}
h1 a{margin-left: -3px; height: 1em; line-height: 1em;display: inline-block;}
body > header > span{position: absolute;top:3em;left: 0;display: block;height:2em;line-height:2em; }
nav{position: absolute;top:1em;right: 0;height:6em;}
nav a{height:6em;line-height:6em;float:left;position: relative;padding:0 1em;
	text-transform:uppercase;font-weight: bold;}
nav a:hover:after{z-index: 3;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;}
body > header a{color:inherit;}
h1 a:hover, nav a:hover{text-decoration:none;}
#logo{position:absolute;top:1em;height: auto;width: 3em;left: -6em; margin: 0; padding: 0;display: block;}
#logo img{width: 100%;height: 100%;}
#show-menu,header > label,body > header > a{display:none;}
/***********************************************************************************************************************/
/************************************************************************************************************ contents */
main{position:relative;margin-top:12em;padding-bottom: 3em;width:100%;font-size: 95%;}
p,ul,ol,figure,blockquote{margin:0 auto 2em;}
ul{margin-left: 1.2em;}
ul ul, ol ol{margin: 0 4em 0em 2em;}
img{display: block; max-width: 100%; margin:0 auto; padding:0;}
h3{text-align:center;font-size:120%;text-transform:uppercase;margin:0 auto;font-weight: bold;}
h3+span{display:block;text-align:center;margin:0em 0 4em;text-transform:lowercase; } 
h3+h4{margin-top:2em;}
h4{position:relative;font-size:100%;margin:0 auto;font-weight: bold;}
a, label, input[type=button]{text-decoration:none;}
a:hover,label:hover,input[type=button]:hover{cursor:pointer;text-decoration:underline;}
.center{text-align:center;}
.right{text-align:right;}
.skip{margin-bottom:2em;}
.bigskip{margin-bottom:4em;}
/***********************************************************************************************************************/
/*************************************************************************************************** papers & projects */
article{position:relative; margin-bottom: 3em;}
article p{text-align: justify;}
article header{margin-bottom: 1em;}
article header h4{display: inline-block; margin-right: 0.5em;}
article header span{display: block;}
.abstract{margin:0 auto;}
/*controls*/
input[type=checkbox]{display:none;}
article label:before{content:"Show ";} /**/
.example{position:relative;overflow:hidden;max-height:0;transition:all 0.8s;opacity: 0;}
.show-example[type=checkbox]:checked ~ .example{max-height:none; max-height:1000vh; margin-bottom: 5em;opacity: 1;}
.show-example[type=checkbox]:checked ~ p .example-icon:before{content:"Hide ";} /**/
/*examples*/
.example h5{font-size: 100%; font-weight: bold;display: block;width: 100%; text-align: left;}
.example label:before{content:"Hide ";}
/*games*/
.game{margin: 0 auto 2em;border-collapse: collapse;text-align: center; vertical-align: middle;}
.game td{border:1px solid; padding: 1em 2em;vertical-align: middle;}
.game tr:first-of-type td,
.game tr td:first-of-type{border:none;}
/* figures */
article figcaption{text-align: center;}
/* quotes */
article blockquote{position: relative;padding-left: 64px;text-align: left;font-style: italic;}
article blockquote:before{content: "\201C";display: block;height: 48px;width: 48px;position: absolute;left:16px;top: 0px;
	font-family: serif;font-style: italic;font-size: 60px;text-align: center;line-height: 48px;}
/***********************************************************************************************************************/
/************************************************************************************************************* youtube */
.video-icon:before{content:"show ";} 
.hide:before{content:"hide ";}
.youtube{margin: 2em auto 3em;display: none;padding: 0 2em;}
.show-video[type=checkbox]:checked + .youtube{display: block;}
.youtube > iframe{display: block;width:400px; height:225px; /*16x9*/max-width: 100%;margin: 1em auto;}
.youtube img{margin: 1em auto; max-width: 90%;}
/***********************************************************************************************************************/
/************************************************************************************************************* jmvideo */
#intro{min-height: 22em;overflow: visible;}
#intro figure{width:40%;position: absolute;left: 0em;overflow: hidden;}
#intro video{display: block;width: 100%;}
#intro figure figcaption{width:100%;display: block;position:absolute;top:0;height: 0;overflow: hidden;
	background-color: rgba(0,0,0,0.65);color: white;text-align: center;transition:all 0.8s;}
#intro p{text-align:right;}
#intro figure:hover figcaption{height: 100%;padding-top: 40%;} 
#intro > div{left:40%;position: absolute;right: 0;top: 0;padding-left: 3em;}
/***********************************************************************************************************************/
/******************************************************************************************************* announcements */
#announcements{max-width:672px;margin:4em auto;border:2px solid;padding:2em 1em;position:relative;}
#announcements{max-width:870px;}
#announcements ol,#announcements ul{margin:0 1em;padding:0 1em;}
#announcements p{margin:0 2em;}
.exam{list-style:none;margin-left:2em;}
.prelim{list-style:none;padding-top:1em;padding-bottom: 1em;}
/***********************************************************************************************************************/
/*************************************************************************************************************** color */
#intro video{background-color: #d7d7d7;}
body > header{	background-color:white;}
body > header > span,h3+span,article header span{color: #999;}
blockquote:before,nav,.example h5{color:#bbb;}
main a, a:hover, label, .current,article h4 a:hover,header i{color: #4F2683;}
#announcements,#announcements:after{border-color: #4F2683;}
nav a:hover:after{background-color:#4F2683;}
article h4 a, nav a:hover{color:black;}
body > header:after{background-color: white;}
/* Alternatives /*#ef3340;*/ /*#e03*/
/***********************************************************************************************************************/
/****************************************************************************************************** responsiveness */
/* Adjust logo position */
@media(max-width:1120px){
	#logo{position: fixed;left: 0;right: 800px;width: auto;}
	#logo img{padding-left: 25%;margin-left: -2em;width:4em;}
}
@media(max-width:992px){#logo{display: none;}}
/* Switch to responsive menu */ 
@media(max-width:700px){
	article p{text-align: left;}
	main{margin-top:7em;font-size: 90%;}
	body > header i{display: block; text-align: center;}
	body > header{height: 3em;}
	body > header:after{bottom:-1.5em;height:1.5em;}
	body > header > h1,h1 a{top:0;height: 1.5em; line-height: 1.5em;}
	body > header > span {display: none;}
	header > label,body > header > a{display:block;float: right; height: 1.5em;
		font-size: 200%;line-height: 1.5em;width: 1.5em;margin-left:0.5em;}
	nav{z-index:10;top:3em;opacity:0;height: auto;transition:max-height 0.45s, opacity 1.8s;color:white;max-height: 0;
		overflow: hidden;}
	nav{z-index:10;top:3em;opacity:0;height: auto;transition:max-height 0.45s, opacity 1.8s;color:white;max-height: 0;
		overflow: hidden;}
	nav a{display: block;float:none;height:3em;line-height:3em;padding:0 2em;text-align: center;margin-top:2px;}
	nav a:hover:after{display: none;}
	.current,nav a:hover{color: inherit;}
	#show-menu[type=checkbox]:checked ~ nav{max-height:122em;opacity:1;}
	#intro figure figcaption{display: none;}
	/* Switch intro page to vertical array */
	#intro{min-height: auto;overflow: visible;}
	#intro figure{width:100%;position: relative; margin: 0 auto 3em; max-width: 294px;}
	#intro > div{position: relative;left:0;padding-left: 0;}
	#intro p{text-align:left;}
	#intro p:last-of-type{text-align:center;}
	/* colors */
	nav a{background-color: #bbb;}
	#show-menu[type=checkbox]:checked ~ label{background-color: #bbb;color: white;}
	#show-menu[type=checkbox]:checked ~ label i {color: inherit;}
	.current,nav a:hover{background-color: #4F2683;}
	/**/
}
/*Remove first name*/
@media(max-width:400px){
	body> header > h1{width: 100%;left: -100%;position: absolute; z-index: -1;}
	body> header > h1:after{content: "Salcedo";position: absolute;width: 100%;right: -100%;}
}
/********************************************************************************************************** night mode */
#night-mode{display: none;}
#night-icon{position: fixed;bottom: 0.5em;right: 0.5em;display: none;height: 2em;width: 2em;line-height: 2em;
	white-space: nowrap;background-color: white;border-radius: 1em;text-align: center;transition:border-radius 0.9s;}
#night-icon:before{
	content: "night\ mode";height: 2em;line-height: 2em;white-space: nowrap;display:block;position: absolute;
	top:0;right: 2em;padding: 0;background-color: white;max-width: 0;overflow: hidden;transition:padding 0.9s; }
#night-icon:hover{border-radius: 0;}
#night-icon:hover:before{max-width: none;padding: 0 0.5em; border-radius: 1em 0 0 1em;text-decoration: underline;}
.night-mode #night-icon:before{content: "day mode"}
/* night mode colors /*alt : #444 & orange */
.night-mode #night-icon, .night-mode #night-icon:before{background-color: #383733; color: #f8981d;}
body.night-mode,.night-mode > header,.night-mode > header:after,
.night-mode main,.night-mode nav a:hover{background-color:#383733;color:#d8d2c9;}
.night-mode > main > article header span,
.night-mode > header > span,.night-mode h3+span,.night-mode blockquote:before,.night-mode nav,.night-mode .example h5{color:#d8d2c9;}
.night-mode main a,.night-mode  label{color:#acf;}
.night-mode a:hover,.night-mode label:hover,.night-mode a.current, .night-mode nav a:hover{color:#f8981d;}
.night-mode #announcements,.night-mode  #announcements:after{border-color: #f8981d;}
.night-mode nav a:hover:after{background-color:#f8981d;}
.night-mode header i,.night-mode article h4 a:hover,.night-mode a.current{color: #f8981d;}
.night-mode h4,
.night-mode h3,
.night-mode > header,.night-mode article h4 a{color:#dbdbdb;}
@media(max-width:700px){
	#night-icon, #night-icon:before{transition: none;}
	.night-mode #night-icon{bottom: 0;right: 0;}
	.night-mode #show-menu[type=checkbox]:checked ~ #menu-icon:hover{background-color: #f8981d;; color: #383733;}
	.night-mode #show-menu[type=checkbox]:checked ~ #menu-icon{background-color: #f8981d;; color: #383733;}
	.night-mode #menu-icon{color: #f8981d;}
	.night-mode nav a{background-color: #bbb;color: white;}
	.night-mode nav a.current,
	.night-mode nav a:hover{background-color: #f8981d; !important;color: #383733 !important;}
}
/***********************************************************************************************************************/
/*************************************************************************************************************** icons */
@font-face {
	font-family: 'cornell';
	src: url('font/cornell.eot?921706');
	src: url('font/cornell.eot?921706#iefix') format('embedded-opentype'),
		url('font/cornell.woff2?921706') format('woff2'),
		url('font/cornell.woff?921706') format('woff'),
		url('font/cornell.ttf?921706') format('truetype'),
		url('font/cornell.svg?921706#cornell') format('svg');
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "cornell";font-style: normal;font-weight: normal;speak: none;display: inline-block;
	text-decoration: inherit;min-width: 1em;margin-right: .2em;text-align: center;font-variant: normal;text-transform: none;
	line-height: 1em;margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body > header [class^="icon-"]:before,body > header  [class*=" icon-"]:before {
   text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
} 
.icon-mail:before { content: '\e805'; } /* '' */
.icon-moon:before { content: '\e808'; } /* '' */
.icon-sun:before { content: '\e809'; } /* '' */
.icon-menu:before { content: '\e80a'; } /* '' */