Announcement

Collapse
No announcement yet.

PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

    I'm still having trouble on my site with the link for the mini-basket. As you'll see if you visit www.baptist-books.com there are two pipe style characters following the mini-basket link. I have already remove the "Miva >> mini-basket tab >> advanced mode and delete <span class="grey">|</span>" code, but the pipe characters still remain. What am I missing? I'll include the code below.

    Mini-Basket Code
    Code:
    <div id="mini-basket">	<a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;" id="global-mini-basket-link">Basket<mvt:if expr="NOT l.settings:global_minibasket:empty"> Contents (&mvte:global_minibasket:basket_count;)</mvt:if></a>
    	<mvt:if expr="NOT l.settings:global_minibasket:empty">
    	<div style="clear: both;"></div>
    	<div id="global-mini-basket-hover-content">
    	<table width="100%">
    		<thead>
    			<tr>
    				<th colspan="2" align="left">Basket Summary</th>
    				<th colspan="2" align="right"><a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;">Basket</a><mvt:if expr="l.settings:global_minibasket:orderminimum_met"> / <a href="&mvt:global:secure_sessionurl;Screen=OINF&amp;Store_Code=&mvta:store:code;">Checkout</a></mvt:if></th>
    			</tr>
    		</thead>
    		<tbody>
    			<mvt:foreach iterator="item" array="global_minibasket:items">
    			<mvt:if expr="(pos1-1) MOD 2 EQ 0 or pos1 EQ 1"><tr class="on"><mvt:else><tr></mvt:if>
    				<td nowrap align="center" valign="middle">
    					<form method="post" action="&mvt:global:sessionurl;Screen=BASK">
    						<input type="hidden" name="Action" value="RPRD" />
    						<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
    						<input type="hidden" name="Basket_Line" value="&mvte:item:line_id;" />
    						<input type="hidden" name="Offset" value="&mvte:global:Offset;" />
    						<input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
    						<input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
    						<input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
    						<input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
    						<mvt:item name="buttons" param="Remove" />
    					</form>
    				</td>
    				<td colspan="2" width="100%" align="left">
    					<b><a href="&mvt:global:sessionurl;Screen=PROD&amp;Store_Code=&mvta:store:code;&amp;Product_Code=&mvta:item:code;">&mvt:item:name;</a></b><br />
    					Code: &mvt:item:code;<br />
    					Quantity: &mvte:item:quantity;
    					<mvt:foreach iterator="option" array="item:options">
    						<br />
    						<mvt:if expr="l.settings:option:option_id">
    						&mvt:option:attr_code;: &mvt:option:opt_code;
    						<mvt:elseif expr="NOT ISNULL l.settings:option:data">
    						&mvt:option:attr_code;: &mvt:option:data;
    						<mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
    						&mvt:option:attr_code;: &mvt:option:data_long;
    						<mvt:else>
    						&mvt:option:attr_code;
    						</mvt:if>
    					</mvt:foreach>
    				</td>
    				<td nowrap align="right" valign="middle">
    					<b>&mvt:item:formatted_subtotal_comprehensive;</b>
    				</td>
    			</tr>
    			</mvt:foreach>
    		</tbody>
    		<tfoot>
    			<tr>
    				<td colspan="4" align="right">Basket Total: &mvt:global_minibasket:formatted_total;</td>
    			</tr>
    		</tfoot>
    	</table>
    	</div>
    	</mvt:if>
    
    
    <script type="text/javascript">
    	function MiniBasket()
    	{
    		var self = this;
    
    
    		this.content_container      = document.getElementById( 'global-mini-basket-hover-content' );
    		this.display_link           = document.getElementById( 'global-mini-basket-link' );
    		this.minibasket_backing     = document.createElement( 'div' );
    		
    		if ( this.content_container )
    		{
    			this.minibasket_backing.className = 'minibasket_backing';
    
    
    			document.getElementsByTagName( 'body' )[ 0 ].insertBefore( this.minibasket_backing, document.getElementsByTagName( 'body' )[ 0 ].firstChild );
    
    
    			if ( this.display_link )        this.display_link.onclick       = function() { ( ( self.content_container.style.display == 'none' ) ? self.Show() : self.Hide() ); return false; }
    			if ( this.minibasket_backing )  this.minibasket_backing.onclick = function() { self.Hide(); return false; }
    
    
    			this.content_container.style.display = 'none';
    		}
    	}
    
    
    	MiniBasket.prototype.Show = function()
    	{
    		var self = this;
    		
    		window.onresize = function() { self.Resize(); }
    		
    		this.content_container.style.display  = 'block';
    		this.minibasket_backing.style.display = 'inline';
    		
    		if ( document.documentElement.clientHeight > document.body.scrollHeight )
    		{
    			this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
    		}
    		else
    		{
    			this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
    		}
    	}
    
    
    	MiniBasket.prototype.Hide = function()
    	{
    		this.content_container.style.display  = 'none';
    		this.minibasket_backing.style.display = 'none';
    
    
    		window.onresize = null;
    	}
    
    
    	MiniBasket.prototype.Resize = function()
    	{
    		if ( document.documentElement.clientHeight > document.body.scrollHeight )
    		{
    			this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
    		}
    		else
    		{
    			this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
    		}
    	}
    
    
    	var minibasket = new MiniBasket();
    </script>
    
    </div>


    Mini-Basket CSS
    Code:
    #global-mini-basket-container{
    	display: block;
    	float: right;
    	line-height: 22px;
    	padding: 4px 3px 0px 0px;
    }
    
    
    #global-mini-basket-hover-content
    {
    	display: none;
    	float: left;
    	z-index:10;
    	position: absolute;
    	min-width: 250px;
    	max-width: 410px;
    	background: #FFF;
    }
    
    
    #global-mini-basket-hover-content table
    {
    	display: table;
    	border-collapse: collapse;
    	border-spacing: 0px;
    	border: 1px solid #666;
    	background: #FFF;
    }
    
    
    #global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
    {
    	color: #FFF;
    	padding: 5px;
    	font-weight: bold;
    	font-size: 13px;
    	background: #666;
    }
    
    
    #global-mini-basket-hover-content table tbody td
    {
    	padding: 3px 5px;
    	line-height: 14px;
    	color: #000000;
    }
    
    
    #global-mini-basket-hover-content table tbody tr.on td
    {
    	background: #EEE;
    }
    
    
    #global-mini-basket-hover-content table thead th a
    {
    	color: #FFF;
    }
    
    
    #mini-basket 
    {
    	line-height: 2px;
    }
    
    
    .minibasket_backing
    {
    	display: none;
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	width: 100%;
    }

    Comment


      #17
      Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

      Good morning (I am assuming) Chris,

      It looks like the extra lines are coming from your navigation CSS (specifically this one: "#navigation-bar li div div"). The problem is that this class applies to all sub-divs of your navigation-bar element that are within an li + div. The smaller right border is due to the <div style="clear: both;"></div> element, and the other weird right border seems to be coming from the mini-basket div element. I'd suggest instead of having the "#navigation-bar li div div" style, assign a class name to all the navigation elements that you actually want a border on, that way it doesn't apply to elements outside of that scope.

      Also, since the Basket Contents link is dynamic in its width, I'd suggest (strongly, since it will break how your navigation looks) that you change the width of your navigation-item ul to be auto, the navigation item itself to have a text-align center (which means you could remove the margin: 0 auto; on your ul), make your li "navigation-item-on" class elements NOT float right (which means you will have to reverse the order). This will allow for the width to grow as needed, while still maintaining a center alignment of the navigation. Just a suggestion. Do notice, however, that without adjusting how the width of your navigation bar is set, your home button will be dropped down a line and not visible if you have even a single product in your basket.

      So, to sum up, I'd:
      1. Change the "#navigation-bar li div div" to be ".item-right-side" (which seems to be what the right border is supposed to be on anyway)
      2. Fix the width restriction on the navigation-bar
      3. Remove the float: right on the li elements (you may need to add "display: inline-block;" to the class as well)
      4. Update the styling of the mini basket to match your store :)


      Let me know if anything is unclear or you'd like further clarification. Hope you're having a wonderful day.

      --Ryan

      Originally posted by chrisgable View Post
      I'm still having trouble on my site with the link for the mini-basket. As you'll see if you visit www.baptist-books.com there are two pipe style characters following the mini-basket link. I have already remove the "Miva >> mini-basket tab >> advanced mode and delete <span class="grey">|</span>" code, but the pipe characters still remain. What am I missing? I'll include the code below.

      Mini-Basket Code
      Code:
      <div id="mini-basket">    <a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;" id="global-mini-basket-link">Basket<mvt:if expr="NOT l.settings:global_minibasket:empty"> Contents (&mvte:global_minibasket:basket_count;)</mvt:if></a>
          <mvt:if expr="NOT l.settings:global_minibasket:empty">
          <div style="clear: both;"></div>
          <div id="global-mini-basket-hover-content">
          <table width="100%">
              <thead>
                  <tr>
                      <th colspan="2" align="left">Basket Summary</th>
                      <th colspan="2" align="right"><a href="&mvt:global:secure_sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;">Basket</a><mvt:if expr="l.settings:global_minibasket:orderminimum_met"> / <a href="&mvt:global:secure_sessionurl;Screen=OINF&amp;Store_Code=&mvta:store:code;">Checkout</a></mvt:if></th>
                  </tr>
              </thead>
              <tbody>
                  <mvt:foreach iterator="item" array="global_minibasket:items">
                  <mvt:if expr="(pos1-1) MOD 2 EQ 0 or pos1 EQ 1"><tr class="on"><mvt:else><tr></mvt:if>
                      <td nowrap align="center" valign="middle">
                          <form method="post" action="&mvt:global:sessionurl;Screen=BASK">
                              <input type="hidden" name="Action" value="RPRD" />
                              <input type="hidden" name="Store_Code" value="&mvte:store:code;" />
                              <input type="hidden" name="Basket_Line" value="&mvte:item:line_id;" />
                              <input type="hidden" name="Offset" value="&mvte:global:Offset;" />
                              <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" />
                              <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
                              <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
                              <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" />
                              <mvt:item name="buttons" param="Remove" />
                          </form>
                      </td>
                      <td colspan="2" width="100%" align="left">
                          <b><a href="&mvt:global:sessionurl;Screen=PROD&amp;Store_Code=&mvta:store:code;&amp;Product_Code=&mvta:item:code;">&mvt:item:name;</a></b><br />
                          Code: &mvt:item:code;<br />
                          Quantity: &mvte:item:quantity;
                          <mvt:foreach iterator="option" array="item:options">
                              <br />
                              <mvt:if expr="l.settings:option:option_id">
                              &mvt:option:attr_code;: &mvt:option:opt_code;
                              <mvt:elseif expr="NOT ISNULL l.settings:option:data">
                              &mvt:option:attr_code;: &mvt:option:data;
                              <mvt:elseif expr="NOT ISNULL l.settings:option:data_long">
                              &mvt:option:attr_code;: &mvt:option:data_long;
                              <mvt:else>
                              &mvt:option:attr_code;
                              </mvt:if>
                          </mvt:foreach>
                      </td>
                      <td nowrap align="right" valign="middle">
                          <b>&mvt:item:formatted_subtotal_comprehensive;</b>
                      </td>
                  </tr>
                  </mvt:foreach>
              </tbody>
              <tfoot>
                  <tr>
                      <td colspan="4" align="right">Basket Total: &mvt:global_minibasket:formatted_total;</td>
                  </tr>
              </tfoot>
          </table>
          </div>
          </mvt:if>
      
      
      <script type="text/javascript">
          function MiniBasket()
          {
              var self = this;
      
      
              this.content_container      = document.getElementById( 'global-mini-basket-hover-content' );
              this.display_link           = document.getElementById( 'global-mini-basket-link' );
              this.minibasket_backing     = document.createElement( 'div' );
              
              if ( this.content_container )
              {
                  this.minibasket_backing.className = 'minibasket_backing';
      
      
                  document.getElementsByTagName( 'body' )[ 0 ].insertBefore( this.minibasket_backing, document.getElementsByTagName( 'body' )[ 0 ].firstChild );
      
      
                  if ( this.display_link )        this.display_link.onclick       = function() { ( ( self.content_container.style.display == 'none' ) ? self.Show() : self.Hide() ); return false; }
                  if ( this.minibasket_backing )  this.minibasket_backing.onclick = function() { self.Hide(); return false; }
      
      
                  this.content_container.style.display = 'none';
              }
          }
      
      
          MiniBasket.prototype.Show = function()
          {
              var self = this;
              
              window.onresize = function() { self.Resize(); }
              
              this.content_container.style.display  = 'block';
              this.minibasket_backing.style.display = 'inline';
              
              if ( document.documentElement.clientHeight > document.body.scrollHeight )
              {
                  this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
              }
              else
              {
                  this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
              }
          }
      
      
          MiniBasket.prototype.Hide = function()
          {
              this.content_container.style.display  = 'none';
              this.minibasket_backing.style.display = 'none';
      
      
              window.onresize = null;
          }
      
      
          MiniBasket.prototype.Resize = function()
          {
              if ( document.documentElement.clientHeight > document.body.scrollHeight )
              {
                  this.minibasket_backing.style.height = document.documentElement.clientHeight + 'px';
              }
              else
              {
                  this.minibasket_backing.style.height = ( document.body.scrollHeight > document.documentElement.scrollHeight ) ? document.body.scrollHeight + 'px' : document.documentElement.scrollHeight + 'px';
              }
          }
      
      
          var minibasket = new MiniBasket();
      </script>
      
      </div>


      Mini-Basket CSS
      Code:
      #global-mini-basket-container{
          display: block;
          float: right;
          line-height: 22px;
          padding: 4px 3px 0px 0px;
      }
      
      
      #global-mini-basket-hover-content
      {
          display: none;
          float: left;
          z-index:10;
          position: absolute;
          min-width: 250px;
          max-width: 410px;
          background: #FFF;
      }
      
      
      #global-mini-basket-hover-content table
      {
          display: table;
          border-collapse: collapse;
          border-spacing: 0px;
          border: 1px solid #666;
          background: #FFF;
      }
      
      
      #global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
      {
          color: #FFF;
          padding: 5px;
          font-weight: bold;
          font-size: 13px;
          background: #666;
      }
      
      
      #global-mini-basket-hover-content table tbody td
      {
          padding: 3px 5px;
          line-height: 14px;
          color: #000000;
      }
      
      
      #global-mini-basket-hover-content table tbody tr.on td
      {
          background: #EEE;
      }
      
      
      #global-mini-basket-hover-content table thead th a
      {
          color: #FFF;
      }
      
      
      #mini-basket 
      {
          line-height: 2px;
      }
      
      
      .minibasket_backing
      {
          display: none;
          position: absolute;
          left: 0px;
          top: 0px;
          width: 100%;
      }

      Ryan Guisewite
      Lead UI Developer / Miva, Inc.
      www.miva.com

      Comment


        #18
        Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

        I'll include the contents of both css below.
        What specific changes would you make? I hate to annoy you with this but my css skills are rudimentary at best.
        Thank you so much...

        Code:
        /*****************************************/  /*************** RESET CSS ***************/				
        /*****************************************/
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;}
        table{border-collapse:collapse;border-spacing:0;}
        fieldset,img,a img,:link img,:visited img {border:0;}
        address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
        ol,ul {list-style:none;}
        caption,th {text-align:left;}
        h1,h2,h3,h4,h5,h6 {font-size:100%;} 
        q:before,q:after {content:'';}
        
        
        
        
        /*** Site ***/
        body{
        	background:#fff url() top center no-repeat;
        	font:12px/1.46 Lucida Sans Unicode, Lucida Grande, sans-serif;
        	margin:0;
        	color:#2b2a2a;
        	text-align:center;
        }
        
        
        td{ font-size:1em; }
        
        
        form{
        	display:inline;
        	margin:0;
        	padding:0;
        }
        
        
        h1{ font:normal 1.5em Arial, Helvetica, sans-serif ; color:#2b2a2a;   }
        h2{ font:normal 1.3em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }
        h3{ font:normal 1.1em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }
        
        
        h2.header{
        	color:#fff;
        	padding:10px;
        	background-color:transparent;
        	font-weight:bold;
        }
        
        
        p {
        	padding-bottom:10px;
        	}
        
        
        a img{ border:0; }
        
        
        a:link			{ color:#484848; }
        a:visited		{ color:#484848; }
        a:active		{ color:#42992f; }
        a:hover			{ color:#42992f; }
        
        
        .clear			{ clear:both; font-size:0em; height:0em; }
        
        
        .floatright		{ float:right; }
        .floatleft		{ float:left; }
        
        
        .alignright		{ text-align:right; }
        .alignleft		{ text-align:left; }
        
        
        .aligncenter	{ text-align:center; }
        .margincenter	{ margin:0 auto; }
        
        
        .small			{ font-size:.9em; }
        .smaller		{ font-size:.8em; }
        .smallest		{ font-size:.7em; }
        .large			{ font-size:1.1em; }
        .larger			{ font-size:1.2em; }
        .largest		{ font-size:1.3em; }
        .bold			{ font-weight:bold; }
        .italic			{ font-style:italic; }
        .red			{ color:#dd0000; }
        .blue			{ color:#0000ff; }
        .grey			{ color:#999999; }
        .nowrap			{ white-space:normal; }
        
        
        .link-pipe		{ color:#999999; }
        
        
        .input_error{ border-color:#cc0000 #ff0000 #ff0000 #ff0000; }
        
        
        select{
        	border-width:1px;
        	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
        	padding:1px 2px;
        }
        
        
        .error-message{ 
        	padding:4px;
        	text-align:center;
        	width:60%;
        	margin:0 auto;
        	color:#dd0000;
        	font-weight:bold;
        }
        
        
        .LOGN .error-message,
        .AFCL .error-message,
        .ORDL .error-message{
        	margin:12px 24px;
        	width:auto;
        }
        
        
        .information-message{ 
        	padding:4px;
        	text-align:center;
        	width:60%;
        	margin:0 auto;
        	color:#0000dd;
        }
        
        
        .LOGN .information-message{
        	margin:12px 24px;
        	width:auto;
        }
        td.field textarea {
        		width:200px; height:100px;
        		
        	}
        .textfield, select, textarea,
        #tax-fields .form_row input{
        	border-width:1px;
        	border-style:solid;
        	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
        	padding:1px 2px;
        	font:normal 1em Arial, Helvetica, Verdana, sans-serif;
        }
        
        
        .textfield, textarea{
        	width:140px; height:18px;
        }
        
        
        .button{
        	border:none;
        	background-color:#449a31;
        	color:#ffffff;
        	font-size:.9em;
        	padding:3px;
        	margin:0;
        	cursor:pointer;
        	width: auto;
          	overflow: visible;
        
        
        }
        
        
        #site-container{
        		border-collapse: collapse;
        	    border-left: 1px solid #beb9b7;
        		border-bottom: 1px solid #beb9b7;
        		border-right: 1px solid #beb9b7;
        	    margin: 0 auto;
        	    text-align: left;
        	    width: 960px;
        }
        
        
        #bottom-wrap	{ clear:both; font-size:0em; height:0em; }
        
        
        /*** Top Navigation Bar ***/
        
        
        #navigation-bar{
        	background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
            height: 43px;
            line-height: 0;
            width: 960px;
        	}
        
        
        #navigation-bar ul{ 
        	margin:0 auto;
        	padding:14px 0 0 0 ;
        	width:560px;
        	clear:both;
        }
        
        
        #navigation-bar li{
        	color:#646464;
        	list-style:none;
        	line-height:12px;
        	float:right;
        	text-align:center;
        	margin:0 2px;
        	font-weight:normal;
        }
        
        
        #navigation-bar li.navigation-item-on	{  }
        #navigation-bar li.navigation-item-off	{  }
        
        
        /* tab padding */
        #navigation-bar li div div{
        	border-right: 1px solid #fff;
        	padding: 5px 18px;
        	}
        	
        	#navigation-bar li.first-child div div {
        		border:0;
        	}
        	
        
        
        /* tab off side images */
        #navigation-bar li.navigation-item-off div.item-left-side	{ background:transparent url() no-repeat scroll left top; }
        #navigation-bar li.navigation-item-off div.item-right-side	{ background:transparent url() no-repeat scroll right top; }
        
        
        /* tab on side images */
        #navigation-bar li.navigation-item-on div.item-left-side	{ background:transparent url() no-repeat scroll left top; }
        #navigation-bar li.navigation-item-on div.item-right-side	{ background:transparent url() no-repeat scroll right top; }
        
        
        /* navigation bar links */
        #navigation-bar li a:link,
        #navigation-bar li a:visited,
        #navigation-bar li a:hover,
        #navigation-bar li a:active{ 
        	color:#fff; 
        	text-decoration:none;
        }
        
        
        #nav-checkout		{}
        #nav-search			{}
        #nav-basket			{}
        #nav-account		{}
        #nav-all-products	{}
        #nav-storefront		{}
        
        
        /*** Left Navigation ***/
        
        
        #left-navigation {
            padding: 0 10px 10px;
            vertical-align: top;
            width: 220px;
        }
        
        
        /*** One Column Pages ***/
        .one-column #left-navigation{ display:none; }
        .one-column #main-content {width:940px; padding: 20px;}
        #shipping-payment .form_row {text-align:left;}
        
        
        #category-tree{
        	background:#d5cea5 url() repeat-y scroll center top;
        	padding: 0 20px;
        }
        
        
        #category-tree-top-image{ 
        	width:219px;
        
        
        	}
        #category-tree-bottom-image{
        	background: url(images/footer-bottom-bg.jpg) bottom no-repeat;
        	padding-bottom: 35px;
        	width:219;
        }
        
        
        #category-tree a{
        	display:block;
        	text-decoration:none;
        	color:#73370c;
        	font-size:12px;
        }
        
        
        #category-tree div{
        	padding:5px  0;
        	border-bottom:1px dotted #6b3410;
        }
        
        
        #category-tree .level-1 a{ 
        	padding:4px 6px 4px 0; 
        	background:transparent url() right no-repeat;
        		
        	
        	}
        #category-tree .level-2 a{ padding:4px 6px 4px 20px; }
        #category-tree .level-3 a{ padding:4px 6px 4px 30px; }
        #category-tree .level-4 a{ padding:4px 6px 4px 40px; }
        #category-tree .level-5 a{ padding:4px 6px 4px 50px; }
        #category-tree .level-6 a{ padding:4px 6px 4px 60px; }
        
        
        #category-tree div.active{ }
        #category-tree-header{	
        	background: url(images/categoryTitle-bg.jpg) no-repeat scroll center top transparent;
        	    height: 4px;
        	    width: 219px;
        	}
        
        
        #category-tree-footer{
         	background: url(images/catTreeSocialFooter-bg.jpg) no-repeat scroll center top transparent;
            height: 60px;
            padding: 80px 0 0 20px;
            width: 200px;
        	margin-top:20px;
        }
        
        
        #category-tree-footer img{
        	width:35px; height:35px;
        	margin-left: 5px;
        }
        
        
        	#category-tree-footer img.social-icons-first {
        		margin-left:25px;
        	}
        /*** Content ***/
        
        
        #content-container{
        	clear: both;
        	margin: 0 auto;
        	width: 960px;
        	margin-top:10px;
        }
        
        
        
        
        #main-content { 
            padding-right: 10px;
        	vertical-align: top;
        	width: 690px;
        }
        
        
        /*** Global Header/Footer ***/
        
        
        #global-header{
        	background: url() no-repeat scroll center top transparent;
        	height: 80px;
        	padding-right: 10px;
        	}
        
        
        
        
        #logo{
        	 padding: 20px 0 0 10px;
        	height:51px;
        	width:177px;
        }
        
        
        #logo a{
        	background:url(images/logo.gif) no-repeat scroll left top transparent;
        	cursor:pointer;
        	display:block;
        	height:51px;
        	width:177px;
        }
        
        
        #search{
        	float:right;
        	padding:40px 0 4px 0;
        }
        
        
        #header-links{
        	float:right;
        	padding:40px 12px 0 0;
        	line-height:22px;
        	color:#ededed;
        	text-align:right;
        }
        	#header-links a{
        		color:#515151;
        	}
        #global-footer{ 
        	border-top: 1px solid #BEB9B7;
        	margin: 40px 0;
        	padding-top: 20px;
        	text-align: center;
        	}
        
        
        	
        #footer-links a{
        	color:#774d4e;
        	}
        
        
        #footer-links ul{
        	font:.9em normal Verdana, Helvetica, Arial, sans-serif;
        	margin:8px 0;
        	padding:0;
        }
        
        
        
        
        #footer-links ul li{
        	list-style-type:none;
        	border-left:1px solid #646464;
        	padding:0 2px 0 6px;
        	margin:0;
        	text-align:center;
        	display:inline;
        }
        
        
        #footer-links ul li.first-child{ border:0; }
        #global-footer #footer-links #footer-sitemap-link{ display:none; }
        
        
        #miva-link{
        	font-size:.8em;
        	margin:16px 0;
        }
        
        
        #miva-link a{ color:#999999; }
        
        
        #page-header{ clear:both; }
        #page-footer{ clear:both; }
        
        
        #maintenance{
        	color:#dd0000;
        	font-weight:bold;
        }
        
        
        /*** ACAD, ACED, AFAD, AFED, OCST ***/
        
        
        .logout-link{
        	margin:12px 10px;
        	float:right;
        }
        
        
        #customer-fields label,
        #affiliate-fields label{
            clear: both;
            float: left;
            padding: 2px 5px 3px 0;
            text-align: right;
            white-space: nowrap;
            width: 170px;
        }
        
        
        #affiliate-commissions label,
        .OSEL .non-editable label{
        	float:left;
        	width:120px;
        	font-weight:bold;
        	text-align:right;
        	padding:0 6px 0 0;
        }
        
        
        #customer-fields input.textfield,
        #affiliate-fields input.textfield,
        #tax-fields input,
        #affiliate-commissions div.form_row div,
        .non-editable div.form_row div{
        	width:170px;
        	margin:0 0 4px 0;
        }
        
        
        #affiliate-commissions div.form_row div{ float:left; }
        
        
        #customer-fields select,
        #affiliate-fields select{
        	width:176px;
        	margin:0 0 4px 0;
        }
        
        
        #login-details,
        #affiliate-information{
        	margin:0 0 16px 0;
        }
        
        
        #affiliate-commissions .form_row{ margin:0 0 8px 0; }
        
        
        .AFAD #affiliate-fields{
        	width:50%;
        	margin:0 auto;
        }
        
        
        .AFED #affiliate-fields #affiliate-contact,
        .AFED #affiliate-fields #affiliate-commissions{
        	float:left;
        	width:50%;
        }
        
        
        #affiliate-commissions .affiliate-code{
        	width:230px !important;
        }
        
        
        #affiliate-commissions #affiliate-image{
        	width:236px !important;
        	overflow:auto;
        }
        
        
        #affiliate-terms{ margin-left:155px; }
        
        
        #affiliate-fields .form_row div.non-editable{
        	margin:0 0 8px 0;
        	padding:2px 0 0 0;
        }
        
        
        .save-button,
        .continue-button{
        	clear:both;
        	text-align:right;
        	padding:24px 0 0 0;
        }
        
        
        .required{ font-weight:bold; }
        
        
        h2.fields-heading{
        	background-color:#68635f;
        	color:#fff;
        	margin:0 0 12px 0;
        	padding:4px 4px 4px 12px;
        }
        
        
        .address2-label{ margin:0 0 14px 0; }
        
        
        .controls{ 
        	font:normal .7em Verdana, Helvetica, Arial, sans-serif;
        	visibility:hidden;
        }
        
        
        #customer-fields .controls label{
        	float:none;
        }
        
        
        #ship-to,
        #bill-to{
        	width:50%;
        	float:left;
        }
        
        
        #ship-to h2 input.checkbox,
        #bill-to h2 input.checkbox{
        	margin:0 2px 0 12px;
        	padding:0;
        	width:13px;
        	height:13px;
        	overflow:hidden;
        }
        
        
        div.invalid input.textfield,
        div.invalid select,
        #tax-fields div.invalid input{
        	border-color:#cc0000 #ff0000 #ff0000 #ff0000;
        }
        
        
        div.invalid label{ color:#dd0000; }
        
        
        .warning-message{
        	padding:4px;
        	text-align:center;
        	width:60%;
        	margin:0 auto;
        	color:#dd0000;
        }
        
        
        #customer-fields.editable .form_row,
        #affiliate-fields.editable .form_row{
        	margin:0 0 6px 0;
        	text-align:left;
        }
        
        
        #customer-fields.non-editable .form_row{
        	margin:0 0 4px 0; 
        	text-align:left;
        }
        
        
        #customer-fields.non-editable label,
        #affiliate-fields.non-editable label{
        	margin:0 0 0 30px;
        	padding:0 4px 0 0;
        	font-weight:bold;
        	width:110px;
        	text-align:right;
        	float:left;
        	clear:both;
        	white-space:nowrap;
        }
        
        
        #customer-fields.non-editable .form_row div,
        #affiliate-fields.non-editable .form_row div{
        	float:left;
        }
        
        
        #update-record{
        	clear:both;
        	margin:24px 0 0 24px;
        }
        
        
        .tax-fields label{ font-weight:bold; }
        
        
        /*** LOGN, AFCL, ORDL, ORHL ***/
        
        
        .AFCL #main-content,
        .LOGN #main-content, .ORHL #main-content{
        	width:940px;
        
        
        }
        
        
        .ORHL #main-content{ }
        
        
        .ORDL #main-content{ padding:28px 16px; }
        
        
        .AFCL .section,
        .LOGN .section{
        		float:left;
        		height:220px;
        		width:49%;
        		text-align:center;
        	}
        
        
        
        
        .ORDL .section{
        	float:left;
        	height:220px;
        	width:33%;
        }
        
        
        .ORHL .lookup-section{ 
        	float:left;
        	height:220px;
        	width:50%;
        }
        
        
        .ORHL .signin-section{
        	float:left;
        	height:220px;
        	width:48%;
        }
        .lookup-section .form_row {}
        .signin-section .form_row {}
        
        
        .section h3,
        .lookup-section h3,
        .signin-section h3{
        	text-align:center;
        	padding-bottom:10px;
        }
        
        
        .form_row{ 
        	margin:0 0 6px 0; 
        	text-align:center;
        	}
        
        
        .LOGN label,
        .ORDL label,
        .AFCL label{
        	clear:both;
        	width:80px;
        	padding:3px 5px;
        }
        
        
        .ORHL label{ 
        	clear:both;
        	padding:3px 5px;
        	text-align:right;
        	white-space:nowrap;
        	width:90px;
        }
        
        
        .grey-border-right{ border-right:1px solid #cccccc; }
        
        
        .logn-input{ width:120px; }
        
        
        #invalid-key{
        	width:23px;
        	float:left;
        	margin:0 4px 0 0;
        	border-width:1px;
        	border-style:solid;
        	border-color:#cc0000 #ff0000 #ff0000 #ff0000;
        }
        
        
        .sign-in-buttons{ 
        	text-align:center;
        	margin:12px 0 0 0;
        }
        
        
        .forgot-password{ 
        	font-size:.9em; 
        	text-align:center;
        	margin:12px 0 0 0;
        }
        
        
        /*** BASK, OCST, OPAY, OSEL ***/
        
        
        #basket-contents.non-editable,
        #basket-contents.editable,
        #order-contents table{
        	width:100%;
        	border-left:1px solid #d6d6d6;
        	border-top:1px solid #d6d6d6;
        	margin-top:10px;
        }
        
        
        #basket-contents.non-editable table,
        #basket-contents.editable table,
        #order-contents table{
        	border-collapse:collapse;
        	width:100%;
        	color:#000;
        }
        
        
        #basket-contents.non-editable td,
        #basket-contents.editable td,
        #order-contents td{
        	background-color:#fff;
        	border-bottom:1px solid #d6d6d6;
        	border-right:1px solid #d6d6d6;
        	vertical-align:top;
        	padding:6px;
        	font:normal 1em Arial;
        }
        
        
        #basket-contents table tr.basket-heading td,
        #basket-contents table tr.basket-heading td,
        #order-contents table tr.heading td{
        	background-color:#68635f;
        	color:#fff;
        	font-weight:bold;
        	text-align:center;
        	font-size:1em;
        	white-space:nowrap;
        }
        
        
        #basket-contents .basket-qty-input{ width:34px; }
        
        
        #basket-contents .item-remove{
        	width:8%;
        	vertical-align:middle;
        }
        
        
        #basket-contents table .basket-heading td.item-name{
        	text-align:left;
        }
        
        
        #basket-contents.editable .item-quantity{
        	width:13%;
        	text-align:center;
        	white-space:nowrap;
        }
        
        
        #basket-contents.non-editable .item-quantity{
        	width:6%;
        	text-align:center;
        }
        
        
        #basket-contents .item-options .item-name{ padding-left:16px; }
        
        
        #basket-contents.non-editable .item-name{ width:59%; }
        #basket-contents.editable .item-name	{ width:66%; }
        
        
        #basket-contents td.item-name{ text-align:left; }
        
        
        #basket-contents .item-price{
        	width:10%;
        	text-align:right;
        	white-space:nowrap;
        }
        
        
        #basket-contents .item-total{
        	width:10%;
        	text-align:right;
        }
        
        
        #basket-contents .basket-charges .charge-description,
        #basket-contents .basket-charges .formatted-charge{
        	font-style:italic;
        	text-align:right;
        	white-space:nowrap;
        }
        
        
        
        
        #basket-contents #basket-totals .formatted-total,
        #basket-contents #basket-totals .total-prompt{
        	font-weight:bold;
        	text-align:right;
        }
        
        
        #basket-contents .item-options td{}
        
        
        .checkout .item-quantity	{ width:8% !important; }
        .checkout .item-name		{ width:64% !important; }
        
        
        #fields-key{ margin:16px 0; }
        
        
        .checkout-button{
        	margin:12px 10px;
        	text-align:right;
        }
        
        
        #payment-fields input{
        	border-width:1px;
        	border-style:solid;
        	border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
        	padding:1px 2px;
        	font:normal 1em Arial, Helvetica, Verdana, sans-serif;
        }
        
        
        #payment-fields label{
        	white-space:nowrap;
        	text-align:left;
        	padding:3px 5px 3px 0;
        	clear:both;
        	margin:2px 0 0 0;
        }
        
        
        #payment-fields td{
        	padding:0 0 6px 0;
        }
        
        
        #shipping-payment .form_row{ margin:10px 0 0 0; }
        
        
        #shipping-payment label{
        	float:left;
        	width:65px;
        	white-space:nowrap;
        	text-align:left;
        	padding:3px 5px 3px 0;
        	clear:both;
        	margin:2px 0 0 0; 
        }
        
        
        .OSEL .continue-button,
        .OPAY .continue-button{ 
        	margin:0 0 12px 0;
        }
        
        
        .OCST #basket-contents{ margin: 0 0 32px 0; }
        
        
        .OPAY .fields-key{ margin:0 0 16px 0; }
        #payment-fields .form_row{ margin:10px 0 0 0; }
        
        
        #customer-fields.non-editable{ margin:0 0 32px 0; }
        #basket-contents.non-editable{ margin:16px 0 32px 0; }
        
        
        /*** CTGY, SRCH, PLST, OUS1, OUSM ***/
        
        
        .categoy-listing,
        .all-products,
        .related-products,
        .search-results{
        	clear:both;
        }
        
        
        .product-item{
        	float:left;
        	padding:0 9px 20px;
        	width:215px !important;
        }
        
        
        .product-item .padding{
        	background-color:#fff;
        	height:300px;
        	overflow:hidden;
        	padding:20px 10px;
        	text-align:center;
        	color:#484848;
        	border:#dbd9b5 1px solid;
        }
        		
        .product-next-previous{ 
        	clear:both;
        	margin:12px 0; 
        }
        
        
        .CTGY .product-details,
        .PLST .product-details,
        .SRCH .product-details{
            	overflow: hidden;
        	text-align:center;
        	color:#493933;
        	padding:0;
        	margin:0;
        }
        
        
        .product-item .product-thumbnail{ 
        	margin:0 0 12px 0; 
        	text-align:center;
        }
        
        
        .product-item .product-thumbnail img{
        	max-width:150px; height:150px;
        }
        
        
        .purchase-buttons{
        	text-align:center;
        	margin:16px 0 0 0;
        }
        
        
        .purchase-buttons input.button{
        		margin:0 0 0 17px;
        		padding:5px;
        		float:left;
        }
        
        
        .line-item td.item-buttons{
        	white-space:nowrap;
        }
        
        
        .line-item tr.header-row td{ font-weight:bold; }
        
        
        .thumbnail-not-available{
        	display:block;
        	width:110px;
        	height:110px;
        	background:transparent url() no-repeat scroll left top;
        	margin:0 auto;
        }
        
        
        .image-not-available{
        	display:block;
        	background:transparent url() no-repeat scroll left top;
        }
        
        
        .next-previous{ margin:12px 0 0 0; }
        
        
        .next-button	{ float:right; }
        .previous-button{ float:left; }
        
        
        .search-again{ margin:0 3px 10px; }
        
        
        .OUS1 #main-content{
        	padding-left:225px;
        	padding-right:225px;
        }
        
        
        .upsale-heading{ text-align:center; }
        
        
        .OUS1 .product-thumbnail{
             float: left;
            height: 300px;
            max-width: 300px;
            text-align: center;
        	padding:0 20px 0 0;
        }
        
        
        .OUS1 .product-description		{ margin:16px 0 0 0; }
        .OUS1 .thumbnail-not-available	{ margin:16px auto; }
        
        
        .OUSM #main-content{ 
        	padding-left:160px;
        	padding-right:160px;
        }
        
        
        .upsale-batch{
        	width:100%;
        	padding:2px;
        }
        
        
        .upsale-batch .heading td	{ font-weight:bold; }
        
        
        .upsale-checkbox{ width:32px; }
        .upsale-name{ width:175px; }
        
        
        .OUS1 .purchase-buttons textarea{
        	text-align:center;
        	width:390px;
        	height:100px;
        }
        
        
        .OUSM .continue-button{ text-align:center; }
        
        
        .line-item table{ width:100%; margin-bottom:30px;}
        .line-item table tr.heading td{ font-weight:bold; }
        .line-item table td{ 
        	padding:10px;
        	border: 1px solid #ddd;
        }
        .item-buttons input.button {
        	float: left;
            margin: 0 0 0 5px;
            padding: 5px;
        	}
        .line-item .item-name{ width:30%; }
        .line-item tr.alt_row{ background-color:#f0f0f0; }
        
        
        /*** PRODUCT DISPLAY ***/
        
        
        .product-details-1{
        	width:48%;
        	float:left;
        }
        	.product-details-1 p{
        		text-align:center;
        	}
        .product-details-2{
        	width:48%;
        	float:right;
        }
        
        
        .product-details-2 .purchase-buttons {
        	margin:16px 0;
        	text-align:left;
        	width:200px;
        	}
        	.product-details-2 .purchase-buttons .button {
        		font-size:17px;
        		height:39px;
        		margin:10px 0 0;
        		text-shadow:2px 2px 2px #496E92;
        		width:140px;
        		}	
        	.product-image{ 		
        			max-width:300px;
        			margin:0 20px;
        			text-align:center;
        
        
        	 }
        
        
        	.product-image img{
        		max-width:300px; 
        		max-height:300px;
        		}
        
        
        .product-quantity-input{
        	margin:0 4px;
        	overflow:auto;
        	width:34px;
        	text-align:left;
        	
        }
        
        
        .related-products{
        	clear:both;
        	margin:32px 0 16px 0;
        }
        
        
        .product-attributes{
        	margin:16px 0;
        	text-align:left;
        }
        
        
        .product-attributes td{
        	padding:4px 0;
        }
        
        
        .product-attributes td.prompt{
        	vertical-align:top;
        	text-align:left;
        	padding-right:5px;
        }
        
        
        .product-attributes td.field{
        	text-align:left;
        }
        
        
        /*** INVC ***/
        
        
        .INVC .order-id,
        .ORDS .order-id{
        	float:left;
        	font-weight:bold;
        }
        
        
        .INVC .order-date,
        .ORDS .order-date{
        	float:right;
        	text-align:right;
        }
        
        
        .INVC .order-date span,
        .ORDS .order-date span{
        	font-weight:bold; 
        }
        
        
        .INVC h3,
        .ORDS h3{ 
        	clear:both;
        	margin:16px 0 24px 0;
        }
        
        
        /*** PATR ***/
        
        
        .PATR .continue-button{
        	text-align:right;
        	margin:12px 0;
        }
        
        
        /*** SMAP ***/
        
        
        .SMAP h3{
        	
        }
        
        
        .SMAP .category{
        	width:33%;
        	text-align:left;
        	float:left;
        }
        
        
        .SMAP .category .padding{
        	padding:2px;
        }
        
        
        .SMAP .product{
        	width:33%;
        	text-align:left;
        	float:left;
        }
        
        
        .SMAP .product .padding{ padding:2px; }
        
        
        /*** ORDH, ORDS ***/
        
        
        #orderhistory-list table{ border-collapse:collapse; }
        
        
        #order-contents table{
        	width:100%;
        }
        
        
        #order-contents table td, 
        #orderhistory-list table td{ 
        	vertical-align:top;
        }
        
        
        #orderhistory-list .order-reorder		{ text-align:center; }
        #orderhistory-list .order-invoice		{  }
        #orderhistory-list .order-description	{ text-align:left; }
        #orderhistory-list .order-date			{  }
        #orderhistory-list .order-purchased		{ text-align:center; }
        #orderhistory-list .order-quantity		{ text-align:center; }
        #orderhistory-list .order-status		{ text-align:center; }
        #orderhistory-list .order-tracking		{ text-align:left; }
        #orderhistory-list .order-total			{ text-align:right; }
        #orderhistory-list .order-price			{ text-align:right; }
        #orderhistory-list .order-view			{ 
        	vertical-align:middle;
        	padding:0 8px;
        }
        
        
        #orderhistory-list tr.heading td { 
        	font-weight:bold;
        	white-space:nowrap;
        }
        
        
        #order-contents table tr td.order-reorder		{ text-align:center; }
        #order-contents table tr td.order-invoice		{  }
        #order-contents table tr td.order-description	{ text-align:left; }
        #order-contents table tr td.order-date			{ text-align:left }
        #order-contents table tr td.order-purchased		{ text-align:center; }
        #order-contents table tr td.order-quantity		{ text-align:center; }
        #order-contents table tr td.order-status		{ text-align:left; }
        #order-contents table tr td.order-tracking		{ text-align:left; }
        #order-contents table tr td.order-total			{ text-align:right; }
        #order-contents table tr td.order-price			{ text-align:right; }
        
        
        #order-contents table tr td.charge-description,
        #order-contents table tr td.charge-fee{
        	font-style:italic;
        	text-align:right;
        }
        
        
        #order-contents table tr td.charge-fee{ text-align:right; }
        #order-contents table tr td.formatted-total,
        #order-contents table tr td.total-prompt{
        	text-align:right;
        	font-weight:bold;
        }
        
        
        #customer-fields{
        	margin:16px 0;
        }
        
        
        #Order_BillZip{ width:44px; }
        
        
        .widest{ width:100%; }
        
        
        
        
        /**** Homepage Elements *****/
        
        
        /**** body.SFNT #left-navigation {display:none;} *****/
        body.SFNT #main-content {padding-bottom:20px; width:698px;}
        body.SFNT #main-content h1, body.SFNT #main-content h2, body.SFNT #main-content h3 {margin-left:20px;}
                                    
        #header {                   
        	background: url(images/header.jpg) no-repeat scroll center top transparent;
            height: 283px;
        	width:700px;
        	}
        	#header a {
        		position:absolute;
        		width:700px; height:283px;
        		}
        	#header a span{
        		display:none;
        		}	
        
        
        #free-shipping {
        	background: url(images/shipping-banner.jpg) no-repeat scroll center top transparent;
        	    display: inline;
        	    float: left;
        	    height: 62px;
        	    margin: 20px 0 10px;
        	    width: 700px;
        	}
        	#free-shipping a {
        		position:absolute;
        		width:940px; height:46px;
        		}
        	#free-shipping a span{
        		display:none;
        		}	
        	
        	
        #left-ad {
        	background:transparent url(images/left-ad.jpg) top no-repeat;
        	width:460px; height:132px;
        	padding-bottom:20px;
        	margin-top:20px;
        	float:left;
        	}
        	#left-ad a {
        		position:absolute;
        		width:460px; height:132px;
        		}
        	#left-ad a span{
        		display:none;
        		}
        		
        		#right-ad {
        			background:transparent url(images/right-ad.jpg) top no-repeat;
        			width:460px; height:132px;
        			padding-bottom:20px;
        			float:right;
        			margin-top:20px;
        			}
        			#right-ad a {
        				position:absolute;
        				width:460px; height:132px;
        				}
        			#right-ad a span{
        				display:none;
        				}
        /*---- welcome banner ----*/
        	#welcome-banner {
        		background: url(images/welcome-bg.jpg) no-repeat scroll left top transparent;
        	    display: inline;
        	    float: left;
        	    height: 93px;
        	    margin: 15px 0 0;
        	    padding: 60px 0 0 20px;
        	    width: 680px;
        		}
        
        
        		
        		#welcome-banner h1{
        				color: #523F29;
        				margin:0;
        				padding:0;
        				}
        		 #welcome-banner p {
        			color:#6e6e6e;
        			width: 460px;
        			margin-top:10px;
        		}
        		#welcome-banner a {
        			color:#FFF;
        			text-decoration: underline;
        			margin-top:10px;
        			padding:0 20px 10px 20px;
        		}
        /*---- end welcome banner ----*/
        		
        
        
        
        
        /*---- end newsletter ----*/
        		#social-media {
        		 	background: url(images/socialMedia-bg.jpg) no-repeat scroll center top transparent;
        		   display: inline;
        		   float: left;
        		   height: 162px;
        		   margin: 15px 0 0 20px;
        		   width: 220px;
        		}
        			
        			#social-media .social-icons {
        				display: inline;
        			    float: left;
        			    margin: 55px 0 0 17px;
        				padding:0;
        			}
        /*---- end newsletter ----*/
        
        
        
        
        /*---- sub pages ----*/
        	#main-content h1 {
        		margin:20px 0 20px 10px;
        		color:#FFFv;
        	}
        
        
        
        
        	/*----- image machine css ----*/
        
        
        
        
        	.thumbnails{
        	 	display: block;
        		margin: 0 0 0 60px;
        		padding: 0;
        		width: 230px;
        		}
        
        
        		.thumbnails li{
        			display:block;
        			float:left;
        			margin:5px 5px 0 0;
        			padding:0;
        			width:50px;
        			height:50px;
        			text-align:center;
        			border:1px solid #eeeeee;
        			cursor:pointer;
        			}
        
        
        		.thumbnails li span{
        			display:inline-block;
        			height:100%;
        			text-align:center;
        			vertical-align:middle;
        			}
        
        
        		.thumbnails li img{
        			vertical-align:middle;
        			}
        
        
        	.swatches{
        		display:inline;
        		margin:0;
        		padding:0;
        		}
        
        
        		.swatches li{
        			display:block;
        			float:left;
        			margin:4px 4px 0 0;
        			padding:0;
        			width:50px;
        			height:50px;
        			text-align:center;
        			border:1px solid #eeeeee;
        			cursor:pointer;
        			}
        
        
        		.swatches li span{
        			display:inline-block;
        			height:100%;
        			text-align:center;
        			vertical-align:middle;
        			}
        
        
        		.swatches li img{
        			vertical-align:middle;
        			}
        
        
        	.product-image-margin{
        		height:8px;
        		}
        
        
        		.closeup {
        
        
        		   position:absolute;
        		   top:150px;
        		   padding:15px;
        		   background:#fff;
        		   border:3px solid #eaeaea;
        		   text-align:center;
        		   display:none;
        		   z-index:9999;
        		   min-width:274px;
        		   min-height:274px;
        		   border-radius:5px; 
        		   -moz-border-radius:5px;
        		   -webkit-border-radius:5px;
        		   box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
        		   -moz-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
        		   -webkit-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
        		}
        
        
        		.closeup a {
        		   cursor:pointer;
        		   position:absolute;
        		  right: -15px;
        		    top: -15px;
        		   z-index:9999;
        		   color:#ff0000;
        		}
        
        
        		#closeup-caption {
        		   margin:15px 15px 0;
        		   padding:5px;
        		   font:bold 14px Arial, Helvetica, sans-serif;
        		   color:#fff;
        		   background:#666;
        		   -moz-border-radius:5px;
        		   -webkit-border-radius:5px;
        		   box-shadow:rgba(255,255,255, 0.75) 0px 0px 25px;
        		   display:none;
        		}
        		.closeup_backing {
        		   position:absolute;
        		   left:0px;
        		   top:0px;
        		   background:#000;
        		   background:rgba(0,0,0,.6);
        		   filter:alpha(opacity=60);
        		   width:100%;
        		   z-index:100;
        		}
        		.CTGY .product-details .product-name,
        		.PLST .product-details .product-name,
        		.SRCH .product-details .product-name{
        				height: 3em;
            				line-height: 1.5em;
            				overflow: hidden;
        }
        
        
        #breadcrumbs li{
        float:left;
        margin-right:10px;
        }		
        
        
        #filter-items-container
        {
            color: #434343;
            font-size: 11px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }
        #filter-items-container .per-page
        {
            position: relative;
            float:left;
            padding: 0 5px;
            margin-right: 5px;
            height: 22px;
            line-height: 20px;
        }
        #filter-items-container .per-page label
        {
            margin-right: 3px;
        }
        #filter-items-container .per-page select
        {
            padding: 0;
        }
        #filter-items-container .sorting
        {
            position: relative;
            float:left;
            padding: 0 5px;
            height: 22px;
            line-height: 20px;
        }
        #filter-items-container .sorting label
        {
            margin-right: 3px;
        }
        #filter-items-container .sorting select
        {
            padding: 0;
            font-size: 11px;
        }
        
        
        
        
        .page-links-previous, .page-links-next
        {
            text-decoration: none;
            line-height: 20px;
            padding: 0 8px;
            white-space: nowrap;
            font-weight: bold;
        }
        .page-links-previous
        {
            float: left;
            text-align: right;
        }
        .page-links-next
        {
            float: right;
            text-align: left;
        }
        .page-links-inactive
        {
            text-decoration: none;
            padding: 2px 3px;
        }
        .page-links-active
        {
            color: #434343;
            border-bottom: 2px solid #434343;
            font-weight: bold;
            text-decoration: none;
            padding: 1px 3px;
        }
        .page-links-deactivated
        {
            color: #999;
            text-decoration: none;
        }
        .page-links-deactivated:hover
        {
            color: #999;
            text-decoration: none;
            background: none;
        }
        .page-disp {
            display: block;
            line-height: 20px;
            float: left;
            text-align: center;
        }
        .page-links, .page-links a
        {
            color: #434343;
            font-size: 11px;
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }
            .page-links
            {
                margin: 0px;
                text-align: right;
                float: right;
            }
            
        .page-links-container
        {
            text-decoration: none;
            display:block;
            float: right;
        }
        .page-links-title
        {
            margin-top: 3px;
            position: relative;
            display:block;
            float:left;
        }
        
        
        .CTGY .product-details .product-name A:hover,
        .PLST .product-details .product-name A:hover,
        .SRCH .product-details .product-name A:hover {
        height: 3em;
        line-height: 1.5em;
        overflow: hidden;
        }
        Code:
        #global-mini-basket-container{
        	display: block;
        	float: right;
        	line-height: 22px;
        	padding: 4px 3px 0px 0px;
        }
        
        
        #global-mini-basket-hover-content
        {
        	display: none;
        	float: left;
        	z-index:10;
        	position: absolute;
        	min-width: 250px;
        	max-width: 410px;
        	background: #FFF;
        }
        
        
        #global-mini-basket-hover-content table
        {
        	display: table;
        	border-collapse: collapse;
        	border-spacing: 0px;
        	border: 1px solid #666;
        	background: #FFF;
        }
        
        
        #global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
        {
        	color: #FFF;
        	padding: 5px;
        	font-weight: bold;
        	font-size: 13px;
        	background: #666;
        }
        
        
        #global-mini-basket-hover-content table tbody td
        {
        	padding: 3px 5px;
        	line-height: 14px;
        	color: #000000;
        }
        
        
        #global-mini-basket-hover-content table tbody tr.on td
        {
        	background: #EEE;
        }
        
        
        #global-mini-basket-hover-content table thead th a
        {
        	color: #FFF;
        }
        
        
        #mini-basket 
        {
        	line-height: 2px;
        }
        
        
        .minibasket_backing
        {
        	display: none;
        	position: absolute;
        	left: 0px;
        	top: 0px;
        	width: 100%;
        }
        
        
        #global-mini-basket-hover-content .on a:link 
        {
          color: #000;
        }

        Comment


          #19
          Re: PR8 Update 7 Mini-Basket, Shipping Estimate, Template changes, and CSS changes

          I'd have to do some testing to be certain, but these changes should get you going in the right direction:

          Find the following block of CSS

          Code:
          #navigation-bar{
              background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
              height: 43px;
              line-height: 0;
              width: 960px;
              }
          and change it to

          Code:
          #navigation-bar{
              background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
              height: 43px;
              line-height: 0;
              width: 960px;
              text-align: center;
              }
          Then find

          Code:
          #navigation-bar ul {
          margin: 0px auto;
          padding: 14px 0px 0px;
          width: 560px;
          clear: both;
          }
          and remove the width: 560px; portion

          Then find

          Code:
          #navigation-bar li {
          color: rgb(100, 100, 100);
          list-style: none;
          line-height: 12px;
          float: right;
          text-align: center;
          margin: 0px 2px;
          font-weight: normal;
          }
          and change it to

          Code:
          #navigation-bar li {
          position: relative;
          display: inline-block;
          color: rgb(100, 100, 100);
          list-style: none;
          line-height: 12px;
          text-align: center;
          margin: 0px 2px;
          font-weight: normal;
          }
          At this point, you'll want to invert the output of your navigation items (Home should go first instead of last, then all products... etc). Also, move the "first-child" class from checkout div to the home div.

          Next, you'll want to completely remove this style

          Code:
          #navigation-bar li div div {
          border-right: 1px solid rgb(255, 255, 255);
          padding: 5px 18px;
          }
          and add in this one

          Code:
          .item-right-side
          {
          border-right: 1px solid rgb(255, 255, 255);
          padding: 5px 18px;
          }
          
          .first-child .item-right-side
          {
          border: none;
          }
          You'll also want to remove this style from your mini basket css

          Code:
          #mini-basket 
          {
              line-height: 2px;
          }
          You'll probably need to do some other minor tweaks once you get that up and going, but that should get you at least to a working state.



          Originally posted by chrisgable View Post
          I'll include the contents of both css below.
          What specific changes would you make? I hate to annoy you with this but my css skills are rudimentary at best.
          Thank you so much...

          Code:
          /*****************************************/  /*************** RESET CSS ***************/                
          /*****************************************/
          body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;}
          table{border-collapse:collapse;border-spacing:0;}
          fieldset,img,a img,:link img,:visited img {border:0;}
          address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
          ol,ul {list-style:none;}
          caption,th {text-align:left;}
          h1,h2,h3,h4,h5,h6 {font-size:100%;} 
          q:before,q:after {content:'';}
          
          
          
          
          /*** Site ***/
          body{
              background:#fff url() top center no-repeat;
              font:12px/1.46 Lucida Sans Unicode, Lucida Grande, sans-serif;
              margin:0;
              color:#2b2a2a;
              text-align:center;
          }
          
          
          td{ font-size:1em; }
          
          
          form{
              display:inline;
              margin:0;
              padding:0;
          }
          
          
          h1{ font:normal 1.5em Arial, Helvetica, sans-serif ; color:#2b2a2a;   }
          h2{ font:normal 1.3em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }
          h3{ font:normal 1.1em Arial, Helvetica, sans-serif ; color:#2b2a2a;  padding-bottom:20px; }
          
          
          h2.header{
              color:#fff;
              padding:10px;
              background-color:transparent;
              font-weight:bold;
          }
          
          
          p {
              padding-bottom:10px;
              }
          
          
          a img{ border:0; }
          
          
          a:link            { color:#484848; }
          a:visited        { color:#484848; }
          a:active        { color:#42992f; }
          a:hover            { color:#42992f; }
          
          
          .clear            { clear:both; font-size:0em; height:0em; }
          
          
          .floatright        { float:right; }
          .floatleft        { float:left; }
          
          
          .alignright        { text-align:right; }
          .alignleft        { text-align:left; }
          
          
          .aligncenter    { text-align:center; }
          .margincenter    { margin:0 auto; }
          
          
          .small            { font-size:.9em; }
          .smaller        { font-size:.8em; }
          .smallest        { font-size:.7em; }
          .large            { font-size:1.1em; }
          .larger            { font-size:1.2em; }
          .largest        { font-size:1.3em; }
          .bold            { font-weight:bold; }
          .italic            { font-style:italic; }
          .red            { color:#dd0000; }
          .blue            { color:#0000ff; }
          .grey            { color:#999999; }
          .nowrap            { white-space:normal; }
          
          
          .link-pipe        { color:#999999; }
          
          
          .input_error{ border-color:#cc0000 #ff0000 #ff0000 #ff0000; }
          
          
          select{
              border-width:1px;
              border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
              padding:1px 2px;
          }
          
          
          .error-message{ 
              padding:4px;
              text-align:center;
              width:60%;
              margin:0 auto;
              color:#dd0000;
              font-weight:bold;
          }
          
          
          .LOGN .error-message,
          .AFCL .error-message,
          .ORDL .error-message{
              margin:12px 24px;
              width:auto;
          }
          
          
          .information-message{ 
              padding:4px;
              text-align:center;
              width:60%;
              margin:0 auto;
              color:#0000dd;
          }
          
          
          .LOGN .information-message{
              margin:12px 24px;
              width:auto;
          }
          td.field textarea {
                  width:200px; height:100px;
                  
              }
          .textfield, select, textarea,
          #tax-fields .form_row input{
              border-width:1px;
              border-style:solid;
              border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
              padding:1px 2px;
              font:normal 1em Arial, Helvetica, Verdana, sans-serif;
          }
          
          
          .textfield, textarea{
              width:140px; height:18px;
          }
          
          
          .button{
              border:none;
              background-color:#449a31;
              color:#ffffff;
              font-size:.9em;
              padding:3px;
              margin:0;
              cursor:pointer;
              width: auto;
                overflow: visible;
          
          
          }
          
          
          #site-container{
                  border-collapse: collapse;
                  border-left: 1px solid #beb9b7;
                  border-bottom: 1px solid #beb9b7;
                  border-right: 1px solid #beb9b7;
                  margin: 0 auto;
                  text-align: left;
                  width: 960px;
          }
          
          
          #bottom-wrap    { clear:both; font-size:0em; height:0em; }
          
          
          /*** Top Navigation Bar ***/
          
          
          #navigation-bar{
              background: url(images/mainNav-bg.jpg) no-repeat scroll center center #FFFFFF;
              height: 43px;
              line-height: 0;
              width: 960px;
              }
          
          
          #navigation-bar ul{ 
              margin:0 auto;
              padding:14px 0 0 0 ;
              width:560px;
              clear:both;
          }
          
          
          #navigation-bar li{
              color:#646464;
              list-style:none;
              line-height:12px;
              float:right;
              text-align:center;
              margin:0 2px;
              font-weight:normal;
          }
          
          
          #navigation-bar li.navigation-item-on    {  }
          #navigation-bar li.navigation-item-off    {  }
          
          
          /* tab padding */
          #navigation-bar li div div{
              border-right: 1px solid #fff;
              padding: 5px 18px;
              }
              
              #navigation-bar li.first-child div div {
                  border:0;
              }
              
          
          
          /* tab off side images */
          #navigation-bar li.navigation-item-off div.item-left-side    { background:transparent url() no-repeat scroll left top; }
          #navigation-bar li.navigation-item-off div.item-right-side    { background:transparent url() no-repeat scroll right top; }
          
          
          /* tab on side images */
          #navigation-bar li.navigation-item-on div.item-left-side    { background:transparent url() no-repeat scroll left top; }
          #navigation-bar li.navigation-item-on div.item-right-side    { background:transparent url() no-repeat scroll right top; }
          
          
          /* navigation bar links */
          #navigation-bar li a:link,
          #navigation-bar li a:visited,
          #navigation-bar li a:hover,
          #navigation-bar li a:active{ 
              color:#fff; 
              text-decoration:none;
          }
          
          
          #nav-checkout        {}
          #nav-search            {}
          #nav-basket            {}
          #nav-account        {}
          #nav-all-products    {}
          #nav-storefront        {}
          
          
          /*** Left Navigation ***/
          
          
          #left-navigation {
              padding: 0 10px 10px;
              vertical-align: top;
              width: 220px;
          }
          
          
          /*** One Column Pages ***/
          .one-column #left-navigation{ display:none; }
          .one-column #main-content {width:940px; padding: 20px;}
          #shipping-payment .form_row {text-align:left;}
          
          
          #category-tree{
              background:#d5cea5 url() repeat-y scroll center top;
              padding: 0 20px;
          }
          
          
          #category-tree-top-image{ 
              width:219px;
          
          
              }
          #category-tree-bottom-image{
              background: url(images/footer-bottom-bg.jpg) bottom no-repeat;
              padding-bottom: 35px;
              width:219;
          }
          
          
          #category-tree a{
              display:block;
              text-decoration:none;
              color:#73370c;
              font-size:12px;
          }
          
          
          #category-tree div{
              padding:5px  0;
              border-bottom:1px dotted #6b3410;
          }
          
          
          #category-tree .level-1 a{ 
              padding:4px 6px 4px 0; 
              background:transparent url() right no-repeat;
                  
              
              }
          #category-tree .level-2 a{ padding:4px 6px 4px 20px; }
          #category-tree .level-3 a{ padding:4px 6px 4px 30px; }
          #category-tree .level-4 a{ padding:4px 6px 4px 40px; }
          #category-tree .level-5 a{ padding:4px 6px 4px 50px; }
          #category-tree .level-6 a{ padding:4px 6px 4px 60px; }
          
          
          #category-tree div.active{ }
          #category-tree-header{    
              background: url(images/categoryTitle-bg.jpg) no-repeat scroll center top transparent;
                  height: 4px;
                  width: 219px;
              }
          
          
          #category-tree-footer{
               background: url(images/catTreeSocialFooter-bg.jpg) no-repeat scroll center top transparent;
              height: 60px;
              padding: 80px 0 0 20px;
              width: 200px;
              margin-top:20px;
          }
          
          
          #category-tree-footer img{
              width:35px; height:35px;
              margin-left: 5px;
          }
          
          
              #category-tree-footer img.social-icons-first {
                  margin-left:25px;
              }
          /*** Content ***/
          
          
          #content-container{
              clear: both;
              margin: 0 auto;
              width: 960px;
              margin-top:10px;
          }
          
          
          
          
          #main-content { 
              padding-right: 10px;
              vertical-align: top;
              width: 690px;
          }
          
          
          /*** Global Header/Footer ***/
          
          
          #global-header{
              background: url() no-repeat scroll center top transparent;
              height: 80px;
              padding-right: 10px;
              }
          
          
          
          
          #logo{
               padding: 20px 0 0 10px;
              height:51px;
              width:177px;
          }
          
          
          #logo a{
              background:url(images/logo.gif) no-repeat scroll left top transparent;
              cursor:pointer;
              display:block;
              height:51px;
              width:177px;
          }
          
          
          #search{
              float:right;
              padding:40px 0 4px 0;
          }
          
          
          #header-links{
              float:right;
              padding:40px 12px 0 0;
              line-height:22px;
              color:#ededed;
              text-align:right;
          }
              #header-links a{
                  color:#515151;
              }
          #global-footer{ 
              border-top: 1px solid #BEB9B7;
              margin: 40px 0;
              padding-top: 20px;
              text-align: center;
              }
          
          
              
          #footer-links a{
              color:#774d4e;
              }
          
          
          #footer-links ul{
              font:.9em normal Verdana, Helvetica, Arial, sans-serif;
              margin:8px 0;
              padding:0;
          }
          
          
          
          
          #footer-links ul li{
              list-style-type:none;
              border-left:1px solid #646464;
              padding:0 2px 0 6px;
              margin:0;
              text-align:center;
              display:inline;
          }
          
          
          #footer-links ul li.first-child{ border:0; }
          #global-footer #footer-links #footer-sitemap-link{ display:none; }
          
          
          #miva-link{
              font-size:.8em;
              margin:16px 0;
          }
          
          
          #miva-link a{ color:#999999; }
          
          
          #page-header{ clear:both; }
          #page-footer{ clear:both; }
          
          
          #maintenance{
              color:#dd0000;
              font-weight:bold;
          }
          
          
          /*** ACAD, ACED, AFAD, AFED, OCST ***/
          
          
          .logout-link{
              margin:12px 10px;
              float:right;
          }
          
          
          #customer-fields label,
          #affiliate-fields label{
              clear: both;
              float: left;
              padding: 2px 5px 3px 0;
              text-align: right;
              white-space: nowrap;
              width: 170px;
          }
          
          
          #affiliate-commissions label,
          .OSEL .non-editable label{
              float:left;
              width:120px;
              font-weight:bold;
              text-align:right;
              padding:0 6px 0 0;
          }
          
          
          #customer-fields input.textfield,
          #affiliate-fields input.textfield,
          #tax-fields input,
          #affiliate-commissions div.form_row div,
          .non-editable div.form_row div{
              width:170px;
              margin:0 0 4px 0;
          }
          
          
          #affiliate-commissions div.form_row div{ float:left; }
          
          
          #customer-fields select,
          #affiliate-fields select{
              width:176px;
              margin:0 0 4px 0;
          }
          
          
          #login-details,
          #affiliate-information{
              margin:0 0 16px 0;
          }
          
          
          #affiliate-commissions .form_row{ margin:0 0 8px 0; }
          
          
          .AFAD #affiliate-fields{
              width:50%;
              margin:0 auto;
          }
          
          
          .AFED #affiliate-fields #affiliate-contact,
          .AFED #affiliate-fields #affiliate-commissions{
              float:left;
              width:50%;
          }
          
          
          #affiliate-commissions .affiliate-code{
              width:230px !important;
          }
          
          
          #affiliate-commissions #affiliate-image{
              width:236px !important;
              overflow:auto;
          }
          
          
          #affiliate-terms{ margin-left:155px; }
          
          
          #affiliate-fields .form_row div.non-editable{
              margin:0 0 8px 0;
              padding:2px 0 0 0;
          }
          
          
          .save-button,
          .continue-button{
              clear:both;
              text-align:right;
              padding:24px 0 0 0;
          }
          
          
          .required{ font-weight:bold; }
          
          
          h2.fields-heading{
              background-color:#68635f;
              color:#fff;
              margin:0 0 12px 0;
              padding:4px 4px 4px 12px;
          }
          
          
          .address2-label{ margin:0 0 14px 0; }
          
          
          .controls{ 
              font:normal .7em Verdana, Helvetica, Arial, sans-serif;
              visibility:hidden;
          }
          
          
          #customer-fields .controls label{
              float:none;
          }
          
          
          #ship-to,
          #bill-to{
              width:50%;
              float:left;
          }
          
          
          #ship-to h2 input.checkbox,
          #bill-to h2 input.checkbox{
              margin:0 2px 0 12px;
              padding:0;
              width:13px;
              height:13px;
              overflow:hidden;
          }
          
          
          div.invalid input.textfield,
          div.invalid select,
          #tax-fields div.invalid input{
              border-color:#cc0000 #ff0000 #ff0000 #ff0000;
          }
          
          
          div.invalid label{ color:#dd0000; }
          
          
          .warning-message{
              padding:4px;
              text-align:center;
              width:60%;
              margin:0 auto;
              color:#dd0000;
          }
          
          
          #customer-fields.editable .form_row,
          #affiliate-fields.editable .form_row{
              margin:0 0 6px 0;
              text-align:left;
          }
          
          
          #customer-fields.non-editable .form_row{
              margin:0 0 4px 0; 
              text-align:left;
          }
          
          
          #customer-fields.non-editable label,
          #affiliate-fields.non-editable label{
              margin:0 0 0 30px;
              padding:0 4px 0 0;
              font-weight:bold;
              width:110px;
              text-align:right;
              float:left;
              clear:both;
              white-space:nowrap;
          }
          
          
          #customer-fields.non-editable .form_row div,
          #affiliate-fields.non-editable .form_row div{
              float:left;
          }
          
          
          #update-record{
              clear:both;
              margin:24px 0 0 24px;
          }
          
          
          .tax-fields label{ font-weight:bold; }
          
          
          /*** LOGN, AFCL, ORDL, ORHL ***/
          
          
          .AFCL #main-content,
          .LOGN #main-content, .ORHL #main-content{
              width:940px;
          
          
          }
          
          
          .ORHL #main-content{ }
          
          
          .ORDL #main-content{ padding:28px 16px; }
          
          
          .AFCL .section,
          .LOGN .section{
                  float:left;
                  height:220px;
                  width:49%;
                  text-align:center;
              }
          
          
          
          
          .ORDL .section{
              float:left;
              height:220px;
              width:33%;
          }
          
          
          .ORHL .lookup-section{ 
              float:left;
              height:220px;
              width:50%;
          }
          
          
          .ORHL .signin-section{
              float:left;
              height:220px;
              width:48%;
          }
          .lookup-section .form_row {}
          .signin-section .form_row {}
          
          
          .section h3,
          .lookup-section h3,
          .signin-section h3{
              text-align:center;
              padding-bottom:10px;
          }
          
          
          .form_row{ 
              margin:0 0 6px 0; 
              text-align:center;
              }
          
          
          .LOGN label,
          .ORDL label,
          .AFCL label{
              clear:both;
              width:80px;
              padding:3px 5px;
          }
          
          
          .ORHL label{ 
              clear:both;
              padding:3px 5px;
              text-align:right;
              white-space:nowrap;
              width:90px;
          }
          
          
          .grey-border-right{ border-right:1px solid #cccccc; }
          
          
          .logn-input{ width:120px; }
          
          
          #invalid-key{
              width:23px;
              float:left;
              margin:0 4px 0 0;
              border-width:1px;
              border-style:solid;
              border-color:#cc0000 #ff0000 #ff0000 #ff0000;
          }
          
          
          .sign-in-buttons{ 
              text-align:center;
              margin:12px 0 0 0;
          }
          
          
          .forgot-password{ 
              font-size:.9em; 
              text-align:center;
              margin:12px 0 0 0;
          }
          
          
          /*** BASK, OCST, OPAY, OSEL ***/
          
          
          #basket-contents.non-editable,
          #basket-contents.editable,
          #order-contents table{
              width:100%;
              border-left:1px solid #d6d6d6;
              border-top:1px solid #d6d6d6;
              margin-top:10px;
          }
          
          
          #basket-contents.non-editable table,
          #basket-contents.editable table,
          #order-contents table{
              border-collapse:collapse;
              width:100%;
              color:#000;
          }
          
          
          #basket-contents.non-editable td,
          #basket-contents.editable td,
          #order-contents td{
              background-color:#fff;
              border-bottom:1px solid #d6d6d6;
              border-right:1px solid #d6d6d6;
              vertical-align:top;
              padding:6px;
              font:normal 1em Arial;
          }
          
          
          #basket-contents table tr.basket-heading td,
          #basket-contents table tr.basket-heading td,
          #order-contents table tr.heading td{
              background-color:#68635f;
              color:#fff;
              font-weight:bold;
              text-align:center;
              font-size:1em;
              white-space:nowrap;
          }
          
          
          #basket-contents .basket-qty-input{ width:34px; }
          
          
          #basket-contents .item-remove{
              width:8%;
              vertical-align:middle;
          }
          
          
          #basket-contents table .basket-heading td.item-name{
              text-align:left;
          }
          
          
          #basket-contents.editable .item-quantity{
              width:13%;
              text-align:center;
              white-space:nowrap;
          }
          
          
          #basket-contents.non-editable .item-quantity{
              width:6%;
              text-align:center;
          }
          
          
          #basket-contents .item-options .item-name{ padding-left:16px; }
          
          
          #basket-contents.non-editable .item-name{ width:59%; }
          #basket-contents.editable .item-name    { width:66%; }
          
          
          #basket-contents td.item-name{ text-align:left; }
          
          
          #basket-contents .item-price{
              width:10%;
              text-align:right;
              white-space:nowrap;
          }
          
          
          #basket-contents .item-total{
              width:10%;
              text-align:right;
          }
          
          
          #basket-contents .basket-charges .charge-description,
          #basket-contents .basket-charges .formatted-charge{
              font-style:italic;
              text-align:right;
              white-space:nowrap;
          }
          
          
          
          
          #basket-contents #basket-totals .formatted-total,
          #basket-contents #basket-totals .total-prompt{
              font-weight:bold;
              text-align:right;
          }
          
          
          #basket-contents .item-options td{}
          
          
          .checkout .item-quantity    { width:8% !important; }
          .checkout .item-name        { width:64% !important; }
          
          
          #fields-key{ margin:16px 0; }
          
          
          .checkout-button{
              margin:12px 10px;
              text-align:right;
          }
          
          
          #payment-fields input{
              border-width:1px;
              border-style:solid;
              border-color:#333333 #bbbbbb #bbbbbb #bbbbbb;
              padding:1px 2px;
              font:normal 1em Arial, Helvetica, Verdana, sans-serif;
          }
          
          
          #payment-fields label{
              white-space:nowrap;
              text-align:left;
              padding:3px 5px 3px 0;
              clear:both;
              margin:2px 0 0 0;
          }
          
          
          #payment-fields td{
              padding:0 0 6px 0;
          }
          
          
          #shipping-payment .form_row{ margin:10px 0 0 0; }
          
          
          #shipping-payment label{
              float:left;
              width:65px;
              white-space:nowrap;
              text-align:left;
              padding:3px 5px 3px 0;
              clear:both;
              margin:2px 0 0 0; 
          }
          
          
          .OSEL .continue-button,
          .OPAY .continue-button{ 
              margin:0 0 12px 0;
          }
          
          
          .OCST #basket-contents{ margin: 0 0 32px 0; }
          
          
          .OPAY .fields-key{ margin:0 0 16px 0; }
          #payment-fields .form_row{ margin:10px 0 0 0; }
          
          
          #customer-fields.non-editable{ margin:0 0 32px 0; }
          #basket-contents.non-editable{ margin:16px 0 32px 0; }
          
          
          /*** CTGY, SRCH, PLST, OUS1, OUSM ***/
          
          
          .categoy-listing,
          .all-products,
          .related-products,
          .search-results{
              clear:both;
          }
          
          
          .product-item{
              float:left;
              padding:0 9px 20px;
              width:215px !important;
          }
          
          
          .product-item .padding{
              background-color:#fff;
              height:300px;
              overflow:hidden;
              padding:20px 10px;
              text-align:center;
              color:#484848;
              border:#dbd9b5 1px solid;
          }
                  
          .product-next-previous{ 
              clear:both;
              margin:12px 0; 
          }
          
          
          .CTGY .product-details,
          .PLST .product-details,
          .SRCH .product-details{
                  overflow: hidden;
              text-align:center;
              color:#493933;
              padding:0;
              margin:0;
          }
          
          
          .product-item .product-thumbnail{ 
              margin:0 0 12px 0; 
              text-align:center;
          }
          
          
          .product-item .product-thumbnail img{
              max-width:150px; height:150px;
          }
          
          
          .purchase-buttons{
              text-align:center;
              margin:16px 0 0 0;
          }
          
          
          .purchase-buttons input.button{
                  margin:0 0 0 17px;
                  padding:5px;
                  float:left;
          }
          
          
          .line-item td.item-buttons{
              white-space:nowrap;
          }
          
          
          .line-item tr.header-row td{ font-weight:bold; }
          
          
          .thumbnail-not-available{
              display:block;
              width:110px;
              height:110px;
              background:transparent url() no-repeat scroll left top;
              margin:0 auto;
          }
          
          
          .image-not-available{
              display:block;
              background:transparent url() no-repeat scroll left top;
          }
          
          
          .next-previous{ margin:12px 0 0 0; }
          
          
          .next-button    { float:right; }
          .previous-button{ float:left; }
          
          
          .search-again{ margin:0 3px 10px; }
          
          
          .OUS1 #main-content{
              padding-left:225px;
              padding-right:225px;
          }
          
          
          .upsale-heading{ text-align:center; }
          
          
          .OUS1 .product-thumbnail{
               float: left;
              height: 300px;
              max-width: 300px;
              text-align: center;
              padding:0 20px 0 0;
          }
          
          
          .OUS1 .product-description        { margin:16px 0 0 0; }
          .OUS1 .thumbnail-not-available    { margin:16px auto; }
          
          
          .OUSM #main-content{ 
              padding-left:160px;
              padding-right:160px;
          }
          
          
          .upsale-batch{
              width:100%;
              padding:2px;
          }
          
          
          .upsale-batch .heading td    { font-weight:bold; }
          
          
          .upsale-checkbox{ width:32px; }
          .upsale-name{ width:175px; }
          
          
          .OUS1 .purchase-buttons textarea{
              text-align:center;
              width:390px;
              height:100px;
          }
          
          
          .OUSM .continue-button{ text-align:center; }
          
          
          .line-item table{ width:100%; margin-bottom:30px;}
          .line-item table tr.heading td{ font-weight:bold; }
          .line-item table td{ 
              padding:10px;
              border: 1px solid #ddd;
          }
          .item-buttons input.button {
              float: left;
              margin: 0 0 0 5px;
              padding: 5px;
              }
          .line-item .item-name{ width:30%; }
          .line-item tr.alt_row{ background-color:#f0f0f0; }
          
          
          /*** PRODUCT DISPLAY ***/
          
          
          .product-details-1{
              width:48%;
              float:left;
          }
              .product-details-1 p{
                  text-align:center;
              }
          .product-details-2{
              width:48%;
              float:right;
          }
          
          
          .product-details-2 .purchase-buttons {
              margin:16px 0;
              text-align:left;
              width:200px;
              }
              .product-details-2 .purchase-buttons .button {
                  font-size:17px;
                  height:39px;
                  margin:10px 0 0;
                  text-shadow:2px 2px 2px #496E92;
                  width:140px;
                  }    
              .product-image{         
                      max-width:300px;
                      margin:0 20px;
                      text-align:center;
          
          
               }
          
          
              .product-image img{
                  max-width:300px; 
                  max-height:300px;
                  }
          
          
          .product-quantity-input{
              margin:0 4px;
              overflow:auto;
              width:34px;
              text-align:left;
              
          }
          
          
          .related-products{
              clear:both;
              margin:32px 0 16px 0;
          }
          
          
          .product-attributes{
              margin:16px 0;
              text-align:left;
          }
          
          
          .product-attributes td{
              padding:4px 0;
          }
          
          
          .product-attributes td.prompt{
              vertical-align:top;
              text-align:left;
              padding-right:5px;
          }
          
          
          .product-attributes td.field{
              text-align:left;
          }
          
          
          /*** INVC ***/
          
          
          .INVC .order-id,
          .ORDS .order-id{
              float:left;
              font-weight:bold;
          }
          
          
          .INVC .order-date,
          .ORDS .order-date{
              float:right;
              text-align:right;
          }
          
          
          .INVC .order-date span,
          .ORDS .order-date span{
              font-weight:bold; 
          }
          
          
          .INVC h3,
          .ORDS h3{ 
              clear:both;
              margin:16px 0 24px 0;
          }
          
          
          /*** PATR ***/
          
          
          .PATR .continue-button{
              text-align:right;
              margin:12px 0;
          }
          
          
          /*** SMAP ***/
          
          
          .SMAP h3{
              
          }
          
          
          .SMAP .category{
              width:33%;
              text-align:left;
              float:left;
          }
          
          
          .SMAP .category .padding{
              padding:2px;
          }
          
          
          .SMAP .product{
              width:33%;
              text-align:left;
              float:left;
          }
          
          
          .SMAP .product .padding{ padding:2px; }
          
          
          /*** ORDH, ORDS ***/
          
          
          #orderhistory-list table{ border-collapse:collapse; }
          
          
          #order-contents table{
              width:100%;
          }
          
          
          #order-contents table td, 
          #orderhistory-list table td{ 
              vertical-align:top;
          }
          
          
          #orderhistory-list .order-reorder        { text-align:center; }
          #orderhistory-list .order-invoice        {  }
          #orderhistory-list .order-description    { text-align:left; }
          #orderhistory-list .order-date            {  }
          #orderhistory-list .order-purchased        { text-align:center; }
          #orderhistory-list .order-quantity        { text-align:center; }
          #orderhistory-list .order-status        { text-align:center; }
          #orderhistory-list .order-tracking        { text-align:left; }
          #orderhistory-list .order-total            { text-align:right; }
          #orderhistory-list .order-price            { text-align:right; }
          #orderhistory-list .order-view            { 
              vertical-align:middle;
              padding:0 8px;
          }
          
          
          #orderhistory-list tr.heading td { 
              font-weight:bold;
              white-space:nowrap;
          }
          
          
          #order-contents table tr td.order-reorder        { text-align:center; }
          #order-contents table tr td.order-invoice        {  }
          #order-contents table tr td.order-description    { text-align:left; }
          #order-contents table tr td.order-date            { text-align:left }
          #order-contents table tr td.order-purchased        { text-align:center; }
          #order-contents table tr td.order-quantity        { text-align:center; }
          #order-contents table tr td.order-status        { text-align:left; }
          #order-contents table tr td.order-tracking        { text-align:left; }
          #order-contents table tr td.order-total            { text-align:right; }
          #order-contents table tr td.order-price            { text-align:right; }
          
          
          #order-contents table tr td.charge-description,
          #order-contents table tr td.charge-fee{
              font-style:italic;
              text-align:right;
          }
          
          
          #order-contents table tr td.charge-fee{ text-align:right; }
          #order-contents table tr td.formatted-total,
          #order-contents table tr td.total-prompt{
              text-align:right;
              font-weight:bold;
          }
          
          
          #customer-fields{
              margin:16px 0;
          }
          
          
          #Order_BillZip{ width:44px; }
          
          
          .widest{ width:100%; }
          
          
          
          
          /**** Homepage Elements *****/
          
          
          /**** body.SFNT #left-navigation {display:none;} *****/
          body.SFNT #main-content {padding-bottom:20px; width:698px;}
          body.SFNT #main-content h1, body.SFNT #main-content h2, body.SFNT #main-content h3 {margin-left:20px;}
                                      
          #header {                   
              background: url(images/header.jpg) no-repeat scroll center top transparent;
              height: 283px;
              width:700px;
              }
              #header a {
                  position:absolute;
                  width:700px; height:283px;
                  }
              #header a span{
                  display:none;
                  }    
          
          
          #free-shipping {
              background: url(images/shipping-banner.jpg) no-repeat scroll center top transparent;
                  display: inline;
                  float: left;
                  height: 62px;
                  margin: 20px 0 10px;
                  width: 700px;
              }
              #free-shipping a {
                  position:absolute;
                  width:940px; height:46px;
                  }
              #free-shipping a span{
                  display:none;
                  }    
              
              
          #left-ad {
              background:transparent url(images/left-ad.jpg) top no-repeat;
              width:460px; height:132px;
              padding-bottom:20px;
              margin-top:20px;
              float:left;
              }
              #left-ad a {
                  position:absolute;
                  width:460px; height:132px;
                  }
              #left-ad a span{
                  display:none;
                  }
                  
                  #right-ad {
                      background:transparent url(images/right-ad.jpg) top no-repeat;
                      width:460px; height:132px;
                      padding-bottom:20px;
                      float:right;
                      margin-top:20px;
                      }
                      #right-ad a {
                          position:absolute;
                          width:460px; height:132px;
                          }
                      #right-ad a span{
                          display:none;
                          }
          /*---- welcome banner ----*/
              #welcome-banner {
                  background: url(images/welcome-bg.jpg) no-repeat scroll left top transparent;
                  display: inline;
                  float: left;
                  height: 93px;
                  margin: 15px 0 0;
                  padding: 60px 0 0 20px;
                  width: 680px;
                  }
          
          
                  
                  #welcome-banner h1{
                          color: #523F29;
                          margin:0;
                          padding:0;
                          }
                   #welcome-banner p {
                      color:#6e6e6e;
                      width: 460px;
                      margin-top:10px;
                  }
                  #welcome-banner a {
                      color:#FFF;
                      text-decoration: underline;
                      margin-top:10px;
                      padding:0 20px 10px 20px;
                  }
          /*---- end welcome banner ----*/
                  
          
          
          
          
          /*---- end newsletter ----*/
                  #social-media {
                       background: url(images/socialMedia-bg.jpg) no-repeat scroll center top transparent;
                     display: inline;
                     float: left;
                     height: 162px;
                     margin: 15px 0 0 20px;
                     width: 220px;
                  }
                      
                      #social-media .social-icons {
                          display: inline;
                          float: left;
                          margin: 55px 0 0 17px;
                          padding:0;
                      }
          /*---- end newsletter ----*/
          
          
          
          
          /*---- sub pages ----*/
              #main-content h1 {
                  margin:20px 0 20px 10px;
                  color:#FFFv;
              }
          
          
          
          
              /*----- image machine css ----*/
          
          
          
          
              .thumbnails{
                   display: block;
                  margin: 0 0 0 60px;
                  padding: 0;
                  width: 230px;
                  }
          
          
                  .thumbnails li{
                      display:block;
                      float:left;
                      margin:5px 5px 0 0;
                      padding:0;
                      width:50px;
                      height:50px;
                      text-align:center;
                      border:1px solid #eeeeee;
                      cursor:pointer;
                      }
          
          
                  .thumbnails li span{
                      display:inline-block;
                      height:100%;
                      text-align:center;
                      vertical-align:middle;
                      }
          
          
                  .thumbnails li img{
                      vertical-align:middle;
                      }
          
          
              .swatches{
                  display:inline;
                  margin:0;
                  padding:0;
                  }
          
          
                  .swatches li{
                      display:block;
                      float:left;
                      margin:4px 4px 0 0;
                      padding:0;
                      width:50px;
                      height:50px;
                      text-align:center;
                      border:1px solid #eeeeee;
                      cursor:pointer;
                      }
          
          
                  .swatches li span{
                      display:inline-block;
                      height:100%;
                      text-align:center;
                      vertical-align:middle;
                      }
          
          
                  .swatches li img{
                      vertical-align:middle;
                      }
          
          
              .product-image-margin{
                  height:8px;
                  }
          
          
                  .closeup {
          
          
                     position:absolute;
                     top:150px;
                     padding:15px;
                     background:#fff;
                     border:3px solid #eaeaea;
                     text-align:center;
                     display:none;
                     z-index:9999;
                     min-width:274px;
                     min-height:274px;
                     border-radius:5px; 
                     -moz-border-radius:5px;
                     -webkit-border-radius:5px;
                     box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
                     -moz-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
                     -webkit-box-shadow:rgba(0,0,0, 0.75) 0px 0px 25px;
                  }
          
          
                  .closeup a {
                     cursor:pointer;
                     position:absolute;
                    right: -15px;
                      top: -15px;
                     z-index:9999;
                     color:#ff0000;
                  }
          
          
                  #closeup-caption {
                     margin:15px 15px 0;
                     padding:5px;
                     font:bold 14px Arial, Helvetica, sans-serif;
                     color:#fff;
                     background:#666;
                     -moz-border-radius:5px;
                     -webkit-border-radius:5px;
                     box-shadow:rgba(255,255,255, 0.75) 0px 0px 25px;
                     display:none;
                  }
                  .closeup_backing {
                     position:absolute;
                     left:0px;
                     top:0px;
                     background:#000;
                     background:rgba(0,0,0,.6);
                     filter:alpha(opacity=60);
                     width:100%;
                     z-index:100;
                  }
                  .CTGY .product-details .product-name,
                  .PLST .product-details .product-name,
                  .SRCH .product-details .product-name{
                          height: 3em;
                              line-height: 1.5em;
                              overflow: hidden;
          }
          
          
          #breadcrumbs li{
          float:left;
          margin-right:10px;
          }        
          
          
          #filter-items-container
          {
              color: #434343;
              font-size: 11px;
              font-family: Verdana, Arial, Helvetica, sans-serif;
          }
          #filter-items-container .per-page
          {
              position: relative;
              float:left;
              padding: 0 5px;
              margin-right: 5px;
              height: 22px;
              line-height: 20px;
          }
          #filter-items-container .per-page label
          {
              margin-right: 3px;
          }
          #filter-items-container .per-page select
          {
              padding: 0;
          }
          #filter-items-container .sorting
          {
              position: relative;
              float:left;
              padding: 0 5px;
              height: 22px;
              line-height: 20px;
          }
          #filter-items-container .sorting label
          {
              margin-right: 3px;
          }
          #filter-items-container .sorting select
          {
              padding: 0;
              font-size: 11px;
          }
          
          
          
          
          .page-links-previous, .page-links-next
          {
              text-decoration: none;
              line-height: 20px;
              padding: 0 8px;
              white-space: nowrap;
              font-weight: bold;
          }
          .page-links-previous
          {
              float: left;
              text-align: right;
          }
          .page-links-next
          {
              float: right;
              text-align: left;
          }
          .page-links-inactive
          {
              text-decoration: none;
              padding: 2px 3px;
          }
          .page-links-active
          {
              color: #434343;
              border-bottom: 2px solid #434343;
              font-weight: bold;
              text-decoration: none;
              padding: 1px 3px;
          }
          .page-links-deactivated
          {
              color: #999;
              text-decoration: none;
          }
          .page-links-deactivated:hover
          {
              color: #999;
              text-decoration: none;
              background: none;
          }
          .page-disp {
              display: block;
              line-height: 20px;
              float: left;
              text-align: center;
          }
          .page-links, .page-links a
          {
              color: #434343;
              font-size: 11px;
              font-family: Verdana, Arial, Helvetica, sans-serif;
          }
              .page-links
              {
                  margin: 0px;
                  text-align: right;
                  float: right;
              }
              
          .page-links-container
          {
              text-decoration: none;
              display:block;
              float: right;
          }
          .page-links-title
          {
              margin-top: 3px;
              position: relative;
              display:block;
              float:left;
          }
          
          
          .CTGY .product-details .product-name A:hover,
          .PLST .product-details .product-name A:hover,
          .SRCH .product-details .product-name A:hover {
          height: 3em;
          line-height: 1.5em;
          overflow: hidden;
          }
          Code:
          #global-mini-basket-container{
              display: block;
              float: right;
              line-height: 22px;
              padding: 4px 3px 0px 0px;
          }
          
          
          #global-mini-basket-hover-content
          {
              display: none;
              float: left;
              z-index:10;
              position: absolute;
              min-width: 250px;
              max-width: 410px;
              background: #FFF;
          }
          
          
          #global-mini-basket-hover-content table
          {
              display: table;
              border-collapse: collapse;
              border-spacing: 0px;
              border: 1px solid #666;
              background: #FFF;
          }
          
          
          #global-mini-basket-hover-content table thead th, #global-mini-basket-hover-content table tfoot td
          {
              color: #FFF;
              padding: 5px;
              font-weight: bold;
              font-size: 13px;
              background: #666;
          }
          
          
          #global-mini-basket-hover-content table tbody td
          {
              padding: 3px 5px;
              line-height: 14px;
              color: #000000;
          }
          
          
          #global-mini-basket-hover-content table tbody tr.on td
          {
              background: #EEE;
          }
          
          
          #global-mini-basket-hover-content table thead th a
          {
              color: #FFF;
          }
          
          
          #mini-basket 
          {
              line-height: 2px;
          }
          
          
          .minibasket_backing
          {
              display: none;
              position: absolute;
              left: 0px;
              top: 0px;
              width: 100%;
          }
          
          
          #global-mini-basket-hover-content .on a:link 
          {
            color: #000;
          }
          Ryan Guisewite
          Lead UI Developer / Miva, Inc.
          www.miva.com

          Comment

          Working...
          X