/* box view look */

body{background-image:url("../images/BGHome.png")}


p.discreet,
#portal-breadcrumbs,
h1.documentFirstHeading{display:none}

.displayLeft{float:left}

/* #content-core img{max-width:45%} */
/* #content-core img.image-inline, #content-core .wide img, #content-core .wide.comp img{max-width:80%} */
#content-core img.image-left{margin:0;padding-right:0.5em}
#content-core img.image-right{margin:0;padding-left:0.5em}
#content-core img.image-inline{float:left}

#content-core .boxText img { display:block; float:none; margin:1em auto 0; }
#content-core .thin .boxText img { float:left; margin:3px 2% 5em; max-width:20%; }

/* width - if a portlet is used */
#portal-column-content.width-1\:2,
#portal-column-content.width-3\:4{max-width:984px;width:100%}

#content{ margin:auto; }
#content.mceContentBody {
    padding: 0 !important;
}
#content #content-core > div{padding:0}

/* Box view */
#content-core { width:101%; }

body.template-guides_box_view #content-core > div > div {
    display: inline;
    float: left;
    margin: 0 1% 10px 0;
    padding-bottom:5px;
    position:relative;
    width: 32.3333333%; 
    height:375px;
}
#content-core .boxText{padding-top:5px;height:87%;width:100%}
#content-core h2{font-size:30px;line-height:1.1em}
#content-core h3{font-size:19px;letter-spacing:0.07em;line-height:1.2em}
#content-core p{color:#fff;font-size:12px;line-height:18px;padding:0.5em 9%; }
#content-core p.whitebg { padding:0.5em 0; }
#content-core .thin p { float:left; padding:0.5em 6% 0.5em 0; max-width:70%; }

#content-core h4,
#content-core h3,  
#content-core h2{text-shadow:2px 2px #474747} 

#content-core h3, 
#content-core h2, 
#content-core li, 
#content-core .boxText a{color:#fff;padding:0.5em}
#content-core h4,
#content-core .white,
#content-core .boxButton a{color:#fff}
#content-core .black p{color:black !important}
#content-core .col2,
#content-core .col3,
#content-core .wide{width:65.66% !important}
#content-core .large.col2,
#content-core .large.col3,
#content-core .large{max-width:98% !important;min-width:98% !important;width:98% !important}

#content-core .thin { height:180px !important; min-height:180px; }
#content-core .thin .boxText{min-height:125px !important}
#content-core .tall{height:467px}
#content-core .thin .boxText{height:100px}

#content-core .right{background-position:bottom right} 

/* what to do if its a competition */
#content-core .comp .boxText{background:url("../images/Competition.png") no-repeat 0 0;min-height:90%px}
#content-core .comp h2, 
#content-core .comp h3{text-align:right}
#content-core .comp h3{padding-top:12px}
#content-core .comp h2{padding-top:12px}
#content-core .comp p{padding-top:0;padding-left:12px}
#content-core .comp img{float:right;height:auto}
#content-core .comp.wide img{float:left;text-align:center;clear:both}


/* the dog is big */
#content-core .medium.largeimage h2,
#content-core .medium.largeimage h3,
#content-core .medium.largeimage p,
#content-core .large.largeimage h2,
#content-core .large.largeimage h3,
#content-core .large.largeimage p{float:right;width:45% !important}

/* other big images */
#content-core .small.largeimage img{float:right !important}

/* what to do if no image just a quote */
#content-core .text{width:98%}
#content-core .quote,
#content-core .text,
#content-core .quote,
#content-core .text{
    font-size: 17px !important;
    font-style: italic;
    letter-spacing: 0.12em;
}
#content-core .quote{width:100% !important}
#content-core .text div{float:left;margin: 6px 0;max-height:100px;padding-right:10px}

/* column boxes */
#content-core .col2,
#content-core .col3{padding-top: 0}
#content-core .col2 div,
#content-core .col3 div{padding: 12px 0.5em}
#content-core .col2 div{float:left;width:46%}
#content-core .col3 div{float:left;width:31%}



#content-core .quote .boxText {
    padding: 12px 0 0 12px !important;
} 

/* sale image is large so pad text to fit */
#content-core .sale .boxText {
    margin-left: 12px !important;
}

.boxButton.emailbutton {
    text-align: right;
}
.boxButton.emailbutton div {
    display: inline;
    float: right;
}
.boxButton.emailbutton a {
    border-bottom: 0 !important;
}

/* end of guides box display page */

/* Individual Guides colour block at bottom of large display pages */


/* Individual Guides colour block at bottom of large display pages */
.guideRangeFoot {
    margin:auto;
    max-width:984px;
    padding:18px 0 20px;
    text-align:center;
    width:98%;
}

.guideRangeFoot .buttonlink {
    float:left;
    margin-right:1%;
    text-align:center;
    width:19.2%;
}

.guideRangeFoot .buttonlink:nth-child(5) { margin:0; }

.guideRangeFoot .buttonlink a {
    color:#FFF;
    font-size:23px;
    line-height:2.8em;
    text-decoration:none;
    text-shadow:2px 2px #474747;
}

/* mobile display */


@media only screen and (max-width: 1030px) {
    body.template-guides_box_view #content h2 { font-size:25px; }
}

@media only screen and (max-width: 810px) {
    body.template-guides_box_view #content-core img { max-width:45%; } 
    body.template-guides_box_view #content h2 { font-size:22px; }
}
    
@media only screen and (max-width: 770px) {
    body.template-guides_box_view #content-core > div > div { min-width:49%; }
    body.template-guides_box_view #content-core > div > div.wide { min-width:99%; }
    body.template-guides_box_view #content-core img { max-width:30%; }
    #content-core .thin { height:160px!important; min-height:160px; }
    body.template-guides_box_view #content-core > div > div { height:335px; }
    .guideRangeFoot .buttonlink a { font-size:20px; }
}

/* 600 x 1280 display */

@media only screen and (max-width: 610px) {
    body.template-guides_box_view #content-core img { max-width:30%; }
    body.template-guides_box_view #content-core .thin img { max-width:20%; }
    .guideRangeFoot .buttonlink a { font-size:18px; }
}
    
@media only screen and (max-width:550px) {
    .guideRangeFoot .buttonlink a { font-size:16px; }   
}

@media only screen and (max-width:500px) {
    .guideRangeFoot .buttonlink a { font-size:14px; }   
}

@media only screen and (max-width:450px) {
    .guideRangeFoot > div { text-align:center; }
    .guideRangeFoot .buttonlink {
        display:inline-block;
        float:none;
        margin-bottom:5px;
        width:31.33333%;
    }
    .guideRangeFoot .buttonlink a { font-size:14px; }   
}

@media only screen and (max-width: 485px) {
#content-core { width:100%; }
body.template-guides_box_view #content-core > div > div,
body.template-guides_box_view #content-core .boxText,
#content-core .col2, #content-core .col3, #content-core .wide{
    height:auto!important;
    max-width:100%;
    min-height:20px !important;
    min-width:100% !important;
    padding-bottom:20px;
    width:100% !important;
}
body.template-guides_box_view #content-core .comp.wide img{float:right}
#content-core img.image-inline, #content-core .wide img, #content-core .wide.comp img{max-width: 50%}
#content-core .wide .boxText h2, #content-core .wide .boxText h3, #content-core .wide.comp .boxText p{margin-left: 0}
    }
  

@media only screen and (max-width: 365px) {

.guideRangeFoot div a{font-size:12px}
    }
    


@media only screen and (max-width: 330px) {
    
}

    
@media only screen and (max-width: 308px) {
    
    
}