@import "blue.css";
 

/*
notes on ordering:
- position/size/display
- border
- margin/padding
- font/align
- other
*/



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

     MAIN BLOCKS

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



body{
	width: 1100px;
	margin: 0 auto;	
	background-repeat:repeat;
}

header{
	position:relative;
	height: 3.5em;
	
	margin: 3em 5% 3em;
	padding: 0;
 
	border-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	
	font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; 
}

body#Bhome li#Hhome,body#Bwork li#Hwork,body#Bpub li#Hpub {
   	pointer-events: none;
	cursor: default;
}


#content{
	margin: 5em 5% 5em;
	padding: 0em 6% 1em;

	border-width: 6px;
	border-left-style: solid;
	border-right-style: solid;
	
	font-family:-apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
	font-size:15px;
	text-align:justify;
	
}


footer{
	width: 30em;
	display: block;

	margin: 4em auto;
	margin-bottom: 4em;
	padding: 0.5em;

	text-align: center;
	font-weight: bold;
}





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

     TEXT

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





h1{
	margin:0;
	padding:0.25em;

	text-align: left;
}

h2
{
	text-indent: 2em;
	font-size:2em;
	margin: .5em 0 0.6em 0;
	font-variant: small-caps;
	font-family: "Ubuntu condensed",Ubuntu,sans-serif;
}


h3
{
	text-indent: 0pt;
	font-size: 1.4em;
	line-height: 1.4em;
	margin: 1em 0 1.5em 0;
	font-family: Ubuntu,sans-serif;
	text-align:left;
}


#sidenote {
	color: #66a;
	text-align: right;
	font-style: italic;
}

#recth3{
	width:10%;
	height:0.5em;
	display:inline-block;
	margin: 0 .5em  0 0;
}

#h3aa{	display:inline;}

em.h3b{
	font-size: .75em;
}


h4 {
    margin: 1em 0px 0.5em;
    text-align: left;
    text-indent: 0pt;
    font-size: 1.1em;
    font-family: Ubuntu,sans-serif;
    font-style: italic;
    font-weight: bold;
}

.sep-teach{
	display:block;
	padding-bottom:1em;

}

#contact{
	float:right;
	display:inline-block;
	text-align:left;
	font-family: "Ubuntu condensed",Ubuntu,sans-serif;
	margin-bottom:4em;
	padding: 0.5em;
	border-top-left-radius:1.5em;
	border-bottom-left-radius:1.5em;
}

#contactitle{
	font-size:1.1em;
	font-weight:bold;
}

content>p{
	margin: 0.2em 0;
	text-align: justify;
	font-size:large;
	text-indent: 2em;
}

#prestitle{
	padding-top: 1em;
}

#presentation{
	margin-bottom: 5em;
	margin-top:    5em;
}

.fstpres{
	margin-bottom: 3em;
}

#lastup
{
	margin-top: 3em;
	text-align:right;
	font-style: italic;
}

a:link {
    	text-decoration: none;
	font-weight:bold;
}

.email{ display: inline-block}



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

     NAV

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



nav{
	position:absolute;
	top:0px;
	bottom:0px;
	right:0px;
}


nav>ul{
	height:100%;
	float: right;
	margin: 0;
}

nav>ul>li{
	height:100%;
	display: inline-block;
	margin: 0;
	padding: 0 20px 0 0;
	list-style: none;
}

nav>ul>li>a{
	height:100%;
	width:100%;
	display: inline-block;

	padding: 0 0 0 20px ;
	
	text-decoration: none;
	line-height:230%;
	font-size: 1.4em;
	color:#000;
}

nav>ul>li:last-child{
	border-bottom-right-radius: .2em;
}



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

     IMAGES AND ASSOCIATED MARGINS

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



img{
	max-width: 100%;

	border-style: solid;
	border-width: 1px;
	box-shadow: 3px 3px 5px;
}

p,h3{	clear:both;}

.wrap_right{
	height:2.2em;
	float:right;
	margin: 0 0 0 1em;
	vertical-align: bottom;
	border-width: 0;
	padding: 5px;
	box-shadow: 2px 2px 2px #bbb;
}

#logo_ens_pres{
	height:3.4em;
	min-width:5em;
	margin-left: 2em;
	margin-bottom: 1em;
}

#me { 
	height:13em;
	vertical-align: top; 
    box-shadow:unset;
}
	
.wrap_left
{
	float:left;
	margin: 0 2em 0 0;
}

#tipepic{width:18%;}

#l3pic{	width:13%;}

.piccenter{
	width: 60%;
	margin: 1em 0 1em 0;
}

.piccenterp{
	text-align:center;
}

#firstwork{
	margin: 1.5em 0 1.5em 0;
}

.logo_list
{
	height: 5em;
	border-style: none;
	border-width: 0;
	box-shadow: 3px 3px 5px;
	box-shadow: none;
}
.logopad{
	margin-left:10%;
}

#logos{ 
	width:100%;
	margin: 0 0;
	text-align:center;
}
#logos>ul{ 
	padding: 0;
	margin: 0 0;
}
#logos>ul>li{ 
	display: inline;
	vertical-align:top;
}



html{
  min-height: 100%;
}
body {
  min-height: 100%;
}




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

                                   MOBILE

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

/* prevent chrome mobile from resizing font */
content {max-height: 999999px;}
p,h1,h2,h3,nav,footer,a,.fstpres,.h3b,.h3aa,.entry,.doi,.author,.title,.key,.publis {max-height: 999999px;}




/* small screen: nav goes out of header */
@media (max-width:750px) and (orientation:portrait){
		nav{margin-top:3.5em}
		header{height: 7em}
	}


/* not computer-large screen */
@media  (max-device-width:1000px){
		#content{font-size:150%}
		footer{font-size:150%}
		body{
			max-width: 1100px;
		}
		h3{ margin: 2em 0 1.5em}

		.piccenter{width:80%}
		
	}

@media (max-device-width:1000px){
		<meta name="viewport" content="initial-scale=1">
	}
	
	
/* small window or small device*/
	
@media  (max-width:1000px) and (orientation:portrait), (max-device-width:1000px){



	body{
		width:initial;
		min-width:600px;
		-moz-text-size-adjust:none;
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
	
	/**

	 MAIN TEXT

	**/
	
	
	h2{text-indent:5%}

	h3{line-height:1em}


	h3>.h3a{
		margin-bottom: .5em; 
		margin-left:20%; 
		text-indent:-20%; 
		width:80%
	}

	#recth3{
		width:80px; 
		/*width:20%; 
		margin-right:5%;*/
	}


	em.h3b {line-height:5px;}


	#h3aa{display:inline; }
	
	}
	
	
/* small device */

@media   (max-device-width:600px) and (orientation:portrait){


	/**

	 MAIN BLOCKS

	**/

	header{
		margin:1em 1em;
		font-size: 150%;
	}

	#content{
		margin: 3em .5% 0em;
		padding: .5em 3% 1.5em;
		font-size:270%;
	}

	footer{	
		width:auto;
		max-width:80%;
		margin: 1em auto 2em;
		padding-right:2%;
		padding-left:2%; 
		font-size: 200%;
	}
	
	

	/**

	 MAIN TEXT

	**/

	.h3a, .fstpres{
		display:block; 
		width:100%; 
		clear:both
	}

	#presentation{ margin-top: 3em;}

	/**

	 IMAGES

	**/

	img {border-width: 4px}

	.wrap_right {
		margin-bottom:1em;
		float:right;
		display:block; 
	}

	#logo_ens_pres{ display:block;}

	.piccenter{ 	width:100%}

	#tipepic{ 	width:25%;}
	#l3pic{		width:20%;}





}