body { background: #333; }

#header, #footer, #navig, #sidepanel { background: #333; box-shadow: 0px 0px 5px #000, 0px 0px 5px #555 inset; }

/* ==================== HEADER ======================= */
#rules_link { float:left; padding: 7px; cursor: pointer; }
#FPS {float:left;margin:2px;}
#framerate {
float:left;
width:16px; height:18px;
background:#222;
color:#140;
border-radius:4px;
margin:3px; padding:2px 12px;
box-shadow:0 0 4px #000 inset, 0 0 4px #555;
}
#FPS:hover #framerate { color:#291; }

#info_panel {
text-align: center;
background: #222; color: #777;
margin: 2px; padding: 4px;
border-radius: 4px;
box-shadow: 0 0 2px #000 inset, 0 0 4px #555;
}

.panel .button { float:left; }
#paint_size { float:left; }
#paint_size > div { float:left; margin: 3px; padding: 2px; text-align: center; }
#paint_size .button { width: 12px; }
#paint_size .editing { width: 30px; }
#paint_color { float: left; margin: 1px 8px; width: 25px; height: 25px; border-radius: 4px; border: 1px solid #000; }


/* ==================== CONTENT ======================= */
#player_content {
position: absolute;
/*top: 38px;
bottom: 50px;*/
top: 0px;
bottom: 0px;
left: 0px; right: 0px;
overflow: hidden;
}
#view { position: absolute; /*box-shadow: 0 0 4px rgba(0,0,0,1);*/ }
/*#player_content #view.painting { box-shadow: 0 0 4px #0F0; }
#player_content #view.changed  { box-shadow: 0 0 4px #F00; }
#player_content #view.saved    { box-shadow: 0 0 4px #FF0; }*/

#preview { position: absolute; }

/*#player_content #view img { position: absolute; }*/
#canvases { position: absolute; top:0;right:0;bottom:0;left:0; }
#canvases canvas { position: absolute; /*border: 4px solid #F00;*/}



/* ==================== COMMENTS ======================= */
#comments {
position: absolute;
bottom: 50px; left: 0px; right: 0px;
height: 100px;
background: #444;
border: 1px solid #222;
box-shadow: 0 0 4px #000, 0 0 4px #777 inset;
}
#comments_label { text-align: center; font-size: 14px; }
#comments_body {
background: #222;
color: #999;
position: absolute;
top: 16px; left: 4px; right: 4px; bottom: 4px;
box-shadow: 0 0 2px #000 inset, 0 0 2px #777;
border-radius: 4px;
padding: 4px;
}



/* ==================== FOOTER ======================= */
#footer { height: 50px; }

#frame_bar {
/*
-moz-user-select: none;
-webkit-user-select: none;
*/
border-radius: 4px;
position: absolute;
top: 4px; left: 10px; right: 10px; height: 10px;
box-shadow: 0 0 2px #999;
background: #222;
}
#frame_bar #play_slider {
background: #777;
position: absolute;
top: 0px; left: 0px; bottom: 0px;
}
#frame_bar #bar_canvas {
opacity: 0.5;
position: absolute;
top: 0px; left: 0px; bottom: 0px; right: 0px;
width: 100%;
}

#footer_panel { position: absolute; overflow: visible; top: 20px; right: 0px; height: 30px; left: 40px; /*border: 1px solid #999;*/ }
#footer_panel > div { margin: 0px 8px; }

#playback_controls { float: left; }
#playback_controls .button { float: left; width: 50px; text-align: center;}

#viewport_controls { float: left; }
#viewport_controls > div { float: left; }
#viewport_controls .button { width: 16px; }
#view_zoom {
text-align: center;
border-radius: 4px;
margin: 2px; padding: 2px;
width: 40px;
box-shadow: 0 0 2px #000 inset;
}
#view_zoom.zoomed { color: #777; }

#footer #info { background: #222; color: #777; margin: 0px 8px; }
#footer #info.error { color: #F44; }
#footer #log { background: #AAA; top: 55px; }

