/* FLOW VIEW */
#flow {
  background:#333;
  color:#666;
  position:relative;
}
#flow a {
  color:#f75214;
}
#flow h1 {
  color:white;
}
#flow #panes {
  position:absolute;
  border:1px solid #222;
  background:#000;
}
#flow #panes ul {
  margin:0;
  padding:0;
}
#flow #panes ul li {
  position:absolute;
  list-style-type:none;
  margin:0;
  padding:0;
  color:white;
  background:#444;
  border:1px solid #555;
  overflow:hidden;
  cursor:pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
#flow #panes ul li.with_img {
  background:none;
  border:none;
}
#flow #panes ul li.centered {
  text-align:center;
}
#flow #panes ul li.left_of_center {
  text-align:left;
}
#flow #panes ul li.right_of_center {
  text-align:right; 
}
#flow #panes ul li.noshow {
  display:none;
}
#flow #panes ul li .info {
  text-align:left;
  margin:8px;
}
#flow #panes ul li .info h1 {
  color:#f75214;
  font-size:16px;
}
#flow #panes ul li.with_img .info {
  background:#000;
  position:absolute;
  left:0;
  bottom:0px;
  padding:4px;
  margin:0;
  text-align:center;
  visibility:hidden;
}
#flow #panes ul li.with_img .info h1 {
  font-size:12px;
}
#flow #panes ul li.with_img.centered {
  background:#222;
  cursor:inherit;
}
#flow #panes ul li.with_img.centered .info {
  visibility:visible;
}
#flow #panes ul li p.description {
  margin:8px;
  text-align:left;
}
#flow #save_link {
  position:absolute;
  bottom:1px;
  right:2px;
  font-size:12px;
}
#flow #macro {
  position:absolute;
  border:1px solid #555;
  background:#444;
  margin:0;
  padding:0;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
#flow .extents {
  position:absolute;
  top:0px;
  font-size:12px;
  padding:2px 8px;
  font-weight:bold;
  color:#f75214;
}
#flow #macro_min_ts {
  left:0px;
}
#flow #macro_max_ts {
  right:0px;
}
#flow #macro_inner {
  position:absolute;
  top:10px;
  cursor:pointer;
}
#flow #macro_ticks {
  position:absolute;
}
#flow #macro_thumb {
  position:absolute;
  width:9px;
  height:5px;
  left:0px;
  top:24px;
  margin-left:-5px;
  margin-top:-5px;
  background:url(http://cdn.dipity.com/static/images/uparrow-orange.gif.v2873.gif) bottom no-repeat;
}
#flow #macro #macro_ticks .macro_tick {
  position:absolute;
  display:block;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
#flow #macro #macro_ticks .macro_tick.level0 {
  top:14px;
  height:1px;
  background:#333;
}
#flow #macro #macro_ticks .macro_tick.level1 {
  top:12px;
  height:5px;
  background:#666;
}
#flow #macro #macro_ticks .macro_tick.level2 {
  top:10px;
  height:9px;
  background:#999;
}
#flow #macro #macro_ticks .macro_tick.level3 {
  top:8px;
  height:13px;
  background:#ccc;
}
#flow #macro #macro_ticks .macro_tick.level4 {
  top:6px;
  height:17px;
  background:#fff;
}
#flow #macro #macro_ticks .macro_tick:hover {
  background:#FC3;
}
#flow #popup {
  position:absolute;
  visibility:hidden;
  background:white;
  z-index:11;
}
#flow #popup_content {
  padding:16px;
  font-size:13px;
  overflow-y:auto;
}