/*
COLORS
Define main colors used in a site here for easy reference

Grey = 999
Lt Blue = 84cef6
Dk Blue = 00849F

*/

html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
	font: 62.5%/1.5em arial, helvetica, sans-serif;
	text-align: center;
	color: #666;
	background: #333 url() 0 0 no-repeat;
}

/* ----------------
	DEFAULTS AND RESETS
    ------------- */

/* PC FF3 adds an outline to Flash objects? */
a, object {
	outline: none;
}

a img { border: none; }

h1, h2, h3,  h4, h5, h6 {
    color: #666;
	text-transform: uppercase;
	margin: 0;
}  

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited  {
    color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #000;
} 

h1 { 
	font-size: 1.6em; 
	color: #84cef6; 
	margin: -0.6em 0 1em .5em; 
	background-color: #fff; 
	padding: 0 .5em; 
	position: relative;
	text-transform: none;
}
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; } 


dt {
	font-weight: bold;
	margin-bottom: 0;
	margin-top:.75em;
}
dd {
	margin: 0 1.5em;
	width:60%;
	
	
}
	dd p:first-child {
		margin-top: .5em;
	}
 
a,
a:link,
a:visited {
    color: #84cef6;
	text-decoration: none;
}
a:hover,
a:active {
    color: #164295;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }
/*
p {
	line-height: 1.5em;
}
*/
/* For HR's with background images */	
hr {
  	height: 1px;
  	margin: 1em 0;
	color: #efefef;
  	background-color: #efefef;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: disc;
    color: #666;
}

ol {
    list-style: decimal;
    padding: 0;
}
	ol ul,
	ol ol {
		margin: 0;
		padding: 0;
	}

/* orderedList class can be assigned manually, or with jQuery method. Intended to style bullets differently than text.  */
ol.orderedList li span {
    color: #666;
}
ol.orderedList {
	color: #000;
}
	li {
	    margin: 0;
	    padding: 0;
	} 

blockquote, q {
    margin: 1em 2em;
    padding: 1em;
    border-left: 1px solid #dcd6c6;
    font-style: italic; 
    font-size: 1.2em;   
    color: #666; 
}   

small,
.small { 
    font-size: .8em;
}

/* table { border: 0; border-collapse: collapse; } */

address { font-style: normal; }
form { margin: 0; }


/* ----------------
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
    ------------- */
#page {
	position: relative;
	min-height: 100%;
	text-align: left;
	padding: 0;
	font-size: 1.2em; /* this, along with body font size of 62.5% renders type approximately 12px in size across all browsers */
}

#wrapper {
	position: relative;
	min-height: 100%;
	margin: 0 auto;	
	padding-bottom: 10px;
	width: 900px;
}

#header {
	height: 140px;
	background: #fff url(../images/design/bg_header.gif) 0 0 no-repeat;	
}

#footer {
	color: #cccccc;
	position: relative;
	padding: 13px;
	background: url(../images/design/bg_footer.gif) 0 -6px repeat-x;
}
	#footerContent {
		border: 1px solid #999;
		padding: 5px 10px;
	}
		#footerContent p {
			margin: 0;
		}
		#footerContent span {
			display: inline-block;
			margin-right: 20px;
			color: #bfe5fb;
			text-transform: uppercase;
		}
		#footerNav {
			float: right;
			margin-top: .5em;
		}

#columns {
	padding: 10px 0;
	background-color: #fff;
}

	#columnSub,
	#columnMain {
		margin: 13px;
		padding: 5px;
		border: 1px solid #999;
	}
	#columnSub {
		width: 155px;
		float: left;
		margin-right: 0;
		text-align: right;
	}
	
	#columnMain {
		width: 652px;
		float: right;
		padding: 0 20px 20px 20px;
		/*border-bottom: 0;*/
	}
	
		body.full #columnSub { display: none; }
		body.full #columnMain { float: left; width: 832px; }
		
		body.home #columnSub,
		body.home #columnMain { 
			float: none; 
			width: 870px; 
			text-align: left; 
			padding: 0;
			border: 0;
		}	
			body.home #columnMain {
				height: 315px;
				margin: 0 13px;
			}
			
		body.home #columns {
			padding-top: 0;
		}

/* ----------------
	PAGE STRUCTURE ELEMENTS
	Elements  such as logos, search bars, and any other design element repeated throughout the site, but doesn't effect the structural layout
    ------------- */
.logo {
	width: 81px;
	height: 74px;
	display: block;
	background: url(../images/design/logo_wns.png) 0 0 no-repeat;
	position: absolute;
	top: 12px;
	margin: 0;
	padding: 0;
	font-size: 1em;
	text-indent: -9999px;
}
	.logo a {
		width: 81px;
		height: 74px;
		display: block;
		text-indent: -9999px;
	}
	
	.logo.left { left: 78px; }
	.logo.right { right: 78px; background-image: url(../images/design/logo_wns.png); }
	
#navTop form {
	position: absolute;
	right: 0;
	top: 0;
}
	#navTop form #textSearch {
		width: 100px;
	}
	#navTop form #btnSearch {
		border: 0;
		text-indent: -9999px;
		background: url(../images/design/btn_go.gif) 0 0 no-repeat;
		width: 30px;
		height: 21px;
		position: relative;
		top: 3px;
		cursor: pointer;
	}
	
.box {
	float: left;
	width: 236px;
	padding: 10px;
	margin-left: 10px;
	border: 1px solid #999;
	min-height: 120px;
}
	.box.first-child {
		margin-left: 0;
	}
	.box.short {
		width: 140px;
	}
	.box.long
	{
		width:560px;
	}

	
a.btn {
	background: url(../images/design/btn_blue.gif) 0 0 no-repeat;
	display: inline-block;
	width: 148px;
	height: 21px;
	margin-left: -4px;
	line-height: 18px;
	text-align: left;
	color: #666;
	text-transform: uppercase;
	font-size: .7em;
	text-decoration: none;
	padding-left: 10px;
}
	a.btn:hover {
		color: #000;
	}
	a.btn:visited {
		color: #666;
	}

#footerContent a.btn {
	float: right;
	background-image: url(../images/design/btn_blue.png);
	width: 105px;
	height: 18px;
	line-height: 15px;
	padding-left: 0;
	text-align: center;
}

/* ----------------
	NAVIGATION
    ------------- */
#navMain {
	position: absolute;
	top: 100px;
	left: 12px;
	width: 874px;
	padding-bottom: 6px;
	background: url(../images/design/bg_nav.gif) 0 100% no-repeat;
	z-index: 999;
}
#navTop {
	position: absolute;
	top: 55px;
	left: 275px;
	width: 500px;
	text-align:center;
}
#navMain ul,
#navTop ul,
#footerNav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #999;
	z-index: 999;
}
	#navMain li,
	#footerNav li {
		position: relative;
		float: left;
		z-index: 999;
	}
		#navMain li:first-child a,
		#footerNav li:first-child a,
		#navMain li.first-child a,
		#footerNav li.first-child a,
		#navTop li:first-child a,
		#navTop li.first-child a { 
			border: 0; 
		}
	#navMain li {
		height: 23px;
		z-index: 999;
	}
		
	#navTop li {
		float: left;
	}
		
	#navMain a,
	#navTop a,
	#footerNav a {
		display: inline-block;
		margin: 1px 6px;
		color: #999;
		text-transform: uppercase;
		letter-spacing: -0.03em;
		text-decoration: none;
		font-size: .9em;
		border-left: 1px solid #999;
		padding-left: 8px;
	}	
	#navTop a {
		font-size: .8em;
		margin: 5px;
	}	
	#footerNav a {
		font-size: .8em;
	}
	
	#navMain a:hover,
	#navTop a:hover,
	#footerNav a:hover,
	#navMain li.active a {
		color: #ccc;
	}	
		#navMain li div {
			display: none;
			position: absolute;
			z-index: 999;
			top: 21px;
			left: 0;
			width: 868px;
			padding: 3px;
			background: transparent url(../images/design/bg_greybox.png) 0 50% repeat-x;
		}
			#navMain li:hover div,
			#navMain li.hover div {
				display: block;
			}
		#navMain li ul {
			border: 1px solid #999;
			padding: 5px;
			padding-left: 20px;
			background: url(../images/design/arrow.gif) 10px 50% no-repeat;
		}	
			#navMain li ul li {
				border: 0;
				height: auto;
			}	
				#navMain li ul a,
				#navMain li.active ul a {
					color: #fff;
					font-size: .8em;
					border: 0;
				}
					#navMain li ul a:hover,
					#navMain li.active ul a:hover {
						color: #ccc;
					}
				
#columnSub ul {
	list-style: none;
	margin: .5em 0 0 0;
}		
	#columnSub ul a {
		color: #999;
		text-transform: uppercase;
	}
		#columnSub ul a:hover {
			color: #ccc;
		}
		#columnSub li {
			position: relative;
		}
		#columnSub li ul {
			margin: 0;
			text-align: left;
		}
		#columnSub li ul li {
			text-align: right;
		}
		#columnSub li ul a {
			font-size: .8em;
			text-transform: none;
		}
		#columnSub li a.prev,
		#columnSub li a.next {
			font-size: .8em;
			text-transform: none;
			font-style: italic;
			color: #84CFF7;
			cursor: pointer;
			display: block;
		}
		#columnSub li a.prev {
			margin-top: .7em;
		}
		#columnSub li a.next {
			margin-bottom: 1em;
		}
			#columnSub li a.prev:hover,
			#columnSub li a.next:hover {
				color: #194295;
			}
		
.breadCrumbs {
	margin: -2em 0 4em 2.2em;
	font-size: .8em;
}

#columnMain ul.shortcuts {
	float: left;
	width: 31%;
	margin: 1em 1em 1em 0;
}


/* ----------------
	TYPEOGRAPHY
    ------------- */
#columnMain ul,
#columnMain ol {
	margin: 1em 2em;
	list-style: none;
	line-height: 1.5em;
}
	#columnMain ol {
		list-style: decimal;
	}
	#columnMain ul li {
		padding-left: 1em;
		background: url(../images/design/bullet_blue.gif) 0 50% no-repeat;
	}
	
body.home h2 { font-size: 1em; }
body.home h3 { font-size: 1.1em; color: #a2dbf8;}




/* ----------------
	ELEMENTS
    ------------- */
.caption {
	position: relative;
	display: block;
	margin-bottom: .5em;
}
	.caption span {
		position: absolute;
		bottom: 0;
		display: block;
		right: -5px;
		width: 29px;
		height: 21px;
		background: url(../images/design/icon_caption.png) 0 0 no-repeat;
	}	
	.imageCaption {
		display: none;
		position: absolute;
		z-index: 9999;
	}
		.imageCaption .captionText {
			color: #fff;
			position: absolute;
			top: 0;
			display: block;
			width: 100%;
			text-align: left;
			background: url(../images/design/bg_greybox.png) 0 50% repeat-x;
		}
			.imageCaption .captionText p {
				border: 1px solid #999;
				margin: 3px;
				padding: .5em;
			}
	
table.data {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin: .5em 0;
}
	table.data td,
	table.data th {
		padding: .2em 0;
	}
	table.data td.title {
		text-transform: uppercase;
	}
	table.data th {
		font-weight: bold;
		text-transform: uppercase;
	}
	

.product {
	float: left;
	margin: 10px;
	padding: 5px;
	min-height: 8em;
	width: 290px;
	border: 1px solid #fff;
}
	body.home .product {
		float: none;
		margin: 0;
		padding: 0;
	}
	.productDetail {
		width: 100%;
	}
	.product h2,
	.productDetail h2 {
		margin-top: .3em;
	}
	.product p,
	.productDetail p {
		margin-top: 0;
		font-size: .8em;
	}
	.product img,
	.productDetail img {
		float: left; /* for when JS isn't available */
	}
		.productDetail img {
			margin: 0 2em 2em 0;
		}
	.product .price,
	.productDetail .price {
		font-weight: bold;
		color: #000;
		font-size: 1em;
	}
		.productDetail .price {
			font-size: 1.2em;
		}
	.productThumb {
		position: relative;
		float: left;
		margin: 0 1em 1em 0;
		width: 90px;
		height: 77px;
		text-align: center;
		line-height: 77px;
		vertical-align: middle;
	}
	
	.product.clickable:hover {
		border: 1px solid #e4e4e4;
	}
		body.home .product.clickable:hover {
			border-color: #fff;
		}
	
	.additionalDetails,
	.cartOptions {
		padding: 1em 0;
		border-top: 1px solid #efefef;
	}
		.cartOptions {
			text-align: right;
		}


#columnSub .form {
	padding: 5px;
	margin: -5px -5px 1em -5px;
	background-color: #efefef;
}
	#columnSub .form.login {
		border-top: 3px solid #999;
		margin-bottom: -5px;
	}
	#columnSub .form.search {
		border-bottom: 3px solid #999;
	}
	#columnSub .form h4 {
		margin-bottom: .5em;
	}
	#columnSub .form input {
		margin: .2em 0;
	}
	
#columnSub .cart {
	border-top: 1px solid #ccc;
	margin: 0 -5px;
	padding: 10px 5px;
}
	#columnSub .cart p {
		margin: 0;
	}


/* ----------------
	FORM ELEMENTS
	Label widths are set via jQuery autoWidth, unless you want to set them manually.
    ------------- */
fieldset {
	border: 1px solid #e4e4e4;
	margin: 2em 0 0 0;
	padding: 0;
}
	fieldset ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
		fieldset li {
			clear: both;
			padding: .5em;
		}
			fieldset li.required {
				background-color: #FFFFCF;
			}			
		
fieldset legend {
	font-weight: bold;
	margin: 0;
}
	
fieldset label,
fieldset input[type="text"]{
    float: left;
    display: block;
}
fieldset label {
	text-align: right;
    margin-right: 5px;
    padding: 4px 0;
}
fieldset .inputText,
fieldset .inputTextarea,
fieldset .inputTextareaSmall {
    width: 170px;
    overflow: auto;
    padding: 4px;
}
fieldset .inputTextarea {
	height: 8em;
	width: 300px;
}
fieldset .inputTextareaSmall {
	height: 4em;
}
fieldset p.submit {
	text-align: center;
}
fieldset .errorText {
	background-color: #FEFF9F; 
}

form input.protect {
	display: none;
}

div.errors {
	background: #FEFF9F url(../images/bg_error.gif) 0 0 repeat-x;
	border: 1px solid #E0D75F;
	margin: 1em 0;
	width: 100%;
}
	div.errorsInner {
		padding-left: 80px;
		background: url(../images/big_error.gif) 15px 1em no-repeat;
	}
	
label span {
	color: #DF4545;
}

	
		

/* ----------------
	MISC
    ------------- */
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alighRight {text-align: right;}
.alignCenter {text-align: center;}
.clear {clear: both;}


/* ----------------
	CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
	add this class to the element that needs to be cleared, or add the element's class or id to the declaration below
    ------------- */ 
.clearFix:after,
.product:after,
.productDetail:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/* ------------
   WNS Internal Styles
---------------*/

.smImage{
	border:1px solid #999;
	float:right;
	padding: .5em;
	}
	
.contact
{
	margin-left:100px;
}

.deptLink
{
	margin-top:1em;
}

.hours
{
	font-size:14px;
}

.lcList dd
{
	margin-left:0px;
	text-align:left;
}

.nolist li
{
	padding-top:5px;
}

.forklift
{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}