/**
 *  SHOP.CSS
 *  Wedowebsites 
 * 
 *  The general arrangement is:
 *  - navigation
 *  - list pieces, show cat
 *  - show piece
 *  - checkout, payment
 *  - useraccount
 *  
 **/




/*=================================================================================================
       NAV
==================================================================================================*/



/* BREADCRUMB NAV */

div.dBreadcrumbs{
	clear:both;
	width:100%;
	text-align:left;
	padding:2px 0 0 ;
	background-color:#ccc;  
}
a.cookie-crumb { 
	display:inline; 
	padding-right:10px; 
	background: url(/templates/imgs/crumb-sep.png) right center no-repeat;
}
div.cookie-crumb-nav{
	width:92%;
	text-align:left;
	font-size:0.95rem;
	margin:0 0 4px 2%;
}
div.cookie-crumb-nav span { font-size:inherit;}

a.cookie-crumb:link, a.cookie-crumb:visited, a.cookie-crumb:active {
	color: #000;
	text-decoration: underline;
}
a.cookie-crumb:hover {
	color: #000;
	text-decoration: none;
}


/* TOP CATEGORY PIC NAV */
/* This is a feature nav for footer area with thumnails, top level of categorys only*/

div.dTopCatPicNav  { margin:10px 0;}
ul.top-cat-pic-nav { font-size:12px; text-transform:uppercase; text-align:center; font-weight:bold;}
ul.top-cat-pic-nav li { list-style:none; display:inline-block; width:137px; padding:3px; border-radius:5px; border:1px dotted #ccc;}
ul.top-cat-pic-nav li:hover { background:#eee; box-shadow:0px 0px 5px rgba(38,56,127,0.4);border:1px dotted #eee; }
ul.top-cat-pic-nav a:hover { color:#26387F; }
ul.top-cat-pic-nav a { text-decoration:none; color:black;}
ul.top-cat-pic-nav span { display:block;}


/* TEXTNAV */
/* Choose one of textnav or catnav for the footer area*/

div#textnav            { margin:15px auto; 
								 font-size:10px;
								 font-size:1.0rem;	
								}
div#textnav ul         { display:inline; }
div#textnav li         { display:inline; text-decoration:none; padding-left:4px; border-left:1px solid #666; line-height:18px;}
div#textnav li a       { color:#000; font-weight:normal;font-size:11px; position:relative; top:-3px;}
div#textnav li a:hover { color:#eee; }
div#textnav li:first-child { border-left:0;}


/* CATNAV */
/* This one is multilevel ul, sub ul etc. */

#catnav{
	text-align:left;
	padding:0 20px;
	padding-bottom:10px;
}
#catnav li.level1{
	margin-top:5px;
	margin-left:0; 
	/* border:1px dashed yellow; */
	float:left;
	width:15rem;
}
#catnav li.level2    { margin-top:0; margin-left:1em;  }
#catnav li.level3    { margin-top:0; margin-left:2em;  }
#catnav li.level4    { margin-top:0; margin-left:3em;  }
#catnav li.level5    { margin-top:0; margin-left:4em;  }
#catnav li.level1 a  { color:#B6B5B5; font-size:1.1rem; font-weight:bold; }
#catnav li.level2 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }
#catnav li.level3 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }
#catnav li.level4 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }
#catnav li.level5 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }
#catnav li a:hover  { color:red;}

#catnav a, #catnav div.dummy{
	text-decoration:none;
	font-weight:bold;
	padding:2px 0 2px 2px;
}

#catnav li a {
	color:#fff;
}
#catnav li li a {
	color:#fff;
}  
#catnav li:hover{
	/*background-color:#ccc;*/
}
#catnav li li li:hover a{
	/*color:blue;*/ 
	text-decoration:underline;
}  
#catnav a.up, #catnav a.up:visited  { 
	/*color:#fff;*/							
}
#catnav a.down, #catnav a.down:visited  { 
	color:#f00;							
}





/*=================================================================================================
       SHOW CATEGORY
================================================================================================= */


div.dCatImage     { float:right; margin-left:20px; }
div.dShowCat h3   { clear:both;}

div.dSubCats      { margin-left:0px;  }  
div.dSubCat       { text-align:left;  text-decoration:none; border-top:1px dotted #aaa;}  
div.dSubCat a     { text-decoration:none;}  
div.dSubCat:hover { border-radius:5px; background: #e9e9f3; }  
div.dSubCat:hover strong { /*text-decoration:underline;*/ }  

span.sCatImage    { display:table-cell; vertical-align:top; padding:6px; padding-left:10px; }
span.sCatImage img{ margin:0 }
span.sCatCaption        { display:table-cell; vertical-align:top; width:999px; }
span.sCatCaption        {}
span.sCatCaption strong { display:block; font-weight:bold; color:#7A3C56;  }



/*=================================================================================================
        LIST PIECES
================================================================================================= */


div.dListPieces         { clear:both; text-align:left; margin:30px 0 5px 0; padding:5px 0; border-top:1px dashed #aaa;  }  
div.dListPiece          { width:165px; vertical-align:top; display:inline-block; text-align:center; padding:8px 5px 5px;}  
div.dListPiece a        { text-decoration:none; } 
div.dListPiece img      { display:block; margin:0 auto; } 
div.dListPiece em       { display:block; font-size:11px; font-weight:bold; font-style:italic; text-align:center;}
div.dListPiece:hover em { text-decoration:underline;}
div.dListPiece:hover    { background:#e6e6ef; border-radius:5px;}  




/*=================================================================================================
        SHOWPIECE
================================================================================================= */

/*there are 6 main blocks, try and keep them in order*/

div#piececontainer {} /*main wrapper*/


/* 1. IMAGE BLOCK */
div#pieceimagesblock{
    float:right;
    max-width:50%;
    margin-left:10px;
} 

div#piecemainimagecontainer{} 

div#piecemainimagecontainer img{ /*the big image*/
	border:1px solid #B69FA9; 
	border-radius:3px; 
	width:100%;
}

/* these classes used by js for the thumb changer*/
a.piecethumb           { margin:5px; border:2px solid #999;} 
a.piecethumbsel        { margin:5px; border:2px solid #333;} 


/* 2. DESCRIPTION BLOCK */

div#piecedescriptionsblock{} /* markupper handles this */
div#piecedescriptionsblock:after { content: ""; display:table; clear:both;}


/* 3. VARIATIONS BLOCK */

div#piecevariationsblock{
	margin:20px auto;
	max-width:440px;
	border:2px dotted #ddd; border-radius:7px;
	padding:6px;
}

div#piecevariationsblock h4 { font-size:1.35em;}

div#piecevariationsbox{
	display:inline-block;
	vertical-align:top;
	width:340px;
}

div.piecevariation {
	margin-top:10px;
}

div.piecevariationbox {
	outline:1px solid magenta;
}

div.piecevariation label{
	text-align:left;
	font-weight:bold;
}
div.piecevariation select{
	width:100%; /*for now leave this fixed width as the popup variations require it*/
}

/* variation option image */
div#pieceoptionimagebox{
	display:inline-block;
	vertical-align:top;
	margin-left: 25px;
	margin-top: 27px;
	width: 65px;
	height:65px;
}
div#pieceoptionimagebox img { border:1px solid #B69FA9; border-radius:3px;} 

/* these classes used by js for the thumb changer*/
img.pieceoptionimageoff   { display:none;}  
img.pieceoptionimageon    { display:block; margin:0 6px 0 0;}


/* POPUP VARIATIONS */

/* trigger div overlay*/
div.variation-popup      { position:relative;}
div.variation-popup span { display:block; position:absolute; left:0; top:0; /*outline:1px solid magenta;*/}


/* the popup itself */
div.vpopup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  border-radius:4px;
}

/* popup options */
div.vpopup ul { border:1px solid #aaa;}
div.vpopup li { border-bottom:1px dotted #ccc;}
div.vpopup li div  { display:table-cell; vertical-align:middle; height:45px; width:48px;}
div.vpopup li span { display:table-cell; vertical-align:middle; padding-left:6px;}
div.vpopup li div img { margin-left:3px; width:38px;}
div.vpopup li:hover {  cursor:pointer; background-color:#ccc; border-radius:3px;}



/* 4. QTY BLOCK */

div#pieceqtyblock{
	margin:25px 0 0 0;
	text-align:center;
}
div#pieceqtyblock select{
	width:15%;
}


/* 5. PRICES BLOCK */

div#piecepricesblock { margin-top:30px;}

div#currencyblock    { margin-bottom:10px; text-align:center; }

table#piecepricestable { margin:0 auto;}
table#piecepricestable td   { padding-right:20px;}
table#piecepricestable td.l { text-align:left; font-weight:bold; font-style:normal; color:#666;}
table#piecepricestable td.m { text-align:right;}
table#piecepricestable td.r { text-align:left; }
table#piecepricestable td.r span { text-align:left; color:#aaa;}


/* 6. BUTTON BLOCK */

div#piecebuttonblock {text-align:center; margin-top:30px;}


/*=================================================================================================
        PRODUCT CONTACT
================================================================================================= */

form.formEnq { max-width:350px; margin:0 auto; text-align:left;}
form.formEnq div { margin-top:1.2em;}
form.formEnq label { display:block; color:#666; }
form.formEnq input[type='text'],form.formEnq textarea { width:100%; }
p.pRequired { font-size:1em; color: #666;}



/*=================================================================================================
        CHECKOUT
================================================================================================= */


table.purchaser label { font-size:1.1em;}
table.purchaser div.row { padding-top:4px;}

table.tabFullCart {width:auto;margin:0 20px; border-collapse:collapse;}
td.tdFullCart, th {padding:4px;border:1px solid #ccc;}
.right{
	text-align:right;
}
.rightbold{
	text-align:right;
	font-weight:bold;
}
.left{
	text-align:left;
}

/* checkout page personal details */
table.tabInner{
	margin:0 auto;
	width: 500px;
	vertical-align:top;
	border-collapse:collapse;
}
td.Ralign, td.tdRalign {
	text-align: right;
	font-size: 1.2em;
	font-weight:bold;
	padding-right:1em;
	vertical-align:top;
}
td.Lalign, td.tdLalign {
	text-align: left;
	font-size:0.9em;
	font-weight:bold;
}
td.tdFormCentre{
	text-align:center;
}
span.bold {
	font-weight:bold;
}

div.dButtonsCheckout{
	margin:0 0 20px 0;
}
textarea {
	margin:4px 1px 0 0;
}
#checkout2 {
	width:50%;
	text-align:left;
	margin:0 auto 20px auto;
	/*padding:3px;
	border:1px solid black;*/
}


#accounts-codes table { margin:1em auto;border-collapse:collapse;}
#accounts-codes td { border:1px solid #999;border-collapse:collapse;padding:2px;}


#piececontainer div.product_pdf_block img {border:0;}

div#fullcartview input.boxes { width:20px;}
.pag-controls { margin:15px;}

/* FREIGHT BY VALUE */
div#freight_mark2{
	border:1px dashed #ccc;
	margin:10px;
	padding:10px;
	
}
div#freight_mark2 table td{
	text-align:left;
	font-size:1.2em;
	padding:0 5px;
	vertical-align:top;
}


/* CHECKOUT STYLES */


/*blocks*/
#fullcartview {margin-bottom:20px;}
#fullcartview table    { margin:0 auto;}
#fullcartview table td { text-align:left;padding:0 5px;font-size:11px;}
#fullcartview table th { text-align:left;font-size:11px;}

#checkout-shipping    { width:70%; margin:0 auto 20px; text-align:left; border:1px dashed #ddd; padding:5px; font-size:1.0em;}
#checkout-shipping table { width:100%}
#checkout-shipping table td {vertical-align:top; padding:1px 3px 1px 0;}
#checkout-shipping p {
	font-size:1.0em;
	margin:0 auto;
	/*border:1px solid red;*/
	line-height:1.2em;
}

#checkout-new-shipping         {margin-bottom:20px;}
#checkout-new-shipping td.Ralign  {font-size:11px; width:50%;}
#checkout-new-shipping td.Ralign  {font-size:11px}

#checkout-summary          { width:25%; margin:25px auto 35px; text-align:left;}
#checkout-summary table    { width:70%}
#checkout-summary table td { white-space: nowrap; padding-right:5px;}
#checkout-summary h4       {font-size:1.1em;}



#checkout-purchaser-info table { margin:0 auto 12px;}
#checkout-purchaser-info td.Ralign  {font-size:11px; width:50%;}

#checkout-buttons { text-align:center;}
#checkout-buttons input{ width:80px;}
#checkout-buttons p.submit-note {font-size:9px; color:#666; font-weight:bold; margin:10px; text-align:center;}



#fullcartview table    { width:100%; border-collapse:collapse; border-bottom:2px solid #ccc; margin-bottom:5px;}
#fullcartview table th            { padding:4px; background:#222; color:white; border:0; }/*#FFBB78*/
#fullcartview table td            { padding:3px;}





/* CHECKOUT 2 */

#checkout2 {width:40%; margin:0 auto 20px; text-align:left; border:1px dashed #ddd; padding:5px;}
.paymentnotice {width:60%; margin:0 auto 20px; text-align:left; border:1px dashed #ddd; padding:5px;}
p#terms { margin-bottom:25px;}


.boxes{
	border:1px solid #bbb; 
	margin:1px 0; width:15em; padding:2px;
	width:95%;
}
.boxes2{ width:20em; }

/*payment*/
p.payment-intro {
	padding-left:65px;
	text-align:left;
}

p.payment-intro.greentick {
	background: url(/templates/imgs/biggreentick.png) left top no-repeat;
}





/*USER ACCOUNT*/

.acccontainer          { margin-left:20px; text-align:left;}
.acccontainer p        { font-size:1em;}
.accpane               { margin:20px 0;padding:10px; text-align:left; border:1px solid #999; border-radius:5px; }
.acctab                { width:100%; border-collapse:collapse;}
.acctab table,  .acctab table  td        { width:auto;}

.acctab td             { width:50%; vertical-align:top; padding:0;}
.accpane a, accpane a:visited {color:#1E7EC8; }
.accpane               { margin:20px 0;padding:10px; text-align:left; border:1px solid #999; border-top:1px solid #a8a8a8;border-left:1px solid #a8a8a8; background: white url(../imgs/bg-account.png) repeat-x top left;  }
.accpane h3            { margin-bottom:10px; color:#666;  border-bottom:1px solid #ccc; padding-bottom:2px;}
.accpane h4            { margin:16px 10px 4px 0; background: url(../imgs/bg-h4.png) repeat-x bottom; padding-bottom:4px;}
.accpane p,.accpane td { }
.accords               { width:100%; border-collapse:collapse; border-bottom:2px solid #ccc; margin-bottom:5px;}
.accords th            { padding:4px; background:#222; color:white; border:0; }/*#FFBB78*/
.accords td            { padding:3px;}
.inpFormButton.rad      { width:75px; border-radius: 5px; background:#FFBB78;}
.inpFormButton.rad:hover      { background:#FFA852;}
.accpane h3 span.tool { display:block; float:right;text-align:right; font-size:12px;}

table#search-results {margin-left:2em}
table#search-results td {text-align:left;}



/*postpay downloads xxxx copied in from RY but not used in here?*/

#downloaditems {margin:8px 0;}
div.downloaditem p {padding: 2px 0;}
div.downloaditem p img {margin-bottom: -3px;}


/*
form.fCart {
	position:fixed;
	background-color:#6b6b6b;
	clear:both;
	color:black;
	text-align:center;
	width:100%;
	background: #6b6b6b url(../imgs/icon_cart.png) no-repeat scroll 20px bottom;
}
h2.h2Cart {
	color:#393939;
	/*border-top:1px solid #666;
	border-bottom:2px solid #666;
	padding:2px 0;
	font-size:1.2em;
	width:auto;
	clear:both;
}
*/



/* ALT2 TEMPLATE LAYOUT */
div.dContainer2 {
	position:relative;
	width:700px;
	margin:0 auto;
	border:1px solid #000;
	border-radius: 10px;
	box-shadow: 0 3px 18px 1px rgba(0,0,0,0.75);
	background-color:#fff;
}
div.dContent2 {
	width:680px;
	margin:50px auto;;
	background-color:#fefefe;
}