/* ==========================================================================
   Whiteys' custom styles
   ========================================================================== */
/* Notes */

/* 
Whiteys Red #a01916;
e70033



/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Lobster);

/* Layout */

body.site{
	background:#fff url('/SiteContent/images/stripe-bg.gif') 0 0 repeat;	
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
img{
	border: 0 none;
	margin:0;
	padding:0;
}
img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
p {
  margin: 0 0 10px;
}
small {
  font-size: 85%;
}
u{
	text-decoration:none;
	font-weight:bold;	
}
center{
	text-align:left;	
}
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

cite {
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 1;
  color: inherit;
  text-rendering: optimizelegibility;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-weight: normal;
  line-height: 1;
  color: #999999;
}

h1 {
  font-size: 36px;
  line-height: 40px;
}

h2 {
  font-size: 30px;
  line-height: 40px;
}

h3 {
  font-size: 24px;
  line-height: 40px;
}

h4 {
  font-size: 18px;
  line-height: 20px;
}

h5 {
  font-size: 14px;
  line-height: 20px;
}

h6 {
  font-size: 12px;
  line-height: 20px;
}

h1 small {
  font-size: 24px;
}

h2 small {
  font-size: 18px;
}

h3 small {
  font-size: 14px;
}

h4 small {
  font-size: 14px;
}
ul,
ol {
  padding: 0;
  margin: 0 0 10px 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

li {
  line-height: 20px;
}

ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}

blockquote p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
}

blockquote small {
  display: block;
  line-height: 20px;
  color: #999999;
}
a, a:visited{
	color: #e70033;		
}

.row {
  margin-left: -20px;
  *zoom: 1;
}

.row:before,
.row:after {
  display: table;
  line-height: 0;
  content: "";
}

.row:after {
  clear: both;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.span12 {
  width: 940px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}

.offset12 {
  margin-left: 980px;
}

.offset11 {
  margin-left: 900px;
}

.offset10 {
  margin-left: 820px;
}

.offset9 {
  margin-left: 740px;
}

.offset8 {
  margin-left: 660px;
}

.offset7 {
  margin-left: 580px;
}

.offset6 {
  margin-left: 500px;
}

.offset5 {
  margin-left: 420px;
}

.offset4 {
  margin-left: 340px;
}

.offset3 {
  margin-left: 260px;
}

.offset2 {
  margin-left: 180px;
}
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}
.offset1 {
  margin-left: 100px;
}
.container {
  width: 940px;
}
.slider{
	position: relative;
	overflow: hidden;
	height:auto;
}
.slider-small{
	height: auto;
	overflow: hidden;	
}
#slideimages{
	overflow: hidden;	
}
.boxcolor{
	background-color: #fcfbf0;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#724d1d;
	overflow: hidden;	
}
.pad15{	
	padding-left: 15px;
	padding-right: 15px;
}
.shadow{
	-moz-box-shadow:    0 0 15px 0px #ccc;
	-webkit-box-shadow: 0 0 15px 0px #ccc;
	box-shadow:         0 0 15px 0px #ccc;
	/* behavior: url(/AddOns/PIE.htc); */	
}
.shadow-slide{
	-moz-box-shadow:    0 4px 6px 2px #ccc;
	-webkit-box-shadow: 0 4px 6px 2px #ccc;
	box-shadow:         0 4px 6px 2px #ccc;	
	/* behavior: url(/AddOns/PIE.htc); */		
}
.shadow-nav{
	-moz-box-shadow:    0 4px 6px -2px #000;
	-webkit-box-shadow: 0 4px 6px -2px #000;
	box-shadow:         0 4px 6px -2px #000;
	/* behavior: url(/AddOns/PIE.htc); */			
}
.margintop20{
	margin-top: 20px;	
}
.padtop20{
	padding-top: 20px;	
}
.logo{
	background-image:url(../images/whiteys-logo.png);
	display:block;
	height:257px;
	width: 354px;
	float:left;
	position:absolute;
	left: 50%;
	margin: 0 0 0 -177px;
	top: -110px;
	overflow:hidden;
	text-indent:-2000px;
	z-index: 1000;
}
.logo-small{
	background-image:url(../images/whiteys-logo-small.png);
	display:block;
	height:257px;
	width: 254px;
	float:left;
	position:absolute;
	left: 50%;
	margin: 0 0 0 -127px;
	top: -110px;
	overflow:hidden;
	text-indent:-2000px;
}
.banner{
	height: 110px;
}
.banner-small{
	height: 70px;
}
.social{
	float:right;
	padding-top: 60px;	
	width: 200px;
}
.banner-small .social{
	padding-top: 30px;	
}
.social a{
	padding-left: 18px;	
}
.tweet{
	line-height:60px;
}
.tweet strong{
	color: #e70033;
	font-family: 'Lobster', cursive;
	font-size:18px;
	background-image:url(../images/tweet.png);
	background-repeat:no-repeat;
	padding-left: 30px;
}
.first{
	margin-left: 0px;	
}
footer.boxcolor{
	color: #e70033;	
}

/* Navigation Bar */
.navbar{
  background-color: #e70033;
  height: 50px;	
  position:relative;
  z-index: 999;
}
.navbar:before{
	content:url(../images/left-corner.png);
	position:absolute;
	right: 100%;
}
.navbar:after{
	content:url(../images/right-corner.png);
	left: 100%;
	position:absolute;
}

.nav{
	margin-left: 0;
	list-style: none;
	width: 290px;
}
.smalllogo .nav{
	width: 350px;	
}
.footernav{
	margin-left: 0;
	list-style: none;
	overflow:hidden;
	margin-left: 0px;
}
.crop{
	overflow:hidden;	
}
.footernav li{
	float:left;	
	margin-left: -1px;
}
/* .footernav li:first-child{
	margin-left: -1px;
} */
.navright{
	float:right;
}
.navleft{
	float:left;	
}
.nav li{
	float: left;
	line-height:50px;	
}
.nav a, .nav a:visited{
	color: #f7f6d9;	
	font-family: 'Lobster', cursive;
	font-size:24px;
	text-decoration:none;
	line-height:30px;
	padding-top: 10px;
	display:block;
}
.nav a:hover{
	border-bottom: 3px dotted #f7f6d9;	
}

.footernav a{
	color: #e70033;	
	border-left: 1px solid #e70033;
	padding: 0 5px;
	text-decoration:none;
}
.footernav a:hover{
	text-decoration:underline;
}
/* Headers */

h1, h2{
	font-family: 'Lobster', cursive;
	font-size:30px;
	color: #e70033;
	font-weight:normal;
}
h3{
	font-family: 'Lobster', cursive;
	font-size:24px;
	font-weight:normal;
	border-bottom: 1px solid #724d1d;
}
h4{
	font-family: 'Lobster', cursive;
	font-size:24px;
	font-weight:normal;
	color: #e70033;
}

/* Store */
.cart{
	float:right;	
}
.shopproducttable{
	border-spacing:8px;
	border-collapse: separate !important;
}
.shopproducttable2{
	background-color: #fff;
	padding: 4px;
	border: 1px solid #FC9;
}
.cartdetails{
	border: 1px solid #FC9;
	background-color: #fff;
	padding: 4px;
}
.cart-table{
	border: 1px solid #CCC;
	background-color: #fff;
	padding: 4px;
	width: 100%;
	border-collapse:collapse;
}
.shiptable{
	border: 1px solid #CCC;
	background-color: #fff;
	padding: 4px;
	border-collapse:collapse;
}
.cartdetails td{
	background-color: #fff;
	padding: 4px;
}
.cart-table td, .shiptable td, .payment-table td{
	background-color: #fff;
	padding: 4px;
	border: 1px solid  #FC9;
	vertical-align:top;
}
.cart-table th, .shiptable th{
	background-color: #e70033;
	color: #fff;
	padding: 4px;
	border: 1px solid  #FC9;
}
.payment-table{
	border: 1px solid #CCC;
	background-color: #fff;
	padding: 4px;
	border-collapse:collapse;
}
.sidecart h1{
  background-image:url(../images/whiteysincart.gif);
  background-repeat:no-repeat;	
  padding-left: 48px;
}

.itemselection{
	border: 1px solid #FC9;
	background-color: #fff;
	padding: 4px;
}
td.shoppackageneeded{
	background-color: #fff;
	padding: 4px;
	border: 1px solid #FC9;
}
p.itemsneeded{
	background-color: #FC9;
	font-weight:bold;
}

.shipmessage{
	font-weight: bold;	
}
.dollar{
	text-align:right;	
}

/* Locations */
.stores{
	width:100%;
}
.stores td{
	width: 50%;
	padding: 0 10px 0 0;
	text-align:left;
	vertical-align:top;	
}

.menu{
	width:100%;
}
.menu td{
	width: 50%;
	padding: 0 10px 0 0;
	text-align:left;
	vertical-align:top;	
}

.redbold{
	color: #e70033;
}

label.error-message{
	color: red;
}

/* Slider */
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white;
	filter: alpha(opacity=0);
	opacity: 0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow: hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
.nivo-controlNav {
	position: absolute;
	z-index:1100;
	bottom: 20px; 
	left: 10px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	display:block;
	width:20px;
	height:20px;
	background:url(/SiteContent/images/bullet.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin:0 10px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -20px;
}

/* Responsive */
.ts-visible-phone {
    display: none !important;
  }
@media (max-width: 514px) {
.ts-hidden-phone {
    display: none !important;
  }
    
}  

@media (max-width: 979px) {
.ts-visible-phone {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 979px) {

  .logo{
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:189px;
	width: 260px;
	left: 50%;
	margin: 0 0 0 -129px;
	top: -80px;
}
.logo-small{
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:218px;
	width: 300px;
	left: 50%;
	margin: 0 0 0 -150px;
	top: -80px;
}
.nav{
	margin-left: 0;
	list-style: none;
	width: 240px;
}
.smalllogo .nav{
	width: 260px;	
}
.nav a, .nav a:visited{
	color: #f7f6d9;	
	font-family: 'Lobster', cursive;
	font-size:20px;
	text-decoration:none;
	line-height:30px;
	padding-top: 10px;
	display:block;
}
.nav a:hover{
	border-bottom: 2px dotted #f7f6d9;	
}
.banner{
	height: 80px;
}
.banner-small{
	height: 50px;
}
.social{
	float:right;
	padding-top: 40px;	
}
.banner-small .social{
	padding-top: 10px;	
}

}

@media (max-width: 767px) {
  
    .logo{
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:145px;
	width: 200px;
	left: 50%;
	margin: 0 0 0 -99px;
	top: -55px;
}
.logo-small{
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:189px;
	width: 260px;
	left: 50%;
	margin: 0 0 0 -129px;
	top: -80px;
}
.nav{
	margin-left: 0;
	list-style: none;
	width: 200px;
}
.smalllogo .nav{
	width: 220px;	
}
.nav a, .nav a:visited{
	color: #f7f6d9;	
	font-family: 'Lobster', cursive;
	font-size:18px;
	text-decoration:none;
	line-height:30px;
	padding-top: 10px;
	display:block;
}
.nav a:hover{
	border-bottom: 2px dotted #f7f6d9;	
}
.banner{
	height: 60px;
}
.banner-small{
	height: 50px;
}
.banner-small .social{
	padding-top: 10px;	
}
.social{
	float:right;
	padding-top: 20px;	
}
.banner-small .social{
	padding-top: 30px;	
}
  
}


@media (max-width: 620px) {

.logo{
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:116px;
	width: 160px;
	left: 50%;
	margin: 0 0 0 -79px;
	top: -35px;
}
.logo-small{
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:131px;
	width: 180px;
	left: 50%;
	margin: 0 0 0 -90px;
	top: -35px;
}
.nav{
	margin-left: 0;
	list-style: none;
	width: 160px;
}
.smalllogo .nav{
	width: 180px;	
}
.nav a, .nav a:visited{
	color: #f7f6d9;	
	font-family: 'Lobster', cursive;
	font-size:16px;
	text-decoration:none;
	line-height:30px;
	padding-top: 10px;
	display:block;
}
.nav a:hover{
	border-bottom: 2px dotted #f7f6d9;	
}
.banner{
	height: 40px;
}
.banner-small{
	height: 20px;
}
.social{
	float:right;
	padding-top: 20px;
	display:none;
}
.banner-small .social{
	padding-top: 30px;	
}

}



@media (max-width: 514px) {
.ts-visible-phone {
    display: inherit !important;
  }
body.site{
	background:#fff none;	
	margin: 0;
	padding: 0 15px;
}
.margintop20{
	margin-top: 0;
}
.logo{
	background-image:url(../images/mobile-whiteys-logo.png);
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:168px;
	width: 300px;
	left: 50%;
	margin: 0 0 0 -150px;
	top: -128px;
}
.logo-small{
	background-image:url(../images/mobile-whiteys-logo.png);
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	height:168px;
	width: 300px;
	left: 50%;
	margin: 0 0 0 -150px;
	top: -168px;
}
.boxcolor{
	background-color: #fff;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#724d1d;
	overflow: hidden;	
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow:none !important;
	behavior: none !important;	
}
.banner{
	height: 128px;
	background-image:url(../images/mobile-checkerboard.png);
	background-repeat: repeat-x;
}
.banner-small{
	height: 168px;
	background-image:url(../images/mobile-checkerboard.png);
	background-repeat: repeat-x;
}
.nav{
	margin-left: 0;
	list-style: none;
	width: 160px;
	display:none;
}
.navbar{
	background: none;
	height:auto;
}
.navbar:before{
	content:none;
	position:absolute;
	right: 100%;
}
.navbar:after{
	content:none;
	left: 100%;
	position:absolute;
}
.slider{
	padding-top: 6px;
	background-color: #fcfbf0;
}
.mobile-nav{
	margin-left: 0;
	list-style: none;
	margin-top: 10px;
}
.mobile-nav li{
	margin: 10px;
	text-align: center;
}
.mobile-nav a{
	background-color: #e70033;
	height: 55px;
	color: #f7f6d9;	
	font-family: 'Lobster', cursive;
	font-size:36px;
	text-decoration:none;
	line-height:55px;
	display:block;	
	position: relative;	
}
.mobile-nav a:hover{

}
.mobile-nav a:before{
	content:url(../images/mobile-nav-left.png);
	position:absolute;
	right: 100%;
}
.mobile-nav a:after{
	content:url(../images/mobile-nav-right.png);
	left: 100%;
	position:absolute;
}
.shadow-nav{
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow:none !important;
	behavior: none !important;
}
.nivo-controlNav a {
	display:block;
	width:10px;
	height:10px;
	background:url(/SiteContent/images/bullet.png) no-repeat;
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	text-indent:-9999px;
	border:0;
	margin:0 5px;
	float:left;
}
.nivo-controlNav a.active {
	background-position:0 -10px;
}
footer{
	background-image:url(../images/mobile-checkerboard.png);
	background-repeat: repeat-x;
	background-position: center bottom;
	padding-bottom: 30px;
	text-align: center;
}
.mobile-social{
	text-align: center;	
}
.mobile-social a{
	padding-left: 18px;	
}
.pad15{
	padding: 0px;
}
h1, h2{
	font-family: 'Lobster', cursive;
	font-size:24px;
	color: #e70033;
	font-weight:normal;
}
h3{
	font-family: 'Lobster', cursive;
	font-size:20px;
	font-weight:normal;
	border-bottom: 1px solid #724d1d;
}
h4{
	font-family: 'Lobster', cursive;
	font-size:20px;
	font-weight:normal;
	color: #e70033;
}
.backbutton{
	background-image:url(../images/back.png);
	width: 61px;
	height: 25px;
	text-indent: -2000px;
	overflow: hidden;

	margin-left: -15px;
	position: absolute;
	top: 30px;
}

}