@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto Mono'), local('RobotoMono-Regular'), url(/ma-diagrams/css/robotomono_latin.woff2?0) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Mono Bold'), local('RobotoMono-Bold'), url(/ma-diagrams/css/robotomono_bold_latin.woff2?0) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
	img.pic	{
		width: 800px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	img.top-pic	{
		width: 450px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	img.bar-pic	{
		width: 190px;
		display: inline;
		margin-left: 2px;
		margin-right: 2px;
	}
	div.content	{
		width: 800px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	div.bar	{
		margin-top: 10px;
		width: 800px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		vertical-align: middle;
		padding-left: 6px; 
		padding-right: 6px; 
		padding-top: 6px; 
		padding-bottom: 6px; 
	}
	div.title	{
		margin-top: 10px;
		width: 800px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		vertical-align: middle;
		padding-left: 6px; 
		padding-right: 6px; 
		padding-top: 6px; 
		padding-bottom: 6px; 
	}
	hr.pic	{
		height: 2px;
		width: 400px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.con {
	  width: 800px ;
	  margin-left: auto ;
	  margin-right: auto ;
	}
	.desc {
	  width: 800px ;
	  margin-left: auto ;
	  margin-right: auto ;
	  background-color: #f9eee5;
	  padding-left: 18px; 
	  padding-right: 6px;
	  text-indent: -12px;
		font-family:  "Roboto Mono", serif;
	}
	#copyright {
		font-size: 10pt;
	    margin-top: auto ;
	    margin-bottom: auto ;
	}
	ol	{ 
		padding-left:0; 
		list-style-position:inside; 
		line-height:140%;
	}
	body {
		color: #000000;
		background-color: #FFFFFF;
		font-weight: normal;
		font-family:  "Roboto Mono", Helvetica, Arial, sans-serif;
		font-size: 12pt;
		margin: 10px 10px 10px 10px;
		text-align:left;	
	}
	a {
		color: #369;
	}
	a.bar {
		color: #FFF;
		font-size: 10pt;
		font-weight: bold;
		text-decoration: none;
	}
	.tots {
		background:#f9eee5;
	}
	.alt {
		color: #FFF;
		font-size: 12pt;
		background-color: #000;
	}
	p {
		display: block;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		margin-left: 5em;
		margin-right: auto;
	}
	table { 
		border: none; border-collapse: collapse; 
	}
	table td { 
		border-left: 1px solid #000; 
		text-align: center;
		vertical-align: top; padding: 3px 15px 3px 15px;
	}
	table td:first-child { 
		border-left: none;
	}
	.zoom {
  		transition: transform .2s;
  		margin: 0 auto;
	}

	.zoom:hover {
  		transform: scale(1.5);
	}