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

div.cartbriefline2 { margin-bottom:3px}

div#briefcartview  { 
	background-image: url(/templates/imgs/shopping-cart-icon.png);
	background-repeat: no-repeat;
	background-position: top right;
}



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



/* BREADCRUMB NAV */

div.dBreadcrumbs{ 
	max-width:1200px;
	clear:both;
	margin:0 auto;
	text-align:left;
	padding:2px 0 0 4%; 

}
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;
	padding:0 0 4px 0;
	color:#EC1C2D;
}
div.cookie-crumb-nav span { font-size:inherit;}

a.cookie-crumb:link, a.cookie-crumb:visited, a.cookie-crumb:active {
	color: #333;
	text-decoration: underline;
}
a.cookie-crumb:hover {
	color: #333;
	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 NavCatMap for the footer area*/
/* Textnav styles are in main.css*/


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

div.dCatNav {
	text-align:left;
	padding:0 20px;
	padding-bottom:10px;
}
div.dCatNav li.level1{
	margin-top:5px;
	margin-left:0; 
	float:left;
	width:15rem;
}
div.dCatNav li.level2    { margin-top:0; margin-left:1.2em;  }
div.dCatNav li.level3    { margin-top:0; margin-left:1.2em;  }
div.dCatNav li.level4    { margin-top:0; margin-left:1.2em;  }
div.dCatNav li.level5    { margin-top:0; margin-left:1.2em;  }

div.dCatNav a{
	text-decoration:none;
	font-weight:bold;
	padding:2px 0;
}
div.dCatNav:after  { content: ""; display:table; clear:both;}

div.dCatNav li.level1 a  { color:#B6B5B5; font-size:1.1rem; font-weight:bold; }
div.dCatNav li.level2 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }
div.dCatNav li.level3 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }
div.dCatNav li.level4 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }
div.dCatNav li.level5 a  { color:#A4A3A3; font-size:1.0rem; font-weight:normal; }

div.dCatNav li a:hover  { color:#EC1C2D; text-decoration:underline;}




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


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

div.dSubCats      { margin-left:0px;  }  
div.dListPieceSep { clear:left; border-top:1px dotted #999;}
div.dSubCat       { 
	text-align:left;  
	text-decoration:none;
	clear:left; 
	float:left;
	width:95%; 
	padding:10px; 
	padding-top:0;
	border-top:1px dotted #ccc;
}  
div.dSubCat a     { display:block; text-decoration:none; }  
div.dSubCat:hover { border-radius:5px; background: #e9e9f3; }  
div.dSubCat:hover strong { text-decoration:underline; }  

span.sCatImage    { display:block; float:left; vertical-align:top; padding-right:6px; padding-top:10px;}
span.sCatImage img{ margin:0 }
span.sCatCaption  { padding:6px; padding-top:10px; font-size:1.1rem; }
span.sCatCaption strong { display:block; font-weight:bold; color:#7A3C56; font-size:1.4rem;  }


/*LIST CATEGORIES*/

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

div.dListPieces         { clear:both; text-align:center; margin:30px 0 5px 0; padding:5px 0; border-top:1px dotted #aaa;  }  

div.dListPiece {
  border: 1px solid transparent;
  /*border-radius: 5px;*/
  display: inline-block;
  margin-top: 10px;
  /*padding: 8px 5px 5px;*/
  text-align: center;
  vertical-align: top;
  width: 160px;
  position:relative;
}

div.dPieceOverlay {
  margin:0 -1px;
  position: absolute;
  top: 0;
}
div.dPieceOverlay img { width:100%;}
span.dPiecePrice {
  color: rgb(109, 183, 77);
  display: block;
  font-family: Roboto Condensed;
  font-size: 14px;
  font-weight: bold;
  margin-top: 3px;
}

div.dListPiece a        { text-decoration:none; } 
div.dListPiece img      { display:block; margin:0 auto; } 
div.dListPiece em {
  display: block;
  font-size: 11px;
  font-style: italic;
  line-height: 15px;
  text-align: center;
}
div.dListPiece:hover em { text-decoration:underline;}
div.dListPiece:hover    { background:#e0e6f4; 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#piecethumbscontainer { margin-bottom:6px; }
div#piecethumbscontainer img { margin:0 4px; display:inline;  border-radius:2px;}

/* these classes used by js for the thumb changer*/
div#piecethumbscontainer img.piecethumb           { border:2px solid #999;} 
div#piecethumbscontainer img.peicethumbsel      { border:2px solid #333;} 

/*the big image*/
div#piecemainimagecontainer{} 
div#piecemainimagecontainer img{ 
	border:1px solid #B69FA9; 
	border-radius:3px; 
	width:100%;  
	max-width:400px;
	height:auto;
	max-height:550px;
}
div#piecemainimagecaption{
	margin:0;
	font-size:1.1rem; 
	font-style:italic;
	width:auto;
}


/* 2. DESCRIPTION BLOCK */

div#piecedescriptionsblock { width:48%;} 
/* div#piecedescriptionsblock:after { content: ""; display:table; clear:both;} */
div.dSubBlock { 
	width:48%; 
	margin-top:40px;
	/*border:1px dashed blue;*/
	float:left;/* xxxx */
}

@media (max-width:800px) {
    div#pieceimagesblock{ float:none; max-width:98%; margin:0 auto;  margin-bottom:40px;}
    div#piecedescriptionsblock { width:98%; margin:0 auto; }
    div.dSubBlock { width:98%; margin:0 auto;}
}



/* 3. VARIATIONS BLOCK */

div#piecevariationsblock{
	/*clear:both;*/
	margin:20px auto;
	width:320px;
	border:2px dotted #ddd; border-radius:7px;
	padding:6px 12px;
}

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

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

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*/
}
div.piecevariation input{
	width:100%; 
}

/* variation option image */
div#pieceoptionimagebox{
	margin-top:8px;
}
div.dPieceVarImage {
	display:inline-block;
	vertical-align:top;
	margin-right: 4px;
	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;}

/* hybrid variations */
div#hybridvariation input { width:20px; }




/* 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;}



/* 7. RELATED PRODUCTS */

/*div#related-products { width:100%; margin-top:20px;}*/
div#related-products {
	max-width:50%;
	float:right; 
	margin-top:20px 0 0 2%;  
	padding-top:40px;
}
div#related-products em{
	color:#EC1C2D;  
}
@media (min-width:600px) {
	div.dSubBlock        { display:inline-block; width:50%;}
	div#related-products { width:40%; float:right;}
}

div.dRelatedProd      { width:120px; vertical-align:top; display:inline-block; text-align:center; padding:8px 5px 5px; border-radius:5px; border:1px dotted #ccc;}  
div.dRelatedProd a    { text-decoration:none; } 
div.dRelatedProd img  { display:block; margin:0 auto; } 
div.dRelatedProd em   { display:block; font-size:11px; font-weight:bold; font-style:italic; text-align:center;}
div.dRelatedProd:hover em { text-decoration:underline;}
div.dRelatedProd:hover    { background:#e6e6ef; }  



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


table.purchaser label { font-size:11px; text-align:left; color:#777;}
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 { margin-bottom:1em;}
#piececontainer div.product_pdf_block img {
  border:0; 
  display: inline-block;
  vertical-align: middle;
  width: 30px;
}
#piececontainer div.product_pdf_block h4 {
  display: inline-block;
}



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

/* FREIGHT BY VALUE */
div#freight_mark2{
	border:1px dashed #ccc;
	margin:10px;
	padding:10px; 
	border-radius:5px;
}
div#freight_mark2 table td{
	text-align:left;
	font-size:1.0em;
	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:middle; padding:1px 3px 1px 0;}
#checkout-shipping p {
	font-size:1.1rem;
	margin:0 auto;
	/*border:1px solid red;*/
	line-height:1.3em;
}
.radio{
	
}
#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; }

div.dDiscountMessage{
	color:#EC1C2D;
}

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

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





/*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 {}
table#search-results td {text-align:left; padding-right:3em;}



/*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;
}

div#nzpostoptions p {margin: 5px 0 0;}