@charset "UTF-8";
/* CSS Document */

/* site-wide font */

body {
	margin-top:0px;
}

p {
	font-family: Monaco, "Lucida Console", monospace;
	font-size: 0.74rem;
	font-style: normal;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #000000;
	margin-top:0px;
	padding: 1% 0px 7% 0px
}

@media screen and (max-width: 800px) {
	p {
		font-family: Monaco, "Lucida Console", monospace;
		font-size: 0.74rem;
		font-style: normal;
		letter-spacing: 0.05em;
	}
}

p.menu {
	font-family: Monaco, "Lucida Console", monospace;
	font-size: 0.74rem;
	font-style: normal;
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #000000;
	margin-top:0px;
	padding: 1% 0px 0% 0px
}

@media screen and (max-width: 800px) {
	p.menu {
		font-family: Monaco, "Lucida Console", monospace;
		font-size: 0.74rem;
		font-style: normal;
		letter-spacing: 0.05em;
	}
}

.italic {
	font-family: Monaco, "Lucida Console", monospace;
	font-size: 0.74rem;
	font-style: italic;
	letter-spacing: 0.05em;
	color: #000000;
	margin-top:0px;
}

@media screen and (max-width: 800px) {
	.italic {
		font-family: Monaco, "Lucida Console", monospace;
		font-size: 0.74rem;
		letter-spacing: 0.05em;
		font-style: italic;
	}
}

a {
	text-decoration: underline;
	color: #000000;
}

a:hover {
	color: #000000;
	text-decoration: overline;
}


a.underline {
	font-family: "Times New Roman", Times, serif;
	color: #000000;
	font-size: 1.6rem;
	font-weight: bold;
	line-height:1.2;
	padding: 0;
	padding-top: 0;
	text-decoration: none;
	color: #000000;
}

a.underline:hover {
	font-family: "Times New Roman", Times, serif;
	color: #000000;
	font-size: 1.6rem;
	font-weight: bold;
	line-height:1.2;
	padding: 0;
	padding-top: 0;
	color: #000000;
	text-decoration: none;
	border-bottom: solid 0.15em;
}

.block {
	display:block;
	}	
	
		
.side {
	position:fixed;
	z-index:2;
	left:3rem;
	top:1rem;
	margin-right: 0;
	pointer-events: auto;
}

@media screen and (max-width: 800px) {
	.side {
    	width: auto;     
    	left: auto;     
    	right: 3rem;       
    	top: 1rem;         
    	padding-left: 0;   
  }
}

#menu {
	display: block;
	z-index:1;
	float: left;
	height: auto;
	margin: 0;
	clear: both;
	pointer-events: auto; 
}

.menu {
	padding-top: 1rem;
	padding-left: 10%;
	padding-bottom: 5%;
	width: 60%;
}

@media screen and (max-width: 800px) {
	.menu {
		padding-top: 1rem;
		padding-left: 5%;
		width: 90%;
		pointer-events: auto;
	}
}

	
#content {
	display: block;
	z-index:1;
	float: left;
	pointer-events: auto; 
}

.content {
	width: 60%;
	padding-left: 10%;
	padding-top: 3rem;
  	margin-left: 0;
 	margin-right: 0;
}

@media screen and (max-width: 800px) {
	.content {
	width: 90%; /* The width is 90%, when the viewport is 800px or smaller */
	padding-left: 5%;
	padding-top: 3rem;
	pointer-events: auto;
	}
}

#content_left {
	float: left;
	height: auto;
	width: 50%;
	padding-left: 0;
	margin: 0;
}
	
#content_right {
	float: left;
	height: auto;
	width: 50%;
	padding-left: 0px;
	margin: 0;
	clear: none;
}

#hidden0 {
	width: inherent;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	pointer-events: auto;
	}
	
	
table.cv {
	font-family: Monaco, "Lucida Console", monospace;
	font-size: 0.74rem;
	font-style: normal;
	letter-spacing: 0.05em;
	line-height: 1.4;
	color: #000000;
  	width: 100%;
  	border-collapse: collapse;
  	table-layout: fixed;
}

.cv th {
  	text-align: left;
  	padding: 3rem 0 0.5rem 0;
  	font-weight: 600;
}

.cv td {
 	vertical-align: top;
 	padding: 0.25rem 0;
}

.cv td.date {
 	width: 5rem;   /* desktop control */
 	padding-right: 1rem;
	white-space: nowrap;
}


/* =========================
   Mobile Layout
   ========================= */

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

	.cv tr {
    	display: block;
    	margin-bottom: 1rem;
	}

	.cv td,
	.cv th {
   	 	display: block;
	 	width: 100%;
  	}

	.cv td.date {
    	width: 100%;
    	font-weight: 600;
    	padding-right: 0;
	}

	.cv th {
    margin-top: 2rem;
	}

}