#scroller
{
  color:#777;
  width: 100%;
  height: 410px;
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  background-image: url(../images/bg_xmap.png);
  background-color: #AEC7CD;
  background-position: center left;
}
div.clickable
{
  cursor:hand;
  cursor:pointer;
}
#loading_overlay
{
  width: 100%;
  height: 410px;
  background-color: #000;
  position: absolute;
  opacity: .5;
  filter: alpha(opacity=50);
  z-index:1000;
}
.overlay_z-index { z-index:1000 }

#i_internal_view,
#i_external_view
{
  position:absolute;
  z-index: 10;
  left: 10px;
}
#i_external_view
{
  top: 40px;
}

#i_internal_view
{
  top: 345px;
}
#xmap
{
  width: 98%; /* Is set in px by JavaScript */
  height: 370px;
  background-image: url(../images/bg_xmap.png);
  background-repeat: repeat-x;
  background-color: #AEC7CD;
  background-position: center left;
  padding: 20px 20px;
}
.xmap_step_container
{
  float:left;
  width:200px;
  height:200px;
  margin-top:78px;
}

.external_step,
.internal_step
{
  float:left;
  z-index: 5;
  width: 100px;
}
.external_step a, .step_a,
.internal_step a, .step_a
{
  height: 100px;
  width: 60px;
  display:block;
}
.step_animate
{
  height: 100px;
  width: 60px;
  position: relative;
  overflow: hidden;
}
.end_node .step_animate
{
  width:200px;
}
.end_node .step_animate_hook
{
  width:200px;
}
.end_node .step_animate_hook a
{
  width:200px;
  margin-left: 100px;
}
.end_node .ghost_node
{
  margin-left:100px;
}
div.unique_end_node_hover div.ghost_timeline
{
  position: absolute;
  width: 200px !important;
  height: 9px;
  background-image: url(../images/i_timeline_hover.png) !important;

}

.step_animate_hook
{
  width: 60px;
}
.external_step_animate_container,
.internal_step_animate_container
{
  position:absolute;
}
.obscure_add_step_controls_z-index
{
  z-index:100;
}
.obscure_add_step_controls
{
  position:absolute;
  left:-200px;
  top:0px;
  width:150px;
  height:200px;
}

.external_step_animate_container { bottom: 0px; }
.internal_step_animate_container { top: 0px; }

.external_step a,
.internal_step a
{
  background-color: transparent;
  background-repeat: no-repeat;
}

div.external_step_animate_container a:hover
{
  background-image: url(../images/i_ex_step_hover.png) !important;
  background-position: bottom left;
}

div.internal_step_animate_container a:hover
{
  background-image: url(../images/i_in_step_hover.png) !important;
  background-position: top left;
}

.external_step_title,
.internal_step_title
{
  position:absolute;
  font-weight: bold;
  font-size:13px;
  color:#000;
  width:125px !important;
  overflow: hidden;
  padding: 2px;
  height: auto !important;
  text-decoration: none;
  background:none !important;
}
.external_step_title
{
  left: 65px;
  top: 20px;
}
.internal_step_title
{
  left: 65px;
  top: 63px;
}
a.external_step_title:hover,
a.internal_step_title:hover
{
  background:none;
  color:#000;
  text-decoration:underline;
}


.external_step_on,
.internal_step_on,
.external_step_ghost_on,
.internal_step_ghost_on
{
  background-repeat: no-repeat;
  background-color: transparent;
}
.external_step_on { background-image: url(../images/i_ex_step.png); background-position: bottom left }
.internal_step_on { background-image: url(../images/i_in_step.png); background-position: top left }

.external_step_ghost_on
{
  background-image: url(../images/i_ex_step_hover.png); background-position: bottom left;
}

.internal_step_ghost_on
{
  background-image: url(../images/i_in_step_hover.png); background-position: top left;
}

.external_step_on a:hover,
.internal_step_on a:hover
{
  opacity: 1;
  filter: none;
}

.external_step_insert,
.internal_step_insert
{
  float:left;
  width: 100px;
}

.external_step_insert a,
.internal_step_insert a
{
  height: 100px;
  width: 60px;
  display:block;
  background-repeat: no-repeat;
  background-color: transparent;
}

.external_step_insert div.ghost:hover div.ghost_node,
.internal_step_insert div.ghost:hover div.ghost_node
{
  position: absolute;
  background-image: url(../images/i_node_hover.png);
  background-repeat: no-repeat;
  z-index: 20;
  width: 30px;
  height: 30px;
}
.internal_step_insert div.ghost:hover div.ghost_node
{
  background-position: top left;
  top: -10px;
  left: -6px;
}
.external_step_insert div.ghost:hover div.ghost_node
{
  background-position: bottom left;
  top: 90px;
  left: -6px;
}

.has_details,
div.has_details div.time
{
  /* SEE COMMENT IN .step_details */
  width:450px !important;
}

.step_details
{
  position:absolute;
  /* WIDTH ALSO AFFECTS .has_details  */
  width:298px;
  height: 380px;
  padding: 1px 7px 10px 7px;
  overflow: hidden;
  background-image:url(../images/bg_step_detail.png);
  background-color:transparent;
  background-repeat: no-repeat;
  z-index:20;
  top:5px; /* this value tuned for IE7 */
  margin-left: -58px;
}
.step_details h1.external,
.step_details h1.internal
{
  text-align: center;
  margin: 0;
  padding: 3px 0;
  font-size: 12px;
  color: white;
}
.step_details h1.external {background-color: #9B59A6}
.step_details h1.internal {background-color: #C66025}

.step_details_controls
{
  padding: 6px 10px;
  color: #5D5C5E !important;
}
div.step_details p
{
  margin:0;
}
div.step_details textarea
{
  width:200px;
  height:auto;
}
div.step_details a
{
  display:inline;
  width:auto;
  height:auto;
}
div.step_details a:hover
{
  background:#000;
}

div.step_details_control input
{
  width:auto !important;
}
div.step_details_control form
{
  float:left;
}
div.step_details input
{
  width:200px;
}
.rel_container
{
  position:relative;
}
.node_z-index
{
  z-index: 20;
}
.node
{
  position:absolute;
  top: -11px;
  left: -5px;
  background-image: url(../images/i_node.png);
  width: 30px;
  height: 30px;
  z-index: 30;
}
div.insert_ghost .node
{
  background-image: url(../images/i_node_hover.png) !important
}
.end_time
{
  display:none;
}

.time_z-index { z-index:10 }
.time,
.external_step_insert div.ghost:hover div.ghost_timeline,
.internal_step_insert div.ghost:hover div.ghost_timeline
{
  position:absolute;
  background-image: url(../images/i_timeline.png);
  background-repeat: repeat-x;
  height: 9px;
  z-index: 10;
}
.time
{
  top: -1px;
  left: 10px;
  width:200px;
}
.internal_step_insert div.ghost:hover div.ghost_timeline
{
  top: -1px;
  left: -90px;
  width: 100px;
}
.external_step_insert div.ghost:hover div.ghost_timeline
{
  top: 99px;
  left: -90px;
  width: 100px;
}
div.time_item_z-index { z-index:20 }
div.time_item
{
  z-index:20;
  position:absolute;
  text-align:center;
  margin: auto;
  width:150px;
  top:80px;
  left: -50px;
  font-size: 11px !important;
  margin-top: -25px;
}
div.time_item div
{
  font-size: 11px !important
}
div.time_item a
{
  display:inline;
  width:auto;
  height:auto;
}
div.time_item a:hover
{
  background:none;
  color: #000;
}
div.time_item_details
{
  background-image:url(../images/bg_time.png);
  background-repeat: no-repeat;
  width: 126px;
  height: 96px;
  padding: 10px 5px 7px 11px;
  text-align: left;
}
div.time_this
{
  font-weight: bold;
  color: #000;
}
div.time_icon
{

}
div.time_total
{
  margin-top: 10px;
  font-weight: bold;
  color: #000;
}
.time_item_details .text_input,
.time_item_details .text_input_active
{
  width:30px;
  margin-left:5px;
  margin: 0;
}
/* The next to margins are some related to each other */
div.step_details_control
{ margin-top:-9px; }
div.step_details_control a
{ margin-top:17px; }

.between_fake_button
{
  display:block;
  float:left;
  margin-right: 6px;
}

a.fake_button,
div.step_details_control a,
div.time_item a
{
  background-repeat: no-repeat;
  text-indent: -9999px;
  width:56px !important;
  height:17px;
  background-position: left 0;
  background-repeat: no-repeat;
  display:block;
  float:left;
  margin-right: 6px;
}

a.fake_button:hover,
div.step_details_control a:hover,
div.time_item a:hover
{
  background-position: left -17px !important;
  background-color: transparent !important;
}

a.b_save,
div.step_details_control a.b_save,
div.time_item a.b_save
{ background-image: url(../images/b_save.png) }

a.b_cancel,
div.step_details_control a.b_cancel,
div.time_item a.b_cancel
{ background-image: url(../images/b_cancel.png) }

a.b_edit_details
{ background-image: url(../images/b_edit_title.png); width: 73px !important }

a.b_show_times
{ background-image: url(../images/b_show_times.png); width: 94px !important }
a.b_hide_times
{ background-image: url(../images/b_hide_times.png); width: 94px !important }

a.b_logout
{ background-image: url(../images/b_logout.png); width: 73px !important }
a.b_login
{ background-image: url(../images/b_login.png); width: 60px !important }

a.b_create
{ background-image: url(../images/b_create.png); width: 135px !important }

a.b_edit
{ background-image: url(../images/b_edit.png); }
a.b_delete
{ background-image: url(../images/b_delete.png); }
a.b_new_kh
{ background-image: url(../images/b_new_kh.png); width: 135px !important; }


div.delete_link
{
  position:relative;
  top:-278px;
  left: 112px;
}