body {
font: 12px Arial;
background: #A0A0A0;
}
a { color: inherit;  text-shadow: 0 0 2px rgba(0,0,255,.3); }
a:hover { text-shadow: 0 0 2px rgba(100,255,255,.5); }

#afbody { overflow:hidden;}

.text_selectable {
-moz-user-select: text;
-webkit-user-select: text;
}
#content, #header, #footer, .monitor {
-moz-user-select: none;
-webkit-user-select: none;
}
.hide_childs > * { display: none; }
#content, #header, #footer * {
margin: 0;
padding: 0;
overflow: hidden;
}
.ease_transition {
-o-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
#header,#footer {
position: absolute;
left: 0; right: 0;
border: 2px solid #575757;
box-shadow: 0px 0px 5px #000;
overflow: hidden;
}
#header { height: 226px; top: 0px; }
#header { height: 226px; top: -200px; }
#headermain {
position: absolute;
left: 0; right: 0; bottom: 0; top: 200px;
}
#footer { border-bottom-width: 0; }
#headermain .mbutton {
font: 16px Arial;
font-weight: bold;
float: left;
border: 2px solid #575757;
border-radius: 2px 2px 4px 4px;
margin: -8px 10px;
padding: 6px 12px 3px 12px;
cursor: pointer;
text-align: center;
color: #222;
}
#headermain .mbutton.pushed {
background: #EFD;
color: #353;
box-shadow: 0px 0px 8px #250 inset, 0px 0px 10px rgba(255,255,255,.7);
}
#header .mbutton.god_only { display: none;}
#header.su_god .mbutton.god_only { display: inline; }

#content {
position: absolute;
left: 0; right: 0;
padding: 0; margin: 0;
top: 28px;
bottom: 26px;
overflow: hidden;
border: 2px solid #575757;
}

#footer { height: 26px; bottom: 0px; font-size: 12px;}
#footer.opened { bottom: 0;}
#footeropenbutton, #headeropenbutton, #log_btn, #netlog_btn {
cursor: pointer;
text-align: center;
}
#header_panel_right {
	float: right;
	margin-right: 12px;
}
#header_panel_right > div {
	margin: 2px;
	padding: 4px 8px;
	float: left;
}
#footeropenbutton, #headeropenbutton {
border: 1px solid #575757;
border-radius: 2px;
float: left;
width: 12px; height: 18px;
margin: 3px;
}
#footer #log_btn, #netlog_btn {
border: 1px solid #575757;
border-bottom-width: 0;
float: right;
display: none;
padding: 3px 6px;
margin: 5px 3px 0px 6px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#footer #log_btn.pushed, #netlog_btn.pushed { background-color: rgba(150,255,255,.3); }
#footer #info {
border: 1px solid #575757;
padding: 3px 9px;
margin: 2px 24px;
border-radius: 2px;
}
#footer #version {
float: right;
padding: 3px; margin: 3px;
}
#footer #log, #netlog {
clear: both;
border: 1px solid #575757;
overflow: auto;
word-wrap:break-word;
display: none;
padding: 3px 9px; margin: 0px 9px;
border-radius: 2px;
height: 190px;
}
#footer #log *, #footer #netlog * { margin: 4px 0px;}

.button {
cursor: pointer;
text-align: center;
border: 1px solid #575757;
border-radius: 2px;
margin: 2px;
padding: 2px 6px;
background-color: rgba(150,255,255,.1);
-moz-user-select: none;
-webkit-user-select: none;
}
.button:hover { background-color: rgba(150,255,255,.3); }
.button.delete {
background-image: url(/lib/icons/delete.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 12px; height: 12px;
margin: 0; padding: 0;
}

.monitor {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
font-size: 12px;
overflow: hidden;
}
.monitor * { overflow: hidden; }

.view {
position: absolute;
left: 100px; right: 400px;
top: 0; bottom: 0;
}
.panel {
position: absolute;
top: 0; bottom: 0;
}
.panel.left {
left: 0;
width: 98px;
border-right: 2px solid #575757;
}
.panel.right {
right: 0;
width: 398px;
border-left: 2px solid #575757;
overflow-y: auto;
word-wrap: break-word;
}
.panel.right .node_name {
padding: 4px;
text-align: center;
font-weight: bold;
}
.panel.right .section {
padding: 4px;
border-bottom: 2px solid #575757;
opacity: .5;
}
.panel.right .section.active { opacity: 1.0; }
.panel.right .section .caption {
cursor: pointer;
font-weight: bold;
margin: 4px 8px;
}
.panel.right .section .param {
clear: both;
padding: 6px 20px;
border-top: 1px solid #575757;
}
.panel.right .section .param .label {
float: left;
}
.panel.right .section .param .value {
float: right;
}
.panel.right .section.folders .rules_link {
float: right;
display: none;
}
.panel.right .section.folders .label {
font-style: italic;
}
.panel.right .section.folders .cgru_cmdexec {
float: left;
margin-right: 8px;
}
.panel.right .info_body {
padding: 0 12px;
}

.monitor .ctrl,.info {
position: absolute;
left: 0; right: 0;
height: 28px;
-box-shadow: 0px 0px 6px #000, 0px 0px 4px rgba(255,255,255,.7) inset;
}
.monitor .ctrl { top: 0; border-bottom: 2px solid #575757;}
.monitor .info { bottom: 0; border-top: 2px solid #575757;}
.monitor .list {
position: absolute;
left: 0; right: 0;
overflow: auto;
top: 30px;
bottom: 30px;
}

.panel .ctrl_button {
border: 1px solid rgba(89,89,89,.5);
border-radius: 2px;
margin: 3px;
padding: 4px 2px;
text-align: center;
cursor: default;
opacity: .5;
}
.panel.right .ctrl_button { float: right; margin: 0px; padding: 1px 8px; }
.panel .ctrl_button.active { cursor: pointer; opacity: 1.0; }
.panel .ctrl_button.active:hover { background-color: rgba(150,255,255,.2); }
.panel .ctrl_button.errors { background-color: rgba(255,0,0,.8); }
.panel .ctrl_button.errors:hover { background-color: rgba(255,0,0,1.0); }
.panel .ctrl_button .sub_button {
border: 1px solid rgba(89,89,89,.5);
border-radius: 2px;
padding: 4px 2px;
}
.panel .ctrl_button.active .sub_button:hover { background-color: rgba(150,255,255,.4); }

.panel .ctrl_button.clicked, .panel .ctrl_button .sub_button.clicked, .panel .ctrl_button.clicked:hover {
background-color: #FFF;
box-shadow: 0 0 4px #FFF;
}

.ctrl_sort, .ctrl_filter, .ctrl_hidden {
position: absolute;
margin: 3px 8px;
}
.ctrl_sort   { left: 5px; width: 124px; }
.ctrl_filter { left: 138px; right: 40px; }
.ctrl_hidden { width: 30px; right: 0px;
border: 1px solid #575757; border-radius: 2px; margin: 5px; padding: 2px; text-align: center; cursor: pointer; }
.monitor.show_hidden .ctrl_hidden { background-color: #FC6; }
.ctrl_filter.filtering { background-color: #FC6; color:#000; }
.ctrl_sort.sorting { background-color: #FC6; color:#000; }
.ctrl_sort .label, .ctrl_filter .label { float: left; margin: 5px 10px; width: 30px;}
.ctrl_filter .param, .ctrl_sort .param 
{
font: 11px monospace;
float: left;
border: 1px solid #575757;
border-radius: 2px;
margin: 2px;
padding: 2px 0px;
width: 60px;
cursor: pointer;
text-align: center;
}
.ctrl_filter .input
{
position: absolute;
font: 11px monospace;
border: 1px solid #575757;
border-radius: 2px;
left: 120px; top: 0px; bottom: 0px; right: 10px;
margin: 2px; padding: 3px;
background-color: rgba(255,255,255,.2);
}
.monitor .info .text {
position: absolute;
top: 4px; left: 8px; right: 8px; bottom: 3px;
background: rgba(255,255,255,.2);
border: 1px solid #575757;
border-radius: 2px;
padding: 4px 8px;
}

.item {
background: rgba(255,255,255,.3);
border: 1px solid #575757;
position: relative;
margin: 3px;
padding: 1px 7px;
border-radius: 4px;
cursor: default;
}
.ONL { background: #787;}
.NbY { background: #88F;}
.NBY { background: #77F;}
.WDP { background: #969;}
.SUS { background: #881;}
.WTM { background: #599;}
.PAU { background: #888;}
.DON { background: #486;}
.WRN { background: #292;}
.PPA { background: #CC6;}
.RUN { background: #8A6;}
.ERR { background: #965;}
.RER { background: #F77;}
.WRC { background: #4AC;}
.OFF, .item.task.SKP { background: #777;}
.SIC {background: #F55;}
.DRT { border: 1px solid #F00;}
.item.hidden { display: none;}
.monitor.show_hidden .item.hidden { display: block; opacity: .5;}
.item.selected, .item.task.selected {
background: #DFD;
color: #000;
}

.item .annotation {
clear: both;
text-align: center;
font-weight: bold;
font-style: italic;
}

.lowercase {
text-transform: lowercase;
}

.service, .disabled_service {
margin: 1px 4px;
padding: 1px 4px;
border-radius: 2px;
}
.service {
font-weight: bold;
float: left;
border: 1px solid #555;
}
.service.ticket.host {
float: right;
}
.service.running {
border: 1px solid #FF5;
font-style: italic;
}
.service.limit_reached {
border: 1px solid #F55;
}
.disabled_service {
float: right;
border: 1px solid #F55;
}
.service.dummy {
font-weight: normal;
border: 1px dashed #FF5;
}
/*
	.service.disabled is a configured service that is temporary disabled
	.disabled_service is not a service that is disabled, it is not a service
 */
.service img { width: 14px; height: 14px; float: left; margin: 1px 2px;}
.service.ticket img { width: auto;}
.info_services .service .name { padding: 4px; }
.info_services .disabled_service .name { padding: 2px 4px; }
.info_services .service img { width: 24px; height: 24px; }
.info_services .service.ticket img { width: auto; height: 24px; }
.service.disabled { opacity: 0.7; border: 1px solid #F55;}
.service.disabled div { text-decoration: line-through; font-style: italic;}
.disabled_service { text-decoration: line-through;}
.service .button.delete, .disabled_service .button.delete { float: right;}
/*
	serivces are shown in a pool/render item and in the right panel info
*/
.info_services {
border-top: 1px solid #555;
margin-top: 4px;
padding-top: 4px;
}

.render .resources {
background: #EEEE99;
position: absolute;
top: 0;
left: 54%;
width: 0;
overflow: visible;
}

.item.render .tickets {
float: right;
}

.item.render .plotter {
background: #000;
border: 1px solid #575757;
border-radius: 2px;
position: absolute;
}

.item.render .plotter .label {
color: #FF3;
font-size: 10px;
font-weight: normal;
position: absolute;
top: 2px; left: 2px;
}
.item.render .plotter.custom {
position: relative;
float: left;
}
.item.render .plotters_custom_div {
width: 100%;
}
.item.render .power {
position: absolute;
text-align: center;
top: 1px; left: 0; right: 0;
}

.item.job { /*height: 24px;*/}
.item.job .thumbnails { /*border-radius: 3px; border: 1px solid #575757;*/ }
.item.job .thumbnails > div { margin: 1px 1px; border-radius: 2px; /*border: 1px solid #575757;*/ float: left; position: relative; }
.item.job .thumbnails > div > div { font-size: 9px; position: absolute; right: 0px; padding-right: 4px; word-break: keep-all; }
.item.job .thumbnails > div > img { display: block; margin-top: 12px; border-radius: 2px; }

.jobblock {
clear: both;
margin: 2px;
padding: 2px 5px;
border-radius: 2px;
border: 1px solid #575757;
}
.jobblock.selected {
background: #DFD;
}

.jobblock .ticket { float: left; margin: 0px 4px; }
.jobblock .ticket img { width: auto; height: 14px; float: left; }
.jobblock .ticket .label { font-size: 12px; }

.item.block {
margin: 4px 4px 0px 4px;
height: 24px;
}

.item.task {
margin: 1px 10px 0px 10px;
padding: 0px 4px;
border-radius: 0px;
}

.task .bar, .task .body {
position: absolute;
}
.task .bar {
background: #486;
top: 2px; bottom: 2px; left: 0; width: 0;
box-shadow: 0px 0px 3px #486;
opacity: 0.9;
}
.task .body {
top: 0; bottom: 0; left: 18px; right: 5px;
}
.task .thumbs_btn {
cursor: pointer;
float: left;
text-align: center;
border: 1px solid #555;
width: 10px; height: 10px;
}
.task .thumbs {
clear: both; text-align: center;
box-shadow: 0px 0px 3px #000 inset;
border-radius: 4px;
margin: 2px; padding: 2px;
}
.task .thumbs img {
border-radius: 3px;
border: 1px solid #555;
margin: 2px;
}

.user .bar {
position: absolute;
top: 0; bottom: 0; left: 0; width: 0;
margin-right: 2px;
background: #FF4;
border-radius: 3px;
text-align: center;
-border: 1px solid #575757;
border-radius: 2px;
}

.jobblock .progress {
clear: both;
border: 1px solid #575757;
margin: 2px;
border-radius: 2px;
}
.jobblock .progress .bar {}
.jobblock .progress .DON { background: #363;}
.jobblock .progress .RUN { background: #FF0;}
.jobblock .progress .ERR { background: #F00;}
.text.ERR { border-radius: 4px; padding: 0px 5px; }

.item .name {
font-size: 14px;
/*font-weight: bold;*/
}

.render .temp_box {
display: none;
position: absolute;
height: 3px;
left: 50px;
top: 16px;
width: 10%;
border-radius: 2px;
box-shadow: 0px 0px 2px #000 inset;
}
.render .temp_box .temp_bar {
background: #000;
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 2px;
}
.render .idle_box {
display: none;
position: absolute;
height: 5px;
right: 5px;
top: 14px;
width: 15%;
border-radius: 2px;
box-shadow: 0px 0px 2px #000 inset;
}
.render .idle_box .idle_bar {
background: #000;
position: absolute;
left: 0; top: 0; bottom: 0;
border-radius: 2px;
opacity: .3;
}
.render .idle_box.nimby .idle_bar { background: #00F; opacity: .4; }
.render .idle_box.free .idle_bar { background:  #F00; opacity: .3; }
.render .idle_box.wol .idle_bar   { background: #FF0; opacity: .5; }

/*.item.render .task {*/
.rendertask {
font-weight: bold;
background: #DD5;
margin: 1px;
/*border: 1px solid #666;*/
position: relative;
}
.rendertask .body {
position: relative;
padding: 1px 5px;
border: 1px solid #575757;
border-radius: 2px;
}
.rendertask .bar {
position: absolute;
background: #55AA44;
left: 0; top: 0; bottom: 0;
}
.rendertask .ticket { float: left; margin: 0px 3px; }
.rendertask .ticket img { float: left; width: auto; height: 14px; }
.rendertask .ticket .label { float: right; font-size: 10px; font-weight: normal; margin: 1px; }
/*
.rendertask .icon {
position: absolute;
width: 16px; height: 16px;
}
*/
/*
.font-ready { opacity: .7;}
.font-run   { color: #FF0;}
.font-done  { color: #130;}
.font-error { color: #F00;}
*/

.item > .prestar { margin-left: 56px;}
.item.render > .prestar { margin-left: 46px;}
.star {
display: none;
font-size: 26px;
/*border: 1px solid #000;*/
position: absolute;
top: 0; left: 2px;
width: 58px; height: 32px;
color: #FF5;
text-shadow: 0px 0px 2px #000;
}
.star .count {
font-weight: bold;
position: absolute;
top: 0px; left: 10px; right: 0; bottom: 0;
font-size: 18px;
text-align: center;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 4px #000;
}
.task .star {font-size: 12px;}

.su_user  { background: inherit; color:inherit; }
.su_visor { background: #FF8; color:#000; }
.su_god   { background: #EFF; color:#000; }

.cgru_window_window.tasks {
top: 150px; bottom: 50px; left: 10%; right: 10%;
}

.item.branch .active_jobs_div {
clear: both;
border-top: 1px solid #555;
margin: 2px;
padding: 2px;
}
.item.branch .name { font-size: 140%;}
.item.branch.empty { opacity:.5; font-size: 75%;}
.item.branch.running { background-color: rgba(170,255,100,.5);}
.item.branch.active  { background-color: rgba(230,255,160,.5);}
.item.branch.selected { background-color: #DFD;}
.branch_active_job.RUN { background: #DD8;}
.branch_active_job.selected { background-color: #DFD;}

/*####################### Task Window: ################## */
.wnd_task > div {
padding: 6px;
clear: both;
}
.wnd_task div {
border-radius: 2px;
}
.wnd_task .progress {
margin: 4px 12px;
padding: 4px 12px;
background-color: rgba( 255, 255, 255, .5);
border: 1px solid #777;
}
.wnd_task .buttons_div .button { float: left; opacity: .5; }
.wnd_task .buttons_div .button.active { opacity: 1.0; }
.wnd_task .output_div { float: right; }
.wnd_task .output_div > div { float: left; padding: 4px; }
.wnd_task .output_num {
min-width: 50px;
height: 14px;
background-color: rgba(255,255,255,.5);
text-align: center;
border: 1px solid #777;
}
.wnd_task .tab_btn {
float: left;
margin-bottom: 0px;
border-bottom: 0px;
border-radius: 6px 6px 0 0;
}
.wnd_task .tab_btn.active { background-color: rgba(255,255,255,.3); }
.wnd_task .tab_pages_div {
clear: both;
padding: 10px;
border: 1px solid #777;
background-color: rgba(255,255,255,.3);
}
.wnd_task .tab_page { display: none; }
.wnd_task .tab_page.active { display: block; }

.wnd_task .attr { padding: 2px 0px; }
.wnd_task .attr div { margin: 2px; padding: 2px 0px; }
.wnd_task .attr .label { float: left; width: 60px; }
.wnd_task .attr .value {
padding: 2px 8px;
overflow: hidden;
font-weight: bold;
box-shadow: 0px 0px 2px #555 inset;
}
.wnd_task .raw .object, .wnd_task .files {
padding: 6px;
box-shadow: 0px 0px 2px #555 inset;
overflow: hidden;
}
.wnd_task .files > div {
cursor: pointer;
margin: 1px;
padding: 1px 4px;
float: left;
box-shadow: 0 0 2px #000, 0 0 2px #FFF inset;
background: rgba(255,255,0,.2);
}
.wnd_task .files > div.opened {
clear: both; float: none;
}

/*####################### Listen Job Window: ################## */
.listen .name {
font-style: italic;
font-weight: bold;
margin: 0 0 0 40px;
padding: 0;
}
.listen .output {
margin-top: 0;
padding-top: 0;
}

.ui_level_back {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
text-align: center;
background-color: rgba(50,50,50,.5);
}
.ui_level_text {
margin: 128px;
padding: 128px;
font-weight: bolder;
font-size: 32px;
background-color: #AAAAAA;
color: #303030;
border: 8px solid #303030;
border-radius: 24px;
box-shadow: 0 0 32px #000000, 0 0 8px #000000 inset;
text-shadow: 0px 0px 2px #FFFFFF;
}