/*@import url('https://fonts.googleapis.com/css?family=Roboto:300,600');
@import url('https://fonts.googleapis.com/css?family=Raleway:600');
*/

body { 
	margin: 0;
       	background-color: black;
	font-family: sans-serif;
	/* font-weight: 300; */
}

html, body { /* font-size: 15px; */ line-height: 1.5 }

/* html { overflow-x: hidden } */

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; /* font-weight: 400 */ }

pre {
	padding: 8px;
       	border: 1px dotted blue;
       	background-color: lavender;
	overflow: auto;
}

div { overflow: hidden; padding: 0 16px; background-color: #f8f8f8 }

.inside { width: 98%; padding: 0; margin: auto }

a { color: green; text-decoration: underline }
a:visited { color: inherit }
a:hover { color: blue }

.nav {
	background-color: #795548;
	padding: 8px 8px;
}

.nav a {
	color: white;
       	text-decoration: none;
	padding: 0px 8px;
	border-bottom: 2px solid transparent;
	-webkit-transition: border-bottom .3s;
	transition: border-bottom .3s
}

.nav a:hover {
	border-bottom: 2px solid white;
}

@media screen and (max-width:600px){
	.nav { position: relative; text-align: center; }
	.nav a { display: block; padding: 0.5em 0px }
	.inside { width: 100% }
}

.travel-header { color: white; background-color: #a07261 }
.travel-header a { color: inherit }
.travel img { width:100% }
.travel h2 { background-color: #e7dcd7 }

.header { color: white; background-color: #a07261 }
.header a { color: inherit }

.footer { color: white; background-color: #795548; padding: 8px 8px }
.footer a { color: inherit }

.briefme { color: white; background-color: #a07261 }
.briefme a { color: inherit }

.notice { color: white; background-color: black }
.notice a { color: inherit }

.briefme img {
       	border-radius: 20%;
	width: 125px; height: 125px;
	padding: 1em;
	float: left
}

.briefme ul { float: left; list-style-type: none }

@media only screen and (max-width: 700px) { 
	.briefme img { float: none; margin: auto; display: block }
}

.gamecover { text-align: center; padding: 1em 0; }
.gamecover img { width: 50%; }

.compshots { text-align: center }
.listshots { width: 320px; margin: 10px; display: inline-block; }

@media only screen and (max-width: 680px) { 
	.compshots { padding: 0 }
	.listshots { padding: 0; margin: 0px; width: 100% }
	.listshots img { max-width: 320px; width: 100% }
}