/* GENERAL PAGE STYLES */

:root {
  --textcolor: #fff;
  --textdimcolor: #ddd;
  --lightcolor: #39f;
  --midcolor: #28c;
  --darkcolor: #369;
  --bordercolor: #012;
}

html{
    min-height:100%; /* This is needed for our background images */
    position:relative;
}

@font-face { font-family: 'LiberationWebSerif'; src: url('font/liberationserifsubset.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'LiberationWebSerif'; src: url('font/liberationserifsubsetbold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'LiberationWebSerif'; src: url('font/liberationserifsubsetitalic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; }


body, input {
	font-family: 'LiberationWebSerif', 'Times New Roman', Times, serif;
	/* 	LiberationWebSerif is a subset of Liberation Serif.
		If using another font, make sure it's 100% Free/FOSS, and include the following characters in your subset:
		abcdefghijklmnopqrstuvwxzyzABCDEFGHIJKLMNOPQRSTUVWXZYZ0123456789~!@#$%&*()-_+=[]|;:'",.?/ 
		plus the characters for: • × ← → $darr; ↑	*/
	font-size: 20px;
	color:var(--textcolor);
	margin:0;
	background-color:var(--lightcolor);
}


a{color:var(--textcolor);text-decoration:underline;}
a:visited{color:var(--textcolor);}
a:hover{color:var(--textcolor);}

#toplogodiv {
	background-color:var(--lightcolor); 
}



#logo {
	background-color:var(--lightcolor);
}

#maincontentdiv {
	width:90%;
	max-width:550px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.texttop {
	text-align:center;
	background-color:var(--lightcolor);
	font-size:1.1em;
	display:inline-block;
}

/* Box-shadows don't work well on spans, so we're setting a max-width for each paragraph separately */
#texttop1 {
	position:relative;
	max-width:500px;
	margin:0 auto 10px auto;
}

#texttop2 {
	position:relative;
	max-width:450px;
	margin:10px auto 20px auto;
}

.textreg {
	text-align:center;
	font-size:1em;
	margin:20px 0;
}

.clickbox { 
	width:140px;
	text-align:center;
	margin:10px 15px;
	background-color: var(--darkcolor);
	padding:2px 4px;
	border:1px solid var(--textdimcolor);
	font-size:0.72em;
	border-radius:0.5em;
	display:inline-block;
	position:relative;
	text-decoration:none;
}

.clickbox:hover {
	cursor: pointer;
	border:1px solid var(--textcolor);
}

.boldclick {
	font-weight:bold;
	font-size:1.15em;
}

.textmovies {
	text-align:left;
	font-size:0.9em;
	margin:10px 0;
}

.textmoviesheading {
	text-align:center;
	font-size:0.9em;
	font-weight:bold;
	background-color: var(--darkcolor);
	margin:20px auto 0 auto;
	padding:1px;
}

.textmoviesheadingsub {
	text-align:left;
	font-size:0.9em;
	font-style:italic;
	margin:5px auto 0 auto;
}

.movietitle {
	font-weight:bold;
	margin-right:20px;
}

.movielink {
	margin-right:20px;
}

.listreg {
	max-width:210px;
	text-align:center;
	font-size:1em;
	margin:20px auto;
	/* background-color:var(--lightcolor); */ 
	/* text-shadow: 0px 2px 2px rgba(255, 0, 0, 3); */
	/* box-shadow: 0 0 10px 10px var(--lightcolor); */
}

.listreg a { 
	position:relative;
	background-color:var(--lightcolor);
}

.listsmall {
	text-align:center;
	font-size:0.95em;
	margin:20px 0;
}

.listsmall a {
	position:relative;
	background-color:var(--lightcolor);
}

.clickdiv {
	background-color:var(--midcolor); 
	border:1px solid var(--textdimcolor);
	padding:10px;
	margin-top:10px;
}

.closetextdiv {
	height:2.6ex;
	width:2.6ex;
	border-radius:50px;
	cursor:pointer;
	border:1px solid var(--textcolor);
	position:absolute;
	top:-12px;
	right:-12px;
	background-color:var(--midcolor);
	font-weight:bold;
	z-index:10;
	line-height:2.6ex;
	text-align:center;
}

.author {
	font-size:0.9em;
	font-weight:bold;
}

.citation {
	font-size:0.75em;
}

.boldclass {
	font-weight:bold;
}

.voiceslinks {
	margin-right:20px;
}

#nutrilist {
	padding:20px;
}

.nutrilistitem {
	font-weight:bold;
	float:left;
	margin:0 25px 15px 0;
	font-size:0.85em;
}


.stickerclass {
	width:185px;
	max-width:90%;
	height:auto;
	-webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
	cursor:pointer;
}

.shirtsrow {
	font-size: 0.7em;
	line-height: 180%;
}

.shirtimgclass {
	width:185px;
	max-width:90%;
	height:auto;
	-webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.shirtcolorwhite {
    width:70px;
    height:30px;
	display:inline-block;
	margin:3px;
    border-radius:15px;
    font-size:11px;
    font-weight:bold;
    line-height:30px;
    white-space:nowrap;
    text-align:center;
    background-color:var(--midcolor);
    border:1px solid var(--bordercolor);
    color:var(--textdimcolor);
	cursor:pointer;
}

.shirtcolorwhite:hover {
    background-color:var(--darkcolor);
}

.shirtcolorblack {
    width:70px;
    height:30px;
	display:inline-block;
	margin:3px;
    border-radius:15px;
    font-size:11px;
    font-weight:bold;
    line-height:30px;
    white-space:nowrap;
    text-align:center;
    background-color:var(--midcolor);
    border:1px solid var(--bordercolor);
    color:#000;
	cursor:pointer;
}

.shirtcolorblack:hover {
    background-color:var(--lightcolor);
}

.shirtdetail {
	margin-left:10px;
}

.magnifierclass {
	height:20px;
	width:20px;
	margin-top:5px;
	cursor:pointer;
}

.copyshare { 
	position:relative;
	text-align:center;
	margin:10px;
	background-color: var(--darkcolor);
	padding:4px 7px 5px 7px;
	border:1px solid var(--textdimcolor);
	box-shadow:0 0 1px 1px var(--textcolor); 
	font-size:0.8em;
	border-radius:.6em;
	display:inline-block;
	cursor:pointer;
	text-decoration:none;
}

.copyshare:hover {
	border:1px solid var(--textcolor);
	box-shadow:0 0 2px 2px var(--textcolor); 
}

.copylist { margin-left:0; padding-left:0; }
.copylist li { margin-top:8px; margin-left:30px; }

#downloadstyling {
	font-size:0.9em;
}

#downloadstyling a:link { 
	margin-left:15px;
	line-height:150%;
}


/* POPUP/MODAL TEXT BOX STYLES */

#poptextwrapperdiv1, #poptextwrapperdiv2, #poptextwrapperdiv3{
	margin:0;
	display:none;
	width: 550px;
	max-width:75%;
	position: fixed;
	top: 50%;
	left: 50%;
	max-height:100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#poptextdiv1, #poptextdiv2, #poptextdiv3{
	background-color: var(--midcolor); /* 36c */
	border: 1px solid var(--textcolor);
	border-radius: 8px;
	text-align:left;
	width: 550px;
	max-width:100%;
	max-height:97%;
	overflow-x: hidden; 
	overflow-y: auto; 
	margin:1px auto;
}

#poptextbgdiv1, #poptextbgdiv2, #poptextbgdiv3{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: var(--darkcolor);
}

#poptextbgdiv1 { z-index: 110; }
#poptextwrapperdiv1 { z-index: 120; }
#poptextdiv1 { z-index: 130; }
#poptextbgdiv2 { z-index: 140; }
#poptextwrapperdiv2 { z-index: 150; }
#poptextdiv2 { z-index: 160; }
#poptextbgdiv3 { z-index: 170; }
#poptextwrapperdiv3 { z-index: 180; }
#poptextdiv3 { z-index: 190; }


#poptextcontentdiv1, #poptextcontentdiv2, #poptextcontentdiv3{
    padding: 18px 18px 0 18px;
    height: auto;
    max-height: 94vh;
}

#popTextClosebuttondiv1, #popTextClosebuttondiv2, #popTextClosebuttondiv3{
	position:absolute;
	/* For testing: background-color:#f00; */
	right:-37px;
	top:-2px;
	font-size:45px;
	font-weight:bold;
	cursor:pointer;
	line-height:30px;
	height:auto;
	width:auto;
}

#poptextdownbuttondiv1, #poptextdownbuttondiv2, #poptextdownbuttondiv3{
	position:absolute;
	padding:20px 10px;
	right:-47px;
	bottom:0;
	margin-bottom:-15px;
	font-size:55px;
	font-weight:bold;
	cursor:pointer;
	line-height:30px;
	height:auto;
	width:auto;
}

.shareline {
	text-align:center;
	line-height:0;
	font-size:0.85em;
	margin:10px -10px 0 0;
	opacity:60%;
	position:absolute;
	/* bottom:8px; */
	/* right:15px; */
	right:-42px;
	top:60px;
	transform: rotate(90deg);
}

.shareline a {
	text-decoration:none;
}

.sharelinkinput {
	width:100%;
	text-align:center;
	font-size:0.8em;
	margin:1px auto;
	padding:2px;
	background-color:var(--lightcolor);
	border:0;
	color:var(--textcolor);
	border:1px solid var(--darkcolor);
}

#sharelinkinput2::selection { background-color: var(--darkcolor); }
#sharelinkinput2::-moz-selection { background-color: var(--darkcolor); }

#sharelocalvideo {
	width:100%;
	text-align:center;
	font-size:13px;
	margin:15px auto 1px auto;
	padding-top:7px;
	padding-bottom:20px;
	background-color:transparent;
	border:0;
	color:var(--textdimcolor);
	opacity:60%;
	cursor:pointer;
	text-decoration:underline;
}

#sharelocalvideo::selection { background-color: var(--midcolor); }
#sharelocalvideo::-moz-selection { background-color: var(--darkcolor); }

#sharelocalvideocredits {
	width:100%;
	text-align:left;
	font-size:0.8em;
	margin:5px 0;
	padding:0;
	background-color:transparent;
	border:0;
	cursor:pointer;
	text-decoration:underline;
}

#sharelocalvideocredits::selection { background-color: var(--midcolor); }
#sharelocalvideocredits::-moz-selection { background-color: var(--darkcolor); }

.stopbodyscroll { /* This is in scripts.js */
  height: 100%;
  overflow: hidden;
}


/* POPUP/MODAL MOVIE BOX STYLES */


#videodiv {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 80%;
	max-width: 640px;
	padding:0; /* Not in one version */
	margin:0 auto; /* Not in one version */
	text-align:center; /* Not in one version */
	background: #000 url('pics/loading.gif') top left no-repeat;
    background-size: 100% auto;
    background-repeat: none;
	z-index: 1020;
	overflow: visible;
}

#videoxdiv {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 80%;
	height: 315px;
	max-width: 560px;
	padding:0; /* Not in one version */
	margin:0 auto; /* Not in one version */
	text-align:center; /* Not in one version */
	background-color: #000; 
	z-index: 1020;
	overflow: visible;
}

#videoxiframe {
	border:none;
	border:0;
	margin:0;
}

#videobgdiv {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1010;
	width: 100%;
	height: 100%;
	overflow: auto; /* Not in one version */
	background-color: var(--darkcolor);
	/* If want opacity, do:
	-moz-opacity: 0.8;
	opacity: 0.8;
	filter: alpha(opacity=80);
	*/
}

.videocloselink {
	float: right;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	background-color: #222;
	font-size: 31px;
	font-weight: bold;
	text-decoration:none;
	display: inline-block;
	line-height: 0;
	padding: 12px 0;
	position: absolute;
	right: 1px;
	top: 1px;
	z-index: 1030;
	opacity: 0.9;
}

.videocloselink:before {
content: "×";
}

#creditsdiv{
	display:none;
	background-color: var(--bordercolor);
	border-radius: 15px;
	padding:15px;
	text-align:left;
	color:var(--textcolor);
	position: fixed;
	width: 280px;
	max-width:90%;
	max-height:85%;
	overflow-x: hidden; 
	overflow-y: auto; 
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1015;
}

#creditsdiv li{
	font-weight:normal;
	margin-bottom:8px;
}

.creditslittle {
	font-size:0.8em;
	color:var(--textdimcolor);
}

#creditsclosebuttondiv {
	position:absolute;
	/* For testing: background-color:#f00; */
	right:5px;
	top:5px;
	font-size:45px;
	font-weight:bold;
	cursor:pointer;
	line-height:30px;
	height:auto;
	width:auto;
}

#topcopylink {
	top:45%;
	left:120%;
	background-color:var(--lightcolor);
}

#imagecreditsdiv {
	text-align:center;
	display:none;
	position:fixed;
	font-size:0.75em;
	top:5px; /* Change corner of imagecredits here. For example: bottom:5px; */
	right:10px;
	z-index:1;
	padding:0 3px;
	opacity:0.8;
}

#imagecreditslink {
	background-color:var(--darkcolor);
	padding:1px 5px;
	border:1px solid var(--textcolor);
	border-radius:0.3em;
	text-decoration:none;
}



/* COPY2CLIPBOARD CONFIRMATION */

#copyconfirmationdiv {
	position:fixed;
	top:0;
	right:0;
	z-index:1100;
	background-color:var(--bordercolor);
	text-align:center;
	font-size:0.9em;
	font-weight:bold;
	color:#fff;
	padding:7px 7px 6px 6px;
	opacity:1;
	white-space:nowrap;
	border-radius:0 0 0 5px;
	transition: opacity .3s ease-in-out;
}


/* STYLES FOR BACKGROUND */


#bgdivmidleft {
	width:calc(45% - 200px);
	position:absolute;
	top:0;
	bottom:0;
	left:200px;
	background-image: url("pics/background.png");
	background-position: top left;
	background-repeat: repeat;
	z-index:-100;
}
	
#bgdivmidright {
	width:calc(45% - 200px);
	position:absolute;
	top:0;
	bottom:0;
	right:200px;
	background-image: url("pics/background.png");
	background-position: top right;
	background-repeat: repeat;
	z-index:-100;
}

#bgdivfarleft {
	width:200px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	background-image: url("pics/blank.png");
	background-repeat: repeat-y;
}

#bgdivfarright {
	width:200px;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	background-image: url("pics/blank.png");
	background-repeat: repeat-y;
}

#bgdivcreditsRow1Col1 { top:0; height:124px; }
#bgdivcreditsRow1Col2 { top:0; height:124px; }
#bgdivcreditsRow2Col1 { top:125px; height:124px; }
#bgdivcreditsRow2Col2 { top:125px; height:124px; }
#bgdivcreditsRow3Col1 { top:250px; height:124px; }
#bgdivcreditsRow3Col2 { top:250px; height:124px; }
#bgdivcreditsRow4Col1 { top:375px; height:124px; }
#bgdivcreditsRow4Col2 { top:375px; height:124px; }
#bgdivcreditsRow5Col1 { top:500px; height:124px; }
#bgdivcreditsRow5Col2 { top:500px; height:124px; }
#bgdivcreditsRow6Col1 { top:625px; height:124px; }
#bgdivcreditsRow6Col2 { top:625px; height:124px; }

.bgdivfarleftcreditsclass {
	width:200px;
	position:absolute;
	left:0;
	text-align:center;
	cursor: pointer;
}
.bgdivfarleftcreditsclass:hover .bgdivcreditstext { opacity:1; }

.bgdivfarrightcreditsclass {
	width:200px;
	position:absolute;
	right:0;
	text-align:center;
	cursor: pointer;
}
.bgdivfarrightcreditsclass:hover .bgdivcreditstext { opacity:1; }

.bgdivcreditslinkwrapper {
	position:relative;
	height:100%;
	width:200px;
}

.bgdivcreditstext {
	position:absolute;
	bottom:2px;
	left: 50%;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	font-size:0.7em;
	color: var(--textcolor); 
	opacity:50%;
	background-color: var(--darkcolor);
	border: 1px solid var(--darkcolor);
	border-radius:4px;
	padding:0 2px;
}


/* Sidebars are hidden if screen is 835px or narrower */
@media only screen and (max-width: 835px) {
	#bgdivfarleft, #bgdivfarright, .bgdivfarleftcredits, .bgdivfarrightcredits, #imagecreditslink { display: none; }
	#bgdivmidleft {
		width:45%;
		left:0;
	}
	#bgdivmidright {
		width:45%;
		right:0;
	}
}


/* Sidebars appear if screen is 836px or wider */
@media only screen and (min-width: 836px) {   
	#bgdivfarleft {
		background-image: url("pics/background-sidebars.png");
		background-position: 0 0;
	}
	#bgdivfarright {
		background-image: url("pics/background-sidebars.png");
		background-position: -200px 0;
	}
	#bgdivcreditsRow1Col1:hover { background: url("pics/background-rollovers.jpg"); background-position: 0 0; }
	#bgdivcreditsRow1Col2:hover { background: url("pics/background-rollovers.jpg"); background-position: -200px 0; }
	#bgdivcreditsRow2Col1:hover { background: url("pics/background-rollovers.jpg"); background-position: 0 -125px; }
	#bgdivcreditsRow2Col2:hover { background: url("pics/background-rollovers.jpg"); background-position: -200px -125px; }
	#bgdivcreditsRow3Col1:hover { background: url("pics/background-rollovers.jpg"); background-position: 0 -250px; }
	#bgdivcreditsRow3Col2:hover { background: url("pics/background-rollovers.jpg"); background-position: -200px -250px; }
	#bgdivcreditsRow4Col1:hover { background: url("pics/background-rollovers.jpg"); background-position: 0 -375px; }
	#bgdivcreditsRow4Col2:hover { background: url("pics/background-rollovers.jpg"); background-position: -200px -375px; }
	#bgdivcreditsRow5Col1:hover { background: url("pics/background-rollovers.jpg"); background-position: 0 -500px; }
	#bgdivcreditsRow5Col2:hover { background: url("pics/background-rollovers.jpg"); background-position: -200px -500px; }
	#bgdivcreditsRow6Col1:hover { background: url("pics/background-rollovers.jpg"); background-position: 0 -625px; }
	#bgdivcreditsRow6Col2:hover { background: url("pics/background-rollovers.jpg"); background-position: -200px -625px; }
	#imagecreditslink { display: block; }
}


/* If screen is 836px-980px, the sidebars are shifted out by 75px */
@media only screen and (min-width: 836px) and (max-width: 980px) {
	#bgdivmidleft {
		width:calc(45% - 125px);
		left:125px;
	}
	#bgdivmidright {
		width:calc(45% - 125px);
		right:125px;
	}
	#bgdivfarleft {
		left:-75px;
		background-image: url("pics/background-sidebars.png");
		background-position: 0 0;
	}
	#bgdivfarright {
		right:-75px;
		background-image: url("pics/background-sidebars.png");
		background-position: -200px 0;
	}
	#bgdivfarleft .bgdivcreditslinkwrapper {
		width:125px; margin-left: 75px;
	}
	#bgdivfarright .bgdivcreditslinkwrapper {
		width:125px; margin-right: 75px;
	}
}


/* If screen is 1200px or wider, the bgmidright background image is "flipped" (shifted) for symmetry */
@media only screen and (min-width: 1200px) {
	#bgdivmidright {   
		background-position: top 0 right 100px;
	}
}




/* Mobile responsive items other than background images */
@media only screen and (max-width: 480px) {
	#topcopylink {
	width:100%;
	text-align:center;
	top:-20px;
	left:0;
	}
	#topcopyarrow {
	display:none;
	}
}

/* Mobile responsiveness of restaurants/food iframe */
@media only screen and (max-width: 750px) {
	#externaliframeclosediv { 
		right:0; 
		font-size:35px;
		width:35px;
	}
}
@media only screen and (min-width: 751px) {   
	#externaliframeclosediv { 
		left:calc(50% + 310px); 
		font-size:50px;
		width:50px;
	}
}