@charset 'UTF-8';
/**
 * © 2010-2021 Higi Bigler (nullnulleins.ch). All rights reserved.
 * 
 * This file is part of glorya.
 *
 * glorya is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * glorya is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with glorya. If not, see <http://www.gnu.org/licenses/>.
 */

@import url('../../lib/mdi/css/materialdesignicons.min%EF%B9%96v=5.4.55.css');
@import url('../../lib/howler/ghowler.css');

:root {
  --main-bg-color: #FFF;
  --main-text-color: #271C02;
  --main-link-color: #676787;
  --selection-bg-color: #DD9;
  --alt-bg-color: #DDD;
  --alt2-bg-color: #BBB; /* for languagetabs? */
  --highlight-bg-color: #FFB;
  --input-text-color: #000;
  --input-placeholder-color: #999;
  --input-decoration-color: #999;
  --input-bg-color: #FFF;
  --input-nested-bg-color: #DDD;
  --input-disabled-text-color: #444;
  --input-disabled-bg-color: transparent; /* #CCC; */
  --theme-color-0: #474767;
  --theme-color-1: #676787;
}
:root body.darkmode {
  --main-bg-color: #333;
  --main-text-color: #DDD;
  --main-link-color: #87A7A7;
  --selection-bg-color: #773;
  --alt-bg-color: #444;
  --alt2-bg-color: #333;
  --highlight-bg-color: #442;
  --input-text-color: #FFF;
  --input-placeholder-color: #AAA;
  --input-decoration-color: #AAA;
  --input-bg-color: #666;
  --input-nested-bg-color: #444;
  --input-disabled-text-color: #CCC;
  --input-disabled-bg-color: transparent; /* #555; */
  --theme-color-0: #373747;
  --theme-color-1: #474757;
}

#gloryaadminbar, #gloryanavigation, #gloryawwwlogin, #gloryadialog { font: normal normal .8725rem/1.125 'Open Sans', Arial, sans-serif !important; letter-spacing: 0 !important; }
#gloryaadminbar { text-align: center !important; margin: 0; padding: 0; width: 50px; background-color: var(--theme-color-0); color: #FFF; position: fixed; top: 0; bottom: 0; left: 0; z-index: 110; box-shadow: inset -15px 0px 15px -15px rgba(0,0,0,0.35); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
#gloryaadminbar::-webkit-scrollbar { width: 0 !important; height: 0 !important; }

#gloryaadminbar > div { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-height: 100%; }
#gloryaadminbar > div > div:first-child { width: 100%; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-flex-basis: auto; flex-basis: auto; }
#gloryaadminbar ul { padding: 0 10px 8px 8px; margin: 0; list-style-type: none; }
#gloryaadminbar > div > div:first-child > ul { padding: .5em 10px 0 8px ; }
#gloryaadminbar li { padding: .5em 0; margin: 0; list-style-type: none; }
#gloryaadminbar a { text-decoration: none; color: #676787; outline: 0; }
#gloryaadminbar a.imagebutton { width: 100%; height: 1.55rem; margin: 0; }
#gloryaadminbar a.imagebutton.active { opacity: 1; }
#gloryaadminbar a.imagebutton.active:after { position: absolute; content: ''; display: block; width: 0; height: 100%; border-left: 4px solid var(--selection-bg-color); left: -8px; }
/* if there is only the websitelink we just hide it */
#gloryaadminbar li.websitelink:first-child:last-child { display: none; }

#gloryalanguagemenu ul, #gloryalanguagemenu li { padding: 0; }
#gloryalanguagemenu li { margin-top: -1px; }
#gloryalanguagemenu li:first-child { margin-top: 0; }
#gloryalanguagemenu a { display: block; font-weight: 600; padding: 2px 0; opacity: .7; border: 1px solid #FFF; background-color: #FFF; }
#gloryalanguagemenu a:hover { background-color: #FFB; opacity: 1; }
#gloryalanguagemenu ul:hover a.active { background-color: #FFF; opacity: .7; }
#gloryalanguagemenu a.active { background-color: #FFB; opacity: 1; }
#gloryalanguagemenu a.active:hover { background-color: #FFB !important; opacity: 1 !important; }

/* navigation */
#gloryanavigation { margin: 0; padding: 0; background-color: var(--theme-color-1); border-bottom: none; width: 310px; position: fixed; z-index: 109; left: -320px; top: 0; transition: left .3s; bottom: 0; overflow-y: auto; }
#gloryanavigation { /*box-shadow: inset -15px 0px 15px -15px rgba(0,0,0,.25);*/ box-shadow: 0 0 15px 0 rgba(0,0,0,0.5); }
#gloryanavigation > div { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
#gloryanavigation div.navigationwrapper { padding: 1em 0 0 50px; box-sizing: border-box; /*max-height: 100vh;*/ text-align: left; }
body.showgloryanavigation #gloryanavigation { left: 0px; }
#gloryanavigationcover { transition: opacity .3s ease-in-out; opacity: 0; position: fixed; z-index: 100; background-color: var(--main-bg-color); left: 0; top: 0; right: 0; bottom: 0; }
body.showgloryanavigation #gloryanavigationcover { -webkit-animation: coverfadein .3s; animation: coverfadein .3s; opacity: .75; }
@-webkit-keyframes coverfadein { 0% { opacity: 0; } 100% { opacity: .75; } }
@keyframes coverfadein { 0% { opacity: 0;} 100% { opacity: .75; } }

/* navigation pinned */
#gloryanavigation div.navigationactions { display: none; }
@media only screen and (min-width: 940px) {
	body:not(.wwweditor) #gloryanavigation div.navigationactions { display: block; }
	body.fullsize #gloryanavigation div.navigationwrapper { /*max-height: calc(100vh - 40px);*/ }
	body.fullsize.gloryanavigationpinned:not(.gloryanavigationhidepin) { margin-left: 310px; }
	body.fullsize.gloryanavigationpinned:not(.gloryanavigationhidepin) #gloryanavigationcover { display: none !important; }
	body.fullsize.gloryanavigationpinned:not(.gloryanavigationhidepin) #gloryanavigation { left: 0 !important; }
	#gloryanavigation div.navigationactions { padding: 0 .5em .5em; text-align: right; }
	#gloryanavigation div.navigationactions a.imagebutton { display: inline-block; }
	#gloryanavigation div.navigationactions a.imagebutton:before { font-size: 1.125rem; }
	body.fullsize.gloryanavigationpinned.gloryanavigationhidepin #gloryanavigation div.navigationactions { display: none; }
	body.fullsize.gloryanavigationpinned:not(.gloryanavigationhidepin) li.navigationlink a { cursor: not-allowed; opacity: 1; }
	body.fullsize.gloryanavigationpinned:not(.gloryanavigationhidepin) li.navigationlink a:after { position: absolute; content: ''; display: block; width: 0; height: 100%; border-left: 4px solid var(--selection-bg-color); left: -8px; }
}

#gloryanavigation ul { list-style: none; margin: 0; padding: 0; }
#gloryanavigation ul.navigation { margin-bottom: 12px; }
#gloryanavigation li.parent.expanded { background-color: rgba(255,255,255,.075); margin-bottom: .5em; }
#gloryanavigation li { list-style: none; margin: 0; padding: 0; }
#gloryanavigation li span { display: block; overflow: hidden; text-overflow: ellipsis; }
#gloryanavigation .navigation a { display: block; padding: .35em 1em .35em 1.35em; margin-bottom: 2px; display: block; color: #FFF; opacity: .7; position: relative; text-transform: uppercase; text-decoration: none; font-style: normal; cursor: pointer; }
#gloryanavigation .navigation a.active, #gloryanavigation .navigation a:hover, #gloryanavigation .navigation a:active, #gloryanavigation .navigation a:focus { opacity: 1; background-color: rgba(255,255,255,.1); font-style: normal; }
#gloryanavigation .navigation a.active { opacity: 1; }
#gloryanavigation .navigation a.active:before { content: ''; display: block; height: 100%; width: 0; position: absolute; left: 0; top: 0; border-left: 4px solid var(--selection-bg-color); }
#gloryanavigation .navigation li li a { padding-left: 2.7em; margin-bottom: 0; }
#gloryanavigation .navigation li li li a { padding-left: 4.05em; }
#gloryanavigation .navigation li li li li a { padding-left: 5.45em; }

#gloryanavigation .navigation a.parent:after { content: ''; width: 0; height: 0; border-left: .55em solid #FFF; border-bottom: .4em solid transparent; border-top: .4em solid transparent; position: absolute; right: .75em; top: 50%; margin: -5px 0 0; transition: all .4s; }
#gloryanavigation .navigation li.expanded > a.parent:after { transform: rotate(90deg); }
body.showgloryanavigation .imagebutton.navigation { opacity: 1; }

#gloryaadminbar ul.toggles { padding: 0; display: none; }
body.wwweditor #gloryaadminbar ul.toggles { display: block; }
#gloryaadminbar ul.toggles li { padding: 8px 0 0; }
.gloryaadmintoggle a { display: block; background-color: var(--selection-bg-color); height: 12px; border-radius: 6px; position: relative; width: 22px; margin: 1.3rem auto 0; transition: background .3s; }
.gloryaadmintoggle.toggleconrols a:before { content: '\F03EB'; }
.gloryaadmintoggle.toggleofflinecontent a:before { content: '\F01E8'; }
.gloryaadmintoggle a:after { content: ''; width: 8px; height: 8px; border-radius: 4px; background-color: var(--theme-color-0); display: block; position: absolute; top: 2px; left: 12px; transition: left .3s; }
.gloryaadmintoggle.twostate_off a { background-color: var(--theme-color-1); }
.gloryaadmintoggle.twostate_off a:after { left: 2px; }

#gloryacover { background-color: rgba(255,255,255,.5); width: 100%; height: 100%; left: 0; top: 0; position: fixed; z-index: 100; -webkit-animation: fadein .5s; -moz-animation: fadein .5s; -ms-animation: fadein .5s; -o-animation: fadein .5s; animation: fadein .5s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/**/
#sm2-container { left: -500px; position: absolute; }

/* login */
#gloryawwwlogin { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0); -webkit-animation: showlogin 1s linear; animation: showlogin 1s linear; animation-fill-mode: forwards; z-index: 1000; }
@-webkit-keyframes showlogin { 100% { background-color: rgba(0,0,0,.5); } }
@keyframes showlogin { 100% { background-color: rgba(0,0,0,.5); } }
#gloryawwwlogin iframe { border: none; overflow: visible; width: 100%; background-color: transparent; height: 100%; position: absolute; top: -200px; transition: .5s top; }
#gloryawwwlogin iframe.show { top: 0; }

/* submit and validate */
@-webkit-keyframes submitting {
	0% { background-position: 0 0; }
	100% { background-position: 50px 50px; }
}
@keyframes submitting {
	0% { background-position: 0 0; }
	100% { background-position: 50px 50px; }
}
.submitting, tr.submitting td { background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0.25) 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25) 50%); z-index: 1; background-size: 25px 25px; overflow: hidden; -webkit-animation: submitting 2s linear infinite; animation: submitting 2s linear infinite; }
.reloading, tr.reloading td { background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 50%); z-index: 1; background-size: 25px 25px; overflow: hidden; -webkit-animation: submitting 2s linear infinite; animation: submitting 2s linear infinite; }
input.validating, select.validating, .validating { z-index: 1; overflow: hidden; }
input.validating, select.validating, .validating, .gcontenteditable.validating > .contenteditablewrapper { background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.05) 75%, rgba(0, 0, 0, 0.05) 50%); background-size: 25px 25px; -webkit-animation: submitting 2s linear infinite; animation: submitting 2s linear infinite; }
.gcontenteditable.validating { background-image: none; overflow: visible; z-index: auto; }

/**/
br[type=_moz] { display: none; }

/* gloryawwwcontrol */
div.gloryawwwcontrol { display: inline-block; padding: 1px; background-color: #FFF; }
div.gloryawwwcontrol a.gloryawwwcontrolsequenceselector img { cursor: move; }

/* contenteditable */
.gcontenteditable .contenteditablewrapper { margin: -3px -8px; position: relative; border: 2px dashed transparent; }
.gcontenteditable .contenteditablewrapperinner { padding: 1px 5px; }
.gcontenteditable.contentediting .contenteditablewrapperinner { text-transform: none; }
.gcontenteditable.contentediting .contenteditablewrapperinner:focus { outline: none; }
.gcontenteditable:hover .contenteditablewrapper, .gcontenteditable.validating .contenteditablewrapper, .gcontenteditable.contentediting .contenteditablewrapper { border: 2px dashed rgba(128,128,128,.25); }
.gcontenteditable.contentediting .contenteditablewrapper { border-color: rgba(128,128,128,.75); }
.gcontenteditable:hover .contenteditablewrapper { background-color: rgba(128,128,128,.05); }
.gcontenteditable:hover .contenteditablemenu { display: block; }

.contenteditablemenu { position: absolute; z-index: 2; padding: 1px; display: none; background-color: #FFF; right: 0; top: 0; }
.contenteditablemenu ul.imagebutton li { display: table-row; }
.contenteditablemenu .save, .contenteditablemenu .cancel { display: none; }
.gcontenteditable.contentediting .contenteditablemenu .edit { display: none; }
.gcontenteditable.contentediting .contenteditablemenu .cancel, .gcontenteditable.contentediting .contenteditablemenu .save { display: block; }

body.wwwcontrolshidden .contenteditablemenu { display: none !important; }
body.wwwcontrolshidden .gcontenteditable:hover .contenteditablewrapper, body.wwwcontrolshidden .gcontenteditable.validating .contenteditablewrapper, body.wwwcontrolshidden .gcontenteditable.contentediting .contenteditablewrapper { outline: none; }
body.wwwcontrolshidden .gcontenteditable:hover .contenteditablewrapper { background-color: transparent; }

/* icon-font */
a.imagebutton:before, div.submenutab > span:before, fieldset.searchform button span:after, .icon:before, a.url.https:after, form#login div.loginusername:before,
form#login div.loginpassword:before, div#lockinfo:before, .gloryaadmintoggle a:before, .dirtree a:before, #filelist td.dirname a:before,
.qq-uploader-selector.qq-uploader button.button:before,
.dirtree li.protected > a:after, #filelist td.dirname.folder.protected a:after, span.fileicon:before { content: ''; color: #FFF; font-family: 'Material Design Icons'; text-align: center; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; line-height: 1.35rem; font-size: 1.0625rem; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; font-weight: 400 !important; font-style: normal !important; }

.icon:before, form#login div.loginusername:before, form#login div.loginpassword:before { margin: 0 0 0 -1.125em; width: 1em; height: 1em; }
div#lockinfo:before { line-height: 1.35rem; }
.gloryaadmintoggle a:before { top: -1.175rem; line-height: 1rem; font-size: 1rem; height: auto; }

.dirtree a:before, #filelist td.dirname a:before { width: 1em; content: '\F024B'; color: var(--main-link-color); font-size: 1.5em; line-height: 1em; }
.dirtree a:before { color: #FFF; }
.dirtree li.protected > a:after, #filelist td.dirname.folder.protected a:after { content: '\F033E'; text-align: center; width: 1.6em; font-size: .8em; line-height: 2em; }
#filelist td.dirname.folder.protected a:before, .dirtree li.protected > a:before { opacity: .5 }
#filelist td.dirname a:before { top: .1em; left: .05em; }
#filelist td.dirname.folder.protected a:after { top: .2em; }
.dirtree li.open > a:before, .dirtree a:hover:before, #filelist td.dirname.folder a:hover:before { content: '\F0770'; }
.dirtree li.open > a::before, .dirtree a:hover::before { color: #FFB; }

/**/
.gloryawwwcontrolofflinecontent { background: repeating-linear-gradient(-45deg, rgba(0,0,0,.025), rgba(0,0,0,.025) 10px, rgba(0,0,0,.075) 10px, rgba(0,0,0,.075) 20px); }
.gloryawwwcontrolofflinecontent > :not(.gloryawwwcontrol) { opacity: .75; }
.checkerboard { background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white; background-repeat: repeat, repeat; background-position: 0px 0px, 5px 5px; transform-origin: 0 0 0; background-origin: padding-box, padding-box; background-clip: border-box, border-box; background-size: 10px 10px, 10px 10px; transition: none; transform: scaleX(1) scaleY(1) scaleZ(1); }

/* imagebuttons */
ul.imagebutton { display: flex; padding: 0; margin: 0; list-style: none; border-spacing: 0; }
ul.imagebutton > li { padding: 0 0 0 1px; margin: 0; background-image: none; }
ul.imagebutton > li:first-child { padding: 0; }
ul.imagebutton > li:before, ul.imagebutton > li:after { content: '' !important; display: none !important; }
a.imagebutton { cursor: pointer; opacity: .7; display: block; width: 1.3rem; height: 1.3rem; margin: 1px; background-color: #133B5E; padding: 0; border: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; position: relative; }
a.imagebutton span { display: none; }
a.imagebutton:hover, a.imagebutton:active, a.imagebutton:focus { opacity: 1; }
a.imagebutton.disabled, a.imagebutton.disabled:hover { opacity: .3; cursor: default; cursor: not-allowed; }

/* button-colors and icons */
a.imagebutton.edit { background-color: #E56717; }
a.imagebutton.edit:before { content: '\F03EB'; }
a.imagebutton.cancel { background-color: #FF0018; }
a.imagebutton.cancel:before { content: '\F0156'; }
a.imagebutton.retry { background-color: #008018; }
a.imagebutton.retry:before { content: '\F0453'; }
a.imagebutton.save { background-color: #008018; }
a.imagebutton.save:before { content: '\F0193'; }
a.imagebutton.duplicate { background-color: #008018; }
a.imagebutton.duplicate:before { content: '\F0191'; }
a.imagebutton.delete { background-color: #FF0018; }
a.imagebutton.delete:before { content: '\F05E8'; }
a.imagebutton.senduserpassword:before { content: '\F000B'; }
a.imagebutton.bulkdelete { background-color: #FF0018; }
a.imagebutton.bulkdelete:before { content: '\F10A5'; }
a.imagebutton.urlfield.url:before { content: '\F01E7'; }
a.imagebutton.forward:before { content: '\F0142'; }
a.imagebutton.skip-forward:before { content: '\F0601'; }
a.imagebutton.back:before { content: '\F0141'; }
a.imagebutton.skip-back:before { content: '\F0600'; }
a.imagebutton.add { background-color: #008018; }
a.imagebutton.add:before { content: '\F0415'; }
a.imagebutton.remove { background-color: #FF0018; }
a.imagebutton.remove:before { content: '\F0374'; }
a.imagebutton.export { background-color: #E56717; }
a.imagebutton.export:before, #exportformatlist > span:before { content: '\F01DA'; }
a.imagebutton.import { background-color: #E56717; }
a.imagebutton.import:before, #importformatlist > span:before { content: '\F0552'; }
a.imagebutton.bulkupload { background-color: #008018; }
a.imagebutton.bulkupload:before { content: '\F0334'; }
a.imagebutton.datefield.calendar:before { content: '\F00ED'; }
a.imagebutton.search.add:before { content: '\F0EF1'; }
a.imagebutton.search.remove:before { content: '\F0EEF'; }
a.imagebutton.search.saved, a.imagebutton.search.save { background-color: #E56717; }
a.imagebutton.search.saved:before { content: '\F0E16'; }
a.imagebutton.search.save:before { content: '\F00C4'; }
a.imagebutton.website:before { content: '\F01E7'; }
a.imagebutton.filemanager:before { content: '\F0259'; }
a.imagebutton.pagetitle.refresh:before { content: '\F0450'; }
a.imagebutton.colorpicker:before { content: '\F03D8'; }
a.imagebutton.emailfield.email:before { content: '\F01F0'; }
a.imagebutton.download:before { content: '\F01DA'; }
a.imagebutton.link:before { content: '\F0339'; }
a.imagebutton.sitemap.createpage { background-color: #008018; }
a.imagebutton.createpage.addbutton:before { content: '\F039C'; }
a.imagebutton.logout:before { content: '\F0425'; }
a.imagebutton.usersettings:before { content: '\F0631'; }
a.imagebutton.toggledarkmode:before { content: '\F050E'; }
body.darkmode a.imagebutton.toggledarkmode:before { transform: scale(-1, -1); color: var(--selection-bg-color); margin-top: -1px; }
a.imagebutton.navigation:before { content: '\F035C'; }
a.imagebutton.sitemap:before { content: '\F04AA'; }
a.imagebutton.sitemap.status { background-color: #8A8A8A; opacity: 1; cursor: default; }
a.imagebutton.sitemap.navigation1:before { content: '\F0208'; }
a.imagebutton.sitemap.navigation0:before { content: '\F0209'; }
a.imagebutton.sitemap.published0:before { content: '\F01E8'; }
a.imagebutton.sitemap.published1:before { content: '\F01E7'; }
a.imagebutton.sitemap.published2:before { content: '\F0306'; }
a.imagebutton.sitemap.goto { background-color: transparent; width: 1rem; }
a.imagebutton.sitemap.goto:before { content: '\F0214'; left: -3px; top: -2px; }
a.imagebutton.list:before { content: '\F148B'; }
a.imagebutton.videoembedfield.fetch:before { content: '\F0453'; }
a.imagebutton.sequenceselector { cursor: move; }
a.imagebutton.sequenceselector.disabled { cursor: default; cursor: not-allowed; }
a.imagebutton.sequenceselector:before { content: '\F04BA'; }
a.imagebutton.updateresources { background-color: #008018; }
a.imagebutton.updateresources:before { content: '\F0453'; }
a.imagebutton.mailercheck:before { content: '\F0AB1'; }
a.publishnews:before { content: '\F020C'; }
a.onofflinetoggle { background-color: #008018; }
a.onofflinetoggle:before { content: '\F01E7'; }
a.onofflinetoggle.offline { background-color: #666; }
a.onofflinetoggle.offline:before { content: '\F01E8'; }
a.imagebutton.columnselector { background-color: transparent; padding: 0; }
a.imagebutton.columnselector:before, #columnselector div.submenutab > span:before { content: '\F0493'; color: var(--main-link-color); }

a.imagebutton.pin { background-color: transparent; }
a.imagebutton.pin:before { content: '\F0403'; }
body.gloryanavigationpinned a.imagebutton.pin:before { content: '\F0404'; }

a.imagebutton.imageclipper.save, a.imagebutton.imageclipper.cancel { background-color: transparent; }
a.imagebutton.imageclipper.save:before { content: '\F0193'; color: #FFF; }
a.imagebutton.imageclipper.cancel:before { content: '\F0739'; color: #FFF; }

/* lockinfo */
div#lockinfo { position: relative; padding: 2px; width: 1.8em; height: 1.8em; border: 1px solid #FFF; background-color: #288239; box-sizing: border-box; margin: 3px 4px; flex-shrink: 0; }
div#lockinfo:before { content: '\F0306'; }
div#lockinfo.locked { background-color: #F54354; }
div#lockinfo.locked:before { content: '\F033E'; }

/* imagebuttons in adminbar */
#gloryaadminbar a.imagebutton { background-color: transparent; }
#gloryaadminbar a.imagebutton:before { font-size: 180%; line-height: 1.525rem; }

/* gloryanotifications */
#gloryanotifications { position: fixed; z-index: 100; bottom: 0; left: 0; }
body.fullsize #gloryanotifications, body.wwweditor #gloryanotifications { left: 50px; }
body.showgloryanavigation:not(.gloryanavigationhidepin) #gloryanotifications, body.gloryanavigationpinned:not(.gloryanavigationhidepin) #gloryanotifications { left: 310px; }
body.popup #gloryanotifications, body.login #gloryanotifications { left: 0 !important; }
#gloryanotifications > li { border-radius: .125em; display: block; padding: .5em .75em .5em .35em; margin: 0 0 .5em .5em; list-style-type: none; box-shadow: 1px 1px 3px 0px rgba(0,0,0,.5); max-width: 80vw; animation: notificationshow .5s; }
#gloryanotifications > li:after { content: ''; top: 0; bottom: .5em; width: 0; left: 0; opacity: 0; display: block; position: absolute; background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%); animation: notificationblingbling .5s linear .75s; filter: blur(2px); }
#gloryanotifications > li > div { padding-left: 1.75em; position: relative; }
#gloryanotifications > li > div:before { content: ''; text-align: center; width: 1.25em; height: 1.25em; line-height: 1.25em; display: inline-block; border-radius: 50%; background-color: white; position: absolute; left: 0; top: -.05em; font-weight: 900; }
#gloryanotifications > li.hidden { animation: notificationhide 1s; animation-fill-mode: forwards; }
#gloryanotifications a { text-decoration: underline; color: inherit; }
/* notes */
#gloryanotifications > li.type-0 { background-color: var(--highlight-bg-color); }
#gloryanotifications > li.type-0 > div:before { content: 'i'; background-color: var(--main-text-color); color: var(--highlight-bg-color); }
/* errors */
#gloryanotifications > li.type-1 { background-color: #F54354; color: #FFF; }
#gloryanotifications > li.type-1 > div:before { content: '!'; color: #F54354; }

@keyframes notificationshow {
    0% { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes notificationhide {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-100%); position: absolute; }
}
@keyframes notificationblingbling {
    20%  { opacity: .25; }
    50%  { left: 30%; width: 60%; }
    80%  { opacity: .25; }
    100%  { left: calc(100% + 1em); width: 0; opacity: 0; }
}

@media only screen and (max-width: 480px) {
	/* decrease admin bar width */
	body.fullsize #gloryanotifications, body.wwweditor #gloryanotifications { left: calc(.5em + 40px); }
	body.wwweditor, body.fullsize { margin-left: 40px; }
	#gloryaadminbar { width: 40px; }
	#gloryaadminbar a.imagebutton::before { font-size: 160%; }
	body.showgloryanavigation #gloryanavigation { left: -10px; }
	ul.gloryacontentnote { left: 40px; }
}