/*******************************************************************************
  QuickSite - layout_01.css
  Micah Carrick <email@micahcarrick.com>
  
  This stylesheet may be shared by multiple domains. It provides a basic block
  layout common to KWS Medical Supplies' websites. 
  
*******************************************************************************/

/* Troubleshoot layout probelms by drawing borders around major elements */
/*
DIV, UL { border: 1px solid silver; } 
LI { border: 1px solid green }
A { border: 1px solid blue; }
*/


BODY
{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px; 
  margin-bottom: 0px;
}

/* --- Styles for page head ---------------------------------------------------- 
The head is a DIV which should be positioned at the top of the page and appears
on all pages. It includes the site's logo, maybe a slogan, and some navigation
links.
*/

DIV.head {
  padding: 12px;
/*  height: 60px; */
}
DIV.head DIV.logo {
  display: block;
  float: left;
}
DIV.head DIV.logo IMG {
  margin-top: 5px;
}
DIV.head DIV.slogan {
  width: 550px;
  overflow: hidden;
}
DIV.head UL.top_links {
  display: block;
  float: right;
  list-style-type: none;
}
DIV.head UL.top_links LI {
  display: inline;
  font-weight:bold;
  font-size:11pt;
}
DIV.head DIV.top_phone {
    float: right;
    display: block;
}

/* --- Styles for breadcrumbs --------------------------------------------------
The breadcrumbs are wrapped in a DIV and then layed out using an unordered list.
This allows them to be styled as a block element under the page head yet still
make sense without styling.
*/

DIV.breadcrumbs_wrapper {}

DIV.breadcrumbs_wrapper UL.breadcrumbs {
  display: block;
  list-style-type: none;
  margin: 0px;
  padding: 8px;
}
DIV.breadcrumbs_wrapper UL.breadcrumbs LI {
  display: inline;
}

/* --- styles for common main page area ----------------------------------------
These styles layout the main content area, however, various pages might have
different content within the main parts of the content. This section only deals
with the parts of the main content area that are common accross all pages.
*/

DIV.float_wrapper { border: 1px solid white; } /* IE hack for float */

DIV.main {
  padding: 8px;
}

DIV.main DIV.content {
  float: right;
  width: 550px;
}

/* main navigation (category links) */

DIV.main DIV.nav_wrapper {
  margin-right: 560px;
}

DIV.main DIV.nav_wrapper UL.nav {
  display: block;
  list-style-type: none;
  margin: 0px;
  padding: 8px;
}

DIV.main DIV.nav_wrapper UL.nav LI {
  display: block;
  padding-left: 14px;
  margin-bottom: 8px;
  font-size:7pt;
}

/* --- styles for page foot ----------------------------------------------------
These styles layout the footer area. This area likely only contains the 
copyright information and maybe a link or two.
*/

DIV.foot {
  text-align: center;
  padding: 12px;
}

DIV.product_image_wrapper {
  width: 280px;
  float: left;
  text-align: center;
  overflow: hidden;
}
DIV.sell_block {
  float: right;
  width: 250px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
}
DIV.category_product_name {
  /* creates even look when some names are wrapped and some are not */
  height: 46px;
  width: 100%;
  overflow: hidden;
}
DIV.category_product_featured_spec {
	/*creates even look when some are wrapped and some are not*/
	padding-bottom:3px;
	height:15px;
	width:100%;
	overflow:hidden;
}
DIV.product_paragraphs p{
	font-size:11px;
}

DIV.paragraphs p{
	font-size:11px;
	padding-left:10px;
	color: #414345;
}

DIV.category_product_image_wrapper {
  /* creates even look when images are diff sizes */
  text-align: center;
  width: 100%;
  height: 125px;
  overflow: hidden;
}
DIV.category_front {
  float: left;
  width: 160px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  margin-right: 8px;
  margin-bottom: 16px;
  height: 180px; 
}
DIV.category_product {
  float: left;
  width: 160px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  margin-right: 8px;
  margin-bottom: 16px;
  height: 290px;
  border-bottom:1px solid silver;
  border-right:1px solid silver;
}
SPAN.price {
  display: block;
}

/*
These are the styles for the 3 types of status for a product. It's either
in stock, back ordered, or factory direct. This is used in category.html and
product.html
*/
SPAN.in_stock,  SPAN.not_in_stock, span.factory_direct {
  margin-right: 8px; /* horizontal spacing between stock and shipping */
}

/*-----SEARCH FORM (in left nav) ---------------------------------------------*/
DIV.search_wrapper {

}

FORM.search {
	text-align:left;
	padding-left:22px;
	margin:0px;
	padding-bottom:5px;
	padding-top:5px;
}

FORM.search input{
	vertical-align:bottom;
}

/* --- SHOPPING CART (in left nav) ------------------------------------------ */

IMG.cart_image {
  vertical-align: middle;
}

DIV#cartBlock {
  margin-bottom: 8px;
  text-align: center;
}

DIV#cartTitle {
  padding: 3px;
  margin-bottom: 4px;
  text-align: center;
}

DIV#cartLinks {
  padding: 3px;
  margin-top: 8px;
}

/* --- SHOPPING CART PAGE --------------------------------------------------- */

INPUT.cart_zip { width: 60px; text-align: center; }

TABLE.cart_items {
  width: 100%;
}

TABLE.cart_items TH { text-align: left; }
TABLE.cart_items .qty { text-align: center; }
TABLE.cart_items .amount { text-align: right; }
TABLE.cart_items .name { width: 75%; }
TABLE.cart_items .qty_input { text-align: center; width: 30px; }

TABLE.cart_totals {
  width: 100%;
}
TABLE.cart_totals TD { text-align: right; }
TABLE.cart_totals TD.cart_total_a { width: 90%; padding-right: 20px;}

BODY.monitorbloodpressure TABLE.cart_shipping {
  width: 100%;
}

TABLE.cart_buttons { width: 100%; }
TABLE.cart_buttons TD { 
  text-align: center; 
  padding: 5px; 
  width: 25%; 
}
TABLE.cart_buttons TD INPUT {
  font-size: 8pt;
  padding: 2px 4px 2px 4px;
}

/* --- CUSOTMER SERVICE (static page) ----------------------------------- */

DIV.customer_service TD,
DIV.customer_service TH {
	text-align: left;
	padding-bottom:10px;
}

DIV.customer_service TH {
	padding-right: 10px;
}

DIV.customer_service P,
DIV.customer_service LI,
DIV.customer_service TD,
DIV.customer_service TH {
	font-size:12px;
}

/* --- PRIVACY (static page) -------------------------------------------- */

DIV.privacy P {
	font-size:10px;
	padding-right:20px;
}