/*[large.less] | 701 and over | cascades from global.css |
"desktop" version
includes another media between 701 & 836 at the bottom as it needed the breakpoint
*/
/*INDEX. See comments below for more info

1=Reset### not needed
2=Typography, links and images###  not needed
3=forms (if needed)###
4=tables (if needed)###  not needed
5=helpers and misc###  not needed
6=outside structural framework.###
7=internal structural framework.###
8=individual structural framework.###
9=older browser tweaks not liquid ###
10=extra breakpoint (think tablet)###

*/
/* ! MIXIN FOR WIDTH */
/* ! MIXIN FOR PADDING, SHORTHAND */
/* ! MIXINS FOR PADDING, INDIVIDUAL */
/* ! MIXIN FOR MARGIN, SHORTHAND */
/* ! MIXINS FOR MARGIN, INDIVIDUAL */
/*5=helpers

#########################################################################################################################################################################################################################################*/
.photoIcon {
  background: url(/img/bg/photoIcon.png) no-repeat 0 0;
  padding-left: 65px;
  min-height: 50px;
}
/*6=forms

#########################################################################################################################################################################################################################################*/
/*sidebysideforms*/
.side_by_side .form_item {
  clear: both;
  border-bottom: 1px solid #e2ddd2;
  margin-bottom: 7px;
  padding-bottom: 8px;
}
.side_by_side .form_item:before,
.side_by_side .form_item:after {
  content: "";
  display: table;
}
.side_by_side .form_item:after {
  clear: both;
}
.side_by_side .form_item {
  zoom: 1;
}
.side_by_side label {
  float: left;
  width: 30%;
  margin-right: 3%;
}
.side_by_side input,
.side_by_side button,
.side_by_side textarea,
.side_by_side select {
  float: left;
  width: 30%;
}
.side_by_side .helper {
  clear: right;
  float: right;
  width: 30%;
}
.side_by_side .err_msg {
  float: right;
  width: 30%;
}
.side_by_side .check_box input,
.side_by_side .check_box label,
.side_by_side .check_box .helper,
.side_by_side .check_box .err_msg {
  float: none;
  width: auto;
}
/*6=outside structural framework. The main website structure - not really to do with the inside of pages.
Usually things that appear on every page.
#########################################################################################################################################################################################################################################*/
/* {
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}*/
body {
  background-image: url(/img/bg/mainbg_large.jpg);
  background-position: center 3.8em;
  background-repeat: no-repeat;
}
#container_all {
  position: relative;
  max-width: 836px;
  margin: 0 auto;
}
#main_wrap {
  background-image: url(/img/bg/bookrepeat_large.jpg);
  background-position: center -39px;
  background-repeat: repeat-y;
  padding-bottom: 0;
  /*not needed on this style sheet*/
}
#main_wrap:before,
#main_wrap:after {
  content: "";
  display: table;
}
#main_wrap:after {
  clear: both;
}
#main_wrap {
  zoom: 1;
}
#main {
  background: url(/img/bg/booktop_large.jpg) no-repeat center top;
  /*padding-left:4.7846889952153110047846889952153%; 40/836
padding-right:4.7846889952153110047846889952153%;*/
  /*.padding-left(836,30);
.padding-right(836,30);*/
  padding-left: 4.784688995215311%;
  padding-right: 4.784688995215311%;
  padding-top: 2.9em /*43px*/;
}
#main:before,
#main:after {
  content: "";
  display: table;
}
#main:after {
  clear: both;
}
#main {
  zoom: 1;
}
#branding {
  height: 16em;
  /*this allows for the nav height which is ab pos here. em so it grows with text*/
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 2.3923444976076555023923444976077%;
  /*20/836*/
  padding-right: 2.3923444976076555023923444976077%;
}
#branding h1 {
  margin: 84px 0 0 0;
  padding: 0;
  position: relative;
  /*to bring it above the headline*/
}
#branding h1 a {
  display: block;
  background-image: url(/img/bg/hl_dennis.png);
  background-position: center top;
  background-repeat: no-repeat;
  padding: 0;
  width: 175px;
  height: 30px;
  overflow: hidden;
  text-indent: -999em;
  margin: 0px auto 0px auto;
  border: none;
}
#branding h2 {
  background-image: url(/img/bg/secret_breakers_large.png);
  background-position: center top;
  background-repeat: no-repeat;
  padding: 0;
  width: 481px;
  height: 103px;
  overflow: hidden;
  text-indent: -999em;
  margin: -27px auto 0px auto;
}
.skiplink {
  display: inline;
  margin: 0;
}
.skiplink a {
  position: absolute;
  right: 10px;
  top: 10px;
  overflow: hidden;
  width: 10em;
  text-align: right;
  left: -999em;
  border: none;
}
.skiplink a:active,
.skiplink a:focus {
  left: 0;
}
#nav {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 188px;
  padding: 0;
}
#nav {
  padding: 0;
}
#menu-helens-menu {
  margin: 0;
  line-height: 10px;
}
#nav li {
  display: inline;
}
#nav a,
#nav a:visited {
  display: inline;
  font-style: italic;
  border-right: 1px solid #eae6c8;
  padding-left: 5px;
  padding-right: 5px;
  border-bottom: none;
  /*undo global*/
  padding-top: 0;
  padding-bottom: 0;
}
/*undo mobile stuff*/
/*
#nav .current-menu-item a, #nav  .current-menu-item a:visited {
color:#ffcb01;
}*/
#nav ul > li > a,
#nav ul > li > a:visited {
  font-weight: normal;
}
#nav #menu-item-286 {
  white-space: pre;
}
/*secind level*/
/*hidefromscreen - as this appears below*/
#nav li dl {
  border: 0;
  /*clip: rect(0 0 0 0);*/
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  left: -999em;
  width: 1px;
  line-height: 20px;
  background: url(/img/bg/pencilborder.png) no-repeat center bottom;
  padding-bottom: 20px;
  white-space: normal;
}
#nav dl dt {
  font-family: 'IMFELLDWPicaPROItalic', georgia, 'Times New Roman', serif;
  color: #990b0b;
  font-size: 24px;
  line-height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  letter-spacing: normal;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: normal;
}
#nav li dl dd {
  display: inline;
  border-right: 1px solid #990b0b;
  white-space: nowrap;
}
#nav li dl dd:last-child {
  border-right: none;
}
#nav dl a,
#nav dl a:visited {
  border-bottom: none;
  color: #990b0b;
  border-right: none;
}
#nav dl a:hover {
  color: #444;
}
#nav dl a.onpage,
#nav dl a.onpage:visited {
  color: #222;
}
/*reshow here for each page that needs it*/
.page-id-112 #menu-item-274 dl,
.parent-pageid-112 #menu-item-274 dl,
.page-id-5 #menu-item-268 dl,
.parent-pageid-5 #menu-item-268 dl,
.page-id-12 #menu-item-286 dl,
.parent-pageid-12 #menu-item-286 dl,
.page-id-74 #menu-item-282 dl,
.parent-pageid-74 #menu-item-282 dl,
.page-id-52 #menu-item-276 dl,
.parent-pageid-52 #menu-item-276 dl,
.page-id-6 #menu-item-268 dl,
.parent-pageid-6 #menu-item-268 dl {
  clip: auto;
  height: auto;
  margin: auto;
  overflow: visible;
  padding: auto;
  top: 6.7em;
  left: auto;
  width: 78.94736842105263%;
  padding-left: 10.526315789473683%;
  padding-right: 10.526315789473683%;
}
/*undoes this from the global style sheet - poss should be dpoing this server side
but this ok in this instance*/
#nav dt,
#nav .extra_repeated_item {
  clip: auto;
  height: auto;
  margin: auto;
  overflow: visible;
  padding: auto;
  position: static;
  width: auto;
}
.page-parent #main,
.page-child #main {
  padding-top: 8.2em /*122px*/;
}
.page-id-12 #main,
.parent-pageid-12 #main,
.page-id-52 #main,
.parent-pageid-52 #main {
  padding-top: 142px;
  padding-top: 9.5em /*142px*/;
}
#content {
  padding-top: 20px;
}
#socialnav_wrap {
  padding-bottom: 20px;
  background: url(/img/bg/nothingtoblack.png) repeat-x center bottom;
}
#socialnav_wrap:before,
#socialnav_wrap:after {
  content: "";
  display: table;
}
#socialnav_wrap:after {
  clear: both;
}
#socialnav_wrap {
  zoom: 1;
}
#socialnav {
  list-style: none;
  margin: 0;
  margin-left: 8.133971291866029%;
  margin-right: 8.133971291866029%;
  padding: 20px 20px 0 20px;
  background: url(/img/bg/pencilborder.png) no-repeat center top;
  border: none;
  /*width:408px; need the width here*/
}
#socialnav li {
  float: left;
  width: 20.606060606060606%;
  width: 136px;
  margin-right: 10px;
}
#socialnav li img {
  float: left;
  width: auto;
}
#footer #normalfooternav {
  list-style: none;
  margin: -50px 0 0 0;
  text-align: center;
  margin-right: 2.3923444976076556%;
  width: 38.27751196172249%;
  float: right;
}
#footer #normalfooternav li {
  display: inline;
  border-left: 1px solid #454131;
  padding-left: 3px;
}
#footer #normalfooternav li:first-child {
  border-left: none;
}
#footer #normalfooternav li a {
  display: inline;
}
#footer a,
#footer a:visited {
  color: #454131;
  border-bottom: none;
}
/*#guide{
width:100%;
background:url(/img/bg/guide.png) no-repeat top center;
height:2000px;
top:500px;
position:absolute;
display:none;
}*/
/*7=internal structural framework. Anything that isn't to do with the overall structure and isn't an individual page.
Eg columns, inner navigation etc. Things that would appear on more than one page but probably not on every page.
#########################################################################################################################################################################################################################################*/
.image_swapper h1 {
  overflow: hidden;
}
.image_swapper .intro {
  overflow: hidden;
}
.image_swapper .swapthis {
  visibility: hidden;
  display: inline;
}
.image_swapper_left .swapthis {
  float: left;
  margin-right: 20px;
}
.image_swapper_right .swapthis {
  float: right;
  margin-left: 20px;
}
.image_swapper_right .swapwiththis {
  position: absolute;
  right: 0;
  top: 0;
}
.image_swapper_left .swapwiththis {
  position: absolute;
  left: 20px;
  top: 0;
}
.aside1_pattern {
  margin-left: -8.214285714285714%;
  margin-right: -13.928571428571429%;
  position: relative;
  background: url(/img/bg/blogtop.png) no-repeat 0 0;
  margin-top: 20px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 20px;
}
.aside1_pattern_inner:before,
.aside1_pattern_inner:after {
  content: "";
  display: table;
}
.aside1_pattern_inner:after {
  clear: both;
}
.aside1_pattern_inner {
  zoom: 1;
}
.aside1_pattern .aside1_pattern_inner {
  padding-left: 6.432748538011696%;
  padding-right: 11.695906432748536%;
  background: url(/img/bg/blogbot.png) no-repeat 0 bottom;
}
.aside1_pattern .cheeky_clip {
  position: absolute;
  width: 94px;
  height: 33px;
  background: url(/img/bg/clip.png) no-repeat 0 0;
  top: 40px;
  right: 0;
}
.grid_3 .aside1_pattern {
  margin-left: -13.88888888888889%;
  margin-right: -27.77777777777778%;
  background: url(/img/bg/notepapertopsmall.png) no-repeat 0 0;
}
.grid_3 .aside1_pattern .aside1_pattern_inner {
  padding-left: 9.803921568627452%;
  padding-right: 19.607843137254903%;
  background: url(/img/bg/notepaperbotsmall.png) no-repeat 0 bottom;
}
.grid_row {
  clear: both;
  margin-left: -2.6455026455026456%;
  margin-right: -2.6455026455026456%;
}
/*
.grid_row{
clear:both;
.offset-left(756,28);
.offset-right(756,26);
.padding-left(756,8);
.padding-right(756,6);
}
*/
.grid_row:before,
.grid_row:after {
  content: "";
  display: table;
}
.grid_row:after {
  clear: both;
}
.grid_row {
  zoom: 1;
}
.grid_left {
  float: left;
  padding-left: 2.512562814070352%;
  padding-right: 2.512562814070352%;
  margin-right: 2.512562814070352%;
}
.grid_right {
  float: right;
  padding-left: 2.512562814070352%;
  padding-right: 2.512562814070352%;
  margin-left: 2.512562814070352%;
}
.grid_1 {
  width: 1.0050251256281406%;
}
.grid_3 {
  width: 18.090452261306535%;
}
.grid_3_nopadd {
  width: 23.115577889447238%;
  padding-left: 0;
  padding-right: 0;
}
.grid_3_nopadd_right {
  width: 20.603015075376884%;
  padding-right: 0;
}
.grid_3_nopadd_left {
  width: 20.603015075376884%;
  padding-left: 0;
}
.grid_4 {
  width: 26.633165829145728%;
}
.grid_5 {
  width: 35.175879396984925%;
}
.grid_5_nopadd {
  width: 40.20100502512563%;
  padding-left: 0;
  padding-right: 0;
}
.grid_5_nopadd_left {
  width: 37.68844221105528%;
  padding-left: 0;
}
.grid_5_nopadd_right {
  width: 37.68844221105528%;
  padding-right: 0;
}
.grid_6 {
  width: 43.71859296482412%;
}
.grid_7 {
  width: 52.26130653266332%;
}
.grid_8 {
  width: 60.80402010050251%;
}
.grid_9 {
  width: 69.34673366834171%;
}
.grid_10 {
  width: 77.88944723618091%;
}
.grid_12 {
  padding-left: 2.512562814070352%;
  padding-right: 2.512562814070352%;
  clear: both;
}
.grid_last {
  margin-right: 0;
  margin-left: 0;
}
#main .grid_right img {
  max-width: 100%;
}
.call_box,
.call_box_alt {
  padding: 18px 20px 0 20px;
}
.call_box_nopadding,
.call_box_alt_nopadding {
  padding: 18px 0 0 0;
}
.call_box_nopadding h2:first-child,
.call_box_alt_nopadding h2:first-child {
  padding-top: 0;
}
/*this overwrites the global/main which is a little smaller for mobile*/
#main h1.custompageheader {
  font-size: 52px;
  line-height: 60px;
  letter-spacing: -2px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border: none;
}
.flleft,
.alignleft {
  float: left;
  margin-right: 20px;
}
.flright,
.alignright {
  float: right;
  margin-left: 20px;
}
/*.grid_7 .extract{
.padding-left(416,20);
.padding-right(416,20);
.offset-left(416,20);
.offset-right(416,20);
}*/
.extract .extract_cite {
  background: url(/img/bg/bookicon.png) no-repeat 0 0;
  padding-left: 100px;
  min-height: 3.4em;
}
.extractlightblue .extract_cite {
  background: url(/img/bg/bookiconlightblue.png) no-repeat 0 0;
}
.extractyellow .extract_cite {
  background: url(/img/bg/bookiconyellow.png) no-repeat 0 0;
}
.extractgreen .extract_cite {
  background: url(/img/bg/bookicongreen.png) no-repeat 0 0;
}
.extractred .extract_cite {
  background: url(/img/bg/bookiconred2.png) no-repeat 0 0;
}
.extract {
  background: url(/img/bg/darktexture.png) repeat 0 0;
}
.extract_content {
  padding-left: 20px;
  padding-right: 20px;
}
.edit-link {
  display: inline;
  position: absolute;
  left: 0;
  bottom: 0;
}
/*.pattern_defaultlanding .custompageheader{
.padding-left(796,20);
.padding-right(796,20);
}*/
.pattern_defaultlanding .extract {
  padding-left: 4.807692307692308%;
  padding-right: 4.807692307692308%;
  margin-left: -4.807692307692308%;
  margin-right: -4.807692307692308%;
}
/*blog posts list*/
.post_list article {
  clear: both;
  margin-bottom: 20px;
}
.post_list article:before,
.post_list article:after {
  content: "";
  display: table;
}
.post_list article:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
.post_list h1,
.post_list .entry-content {
  float: left;
  width: 66.66666666666666%;
}
.post_list footer {
  float: right;
  width: 29.71014492753623%;
}
.post_list footer span {
  display: block;
}
.post_list footer .sep {
  display: none;
}
.post_list .the_date {
  font-family: 'IMFELLDWPicaPRORegular', georgia, 'Times New Roman', serif;
  font-size: 20px;
  line-height: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  letter-spacing: normal;
}
/*sidebar*/
.widget-area #socialside li#mailingside {
  width: 39px;
}
.widget-area #socialside ul {
  *zoom: 1;
}
.widget-area #socialside ul:before,
.widget-area #socialside ul:after {
  content: "";
  display: table;
}
.widget-area #socialside ul:after {
  clear: both;
}
.widget-area #socialside li {
  width: 30px;
  height: 39px;
  float: left;
}
.widget-area #socialside li img {
  margin: 0;
  margin-right: 5px;
  max-width: 100%;
}
.widget-area #socialside li a {
  border: none;
}
.widget-area #socialside li span {
  display: none;
}
.grid_row .center1spacepattern {
  width: 82.91457286432161%;
  margin-left: 8.542713567839195%;
}
/*8=individual structural framework. Anything that is unique to a page. Eg the home page. This could be split and loaded to each page if needed.
#########################################################################################################################################################################################################################################*/
/*about page*/
.page-id-5 .call_box_nopadding img {
  max-width: 116px;
}
/*home page - so much is shared between large and medium it makes sense to share a less file.*/
/*[homepage.less]*/
#pleased {
  width: 55.769230769230774%;
  float: right;
}
#youfind {
  clear: both;
}
#youfind p {
  width: 72.11538461538461%;
  float: left;
  margin-top: -8px;
}
#blogdiarycomp {
  clear: both;
  *zoom: 1;
}
#blogdiarycomp:before,
#blogdiarycomp:after {
  content: "";
  display: table;
}
#blogdiarycomp:after {
  clear: both;
}
#blogdiarycomp h2 {
  padding-top: 6px;
}
#blogdiarycomp p {
  width: 72.11538461538461%;
  float: right;
}
.homepagecontent .grid_5 {
  text-align: left;
}
.homepagecontent #welcometosite span#officialwebsite {
  display: block;
}
#portfront {
  margin-left: -2.403846153846154%;
  margin-top: -10px;
  float: left;
}
#foldingpic {
  margin-right: -7.211538461538461%;
  margin-top: 0;
  width: 29.807692307692307%;
  float: right;
  clear: both;
}
#boxpic {
  margin-left: -4.807692307692308%;
  margin-top: 0;
  float: left;
  width: 30.048076923076923%;
  margin-bottom: 0;
}
#staytouch {
  clear: both;
}
#fromtheblog h2 {
  padding-left: 7.183908045977011%;
  padding-right: 12.35632183908046%;
}
#latest_book img,
#next_book img {
  float: right;
  margin-left: 10px;
  margin-top: 0;
}
#latest_book a img,
#next_book a img {
  float: none;
  margin-left: 0;
}
#next_book {
  clear: both;
}
.homepagecontent #buynow img {
  margin: 0;
  max-width: 100% !important;
}
/*[end homepage.less]*/
/*faqs*/
.page-id-66 h2 {
  font-family: 'IMFELLDWPicaPROItalic', georgia, 'Times New Roman', serif;
}
.page-id-66 h2 span {
  font-family: 'IMFELLDWPicaPRORegular', georgia, 'Times New Roman', serif;
}
.page-id-66 h2 span:last-child {
  margin-left: 4px;
}
/*9=old browser teaks
#########################################################################################################################################################################################################################################*/
/*sorting out old browser to stop them from being fluid*/
.oldie {
  min-width: 836px;
}
.oldie body {
  min-width: 836px;
}
.oldie #container_all {
  width: 836px;
}
/*ie7 does weird stuff with line height so not wrapping it*/
.ie7 #nav dl {
  left: 0;
}
.ie7 #nav #menu-item-286 {
  white-space: normal;
}
.ie7 #nav li {
  line-height: 20px;
}
/*.ie7 #nav li{
white-space: nowrap;
}*/
.ie7 #nav li dl dd {
  white-space: normal;
}
/*10=extra breakpoint (think tablet... max width is 836 but some browsers include scrollbar so add bit extra)
#########################################################################################################################################################################################################################################*/
@media only screen and (min-width: 700px) and (max-width: 849px) {
  /*
    .pattern_defaultlanding{
    position:relative;
    }

    .pattern_defaultlanding .intro{
    min-height:6em;
    }

    .pattern_defaultlanding .image_container{
    position:absolute;
    right:0;
    }

    .pattern_defaultlanding .custompageheader{
    float:left;
    .width(796,416);
    }
*/
  #footer #normalfooternav {
    margin-top: -70px;
  }
  #footer #normalfooternav li {
    border-left: none;
    float: none;
    display: block;
  }
  .pattern_defaultlanding .extract_container {
    clear: both;
    width: auto;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .pattern_defaultlanding .extract {
    margin-left: -2.512562814070352%;
    margin-right: -2.512562814070352%;
    padding-left: 2.512562814070352%;
    padding-right: 2.512562814070352%;
  }
  .aside1_pattern .cheeky_clip {
    width: 91px;
    background-position: 0 0;
    right: 0px;
  }
  /*home page*/
  #portfront {
    margin-top: 15px;
    width: 45%;
  }
  #blogdiarycomp h2 {
    margin-left: -20px;
    margin-right: -20px;
  }
}
/*[end large.less]*/