/***************************************************************************
 * Copyright 2017, RIoT International Pty Ltd
 *
 * @author Aaron Ardiri
 ***************************************************************************/

:root
{
  --page-width:             80%;
  --page-font-family:       Arial, Helvetica;
  --page-font-color:        #303030;
  --page-link-color:        #c02020;
  --page-sect-color:        #c02020;
  --font-head-family:       Arial, Helvetica;
  --font-head-size:         16px;
  --font-quote-family:      Arial, Helvetica;
  --font-quote-size:        30px;
  --font-body-family:       Arial, Helvetica;
  --font-body-size:         18px;
  --font-body-press-family: monospace;
  --font-body-press-size:   16px;
  --font-foot-family:       Arial, Helvetica;
  --font-foot-size:         14px;
}

html, body
{
  background-color:   white;
  width:              100%;
  height:             100%;
  font-family:        var(--page-font-family);
  color:              var(--page-font-color);
}

a:link
{
  text-decoration:    none;
  color:              var(--page-font-color);
}

a:visited
{
  text-decoration:    none;
  color:              var(--page-font-color);
}

a:hover
{
  text-decoration:    none;
  color:              var(--page-link-color);
}

#head
{
  width:              var(--page-width);
  font-family:        var(--font-head-family);
  font-size:          var(--font-head-size);
  font-weight:        normal;
}

#head td.logo
{
  width:              250px;
  font-family:        var(--font-head-family);
  font-size:          var(--font-head-size);
  font-weight:        normal;
  text-align:         left;
  vertical-align:     middle;
}

#head td.menu
{
  text-align:         right;
  font-family:        var(--font-head-family);
  font-size:          var(--font-head-size);
  font-weight:        bold;
  vertical-align:     middle;
}

#body quote 
{
  font-family:        var(--font-quote-family);
  font-size:          var(--font-quote-size);
  font-weight:        bold;
  font-variant:       small-caps;
}

#body
{
  width:              var(--page-width);
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         left;
}

#body h1
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size)*1.5);
  color:              var(--page-sect-color);
  font-weight:        bold;
  text-align:         left;
  font-variant:       small-caps;
}

#body h2
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size)*1.25);
  font-weight:        bold;
  text-align:         left;
  font-variant:       small-caps;
}

#body h3
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size)*1.10);
  color:              var(--page-sect-color);
  font-weight:        bold;
  text-align:         left;
  font-variant:       small-caps;
}

#body td, tbody
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         left;
  vertical-align:     top;
  padding-top:        0;
  margin-top:         0;
}

#body td.awards
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         center;
  vertical-align:     middle;
  height:             500px;
}

#body td.logos
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         left;
  vertical-align:     middle;
}

#body span.title
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 2.25);
  font-weight:        bold;
  font-variant:       small-caps;
}

#body span.subtitle
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 1.75);
  font-weight:        bold;
  font-variant:       small-caps;
}

#body span.blogtitle, span.sidetitle
{
  font-family:        var(--font-body-family);
  color:              var(--page-sect-color);
  font-size:          calc(var(--font-body-size) * 1.5);
  font-weight:        bold;
  font-variant:       small-caps;
}

#body p
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  color:              var(--page-page-color);
  font-weight:        normal;
  text-align:         left;
}

#body p.pressitem
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         justify;
  cursor:             pointer;
}

#body p.justify-press
{
  font-family:        var(--font-body-press-family);
  font-size:          var(--font-body-press-size);
  font-weight:        normal;
  text-align:         justify;
}

#body p.center-press
{
  font-family:        var(--font-body-press-family);
  font-size:          var(--font-body-press-size);
  font-weight:        normal;
  text-align:         center;
}

#body p.right-press
{
  font-family:        var(--font-body-press-family);
  font-size:          var(--font-body-press-size);
  font-weight:        normal;
  text-align:         right;
}

#body p.justify
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         justify;
}

#body p.center
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         center;
}

#body p.right
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         right;
}

#body p.title 
{
  font-family:        var(--font-quote-family);
  font-size:          65px;
  font-weight:        bold;
}

#body p.link
{
  padding:            0px;
  margin:             calc(var(--font-body-size) * 0.3);
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 0.7);
  font-weight:        normal;
  text-align:         left;
  vertical-align:     top;
}

#body p.prev
{
  float:              left;
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         left;
  vertical-align:     top;
}

#body p.next
{
  float:              right;
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         right;
  vertical-align:     top;
}

#body tt
{
  font-size:          0.85em;
}

#body pre
{
  font-size:          0.85em;
  padding-top:        0;
  margin-top:         0;
}

#body tags
{
  float:              right;
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 0.7);
  text-align:         right;
  color:              grey;
}

#content a:link
{
  text-decoration:    underline;
  color:              var(--page-font-color);
}

#content a:visited
{
  text-decoration:    underline;
  color:              var(--page-font-color);
}

#content th
{
  text-decoration:    bold;
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 0.8);
  color:              var(--page-font-color);
}

#content td.code
{
  font-family:        Courier;
  font-size:          calc(var(--font-body-size) * 0.6);
  color:              var(--page-font-color);
}

#content td.right
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 0.8);
  text-align:         right;
  color:              var(--page-font-color);
}

#content td
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 0.8);
  color:              var(--page-font-color);
}

#brawl
{
  font-family:        var(--font-foot-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         justify;
  padding-left:       50px;
}

#brawl h1
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size)*1.5);
  color:              var(--page-sect-color);
  font-weight:        bold;
  text-align:         left;
  font-variant:       small-caps;
}

#brawl h1 code
{
  font-size:          calc(var(--font-body-size)*1.5);
}

#brawl h2
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size)*1.25);
  font-weight:        bold;
  text-align:         left;
  font-variant:       small-caps;
}

#brawl h3
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size)*1.10);
  color:              var(--page-sect-color);
  font-weight:        bold;
  text-align:         left;
  font-variant:       small-caps;
}

#brawl h4
{
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size)*1.00);
  color:              var(--page-sect-color);
  font-weight:        bold;
  text-align:         left;
  font-variant:       small-caps;
}

#brawl p, ul, li
{
  font-weight:        normal;
  text-align:         justify;
}

#brawl code
{
  font-size:          calc(var(--font-body-size)*0.9);
}

#brawl table
{
  display:            block;
  padding-left:       50px;
  padding-right:      100px;
}

#brawl tr
{
  display:            grid;
  padding-bottom:     10px;
}

#brawl th
{
  text-decoration:    bold;
  font-family:        var(--font-body-family);
  font-size:          calc(var(--font-body-size) * 0.8);
  color:              var(--page-font-color);
  border-top:         1px solid #bdbdbd;
  padding-right:      10px;
  display:            contents;
}


#brawl td, tbody
{
  font-family:        var(--font-body-family);
  font-size:          var(--font-body-size);
  font-weight:        normal;
  text-align:         left;
  vertical-align:     top;
  padding-top:        0;
  padding-right:      10px;
  margin-top:         0;
  border-top:         1px solid #bdbdbd;
  display:            contents;
}

#foot
{
  width:              var(--page-width);
  font-family:        var(--font-foot-family);
  font-size:          var(--font-foot-size);
  font-weight:        normal;
  text-align:         center;
}

#head .hamburger 
{
  z-index:            100;
  border:             none;
  background:         white;
  cursor:             pointer;
}

#head .navigator
{
  position:           fixed;
  top:                128px;
  left:               0;
  right:              0;
  bottom:             0;
  z-index:            99;
  background:         white;
  color:              black;
  margin-block-start: 0;
  margin-block-end:   0;
  padding-left:       128px;
  padding-right:      128px;
  padding-top:        0px;
  list-style:         none;
  text-align:         left;
  font-family:        var(--font-quote-family);
  font-size:          64px;
  font-weight:        bold;
  font-variant:       small-caps;
  display:            none;
  overflow-y:         auto;
}

#head .openMenu
{
  display:            block;
}

#head .navigator li
{
  padding-top:        16px;
}

#head i.menuClose
{
  display:            none;
} 

.slideshow-container 
{
  width:           80%;
  height:          550px;
  max-width:       600px;
  overflow:        hidden;
  position:        relative;
  border:          0px;
}
.slide 
{
  width:           100%;
  min-width:       100%;
  height:          550px;
  position:        absolute;
  top:             0;
  left:            0;
  transition:      transform 0.7s ease-in-out;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #fffff;
  color:           black;
  font-size:       20px;
  font-weight:     bold;
  display:         none;
}

/** contact-table **/
.contact-table {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.contact-table caption {
  text-align: left;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0 0 0.5rem 0;
}
.contact-table th,
.contact-table td {
  border: 0px;
  padding: 12px;
  vertical-align: middle;
}
.contact-table th {
  width: 180px;
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
}
.contact-table .valign-top { vertical-align: top; }

.contact-table input[type="text"],
.contact-table input[type="email"],
.contact-table textarea 
{
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
}
.contact-table input:focus, 
.contact-table textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.contact-table button {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #1f2937;
  background: #111827;
  color: #fff;
  cursor: pointer;
}
.contact-table button:hover { filter: brightness(1.05); }
.contact-table .hp-row { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.contact-table .send-cell { display: flex; justify-content: flex-end; }

.form-message 
{ 
  max-width:     720px; 
  border:        1px solid #e5e7eb; 
  border-radius: 8px; 
  padding: 16px; 
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.form-message h3      { margin: 0 0 8px; font-size: 1.125rem; }
.form-message.success { display: flex; flex-direction: column; align-items: center; background: #f0fdf4; border-color: #86efac; }
.form-message.error   { display: flex; flex-direction: column; align-items: center; background: #fef2f2; border-color: #fecaca; }

@media (max-width: 560px) 
{
  .contact-table th, .contact-table td { display: block; width: 100%; }
  .contact-table th { border-bottom: 0; background: transparent; padding-bottom: 4px; }
  .contact-table tr { margin-bottom: 12px; display: block; border: 0px; border-radius: 8px; overflow: hidden; }
}
/** print friendly version - should work on all pages **/

@media print 
{
  #head td.menu      { display:none; }
  #body p.prev       { display:none; }
  #body p.next       { display:none; }
  #body td.spacer    { display:none; }
  #body td.sidebar   { display:none; }
}

/***************************************************************************/