/* 
css styles for the eShop front end
Created by Greg Palmer for Bluestone Creative Ltd
07/05/2008
*/

.formTextField		{clear: both; display: block;}
.formTextField label	{width: 145px; float: left;}
.formTextField input	{width: 250px; float: left;}
span.checkoutTerms	{clear: both; display: block;}

/* Sub Category Display */
.eshopLabel                       {display: inline;}

.eshopRadio                       {display: inline; width: auto; margin-right: 2px;}

.eshopButton                      {display: inline; width: auto;}

.eshopTextInput                   {display: inline; width: 200px;}

.subCat                           {display: inline; float: left; width: 120px; text-align: center;}
.subCat img                       {border: none;}

.subCatsContainer                 {}
/* End of sub category display */

.discountName                     {margin-right: 5px; font-weight: bolder;}

.discoutnDesc                     {}

.mimicLink                        {text-decoration: underline; font-weight: bolder; cursor: pointer; color: blue;}

.ClearingDiv                      {clear: both;}

.searchProductContainerFeatured,.searchProductContainer {float: left; display: inline; width: 300px; border: 2px solid #ccc; border-bottom: 4px solid #ccc; background: #fff; padding: 5px; margin: 5px; height: 150px; overflow: hidden;}
	
.searchImageContainer { float: left; display: inline; height: 120px; padding: 5px 10px 5px 0; margin-right: 10px; width: 80px; border-right: 2px solid #ccc;}

div.searchTitleContainer  a{ font-size: 130%; font-weight: bold; }

.pagination {clear: both;}

.searchDetailsContainer           {display: inline; float: left; padding: 5px; width: 180px;}

.searchTitleContainer a           {font-size: 1.2em; font-weight: bolder; color: #FF9900;}

.searchDescContainer              {}

.searchMoreDetailsContainer       {display: inline;	float: left; width: 90px;}

.searchStockContainer             {}

.searchPriceContainer             {padding-left: 5px;}

.searchRatingContainer            {}

.productRatingContainer           {display: inline; float: right;}

#mainProductsContainer	{clear: both;}

#productContainer                 {padding: 5px; width: 100%;}

#productTitleContainer            {width: 100%; font-weight: bolder; font-size: 1.2em; color: #FF9900;}

#productManufacturerContainer     {width: 100%; font-weight: bolder; font-size: 1.0em; color: #999;}

#productImagesContainer           {display: inline; float: left; width: 230px; text-align: left;}

#productMainImageContainer        {float: left; padding: 5px; width: 160px; height: 160px; text-align: left;}

#productThumbImageContainer       {display: inline; float: left; padding: 2px; width: 49px; height: 160px;}

.thumbImage                       {margin-bottom: 2px; width: 49px; height: 49px; border: solid 1px #CCC; text-align: center;}

.thumbImageStyle                  {vertical-align: middle;}

#productPricesContainer           {display: inline; float: right; width: 300px; text-align: right;}

.incVatPrice                      {font-weight: bolder;	color: red;}

.exVatPrice                       {font-weight: bolder; color: red;}

.stockCount                       {font-weight: bolder; color: #000;}

.beforeDiscountPrice              {text-decoration: line-through; color: #000;}

#productDescContainer             {width: 100%; font-weight: normal; font-size: 1.0em; color: #000;}

.productOptionDesc                {font-size: .9em;}

.productOptionContainer           {width: 300px;}

.productOptionNameContainer       {display: inline; float: left; width: 150px;}

.productOptionItemContainer       {display: inline; float: left; width: 150px;}

.productDisplayTextBox            {width: 150px;}

.productDisplayDropDown           {width: 154px;}

#basketSummaryContainer a         {text-decoration: none; color: blue; font-size: 1em; font-weight: normal;}

.cartTableHeaderRow               {background-color: #FFCC00;}

.cartTableAltRow                  {background-color: #FFFFCC;}

.itemHeader                       {text-align: left;}

.vatHeader                        {text-align: right;}

.priceHeader                      {text-align: right;}

.lineTotalHeader                  {text-align: right;}

.itemDelCell                      {text-align: center;	vertical-align: top;}

.itemNoCell                       {text-align: center; vertical-align: top;}

.qtyCell                          {text-align: center; vertical-align: top;}

td.qtyCell input                  {width: 2em;}

input.qty 			{width: 2em!important;}

input.addButton 			{width: 5em!important;}

.itemCell                         {text-align: left; vertical-align: top;}

.vatCell                          {text-align: right; vertical-align: top;}

.priceCell                        {text-align: right; vertical-align: top;}

.lineTotalCell                    {text-align: right; vertical-align: top;}

.basketPrice                      {text-align: right;}

.basketTotal                      {text-align: right; font-weight: bold;}

.basketTotalsTitle                {text-align: right; font-weight: bold;}

/* Checkout Address Form Styles */
.addressRow                       {width: 430px; clear: both;}

.buttonRow                        {clear: both; width: 450px; text-align: center;}

.addressFieldLabel                {display: inline; float: left; padding: 5px; width: 120px; text-align: right;}

.addressField                     {dispaly: inline; float: left; width: 300px;}
.addressField input               {width: 250px;}
/* End of Checkout Address Form Styles */

.checkoutTerms, .checkoutTerms a  {size: 0.9em; color: #A3A3A3;}

/* order view styles */
.orderTitle                       {width: 100%; background-color: #666; text-align: center; font-weight: bolder; color: #FFF;}

.orderItem                        {width: 100%; background-color: #FFF; color: #000;}

.itemOptions                      {font-size: 0.8em;}

.orderNotes                       {width: 382px;}

#iconSetContainer                 {padding: 5px; width: 700px;}

#orderDisplayContainer            {padding: 5px; width: 510px;}
#orderDisplayContainer table      {width: 100%;}

#orderNoContainer                 {display: inline; float: left; margin-right: 1px; padding: 2px; width: 161px; border: solid 2px #000;}

#orderDateContainer               {display: inline; float: left; margin-right: 1px; padding: 2px; width: 161px; border: solid 2px #000;}

#orderStatusContainer             {display: inline; float: left; padding: 2px; width: 161px; border: solid 2px #000;}

#paymentAddressContainer          {display: inline; float: left; width: 246px; border: solid 2px #000; margin-right: 1px; padding: 2px;}

#shippingAddressContainer         {display: inline; float: left; padding: 2px; width: 246px; border: solid 2px #000;}

#paymentDetailsContainer          {padding: 2px; width: 502px; border: solid 2px #000;}

#orderItemsContainer              {padding: 2px; width: 502px; border: solid 2px #000;}

#orderNotesContainer              {display: inline; float: left; margin-right: 1px; padding: 2px; width: 386px; border: solid 2px #000;}

#orderTotalsContainer             {display: inline; float: left; padding: 2px; width: 106px; border: solid 2px #000;}

#subTotalContainer                {width: 100%; text-align: center;}

#deliveryContainer                {width: 100%; text-align: center;}

#vatContainer                     {width: 100%; text-align: center;}

#totalContainer                   {width: 100%; text-align: center;}

.orderAddressField                {display: block; font-size: 1.2em;}
/*end of order view styles */

/*
********************************************************
************eShop Gallery Lightbox Styles****************
********************************************************
*/
#jquery-overlay                   {position: absolute; z-index: 90; top: 0; left: 0; width: 100%; height: 500px;}

#jquery-lightbox                  {position: absolute; z-index: 100; top: 0; left: 0; width: 100%; text-align: center; line-height: 0;}
#jquery-lightbox a img            {border: none;}

#lightbox-container-image-box     {position: relative; margin: 0 auto; width: 250px; height: 250px; background: #FFF;}

#lightbox-container-image         {padding: 10px;}

#lightbox-loading                 {position: absolute; top: 40%; left: 0%; width: 100%; height: 25%; text-align: center; line-height: 0;}

#lightbox-nav                     {position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%;}
#lightbox-container-image-box > #lightbox-nav{left: 0;}
#lightbox-nav a                   {outline: none;}

#lightbox-nav-btnPrev, #lightbox-nav-btnNext{display: block; width: 49%; height: 100%; zoom: 1;}
#lightbox-nav-btnPrev             {display: inline; float: left; left: 0;}
#lightbox-nav-btnNext             {display: inline; float: right; right: 0;}

#lightbox-container-image-data-box{margin: 0 auto; padding: 0 10px 0; width: 100%; font: 10px Verdana, Helvetica, sans-serif; background: #FFF; line-height: 1.4em; overflow: auto;}
#lightbox-container-image-data    {padding: 0 10px; color: #666;}
#lightbox-container-image-data #lightbox-image-details{display: inline; width: 70%; text-align: left;}

#lightbox-image-details-title     {display: block;}

#lightbox-image-details-caption   {display: block; font-weight: bold;}

#lightbox-image-details-currentNumber{display: block; clear: left; padding-bottom: 1.0em;}			

#lightbox-secNav-btnClose         {display: inline; float: right; width: 66px; padding-bottom: 0.7em;}