/* 
-------------------------------------------------------------------------
-------------------------------------------------------------------------
------------------------- skin specific styles --------------------------
-------------------------------------------------------------------------
*/


/*
This skin mostly replaces menus, buttons and headers with images.
If you delete between the main comments you'll get a nicely styled non-image alternative.

This skin also switches between a commonly used footer. So this skins footer bleeds all the way left and right, the default skin appears contained within the wrapper.

You can switch this skin off in css-main to toggle between a graphical template and a style that uses no images
*/


/* graphical logo: */
#logo {
	position: absolute;
	top: 19px;
	left: 39px;
	overflow:hidden;
	padding:0px;
}

#logo a {
	width: 198px;
	height: 82px;
	background:url(../images/creation-agency.gif) no-repeat left top;
	display: block;
	text-indent:-9000px;
	text-decoration: none;
	overflow: hidden;
}







/* 
-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------- global navigation ----------------------------
-------------------------------------------------------------------------
*/



#globalNav {
	list-style-type: none;
	position: absolute;
	left: 32px;
	top: 121px;
	width: 886px;	
	height: 38px;
	z-index: 100;
	background: #374D53;
}

#globalNav li {
float: left;
}

/*fix the menu for IE 6*/
#globalNav li a {
display:inline-block;
}

#globalNav li a {
text-indent:-9000px;
overflow:hidden;
height:38px;
color: #374D53;
display:block;
text-decoration:none;
background-image: url(../images/global-nav.gif);
background-repeat: no-repeat;
}



#globalNav li ul {
	position: absolute;
width: 268px;
	left: -999em;
	list-style-type: none;

}

#globalNav li:hover ul, #globalNav li.sfhover ul {
	left: auto;
}

#wrapper #globalNav ul li a:link, #wrapper #globalNav ul li a:visited {
background: #374D53;
color: #fff;
text-indent: 0;
height: auto;
width: 250px;
padding: 4px 9px;
}
#wrapper #globalNav ul li a:hover, #wrapper #globalNav ul li a:active, #wrapper #globalNav ul li a:focus {
background: #374D53;
color: #CADDDE;
text-indent: 0;
height: auto;
width: 250px;
}





#navHome a:link, #navHome a:visited {
width:54px;
background-position: 0 0;
}
#navHome a:hover, #navHome a:active, #navHome a:focus, #pageHome #navHome a:link, #pageHome #navHome a:visited {
width:54px;
background-position: 0 -38px;
}

#navB2B a:link, #navB2B a:visited {
width:100px;
background-position: -54px 0;
}
#navB2B a:hover, #navB2B a:active, #navB2B a:focus, #pageB2B #navB2B a:link, #pageB2B #navB2B a:visited {
width:100px;
background-position: -54px -38px;
}

#navRetail a:link, #navRetail a:visited {
width:114px;
background-position: -154px 0;
}
#navRetail a:hover, #navRetail a:active, #navRetail a:focus, #pageRetail #navRetail a:link, #pageRetail #navRetail a:visited {
width:114px;
background-position: -154px -38px;
}

#navTechnical a:link, #navTechnical a:visited {
width:134px;
background-position: -268px 0;
}
#navTechnical a:hover, #navTechnical a:active, #navTechnical a:focus, #pageTechnical #navTechnical a:link, #pageTechnical #navTechnical a:visited {
width:134px;
background-position: -268px -38px;
}

#navWho a:link, #navWho a:visited {
width:95px;
background-position: -402px 0;
}
#navWho a:hover, #navWho a:active, #navWho a:focus, #pageWho #navWho a:link, #pageWho #navWho a:visited {
width:95px;
background-position: -402px -38px;
}

#navContact a:link, #navContact a:visited {
width:95px;
background-position: -497px 0;
}
#navContact a:hover, #navContact a:active, #navContact a:focus, #pageContact #navContact a:link, #pageContact #navContact a:visited {
width:95px;
background-position: -497px -38px;
}





/*
----------------------------------
----- end global navigation ------
----------------------------------
*/









/* 
-------------------------------------------------------------------------
-------------------------------------------------------------------------
------------- image replacement for all the panel headers ----------------
-------------------------------------------------------------------------
*/

.supplementaryContent .panel h2 {
text-indent: -9999px;
overflow: hidden;
}

.supplementaryContent .panel a {
color: #fff;
}

#shoppingAssistant h2 {
/* might not be in supplementary */
background: url(../images/headers/shopping-assistant.gif) no-repeat left top;
text-indent: -9999px;
overflow: hidden;
height: 37px;
}

.supplementaryContent #searchPanel h2 {
background: url(../images/headers/panel-search.gif) no-repeat left top;
}

.supplementaryContent #rangesPanel h2 {
background: url(../images/headers/panel-collection.gif) no-repeat left top;
}

.supplementaryContent #bestSellersPanel h2 {
background: url(../images/headers/panel-bestsellers.gif) no-repeat left top;
}

.supplementaryContent #bestSellersPanel h2#otherBestSellers {
	padding-top: 16px;
	background: url(../images/headers/panel-other-bestsellers.gif) no-repeat left bottom;
	clear: both;
}

.supplementaryContent #categoryPanel h2 {
background: url(../images/headers/panel-category.gif) no-repeat left top;
}

.supplementaryContent #accountPanel h2 {
background: url(../images/headers/panel-account.gif) no-repeat left top;
}

.supplementaryContent #blogPanel h2 {
background: url(../images/headers/panel-blog.gif) no-repeat left top;
}

.supplementaryContent #newsPanel h2 {
background: url(../images/headers/panel-news.gif) no-repeat left top;
}

.supplementaryContent #basketPanel h2 {
background: url(../images/headers/panel-basket.gif) no-repeat left top;
}

.supplementaryContent #changingPanel h2 {
background: url(../images/headers/panel-changing.gif) no-repeat left top;
}

.supplementaryContent #optionsPanel h2 {
background: url(../images/headers/panel-options.gif) no-repeat left top;
}

.supplementaryContent #securePanel h2 {
background: url(../images/headers/panel-secure.gif) no-repeat left top;
}

.supplementaryContent #subscribePanel h2 {
background: url(../images/headers/panel-newsletter.gif) no-repeat left top;
}

.supplementaryContent #advertsPanel h2 {
background:  url(../images/headers/panel_confidence.gif) no-repeat left top;
}
.supplementaryContent .panel {
background: url(../images/panel-repeater.gif) repeat-y left top;
}

.supplementaryContent .panel ul {
background: url(../images/panel-bottom.gif) no-repeat left bottom;
}








/*
----------------------------------
----- end of panel headers -------
----------------------------------
*/







/* 
-------------------------------------------------------------------------
-------------------------------------------------------------------------
------------- image replacement for main page headings ------------------
-------------------------------------------------------------------------
*/

h1#welcome {
width: 444px;
height: 25px;
background: url(../images/headers/welcome.gif) no-repeat left top;
text-indent: -9999px;
}



h1.dynamicTitle {
/* approximate graphical headers for those headings that need to be dynamic, eg. in products.skin */
background: url(../images/headers/blank-header.gif) no-repeat left top;
}


h1#featuredProducts {
background-image: url(../images/headers/featured.gif);
}
h1#titleSubscribe {
background-image: url(../images/headers/subscribe.gif);
}

h1#titleBlog {
background-image: url(../images/headers/blog.gif);
}

h1#titleNews {
background-image: url(../images/headers/latest-news.gif);
}

h1#titleWish{
background-image: url(../images/headers/wish-list.gif);
}

h1#productDetails {
background-image: url(../images/headers/product-details.gif);
}

h1#titleAboutUs {
background-image: url(../images/headers/about-us.gif);
}

h1#titleAccessibility {
background-image: url(../images/headers/accessibility-statement.gif);
}

h1#titleRecommend {
background-image: url(../images/headers/recommend-friend.gif);
}

h1#titleFAQs {
background-image: url(../images/headers/frequently-asked-questions.gif);
}

h1#titleContactUs {
background-image: url(../images/headers/contact-us.gif);
}

h1#titleMyBasket {
background-image: url(../images/headers/my-basket.gif);
}

h1#titleMyAccount {
background-image: url(../images/headers/my-account.gif);
}

h1#titleCheckout {
background-image: url(../images/headers/checkout.gif);
}

h1#titleShippingReturns {
background-image: url(../images/headers/shipping-returns.gif);
}

h1#titlePrivacy {
background-image: url(../images/headers/privacy.gif);
}

h1#titleTermsConditions {
background-image: url(../images/headers/terms-conditions.gif);
}

h1#titleSiteMap {
background-image: url(../images/headers/sitemap.gif);
}

h1#otherProdsInterest {
background-image: url(../images/headers/other-products-interest.gif);
}

h1#customersAlsoBought {
background-image: url(../images/headers/customers-also-bought.gif);
}
h1#fourOFour {
background-image: url(../images/headers/404.gif);
}


h2#titleProductsOfInterest {
background-image: url(../images/headers/products-of-interest.gif);
/* semantically this is an h2, but visually like an h1: */
width: 498px;
height: 37px;
margin-left: 0;
}

h2#titleContactForm {
background-image: url(../images/headers/contact-form.gif);
}

h1#titleReviews {
background-image: url(../images/headers/title-customer-reviews.gif);
}

h2#customerReviews {
background-image: url(../images/headers/customer-reviews.gif);
}

h2#titleContactDetails {
background-image: url(../images/headers/contact-details.gif);
}

h2#titleAdditionalInstructions {
background-image: url(../images/headers/additional-instructions.gif);
width: 500px;
margin-left: 0;
}

h2#existingCustomers {
background-image: url(../images/headers/existing-customers.gif);
position:absolute;
top:-34px;
left:1px;
}

h2#firstOrder {
background-image: url(../images/headers/first-order.gif);
position:absolute;
top:-34px;
left:1px;
}

h2#titleCreateAcc1 {
background-image: url(../images/headers/create-account1.gif);
}
h2#titleCreateAcc2 {
background-image: url(../images/headers/create-account2.gif);
}
h2#titleCreateAcc3 {
background-image: url(../images/headers/create-account3.gif);
}
h2#titleCreateAcc4 {
background-image: url(../images/headers/create-account4.gif);
}

h2#titleCheckout1 {
background-image: url(../images/headers/checkout1.gif);
}
h2#titleCheckout2 {
background-image: url(../images/headers/checkout2.gif);
}
h2#titleCheckout3 {
background-image: url(../images/headers/checkout3.gif);
}
h2#titleCheckout4 {
background-image: url(../images/headers/checkout4.gif);
}


h2#deliveryAddresses {
margin-top:30px;
background-image: url(../images/headers/delivery-addresses.gif);
}

h2#invoiceAddresses {
margin-top:30px;
	background-image: url(../images/headers/invoice-address.gif);
	
}

h2#help {
background-image: url(../images/headers/help.gif);
}



h2#titleForgotPassword {
background-image: url(../images/headers/forgotten-password.gif);
}


/*lets make an exception of accounts and order history, you can have too many styled headers!*/
h2#accountDetails {
margin-left:0px;
text-indent:0px;
}
h2#orderHistory {
margin-left:0px;
text-indent:0px;
}

/*
----------------------------------
------- end main headings --------
----------------------------------
*/








/* 
-------------------------------------------------------------------------
-------------------------------------------------------------------------
----------------- image replacement for all buttons ---------------------
-------------------------------------------------------------------------
*/

/*smaller buttons*/
.productListing .item .fakeButton, #wrapper .item .styledSubmit, #wrapper .panel .styledSubmit, .panel #bestSellerDetails {
width: 120px;
height: 26px;
padding: 0;
border: 0;
display:block;
text-indent: -9999px;
overflow: hidden;
float: left;
}

.productListing .item .fakeButton{
background: url(../images/buttons/more-details.gif) no-repeat left top;
}

#wrapper .item .addToBasket, #wrapper #addToBasket {
background: url(../images/buttons/add-to-basket.gif) no-repeat left top;
}

.panel #bestSellerDetails {
background: url(../images/buttons/more-details.gif) no-repeat left top;
}

.panel #searchPanelSubmit{
background: url(../images/buttons/search.gif) no-repeat left top;
}
.panel #newsletterPanelSubmit{
background: url(../images/buttons/subscribe.gif) no-repeat left top;
}
.panel #accountPanelSubmit{
background: url(../images/buttons/log-in.gif) no-repeat left top;
}

#wrapper .item .styledSubmit:hover,
#wrapper .item .styledSubmit:active,
#wrapper .item .styledSubmit:focus,
#wrapper .panel .styledSubmit:hover,
#wrapper .panel .styledSubmit:active,
#wrapper .panel .styledSubmit:focus,
#wrapper .item .fakeButton:hover,
#wrapper .item .fakeButton:active,
#wrapper .item .fakeButton:focus {
background-position:-120px top;/*rollover effect*/
}

/*smaller end*/

/*bigger buttons*/
#basketPanel .styledLink {
width: 190px;
height: 28px;
margin-left:5px;
border: 0;
text-indent: -9999px;
float: left;
margin-right: 4px;
padding: 0px;
overflow: hidden;
}


#basketPanel #basketPanelEdit{
background: url(../images/buttons/view-edit-basket.gif) no-repeat left top;
}

#basketPanel #basketPanelCheckout {
background: url(../images/buttons/go-to-checkout.gif) no-repeat left top;
}

#basketPanel #basketPanelOneClick {
background: url(../images/buttons/one-click-order.gif) no-repeat left top;
}

.options {
margin-top:10px;
}

#optionsPanel #optionsPanelBack {
background: url(../images/buttons/back-to-shop.gif) no-repeat left top;
}

#wrapper #basketPanel .styledLink:hover,
#wrapper #basketPanel .styledLink:active{
background-position:-190px top;/*rollover effect*/
}
/*bigger end*/





/*end of button styles*/





/*edit buttons and image replacement for account section*/




#wrapper .styledTable .editButton{
background:url(../images/icons/edit.gif) no-repeat  left center;
}
#pageMyAccount #wrapper .addButton{
	background:url(../images/icons/add.gif) no-repeat  left center;
	margin-left: 48px;
}
#pageCheckout1 #wrapper .addButton, #pageCheckout2 #wrapper .addButton, #pageCheckout3 #wrapper .addButton, #pageCheckout4 #wrapper .addButton{
background:url(../images/icons/add-inline.gif) no-repeat  left center;
color:#000000;
padding-left:22px;
margin-left: 0px;
margin-bottom:20px;
text-decoration: none;
}
#pageCheckout3 #wrapper .styledTable .editButton{
background:url(../images/icons/edit.gif) no-repeat  left center;
	float:right;
	display:block;
	position:absolute;
	padding-left:35px;
	top:0px;
	left:280px;
	width:180px;
	}

#pageMyAccount #wrapper .deleteButton{
background:url(../images/icons/delete.gif) no-repeat  left center;
}
#pageMyAccount #wrapper .setButton{
background:url(../images/icons/accept.gif) no-repeat  left center;
}
#pageMyAccount #wrapper .helpBox, #pageMyOrders #wrapper .helpBox{
margin-top:40px;
padding-left:100px;
background:#95B896 url(../images/icons/info.gif) no-repeat 10px center;
width:578px;
}



/*end*/