@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url('https://fonts.googleapis.com/css?family=PT+Serif&display=swap');


/* =================================================================== */
/* = Default Typography and Colors for Tribute Media's Narwhal Theme = */
/* =================================================================== */

:root {
  
  /* brand colors are for reference **/
  
  --brand-color-1: #F37362; 
  --brand-color-2: #FFD27A;
  --brand-color-3: #F9A86F;
  --brand-color-4: #9DD4B2;
  --brand-color-5: #6792CC;
  --brand-color-6: #343642;
    
  --dr-brand-color-1: #F37362;
  --dr-brand-color-2: #FFD27A;
  --dr-brand-color-3: #F9A86F;
  --dr-brand-color-4: #9DD4B2;
  --dr-brand-color-5: #6792CC;
  --dr-brand-color-6: #ffffff;
  
  /* magic accordion */
  --mag-acc-color-1: #cdcdcd;
  --mag-acc-color-2: #ffffff;
  --mag-acc-font-1: #343642;
  --mag-acc-font-2: #343642;
  
  --mag-acc-dr-color-1: #333333;
  --mag-acc-dr-color-2: #666666;
  --mag-acc-dr-font-1: #ffffff;
  --mag-acc-dr-font-2: #ffffff;
  
  /* region backgrounds */
  
  --body-background:#cccccc; /* only visible if screen is wider than 1800px */
  --page-background:#ffffff; /* generally should stay white */
  --dr-background:#343642; /* base color when .dark-region or .transposed is applied */
  
  --help-wrapper:transparent;
  --topper-wrapper:transparent;
  --header-wrapper:transparent;
  --banner-wrapper:transparent;
  --content-area-wrapper:transparent;
  --preface-wrapper:transparent;
  --content-top-wrapper:transparent;
  --content-wrapper:transparent;
  --sidebar:transparent;
  --content-bottom-wrapper:transparent;
  --postscript-wrapper:transparent;
  --postscript-wrapper-dark-region:#333333;
  --footer-wrapper:transparent;
  
  /* main menu * mobile menu */
  
  --menu-link-d:#CBCBCB; /* desktop main level link:hover background color */
  --menu-link-d1:#CBCBCB; /* desktop link:hover background color */
  --menu-link-m:#CBCBCB; /* mobile link background color */ 
  --menu-bg-d:#eeeeee;  /* background on main menu desktop */
  --menu-bg-d1:#eeeeee; /* background on main menu desktop when shrunk (nav affix)*/
  --menu-bg-d2:#eeeeee; /* ul under desktop expanded menu item */
  --menu-bg-m:#eeeeee;  /* background on mobile pop out menu */
  --menu-bg-m2:#eeeeee; /* ul mobile under expanded menu item */
  
  --menu-fontcolor-d:#343642; /* link color on main level menu desktop */
  --menu-fontcolor-d1:#343642; /* link color on all links below main level menu desktop */
  --menu-fontcolor-m:#343642; /* link color on all mobile menu links */
  
  --menu-width:220px; /* width of ul desktop below first level expanded menu item */  
    
  /* fonts & links */
    
  --font-color: #343642; /* font color */
  --dr-font-color: #ffffff; /* .dark-region font color */
  
  --link-color-1: #6792CC; /* a */
  --link-color-2: #86b0e8; /* a:hover, a:visited, a:active */
  --link-color-3: #F9A86F; /* a.secondary */
  --link-color-4: #fcc49f; /* a.secondary:hover, a.secondary:visited, a.secondary:active */
  
  --dr-link-color-1:#FFD27A; /* .dark-region a */
  --dr-link-color-2:#fcebcc; /* .dark-region a:hover, .dark-region a:visited, .dark-region a:active */
  --dr-link-color-3:#F9A86F; /* .dark-region a.secondary */
  --dr-link-color-4:#fcc49f; /* .dark-region a.secondary:hover, .dark-region a.secondary:visited, .dark-region a.secondary:active */
  
  /* buttons */
  
  --button-primary:#6792CC;                         /* background color */
  --button-primary-hover:#86b0e8;                   /* background color when hovering */
  --button-primary-font:#ffffff;                    /* font color */
  --button-primary-font-hover:#343642;              /* font color when hovering */
  
  --button-secondary:#F9A86F;                       /* background color */
  --button-secondary-hover:#fcc49f;                 /* background color when hovering */
  --button-secondary-font:#343642;                  /* font color */
  --button-secondary-font-hover:#343642;            /* font color when hovering */
                                                     
  --button-transposed:#eeeeee;                      /* background color */
  --button-transposed-hover:#dddddd;                /* background color when hovering */
  --button-transposed-font:#304042;                 /* font color */
  --button-transposed-font-hover:#5e5a5d;           /* font color when hovering */
                                                    
  --button-secondary-transposed:#dddddd;            /* background color */
  --button-secondary-transposed-hover:#cccccc;      /* background color when hovering */
  --button-secondary-transposed-font:#304042;       /* font color */
  --button-secondary-transposed-font-hover:#5e5a5d; /* font color when hovering */
  
  --button-outline-border:#5e5a5d;
  --button-outline-border-hover:#343642;
  
  --button-border-radius:2px;
  
  /* blocks */
  
  --block-border-radius:2px; /* generally should complement the button-border-radius */
  
  --block-callout-border:#343642; /* block border color */
  --block-callout-border-dark:#ffffff; /* block border color for dark regions */
  --block-secondary-background:#6792CC; /*if the secondary background is too dark, add a block class of dark-region to make the text white */
  --block-secondary-fontcolor:#343642; /* if the bg is light enough, this can be the same as the main --font-color */
 /* note that blocks with transposed background are the same as dr-background for light regions and --page-background for dark regions */
 /* note that the blocks with transposed font colors are the same as --dr-font-color for light regions and the --font-color for dark regions */
  
  /* search and views */
  
  --search-icon:#999999;
  --search-icon-hover:#444444;
  --search-bg:#cccccc; /* background for exposed filters and search page form */
}

/* ============== */
/* = Typography = */
/* ============== */

html {
  font-size:16px; /* this sets the default (base) font-size for the site */
  line-height: 24px;/* this sets the default (base) line-height for the site */
  
}

body {
  font-family:"Lato";
}

/* headers */

h1,
h2,
h2 a,
h3,
h4,
h5,
h6 {
  width: 100%;
  clear:both;
  text-transform:uppercase;
}
h1.secondary,
h2.secondary,
h2.secondary a,
h3.secondary,
h4.secondary,
h5.secondary,
h6.secondary {
  text-transform:unset;
}

h1.accent,
h2.accent,
h2.accent a,
h3.accent,
h4.accent,
h5.accent,
h6.accent {
  text-transform:unset;
  font-family: 'PT Serif', serif;
}

h1 {
    font-size:2.5rem;
    line-height:3.7rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
    padding:10px 0;
    margin-bottom:0;
}

h2,h2 a {
    font-size:2.25rem;
    line-height:3.3rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h3 {
    font-size:1.625rem;
    line-height:2.4rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h4 {
    font-size: 1.125rem;
    line-height:1.7rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h5 {
    font-size: 1.0625rem;
    line-height:1.6rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h6 {
    font-size: .9rem;
    line-height: 1.4rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}



b, strong {
  
}

i, em {
  
}


/* links */

a,
a:visited,
a:active,
a:not([href]):not([tabindex]) {
    color: var(--link-color-1);
}

a:hover,
a:not([href]):not([tabindex]):hover {
    color: var(--link-color-2);
    text-decoration: none;
}

a.secondary,
a.secondary:visited,
a.secondary:active,
.secondary .content a,
.secondary .content a:visited,
.secondary .content a:active {
    color: var(--link-color-3);
}

a.secondary:hover,
.secondary .content a:hover {
    color: var(--link-color-4);
    text-decoration: none;
}

.dark-region a,
.dark-region a:visited,
.dark-region a:active,
.transposed .content a,
.transposed .content a:visited,
.transposed .content a:active  {
    color: var(--dr-link-color-1);
}

.dark-region a:hover,
.transposed .content a:hover {
    color: var(--dr-link-color-2);
    text-decoration: none;
}

.dark-region a.secondary,
.dark-region a.secondary:visited,
.dark-region a.secondary:active,
.transposed .content a.secondary,
.transposed .content a.secondary:visited,
.transposed .content a.secondary:active  {
    color: var(--dr-link-color-3);
}

.dark-region a.secondary:hover,
.transposed .content a.secondary:hover {
    color: var(--dr-link-color-4);
    text-decoration: none;
}



/** dark regions **/

.dark-region * {
  color: var(--dr-font-color);
  
}

.dark-region {
  background: var(--dr-background);
}

.dark-region hr,
.transposed hr {
  border-color:rgba(255,255,255,.1);
}

code {
    font-family: 'Courier New',Courier,monospace;
    font-weight: bold;
}


/* blockquote style */

blockquote {
    border-left: 2px solid var(--font-color);
    padding-left: 15px;
    width:100%;
}

.dark-region blockquote {
  border-left: 2px solid var(--dr-font-color);
}
.transposed blockquote {
  border-left: 2px solid var(--dr-font-color);
}

/* =========== */
/* = Buttons = */
/* =========== */

button.outline,.button.outline {
  border: 1px solid var(--button-outline-border);
}

button.outline:hover,button.outline:focus,.button.outline:hover,.button.outline:focus {
  border: 1px solid var(--button-outline-border-hover);
}


button,.button,a.button,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle  {
    background-color: var(--button-primary);
    color: var(--button-primary-font) !important;
  }

button:hover,button:focus,a.button:hover,a.button:focus,.btn-primary:hover {
  background-color: var(--button-primary-hover);
  color: var(--button-primary-font-hover) !important;
}



button.secondary,.button.secondary {
  background-color: var(--button-secondary);
  color: var(--button-secondary-font) !important;
}

button.secondary:hover,button.secondary:focus,.button.secondary:hover,.button.secondary:focus {
  background-color: var(--button-secondary-hover);
  color: var(--button-secondary-font-hover) !important;
}

button.transposed,.button.transposed {
  background-color: var(--button-transposed);
  color: var(--button-transposed-font) !important;
}

button.transposed:hover,button.transposed:focus,.button.transposed:hover,.button.transposed:focus {
  background-color: var(--button-transposed-hover);
  color: var(--button-transposed-font-hover) !important;
}

button.secondary.transposed,.button.secondary.transposed {
  background-color: var(--button-secondary-transposed);
  color: var(--button-secondary-transposed-font) !important;
}

button.secondary.transposed:hover,button.secondary.transposed:focus,.button.secondary.transposed:hover,.button.secondary.transposed:focus {
  background-color: var(--button-secondary-transposed-hover);
  color: var(--button-secondary-transposed-font-hover) !important;
}


button,.button,a.button,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  border-radius: var(--button-border-radius);
}



[class^="icon-"].absolute, [class*=" icon-"].absolute {
  position:relative;
}
[class^="icon-"].absolute::before, [class*=" icon-"].absolute::before {
  position:absolute;
  left:6px;
  top:46%;
  transform:translateY(-50%);
  
} 
/* ================== */
/* = Block Stylings = */
/* ================== */


.block.callout .inner,
.block.outline .inner {
  border-color: var(--block-callout-border);
}

.dark-region .block.callout .inner,
.dark-region .block.outline .inner {
  border-color: var(--block-callout-border-dark);
}

.block.secondary .inner {
  background: var(--block-secondary-background);
  color: var(--block-secondary-fontcolor);
}

.block.transposed .inner {
  background-color: var(--dr-background);
}

.transposed .content *,
.transposed h2 {
  color: var(--dr-font-color);
  
}


.dark-region .block.transposed .inner {
  background-color: var(--page-background);
}

.dark-region .transposed .content *,
.dark-region .transposed h2 {
  color: var(--font-color);
  
}

.block.outline .inner,
.block.secondary .inner,
.block.transposed .inner {
  border-radius: var(--block-border-radius);
}



/* ================= */
/* = Region Colors = */
/* ================= */


body {
    background-color: var(--page-background);
    color: var(--font-color);
}
body .body-inner.inner {
    background-color: var(--body-background);
}

.page {
    border-right: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    background-color: var(--page-background);
}
.help-wrapper{background-color:var(--help-wrapper);}
.topper-wrapper{background-color:var(--topper-wrapper);}
.header-wrapper{background-color:var(--header-wrapper);}
.banner-wrapper{background-color:var(--banner-wrapper);}
.content-area-wrapper{background-color:var(--content-area-wrapper);}
.preface-wrapper{background-color:var(--preface-wrapper);}
.content-top-wrapper{background-color:var(--content-top-wrapper);}
.content-wrapper{background-color:var(--content-wrapper);}
.sidebar{background-color:var(--sidebar);}
.content-bottom-wrapper{background-color:var(--content-bottom-wrapper);}
.postscript-wrapper{background-color:var(--postscript-wrapper);}
.postscript1-wrapper{background-color:var(--postscript-wrapper-dark-region);}
.footer-wrapper{background-color:var(--footer-wrapper);}


/* ========== */
/* = Search = */
/* ========== */

.search-block-form .form-search {

}

.search-block-form .form-wrapper::after {
  color: var(--search-icon);
}
.search-block-form .form-wrapper:hover::after {
  color: var(--search-icon-hover);
}
form input.form-time:focus,
form input.form-date:focus,
form input.form-tel:focus,
form input.form-number:focus,
form input.form-number:focus,
form input.form-text:focus, 
form input.form-email:focus, 
form textarea:focus,
form input.form-url:focus,
.form-search:focus:focus,
form .form-color-output:focus,
form .form-autocomplete:focus {
  -webkit-box-shadow: 0 0 4px 0 #444;
          box-shadow: 0 0 4px 0 #444;
}

.search-mobile {
  font-size:150%;
  text-align:right;
}
.search-mobile a {
  color:var(--search-icon-hover);
}
.search-mobile a:hover {
  color:var(--search-icon);
}
/* ========= */
/* = Views = */
/* ========= */
.search-form,
.views-exposed-form {
  background:#ccc;
}


/* ========================== */
/* = Navigation (Main Menu) = */
/* ========================== */

.navbar .nav > .menu-item--expanded .menu {
  
}
.main-menu-wrapper .navbar ul li a,
.mobile-offcanvas a {
  text-transform: uppercase;
}
.main-menu-wrapper .navbar ul li a {
  color: var(--menu-fontcolor-d); /* link color on main level menu desktop */
}
.main-menu-wrapper .navbar ul li li a {
  color:var(--menu-fontcolor-d1); /* link color on all links below main level menu desktop */
}
.mobile-offcanvas li a {
  color:var(--menu-fontcolor-m); /* link color on all mobile menu links */
}

.main-menu-wrapper .navbar .nav > li > a.nav-link:hover {
  background-color: var(--menu-link-d); /* desktop main level link:hover background color */
}
.navbar .nav > .menu-item--expanded .menu li:hover a,
.navbar .nav > .menu-item--expanded .menu li.menu-item--expanded .menu a:hover {
  background-color: var(--menu-link-d1); /* desktop link:hover background color */
  
}
.mobile-offcanvas .navbar .nav > li:hover a.nav-link, 
.mobile-offcanvas .navbar .nav > li > a.nav-link:hover {
  background-color: var(--menu-link-m) !important; /* mobile link background color */
}
.main-menu-wrapper {
  background-color: var(--menu-bg-d); /* background on main menu desktop */
}
nav.affix {
  background-color: var(--menu-bg-d1); /* background on main menu desktop when shrunk */
}

.mobile-offcanvas {
  background-color: var(--menu-bg-m); /* background on mobile pop out menu */
}
.navbar .nav > .menu-item--expanded .menu {
  background-color: var(--menu-bg-d2); /* ul under desktop expanded menu item */
  width:var(--menu-width); /* width of ul desktop below first level expanded menu item */
}

.mobile-offcanvas  .navbar .nav > .menu-item--expanded .menu {
  background-color: var(--menu-bg-m2); /* ul mobile under expanded menu item */
}

.menu-overlay {
  background: rgba(0,0,0,0.8); /* overlay background that hides the page when toggler clicked */
}


.navbar-toggler {
  color: var(--font-color);
}  



/* ============================== */
/* = for the documentation page = */
/* ============================== */

.branding-wrapper {
  padding:20px;
}
.brand-box-wrapper {
  font-size:60%;
  text-align:center;
  width:110px;
  float:left;
  margin:5px;

}
.brand-box {
  width:100%;
  height:110px;
  border:1px solid #bbb;
  border-radius: 2px;
  background-clip: padding-box;
}
.dark-region .brand-box {
  border-color: #666;
}

.brand-box-1{background-color:var(--brand-color-1);}
.brand-box-2{background-color:var(--brand-color-2);}
.brand-box-3{background-color:var(--brand-color-3);}
.brand-box-4{background-color:var(--brand-color-4);}
.brand-box-5{background-color:var(--brand-color-5);}
.brand-box-6{background-color:var(--brand-color-6);}

.brand-font-color{background-color:var(--font-color);}

.dark-region .brand-box-1{background-color:var(--dr-brand-color-1);}
.dark-region .brand-box-2{background-color:var(--dr-brand-color-2);}
.dark-region .brand-box-3{background-color:var(--dr-brand-color-3);}
.dark-region .brand-box-4{background-color:var(--dr-brand-color-4);}
.dark-region .brand-box-5{background-color:var(--dr-brand-color-5);}
.dark-region .brand-box-6{background-color:var(--dr-brand-color-6);}

.dark-region .brand-font-color{background-color:var(--dr-font-color);}

.brand-link-1{background-color:var(--link-color-1);}
.brand-link-2{background-color:var(--link-color-2);}
.brand-link-3{background-color:var(--link-color-3);}
.brand-link-4{background-color:var(--link-color-4);}

.dark-region .brand-link-1{background-color:var(--dr-link-color-1);}
.dark-region .brand-link-2{background-color:var(--dr-link-color-2);}
.dark-region .brand-link-3{background-color:var(--dr-link-color-3);}
.dark-region .brand-link-4{background-color:var(--dr-link-color-4);}

.button-primary         {background-color: var(--button-primary);}
.button-primary-hover   {background-color: var(--button-primary-hover);}
.button-secondary       {background-color: var(--button-secondary);}
.button-secondary-hover {background-color: var(--button-secondary-hover);}
.button-transposed      {background-color: var(--button-transposed);}
.button-transposed-hover{background-color: var(--button-transposed-hover);}
.button-outline         {background-color: var(--button-outline-border);}
.button-ouline-hover    {background-color: var(--button-outline-border-hover);}

.block-secondary            {background-color: var(--block-secondary-background);}
.block-secondary-fontcolor  {background-color: var(--block-secondary-fontcolor);}
.block-transposed           {background-color: var(--dr-background);}
.block-transposed-fontcolor {background-color: var(--dr-font-color);}
.block-callout-border       {background-color: var(--block-callout-border);}

.dark-region .block-transposed           {background-color: var(--page-background);}
.dark-region .block-transposed-fontcolor {background-color: var(--font-color);}
.dark-region .block-callout-border       {background-color: var(--block-callout-border-dark);}

.mobile-close {color: var(--dr-font-color);}


/* =================== */
/* = Magic Accordion = */
/* =================== */

/** colours **/

/** light theme **/
body .page .magic-accordion-block .body p, body .page .magic-accordion-block .body div {
  
}
.magic-accordion-wrapper.tabbed-wrapper.light ul.magic-accordion .item {
	color:var(--mag-acc-font-1);
}
.magic-accordion-wrapper.tabbed-wrapper.light {
  background-color:var(--mag-acc-color-1);
}
.magic-accordion-wrapper.tabbed-wrapper.light ul.magic-accordion li:hover .item {
  background-color:var(--mag-acc-color-2);
	color:var(--mag-acc-font-1);
}
.magic-accordion-wrapper.tabbed-wrapper.light ul.magic-accordion .default.description {
  background-color:var(--mag-acc-color-2);
	color:var(--mag-acc-font-2);
}
.magic-accordion-wrapper.tabbed-wrapper.light ul.magic-accordion li:hover .description {
	background-color:var(--mag-acc-color-2);
	color:var(--mag-acc-font-2);
}
.magic-accordion-wrapper.accordion-wrapper.light .accordion-button .item {
  background-color:var(--mag-acc-color-1);
  color: var(--mag-acc-font-1);
}
.magic-accordion-wrapper.accordion-wrapper.light .accordion-button.collapsed .item {
  background-color:var(--mag-acc-color-1);
}

.magic-accordion-wrapper.accordion-wrapper.light .description {
  background-color:var(--mag-acc-color-2);
  color: var(--mag-acc-font-2);
}
.magic-accordion-wrapper.accordion-wrapper.light .description p, .magic-accordion-wrapper.accordion-wrapper .description p {
  color: var(--mag-acc-font-2);
}

.magic-accordion-wrapper.tabbed-wrapper.light,
.magic-accordion-wrapper.accordion-wrapper.light {
  border-color:var(--mag-acc-color-1);
}

/** dark theme **/

.magic-accordion-wrapper.tabbed-wrapper.dark ul.magic-accordion .item {
	color:var(--mag-acc-dr-font-1);
}
.magic-accordion-wrapper.tabbed-wrapper.dark {
  background-color:var(--mag-acc-dr-color-1);
}
.magic-accordion-wrapper.tabbed-wrapper.dark ul.magic-accordion li:hover .item {
  background-color:var(--mag-acc-dr-color-2);
	color:var(--mag-acc-dr-font-1);
}
.magic-accordion-wrapper.tabbed-wrapper.dark ul.magic-accordion .default.description {
  background-color:var(--mag-acc-dr-color-2);
	color:var(--mag-acc-dr-font-2);
}
.magic-accordion-wrapper.tabbed-wrapper.dark ul.magic-accordion li:hover .description {
	background-color:var(--mag-acc-dr-color-2);
	color:var(--mag-acc-dr-font-2);
}
.magic-accordion-wrapper.accordion-wrapper.dark .accordion-button .item {
  background-color:var(--mag-acc-dr-color-1);
  color: var(--mag-acc-dr-font-1);
}
.magic-accordion-wrapper.accordion-wrapper.dark .accordion-button.collapsed .item {
  background-color:var(--mag-acc-dr-color-1);
}

.magic-accordion-wrapper.accordion-wrapper.dark .description {
  background-color:var(--mag-acc-dr-color-2);
  color: var(--mag-acc-dr-font-2);
}
.magic-accordion-wrapper.accordion-wrapper.dark .description p, .magic-accordion-wrapper.accordion-wrapper .description p {
  color: var(--mag-acc-dr-font-2);
}

.magic-accordion-wrapper.tabbed-wrapper.dark,
.magic-accordion-wrapper.accordion-wrapper.dark {
  border-color:var(--mag-acc-dr-color-1);
}


/* */