* { margin: 0; padding: 0; font-weight: 300; }
section, header, footer, aside, nav, figure, figcaption { display: block; }
body { font: 10pt Roboto, Trebuchet MS; color: #888; padding: 0px; min-width: 980px; background: #181818; }
a { color: #a85; text-decoration: none; }
a:hover { color: #fc9; }
p { margin: 10px; }

#wrapper { margin-top: 80px; }
header { box-shadow: 0 0 10px #000; position: fixed; z-index: 1; width: 100%; top: 0; }
#nav { position: relative; z-index: 10; background: #222; width: 100%; 
	left: 0; top: 0; font-size: 11pt; }
#nav img { float: left; height: 50px; margin-right: 20px ; }
#user-menu { position: relative; float: right; margin: 0; height: 50px; z-index: 200; }
#user-menu a { font-weight: 400; display: inline-block; padding: 12px 5px; }
#user-menu a:hover { color: #fff; }

#user-menu ul { position: absolute; right: 0px; top: 50px; background: 000; width: 200px; border: 1px solid #555; 
	background: #000; display: none; outline: 1px solid #000; box-shadow: 2px 2px 5px #000; z-index: 200; }
#user-menu:hover ul { display: block; }
#user-menu li { display: block; }
#user-menu ul a { display: block; }
#user-menu ul a:hover { background-color: #181818; }

header form { float: right; padding: 5px 8px; border-left: 1px solid #444; color: #444; }
header input[type=text] { border: 1px solid #000; padding: 6px 10px; background: linear-gradient(#aaa, #ddd); 
	outline: 0; color: #000; font-size: 11pt; width: 200px; }
header input[type=text]:hover { background: linear-gradient(#ddd, #fff); }
header input[type=text]:focus { background: linear-gradient(#ddd, #fff); }
header input[type=submit] { padding: 5px 10px; font-size: 11pt; cursor: pointer; outline: 0; 
	color: #fff; }
header input[type=submit]:hover { background: linear-gradient(#ccc, #888); color: #000; }

#nav > ul { height: 50px; }
#nav > ul li { float: left; display: block; }
#nav > ul a { display: block; padding: 0 20px; line-height: 50px; color: #000; font-size: 12pt; font-weight: 300; 
	color: #aaa; }
#nav > ul li:hover { }
#nav > ul li:hover a { color: #fff; }
#nav > ul .selected a { font-weight: 400; color: #fff; }


main { margin: 0 auto; max-width: 1900px; }
#content { float: left; width: 80%; padding-top: 10px; clear: left; }
aside { float: right; width: 20%; margin-top: 0px; font-size: 11pt; color: #888; background: #000; 
	box-shadow: 4px 4px 10px rgba(0,0,0,.5); overflow: hidden; }

footer { display: block; clear: both; padding: 10px; background: #000; }
footer p { padding: 0; margin: 0; line-height: 1.6em; color: #888; clear: left; }
footer > ul { float: left; width: 200px; }
footer li:first-child a { color: #ccc; font-size: 13pt; }
footer li { display: block; }
footer li a { color: #888; display: block; padding: 2px 10px; }
footer li a:hover { background-color: #444; color: #ccc; }

h1 { font-size: 22pt; padding: 10px 0 0 10px; letter-spacing: -.04em; }

h2 { font-size: 20pt; padding: 10px 0 0 10px; margin-top: 20px; letter-spacing: -.04em; }
h1, h2, aside h3 { color: #ccc; text-shadow: none; }

.breadcrumbs { height: 33px; z-index: 2; position: relative; padding: 0 3px; top center; 
	background: #000; border-top: 1px solid #000; box-shadow: 0 0 10px #000, 0 0 10px #000; }
.breadcrumbs li { display: inline-block; float: left; position: relative; white-space: nowrap; background: #000; }
.breadcrumbs > ul > li { padding: 6px; }
.breadcrumbs > ul > li > a { color: #ccc; }
.locations > li:not(:first-child):before { content: ""; border: 2px solid #555; width: 8px; height: 8px; display: inline-block; 
	border-width: 2px 2px 0 0; transform: rotate(45deg); position: relative; left: -6px; top: -2px; }
.locations > li:not(:first-child):hover:before { border-width: 0 2px 2px 0; left: -1px; border-color: #fff; }
.categories > li:not(:first-child):after { content: ""; border: 2px solid #555; width: 8px; height: 8px; display: inline-block; 
	border-width: 0 0 2px 2px; transform: rotate(45deg); position: relative; right: -6px; top: -2px; }
.categories > li:not(:first-child):hover:after { border-width: 0 2px 2px 0; right: -1px; border-color: #fff; }

.breadcrumbs .map-button { position: absolute; right: 0px; top: 4px; color: #888; margin-right: 6px; display: none; 
	width: 40px; height: 40px; background: url(http://ecn.t1.tiles.virtualearth.net/tiles/a02301033.jpeg?g=1654); 
	text-align: center; line-height: 40px; }
.breadcrumbs li:hover > .map-button { display: inline-block; }
.breadcrumbs .map-button:hover { color: #fff; 
	text-shadow: 1px 1px 0 #000, -1px 1px #000, 1px -1px 0 #000, -1px -1px #000, 2px 2px 2px #000; }
.breadcrumbs li:hover { background: #333; }
.breadcrumbs li:hover > a b { color: #fff; font-weight: 400; }
.breadcrumbs li:hover > p { color: #ccc; }
.breadcrumbs span { line-height: 48px; padding: 0 10px; }
.breadcrumbs a { color: #444; }
.breadcrumbs div a { color: #ccc; margin-right: 60px; }
.breadcrumbs i { background-size: cover !important /* WTF, why is this necesary */; background-position: center center !important; 
	width: 40px; height: 40px; display: block; float: left; margin: 5px; border: 1px solid #000; background: #222; 
	box-shadow: 1px 1px 2px #000; }
.breadcrumbs li:hover > a > i { border-color: #888; }
.breadcrumbs b { font-weight: 300; font-size: 12pt; }
.breadcrumbs li ul b { position: relative; top: 5px; }
.breadcrumbs s { position: relative; top: 5px; color: #888; text-decoration: none; }
.breadcrumbs p { font-style: italic; color: #888; margin-right: 40px; cursor: default; }
.breadcrumbs div { background: #080808; position: absolute; margin-left: -2px; display: none; min-width: 250px; z-index: 2; 
	box-shadow: 5px 5px 15px #000; max-width: 300px; top: 30px; opacity: .99; border: 1px solid #555; outline: 1px solid #000; }
.breadcrumbs li:hover > div { display: block; } 
.breadcrumbs div ul { }
.breadcrumbs div h3 { padding: 2px 5px; border-bottom: none; color: #fff; font-size: 16pt; font-weight: 300; }
.breadcrumbs div li { display: block; margin: 0; border: none; float: none; height: 52px; box-shadow: none; }
.breadcrumbs div div { left: 100%; top: -32px; }
.breadcrumbs .two-cols { min-width: 500px; max-width: 800px; }
.breadcrumbs .two-cols > ul > li { float: left; width: 50%; }
.breadcrumbs .three-cols { min-width: 750px; max-width: 1200px; }
.breadcrumbs .three-cols > ul > li { float: left; width: 33.333%; }
.breadcrumbs .four-cols { min-width: 1000px; max-width: 1600px; }
.breadcrumbs .four-cols > ul > li { float: left; width: 25%; }

.categories li { }
.categories > li { float: right; }
.categories div { right: 0; left: auto; }
.categories div li { border-left: none; }
.categories div div { right: 100%; left: auto; }

#preview { background: #0c0c0c; clear: both; -webkit-transform: translateZ(0); }
#large { background-repeat: no-repeat; position: relative; margin: 0 auto; 
	height: 400px; transform: translateZ(0); overflow: hidden; box-shadow: 5px 5px 10px #000; }
#large figcaption * { position: absolute; color: #fff; white-space: nowrap; 
	text-shadow: 1px 1px 0 #000, -1px 1px #000, 1px -1px 0 #000, -1px -1px #000, 2px 2px 2px #000; }
#large figcaption { position: static; }
#large figcaption * { z-index: 2; }
#large h1 { font-size: 28pt; bottom: 25%; left: 18%; margin-bottom: 20px; }
#large h2 { font-size: 16pt; bottom: 25%; left: 18%; margin-left: 80px; padding: 0; }
#large h3 { color: #ccc; font-size: 24pt; top: 510px; left: 26%; letter-spacing: -.04em; }
#large h1 span { position: static; }
#large .external-links * { position: static; }
#large .external-links img { width: 22px; box-shadow: 2px 2px 2px #000; border: 1px solid #000; }

.whs-logo { position: absolute; z-index: 1; top: 65%; left: 18%; margin-left: -65px; opacity: .8; width: 64px; }

#tabs { position: relative; margin-top: -60px; height: 60px; width: 80%; 
	overflow: hidden; }
#tabs ul { font-size: 13pt; padding: 15px 30px 0 10px; max-width: 1000px; margin: 0 auto; }
#tabs li { display: inline-block; margin: 0 1px; line-height: 45px; padding: 0 15px; }
#tabs a { display: inline-block; text-decoration: none; color: #fff; 
	text-shadow: 1px 1px 0 #000, -1px 1px #000, 1px -1px 0 #000, -1px -1px #000, 3px 3px 6px #000, 3px 3px 6px #000; }
#tabs i { display: inline-block; width: 36px; height: 36px; background: url(tabs.png); }
#tabs li:hover { background: rgba(0,0,0,.6); box-shadow: 2px 2px 5px rgba(0,0,0,.6); }
#tabs li.active { background: #181818; }
#tabs li.active a { font-weight: 500; }

.pagination a, aside .button { background: #222; color: #ccc; box-shadow: 2px 2px 5px #000; }
.pagination a:hover, aside .button:hover { background: #333; color: #fff; }

#large #cover-caption { z-index: 3; text-align: right; bottom: 0; right: 0; padding: 5px; 
	font-style: italic; font-size: 14pt; margin: 0; }
#large #cover-caption * { position: static; }
#cover-caption .copyright { color: #ccc; display: block; font-size: 10pt; }
#cover-caption .copyright a { color: #fff; z-index: 10; }

#contents { font: 11pt Roboto; }
#contents li { list-style-type: decimal; padding: 3px 10px; list-style-position: inside; }
#contents a:hover { text-decoration: underline; }

#body { margin: 20px auto; padding: 0 20px 0 15px; max-width: 1000px; font-family: Georgia; 
	font-size: 12pt; line-height: 1.6em; color: #999; }
#body p { margin: 0; }
#body h2 { margin: 0; padding: 1.5em 0 .5em 0; font: 16pt Georgia; font-weight: 300; }
#body h3 { margin: 0; padding: .5em 0 0 0; font: 12pt Georgia; color: #ccc; font-weight: 300; }
#body i, #body em { color: #aaa; }
#body .gallery { margin: 20px 0; }
#body dt { color: #ccc; display: block; float: left; margin-right: 10px; }
#body dd { display: block; }
#body ol li { list-style-type: decimal; }
#body figure.left+h2, #body figure.right+h2, #body figure+h3 { padding-top: 0; }
#body figure.thumb { }
#body figure.right { float: right; margin: 0 0 10px 20px; max-width: 50%; }
#body figure.left { float: left; margin: 0 20px 10px 0; max-width: 50%; }
#body figure.large { float: none; }
#body figure a { border-bottom: none; }
#body figure img { border: 1px solid #000; box-shadow: 5px 5px 20px #000; width: 100%; height: auto; }
#body figure.large img { }
#body figcaption { text-align: center; font-style: italic; max-width: 440px; }
#body .large figcaption { max-width: none; }
#body .wikipedia { background: #ccc; height: 12px; width: 12px; box-shadow: none; }
#body a { color: #a85; }
#body a:hover { color: #dca; text-decoration: underline; }
#body li { margin: 10px 40px; list-style-type: square; }
#body table { border: 1px solid #444; border-collapse: collapse; }
#body td { border: 1px solid #444; padding: 5px; }
#body sup { color: #c88; font-style: italic; }
#body sup:before { content: "["; font-style: normal; }
#body sup:after { content: "]"; font-style: normal; }
#body .author, #body .author a { font-size: 9pt; color: #686868; }
#body .author a:hover { color: #fff; }
u.currency { font-size: 75%; text-decoration: none; color: #888; }

#body del { color: #800; text-decoration: strike-through; }
#body ins { color: #6a3; text-decoration: none; }

#body #gallery li { margin-left: 0; }
#body .gallery .two { width: 50%; }
#zoom-map { width: 100%; height: 600px; border: 1px solid #fff; }

.book-now { background: #248; display: inline-block; font-family: Roboto; color: #5af !important; 
	margin: 20px; padding: 10px 80px; text-align: center; font-size: 10pt; }
.book-now:hover { background: #124; text-decoration: none !important; color: #acf; }
.book-now img { height: 75px; float: left; margin-right: 10px; }
.book-now b { font-size: 16pt; display: block; }


#merge-form { margin-top: 50px;}

#gallery { clear: both; }
.justified { clear: both; text-align: center; }
.justified li { display: inline-block; height: 360px; box-shadow: 2px 2px 5px #000; border: 1px solid #000; 
	visibility: hidden; }
.justified a { text-decoration: none; color: #fff; }
.justified a:hover { text-decoration: underline; }
.justified figure { display: block; position: relative; }
.justified figcaption { position: absolute; bottom: 0; width: 100%; white-space: nowrap; text-align: left; 
	text-shadow: 1px 1px 0 #000, -1px 1px #000, 1px -1px 0 #000, -1px -1px #000, 2px 2px 2px #000; }
.justified p { text-overflow: ellipsis; overflow: hidden; margin: 5px; }
.justified .map-button { position: absolute; right: 0; font: 12pt Roboto, Trebuchet MS; display: none; 
	font-weight: 300; color: #fff; background: rgba(0,0,0,.5); padding: 4px 10px; }
.justified em { font: 14pt Roboto; color: #fff; font-weight: 300; }
.justified span { font: 13pt Roboto; color: #aaa; padding-left: 10px; font-weight: 300; display: none; }
.justified i { font-style: normal; display: none; }
.justified .description { display: none; text-shadow: none; color: #ccc; position: absolute; top: 0; left: 100%; 
	width: 220px; height: 100%; background: linear-gradient(#000, rgba(0,0,0,.8)); z-index: 2; margin: 0; 
	text-align: left; }
.justified .description h3 { margin: 10px 10px 5px 10px; color: #fff; }
.justified .description p { margin: 0; padding: 0 10px; }

.justified li:hover figcaption { background: linear-gradient(to right, rgba(0,0,0,.8), transparent); }
.justified li:hover .map-button, .justified li:hover i, .justified li:hover span { display: inline; }
.justified li:hover .description  { display: block; }

ul.hotels { clear: both; }
ul.hotels:after { content: "provided by hotelscombined.com"; text-align: right; display: block; font-size: 10pt; }
ul.hotels li { display: inline-block; width: 32.5%; box-shadow: 2px 2px 5px #000; border: 1px solid #000; 
	}
#body ul.hotels li { margin: 1px; }
aside ul.hotels li { display: block; width: auto; }

ul.hotels a { text-decoration: none; color: #fff;}
ul.hotels a:hover { text-decoration: underline; }
ul.hotels figure { display: block; position: relative; overflow: hidden; background-position: center; background-size: cover; }
#body ul.hotels figure { height: 250px; }
ul.hotels img { width: 100%; height: auto; }
ul.hotels figcaption { position: absolute; bottom: 0; width: 100%; white-space: nowrap; text-align: left; 
	text-shadow: 1px 1px 0 #000, -1px 1px #000, 1px -1px 0 #000, -1px -1px #000, 2px 2px 2px #000; 
	text-align: left !important; }
ul.hotels p { text-overflow: ellipsis; overflow: hidden; margin: 5px; }
#body ul.hotels p { margin: 0 4px !important; }
ul.hotels em { font: 12pt Roboto; color: #fff !important; font-weight: 300; }
ul.hotels span { font: 13pt Roboto; color: #aaa; padding-left: 10px; font-weight: 300; display: none; }
ul.hotels u { text-decoration: none; color: #999; font-size: 12pt; margin-right: 10px; }
aside ul.hotels u { display: none; font-size: 10pt; }
aside ul.hotels li:hover u { display: inline; }
ul.hotels s { font: 14pt Roboto; font-weight: 300; text-decoration: none; padding: 2px 4px; 
	text-shadow: 1px 1px 0 #000, -1px 1px #000, 1px -1px 0 #000, -1px -1px #000, 2px 2px 2px #000; 
	position: absolute; right: 3px; top: 5px; color: #fff; background: rgba(0,0,0,.7); }
aside ul.hotels s { font-size: 12pt; }
ul.hotels i { font-style: normal; background: url(star.png); height: 16px; display: inline-block; }

ul.hotels li:hover figcaption { background: linear-gradient(to right, rgba(0,0,0,.8), transparent); }
ul.hotels li:hover .map-button, ul.hotels li:hover span { display: inline; }
ul.hotels li:hover .description  { display: block; }

.pagination { text-align: center; padding: 20px; }
.pagination a { padding: 5px 10px; background: #333; box-shadow: 2px 2px 5px #000; text-decoration: none; font-size: 13pt; }

aside section { margin: 10px; }
aside h3 { padding: 20px 0 0 0; margin: 0; font-weight: 300; font-size: 14pt; }
aside h3:first-child { border-top: none; }
aside > ul { margin: 5px; padding: 2px; }

#minimap iframe { -webkit-filter: saturate(1.4) contrast(1.1); width: 100%; margin: 5px 0; height: 300px; border: 1px solid #000; 
	box-shadow: 2px 2px 5px #000; }

aside ul li { display: block; margin: 1px 0; font-size: 11pt; padding: 2px; }
aside ul a { text-decoration: none; color: #aaa; }
/* aside > * > ul > li { padding-top: 10px; } */
/* aside> * > ul > li > a { font-size: 16pt; color: #fff; } */
aside .selected { }
aside .selected > a { color: #8cf; }

#picture { margin: 10px; }

aside #aliases li { display: list-item; padding: 2px; margin-left: 20px; color: #ccc; }
aside .del { float: right; color: #c00; }
aside #aliases .del:hover { background: transparent; }
aside #categories li { display: list-item; padding: 2px; margin-left: 20px; color: #ccc; }

aside dl { margin-top: 10px; }
aside dt { float: left; margin-left: 20px; }
aside dd { text-align: right; color: #fff; padding-bottom: 5px; border-bottom: 1px solid #555; margin-bottom: 5px; padding-right: 20px; }
aside dd:last-child { border-bottom: none; }

aside #demographics figure { height: 24px; background: #432; margin-top: 10px; }
aside #demographics span { float: left; display: block; height: 24px; text-align: center; color: #000; font-size: 11pt; }
aside .white { background: #fda; }
aside .asian { background: #ca6; }
aside .latino { background: #b94; }
aside #demographics .other { background: #fff; }
aside #demographics .black { color: #fff; }

aside #religion figure { height: 24px; background: #555; margin-top: 10px; }
aside #religion span { float: left; display: block; height: 24px; text-align: center; color: #ccc; font-size: 11pt; }
aside .christian { background: #480; }
aside .muslim { background: #804; }
aside .jewish { background: #884; }
aside .taoist { background: #800; }
aside .other { background: #408; }
aside .none { background: #555; }

aside input[type=text] { width: 80%; }
aside .button { display: inline-block; background: #222; text-decoration: none; padding: 4px; font-size: 10pt; }
aside .button:hover { background-color: #444; } 

form { text-align: left; }
#edit-form, #add-photo, #edit-caption, #edit-photo-parent, #report-form { 
	position: fixed; z-index: 20; background: rgba(0,0,0,1); width: 350px; top: 100px; left: 50%; margin-left: -150px; 
	box-shadow: 10px 10px 20px #000; display: none; }
#edit-article { position: fixed; z-index: 20; background: rgba(0,0,0,1); width: 80%; top: 10px; left: 10%; height: 90%; 
	box-shadow: 10px 10px 20px #000; padding: 20px; display: none; }
fieldset { border: none; margin: 20px; }
form h2 { margin: 0; padding: 0; }
#edit-form form { background: #000; margin: 5px; padding: 20px; }
#edit-form label { margin-top: 10px; }
form label { margin-top: 10px; display: block; }
input { padding: 5px; margin: 3px 0; border: 1px solid #888; background: #222; color :#ccc; width: 300px; }
input[type=file] { border: none; background: none; }
textarea { padding: 5px; border: 1px solid #555; background: #222; color :#ccc; }
select { padding: 5px; border: 1px solid #888; background: #222; color: #ccc; width: 310px; }
option { padding: 5px; }
input[type=submit] { width: auto; border: 1px outset #aaa; padding: 5px 20px; background: linear-gradient(#888, #333); }

.acResults { background: #000; padding: 2px; border: 1px solid #444; box-shadow: 2px 2px 5px #000; z-index: 101;  }
header .acResults { margin-left: 20px; }
.acResults li { padding: 5px; overflow: hidden; white-space: nowrap; cursor: default; color: #ccc; }
.acResults span { color: #888; }
.acSelect { background: #444; }

#screen { position: fixed; width: 100%; height: 100%; z-index: 10; top: 0; left: 0; background: rgba(0,0,0,.8); display: none; }
a[rel=close] { position: fixed; top: 0; right: 0; background: #000; font-size: 36pt; padding: 0 10px; color: #800; cursor: pointer; }

#lightbox { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.8); top: 0; left: 0; z-index: 20; text-align: center; 
	display: none; }
#lightbox img { box-shadow: 5px 5px 10px #000; margin-top: 10px; }
#lightbox figcaption { position: fixed; background: rgba(0,0,0,.7); bottom: 0; width: 100%; height: 80px; z-index: 21; }
#lightbox h2 { margin: 10px; padding: 0; font-size: 16pt; font-style: italic;  }

#report-link { position: fixed; bottom: 0px; right: 220px; background: #000; color: #ccc; width: 300px; 
	padding: 5px; font-size: 11pt; text-align: center; box-shadow: 2px 2px 5px #000; z-index: 2; }

#report-form { width: 600px; margin-left: -300px; }

/* recolor */

#invert-colors { position: fixed; bottom: 0px; right: 30px; background: #000; color: #ccc; width: 160px; 
	padding: 5px; font-size: 11pt; text-align: center; box-shadow: 2px 2px 5px #000; z-index: 2; }
#wrapper.white { background: #ffffff; }

.white #tabs li:hover { background: rgba(255,255,255,.6); }
.white #tabs li.active { background: #fff; }
.white #tabs li.active a { color: #000; text-shadow: none; }

.white #content { background: #fff; }
.white #body { color: #000; }
.white #body h2 { color: #000; font-size: 140%; }
.white #body h3 { color: #000; font-size: 120%; margin-bottom: 10px; }
.white #body a { color: #05f; }
.white #body a:visited { color: #60a; }
.white #body em { color: #000; }
.white aside { background: #222; box-shadow: none; }
.white aside a { color: #48c; }

.white #gallery { background: #000; }
.white #gallery h2 { color: #fff; }

.white figure { }
.white #body img { box-shadow: 2px 2px 5px #888; border: 1px solid #555; }
.white #body .author,  .white #body .author a { color: #888; }  
.white #body .wikipedia { box-shadow: none; background: #fff; border: 1px solid #ccc; }

.white h1, .white h2 { color: #000; }
.white a { color: #08f; }

@media (max-width: 1260px) {
	* { font-size: 10pt; }
	header form { padding: 1px; }
	header input[type=text] { padding: 2px 5px ; }
	header input[type=submit] { padding: 2px 5px; font-size: 10pt; }
	#user-menu { height: 30px; }
	#user-menu a { padding: 5px; }
	#content { width: 75%; }
	h1 { font-size: 18pt; }
	aside { width: 25%; }
	#nav > ul { height: 30px; }
	#nav > ul a { line-height: 30px; padding: 0 5px; font-size: 10pt; }
	#nav img { height: 30px; }
	.breadcrumbs { height: 25px; }
	.breadcrumbs > ul > li { padding: 3px; }
	.breadcrumbs div { top: 24px; }
	.breadcrumbs b { font-size: 10pt; margin: 0 5px; }
	.breadcrumbs i, .breadcrumbs p { display: none; }
	.breadcrumbs div li { height: 25px; padding: }

	.breadcrumbs .two-cols { min-width: 300px; max-width: 450px; }
	.breadcrumbs .three-cols { min-width: 450px; max-width: 600px; }
	.breadcrumbs .four-cols { min-width: 600px; max-width: 750px; }
	
	#body { font-size: 11pt; }
}