/*===============================================================================================================

Project:		URINAL MAT
Version:		1.0
Last Changed:	05/27/2010
Author:			Daniel Rus

===============================================================================================================*/


/*===============================================================================================================

[Table of Contents]

1. GENERAL [style for body, headers, default behaviour of paragraphs, images, links etc]
2. LAYOUT [elements used to define the layout of the site]
	2.1 HEADER
	2.2 CONTENT
	2.3 FOOTER
3. NAVIGATORS [navigation for the site]
	3.1 MAIN NAVIGATOR
	3.2 GROUP NAVIGATOR
4. FORMS
	4.1 FORMS ERRORS 
5. CONTENT ELEMENTS
	5.1 HOMEPAGE
	5.2 INTERIOR PAGE - WIZKID FOR
	5.3 PRODUCT PAGE
	5.4 PRODUCT HOMEPAGE
	5.5 SHOPPING CART

===============================================================================================================*/






/* 1. GENERAL
===============================================================================================================*/

html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font: normal 0.75em/1.5em Arial; color: #333333; background: #f1f1e6 url(../../general/bgHeader.gif) repeat-x; }
h1 { color:#165da6; }
h2 {}
h3 {}
h4 {}
p { margin: 1em 0; }
img { border: none; }
a { text-decoration: none; color: #165da6; font-weight: bold; }
a:hover { color: #4b8ed4; }
.imageLeft { float: left; margin-right: 10px; }
.imageRight { float: right; margin-left: 10px; }
.clearAll { clear: both; height: 1px; font-size: 1px; overflow: hidden; }
.clearFloat:after, .section:after { content: "."; display: block; height: 0; font-size:0; clear: both; visibility: hidden; }
.clearFloat, .section { display: inline-block; } /* Hides from IE Mac \*/ * html .clearFloat, * html .section { height: 1%;} .clearFloat, .section { display: block; } /* End Hack */






/* 2. LAYOUT
===============================================================================================================*/

#container { min-height: 100%; height: auto !important; height: 100%; background: url(../../general/bgFooter.gif) repeat-x bottom; }


	/* 2.1 HEADER
	-------------------------------------------------*/
	
	#header { width: 980px; height: 123px; margin: 0 auto; background: url(../../general/topContact.gif) no-repeat right 25px; }
	.logo { float: left; margin: 15px 0 0 0; }
	.signin { margin: 0 0 0 320px; width: 420px; height: 63px; padding: 33px 0 0 46px; background: url(../../general/bgSignin.gif) no-repeat; }
	.signin form { height: 25px; }
	.signin a { color: #87878d; font-size: 0.9em; }
	.signin a:hover { color: #222222; }
	.signin .formFieldLogin { float: left; width: 130px; height: 18px; margin: 4px 12px 0 0; padding: 0; border: 0; background: transparent; }
	.signin .formButton { float: left; margin: 0; }
	
	.userSigin { margin: 0 0 0 320px; width: 420px; height: 57px; padding: 39px 0 0 46px; background: url(../../general/bgUserSignin.gif) no-repeat; }
	.userSigin a{ padding-left:10px; text-transform:capitalize;}
	
	
	/* 2.2 CONTENT
	-------------------------------------------------*/
	
	#content { width: 980px; margin: 0 auto; padding: 8px 0 55px 0; }
	.section { padding: 15px 25px; margin: 10px 0; border: 1px solid #cfcfcf; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #ffffff url(../../general/bgSection.gif) repeat-x bottom; }
	
	
	/* 2.3 FOOTER
	-------------------------------------------------*/
	
	#footer { width: 980px; height: 38px; margin: -38px auto 0 auto; color: #ffffff; font-size: 0.9em; line-height: 1em; }
	#footer p { margin: 0; padding: 15px 0 0 0; }
	#footer ul { float: right; margin: 0; padding: 15px 0 0 0; list-style: none; }
	#footer li { float: left; padding: 0 15px; border-left: 1px solid #ffffff; }
	#footer li:first-child { border: 0; }
	#footer a { color: #a9e0ff; font-weight: normal; }
	#footer a:hover { color: #ff9400; }





/* 3. NAVIGATORS
===============================================================================================================*/

	/* 3.1 MAIN NAVIGATOR
	-------------------------------------------------*/
	
	.navMain { height: 26px; border-right: 1px solid #ffffff; }
	.navMain ul { margin: 0; padding: 0; list-style: none; height: 26px;  border-right: 1px solid #dddddd; }
	.navMain li { float: left; height: 26px; border-left: 1px solid #dddddd; background: url(../../general/bgNavMain.gif) repeat-x; }
	.navMain a { float: left; height: 26px; padding: 0 30px; background: url(../../general/bulletNavMain.gif) no-repeat 8px center; font: bold 14px/26px Arial; border-left: 1px solid #ffffff; }
	.navMain a:hover { background-color: #165da7; color: #ffffff; }
	.navMain li.reorder { background: #f68f00 url(../../general/reorder.gif) no-repeat; }
	.navMain li.reorder a { color: #ffffff; padding: 0 20px 0 36px; }
	.navMain li.reorder a:hover { background: none; color: #9e1911; }
	
	
	/* 3.2 GROUP NAVIGATOR
	-------------------------------------------------*/
	
	.navGroup { margin: 0 auto; padding: 0 0 20px 10px; height: 100px;}
	.navGroup ul { margin: 0 auto; padding: 0; list-style: none; }
	.navGroup ul li { float: left; }
	.navGroup ul li a { float: left; padding: 70px 15px 30px 15px; font-size: 1.1em; }
	.icon-MemberArea { background: url(../../general/iconMember.gif) no-repeat top; }
	.icon-PersonalProfile { background: url(../../general/iconProfile.gif) no-repeat top; }
	.icon-Newsletter { background: url(../../general/iconNewsletter.gif) no-repeat top; }
	.icon-MemberProfile { background: url(../../general/iconMProfile.gif) no-repeat top; }
	.icon-CardManagement { background: url(../../general/iconCard.gif) no-repeat top; }
	.icon-Manage{background: url(../../general/iconManage.gif) no-repeat top;}
	.icon-Logout { background: url(../../general/iconLogout.gif) no-repeat top; }				
	






/* 4. FORMS
===============================================================================================================*/

form { margin: 0; padding: 0; }
form br { clear: left; }
form label { float: left; width: 120px; font-size: 1em; padding-top: 14px; font-weight: bold; color: #494949; }
form fieldset { width: 430px; float: left; margin-right: 10px; border: 1px solid  #c9c9c9; }
form legend { font-size: 1.8em; padding: 0 10px; font-weight: bold; color: #2466bf; }
.formSelect { float: left; border: solid 1px #dddddd; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 1px 0 #888888; -moz-box-shadow: 0 1px 0 #888888; -webkit-box-shadow: 0 1px 0 #888888; padding: 10px 5px; width: 302px; background: url(../../general/bgContact.gif) repeat-x bottom; margin: 0 0 12px 0; }
.formTextarea { border: solid 1px #dddddd; border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 1px 0 #888888; -moz-box-shadow: 0 1px 0 #888888; font: normal 1em Arial; color: #396fc9; -webkit-box-shadow: 0 1px 0 #888888; padding: 10px 5px; width: 290px; background: url(../../general/bgContact.gif) repeat-x bottom; margin: 0 0 12px 0; height: 120px; float: left; }				 	 
.formField { float: left; border: solid 1px #dddddd; border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 1px 0 #888888; -moz-box-shadow: 0 1px 0 #888888; float: left; -webkit-box-shadow: 0 1px 0 #888888; padding: 10px 5px; width: 290px; background: #ffffff url(../../general/bgContact.gif) repeat-x bottom; margin: 0 0 12px 0; color: #396fc9; }
.formFieldSpan { border: solid 1px #dddddd; border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 1px 0 #888888; -moz-box-shadow: 0 1px 0 #888888; float: left; -webkit-box-shadow: 0 1px 0 #888888; padding: 10px 5px; width: 290px; height: 20px; background: #ffffff url(../../general/bgContact.gif) repeat-x bottom; margin: 0 0 12px 0; color: #396fc9; }
.formFieldSpanShort { border: solid 1px #dddddd; border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: 0 1px 0 #888888; -moz-box-shadow: 0 1px 0 #888888; float: left; -webkit-box-shadow: 0 1px 0 #888888; padding: 10px 5px; width: 90px; height: 20px; background: #ffffff url(../../general/bgContact.gif) repeat-x bottom; margin: 0 0 12px 0; color: #396fc9; }
.formButtons { padding-top: 2px; margin: 0; }
.formFieldText { float: left; padding: 5px; width: 290px; color: #396fc9; font-weight: bold; }
.verificationStep { float: left; width: 130px; font-size: 1em; padding-top: 5px; font-weight: bold; color: #494949; }
.sectionRight { margin-left: 15px; }

	/* 4.1 FORMS ERRORS
	-------------------------------------------------*/

	span.error { color: red; text-align: center; }
	input.error { border: 2px solid red; }
	select.error { border: 2px solid red; }
	div.error { color: red; }
	div.action-container { position: relative; top: -45px; cursor: pointer; }
	.notificationError { padding: 8px 10px 8px 36px; background: #ffdac9 url(../../general/iconError.gif) no-repeat 8px center; border: 1px solid #ff0000; color: #ff0000; font-weight: bold; }
	.notificationVerify { padding: 8px 10px 8px 36px; background: #fffeba url(../../general/iconVerify.gif) no-repeat 8px center; border: 1px solid #ff9f51; color: #ff7200; font-weight: bold; }
	.notificationSuccess { padding: 8px 10px 8px 36px; background: #c9f09f url(../../general/iconSuccess.gif) no-repeat 8px center; border: 1px solid #66bc0a; color: #569c0b; font-weight: bold; }


/* 5. CONTENT ELEMENTS
===============================================================================================================*/

	/* 5.1 HOMEPAGE
	-------------------------------------------------*/
	
	.forHome, .forRestaurant, .forBusiness { position: relative; float: left; width: 316px; height: 200px; padding: 2px 4px 4px 2px; margin: 8px 0 0 0; background: url(../../general/spriteWizkid.gif) no-repeat 0 0; color: #1865b5; font-weight: bold; }
	.forHome, .forRestaurant { margin-right: 7px; }
	.forHome h2 { margin: 0; padding: 0; height: 35px; text-indent: -9999px; background: url(../../general/spriteWizkid.gif) no-repeat 0 -220px; }
	.forRestaurant h2 { margin: 0; padding: 0; height: 35px; text-indent: -9999px; background: url(../../general/spriteWizkid.gif) no-repeat 0 -255px; }
	.forBusiness h2 { margin: 0; padding: 0; height: 35px; text-indent: -9999px; background: url(../../general/spriteWizkid.gif) no-repeat 0 -290px; }
	.forHome p, .forRestaurant p, .forBusiness p { height: 140px; margin: 0; padding: 25px 0 0 170px; }
	.forHome strong, .forRestaurant strong, .forBusiness strong { color: #333333; }
	.forHome p { background: url(../../general/spriteWizkid.gif) no-repeat 0 -330px; }
	.forRestaurant p { background: url(../../general/spriteWizkid.gif) no-repeat 0 -500px; }
	.forBusiness p { background: url(../../general/spriteWizkid.gif) no-repeat 0 -680px; }
	.forHome a, .forRestaurant a, .forBusiness a { position: absolute; right: 3px; top: 140px; width: 154px; height: 44px; text-indent: -9999px; }
	.forHome a { background: url(../../general/spriteWizkid.gif) no-repeat -330px 0; }
	.forHome a:hover { background: url(../../general/spriteWizkid.gif) no-repeat -330px -44px; }
	.forRestaurant a { background: url(../../general/spriteWizkid.gif) no-repeat -330px -100px; }
	.forRestaurant a:hover { background: url(../../general/spriteWizkid.gif) no-repeat -330px -144px; }
	.forBusiness a { background: url(../../general/spriteWizkid.gif) no-repeat -330px -200px; }
	.forBusiness a:hover { background: url(../../general/spriteWizkid.gif) no-repeat -330px -244px; }
	.order { float: right; width: 220px; padding: 0 0 0 30px; text-align: center; }
	.order img { padding-bottom:10px;}
	.properties { margin: 0; padding: 0 0 10px 0; list-style: none; }
	.properties li { padding: 5px 0; font-size: 1.1em; }
	
	
	/* 5.2 INTERIOR PAGE - WIZKID FOR
	-------------------------------------------------*/
	.visualWizkidHome { background: url(../../general/visualWizkidHome.jpg) no-repeat; width:386px; height:403px; float:left; }
	.visualWizkidBusinesses { background: url(../../general/visualWizkidBusinesses.jpg) no-repeat; width:386px; height:403px; float:left; }
	.visualWizkidRestaurant { background: url(../../general/visualWizkidRestaurant.jpg) no-repeat; width:386px; height:403px; float:left; }		
	.visualWizkidMats{ background: url(../../general/visualWizkidMat.gif) no-repeat; width:198px; height:403px; float:right;}
	
	.infoWizkid { width:310px; float:left; padding:0px 15px; text-align:justify;}
	.infoWizkid p { margin-top:	0px; padding-top:2px; }
	.infoWizkid p strong { color:#165da6;}
	
	.orderWizkid { width:245px; margin:0 auto; padding:10px 0px;}
	.quote{ background: url(../../general/bgQuote.gif) no-repeat; padding:0px 20px 0px 60px; width:380px; float:left; margin-bottom:20px; border-top:1px solid #dddddd;}
	p.qoute  {color: red;}
	
	
	/* 5.3 PRODUCT PAGE
	-------------------------------------------------*/
	.productContainer { width: 450px; float: left; border-right: 1px solid #e0e0e0;  border-bottom: 1px solid #e0e0e0; padding: 20px 20px 30px 0; }
	.productLast{ padding-right: 0; border: none;  border-bottom: 1px solid #e0e0e0; }
	.productBottom { border-bottom:none;}
	.productContainer img { width: 170px; float: left; text-align: center; }
	.productInfo { width: 275px; float: left; padding-left: 5px;  }
	.productInfo h2 { color: #165da6; font-size: 1.8em; margin: 0 0 5px; padding-top: 10px; }
	.productInfo p { font-size: 0.9em; margin: 2px 0; text-align: justify; }
	 p.productDetails { font-size: 1.1em; font-weight: bold; padding: 5px 0; color: #4e4e4e; }	
	.price { font-size: 1.3em; color: #575757; border-top: 1px dotted #afafaf; border-bottom: 1px dotted #afafaf; padding: 4px 0; font-weight: bold; }
	.price span { color: #165da6; }
	.productInfo label { float: left; width: 70px; font-size: 1.2em; padding-top: 14px; font-weight: bold; color: #575757; }
	.quantityField { border: solid 1px #dddddd; border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 0 1px 0 #888888; -moz-box-shadow: 0 1px 0 #888888; float: left; -webkit-box-shadow: 0 1px 0 #888888; padding: 4px 5px; width: 90px; background: #ffffff url(../../general/bgContact.gif) repeat-x bottom;  margin: 8px 0 12px; color: #396fc9; }
	

	/* 5.4 PRODUCT HOMEPAGE
	-------------------------------------------------*/
	.productHomepageContainer { width: 900px; float: left; border-bottom: 1px solid #e0e0e0; padding: 20px 20px 30px 20px; }
	.productHomepageContainer img { width: 180px; float: left; text-align: center; }
	.productHomepageInfo { width: 600px; float: left; padding-left: 5px;  }
	.productHomepageInfo h2 { color: #165da6; font-size: 1.8em; margin: 0 0 5px; padding: 10px 0; border-bottom: 1px dotted #afafaf;  }
	.productHomepageInfo p { font-size: 0.9em; margin: 2px 0; text-align: justify; }
	 p.productDetails { font-size: 1.1em; font-weight: bold; padding: 5px 0; color: #4e4e4e; }	
	.price { font-size: 1.3em; color: #575757; border-top: 1px dotted #afafaf; border-bottom: 1px dotted #afafaf; padding: 4px 0; font-weight: bold; }
	.price span { color: #165da6; }
	.productHomepageInfo label { float: left; width: 70px; font-size: 1.2em; padding-top: 14px; font-weight: bold; color: #575757; }
	.quantityField { border: solid 1px #dddddd; border-radius:7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; box-shadow: 0 1px 0 #888888; -moz-box-shadow: 0 1px 0 #888888; float: left; -webkit-box-shadow: 0 1px 0 #888888; padding: 4px 5px; width: 90px; background: #ffffff url(../../general/bgContact.gif) repeat-x bottom;  margin: 8px 0 12px; color: #396fc9; }

	
	/* 5.5 SHOPPING CART
	-------------------------------------------------*/
	
	.steps { background-color: #f2f2f2; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 10px; margin: 0 -25px; }
	.steps ul { margin: 0; padding: 0; list-style: none; height: 31px; }
	.steps li { float: left; height: 31px; background: url(../../general/arrow.gif) no-repeat left center; padding: 0 10px 0 20px; }
	.steps li:first-child { background: none; }
	.steps span { float: left; height: 31px; width: 166px; background: url(../../general/step.gif) no-repeat 0 0; font: bold 18px/31px Arial; letter-spacing: -1px; color: #1966b8; text-align: center; }
	.steps span.active { background: url(../../general/step.gif) no-repeat 0 -31px; color: #ffffff; }
	.shoppingButtons { padding: 10px 0; text-align: right; }
	.shoppingButtons span { float: left; line-height: 28px; }
	.shoppingList { padding: 3px 3px 25px 3px; border: 1px solid #e5e5e5; background: #ffffff url(../../general/bgList.gif) repeat-x bottom; }
	.shoppingList th { background: url(../../general/bgTitles.gif) repeat-x; height: 34px; padding: 0 10px; text-align: left; }
	.shoppingList td { padding: 10px; border-top: 1px solid #e5e5e5; }
	.shoppingList td a { font-size: 1.5em; font-weight: bold; letter-spacing: -1px; }
	.shoppingList .formField { padding: 3px 5px; width: 80px; }
	.shoppingList .formUpdate { float: left; margin: 4px 0 0 5px; display: inline; }
	.shoppingList td.shoppingList-logo { width: 60px; }
	.shoppingList td.shoppingList-name {}
	.shoppingList td.shoppingList-quantity { padding: 10px 0; }
	.shoppingList td.shoppingList-quantity div { width: 115px; height: 25px; padding: 20px 30px; border-left: 1px solid #e5e5e5; }
	.shoppingList td.shoppingList-price { padding: 10px 0; font-size: 14px; font-weight: bold; color: #165da6; }
	.shoppingList td.shoppingList-price div { width: 240px; height: 25px; line-height: 25px; border-left: 1px solid #e5e5e5; padding: 20px 30px; }
	.shoppingList td.shoppingList-options { width: 20px; padding: 7px 10px 7px 0; }
	
	.shippingList { padding: 3px 3px 25px 3px; margin: 20px 0; border: 1px solid #e5e5e5; background: #ffffff url(../../general/bgListShort.gif) repeat-x bottom; }
	.shippingList th { background: url(../../general/bgTitles.gif) repeat-x; height: 34px; padding: 0 10px; text-align: left; border-bottom: 1px solid #e5e5e5; }
	.shippingList td { padding: 10px; border-bottom: 1px solid #e5e5e5; }
	.shippingList td.shippingList-name { font-weight: bold; }
	.shippingList td.shippingList-price { width: 210px; padding: 10px 0; font-size: 14px; font-weight: bold; color: #165da6; }
	.shippingList td.shippingList-price div { width: 150px; height: 25px; line-height: 25px; border-left: 1px solid #e5e5e5; padding: 0 30px; }
	
	.shoppingTotal { margin: 10px 0; background-color: #ececec; }
	.shoppingTotal ul { float: right; margin: 0; padding: 0; list-style: none; }
	.shoppingTotal li { display: block; width: 260px; padding: 5px 10px 5px 20px; background-color: #1966b8; color: #ffffff; font-weight: bold; }
	.shoppingTotal span { float: left; width: 180px; }
	
	.billingDetails, .paymentMethods, .additionalInformation, .shippingDetails { margin: 0 0 20px 0; padding: 3px 13px 25px 13px; border: 1px solid #e5e5e5; background: url(../../general/bgList.gif) repeat-x bottom; }
	.billingDetails h2, .paymentMethods h2, .additionalInformation h2, .shippingDetails h2 { height: 34px; margin: 0 -10px; padding: 0 10px; background: url(../../general/bgTitles.gif) repeat-x; border-bottom: 1px solid #eaeaea; font: bold 1.1em/32px Arial; }
	.shoppingNotes { font-size: 0.9em; }
	.billingDetails label, .shippingDetails label { width: 100px; }
	.billingDetails fieldset, .shippingDetails fieldset { width: 420px; float: left; margin: 10px 0 0 0; border: 0; padding: 0 24px 0 0; }
	.billingDetails fieldset.last, .shippingDetails fieldset.last { padding: 0 0 0 35px; border-left: 1px solid #e5e5e5; }
	.methods { padding: 0 0 10px 0; }
	.methods ul { margin: 0; padding: 0; list-style: none; }
	.methods li { display: inline; padding: 0 40px 0 0; font-size: 1.2em; font-weight: bold; }
	.paymentMethods fieldset { float: none; width: auto; padding: 15px 0 0 0; margin: 10px 0 0 0; border: 0; border-top: 1px solid #e5e5e5; }
	.paymentMethodsLabel { width: auto; padding: 3px 10px 3px 0; }
	.paymentMethods .formField { padding: 3px 5px; margin-right: 10px; }
	.paymentMethods .formSelect { padding: 3px 5px; margin-right: 3px; }
	.saveTime { margin: 0 0 20px 0; }
	.additionalInformation fieldset { width: auto; float: none; margin: 0; border: 0; padding: 10px 0 0 0; }
	.additionalInformation label { width: 160px; }
	.billingDetails ul, .additionalInformation ul, .shippingDetails ul { margin: 0; padding: 0; list-style: none; }
	.billingDetails ul li, .additionalInformation ul li, .shippingDetails ul li { display: block; margin: 4px 0; }
	.billingDetails ul li strong, .shippingDetails ul li strong { float: left; width: 120px; }
	.additionalInformation ul li strong { float: left; width: 150px; }
	.confirmOrder { background-color: #fffbdd; border: 1px solid #ffe985; padding: 10px; margin-bottom: 20px; }
	.confirmOrder p { margin: 0; }
	.confirmOrder h2 { margin: 0; padding: 0; font: bold 1.2em Arial; color: #ee0000; }
	.automaticRefill { padding: 8px 56px; margin: 1px -24px 0 -24px; background: #fffeba url(../../general/iconVerify.gif) no-repeat 24px 7px; border-bottom: 1px solid #fff477; }
	.automaticRefill a { font-weight: bold; font-size: 1.2em; }
	
	.productSubscriptionList{border-collapse:collapse; font-weight:normal; width:928px;}
	.productSubscriptionList td, #empireTables th {font-size:1em; border:1px solid #1d5299; padding:3px 7px 2px 7px;}
	.productSubscriptionList th {font-size:1em; text-align:left;padding:5px 4px; background-color:#2466bf; color:#ffffff; border:1px solid #1d5299; }
	.productSubscriptionList tr.alt td {color:#000000;background-color:#fff;}