* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html, body, .buccaneergulf, .grey {
	width:100%;
	height: 100%;
	background: #000;
}

.buccaneergulf {
	background:#bdb79e;
}

.buccaneergulf p {display: none}

.buccaneergulf .wrap {
	width:720px;
	padding:30px 0;
	margin:0 auto;
}

.buccaneergulf header {
	height:100px;
	overflow:hidden;
}

.buccaneergulf header a {
	display: inline-block;
}

.buccaneergulf header .logo {
	text-indent: -9999px;
	height:100px;
	width:200px;
	background: url(assets/logo.png) center center no-repeat;
}

.buccaneergulf header .ad {
	width:400px;
	height:100px;
	background:#fff;
}

.buccaneergulf .main {
	overflow: auto;
	margin:20px 0 0;
}

.buccaneergulf aside {
	width:200px;
}

.buccaneergulf section {
	width:500px;
	padding:20px;
	background:#fff;
}

.buccaneergulf aside ul {
	list-style: none;
	background:#fff;
}

.buccaneergulf aside a {
	display: block;
	margin: 20px 0 0;
}

.buccaneergulf .julian {
	position: absolute;
	width:142px;
	height:202px;
	background: url(assets/julian.gif) left top no-repeat;
	pointer-events:none;
	z-index: 9999;
}

.popup {
	display: block;
	position: absolute;
}

.popup img {box-shadow: 4px 4px 0px rgba(0,0,0,.5)}

.popup .cross {
	display: block;
	cursor: pointer;
	width:12px;
	height:12px;
	background: url(assets/cross.png) left top no-repeat;
	margin:0 0 2px;
}

hr {
	margin:16px 0;
	border:0;
	height: 2px;
	background-color: #ddd;
}

.buccaneergulf #screen:hover {
	background-color: #fff8bd;
}

.left, .buccaneergulf .main aside {float:left}
.right, .buccaneergulf .main section {float:right}

.grey header, .grey aside, .grey footer {display: none}
.grey {
	background:#222;
	text-align: center;
	padding:150px 0 0;
	color:#666;
	font-family: Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 100;
}

.grey .pageonly {
	display: none;
}

.grey kbd {
	padding:1px 2px;
	background:#444;
	color:#777;
	border-radius: 2px;
}

.grey p {
	margin:20px 0 0;
}

.grey .trademark, .grey .trademark a {
	color:#555;
	text-decoration: none;
}

.grey .trademark a:hover {
	color:#666;
}

canvas {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
}