@charset "UTF-8";
/* CSS Document */

/* ----- General Layout ----- */

*	{
	margin: 0;
	padding: 0;
	}
	
body {
	font-size: small;
	font-family: arial, verdana, sans-serif;
	color: #646057;
	background: url(../images/layout/stripes-bg2.gif);
	}
	
#container {
	width: 930px;
	margin: 0 auto;
	padding: 0 10px;
	font-size: 95%;
	background: #fff;
	}

#header {
	padding: 20px 0 15px 0;
	}
	
#leftColumn {
	float: left;
	width: 170px;
	}

#mainContent {
	float: left;
	width: 520px;
	padding-left: 35px;
	}	
		
#rightColumn {
	width: 170px;
	float: right;
	}
	
#footer {
	clear: both;
	border-bottom: 12px solid #fff;
	padding: 15px 0 15px 15px;
	border-top: 25px solid #fff;
	color: #b1edf8;
	background: #363534 url(../images/layout/footer-circles.gif) no-repeat bottom left;	
	}

/* -- Header -- */

#logo {
	margin: 0 0 8px 0;
	width: 224px;
	height: 53px;
	text-indent: -9999px;
	display: block;
	float: left;
	background: url(../images/logo.gif);
	}

#logo:hover {
	background: url(../images/logo-hover.gif);
	}

	
#headNavContainer {
	background: #363534;
	clear: both;
	}

#headerTop {
	background: url(../images/layout/header-circles.gif) bottom right no-repeat;
	}
	
#headerTop img {
	float: left;
	width: 224px;
	}
	
#headerTop p {
	float: right;
	width: 350px;
	text-align: right;
	margin: 20px 0 0 0;
	font-size: 90%;
	}
	
#emailNewsletterTB {
	width: 180px;
	margin: 0 5px 0 0;
	padding: 3px;
	background: #f1fafb;
	border: 1px solid #57c7dc;
	color: #686664;
	font-size: 95%;
	}
	
#newsletterSubmitBTN {
	background: #57c7dc;
	color: #fff;
	border: #fff solid 1px;
	padding: 3px 7px;
	font-size: 95%;	
	}
	
#topNav {
	width: 600px;
	float: left;
	font-size: 105%;
	}

#topNav select {
	width: 120px;
	margin: 10px 0 0 15px;
	color: #8b8b8b;
	}
	
#topNav li {
	float: left;
	list-style: none;
	}

#topNav a {
	display: block;
	padding: 12px 18px;
	color: #fff;
	text-decoration: none;
	}

#topNav a:hover, #header #topNav .active {
	color: #333;
	background: #ffb534;
	}

#cartSummary {
	float: right;
	padding: 13px 15px 0 0;
	font-size: 90%;
	color: #fff;
	}
	
#cartSummary li {
	display: inline;
	list-style: none;
	}
	
#cartSummary a {
	color: #fff;
	}
	
#itemCount {
	margin-right: 10px;
	}
	
.basket, .pink {
	color: #fff;
	padding: 15px 5px;
	display: block;
	}

.pink {
	color: #ed1379;
	}
	
.addedProduct {
	background: #a2da49 !important;
	}
	
/* -- Left Column -- */

#sideNav li {
	list-style: none;
	background: url(../images/layout/dots.gif) repeat-x bottom;
	font-size: 105%;
	}
	
#sideNav li a {
	display: block;
	width: 154px;
	padding: 8px;
	color: #363534;
	text-decoration: none;
	background: url(../images/layout/side-nav.gif) center right no-repeat;
	}

#sideNav li a:hover, #sideNav .active {
	color: #fff;
	background: #ed1379 url(../images/layout/side-nav-hover.gif) center right no-repeat;
	}

/* ---------- 03. Main Content ---------- */

/* -- Homepage styles ---------- */
		
.mainText {
	margin-top: 1px;
	padding: 15px 15px;
	background: #242423;
	color: #fff;
	font-size: 90%;
	}

	
.productShort {
	float: left;
	width: 160px;
	padding: 0 7px 0 6px;
	background: url(../images/layout/product-dot.gif) repeat-y right;
	margin: 20px 0 20px 0;
	font-size: 90%;
	}

.productShort img {
	margin-left: 17px;
	}
	
.productShort a, #productLongDetails a {
	padding: 5px 10px;
	display: block;
	text-align: center;
	color: #49494a;
	font-weight: bold;
	}
	
.productTitleLink, .productTitleLinkDiscontinued {
	min-height: 45px;
	height: auto !important;
	height: 45px;
	}
	
.productTitleLinkDiscontinued {
	text-decoration: line-through;
	}
	
.productShort span, #productLongDetails span {
	display: block;
	text-align: right;
	margin-top: 3px;
	}
	
.productShort span input, #productLongDetails span input {
	width: 30px;
	background: #f1fafb;
	border: #57c7dc solid 1px;
	}

.productShort strong, #productLongDetails strong {
	width: 67px; 
	display: block;
	float: left;
	padding: 5px;
	text-align: center;
	background: #b1edf8;
	color: #004d75; 
	}
	
#productLongDetails strong {
	width: 67px; 
	display: block;
	float: right;
	padding: 5px;
	text-align: center;
	background: #b1edf8;
	color: #004d75;
	}
	
.productShort .addCart, #productLongDetails .addCart {
	width: 70px;
	float: right;
	padding: 5px;
	margin-right: 1px;
	background: #ed1379;
	color: #fff;
	text-decoration: none;
	}

body .addCart:hover {
	background: #ffb534 !important;
	}
/*----------left navigation active state---------*/	

	

/*----Product Range Styles----*/

#yellowNav, #yellowNavFooter {
	background: #ffb534;
	padding: 9px 10px;
	}
	
#breadCrumbs, #breadcrumbsFooter {
	float: left;
	width: 350px;
	}
	
#breadCrumbs li {
	list-style: none;
	display: inline;
	font-size: 85%;
	color: #333;
	}
	
#breadCrumbs a {
	color: #333;
	}
	
#breadCrumbs a:hover {
	text-decoration: none;
	}
	
#breadCrumbs .active {
	font-weight: bold;
	}
	
#pager, #pagerFooter  {
	float: right;
	width: 150px;
	color: #363533;
	text-align: right;
	font-size: 90%;
	}
	
#pager a, #pagerFooter a {
	color: #333;
	margin-left: 4px;
	}
	
#pager a:hover, #pagerFooter a:hover {
	color: #fff;
	margin-left: 4px;
	}

#pager span, #pagerFooter span {
	color: #fff;
	font-weight: bold;
	}
	
/* ---------- single product styles ---------- */

.imageBorder {
	border: #e6e6e6 solid 2px;
	}
	
.productLong img {
	float: left;
	width: 225px;
	margin: 25px 0 0 0;
	}
	
#productLongDetails  {
	float: right;      
	width: 270px;
	/*position: absolute; <---- Monday: to be fixed */
	margin: 25px 0 0 0;
	padding-bottom: 20px;
	background: url(../images/layout/dots.gif) repeat-x bottom;
	}
	
body .discontinuedLabel {
	position: absolute;
	margin: 150px 0 0 -225px !important;
	}
	
.address {
	float: right;
	width: 130px;
	color: #ed1379;
	margin: 0 0 30px 30px;
	}

/* ---------- 03. Right Column ---------- */

#topTen td {
	padding: 10px 0 5px 0;
	color: #14bfd0;
	background: url(../images/layout/dots.gif) repeat-x bottom ;
	}
	
#topTen .price {
	text-decoration: line-through;
	color: #14bfd0;
	}
	
#topTen .offerPrice  {
	margin-left: 10px;
	font-weight: bold;
	color: #ed1379;
	}
	
/* -----------new line of css for pink hover stare navigation and product range--------*/	
#topTen td a:hover, .productTitleLink:hover, .productTitleLinkDiscontinued:hover {
	color: #ed1379;
	}
/*-------------------------------------------------------------------------------------*/
	
#rightColumn a {
	font-weight: bold;
	font-size: 95%;
	}
	
#rightColumn h2 {
	text-align: center;
	background-color: #363534;
	padding: 10px;
	color: #fff;
	}
	
#rightColumn table {
	margin-bottom: 20px;
	font-size: 95%;
	}
	
.salonsP {
	background: #363534;
	color: #fff;
	padding: 10px;
	margin-top: 1px;
	}
	
#salonsP a { color: #ed1379; }
#salonsP a:hover { color: #fff; }
	
.yellowButton {
	width: 20px;
	height: 20px;
	text-indent: -9999px;
	background: url(../images/layout/yellow-button.gif) no-repeat;
	}
		
/* ---------- 04. Footer Styles ---------- */

.bordered {
	border-top: #f2efeb solid 15px;
	}

#footer li {
	list-style: none;
	}
	
#footer a {
	color: #fff;
	text-decoration: none;
	}
	
#footer a:hover {
	color: #b1edf8;
	}
	
.footerSection {
	width: 240px;
	float: left;
	margin-right: 40px;
	}
	
.footerSection ul {
	float: left;
	width: 120px;
	font-size: 90%;
	}
	
.footerSection li {
	padding-top: 4px;
	}
	
#footerDetail {
	float: right;
	width: 300px;
	text-align: right;
	margin-top: 15px;
	}
	
#footerDetail li {
	display: inline;
	padding: 10px;
	}
		
#footerDetail li a:hover {
	color: #ffb534;
	}
	
#footerDetail p {
	clear: both;
	padding: 16px;
	text-align: right;
	font-size: 80%;
	}

/* -- Shopping Cart -- */

#shoppingCart {
	margin-bottom: 30px;
	}

#shoppingCart h1 {
	background: #ffb534;
	padding:  8px;
	color: #fff;
	font-size: 105%;
}

#toggled {
	clear: both;
	margin-top: 30px;
	height: 60px;
	width: 100%;
	}
	
#shoppingCart #toggled a {
	font-weight: normal;
	padding: 3px 12px;
	font-size: 85%;
	}

.cartButton, #shoppingCart p a {
	text-decoration: none;
	float: right;
	margin-left: 4px;
	color: #fff;
	background: #363534;
	padding: 5px 8px;
	font-size: 90%;
	}
	
.cartButton:hover, #shoppingCart p a:hover {
	background: #ed1379;
	color: #fff;
	}
	
#shoppingCart table {
	clear: both;
	width: 100%;
	margin: 30px 0 20px 0;
	}
	
#shoppingCart table td {
	padding-bottom: 5px;
	}
	
#shoppingCart table a {
	color: #57c7dc;
	font-weight: bold;
	}
	
#shoppingCart table input {
	width: 30px;
	padding: 2px;
	border: 1px solid #666;
	font-size: 95%;
	}
	
#shoppingCart p {
	text-align: right;
	font-weight: bold;
	font-size: 105%;
	}
	
.cartDescription {
	text-align: left;
	}
	
#shoppingCart th {
	text-align: left;
	padding-bottom: 10px;
	color: #ed1379;
	}
	
.dateDrop {
	width: 100px;
	padding: 1px;
	border: 1px solid #666;
	margin-bottom: 15px;
	}
	
/* ------------------------------------------------------------- Checkout Form -- */

.marginDots {
	padding-top: 10px;
	margin-top: 32px;
	background: url(../images/layout/dots.gif) repeat-x top;
	}
	
#checkoutForm {
	font-size: 90%;
	}

#checkoutForm p {
	padding-top: 20px;
	clear: both;
	}
	
#checkoutForm span, #contactForm span {
	position: absolute;
	margin: 4px 0 0 15px;
	}
	
#checkoutForm .short input {
	width: 100px;
	}

.hidden {
	display: none;
	}
	
.visible {
	display: block;
	}
	
h3.visible {
	padding-top: 15px;
	}

#cartTotal {
	clear: both;
	background: url(../images/layout/dots.gif) top repeat-x;
	padding-top: 10px;
	}
	
#cartTotal li {
	list-style: none;
	margin: 10px 0 0 0;
	font-weight: bold;
	text-align: right;
	}
	
.orderTotal {
	padding-top: 10px;
	}
	
#deliveryDetails {
	padding-bottom: 20px;
	}
	
/* --  Contact Form -- */

.leadingParagraph {
	background: #f2efeb;
	padding: 10px;
	}

#contactForm, #checkoutForm {
	width: 520px;
	float: left;
	padding-top: 10px;
	}
	
#contactForm dd,#checkoutForm dd {
	clear: both;
	float: left;
	width: 80px;
	padding: 4px 0;
	margin-right: 40px;
	text-align: right;
	}
	
#contactForm dt, #checkoutForm dt {
	float: left;
	width: 400px;
	}
	
#contactForm dt .textInput, #checkoutForm dt .textInput {
	width: 300px;
	margin: 0 0 15px 0;
	padding: 4px;
	border: 1px solid #666;
	}
	
#contactForm dt textarea {
	clear: both;
	margin: 0;
	width: 308px;
	border: 1px solid #666;
	}
	
span.validation {
	color: #a7c371;
	float: right;
	margin-top: 4px;
	}
	
span.validationActive {
	font-weight: bold;
	color: #ee0d00;
	float: right;
	margin-top: 4px;
	}
	
#rejected {
	font-weight: bold;
	color: #ee0d00;
	}
		
#sendButton {
	text-align: right;
	float: right;
	padding: 30px 0 0 0;
	}
	
#address {
	text-align: right;
	padding: 10px 180px 0 0;
	}

#contactForm ul {
	margin-left: 15px;
	}
	
/* ---------- misc Styles ---------- */
.required {
	margin-left: 10px;
	font-size:120%;
	color: #ed1379;
	font-weight:bold;
	}


	
/*-----------------image styles-----*/

/*--------kircubbinPage*/
.border {
	border: 1px solid #e4e4e4;
	padding: 4px;
	}
/*--------end*/	


/*--------AboutUsPage*/
.borderedImageAbout {
	float: left;
	padding:4px;
	border: 1px solid #e4e4e4;
	margin: 0px 15px 0 0;
	}
/*--------end*/	

/*---------belfastBarbers--*/
.borderedImageMargin {
	padding:4px;
	border: 1px solid #e4e4e4;
	margin:0 33px 10px 0;
	}
	
.workersLisburn {
	float: left;
	width: 120px;
	}
	
.borderedImageRightBelfastBarbers {
	float: right;
	clear: both;
	padding: 4px;
	border: 1px solid #e4e4e4;
	margin: 0 0 10px 20px;
	}
/*---------end*/


.borderedImage {
	padding:4px;
	border: 1px solid #e4e4e4;
	margin-bottom: 10px;
	}
	
.borderedImageRight {
	float: right;
	clear: both;
	padding: 4px;
	border: 1px solid #e4e4e4;
	margin: 0 10px 10px 20px;
	}
	
.borderedImageLeft {
	float: left;
	padding: 4px;
	border: 1px solid #e4e4e4;
	margin: 0 10px 10px 20px;
	}

.workers {
	float: right;
	width: 120px;
	}
	
#salonImage {
	float: left;
	width: 363px;
	}
	
/* ---------- 04. Typography Styles ---------- */

h1 { font-size: 130%; margin-bottom: 10px; }	
h2 { padding-bottom: 5px; font-size: 110%; font-family: Georgia, "Times New Roman", Times, serif; }	
h3 { font-size: 100%; margin-bottom: 2px; }

#mainContent p {
	line-height: 1.4em;
	margin-bottom: 15px;
	text-align: justify;
	}
	
#rightColumn h3 {
	font-size: 105%;
	color: #fff;
	padding: 8px;
	text-align: center;
	background: #363534;
	}

.barberHeader {
	font-size: 105%;
	padding: 8px 0;
	margin-bottom: 20px;
	background: url(../images/layout/dots.gif) repeat-x bottom;
	}
	
.list {
	margin-left: 30px;
	}
	
.list li {
	margin-top: 4px;
	}
	
p a, ul a {
	color: #ed1379;
	}

/* ---------- 05. Patches and Cracks ---------- */

/* -- 05.1 Clearing Divs -- */
	
#headerTop:after,
#topNav:after,
#productBar:after,
#mainContent:after,
#pager:after,
#footer:after,
#headNavContainer:after,
#yellowNav:after,
#yellowNavFooter:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

* html #headerTop,
* html #topNav,
* html #productBar,
* html #mainContent,
* html #pager,
* html #footer,
* html #headNavContainer,
* html #yellowNav,
* html #yellowNavFooter {
	height: 1px;
	}

*:first-child+html #headerTop,
*:first-child+html #topNav,
*:first-child+html #productBar,
*:first-child+html #mainContent,
*:first-child+html #pager,
*:first-child+html #footer,
*:first-child+html #headNavContainer,
*:first-child+html #yellowNav,
*:first-child+html #yellowNavFooter {
	min-height: 1px;
	}
	
.clear {
	clear: both;
	}
	
a img {
	border: none;
	text-decoration: none;
	}