/* This is the default theme for dawnstar - in progress from wolfhax */
@charset "utf-8";
@font-face {
    font-family: 'RedHatMono';
    src: url('https://dawnstar.ca/styles/fonts/RedHatMono-Regular.ttf');
    font-style: normal;
}
@font-face {
    font-family: 'RedHatMonoBold';
    src: url('https://dawnstar.ca/styles/fonts/RedHatMono-Bold.ttf');
    font-weight: Bold;
    font-style: normal;
}
@font-face {
    font-family: 'NotoEmoji';
    src: url('https://dawnstar.ca/styles/fonts/NotoEmoji-Regular.ttf');
    font-style: normal;
	font-weight: 400;
}
@font-face {
    font-family: 'SourceCodeProBold';
    src: url('https://dawnstar.ca/styles/fonts/SourceCodePro-Bold.ttf') format('truetype');
    font-weight: Bold;
    font-style: normal;
}
@font-face {
    font-family: 'SourceCodePro';
    src: url('https://dawnstar.ca/styles/fonts/SourceCodePro-Regular.ttf') format('truetype');
    font-style: normal;
}

@-webkit-keyframes banner {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}
@keyframes banner {
  0% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}


@-webkit-keyframes topnav {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes topnav {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


@keyframes jump {
  0% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  100% {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
  }
}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 1em;
}


a:link {
  color: #333333;
  text-decoration: none;
}
a:visited {
  color: #222222;
}
a:hover,
a:visited:hover {
  color: #444444;

}
a:active,
a:visited:active {
  color: #444444;
}

chat {
  color: #11ff11;
}

a:link chat,
a:visited chat,
a:hover chat,
a:visited:hover chat,
a:active chat,
a:visited:active chat {
  color: inherit;
}

h4, h5, h6 {
  font-weight: normal;
}



h1 {
color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodeProBold', Helvetica, sans-serif;
font-size: 1.5em;
}

h2 {
 color:rgba(210, 180, 210, 1.0);
 font-family: 'SourceCodeProBold', Helvetica, sans-serif;
 font-size: 1.3em;
}

h3 {
 color:rgba(210, 180, 210, 1.0);
 font-family: 'SourceCodeProBold', Helvetica, sans-serif;
 font-size: 1.2em;
}
h4 {
color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
font-size: 1.2em;
}

h5 {
    color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
font-size: 1.1em;
}

h6 {
    color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
font-size: 1.1em;
}

ul {

 color:rgba(204, 204, 204, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 1em;
 padding: 0;
 margin: 0;
}

ul li {
padding-left: 12px;
 display: list-item;
 list-style: none;
}

ul li::before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: 6px;
  color: rgba(280, 280, 280, 1.0); /* Or a color you prefer */
}

ol {

 color:rgba(204, 204, 204, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 1em;
 padding: 0;
 margin: 0;
}

ol li {
 display: list-item;
 list-style: decimal inside;
 padding-left: 12px;

}

a {
text-decoration: none;
}

p {
 color:rgba(210, 180, 210, 1.0);
 font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 1em;

}

body {
 WIDTH: 100%;
 max-width: 100%;
 text-align: center;
 background-size: cover;
 /* $bgsz=getbodysize($a); <----- goes into a function later */
 background-position: top center;
 background-attachment: fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 height: auto;
 padding: 0px;
 margin: 0px;
/* overflow: visible; I was poking at something here, left it for later*/
}

#bodyWrap {
/* Contains everything INSIDE of the body tag, but is a div wrapper */
 display: block;
 position: relative;
 top: 0px;
 WIDTH: 100%;
 text-align: center;
 max-width: 100%;

}

.syserror {
 display: block;
 position: relative;
 top: 0px;
 z-index: 30;
 width: 100%;
 text-align: center;
 height: 100%;
background: rgba(0,0,0,0.9);
}
section {
 position: relative;
 min-width: 100%;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

#artWrap {
 display: inline-block;
 top: 0px;
 z-index: 30;
 width: 100%;
 text-align: center;
 height: 100%;
 /*background: rgba(0,0,0,0.9);*/
}

#article {
 display: inline-block;
 position: relative;
 z-index: 35;
 width: 98%;
 max-width: 98%;
 text-align: center;
 padding: 12px;
 overflow: hidden;
 height: auto;

 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;

 text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 0px 1px 3px rgba(0,0,0,0.8);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
}

#mainarticle {
  display: inline-block;
  position: relative;
  z-index: 35;

  width: 98%;
  max-width: 98%;
  text-align: center;

  overflow: hidden;
  height: auto;
 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;

 text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 0px 1px 3px rgba(0,0,0,0.8);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
}

#artcont {
padding: 10px;

}


#topsec {
 display: inline-block;
 width: 100%;
 text-align: center;
 background-image: url('');
 background-size: 100%;
 background-repeat: repeat-x;
 background-position: 0 0;
 background-attachment: fixed;

 z-index: 100;

}

#topnav {
 text-align: center;
 background: rgba(0,0,0,0.0);
 background-position: center top;
 width: 750px;
 Max-width: 100%;
 margin: 0 auto;


 -webkit-animation: topnav 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards;
 animation: topnav 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards;
}

#HeadImg {
 display: inline-block;
 max-width: 100%;
 height: auto;
 padding: 0px;
 margin: auto;
}


#topNavbuts {
 /* x */
 display: inline-block;
 position: relative;
 color: rgba(255, 255, 255, 1.0) !important;
 font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 14px;
 text-align: center;
 background: #959595; /* Old browsers */
 background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 43%, #010101 50%, #0a0a0a 53%, #4e4e4e 83%, #383838 93%, #1b1b1b 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 43%,#010101 50%,#0a0a0a 53%,#4e4e4e 83%,#383838 93%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,64,1) 0%,rgba(13,13,13,1) 43%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(0,0,32,1) 83%,rgba(56,56,56,1) 93%,rgba(27,27,27,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
 height: auto;
 width: auto;

 padding: 0px;
 margin: auto;
 border-left: solid #000040 1px;
 border-right: solid #000040 1px;
 border-top: solid #000040 1px;
 border-bottom: solid #000020 1px;
 border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 4px 2px 1px rgba(0,0,0,0.8);
 -webkit-box-shadow: 0px 4px 2px 1px rgba(0,0,0,0.8);
 -moz-box-shadow: 0px 4px 2px 1px rgba(0,0,0,0.8);
}

.mainNavBut {
 /* x */
 display: inline-block;
 position: relative;
color:rgba(210, 180, 210, 1.0);
 text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.0), 0px -1px 3px rgba(255, 255, 255, 1.0);
 font-family: 'NotoEmoji', Helvetica, sans-serif;
 font-size: 16px;
 font-weight: bold;
 padding: 5px;
 margin: 0px;


 border-radius: 1px;
}
.mainNavBut a {
 /* x */
 display: inline-block;
 position: relative;
color:rgba(210, 180, 210, 1.0);
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 1px 0px rgba(0, 0, 0, 0.9), 0px -1px 0px rgba(255, 255, 255, 1.0);
 font-family: 'NotoEmoji', Helvetica, sans-serif;
 font-size: 16px;
 font-weight: bold;

}

.mainNavEm {
 /* x */
 display: inline-block;
 position: relative;
 color: rgba(51, 51, 51, 1.0);
 text-shadow: 0px 2px 4px rgba(0, 0, 0, 1.0), 0px -1px 3px rgba(255, 255, 255, 1.0);
 font-family: 'NotoEmoji', Helvetica, sans-serif;
 font-size: 1.1em;

 padding: 5px;
 margin: 0px;


 border-radius: 1px;
}
.mainNavEm a {
 /* x */
 display: inline-block;
 position: relative;
 color: rgba(51, 51, 51, 1.0);
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9), 0px 1px 0px rgba(0, 0, 0, 0.9), 0px -1px 0px rgba(255, 255, 255, 1.0);
 font-family: 'NotoEmoji', Helvetica, sans-serif;
 font-size: 1.1em;


}

#mainWrap {
 /* Is a div that wraps <main></main>*/
 display: block;
 position: relative;
 width: 1280px;
 max-width: 99%;
 text-align: center;
 background-image: url('');
 background-repeat: repeat;
 background-position: 0 0;
 background-attachment: fixed;


 z-index: 20;
 top: 0px;
 margin: auto;
 padding: 0px;
/*  box-shadow: 0px 5px 9px 5px rgba(0,0,0,0.8);
 -webkit-box-shadow: 0px 5px 9px 5px rgba(0,0,0,0.8);
 -moz-box-shadow: 0px 5px 9px 5px rgba(0,0,0,0.8);
 border-radius: 0px 0px 5% 5%; */

}
.mainunder {
 /* This is <main></main> */


}



#ArtHead {
 position: relative;
 WIDTH: 100%;
 text-align: center;
 max-width: 99%;
 z-index: 80 !important;
 margin: auto;
 padding: 0px;
text-shadow: 0px 2px 5px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.8), 0px -1px 3px rgba(255,255,255,0.9);
color:rgba(210, 180, 210, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 20px;
}

.FrontPageArtFig {
 display: inline-block;
 position: relative;
 float: center;
 margin: 2px;
 padding: 5px;
 z-index: 30;
 WIDTH: 98%;
 max-width: 98%;
 height: auto;
 text-align: center;
 /*background: rgba(225,225,225,1);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 4px 1px rgba(0,0,0,0.5);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);*/
}

.MainArtFig {
 display: inline-block;
 position: relative;
 float: right;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}
.NeArtFig {
 display: inline-block;
 position: relative;
 float: right;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}
.NwArtFig {
 display: inline-block;
 position: relative;
 float: left;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}

.SeArtFig {
 display: inline-block;
 position: relative;
 float: right;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}

.SwArtFig {
 display: inline-block;
 position: relative;
 float: left;
 margin: 10px;
 padding: 10px;
 z-index: 30;
 WIDTH: 92%;
 max-width: 50%;
 height: auto;
 text-align: center;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
}

.LinkArtFig {
 position: relative;
 z-index: 10;
 WIDTH: 92%;
 text-align: center;
 margin: auto;

}

.Gal {
 width: 99%;
 display: inline-block;
 text-align: center;
}

.GalArtFig {
 position: relative;
 text-align: center;
 padding: 8px;
 margin-top: 15px;
 max-width: 280px;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: 0px 4px 2px 3px rgba(0,0,0,1.0);
 -webkit-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);
 -moz-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);

}
.Prof {
 width: 99%;
 display: inline-block;
 text-align: center;
}

.ProfArtFig {
 display: inline-block;
 position: relative;
 z-index: 99;
 top: -150px;
 left: 0;
 text-align: center;
 padding: 8px;
 max-width: 200px;
 background: rgba(225,225,225,0.9);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 9px;
 box-shadow: 0px 4px 2px 3px rgba(0,0,0,1.0);
 -webkit-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);
 -moz-box-shadow: 0px 4px 5px 3px rgba(0,0,0,1.0);

}


.LinkFig {
    position: relative;
 text-align: center;
 padding: 5px;
 margin-top: 10px;
 max-width: 175px;
 height: 125px;
 background: rgba(225,225,225,0.6);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 3px;
 box-shadow: 0px 4px 2px 3px rgba(0,0,0,0.9);
 -webkit-box-shadow: 0px 4px 5px 3px rgba(0,0,0,0.9);
 -moz-box-shadow: 0px 4px 5px 3px rgba(0,0,0,0.9);

}


.btn {
  display: inline-block;
  background: #C0C0C0;
  width: 35px;
  height: 35px;
  background-image: -webkit-linear-gradient(top, #C0C0C0, #666666);
  background-image: -moz-linear-gradient(top, #C0C0C0, #666666);
  background-image: -ms-linear-gradient(top, #C0C0C0, #666666);
  background-image: -o-linear-gradient(top, #C0C0C0, #666666);
  background-image: linear-gradient(to bottom, #C0C0C0, #666666);
  -webkit-border-radius: 40%;
  -moz-border-radius: 40%;
  border-radius: 40%;
  -webkit-box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  box-shadow: 0px 0px 3px #000000;
 font-family: 'NotoEmoji', Helvetica, sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 12px;
  padding: 5px;
  border: solid #333333 1px;
  text-decoration: none;
  text-align: center;
  vertical-align: bottom;
  margin: 0 auto;
}

.btn:hover {
  background: #666666;
  background-image: -webkit-linear-gradient(top, #B0B0B0, #606060);
  background-image: -moz-linear-gradient(top, #B0B0B0, #606060);
  background-image: -ms-linear-gradient(top, #B0B0B0, #606060);
  background-image: -o-linear-gradient(top, #B0B0B0, #606060);
  background-image: linear-gradient(to bottom, #B0B0B0, #606060);
  border: solid #000000 1px;
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8) inset;
  -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8) inset;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.8) inset;
  color: #000000;
  font-size: 12px;
  text-decoration: none;
}



.form {
 display: inline-block;
 position: relative;
 text-align: center;
 width: 500px;
 max-width: 95%;
 height: auto;
 background: rgba(225,225,225,0.6);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 border-radius: 11px;
 padding: 10px;
 margin: auto;
}

.form-blok {
 display: inline-block;
 position: relative;
 text-align: left;
 float: right;
 width: 99%;
 max-width: 99%;
 padding: 0px;
}

#gd-image {
 text-align: center;
 display: inline-block;
 /*justify-content:center;*/
 position: relative;
 width: 100%;
 max-width: 100%;
 /*border: solid #000000 1px;*/
}

#gd-image img {
 object-fit: contain;
 width: 100%;
 max-width: 100%;
 height: 100px;
}
#showtry {
 color:rgba(0, 0, 0, 1.0);
font-family: 'SourceCodePro', Helvetica, sans-serif;
 font-size: 1.1em;
 font-weight: bold;

}
.form-field {
 display: inline-block;
 position: relative;
 text-align: left;
 float: right;
 width: 400px;
 max-width: 99%;
 height: auto;
 background: #FFFFFF !important;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 border-radius: 3px;
 padding: 3px;
 margin: auto;
}

form h3 {
 text-align: center;

}




.review {
 display: inline-block;
 position: relative;
 text-align: center;
 width: 95%;
 max-width: 95%;
 height: auto;
 background: #FFF;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 border-radius: 11px;
 padding: 5px;
 margin: auto;

}

.reviewHeading {
 display: inline-block;
 position: relative;
 width: 100%;
 max-width: 100%;
 text-align: left;
 padding: 10px;
 margin: auto;

}

.reviewHeadCell {
 display: inline-block;
 position: relative;
 width: 50%;
 max-width: 50%;
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 12px;
 text-align: left !important;
 float: left !important;
 padding: 0px;
 margin: auto;

}

.reviewBody {
 display: inline-block;
 position: relative;
 width: 100%;
 max-width: 100%;
 text-align: left;
 padding: 5px;
 margin: auto;

}

.reviewCell {
 display: inline-block;
 position: relative;
 color: rgba(0, 0, 0, 1.0);
 width: 100%;
 max-width: 100%;
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 14px;
 text-align: left;
 padding: 10px, 10px, 10px, 10px;
 margin: auto;

}

.reviewr {
 display: inline-block;
 position: relative;
 text-align: right;
 width: 90%;
 max-width: 90%;
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 12px;
 padding: 10px;
 margin: auto;
}



.divTableRow {
 display: inline-block;
 position: relative;
 max-width: 100%;
 text-align: center;
 padding: 0;
 margin: auto;

}

.divTableCell {
	 display: inline-block;
 position: relative;
 max-width: 25%;
 text-align: center;
 padding: 3px;
 margin: auto;
}





figure {
    position: relative;
    display: inline-block !important;
}

.GalImgWrap {
  position: relative;
  text-align: center;
  color: white;
}
.ProfImgWrap {
  position: relative;
  text-align: center;
  color: white;
}

#LinkImgWrap {
  display: block !important;
  position: relative;
  text-align: center;
  color: white;
  margin: 2px;
  padding: 1px;
}

#FrntPgImg {
 display: inline-block;
 width: 96% !important;
 max-width: 600px;
 height: auto;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}

#LinkPgImg {
 display: inline-block;
 width: 96% !important;
 max-width: 150px;
 height: auto;
 background-color: #000000;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}

.GalPgImg {
 display: inline-block;
 width: 95% !important;
 max-width: 350px;
 height: auto;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}
.ProfPgImg {
 display: inline-block;
 width: 95% !important;
 max-width: 350px;
 height: auto;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
}

#LinkArtImg {
 display: inline-block;
 width: 95% !important;
 max-width: 750px;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;
 padding: 0px;
 margin: auto;
 box-shadow: 5px 4px 2px 3px rgba(0,0,0,0.9) inset;
 -webkit-box-shadow: 5px 4px 5px 3px rgba(0,0,0,0.9) inset;
 -moz-box-shadow: 5px 4px 5px 3px rgba(0,0,0,0.9) inset;


}
#FrntPgBotImg {
  display: inline-block;
  width: 500px;
  max-width: 90%;
  height: auto;
  padding: 0px;
  margin: auto;
}
#FpFigCap {
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 20px;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}
.GalImgDate {
  display: inline-block;
  position: absolute;
  bottom: 25px;
  right: 20px;
}
.GalFigCap {
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 20px;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}
.ProfImgDate {
  display: inline-block;
  position: absolute;
  bottom: 25px;
  right: 20px;
}
.ProfFigCap {
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 20px;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}

#LinkFigCap {
 display: block;
 position: relative;
 color: rgba(0, 0, 0, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 2vmin;
 text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
}
#ArtFoot {
	display: inline-block;
	position: relative;
	width: 100%;
 color:rgba(210, 180, 210, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 12px;
 text-align: right;
 margin-right: 20px;
 padding: 10px;
}

 /* xsdsdsdsdsdsdsdsdsdsdsdsds */
 /* Social Media Buttons Below>*/
.shares {
  display: inline-block;
  position: relative;
  vertical-align: top !important;
  padding: 3px;
  margin: 3px;
}

#lnkn {
  display: inline-block;
  position: relative;
vertical-align: top !important;
  padding: 0px;
  margin: auto;
}
#pint {
  display: inline-block;
  position: relative;
  vertical-align: top !important;
  padding: 0px;
  margin: auto;
}

.twitter-share-button {
	vertical-align: top !important;
}
 /* End Social Media Buttons*/


footer #MainFoot {
 color: rgba(0, 0, 0, 0.9);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 10px;
}
#BodyFoot {
   display: inline-block;
  position: relative;
 color: rgba(128,128,128,1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 10px;
 width: 350px;
 max-width: 99%;
 text-decoration: none;
 background: rgba(0, 0, 0, 1.0);
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #dddddd 1px;
 border-bottom: solid #444444 1px;
 border-radius: 27px;
 box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -webkit-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 -moz-box-shadow: -2px 3px 7px 3px rgba(0,0,0,0.8);
 padding: 9px;
 text-shadow: 0px -1px 0px rgba(192,192,192,1.0);
}

#BodyFoot a {
 color: rgba(128,128,128,1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 10px;
 text-decoration: none;
 text-shadow: 0px -1px 0px rgba(192,192,192,1.0);
}
#testOne {
 display: inline-block;
 width: 90% !important;
 max-width: 90%;
 height: auto;
 background: -moz-linear-gradient(top, rgba(153,0,0,0.75) 0%, rgba(255,0,51,0.4) 50%, rgba(0,0,0,0.75) 100%);
 background: -webkit-linear-gradient(top, rgba(153,0,0,0.75) 0%,rgba(255,0,51,0.4) 50%,rgba(0,0,0,0.75) 100%);
 background: linear-gradient(to bottom, rgba(153,0,0,0.75) 0%,rgba(255,0,51,0.4) 50%,rgba(0,0,0,0.75) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf990000', endColorstr='#bf000000',GradientType=0 );
 color: #C0C0C0;
 border-left: solid #cc0033 1px !important;
 border-right: solid #ff0033 1px !important;
 border-top: solid #ff0033 1px !important;
 border-bottom: solid #cc0033 1px !important;
 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;
 box-shadow: -2px 2px 2px 1px rgba(153,0,0,0.9), 2px -2px 2px 1px rgba(204,0,51,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(204,0,51,1.0) inset, -2px 2px 2px 1px rgba(153,0,0,0.9) inset;
 -webkit-box-shadow: -2px 2px 2px 1px rgba(153,0,0,0.9), 2px -2px 2px 1px rgba(204,0,51,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(204,0,51,1.0) inset, -2px 2px 2px 1px rgba(153,0,0,0.9) inset;
 -moz-box-shadow: -2px 2px 2px 1px rgba(153,0,0,0.9), 2px -2px 2px 1px rgba(204,0,51,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(204,0,51,1.0) inset, -2px 2px 2px 1px rgba(153,0,0,0.9) inset;
 text-shadow: 1px 2px 2px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.6);
 padding: 0px;
 margin: auto;
}



/* Here starts the section for the old custom-made reviews */
.customReviews {

 display: inline-block;
 position: relative;

 width: 95%;
 max-width: 95%;
 height: auto;
 background: #FFF;
 border-left: solid #666666 1px;
 border-right: solid #666666 1px;
 border-top: solid #444444 1px;
 border-bottom: solid #FFFFFF 1px;

 border-radius: 11px;
 padding: 10px;
 margin: 0;

}

.custreview_item {
	 display: inline-block;
 position: relative;
 font-family: 'RedHatMono', Helvetica, sans-serif;
font-size: 1.3rem;
list-style: none;
-webkit-font-smoothing: antialiased;
display: block;
border-bottom: solid 1px #d6d6d6;
padding: 25px 0 30px 0;
box-sizing: border-box;
}

.custreview_top_bar {
display: inline-block;
 position: relative;
 font-family: 'RedHatMono', Helvetica, sans-serif;
font-size: 1.3rem;
list-style: none;
-webkit-font-smoothing: antialiased;
display: block;
margin-bottom: 12px;
box-sizing: border-box;
text-align: left;
}

.custreview_avatar_container {


}

.custreview_details {


}

.custreview_title {


}

.custreview_item_title {


}

.star_rating_small {


}

.custreview_rating {


}

.star_value star_50 {


}

.custreview_date {


}

.custreview_comment {


}

.custreviewBody {


}

.custreview_breakdown horz {


}

.breakdown_row {


}

.breakdown_label {


}

.breakdown_rating {


}

.star_rating_small {


}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}



.ChatArtFig {
display: inline-block;
 position: relative;
 z-index: 1;
 WIDTH: 1280px;
 max-width: 99%;
 text-align: center;
 align: left;
 margin: 0 auto;
 padding: 0px;
 background: -moz-linear-gradient(top, rgba(0,0,153,0.75) 0%,rgba(51,0,255,0.4) 50%,rgba(0,0,0,0.75) 100%);
 background: -webkit-linear-gradient(top, rgba(0,0,153,0.75) 0%,rgba(51,0,255,0.4) 50%,rgba(0,0,0,0.75) 100%);
 background: linear-gradient(to bottom, rgba(0,0,153,0.75) 0%,rgba(51,0,255,0.4) 50%,rgba(0,0,0,0.75) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf990000', endColorstr='#bf000000',GradientType=0 );
 //color: #C0C0C0;
 border-left: solid #3300ff 1px !important;
 border-right: solid #3300ff 1px !important;
 border-top: solid #3300ff 1px !important;
 border-bottom: solid #3300cc 1px !important;
 border-radius: 3px 20px 3px 20px;
 -moz-border-radius: 3px 20px 3px 20px;
 -webkit-border-radius: 3px 20px 3px 20px;
 -khtml-border-radius: 3px 20px 3px 20px;
 box-shadow: -2px 2px 2px 1px rgba(0,0,153,0.9), 2px -2px 2px 1px rgba(51,0,204,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(51,0,204,1.0) inset, -2px 2px 2px 1px rgba(0,0,153,0.9) inset;
 -webkit-box-shadow: -2px 2px 2px 1px rgba(0,0,153,0.9), 2px -2px 2px 1px rgba(51,0,204,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(51,0,204,1.0) inset, -2px 2px 2px 1px rgba(0,0,153,0.9) inset;
 -moz-box-shadow: -2px 2px 2px 1px rgba(0,0,153,0.9), 2px -2px 2px 1px rgba(51,0,204,1.0), -3px 3px 3px 4px rgba(0,0,0,0.8), 2px -2px 2px 1px rgba(51,0,204,1.0) inset, -2px 2px 2px 1px rgba(0,0,153,0.9) inset;
 text-shadow: 1px 1px 2px rgba(0,0,0,0.9), 0px 1px 3px rgba(0,0,0,0.8);
 backdrop-filter: blur(15px);
 -webkit-backdrop-filter: blur(15px);
}

/* The chat's other two figure sections (the reorg split the chat into whoson / log / input).
   Kept as light full-width wrappers — the inner .council-presence / .council-composer styles (in
   chatroom.php's <style>) do the visual work; these just size/center the figure like .ChatArtFig. */
.WhosonArtFig, .ChatinputArtFig {
 display: block;
 width: 1280px;
 max-width: 99%;
 margin: 0 auto;
 padding: 0;
 text-align: left;
}




#ajaxForm {
  display: flex;
  flex-direction:row;
  position: relative;
  text-align: left;
  width: 45%;
  height: 25px;
  //overflow: hidden;
  border-radius: 5px;
  //align: left;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.6);
  border-left: solid #666666 1px;
  border-right: solid #666666 1px;
  border-top: solid #444444 1px;
  border-bottom: solid #FFFFFF 1px;
  padding: 0px;
  margin: 10px;
  vertical-align: baseline;

}

#ChatIn {
  display: inline-block;
  position: relative;
  align: left;
  height: 25px;
  max-width: 99%;
    /* Tell the input to use all the available space */
  flex-grow: 2;
  /* And hide the input's outline, so the form looks like the outline */
  border: none;
}

#ChatIn:focus {
  /* removing the input focus blue box. Put this on the form if you like. */


  outline: none;
}


#SayChar {
  display: inline-block;
  position: relative;

  color: rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
  font-size: 14px;
  text-shadow: 1px 2px 2px rgba(0,0,0,0.8), 0px 2px 3px rgba(255,255,255,0.6);
 vertical-align: baseline;
}
#btnSend {
  //border-radius: 5px;
  border:1px solid grey;
  background: grey;
  color: white;
  height: 25px;
}




.MojiPop {
  position: relative;
  display: inline-block;
  text-align: center;
   //vertical-align: middle;

  margin: 0 auto;
  transition: width 0.3s ease, border-radius 0.3s ease, padding-bottom 0.3s ease;
  padding: 0px;
  height: 25px;
}

/* Style the tabs */
.MojiPop .tab {
 display: inline-block;
 position: relative;
  overflow: hidden;
  ///border: 1px solid #ccc;
  background-color: rgba(255,255,255,1.0);

  width: 100%;
  max-width: 150px;
  height: 25px;
  //vertical-align: middle;
  margin: 0 auto;
  padding: 0px;
}


.MojiPopBtn {
  z-index: 40;
  padding: 2px 0px;

  //border-bottom: solid #000000 1px !important;
  border-radius: 5px;
  //margin : 2px;
  background-color: rgba(0,0,0,0.0);
    //text-shadow: 1px 2px 2px rgba(0,0,0,0.9), 0px 2px 3px rgba(255,255,255,0.8);

  //color: rgba(255, 255, 255, 1.0);
 font-family: 'NotoEmoji', Helvetica, sans-serif;
  font-size: 14px;
  //vertical-align: bottom;
    text-align: center;

}



/* UsrRoomPop Content (Hidden by Default) */
.MojiPopCont {
  display: none;
  position: absolute;
  background-color: #ffffff;
  text-align: center;
  //vertical-align: middle;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  border-radius: 15px;

  opacity: 0.9;
  transition: width 0.3s ease, border-radius 0.3s ease;
  z-index: 50;
}

/* Links inside the UsrRoomPop */
.MojiPopCont a {
  display: inline-block;
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
  //overflow: hidden;
  background-color: rgba(0,0,0,0.0);
  border-radius: 5px;
  vertical-align: bottom;
  padding: 1px;
}

/* Change color of UsrRoomPop links on hover */
.MojiPopCont a:hover {
background-color: #DDDDDD;
text-decoration: none;
//overflow: hidden;
transition: background-color 0.7s ease;
}

/* Show the UsrRoomPop menu on hover */
.MojiPop:hover .MojiPopCont {
  display: block;

}
.MojiPop:hover .MojiPopCont:after {
  display: block;
  transform: translateY(-50%) translateX(-50%);
  transition: all 0.3s 0.5s ease;
  cursor: pointer;
  cursor: hand;
}





/* Style the buttons that are used to open the tab content */
.tab .MojiPopBtn {
  background-color: #FFFFFF;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0px 2px;
  width: 25px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.MojiPopBtn:hover {
  background-color: rgba(0, 0, 0, 0.4);
}


/* Style the tab content */
.tabcontent {

  display: none;
  padding: 0px;
  width: 100%;
  margin: 0 auto;
}

#view_ajax {
  display: inline-block;
  position: relative;
  overflow: auto;
  WIDTH: 99%;
  max-width: 1280px;
  height: 300px;
  text-align: left;
  color: rgba(0, 0, 0, 0.5);
  margin: 2px;
  margin-top: 20px;
  word-wrap: normal;

}

.ChatSaid {
 display: inline-block;
 z-index: 1;
 color: rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
 font-size: 14px;
 text-shadow: 1px 2px 2px rgba(0,0,0,0.9), 0px 2px 3px rgba(255,255,255,0.9);
 //overflow: hidden;
   WIDTH: 99%;
  max-width: 1250px;
 word-wrap: break-word;
}


.UsrRoomPop {
  position: relative;
  display: inline-block;
  text-align: center;
  //margin: 0 auto;
  transition: width 0.3s ease, border-radius 0.3s ease, padding-bottom 0.3s ease;
}
.UsrRoomPop-Btn {
  z-index: 10;
  padding: 0px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.0);
   text-shadow: 1px 2px 2px rgba(0,0,0,0.9), 0px 2px 3px rgba(255,255,255,0.8);

  color: rgba(255, 255, 255, 1.0);
 font-family: 'RedHatMono', Helvetica, sans-serif;
}



/* UsrRoomPop Content (Hidden by Default) */
.UsrRoomPop-Cont {
  display: none;
  position: absolute;
  background-color: #ffffff;
  text-align: center;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  border-radius: 15px;

  opacity: 0.9;
  transition: width 0.3s ease, border-radius 0.3s ease, padding-bottom 0.3s ease;
  z-index: 75;
}

/* Links inside the UsrRoomPop */
.UsrRoomPop-Cont a {
  display: block;
  position: relative;
  color: #fa434b;
  text-decoration: none;
  overflow: hidden;
  padding: 5px;
  border-radius: 5px;
}

/* Change color of UsrRoomPop links on hover */
.UsrRoomPop-Cont a:hover {
background-color: #C0C0C0;
text-decoration: none;
overflow: hidden;
transition: background-color 0.7s ease;
}
.UsrRoomPop-Cont ul {
  list-style: none;
  text-decoration: none;
  overflow: hidden;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
.UsrRoomPop-Cont li {
    list-style: none;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
}
/* Show the UsrRoomPop menu on hover */
.UsrRoomPop:hover .UsrRoomPop-Cont {
  display: block;
  z-index: 50;
}
.UsrRoomPop:hover .UsrRoomPop-Cont:after {
  display: block;
  transform: translateY(-50%) translateX(-50%);
  transition: all 0.3s 0.5s ease;
  cursor: pointer;
  cursor: hand;
}
/* Change the background color of the UsrRoomPop button when the UsrRoomPop content is shown */
.UsrRoomPop:hover .UsrRoomPop-Btn {
  background-color: #000;
}



/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 0px;
  border: none;
  cursor: pointer;
  text-align: center;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  float: left;
  text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  right:0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* Account menu — the header account dropdown (replaces the bare logout link).
   Pure-CSS reveal on hover + focus-within (same no-JS pattern as .UsrRoomPop),
   reusing the .dropdown-content scaffold above for the panel look. */
.acctdrop {
  position: relative;
  display: inline-block;
}
.acctdrop .acctbtn {
  background: transparent;
  border: none;
  padding: 0;          /* the .mainNavBut wrapper supplies the 5px — keeps ✦ exactly where the old link sat */
  margin: 0;
  cursor: pointer;
  color: rgba(210, 180, 210, 1.0);
  text-shadow: 0px 1px 2px rgba(0,0,0,0.9), 0px 1px 0px rgba(0,0,0,0.9), 0px -1px 0px rgba(255,255,255,1.0);
  font-family: 'NotoEmoji', Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}
/* STACKING FIX — why this is needed, so it isn't "simplified" away later:
   1. #topnav animates `transform: translateY()` with `forwards`, so a transform PERSISTS. A
      non-none transform CREATES A STACKING CONTEXT, which traps any z-index on the dropdown
      INSIDE #topnav — no value, however large, could lift it above page content.
   2. #topsec declares `z-index: 100` but has NO `position`, so that z-index is INERT.
   Result before this fix: the menu painted below #ArtHead (z-index:80 !important), .ProfArtFig
   (99) and the admin editNav chrome — visible but unclickable, worst for siteadmin (most chrome).
   The fix is to elevate the HEADER's own context (the ancestor), not the menu. 500 clears all
   page content (max 100) and stays well under the notify/call overlays (99999). */
#topsec {
  position: relative;
  z-index: 500;
  overflow: visible;   /* never clip the dropdown out of the header */
}
#topnav { overflow: visible; }

.acctdrop .dropdown-content.acctmenu {
  top: 100%;           /* flush under the trigger — no hover gap to fall through */
  right: 0;
  left: auto;
  z-index: 501;
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
}
.acctdrop:hover .dropdown-content.acctmenu,
.acctdrop:focus-within .dropdown-content.acctmenu {
  display: block;
}

/* Article action bar — share intents (every reader) + inline edit (staff only).
   Lives in the public stylesheet because share shows to anonymous readers too. */
.artActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 1.4em 0 0.6em;
  padding: 8px 2px;
  border-top: 1px solid rgba(210,180,210,0.18);
}
.artShare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.artShareLbl {
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-right: 2px;
}
.artStaff { margin-left: auto; }
.artShareBtn {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.8em;
  line-height: 1.5;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(210,180,210,1.0);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(210,180,210,0.35);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.artShareBtn:hover, .artShareBtn:focus {
  background: rgba(210,180,210,0.18);
  border-color: rgba(210,180,210,0.6);
}
.artEditBtn {
  font-size: 1em;
  padding: 2px 12px;
}