/* FIX DEFAULT MARGINS / PADDINGS / ETC */

html {
	font: normal 62.5%/1.69 'trebuchet ms', arial, sans-serif;
	letter-spacing: -0.01rem;
	box-sizing: border-box;
	/* for sticky footer */
	height: 100%;
}
*, *:before, *:after {
	box-sizing: inherit; /* https://css-tricks.com/box-sizing/ */
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
	background: var(--c-body-bg);
	color: #333;
	color: var(--c);
	font-size: 1.3rem;
	/* for sticky footer */
	height: 100%;
	display: flex;
	flex-direction: column;
}

@media (min-resolution: 192dpi) {
	/* don't upscale images when >= 200% dpi (e.g. 4k scaled to 1080p), pixelated looks much nicer than interpolation. in javascript we can get this via window.devicePixelRatio */
	body {
		image-rendering: pixelated;   /* webkit  */
		image-rendering: crisp-edges; /* firefox */
	}
}
img.pixel {
	image-rendering: pixelated;   /* webkit  */
	image-rendering: crisp-edges; /* firefox */
}
img.hd {
	image-rendering: auto;
}

h1, .h1 { font-size: 3.2rem; }
h2, .h2 { font-size: 2.4rem; }
h3, .h3 { font-size: 1.8rem; }
h4, .h4 { font-size: 1.4rem; }
h1,h2,h3,h4, .h1, .h2, .h3, .h4 {
	line-height: 1;
	margin-bottom: 1rem;
	letter-spacing: -0.2rem;
}
h3,h4, .h3, .h4 { 
	margin-bottom: 0.5rem; 
	letter-spacing: -0.1rem;
}
td { padding: 0.5rem; } /* for stragglers */

code, pre {
	padding: 0.5rem;
	border: 0.5rem solid var(--c-border);
	display: block;
	font-size: 1.2rem;
}
code pre, pre code { /* in cases where we accidentally do both, just cancel the inner one */
	border: 0;
	padding: 0;
	margin: 0;
}
code textarea {
	color: var(--c-badnews);
	background: var(--c-main-bg); 
	font-size: 1.2rem;
	border:0;
}
img         { border: 0; }
label:hover { cursor: pointer; }

ul, ol {
	padding-left: 2.5rem;
	padding-top: 1rem;
}
li { margin-bottom: 0.2rem; }

textarea { width: 100%; }
button,input,select,textarea,option { padding: 0.3rem; }
input:not([type=submit]):not([type=button]),select,textarea,option {
	border:1px solid var(--c-border-darker);
	background: var(--c-main-bg); 
	color: var(--c);
}




a, a:link, a:active, a:visited { 
	color: #2e7bc9; 
	color: var(--c-link); 
	text-decoration: none;
	outline: none !important; 
}
a:hover {
	color: #000; 
	color: var(--c-link-hover) !important; 
	text-decoration: underline;
}
a.nounderline, a.nounderline:visited, a.nounderline:hover, .nounderline a, .nounderline a:visited, .nounderline a:hover { text-decoration: none; }
a.red, a.red:visited { color: var(--c-badnews); }
a .link-domain, a:visited .link-domain, a.link-domain, a.link-domain:visited { 
	color: var(--c-link-domain);
	font-weight: bold;
}
a:hover .link-domain { color: var(--c-link-hover) !important; /* domain won't change color on hover without !important (for full URL links) */ }

#brand {
	background: var(--bg) 0 0 / 24px no-repeat;
	padding: 0.4em 0 0.5em 2.4em;
	font-weight: bold;
	image-rendering: auto;
}

.pagination a {
	margin: 0 0.5rem 1rem 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--c-tabs-current-bg);  /* let's try c-tab-bg instead once it's defined */
	text-decoration: none !important;
}
.pagination a.currentpage, .pagination a.currentpage:hover {
	color: var(--c-main-bg) !important;
	background: var(--c-tabs-current-bg);
	cursor: default !important;
}



/* SHORTCUTS */

.bordertop        { border-top: 1px solid var(--c-border); }
.bordertop-dotted { border-top: 1px dotted var(--c-border); }
.borderbottom     { border-bottom: 1px solid var(--c-border); }
.bordertopleft    { border-top: 1px solid var(--c-border); border-left: 1px solid var(--c-border); }
.tableborder      { border: 1px solid var(--c-border-darker); }
.noborder         { border: 0 !important; }
.rounded          { border-radius: 3px; }

.light, 
::placeholder    { color: var(--c-light)       !important; }
.alt             { background: var(--c-alt-bg) !important; }
.goodnews        { color: var(--c-goodnews)    !important; }
.red, .badnews   { color: var(--c-badnews)   !important; }

.bold   { font-weight: bold !important; }
.italic { font-style: italic !important; }

/* got rid of 95% of uses of these with 2019 redesign, but still useful in a few places so we're keeping. for large things, in 2026 we added .h1, .h2 etc classes, that mimic the real h1/h2/etc without being those actual elements, so we dont confuse search engines */
.small  { font-size: 1.1rem; }
.medium { font-size: 1.2rem; }

.inline { display: inline !important; }
.block  { display: block !important; }
.showme { display: block !important; }
.hideme { display: none !important; }
.iframe .iframe-hideme { display: none !important; } /* when interface.js detects we're in an iframe, we add 'iframe' class to body, then anything with 'iframe-hideme' class gets hidden - starting with things in #header but will have other things too */

.fixed  { position: fixed !important; }
.center { text-align: center; }
.centered    { margin: auto; }
.valign-top  { vertical-align: top; }
.align-right { text-align: right; }
.align-left  { text-align: left !important; }
.nooverflow  { overflow: hidden !important; }
.nowrap, .nowrap > * { white-space: nowrap !important; }
.wrap, .wrap > *     { white-space: normal !important; }
.balance             { text-wrap: balance; }


.shorten, .shorten-nowrap {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important; /* user preference, if they enable "wrap lines", then in theme css output, we override white-space here to be 'normal' instead, so it does wrap. */
	max-width: 100%; /* max-width required to for constrainment. */
}
.shorten-nowrap {
	white-space: nowrap !important; /* a few places where we still want to force no-wrap, e.g. when there's an icon in the same cell, if we allow wrapping then it looks awful */
}


.fl	  {float:left;}
.fr	  {float:right;}
.fn	  {float:none !important;}
.cl   {clear:left !important;}
.cr   {clear:right !important;}
.cb   {clear:both !important;}

.m0   {margin:0      !important;}
.m1	  {margin:0.1rem !important;}
.m2	  {margin:0.2rem !important;}
.m3	  {margin:0.3rem !important;}
.m4	  {margin:0.4rem !important;}
.m5	  {margin:0.5rem !important;}
.m10  {margin:1rem !important;}
.m15  {margin:1.5rem !important;}
.m20  {margin:2rem !important;}
.m30  {margin:3rem !important;}
.mt1  {margin-top:0.1rem !important;}
.mt2  {margin-top:0.2rem !important;}
.mt3  {margin-top:0.3rem !important;}
.mt4  {margin-top:0.4rem !important;}
.mt5  {margin-top:0.5rem !important;}
.mt10 {margin-top:1rem !important;}
.mt15 {margin-top:1.5rem !important;}
.mt20 {margin-top:2rem !important;}
.mt30 {margin-bottom:3rem !important;}
.mr1  {margin-right:0.1rem !important;}
.mr2  {margin-right:0.2rem !important;}
.mr3  {margin-right:0.3rem !important;}
.mr4  {margin-right:0.4rem !important;}
.mr5  {margin-right:0.5rem !important;}
.mr10 {margin-right:1rem !important;}
.mr15 {margin-right:1.5rem !important;}
.mr20 {margin-right:2rem !important;}
.mr30 {margin-right:3rem !important;}
.mb1  {margin-bottom:0.1rem !important;}
.mb2  {margin-bottom:0.2rem !important;}
.mb3  {margin-bottom:0.3rem !important;}
.mb4  {margin-bottom:0.4rem !important;}
.mb5  {margin-bottom:0.5rem !important;}
.mb10 {margin-bottom:1rem !important;}
.mb15 {margin-bottom:1.5rem !important;}
.mb20 {margin-bottom:2rem !important;}
.mb30 {margin-bottom:3rem !important;}
.mb-1 {margin-bottom: -0.1rem !important;} /* negative margins for aligning inline icons/images with text */
.mb-2 {margin-bottom: -0.2rem !important;}
.mb-3 {margin-bottom: -0.3rem !important;}
.mb-4 {margin-bottom: -0.4rem !important;}
.mb-5 {margin-bottom: -0.5rem !important;}
.ml1  {margin-left:0.1rem !important;}
.ml2  {margin-left:0.2rem !important;}
.ml3  {margin-left:0.3rem !important;}
.ml4  {margin-left:0.4rem !important;}
.ml5  {margin-left:0.5rem !important;}
.ml10 {margin-left:1rem !important;}
.ml15 {margin-left:1.5rem !important;}
.ml20 {margin-left:2rem !important;}
.ml25 {margin-left:2rem !important;}
.ml30 {margin-left:3rem !important;}

.p0   {padding:0      !important;}
.p1   {padding:0.1rem !important;}
.p2   {padding:0.2rem !important;}
.p3   {padding:0.3rem !important;}
.p4   {padding:0.4rem !important;}
.p5	  {padding:0.5rem !important;}
.p10  {padding:1rem !important;}
.p15  {padding:1.5rem !important;}
.p20  {padding:2rem !important;}
.p30  {padding:3rem !important;}
.pt1  {padding-top:0.1rem !important;}
.pt2  {padding-top:0.2rem !important;}
.pt3  {padding-top:0.3rem !important;}
.pt4  {padding-top:0.4rem !important;}
.pt5  {padding-top:0.5rem !important;}
.pt10 {padding-top:1rem !important;}
.pt15 {padding-top:1.5rem !important;}
.pt20 {padding-top:2rem !important;}
.pt25 {padding-top:2.5rem !important;}
.pt30 {padding-top:3rem !important;}
.pr1  {padding-right:0.1rem !important;}
.pr2  {padding-right:0.2rem !important;}
.pr3  {padding-right:0.3rem !important;}
.pr4  {padding-right:0.4rem !important;}
.pr5  {padding-right:0.5rem !important;}
.pr10 {padding-right:1rem !important;}
.pr15 {padding-right:1.5rem !important;}
.pr20 {padding-right:2rem !important;}
.pr25 {padding-right:2.5rem !important;}
.pr30 {padding-right:3rem !important;}
.pb1  {padding-bottom:0.1rem !important;}
.pb2  {padding-bottom:0.2rem !important;}
.pb3  {padding-bottom:0.3rem !important;}
.pb4  {padding-bottom:0.4rem !important;}
.pb5  {padding-bottom:0.5rem !important;}
.pb10 {padding-bottom:1rem !important;}
.pb15 {padding-bottom:1.5rem !important;}
.pb20 {padding-bottom:2rem !important;}
.pb25 {padding-bottom:2.5rem !important;}
.pb30 {padding-bottom:3rem !important;}
.pl1  {padding-left:0.1rem !important;}
.pl2  {padding-left:0.2rem !important;}
.pl3  {padding-left:0.3rem !important;}
.pl4  {padding-left:0.4rem !important;}
.pl5  {padding-left:0.5rem !important;}
.pl10 {padding-left:1rem !important;}
.pl15 {padding-left:1.5rem !important;}
.pl20 {padding-left:2rem !important;}
.pl25 {padding-left:2.5rem !important;}
.pl30 {padding-left:3rem !important;}









/* SIMPLE BOXES, MAINLY FOR DISPLAYING MESSAGES */

.box {
	padding: 0.6rem;
	margin-bottom: 1rem;
	border: 1px solid #eee;
	border: 1px solid var(--c-border-darker);
}

.message {
	padding: 1rem;
	margin-bottom: 1rem;
	color: var(--c-message);
	background: var(--c-message-bg) !important;
	border: 2px solid #eee;
	border: 2px solid var(--c-message-border);
	border-radius: 3px;
}
.message.message-badnews {
	border-color: var(--c-badnews) !important;
	background: var(--c-message-badnews-bg) !important;
}
.message .message-title {
	font-size: 1.6rem;
	font-weight: bold;
}
.message.message-badnews .message-title {
	color: var(--c-badnews) !important;
}








	




/* LAYOUT */

.grid-auto { /* auto = browser determines how many columns we get. used for general layout of entire pages mostly, e.g. landing page and dashboard. */
	display: grid;
	grid: auto / repeat( auto-fit, minmax( var(--min,30rem), 1fr ));
	grid-gap: 3rem;
}
.flex {  /* only using this in combination with grid-auto so just putting it up here */
	display: flex;
	flex-flow: row wrap !important; /* <flex-direction> (row,column,row-reverse,column-reverse)    <flex-wrap> (wrap,nowrap,wrap-reverse) */
}


.grid-table { /* used mostly as <table> replacement but a few layout things too */
	display: grid; 
	grid: auto / repeat( var(--cols,2), auto ); /* grid-template-columns */
	justify-content: start;
	/* align-items: center; */
}
.grid-table img { /* the only images in these tables are going to be icons so just apply this globally */
	position: relative;
	top: 0.3rem;
}
.grid-table img.flag { /* should this apply to .flag EVERYWHERE? probably?! */
	position: relative;
	top: 0.1rem;
}

.grid-table > * { /* automatic padding for all direct children with option to override */
	white-space: nowrap;
	border-bottom: 1px solid var(--c-border);
	padding: var(--padding,0.6rem 0.5rem);
}
.grid-table.basic > * { /* most uses of grid-table we want nowrap and a border between each row, but we can use this to remove that */
	white-space: normal;
	border: 0;
}
.dash_box_content .grid-table > * { /* dashboard padding a little tighter */
	padding: 0.5rem;
}

.grid-table .header {
	font-weight: bold;
	text-align: left;
}

.colspan {
	grid-area: span 1 / span var(--colspan,2);
}




/* grid-table graphy - just a few tweaks */

.graphy > * {
	padding: 1rem 0.5rem; /* this grid-table needs a bit more vertical padding than the default. */
	text-align: right;
}
.graphy-name, .graphy-graph {
	text-align: left;
}
.graphy-value {
	font-weight: bold;
}


/* sub-features of graphy, so putting them up here */

.favorites, .favorites-empty, .favorites-empty:hover, .jigsaw-search {
	display: block;
	float: left;
	height: 2rem;
	width: 2rem;
	background: url('/media/icons/fav.png') 0px 3px no-repeat;
}
.favorites-empty {
	background: url('/media/icons/fav-empty.png') 0px 3px no-repeat;
}
.jigsaw-search {
	background: url('/media/icons/info.png') 0px 3px no-repeat;
}







/* this always goes one layer under main layout elements (nav,header,footer,main), to allow parent to have full color width, but actual content inside of the element to have a max-width and be centered inside that */
.content {
	margin: 0 auto;
	max-width: 100rem;
	padding: 0 1rem;
	overflow: hidden;
}


/* footer */
#footer {
	background: var(--c-nav-bg);
	color: var(--c-nav);
	padding: 5rem;
	flex-shrink: 0;

}

#footer a, #footer a:hover, #footer a:visited {
	color: white !important;
}


/* header2 is for theme creation, need a separate iteration to show fake dropdown menus */
#header, 
#header2 {
	padding: 1.2rem 0;
	font-size: 1.3rem;
	width: 100%;
	color: #fff;
	color: var(--c-nav);
	background: #3a506F;
	background: var(--c-nav-bg);
	box-shadow: var(--c-shadow-micro);
	z-index: 1001;
}
#header.fixed {
	top: 0; /* have to manually declare this, sigh. it will inherit display:fixed automatically from generic .fixed class */
	left: 0;
}
#header  img, 
#header2 img {
	margin-bottom: -0.3rem !important;
}
#header  a, #header  a:visited, #header  a:hover, #header  a:active,
#header2 a, #header2 a:visited, #header2 a:hover, #header2 a:active {
	margin: 0 0.5rem 0 0;
	color: #fff;
	color: var(--c-nav);
	text-decoration: none;
}
#header  a:hover,
#header2 a:hover {
	text-decoration: underline;
	color: var(--c-nav) !important;
}

/* dropdown menus */
#header  .content,
#header2 .content {
	overflow: visible; /* for negative margins */
}
#header  a.dropdown-display-nav,
#header2 a.dropdown-display-nav {
	display: none;
	padding: 0.7rem;
	margin: -0.3rem 0.3rem -0.4rem !important;
	font-size: 1.2rem;
	text-decoration: none;
	line-height: 1;
	background: var(--c-dropdown-display-nav-bg);
	border: 1px solid var(--c-dropdown-display-nav-border);
	border-radius: 2px;
	xfloat: left; /* if floated, it won't honor nowrap */
}
#header  a.dropdown-display-nav:hover, #header  a.dropdown-display-nav:active,
#header2 a.dropdown-display-nav:hover, #header2 a.dropdown-display-nav:active {
	background: var(--c-dropdown-display-nav-bg-hover);
}
#header  .dropdown,
#header2 .dropdown {
	background: #444;
	background: var(--c-dropdown-nav-bg);
	border: 1px solid var(--c-dropdown-nav-border);
}
#header  .dropdown a,
#header2 .dropdown a {
	margin: 0;
}
#header  .dropdown a:hover,
#header2 .dropdown a:hover {
	background: var(--c-dropdown-nav-item-bg-hover);
}
#header .dropdown .bordertop {
	border-top: 1px solid var(--c-dropdown-nav-item-border);
}
#header .dropdown .borderbottom {
	border-bottom: 1px solid var(--c-dropdown-nav-item-border);
}

#nav-user-menu-display {
	font-size: 1.2rem;
	line-height:1;
	letter-spacing: -0.2rem;
}
#nav-user-menu-display img {
	margin-bottom: -0.1rem;
}	
#nav-user-menu-display:hover {
	text-decoration: none !important;
}



#stats-header-container {
	margin-left: 1rem;
}
#stats-header-bonus {
	display: none; /* total visitors/actions for the day. only show on full size window. */
}


/* for the huge logo that some white labels still want - but need it for extra margin either way */
#logo-container { margin-top: 5.1rem; } /* 4.7 */

#main-container {
	flex: 1; /* for sticky footer */
}
#main {
	padding: 0.5rem 0;
	background: #fff;
	background: var(--c-main-bg);
	overflow: hidden;
	margin-bottom: 10rem;
}



@media screen and (min-width: 1000px) {
	body {
		background: #eee;
		background: var(--c-body-bg-large);
	}
	#logo-container {
		margin-top: 5.7rem; /* 5.3 */
	}
	#main {
		padding: 1.5rem;
		border-radius: 6px;
		box-shadow: var(--c-shadow);
	}
	#stats-header-bonus {
		display: inline;
	}
}
@media screen and (max-width: 800px) {
	.smallhide {
		display: none !important; /* had a case where we trying to apply this to something that also explcitly had display:block and block took precedence. */
	}
	.smallhide-padding {
		padding:0 !important;
		margin: 0 !important;
	}
	#megaspy, #megaspy-actions {
		margin: 0 !important; /* since this is declared BEFORE #megaspy stuff below, need important to make this take precedence */
	}
}
@media screen and (max-width: 600px) {
	.microhide {
		display: none !important;
	}
	.microhide-padding { /* this goes on parent so when child disappears we can make parent take up zero space - can't just display:none it or grid vomits */
		padding:0 !important;
		margin: 0 !important;
	}
	#tabs-container {
		overflow: auto; /* tabs scroll horizontally on small screens */
	}
}



@media print {
	#nav, #header, #tabs-container {
		display: none !important;
	}
}





/* TABS - main tab menus that show in /stats/, /help/, and /terms/ - it's always there in the HTML and gets hidden/displayed and injected with content as needed. ".tabs" may be used elsewhere as well but there's only one #tabs-container. */

#tabs-container {
	position: static;
	display: none;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	background: #fff;
	background: var(--c-main-bg); /* need this for when its .fixed, might as well just do it at all times though */
	border-bottom: 1px dotted var(--c-border-darker);
	overflow: hide;
	white-space: nowrap;
	z-index: 999;
}
#tabs-container.fixed {
	position: fixed;
	padding-top: 1rem;
	border-bottom: 2px solid var(--c-tabs-border-fixed);
}



.tabs, .subtabs {
	display: flex;
	flex-flow: row nowrap; /* changed to nowrap, why even do flex? oh i guess the vertical positioning auto center stuff is nice... */
	align-items: center;
	align-content: center;
	font-size: 1.2rem;
}
.tabs a, .tabs a:visited, .tabs a:hover {
	color: var(--c-tabs);
	text-decoration: none;
	margin: 0 1rem 0 0;
}
.tabs a.current, .tabs a.current:visited {
	padding: 0.5rem 1rem;
	color: var(--c-tabs-current);
	background: var(--c-tabs-current-bg);
	font-size: 1.5rem;
	font-weight: bold;
	border-radius: 3px;
}
.tabs > a.current:hover {
	color: var(--c-tabs-current) !important;
}



.subtabs {
	padding: 0.5em 0 0.5rem 2.5rem;
	background: url(/media/menu-tree.png) 1rem 0.7rem no-repeat;
}
.subtabs a {
	color: var(--c-subtabs);
	text-decoration: none;
	margin: 0 1rem 0 0;
}
.subtabs a.current, .subtabs a.current:hover, .subtabs a.current:visited {
	padding: 0 !important;
	color: var(--c-subtabs-current) !important;
	background: var(--c-subtabs-current-bg) !important;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
}
/* subtabs in animation/injection/removal status */
.subtabs-pending:hover, .subtabs-pending a:hover {
	text-decoration: none;
	cursor: pointer;
}








/* SPY */


/* MEGASPY LAYOUT - "megaspy" is all the stuff built around the original spy, which was just the real time action log. new stuff is the map and the two sidebars. */

#megaspy {}

#megaspy-toggle-sound {
	display: block;
	margin-bottom: 0.2rem;
}
#megaspy-filters {  /* we also apply .message to this in the html so just need to declare custom margin. javascript uses the #id too. */
	xmargin: -3rem 0 4rem; 
}



/* MEGASPY MAP */

#megaspy-map {
	width: 30rem; /* these are dynamic once javascript fires but we start here until loading is done */
	height: 13rem;
	background: url('/media/worldmap.png?201907') top left no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	image-rendering: auto;
}
#megaspy-map-controls a, #megaspy-map-controls a:visited, #megaspy-map-controls a:active {
	margin-right: 0.5rem;
	text-decoration: none;
}



/* MEGASPY POPULAR DATA SIDEBAR AND SIDEBAR TABS (next to map) */

#megaspy-pop {
	float: right;
	padding-left: 1rem;
	border-left: 1px solid var(--c-border);
	height: 24rem;
	width: 35%;
	overflow: hidden; /* for when screen gets really small, so it doesnt wrap down into main action log */
}
#megaspy-pop .item {
	padding: 0.5rem 0;
}
#megaspy-pop h4 {  /* data value */
	float: left;
	width: 4rem;
	text-align: center;
	margin-top: 0.3rem;
}

#megaspy-tabs {
	padding: 0.2rem 0 1rem 0;
}
#megaspy-tabs a, #megaspy-tabs a:visited, #megaspy-tabs a:hover {
	padding: 0.5rem 0;
	margin: 0 0.5rem 0 0;
	color: var(--c-tabs);
	border-radius: 3px;
	text-decoration: none;
	font-size: 1.2rem;
}
#megaspy-tabs a:hover {
	color: var(--c-link-hover);
	text-decoration: none;
}
#megaspy-tabs a.current, #megaspy-tabs a.current:hover, #megaspy-tabs a.current:visited {
	padding: 0.5rem 0.7rem;
	color: var(--c-tabs-current) !important;
	background: var(--c-tabs-current-bg) !important;
	font-weight: bold;
	font-size: 1.3rem;
}



/* MEGASPY VISITORS SIDEBAR (next to action log) */

#megaspy-sidebar {
	float: left;
	width: 20%;
	border-right: 1px solid var(--c-border);
}

#megaspy-visitors {
	padding: 0 1rem 0 0;
	margin-bottom: 1rem;
	min-height: 40rem;
}
#megaspy-visitors .visitor {
	cursor: pointer;
	border-bottom: 1px solid var(--c-border);
	overflow: hidden;
	white-space: nowrap;
}
#megaspy-visitors .visitor-container {
	padding: 1rem 0 0.8rem;
}
#megaspy-visitors .visitor .visitor-name {
	font-weight: bold;
	margin-right: 0.5rem;
}
#megaspy-visitors .visitor .visitor-extra {
	display: none;
	padding-top: 0.5rem;
}
#megaspy-visitors .visitor-selected .visitor-extra {
	display: block;
}
#megaspy-visitors .visitor .href {
	color: var(--c-link);
}
#megaspy-visitors .visitor .time {
	color: var(--c-light);
}
#megaspy-visitors .visitor .location, #megaspy-visitors .visitor .browser, #megaspy-visitors .visitor .os, #megaspy-visitors .visitor .referrer {
	margin-bottom: 0.5rem;
}



/* MEGASPY ACTION LOG - barely need anything now that it's grid. although it also has a few media queries, grouped with ones above. */

#megaspy-actions {
	margin-left: 22%;
	overflow: hidden;
}



/* these are the popup bubbles that appear on the map */

.spybubble, .spybubble-small {
	width: 20rem;
	height: 3.8rem;
	font-size: 1.1rem;
	color: #333;
}
.spybubble-small {
	height: 2rem;
}

.spybubble-right-start, .spybubble-left-start, .spybubble-small-right-start, .spybubble-small-left-start {
	width: 1rem;
	height: 3.8rem;
	overflow:hidden;
	float: left;
	background: url('/media/spy-bubble-right.gif') center left no-repeat;
}
.spybubble-left-start, .spybubble-small-left-start {
	float: right;
	background: url('/media/spy-bubble-left.gif') center right no-repeat;
}
.spybubble-small-left-start {
	height: 2rem;
	background: url('/media/spy-bubble-left.gif') -2px 0px no-repeat;
}
.spybubble-small-right-start {
	height: 2rem;
	background: url('/media/spy-bubble-right.gif') 2px 0px no-repeat;
}
.spybubble-right-end, .spybubble-left-end, .spybubble-small-right-end, .spybubble-small-left-end {
	/* only first-party elements with hard-coded colors, since there's an image involved, can't really make it dynamic. looks fine on top of pretty much any background tho, it's good. */
	background: #fff;
	border: 1px solid #3385FB;
	width: 18rem;
	height: 3.8rem;
	white-space: nowrap; 
	overflow: hidden;
	padding-left: 0.5rem;
}
.spybubble-small-right-end, .spybubble-small-left-end {
	height: 2rem;
}

.spybubble a, .spybubble a:visited, .spybubble a:hover, .spybubble a:active {
	text-decoration: none !important;
}
.spybubble img {
	float: right;
	margin: 0.3rem 0.2rem 0;
}
.spybubble img.flag {
	float: right !important;
	margin: 0.5rem 0.3rem 0 !important;
}







/* GOAL DETAIL REPORT */

.goal-report-graph {
	border: 1px solid var(--c-border);
	margin-bottom: 5rem;
}
.goal-report-graph-header {
}
.goal-report-graph-header-item {
	text-align: center;
	font-size: 1.1rem;
	float: left;
	width: 17rem;
	padding: 0.5rem;
	overflow: wrap;
	cursor: pointer;
	color: var(--c-light);
}
.goal-report-graph-header-item h2 {
	margin-bottom: 0;
}
.goal-report-graph-header-item.current, .goal-report-graph-header-item:hover {
	color: var(--c);
}
.goal-report-graph-graph {
	margin: 0 0 1rem 0.5rem;
}







/* DASHBOARD */

#dash_col_1, #setup-dash_col_1 {}
.dash_col,   .setup-dash_col   {}

.dash_box, .setup-dash_box {
	background: var(--c-main-bg);
	padding: 0.8rem;
	margin-bottom: 2.5rem;
	border-top:  1px solid var(--c-border);
	border-left: 1px solid var(--c-border);
	border-radius: 3px;
	overflow: hidden;
}
.dash_box img {
	/* same rule as grid-table, for icons */
	position: relative;
	top: 0.3rem;
}

/* h3 is for non-dashboard pages where we're borrowing this style for something else but don't want to use as large of titles (e.g. new goal report) */
.dash_box h2, .dash_box h3, .dash_box h4,
.setup-dash_box h2, .setup-dash_box h3, .setup-dash_box h4 {
	border-bottom: 1px dotted var(--c-border-darker);
	padding-bottom: 0.2rem;
	margin-bottom: 1rem;
}
.dash_box h2.move,
.setup-dash_box h2.move {
	cursor: move;
}

.dash_box_tabs {
	float: right;
	font-size: 1.1rem;
}
.dash_box_tabs a, .dash_box_tabs a:visited {
	margin-right: 0.5rem;
}
.dash_box_tabs a.current {
	color: #000;
	color: var(--c);
	font-weight: bold;
	text-decoration: none;
}



.dash_box_content {
	clear: left;
}
.dash_box_content > * {
	xwidth: 100%; /* why? */
}

.dash_box_content .graph {
	text-align: left;
	padding-top: 0.6rem;
}
.dash_box_content .graph-wide { /* for bargraph popup (which also uses .graph so must keep all this around) */
	xwidth: 100% !important; /* why? */
}



.period-current {
	font-weight: bold;
	text-align: right;
}
.period-previous { /* trends */
	color: var(--c-light);
	font-size: 1.1rem;
	text-align: right;
	padding-top: 0.5rem; /* default is 0.4rem but smaller font size and valign-top means we need to push this down slightly to have it line up horizontally with 'value' column */
}







/* TRENDS */

.trend, .trend_none, .trend_none:visited {
	color: var(--c-trend) !important;
}
.trend_down, .trend_down:visited {
	color: var(--c-trend-down) !important;
}
.trend_up, .trend_up:visited {
	color: var(--c-trend-up) !important;
}
a.trend_up:hover, a.trend_down:hover, a.trend_none:hover {
	color: var(--c-link-hover) !important;
}







/* DROPDOWN MENUS AND POPUP DIVS (they share a lot of properties) */

.dropdown, .popup {
	display: none;
	position: absolute;
	background: #fff;
	background: var(--c-dropdown-bg);
	border: 1px solid #eee;
	border: 1px solid var(--c-dropdown-border);
	padding: 0.5rem;
	white-space: nowrap;
	overflow: hidden;
	overflow-y: auto !important;
	text-align: left;
	font-weight: normal; /* otherwise family menus were getting bolded in grid-table headers */
	z-index: 1001;
	box-shadow: var(--c-shadow);
}
.dropdown {
	font-size: 1.2rem;
}

.popup {
	width: 95%; /* need an extra bit of padding for scroll bar */
	max-width: 90rem;
	position: fixed;
}



.dropdown a, .dropdown a:visited {
	padding: 0.3rem 0.5rem;
	display: block;
	text-decoration: none !important;
}
.dropdown a:hover {
	color: var(--c-dropdown-item-hover) !important;
	background: var(--c-dropdown-item-bg-hover);
}
.dropdown img {
	margin-bottom: -0.3rem;
}
.dropdown a.cancel { /* remove this filter */
	color: var(--c-badnews);
}



a.dropdown-display, a.dropdown-display:visited, a.dropdown-display-light, a.dropdown-display-light:visited {
	padding: 0.4rem;
	color: var(--c-dropdown-display);
	background: var(--c-dropdown-display-bg);
	border-radius: 2px;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}
a.dropdown-display:hover, a.dropdown-display:active {
	color: var(--c-dropdown-display) !important;
	background: var(--c-dropdown-display-bg-hover);
}
a.dropdown-display-light, a.dropdown-display-light:visited {
	color: var(--c-light);
	background: transparent;
}













/* loading gif (small, top left corner) */
#loading {
	position: fixed;
	top: 5rem;
	z-index: 1000;
	width: 2rem;
	height: 2rem;
	background: url('/media/loading.svg') 0 0 / 2rem no-repeat;
	filter: brightness(30%) invert(1) grayscale(100%);
	display: none;
}

/* faded background when ajax or popup loading */
#loading-lightbox {
	opacity: 0.4;
	background: var(--c-main-bg);
	padding: 0.5rem;
	position: absolute;
	z-index: 1000;
}























/* THIRD PARTY TOOLS */









/* CALENDAR */

#cal-dropdown {
	position: fixed; /* popup lightbox */
	z-index: 1001;
}

.calendar { /* div wrapper for each calendar (we show 2 of them) */
	border-top:  1px solid var(--c-border);
	border-left: 1px solid var(--c-border);
	font-size: 1.1rem;
	padding: 0.5rem;
}
.calendar td {
	padding: 0.2rem 0.6rem;
}

.calendar .entbox{} /* parent table, contains 3 child tables below */

.calendar .dxcalmonth {} /* table - month select area */
.calendar .dxcalmonth td.month_btn_left {
	background: transparent url('/media/icons/arrow-left.png') center center no-repeat;
	width: 1rem;
}
.calendar .dxcalmonth td.month_btn_right {
	background: transparent url('/media/icons/arrow-right.png') center center no-repeat;
	width: 1rem;
}
.calendar .dxcalmonth td.month_btn_left  span,
.calendar .dxcalmonth td.month_btn_right span {
	visibility: hidden;
}
.calendar div.planeMonth,
.calendar div.planeYear {
	font-weight: bold;
}
.calendar td.comma { /* shows a comma between month and year */
	visibility: hidden;
}

.calendar .dxcaldlabel { /* table - column labels (Su Mo Tu We Th Fr Sa) */
}
.calendar .dxcaldays { /* table - the actual calendar */
	border-right:  1px solid var(--c-border-darker);
	border-bottom: 1px solid var(--c-border-darker);
}
.calendar .dxcaldlabel td,
.calendar .dxcaldays td,
.calendar .dxcaldays_ie td {
	text-align: left;
	vertical-align: middle;
}
.calendar .dxcaldays_ie td {
	height: 2rem;
}
.calendar .dxcaldays td,
.calendar .dxcaldays_ie td {
	border-top:  1px solid var(--c-border-darker);
	border-left: 1px solid var(--c-border-darker);
	text-align: center;
	cursor: pointer;
}

.calendar td.thismonth, .calendar td.weekend {
	color: var(--c-link);
}

.calendar td.othermonth {
	color: var(--c-light);
	background: var(--c-border);
	visibility: visible;
}

.calendar td.selected, .calendar td.hover {
	color: var(--c-dropdown-display) !important;
	background: var(--c-dropdown-display-bg);
}
.calendar td.current {
	font-weight: bold;
}

/* below calendar rules not used anymore or ever but keep for reference: */
.calendar_minimized {
	padding: 0;
	height: 2.5rem;
	width: 18rem;
}
.calendar .calendarHeader { /* ? */
	text-align: right;
	width: 18rem;
}
.calendar_minimized .calendarHeader {
	margin-left: 1.6rem;
	padding-top: 0.4rem;
	width: 16rem;
}
.calendar .winTitle {
	color: var(--c);
	font-size: 1.2rem;
	float: left;
	cursor: move;
}
.calendar_ifr {
	height: 17rem;
	width: 19rem;
}
.calendar td.insensitive {
	color: #ccc;
	cursor: default;
}
.calendar td.holiday {
}







/* FLAGS */

.flag {
	width: 16px;
	height: 11px;
	background: url(/media/flags.png) no-repeat;
}

.flag.flag-ad {background-position: -16px 0}
.flag.flag-ae {background-position: -32px 0}
.flag.flag-af {background-position: -48px 0}
.flag.flag-ag {background-position: -64px 0}
.flag.flag-ai {background-position: -80px 0}
.flag.flag-al {background-position: -96px 0}
.flag.flag-am {background-position: -112px 0}
.flag.flag-an {background-position: -128px 0}
.flag.flag-ao {background-position: -144px 0}
.flag.flag-ar {background-position: -160px 0}
.flag.flag-as {background-position: -176px 0}
.flag.flag-at {background-position: -192px 0}
.flag.flag-au {background-position: -208px 0}
.flag.flag-aw {background-position: -224px 0}
.flag.flag-az {background-position: -240px 0}
.flag.flag-ba {background-position: 0 -11px}
.flag.flag-bb {background-position: -16px -11px}
.flag.flag-bd {background-position: -32px -11px}
.flag.flag-be {background-position: -48px -11px}
.flag.flag-bf {background-position: -64px -11px}
.flag.flag-bg {background-position: -80px -11px}
.flag.flag-bh {background-position: -96px -11px}
.flag.flag-bi {background-position: -112px -11px}
.flag.flag-bj {background-position: -128px -11px}
.flag.flag-bm {background-position: -144px -11px}
.flag.flag-bn {background-position: -160px -11px}
.flag.flag-bo {background-position: -176px -11px}
.flag.flag-br {background-position: -192px -11px}
.flag.flag-bs {background-position: -208px -11px}
.flag.flag-bt {background-position: -224px -11px}
.flag.flag-bv {background-position: -240px -11px}
.flag.flag-bw {background-position: 0 -22px}
.flag.flag-by {background-position: -16px -22px}
.flag.flag-bz {background-position: -32px -22px}
.flag.flag-ca {background-position: -48px -22px}
.flag.flag-catalonia {background-position: -64px -22px}
.flag.flag-cd {background-position: -80px -22px}
.flag.flag-cf {background-position: -96px -22px}
.flag.flag-cg {background-position: -112px -22px}
.flag.flag-ch {background-position: -128px -22px}
.flag.flag-ci {background-position: -144px -22px}
.flag.flag-ck {background-position: -160px -22px}
.flag.flag-cl {background-position: -176px -22px}
.flag.flag-cm {background-position: -192px -22px}
.flag.flag-cn {background-position: -208px -22px}
.flag.flag-co {background-position: -224px -22px}
.flag.flag-cr {background-position: -240px -22px}
.flag.flag-cu {background-position: 0 -33px}
.flag.flag-cv {background-position: -16px -33px}
.flag.flag-cy {background-position: -32px -33px}
.flag.flag-cz {background-position: -48px -33px}
.flag.flag-de {background-position: -64px -33px}
.flag.flag-dj {background-position: -80px -33px}
.flag.flag-dk {background-position: -96px -33px}
.flag.flag-dm {background-position: -112px -33px}
.flag.flag-do {background-position: -128px -33px}
.flag.flag-dz {background-position: -144px -33px}
.flag.flag-ec {background-position: -160px -33px}
.flag.flag-ee {background-position: -176px -33px}
.flag.flag-eg {background-position: -192px -33px}
.flag.flag-eh {background-position: -208px -33px}
.flag.flag-england {background-position: -224px -33px}
.flag.flag-er {background-position: -240px -33px}
.flag.flag-es {background-position: 0 -44px}
.flag.flag-et {background-position: -16px -44px}
.flag.flag-eu {background-position: -32px -44px}
.flag.flag-fi {background-position: -48px -44px}
.flag.flag-fj {background-position: -64px -44px}
.flag.flag-fk {background-position: -80px -44px}
.flag.flag-fm {background-position: -96px -44px}
.flag.flag-fo {background-position: -112px -44px}
.flag.flag-fr {background-position: -128px -44px}
.flag.flag-ga {background-position: -144px -44px}
.flag.flag-gb {background-position: -160px -44px}
.flag.flag-gd {background-position: -176px -44px}
.flag.flag-ge {background-position: -192px -44px}
.flag.flag-gf {background-position: -208px -44px}
.flag.flag-gh {background-position: -224px -44px}
.flag.flag-gi {background-position: -240px -44px}
.flag.flag-gl {background-position: 0 -55px}
.flag.flag-gm {background-position: -16px -55px}
.flag.flag-gn {background-position: -32px -55px}
.flag.flag-gp {background-position: -48px -55px}
.flag.flag-gq {background-position: -64px -55px}
.flag.flag-gr {background-position: -80px -55px}
.flag.flag-gs {background-position: -96px -55px}
.flag.flag-gt {background-position: -112px -55px}
.flag.flag-gu {background-position: -128px -55px}
.flag.flag-gw {background-position: -144px -55px}
.flag.flag-gy {background-position: -160px -55px}
.flag.flag-hk {background-position: -176px -55px}
.flag.flag-hm {background-position: -192px -55px}
.flag.flag-hn {background-position: -208px -55px}
.flag.flag-hr {background-position: -224px -55px}
.flag.flag-ht {background-position: -240px -55px}
.flag.flag-hu {background-position: 0 -66px}
.flag.flag-id {background-position: -16px -66px}
.flag.flag-ie {background-position: -32px -66px}
.flag.flag-il {background-position: -48px -66px}
.flag.flag-in {background-position: -64px -66px}
.flag.flag-io {background-position: -80px -66px}
.flag.flag-iq {background-position: -96px -66px}
.flag.flag-ir {background-position: -112px -66px}
.flag.flag-is {background-position: -128px -66px}
.flag.flag-it {background-position: -144px -66px}
.flag.flag-jm {background-position: -160px -66px}
.flag.flag-jo {background-position: -176px -66px}
.flag.flag-jp {background-position: -192px -66px}
.flag.flag-ke {background-position: -208px -66px}
.flag.flag-kg {background-position: -224px -66px}
.flag.flag-kh {background-position: -240px -66px}
.flag.flag-ki {background-position: 0 -77px}
.flag.flag-km {background-position: -16px -77px}
.flag.flag-kn {background-position: -32px -77px}
.flag.flag-kp {background-position: -48px -77px}
.flag.flag-kr {background-position: -64px -77px}
.flag.flag-kw {background-position: -80px -77px}
.flag.flag-ky {background-position: -96px -77px}
.flag.flag-kz {background-position: -112px -77px}
.flag.flag-la {background-position: -128px -77px}
.flag.flag-lb {background-position: -144px -77px}
.flag.flag-lc {background-position: -160px -77px}
.flag.flag-li {background-position: -176px -77px}
.flag.flag-lk {background-position: -192px -77px}
.flag.flag-lr {background-position: -208px -77px}
.flag.flag-ls {background-position: -224px -77px}
.flag.flag-lt {background-position: -240px -77px}
.flag.flag-lu {background-position: 0 -88px}
.flag.flag-lv {background-position: -16px -88px}
.flag.flag-ly {background-position: -32px -88px}
.flag.flag-ma {background-position: -48px -88px}
.flag.flag-mc {background-position: -64px -88px}
.flag.flag-md {background-position: -80px -88px}
.flag.flag-me {background-position: -96px -88px}
.flag.flag-mg {background-position: -112px -88px}
.flag.flag-mh {background-position: -128px -88px}
.flag.flag-mk {background-position: -144px -88px}
.flag.flag-ml {background-position: -160px -88px}
.flag.flag-mm {background-position: -176px -88px}
.flag.flag-mn {background-position: -192px -88px}
.flag.flag-mo {background-position: -208px -88px}
.flag.flag-mp {background-position: -224px -88px}
.flag.flag-mq {background-position: -240px -88px}
.flag.flag-mr {background-position: 0 -99px}
.flag.flag-ms {background-position: -16px -99px}
.flag.flag-mt {background-position: -32px -99px}
.flag.flag-mu {background-position: -48px -99px}
.flag.flag-mv {background-position: -64px -99px}
.flag.flag-mw {background-position: -80px -99px}
.flag.flag-mx {background-position: -96px -99px}
.flag.flag-my {background-position: -112px -99px}
.flag.flag-mz {background-position: -128px -99px}
.flag.flag-na {background-position: -144px -99px}
.flag.flag-nc {background-position: -160px -99px}
.flag.flag-ne {background-position: -176px -99px}
.flag.flag-nf {background-position: -192px -99px}
.flag.flag-ng {background-position: -208px -99px}
.flag.flag-ni {background-position: -224px -99px}
.flag.flag-nl {background-position: -240px -99px}
.flag.flag-no {background-position: 0 -110px}
.flag.flag-np {background-position: -16px -110px}
.flag.flag-nr {background-position: -32px -110px}
.flag.flag-nu {background-position: -48px -110px}
.flag.flag-nz {background-position: -64px -110px}
.flag.flag-om {background-position: -80px -110px}
.flag.flag-pa {background-position: -96px -110px}
.flag.flag-pe {background-position: -112px -110px}
.flag.flag-pf {background-position: -128px -110px}
.flag.flag-pg {background-position: -144px -110px}
.flag.flag-ph {background-position: -160px -110px}
.flag.flag-pk {background-position: -176px -110px}
.flag.flag-pl {background-position: -192px -110px}
.flag.flag-pm {background-position: -208px -110px}
.flag.flag-pn {background-position: -224px -110px}
.flag.flag-pr {background-position: -240px -110px}
.flag.flag-ps {background-position: 0 -121px}
.flag.flag-pt {background-position: -16px -121px}
.flag.flag-pw {background-position: -32px -121px}
.flag.flag-py {background-position: -48px -121px}
.flag.flag-qa {background-position: -64px -121px}
.flag.flag-re {background-position: -80px -121px}
.flag.flag-ro {background-position: -96px -121px}
.flag.flag-rs {background-position: -112px -121px}
.flag.flag-ru {background-position: -128px -121px}
.flag.flag-rw {background-position: -144px -121px}
.flag.flag-sa {background-position: -160px -121px}
.flag.flag-sb {background-position: -176px -121px}
.flag.flag-sc {background-position: -192px -121px}
.flag.flag-scotland {background-position: -208px -121px}
.flag.flag-sd {background-position: -224px -121px}
.flag.flag-se {background-position: -240px -121px}
.flag.flag-sg {background-position: 0 -132px}
.flag.flag-sh {background-position: -16px -132px}
.flag.flag-si {background-position: -32px -132px}
.flag.flag-sk {background-position: -48px -132px}
.flag.flag-sl {background-position: -64px -132px}
.flag.flag-sm {background-position: -80px -132px}
.flag.flag-sn {background-position: -96px -132px}
.flag.flag-so {background-position: -112px -132px}
.flag.flag-sr {background-position: -128px -132px}
.flag.flag-st {background-position: -144px -132px}
.flag.flag-sv {background-position: -160px -132px}
.flag.flag-sy {background-position: -176px -132px}
.flag.flag-sz {background-position: -192px -132px}
.flag.flag-tc {background-position: -208px -132px}
.flag.flag-td {background-position: -224px -132px}
.flag.flag-tf {background-position: -240px -132px}
.flag.flag-tg {background-position: 0 -143px}
.flag.flag-th {background-position: -16px -143px}
.flag.flag-tj {background-position: -32px -143px}
.flag.flag-tk {background-position: -48px -143px}
.flag.flag-tl {background-position: -64px -143px}
.flag.flag-tm {background-position: -80px -143px}
.flag.flag-tn {background-position: -96px -143px}
.flag.flag-to {background-position: -112px -143px}
.flag.flag-tr {background-position: -128px -143px}
.flag.flag-tt {background-position: -144px -143px}
.flag.flag-tv {background-position: -160px -143px}
.flag.flag-tw {background-position: -176px -143px}
.flag.flag-tz {background-position: -192px -143px}
.flag.flag-ua {background-position: -208px -143px}
.flag.flag-ug {background-position: -224px -143px}
.flag.flag-um {background-position: -240px -143px}
.flag.flag-us {background-position: 0 -154px}
.flag.flag-uy {background-position: -16px -154px}
.flag.flag-uz {background-position: -32px -154px}
.flag.flag-va {background-position: -48px -154px}
.flag.flag-vc {background-position: -64px -154px}
.flag.flag-ve {background-position: -80px -154px}
.flag.flag-vg {background-position: -96px -154px}
.flag.flag-vi {background-position: -112px -154px}
.flag.flag-vn {background-position: -128px -154px}
.flag.flag-vu {background-position: -144px -154px}
.flag.flag-wales {background-position: -160px -154px}
.flag.flag-wf {background-position: -176px -154px}
.flag.flag-ws {background-position: -192px -154px}
.flag.flag-ye {background-position: -208px -154px}
.flag.flag-yt {background-position: -224px -154px}
.flag.flag-za {background-position: -240px -154px}
.flag.flag-zm {background-position: 0 -165px}
.flag.flag-zw {background-position: -16px -165px}










/* JGROWL (desktop alerts) */


div.jGrowl {
	padding: 10px;
	z-index: 99999999999999999; /* one more 9 than onsitestats */
	color: #fff;
	font-size: 1.1rem;
}
div.jGrowl a, div.jGrowl a:hover, div.jGrowl a:visited, div.jGrowl a:active {
	color: white !important;
}

/* Normal Style Positions */
div.jGrowl {
	position: absolute;
}
body > div.jGrowl {
	position: fixed;
}
div.jGrowl.top-left {
	left: 0px;
	top: 0px;
}
div.jGrowl.top-right {
	right: 0px;
	top: 0px;
}
div.jGrowl.bottom-left {
	left: 0px;
	bottom: 0px;
}
div.jGrowl.bottom-right {
	right: 0px;
	bottom: 0px;
}
div.jGrowl.center {
	top: 0px;
	width: 50%;
	left: 25%;
}

/* Cross Browser Styling */
div.center div.jGrowl-notification, div.center div.jGrowl-closer {
	margin-left: auto;
	margin-right: auto;
}
div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
	background-color: #000;
	opacity: .85;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85); 
	zoom: 1;
	width: 235px;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	text-align: left;
	display: none;
	border-radius: 5px;
}
div.jGrowl div.jGrowl-notification {
	min-height: 20px;
}
div.jGrowl div.jGrowl-notification div.jGrowl-header {
	font-weight: bold;
	font-size: 1.2rem;
}
div.jGrowl div.jGrowl-notification div.jGrowl-close {
	z-index: 99;
	float: right;
	font-weight: bold;
	font-size: 1rem;
	cursor: pointer;
}
div.jGrowl div.jGrowl-closer {
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}
@media print {
	div.jGrowl { display: none; }
}











/* FORUMS - maybe someday update to grid instead but they're dead for years now so who cares */

table.forums {
	width: 100%;
}
table.forums td, table.forums th {
	padding: 1.5rem;
}