/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      = Strategy Styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#strategy_workspace {
/*	position: absolute;
	right:1.5em;*/
	margin-top:-27px;
	position:relative;
	text-align:right;
	top:27px;
}

#strat-instructions {
	background-color:#EDEDED;
	border-color:#FFFFFF #CCCCCC #666677 #AAAAAA;
	border-style:solid;
	border-width:2px;
	font-size:11pt;
	height:100px;
	left:50px;
	padding:0 5px;
	position:absolute;
	text-align:center;
	top:10px;
	width:187px;
}

#strat-instructions img#bs-arrow {
	height:94px;
	left:118px;
	margin:0 0 -79px;
	position:relative;
	top:-20px;
}

/* The main diagram container needs to be positioned relatively, so that
      it's children can be positioned within it. */
.diagram {
	position: relative;
	margin:   0 auto; /* Sorry, IE5.x/Win. */
	left:    0em;
	background-color: #EDEDED;
	height:   135px;
	border-color: #ffffff #cccccc #666677 #aaaaaa;
	border-style: ridge;
	border-width: 4px;
	padding-top:5px;
}

.invalid-image:hover{
	cursor:pointer;
}

/* Turn off this Opera/Mozilla feature. */
.diagram abbr, .diagram acronym { border-bottom: 0 }

/* The top-level DIVs are the state boxes, which should have a border.
   We need to use ems, because the border width counts in the box size
   (except in IE5.x/Win, of course).  It will affect arrow lengths. */
.diagram div {
	border: 2px solid #000;
}
   
div.sub_diagram {
	position: relative;
}

/* All DIVs and list items in the diagram are absolutely positioned. */
.diagram div {
	position: absolute;
	margin:   0;
	padding:  0;
}
	
.diagram div li {
	position: absolute;
	margin:   0.8em;
	padding:  0;
}

/* State names will be centered within their boxes. */
.diagram h3 {
	margin:      0;
	padding:     0;
	font-size:   1em;
	font-weight: normal;
	line-height: 2;
	text-align:  center;
}

/* The "current" state needs to stand out. */
#current {
	background-color: #fff;
	color:            #000;
}

#current h3 { font-weight: bold }

/* "Linked" states are indicated visually as state boxes. */
.diagram div li a {
	display:          block;
	position:         absolute;
	border:           0.05em dotted #666;
	background-color: #eee;
	line-height:      2;
	text-align:       center;
}

/* SPANs are used for hiding explanatory text that shouldn't be used in a
   CSS-aware environment.  Those SPANs are also used for creating the
   arrowheads on transition lines (see below). */
.diagram li span {
	position:    absolute;
	width:       0;
	height:      0;
	overflow:    hidden;
}

/* IE5.x/Win is somewhat buggy.  Yes, really! */
* html .diagram li span {
	font-size:  0;
	f\ont-size: 1em;
}

* html .diagram .right span {
	width:   4px;
	w\idth:  0;
	height:  8px;
	he\ight: 0;
}

/* We'll use unordered lists for the transitions. */
.diagram ul {
	margin:     0;
	padding:    0;
	list-style: none inside;
}

/* IE6/Win completely freaks out without this. */
* html .diagram ul { width: 0 }

/* Transition lines. */
.diagram .right-down { /* Angled transition, right and down. */
	top:           50%;
	left:          100%;
	margin-bottom: 0.05em;
	margin-left:   0em;
	border-top: 0.25em solid #000;
	border-right:   0.25em solid #000;
}

.diagram .right { /* Straight horizontal transition, left to right. */
	top:           0;
	left:          100%;
	margin-left:   0.05em;
	border-bottom: 0.25em solid #000;
}

.diagram .right a {
	top:  0;
	left: 100%;
}

/* Arrowheads */
   
.diagram .right-down span {
	bottom:       0;
	left:         1.45em;
	border-top:    0.6em solid #000;
	border-right:  0.3em solid #fff;
	border-left:   0.5em solid #fff;
}

* html .diagram .right-down span  {
	left:          -4px;
	lef\t:         -0.3em;
	border-width:  4px 4px 0;
	b\order-width: 0.5em 0.3em 0;
}

.diagram .right span {
	right:         0;
	bottom:        -0.4em;
	border-top:    0.3em solid #fff;
	border-bottom: 0.4em solid #fff;
	border-left:   0.6em solid #000;
}

* html .diagram .right span {
	bottom:        -4px;
	b\ottom:       -0.3em;
	border-width:  4px 0 4px 4px;
	b\order-width: 0.3em 0 0.3em 0.5em;
}

/* Rows, columns, heights, widths, and sizes. */
.row1 { 
	top: 10px;/*0.6em;*/ 
}

.row2 { 
	top: 56.6px;/*4.6em;*/
}
   
.col1 { 
	left: 12px;/*1em;*/ 
}
   
.size1 { width: 8em; height: 3em; }

.size2 { width: 8em; height: 3em;}

.height1 { height: 3.9em }

.rightarrow1 {
	position: absolute;
	left: 7.4em;
	top: -3.2em;
	z-index: 1;
	height: 11px;
	width: 47px;
}
	
.rightarrow2 {
	position: absolute;
	z-index: 1;
	top: -3.1em;
	left: 4.5em;
	height: 10px;
	width: 92px;
}
	
.rightarrow3 {
	position: absolute;
	left: 54px;
	top: -3.2em;
	z-index: 1;
	height: 11px;
	width: 54px;
}
		
.downarrow {
	position: absolute;
	left: 3.2em;
	top: -0.6em;
	z-index: 1; 	
}
	
.operation {
	height: 18px;
	text-align: center;
	margin-top: -4px;
	margin-right: 2px;
	padding: 5px 0 0 0;
}

/* added to deal with operators showing well when adding a substrategy, in TriTryp  */
td.operation, div.operation, li.operation {
	background-image: url(../images/operationIcons.gif);
}

td.operation {
	height: 18px;
	width: 44px;
	background-repeat: no-repeat;
}

.operation.MINUS {
	border: 2px solid #FFFFFF;
	height: 25px;
	background-position: -30px -11px;
}

.operation.INTERSECT {
	border: 2px solid #FFFFFF;
	height: 25px;
	background-position: -30px -47px;
}

.operation.UNION {
	border: 2px solid #FFFFFF;
	height: 25px;
	background-position: -30px -83px;
}
	
.operation.RMINUS {
	border: 2px solid #FFFFFF;
	height: 25px;
	background-position: -30px -119px;
}
	
.diagram div.operation {
	border: 2px solid #EDEDED;
	background-color: #EDEDED;
	height: 37px;
	background-repeat: no-repeat;
}

.diagram div.operation.selected {
	border: 2px solid #ffffa0;
	background-color: #ffffa0;
}

.diagram div.operation.MINUS {
	background-position: 0px -11px;
}

.diagram div.operation.INTERSECT {
	background-position: 0px -47px;
}

.diagram div.operation.UNION {
	background-position: 0px -83px;
}
	
.diagram div.operation.RMINUS {
	background-position: 0px -119px;
}

a.operation img {
	height: 22px;
	width: 8em;
}

span.stepNumber {
	position: absolute;
	top:8.25em;
	font-weight:bold;
	white-space:nowrap;
}
	
h6.resultCount {
	font-size:10px;
	font-style: italic;
	font-weight: bold;
	text-align:center;
}
	
div.arrowgrey span.resultCount{
	padding-left: 20px;
	z-index:1;
}

.diagram div.transform {
	border: none;
	height: 3.4em;
	width: 8.7em;
}

.transform {
	background: url(../images/TransformBg.gif) no-repeat -1px -0.5px;
}

.selectedtransform {
	background: url(../images/TransformBg_yellow.gif) no-repeat -1px -0.5px;
	border: none;
}

div.expandedStep {
	background-image:url(../images/expandedBg.gif);
	border:none;
	height:44px;
	position:absolute;
	top:3px;
	width:109px;
	z-index:0;
}

a.crumb_name img {
	position:absolute;
	left:-1px;
	top:-1px;
}
	
div.transform a.crumb_name img{
	left: 9px;
	top: 1px;
}
	
div.crumb_details {
	display: none;
	background-color: #eee;
	color: #000000;
	border: solid black;
	position:absolute;
	z-index: 1000;
	min-width: 365px;
	text-align: center;
	padding-bottom: 5px;
}

.crumb_details div.crumb_menu {
	background-image:url(../images/crumbMenu.png);	
	position: relative;
	white-space: nowrap;
	border-bottom: 2px solid #000000;
	padding: 6px 0px 5px 0px;
	height: 12px;
	margin-right:-6px;
	cursor:move;
}

.crumb_menu span, .crumb_menu a {
	font-size: 12px;
}

#bread_crumb_div td {
	vertical-align: top;
}

.param {
	margin: 0;
	font-size: 12px;
}

.param .name {
	font-weight: bold;
}

.question_name {
	font-size: 14px;
	margin: 3px 0px;
}

.question_name span {
	font-weight: bold;
}

.crumb_details table {
	margin: 7px 47px;
	line-height: 1;
	border-collapse: separate;
	border-spacing: 2px;
}

.diagram div#record_name {
        border: none;
	padding: 0px 0px 0px 5px;   
        text-align: left;
        font-color: #08438F;
        font-weight:bold;
        text-decoration:none;;
}

.diagram div.strategy_tools {
	border: none;
	right: 0px;/*40px;*/
	font-size: 12pt;
	margin-right: 18px;
	top: 5px;
	text-align: right;
}

span.closeStrategy {
	float: right;
}

.diagram div.strategy_tools span.strategy_small_text {
	font-size: 10px;
	color: #888;

}

.diagram h6.step_info_link {
	border: none;
	left: 86px;
	top: -34px;
	position: relative;
}

.diagram h6.step_info_link div.info_link_pop_up_div {
	display: none;
	background-color: lightYellow;
	font-weight: normal;
	font-size: 10px;
	border: thin solid black;
	color: #000000;
}

.diagram h6.step_info_link a:hover div.info_link_pop_up_div {
	display: block;
	position: relative;
	top: -24px;
	left: 15px;
	z-index: 5;
}

/* First selector is for history page,
   second selector is for strat diagram */
.modal_div, .diagram .modal_div {
	display: none;
	background-color: #FFFFFF;
	background-image: url(../images/filter_top.gif);
	background-repeat: repeat-x;
	border: 1px solid #888888;
	padding: 5px;
	z-index: 90;
	text-align: left; /* Run tab: all content in Rename/Save As popups */
}

.modal_div .dragHandle {
	border:1px solid grey;
	top: -16px;
	height: 14px;
	cursor: default;
}

.dragHandle .modal_name {
	border: none;
	top: 0;
	width: 100%;
	position: absolute;
}

.save_strat, .diagram .save_strat {
	position: absolute;
	right: 5em;
	top: 4em;
	width: 23em;
}

.save_strat .dragHandle .modal_name {
        margin:0;
        padding:0;
        position:absolute;
}

/* This selector is for Browse and Run  tab */
.export_link, .diagram .export_link {
	position: absolute;
	right: 5em; /* for Run tab */
	top: 4em;   /* for Run tab */
}

.export_link p, .diagram .export_link p {
	font-size: 10pt;
	color: #000000;
	padding: 5px;
}

.diagram .filterImg {
	position:relative;
	float:right;
	right:3px;
	top:-10px;
}

.disabled {
	opacity:0.4;
	cursor:move;
}

a.disabled:hover, a.disabled:active {
	color:#0B4796;
}

b.strat_help_title > span {
	display: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      = Add Step Popup Styles
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#filter_div {
	width: 100%;
	min-height: 50px;
}
	
#instructions {
	position: relative;
	left: 70px;
}

#filter_div td {
	vertical-align: top;
}

#query_selection {
/*	left: 40px;*/
	position:relative;
	margin-top: 28px;  /* thiner Add Step   36px; */
	width: 100%;
}

#query_form {
	/*display: none;*/
	position: absolute;
	left:140px;   /* Omar's request  150px; */  /*200px;*/ /*135px;*/
	top:140px; /* -100px; */   /*   60px;  */    /*279px;*/
	min-width: 800px;  /*  increase to accommodate gene basket 775px; */ /* increase to accommodate blast data type options   741px; */
	max-width: 78%;   /* increase to accommodate the basket */
	background-color: #FFFFFF;
/*	background-image: url(../images/filter_top.gif);  */
/*	background-image: url(../images/CryptoDB/footer.png);*/
	background-repeat: repeat-x;
	background-position: 0 26px;   /* was 36px, decreased to have Add Step title thiner */
	border: 1px solid #888888;	
	padding: 0 8px 8px 8px;
	z-index: 1000;
}

#query_form form {
	position: relative;
	margin-top:40px;
}

#query_selection ul {
	background-image: url(../images/new_step_menu.jpg);
	list-style-type: none;
	border: 1px solid #888;
	padding: 3px;
}

#query_selection table {
/*	background-image: url(../images/new_step_menu.jpg);*/
	border-collapse: separate;
	border-spacing: 3px;
}

#query_selection ul li ul{
	z-index: 200;
}
#query_selection .top_nav {
	line-height: 1.3;
}

#query_selection .top_nav ul {
	position:absolute; 
	display:none;
}

#query_selection .top_nav li {
	position:relative;
	width:11em;
	text-align:left;
	z-index:50;
	padding-right: 13px;
        white-space: nowrap;
}

#query_selection .top_nav li a:link, #query_selection .top_nav li a:visited{
	color:#000000; /*414141;*/
}

#query_selection .top_nav li a:hover{
	color:#B30101;
}

#query_selection .top_nav li:hover {
} 

#query_selection .top_nav li ul li {
	text-align:left;
	width: 350px;  /*  288px;  *//*250px;*/
}

#query_selection .top_nav li:hover ul{
	display: block;
	left: 11.25em;
	top: -4px;
}

.close_window {
	position: absolute;
	right: 0px;
	top:0px;
}

#back_to_selection {
	position: absolute;
	left: 0px;
	top:0px;
	z-index:1;
}

#question_title {
	position:relative;
	left: 65px;
	top:4px;
	font-size: 26px;
}

.form_subtitle {
	position:relative;
	left: 20px;
	top:4px;
	font-size: 20px;
}

#form_title {
	position:relative;
	left: 65px;
	top:4px;
	font-size: 26px;
}



.dragHandle {
	position: absolute;
	left: -1px;
	background-color: Grey;
	height: 14px;   /* thiner Add Step 25px; */
	width: 100%;
	background-image: url(../images/handbar.jpg);
	cursor: move;
	padding-top: 10px;
	border-top: 1px solid #888888;   /* #345D9B; */
	border-left: 1px solid #888888;   /*  #345D9B; */
	border-right: 1px solid #888888;    /* #345D9B; */
	border-bottom: 1px solid #000000;
}

#operations {
	margin: 10px 20px 10px 40px; 
}

#operations ul li {
	float: left;
	margin: 2px 0;
}

#operations .opcheck {
        clear: left;
}

#operations td {
	padding: 0;
}

.filter {
	border: 1px solid black;
}

.filter.params, .filter.operators, .filter-button {
       background-color: #fff;
        margin: 4px;
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        padding: 0;
}

.filter.params {
}

.filter.operators {
}

.filter-button {
        margin-top: 10px;
        text-align: center;
}

.filter_link {
	/*position: relative;
	float: right;
	margin-right: 5px;
	top: 65px;*/
	color: #FFFFFF;
}
table.parameter-errors{
	border-collapse:separate;
	border:1px dotted red;
	color:red;
	margin:10px 0 0 22px;
	width:95%;
}
table.parameter-errors td{
	padding:6px 0 0 10px;
}
div.bottom-close{
	position:relative;
	bottom:8px;
	right:5px;
	top:-5px;
	text-decoration:underline;
}

.crumb_details ul.question_name {
    float:left;
    position:relative;
    left:50%;
}

.crumb_details ul.question_name li {
    float:left;
    font-weight:bold;
    margin-top:8px;
    position:relative;
    right:50%;
}

.crumb_details ul.question_name li.operation {
    width:36px;
    margin-top: 2px;
}

.crumb_details .filter, .crumb_details .operation {
    border:none;
}

.crumb_details #operations {
    margin: auto;
}

.crumb_details #form_question {
    border: 1px solid black;
    background-color: white;
    margin: 0 5px;
    padding-bottom: 5px;
}

.crumb_details .form_subtitle {
    font-size: 15px;
}

.clear {
   clear:both;
}

/* -----------------------------------------------------------------------------
      = Styles for All Strategies Tab
 * -------------------------------------------------------------------------- */

ul#history_tabs {
    border-bottom: 1px solid;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    float:left;
    display:inline-block;
    margin:0 0 5px;
    padding:0 10px;
    width: 98%;
}

#history_tabs li {;
    float:left;
    padding:0.24em 0;
    margin:0;
}

#history_tabs li a {
    color:black;
    display:inline-block;
    padding:0.24em 1em;
    text-align:center;
    text-decoration:none;
}

#history_tabs li a:hover {
    color:black;
    font-weight:bold;
    padding:0.24em 0.8em;
    position:relative;
}

#history_tabs #selected_type {
    background-color: #FFFFA0;
}

#history_tabs #selected_type a {
    color:black;
    padding:0.24em 0.8em;
    font-weight:bold;
    position:relative;
}

#history_tabs .cmplt_hist_link {
    float: right;
    display: inline-block;
    padding-top: 0.4em
}

#history_table {
    border:1px solid black;
    clear:both;
    padding:0 1em;
}

.history_panel {
    display: none;
}

.history_panel.enabled {
    display: inline;
}

.history_panel table {
    width: 100%;
 /*   margin: 5px 0; */
   margin: 0px;
}

.history_panel table td {
    padding: 0px;    
}

#complete_history table td {
    padding: 2px 3px;
}

.history_panel table li {
    float:left;
}

.history_panel table li.operation {
    border:none;
    width:36px;
    margin-top: -8px;
}

.unsaved-strategies-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.tbody-overflow {
    height: 250px;
}

table.history_controls {
	display:inline-block;
}