@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;500;700;900&display=swap');
@font-face { font-family: 'Ramelik'; src: url('/css/fonts/Ramelik.otf') format('opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Deadfrog'; src: url('/css/fonts/deadfrog.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Caudex'; src: url('/css/fonts/Caudex-Italic.ttf') format('woff'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'UpperEastSide'; src: url('/css/fonts/UpperEastSide.ttf') format('truetype'); font-weight: normal; }
@font-face { font-family: 'StNicholas'; src: url('/css/fonts/StNicholas.ttf') format('truetype'); font-weight: normal; }
@font-face { font-family: 'MarketFresh'; src: url('/css/fonts/MarketFresh.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MarketFresh-Inline'; src: url('/css/fonts/MarketFresh-Inline.ttf') format('truetype'); font-weight: normal; font-style: normal; }

  body { color: #888; font-family: 'Raleway', 'Trebuchet MS', 'sans-serif'; margin:0; padding:0; }
  a { color:#aaa; text-decoration:none; }
  a:hover, a:active { color:#aaa; text-decoration:underline; }
  #header { padding: 6px ; text-align: center; }
  .header { background-color: #83A342; color: #FFFFFF; }
  .footer { position:fixed; bottom:0; left:0; color: #666666; background: #000000; min-height:30px; width:100vw; overflow:hide; padding: 10px 0px 2px 0; border-top: 1px #aaa solid; box-shadow: 0px 0px 60px 15px rgba(0,0,0,.7); font-size: 0.8em; text-align: center; }
  .footer a { color: #999999; }
  .title { border-bottom: 1px solid #aaa; margin:.5em 0 0em 0; font-size:1.5em; font-family:; }
  div.content { margin: .6em; }
  .logo { display:inline-block; margin:2px 0 2px 4px; opacity:.5; }
  .subpanel { display:none; font-size:1em; text-align:center; padding: 0 0 .5em 0; background:rgba(0,0,0,.05); box-shadow: inset 0 -1px 10px rgba(0,0,0,.4); border-bottom:1px solid #aaa; }
  .subpanel .title { font-size:1.4em; padding: .4em 0 .3em 0; margin: 0em 0 0em 0; background:rgba(0,0,0,.1); border-bottom:1px solid #999; }
  .subpanel .subtitle { font-size:1.2em; font-weight:bold; border:1px solid #999; background: linear-gradient(rgba(0,0,0,.025),rgba(0,0,0,.1)); padding: .1em 0 .1em 0; margin: 0 -1em .6em -1em; }
  .subpanel .panelgroup { display:inline-block; width:400px; min-height:60vh; margin:0; border-right:1px solid #999; border-left:1px solid #999; padding: 0 1em 1em 1em; vertical-align:top; }
  .subpanel .panelbox { padding:.8em; }
  .bubble { vertical-align:top; display:inline-block; padding:.8em; background:rgba(255,255,255,.7); border-radius:4px; font-size:1.2em; box-shadow: 0 0 5px rgba(0,0,0,.4); }
  .subpanel .bubble { margin:.5em; }
  pre,code { background: #f4f4f4; border: 1px solid #ddd; border-left: 3px solid #f36d33; color: #666; page-break-inside: avoid; font-family: monospace; font-size: 15px; line-height: 1.6; margin-bottom: .6em; max-width: 100%; overflow: auto; padding: 1em 1.5em; display: block; word-wrap: break-word; }
	.green { color:#00aa00; } .red { color:#dd0000; }

  .minipic { width:30px; height:30px; object-fit:cover; } .userpic { width:100px; height:100px; object-fit:cover; } .bigpic { width:200px; height:200px; object-fit:cover; }
  .circle-crop { display: inline-block; margin: 0 auto; margin: 0 0 0 0; overflow:hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
  .image-filter { filter: contrast(115%) brightness(125%) grayscale(40%) sepia(10%); }

  /****** Style Star Rating Widget *****/
  .rating { border: none; float: left; }
  .rating > input { display: none; } 
  .rating > label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\f005"; }
  .rating > .half:before { content: "\f089"; position: absolute; }
  .rating > label { color: #ddd; float: right; }
  /***** CSS Magic to Highlight Stars on Hover *****/
  .rating > input:checked ~ label, /* show gold star when clicked */
  .rating:not(:checked) > label:hover, /* hover current star */
  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
  .rating > input:checked + label:hover, /* hover current star when changing rating */
  .rating > input:checked ~ label:hover,
  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  }