/* Theme name: slate */
@import url('../../css/buttons.css');

/* HTML tag styles */
BODY, TH, TD, OL, UL, LI, TT {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 15px;
	color: #333333;
	text-decoration: none;
}


PRE {
	font-family: monospace, courier, sans-serif;
	font-size: 11px;
	text-decoration: none;
}

A {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #0066cc;
	text-decoration: none;
}

A:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ef4135;
	text-decoration: none;
}

/* Theme specific styles */
.container {
	background-image: url(images/background.gif);
	background-repeat: repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
	overflow: auto;
}

.mainpage {
	width: 760px;
	background: #FFFFFF;
	border: 2px solid #333333;
	height: 100%;
}

.mainbanner {
	background-image: url(images/gradient.jpg);
	background-repeat: repeat-y;
	background-position: right;
	padding: 10px;
}

.search {
	text-align: center;
	width: 175px;
	vertical-align: middle;
	padding-bottom:3px;
	border-bottom: 1px dotted #bbbbbb;
	border-left: 1px dotted #bbbbbb;
}

.cart {
	text-align: center;
	vertical-align: middle;
	padding-top:10px;
	width: 175px;
	border-left: 1px dotted #bbbbbb;
}

.cart .price_mode {
	display: block;
	position: relative;
	top: 70px;
	left: -150px;
}

.main {
	background: #FFFFFF;
	border: 2px solid #333333;
}

.topbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	background-color: #0066cc;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	padding-left:10px;
	padding-top:2px;
	padding-bottom: 2px;
}

.header_span_short {
	display:inline;
	float: left;
	width: 40%;
}

.header_span_long {
	display:inline;
	float: right;
	width: 60%;
}

.account_detail {
	background-image: url(images/dropshadow.gif);
	background-repeat: none;
}

/* Top title box (contains page title & optional navigation button */
.title_box {
	padding: 4px;
	border:1px solid #cccccc;
	background-color: #f0f0f0;
	width: 98%;
	height: 15px;
}

.title_span {
	display:inline;
	width: 80%;
	float: left;
}

.page_button {
	display:inline;
	text-align: right;
	width: 20%;
	float: right;
}

/* iNet Menu Styles 
Use this to control menu's and custom links generated by iNet

You can use the following placeholders in your template to set where the generated menus will go
{CUSTOM_LINKS} - Custom menu
{MENUBOXES} - sagro standard menus
{STORE_MENUBOX} - Store custom menus (custom)
{FEATURED_MENUBOX} - Featured Products
{CATEGORY_MENUBOX} - Categories / Departments
{LIST_MENUBOX} - Shopping list / store menus

todo - describe id's to control  (either set in template - to contain multiple - or in some cases, set by sagro)

*/

/* Side Menu - Main Box */
#menubox .menu {
	display: block;
	margin: 0 0 10 0;
	border: 1px solid #333333;
	background: #ffffff;
	border-left: 0px;
}

/* Side menu - select box */
#menubox .menu SELECT {
	max-width: 140px;
}

/* Side Menu - Title */
#menubox H1 {
	background: #999999;
	color: #ffffff;
	font-size: 13px;
	font-weight: bold;
	padding: 5px;
	padding-left: 15px;
	margin: 0px;
	width: 160;
}

/* Side Menu  - List */
#menubox ul { 
	list-style-type: none;
	margin: 0px 0px 0px 0px;
	background: #ececec;
        	padding: 0px;
}

/* Side Menu - List Items */
#menubox ul li {
	 font-size: 10px;
      	 border-top: 1px solid #cecece;
}

/* Side Menu - Links */
#menubox ul li a {
	font-size: 10px;
	color: #0066cc;
	text-decoration: none;
	font-weight: bold;
	display: block;
	width: 160;
	padding: 3px 3px 3px 10px;
	margin: 0px;
}

/* Side Menu - Link Hover */
#menubox ul li a:hover {
	font-size: 10px;
	color: #0066cc;
	background: #FFFFFF;
}

/* Side Menu - Highlighted Links */
#menubox .menuboxhighlight {
	border-bottom: solid 3px #0066cc;
}

#menubox P {
	text-align:center;
	margin: 0;
}

#menubox .blank {
	border-top: 0px; 
	list-style-image: none;
}

/* Top Menu - Main Box */
#custom_links .menu{
	display:inline;
	clear: right;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Top Menu - Title */
#custom_links H1, #custom_links P {
	display: none;
}

/* Top Menu - List */
#custom_links ul {
	float: right;
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 0;
}

/* Top Menu - List Items */
#custom_links ul li {
	float: left;
	color: #FFFFFF;
	margin: 0 10 0 0;
}

/* Top Menu - Links */
#custom_links ul li a {
	color: #FFFFFF;
}

/* Top Menu - Link Hover */
#custom_links ul li a:hover {
	color: #cccccc;
}

#custom_links form { display: inline; }

#custom_links form input {
  float: right;
  margin: 0;
  height: 15px;
  margin-left: 10px;
  font-size: 14px;
}

#custom_links form button {
  border: 0;
  float: right;
  margin: 0;
  height: 15px;
  font-size: 9px;
}

/* Featured products box (within a side menu) */
#feature_box .product {
	text-align: center;
}

/* Featured products box - Price */
#feature_box .product_price {
	padding-top: 10px;
	color: #666666;
	font-size: 19px;
}

/* Featured products box - Product Name */
#feature_box .name {
	font-weight:bold;
	padding-top: 5px;
	padding-bottom:5px;
}

/* Also available are #feature_box .thumbnail and .form */

/* iNet form elements */

.button, .smallbutton, .selectbox, .smallselectbox {
	font-size: 10px;
}

.textbox, .smalltextbox { 
	font-family: monospace;
}

/* Text areas */
.textarea{
	background-color:#e8f2f9;
}

/* Password Entry Text Boxes */
.password {
	background-color:#ffeeee;
	font-family: monospace;
}

/* Date / Live search text boxes */
.formbox{
	font-family: monospace;
}

/* iNet display elements */

/* Job / store switcher */
.switch_status_store, .switch_status_job {
	display: block;
	text-align: right;
}


/* Price */
.product_price {
	color: #666666;
	font-size: 19px;
}

/* Generic box/container used to group elements within iNet */
.generic_box  {
	background-color:#ffffff; 
	border:1px solid #cccccc;
	/* breaks things??? width: 98%; */
}

/* Tool tips that appear when mouse hovers over an element */
.tooltip {
	background-color: #ffffff;
	border: 1px solid #333333;
	padding: 2px;
}

/* Order header information (appears as popup window) */
#order_details .generic_box {
	background-color: #f0f0f0;
	border:1px solid #cccccc;
}

/* Generic Labels */
.celltext {
	font-size: 11px;
	line-height: 15px;
	color: #333333;
	text-decoration: none;
}

/* Generic Data */
.celldata {
	font-size: 11px;
	line-height: 15px;
	color: #333333;
	text-decoration: none;
}

/* Highlighted Data */
.cellhighlight {
	font-size: 11px;
	line-height: 15px;
	font-weight: bold;
	color: #174b7f;
	text-decoration: none;
}

/* Results List (Table)*/
.list_container  {
	background-color:#ffffff; 
	border:1px solid #cccccc;
	width: 98%;
}

/* Results List (Even Rows) */
.list {
	font-size: 11px;
	line-height: 15px;
	color: #333333;
	background-color:#ffffff;
}

/* Results List (Odd Rows) */
.listodd {
	font-size: 11px;
	line-height: 15px;
	color: #333333;
	background-color:#eeeeee;
}

/* Results List (Highlighted Rows) */
.listhighlight{
	color:#ffffff;
	background-color:#7da7d9;
	font-size: 11px;
}

/* Results Lists - Header Row */
.list_heading, .list_heading A, .list_heading TD {
	FONT-SIZE: 11px;
	COLOR: #ffffff;
	FONT-FAMILY: Arial;
	BACKGROUND-COLOR: #0066cc;
	font-weight:bold;
}

/* Results List Navigation  */
.page_links { }

/* Results List Navigation - Active Page, forward & back buttons */
.page_links_on, .page_links_on:hover {
	font-size: 12px;
	font-weight: bold;
}

/* Page Titles */
.title {
	color:#174b7f;
	font-size: 15px;
	font-weight: bold;
}

/* Messages */
.message {
	color:#ef4135;
	font-size: 12px;
	font-weight: bold;
}

/* Label for required fields */
.required_field {
	font-weight: bold;
}

/* Product & Category Names (Typically are links to view detail)*/
.category_link, .product_link, .shipping_name, .category_list H1 {
	color:#666666;
	font-size: 12px;
	font-weight: bold;
}

/* Product & Category Link mouseovers */
.category_link:hover, .product_link:hover {
	color:#ef4135;
	font-size: 12px;
	font-weight: bold;
}

/* Horrizontal Rule (line/seperator) */
.hr { 
    border-bottom: solid 1px;
    color: #333333;
    padding: 4px;
}

.category_list {
   border-spacing: 15px;
   border-collapse: expression('separate', cellSpacing = '15px'); /* border-spacing for IE */
}

.category_list .image img {
	float: left;
	border: 1px solid #cccccc;
	margin-right: 10px;
}

/* Catalog - List of departments, classes, finelines */
.category_list_T {
	border-spacing: 3px;
   	border-collapse: expression('separate', cellSpacing = '3px'); /* border-spacing for IE */
}

.category_list_T TD {
	background: #ffffff;
	border: 1px solid #cccccc;
}

.category_list_T TD:hover {
	background-color: #eeeeee;
}

/* Customize of thumbnails in product listings*/
.producttable .product_thumbnail {
	text-align: center;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	padding: 5px;
}

/* Product Listings */
.producttable TD, .product_list, .product_list_detailed {
	padding: 5px;
}

/* Product links for product listing pages */
.product_list .product_link, .shipping_name {
	float: left;
	width: 68%;
}

/* Descriptions for product listing pages */
.product_list .product_description {
	width: 68%;
	float: right;
}

/* Purhcase buttons and pricing for product listing pages */
.product_list .product_price, .product_list .product_form, .shipping_price {
	float: right;
	width: 13%;
	text-align: center;
	align: center;
}

/* Thumbnail images on product listing page */
.product_list .product_thumbnail {
	float: left;
	clear: left;
	width: 13%;
	overflow: hidden;
}

/* Images on product listing page (detailed mode) */
.product_list_detailed .product_image {
	float: left;
	width: 39%;
	overflow: hidden;
}

/* Product details on product listing page (detailed mode)*/
.product_list_detailed .product_data {
	float: right;
	background: #ffffff;
	width: 59%;
}

/* Purhcase buttons and pricing for product listing pages (detailed mode) */
.product_list_detailed .product_form, product_list_detailed .product_price {
	float: right;
	width: 25%;
	text-align: center;
}

/* Purchase buttons on product detail page */
.product_detail .product_form {
	float: right;
	width: 40%;
	text-align: center;
}

/* Product links on product listing pages (detailed mode) */
.product_list_detailed .product_link {
	width: 75%;
	float: left;
}

/* Labels for inventory options/data when viewing product lists & detail */
.product_list_detailed .label, .product_detail .label {
	width: 40%;
	float: left;
	clear: left;
}

/* List of stores/locations when displaying quantity available */
#locationtable ul li {
        list-style-type: none;
        clear: left;
        margin-left: 10px;
        white-space:nowrap;
}

/* List of stores/locations when displaying quantity available - Store names */
#locationtable label {
        width: 40%;
        clear: left;
        float: left;
        padding-right: 10px;
}

/* List of stores/locations when displaying quantity available - Active Store */
#locationtable .active {
        font-weight: bold;
        color: #174b7f;
}

/* Seperator line / spacing between products in a list.*/
.product_list_seperator, .product_multi {
	border-bottom: 1px solid #cccccc;
}

/* iNet 1 style product grid display, and description for multi-item style products. (in multi-item group mode) */
.product_list_detailed .product_grid, .product_multi .description {
	float: left;
	text-align: left;
}

/* Purchase buttons for multi-item style products (in multi-item group mode) */
.product_multi .form {
	float:right;
}

/* Catalog - search refining */
#search_refine {
	display: block;
}

/* Catalog - search refining - Button to refine search results */
#search_refine button {
	width:100%;
	border: 1px solid #333333;
	background-color: #cccccc;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

/* Catalog - search refining - box containing options */
#search_refine div.refine_box {
	width:96%;
	padding: 4px;
}

/* Catalog - search refining - List of options */
#search_refine UL {
	list-style-type:none;
	margin: 0;
	padding: 5px;
	display:block;
}

/* Catalog - search refining - List Items */
#search_refine LI {
	width: 48%;
	float: left;
}


/* Recently viewed items - main box */
#recently_viewed .recently_viewed{
	text-align: left;
	border-top: 1px dotted #333333;
	width: 98%;
	margin-top: 10px;
	padding: 5px;
}

/* Recently viewed items - Product */
#recently_viewed .recent_product {
	float: left;
	text-align: center;
	width: 24%;
	padding: 0px;
	margin: auto;
	height: 100%;
	padding-top: 10px;
}

/* Recently viewed items - Price */
#recently_viewed .product_price {
	font-size: 11px;
}

/* Revently viewed items - title */
#recently_viewed H1 {
	color:#999999;
	font-size: 15px;
	font-weight: bold;
	display:inline;
	clear:right;
}

#checkout_position {
	width: 98%;
	margin: 5px 0 0 0;
}

#checkout_position .checkout_step {
	float: left;
	width: 24%;
	padding: 2px;
	margin: 0px;
	border-top: 2px solid #cccccc;
}

#checkout_position .complete_step {
	border-top: 2px solid #000000;
}

#checkout_position .active_step {
	border-top: 2px solid #7da7d9;
	color: {TABLE_HIGHLIGHT_ROW};
	font-weight: bold;
}

.up_sell_products .related_table TD, .cross_sell_products .related_table TD {
	padding: 6px;	
}


/***********************/
/*    HELPER CLASSES   */
/***********************/

.clear:after {
  height: 0px;
  clear: both;
  display: block;
  visibility: hidden;
  content: ".";
}
.clear {
  display: inline-block;
}
/* start non ie/mac css \*/
* html .clear {
  height: 1%;
}
.clear {
  display: block;
}
/* end non ie/mac css */

.clear-simple {
  clear: both;
}

.hide {
  display: none;
}