/*
 * Copyright (C) 2012-2013 University of Dundee & Open Microscopy Environment.
 * All rights reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */


 /* 
 	
	Why things have changed:
	The structure of the CSS doesn't reflect the heirarchy of the HTML.
	Whilst it isn't necessarily important to do so, mimicking the CSS
	to reflect the heirarchal structure of the HTML makes reading the 
	CSS a little easier.
	
	For example: #middle_header_left is a child of #middle_header, so
	to make life easier, we'd put #middle_header_left below #middle_header
	and indent (this is optional) it.
	
	So:								Should be:
	
	<middle_header>					#middle_header {}
		<middle_header_left>			#middle_header_left
		</middle_header_left>	
	</middle header>
		
*/






/*
	------------------------------------------------
	:: Top Header (Middle Header)
	------------------------------------------------
*/



 #middle_header {
     background: hsl(215,20%,20%);
	 
	 background:#fff; /* Old browsers */
	 background-image:-moz-linear-gradient(top, hsl(212,8%,49%) 0%, hsl(212,8%,34%) 100%); /* FF3.6+ */
	 background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(212,8%,49%)), color-stop(100%,hsl(212,8%,34%))); /* Chrome,Safari4+ */
	 background-image:-webkit-linear-gradient(top, hsl(212,8%,49%) 0%,hsl(212,8%,34%) 100%); /* Chrome10+,Safari5.1+ */
	 background-image:-o-linear-gradient(top, hsl(212,8%,49%) 0%,hsl(212,8%,34%) 100%); /* Opera11.10+ */
	 background-image:-ms-linear-gradient(top, hsl(212,8%,49%) 0%,hsl(212,8%,34%) 100%); /* IE10+ */
	 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#73787d', endColorstr='#505357',GradientType=0 ); /* IE6-9 */
	 background:linear-gradient(top, hsl(212,8%,49%) 0%,hsl(212,8%,34%) 100%); /* W3C */
	 font-family: Helvetica,Arial,sans-serif;

	 height: 35px;
 }
	
	
	#middle_header_left a, #show_user_dropdown, #public_login_button {
		color: hsl(210,20%,80%);
		font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight:500;
		text-shadow: 0 1px 0px rgba(0,0,0,.4);
		display:inline-block;
		font-size:1.2em;
	}
	
	#middle_header_left ul a:hover, #user_dropdown:hover, #public_login_button:hover {
		text-decoration:none;
		color:white;
		background-color:rgba(255,255,255,.1);
	}
	
	
		

 	#logo {
 	    float: left;
		margin: 5px 6px 0 10px;
		position:relative;
 	}
	 	
	 	
	 #middle_header_right {
		 position:absolute;
		 right:0;
		 top:0;
	 }
	 
	 #middle_header_left {
		 
	 }
	 
		#middle_header_left li{
			float:left;
			list-style-type: none;
		} 


			#middle_header_left li a, #show_user_dropdown, #show_public_login_button {
				display: block;
				padding: .9em 1em 1.1em;
			}
			

			

				
			
			
		
		




/*
	------------------------------------------------
	:: Header Right Menu Items
	------------------------------------------------
*/




.header_toolbar {
	float:left;
	-webkit-border-radius:4px;
	
	-webkit-border-radius:4px; /* Saf3+, Chrome */
	   -moz-border-radius:4px; /* FF1+ */
	        border-radius:4px; /* Opera 10.5, IE 9 */ 
	
	margin-right:18px;
	margin-top:5px;
	border:solid 1px hsl(210,15%,25%);
	border-bottom:solid 1px hsl(210,25%,25%);
	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1); /* Saf3.0+, Chrome */
	   -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1); /* FF3.5+ */
	        box-shadow: 0 1px 0 rgba(255,255,255,0.1); /* Opera 10.5, IE 9.0 */
	
}

	.header_toolbar > li{
		position:relative;
		float:left;
		border-left:solid 1px rgba(255,255,255,.1);
		border-right:solid 1px hsl(210,15%,30%);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
		
		-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); /* Saf3.0+, Chrome */
		   -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); /* FF3.5+ */
		        box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); /* Opera 10.5, IE 9.0 */
	
		
		background:hsla(210,15%,50%,.2); /* Old browsers */
		background-image:-moz-linear-gradient(top, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background-image:-webkit-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background-image:-o-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
		background-image:-ms-linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#848D94', endColorstr='#6D7883',GradientType=0 ); /* IE6-9 */
		background:linear-gradient(top, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%); /* W3C */ 
		
	}
	
	.header_toolbar > li:hover {
		background-color: hsla(210,15%,60%,.5);
	}
	

	.header_toolbar > li:active, .header_toolbar > li:focus, .active {
		background-color: hsla(210,40%,25%,.3) !important;
		-webkit-box-shadow:inset 0 1px 2px hsla(210,40%,20%,.4) !important;
		
		-webkit-box-shadow: 0 1px 2px hsla(210,40%,20%,0.4); /* Saf3.0+, Chrome */
		   -moz-box-shadow: 0 1px 2px hsla(210,40%,20%,0.4); /* FF3.5+ */
		        box-shadow: 0 1px 2px hsla(210,40%,20%,0.4); /* Opera 10.5, IE 9.0 */
		
		background-image: -webkit-gradient(linear, left bottom, left top, from(hsla(210,40%,20%,.2)), to(hsla(210,40%,20%,0))) !important;
		
		background-image:-moz-linear-gradient(top, hsla(210,40%,20%,0) 0%, hsla(210,40%,20%,.2) 100%); /* FF3.6+ */
		background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,40%,20%,0)), color-stop(100%,hsla(210,40%,20%,.2))); /* Chrome,Safari4+ */
		background-image:-webkit-linear-gradient(top, hsla(210,40%,20%,0) 0%,hsla(210,40%,20%,.2) 100%); /* Chrome10+,Safari5.1+ */
		background-image:-o-linear-gradient(top, hsla(210,40%,20%,0) 0%,hsla(210,40%,20%,.2) 100%); /* Opera11.10+ */
		background-image:-ms-linear-gradient(top, hsla(210,40%,20%,0) 0%,hsla(210,40%,20%,.2) 100%); /* IE10+ */
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='hsla(210,40%,20%,0)', endColorstr='hsla(210,40%,20%,.2)',GradientType=0 ); /* IE6-9 */
		background:linear-gradient(top, hsla(210,40%,20%,0) 0%,hsla(210,40%,20%,.2) 100%); /* W3C */ 
				
	}
	
	
	
	
	.header_toolbar > li:first-child{
		border-left:none;
	}
	
	.header_toolbar > li:last-child{
		border-right:none;		
	}

		#figScriptButton{
			background: url(../img/icon_figure_scripts.png) center center no-repeat;
		}

		#scriptButton{
			background: url(../img/icon_script.png) center center no-repeat;
		}
	
		#launch_activities{
			background:url(../img/activity_light_24.png) center center no-repeat;
		}
		
		#script_notifications li:first-child {
			 -webkit-border-top-left-radius:3px; /* Saf3+, Chrome */
				  -moz-border-radius-topleft:3px; /* FF1+ */
				      border-top-left-radius:3px; /* Opera 10.5, IE 9 */ 
					   -webkit-border-bottom-left-radius:3px;
					       -moz-border-radius-bottomleft:3px;
					           border-bottom-left-radius:3px;  
		}
		
		#script_notifications li:last-child {
			 -webkit-border-top-right-radius:3px; /* Saf3+, Chrome */
				  -moz-border-radius-topright:3px; /* FF1+ */
				      border-top-right-radius:3px; /* Opera 10.5, IE 9 */ 
					   -webkit-border-bottom-right-radius:3px;
					       -moz-border-radius-bottomright:3px;
					           border-bottom-right-radius:3px;  
		}
		
		
		

		.toolbar_button {
			display:block;
			min-width:32px !important;
			height:23px;
			position:relative;
			cursor:pointer;	
		}
		
		
		
		
		
		
		
			
			
			
		/* All Context Box styling */
			
		.dropdown, .info_panel{
			top:33px;
			position: absolute;
			text-shadow:0 1px 0 white;
		}
		
		.dropdown, .dropdown ul, .info_panel, .info_popup {
			background: #f2f2f2;
			-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.5);
			
			-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0, 0, 0, 0.5)	; /* Saf3.0+, Chrome */
			   -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0, 0, 0, 0.5); /* FF3.5+ */
			        box-shadow: 0 4px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0, 0, 0, 0.5); /* Opera 10.5, IE 9.0 */
			
			-webkit-border-radius:3px;
			
			-webkit-border-radius:3px; /* Saf3+, Chrome */
			   -moz-border-radius:3px; /* FF1+ */
			        border-radius:3px; /* Opera 10.5, IE 9 */ 
			
		    color: #000;
			position:absolute;
			z-index: 2;
		}
		
		.info_panel {
		    max-height: 500px;
		    min-width: 300px !important;
			left:-90px;
			overflow-y: auto;
			overflow-x: hidden;
			display: none;
		}
		
		
		/* Context Box Arrow */
		
		.dropdown:before, .info_panel:before, .info_popup:before {
			top:-10px;
			content:'';
			width:20px;
			height:10px;
			display:block;
			position:absolute;
		}
		
		.info_panel:before {
			content:'';
			left:97px;
			background:url(../img/contextbox_arrowup2.png) center bottom no-repeat;	
		}
		
		.dropdown:before {
			left:9px;
			z-index:999;
			background:url(../img/contextbox_arrowup.png) center bottom no-repeat;	
		}
		.info_popup:before {
		    right:10px;
		    background:url(../img/contextbox_arrowup2.png) center bottom no-repeat;	
		}
		
		#listViewPort {
		    width: 440px;
		}

		.usersList {
			position: relative !important;
			width: 220px !important;
			box-shadow: 0 0 0 white !important;
			overflow-y: auto;
			overflow-x: hidden;
			float: right;
		}
	

		/* Title of Info Panel Context Box */
		
			.info_panel_title {
			    padding: 4px 4px 4px 10px;
			    margin: 0px;
			    border-bottom: solid rgba(0,0,0,.2) 1px;
				background-image: -webkit-gradient(linear, left bottom, left top, from(hsl(212, 5%, 85%)), to(hsl(212, 5%, 92%)));
				
				background:; /* Old browsers */
				background-image:-moz-linear-gradient(top, hsl(212,5%,92%) 0%, hsl(212,5%,85%) 100%); /* FF3.6+ */
				background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(212,5%,92%)), color-stop(100%,hsl(212,5%,85%))); /* Chrome,Safari4+ */
				background-image:-webkit-linear-gradient(top, hsl(212,5%,92%) 0%,hsl(212,5%,85%) 100%); /* Chrome10+,Safari5.1+ */
				background-image:-o-linear-gradient(top, hsl(212,5%,92%) 0%,hsl(212,5%,85%) 100%); /* Opera11.10+ */
				background-image:-ms-linear-gradient(top, hsl(212,5%,92%) 0%,hsl(212,5%,85%) 100%); /* IE10+ */
				filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfe4eb', endColorstr='#ced3d9',GradientType=0 ); /* IE6-9 */
				background:linear-gradient(top, hsl(212,5%,92%) 0%,hsl(212,5%,85%) 100%); /* W3C */ 
				
				-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
				
				-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); /* Saf3.0+, Chrome */
				   -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); /* FF3.5+ */
				        box-shadow:inset 0 1px 0 rgba(255,255,255,0.6); /* Opera 10.5, IE 9.0 */
				
				-webkit-border-top-left-radius:3px;
				-webkit-border-top-right-radius:3px;
				
				 -webkit-border-top-left-radius:3px; /* Saf3+, Chrome */
				-webkit-border-top-right-radius:3px;
					  -moz-border-radius-topleft:3px; /* FF1+ */
					 -moz-border-radius-topright:3px;
					      border-top-left-radius:3px; /* Opera 10.5, IE 9 */ 
					     border-top-right-radius:3px; 
				
				-webkit-box-shadow:0 1px 0 white;
				
				-webkit-box-shadow: 0 1px 0 rgba(255,255,255,1); /* Saf3.0+, Chrome */
				   -moz-box-shadow: 0 1px 0 rgba(255,255,255,1); /* FF3.5+ */
				        box-shadow: 0 1px 0 rgba(255,255,255,1); /* Opera 10.5, IE 9.0 */
				
				overflow:hidden;
				position:relative;
			}
			
				.info_panel_title h3 {
					font-size:1.3em;
					font-family: 'HelveticaNeue-Medium',  Helvetica, ;
					color:#333;
					color: rgba( 0, 0, 0, 0.75 );
					float:left;
					line-height:1.8em;
				}
			
				.info_panel_title button, .info_panel_title a {
					font-size:12px;
					color:rgba(0,0,0,.8);
					overflow:hidden;
					font-weight:normal;
					margin-top:2px;
					float:right;
					text-shadow:0 1px 0 rgba(255,255,255,.2);
					border:solid 1px rgba(0,0,0,.3);
					-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.3);
					
					-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(255,255,255,.3); /* Saf3.0+, Chrome */
					   -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(255,255,255,.3); /* FF3.5+ */
					        box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 rgba(255,255,255,.3); /* Opera 10.5, IE 9.0 */
					
					-webkit-border-radius:3px;
					
					-webkit-border-radius:3px; /* Saf3+, Chrome */
					   -moz-border-radius:3px; /* FF1+ */
					        border-radius:3px; /* Opera 10.5, IE 9 */ 
					
					background-color:transparent;
					background-image: -webkit-gradient(linear, left bottom, left top, from(rgba( 255, 255, 255, 0 )), to(rgba( 255, 255, 255, 0.4 )));
					
					background:transparent; /* Old browsers */
					background-image:-moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
					background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
					background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
					background-image:-o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
					background-image:-ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
					filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f1f2', endColorstr='#e0e1e3',GradientType=0 ); /* IE6-9 */
					background:linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%); /* W3C */ 
					
					padding:4px 6px !important;	
				}
		
				.info_panel_title button:hover, .info_panel_title a:hover {
					background-color: rgba( 255, 255, 255, .2 );
					cursor:pointer;
				}
		
		
		
		/* Context Boxes which are predominantly list items */
		
		.dropdown, .dropdown ul {
			list-style:none;
			width:170px;
			left:0px;
		}
		
		.dropdown {
			position: absolute;
		    visibility: hidden;
			padding: 5px 0;
			z-index: 100;
		}
			
			.dropdown li {
				border-bottom: solid 1px transparent;
				border-top: solid 1px transparent; 
				color: #333; 
				width:100%;
				display:block;
				float:none;
				position:relative;
			}

			.dropdown li.disabled {
				background: transparent;
			}
			.dropdown li.disabled a {
				color: #999;
			}
				
			/* The menuItem class is added by js to items with children */
			.dropdown > li > a.menuItem {
				background:url(../img/dropdown_right_arrow.png) 90% center no-repeat;
			}
			.dropdown > li:hover > a.menuItem {
				background:url(../img/dropdown_right_arrow_hover.png) 90% center no-repeat;
			}	
				
		    .dropdown li:hover, #vakata-contextmenu.jstree-default-context li:hover, .chzn-results .highlighted { 
				background-color:hsl(210,50%,50%);
				background-color:hsl(210,50%,50%);
				border-top:solid 1px hsl(210,50%,45%);
				border-bottom:solid 1px hsl(210,50%,40%);
				background-image: -webkit-gradient(linear, left bottom, left top, from(hsl(210, 50%, 50%)), to(hsl(210, 50%, 60%)));
				
				background:hsl(210,50%,50%); /* Old browsers */
				background-image:-moz-linear-gradient(top, hsl(210,50%,60%) 0%, hsl(210,50%,50%) 100%); /* FF3.6+ */
				background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(210,50%,60%)), color-stop(100%,hsl(210,50%,50%))); /* Chrome,Safari4+ */
				background-image:-webkit-linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%); /* Chrome10+,Safari5.1+ */
				background-image:-o-linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%); /* Opera11.10+ */
				background-image:-ms-linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%); /* IE10+ */
				filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B8FB3', endColorstr='#5C7A99',GradientType=0 ); /* IE6-9 */
				background:linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%); /* W3C */ 
				
			}

			.dropdown li.disabled:hover {
				background: transparent !important;
				border-bottom: 1px solid transparent;
   				border-top: 1px solid transparent;
			}
			
					.dropdown a, #group_user_chooser li strong{
						font-size:1.2em;
						color:#333;
						width: 100%; 
						display: inline-block; 
						font-size:1.3em !important;
						padding: .7em 0 .7em 8px !important;
						display: block; 
						color: #333;
						-webkit-transition: none;
						-webkit-transition:none;		
						   -moz-transition:none;
						     -o-transition:none;
						        transition:none; 	
					}
					
					.dropdown a {
						font-weight: normal;
					}
			
				    .dropdown li:hover a, .dropdown li ul li:hover a{ 
						color:white ;
						text-shadow:none !important;
					}

					.dropdown li.disabled:hover a {
						color: #999;
					}
					
					.dropdown li ul li a{
						color:#333 !important;
					}
					
					.dropdown li ul li:hover a {
						color:white !important;
					}
				
					.dropdown li:last-child a {
						border-right: none;
						-webkit-transition:none !important;
						
						-webkit-transition:none !important  ;		
						   -moz-transition:none !important  ;
						     -o-transition:none !important  ;
						        transition:none !important  ; 
						
					}
			
			
		
    
		/* Script Sub Menu */
		
	    .dropdown_menu ul { 
			visibility: hidden; 
			left: 0px;
	        margin: 0;
			position:absolute;
		}
		.dropdown_menu ul ul { 
		    max-height:400px;
		    overflow-y:auto;
		    overflow-x:hidden;
	    }
				

			/* Sub menu */
			    
		    .dropdown li ul {
				left: 170px; 
				padding:2px 0;
				top: -3px;
				position:absolute;
			}
		
		    .dropdown li:hover > ul{
				visibility: visible;
			}

	/*Add right arrows to the first level of menu only (groups)*/
	#groupList>li>a {
		background: url("../img/dropdown_right_arrow.png") no-repeat scroll 90% center rgba(0, 0, 0, 0);
	}
	#groupList>li:hover>a {
		background: url("../img/dropdown_right_arrow_hover.png") no-repeat scroll 90% center rgba(0, 0, 0, 0);
	}

/**
	.menulist has similar appearance to .dropdown (above) but different behaviour.
	.dropdown affects the visibility of submenus on hover - only 2 levels supported.
	.menulist uses clicks to show submenus - supports multiple levels.
**/
	
.menulist a {
	font-size:1.3em;
	width: 100%;
	padding: .7em 0 .7em 8px;
	display: block;
	color: #333;
	-webkit-transition:none !important;
	   -moz-transition:none !important;
	     -o-transition:none !important;
	        transition:none !important;
}

.menulist li.menuItem>a {
	background:url(../img/dropdown_right_arrow.png) 90% center no-repeat;
}

li.menu_back {
	background: #d2d2d2;
	border-bottom: solid #bbb 1px;
}

.menulist li:hover li.menu_back {
	background: #d2d2d2;
}

li.menu_back a {
	margin-left: 8px;
	padding-left: 15px;
	background:url(../img/dropdown_left_arrow.png) 0% center no-repeat;
}

/* when we hover over a li, make sure all child li aren't highlighted */
.menulist li:hover li {
	background: #F2F2F2;
	color: #333;
}

.menulist li:hover li a {
	color: #333;

}

/* when we hover over an li (within a parent li) need to highlight */
.menulist li:hover>a {
	color: white !important;
	text-shadow:0 0px 0 white !important;
}

.menulist li.menuItem:hover>a {
	background:url(../img/dropdown_right_arrow_hover.png) 90% center no-repeat !important;
}


.menulist li:hover {
	color: white !important;
	background:hsl(210,50%,50%) !important; /* Old browsers */
	background-image:-moz-linear-gradient(top, hsl(210,50%,60%) 0%, hsl(210,50%,50%) 100%) !important; /* FF3.6+ */
	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(210,50%,60%)), color-stop(100%,hsl(210,50%,50%))) !important; /* Chrome,Safari4+ */
	background-image:-webkit-linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%) !important; /* Chrome10+,Safari5.1+ */
	background-image:-o-linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%) !important; /* Opera11.10+ */
	background-image:-ms-linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%) !important; /* IE10+ */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B8FB3', endColorstr='#5C7A99',GradientType=0 ) !important; /* IE6-9 */
	background:linear-gradient(top, hsl(210,50%,60%) 0%,hsl(210,50%,50%) 100%) !important; /* W3C */
}

.menulist li.menu_back:hover>a {
	background:url(../img/dropdown_left_arrow_hover.png) 0% center no-repeat !important;
}

.menulist .upload_script {
	background: url(../img/upload_grey.png) 8px center no-repeat;
    padding-left: 30px;
}

#runningStatus {
	 position:absolute; 
	 bottom:1px; 
	 left:1px; 
	 width:12px; 
	 height:12px; 
	 border-radius:8px;
	 background:url(../img/spinner.gif) green 75% center no-repeat;
}


/* Activity Monitor */
	

#activities_panel {
	width:400px;
	overflow-y: auto;
}

	#activities_spinner {
	float: right;
	}
	
		
	#activities_panel table tr{
		border-bottom:solid 1px rgba(0,0,0,.05);
		-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5); /* Saf3.0+, Chrome */
		   -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5); /* FF3.5+ */
		        box-shadow: 0 1px 0 rgba(255,255,255,0.5); /* Opera 10.5, IE 9.0 */
		
	}
			
	#activities_panel table tr:last-child{
		border-bottom: none;
		-webkit-box-shadow: none;
		
		-webkit-box-shadow:none    ; /* Saf3.0+, Chrome */
		   -moz-box-shadow:none    ; /* FF3.5+ */
		        box-shadow:none    ; /* Opera 10.5, IE 9.0 */
		
	}
			
			#activities_panel table tr.new_result {
    		    background: hsla(210,80%,80%,.2);
    		}
		
		#activities_panel table td{
			padding: 8px 10px 11px;
			vertical-align:middle;
		}
		
		
		.results div{
			float:right;
			display:inline-block;
		}
				
		.script_description {
			width:200px;
		}
		
		
		#activities_content .menu_btns {
			float:right;
		}
		
			#activities_content .menu_btns li a {
				width:26px;
				height:26px;
			}
				
			
		
		
		/* Individual Columns in Activity Monitor Dropdown Table*/
		
		.activities_state{
			width: 15px;
			position:relative;
			text-align:center;
		}
		
			.activities_state img {
				display:block;
				height:19px;
				width:20px;
				margin:0 auto;
			}
			
		
			#activities_panel span {
				display: block;	
				font-size:1.2em;
				line-height:1.5em;
				color: #333;
				color: rgba(0,0,0,.7);
				text-shadow:0 1px 0 white;
				/* https://github.com/ome/omero-web/issues/377 */
				word-wrap: break-word;
				max-width: 330px;
			}
		
			.notifier {
				position:absolute;
				left:20px;
				top:-4px;
				color:white;
				font-weight:bold;
				font-size:1em;
				font-family:Arial;
				display:none;
				-webkit-border-radius:100%;
				
				-webkit-border-radius:100%; /* Saf3+, Chrome */
				   -moz-border-radius:100%; /* FF1+ */
				        border-radius:100%; /* Opera 10.5, IE 9 */ 
				
				-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 1px rgba( 0, 0, 0, .4 );
				
				-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 1px rgba( 0, 0, 0, .4 ); /* Saf3.0+, Chrome */
				   -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 1px rgba( 0, 0, 0, .4 ); /* FF3.5+ */
				        box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 1px rgba( 0, 0, 0, .4 ); /* Opera 10.5, IE 9.0 */
						
				padding:0px 4px;
				line-height:1.3em;
			}
		
			#jobstatus, #cartTotal {
				background-color: hsl( 0, 60%, 50% );
				border: 1px solid hsl( 0, 80%, 30% );
				text-shadow: 0 1px 0 hsl( 0, 80%, 30% );
			}
			
			
			
		
			#activities_panel .activity_title {
			    font-weight: bold;
			}
		
			#activities_panel .message {
			    color: #666;
			}


			#activities_panel tr.hidden {
			    display: none;
			}

		
	
	
	
	/* Search */
		
		
	#middle_header #search {
		float:left;
		margin-top: 6px;
		margin-right: 8px;
		position:relative;
	}
		





	/* User */

	#user_dropdown, #public_login_button {
		cursor:pointer;
		float:left;
		position:relative;
		padding-top:1px;
	}


		/* Link for User Dropdown */
		
		
		#show_user_dropdown img, #show_public_login_button img {
			-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2);
			
			-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2); /* Saf3.0+, Chrome */
			   -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2); /* FF3.5+ */
			        box-shadow: 0 1px 0 rgba(255,255,255,0.2); /* Opera 10.5, IE 9.0 */
			
			width:25px;
			height:25px;
			margin-right:6px;
			-webkit-border-radius:2px;
			
			border:solid 1px blue;
			-webkit-border-radius:2px; /* Saf3+, Chrome */
			   -moz-border-radius:2px; /* FF1+ */
			        border-radius:2px; /* Opera 10.5, IE 9 */ 
			
			top:-8px;
			display:inline-block;
			float:left;
			position:relative;
			border:solid 1px hsl(212,22%,24%);
		}
	
		#show_user_dropdown span {
			position:relative;
			padding-left:2px;
			background:url(../img/dropdown_arrow.png) 100% center no-repeat;
			padding-right:12px;
			font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
			font-weight:500;
		}

        #show_public_login_button span {
            position:relative;
            padding-left:2px;
            padding-right:12px;
            font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight:500;
            color: hsl(210, 20%, 80%);
        }

		/* Actual Dropdown */
		

		#user_dropdown .dropdown {
			width:200px;
			left:-77px;
		}

		#user_dropdown .dropdown a:hover {
			-webkit-transition:none;
			
			-webkit-transition:none   ;		
			   -moz-transition:none   ;
			     -o-transition:none   ;
			        transition:none   ; 
			
		}

		#user_dropdown .dropdown:before {
			left:88% !important;
		}
		
		
		#user_dropdown li {
			overflow:hidden;
		}
		
		
				#user_dropdown .dropdown a {
					padding-left:36px !important;
				}
		
				#user_settings a{
					background:url(../img/icon_settings.png) 9px center no-repeat;
				}
				
				#user_settings:hover a{
					background:url(../img/icon_settings_hover.png) 9px center no-repeat;
				}
				
				
				#send a{
					background:url(../img/mail_send.png) 9px center no-repeat;
				}
				
				
				#send:hover a{
					background:url(../img/mail_send_hover.png) 9px center no-repeat;
				}
				
	
				#logout a{
					background:url(../img/icon_logout.png) 9px center no-repeat;
					display:block;
					overflow:hidden;
					border-top:solid 1px rgba(0,0,0,.05);
					
				}
		
				#logout:hover a{
					background:url(../img/icon_logout_hover.png) 9px center no-repeat;	
				}




















/* Admin navigation bar */

.selected_admin_tab {
	background-color: rgb(219,222,226) !important;
}

/* Content */

#content {
    position:absolute;
    top:35px;
    right:0px;
    left:0px;
    bottom:0px; /* Changed to eliminate footer */
    overflow:auto;
}





/* One Column Layout */

#center_details  {
	width:800px;
	margin:0 auto;
}
    



/** three main columns of the container layout **/
#left_panel, #center_panel, #right_panel {
    background: hsl(220,20%,95%);
    position:absolute;
    overflow: auto;
}

#left_panel, #right_panel {
	background: hsl(220,20%,95%);
}

#left_panel {
	position: relative;
	border-left: none;
    width: 350px;
	height: calc(100% - 33px);
}

#center_panel {
    left:0px; right:0px; top:0px; bottom:0px;
	z-index: 0;
	background:hsl(210,1%,98%);
	position:absolute;
	/* I wish that background: hsl(220,8%,16%);*/
}
#right_panel {
    width:370px;
    right:0px; top:0px; bottom:0px;
	overflow:auto;
	-webkit-box-shadow:    inset 1px 0 0 hsl(210,10%,85%); /* Saf3.0+, Chrome */
	   -moz-box-shadow:    inset 1px 0 0 hsl(210,10%,85%); /* FF3.5+ */
	        box-shadow:    inset 1px 0 0 hsl(210,10%,85%); /* Opera 10.5, IE 9.0 */
}


/** the center panel includes the draggable re-size handles either side **/

#trayhandle_left {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 1px;
	background-color: hsl(210,10%,85%);
	z-index: 1;
}

#trayhandle_right {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background-color: hsl(210,10%,85%);
	z-index: 1;
}

#center_container {
	position: absolute;
	left: 350px;
	right: 370px;
	top: 0px;
	bottom: 0px;
	border: none;
	background: #e5e5e5;
	background: hsl(210, 1%, 98%); /* Must match #center_panel background-color */
	/* I wish that background: hsl(220,8%,16%);*/
}


#swapTree, #swapMeta {
	bottom:5px;
	position:absolute;
	background-color:hsl(210,20%,80%);
	cursor:pointer;
}

#swapTree:hover, #swapMeta:hover {
	background-color:hsl(210,20%,85%);
}



#swapTree {
	left:0px;
	-webkit-border-top-right-radius:2px;
	-moz-border-radius-topright:2px;
	border-top-right-radius:2px;
	-webkit-border-bottom-right-radius:3px; /* Saf3+, Chrome */
	-moz-border-radius-bottomright:3px; /* FF1+ */
	border-bottom-right-radius:3px; /* Opera 10.5, IE 9 */
}

#swapMeta {
	right:0px;
	-webkit-border-top-left-radius:2px;
	-moz-border-radius-topleft:2px;
	border-top-left-radius:2px;
	-webkit-border-bottom-left-radius:3px; /* Saf3+, Chrome */
	-moz-border-radius-bottomleft:3px; /* FF1+ */
	border-bottom-left-radius:3px; /* Opera 10.5, IE 9 */
	
}

	#lhid_trayhandle_icon_right, #lhid_trayhandle_icon_left {
	    height:13px;
	    width:9px;
		padding:2px;
	}
	
	
.expanded-left {
    background:transparent url(../img/tray_collapse_left.png) center center no-repeat scroll;
}
.expanded-right {
    background:transparent url(../img/tray_collapse_left.png) center center no-repeat scroll;
}
.collapsed-left {
    background:transparent url(../img/tray_collapse_right.png) center center no-repeat scroll;
}
.collapsed-right {
    background:transparent url(../img/tray_collapse_right.png) center center no-repeat scroll;
}

.dragHandle {
    background: url("../img/drag_handle_5.png") center center no-repeat scroll;
    /* and now for browsers that support background opacity... */
    background: url("../img/drag_handle_5.png") no-repeat scroll center center rgba(250, 250, 250, 0.5);
    position: absolute;
    top: 50%;
    width: 15px;
    height: 25px;
}

.verticalDragHandle {
	z-index: 10;
	width: 100%;
	height: 8px;
	left: 0;
	position: absolute;
	cursor: row-resize
}
/* we want to rotate the backgroud, so we use a 'before' element */
.verticalDragHandle:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: -8px;
    left: 48%;
    background: url(../img/drag_handle_5.png) 50% 50% no-repeat;
    /* -webkit-transform: rotate(90deg); */
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: center;
}

#dragLeft {
    cursor: col-resize;
    position:absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

#dragRight {
    cursor: col-resize;
    position:absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}