body {
 	margin: 0;
   	padding: 0;	
	background-color: #000000; 
	font-family: calibri, verdana, arial; 
	font-size: 100%;
	color: #fff; 
	text-align: center;
	}

#menu {
   	float: left;
  	width: 100%;
   	background: #000;
   	padding-top: 2px;
	padding-bottom: 2px;
	/* the overflow option (hidden) is necessary */
   	overflow: hidden;
   	position: relative;
	}

#menu ul {
	clear: left;
	float: left;
	list-style-type: none; 
	margin: 0 auto; 
	padding: 0; 
	position: relative;
	left: 50%;
	}

#menu ul li {
	/* float: left; */
	position: relative;
	right: 50%;
	}

#menu ul li a {
	display: block;
	width: 300px;
	border: 2px solid #5b5;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	background-color: #444;
	padding: 10px 10px;
	margin: 5px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: normal;
	}

#menu ul a:hover {
	background-color: #777;
	}

div.title img {
	margin: 0px auto;
	}

div.back img {
	margin: 0px auto;
	}

table {
	margin: auto;
	}

td {
	text-align: left;
	vertical-align: center;
	padding: 10px 10px 10px 10px;
	}

div.photo img {
	margin: 0px;
	}

div.photo video {
	margin: 0px;
	}

/* The long (standard) caption. */
div.caption {
	width: 678px; /* 678+10+10+1+1=700 */
	background-color: #222;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	}

/* The caption for a vertical image. */
div.vcaption {
	width: 503px; /* 503+10+10+1+1=525 */
	background-color: #222;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	}

/* The caption for a reference. */
div.reference {
	width: 378px; /* 503+10+10+1+1=525 */
	background-color: #222;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	}

div.notes {
	width: 676px;
	background-color: #031;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	}

/* unvisited link */
a:link {
    color: #0a0;
	}

/* visited link */
a:visited {
    color: #5b5;
	}

#contact {
	font-size: 0.8em;
	}

#contact a:link {
	color: #888;
	}

#contact a:visited {
	color: #666;
	}

div.left {
	width: 100%;
	float: left;
	}

div.clear {
	/* stop floating */
    	clear: both;
	}

/* The styles for mobile phones. The photos and captions are full-width. */
/* The physical width and the CSS width may be different (www.mydevice.io/devices) */

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

body {
	/* The first three lines prevent erratic pixel adjustments in reloads and phone rotations. */
	-webkit-text-size-adjust: 100%;  
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;	
	margin: 0;
   	padding: 0;	
	background-color: #000000; 
	font-family: calibri, verdana, arial; 
	font-size: 80%;	/* Reduce the font. */
	color: #fff; 
	text-align: center;
	}

#menu {
   	float: left;
  	width: 100%;
   	background: #000;
   	padding-top: 2px;
	padding-bottom: 2px;
	/* the overflow option (hidden) is necessary */
   	overflow: hidden;
   	position: relative;
	}

#menu ul {
	clear: left;
	float: left;
	list-style-type: none; 
	margin: 0 auto; 
	padding: 0; 
	position: relative;
	left: 50%;
	}

#menu ul li {
	/* float: left; */
	position: relative;
	right: 50%;
	}

#menu ul li a {
	display: block;
	width: 300px;
	border: 2px solid #5b5;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	background-color: #444;
	padding: 10px 10px;
	margin: 5px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: normal;
	}

#menu ul a:hover {
	background-color: #777;
	}

div.title img {
	display: block;
	width: 90%;
	height: auto;
	padding: 0px;
	border: 0px;
	margin: 0px auto;
	}

div.back img {
	display: block;
	width: 80%;
	height: auto;
	padding: 0px;
	border: 0px;
	margin: 0px auto;
	}

table {
	margin: auto;
	width: 100%;
	}

td {
	text-align: left;
	vertical-align: center;
	padding: 3px 0px 3px 0px;
	}

div.photo img {
	width: 100%;
	height: auto;
	padding: 0px;
	border: 0px;
	margin: 0px;
	}

div.photo video {
	width: 100%;
	height: auto;
	padding: 0px;
	border: 0px;
	margin: 0px;
	}

div.caption {
	/* width: 100%; */
	width: calc(100% - 24px); /* spaces are necessary */
	background-color: #222;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	margin: 0px;
	}

div.vcaption {
	/* width: 100%; */
	width: calc(100% - 24px); /* spaces are necessary */
	background-color: #222;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	margin: 0px;
	}

/* The caption for a reference. */
div.reference {
	/* width: 100%; */
	width: calc(100% - 24px); /* spaces are necessary */
	background-color: #222;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	margin: 0px;
	}

div.notes {
	/* width: 100%; */
	width: calc(100% - 24px); /* spaces are necessary */
	background-color: #031;
	color: #8b8;
	border-radius: 5px;
	padding: 10px;
	border: 2px solid #555;
	font-size: 1em;
	margin: 0px;
	}

/* unvisited link */
a:link {
    color: #0a0;
	}

/* visited link */
a:visited {
    color: #5b5;
	}

#contact {
	font-size: 0.8em;
	}

#contact a:link {
	color: #888;
	}

#contact a:visited {
	color: #666;
	}
}