/*
 * Penguin Common Theme
 * 
 * @author: Dorian Pula (dorian.pula@amber-penguin-software.ca)
 * @company: Amber Penguin Software
 * @note: The common elements of both the Penguin Daytime and Evening CSS themes.
 * @version: 0.5.0
 * @license: AGPL v3
 */
/* Bootstrap - Needs to be imported first. */
@import url("~bootstrap/dist/css/bootstrap.css");

/*** Declare font-faces from openfontlibrary ***/
@font-face {
  font-family: 'LavoirRegular';
  src: url('/static/fonts/openfonts/lavoir/Lavoir.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LavoirSmallCaps';
  src: url('/static/fonts/openfonts/lavoir/Lavoir_Small_Caps.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BonvenoCFLight';
  src: url('/static/fonts/openfonts/benveno/BonvenoCF-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ConsolaMonoBold';
  src: url('/static/fonts/openfonts/consolamono/ConsolaMono-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'ConsolaMono';
  src: url('/static/fonts/openfonts/consolamono/ConsolaMono.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/*** Fonts ***/
:root {
  --header-title-font-family: "BonvenoCFLight", sans-serif;
  --console-font-family: "ConsolaMono", monospace;
  --amber-penguin-yellow: #FFC200;
}

/*** General containers ***/
.sea-header {
  text-align: center;
  vertical-align: middle;

  color: var(--amber-penguin-yellow);
  padding: 15px 0;

  margin-bottom: 15px;
  margin-right: -30px;
  margin-top: 5px;

  /* mixin: .shadowed_border;*/
  border-radius: 25px;
  border: 1px solid #111111;
  box-shadow: 5px 5px #111111;
}

.ice-floe {
  /* mixin: .shadowed_border;*/
  border-radius: 25px;
  border: 1px solid #111111;
  box-shadow: 5px 5px #111111;

  padding: 15px 30px 15px 30px;
  margin-left: 15px;
  margin-right: 5px;
}

.ice-menu {
  /* mixin: .shadowed_border;*/
  border-radius: 25px;
  border: 1px solid #111111;
  box-shadow: 5px 5px #111111;

  padding: 10px;
  margin-bottom: 15px;
}

/*** Header ***/
.header_logo {
  height: 128px;
}

h1, h2 {
  font-family: var(--header-title-font-family);
}

.sea-header .header_title {
  color: var(--amber-penguin-yellow);
  vertical-align: middle;
  text-align: center;

  font-family: "LavoirRegular", sans-serif;
  font-size: 32pt;
  font-weight: normal;
  font-style: normal;
}

.sea-header .header_tagline {
  font-size: 12pt;
  font-family: var(--console-font-family);
  text-align: center;
  color: #eeeeee;
}

/*** Navigation ***/
a,
.hoverable {
  text-decoration: none;
  /* mixin: .small_bordered; */
  border-radius: 5px;
  padding: 5px;
}

a:hover,
.hoverable:hover {
  font-weight: bold;
  /* mixin: .small_bordered; */
  border-radius: 5px;
  padding: 5px;
}

ul.navigation-bar {
  display: inline;
  list-style: none;

  text-align: center;
  font-weight: bold;
  font-family: var(--header-title-font-family);
  font-size: 18px;
}

ul.navigation-bar > li > a {
  /* mixin: .small_bordered;*/
  border-radius: 5px;
  padding: 5px;
}

/*** Navigation overrides. ***/
.nav {
  text-align: center;
  font-weight: bold;
  font-family: var(--header-title-font-family);
  font-size: 18px;
}

.nav > li {
  /* mixin: .small_bordered; */
  border-radius: 5px;
  padding: 5px;
}

/*** Footer ***/
#footer {
  font-family: var(--console-font-family);
  font-size: small;
  font-weight: bold;
  text-align: center;

  padding: 5px;
  margin-top: 12pt;
}

form > ul > li {
  display: list-item;
  list-style: none;
  padding: 5px 15px;
}

/*** Mixins for borders. ***/
.small_bordered {
  border-radius: 5px;
  padding: 5px;
}

.shadowed_border {
  border-radius: 25px;
  border: 1px solid #111111;
  box-shadow: 5px 5px #111111;
}

/* Borrowed from https://github.com/JedWatson/react-codemirror/blob/master/example/src/example.less */
.ReactCodeMirror {
  border: 1px solid #ccc;
}

table {
  border-style: dashed;
  border-color: #999999;
}

td {
  padding: 10px;
  margin: 5px;
  border-style: dashed;
  border-color: #999999;
}
