﻿/*======================================================================
	HANES: Base
	--------------------------------------------------------------------
	GRID: 	12 column / 960px;
	COLUMN:	60px
	
	COLOR PALLETE:
		#000000: Black
		#263040: Dark
		#555: 	 Medium Gray
		#c5cdd9: Slate
		#cfcfcf: Light gray
	
		#612e5e: Eggplant
		#645464: Mauve
		#ede7ed: Lavender
		
		#e95e64: Salmon

	Z-INDEX RANGES:
		1000: Layer Order Override
		2000: Content
		3000: Modal/Zoom
		4000: Secondary Navigation
		5000: Primary Navigation
		6000: Modal / Dialog / Overlay
	
----------------------------------------------------------------------*/

* { margin: 0; padding: 0; }

body
{
	font: 75% Arial, Verdana, Helvetica, Sans-serif;
	color: #263040;
	background-color: #fff;
}

/*======================================================================
	HEADINGS
----------------------------------------------------------------------*/
h1
{
	margin-bottom: 1px;
	padding: 20px 10px;
	font-size: 2em;
	font-weight: bold;
	line-height: 1;
	color: #263040;
	background-color: #c5cdd9;
}

	.cb h1
	{
		margin-bottom: 0.25em;
		padding: 0;
		background: none;
	}

h2
{
	margin: 0 0 0.25em;
	font-size: 1.25em;
	font-weight: bold;
}

h3
{
	margin: 1.5em 0 00.5em;
	font-size: 1.25em;
	font-weight: normal;
}

h4
{
	margin: 1em 0;
	font-size: 1.083em;
	font-weight: bold;
}

h5
{
	margin: 1em 0;
	font-size: 1.083em;
	font-weight: normal;
}

h6
{
	margin: 1em 0;
	font-size: 1em;
	font-weight: bold;
}

/*======================================================================
	LINKS
----------------------------------------------------------------------*/
a
{
	overflow: hidden;
	text-decoration: none;
	color: #612e5e;
}

.cb a
{
	font-weight: bold;
	text-decoration: underline;
}

a:hover
{
	color: #e95e64;
	text-decoration: underline;
}

	a img,
	a:visited img
	{
		padding: 0;
		border: none;
	}

/*======================================================================
	PARAGRAPHS
----------------------------------------------------------------------*/
p 
{
	margin-bottom: 1em;
	line-height: 1.6;
}

	p.footnote
	{
		margin-top: 2em;
		font-size: 0.833em;
		font-style: italic;
		line-height: 1.3;
	}

.cb span.underline
{
	text-decoration: underline;
}

/*======================================================================
	LISTS
----------------------------------------------------------------------*/
ul
{
	margin: 0.5em 0 2em 2em;
	list-style: disc;
}
	
	ul li
	{
		margin: 0.5em 0;
	}
	
ol
{
	margin: 1em 0 1em 2em;
	list-style: decimal;
}
	
	ol li
	{
		margin: 0.5em 0;
	}
	
dl
{
	margin: 1em 0;
}

	dt 
	{
		font-weight: bold;
	}
	
		dd
		{
			margin-left: 1em;
		}

/*======================================================================
	MISC ELEMENTS
----------------------------------------------------------------------*/
img.banner
{
	display: block;
	margin-bottom: 1px;
}

address
{
	font-size: 1em;
	font-style: normal;
}

	address .address-group-name,
	address .address-group-company,
	address .address-group-address,
	address .address-group-location,
	address .address-group-country
	{
		display: block;
	}

abbr,
acronym 
{ 
	border-bottom: 1px dotted #555; 
	cursor: help; 
}  

blockquote
{
	margin: 1em;
	padding: 1em;
	background-color: #f1f1f1;
	border-left: 1px solid #dadada;
}

cite
{
	margin-left: 1em;
	font-style: italic;
}

span.highlight-wrapper 
{}

	span.highlight
	{
		background-color: #fffcd3;
		border-bottom: 1px dashed #ccc;
	}
	
/*======================================================================
	FORMS
----------------------------------------------------------------------*/
/*---------------------------------
	GENERAL ELEMENTS
---------------------------------*/
label
input,
select,
textarea
{
	font-family: inherit;
	font-size: 1em;
}

label,
input
{
	vertical-align: middle;
}

label
{
	font-weight: bold;
}

select,
textarea
{
	vertical-align: top;
}

input.input-text,
input.input-password,
textarea
{
	padding: 4px;
	border: 1px solid #612d5e;
	background: #fff url(../images/layout/bg_input.png) 0 0 no-repeat;
}	
	
	/*include JS-applied classes for IE, which doesn't support these pseudo-selectos */
	input.focused,
	input.input-text:focus,
	input.input-password:focus,
	textarea.focused,
	textarea:focus
	{
		border-color: #e95e64;
	}

/* TODO: Convert these to classes instead of pseudo-selectors for IE */
input[type="radio"],
input.input-radio
{
	margin-right: 5px;
}

input[type="checkbox"],
input.input-checkbox
{
	margin-right: 3px;
	*margin-right: 0; /* IE has margins baked-in */
}

select
{
	padding: 3px 2px 2px 2px;
	border: 1px solid #612d5e;
}

select option
{
	padding-left: 4px;
	font-size: 1.1em;
}

/*---------------------------------
	VALIDATION ERRORS
---------------------------------*/
.validation-errors
{
	margin: 1em 0;
	padding: 1em 12px;
	font-weight: bold;
	color: #f00;
	background-color: #fff1f1;
	border: 1px solid #f00;	
}

	.validation-errors ul
	{
		margin: 1em 0 0 2em;
		list-style: disc;	
	}
	
		.validation-errors ul li
		{
			margin: 0.3em 0;
			font-weight: normal;
			color: #4a4a4a;	
		}

/*---------------------------------
	PAIRING LISTS
---------------------------------*/
div.pairinglist
{}
	
	ul.pairings
	{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
		li.pairing
		{
			margin: 0 0 1em;
			background: none;
		}
		
			li.pairing label.primary
			{}
		
			li.pairing div.pairing-controls
			{
				overflow: hidden;
			}

		/*-- PAIRING LIST VERTICAL --*/
		li.pairing-vertical label.primary
		{
			display: block;
			margin-bottom: 0.2em;
		}
	
				li.pairing-vertical label.primary span.required,
				li.pairing-vertical label.primary span.optional,
				li.pairing-vertical label.primary span.pairing-note
				{
					padding-left: 4px;
					font-size: 0.917em;
					font-weight: normal;
					font-style: italic;
					color: #555;
				}
		
				li.pairing-vertical label.primary span.pairing-note
				{
					font-style: normal;
				}
		
		/*-- PAIRING LIST HORIZONTAL --*/
		li.pairing-horizontal
		{
			float: left;
			clear: both;
		}
		
			li.pairing-horizontal label.primary
			{
				margin-right: 5px;
				float: left;
			}

			li.pairing-horizontal .pairing-content
			{
				float: left;	
			}

				li.pairing-horizontal .pairing-content select option
				{
					padding: 0 2px 0 4px;
					font-size: 1.1em;
				}

/*---------------------------------
	ACTION LISTS
---------------------------------*/
div.actionlist
{
	padding-top: 1em;
	border-top: 1px dotted #ccc;
}

	ul.actions
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}

		ul.actions li.action
		{
			margin-right: 12px;
			float: left;
			background: none;
		}
			
			/* presumes primary action is a button and secondary action is text */
			ul.actions li.action-secondary
			{
				margin-right: 6px;
				padding-top: 4px;
			}

div.actionlist-independent
{
	border-top: none;
}
		
/*======================================================================
	MESSAGES (system)
----------------------------------------------------------------------*/
.messagelist ul.messages
{
	margin: 0.5em 0;
	list-style: none;	
}

	.messagelist ul.messages li.message
	{
		margin: 0.5em 0;
		padding: 1em 44px;
		font-size: 1.167em;
		background: none;
	}
	
		.messagelist ul.messages li.message span
		{
			font-weight: bold;
		}

		/*-- INFORMATION --*/
		.messagelist ul.messages li.message-information
		{
			color: #032e4e;
			background: #d8e6f0 url(../../../_global/images/icons/icon_shoppe/disco/24/comment.png) 10px center no-repeat;
			border: 3px double #fff;
		}
		/*-- AUTHENTICATION REQUIRED --*/
		.messagelist ul.messages li.message-authenticationrequired
		{
			padding: 0.6em 28px;
			font-size: 0.917em;
			color: #333;
			background: #f3f4f5 url(../../../_global/images/icons/icon_shoppe/disco/16/locked.png) 6px center no-repeat;
			border: 1px solid #bfcbd4;
		}
		/*-- CONFIRMATION --*/
		.messagelist ul.messages li.message-confirmation
		{
			color: #333;
			background: #f1f1f1 url(../../../_global/images/icons/icon_shoppe/disco/24/minus.png) 10px center no-repeat;
			border: 2px solid #757575;
		}
		/*-- WARNING --*/
		.messagelist ul.messages li.message-warning
		{
			color: #333;
			background: #fff0e3 url(../../../_global/images/icons/icon_shoppe/disco/24/alert.png) 10px center no-repeat;
			border: 2px solid #f8891f;
		}
		/*-- ERROR --*/
		.messagelist ul.messages li.message-error
		{
			color: #000;
			background: #fef2f1 url(../../../_global/images/icons/icon_shoppe/disco/24/!.png) 10px center no-repeat;
			border: 2px solid #b61a1a;
		}
		/*-- SUCCESS --*/
		.messagelist ul.messages li.message-success
		{
			color: #333;
			background: #f3ffe9 url(../../../_global/images/icons/icon_shoppe/disco/24/check.png) 10px 10px no-repeat;
			border: 2px solid #65a63e;	
		}
		/*-- BLANK --*/
		.messagelist ul.messages li.message-blank
		{
			color: #333;
			background: #f1f1f1 10px center no-repeat;
			border: 2px solid #757575;
		}

	/*---------------------------------
		SUBMESSAGES
	---------------------------------*/
	.messagelist ul.messages ul.submessages
	{
		margin: 0 0 0 1em;
	}

		.messagelist ul.messages ul.submessages li.submessage
		{
			padding-left: 22px;
			list-style: none;
			background: none;
			background-color: transparent;
			background-position: 0 0;
			background-repeat: no-repeat;
		}

			/*-- INFORMATION --*/
			.messagelist ul.messages ul.submessages li.submessage-information
			{
				background-image: url(../../../_global/images/icons/icon_shoppe/disco/16/comment.png);
			}
			/*-- AUTHENTICATION REQUIRED --*/
			.messagelist ul.messages ul.submessages li.submessage-authenticationrequired
			{
				background-image: url(../../../_global/images/icons/icon_shoppe/disco/16/locked.png);
			}
			/*-- CONFIRMATION --*/
			.messagelist ul.messages ul.submessages li.submessage-confirmation
			{
				background-image: url(../../../_global/images/icons/icon_shoppe/disco/16/minus.png);
			}
			/*-- WARNING --*/
			.messagelist ul.messages ul.submessages li.submessage-warning
			{
				background-image: url(../../../_global/images/icons/icon_shoppe/disco/16/alert.png);
			}
			/*-- ERROR --*/
			.messagelist ul.messages ul.submessages li.submessage-error
			{
				background-image: url(../../../_global/images/icons/icon_shoppe/disco/16/!.png);
			}
			/*-- SUCCESS --*/
			.messagelist ul.messages ul.submessages li.submessage-success
			{
				background-image: url(../../../_global/images/icons/icon_shoppe/disco/16/check.png);
			}

/*======================================================================
	CSS BUTTONS
	--------------------------------------------------------------------
	Tricky stuff here. Lots of positioning and negative margins to 
	allow the use of shadows and rounded corners with full alpha 
	transparency using a single image each for normal and hover state.
	This markup is generated by a custom .NET control.
	--------------------------------------------------------------------
	html>body selectors block IE6, who apparently repeated 2nd grade
	only to fail 3rd grade for poor computational and communication 
	skills.
----------------------------------------------------------------------*/
/*---------------------------------
	BUTTON
---------------------------------*/
.button 
{
	position: relative;
	display: block;
	padding: 5px 6px;
	float: left;
	font-size: 1.167em;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
* html .button { background-color: #612e5e; }

	html>body .button * 
	{
		position: relative;
		display: block;
		font-style: normal;
		background-image: url(../images/buttons/button.png);
		background-repeat: no-repeat;
	}
	/*-- TOP LEFT --*/
	html>body .button i 
	{
		position: absolute;
		left: 0;
		top: 0;
		margin-bottom: -5px;
		width: 6px;
		height: 5px;
		background-position: top left;
	}
	/*-- BOTTOM LEFT --*/
	html>body .button span 
	{
		left: -6px;
		margin-bottom: -5px;
		padding: 0 0 5px 12px;
		background-position: bottom left;
	}
	/*-- BOTTOM RIGHT --*/
	html>body .button span i 
	{
		position: absolute;
		left: 100%;
		top: 0;
		margin-bottom: 0;
		width: 12px;
		height: 100%;
		background-position: bottom right;
	}
	/*-- TOP RIGHT --*/
	html>body .button span span 
	{
		position: absolute;
		right: -12px;
		top: -5px;
		margin-left: 12px;
		min-width: 0;
		height: 0;
		background-position: top right;
	}
	/*-- HOVER --*/
	.button:hover,
	.button:focus
	{
		text-decoration: none;
		color: #fff;
	}

		html>body .button:hover *,
		html>body .button:focus *  
		{
			background-image: url(../images/buttons/button-hover.png);
		}
		
/*======================================================================
	TABLES
----------------------------------------------------------------------*/
/*---------------------------------
	BASE TABLE
---------------------------------*/
table.base
{
	margin-bottom: 1.2em;
	width: 100%;
	font-size: 0.917em;
	border-spacing: 0;
	*border-collapse: collapse;
}

	table.base input.input-text, 
	table.base input.input-password, 
	table.base textarea
	{
		font-size: 1em;
	}
	
	table.base th
	{
		font-weight: bold;
		text-align: left;
	}
	
		table.base thead th
		{
			padding: 1.667em 10px 0.833em;
			color: #fff;
			background-color: #666;
		}
	
	table.base td
	{
		padding: 1.1em 10px;
		text-align: left;
		vertical-align: top;
		border-bottom: 1px solid #dadada;
	}
	
		table.base th.numeric,
		table.base td.numeric
		{
			text-align: right;
		}
		
	/*-- ACTIONS IN TABLES --*/
	table.base div.actionlist
	{
		padding: 0;
		border: none;
	}

		table.base ul.actions li.action
		{
			margin-top: 0;
		}

		table.base ul.actions li.action-secondary
		{
			padding-top: 0;
		}

	/*-- ACTIONS DIRECTLY AFTER TABLES --*/
	div.actionlist-aftertable
	{
		border-top: none;
	}

/*---------------------------------
	GRID TABLE
---------------------------------*/
table.grid
{
	margin: 1.2em 0;
	width: 100%;
	background-color: #fff;
	border-spacing: 0;
	*border-collapse: collapse;
	border: 1px solid #ccc;
}

	table.grid tbody th
	{
		padding: 0.5em 4px;
		font-size: 1em;
		font-weight: bold;
		text-align: center;
		background-color: #f1f1f1;
		border: 1px solid #ccc;
	}
	
		table.grid th span
		{
			display: block;
			font-weight: normal;
			font-size: 0.917em;	
		}
	
	table.grid td
	{
		padding: 0.5em 4px;
		text-align: left;
		vertical-align: top;
		border: 1px solid #ccc;
	}

/*---------------------------------
	STRIPED TABLE
	-------------------------------
	always inherits from existing 
	table classes
---------------------------------*/
table.striped
{}

	table.striped td
	{
		background-color: #fff;
	}

	table.striped tr.alt td
	{
		background-color: #f1f1f1;
	}

/*======================================================================
	CLEARFIX
----------------------------------------------------------------------*/
.clearfix { display: block; *zoom: 1; }
.clearfix:after { content: "."; display: block; height: 0.1px; clear: both; font-size: 0; visibility: hidden; }

/*======================================================================
	WEBLINC DEVELOPER TOOLBAR
	--------------------------------------------------------------------
	this can be removed in live	client environments.
----------------------------------------------------------------------*/
.weblinc-developer-toolbar
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 48px;
	min-height: 25px;
	background: transparent url(../../_default/images/developerbar/bg_dev-bar.png) bottom left no-repeat;
	color: #fff;
}
	
	.weblinc-developer-toolbar a.weblinc-developer-toolbar-anchor
	{
		display: block;
		position: absolute; 
		bottom: 0;
		left: 0;
		width: 25px;
		height: 25px;
		font-size: 1px;
		text-indent: -9999px;
		background: transparent url(../../_default/images/developerbar/dev-bar-open-close.png) 0 -2px no-repeat;
		outline: none;
	}
		
		.weblinc-developer-toolbar a:hover.weblinc-developer-toolbar-anchor
		{
			background-position: -36px -2px;
		}
		
		.weblinc-developer-toolbar.open a.weblinc-developer-toolbar-anchor
		{
			background-color: transparent;
			background-position: 0 -26px;
		}
		
		.weblinc-developer-toolbar.open a:hover.weblinc-developer-toolbar-anchor
		{
			background-color: transparent;
			background-position: -36px -26px;
		}

	.weblinc-developer-toolbar.open
	{
		width: 100%;
		background-color: #666;
		border-top: 5px solid #f10303;
	}
		.weblinc-developer-toolbar .weblinc-developer-toolbar-content
		{
			display: none;
			padding: 0.5em;
			padding-left: 60px;
		}
		.weblinc-developer-toolbar.open .weblinc-developer-toolbar-content
		{
			display: block;
		}
			.weblinc-developer-toolbar-group
			{
				float: left;
				margin-top: 0.5em;
				margin-right: 0.5em;
				border: 1px solid #fff;
				padding: 0.25em;
			}
			.weblinc-developer-toolbar-group-right
			{
				float: right;
				margin-left: 0.5em;
				margin-right: 0;
			}
				.weblinc-developer-toolbar-group-label
				{
					float: left;
					position: relative;
					margin-top: -1em;
					padding: 0 0.5em;
					background-color: #666;
					font-size: 0.9em;
				}
			.weblinc-developer-toolbar-group-content
			{
				clear: both;
				padding: 0.25em;
			}
