/* All CSS ids & classes for the comment system begin with § */

.§useri { float:left;width:54px;text-align:center;overflow:hidden;} /* [anchor tag] width must match .§mtext margin-left */
.§uai { display:block;margin:0 auto 3px;width:48px; } /* visibility:hidden added with JS */
.§mtext { margin-left:10px; }
.§mhead { height:54px;line-height:48px; } /* visibility:hidden added with JS */
.§mhead br { display:none; } /* See §fdate, use display:inline to enable */
.§usern { font-weight:bold;text-decoration:none;color:black; } /* [anchor tag] */
.§fdate { font-family:monospace;font-size:70%;color:gray;margin-left:4px; white-space:nowrap; } /* preceeded by " <br/>" */
.§plink { margin-left:4px;text-decoration:none;color:blue; } /* preceeded by a space */
.§tbc { clear:left;overflow:auto;border:1px solid transparent;max-height:300px } /* .§t border compensator and max-height  */
.§t img, .§tbc img { max-width:100%; }

#§container { max-width:600px;margin:20px auto; }
#§container button { float:right;cursor:pointer; }
.§d:after { content:"";display:table;clear:both;height:2px; }
.§t { clear:left;overflow:auto;min-height:3em;max-height:300px;outline:none;border:1px solid rgb(128,128,128);margin-bottom:3px; } /* max-height is set in the js and is here to apply to preview - it should be matched in .§tbc; Note also that the preview function sets position:relative */
.§t[data-placeholder]:empty:not(:focus):before{content:attr(data-placeholder);color:gray; }
.§d button { margin:0 4px; }
button.§q { opacity:1; }
button.§qp { opacity:0.5; }
#§console { background-color:#eee;font-family:monospace;font-size:80%;overflow:auto;box-sizing:border-box;height:0;overflow-x:auto;overflow-y:scroll; } /* #§console cannot have any styles that contributes to height - see øtoggleConsole in the JS */
#§console div { margin:2px; }
#§mw { position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:100001;overflow:auto;cursor:pointer; }

.§x {
 position:fixed;
 top:10px;right:10px; /* distance from edges */
 height:40px;width:40px; /* size (1:1 aspect ratio) */
 display:flex;flex-direction:column;justify-content:center;
}
.§x::before,.§x::after {
 position:absolute;content:'';
 width:100%;
 height:2px; /* cross thickness */
 background-color:#ddd;
}
.§x::before { transform: rotate(45deg); }
.§x::after { transform: rotate(-45deg); }

span.fixlinespace { display:block;height:0.6em; } /* class sanitize */

#§comments {  }
.§group {  }

.§comment { border-left:4px solid rgb(128,128,128);margin-top:14px; } /* border-left width must match .§reply */
#§d div.§comment { border-color:rgb(192,192,192); }
#§reply div.§comment { margin-top:0;border-color:rgb(192,192,192); }
button.§r { font-size:70%;margin:0 3px; }
.§reply { border-left:4px dotted rgb(128,128,128);padding-top:10px; } /* border-left width must match .§comment */
.§comment:after, .§reply:after { content:"";display:table;clear:both; }
.§rpad { height:10px; }
.§rm { cursor:pointer;border-top:1px dashed silver;padding-top:6px;text-align:center;font-size:85%;color:gray; }
.§rl { cursor:pointer;border-top:1px solid white;padding:6px 6px 0;font-size:85%;color:gray; }

.§controls { display:inline; }
.§controls span { cursor:pointer;position:relative;top:1px;left:10px; }
.§controls span:hover { color:red; }
.§sdel { text-align:center;color:red;font-style:italic;padding:8px; }

.mce-content-body { line-height:normal !important; }

/* This CSS is better if comments are expected to be short
.§t, .§tbc { clear:none; }
.§mtext { margin-left:54px; }
.§mhead { height:auto;line-height:normal;padding:2px 0 5px; }
*/

/* This CSS is better if comments are expected to be short */
.§mtext { margin-left:54px; }
.§mhead { height:auto;line-height:normal;padding-bottom:5px; }
.§fdate { margin-left:1px; }
.§tbc, .§t { clear:none; }

/* Permalinks */
.§plink { display:none; } /* SantaCon event pages may move */

/* Other modifications/additions to comment system */
#§container { max-width:485px;margin-top:0; }
a.§usern:hover { color:initial; }
.§comment, .§reply { background-size:auto 65px;background-repeat:no-repeat; }

/* previewExpired */
.previewExpired { margin-top:30vh;text-align:center;color:#ddd;text-shadow:0px 2px 3px #333;font-size:4em; }

/* new comment notification */
.blinkborder { border-left-color:red;animation: blinker 1s linear infinite; }
@keyframes blinker { 50% { border-left-color:white; }}

/* Reset */
html, body { height:100%; }
html { overflow-y:scroll; }
body { position:relative;margin:0;padding:0; }
img { display:block; }
sub, sup { font-size:75%;line-height:0;position:relative;vertical-align:baseline; } sup { top:-0.5em; } sub { bottom:-0.25em; }
header, nav, main, article, section, footer { display:block;flex:none; }
table { border-spacing:0;border-collapse:collapse; }
td { padding:0; }
ol, ul { margin:0; }
fieldset { margin:0;padding:0;border:0; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], .b16 { font-size:16px;box-sizing:border-box; }
input[type=submit] { cursor:pointer; }
input[disabled] { pointer-events:none; }
input::-moz-focus-inner { border:0; }
summary { outline:0;cursor:pointer; }

/* Custom */
body { font-family:Arial,sans-serif;font-size:16px;background:darkred url(/webg/balls.gif) fixed;color:#3e3e3e; }
img { max-width:100%;    height:auto; }
noscript { display:block;color:red; }
li { margin:13px 0;position:relative;top:-3px; }
p { margin:10px 0;line-height:130%; }
.ntm { margin-top:0; }
h1 { font-size:30px;padding:0;margin:0 0 5px;text-shadow: 0 0 1px rgba(128,128,128,0.7); }
h2 { font-size:22px;padding:0;margin:0; }
h2 em { color:#999; }
h3 { font-size:18px;padding:0;margin:0; }
h4 { font-size:17px;padding:5px 0 0;margin:0; }
a:link { color:green; }
a:visited { color:#b30000; }
a:hover { color:red; }
.caption { font-size:75%;padding:3px 0 10px; }
.strongred { color:red;font-weight:bold; }
.stronggreen { color:green;font-weight:bold; }

/*
.loader is used in forms.js for page overlays (e.g. during sleep in useraccount forms)
Otherwise, in-page wait should use Comments/URLpreview/loading.gif (e.g. Comments/URLpreview/)
*/
.loader {
 text-indent:-200vw; /* Hide any text in div */
 width:100%;height:100%;
/* background:url('santa_waiting.gif') no-repeat center; */
 background:url('/webg/snow.gif');
}

/* Main layout */
#wrapper { box-sizing:border-box;padding:20px 10px 170px;max-width:1030px;margin:0 auto; }
#prezzie { background-color:white;border:5px solid red;border-radius:18px;overflow:hidden; }

header { padding:7px; }
header img { margin:0 auto; }
header h2 { font-size:19px;text-align:center;margin:5px; }

nav { background-color:#efefef;border-top:1px silver solid;border-bottom:1px silver solid;padding:4px 2% 0;text-align:justify;font-size:4px; }
nav:after { content:"";display:inline-block;width:100%; }
nav span { display:inline-block;margin:0 8px;white-space:nowrap; }
nav a { text-decoration:none;font-size:20px;font-weight:bold;text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white; }
nav a:hover, nav a.x { color:#fe0100;text-shadow: 1px 0 2px white, 0 1px 2px white, -1px 0 2px white, 0 -1px 2px white, 2px 2px 4px rgba(0,0,0,0.9); }

main { padding:5px; }
.fullwidth { padding:5px;clear:both; }
.column { float:left;width:50%;box-sizing:border-box;padding:5px; }

footer { clear:both;padding:24px 8px;text-align:center;font-size:90%; }

/* functions loginForm & access */
.social { font-size:11pt;box-sizing:border-box;width:260px;max-width:80%;margin:13px auto 20px;border:1px solid #555;border-radius:5px;background:linear-gradient(#fafafa,#d4d4d4);padding:2px;display:table;height:61px; }
.padnoimage { display:table-cell;vertical-align:middle; }
.social table { border-collapse:separate;border-spacing:3px;width:100%; }
.social td:first-child { width:48px; }
.social .dots { position:absolute; } /* https://stackoverflow.com/questions/13014808/is-there-anyway-to-animate-an-ellipsis-with-css-animations */
.social .dots:after { display:inline-block;animation:dotty steps(1,end) 1s infinite;content:''; }
@keyframes dotty {
	0%   { content:''; }
	25%  { content:'.'; }
	50%  { content:'..'; }
	75%  { content:'...'; }
	100% { content:''; }
}
#loginformbackground { text-align:center;padding:20px 0 40px;min-height:100%; }
.loginformwrapper { width:100%;max-width:300px;display:inline-block;margin-bottom:20px; }
.loginformwrapper .anonimg { margin:10px auto 0;background-color:white;position:relative;left:-13px; } /* background-color should be main body background-color */
.loginformwrapper .formnote { font-size:80%;padding:0 15px;margin-top:8px; }
.loginform fieldset,
#useraccount fieldset
{ position:relative;margin:2px; }
.loginform input[type=text], .loginform input[type=password], .loginform label { font-size:16px; } /* Size of input text */
.loginform input[type=text], .loginform input[type=password],
#useraccount input[type=text], #useraccount input[type=password], #useraccount input[type=email]
{
 display:block;outline:0;
 width:100%;
 border:2px solid red;
 border-radius:5px;
 background:#F0F8FF;
 padding:15px 7px;
 margin-top:5px;
}
.loginform label,
#useraccount label
{
 position:absolute;
 cursor:text;
 color:#f88;
 font-style:italic;
 top:22px;left:7px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
 -webkit-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
}
.loginform input[data-empty="false"] + label, .loginform input:valid + label, .loginform input:focus + label,
#useraccount input[data-empty="false"] + label, #useraccount input:valid + label, #useraccount input:focus + label,
#useraccount input[readonly] + label
{
 color:red;
 font-style:normal;
 font-weight:bold;
 font-size:12px;
 -webkit-transform: translate3d(0, -16px, 0); /* Relates to position of label */
         transform: translate3d(0, -16px, 0); /* ---------------------------- */
}
.loginform input[type=submit] { margin:6px auto 0; }
/* functions uinfo (& chooseImageForm) */
#useraccount { padding:14px 5px;max-width:600px;margin:0 auto; }
#useraccount>div, #useraccount details { margin:1em 0; }
#uLogout { float:right;background-color:transparent !important; }
#uLogout button { cursor:pointer; }
#uu { font-weight:bold;font-size:1.2em; }
#useraccount details > summary:first-of-type { list-style-type:none;outline:none; }
#useraccount details summary::-webkit-details-marker { display:none;outline:none; }
#useraccount details summary:hover, #useraccount details[open] summary { color:red; } /* color should match that set for .iedit */
#useraccount details[open] summary { font-size:135%;font-weight:bold; }
#useraccount form { margin:6px 0 12px;background-color:#eee;padding:10px;border-radius:4px; }
/* Some .loginform styles apply here */
#useraccount input { max-width:296px; }
#useraccount label { white-space:nowrap; }
#useraccount input[type=image] { margin-top:0;background-color:white; } /* background-color should be main body background-color */
#useraccount .imagesubmit { display:flex;align-items:center; }
#useraccount .imagesubmit input[type=image] { max-width:400px; }
#useraccount .imagesubmit label { padding-left:0.4em; }
#useraccount .formcheckbox { display:flex;align-items:center;font-size:13px;margin:2px 0; }
#useraccount .formnote { font-size:13px;margin-bottom:6px; }
.iedit { position:relative;display:inline-block; }
.iedit .overlay { position:absolute;height:100%;width:100%;opacity:0;transition:.5s ease;background-color:red; } /* background-color should match that set for #useraccount details summary:hover, #useraccount details[open] summary */
#useraccount details:not([open]) summary:hover .overlay { opacity:1; }
.iedit span { display:block;position:absolute;top:50%;left:50%;text-align: center;color:white;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}
#uName { font-weight:bold; }
#uSinfo { border-collapse:separate;border-spacing:1px;margin-bottom:4px; }
#uSinfo th { font-weight:bold;text-align:left;padding:0 4px 3px; }
#uSinfo td { padding:0 4px; }
#uSinfo td:nth-child(3) { text-align:center; }
#uSinfo div.check { overflow:hidden;background:radial-gradient(circle, red 5%, transparent 30%); }
#uSinfo div.check input { position:relative;left:-200vw; }
#nopw { font-size:90%;border-top:2px solid #ddd;padding-top:12px;margin-top:25px !important; }

/* Exceptional */
.vnotice { padding:0 10px 8px;color:white;background-color:#008dc9; }

/* Events */
blockquote { display:block;padding:8px 0 14px;margin:0 12px 0 20px;font-size:16px; } /* Google Mobile Usability issues */
blockquote.deets { font-size:0.8em;position:relative;top:-6px;max-height:45px;overflow:hidden;border-bottom:1px dashed silver; }
blockquote.deets:before { content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to bottom,transparent 70%,#fff);opacity:.6; }
blockquote.deets p { margin:0; }
.mainimage { max-width:100%;margin:13px 0; }
.slinks, .eventphotos { margin-bottom:18px; }
.eventphotos a { display:block;margin:10px 0; }
.eventphotos img { max-width:100%; }
.btb { text-decoration:none;display:inline-block;margin-left:20px;background:#fff;padding:8px 12px;border-radius:8px;border:1px solid #aaa;box-shadow:-1px -2px 4px 1px #bbb inset; }

/* Home */
.currentimage { width:100%;padding-bottom:72%;position:relative; }
.currentimage>div { position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden; }
.currentimage img { max-width:100%;height:auto;margin-top:-28%; }
.QR { float:right;margin:16px 14px 8px 5px; }

/* Locations */
.tye { text-align:left;border-collapse:separate;border-spacing:4px 8px; }
.tye { margin:0 auto 20px; }
#locationspage .tye { margin-left:16%; }
.tye th:first-child { text-align:center; }
.tye td:first-child { min-width:92px; }
.tye td:first-child img { margin:0 auto;border:2px outset #ccc; }
.tye th:last-child, .tye td:last-child { padding-left:12px;min-width:70px; }
.tyepast td:last-child { color:#999;font-style:italic;padding-left:12px; }
.llist { line-height:150%;margin-bottom:10px; }
.llist span { white-space:nowrap; }
#totals { text-align:right;font-size:13px;padding-right:10px; }

/* About */
#aboutpagecolumn1 details { margin:16px 0; }
#aboutpagecolumn1 summary { font-size:18px;font-weight:bold; } /* h3 */
#aboutpagecolumn1 details summary:hover, #aboutpagecolumn1 details[open] summary { color:red; }
#aboutpagecolumn1 details[open] { border-bottom:1px solid red; }
#aboutpagecolumn1 details[open]:last-child { border:none; }
.aboutimage { float:right;margin:6px 0 4px 8px; }

/* Wikipedia */
#wikipedia table { border-collapse:separate;border-spacing:0 12px;margin:10px auto;width:100%;max-width:500px; }
#wikipedia .wiki { font-style:italic;font-size:90%;margin:20px auto;width:100%;max-width:600px; }

/* Buy Santa Suits */
#BSSpage .bssinfo { font-style:italic;font-size:90%; }

/* WS page */
.c2top { display:block;text-align:center;padding:5px 0;font-size:16px;font-style:italic;border:1px dotted red; }
.c2top a { display:block;text-decoration:none; }
.closed { color:red;font-weight:bold; }
.anonimg, .anoni { opacity:0.5;filter:grayscale(80%); }
.agedout { text-align:center;padding:20px 0 10px;color:gray;font-style:italic;font-size:80%; }

/* Special features */
div.websanta { font-size:90%;color:red;padding-top:9px; }

/* 404*/
#E404 { padding:40px 0 50px 6%; }
#E404 h2 { margin-bottom:20px; }
#goog-wm .closest-match { margin-bottom:1em; }
#goog-wm ul { padding:0 0 0 1em; }
#goog-wm li { list-style-type:none; }
#goog-wm-qt { display:block;width:220px;margin:5px 0; }

/* Ads */
.sap { font-size:75%;padding-top:2px;text-align:right; }
.sap a { text-decoration:underline dotted; }
.sap a:visited { color:#555; }
.Adsense, .Amazon { margin:0 auto;max-width:728px;overflow:hidden; }
.column .Adsense { max-width:400px;margin:0 auto 10px; } /* Force 336 or 300 square */
.Amazon { margin-top:20px; }
.column .Amazon { max-width:400px;margin:20px auto 0; } /* Fixed width, centered */
.fof { float:left;margin:0 8px 0 0; }
.foftext { font-size:large; }
.foftext p { margin:0 0 6px 0; }

/* Test mode (/manage.html) */
.testmode { margin:30px 10%; }
.testmode h1 { background-color:gold;padding:10px 20px;border:4px double red;text-align:center;margin-bottom:16px; }
.testmode em { color:#b30000; }
.testmode img { width:40px; }
.testmode span { display:block;font-weight:bold;font-style:italic;font-size:18px;padding:7px 0 0 7px; }

/* @media */
@media only screen and (max-width: 700px)
{
#wrapper { padding:6px 0 36px; }
#prezzie { border-width:2px;border-radius:0;max-width:505px;margin:0 auto; }
header h2 { font-size:14px; }
nav { text-align:left; }
.column { float:none;width:100%; }
#locationspage .tye { margin:0 auto 20px; }
#BSSpage .bssinfo { margin-top:0; }
}
@media only screen and (max-width: 524px)
{
#wrapper { padding-top:0; }
#prezzie { border:0; }
#prezzie:after { content:"";display:block;height:40px;background:linear-gradient(to bottom, #fff 30%, #000); }
body { background:black; }
header h2 { font-size:11px; }
.tye { font-size:85%; }
.tye td {height:36px; }
.llist { line-height:1.7em; }
.llist span:before { content:' ';display:block; }
.fof { float:none;display:block;margin:0 0 8px 0; }
.fof img { display:block;margin:0 auto; }
.foftext { font-size:small;text-align:center }
}

/* extraCSS (from intercepts) */
.§mhead { line-height:normal; }
.§mhead br { display:inline; }
.§fdate { margin-left:2px;font-size:60%; }