/*
 * send-it.css: default stylesheet for PPIT-Web/Impose-it.
 *
 * Written by T.Pierron, Polkadots Software Inc. Jun 2014.
 */

body			{ font-size: 13px; margin: 0; padding: 0; font-family: sans-serif; overflow: hidden }
body.ppitweb	{ color: /*#BW(WKB)?white:black*/black; background-color: /*#WKB*/white }
body.popup,
body.flow		{ overflow: auto }
form			{ margin: 0 }
.ppitweb
fieldset 		{ margin: 5px 0 0 0; width: auto; border-radius: 5px; border-color: /*#WBG*/auto }
fieldset.line	{ box-shadow: none; background-color: transparent }
a:link,legend	{ color: /*#LOC*/blue }
a:focus			{ color: /*#BLEND(LOC,0xff0000,75)*/red }
a:visited		{ color: /*#BLEND(LOC,0x888888,75)*/purple }
a img			{ border: 0 }
:invalid        { outline: red }
.selection		{ background-color: /*#SEL*/blue;  color: /*#SFG*/#ffffff }
.wndbg			{ background-color: /*#WBG*/#eee;  color: /*#BW(WBG)?white:black*/black }
.wkbbg			{ background-color: /*#WKB*/white; color: /*#BW(WKB)?white:black*/black }
.sel50			{ background-color: /*#BLEND(SEL,white,50)*/#7f7fff; color: /*#SFG*/#ffffff }
.wndbg10		{ background-color: /*#BLEND(WBG,BW(WBG)?white:black,10)*/#eee; color: /*#BW(WBG)?white:black*/black /*tmpl editor*/ }
.nowrap			{ white-space: nowrap }
.hide			{ display: none }
.hidden			{ visibility: hidden }
.new			{ font-weight: bold }
#content.wndbg	{ color: /*#BW(WBG)?white:black*/black }
a.error,
.error			{ color: red!important; font-weight: bold }
.invalid		{ background-color: #fbb }
.usercls		{ font-weight: bold }
a.reject,
.reject			{ color: #f22 }
a.accept,
.accept			{ color: #0b0 }
.warning		{ color: /*#BW(WBG)?0xaaaaaa:0x666666*/#666; font-size: 0.9em }
.dim			{ color: /*#BW(WBG)?0xaaaaaa:0x888888*/#888 }
.plate			{ margin: 2px auto !important; box-shadow: 1px 1px 2px #aaa }
td.compact		{ width: 1%; white-space: nowrap }
.cancel			{ text-align: right }
.smallint		{ width: 2em; text-align: right }
.int			{ width: 3em; text-align: right }
.warning .hdr	{ background-color: #888; color: white; border-radius: 8px; padding: 0 8px }
.error   .hdr	{ background-color: red;  color: white; border-radius: 8px; padding: 0 8px; font-weight: normal }
.badge			{ background-color: green; display: inline-block; border-radius: 10px; color: white; padding: 0 10px }
label.disa		{ color: /*#BW(WBG)?0xaaaaaa:0x888888*/#888; text-shadow: 1px 1px /*#BW(WBG)?black:white*/white }
.tbbg			{ color: /*#BW(WBG)?white:black*/black; background: linear-gradient(to bottom, /*#WBG*/#eee, /*#WBG*/#eee 100px, /*#BBG*/#eee) }
.panelbg		{ color: /*#BW(WBG)?white:black*/black; background: linear-gradient(to bottom, /*#WBG*/#eee, /*#BBG*/#eee) }
.popup .warning { color: /*#BW(PBG)?0xaaaaaa:0x666666*/#666 }
.bgsel10        { background-color: /*#BLEND(PBG,SEL,10)*/#d9d5eb }
.iconspacer     { display: inline-block; width: 32px }
.commentbox     { padding: 0.5em; text-align: center; font-weight: bold; z-index: 100; box-shadow: 0 0 7px rgba(0,0,0,0.5) }
#footer.commentbox { color: black; background: yellow; height: auto; line-height: normal }

/* main header */
#content h1		{ color: /*#BW(GTL)?white:black*/black; margin: 5px 0; font-size: 1.6em }
h1              { color: /*#BW(WKB)?white:black*/black }
h1 a:link		{ font-weight: normal; text-decoration: none }
h1 a:hover		{ text-decoration: underline }
h1 a.selected	{ font-weight: bold; color: black }
h1 .subtitle	{ font-size: 0.7em; color: /*#BW(GTL)?white:black*/black; display: block }
body.popup h1 .subtitle
				{ color: inherit }
body.popup h1 .subtitle a
				{ color: /*#LOC*/#002e6f }
body.popup		{ background-color: /*#PBG*/#f1ede9; color: /*#BW(PBG)?white:black*/black; font-size: 12px; padding: 5px }
body.popup h1	{ border-bottom: 2px groove #ccc; padding-bottom: 5px; margin-bottom: 4px }
body.popup p	{ padding: 0 0 5px 0; margin: 0 }
body.popup #toolbar
				{ background-color: /*#BLEND(PBG,white,50)*/#f5f4eb }
body.popup label.disa
				{ color: #888; text-shadow: 1px 1px /*#BW(PBG)?black:white*/white }
body.popup fieldset
				{ background-color: /*#BW(PBG)?'rgba(255,255,255,0.05)':'transparent'*/transparent }
body.popup .bgerr { background-color: /*#BLEND(PBG,0xff0000,25)*/#fcc!important }

/* make dark image on dark bg, bright again */
.darkwkb		{ filter: invert(/*#BW(WKB)?'100%':'0%'*/0%) }
.darkwbg		{ filter: invert(/*#BW(WBG)?'100%':'0%'*/0%) }
.darkpbg		{ filter: invert(/*#BW(PBG)?'100%':'0%'*/0%) }

/* job title mostly */
h2				{ position: relative; z-index: 3; display: block; float: right; font-size: 1.3em !important; height: 1.5em;
				  line-height: 1.5em; margin: -3px 0 0 0 !important; color: white; background-color: /*#GHB*/#002e6f;
				  border: 1px solid /*#GHT*/#0065ae; border-width: 0 0 1px 0; padding: 0 10px 0 2em; border-top: 1px solid /*#GHB*/#002e6f;
				  border-radius: 0 0 0 2em; box-shadow: -2px 1px 3px rgba(0,0,0,0.5); text-shadow: 0 0 3px black }
h2 a:link		{ color: white; text-decoration: none }
h2 a:hover		{ border-bottom: 1px dotted #7aa }
h2 .jobstate    { color: #f88 }
h2 .jobstate::before { content: "(" }
h2 .jobstate::after  { content: ")" }

/* queue list group by type in config */
.queuelist		{ display: inline-block; border-collapse: collapse; vertical-align: top; margin-right: 5px; border: 2px groove #ccc }
.queuename		{ font-weight: bold; text-transform: uppercase }
.queuelist
thead tr		{ background-color: #ddd; color: black }
.queuelist
caption			{ background-color: #ddd; color: black; font-weight: bold; font-size: 0.8em }

/* config:sales staff */
fieldset.sep	{ border: 0; border-left: 2px solid #888; border-radius: 0 }
table.layout	{ border-collapse: collapse; border-spacing: 0; margin-bottom: 2px; width: 100% }
table.layout td	{ vertical-align: baseline }

/* HEADER (main ppit-web header) */
span#warnmsg	{ border: 1px solid #f80; border-width: 1px 0; background-color: yellow; color: red; text-shadow: none }
.header			{ position: relative; overflow: hidden;
				  background: linear-gradient(to bottom, /*#GHT*/#0065ae, /*#GHB*/#002e6f 90%, /*#GHT*/#0065ae);
				  background-color: /*#GHB*/#002e6f; text-shadow: 0 0 4px /*#BW(GHT)?black:white*/black; height: 3.7em }
.header.flat	{ z-index: 4 }
.header a		{ color: #29f }
.header p		{ margin: 0; padding: 0; color: /*#BW(GHT)?white:black*/white }
.header .auth	{ margin-top: 5px }
.header .line	{ line-height: 2.8em }
.menu			{ font-size: 1.25em; background: transparent /*#20*/url(/send-it/ppit-logo.png) no-repeat 5px 45% }
.menu.sendit	{ background-image: /*#21*/url(/send-it/send-it-logo.png) }
.header .menu	{ padding-left: 25%; line-height: 2.8em; float: left; margin-right: 40px }
.menu a			{ color: /*#BW(GHT)?white:black*/white; text-decoration: none }
.menu a.ack		{ color: /*#BW(GHT)?0x77ff77:0x33aa33*/#7f7 }
.menu a:hover	{ color: /*#BW(GHT)?white:black*/white; text-decoration: underline }
#srvtime		{ color: #bbb; padding: 0 }
.about			{ position: absolute; right: 5px; top: 1.85em; margin-top: -9px; cursor: pointer }
.helpmark img	{ vertical-align: middle }
/* END HEADER */
#content.wkb	{ background-color: /*#WKB*/#f6f6f6; color: /*#BW(WKB)?white:black*/black }
#content		{ background: /*#GTL*/transparent url(/send-it/gradient-top.png) repeat-x; color: /*#BW(GTL)?white:black*/black }
#jobrows		{ background-color: /*#WKB*/white; color: /*#BW(WKB)?white:black*/black }
#footer			{ position: absolute; height: 40px; left: 0; bottom: 0; right: 0; color: white; text-align: center;
				  line-height: 40px; background: linear-gradient(to bottom, /*#BLEND(GHT,white,25)*/#88aadd 3px, /*#GHT*/#0065ae, /*#GHB*/#002e6f);
				  background-color: /*#GHB*/#002e6f }
#footer p		{ margin: 0; padding: 0 }
#footer a		{ color: #29f }
.toolbar,
#toolbar		{ background-color: /*#WBG*/#eeeeee; position: relative; z-index: 20; padding-left: 5px }
#curPrefix		{ text-align: center; font-weight: bold; display: block; margin: 5px auto !important; }
#handle			{ position: absolute; right: 3px; top: 50%; width: 6px; height: 20px; cursor: w-resize;
				  background: transparent url("/send-it/handle.png") no-repeat 50% 50%; display: block }
#wait			{ text-align: center; color: #888 }
#internal		{ display: none }
#viewby			{ display: inline-block; vertical-align: middle }
#webpanel		{ background-color: /*#WBG*/#eeeeee; }

/* job list mostly */
table.list		{ width: 100%; border-collapse: collapse; border: 1px solid #ddf }
table.list
thead td		{ background-color: /*#MHL*/#ddf; font-weight: bold; text-shadow: 0 1px 0 /*#BW(MHL)?black:white*/#eef;
				  background: linear-gradient(to bottom, /*#BLEND(MHL,white,50)*/#eef, /*#MHL*/#bbe 80%, /*#BLEND(MHL,white,50)*/#eef); color: /*#BW(MHL)?white:black*/black }
table.list tr:nth-child(even) td
				{ background-color: /*#ARM*/#eeeeff }

#jobs			{ border: 0; border-collapse: collapse }
#jobs thead td	{ white-space: nowrap }
#jobrows td     { padding: 3px 0 }
.searchterm		{ background-color: yellow }
a .searchterm	{ text-decoration: underline }
#jobrows
.matches		{ color: black; margin-left: 16px; display: block; font-size: 0.95em; white-space: normal }
#jobrows
.matches a		{ color: black }
.edittag		{ background-color: /*#BLEND(WKB,BW(WKB)?white:black,20)*/#e8e8f7; display: inline-block; border-radius: 4px; padding: 0 5px; text-decoration: none }
#jobrows tr:nth-child(even) .edittag
				{ background-color: /*#BLEND(ARM,BW(ARM)?white:black,20)*/#e0e0f7 }
#jobrows .edittag:hover
				{ background-color: /*#BLEND(WKB,BW(WKB)?white:black,50)*/#ccd }
#jobrows tr:nth-child(even) .edittag:hover
				{ background-color: /*#BLEND(ARM,BW(ARM)?white:black,50)*/#ccd }
#jobrows .publictag .edittag,
#jobrows tr:nth-child(even) .publictag .edittag
				{ border: 1px dotted #ffdd8c; padding: 0 4px }
.listview .site,
#jobrows .site	{ color: /*#BW(WKB)?white:black*/black!important }

.taglist:focus,
.taglist		{ background-color: /*#BLEND(WBG,white,20)*/#e8e8f7; color: #888; padding: 2px 5px; font-weight: bold }
.taglist:hover	{ background-color: /*#GHB*/#002e6f; color: white }
#goto			{ padding: 1px; margin: 0; width: 30px; font-size: 0.9em }

/* job detail tabs */

div.bg.fixed	{ background-color: /*#GTL*/#77a; color: /*#BW(GTL)?white:black*/white }
.tabs			{ display: block; height: 2em; margin: 0; padding: 5px 0 0 2px; border-bottom: 1px solid /*#BLEND(WBG,white,33)*/white;
				  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0) 85%, /*#BLEND(GTL,black,66)*/#aaa) }
ul.tabs.bg		{ background-color: #bbc; background: linear-gradient(to right, /*#GTL*/#7777aa, /*#GTR*/#aacccc);
				  box-shadow: inset 0 0 5px black }
ul.tabs li		{ height: 2em; line-height: 2em; list-style: none; display: block; min-width: 100px;
				  float: left; margin-left: 5px; text-align: center; padding-left: 5px; padding-right: 5px;
				  border-radius: 8px 8px 0 0; background: rgba(0, 0, 0, 0.1);
				  text-shadow: 0 0 3px black; color: white; box-shadow: inset 0 0 3px black }
ul.tabs li a	{ color: white; text-decoration: none }
ul.tabs li.selected
				{ font-weight: bold; z-index: 15; background: #eee; box-shadow: 0 0 5px black;
				  background: linear-gradient(to bottom, /*#STA*/#e68b2c, /*#WBG*/#eeeeee 4px, /*#WBG*/#eeeeee);
				  position: relative; border-bottom: 0; padding-bottom: 1px; text-shadow: none }
ul.tabs li.selected a
				{ font-weight: bold; color: /*#BW(WBG)?0xaaaaaa:0x555555*/#555 }
ul.tabs .pagenum
				{ font-weight: normal; color: /*#BW(WBG)?0xaaaaaa:0x555555*/#555; font-size: 0.9em }
ul.tabs li.disabled
				{ text-decoration: line-through }
ul.tabs li span { font-size: 1.1em }
ul.tabs li > span
				{ padding: 0 10px }
.config ul.tabs	{ border-bottom: 0; float: left }
#content .tabs li a
				{ padding: 15px }
.tabs.alt li.selected a
				{ text-shadow: none }
.tabs.alt a		{ color: /*#BW(GTL,180)?white:black*/#888888; text-shadow: 0 1px 0 /*#BW(GTL,180)?black:white*/white }

/* upload + notes pane */
.uploadfile		{ width: 270px; position: absolute; left: 0px; padding: 10px; z-index: 20; overflow: hidden; box-sizing: border-box }
.uploadfile ol	{ margin: 0; padding: 0 0 0 20px; }
.uploadfile
ol.nonum		{ margin: 0; padding: 0; list-style: none }

/* pagecontainer + toolbar */
#colpages		{ background-color: /*#WBG*/#eeeeee; z-index: 20; padding-top: 8px; position: absolute;
				  padding-left: 2px; left: 285px; right: 0;	}
#sz0			{ font-size: 0.8em; }
#sz2			{ font-size: 1.3em; }
a.szSel			{ font-weight: bold; color: /*#BW(WBG)?white:black*/black; text-decoration: none; }


/* job def page number display */
#jobpage		{ display: inline-block; padding: 0 15px }
#warnappr		{ display: inline-block }
#warnappr.hide	{ display: none }

/* listview style used by pages, sign, status and such */
#publication, table.listview
				{ border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #888; box-shadow: 0 0 1px #888 }
#sectionbox .listview
				{ box-shadow: none }
#sectionbox .listview th
				{ background-color: /*#SHL*/#ddd !important; text-shadow: 0 1px 0 /*#BW(SHL)?black:white*/white; padding: 1px; color: /*#BW(SHL)?white:black*/black }
#publication th	{ background: /*#BLEND(WBG,BLEND(WKB,black,10),30)*/#ddd; border-right: 1px solid /*#BW(WBG)?black:0x919B9C*/#919B9C;
				  border-bottom: 1px solid /*#BW(WBG)?black:0x919B9C*/#919B9C; text-shadow: 0 1px 0 /*#BW(WBG)?black:white*/white;
				  white-space: nowrap; padding: 2px; color: /*#BW(WBG)?white:black*/black }
#publication tr.startrow > td,
#publication tr.zonerow > td
				{ border-top: 1px solid /*#BW(WKB)?0x555566:0xddddff*/#ddf }

/* pressflo */
.column-marker.selection
				{ background-color: /*#BLEND(WKB,SEL,30)*/#e6e6ff; color: /*#BW(WKB)?white:black*/black }

/* vector page sample */
.plate			{ position: absolute; border: 1px solid #3e4555;
				  border-color: /*#BW(WKB)?BLEND(WKB,white,7):BLEND(WKB,black,50)*/#7f7f7f /*#BW(WKB)?BLEND(WKB,white,24):BLEND(WKB,black,30)*/#b2b2b2 /*#BW(WKB)?BLEND(WKB,white,24):BLEND(WKB,black,30)*/#b2b2b2 /*#BW(WKB)?BLEND(WKB,white,7):BLEND(WKB,black,50)*/#7f7f7f;
				  background-color: /*#BW(WKB)?'rgba(0,0,0,0.05)':WKB*/#ffffff; box-shadow: /*#BW(WKB)?'inset 0 0 4px black':'1px 1px 2px #aaa'*/1px/**/1px/**/2px/**/#aaa }
.plate .page	{ position: absolute }
.page			{ border: 1px solid black; box-sizing: border-box;
				  border-color: /*#BW(WKB)?BLEND(WKB,white,50):BLEND(WKB,black,35)*/#a5a5a5 /*#BW(WKB)?BLEND(WKB,black,25):BLEND(WKB,black,50)*/#7f7f7f /*#BW(WKB)?BLEND(WKB,black,25):BLEND(WKB,black,50)*/#7f7f7f /*#BW(WKB)?BLEND(WKB,white,50):BLEND(WKB,black,35)*/#a5a5a5;
				  text-align: center; background: linear-gradient(to bottom right, /*#ADD(PAG,0x282828)*/#f8f8f9, /*#PAG*/#d0d0d1); color: /*#BW(PAG)?white:black*/black }
.plate .sheet	{ background-color: rgba(248, 240, 232, /*#BW(WKB)?'0.05':'0.5'*/0.5); position: absolute }
.page.static	{ position: relative; display: inline-block; vertical-align: top; margin-left: 4px; margin-top: 4px;
				  padding: 0; text-align: center }
.page.ghost     { opacity: 0.3 }

.plate .dinky::before	{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url(/planner/images/dinky.png); background-size: 100% 100% }
.plate .dinky .cbar,
.plate .dinky span,
.plate .dinky .ext		{ display: none }
.page .cbar.delayk::after { content: ""; background: url(/planner/images/delayk.png) no-repeat 50% 50%; position: absolute; left: 75%; right: 0; top: 0; bottom: 0 }
.page.rot180 .cbar.delayk::after { left: 0; right: 75% }
.page.rot270 .cbar.delayk::after { left: 0; right: 0; top: 75%; background-image: url(/planner/images/delayk90.png) }
.page.rot90  .cbar.delayk::after { left: 0; right: 0; top: 0; bottom: 75%; background-image: url(/planner/images/delayk90.png) }

.page span				{ display: block }
.page span.disamb		{ text-decoration: underline }
.page span.lowpg		{ font-weight: 900 }
.page .fold				{ position: absolute; right: -1px; top: -1px;
						  background: linear-gradient(to bottom left, /*#WKB*/#ffffff, /*#WKB*/#ffffff 50%, black 50%, black 55%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.5)) }
.page .cbar				{ position: absolute; top: 1px; left: 1px }
.page .ext				{ position: absolute; top: 66%; left: 0; right: 0; color: /*#BW(PAG)?0xcccccc:0x888888*/#888888; text-align: center; line-height: 1em; font-size: 0.9em }

.page.rot180 span       { transform-origin: 50% 50%; transform: rotate(180deg) }
.page.rot270 span       { transform-origin: 0 0; transform: rotate(90deg) translate(0, -100%) }
.page.rot90 span		{ transform-origin: 0 0; transform: rotate(270deg) translate(-100%, 0) }

.page .cbar.cmyk		{ background: linear-gradient(to right, #00aaee, #00aaee 25%, #ee0088 25%, #ee0088 50%, #ffee00 50%, #ffee00 75%, black 75%, black) }
.page.rot90 .cbar.cmyk	{ background: linear-gradient(to top, #00aaee, #00aaee 25%, #ee0088 25%, #ee0088 50%, #ffee00 50%, #ffee00 75%, black 75%, black) }
.page.rot180 .cbar.cmyk	{ background: linear-gradient(to left, #00aaee, #00aaee 25%, #ee0088 25%, #ee0088 50%, #ffee00 50%, #ffee00 75%, black 75%, black) }
.page.rot270 .cbar.cmyk	{ background: linear-gradient(to bottom, #00aaee, #00aaee 25%, #ee0088 25%, #ee0088 50%, #ffee00 50%, #ffee00 75%, black 75%, black) }
.page .cbar.gray		{ background: linear-gradient(to right, black, #ccc) }
.page.rot90 .cbar.gray	{ background: linear-gradient(to top, black, #ccc) }
.page.ro180 .cbar.gray	{ background: linear-gradient(to left, black, #ccc) }
.page.rot270 .cbar.gray	{ background: linear-gradient(to bottom, black, #ccc) }
.page .cbar.spot		{ background: #c4953a }

/* page fold */
.page.selected			{ background: linear-gradient(to bottom right, /*#BLEND(SEL,white,50)*/#7F7FFF, /*#SEL*/#0000FF); border-color: /*#ADD(SEL,0x404040)*/#BFBFFF /*#BLEND(SEL,black,50)*/#00007F 
						  /*#BLEND(SEL,black,50)*/#00007F /*#ADD(SEL,0x404040)*/#BFBFFF; color: /*#SFG*/#ffffff }
.nopage.selected        { border-color: /*#SEL*/#0000FF }

.plate.preview .page .cbar,		.preview.page .ext,
.plate.preview .page .ext,		.preview.page .ordinal,
.plate.preview .dinky::before,
.plate.preview .fold,
.plate.preview .page span	{ display: none }

.preview.page.selected span { color: /*BW(WBG)?black:white*/black }
.preview.page				{ margin-top: 14px!important; margin-bottom: 1.3em }
.preview.page span			{ top: 100%; font-size: 1em !important; line-height: 1em !important; padding-top: 4px; position: absolute;
								  height: auto!important; width:100%!important }
.preview.page .cbar			{ top: -10px; left: -1px; right: -1px; border: 1px solid #888;
							  border-color: /*#BW(WKB)?BLEND(WKB,white,50):BLEND(WKB,black,35)*/#a5a5a5 /*#BW(WKB)?BLEND(WKB,black,25):BLEND(WKB,black,50)*/#7f7f7f /*#BW(WKB)?BLEND(WKB,black,25):BLEND(WKB,black,50)*/#7f7f7f /*#BW(WKB)?BLEND(WKB,white,50):BLEND(WKB,black,35)*/#5b637b }

.plate .rot90 .fold		{ right: auto; left: -1px; background: linear-gradient(to top left, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 50%, #5b637b 50%, #5b637b 52%, /*#WKB*/white 52%, /*#WKB*/white) }
.plate .rot180 .fold	{ right: auto; top: auto; left: -1px; bottom: -1px; background: linear-gradient(to top right, /*#WKB*/white, /*#WKB*/white 50%, #5b637b 50%, #5b637b 52%,
						  rgba(0,0,0,0.5) 52%, rgba(0,0,0,0.5)) }
.plate .rot270 .fold	{ top: auto; bottom: -1px; background: linear-gradient(to bottom right, rgba(0,0,0,0.5), rgba(0,0,0,0.5) 50%, black 50%, black 52%, /*#WKB*/white 52%, /*#WKB*/white) }

/* colorbar */
.page.rot90 .cbar		{ left: 1px; top: auto; bottom: 1px }
.page.rot180 .cbar		{ left: auto; top: auto; right: 1px; bottom: 1px }
.page.rot270 .cbar		{ left: auto; top: 1px; right: 1px }
.page.dt.rot180 .cbar	{ left: 16% }

/* extended label */
.page.rot180 .ext       { transform-origin: 50% 50%; transform: rotate(180deg); top: 20% }
.page.rot270 .ext       { transform-origin: 0 0; transform: rotate(90deg) translate(0, -150%); top: 0; right: auto; left: auto }
.page.rot90 .ext		{ transform-origin: 100% 0; transform: rotate(270deg)  translate(0, -150%); top: 0; right: 0; left: auto }
.page .ordinal			{ color: /*#BW(PAG)?0xaaaaaa:0x404040*/#404040; font-size: 0.7em!important; display: block; text-align: center; position: absolute;
						  line-height: normal; bottom: 3px; width: 100% }
.page.rot180 .ordinal   { transform-origin: 50% 50%; transform: rotate(180deg); top: 3px; bottom: auto }
.page.rot90 .ordinal    { transform: rotate(270deg) translate(-100%, -100%); bottom: auto; top: 0; left: 100% }
.page.rot270 .ordinal   { transform: rotate(90deg)  translate(0, -100%); bottom: auto; top: 0 }

.page.selected .ordinal	{ color: /*#SFG*/#ffffff }

table.listview th						{ border-right: 1px solid #919B9C }
table.listview td						{ padding-left: 3px; border-right: 0px solid white }
table.listview thead th,
table.listview thead td					{ background-color: /*#SHL*/#ddd; border-left: 1px solid #919B9C; border-bottom: 1px solid #919B9C;
										  text-shadow: 0 1px 0 /*#BW(SHL)?black:white*/white; font-weight: bold; padding: 2px; white-space: nowrap; color: /*#BW(SHL)?white:black*/black }
table.listview thead td:first-child		{ border-left: none }
table.listview thead td a				{ text-decoration: none }
table.listview thead td a:hover			{ text-decoration: underline }
table.listview.sortable thead td		{ cursor: pointer }
table.listview.sortable thead td.nosort	{ cursor: auto }
table.listview thead td img				{ width: 8px; height: 9px; visibility: hidden; vertical-align: middle }
table.listview td img					{ vertical-align: middle }
table thead td.sorttable_sorted img		{ background-image: url(send-it/sort-sign-rev.png); visibility: visible }
table thead td.sorttable_reverse img	{ background-image: url(send-it/sort-sign.png); visibility: visible }
table.listview tbody td					{ background-color: /*#WKB*/white; color: /*#BW(WKB)?white:black*/black }
table.listview tbody
tr:nth-child(even) td					{ background-color: /*#ARS*/#f1e8e1 }
table.listview tbody tr.sel td			{ color: /*#SFG*/white; background-color: /*#BLEND(SEL,white,20)*/#6666ff; padding: 2px }
table.listview tr.sel span.dim			{ color: /*#BLEND(SFG,white,40)*/#ddd }
table.listview .secname					{ text-align: right; padding-right: 5px; width: 1px; color: /*#BW(WKB)?0xaaaaaa:0x777777*/#777;
										  background-color: /*#BW(WKB)?BLEND(WKB,white,5):BLEND(WKB,black,10)*/white; border-right: 1px dotted #888; white-space: nowrap }
table.listview tbody
tr:nth-child(even) td.secname			{ background-color: /*#BW(ARS)?BLEND(ARS,white,5):BLEND(ARS,black,10)*/#d4ccc6 }
table.listview tr.selected .secname		{ color: /*#BLEND(SFG,0x888888,70)*/#888 }
table.listview.selectable td			{ cursor: pointer }
table.listview td.softbreak             { word-break: break-all }

/* alternate listview */
table.bgcol tr td						{ background-color: /*#WKB*/#f7f1ac; color: /*#BW(WKB)?white:black*/black }
table.bgcol tbody tr:nth-child(odd) td	{ background-color: /*#ARS*/#fefcd6 }
table.bgcol								{ border-collapse: collapse; border: 1px solid black; margin: 3px }
table.bgcol thead tr td					{ background-color: /*#SHL*/#053265; color: /*#BW(SHL)?white:black*/white; font-weight: bold; font-size: 1.2em }
table.bgcol thead tr td label			{ font-size: 1.2em }
table.bgcol td							{ padding: 3px }
table.bgcol.forcebg tbody tr td			{ background-color: /*#WKB*/#f7f1ac }
table.bgcol.forcebg tbody tr.odd td		{ background-color: #fefcd6 }

/* pages listview row background */
#pagerows tr td						{ padding: 1px 1px 0 1px; border-bottom: 1px solid transparent }
#pagerows tr.selected td			{ background-color: /*#BLEND(SEL,white,30)*/#6666ff; color: /*#SFG*/#ffffff;
									  border-bottom: 1px solid /*#BLEND(BLEND(SEL,white,30),black,20)*/#6565cc }
#pagerows tr.warning  td			{ background-color: #ffee80; }
#pagerows tr.selected td .error		{ color: /*#SFG*/#ffffff; }
#pagerows tr.warning.selected td	{ background-color: #8077bf; }
#pagerows tr.error td				{ background-color: #ffcccc; }
#pagerows tr.error.selected td		{ background-color: #8066e5; }
#pagerows tr.selected a:link		{ color: /*#BLEND(SFG,black,20)*/#ccccff; }
#pagerows tr:last-child td			{ border-bottom: 1px solid #888 }

/* toolbar-like buttons */
.toolButton							{ display: inline-block; position: relative; margin-right: 6px; text-align: center; text-decoration: none; vertical-align: top }
.toolButton:hover					{ text-decoration: underline }
.toolButton.text:hover				{ text-decoration: none }
.toolButton.text span:hover			{ background-color:/*#BLEND(SEL,white,20)*/#6666ff!important; color: /*#SFG*/white!important }
.toolButton.disabled				{ text-decoration: none; color: #888; text-shadow: 1px 1px 0 /*#BW(WBG)?black:white*/white; opacity: /*#BW(WBG)?'0.3':'1'*/1 }
.toolButton img						{ border: 0; display: block; margin-left: auto; margin-right: auto; height: 32px }
.separator							{ display: inline-block; padding-top: 32px; border-right: 2px groove /*#WBG*/white; margin-right: 5px;
									  margin-bottom: 4px; vertical-align: middle }
.separator + .separator				{ display: none }
.config a.toolButton.disabled span	{ text-decoration: line-through }
.config a.toolButton				{ margin-right: 10px }

/* pill buttons for mutually exclusive options */
.btn.pill-l				{ background-position: left bottom; border-right: 1px solid /*#BLEND(WBG,black,70)*/#bbb; border-radius: 4px 0 0 4px }
.btn.pill-r				{ border-left: 1px solid /*#BLEND(WBG,white,20)*/white; background-position: right bottom; border-radius: 0 4px 4px 0 }
.btn.pill-c				{ border-left: 1px solid /*#BLEND(WBG,white,20)*/white; border-right: 1px solid /*#BLEND(WBG,black,70)*/#bbb; border-radius: 0 }
.btn.active				{ background: linear-gradient(to bottom, /*#SEL*/#353872, /*#BLEND(SEL,white,25)*/#2a60a8); color: white; box-shadow: inset 1px 1px 3px black;
						  border: 0; padding: 1px 9px; border-bottom-color: white }
.btn.active span span	{ color: white }
a.btn					{ color: /*#BW(WBG)?0xaaaaaa:0x444444*/#444 }
.btn					{ margin:0; padding: 0 8px; border: 1px solid /*#BLEND(WBG,black,60)*/#555; overflow:visible; text-decoration:none;
						  color:/*#BW(WBG)?0xaaaaaa:0x444444*/#444; background: linear-gradient(to bottom, /*#BLEND(WBG,white,15)*/#fff, /*#WBG*/#eee 80%, /*#BLEND(SEL,WBG,80)*/#BDBDF1);
						  border-radius: 4px; line-height: 24px; display: inline-block; cursor: pointer }

#fmtfilter		{ white-space: nowrap }
#pgsubmit		{ position: absolute; left: -9999px; width: 1px; height: 1px }

.site			{ text-decoration: none; color:/*#BW(WBG)?white:black*/#000!important }
.site::before	{ content: url("/planner/images/extern.png"); margin-right: 5px }
#filterSite		{ margin-right: 8px }

/* color chooser in settings */
.cc div			{ display: inline-block; vertical-align: middle; width: 16px; height: 16px }
.cc div.text	{ width: auto; vertical-align: baseline }
#satval			{ width: 200px; height: 150px; display: inline-block; background-color: yellow; margin: 5px 5px 0 5px;
				  cursor: crosshair; position: relative }
#hue			{ width: 16px; height: 150px; display: inline-block; margin: 5px 5px 0 5px; position: relative;
				  background: linear-gradient(to bottom, #f00, #f0f 17%, #00f 33%, #0ff 50%, #0f0 67%, #ff0 83%, #f00) }
#cc .curs		{ position: absolute }
#hexval			{ margin-left: 5px }
#hue .curs		{ width:  7px; height: 11px; background-image: url("/send-it/arrow.gif"); margin: -5px 0 0 -7px }
#satval .curs	{ width: 15px; height: 15px; background-image: url("/send-it/cross.gif"); margin: -7px 0 0 -7px }

/* alert window */
#alerts       { position: absolute; left: 10%; right: 10%; top: 10%; min-height: 300px; max-height: 80%; border: 5px solid #f22;
                overflow: auto; background-color: white; box-shadow: 4px 4px 8px #888; border-radius: 8px; z-index: 50 }
#alerts table { box-shadow: none; border-collapse: collapse; width: 100% }
#alerts table tbody tr td:first-child > span
              { display: list-item; margin-left: 16px }
#alerts table tr.new td:first-child span:before
              { content: "new"; display: inline-block; color: white; background-color: #2a2;
                border-radius: 10px; padding: 0 8px; margin-right: 3px }
#alerts .mono { font-family: monospace; white-space: pre-line }
#alerts tbody tr:nth-child(even) td
              { background-color: #fefcd6 }
#alerts td:last-child
              { white-space: nowrap }
#alerts tbody td
              { color: #888; padding: 5px 5px 5px 0 }
#alerts .new td
              { color: black }
#alerts thead tr
              { background-color: #faa; border-bottom: 1px solid #f22; text-shadow: 0 1px 0 white; font-weight: bold;
                padding: 2px; white-space: nowrap }
#alerts thead td img
              { vertical-align: middle; padding-right: 2px }

/* drag'n drop uploader */
.uploader     { max-height: 200px; overflow: auto }
.uploader .error
              { margin-right: 20px }
.uploader .listview
              { box-shadow: none }
.pgbar        { width: 100%; border: 1px solid #888; position: relative; margin-top: 5px; text-align: center;
                background-color: #d9d9d9; color: black; background: linear-gradient(to bottom, #e0e0e0, #ededed, #ccc, #dcdcdc) }
.pgbar div    { position: absolute; left: 0; top: 0; bottom: 0; background-color: #9bca64;
                background: linear-gradient(to bottom, #b1e081, #c9eca6, #7a3, #a6d971) }
.pgbar span   { position: relative; z-index: 10 }
.queue        { width: 100%; margin: 4px 0 }

/* jobdef */
.sectitle     { display: block; text-align: left; border-bottom: 1px solid #aaa; margin: 3px 0 4px 3px; padding-left: 5px;
                clear: left; font-weight: bold }

.lasso        { position: absolute; border: 1px dashed /*#SEL*/blue; z-index: 30 }
.imgStatus    { margin-left: 3px; vertical-align: middle }
img.format    { border: 0; padding-left: 3px; vertical-align: bottom }


/* group of pages in icon view (pages or sign) */
#pageGroup    { border-top: 1px solid /*#BW(WKB)?0x222222:0xcccccc*/#ccc; background-color: /*#WKB*/#f8f8f8 }
.group        { margin-top: -1px; display: block; float: left; padding: 2px 8px; border-style: solid;
                border-width: 0 1px 0 0; border-color: white #777 #777 white; cursor: pointer; color: #888;
                text-decoration: none }
.group:hover  { text-decoration: underline }
.group.first  { border-left-color: /*#WBG*/#eeeeee }
.group.sel    { outline: 0; border-left-color: /*#BW(WKB)?0x555555:0xeeeeee*/#eeeeee; background: /*#WBG*/#eeeeee;
                color: /*#BW(WBG)?white:black*/black!important; cursor: auto; font-weight: bold; text-decoration: none }



#pageContainer          { border-top: 1px solid /*#BLEND(WKB,black,50)*/#ccc; border-left: 1px solid /*#BLEND(WKB,black,50)*/#ccc; overflow: auto; background: /*#WKB*/white;
                          padding: 5px; left: 0; right: 0; margin-top: 5px; color: /*#BW(WKB)?white:black*/black }
#pageContainer.status   { z-index: 20; background: linear-gradient(to bottom, /*#WBG*/#eee, /*#WKB*/white 50px); margin-top: 0 }
#pageContainer.nopad    { padding: 0 0 3px 0; margin-top: 0 }

.listview a,
#pageGroup a,
#jobrows a,
#pageContainer a		{ color: /*#BW(WBG)!=BW(WKB)?BLEND(LOC,BW(WKB)?white:black,50):LOC*/blue }
.ppitweb .panelbg fieldset,
.ppitweb .tbbg fieldset	{ background-color: /*#BW(WBG)!=BW(BBG)?(BW(BBG)?'rgb(255,255,255,0.1)':'rgba(0,0,0,0.1)'):'transparent'*/transparent }

div.pages         { display: inline-block; border: 0; margin: 2px; padding: 2px; text-align: center; vertical-align: top }
div.pages.warning { background-color: #ffee80 }
div.pages.interr  { background-color: #ffbbbb }
div.pages .extra  { padding-top: 2px }
div.pages .number { font-size: 1.334em }
div.pages .dim    { font-size: 0.85em }
div.pages .view   { margin-left: auto; margin-right: auto }
div.pages div.extra			{ font-size: 0.92em }
div.pages         .thumbnail  { display: block; border: 1px solid #ddd; position: relative }
div.pages   .ghost.thumbnail  { opacity: 0.3 }
div.pages.warning .thumbnail  { border-color: #ddce6f }
div.pages.interr  .thumbnail  { border-color: #dda2a2 }
div.pages .thumbnail.selected { border-color: /*#SEL*/blue }
div.pages .thumbnail div.mask { display: none }
div.pages .thumbnail.selected div.mask {
	position: absolute; background-color: /*#SEL*/blue; opacity: 0.4;
	bottom: 0; width: 100%; top: 0; display: block
}

div.pagedetail.selected { background-color: /*#SEL*/#6666ff; color: /*#SFG*/white }
div.pagedetail { border-bottom: 2px solid black; padding-right: 8px }
div.pagedetail::after { content: ""; display: block; clear: both }
div.pagedetail div.thumb { display: inline-block; margin: 8px; border: 1px solid #ddd }
div.pagedetail div.thumb img { display: block }
div.pagedetail div.thumb img.cbar::after { content: "\A"; white-space: pre-line }
div.pagedetail div.text  { display: inline-block; vertical-align: top; margin-top: 8px }
div.pagedetail span.first  { font-weight: bold }
div.pagedetail span        { line-height: 1.4em; display: block }
div.pagedetail span.com    { display: inline }
div.pagedetail .screen  { float: right; padding-left: 10px }
div.pagedetail .screen table { border-collapse: collapse; font-size: 0.9em }
div.pagedetail.selected .screen thead td { border-bottom: 1px solid /*#SFG*/white }
div.pagedetail .screen thead td { border-bottom: 1px solid /*#BW(WBG)?white:black*/black }
div.pagedetail .screen td { padding: 0 3px; vertical-align: middle }
div.pagedetail .screen tbody td img { vertical-align: middle }

#pageContainer table.listview tr.interr td { background-color: #ffbbbb }

#pageContainer div.pages div.bgIntent     { background: white url("send-it/NA.png") no-repeat 50% 50% }
#pageContainer div.pages div.bgIntent.rev { background: #d7ebb5 url("send-it/NA-rev.png") no-repeat 50% 50% }
#pageContainer div.pages div.frameIntent  { border: 1px solid #ddd; margin-left: auto; margin-right: auto; line-height: 1px }
#pageContainer div.pages img.comment      { margin-left: 3px; vertical-align: middle }
#pageContainer #publication,
#pageContainer #pagelist    { box-shadow: none }


.view         { position: relative }
.jdboxname    { color: black; line-height: normal; opacity: 0.8; padding: 0; position: absolute; bottom: 3px; left: 0;
                right: 0; height: 14px; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 white }
.jdbox0 .view { border: 1px solid #aaa;    background-color: #ccc }
.jdbox1 .view { border: 1px solid #58a200; background-color: #58a200; }
.jdbox2 .view { border: 1px solid #ff6796; background-color: #ff6796; }
.jdbox3 .view { border: 1px solid #1ea1ac; background-color: #1ea1ac; }

.pages.jdbox0 div.frameIntent { border: 1px solid #777;   }
.pages.jdbox1 div.frameIntent { border: 1px solid #58a200 }
.pages.jdbox2 div.frameIntent { border: 1px solid #ff6796 }
.pages.jdbox3 div.frameIntent { border: 1px solid #1ea1ac }

.pages .trim  { color: #58a200 }
.pages .bleed { color: #ac0035 }
.pages .crop  { color: #1ea1ac }

/* status for signatures using impose-it publication template */
.status      td.icon { padding-left: 15px !important; background-repeat: no-repeat; background-position: 2px 50%; white-space: nowrap }
.missing     td.icon { background-image: url("/send-it/unknown-mark.png") }
.waiting     td.icon { background-image: url("/send-it/warn-mark.png") }
.notuptodate td.icon { background-image: url("/send-it/reject-mark.png") }
.ok          td.icon { background-image: url("/send-it/accept-mark.png") }

#addOpt         { font-style: italic }
#nosp           { font-style: italic; padding: 5px 0; width: auto; text-align: center }
#userEdit.small { width: 50%; float: left; margin-right: 5px }
#userEdit .layout input { width: 100%; box-sizing: border-box }
#autoremove td  { text-align: center; padding: 10px }
#autohide ul    { margin: 0; padding-left: 20px }

#filerows       { overflow: auto }
#filerows input { margin: 0; padding: 0 }
#filetools      { font-size: 0.9em }
#filetools img  { vertical-align: middle }
#filetools a    { text-decoration: none }
#filerows div.filename
                { border-bottom: 1px solid #ccc; padding-bottom: 3px; margin-bottom: 8px }
#filetools a:hover
                { text-decoration: underline }
#colpages .filename
                { vertical-align: middle; margin-left: 5px; display: inline-block }
#colpages [state="processing"]
                { padding-left: 16px; background: transparent url("/send-it/processing.gif") no-repeat 0 50% }
#colpages [state="error"]
                { color: red; font-weight: bold }
#colpages .filename span img { padding-right: 5px; cursor: pointer }
#colpages .filename .dim,
#colpages .filename br,
#colpages #waitnote > a,
#colpages .filename input { display: none }
#colpages .jobStatus { visibility: hidden }
#colpages .jobStatus .reject:first-child
                { visibility: visible; background-color: #f66; color: #ffffff;
                  padding: 0 1em; border-radius: 1em; margin-left: 5px; text-decoration: none }
#colpages .jobStatus .reject:last-child { display: none }

#files .highlight           { background-color: yellow; color: black }
#files .deleted td.filename { text-decoration: line-through }
#files tr td.filename span  { padding-left: 10px; display: block }

/* menu popup (toolbutton, queue list) */
div.popup					{ position: absolute; margin-top: 14px; padding: 0 !important; z-index: 30 !important; box-shadow: 1px 1px 4px /*#BLEND(WKB,black,33)*/#555 }
div.popup a					{ text-decoration: none }
div.popup span,
div.popup a					{ display: block; padding: 1px 5px }
div.popup div.border		{ border: 2px solid black; background-color: white; color: black; padding: 1px; margin: 0 }
div.popup div.border.wbg	{ border: 2px solid black; background-color: /*#WBG*/white; color: /*#BW(WBG)?white:black*/black; padding: 1px; margin: 0 }
div.popup div.wbg::before   { content: ""; border: 20px solid; border-top-width: 0; border-color: transparent transparent #000 transparent; width:0;
							  position: absolute; left: 5px; top: -18px }
div.popup div.wbg::after    { content: ""; border: 18px solid red; border-top-width: 0; border-color: transparent transparent /*#WBG*/white transparent;
							  width:0; position: absolute; left: 7px; top: -16px }
div.popup img.arrow			{ display: block; position: absolute; left: 8px; top: -14px }
div.popup.ralign img.arrow	{ left: auto; right: 8px }
div.popup img.arrow.down	{ left: 8px; bottom: -14px; top: auto }
div.popup span img			{ vertical-align: middle }
div.popup div.column		{ width: auto; display: inline-block; vertical-align: top }
div.popup div br			{ clear: left }
div.popup a:hover,
div.popup span:hover		{ background-color: /*#BLEND(SEL,white,30)*/#6666ff; color: white; cursor: pointer }
div.popup div.column.follow	{ border-left: 1px solid #ccc }
div.popup.down				{ margin-top: 0 }
div.popup.down img.arrow	{ top: auto; bottom: -14px; transform: rotate(180deg) }
div.popup span.select		{ color: #888 }
div.popup .menuitem			{ padding-left: 16px }
div.popup .menuitem.selected::before { content: "\25cf \a0"; display: inline-block; width: 16px; text-align: right }
div.popup .menuitem.selected { padding-left: 0 }

/* configuration related stuff */
#configarea   { position: relative; z-index: 20; border: 0; padding: 10px; margin: 0; background: /*#WBG*/#eeeeee }
#configarea fieldset
              { margin-bottom: 20px }
fieldset.line { margin-bottom: 0!important; border-bottom-width: 0; border-left-width: 0; border-right-width: 0;
                border-radius: 0; padding-left: 0; padding-bottom: 0; margin-top: 5px }
fieldset.line legend:before
              { content: "\25ba\a0" }

.config #tool256
              { color: #bbb }
.config .auth a
              { color: white; text-decoration: none }
.config .auth { position: static }
.config .header
              { display: inline-block; padding-top: 6px }
.config .header a.disabled
              { text-decoration: line-through }

/* Archiving progress bar */
.progress     { display: inline-block; width: 100px; border: 1px solid black; height: 10px; background-color: white; color: black }
.channel      { display: block; background-color: /*#BLEND(SEL,white,25)*/#3f3fff; height: 100% }

/* file number waiting for processing */
#waitnote > span
              { font-variant: small-caps }
#waitnote ul  { margin: 0; padding: 0 0 0 16px }
#waitnote .number
              { font-size: 1.2em; background-color: green; border-radius: 10px; color: white; padding: 0 5px }

/* error notification */
#mail         { width: 50px; height: 44px; background-image: url(send-it/mailshadow.png); position: absolute; right: 50px;
                background-repeat: no-repeat; background-position: 50% 50%; top: 0; cursor: pointer }
#mail.dim     { opacity: 0.05 }
#mail.dim:hover { opacity: 0.7 }

/* multi-section flat, taken from planner.css */
span.custnum   { padding: 0 0.5em; border-radius: 1em }
.section1  { background-color: #2261a9; color: white }
.section2  { background-color: #65a100; color: white }
.section3  { background-color: #ff5de6; color: white }
.section4  { background-color: #ffca00; color: black }
.section5  { background-color: #ff5e3e; color: white }
.section6  { background-color: #9000a0; color: white }
.section7  { background-color: #007723; color: white }
.section8  { background-color: #4e2100; color: white }
.section9  { background-color: #ff2856; color: white }
.section10 { background-color: #6c26d4; color: white }
.section11 { background-color: #5e81ff; color: white }
.section12 { background-color: #00be91; color: white }
.section13 { background-color: #8c0018; color: white }
.section14 { background-color: #c16c00; color: white }
.section15 { background-color: #d8bdff; color: white }
.section16 { background-color: #90fff4; color: black }

/* multi-site */
.hdr td span { background-color: #555; padding: 2px 10px 2px 5px; border-radius: 4px; white-space: nowrap; color: white }
.hdr td span:before { content: "\00d7\00a0"; color: #FFAAAA; visibility: visible }
.hdr td { padding: 3px 2px; background: /*#BLEND(WBG,black,10)*/#f0f0f0!important; border-bottom: 1px solid #999; border-top: 1px solid #999;
		color: black; box-shadow: 0 0 5px /*#BW(WBG)?black:0xcccccc*/#ccc inset }
.hdr td:before { display: none }

/* template editor only so far */
.tabpane.tab-pane				{ position: relative; width: 100% }
.tabpane .tab-row .tab 			{ position: relative; border: 1px solid /*#BLEND(WKB,black,50)*/#888; top: 0; float: left; overflow: hidden; cursor: default; margin: 1px -1px 0px 2px;
								  padding: 2px 20px 1px; z-index: 1; font-weight: normal; white-space: nowrap; text-align: center; background-color: rgba(0,0,0,0.05) }
.tabpane .tab-row .tab.selected	{ background: linear-gradient(to bottom, /*#STA*/#e68b2c, /*#BW(WBG)?WBG:white*/white 4px, /*#BW(WBG)?WBG:white*/white);
								  background-repeat: no-repeat; border-bottom-width: 0; z-index: 3; margin: 1px -3px 0 0px; top: -1px; padding-bottom: 3px }
.tabpane .tab-row .tab.selected	a { color: /*#BW(WBG)?white:black*/black; font-weight: bold }
.tabpane .tab-row .tab a		{ color: #aaa; text-decoration: none; cursor: default; display: block; top: -2px }
.tabpane .tab-row .tab.hover	{ background: linear-gradient(to bottom, /*#STA*/#e68b2c, /*#BW(WBG)?WBG:white*/#fff 4px, /*#BW(WBG)?WBG:white*/#fff);
								  background-repeat: no-repeat }
.tabpane .tab-page				{ clear: both; border: 1px solid /*#BLEND(WKB,black,50)*/#888; background: /*#BW(WBG)?WBG:white*/#fff; z-index: 2; margin-bottom: 5px;
								  position: relative; top: -2px; font-family: sans-serif; font-size: 12px; color: color: /*#BW(WBG)?white:black*/black; padding: 4px 2px 2px 2px }
.tabpane .tab-row				{ z-index: 1; white-space: nowrap }
.tabpane .tab-page				{ min-height: 350px; padding: 8px }

.colsel { background-color: /*#BW(WBG)?'rgba(255,255,255,0.3)':'rgba(0,0,0,0.3)'*/#eee }

#selcount { border: 2px solid /*#BLEND(SEL,white,75)*/#999900; background-color: /*#SEL*/#6666ff; padding: 3px; border-radius: 50%; color: /*#SFG*/white;
            position: absolute; left: 60%; bottom: 30%; font-size: 0.8em; font-family: Georgia, serif }