/* The CSS selectors in the 'PAGE FORMATTING STYLES' section below override the selectors in the Bootstrap 3 CSS that have the same name. 
You can delete them if you want to use the default boostrap theme styles.
The definitions in the 'STRUCTURE STYLES' section on this file format the specific sections of the responsive design page areas. 
These are div sections inside of the bootstrap responsive structure and independent of the bootstrap CSS rules.

Note: The Nav Bar Formatting is in the section titled "Top Navigation Bar (Flex Nav)"*/

/* PAGE FORMATTING  STYLES */

body {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 1.42857;
	color: #333;
	background-repeat: repeat-x;
	background-position: center top;
	margin: 0px;
	padding: 0px;
	background-color: #E7E7E7;
}
a:link {
	color: #006699;
	text-decoration: none;
}
a:visited {
	color: #006699;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: underline;
}
input,
select,
textarea {
	font-size: 100%;
	color: #666666;
	background-color: #fff;
	border: 1px solid #CCCCCC;
	margin: 2px;
	padding: 5px;
	width: 100%;
	max-width: 600px;
}

input[type="image"] {
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}

input:focus {
	line-height: normal;
	background-color: #eeeeee;
	border: 1px solid #666;
}

textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  overflow: auto;
}

textarea:focus {
	background-color: #eeeeee;
	border: 1px solid #666;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}


input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
	text-align: left;
	width: 25px;	
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	max-width: 250px;

}

button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
/* END PAGE FORMATTING STYLES  */

/* STRUCTURE STYLES -- Formats the individual areas inside the responsive design */

/* if you don't find what you are looking for below, it is probably in the site_store_pro_responsive.css, site_store_pro_store_responsive.css file or a page specific CSS file.

Results Page = /store/store_results.php > site_store_pro_search_results_responsive.css
Item View Page = /store/item_view.php >  site_store_pro_shopping_cart_responsive.css
Shopping Cart Page = /store/shopping_cart.php > site_store_pro_product_view_responsive.css
...etc...

/* classes below format the main areas of the responsive design and are defined from the top of the page downward */



#top_nav_area {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: relative;
	z-index: 95;
	clear: both;
	width: 100%;
}

#site_header {
	min-height: 175px;
	margin-bottom: 0px;
	margin-top: 0px;
	background-color: #006699;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images_design/headerbanner.png);
	clear:both;
}

.site_header_content {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}


#logo_area {
	margin-left: auto;
	margin-right: auto;
	width: 225px;
	height: 120px;
	text-align: center;
	vertical-align: bottom;
	float:left;
}

#header_features { /* this is the area with the quick cart and keyword search */
	width: 275px;
	float:right;
	margin: 5px;
	padding: 10px;
}

#quick_cart {
	margin-top: 10px;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 10px;
	height: 45px;
	width: 200px;
	position: relative;
	z-index: 1;
}

#quick_cart img {
	display: inline;
	vertical-align: middle; 
}
#search_bar {
	padding: 15px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 10px;
	height: 60px;
	width: 230px;
	
}

#login_bar {	
}
/* add a responsive breakpoint to resize header vertically and realign elements on very small screens. */

@media (max-width: 600px) {
#site_header { width: 100%; min-height: 280px;}
#logo_area { margin-right: auto; margin-left: auto; padding: 25px; float: none;}
#header_features{ width: 100%; margin-right: auto; margin-left: auto; float: none;}
#quick_cart	{width: 200px; margin-right: auto; margin-left: auto; float: none;}
#search_bar{width: 230px; margin-right: auto; margin-left: auto; float: none;}
}




#main_content_area {
	margin-bottom: 0px;
	margin-top: 0px;
	height: 100%;
	min-height: 500px;
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	max-width: 1170px;
	position: relative;
	z-index: 0;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;	
}

@media (max-width: 1150px) {
	/* add padding for smaller displays */
#main_content_area {
	padding: 25px;
	
	}

}


#footer {
	min-height: 265px;
	width: 100%;
	background-color: #000000;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #0B5E8A;
}

/* the dynamic footer content that is set in the admin is controlled by external css file so footer can be edited in the admin area
 
***** FOOTER CSS IS LOCATED IN /css/sitestorepro_footer_responsive.css */
 
 
 

/* TOP NAVIGATION BAR (Flex Nav) Below is the CSS for the defaul responsive top navigation. If you are using your own navigation menu or a plugin for the top navigation, you can delete the css below */

.fn-container{ /* this formats the background (main color) of the top nav bar */
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	color: #FF000000;
	margin-left: auto;
	margin-right: auto;	
	background-color: #FF0000;

}

.flexnav a{font-size:16px;font-weight:normal;text-decoration:none;}/* formats the menu link size and font style */

.fn-dark a{
	color: #FFFFFF;
} /* TAB MENU lINKS (Labels) Color */
.fn-lg li a:hover{
	color: #7F0000
} /*formats the color of the tab label when mouse over (hover)*/

/* classes with fn-lg are for only used when menu is viewed greater than 767px */
.fn-lg li.active>a,.fn-lg li:hover>a{ /*formats the hover (mouse-over) style of the top nav tabs*/
	color:#ffffff;
	background-color: #4c0000;
}
.fn-light ul ul li,.fn-dark ul ul li{ /* this formats the background color of the drop-down menu */
	background-color: #ff4c4c;
}
/* classes with fn-sm are for only used when menu is viewed less  than 767px (i.e. collasped mobile menu */
.fn-sm li:hover>.navicon{
	border-left-color: #FFFFFF;
} /* format the collapsed bar icon left seperator line when hover. */

.fn-sm li:hover>.navicon:after{
	border-left-color: #FFFFFF;
}  /* format the collapsed bar icon left seperator line. */

.fn-sm a:hover{
	background-color: #006699;
	color: #ffffff;
} /* collasped (mobile) menu color when hover over */

.fn-button .fn-bar{
	display: block;
	width: 24px;
	height: 3px;
	border-radius: 1px;
	background-color: #CCCCCC;
	color: #FFF;
} /*formats the color of tbe menu icon on the colapsed nav bar */

.fn-sm .fn-back{
	position: relative;
	color: #FFF;
	background-color: #0099CC;
} /* format the selected tab when there are sub-menus in collasped mode */

/* 
Advanced menu formatting ...
...recommend not editing the classes below unless you are an expert with CSS */
.flexnav a:hover{text-decoration:none;} /* formats the hover properties of the menu. recommended leave as-is */
.fn-sm a{display:block;padding:14px 22px;}
.fn-container *,.fn-container *:before,.fn-container *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.fn-container-sm{padding:50px 0 0 0;}.fn-container-sm.fn-container{min-height:51px;}
.fn-container-sm .fn-name,.fn-container-sm .fn-button{display:block;}
.fn-container-lg .fn-name,.fn-container-lg .fn-button{display:none;}
.fn-button{position:absolute;right:22px;top:0px;box-sizing:border-box;margin:2px 0 2px 20px ;padding:14px;width:52px;border-radius:0px;}.fn-button:hover{cursor:pointer;}@include box-shadow(inset 0 0 8px rgba(0, 0, 0, 0.3));
.fn-button .fn-bar+.fn-bar{margin-top:4px;}
.flexnav:before,.flexnav:after{display:table;content:" ";}
.flexnav:after{clear:both;}
.flexnav ul{position:relative;margin:0;padding:0;list-style:none;}
.flexnav li{position:relative;}
.fn-lg{max-width:1170px;margin:auto;}.fn-lg .navicon:after{border:4px solid transparent;border-top-color:#666;content:"";position:absolute;right:6px;top:19px;}
.fn-lg .fn-back{display:none;}
.fn-lg ul ul{display:none;z-index:99;position:absolute;border-radius:4px;}.fn-lg ul ul .navicon:after{border:4px solid transparent;border-left-color:#666;top:15.5px;}
.fn-lg ul ul li{padding:3px;min-width:168px;}.fn-lg ul ul li:nth-child(2){border-top-left-radius:0px;border-top-right-radius:0px;}
.fn-lg ul ul li:last-child{border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
.fn-lg ul ul li a{padding:6px 8px;border-radius:0px;}
.fn-lg>ul>li{float:left;position:relative;white-space:nowrap;}.fn-lg>ul>li a{display:block;padding:10px 22px;}
.fn-lg>ul>li>a{font-weight:700;}
.fn-lg>ul>li:first-child>a{border-left:none;}
.fn-lg>ul>li:hover>ul{opacity:1;visibility:visible;-webkit-transition:all 0.50s ease-in-out;-moz-transition:all 0.50s ease-in-out;transition:all 0.50s ease-in-out;}
.fn-lg>ul>li>ul{display:block;left:0;top:100%;padding-top:0px;opacity:0;visibility:hidden;}.fn-lg>ul>li>ul:after{position:absolute;left:0px;top:1px;content:"";border:0px solid transparent;border-bottom:20px solid #34495e;}
.fn-lg>ul>li>ul li:hover>ul{opacity:1;visibility:visible;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}
.fn-lg>ul>li>ul ul{display:block;top:0;left:100%;padding-left:1px;opacity:0;visibility:hidden;}.fn-lg>ul>li>ul ul:after{position:absolute;left:1px;top:10px;content:"";border:0px solid transparent;border-right:0px solid #34495e;}
.fn-sm{display:none;}.fn-sm .navicon{position:absolute;top:5px;right:2px;height:40px;width:50px;border-left:1px solid #222f3d;}.fn-sm .navicon:hover{cursor:pointer;}
.fn-sm .navicon:after{position:absolute;top:12px;right:10px;content:"";border:8px solid transparent;border-left:8px solid #222f3d;}
.fn-sm .fn-back:before{position:absolute;top:16px;left:18px;content:"";border:8px solid transparent;border-right:8px solid #222f3d;}
.fn-sm .fn-back a{display:block;padding-left:45px;}
.fn-sm .sub-ul{display:none;}
.fn-name{position:absolute;top:13px;left:22px;font-size:20px;font-weight:700;} /* formats the name of the menu when collapsed.. recommend only changing size if required*/
@-webkit-keyframes slide{0%{-webkit-transform:translateX(100%);opacity:0;} 100%{-webkit-transform:translateX(0px);opacity:1;}}@-moz-keyframes slide{0%{-moz-transform:translateX(100%);opacity:0;} 100%{-moz-transform:translateX(0px);opacity:1;}}@keyframes slide{0%{transform:translateX(100%);opacity:0;} 100%{transform:translateX(0px);opacity:1;}}.fn-sm.fn-subview li,.fn-sm.fn-subview li.fn-subviewopen>a,.fn-sm.fn-subview li.fn-subviewopen>.navicon,.fn-sm.fn-subview li.fn-subview>a,.fn-sm.fn-subview li.fn-subview>.navicon{display:none;}
.fn-sm.fn-subview li.fn-subview,.fn-sm.fn-subview li.fn-subview .sub-ul,.fn-sm.fn-subview li.fn-subviewopen,.fn-sm.fn-subview li.fn-subviewopen>.sub-ul,.fn-sm.fn-subview li.fn-subviewopen>.sub-ul>li>a,.fn-sm.fn-subview li.fn-subviewopen>.sub-ul>li{display:block;-webkit-animation:slide 0.25s ease-in-out;-moz-animation:slide 0.25s ease-in-out;animation:slide 0.25s ease-in-out;}

/* end advanced CSS menu formatting 

 END TOP NAVIGATION BAR */