/**
* @title     CUSTOM CSS - customises styles from template.
*            
* @author    Equator Websites http://www.equatorwebsites.co.uk
*/

/* =============== EQUATOR WEBSITES =============== */

/* =============== DISPLAY PANEL IMAGES AND CONTENTS =============== */

/* Style content of display panels including guidance page and display panel admin page */

div.display-panel-module div.jsn-mod-newsflash div.jsn-article,
div.displaypanel-module div.jsn-mod-newsflash div.jsn-article,
div.website-display-panels-admin-page div.items-row div.item p,
div.guidance-page-image-module div.jsn-mod-newsflash div.jsn-article {
  text-align: center;
}

div.display-panel-module div.jsn-mod-newsflash div.jsn-article img,
div.displaypanel-module div.jsn-mod-newsflash div.jsn-article img,
#jsn-mainbody div.blog.website-display-panels-admin-page div.items-row div.item p img,
#jsn-mainbody div.blog.website-display-panels-admin-page div.items-row div.item h1 img,
#jsn-mainbody div.blog.website-display-panels-admin-page div.items-row div.item h2 img,
#jsn-mainbody div.blog.website-display-panels-admin-page div.items-row div.item h3 img,
div.guidance-page-image-module div.jsn-mod-newsflash div.jsn-article img {
  /* optionally, add image styling - border, transition etc */
}

div.website-display-panels-admin-page div.items-row div.item p img,
div.website-admin-guidance-page div.guidance-page-image-module p img{
  max-height: 80px;
  width: auto;
}

div.website-admin-guidance-page div.items-row div.item > div {
  max-width: 100%;
}

div.website-admin-guidance-page div.guidance-page-image-module {
  padding-left: 1em;
  padding-right: 1em;
  margin-right: 1em;
  max-width: 90%;
  float: left;
}

/* Style the "Meet the Team" display panel link images */

/* For JCE Mediabox up to 1.2.9 */
div.displaypanel-module.meet-the-team .jsn-article a.jcemediabox-image img.mavikthumbnail,
/* For JCE Mediabox 2.0.10 */
div.displaypanel-module.meet-the-team .jsn-article a.wfpopup img.mavikthumbnail {
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
}

/* =============== DISPLAY PANEL MODULE STYLES ============ */

/* Enhance and extend the template module styles provided */

/* Give these display panels a radius */
div.displaypanel-module.lightbox-1.jsn-modulecontainer div.jsn-modulecontainer_inner,
div.displaypanel-module.richbox-1.jsn-modulecontainer div.jsn-modulecontainer_inner {
  border-radius: 10px;
}
/* Add border with radius for these display panels */
div.displaypanel-module.lightbox-1.jsn-modulecontainer div.jsn-modulecontainer_inner {
  border: 2px solid #155773;
}
/* Padding sticks out of the box radius so radius that too */
div.displaypanel-module.lightbox-1.jsn-modulecontainer h3.jsn-moduletitle,
div.displaypanel-module.richbox-1.jsn-modulecontainer h3.jsn-moduletitle {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Enhance and extend button styles in display panel modules */

div.displaypanel-module a.link-button {
  transition: background-color 0.3s ease-out, box-shadow 0s;
  -moz-transition: background-color 0.3s ease-out, box-shadow 0s;
  -webkit-transition: background-color 0.3s ease-out, box-shadow 0s;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.9);
  font-weight: bold;
  text-align: center;
}

/* =============== DISPLAY PANEL MULTI-CONTENT LAYOUT ============ */

/* Manage the layout of multiple contents in a display panel including all screen widths */

/* Logos Panel */

/* Note on template behaviour for module flow - 1, 2, 3, 4 and 6 modules get flowed into */
/* their own number of columns, but 5 modules gets flowed into 4 columns. So there will */
/* always be an overflow with 5 modules. And also with 7 and others? */

/* Check for 5 modules in the logos panel */
div.displaypanel-module.logo-panel:first-of-type:nth-last-of-type(5) ~ div.displaypanel-module.logo-panel:nth-last-of-type(1) {
  width: 99.8%;
}

/* Meet the Team Panel */

/* Float the "Meet the Team" photos into a horizontal list and manage overflow for all screen widths */
div.displaypanel-module.meet-the-team div.jsn-article {
  float: left;
}
@media only screen and (min-width: 961px) {
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(4),
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(4) ~ div.jsn-article {
    width: 24.8%; /* for 4 items */
  }
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(5),
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(5) ~ div.jsn-article {
    width: 19.8%; /* for 5 items */
  }
}
@media only screen and (min-width: 769px) and (max-width: 960px), (min-device-width: 769px) and (max-device-width: 960px) {
/* Display the "Meet the Team" items in 3 columns */
  div.displaypanel-module.meet-the-team div.jsn-article {
    width: 33.1%;
  }
/* Manage the overflow - 4 items */
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(4) ~ div.jsn-article:nth-last-of-type(1) {
    width: 99.8%;
  }
/* Manage the overflow - 5 items */
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(5) ~ div.jsn-article:nth-last-of-type(1),
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(5) ~ div.jsn-article:nth-last-of-type(2) {
    width: 49.8%;
  }
}
@media only screen and (min-width: 481px) and (max-width: 768px), (min-device-width: 481px) and (max-device-width: 768px) {
/* Display the "Meet the Team" items in 2 columns */
  div.displaypanel-module.meet-the-team div.jsn-article {
    width: 49.8%;
  }
/* Manage the overflow - odd numbers of items */
  div.displaypanel-module.meet-the-team div.jsn-article:first-of-type:nth-last-of-type(odd) ~ div.jsn-article:nth-last-of-type(1) {
    width: 99.8%;
  }
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
/* Display the "Meet the Team" items in 1 column */
  div.displaypanel-module.meet-the-team div.jsn-article {
    width: 99.8%;
  }
}

/* =============== CUSTOM LINK ICONS =============== */

/* Checkbox icon */
.link-icon.jsn-icon-checkbox,
.menu-iconmenu .jsn-icon-checkbox > a > span,
.list-icon.jsn-icon-checkbox li .jsn-listbullet,
.jsn-icon-checkbox h3.jsn-moduletitle span.jsn-moduleicon {
	background-position: 0 -2796px;
}

/* =============== MAIN MENU =============== */

/* This website has long menu item titles in the main menu, which extends the menu too wide */
/* on desktop screens, so apply CSS to get the titles to wrap */
@media only screen and (min-width: 961px) {
  #jsn-menu ul.menu-mainmenu:not(.jsn-menu-mobile) > li > a span {
    width: min-content;
    width: -moz-min-content;
    width: -webkit-min-content;
  }
  #jsn-menu ul.menu-mainmenu:not(.jsn-menu-mobile) > li.parent > a::before {
    top: auto;
    bottom: 0.5em;
  }
  #jsn-header-inner #jsn-menu {
    margin-top: 12px;
  }
}

/* =============== ADMIN MENU =============== */

/* Admin Menu of menu style menu-topmenu but in position footer, nneds line height re-establishing */
#jsn-footer div.jsn-modulecontainer.admin-menu-module ul.menu-topmenu.menu-iconmenu > li > a {
    line-height: 24px;
}
/* Adjust the positioning and spacing of icons amd menu items */
#jsn-footer div.jsn-modulecontainer.admin-menu-module ul.menu-topmenu.menu-iconmenu [class*="jsn-icon-"] > a > span {
  padding-left: 20px;
}
#jsn-footer div.jsn-modulecontainer.admin-menu-module ul.menu-topmenu li:not(.jsn-menu-mobile-control) {
  padding-right: 16px;
}

/* =============== TEMPLATE WHITE SPACING =============== */

/* Template as delivered allows content to reach the edge of the window and flow behind scroll bar */
/* when displayed on desktop screens - so let's add a bit of space left and right */
@media only screen and (min-width: 961px) {
  #jsn-content #jsn-maincontent,
  div.jsn-modulescontainer {
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* =============== TYPOGRAPHY - CONTENT COLUMNS =============== */

/* Template as delivered allows text in typography columns to display a bit too near */
div.grid-layout div.grid-col div.grid-col_inner {
	margin-left: 1em;
	margin-right: 1em;
}
div.grid-layout div.grid-col:nth-of-type(1) div.grid-col_inner {
	margin-left: 0;
}
div.grid-layout div.grid-lastcol div.grid-col_inner {
	margin-right: 0;
}

/* =============== TYPOGRAPHY - LINE SPACING IN TITLES =============== */

h3 {
  line-height: 1.3em;
}

/* =============== BLOG PAGES =============== */

/* Add a bit of space between articles on blog pages */
body.jsn-layout-blog div.blog div.items-leading div[class*="leading-"]:not(.leading-0),
body.jsn-layout-blog div.blog div.items-row div.item {
  margin-top: 2.5em;
}

/* =============== K2 CATEGORY LIST PAGES =============== */

/* Add a bit of space between titles and articles on K2 blog pages */
body.jsn-com-k2.jsn-view-itemlist div#k2Container div#itemListSecondary div.catItemHeader {
  text-align: center;
  margin-bottom: 1em;
}

/* =============== IMAGES IN ARTICLES =============== */

div#jsn-mainbody div.item-page div[itemprop="articleBody"] img,
div#jcemediabox-popup-page div.item-page div[itemprop="articleBody"] img,
div#jsn-mainbody div#k2Container div.itemBody div.itemFullText img {
  margin: 0.2em 1em;
}

/* =============== PHOCA DOWNLOAD FILE LIST BOXES =============== */

/* Phoca provides a box of known height, uses line-height to make the */
/* text appear vertically-centred and uses text-align: center to centre */
/* the text in the area inside the padding */
/* But this has not considered the case of a restricted-width module */
/* which makes the text wrap and exceed the height of the box */
/* So we will use CSS positioning instead */
div.displaypanel-module.downloads-module .pd-document32 {
  line-height: initial; /* reset line-height to allow normal line-wrap appearance */
  position: relative; /* needed to allow absolute positioning of contained elements */
  min-height: 32px; /* for chosen icon size */
  height: initial; /* don't fix height but allow to expand if needed */
}
div.displaypanel-module.downloads-module .pd-document32 a {
  position: absolute;
  left: 36px; /* allow space for the icon */
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

/* =============== PERFECT FACEBOOK PAGE PLUGIN =============== */

/* Style the FB display panel */
div.aquacanis-fb-module.pwebbox-box {
  margin-left: auto;
  margin-right: auto;
}

/* =============== LOG-IN-OUT MODULE =============== */

/* Set the module contents to the centre of the container */
div.log-in-out-module {
  text-align: center;
}
/* Override some positioning of elements to gather them into the centre */
div.log-in-out-module form#login-form div#form-login-remember input#modlgn-remember {
  float: initial;
  margin-bottom: 5px;
  margin-top: 0px;
}
/* Revert padding for all elements to Bootstrap presets (override template customisation) */
div.log-in-out-module form#login-form input[type="text"],
div.log-in-out-module form#login-form input[type="password"] {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* =============== VETERINARY REFERRAL FORM =============== */

/* Style the text in the static fields for use as page titles */
div.aqua-canis-form-page-title div p {
  font-size: 1.6em;
  font-weight: bold;
}

/* Give the form a box round it */
div[id*="jsn_form"].jsn-uniform form > div.jsn-row-container {
  padding: .8em;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 2px #999;
  -moz-box-shadow: 0 0 2px #999;
  -webkit-box-shadow: 0 0 2px #999;
}