/*
 * Penguin Daytime Theme
 *
 * @author: Dorian Pula (dorian.pula@amber-penguin-software.ca)
 * @company: Amber Penguin Software
 * @note: A soothing light grey and blue CSS theme.
 * @version: 0.5.0
 * @license: AGPL v3
 */
@import url("penguin-common-theme.css");

/*** Colours. ***/
:root {
  --daytime-body-background-colour: #d0d0d0;
  --daytime-element-background-colour: #ffffff;

  --daytime-header-title-colour: #2b2a2b;
  --daytime-header-background-colour: #777777;
  --daytime-subheader-title-colour: #5b5b5b;

  --daytime-link-highlight-colour: #46a0ff;
  --daytime-link-highlight-colour-text: #ffffff;
  --daytime-link-text-colour: #0075b4;

  --daytime-footer-text-colour: #787878;
}

/*** General containers ***/
body.daytime .sea-header {
  background-color: var(--daytime-header-background-colour);
}

body.daytime .ice-floe,
body.daytime .ice-menu {
  background-color: var(--daytime-element-background-colour);
}

body.daytime .navigation-bar {
  background-color: var(--daytime-element-background-colour);
}

/*** General elements ***/
body.daytime {
  background-color: var(--daytime-body-background-colour);
}

/*** Footer ***/
body.daytime #footer {
  color: var(--daytime-footer-text-colour);
}

/*** Article elements. ***/
body.daytime h1 {
  color: var(--daytime-header-title-colour);
}

body.daytime h2 {
  color: var(--daytime-subheader-title-colour);
}

/*** Navigation ***/
body.daytime a,
body.daytime .hoverable {
  color: var(--daytime-link-text-colour);
  /* mixin: .small_bordered; */
  border-radius: 5px;
  padding: 5px;
}

body.daytime a:hover,
body.daytime .hoverable:hover {
  background-color: var(--daytime-link-highlight-colour);
  color: var(--daytime-link-highlight-colour-text);

  /* mixin: .small_bordered; */
  border-radius: 5px;
  padding: 5px;
}

/* Hacks to resolve colour scheme issues in Bootstrap. */
body.daytime .nav-pills > .active > a,
body.daytime .nav-pills > .active > a:hover,
body.daytime .nav-pills > .active > a:focus {
  background-color: var(--daytime-link-highlight-colour);
  color: var(--daytime-link-highlight-colour-text);
}

body.daytime .nav > li > a:hover,
body.daytime .nav > li > a:focus {
  text-decoration: none;
  background-color: var(--daytime-link-highlight-colour);
  color: var(--daytime-link-highlight-colour-text);
}
