/*
Theme Name: High Street Bakery Ltd.
Author: Creare Communications
Author URI: www.creare.co.uk
Description: The theme for High Street Bakery

*/

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}

---------- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/


/* =Reset
-------------------------------------------------------------- */

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, img, ins, kbd, q, s, samp, small, strike, 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; }
body {  background-image:url(images/bg3.jpg); font-size: 62.5%; line-height:1.5; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust:100%; -moz-text-size-adjust: none; /* sets font size to 11px, for 12px change to 75% */ }
img, img a { outline: none; border: none; }


/* spans */ 
.ital { font-style:italic; font-weight:400 !important; }
.clear { clear:both; }
.brown {  color:#5f2a1a; }
.pink { color:#e56b76; }
.red { color:#b40f1f; }
.green { color:#548a01; }
.purple { color:#6f368a; }
.top2 { margin-top:598px; }
.top1 { margin-top:383px; }
.bold { font-weight:600; }
.mar { margin-top:40px; }

/* heads */
h1, h2, h3, h4, .widget-title { font-family: 'Lobster', cursive; position:relative; }
h1 { font-size:3em; color:#5f2a1a; padding:46px 0 0;  }
h1 span { font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; text-transform:uppercase; }
h1.archive-title { font-size:2em; }
h2 {  font-size:2.4em; color:#5f2a1a; margin:10px 0 10px; }
h3 { font-size:2.4em; color:#5f2a1a; margin:10px 0 10px;  }
h4 { font-size:1.4em; color:#5f2a1a; margin:10px 0 10px; }
.widget-title { color:#5f2a1a; font-size:1.6em; margin:20px 0 10px 0; }
.entry-title a { text-decoration:none; }
.sidebar h3 { margin-bottom:0 !important; }

/* header */
.headerwrap { height:117px; background:url(images/header-bg.png) repeat-x; position:relative; width:100%; z-index:99999; }
header.mainhead { width:960px; margin:0 auto; position:relative; }
#logo { position:absolute; z-index:999; left:340px; top:15px; }
.phone { text-align:right; float:right; width:30%; color:#9a4424; margin:15px 0 0 0; line-height:1.1; font-size:1.6em; font-family: 'Lobster', cursive; }
.phone a { display:block; font-size:1.7em; text-decoration:none; color:#5f2a1a; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; }
.share { float:left; width:20%; margin-top:20px; z-index:999999; }


/* nav */
nav.main-nav { position:absolute; top:76px; width:100%; }
nav.main-nav li { display:inline; font-size:1.6em; font-family: 'Lobster', cursive; }
nav.main-nav li a { display:block; color:#FFF; text-decoration:none; color:#FFF; font-weight:400; line-height:41px; float:left; }
nav.main-nav li a:hover { color:#fbe4a9; }
nav.main-nav ul { text-align:center; margin:0 auto; width:100%;  }
#menu-item-33 a { width:55px; }
#menu-item-30 a { width:80px; margin-right:269px; }
#menu-item-31 a { width:135px; }
#menu-item-32 a { width:75px; }
#menu-item-28 a { width:120px; }
#menu-item-29 a { width:70px; }
#menu-item-27 a { width:60px; }
#menu-item-26 a { width:85px; }
#menu-item-36 a { width:45px; }
#menu-item-68 a { width:45px; }

/* slider area */

#slider { width:100%; height:715px; background-color:#FFF; display:block; position:absolute; z-index:-1; }
#map-canvas  { width:100%; height:500px; display:block; position:absolute; z-index:-1; }
#slider ul { width:100%; height:715px; display:block; overflow:hidden;  }
#slide1 { background:url(images/slider-bread-1.jpg) center no-repeat; width:100%; height:715px; display:block; } /* bread */
#slide3 { background:url(images/slider-confectionery-1.jpg) center no-repeat; width:100%; height:715px; display:block; } /* confectionery */
#slide2 { background:url(images/slider-cakes-1.jpg) center no-repeat; width:100%; height:715px; display:block; } /* cakes */
#slide4 { background:url(images/slider-catering-1.jpg) center no-repeat; width:100%; height:715px; display:block; } /* catering */
#slide5 { background:url(images/slider-van-1.jpg) center no-repeat; width:100%; height:715px; display:block; } /* van */
#slider p.outline { font-size: 7.8em; -webkit-text-stroke-width: 24px; -webkit-text-stroke-color: #FFFFFF; -webkit-text-fill-color: #000000; font-family: 'Lobster', cursive; position:absolute; top: 250px; line-height:0.8; }
#slider p.top { font-size: 7.8em; font-family: 'Lobster', cursive; position:absolute; top: 250px; line-height:0.8; }
#slide1 span { display:block; margin-left:135px; }
#slide1 p { left:260px; }
#slide2 span { display:block; margin-left:160px; }
#slide2 p { left:0px; }
#slide3 span { display:block; margin-left:135px; }
#slide3 p { left:0px; }
#slide4 span { display:block; margin-left:253px; }
#slide4 p { left:0px; }
#slide5 span { display:block; margin-left:151px; }
#slide5 p { left:0px; }
.quad { width:100%; position:absolute; top:454px; height:243px; }
.quad ul { width:100%; height:243px; display:block; }
.quad li { width:218px; height:243px; display:block; overflow:hidden; float:left; text-indent:-999px; }
.quad li a { display:block; width:100%; height:100%; }
#snack { background:url(images/sprite2.png) -495px bottom no-repeat; }
#snack:hover { background-position:-495px top; }
#cake { background:url(images/sprite2.png) right bottom no-repeat; float:right; }
#cake:hover { background-position:right top; }
#biz { background:url(images/sprite2.png) left bottom  no-repeat; margin-right:30px; }
#biz:hover { background-position:left top;  }
#whole { background:url(images/sprite2.png) -247px bottom no-repeat; margin-right:30px; }
#whole:hover { background-position:-247px top; }

/* content */
.content { width:960px; margin:0 auto; position:relative; }
.contentwrap { background-image:url(images/bg.jpg); overflow:hidden; }
.border { height:7px; width:100%; background:url(images/border-bg.jpg) repeat-x; clear:both; display:block; }
.mapbox { background-image:url(images/bg2.jpg); width:35%; float:right; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); margin-top:30px;  overflow:hidden; padding-bottom:20px; }
.right { width:35%; float:right; margin-top:60px; margin-bottom:30px; overflow:hidden; }
.right img, .sidebar img { width:98%; height:auto; border:3px solid #c9bf9a; float:right; margin-bottom:30px; }
.timesbox { background-image:url(images/bg2.jpg); width:30%; float:right; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); margin-top:30px; overflow:hidden; padding-bottom:20px; margin-right:4%; text-align:center; }
.sidebar { width:25%; float:right; padding-bottom:30px; }
.mapbox p { color:#5f2a1a; font-size:1.3em; margin-bottom:10px; padding:5% 33% 0 5%; background:url(images/fresh.jpg) right top no-repeat; }
.timesbox p { color:#5f2a1a; font-size:1.3em; margin-bottom:10px;  }
.sidebar p, .sidebar ul { color:#5f2a1a; font-size:1.3em; margin-bottom:10px; }
.mapbox h3 { text-align:center; margin:30px 0 0; }
.minimap img { border:3px solid #c9bf9a; margin:5%; width:88%; height:auto; }
.text, .news { width:60%; float:left; padding-bottom:30px; }
.text-left { width:49%; float:left; padding:20px 0 30px; }
.text-right { width:49%; float:right; padding:93px 0 30px; }
.text p, .news p, .text-left p, .text-right p, .text-left ul, .text-right ul, .text ul { font-size:1.3em; margin-bottom:10px; color:#5f2a1a; }
.text a, .text-left a, .text-right a, .sidebar a { color:#5f2a1a; }
.text a:hover, .text-right a:hover, .text-left a:hover, .sidebar a:hover { color:#ab4f2e; }
.text li, .text-left li, .text-right li { padding-left:24px; background:url(images/bullet.gif) left 5px no-repeat; }
.faintbg { background:url(images/baker.jpg) center bottom no-repeat; min-height:530px; }  
#wheat { position:absolute; top:0 ; left:-30px; }
.entry-content { position:relative; }
.midwrap { width:100%; background-image:url(images/bg2.jpg); clear:both; overflow:hidden; padding-bottom:30px;  }
.news ul { width:100%; }
.news li {width:47%; margin-right:2%; float:left; display:block; }
.news p.newstitle { font-size:1.6em; color:#5f2a1a; margin:10px 0 0 0; font-family: 'Lobster', cursive; padding:0 !important; line-height:1; }
.news p.newstitle a { text-decoration:none; color:#5f2a1a; }
.news p.newstitle a:hover { color:#ab4f2e; }
.news p.newsdate {font-size:1.4em; color:#ab4f2e; margin:10px 0 10px; font-family: 'Lobster', cursive; }
.news h3 { display:block; }
.visit { width:35%; float:right; margin-bottom:20px; }
.visit img { border:3px solid #c9bf9a; width:99%; height:auto; margin-top:30px; }
.button2 { width:114px; height:28px; display:block; background:url(images/button-sprite.png) left bottom no-repeat; color:#FFF !important; text-align:center; font-family: 'Lobster', cursive; font-size:1.6em; margin-top:10px; text-decoration:none; -webkit-font-smoothing: antialiased; line-height:28px;  }
.button2:hover, .cta:hover { color:#fbe4a9 !important; background-position:left top; } 
.cta { width:100%; height:55px; display:block; background:url(images/cta.png) left bottom no-repeat; color:#FFF !important; text-align:center; font-family: 'Lobster', cursive; font-size:1.8em; text-decoration:none; -webkit-font-smoothing: antialiased; line-height:55px; clear:both; }

.addytrio { width:100%; clear:both; margin-bottom:30px; overflow:hidden; }
.addytrio li { background-image:url(images/bg2.jpg); width:30%; float:left; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); margin-right:3%; overflow:hidden; padding-bottom:20px; margin-bottom:20px;  }
.addytrio li img {  border:3px solid #c9bf9a; margin:5%; width:88%; height:auto; }
.addytrio li div li { background:none; width:100%; box-shadow:none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin:0; }
.addytrio li div li, .addytrio li p  { font-size: 1.6em; color:#5f2a1a; margin:0 5%;  padding:0; }
.addytrio li p a { color:#5f2a1a; text-decoration:none; font-weight:bold; }
.addytrio li p a.button2 { font-size:1em; float:left; margin-right:3%; }
.slider, .mainpic { width:100%; height:400px; overflow:hidden; display:block; margin-top:50px; border:3px solid #c9bf9a; }
.slider img, .mainpic img { width:100%; height:auto; }
#pic1 { margin-top:61px; }


.selection { width:100%; clear:both;  }
.selection li { background-image:url(images/bg2.jpg); width:23%; float:left; -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); margin-right:1.95%; overflow:hidden; padding-bottom:20px; min-height:376px; margin-bottom:30px;  }
.selection li img { border:3px solid #c9bf9a; margin:5%; width:88%; height:auto; }
.selection li p.cakename { font-size: 1.6em; color:#5f2a1a; margin:0 5%;  padding:0; font-family: 'Lobster', cursive; margin-bottom:10px; text-align:center; }
.selection li p.cakedesc { font-size:1.3em; margin:0 5%; color:#5f2a1a; margin-bottom:10px; }
.selection li p.cakedesc span { font-size:1.6em; color:#b40f1f; font-family: 'Lobster', cursive; -webkit-font-smoothing: antialiased; }
.selection a { text-align:center; margin:0 auto; }



/* footer */
.footerwrap { width:100%; background-image:url(images/bg3.jpg); clear:both;  }
footer.main-foot { width:960px; margin:0 auto; padding:2% 0 2% 0; position:relative; }
footer.main-foot li { display:inline; font-size:1em; }
footer.main-foot a { text-decoration:none; color:#5f2a1a; padding:0 1.2% 0 0; }
footer.main-foot p, footer.main-foot ul { color:#5f2a1a; font-size:1em; padding-left:25%; } 
footer.main-foot a:hover { color:#ab4f2e; }
#address { margin-top:20px; }
#bread { position:absolute; top:-30px; }



#searchsubmit { color:#FFF; background-color:#5f2a1a; text-transform:uppercase; padding:0 3%; float:right; line-height:31px; font-size:1.2em; border:none; cursor:pointer; }
#searchsubmit:hover { background-color:#ab4f2e !important; }
label.screen-reader-text { color:#5f2a1a; font-size:1.3em; }
#s { line-height:26px; color:#636363; font-size:1.2em; display:block; width:97%;  }
td, th { padding:2%; border:1px solid #c9bf9a; font-size:1.3em; }
th { color:#5f2a1a; font-weight:bold;  }
table { margin-bottom:20px; color:#5f2a1a; }
.widget_search { margin:30px 0 20px; overflow:hidden; clear:both; }
.sidebar img { margin-top:60px; }

.tablecol { width:20%; }
.tablecol2 { width:35%; }
#breadcrumbs {  margin-top:10px; font-size:1em; }
#breadcrumbs a { color:#5f2a1a !important; }
#breadcrumbs a:hover { color:#ab4f2e !important; }




/* form */
#wpcf7-f26-p23-o1, #wpcf7-f100-o1 { background-image:url(images/bg2.jpg);-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4); margin-top:30px; overflow:hidden; padding:2%; width:96%; overflow:hidden; margin:20px 0; }
#wpcf7-f26-p23-o1 div.formcol, #wpcf7-f100-o1 div.formcol { width:45%; float:left; color:#636363; clear:none; }
#wpcf7-f26-p23-o1 div.formcol2, #wpcf7-f100-o1 div.formcol2 { width:45%; float:right; color:#636363; clear:none; margin-right:2% }
#wpcf7-f26-p23-o1 input, #wpcf7-f100-o1 input { padding:2%; font-size:1.2em; color:#999; width:98%; font-weight:300; }
#wpcf7-f26-p23-o1 textarea, #wpcf7-f100-o1 textarea {padding:2%; font-size:1.2em; color:#999; width:99%; clear:both; font-weight:300; }
#wpcf7-f26-p23-o1 div.wpcf7-validation-errors, #wpcf7-f26-p23-o1 div.wpcf7-mail-sent-ok, #wpcf7-f100-o1 div.wpcf7-validation-errors, #wpcf7-f100-o1 div.wpcf7-mail-sent-ok { padding:2%; color:#636363; font-size:1.2em; line-height:1.4; overflow:hidden; clear:both; }
#wpcf7-f26-p23-o1 input.wpcf7-submit, #wpcf7-f100-o1 input.wpcf7-submit { width:114px; height:28px; display:block; background:url(images/button-sprite.png) left bottom no-repeat; color:#FFF; text-align:center; font-family: 'Lobster', cursive; font-size:1.4em; margin-top:10px; text-decoration:none; line-height:20px; margin:0 auto; border:0; cursor:pointer; }
#wpcf7-f26-p23-o1 input.wpcf7-submit:hover, #wpcf7-f100-o1 input.wpcf7-submit:hover { color:#fbe4a9; background-position:left top; }
#wpcf7-f26-p23-o1 img { float:right; }
#wpcf7-f100-o1 input.wpcf7-file { color:#5f2a1a; }