/*------------------------------------------------------------------------------------
  Project: iPack Framework (Responsive Layout)
  File: base.css
  Creator: Cory Perry (New Media - IPS Packaging)
  Created: 04/02/2013
======================================================================================
  This file styles all of the base design framework and style elements. 
  Fonts, Headers, Tables, Forms, Links, Framework and all generic elements are 
  included here.
  
  No cats were harmed during the creation of this file. #truth
======================================================================================
  Last Updated: 04/20/2016  -- CP
--------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------
  MEDIA QUERIES
--------------------------------------------------------------*/

/* 480px device width */
@media screen 
and (max-width: 700px)
{
	
body { padding: 1%; font-size: 0.85em; }

#primary { width: 100% !important;}
.infobar{ display: none; }
/* .index-content { display: none; } */
span.soldby_header { float: none !important; display: block; text-align: right; font-weight: bold; margin-bottom: 4px; }

/* header adjustments
-----------------------------------*/
header { width: 100%; height: auto; margin: 0 auto; background: none; }
header #logo { display: block; clear: both; }
header #logo img.logoimg { width: 90%; margin: 0 0 0 3%; }

h2.header-phone {
	margin: 8px 0 0 0;
	text-align: center;
}

#slider-static {display: none;}

/* top header cart notification box */
p.cart-notify {font-size: 0.7em; font-weight: bold; text-align: center;
padding: 1%; margin: 0; border-top: 1px dashed #cccccc; border-bottom: 1px dashed #cccccc;
background: #f5f5f5; }

.live-help { display: none; }

/* index product list adjustments */
h3.cat-header { width: 100%; padding: 2% 0 2% 0; margin: 0 0 5% 0 !important; background: #23619c; color: #FFF; text-align: center; }
h3.cat-header a {color: #FFFFFF !important;}
h2.page-head { font-size: 1.6em; display: block; margin-bottom: 4%; line-height: 1.2em; }
h3.page-head { font-size: 1.8em; display: block; margin-bottom: 4%; line-height: 1.2em; }

ul.index-list { font-size: 1.0em; font-weight: bold; list-style: none !important; margin: -13px 0 0 0 !important; }
ul.index-list li { margin: 0 !important; padding: 2% 0 2% 0; border-bottom: 1px solid #e0e0e0; list-style: none; text-align: left; }


/* content area adjustments
-------------------------------------------*/

#primary #prime-left { display: none; }
#primary #prime-right { display: block; width: 100%; margin: 0 auto; }
	
.one-half,.one-third, .two-third, .one-quarter, .three-quarter, 
.one-quarter-full, .three-quarter-full, .one-half-full, 
.one-third-full, .two-third-full, .one-third-full-items {
margin: 0 0 5% 0; width: 100%; float: none; display: block; }

.one-third-full-cart { display: block; width: 100%; float: none; }

div.account-form { display: block; float: none; width: 100%; padding: 0 0 0 3%; }

.rep-mobile { display: block; width: 95%; }

div.share { display: none; }

/* column lasts - clear right margins for alignment 
---------------------------------------------------------------*/
.one-half-last, .one-third-last, .one-quarter-last, .three-quarter-last, 
.three-quarter-full-last, .one-quarter-full-last, .two-third-full-last, 
.one-third-full-last, .last {
margin-bottom: 5%; width: 100%; float: none; display: block; }

#primary .one-half #prod-img { width: 90%; margin: 0 0 2% 0; }
#primary .one-half #prod-img img { width: 90%; max-width: 300px; max-height: 300px; }

/* category/subcategory
--------------------------------------------*/
.cat-row { width: 100%; border-bottom: 1px solid #cccccc; padding: 2%; margin: 0; }
.cat-row .cat-box { width: 100%; float: none; padding: 0; margin: 0 5% 8% 0; }
.cat-box img { width: 20%; height: 20%; padding: 2%; margin: 0 2% 0 0; max-height: 150px; max-width: 150px; }
.cat-box h4.cat-title { font-size: 1.2em; line-height: 1.4em; }
.btn#grid { width: 70px; font-size: 11px; }

table.boxes-list { display: none; }
div.mobi-prod-list { display: block; width: 100%; }


.prod-box {border-bottom: 1px solid #ccc; margin: 3% 0 3% 0;}
.prod-box img { width: 20%; height: 20%; max-height: 70px; max-width: 70px; }
.prod-box .prod-box-desc {
	float: none;
	display: block;
	width: 100%;
	font-size: 0.875em;
}
.prod-box .prod-box-info {
	float: none;
	display: block; 
	border: none !important;
	padding-left: 1%;
}

/* info tabs
-------------------------------------------*/
#tabs ul.tab-content { width: 100%; float: none; display: block; }

/* footer adjustments
---------------------------------------*/
#secondary-footer {display: none;}
footer { overflow: hidden; }
#footer-inner .column { width: 100%; display: block; padding: 1% 1%; margin: 0; text-align: center; }

/* hide bottom footer info for iOS */	
#footer-inner .column#right { display: none; }
#footer-inner img.crest, #footer-inner img.secure { display: none; }
#footer-inner #email-offer {display: none;}
p.foot-note { display: none; }

/*------------------------------------------------ */
div.process {display: none;}

.btn#small { width: 90px; font-size: 12px; }
.btn#medium { width: 120px; font-size: 12px; }
.btn#large { width: 150px; font-size: 15px; }

.tinynav { 
	display: block;
	width: 75%;
	padding: 2%;
	background: #f5f5f5;
}

select#tinynav1 {
	padding: 1%;
	font-size: 1.0em;
	font-weight: bold;
	margin: 2% auto 2% auto !important;
}

ul#topnav {display: none;}


#main-nav-inner {
	width: 100%;
	height: auto;
	overflow: auto;
	max-width: 480px;
	margin: 0 auto;}


/* ------- 01. Utility Nav ------- */

#utility-nav {
	width: 100%;
	display: block;
	position: relative;
}
#utility-inner {
	width: 100%;
	margin: 0;
}

#utility-inner ul.utility {text-align: center; padding: 1% 0 0 0;}
#utility-inner ul.utility li {display: inline; margin: 0 0 0 2%; font-size: 0.750em; font-weight: bold; color: #f5f5f5;}

}

/* 1024px device width */
@media screen 
and (min-width: 501px) 
and (max-width: 1024px)
{
	
body { padding: 1%; }

header #logo img.logoimg { width: 100%; max-width: 300px; }

/* live help box
-------------------------------------------------*/
header .live-help { width: 100%; max-width: 250px; }
header .live-help #live-left p { font-size: 1.0em; }
header .live-help #live-left h2 { font-size: 1.4em; }
header .live-help #live-right { float: right; }
header .live-help #live-right p { letter-spacing: normal; font-size: 0.8em; line-height: 1.0em; }

/* prod/cat adjustments */
#primary .one-half #prod-img { width: 92%; }

/* live help container styling 
--------------------------------------------*/
.live-help h3 {font-size: 1.0em !important;}
.live-help p.specialist { font-size: 0.875em; }
.live-help p.live-chat { font-size: 0.875em; }

.one-third-full-cart {
	width: 85%;
	max-width: 210px;
	padding: 0 1% 0 0;
}

#secondary-footer {display: none;}
#footer-inner .column { width: 30%; float: left; height: auto; overflow: hidden; margin: 2% 1% 0 0; padding: 1%; font-size: 0.7em; }

}