er/*
	   copyright 2012 Hill-Rom. All Rights Reserved
	   client: Hill-Rom 
	   author: Vinter AB.
	   date: 02/24/2012
*/ 

/* ---------------------------------------------------
	Sling guide            
-----------------------------------------------------*/

/* header */

article.slingguide
{
	padding: 20px;
}


.slingguide header
{
	overflow: hidden;
	margin: 20px;	
}
	
	.slingguide header h1 {
		float: left;
	}
	
	.slingguide header nav ul
	{
		background: #f4f4f4;
		border: 1px solid #ddd;
		float: right;
		padding: 10px;
		list-style: none;
		margin: 40px 0 0;
	}
		
		.slingguide header nav ul li
		{
			float: left;
			margin: 0 0 0 20px;
			padding: 0;
		}
		
		.slingguide header nav ul li:first-child
		{
			margin-left: 0;
		}
		
			.slingguide header nav ul li a
			{
				background-image: url(../images/layout/buttons-slingguide.png);
				background-repeat: no-repeat;
				display: block;
				padding-left: 23px;
				height: 18px;
				text-decoration: none;
				font-size: 11px;
				cursor: pointer;
				zoom: 1;
				filter: alpha(opacity=15);
				opacity: 0.15;
			}
				
				/* icons/buttons */	
				
				.slingguide header nav ul li a#newBtn { background-position: left -123px; }
				
				.slingguide header nav ul li a#openBtn { background-position: left -323px; }
				
				.slingguide header nav ul li a#saveBtn { background-position: left -282px; }
				
				.slingguide header nav ul li a#printBtn { background-position: left -203px; }
				
				.slingguide header nav ul li a#orderBtn { background-position: left -163px; }
				
				.slingguide header nav ul li a#downloadBtn { background-position: left -3px; }			
				
				.slingguide header nav ul li a#sendToFriendBtn { background-position: left -242px; }
				
				.slingguide header nav ul li a#sendFeedbackBtn { background-position: left -42px; }
				
				.slingguide header nav ul li a#helpBtn { background-position: left -82px; }
				
			.slingguide header nav ul li a.active
			{
				opacity: 0.8;
				filter: alpha(opacity=80);
			}
			
			.slingguide header nav ul li a:hover
			{
				opcaity: 1;
				filter: alpha(opacity=100);
			}

/* layout */

.slingguide #parameters
{
	float: left;
	overflow: hidden;
	width: 570px;
	margin: 0 0 0 20px;
}

.slingguide #result
{
	float: left;
	width: 350px;
	margin: 0 0 0 20px;
	position: relative;
}

	.slingguide #result h3 
	{
		margin-top: 0;
	}

/* columns */
	
.slingguide .column
{
	width: 277px;
	margin: 0 15px 0 0;
	float: left;
}

	.slingguide .column.right-col
	{
		margin-right: 0;
	}

/* form & fieldset */

.slingguide fieldset
{
	font-size: 12px;
	padding: 0;	
}

	.slingguide div.fieldset-wrapper
	{
		padding: 10px 15px;
		background: #F4F4F4;
		border-radius: 0 0 2px 2px;
		-moz-border-radius: 0 0 2px 2px;
		-webkit-border-radius: 0 0 2px 2px;
	}

.slingguide .checkboxgroup
{
	margin: 0 0 10px 0;
}
	
	.slingguide .checkboxgroup label
	{
		display: block;
		margin-left: 20px;
	}
	
	.slingguide .checkboxgroup .group-checkbox
	{
		display: inline;
		margin: 0 0 5px 0;
	}	

.slingguide .guide-parameters
{
	display: block;
	margin: 0 0 5px 0;
}

.slingguide .guide-parameters a.moreinfo-link
{	
	background-image: url(../images/layout/bg-moreinfo-slings.png);
	background-repeat: no-repeat;
	width: 11px;
	height: 9px;
	display: inline-block;	
}

	.slingguide .guide-parameters a.moreinfo-link:hover
	{
		background-position: 0 -10px;
	}
	
	.slingguide .guide-parameters a.moreinfo-link span
	{
		display: block;
		direction: ltr;
		text-indent: -9999em;
	}
	
	/* tooltip */
	
	.slingguide fieldset .moreinfo
	{
		background: url(../images/layout/bg-semi-transparent.png);
		color: white;
		display: none;
		position: absolute;
		margin: -5px 0 0 10px;	
		padding: 5px 10px;
		width: 200px;
		z-index: 99;
		font-style: normal;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	
.slingguide .fieldset-wrapper legend
{
	padding: 5px 0;
	font-weight: bold;
}

.weight-span-wrapper select
{
	border: 1px solid #ccc;
	padding: 2px 6px;
	color: #666;
	width: 165px;	
}

	.weight-span-wrapper select#weightFrom
	{
		margin-right: 50px;
	}

.slingguide #weightTo option:disabled
{
	color: #ddd;
}

/* fieldset toggle */

.slingguide fieldset.toggle legend
{
	background: transparent url(../images/layout/bullet-toggle-plus.png) left 2px no-repeat;
	padding: 3px 0 0 15px;
	cursor: pointer;
}

	.slingguide fieldset.toggle.expanded legend
	{
		background-image: url(../images/layout/bullet-toggle-minus.png);
	}

	.slingguide fieldset.toggle ul
	{
		margin: 0;
		padding: 5px 0;
		list-style-type: none;
	}
	
		.slingguide fieldset.toggle ul li
		{
			margin: 5px 0;
			padding: 0;
		}

/* headings */

.slingguide h2
{
	font-size: 16px;	
	margin: 0;
	padding: 4px 10px 6px;
	color: #203772;
	
	background-image: linear-gradient(bottom, #e0edff 13%, #f5f9ff 57%);
	background-image: -o-linear-gradient(bottom, #e0edff 13%, #f5f9ff 57%);
	background-image: -moz-linear-gradient(bottom, #e0edff 13%, #f5f9ff 57%);
	background-image: -webkit-linear-gradient(bottom, #e0edff 13%, #f5f9ff 57%);
	background-image: -ms-linear-gradient(bottom, #e0edff 13%, #f5f9ff 57%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.13, #e0edff),
		color-stop(0.57, #f5f9ff)
	);
	
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0edff', endColorstr='#f5f9ff');
	
	border-bottom: 1px solid #BBB;
}

	.slingguide h2 em
	{
		font-weight: normal;
		font-style: normal;
		color: #666;
		display: block;
		font-size: 70%;		
	}

.slingguide .weight-span-wrapper
{
	margin-bottom: 15px;
}

/* resultHeader */

.slingguide p
{
	font-style: italic;
	font-size: 12px;	
}

/* result */

#slingsContainer ol
{
	margin: 20px 0;
	padding: 0;
}

	#slingsContainer ol li
	{
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 12px;
	}
		
		#slingsContainer ol li h4
		{
			font-size: 14px;
			margin: 10px 0 5px 0;
		}
		
		#slingsContainer ol li h4 a,
		#slingsContainer ol li a
		{
			text-decoration: none;
		}
		
			#slingsContainer ol li h4 a:after
			{
				color: #00f;
				content: url(../images/layout/icon-open-overlay.png);
			}
			
		
		#slingsContainer ol li label
		{
			display: block;
			font-style: italic;
			font-size: 11px;
			margin: 0 0 5px 0;
		}
		
		#slingsContainer ol li label input
		{
			margin-right: 5px;
		}
		
		#preview
		{
			border: 1px solid #ddd;
			padding: 20px;
			background: #fff;
			font-size: 12px;
			width: 300px;			
			border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-box-shadow: 1px 1px 8px 1px #999;
			-webkit-box-shadow: 1px 1px 8px 1px #999;
			box-shadow: 1px 1px 8px 1px #999;
			filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=4);			
		}
			
			#preview img
			{
				border: 1px solid #eee;
				float: right;
				margin: 0 0 10px 10px;
				padding: 2px;
			}
		
/* loader */

#loader 
{
	position: absolute;
	display: none;
	right: 0;
	top: 0;
}

/* overlays */

.blockUI
{
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;	
}

	.blockUI h3
	{
		color: white;
		background: #374F83;
		padding: 6px 12px;
		font-size: 16px;
		margin: 0 0 10px 0;
		-moz-border-radius: 4px 4px 0 0;
		-webkit-border-radius: 4px 4px 0 0;
		border-radius: 4px 4px 0 0;	
		
		background-image: linear-gradient(bottom, #195888 13%, #457FAF 57%);
		background-image: -o-linear-gradient(bottom, #195888 13%, #457FAF 57%);
		background-image: -moz-linear-gradient(bottom, #195888 13%, #457FAF 57%);
		background-image: -webkit-linear-gradient(bottom, #195888 13%, #457FAF 57%);
		background-image: -ms-linear-gradient(bottom, #195888 13%, #457FAF 57%);

		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.13, #195888),
			color-stop(0.57, #457FAF)
		);
		
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#195888', endColorstr='#457FAF');
	}
	
	.blockUI h3.plain
	{
		background: none;
	}
	
	.blockUI fieldset,
	.blockUI p,
	.blockUI h4
	{
		padding: 0 12px 10px 12px;
		font-size: 12px;
		margin: 5px 0 10px;
	}
	
	.blockUI ul
	{
		font-size: 12px;
		margin: 10px 0;
	}
	
	.blockUI #printOptions input
	{
		margin: 10px;
	}
		
		.blockUI #printOptions ul
		{
			list-style: none;
			padding: 0;
			margin: 0 15px;
		}
		
		.blockUI #printOptions ul li
		{
			margin: 5px 0;
		}
		
		.blockUI #printOptions ul li a
		{
			text-decoration: none;
			color: #ddd;
			font-weight: bold;
		}
		
		.blockUI #printOptions ul li a.active
		{
			color: #4B5EA8;
		}
		
		.blockUI #printOptions ul li a.active:hover
		{
			color: #036;
		}
		
		.blockUI #printOptions ul li a:after
		{
			content: " ›";
		}
	
	.blockUI h4
	{
		font-size: 14px;
		margin: 10px 0 5px 0;
		padding: 0 12px;
	}
		
		.blockUI fieldset label
		{
			overflow: hidden;
		}
		
			.blockUI fieldset label span
			{
				display: block;
				float: left;
				min-width: 120px;
				_width: 120px;
			}
			
			.blockUI fieldset label input#copy
			{
				margin-left: 5px;
			}
				
		.blockUI fieldset label,
		.blockUI fieldset textarea
		{
			display: block;
			margin-bottom: 10px;
		}
		
.blockUI .errmsg
{
	color: #f00;
	 display: none;
}

/* hide */	

.moreinfo, 
.dialog, 
.print-only, 
#debug, 
#currentselection, 
#supplierIdLabel, 
fieldset.toggle ul,
.slingguide #resultHeader,
.errmsg
{
	 display: none;
}

@media print {
  * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important;
  } /* Black prints faster: h5bp.com/s */
 
  /* sling guide specific print rules */
	
	#content
	{
		margin: 0;
		padding: 20px;
	}
	
	#printHeader,
	#resultHeader,
	#resultHeader h3,
	.slingguide #result
	{
		font-family: sans-serif;
		width: 100%;
		margin: 10px 0;
		float: none;
	}
	
	#printHeader h2
	{
		margin: 10px 0;
		padding: 0;
	}
	
	#result h4
	{
		font-family: sans-serif;		
	}
	
		#slingsContainer ol li h4 a:after
		{
			content: none;
		}
	
	#parameters,
	#resultHeader p,
	.slingguide header,
	.print-hide,
	.blockUI,
	#result input
	{
		display: none !important;
	}
  
	input.selected,
	li em.hidden-listing,
	.print-only,
	#currentselection
	{
		display: block !important;
	}
	
	#currentselection
	{
		font-weight: bold;
	}
  
}