@import url('../css/main-menu.css'); /* Import Menu Stylesheet */
	@import url(http://fonts.googleapis.com/css?family=Open+Sans|Damion);
	/*----------------------------------------------------------------------*/
	
	/* #Site Styles
	================================================== */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	article, aside, details, figcaption, footer, header, section, figure, hgroup, menu, nav{
		display: block; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
	:focus { outline:0; }
        

/* #Basic Styles
================================================== */
	html, body {height:100%; /* for Sticky footer */}
	body {
		font: 14px/22px 'Open Sans', Trebuchet MS, Helvetica, Arial, Helvetica, sans-serif;
		color: #3b454d;
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: 100%;
		line-height: 20px;
		background-color:#FDFCF4;
		overflow-x: hidden;
    }

	a, a:visited, a:link { text-decoration:none;}
	/* WRAPPER */ 
	#wrap { display: table;table-layout: fixed; margin: 0 auto; position: relative; padding: 0; background: #fff; clear:both; overflow:hidden; width:100%; height:100%; }
	#wrap p img { height:auto;}
    #site-title { position: relative; float: left; top: 3px; font-size:1.1em; font-weight: bold; /*width: 160px;*/ }
	#site-title a { color:#3B454D;}
	#site-title small { display:block; margin-top:5px;}
	#nav { padding-top: 30px; }
	#main-content.container { padding-top:35px;}
	#special {list-style-image:url(../images/li-check.png);overflow:auto;}
	#special li{float: left;margin-left: 35px;padding-left:0px; font-size:1em; font-weight:bold;}
	#prodImg {width: 480px; margin-top: 16px;}
	#orderTable{ min-width: 280px;max-width: 700px;}
	/* order type selection: new/existing user, pickup/delivery, want now or time */
	.part{float: left;width: 300px; height: 500px; margin: 10px 20px;overflow:hidden;}
	
	/* HEADER  */
	#header {width: 100%; padding: 2px 0 2px; overflow:hidden; height:100px; display: table-row;}
	#header, #header.sticky #nav-wrap{
	background: #FC6;
	opacity: 0.95;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFE10E',GradientType=0); /* for IE6-9 */
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#FC6)); /* Safari, older version */
	background: -webkit-linear-gradient(top, #ffffff, #FC6); /* Safari, newer version */
	background: -moz-linear-gradient(top, #ffffff,  #FC63); /* for firefox 3.6+*/ 
	background: linear-gradient(to bottom, #ffffff, #FC6); /* Eventual CSS3 standard? */
	z-index:99; 
	}
	#header.sticky {
          position: fixed; /* must set to fixed fro all browsers */
	  top: 0px;
	  transition: all .125s ease-in-out;
          height: 85px;
	}
	#header > div { width: 100%;}	
	.logo { height: auto; float: left; line-height:12px;}
	.logo img { height: 90px; width: 274px; margin-top: 5px;}
	
	.logo-sticky { display:none; z-index:99999; }
	#nav-wrap .container {margin: 0; padding-right:0px; width:100%;}
	#topRight {position: relative; float: right; top: 0px; margin-right: 0px;}
	/* --------------------- */
	/* FOOTER, set to 1px height for fix-height sticky footer */
	#footer {width: 100%; height: 1px; background: #ccc; text-align: left; display: table-row;}
	#footer > p{ margin: 10px 8px;}
	#footer .widget ul.menu li:after { display:none; content:"";}
	#footer .widget ul.menu li { border:none;}
	#footer .footer-in .widget ul.menu li:hover { background:none;}	

    #leftCate {display: table-cell; width:200px; text-align:left;}
	#leftCate ul {list-style-type:none;}
	#leftCate li {display: block;list-style: none; margin-right: 5px; border-bottom:1px dotted #FF0000;}	
	#leftCate li a {text-transform:uppercase; font-size:1em; font-weight:bold;}	
	#cateImg li {display: inline-block;width: 155px; cursor:pointer;}
	#cateImg img {width: 150px; border: 1px solid;}
	#cateImg span{float:none;position: relative;width:144px; height:20px; top:-26px;font-weight:bold; overflow:hidden; color: red; background-color:#FFC;margin-left: 2px; font-size:0.92em; white-space:nowrap;}
    #mainMenu {/*width:820px;*/ text-align:left;}
   .mainContent {
    margin: -70px 0 0 0;
    width:95%;
    padding: 50px 20px 10px 20px;
    min-height: 300px;
    clear: both;
   }
   #main-content{float: left; position: relative;margin-left: 10px; text-align: left; display: table-row; height: auto;}
   .linearBG
	{
		width:260px;display: block;
		background-color: #b4fb57; /* This color gets used if the gradients below fail */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #b4fb57)); /* Safari, older version */
		background: -webkit-linear-gradient(top, #ffffff, #b4fb57); /* Safari, newer version */
		background: -moz-linear-gradient(top, #ffffff, #b4fb57); /* Firefox */
		background: linear-gradient(to bottom, #ffffff, #b4fb57); /* Eventual CSS3 standard? */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b4fb57',GradientType=0 ); /* IE6-9 */
		 float: right;
	}
	
	.QR_box{position:absolute; top:0px; left: 450px; width:90px; z-index: 9999;}
/* --------------------- */
	
	@media only screen and (min-width: 960px) {
	#header.sticky #site-title { display:none;}	
	#header.sticky #nav-wrap, #header.sticky.hi-header #nav-wrap { 
	width:100%; border-bottom:1px solid #e9e9e9; box-shadow:0 0 3px rgba(0,0,0,0.21); 
	z-index:9999;display:block; position:fixed;
	/*background:rgba(255,255,255,0.97);*/
	height:80px; padding:0; left:0; top:0; -webkit-animation: header-anim .2s ease .027s both; animation: header-anim .2s ease .027s both; transition: background 0.3s ease-in-out 0s;
	}
	#header.sticky #nav-wrap:hover { background:#fff;}
	#header.sticky #nav-wrap .container { width:88%; float:none; padding:0 30px 0 300px; position:relative; margin-left:auto; margin-right:auto; }
	#header.sticky .logo-sticky { display:block; position:fixed; top:0; max-width:280px; -webkit-animation: fade-anim .3s ease .044s both; animation: fade-anim .3s ease .044s both;}
	#header.sticky .logo-sticky img.img-logo-w3 { height: 80px; width: auto; margin-top: 10px; display:inline-block; }
	#header.sticky .logo-sticky span {font-size: 22px;line-height: 60px;}
	#header.hi-header, #header.hi-header .logo .img-logo-w1  { position:fixed; height:0; padding:0; background:none; border:none; display:none;}
	#header.sticky.hi-header, #header.hi-header .logo-sticky, #header.hi-header .logo-sticky img.img-logo-w3 { display:block; -webkit-animation: fade-anim .3s ease .044s both; animation: fade-anim .3s ease .044s both; }
	/* make the menu bar move to top a bit */
	#header.sticky #nav {position: relative; top: -30px;} 
	/* Side Nav */
	
	#side-content { float:right;}
	#side-nav { float:left; z-index:99;}
	#side-nav ul { padding:10px 20px; background:#fff;  border:3px solid #f3f3f3; list-style:none;}
	#side-nav ul li { border-bottom:1px solid #eaeaea; padding:0; margin:0;}
	#side-nav ul li:last-of-type { border-bottom:0 none;}
	#side-nav ul li ul { border: none; padding:0; padding-left:20px; margin:0; background:#fdfdfd; display:none;}
	#side-nav a { display:block; color:#575757; padding:14px 0; text-transform:capitalize; font-size:13px; font-weight:400; letter-spacing:0.2px;  }
	/*#side-nav a:after { float:right;  font-family: 'FontAwesome'; font-size:10px; color:#878787; content: "\f054"; speak: none; font-style: normal; font-weight: normal; text-transform: none; line-height: 1;	-webkit-font-smoothing: antialiased;}*/
	#side-nav a:hover, #side-nav a:hover:after { color:#ff9900;}
	#side-nav li.current a, #side-nav li.current a:after { color:#0093d0;}
	#side-nav ul li ul li a { padding:10px 0; font-size:12px;}
	#side-nav ul li:hover > ul { display:block;}
	/*#site-title {width: 250px;}*/
	#orderTable{width: 700px;}
	.part{height: 500px;}
	#main-content.container { margin-left:10px;margin-right:10px;}
    #leftCate{margin-left: 15px;}
	}
/* end of 960px media */
	

	/* #Media Queries
	===============================================================================  */
	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
	#header { padding:10px 0;}
	
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select { min-width:90px; max-width:100%; }
	#menu-icon{display: none;}
	.part{height: 300px;}
	#main-content.container { margin-left:6px;margin-right:6px;}
	}

	/* iPad in portrait & landscape */
	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
	
	.sparallax .slide-image{background-attachment: local !important; background-size: auto!important;}
	.blox {background-attachment: local!important; background-size: auto!important; }
	#main-content.container { padding-left:20px;margin-left:0px;margin-right:3px;}
	.mapLoc {float: right; margin-right: 10px; padding-top: 15px; width: 500px;}
	}
	
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.blox {background-attachment: local!important; background-size: auto!important;}
	.plan-wrap { width: auto; }
	.logo img {width: 213px; height: 70px;}
	.part{height: 300px;}
    #leftCate{margin-left: 8px;}
	}
	
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	    #leftCate{margin-left: 5px;}
	}
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	#header { height: 80px; margin:0; }	
	.img-box { width: 360px; }
	.logo { text-align: center; float:none; margin-bottom:15px; width:100%; }
	.logo img {width: 150px; height: 49px;}
	#nav { display: none;width: 150px !important; }
	#wrap {width: 100%;}
	
	input[type="text"].header-search, input[type="text"].header-search:focus { width: 261px; margin-top: 10px; }
		
	.container { padding-left:1px; margin-left:0px;width: 460px; }
	.container h2 { font-size:1.1em !important; }
	.container ul, .container li { padding-left:1px; margin-left:0px; }
	#logo_top {width:50px;float: left; position:relative; margin:0;padding:0;}
	#nav-wrap {width: 100%; padding-right:0px; text-align:right;}
	#nav-wrap .container{text-align:left;}
	#main-content{margin-left: 1px;width:100%;}
	#menu-icon {box-shadow:none; }
	#logo_bottom {display: none;}
	#topRight {position: relative;float: right; top: -10px;}
    #site-title {top: 55px; font-size:1em; left: -50px;}

	#side-nav { float:none;}
	
	input[type="text"].header-search, input[type="text"].header-search:focus { float: none; display: inline; position: relative; z-index: 9; }	
		
	#header .img-logo-w1 { display:inline;}
	.logo a:active { opacity:1;}
	#special li{margin-left: 15px;}
	#description {width: 460px;}
	#orderTable{width: 100%;}
	.part{height: 300px;}
	#wrap > div {width: 99%;}
	#main-content.container { margin-left:3px;margin-right:3px;}
	.mapLoc {float: right; margin-right: 8px; padding-top: 15px; width: 450px;}
	}

/* iPhone 4s: 320ppi,iphone5: 320ppi, iphone6: 375, iPhone6p: 414*/	
	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
    #header .container, #nav-wrap div {margin-top: 0px;}
	#nav-wrap {float: left; height:35px;}
	#topRight {top: -55px; margin-right: 5px;}
	#site-title {top: 5px !important; text-align:left; left: 0px;}
	.logo {float:none; margin-bottom:5px; width:45px; }
	.img-box { width: 300px; }
	.container { padding-left:1px; margin-left:0px;width: 100%;; }
	h2 { font-size:1.2em !important; }
	.container ul, .container li { padding-left:1px; margin-left:0px; }
	#main-content{margin-left: 1px;width:100%;}
	#main-content.container { padding-top:10px;}
	#menu-icon {display: block !important;}
	#logo_bottom{display: none;}
	#description {width: 330px;}
	#prodImg {width: 99%;}
	.menuBox { /*width: 250px; height: 187px;*/ font-size: 1.1em; }
	#orderTable{width: 100%;}
	#orderTable input[type="text"]{min-width: 20px;max-width: 50px;}
	.option_box, .option_box table, .modalDialog{width: 100% !important;}
	.mapLoc {float: right;padding-top: 15px; width: 310px;}
	#leftCate{width:120px;}
	#mainMenu {width:100%;}
	.linearBG{ width:100%; float:none;}
	#special li{width: 100%;}
	#homeMenu li{background-color:#3399FF; color: white; width:100%; height:30px;margin-bottom:2px; padding-left:10px;}
	#homeMenu li:after { float:right; font-size:20px; font-weight:bold; content: "»  "; margin-right:20px;}
	#homeMenu li a{color: white; font-size:20px; width: 100%;}
	.QR_box{position:absolute; top:0px; left: 180px;}
	}
	
	@media only screen and (min-width: 1200px) {	
	#orderTable{width: 800px;}
	.part{height: 700px;}
	.logo {line-height: 20px;}
	section.container{width: 96%;}
	#main-content.container {  padding-left:20px;margin-left:0px;;padding-right:20px;margin-right:0px;}
	.mapLoc {float: right; margin-right: 30px; padding-top: 15px;}
	 } 
	
/* --------- MISC ------------*/
td{ vertical-align: top; /*padding-right: 10px;*/}

/******************************************************************
HEADLINES & TITLES
******************************************************************/

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4, 
h5, .h5 {
	font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
	font-weight:bold;
}


#header #bizName{font-size:1.2em; font-weight:bold;}
/* hide the company name when sticky class is appied */
#header.sticky #bizName{ display:none;}

.drop1 {
     text-shadow: 2px 2px 3px #6666FF;
     font: 20px Arial;
}

.drop2 {
     text-shadow: 1px 1px 0px #FFFFFF, 3px 3px 4px #666633;
     font: 20px Arial;
	 background:#CCFF99;
	 display: block;
	 text-align:center;
}


.logo h3, h2 {
	margin: 0 0 10px;
	font-size: 24px;
	text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #CDCCC6;
	text-transform: uppercase;
}
.logo h4, .container h4 {
	font-size: 16px;
	text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #CDCCC6;
	text-transform: uppercase;
	color: #9A9995;
}
#site-title_old {
		margin-bottom: 18px; /* for ie8 & below */
		margin-bottom: 1.1rem;
		font-family: "Damion", Georgia, "Times New Roman", Times, serif;
		font-size: 36px;
		font-weight: 400;
}

.modalDialog {
	position:absolute;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	background: rgba(166,166,255,0.8);
	z-index: 99999;
	opacity: 0.99;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: auto; /* none, visiblePainted,inherit */
}

modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 95%;/* 580px*/
	position: relative;
	margin: 2% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #ccc;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

.bigSize
{
    font-size: 1.3em; font-weight:bold;
}

.handCursor
{
     border: 0;
     cursor: pointer;
     cursor : hand; 
}
.round, #homeMenu li
{
    border:2px solid #3171ad;
    -moz-border-radius: 5px;
    border-radius: 5px; padding:2px; color:#3c556c; resize: none;
    overflow:hidden;
	font-size: 18px; font-weight:bold;
}

fieldset {
  background: #FCFCFC;
  border: 1px solid #DDDDD5;
  margin: 8px 0;
  padding: 0.5em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  min-width: 500px;
}

fieldset legend {
  display: block;
  font-size: 1em;
  background: #fff;
  border: 1px solid #ccc;
  padding: 0 0.4em 0 20px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  cursor : pointer;
  cursor : hand; /* hand is for backward compatible */
}

/*
** Collapsing fieldsets
*/
fieldset.collapsed {
  background: none;
  border-top-width: 0;
  border-left-width: 0;
  border-right-width: 0;
  margin-bottom: 0px;
  height: 1em;
  padding-left: 0em;
  padding-bottom: 16px;
}

fieldset.collapsed *, .hidden, .hide {
  display: none;
}

fieldset.collapsible legend 
{
  display: block;
  background: transparent url(../images/menu-expanded.gif) no-repeat scroll 5px 75%;
  text-decoration: none;
  font-weight: bold;
  background-color: #FCFCFC;
}

fieldset.collapsed legend 
{
  display: block;
  background: transparent url(../images/menu-collapsed.gif) no-repeat scroll 5px 75%;
}

fieldset legend:hover {
  background-color: #F7F7F7;
  cursor : pointer;
}
.flyOver {cursor : pointer;cursor : hand;} /* pointer is normal hand */
.flyOut {cursor : auto;} /*Browser default cursor (often an arrow). This is default */

.option_box
{
    position:absolute; 
    float:none; 
    display:none;
    min-height:120px;
    width:200px;
    color: Red;
    border:1px solid blue;
    background-color:#cccccc;
    font-weight:normal;
    padding-left:10px;
}

.red_color
{
    color: Red;
}
.blue_color
{
    color: #0ab1f0;
}
.text_right, .toRight
{
    text-align: right;
    white-space: nowrap;
}
.nowrap
{
    white-space:nowrap;
}

.trans {opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */}
.menuBox { list-style: none; vertical-align: top;
	height: 300px; width: 230px;
        display:inline-block;
        *zoom: 1;
        *display: inline;
        margin-right: 5px;}

.menuInfo { border: 1px dotted #FF0000; height: 300px; width: 230px; padding-left: 6px; overflow: auto;}
.menuButton{ position: relative; float: left; top: -15px; margin-left: 50px; background:#693; color: #fff !important;}
.menuButton:hover { background: #00d9ff; }
.title {font-weight: bold;}
.active{display: block;}
.menuCopy {display: block !important; padding: 10px 0 12px; margin:0;  border: 3px solid #a2a7b1; box-shadow:0 2px 12px rgba(0,0,0,0.082); background: #DDD;opacity:0.0; filter:alpha(opacity="00"); }
#menu-copy:hover{opacity:1.0; filter:alpha(opacity="100");}
/* mobile dropdown menu */
#menu-copy li{ padding-left: 5px;margin-bottom:2px; height:30px; width: 100%; background-color:#FC6;}
#menu-copy li a,#menu-copy li a:visited, #menu-copy li a:active, #menu-copy li a:link {color:#0ab1f0; font-size:18px; font-weight: bold; width:100%}

.btnBlue
{
    min-width:80px; min-height:25px; font-size:16px;color:#fff; cursor:pointer;    
    text-shadow: 1px 1px 1px #9e9e9e;filter: dropshadow(color=#9e9e9e, offx=1, offy=2);    
    background: #1E5799; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1E5799), color-stop(100%, #7db9e8)); 
    background: -webkit-linear-gradient(top, #1E5799, #7db9e8); 
    background: -moz-linear-gradient(top, #1E5799, #7db9e8);
    background: linear-gradient(to bottom, #1E5799, #7db9e8);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 );
    -moz-border-radius: 5px;
    border-radius: 5px; 
    padding:0px 1px;
}

.btnBlue:hover
{
    background: #95d757; 
    background: -moz-linear-gradient(top, #95d757 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95d757), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); 
    background: -webkit-linear-gradient(top, #95d757, #7db9e8); /
    background: linear-gradient(to bottom, #95d757, #7db9e8);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95d757', endColorstr='#7db9e8',GradientType=0 ); /* ie */
}

/* for hiding sticky banner */
.scrollbar-unstuck {
    -webkit-animation: slideOutUp .5s 1 forwards;
    /* animation: slideOutUp .5s 1 forwards; */
}

/* for showing sticky banner */
.scrollbar-stuck {
    -webkit-animation: slideInDown .5s 1 forwards;
    animation: slideInDown .5s 1 forwards;
}