/* lalg.css
 *
 * Authored by MJH, CMW, TJS
 * 23/06/2021
 *
 * For css changes that affect every page. Primarily the header and layout changes.
 * Might need to seperate certain layout changes to make better use of the weighting system.
 */

/************* General sitewide changes. **************/

body, h1, h2, p, a, ul, li {font-family: verdana;}
h2 {font-size: 2.2em;}
p, a, time {font-size: 1.3em; line-height: 135%;}
p a, h2 a { font-size: 100%; line-height: 100%; color: #0a8ebd }
ol, ul { padding-left: 40px }
hr {border-top: 2px solid #ccc;}
li p { font-size: inherit; }

.region-sidebar-first .views-row a {font-size: 1.3em; }
img {object-fit: cover;}

/* main */
.block-system-main-block li {
  font-size: 1.3em;
}
.block-system-main-block li li {
  font-size: 100%;
}
.block-system-main-block li a {
  font-size: 100%;
  color: #0a8ebd;
}

/* Footer */
.footerwidget {
  margin-top: 10px;  /* CMW 28/09/2022 */
  padding-top: 0px;
}

.footerwidget .row {
  background-color: darkslategray;
  border-radius: 10px;
}

.region.region-footer-first,
.region.region-footer-second,
.region.region-footer-third {
  margin-top: 10px;
}

.footerwidget h2,
.footerwidget a {
  color: white;
}

.footerwidget p {
  color: whitesmoke;
}

/************** Tables ********************/
table {
    width: 100%;
}
@media (max-width: 766px) {
	table {
		display: block;
		overflow-x:	auto;
	}
}

td, th {
    border: 1px solid black;
    padding: 4px 8px;
}
tr:nth-child(odd) {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: lightgrey;
}
th {
    padding: 10px 0px;
    background-color: #303030;
    text-align: left;
    color: white; 
    padding-left: 10px; 
	padding-right: 10px; 
    font-family: verdana;
}
th a {color: white;}

/************* Forms ***************/
form.views-exposed-form .form-item {float: left; padding-right: 40px;}
form.views-exposed-form label {display: block;}
form.views-exposed-form #edit-actions {clear:both;}

/* Fix the red star 'Required' indicator on Webforms (and others?) */
form .form-required::after {
      background-image: url(/core/misc/icons/ee0000/required.svg);
}

/* Expand potential width to handle wide monitors. */
.container {
  max-width: 2000px;
}
/* otherwise the display is narrow on wide moniters */
@media (min-width: 1590px) {
  .container {width: 1540px;}
}
@media (min-width: 1910px) {
  .container {width: 1820px;}
}

.block {
  margin-bottom: 2px;
}

.main-header {
  background: url(../images/bg-header.png);
}

/* Align brand logo with menu and image */
.brand.logo {margin-left: 15px;}

/* Correct line height for text next to logo */
.region-header .brand {
    line-height: 300%;
}

/* Text after logo is right on edge of screen when on separate line */
.site-branding__name {padding-left: 15px;}

/* line up welcome message on right hand side of header */
.main-header > .container > .row > .header-row {margin-right: 15px;}


/* Menu bar - background colour all way across */
ul.sf-menu.sf-style-blue {
    width: 100%;
}

/* Top Level Menu Color (Light) */
ul.sf-menu.sf-style-blue,
ul.sf-menu.sf-style-blue li {
    background-color: #3270c5;
}

/* Top Level Menu Color Hover (Dark) */
ul.sf-menu.sf-style-blue a:hover,
ul.sf-menu.sf-style-blue li:hover,
ul.sf-menu.sf-style-blue span.nolink:hover,
ul.sf-menu.sf-style-blue li.sfHover,
ul.sf-menu.sf-style-blue a:focus {
    background-color: #0151a4;
}

/* Submenu Color Hover (Light) */
ul.sf-menu.sf-style-blue .sf-depth-2:hover,
ul.sf-menu.sf-style-blue span.nolink.sf-depth-2:hover,
ul.sf-menu.sf-style-blue .sf-depth-3:hover {
    background-color: #3270c5;
}

/* Fix menu wrapping issue. */
ul.sf-menu li {
  display: inline-block;
  float: none;
}

/* get rid of blue line below the main menu */
.navbar-default {border-bottom: none;}

/* get rid of shadow below main header */
.main-header {box-shadow: none;}

.block-views-blockcurrent-user-block-current-user {
  float: right;
  margin-left: 15px;
}
div#block-loggedoutblock {
    float: right;
    margin-left: 15px;
}

.site-branding {
  display: inline;
}

.site-branding__name {
  padding-top: 15px;
}

.site-branding__name a {
  font-size: 4rem;
  color: #0a8ebd;
}

@media (max-width: 766px) {
.site-branding__name a {
  font-size: 3rem; }
}

#block-searchform {
  width: 30%;
  float: right;
}
#block-searchform input {
  padding: 1px;
  font-size: 16px;
  font-weight: normal;
}
#block-searchform #edit-actions {
  width: 25px;
}
#block-searchform #edit-actions input {
  background-image: url(../images/ico-search.png);
  background-repeat: no-repeat;
  background-size: 18px;
  background-color: white;
  color: transparent;
  background-position: center;
}

/* Editors Notes View */
.editorsnotes {
  display: inline-block;
  float: right;
  width: 50%;
  background: yellow;
  padding: 12px;
  padding-top: 0px;
  font-family: Verdana;
  font-size: 12px;

}
.editorsnotes h2 {
  font-size: 16px;
  font-weight: bold;
  line-height: 80%;
}

/* Menu starts here */

/* Fix error in 15:16 22/07/2021ndex that puts menu behind the slideshow pictures */
.main-header .region {
  z-index: 50; 
  margin-top: 2px;
}

ul.sf-menu {
  margin-bottom: 0px;
  line-height: inherit;
  border-radius: 10px;
}

ul.sf-menu.sf-style-blue {
  margin-bottom: 0px;
}

ul.sf-menu a {
  font-size: 16px;
}

ul.sf-menu span {
  font-size: medium;
}

.block-superfishmain ul.sf-menu > :first-child {
  margin-left: 20px;
}

/* If the menu item has no link, make it's text the same as if it had a link  */
ul.sf-menu .sf-with-ul {
  font-size:16px;
  font-family: verdana;
  padding: 12px 36px 12px 16px;
}

/* Move the first level submenu down a little  */
 ul.sf-menu li:hover > ul, ul.sf-menu li.sfHover > ul {top: 3.5em;}

/* adjust the look of the title Main menu and delete the 3 vertical bars */
div.sf-accordion-toggle.sf-style-blue a  {
    display: block;
    text-align: center;
    font-size: 1.25em;
    text-transform: uppercase;
    padding: 0.7em 0 0.7em 0;

}
div.sf-accordion-toggle.sf-style-blue > a:after {display: none;}

.main-menuwrap {
  margin-bottom: 0;
}

/* Slideshow starts here */
@media (min-width: 1920px) { /* Actual image width is 1920px so nothing is gained from going higher. */
  .slideshow {
    /*width: 1920px;*/
  }
}

/* slick caption */
.slide--caption--below .slide__caption {
  padding: 5px 0;
}

/* Slideshow and image height */
.views_slideshow_cycle_teaser_section {height: calc(50vh + 2em);}
.views_slideshow_cycle_teaser_section img {height: 50vh;}
@media (max-width: 766px) {
   .views_slideshow_cycle_teaser_section {height: calc(25vh + 2em);}
   .views_slideshow_cycle_teaser_section img {height: 25vh;}
}

@media (max-width: 766px) {

/* show the slideshow */
  .slideshow{display: block;}

/* Show the superfish menu  */
  .region-primary-menu {display: block;}

/* Don't show the drupal toggle button  */
  button.navbar-toggle {display: none;}

}

/* sidebars */
.sidebar > .col-md-3,
.sidebar > .col-md-4 {
    background-color: #1da9d31c;
    padding-bottom: 1.2em;
  border-radius: 10px;
}

/* Front page content */
/* Coming shortly on home page - separate rows a little */
.region-sidebar-first .views-row {padding-bottom: 1em;}

@media (max-width: 766px) {
  div.block-views-blockgroupevents-block-1 {
    display: inline-block;
  }
  div.block-core block-page-title-block {
    padding-top: 20px;
  }
}

.block-views-blockgroupevents-block-1 ul.js-pager__items {
  list-style: none;
}

.block-views-blockgroupevents-block-1 ul.js-pager__items li {
  display: inline;
}

/* bring main content up to top */
.content_layout > .col-md-6 {margin-top: -20px;}

/* Fix width overlapping right sidebar */
article.node--type-article,
article.node--type-event,
article.node--type-static {
  width: auto;
}

/* Curated photos contact sheet */
div.lalg-curated-photos-contact-sheet img {
	object-fit: contain;
	height: fit-content;
	padding: 5px;
}

/* User Registration Form */
.user-register-form #crm-container.crm-public .label {
  color: black;
  padding-top: 15px;
}

@media (min-width: 480px) {
  .user-register-form .crm-section .label {
    width: 18%;
  }
}

/* Discounts */
@media (max-width: 766px) {
  div.lalg-retailers td.views-field.views-field-nothing {
    display: inline-block;
  }
  div.lalg-retailers thead {
	  display: none;
  } 
  div.lalg-retailers tbody td.views-field {
		display: block;
		width: 100%;
		border: none;
  }		
  div.lalg-retailers tbody td.views-field.views-field-organization-name {
    font-size: 2em;
    margin-top: 0.3em;
    font-weight: bold;
  }	
  div.lalg-retailers tbody td.views-field.views-field-nothing {
    margin-bottom: 0.5em;
  }
  div.lalg-retailers tbody td.views-field-lalg-member-benefits-24 {
    font-weight: bold; 
  } 
}

/* Retailers */
div.lalg-retailers td.views-field-organization-name {
	font-size: 1.3em;
}
div.lalg-retailers td.views-field-organization-name a {
	font-size: 1em;
}
div.lalg-retailers td.views-field-lalg-member-benefits-24 {
    font-size: 1.3em; 
}  
div.lalg-retailers td.views-field-nothing {
    font-size: 1.3em; 
}  
/* Linked organisations */
@media (max-width: 766px) {
  div.lalg-linked-organisations thead {
	  display: none;
  } 
  div.lalg-linked-organisations tbody td.views-field {
		display: block;
		width: 100%;
		border: none;
  }		
  div.lalg-linked-organisations tbody td.views-field.views-field-organization-name {
    font-size: 2em;
    margin-top: 0.3em;
    font-weight: bold;
  }	
  div.lalg-linked-organisations tbody td.views-field.views-field-nothing {
    margin-bottom: 0.5em;
  }
}

div.lalg-linked-organisations td.views-field-organization-name {
		font-size: 1.3em;
}
div.lalg-linked-organisations td.views-field-organization-name a {
	font-size: 1em;
}	
div.lalg-linked-organisations td.views-field-description-25 {
    font-size: 1.3em; 
}  
div.lalg-linked-organisations td.views-field-lalg-member-benefits-24 {
    font-size: 1.3em; 
}  
div.lalg-linked-organisations td.views-field-nothing {
    font-size: 1.3em; 
}  

/* Group contacts */
@media (max-width: 766px) {
  div.lalg-view-group-atoz tbody td.views-field {
		display: block;
		width: 100%;
		border: none;
  }	
  div.lalg-view-group-atoz tbody td.views-field-label a {
	font-size: 2em;
    margin-top: 0.3em;
    font-weight: bold;
  }	
}

/********************/
/*  COLOUR HEADERS  */
/********************/

/* pink */
body.d10dev1 header.main-header {
  background-image: none !important;
  background-color: rgba(167,17,141,.36) !important;
}
/* beige */
body.d10dev2 header.main-header {
  background-image: none !important;
  background-color: rgba(167,141,17,.36) !important;
}
/* green */
body.d10test header.main-header {
  background-image: none !important;
  background-color: rgba(17,167,19,.5) !important;
}
/* light blue */
body.d10tst2 header.main-header {
  background-image: none !important;
  background-color: rgba(17,101,167,.36) !important;
}

  
#views-form-frontpage-page-2 td {
	padding-top: 8px;
}	
#views-form-frontpage-page-2 a.tabledrag-handle div.handle {
	width: 100%;
	height: 100%;
	margin-top: -4px;
}

/* Sort New Ideas */
a.tabledrag-handle .handle {
  width: 25px;
  height: 25px;
}

/* Fix Select too wide on mobiles */
@media (max-width: 766px) {
	div.lalg-view-group-articles-jump select { max-width: 100%; }
}	
/* Allow top spacing on mobiles */
@media (max-width: 766px) {
	h2 { display: inline-block; }
}

/* Fix menu on mobiles */
@media (max-width: 766px) {
	.block-superfishmain ul.sf-menu > :first-child {
		margin-left: 0px;
	}
}

/* Make videos responsive */
div[data-oembed-url^="https://youtu.be"] {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
}
div[data-oembed-url^="https://youtu.be"] iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
}

/* Save button */
input[value="Save"] {
	color: white;
    background-color: #003ecc;
	background-image: none;
	font-size: 16px;
	padding: 14px;
	margin: 12px 20px 12px 0;
	border-radius: 6px;
	}
input[value="Save"]:hover {
  background-color: #0036B1;
  background-image: none;
}
form a[data-drupal-selector="edit-delete"]  {
	color: red;
	font-size: 16px;
}