/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
	Lurpak Good Food Finder
	Code by: Mark Gerrard
	Design: Derek Clark
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

body,
ul,
ul li,
fieldset {
	margin: 0;
	padding: 0;
}

.hide {display: none;}

body {
	font: 62.5% Arial, sans-serif;
	background: #abadb0 url(../../img/food_finder/bg-page.jpg) no-repeat 50% 160px;
}

.hide {display: none;}

.note {font-size: 0.846em;}

a {
	color: #002d6a;
	text-decoration: none;
}

.error {
	color: #bf2424;
}

.highlight {color: #033477;}

.tR.cufon {line-height: 0em;}

img.media {
	box-shadow: 0px 2px 10px #E9E9E9;
	-moz-box-shadow: 0px 2px 10px #E9E9E9;
	-webkit-box-shadow: 0px 2px 10px #E9E9E9;
	padding: 5px;
	border: 1px solid #e4e4e3;
	margin-right: 15px;
	background: #FFF;
}

#header {
	position: relative;
	z-index: 2;
	height: 100px;
	background: url(../../img/layout/bg-header.jpg) repeat-x 0 0;
}


#search {
	position: relative;
	z-index: 20;
	height: 65px;
	background: url(../../img/layout/bg-search.png) repeat-x 0 0;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFF;
}

#search .inner {
	background: url(../../img/layout/bg-search-highlight.png) no-repeat top center;
}

#search form {
	padding-top: 15px;
}

#search label {
	float: left;
	margin-top: 8px;
	margin-right: 40px;
	width: 320px;
	height: 19px;
	text-indent: -1000em;
	background: url(../../img/layout/label-search.png) no-repeat 0 0;
}

#search label.hide {display: inline !important;}

#search input {
	margin-right: 20px;
	background: url(../../img/layout/input-search.png) no-repeat 0 0;
	border: none;
	padding: 8px 0;
	padding-left: 10px;
	width: 120px;
	font-size: 0.867em;
	color: #002d6a;
	outline: none;
}

#search .btn {width: 80px; height: 32px; margin: 0; padding: 0; text-indent: -1000em; background: url(../../img/layout/btn-search.png) no-repeat 0 0; overflow: hidden;}
#search .btn:hover {background-position: 0 -32px;}

#search input,
#search select {float: left;}

#header .inner,
#search .inner,
#footer .inner {
	width: 960px;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

#logo-lurpak {
	background: url(../../img/layout/logo.jpg) no-repeat;
	display: block;
	position: absolute;
	top: 0;
	left: -73px;
	width: 616px;
	height: 100px;
	text-indent: -1000em;	
}

#logo {
	background: url(../../img/layout/logo.jpg) no-repeat;
	display: block;
	position: absolute;
	top: 0;
	left: -73px;
	width: 180px;
	height: 100px;
	text-indent: -1000em;
}

#header ul {
	margin-top: 45px;
	margin-right: 20px;
	list-style: none;
	float: right;
}

#header ul li {
	float: left;
	margin-left: 38px;
}

#header ul li a {
	float: left;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.4em;
	color: #777;
	height: 12px;
	text-indent: -1000em;
	background: url(../../img/layout/bg-nav.gif) no-repeat 0 0;
}

#header ul li.about a {width: 50px;}
#header ul li.recommend a {width: 93px; margin: 0; background-position: -99px 0;}
#header ul li.featured a {width: 74px; background-position: -231px 0;}

#header ul li.about a:hover,
#header ul li.about strong a {background-position: 0 -30px;}
#header ul li.recommend a:hover,
#header ul li.recommend strong a {background-position: -99px -30px;}
#header ul li.featured strong a,
#header ul li.featured a:hover {background-position: -231px -30px;}


#footer {
	padding-top: 20px;
	height: 148px;
	width: 100%;
	z-index: 0;
	clear: both;
	background: url(../../img/layout/bg-footer.png) repeat-x 0 0;
}

#footer .inner {
	background: url(../../img/layout/bg-footer-inner.png) no-repeat 50% 0;
	font-size: 1.3em;
	color: #FFF;
	font-weight: bold;
	overflow: hidden;
	text-shadow: #757678 0 1px 0;
	text-align: center;
}

#footer a {text-shadow: #EEE 0 1px 0;}

#footer ul {list-style: none;}

#footer ul.links {margin-top: 17px; margin-left: 140px; padding-bottom: 7px;}

#footer ul li {padding-right: 20px; margin-left: 20px; line-height: 2em;}

#footer ul li.social {display: block;}

#footer ul li {float: left; background: url(../../img/layout/sep-footer.gif) no-repeat 100% 0;}
#footer ul li.first,
#footer ul li.last,
#footer ul li.social {background: none; margin-right: 0; padding-left: 0;}

#footer ul li.social {margin: 16px 0 16px 250px; clear: both;}
#footer ul li.social a {float: left; text-indent: -1000em; width: 32px; height: 32px; margin-right: 6px;}
#footer ul li.social a.fr {background: url(../../img/layout/logo-flickr.gif) no-repeat 0 0;}
#footer ul li.social a.fb {background: url(../../img/layout/logo-facebook.gif) no-repeat 0 0;}
#footer ul li.social a.tw {background: url(../../img/layout/logo-twitter.gif) no-repeat 0 0;}
#footer ul li.social a.yt {background: url(../../img/layout/logo-youtube.gif) no-repeat 0 0; margin-right: 0;}

#footer ul.legal {float: left; font-size: 0.846em; clear: both;}
#footer ul.legal li {padding-right: 10px; margin-left: 6px; line-height: 1em;}
#footer p {float: right; font-size: 0.846em; margin: 0;}

#map_api {
	height: 620px;
	width: 100%;
	z-index: 2;
	top: 160px;
	left: 0;
	position: absolute;
	overflow: hidden;
}

#content {
	position: relative;
	z-index: 3;
	width: 960px;
	margin: 15px auto;
}

#content .box {
	float: left;
	width: 300px;
	padding: 20px;
	top: 20px;
	z-index: 2;
	background: url(../../img/layout/bg-content.png);
	box-shadow: 0px 0px 10px #666;
	-moz-box-shadow: 0px 0px 10px #666;
	-webkit-box-shadow: 0px 0px 10px #666;
	 font-size: 1.3em;
	 color: #777;
}

#content .box.scrollIt {
	overflow: hidden;
	height: 600px;
	position: relative;
}

#content .box.scrollIt .scrollTrack {
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
	border: 1px solid red;
	z-index: 20;
}

#welcome h1.welcome {
	height: 84px;
	text-indent: -1000em;
	background: url(../../img/text/welcome.png) no-repeat 0 50%;
}

#welcome .discover h2 {
	height: 23px;
	margin: 0;
	text-indent: -1000em;
	background: url(../../img/text/discover.png) no-repeat 0 50%;
}

#welcome .featured h2 {
	height: 46px;
	margin: 0 0 20px;
	text-indent: -1000em;
	background: url(../../img/text/latest-foodfinds.png) no-repeat 0 0;
}

#welcome .featured .media {float: left;}

#welcome .box,
#map .box,
#featured .box {padding: 20px 0; width: 340px;}

#featured .intro {margin: 0 20px 10px 20px;}

#featured #map_api,
#map #map_api {width: 570px; height: 592px; position: static; float: left; top: 0;}
#map #map_api {height: 640px;}

#map_wrap {float: left; margin-left: 20px; width: 570px; padding: 5px; background: #FFF; box-shadow: 0px 2px 10px #666; -moz-box-shadow: 0px 2px 10px #666; -webkit-box-shadow: 0px 2px 10px #666;}

#welcome .discover {margin-right: 47px;}

#map .nothing {margin-right: 20px; margin-left: 20px;}

#welcome .box {padding: 20px; width: 900px;}
#welcome .box .item .media {margin-left: 0;}

#welcome .discover h2 {margin: 0 0 10px;}
#welcome .discover p {margin: 0 0 10px; line-height: 1.9em; font-size: 1.077em;}

#welcome .box .recommend h2 {height: 23px; text-indent: -1000em; background: url(../../img/text/recommend.png) no-repeat 0 0; margin: 0 0 10px;}
#welcome .box .recommend p {margin: 0; line-height: 1.4em;}

.box .cta.recommend,
.box .cta.whatis {margin: 0;}
.box .cta.recommend a,
.box .cta.whatis a {display: block; margin-top: 20px; height: 32px; text-indent: -1000em; background: url(../../img/layout/cta-recommend.png) no-repeat 0 0; width: 262px;}
.box .cta.recommend a:hover,
.box .cta.whatis a:hover {background-position: 0 -32px;}

#about .box .cta.recommend,
#about .box .cta.whatis {position: absolute; bottom: 20px;}

.box .cta.whatis a {background-image: url(../../img/layout/cta-whatis.png);}

#welcome .row {clear: both; overflow: hidden; width: 100%;}

#welcome .copy {float: left; width: 255px;}
#welcome .copy h3 {font-size: 1.385em; color: #033477; font-weight: normal; margin: 0;}
#welcome .copy h4 {font-size: 0.846em; font-weight: normal; margin: 0 0 10px; color: #002d6a;}
#welcome .copy p {margin: 0; line-height:1.5em;}

#welcome .colone, #welcome .coltwo {float: left;}
#welcome .colone {width: 590px;}
#welcome .coltwo {width: 263px;}

#welcome #map_wrap {width: 250px; box-shadow: 0px 2px 10px #E9E9E9;	-moz-box-shadow: 0px 2px 10px #E9E9E9; -webkit-box-shadow: 0px 2px 10px #E9E9E9; padding: 5px; border: 1px solid #e4e4e3; margin-right: 0; background: #FFF; float: right;}
#welcome #map_api {position: relative; width: 250px; height: 160px; float: left; top: 0;}

#welcome #iphone_btn {width:261px; float:right; outline:none; border:none; display:block; margin-right:2px;}
#welcome #iphone_btn img{outline:none; border:none;}

#content .searchResults h1,
#featured .searchResults h1 {text-indent: -1000em; margin: 0 0 0 20px; height: 18px; background: url(../../img/text/search-results.png) no-repeat;}
#featured #content .searchResults h1 {height: 39px; background-image: url(../../img/text/featured-foodfinds.png);}

#content .searchResults h2 {font-size: 0.8462em; margin-left: 20px; color: #777;}

#welcome #content .searchResults h3 em,
#content .searchResults h2 em {color: #002d6a; font-style: normal;}

#content .searchResults .item {overflow: hidden; width: 300px; background: url(../../img/layout/sep-item.png) no-repeat 50% 100%;padding: 10px 20px; color: #777;}
#welcome #content .searchResults .item {background-position: 50% 0;}

#content .searchResults .item.hover {background: url(../../img/layout/bg-item-over.png) no-repeat 0 0;}

#content .searchResults .item h3 {margin: 0; margin-left: 95px; font-size: 1.385em; font-weight: normal; color: #033477;}
#welcome #content .searchResults .item h5,
#content .searchResults .item h4 {margin: 0; margin-left: 95px; font-weight: normal; font-size: 0.846em;}
#content .searchResults .item p {margin: 0; margin-left: 95px; font-size: 0.923em; line-height: 1.4em;}

#content .searchResults .item img {
	float: left;
	width: 70px;
	height: 70px;
}

#content .searchResults .item.hover h3 {color: #FFF;}
#content .searchResults .item.hover h4,
#content .searchResults .item.hover p {color: #b5d5ff;}
#content .searchResults .item.hover img {border-color: #002a64; box-shadow: 0px 2px 10px #002a64; -moz-box-shadow: 0px 2px 10px #002a64; -webkit-box-shadow: 0px 2px 10px #002a64;}

#content .searchResults .listPagination {margin: 20px 20px 0 20px;}

.listPagination {margin: 0; padding: 0;}

.listPagination li {
	list-style: none;
	float: left;
	margin-right: 3px;
}

.listPagination a,
.listPagination strong {
	float: left;
	padding: 2px 4px;
	background: #b5d5ff;
	-moz-border-radius: 3px;
	font-weight: bold;
}


.listPagination strong {background-color: #002d6a; color: #FFF;}

.listPagination li.prev {float: left; margin-right: 30%;}

.listPagination li.next {float: right;}

#about .box {font-size: 1.3em; padding-bottom: 60px; color: #7a7777; width: 900px; position: relative;}

#about h1 {
	height: 40px;
	display: block;
	background: url(../../img/text/about.png) no-repeat 0 0;
	text-indent: -1000em;
}

#about .col {float: left; width: 430px; margin-right: 40px;}
#about.extra .col {width: auto;}

#about .col.last {margin-right: 0;}

#about h1, #about h2 {
	font-size: 1.538em;
	color: #033477;
	font-weight: normal;
}

#about h2 {
	margin-top: 15px;
}

/*#about p {font-size: 1.077em; line-height: 1.5em;}*/

.box .nav {margin-bottom: 10px; overflow: hidden; width: 100%;}

.box .nav li {
	float: left;
	list-style: none;
	font-size: 0.846em;
}

.box .nav a {display: block; background-repeat: no-repeat; background-position: 0 50%; padding: 3px 0 3px 20px;}

.box .nav li.back {float: left;}
.box .nav li.comments {float: right;}

.box .nav li.back a {background-image: url(../../img/layout/icon-back.png);}
.box .nav li.comments a {background-image: url(../../img/layout/icon-comments.png);}

#stockist .box h1 {
	font-size: 1.538em;
	color: #033477;
	margin: 0;
	clear: both;
	font-weight: normal;
}

#stockist .box h2 {
	margin: 0 0 15px;
	font-size: 0.846em;
	font-weight: normal;
}

#stockist .box h2 strong {color: #033477; font-weight: normal;}
#stockist .box h2 em {display: block; font-style: normal;}

#stockist .box .media {
	padding: 5px;
	border: 1px solid #e4e4e3;
	margin-right: 15px;
	background: #FFF;
	box-shadow: 0px 2px 10px #E9E9E9;
	-moz-box-shadow: 0px 2px 10px #E9E9E9;
	-webkit-box-shadow: 0px 2px 10px #E9E9E9;
}

#stockist .box .details {margin-top: 20px; margin-bottom: 10px; padding-bottom: 15px; background: url(../../img/layout/sep-item.png) no-repeat 50% 100%;}

#stockist .box .details ul {margin-bottom: 15px; overflow: hidden; with: 100%;}

#stockist .box .details li {
	float: left;
	list-style: none;
}

#stockist .box .details li a.opener {
	display: block;
	height: 31px;
	text-indent: -1000em;
	background: url(../../img/layout/btns-stockist.png) no-repeat 0 0;
}

#stockist .box .details li.address a.opener {
	margin-right: 10px;
	width: 66px;
	background-position: 0 0;
}

#stockist .box .details li.address a.opener:hover,
#stockist .box .details li.address a.opener.active {background-position: 0 -31px;}

#stockist .box .details li.contact a.opener {
	margin-right: 10px;
	width: 107px;
	background-position: -76px 0;
}

#stockist .box .details li.contact a.opener:hover,
#stockist .box .details li.contact a.opener.active {background-position: -76px -31px;}

#stockist .box .details li.opening a.opener {
	width: 106px;
	background-position: -192px 0;
}

#stockist .box .details li.opening a.opener:hover,
#stockist .box .details li.opening a.opener.active {background-position: -192px -31px;}

#social {list-style: none;}
#social a {
	display: block;
	line-height: 2em;
	padding-left: 25px;
	font-size: 0.846em;
}
#social .facebook a {background: url(../../img/layout/logo-facebook-sml.gif) no-repeat left center;}
#social .twitter a {background: url(../../img/layout/logo-twitter-sml.gif) no-repeat left center;}
#social .count a {background: url(../../img/layout/logo-comments-sml.gif) no-repeat left center;}

#stockist .box {padding-top: 10px;}

#form .box {width: 900px;}

#form .box #s1,
#form .box #s2,
#form .box #s3 {float: left; margin-right: 20px; width: 440px; clear: both;}

#form .box h1 {
	height: 68px;
	text-indent: -1000em;
	background: url(../../img/text/h1-recommend.png) no-repeat;
	font-size: 1.538em;
	margin: 0 0 20px;
	color: #033477;
}

#form .box input,
#form .box select,
#form .box .fSs {
	width: 412px;
}

#form .box input,
#form .box textarea,
#form .box .fSs {
	background: url(../../img/layout/input-bg-large.gif) no-repeat 0 0;
	border: none;
	font-size: 1em;
	line-height: 1em;
	padding: 8px 10px;
	font-family: Arial, sans-serif;
	color: #033477;
}

#form .box .fSs,
#search .fSs {position: relative; z-index: 100; display: block; padding: 10px; background-image: url(../../img/layout/select-bg-large.gif);}

.fSs {color: #002d6a;}

#search .fSs {float: left; margin-right: 20px; height: 20px; line-height: 1.5em; padding: 6px 10px; width: 190px; background-image: url(../../img/layout/select-search.gif); display: inline; font-size: 13px; font-weight: normal;}

#form .box .fSs .fSsMenu,
#search .fSs .fSsMenu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: url("../../img/layout/bg-content.png");
	box-shadow: 0px 2px 10px #AAA;
	-moz-box-shadow: 0px 2px 10px #AAA;
	-webkit-box-shadow: 0px 2px 10px #AAA;
	list-style: none;
	color: #002d6a;
	z-index: 10;
}

#search .fSs#radius {width: 81px; background-image: url(../../img/layout/select-radius-search.gif);}

#form .box .fSs .fSsMenu li,
#search .fSs .fSsMenu li {padding: 2px 3px;}

#form .box .fSs .fSsMenu li.hover,
#search .fSs .fSsMenu li.hover {
	background: url(../../img/layout/select-hover.gif) repeat-x 0 0 !important;
	color: #FFF;
}

#form .box .fSs .fSsMenu li.selected,
#search .fSs .fSsMenu li.selected {
	background: #b4d6ff url(../../img/layout/select-selected.gif) repeat-x 0 0;
}

#form .box .fTextarea {display: block; padding-bottom: 7px; background: url(../../img/layout/textarea-bg-large-bottom.gif) no-repeat 0 100%;}
#form .box .fTextarea textarea {width: 412px; height: 242px; overflow: auto; background: url(../../img/layout/textarea-bg-large.gif) no-repeat 0 0;}

#form .box textarea {
	width: 285px;
	height: 83px;
	overflow: hidden;
	background: none;
	border: none;
}

#form .box fieldset {
	margin-bottom: 20px;
	border: none;
}

#form .box fieldset legend {
	color: #033477;
	font-size: 1.385em;
}

#form .box #s1 .fRadio input {width: auto; background: none;}

#form .box #s1 .fRadio label {color: #033477; font-size: 1.385em; margin-right: 20px; font-weight: bold;}

#form #s5 .note {float: right; margin-right: 10px; display: inline;}
#form #s5 .btn {clear: right; margin-right: 10px; display: inline;}

#form .box .btn {
	float: right;
	margin-right: 20px;
	text-indent: -1000em;
	width: 167px;
	height: 31px;
	overflow: hidden;
	background: url(../../img/layout/btn-submit.gif) no-repeat 0 0;
}

.btn.hover {
	background-position: 0 -31px !important;
}


#terms .box {width: 960px;}

#terms h4 {color: #033477; margin: 20px 0 10px;}

#terms h1 {font-size: 1.538em; margin: 0; color: #033477;}
#terms .box li {list-style: none; margin-bottom: 0.5em;}



#comments .box {padding-top: 10px;}
#comments .box h1 {margin: 0; padding-bottom: 20px; font-weight: normal; color: #033477; font-size: 1.846em; background: url("../../img/layout/sep-item.png") no-repeat scroll 50% 100%;}

#comments .box .item {padding: 10px 0; background: url("../../img/layout/sep-item.png") no-repeat scroll 50% 100%; font-size: 0.923em;}

#comments .box .item h2 {margin: 0;font-size: 1.385em; color: #033477; font-weight: normal;}
#comments .box .item h3 {margin: 0 0 10px; font-size: 0.917em; font-weight: normal;}
#comments .box .item p {margin: 0;}

#comments form h2 {font-size: 1.538em; color: #033477; font-weight: normal;}

#comments form p {margin: 0;}


.fSide {float: left; width: 50%;}
.fSide.b {float: right;}

#comments .box input {
	float: left;
	background: url(../../img/layout/input-sml.png) no-repeat 0 0;
	border: none;
	font-size: 1em;
	line-height: 1em;
	margin-right: 6px;
	margin-bottom: 10px;
	padding: 8px 10px;
	font-family: Arial, sans-serif;
	color: #033477;
	width: 127px;
}

.fieldError {margin-bottom: 5px;}
.error {margin-bottom: 10px; display: block;}

#comments input#email {margin-right: 0;}

#comments textarea {
	margin-bottom: 10px;
	font-size: 1em;
	line-height: 1em;
	padding: 8px 10px;
	font-family: Arial, sans-serif;
	color: #033477;
	width: 280px;
	height: 67px;
	background: url(../../img/layout/textarea-bg-300.gif) no-repeat 0 0;
	border: none;
}

#comments .box .btn {
	float: right;
	margin-right: 0;
	padding: 0;
	text-indent: -1000em;
	width: 105px;
	height: 31px;
	overflow: hidden;
	background: url(../../img/layout/btn-submit-review.gif) no-repeat 0 0;
}