/* This is version 2.2
   Jan 1, 2018  10:00 AM Pacific Time
*/

/* Set everything to have a margin, padding, and border of 0 so the display on all browsers will look the same. Different browsers tend to have different defaults. */
html, body, div, h1, h2, h3, h4, h5, h6, p, dl.wiki, .wiki dt, .wiki dd, li, label, blockquote, legend, .menu, a, header, footer, #header, #headerTitle, #headerSubtitle, #content, #footer, #copyright, img, .caption, #welcome, #subWelcome, .note, .note .header, .redBold, .quote, form, pre, hr {
   margin:0;
   padding:0;
   border-width:0;
}

/* Apply sans-serif fonts to the elements that should have it. Everything else will default to a serif font. */
html, body, textarea {
   font:100%/1.4 verdana, arial, helvetica, sans-serif;
}

body {
   color:black;
   background:white none;
   text-shadow:none;
}

a {
   text-decoration:underline;
   color:#069;
   background:transparent none;
   text-shadow:none;
   border-radius:0.15em / 35%;
   padding:0.05em;
   border:1px solid transparent;
   display:inline;
/*   white-space:nowrap;*/
}

a:visited {
   color:#09c;
   background:transparent none;
   text-shadow:none;
}

a:hover {
   color:maroon;
   background:rgba(128,128,128, 0.3) none;
   text-decoration:underline;
   text-shadow:none;
   border:1px solid rgba(0,0,0,0.5);
}

del * {
   text-decoration:line-through !important;
}

/* Non-content background */
body > header, body > footer {
   color:white;
   background:#28006a none;
   clear:both;
   text-shadow:none;
   padding-bottom:0.75em;
}

body > header a, body > header a:visited,
body > footer a, body > footer a:visited {
   color:yellow;
   text-decoration:none;
   text-shadow:none;
   border-radius:50% 20% 50% 20% / 50% 50% 50% 50%;
   padding:0.25em 0.5em;
}

body > header a:hover, body > header a:visited:hover {
   color:yellow;
   background:maroon none;
   text-shadow:1px 1px 1px black;
   box-shadow:inset 0 0 0.2em gray, 1px 1px 1px  black;
}

body > footer a:hover, body > footer a:visited:hover {
   box-shadow:inset 0 0 0.2em gray, 1px 1px 1px  black;
}

/***************************************************************************/
/* Form formatting. The following section changes how various sections of  */
/* a form look and are displayed                                           */
/***************************************************************************/

label:not(.checkbox) {
   background:rgba(0,0,0, 0.1) none;
   color:black;
   font-size:0.9em;
   font-variant:small-caps;
   padding:0.3em 1em 0.5em 0.5em;
   display:inline-block;

   border:1px solid gray;
   border-bottom:none;
   border-top-right-radius:1em 2em;
}


label:not(.checkbox)+span {
   font-style:italic;
   font-size:90%;
}

label:not(.checkbox)+input, label:not(.checkbox)+select, label:not(.checkbox)+textarea, label:not(.checkbox)+div,
label:not(.checkbox)+span+input, label:not(.checkbox)+span+select, label:not(.checkbox)+span+textarea, label:not(.checkbox)+span+div {
   display:block;
   margin:0 0 0.2em;
   font-size:1.1em;
}

label:not(.checkbox)+div, label:not(.checkbox)+span+div {
   background:rgba(0,0,0, 0.1) none;
   border:1px solid gray;
   padding:0.2em;
   margin-bottom:0.2em;
   border-radius:0 0.5em 0.5em 0.5em;
}

label.checkbox {
   background:transparent none;
   padding:0.2em 0;
   display:block;
   cursor:pointer;

   border:1px solid transparent;
   border-radius:0.2em;
}

/*
label.checkbox.pad {
   padding-left:1.85em;
   text-indent:-1.85em;
}
*/
label.checkbox:hover {
   background:rgba(255,255,128, 0.4) none !important;
   border:1px solid gray;
}

label.checkbox input {
   margin:0.5em;
}

label.checkbox > * {
   display:table-cell;
   vertical-align:middle;
   padding:0.15em;
}

label.error {
   background:#fdd none;
   box-shadow:inset 0 0 0.1em 0.1em red;
}

label.error+input, label.error+textarea, label.error+div, label.error+span+input {
   background:#fee none;
   box-shadow:0 0 0.1em 0.1em #f99;
}

input, select {
   max-width:40em;
}

select {
   display:inline-block;
   font-size:1.1em;
}

input[type="text"], input[type="email"], input[type="url"], input[type="file"], input[type="search"], textarea {
   width:100%;
   max-width:40em;
   font-size:1.1em;
}

input[type="date"], input[type="time"], input[type="datetime"] {
   font-size:1.1em;
}

textarea {
   width:40em;
   max-width:100%;
   height:8em;
}

@media all and (min-width:40em) {
   textarea {
      height:16em;
   }
}

.inline {
   display:inline-block;
   vertical-align:middle;
   margin:0.5em 1em 0.3em 0;
   max-width:100%;
}

.inline.top {
   vertical-align:top;
}

.inline.bottom {
   vertical-align:bottom;
}

.tableCell {
   display:table-cell;
   padding:0.1em 0.25em;
   vertical-align:middle;
}

/* The block formats the form option that comes immediately after a label */
.block, .frame.block {
   display:block;
   margin-top:0em;
   margin-bottom:1em;
   /*max-width:100%;*/
}

wassa {
   color:#191409;
   background:yellow none;
   background:#D5C6A7 -moz-linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #f0f);
   background:#D5C6A7 -webkit-linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #f0f);
   background:#D5C6A7 linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #f0f);

   border:1px solid #191409;
   border-radius:0.5em;

   display:inline-block;
   vertical-align:middle;
   font-weight:900;
   padding:0.1em 0.3em;

   -moz-transition:all 0.5s;
   -webkit-transition:all 0.5s;
   transition:all 0.5s;
}

wassa:hover {
   font-size:2em;
   line-height:1.2em;
   padding:1em;
   -moz-transform:rotate(10deg);
   -webkit-transform:rotate(10deg);
   transform:rotate(10deg);
}

/* This formats a checkbox. It's not included at the line at the top of the page because IE6 does not allow this syntax to specify just a checkbox, and therefore it will ignore the *entire* line, which is bad. So I needed input type selectors on a line of their own. */
input[type="checkbox"] {
   margin:0;
   padding:0;
   border-width:0;
}

select {
   background:white none; /* Needed for Opera to work correctly */
}

input:focus, textarea:focus, select:hover {
   background:#ffd none;
}

*:disabled img {
   filter:grayscale(100%);
}

.tableContainer {
   max-width:100%;
   overflow:auto;
}

table {
   border-collapse:collapse;
   border:none;
   padding:0;
   margin:0 0 1em;
}

table *.num {
   text-align:right;
}

table *.count {
   text-align:center;
}

th {
   vertical-align:top;
   font-weight:900;
   text-align:left;
}

th, td {
   padding:0.3em;
}

.icon, .buttonLink img { /* Chrome seems to shrink icons in a table if the table isn't wide enough--even when we explicitly set the width and height of the image. So we force the images wider here. */
   max-width:initial;
}

table.allRules th, table.allRules td {
   border:1px solid black;
}

hr {
   border-top:1px dotted gray;
   width:90%;
   margin:0.5em auto;
}

sup {
   font-size:50%;
}

/* Bold these items */
a, #header, #headerSubtitle, legend, .redBold, .wiki dt {
   font-weight:900;
   text-shadow:none;
}

details {
   padding:0;
   max-width:50em;
}

details.selected {
   background:#fdf none;
}

details summary {
   cursor:pointer;
   padding:0.3em;
}

details summary:hover {
   background:#ffa radial-gradient(#ff8, #ffa);
}

.footnote {
   font-size:80%;
   line-height:1.25;
   margin-left:2em;
   text-indent:-2em;
}

.wiki dd { /* Formatting for the answers in the help pages */
   margin-bottom:1em;
}

.columnized {
   column-width:20em;
}

.columnizedRules {
   column-rule:1px solid gray;
}

li, .noBreaks, .caption, .googleAd, .adsbygoogle, label.checkbox {
   -webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
   column-break-inside:avoid;

   page-break-inside:avoid;
   break-inside:avoid;
}

.tt {
   font-family:monospace;
}

.boxSized {
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

.tooltip {
   position:relative;
}

.tooltip .tooltipCap {
   color:black;
   background:#ffc none;
   background:rgba(255,255,200,0.8) none;
   border:1px solid black;
   border-radius:0.5em;
   padding:0.5em 1em;
   min-width:15em;
   font-weight:400;
   opacity:0;
   position:absolute;
   left:40%;
   top:1em;
}

.tooltip:hover .tooltipCap {
   opacity:1;
   z-index:100;
}

#newMessages {
   text-align:center;
}

#newMessages a {
   display:inline-block;
   border:2px solid red;
   border-radius:0.75em;
   margin:0.3em;
   padding:0.25em;
   width:100%;
   max-width:20em;
   text-align:center;
   color:#804;
   background:rgba(0,0,0, 0.1);
   text-decoration:none;
}

#newMessages a:hover {
   background:#ffb;
   box-shadow:0.1em 0.1em 0.4em #888;
   text-decoration:underline;
}

/***********************************/
/* Menubar formatting              */
/***********************************/
ul.menu {
   border-top-style:none;
   border-bottom:1px black solid;
   height:2em;
   list-style:none;
   z-index:101;
}

table.menu {
   border-top:1px black solid;
   border-bottom:1px black solid;
   border-spacing:0;
   table-layout:fixed;
   z-index:101;
}

.menu ul {
   list-style:none;
   padding:0;
   margin:0;
   z-index:101;
}

ul.menu li ul, table.menu tr td {
   background:#c6def7 none;
}

/* Formats the menubar's links */
.menu, .menu a, .menu a:link, .menu a:visited {
   color:#036;
   background:#c6def7 none;
/*   background-size:100%; // This does not seem to work with Chrome! */
   display:block;
   text-align:center;
   width:100%;
   font-weight:900;
   text-decoration:none;
   line-height:2em;
   padding:0;
   z-index:101;
   border-radius:0;
   border:none;
}

/* Formats the listing of the main menu */
ul.menu li {
   float:left;
   position:relative;
   width:14.2%;  /* 100% divided by the maximum number of main menu items */
   z-index:101;
}

table.menu th, table.menu td {
   vertical-align:top;
   margin:0;
   padding:0;
}

table.menu tr td {
   border:none;
}

/* Formats the listing of a submenu */
ul.menu li ul {
   position:absolute;
   top:2em;
   left:0;
   display:none;
   border:1px black solid;
   border-top:none;
   border-bottom-right-radius:0.5em;
   border-bottom-left-radius:0.5em;
   z-index:102;
}

/* Formats the the listing of links in the submenu */
.menu ul li, .menu ul li a, .menu ul li a:link, .menu ul li a:visited {
   color:#036;
   background:white none;
   line-height:1.1em;
   height:auto;
   clear:left;
   padding:0.3em 0;
   z-index:102;
   text-shadow:none;
}
/*
.menu ul li a, .menu ul li a:link, .menu ul li a:visited {
   border-top:1px solid rgba(255, 255, 255, 0.35);
   border-bottom:1px solid rgba(0, 0, 0, 0.35);
}
*/

.menu a:hover, .menu ul li a:hover {
   color:yellow;
   background:#3108ad none;
   display:block;
   z-index:102;
   text-shadow:none;
}

.menu ul, .menu ul li {
   width:100%;
   margin:0;
   padding:0;
   z-index:102;
}

/* This makes the drop down work */
ul.menu li:hover ul, ul.menu li.over ul {
   display:block;
   z-index:102;
}

/* This formats the separators in a submenu */
.menu .gap {
   background:gray none;
   height:1px;
   margin:3px auto;
   border:none;
   padding:0;
   width:70%;
   z-index:102;
}

table.menu tr th { /* I don't understand why this works, but it's the only way I could make the table look correct on Firefox. */
   width:1%;
}

/************* END OF MENU FORMATTING ********/

h1, h2, h3 {
   font-family:Times New Roman, Times, serif;
   font-weight:900;
   color:#66c;
   clear:left;
   text-shadow:none;
   line-height:1;
}

h1 {
   margin:0 0 0.1em;
   font-size:2em;
   font-family:"Tempus Sans ITC", "Sylfaen", "Bradley Hand ITC", "Times New Roman", serif;
}

h2 {
   margin:0.5em 0 0.25em -0.5em;
   padding:0 0.1em 0 1em;
   font-size:1.5em;
   font-variant:small-caps;
   line-height:1em;
   background:#f6f6f6 none;
   border:1px solid #aaa;
   border-left-color:#666;
   border-bottom-color:#666;
   text-shadow:none;
}

.frame h2 {
   margin:0 0 0.25em;
}

.note h2, .widget.note .header {
   font-variant:normal;
   border:none;
   border-top-right-radius:0.25em;
   border-top-left-radius:0.25em;
}

h2, .note h2, .widget.note .header {
   background-size:100% !important;
}

h3 {
   margin:0 0 5px;
   font-size:1.25em;
   line-height:1em;
}

.widget {
   position:relative;
   overflow:hidden;
}

.widget .header {
   display:grid;
   grid-template-areas:"widgetTitle widgetControls";
}

.widget .header .title {
   grid-area:widgetTitle;
   justify-self:start;
   align-self:center;
   padding:0.1em;
   font-weight:900;
   font-size:1.2em;
}

.widget .header .control {
   grid-area:widgetControls;
   justify-self:end;
   align-self:center;
   white-space:nowrap;
}

.note .body {
   padding:0.5em;
}

p, dt {
   margin:0 0 1em;
}

dd {
   margin:0 0 1.4em 3em;
   text-indent:0;
}

blockquote {
   padding:0 3em;
}

fieldset {
   padding:0 1em 1em;
   margin:0 0 1em;
}

legend {
   font-size:1em;
   margin:0 0 0.9em;
}

.ellipse {
   width:100%;
   max-width:100%;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

.logoJpg, .logoGif { /* Formatting for a logo using JPG images */
   display:none;
   margin:0 0.5em 0.5em;
   width:141px;
   height:182px;
   background:transparent url(/css/normal/logo.jpg) center center;
   border-radius:0.5em;
}

.logoGif { /* Formatting for a logo using GIF images */
   background:transparent url(/css/normal/logo.gif) center center;
}

@media screen and (min-width:500px) {
   .logoJpg, .logoGif {
      display:block;
   }
}

#content { /* Formatting for the content section of a page */
   padding:0.55em 0.5em 0;
   border-width:0;
   margin:0;
   max-width:100%;
   z-index:0;
   position:relative;
   background:white none;
}

@media all and (min-width:30em) {
   #content {
      padding:0.5em 1em 0;
   }
}

li > div:first-child > a:link {
   font-size:1.1em;
   line-height:1.5;
   padding:0.2em 0;
   text-decoration:none;
   display:inline;
}

.note:target {
   box-shadow:0 0 0.3em 0.3em #848;
   margin-top:1em;
   margin-bottom:1em;
}

/* Links that are meant to look like buttons */
button, a.buttonLink, a.buttonLink:visited, a.buttonLink:hover, input[type="submit"] {
   display:inline-grid;
   color:black;
   background:#eee linear-gradient(#ccc, #eee, #ccc);

   text-decoration:none;
   text-align:center;
   justify-items:center;
   font-size:1.2em;
   line-height:1.1;
   font-weight:400;
   font-family:verdana, arial, helvetica, sans-serif;

   margin:0.1em;
   padding:0.3em;
   min-width:48px;
   cursor:pointer;

   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;

   border:1px solid gray;
   border-radius:0.3em;
}

button > span, a.buttonLink > span, input[type="submit"] > span {
   font-size:0.8em;
}

button > *, a.buttonLink > *, input[type="submit"] > * {
   display:block;
   margin:0 auto;
}

button img, a.buttonLink img {
   margin:0 auto 0.2em;
}

button.selected, a.buttonLink.selected, input[type="submit"].selected, a.selected:link {
   color:#333;
   font-weight:900;
   border-color:#666 !important;
   background:#ccf linear-gradient(#bbe, #e0e0ff, #bbe);
}

button:hover, a.buttonLink:hover, input[type="submit"]:hover, a.selected:hover {
   border-color:black !important;
   background:#ff8 linear-gradient(#dd8, #ffc, #dd8);
   text-decoration:underline;
   box-shadow:0 0 0.2em black;
}

.buttonPanel {
   margin:0.5em 0;
}

.buttonPanel button, .buttonPanel a.buttonLink {
   margin:0;
   padding:0.2em;
   border-radius:0;
   text-align:center;
}

@media all and (min-width:40em) {
   button, a.buttonLink, input[type="submit"], .buttonPanel button, .buttonPanel a.buttonLink {
      grid-template-areas:". .";
      justify-items:start;
      align-items:center;
      margin:0.1em;
      border-radius:0.2em;
      font-size:1.2em;
   }

   button img, a.buttonLink img {
      margin-bottom:0;
   }
}

.go, .cancel, .preview, .edit, .save {
   display:inline-block !important;
   vertical-align:middle !important;
   font-size:1.3em !important;
   font-weight:400 !important;
   padding:0.5em 0.5em 0.5em 2.25em !important;

   background-position:0.3em 50% !important;
   background-repeat:no-repeat !important;
   background-size:1.5em, 100% !important;
   border:1px outset gray !important;
}

.go:hover, .cancel:hover, .preview:hover, .edit:hover, .save:hover {
   background-position:0.2em 50% !important;
   background-repeat:no-repeat !important;
   background-size:2em, 100% !important;
}

.go {
   color:#3B7100 !important;
   background-image:url(/css/images/ok-icon.png) !important;
}

.go:hover {
   border-color:green !important;
}

.cancel {
   color:#B3310F !important;
   background-image:url(/css/images/cancel-icon.png) !important;
}

.cancel:hover {
   border-color:red !important;
}

.preview {
   color:#0F31B3 !important;
   background-image:url(/css/images/preview-icon.png) !important;
}

.preview:hover {
   border-color:blue !important;
}

.edit {
   color:#808000 !important;
   background-image:url(/css/images/edit-icon.png) !important;
}

.edit:hover {
   border-color:#585600 !important;
}

.save {
   color:#a0a000 !important;
   background-image:url(/css/images/save-icon.png) !important;
}

.save:hover {
   border-color:#885600 !important;
}

#header { /* Formatting for the main AQ header at the top of every page */
   color:#33c;
   background:#ddf none;
   background-size:auto 100%;
   border-color:black;
   border-style:solid;
   border-width:1px 0;
   text-align:center;
   height:53px; /* Total height = 53 + 5 + 5 = 63 */
   vertical-align:middle;
   padding:4px 0 6px;
   margin:0.3em 0 0;
}

#headerTitle { /* Formatting for the box that displays the words "Atlas Quest" at the top of every page */
   background:#fffded none;
   border:1px black solid;
   border-radius:0.25em;
   min-width:180px;
   max-width:6em;
   margin:0 auto;
   padding:1px 0 0;
   line-height:1em;
   height:53px;
   font-size:40px;
   font-family:"Lucida Blackletter", "Harrington", "Tempus Sans ITC", "Monotype Corsiva", "Blackadder ITC", "Mistral", "French Script MT", "Brush Script MT", "Curlz MT", "Bradley Hand ITC", "Times New Roman", serif;
   opacity:0.85;
}

#headerTitle img {
   margin:0;
   padding:0;
}

#headerSubtitle { /* Formatting for the section at the top of every page that says "A Letterboxing Community" */
   visibility:hidden;
   font-size:1.4em;
   font-family:Times New Roman, Times, serif;
   color:white;
   text-align:center;
   padding:2px 0 0 10%;
   letter-spacing:1px;
   word-spacing:3px;
   background:transparent none;
   height:1em;
   text-shadow:none;
   text-align:left;
}

@media screen and (min-width:50em) {
   #headerSubtitle {
      visibility:visible;
   }
}

@media screen and (min-width:55em) {
   #headerSubtitle {
      padding-left:0;
   }
}

@media screen and (min-width:60em) {
   #headerSubtitle {
      padding-left:0;
      text-align:center;
   }
}

ul, ol {
   margin-top:0;
   margin-bottom:1em;
}

/* Formatting for lists where each item in the list should have whitespace between them */
ul.paragraph, ol.paragraph {
   margin-top:0;
   margin-bottom:1.5em;
}

ul.paragraph li, ol.paragraph li {
   margin-top:0;
   margin-bottom:0.5em;
}

/* Formatting for the footer and copyright text at the bottom of every page */
#footer {
   text-align:center;
   margin:0 0.5em 1em;
   clear:both;
}

#footer .footerSection {
   padding-top:1em;
}

#footer .break {
   display:none;
}

#footer a, #footer a:visited {
   font-size:1.1em;
   font-weight:400;
   line-height:1.3em;
   padding:0.4em 0.5em;
   text-decoration:none;
   display:block;
   border-radius:0.5em 0.5em / 2em 0.5em;
}

#footer a:hover {
   color:yellow;
   background:maroon none;
}

@media all and (min-width:25.5625em) { /* 425px */
   #footer {
      max-width:100%;
   }

   #footer .break {
      display:inline;
   }

   #footer a, #footer a:visited {
      display:inline;
   }
}

#copyright {
   text-align:center;
   margin:1em 0.5em;
   clear:both;
}

/* The default format that "error" messages use. Should be red in most cases. */
.redBold {
   color:red;
   font-weight:900;
   margin:0 0 1em;
}

/* The formatting to be used on captions by an image */
.caption {
   font-size:0.9em;
   margin:0.5em 1em;
   text-align:center;
   color:#666;
}

/* Formatting for the welcome message in the upper-right corner of every page */
#welcome {
   position:absolute;
   right:1em;
   top:0.1em;
}

#welcomeStats {
   position:absolute;
   left:1em;
   top:0.1em;
   font-size:0.8em;
}

#themeInfo {
   position:absolute;
   right:1em;
   top:2em;
   text-align:center;
}

#themeInfo a {
   font-size:0.8em;
}

/* A "note" is usually user-generated content such as a post on a message board or AQ mail messages. The "bgLight" is what AQ uses to make things easier to read like the alternating colors on a table's rows. Anywhere a normal background color *would* work, but a slightly off-color helps with readability. */
.bgLight, .note, .frame, legend, details, .toggleTable {
   background:#eef none;
}

/* The formatting for the footer in a note */
.bgMid, .note .footer, details summary, .toggleTable tbody tr:nth-child(odd), .toggleTable > div:nth-child(odd) {
   background:#dde none;
   background-color:rgba(0,0,0, 0.075);
}

/* The formatting for the header in a note */
.bgDark, .note .header, table.toggleTable thead, table.toggleTable tfoot {
   background:#ccd none;
   background-color:rgba(0,0,0, 0.15);
}

.note .header > * {
   display:inline-block;
   vertical-align:middle;
}

table.toggleTable caption {
   background-color:rgba(0,0,0, 0.25);
   font-size:1.2em;
   line-height:1.4em;
   padding:0.2em;
}

input.hoverHighlight:hover, table.hoverHighlight tbody tr:hover {
   box-shadow:0 0 0.2em black;
   background:#ffd none !important;
}

@media all and (min-width:30em) {
   .tags { 
      max-width:40em;
      column-count:2; 
   }

   .tags > * {
      max-width:15em;
   }
}

.note {
   margin:0 0.5em 0.5em;
   max-width:50em;
}

.note h2, .note .header, .note .footer {
   padding:0.25em 0.5em;
   margin:0;
}

.note h2 {
   font-size:1.3em;
   text-align:center;
   font-weight:900;
}

.note .body {
   padding:0.5em;
}
/*
.note a { /* The formatting for links in a note
   color:#048;
}

.note a:visited { /* The formatting for links that have already been visited in a note
   color:#059;
}

.note a:hover {
   background:rgba(0,0,0, 0.2) none;
}
*/
.quote { /* Formatting for quoted messages in a note */
   background:rgba(255, 255, 255, 0.6) none;
   padding:0.25em;
   margin:1em 0.5em 0;
   max-width:50em;
}

.quote, .thinBorder, .frame { /* Formatting for anything that needs a thin border around it */
   border:1px solid gray;
}

.emotions { /* Formatting for the panel of emotion buttons below a message */
   margin:0.5em 0;
}

.emotions form {
   display:inline-block;
}

input[type="submit"].vote { /* Formatting for individual emotion buttons */
   color:#333;
   border:1px gray solid;
   border-radius:0.3em;
   padding:2px;
   background:transparent none;
   font-size:90%;
   display:inline-block;
}

input[type="submit"].vote:hover { /* Formatting for individual emotion buttons that have a mouse cursor over them */
   cursor:pointer;
   background:#ffd none;
}

.icon { /* Default formatting for icons */
   border:none;
   margin:-2px 0 -1px;
   padding:0 1px;
   vertical-align:baseline;
}

.accesskey { /* Default formatting for anywhere an accesskey can be used */
   color:black;
   text-decoration:underline;
}

#pageStats { /* For webmasters only--you don't need this. ;o) */
   color:black;
   background:#fed none;
   border:2px red solid;
   margin:10px;
   padding:10px;
   text-shadow:none;
}

.code { /* Formatting for code-like snippets of material */
   border:1px dotted black;
   border-width:1px 0;
   margin:0 0.5em 0.5em;
   padding:0.5em;
   font-family:monospace;
   white-space:pre;
   background:rgba(0,0,0, 0.1) linear-gradient(90deg, rgba(0,0,0, 0.2), rgba(0,0,0, 0.0));
}

.frame {
   padding:0.5em;
   margin:0 1em 1em 0;
   display:block;
   overflow:hidden;
}

.frame2 {
   border:1px solid #888;
   margin:0.5em;
   padding:0 0.5em 0.5em;
}

.frame2 h2 {
   margin-top:0.3em;
}

.isMobile {
   display:none;
}

.bold {
   font-weight:900 !important;
}

.rounded, .frame, .thinBorder, .container, .quote, fieldset {
   border-radius:0.5em;
}

.frame.block {
   border-top-left-radius:0;
}

.note, .note .header {
   border-top-left-radius:1em;
   border-top-right-radius:1em;
}

.note h2 { /* h2 has font-size:2em, so we need to use 0.5em for the rounded corners to make them consistent around the entire frame */
   border-top-left-radius:0.5em;
   border-top-right-radius:0.5em;
}

.note, .note .footer {
   border-bottom-left-radius:1em;
   border-bottom-right-radius:1em;
}

.center {
   margin-left:auto !important;
   margin-right:auto !important;
}

img.center { /* Only blocks can be centered by using auto-margins, and we often want to center an image, but it's not a block! */
   display:block !important;
}

.clear {
   height:1px;
   clear:both;
}

.identifier {
   font-size:1.5em;
   font-weight:900;
   color:#666;
   padding:0.2em;
   float:right;
   text-align:center;
}

.disable {
   pointer-events:none;
   cursor:default;
}

.iconLink, a.iconLink, a.iconLink, a:link.iconLink, a:visited.iconLink, a:hover.iconLink {
   display:inline-block;
   border:1px solid transparent;
   text-decoration:none;
   padding:0.3em 0.3em 0;
}

a:hover.iconLink {
   border:1px outset #ccc;
   background:rgba(0,0,0, 0.1) none;
   background:radial-gradient(closest-corner at 40% 40%, #cc0, rgba(0,0,0, 0.1));
}

.iconGroup {
   display:inline-block;
   vertical-align:middle;
   margin-left:0.2em;
/*   white-space:nowrap;*/
}

.iconGroup > * {
   display:inline-block;
   vertical-align:middle;
}

#waiver {
   padding:1em;
}
/*
.seriesInfo {
   float:right;
   border:1px dotted gray;
   padding:0.2em;
   margin:0.2em;
}

.seriesInfo table, .seriesInfo tr, .seriesInfo td {
   padding:1px;
   margin:0;
}
*/
.findSummary .find {
   color:green;
}

.findSummary .attempt {
   color:red;
}

.findSummary .attemptedFinds {
   color:blue;
}

img {
   max-width:100%;
}

.gm-style img { /* This line is necessary for Google Map controls to work correctly--setting a max-width to 100% would break it! */
   max-width:none;
}

img.roundedCorners {
   border-radius:0.5em;
}

fieldset {
   background-color:rgba(0,0,0,.03);
   border-color:rgba(0,0,0,0.5);
   padding-top:0.25em;
}

legend {
   border:1px solid gray;
   padding:1px;
   box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}

.billboardTimestamp {
   font-size:90%;
   font-weight:900;
   text-shadow:1px 1px 2px white;
}

/* Google's Autocomplete formatting */
.pac-container {
   color:black;
   background:white none;
/*   overflow:scroll;*/
}

/* Weather Forecast displays */
.weatherDayForecast {
   margin-bottom:1em;
}

.wdIcon {
   float:left;
   margin-right:1em;
   text-align:center;
}

.wdSummary {
   margin-bottom:0.5em;
}

.wdStats {
   float:left;
   text-align:left;
}

.hourlyTitles th {
   width:7em;
   text-align:center;
   vertical-align:middle;
}

.hourTitle {
   font-size:1.5em;
   text-align:right;
}

.hourSummary {
   text-align:right;
   margin-top:0.5em;
}

.hourStat {
   text-align:center;
   padding-right:2em;
}

.ccStat {
   margin-bottom:0.2em;
}