@charset "utf-8";
/* CSS Document */

/* -- specials scroller --*/

#innerContent #specialsContainer {
	position: relative;
	max-width: 238px;
	height: 360px;
	padding: 10px;
	background-image: url(../images/layout/special-bg2.jpg);
	background-repeat: repeat-x;
	border-radius: 10px; 
	border: 2px solid #8dadcc;
	background-color: #dde6ef;
	/*-moz-box-shadow:    3px 3px 5px 6px rgba(50, 50, 50, 0.25);
  	-webkit-box-shadow: 3px 3px 5px 6px rgba(50, 50, 50, 0.25);
  	box-shadow:         3px 3px 5px 6px rgba(50, 50, 50, 0.25);*/
}

#innerContent #specialsCarousel {
	width: 100%;
	max-width: 238px;
	height: 360px;
	margin: 0;
	padding: 0px;
	list-style-type: none;
	position: relative;
	font-size: 13px;
	/*overflow: hidden;*/
}

#innerContent #specialsCarousel .slide{
	height: 360px;
}


#innerContent #specialsCarousel .specialsBoxImg {
	width: 90%;
	max-width: 220px;
	height:135px;
	overflow: hidden;
	margin: 2px 0 0 2px; /*auto*/
	padding: 0;
	background-color: #FFF;/* image needa a background color or IE adds a black border to it*/
	-webkit-box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    1px 1px 8px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         1px 1px 8px 0px rgba(50, 50, 50, 0.25);
	border: 8px solid #FFF;
}

#innerContent #specialsCarousel .specialsBoxImg img{
	width: 100%;
	height: auto;
}

#innerContent #specialsCarousel .specialsText {
	padding: 0px 10px;
	margin: 0px;
	height: 200px;
}
#innerContent #specialsCarousel h2 {
	color: #775B3A;
	text-transform: capitalize;
	font-size: 14px;
	margin: 10px 0px;
}
#specialsCarousel h2 a:link, #specialsCarousel h2 a:visited {
        color: #775B3A;
}
#specialsContainer h2 a:hover, #specialsContainer h2 a:active {
        color: #EA803D;

}

#innerContent .learnButton{
	display: inline;
	position: absolute;
	left: 5px;
	bottom: 8px;
	white-space: nowrap;
	padding: 5px;
}

#innerContent .learnButton {
        margin-left: 0px;
        margin-top: 25px;
}
#innerContent .learnButton a {
        color: #FFF;
        font-weight: bold;
        text-decoration: none;
        font-size: 14px;
        background-color: #3D7AAC;
        border: 1px solid #FFF;
        text-align: center;
        margin: 0px;
        padding-top: 8px;
        padding-right: 20px;
        padding-bottom: 8px;
        padding-left: 20px;
}
#innerContent .learnButton a:hover {
        background-color: #09F;
}
#innerContent .learnButton .learnArrow{display:none;}

#specialsNav {   
	margin: 0px;
	padding: 0px 2px 0px 0px;
	height: 6px;
	float: right;
	position: relative;
	right: 20px;
	z-index: 999;
	top: 350px;
}
#specialsNav a {
	display: block;
	float: left;
	text-indent: -5000px;
	height: 6px;
	width: 6px;
	margin-right: 4px;
	background-color: transparent;
	background-image: url(../images/layout/dots.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
#specialsNav a.activeSlide {
	background-color: transparent;
	background-image: url(../images/layout/dots.png);
	background-repeat: no-repeat;
	background-position: -6px 0px;
}

/* //////////  ARROWS - FOR MOBILE COMPATIBILITY /////////////////// */

/*#innerContent #specialsArrows {
	margin: 0;
	padding: 0;
	float: right;
	position: relative;
	right: 20px;
	z-index: 999;
	top: 330px;
}
#homeContent #specialsArrows {
	margin: 0;
	padding: 0;
	float: right;
	position: relative;
	right: 20px;
	z-index: 999;
	top: 280px;
}
#prev, #next { display: inline; }
#prev img { height: 15px; width: 15px; margin-right: 20px; }
#next img { height: 15px; width: 15px; }

/* /////////// END ARROWS ///////////// */

*/

/*---homepage specials --*/

#homeContent #specialsContainer {
	position: relative;
	max-width: 284px;
	height: 290px;
	padding: 0;
	margin: 0px;
	background-image: none;
}

#homeContent #specialsCarousel {
	/*max-width: 284px;*/
	height: 290px;
	margin: 0;
	padding: 0px;
	list-style-type: none;
	position: relative;
	font-size: 13px;
	/*overflow: hidden;*/
}

#homeContent #specialsCarousel .slide{
	height: 280px;
	}

#homeContent #specialsCarousel .specialsBoxImg {
	height: 180px;
	width: 100%;
	max-width: 282px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: #FFF;/* image needa a background color or IE adds a black border to it*/
	border-style: none;
	-webkit-box-shadow: none;
	-moz-box-shadow:    none;
	box-shadow:         none;
}

#homeContent #specialsCarousel .specialsBoxImg img{
	height: 180px;
}


#homeContent #specialsCarousel .specialsText {
	padding: 0px 5px;
	max-width: 274px;
	margin: 0px;
	height: 105px;
}
#homeContent #specialsCarousel h3 {
	color: #775B3A;
	text-transform: capitalize;
	font-size: 14px;
	margin: 10px 0px 0px;
	font-weight: bold;
}

#homeContent #specialsNav {
	margin: 0px;
	padding: 0px 2px 0px 0px;
	height: 6px;
	position: relative;
	right: 10px;
	z-index: 999;
	top: 274px;
}

#homeContent .specialsMore{
	display: none;
}


#homeContent #specialsCarousel .learnButton{ 
	padding: 0px;
	margin:0;
	position: absolute;
	top: 280px;
	left: 5px;
	white-space: nowrap;
}

#homeContent .shadowbox #specialsCarousel .learnButton a:link,  #homeContent .shadowbox #specialsCarousel .learnButton a:visited, #homeContent .shadowbox .textbox .learnButton a:link, #homeContent .shadowbox .textbox .learnButton a:visited{ 
	color:#146DB1;
}

#homeContent .shadowbox #specialsCarousel .learnButton a:hover,  #homeContent .shadowbox #specialsCarousel .learnButton a:active, #homeContent .shadowbox .textbox .learnButton a:hover, #homeContent .shadowbox .textbox .learnButton a:active{ 
	color:#09F;
}

#homeContent #specialsCarousel learnButton .learnArrow{padding-left:5px;}

@media screen and (max-width: 865px) {
#innerContent #specialsCarousel .specialsBoxImg {
	height:auto;
}
}

@media screen and (max-width: 768px) {
#homeContent #specialsNav {   
	top: 115px;
}

#innerContent #specialsCarousel .specialsBoxImg {
	width: 90%;
	max-width: 220px;
	overflow: hidden;
	margin: 2px 0 0 2px; /*auto*/
	padding: 0;
}
}

 @media screen and (max-width: 740px) {
#specialsNav {   
	top: 380px;
}	 
	 }
	 
 @media screen and (max-width: 460px) { 
#homeContent #specialsNav {   
	top: 275px;
}	 	 
	 }