/** * reset (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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;
}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

/* PRINT -------------------------------------------------------------------------------------*/

@media print {
nav, audio, video, embed, object, form, menu, menu-wrap, toggleMobile, mobileMenu, .menudiv { display:none }
nav.breadcrumbs, img.illustration { display:block }
article, figure { max-width:100% !important; page-break-inside:avoid; display:block; width:500px; float:left; }
article img { width:auto; }
.print-header:before { content:''; display:inline-block; } 
.print-header:after { content:'www.elmoresmithbbqsauce.com'; display:inline-block; font-size:22pt }
body { font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:18pt; line-height:1.7em }
* { background:transparent !important; color:#000 !important; text-shadow:none !important; filter:none !important }
h1 { font-size:22pt }
.titlecoco { font-size:25pt }
h2, h3, h4, h5, h6 { font-size:18pt }
/*article { display:block; width:auto !important; max-width:none !important }*/
a, a:link, a:visited { color:#06c !important; text-decoration:none }
a[href]:after { content:" <"attr(href)">"; font-size:15pt }
a[href^="/"]:after { content:" <https://www.elmoresmithbbqsauce.com" attr(href)">" }
a[href^="javascript:"]:after, a[href^="#"]:after { content:"" }
.page-break { display:block; page-break-before:always }

}

/* GLOBAL -------------------------------------------------------------------------------------*/

	
/* For devices 400px and larger: ---------------------------------------------------------------*/


body {
	background-color: #000;
	color: #FFF;
	background-image: url(images/bg17.jpg);
	background-repeat:repeat;
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	padding: 0px;
	line-height: 1.5em;
    }

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #c90;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1em;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

a:link, a:visited {
    font-size: 1em;
    color: #c90;
    display: inline-block;

}

a:hover, a:active {
    color: white;
	font-size: 1em;
	text-decoration: underline;
}


/* YouTube Responsive CSS  */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
}

img {
    max-width: 100%;
    height: auto;

}

h1 {
	color: #FFF;
	font-family: "Open Sans", "Trebuchet MS", Verdana, Geneva, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 20px;
}

.blackH1{
	color: #000;
	font-family: "Open Sans", "Trebuchet MS", Verdana, Geneva, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 20px;
}
h2 {
	color: #821439;
	font-family: "Open Sans", "Trebuchet MS", Verdana, Geneva, sans-serif;
	font-size: 1.3em;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-right: 20px;
	padding-left: 20px;
	font-weight: bold;
	font-style: italic;
}

h3 {
	font-size: 1.1em;
	color: #FFF;
	font-family: "Open Sans", "Trebuchet MS", Verdana, Geneva, sans-serif;
}

.bodybox {
	background-color: #000;
	width: 85%;
	border: 1px solid #C90;
	-moz-box-shadow: 0 0 135px #3F2417;
	-webkit-box-shadow: 0 0 135px #3F2417;
	box-shadow: 0 0 135px #3F2417;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	font-size: 1em;
}

.ordersbox {
	background-color: #FFF;
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	font-size: 1em;
    color: #000;
	font-family: "Open Sans", "Trebuchet MS", Verdana, Geneva, sans-serif; 
}

.orange {
	font-size: 1.5em;
	font-weight: bold;
	font-family: "Open Sans", Verdana, Geneva, sans-serif;
	color: #F60;
	width: 85%;
	margin-left:auto;
	margin-right:auto;
	border: 1px solid #F90;
	text-align: center;
	padding: 15px;
	line-height: 1.5em;
	display:block;
}

.small {
	font-size: .75em;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-style: normal;
}

p {
	padding-top: 1em;
	padding-right: 1em;
	padding-left: 1em;

}

.indent {
	padding-top: 1em;
	padding-right: 5em;
	padding-left: 5em;

}


/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
	font-family: Verdana, Geneva, sans-serif;
			margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:525px;
		height:665px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #F1B437;
		background:#87143b;
		color:#000;
		padding:0 10px;
		text-decoration:none;

		}
	ol#controls li.current a{
		background:#F1B437;
		color:#000;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	/* ~~ margin: 0;~~ */
}


.reddesc {
	margin: 0px;
	font-size: 1.2em;
	font-family: "Open Sans", "Trebuchet MS", Verdana, Geneva, sans-serif;
	color: #FFC820;
	border-bottom-style: solid;
	font-style: italic;
	background-color: #87143b;
	padding: 10px;
	border-bottom-width: thin;
	border-bottom-color: #500C23;
}





.textadwhite {
	font-size: 2.2em;
	color: #FFF;
	font-family: "Patua One", Verdana, Geneva, sans-serif;
	line-height:1.5em;
	text-align: center;
	width: 85%;
		margin: auto;
}

span.nobr { white-space: nowrap; }

td, ol {
	font-size: 1em;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
}



.img {
    max-width: 100%;
    height: auto;
}

.imgoutline {
    max-width: 100%;
    height: auto;
	border:1px solid #000;
	margin: 25px;
}


.padcenter {

    margin: 0 auto;
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
}

.padcenteroutlineBlack {

     margin: 0 auto;
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	border:1px solid #000;
}

.padcenteroutlineYellow {

    margin: 0 auto;
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	border: 1px solid #C90;

}

.padcenteroutlineYellowFade {

    margin: 0 auto;
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	border: 1px solid #C90;
	-moz-box-shadow: 0 0 135px #C90;
	-webkit-box-shadow: 0 0 135px #C90;
	box-shadow: 0 0 135px #C90;

}	
	
.padfloatleft {
	float:left;
	display:inline-block;
	margin-top: 25px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 0px;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;

} 

.padimage {

	margin: 15px;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;

} 

.padfloatleftoutline {
	float:left;
	display:inline-block;
	margin-top: 25px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 0px;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
	border:1px solid #000;
} 

.padfloatright {

	margin: 25px 5px 25px 25px;
	float:right;
	display:inline-block;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;

}

.padfloatrightoutline {

	margin: 25px 5px 25px 25px;
	float:right;
	display:inline-block;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
	border:1px solid #000;
}



/* Center image between margins */ 

.center { 
	width: 100%; 
	text-align: center;
	margin: 0 auto;

	}


.greytext {
	color: #999;
}

.hidden
{
	position:absolute;
	clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
	clip: rect(1px, 1px, 1px, 1px);
	visibility: hidden;
	padding:0;
	font-size: .001em;
	margin: 0px;
}


.itemName {
	/* precision cart */
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	color:#fff;
	text-align:left;
	line-height:1em;
	padding: 0px;
	text-transform: uppercase;

}

.salePrice, .salePriceValue {
	/* precision cart */
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 1.2em;
	color:#c90;
	text-align:left;
	line-height:1em;
	padding: 0px;
	text-transform: uppercase;
	font-weight: bold;

}


.item_option_level {
/* precision cart */
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 1em;

}
.customer_info_table {
/* precision cart */
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
}



.customer_info_table {
/* precision cart */
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
border-collapse:collapse;
}
.customer_info_table td, .customer_info_table th {
/* precision cart */
font-size:1em;
border:1px solid #160D07;
padding:3px 7px 2px 7px;
}
.customer_info_table th  {
/* precision cart */
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}



/* FOUR COLUMNS */

.four_columns400div {
	padding: 15px;

}


.four_columns, #text_columns, .one_column
{


        clear:both;
        width:auto;
        max-width:1050px;
        margin:0 auto;
}




.four_columns .img-item
{
	float:left;
	margin-right:25px;
	margin-bottom:25px;
	display:inline;
	width:300px;
	height:155px;
}

.four_columns400 .img-item
{
	float:left;
	margin-right:25px;
	margin-bottom:25px;
	display:inline;
	width:380px;
	height:400px;
}

.four_columns .img-item a
{
        position:relative;
        display:inline;

}

.four_columns400 .img-item a
{
        position:relative;
        display:inline;

}

@media (max-width: 900px)
{
     .four_columns, .four_columns400, .footer_columns, .one_column
        {
	width: auto;
margin-bottom: 25px;
        }
		
		
		
/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
	font-family: Verdana, Geneva, sans-serif;
			margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:85%;
		height:85%;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	}
		


@media (max-width:700px)
{
.orange {
	font-size: 1.1em;
	font-weight: bold;
	font-family: "Open Sans", Verdana, Geneva, sans-serif;
	color: #F60;
	width: 85%;
	margin-left:auto;
	margin-right:auto;
	border: 1px solid #F90;
	text-align: center;
	padding: 15px;
	line-height: 1.5em;
	display:block;
}


.four_columns, four_columns400, .one_column {
                width:auto;

       }
     
    
.four_columns .img-item {
	width: 300px;
                float:none;
                margin: 25px auto 25px auto;

        }
.four_columns h2
        {
                margin: 0 30px;
        }
		
		
.four_columns400 .img-item
        {
	width: 300px;
                float:none;
                margin: 25px auto 25px auto;

        }
        .four_columns400 h2
        {
                margin: 0 30px;
        }
		
     
	 }


/* For devices smaller than 623px: ---------------------------------------------------------------*/
@media (max-width:632px) 
{
body {
	background-color: #000;
	color: #FFF;
	font-family: 'Open Sans', Verdana, Geneva, sans-serif;
	font-size: 1.1em; 
	font-style: normal;
	font-weight: normal;
	padding: 0px;
	line-height: 1.25em;
    background-image: none; 
}

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}