html {
	box-shadow:
		  inset 0px 15px 10px -10px rgba( 88, 0, 0, 0.20 ) /* top */
		, inset -15px 8px 10px -10px rgba( 88, 0, 0, 0.30 ) /* right */
		, inset 15px 8px 10px -10px rgba( 88, 0, 0, 0.30 ) /* left */
	;
}

body {
	background-color: #fcf3d2;
	background-image: url( '/images/bg.jpg' );
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #440000;
	font-size: 14px;
	line-height: 20px;
}

p {
	margin-bottom: 12px;
	margin-top: 4px;
}

hr {
	border: 0;
	height: 1px;
	background: #553322;
	background-image: linear-gradient(to right, #fcf3d2 0%,#800000 10%,#800000 90%,#fcf3d2 100%); 
	margin: 20px 0px 20px 0px;
}

.clear {
	clear: both;
}

a {
	color: #800000;
	font-weight: bold;
	text-decoration: underline;
}

a.go {
	white-space: nowrap;
}

a.go::after {
	content: ' »';
}

a:hover {
	text-decoration: none;
}

a[href^="tel:"] {
	text-decoration: none !important;
	font-weight: normal;
}

a[href^="tel:"]:hover {
	opacity: 0.6;
}

li {
	margin-left: 20px;
	margin-bottom: 8px;
}

a:hover {
	text-decoration: none;
}

div#container {
	width: 980px;
	margin: auto;
	padding: 40px 0px 0px 0px;
}

div.header {
	text-align: center;
	color: #800000;
	font-family: Times New Roman, Times Roman, Times, serif;
	font-style: italic;
}

div.header-mobile {
	display: none;
}

div.header h1 {
	font-family: inherit;
	font-size: 35px;
	line-height: 40px;
	font-weight: bold;
	letter-spacing: 2px;
	color: inherit;
	margin: 0px 0px 10px 0px;
	text-align: center;
}

div.header h2 {
	font-family: inherit;
	font-size: 21px;
	letter-spacing: 3.2px;
	font-style: italic;
	font-weight: normal;
	color: #a04444;
	text-align: center;
}

div.header h3 {
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 4px;
	font-style: normal;
	font-weight: normal;
	color: #a04444;
	margin-top: 12px;
	text-align: center;
}

div.header img {
	padding: 25px 0px 15px 0px;
}

div.header a {
	font-weight: normal;
}

div.header h1 a {
	font-weight: bold;
}

div.inner {
	text-align: left;
	margin-top: 22px;
	padding-bottom: 0px;
	margin-left: 300px;
}

div.inner h1 {
	white-space: nowrap;
	letter-spacing: 8.2px;
}

div.inner h2 {
	white-space: nowrap;
	letter-spacing: 7.4px;
}

div.inner h3 {
	white-space: nowrap;
	letter-spacing: 9.5px;
}


div.logo {
	float: left;
	width: 220px;
	padding: 0px 20px 20px 20px;
	margin: auto;
}

div.logo a {
	text-decoration: none;
}

div.nav {
	xbackground-color: #ecbc75;
	background-image: 
		radial-gradient(ellipse at 15% 10%, #fcdca5 0%,#ecbc75 100%)
		, url( ../images/groovepaper.png );
	width: 230px;
	float: left;
	padding: 20px;
	clear: left;
	border-radius: 3px;

	box-shadow:
		2px 2px 2px 2px rgba( 128, 0, 0, 0.7 )
	;
}

div.nav hr {
	border: 0;
	height: 1px;
	background: #553322;
	background-image: linear-gradient(to right, #ccc3b2 0%,rgb(216,136,32) 15%,rgb(216,136,32) 85%,#ccc3b2 100%); 
	margin: 20px 0px 20px 0px;
}

div.nav p:nth-of-type(-n+3) a:after {
	content: ' \00bb';
}

div.nav p {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #000000;
	font-size: 14px;
	line-height: 19px;
	margin-bottom: 10px;
	margin-top: 10px;
	letter-spacing: 1.1px;
	opacity: 0.8;
}

div.nav img.logo {
	margin: 0px 0px 10px 0px;
}

div.content {
	width: 680px;
	float: right;
}

div.nav h1, div.content h1 {
	margin: 20px 0px 7px 0px;
	font-family: Times New Roman, Times Roman, Times, serif;
	font-size: 18px;
	line-height: 19px;
	letter-spacing: 2px;
	color: #885555;
}

div.content h1 {
	letter-spacing: 1px;
	font-size: 20px;
	opacity: 0.7;
}

div.content h2 {
	margin: 12px 0px 0px 0px;
	font-family: Times New Roman, Times Roman, Times, serif;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 1px;
	color: inherit;
	margin-bottom: 5px;
	opacity: 0.7;
}

div.nav h1 {
	margin-top: 0px;
}

h1 a, h2 a, h3 a {
	text-decoration: none;
}

div.fb-like {
	display: inline;
}

div.adjust-fb {
	display: inline;
	position: relative;
	top: 3px;
	margin-left: 50px;
}

div.adjust-twitter {
	display: inline;
	position: relative;
	top: 3px;
	left: 15px;
}

div.footer {
	clear: both;
	font-size: 12px;
	width: 100%;
	text-align: center;
	margin: 0px auto 20px auto;
	padding-top: 20px;
	color: #666666;
}

div.footer ul {
	margin: 0px 0px 20px 0px;
	padding: 0;
}

div.footer ul li {
	display: inline;
	margin: 30px 30px 30px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 30px;
	white-space: nowrap;
}

div.footer ul li a {
	text-decoration: none;
	font-weight: normal;
	white-space: nowrap;
	padding: 0px;
}

div.footer ul li:last-child {
	margin-right: 0px;
}

div.footer ul li a:hover {
	text-decoration: underline;
}

div.copyright {
	padding-top: 15px;
	font-family: Arial, Helvetica, sans-serif;
	color: #cccccc;
	font-size: 11px;
}

div.squares {
	text-align: center;
}

div.square {
	text-align: center;
	margin: 0px 20px 0px 0px;
	width: 31%;
	float: left;
}

div.square:nth-child(3) {
	margin: 0px 0px 0px 0px;
	clear: right;
	margin-bottom: 20px !important;
}

div.square h1 {
	margin-bottom: 5px;
	font-size: 20px;
}

div.square h2, div.square h2 a {
	margin-top: 0px;
	color: #885555;
}

div.square img, img.fancy {
	width: 100%;
	margin-top: 5px;
	border-radius: 5px;
	box-shadow: 2px 2px 2px 2px rgba( 128, 0, 0, 0.7 ); /* #800000 */
}

div.square a img:hover {
	opacity: 0.8;
	box-shadow: 1px 1px 1px 1px rgba( 128, 0, 0, 0.8 );
}

div.square a {
	text-decoration: none;
}

div.square a:hover {
	text-decoration: underline;
}

div.slideshow {
	margin-top: 20px;
	clear: right;
	padding-bottom: 75%;
	position: relative;
	width: 100%;
}

div.slideshow div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
}

div.slideshow img {
	width: 100%;
	height: 100%;
}

div.map {
	width: 390px;
	font-size: 10px;
	float: right;
	text-align: right;
	padding: 10px 0px 0px 20px;
}

div.map div {
	margin: 0px 0px 20px 0px;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 2px 2px 2px 2px rgba( 128, 0, 0, 0.7 ); /* #800000 */
}

/*
http://stackoverflow.com/questions/1495407/css-maintain-div-aspect-ratio
*/
div.map div.mapcontainer {
	border-radius: none;
	box-shadow: none;
	width: 100%;
	padding-bottom: 74%;
	position: relative;
}

div.map div.greenacres,
div.map div.npb,
div.map div.jupiter,
div.map div.pbg,
div.map div.tequesta,
div.map div.halmos,
div.map div.mandel-library
{
	width: 100%;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
}

div.mapcontainer div {
	background-size: 100%;
	background-repeat: no-repeat;
}

div.mapcontainer div.greenacres {
	background-image: url( '/images/greenacres-building.jpg' );
}

div.mapcontainer div.npb {
	background-image: url( '/images/npb-building.jpg' );
}

div.mapcontainer div.jupiter {
	background-image: url( '/images/jupiter-building.jpg' );
}

div.mapcontainer div.pbg {
	background-image: url( '/images/pbg-building.jpg' );
}

div.mapcontainer div.tequesta {
	background-image: url( '/images/tequesta-building.jpg' );
}

div.mapcontainer div.mandel-library {
	background-image: url( '/images/mandel-library.jpg' );
}

div.mapcontainer div.halmos {
	height: 233px;
	background-image: url( '/images/halmos-building.jpg' );
}

div.map iframe {
	margin-bottom: 20px;
	width: 100%;
}

div.map div p {
	padding: 10px 10px 10px 10px;
	color: #800000;
	font-family: Times New Roman, Times Roman, Times, serif;
	font-weight: normal;
	font-size: 20px;
	line-height: 25px;
	font-style: italic;
	letter-spacing: 1px;
	text-shadow:
		-3px 0 2px #ffffff,
		-2px 0 2px #ffffff,
		0 3px 2px #ffffff,
		0 2px 2px #ffffff,
		3px 0 2px #ffffff,
		2px 0 2px #ffffff,
		0 -3px 2px #ffffff,
		0 -2px 2px #ffffff
	;
	text-align: left;
}

div.callout {
	font-family: "Arial", "Arial Narrow", "sans-serif";
	float: right;
	width: 350px;
	padding: 3px 20px 13px 20px;
	margin: 20px 0px 10px 10px;
	text-align: left;
	background-color: #ffffff;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 2px 2px 2px 2px rgba( 128, 0, 0, 0.7 ); /* #800000 */
}

div.callout p, div.callout li {
	font-size: 12px;
}

div.callout h1 {
	text-align: center;
	margin-top: 13px;
	margin-bottom: 10px;
}

div.map iframe {
	border-radius: 4px 4px 4px 4px;
	box-shadow: 2px 2px 2px 2px rgba( 128, 0, 0, 0.7 ); /* #800000 */
	content: 'Please wait while the map loads...';
}

div.map a {
	color: #800000;
	font-weight: normal;
}

div.map iframe {
	width: 390px;
	height: 260px;
}

.nobr {
	white-space: nowrap;
}

p.nocoupons {
	width: 255px;
	padding: 4px 6px 6px 6px;
	font-size: 11px;
	line-height: 14px;
	font-style: italic;
	color: #c08484;
	border: 1px solid rgba( 128, 0, 0, 0.7 ); /* #800000 */
}

.alert {
	clear: both;
	margin-top: 15px;
	padding: 10px 8px 10px 12px;
	line-height: 22px;
	border: 2px solid rgba( 128, 0, 0, 0.7 ); /* #800000 */
	border-radius: 3px;
}

.invert {
	background-color: rgba( 128, 0, 0, 0.7 ); /* #800000 */
	border: none;
	color: #ffffff;
}

.invert a {
	color: #fcf3d2;
}

.invert hr {
	background: rgba( 255, 255, 255, 0.3 );
	background-image: none; 
}

p.alert2 {
	padding: 6px 8px 8px 8px;
	line-height: 18px;
	font-weight: bold;
	border: 2px solid rgba( 128, 0, 0, 0.7 ); /* #800000 */
	width: 260px;
	position: relative;
}

p.alert3 {
	padding: 6px 8px 8px 8px;
	line-height: 21px;
	font-weight: bold;
	border: 2px solid rgba( 128, 0, 0, 0.7 ); /* #800000 */
	position: relative;
}

.small {
	font-size: 11px !important;
	line-height: 14px !important;
	color: #666666;
}

div.upcoming {
}

div.upcoming p {
	margin: 0px 0px 0px 0px;
}

div.upcoming span {
	font-weight: bold;
}

div.upcoming span.no {
	color: #803333;
	font-weight: normal;
}

div.ahf {
	float: right;
}

div.ahf img {
	padding: 0px 0px 20px 30px;
}

div.left-box {
	border-radius: 3px;
	position: relative;
	width: 100%;
	left: -8px;
	border: 1px solid #800000;
	padding: 0px 5px 0px 8px;
	margin: 15px 0px 13px 0px;
	background-color: rgba( 255, 255, 255, 0.3 );
}

div.left-box h1 {
	margin-top: 10px;
}

p.em {
	font-style: italic;
}

div.notice {
    background-color: #803333;
    border-radius: 3px;
    color: #fcf3d2;
    padding: 10px 15px 10px 15px;
}

div.notice a {
	color: inherit;
}

span.check-for-updates {
	display: inline-block;
	border: 1px solid #880000;
	padding: 3px;
}

img.tournament {
	width: 100%;
	border-radius: 5px;
	box-shadow: 2px 2px 2px 2px rgba( 128, 0, 0, 0.7 ); /* #800000 */
}

sup {
	vertical-align: super;
}

div.video iframe {
	aspect-ratio: 16 / 9;
	box-sizing: border-box;
	width: 50%;
	float: left;
	padding: 0px 10px 20px 10px;
}

div.video iframe:nth-child(odd) {
	padding-left: 0px;
}

div.video iframe:nth-child(even) {
	padding-right: 0px;
}