/*------------------------------------------------------------------------------------
  Project: iPack Framework Skin Theme /// iPack.com ///
  File: skin.css
  Creator: Cory Perry (New Media - IPS Packaging)
  Created: 08/01/2012
======================================================================================
  This file styles all of the skin specific layout for a particular skin.
  
  No cats were harmed during the creation of this file. #truth
======================================================================================
  Last Updated: 05/06/2013  -- CP
--------------------------------------------------------------------------------------*/

/*------------------------------------------------
 SET DEFAULTS FOR THIS SITE
-------------------------------------------------*/

/* set background header image (if needed)----------*/
header { background: url(/images/header_bg_dkblue.jpg) no-repeat top center; }

/* set footer border & bg color */
footer {
	border-top: 5px solid #00AA50;
	background: #f5f5f5; /* non css-3 browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e0e0e0));
	background: -moz-linear-gradient(top,  #f5f5f5,  #e0e0e0);
}


/* links
---------------------------------------------------*/
a:link,a:visited,a:hover,a:active,a:focus{ text-decoration:none; outline:none; -moz-outline-style:none; }
a{ color:#2464A0; }
a:hover{ color:#666666; }

/* footer links */
footer a:link {color: #666666; text-decoration: none;}
footer a:visited {color: #666666; text-decoration: none;}
footer a:hover {color: #287EAF; text-decoration: none;}
footer a:active {color: #287EAF; text-decoration: none;}

/* sidebar navigation links */
#accord-nav ul.side li a:link {color: #2464A0; text-decoration: none;}
#accord-nav ul.side li a:visited {color: #2464A0; text-decoration: none;}
#accord-nav ul.side li a:hover {color: #666666; text-decoration: none; }
#accord-nav ul.side li a:active {color: #666666; text-decoration: none;}


/* headers
---------------------------------------------------*/

/* default color */
h1,h2,h3,h4,h5,h6{ color: #2464A0; }

/* sidebar column header */
#accord-nav h3 {
	font-size: 1.1em; 
	font-weight: 600;
	letter-spacing: -.5px; 
	color: #FFFFFF; 
	background: #2464A0;
	padding: 8px 8px; 
	margin: 0 0 1px 0 !important;
}
/* sidebar column header */
h3.accord-nav-no {
	font-size: 1.1em; 
	font-weight: 600;
	letter-spacing: -.5px;
	color: #FFFFFF; 
	background: #777474; 
	padding: 8px 8px; 
	margin: 0 0 1px 0 !important;
}

div.leftnav_symlink {
	background: #777474; 
}

/* footer column headers */
#footer-inner h1.column-head { color: #2464A0; }


/* buttons
--------------------------------------------------*/
.btn { 
	background: #2464A0;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
.btn:hover { background: #444443; color: #FFFFFF; }

#request-quote-btn a.quote {
    background: url(/images/sidebar-quote-request-button.png) no-repeat top center;
}


/*------------------------------------------------
 SET NAVIGATION DEFAULTS FOR THIS SITE
-------------------------------------------------*/
/* set color of nav background */
#main-nav { 
	background: #2464A0;
}

/* set nav font colors */
ul#topnav li a.top { color: #ffffff; }
ul#topnav .sub ul li a { color: #2464A0; }
ul#topnav .sub ul li a:hover { color: #900; }

/*-----------------------------------------------
  LIVE HELP BOX
------------------------------------------------*/
header .live-help {
	background: #2464A0;
}

/*-----------------------------------------------
  SEARCH BOX
------------------------------------------------*/
#search-box { 
	background: #2464A0;
}

/*-----------------------------------------------
  INDEX PAGE LAYOUT
------------------------------------------------*/

/* top banner
----------------------------*/

#index-banner h2#slogan {
	font-size: 36px;
	line-height: 42px;
	color: #666666;
}
#index-banner h2#slogan span.red {color: #00AEEF;}


/* index boxes
----------------------------*/

.product-box {
	width: 100%;
	height: auto;
	overflow: auto;
	padding: 20px 0 20px 0;
	border-top: 1px solid #ccc;
}

/* left side of box */
.product-box .box-left {
	width: 70%;
}
.product-box .box-left h2 {
	font-size: 32px;
	margin: 0 0 15px 0;
}
.product-box .box-left p {
	font-size: 15px;
	font-weight: bold;
	line-height: 22px;
	color: #666666;
}
.product-box .box-left img.prod-img {
	width: 130px;
	float: right;
	margin: 0 5px 0 8px;
}

/* right side of box */
.product-box .box-right {
	width: 30%;
	float: right;
	border-left: 1px solid #ccc;
	padding: 0 0 0 15px;
}
.product-box .box-right ul.prod-list {
	font-size: 12px;
	font-weight: bold;
	margin: 0 0 15px 0;
	list-style: none !important;
}
.product-box .box-right ul.prod-list li {
	padding: 6px 0 6px 0;
	border-bottom: 1px solid #ccc;
}

/*-----------------------------------------------
  CAT/SUB-CAT PAGE LAYOUT
------------------------------------------------*/


/* category/subcategory pages 
------------------------------------------------------------*/

/*#primary .cat-row .cat-box {
	width: 130px; 
	height: 170px;
	float: left;
	padding: 10px 5px 0 5px;
	margin: 0;
	position: relative;
	border-left: 1px solid #cccccc !important;
	border-right: 1px solid #cccccc !important;
}*/

/* category section thumbnails,titles,buttons 
------------------------------------------------------------*/
/*.cat-box img {
	width: 70px;
	height: 70px;
	min-width: 70px;
	min-height: 70px;
	margin: 0;
	padding: 2px;
	border: 1px solid #cccccc;
	float: none;
	margin: 0 0 0 26px;
}
.cat-box h4.cat-title {
	font-size: 0.850em;
	line-height: 16px;
	font-weight: bold;
	letter-spacing: normal;
	text-align: center;
	display: block;
	margin: 0 0 8px 0;
}*/

/*-----------------------------------------------
  FOOTER
-------------------------------------------------*/

/* set border colors for footer columns */
#footer-inner .column-left {border-right: 1px solid #CCCCCC;}
#footer-inner .column#center {border-right: 1px solid #CCCCCC;}

/*-----------------------------------------------
  ACCOUNT SECTION STYLING
------------------------------------------------*/

ul.accountLinkList li a {font-weight: bold; color: #0175A1;}
/* set account section header colors */



/* iPack specific media query */
@media screen 
and (max-width: 500px)
{

header { background: none; }

/* category/subcategory pages 
--------------------------------------------*/
.cat-row {
	width: 100%;
	height: auto;
	overflow: auto;
	border-bottom: 1px solid #cccccc;
	padding: 20px 0 0 0; 
	margin: 0;
}

.cat-row .cat-box {
	width: 340px; 
	height: auto;
	overflow: auto;
	float: left;
	padding: 0;
	margin: 0 20px 30px 0px;
	position: relative;
	border: none !important;
}

/* category section thumbnails,titles,buttons 
----------------------------------------------*/
.cat-box img {
	width: 80px;
	height: 80px;
	min-width: 80px;
	min-height: 80px;
	margin: 0;
	padding: 2px;
	border: 1px solid #cccccc;
	float: left;
	margin: 0 12px 0 0;
}
.cat-box h4.cat-title {
	font-size: 1.0em;
	line-height: 16px;
	font-weight: bold;
	letter-spacing: normal;
	text-align: left;
	margin: 10px 5px 8px 0;
}
.cat-box a.btn {
	margin: 0 0 0 90px;
}

/* 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; }
.cat-box a.btn { margin: 0 0 0 90px; }
}