/*

Core

The core of Geekstrap is a large set of Custom Properties. Some are set on an
`html {}` ruleset and will be inherited by all children. Others are set on an
`* {}` ruleset and are used as mixins, which are special because they rely on
formulas. The only explicit styling performed here is setting `font-size` and
`line-height` on a `body {}` ruleset.

Note: This is a variant of Cutestrap.com by Tyler Childs. 


Markup:
<p>
    Example paragraph
</p>

Styleguide 1.0

*/

* {
    --rhythm: 2rem;
    --rhythm-quadruple: calc(4 * var(--rhythm));
    --rhythm-triple: calc(3 * var(--rhythm));
    --rhythm-double: calc(2 * var(--rhythm));
    --rhythm-addhalf: calc(1.5 * var(--rhythm));
    --rhythm-half: calc((1/2) * var(--rhythm));
    --rhythm-third: calc((1/3) * var(--rhythm));
    --rhythm-fourth: calc((1/4) * var(--rhythm));
    --rhythm-sixth: calc((1/6) * var(--rhythm));
    --rhythm-eighth: calc((1/8) * var(--rhythm));
    --rhythm-twelfth: calc((1/12) * var(--rhythm));
    --rhythm-sixteenth: calc((1/16) * var(--rhythm));
    --line-height: var(--sub-rhythm, var(--rhythm));
    --line-height-ratio: 1.4;
    --font-size: calc(var(--line-height) / var(--line-height-ratio));
}

html {
    --color-primary-tint1: hsl(95, 80%, 60%);
/*    --color-primary: hsl(350, 80%, 45%); */
    --color-primary: hsl(95, 48%, 50%); /*ringu green*/
    --color-primary-shade1: hsl(95, 28%, 50%);
    --color-accent-tint1: hsl(38, 90%, 55%);
    --color-accent: hsl(38, 88%, 47%); /*orange*/
    --color-accent-shade1: hsl(38, 70%, 47%);
    --color-link: hsl(240, 100%, 47%);
    --color-link-visited: hsl(270, 100%, 50%);
    --color-link-hover: hsl(38, 100%, 40%);
    --color-link-active: hsl(240, 100%, 70%);
    --color-neutral-tint4: hsl(170, 10%, 98%);
    --color-neutral-tint3: hsl(170, 10%, 94%);
    --color-neutral-tint2: hsl(170, 10%, 85%);
    --color-neutral-tint1: hsl(170, 10%, 68%);
    --color-neutral: hsl(170, 10%, 55%);
    --color-neutral-shade1: hsl(170, 10%, 41%);
    --color-neutral-shade2: hsl(170, 10%, 30%);
    --color-neutral-shade3: hsl(170, 10%, 18%);
    --color-neutral-shade4: hsl(170, 10%, 2%);
    --color-error: hsl(5, 50%, 50%);
    --focus-outline: var(--rhythm-twelfth) dotted var(--color-primary-tint1);
    --focus-outline-offset: var(--rhythm-twelfth);
    --font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Verdana',sans-serif;
    /* --font-family: sans-serif; */
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-heading: var(--font-family);
    --font-body: var(--font-family);

}

html[data-theme="orig"] {
    --border-radius: 4px;
    --color-primary-tint1: hsl(106, 80%, 60%);
/*    --color-primary: hsl(350, 80%, 45%); */
    --color-primary: hsl(106, 80%, 45%); 
    --color-primary-shade1: hsl(106, 80%, 35%);
    --color-accent-tint1: hsl(217, 100%, 60%);
    --color-accent: hsl(217, 100%, 50%);
    --color-accent-shade1: hsl(217, 80%, 50%);
    --color-link: hsl(240, 100%, 50%);
    --color-link-visited: hsl(240, 100%, 50%);
    --color-link-hover: hsl(200, 100%, 50%);
    --color-link-active: hsl(240, 60%, 50%);
    --color-neutral-tint4: hsl(170, 10%, 98%);
    --color-neutral-tint3: hsl(170, 10%, 94%);
    --color-neutral-tint2: hsl(170, 10%, 85%);
    --color-neutral-tint1: hsl(170, 10%, 68%);
    --color-neutral: hsl(170, 10%, 55%);
    --color-neutral-shade1: hsl(170, 10%, 41%);
    --color-neutral-shade2: hsl(170, 10%, 30%);
    --color-neutral-shade3: hsl(170, 10%, 18%);
    --color-neutral-shade4: hsl(170, 10%, 2%);
    --color-error: hsl(5, 50%, 50%);
    
    --focus-outline: var(--rhythm-twelfth) dotted var(--color-primary-tint1);
    --focus-outline-offset: var(--rhythm-twelfth);
    --font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Verdana',sans-serif;
    /* --font-family: sans-serif; */
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-heading: var(--font-family);
    --font-body: var(--font-family);
}

body {
    font-size: var(--font-size);
    line-height: var(--line-height);
}

/*

Base

The base stylesheet requires `core.css` and uses it to set all html elements
to adhere to the Baseline Grid and gives them default styles.

Markup:
<div>
  <h1>Headline 1</h1>
  <p>
    Paragraph
  </p>
  <h2>Headline 2</h2>
  <ul>
    <li>Unordered item</li>
    <li>Unordered item</li>
  </ul>
  <h3>Headline 3</h3>
  <ol>
    <li>Ordered item</li>
    <li>Ordered item</li>
  </ol>
  <h4>Headline 4</h4>
<pre>
  Preformatted
</pre>
  <h5>Headline 5</h5>
  <blockquote>
    Blockquote
  </blockquote>
  <h6>Headline 6</h6>
  <table>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
  </table>
</div>

Styleguide 2.0

*/

* {
    border: 0;
    font: inherit;
    margin: 0;
    padding: 0;
    text-rendering: geometricPrecision;
}

:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

html {
    overflow-x: hidden;
}

html,
body {
    box-sizing: border-box;
    min-height: 100%;
}

body {
    background-color: var(--color-neutral-tint4);
    color: var(--color-neutral-shade4);
    font-family: var(--font-body);
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin: var(--rhythm) 0;
}

h1 {
    --line-height-ratio: 1.1;
    --sub-rhythm: var(--rhythm-triple);

    font-weight: 700;
    margin-bottom: var(--rhythm-double);
}

h2 {
    --line-height-ratio: 1.2;
    --sub-rhythm: var(--rhythm-triple);
}

h3 {
    --line-height-ratio: 1.3;
    --sub-rhythm: var(--rhythm-double);

    font-weight: 700;
}

h4 {
    --sub-rhythm: var(--rhythm-double);
}

h5 {
    --sub-rhythm: var(--rhythm-addhalf);
}

p {
    margin-bottom: var(--rhythm);
}

form {
    margin: var(--rhythm) 0;
}

pre,
code,
samp,
kbd {
    background-color: var(--color-neutral-tint3);
    font-size: var(--font-size);
    color: var(--color-primary-shade2);
    font-family: var(--font-mono);
    line-height: 1;
}

code,
samp,
kbd {
    border-radius: var(--border-radius);
    overflow-y: hidden;
    overflow-x: auto;
    padding: var(--rhythm-sixth);
}

pre {
    border-radius: var(--border-radius);
    line-height: var(--line-height);
    overflow-y: hidden;
    overflow-x: auto;
    padding: var(--rhythm-half);
    margin: 0 0 var(--rhythm);
    color: var(--color-primary-shade4);
}

pre code,
pre samp,
pre kbd {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

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

a:visited {
    color: var(--color-link-visited);
}

a:hover,
a:focus {
    color: var(--color-link-hover);
}

a:active {
    color: var(--color-link-active);
}

img,
video {
    max-width: 100%;
    vertical-align: top;
}

hr {
    height: var(--rhythm-double);
    margin-bottom: var(--rhythm);
    position: relative;
}

hr::before {
    background-color: var(--color-neutral-tint1);
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
}

ol,
ul {
    margin: 0 0 var(--rhythm) var(--rhythm);
}

ol {
    list-style-type: decimal;
}

ol ol {
    margin-bottom: 0;
}

ul {
    list-style-type: disc;
}

ul ul {
    margin-bottom: 0;
}

dt {
    font-style: italic;
}

dd {
    margin-left: var(--rhythm);
}

blockquote {
    margin: 0 0 var(--rhythm) var(--rhythm-half);
    border-left: var(--rhythm-eighth) solid var(--color-neutral-tint1);
    padding: var(--rhythm) var(--rhythm-half);
}

blockquote p:last-child {
    margin-bottom: 0;
}

figure {
    margin: 0 auto var(--rhythm);
}

small,
sub,
sup,
caption,
figcaption {
    font-size: calc(2 * var(--rhythm-third));
    vertical-align: top;
}

sub,
sup {
    position: relative;
}

sub {
    top: var(--rhythm-third);
}

sup {
    bottom: var(--rhythm-third);
}

caption,
figcaption {
    font-style: italic;
    text-align: center;
}

em,
cite,
i {
    font-style: italic;
}

strong,
var,
b {
    font-weight: bold;
}

q::before {
    content: "'";
}

q::after {
    content: "'";
}

q > q {
    font-style: italic;
}

dfn,
abbr {
    border-bottom: var(--rhythm-sixteenth) dotted var(--color-neutral-shade2);
    cursor: default;
}

table {
    border-radius: var(--border-radius);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--rhythm);
    width: 100%;
}

table th {
    text-align: left;
    font-weight: bold;
}

table th,
table td {
    padding: 0 var(--rhythm-fourth);
}

input,
label,
select,
button,
textarea {
    color: var(--color-neutral-shade4);
    display: block;
    padding: var(--rhythm-half);
    resize: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Firefox detection for keeping exact rhythm */
@-moz-document url-prefix() {
    select {
        line-height: calc(var(--rhythm) - 2px);
    }
}

label {
    color: var(--color-neutral-shade1);
    padding: 0;
}

/*

Buttons

Buttons and their variations

Markup:
<button class="button {{modifier_class}}">Button</button>

.-secondary - A button with secondary colors
.-outlined - An outlined button
.-link - A button that looks like a link
.-block - Block level button
.-large - A large button
.-small - A small button
.-small.-outlined - A small, outlined button

Styleguide 3.0

*/

.button {
    --border-color: transparent;
    --border-color-hover: transparent;
    --border-thickness: var(--rhythm-twelfth);
    --background-color: var(--color-primary);
    --background-color-hover: var(--color-primary-shade1);
    --text-color: var(--color-neutral-tint4);
    --text-color-hover: var(--color-neutral-tint4);

    align-items: center;
    align-content: center;
    background-color: var(--background-color);
    border: var(--border-thickness) solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    color: var(--text-color);
    cursor: pointer;
    display: inline-block;
    font-size: var(--font-size);
    justify-content: center;
    line-height: var(--rhythm);
    max-width: 100%;
    min-height: calc(2 * var(--rhythm));
    padding: calc(5 * var(--rhythm-twelfth)) var(--rhythm);
    text-align: center;
    transition-duration: 0ms;
    transition-property: all;
    user-select: none;
    width: auto;
    vertical-align: middle;
}
.iconbutton {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    fill: var(--text-color);
}
.icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    fill: var(--text-color);
}

.button::-moz-focus-inner {
    border: 0;
}

.button:link,
.button:visited {
    color: var(--text-color);
    text-decoration: none;
}

.button:focus,
.button:hover {
    background-color: var(--background-color-hover);
    border-color: var(--border-color-hover);
    color: var(--text-color-hover);
}

.button:active {
    background-color: var(--background-color);
    color: var(--text-color);
}

.button:disabled {
    opacity: .5;
    pointer-events: none;
}

.button.-tab {
    --border-color: var(--color-neutral-tint1);
    --border-thickness: var(--rhythm-sixteenth);
    --border-radius: 10px 10px 0px 0px ;
}
.button.-left {
    text-align: left;
}
.button.-right {
    text-align: right;
}
.button.-left::after {
    float:right; 
    content: "⇄" ; 
    /*content: "⋙" ; */
}
.button.-right::before {
    float:left; 
    content: "⇆" ; 
    /*content: "⋙" ; */
}


.button.-outlined {
    --background-color: transparent;
    --background-color-hover: var(--color-primary-shade1);
    --border-color: var(--color-primary);
    --border-color-hover: var(--color-primary-shade1);
    --text-color: var(--color-primary);
}

.button.-secondary {
    --background-color: var(--color-neutral-tint2);
    --background-color-hover: var(--color-neutral-tint1);
    --border-color: var(--color-neutral-tint2);
    --border-color-hover: var(--color-neutral-tint1);
    --text-color: var(--color-neutral-shade3);
    --text-color-hover: var(--color-neutral-shade3);
}
.button.-tertiary {
    --background-color: #AA2222;
    --background-color-hover: var(--color-neutral-tint1);
    --border-color: var(--color-neutral-tint2);
    --border-color-hover: var(--color-neutral-tint1);
    --text-color: #ffffff;
    --text-color-hover: var(--color-neutral-shade3);
}
.button.-quadernary {
    --background-color: #22AA22;
    --background-color-hover: var(--color-neutral-tint1);
    --border-color: var(--color-neutral-tint2);
    --border-color-hover: var(--color-neutral-tint1);
    --text-color: #ffffff;
    --text-color-hover: var(--color-neutral-shade3);
}

.button.-link {
    --background-color: transparent;
    --background-color-hover: transparent;
    --border-color: transparent;
    --border-color-hover: transparent;
    --text-color: var(--color-link);
    --text-color-hover: var(--color-link-hover);

    text-decoration: underline;
}

.button.-block {
    display: block;
    width: 100%;
}

.button.-w200 {
    width: 200px ;
}

.button.-small {
    --sub-rhythm: calc(14 * var(--rhythm-sixteenth));
    --border-thickness: var(--rhythm-sixteenth);

    font-size: var(--font-size);
    line-height: var(--line-height);
    margin-top: calc(-2 * var(--rhythm-sixteenth));
    min-height: var(--sub-rhythm);
    padding: 0 var(--rhythm-half);
}

.button.-large {
    --sub-rhythm: calc(1.5 * var(--rhythm));
    --border-thickness: var(--rhythm-eighth);

    font-size: var(--font-size);
    line-height: var(--line-height);
    min-height: calc(3 * var(--rhythm));
    padding: calc(3 * var(--rhythm-eighth)) calc(2 * var(--rhythm));
}


.navbutton {
    --border-color: transparent;
    --border-color-hover: transparent;
    --border-thickness: var(--rhythm-twelfth);
    --background-color: var(--color-neutral-shade1);
    --background-color-hover: var(--color-primary);
    --text-color: var(--color-neutral-tint4);
    --text-color-hover: var(--color-neutral-tint4);
    align-items: left ;
    align-content: left ;
    background-color: var(--background-color);
    /*border: var(--border-thickness) solid var(--border-color);*/
    border: var(--border-thickness) solid var(--color-neutral-tint4);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    color: var(--text-color);
    cursor: pointer;
    display: inline-block;
    font-size: var(--font-size);
    justify-content: center ;
    line-height: var(--rhythm);
    max-width: 100%;
    min-height: calc(2 * var(--rhythm));
    text-align: left ;
    transition-duration: 0ms;
    transition-property: all;
    user-select: none;
    width: auto;
    vertical-align: middle;
    --sub-rhythm: calc(14 * var(--rhythm-sixteenth));
    --border-thickness: var(--rhythm-sixteenth);
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin-top: calc(-2 * var(--rhythm-sixteenth));
    min-height: var(--sub-rhythm);
    padding: 5px;

}

.navbutton::-moz-focus-inner {
    border: 0;
}


.navbutton:link,
.navbutton:visited {
    color: var(--text-color);
    text-decoration: none;
}

.navbutton:focus,
.navbutton:hover {
    background-color: var(--background-color-hover);
    border-color: var(--border-color-hover);
    color: var(--text-color-hover);
}

.navbutton:active {
    background-color: var(--background-color-hover);
    color: var(--text-color);
}
.navbutton.-active {
    background-color: var(--background-color-hover);
    color: var(--text-color);
    /* font-size: 100%; */
}
a.navbutton.-active::after {
    float:right; 
    /* content: "⇨" ; */
    content: "⋙" ; 
}


.navbutton:disabled {
    opacity: .5;
    pointer-events: none;
}

.navbutton.-tab {
    --border-color: var(--color-neutral-tint1);
    --border-thickness: var(--rhythm-sixteenth);
    --border-radius: 10px 10px 0px 0px ;
}
.navbutton.-outlined {
    --background-color: var(--color-accent);
    --background-color-hover: var(--color-primary);
    --border-color: var(--color-primary);
    --border-color-hover: var(--color-primary-tint1);
    --text-color: var(--color-neutral-tint4);
    font-weight: bold ;
}

.navbutton.-secondary {
    --background-color: var(--color-neutral-tint2);
    --background-color-hover: var(--color-neutral-tint1);
    --border-color: var(--color-neutral-tint2);
    --border-color-hover: var(--color-neutral-tint1);
    --text-color: var(--color-neutral-shade3);
    --text-color-hover: var(--color-neutral-shade3);
}
.navbutton.-special {
    --background-color: var(--color-neutral-tint2);
    --background-color-hover: var(--color-neutral-tint1);
    --border-color: var(--color-neutral-tint2);
    --border-color-hover: var(--color-neutral-tint1);
    --text-color: var(--color-neutral-shade4);
    --text-color-hover: var(--color-neutral-shade3);
}

.navbutton.-link {
    --background-color: transparent;
    --background-color-hover: transparent;
    --border-color: transparent;
    --border-color-hover: transparent;
    --text-color: var(--color-link);
    --text-color-hover: var(--color-link-hover);

    text-decoration: underline;
}

.navbutton.-block {
    display: block;
    width: 100%;
}

.navbutton.-small {
    --sub-rhythm: calc(14 * var(--rhythm-sixteenth));
    --border-thickness: var(--rhythm-sixteenth);
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin-top: calc(-2 * var(--rhythm-sixteenth));
    min-height: var(--sub-rhythm);
    padding: 0 var(--rhythm-half);
}

.navbutton.-large {
    --sub-rhythm: calc(1.5 * var(--rhythm));
    --border-thickness: var(--rhythm-eighth);

    font-size: var(--font-size);
    line-height: var(--line-height);
    min-height: calc(3 * var(--rhythm));
    padding: calc(3 * var(--rhythm-eighth)) calc(2 * var(--rhythm));
}








/*

Forms

Markup:
<form>
    <label class="field">
        <input type="text" />
        <span class="label">Name</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Cone</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Bowl</span>
    </label>
    <label for="select" class="field">
        <select name="select">
            <option disabled="disabled" selected="selected">Flavors</option>
            <option>Chocolate</option>
            <option>Vanilla</option>
        </select>
        <span class="label">Favorite Ice Cream</span>
    </label>
    <label class="field">
        <textarea></textarea>
        <span class="label">Comments</span>
    </label>
    <label class="field">
        <input type="checkbox" />
        <span class="label">
            I consent to my ice cream flavors being saved into a database for
            eternity and understand and acknowledge this will have consequences
            for all of my decendants for decades to come.
        </span>
    </label>
</form>

Styleguide 4.0

*/

.field [disabled] + *,
[disabled] {
    cursor: default;
    opacity: .5;
    pointer-events: none;
}

.field {
    display: flex;
    margin-bottom: var(--rhythm);
    position: relative;
    text-align: left;
}

.field .label {
    z-index: 2;
}

.field [type=checkbox] + .label,
.field [type=radio] + .label {
    color: var(--color-neutral-shade4);
    cursor: pointer;
    display: inline-block;
    padding-left: var(--rhythm);
}

.field *:not([type=radio]):not([type=checkbox]) + .label {
    font-size: var(--rhythm-half);
    position: absolute;
    left: var(--rhythm-sixteenth);
    line-height: 1;
    padding: var(--rhythm-fourth) var(--rhythm-fourth) 0;
    right: var(--rhythm-sixteenth);
    top: 0;
}

.field input,
.field textarea,
.field select {
    background-color: var(--color-neutral-tint4);
    border: 1px solid var(--color-neutral-shade1);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin-top: -2px;
    padding: calc(7 * var(--rhythm-eighth)) var(--rhythm-fourth) var(--rhythm-eighth);
    position: relative;
    width: 100%;
}

.field select {
    z-index: 1;
}

/*

Select

Markup:
<label class="field {{modifier_class}}">
    <select>
        <option disabled="disabled" selected="selected">Select</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <span class="label">Select Label</span>
</label>

Styleguide 4.1

*/

.field select + .label::after {
    content: '';
    border-left: var(--rhythm-fourth) solid transparent;
    border-right: var(--rhythm-fourth) solid transparent;
    border-top: var(--rhythm-fourth) solid var(--color-neutral-shade1);
    bottom: calc(-2 * var(--rhythm-third));
    height: 0;
    pointer-events: none;
    position: absolute;
    right: var(--rhythm-half);
    width: 0;
}

.field option[disabled] {
    background-color: var(--color-neutral-tint3);
    color: var(--color-neutral-shade2);
}

.field.-inline {
    display: inline-block;
    margin-right: var(--rhythm-half);
}

.field.-half {
    display: inline-block;
    margin-right: var(--rhythm-half);
    width: 50%;
}
.field.-third {
    display: inline-block;
    margin-right: var(--rhythm-half);
    width: 33%;
}
.field.-quarter {
    display: inline-block;
    margin-right: var(--rhythm-half);
    width: 25%;
}


.field [type=checkbox],
.field [type=radio] {
    opacity: 0;
    position: absolute;
    z-index: 0;
}

.field [type=checkbox] + .label::before,
.field [type=radio] + .label::before {
    background-color: var(--color-neutral-tint4);
    border: 2px solid var(--color-neutral-shade1);
    content: '';
    height: var(--rhythm-half);
    left: 0;
    position: absolute;
    top: var(--rhythm-eighth);
    transform: translateY(var(--rhythm-sixteenth));
    width: var(--rhythm-half);
}

.field [type=checkbox] + .label::after,
.field [type=radio] + .label::after {
    background-color: var(--color-primary);
    border: 2px solid transparent;
    color: var(--color-neutral-tint4);
    height: var(--rhythm-fourth);
    left: var(--rhythm-eighth);
    position: absolute;
    top: var(--rhythm-fourth);
    transform: translateY(var(--rhythm-sixteenth));
    width: var(--rhythm-fourth);
}

/*

Checkbox

Markup:
<label class="field {{modifier_class}}">
    <input type="checkbox" />
    <span class="label">Checkbox</span>
</label>

Styleguide 4.2

*/

.field [type=checkbox] + .label::before,
.field [type=checkbox] + .label::after {
    border-radius: var(--border-radius);
}

/*

Radio

Markup:
<label class="field {{modifier_class}}">
    <input type="radio" />
    <span class="label">Radio</span>
</label>

Styleguide 4.3

*/

.field [type=radio] + .label::before,
.field [type=radio] + .label::after {
    border-radius: var(--rhythm);
}

.field [type=radio]:focus + .label::before,
.field [type=checkbox]:focus + .label::before {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.field [type=checkbox]:checked + .label::after,
.field [type=radio]:checked + .label::after {
    content: '';
}

/*

Input and text areas

Markup:
<label class="field {{modifier_class}}">
    <input type="text" />
    <span class="label">Input</span>
</label>
<label class="field {{modifier_class}}">
    <textarea></textarea>
    <span class="label">Textarea</span>
</label>

Styleguide 4.4

*/

.field textarea {
    margin-top: 0;
    min-height: calc(4 * var(--rhythm));
}

/*

Disabled Fields

Markup:
<form>
    <label class="field">
        <input type="text" value="Someone" disabled />
        <span class="label">Name</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" disabled />
        <span class="label">Cone</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" disabled />
        <span class="label">Bowl</span>
    </label>
    <label for="select" class="field">
        <select name="select" disabled>
            <option disabled="disabled" selected="selected">Flavors</option>
            <option>Chocolate</option>
            <option>Vanilla</option>
        </select>
        <span class="label">Favorite Ice Cream</span>
    </label>
    <label class="field">
        <textarea disabled>I am some comments</textarea>
        <span class="label">Comments</span>
    </label>
    <label class="field">
        <input type="checkbox" disabled />
        <span class="label">
            I consent to my ice cream flavors being saved into a database for
            eternity and understand and acknowledge this will have consequences
            for all of my decendants for decades to come.
        </span>
    </label>
</form>

Styleguide 4.5

*/

/*

Grid

A simple grid with automatic columns

Markup:
<div class="grid {{modifier_class}}">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

.-medium - start at 45rem
.-large - start at 80rem

Styleguide 5.0

*/

.grid {
    --columns: auto-fit;

    display: grid;
    column-gap: var(--rhythm);
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

@media (max-width: 45rem) {
    .grid.-medium {
        display: block;
    }
}

@media (max-width: 80rem) {
    .grid.-large {
        display: block;
    }
}

/*

Columns

Manually set column widths (Note: the syntax is passing a custom property with
a number value. KSS Docs only support modified classes, so ignore the term
[modifier class] and the dot before the number in the examples below).

Markup:
<div class="grid" style="--columns: {{modifier_class}}">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

.2 - Two columns
.3 - Three columns
.4 - Four columns

Styleguide 5.1

*/

/*

Wrappers

Elements with max widths and paddings that can be used to separate content

Markup:
<div class="wrapper {{modifier_class}}">
    Wrapper
</div>

.-thin - A max-width of 45rem
.-wide - A max-width of 80rem
.-flush - No vertical or horizontal spacing

Styleguide 6.0

*/

.wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 120rem;
    padding: var(--rhythm-double) var(--rhythm-half);
    width: 100%;
}

.wrapper.-thin {
    max-width: 45rem;
    padding: var(--rhythm) var(--rhythm-half);
}

.wrapper.-ringu {
    max-width: 80rem;
    padding: var(--rhythm) var(--rhythm-half);
}

.wrapper.-wide {
    max-width: 80rem;
    padding: var(--rhythm-triple) var(--rhythm-half);
}

.wrapper.-flush {
    padding: 0 var(--rhythm-half);
}

/*

Utilities

These utility classes have one or two CSS properties that are meant to save you from creating several identical classes to do the same thing, like just centering some text.

Markup:
<div class="{{modifier_class}}">
    Example Text
</div>

.disabled                - Disable an Element
.clearfix                - Clear floats to keep the parent container in shape
.f-none                  - float: none;
.f-left                  - float: left;
.f-right                 - float: right;
.ta-left                 - text-align: left;
.ta-center               - text-align: center;
.ta-right                - text-align: right;

Styleguide 7.0

*/

.disabled {
    cursor: default;
    opacity: .5;
    pointer-events: none;
}

.f-none {
    float: none;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.clearfix {
    clear: both;
    overflow: hidden;
}

.ta-left {
    text-align: left;
}

.ta-center {
    text-align: center;
}

.ta-right {
    text-align: right;
}

/*

Type Utilities

These are specific typography related utilities

Markup:
<div class="type {{modifier_class}}">
    The quick<br />
    brown fox<br />
    jumps over<br />
    the lazy dog.
</div>

.fw-light            - Changes the type to be 300 weight
.fw-normal           - Changes the type to be 400 weight
.fw-bold             - Changes the type to be 700 weight
.fs-small            - Small font-size
.fs-base             - Base font-size
.fs-large            - Large font-size

Styleguide 7.1

*/

.fw-light {
    font-weight: 300;
}

.fw-normal {
    font-weight: 400;
}

.fw-bold {
    font-weight: 700;
}

.fs-small,
.fs-base,
.fs-large {
    font-size: var(--font-size);
    line-height: var(--line-height);
}

.fs-small {
    --sub-rhythm: calc(.75 * var(--rhythm));
}

.fs-base {
    --sub-rhythm: initial;
}

.fs-large {
    --sub-rhythm: calc(1.25 * var(--rhythm));
}

/*

Margin Utilities

These utilities allow you to easily remove margins that you don't want

Markup:
<h1 class="{{modifier_class}}">
    Do you like margins?
</h1>

.m-zero - Remove margins
.mt-zero - Remove top margin only
.mb-zero - Remove bottom margin only

Styleguide 7.2

*/

.m-zero {
    margin: 0;
}

.mt-zero {
    margin-top: 0;
}

.mb-zero {
    margin-bottom: 0;
}

a.infoicon { 
    text-decoration:none;
    color:#0000FF;
}

a.infoiconred { 
    text-decoration:none;
    color:#AA0000;
    font-size: calc(2 * var(--font-size));
} 
.infobubble { 
    position:absolute;
    background: var(--color-neutral-tint3);
    color: var(--color-neutral-shade4);
    margin:10px;
    padding:30px;
    border: var(--rhythm-eighth) solid var(--color-neutral-tint1);
    border-radius:calc(5* var(--border-radius));
    z-index:9;
    opacity:1.0;">' ; 
} 
.infoblock { 
    background: var(--color-neutral-tint);
    color: var(--color-neutral-shade1);
    margin:10px;
    padding:20px;
    /* border: var(--rhythm-eighth) solid var(--color-neutral-tint);border-radius:calc(5* var(--border-radius)); */
    z-index:50;
    opacity:1.0;">' ; 
} 
.poptart { 
    position:absolute;
    background: var(--color-neutral-tint2);
    color: var(--color-neutral-shade4);
    margin:10px;
    padding:20px;
    display: none ;
    border: var(--rhythm-eighth) solid var(--color-neutral-tint1);
    border-radius:calc(5* var(--border-radius));
    opacity:0.7;">' ; 
} 
/*
    Dashboard Basic Layout
*/

.dashboard-layout {
    grid-template-areas:
        "header     header"
        "navigation content"
        "footer footer";
    grid-template-columns: 10em 1fr;
}

@media (min-width: 768px) {
    .dashboard-layout {
        display: grid;
    }
    .navigation {
        position: inline ;
        overflow: hidden;
        z-index: 90;
    } 
}

/* Header styles */

.header {
    grid-area: header;
}

/* Navigation Styles */
.navigation {
    background: var(--color-neutral-tint4);
    border-right: 1px solid var(--color-neutral-tint2);
    border-bottom: 1px solid var(--color-neutral-tint2);
    grid-area: navigation;
    /* margin-top: -1px; */
    margin-top: 10px;
    padding: var(--rhythm-double) var(--rhythm-half) var(--rhythm);
        position: fixed;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 45px;
        z-index: 100;
        max-width:9em;
}

.navigation a {
    text-decoration: none;
}

.navigation h6 {
    color: var(--color-neutral-shade2);
    margin: var(--rhythm) 0;
}

/* Content Styles */
.content {
    grid-area: content;
    min-width: 0;
    padding: var(--rhythm-double) var(--rhythm-half);
}

/*
    Geekstrap Styleguide Specific Items
*/

.hide-gridlines {
    background-image: none !important;
}

/* Content Styles */
.footer {
    background: var(--color-neutral-tint4);
    grid-area: footer;
    min-width: 0;
    padding: var(--rhythm);
}

/*
    KSS Specific Styles
*/

.kss-example {
    margin-bottom: var(--rhythm);
}

/*
    Palette Specific Designs
*/

.palette {
    --grid-column-min: 0;

    grid-gap: var(--rhythm-sixth);
}

.palette .item {
    background-color: var(--current-color);
    height: var(--rhythm-triple);
}

.primary {
    --current-color: var(--color-primary);
}

.primary.-shade {
    --current-color: var(--color-primary-shade1);
}

.primary.-tint {
    --current-color: var(--color-primary-tint1);
}

.link {
    --current-color: var(--color-link);
}

.link.-visited {
    --current-color: var(--color-link-visited);
}

.link.-hover {
    --current-color: var(--color-link-hover);
}

.link.-active {
    --current-color: var(--color-link-active);
}

.accent {
    --current-color: var(--color-accent);
}

.accent.-tint {
    --current-color: var(--color-accent-tint1);
}

.accent.-shade {
    --current-color: var(--color-accent-shade1);
}

.neutral {
    --current-color: var(--color-neutral);
}

.neutral.-shaded {
    --current-color: var(--color-neutral-shade4);
}

.neutral.-shade1 {
    --current-color: var(--color-neutral-shade1);
}

.neutral.-shade2 {
    --current-color: var(--color-neutral-shade2);
}

.neutral.-shade3 {
    --current-color: var(--color-neutral-shade3);
}

.neutral.-tinted {
    --current-color: var(--color-neutral-tint4);
}

.neutral.-tint1 {
    --current-color: var(--color-neutral-tint1);
}

.neutral.-tint2 {
    --current-color: var(--color-neutral-tint2);
}

.neutral.-tint3 {
    --current-color: var(--color-neutral-tint3);
}
/* @import url(https://fonts.googleapis.com/css?family=Pacifico); */

@media (max-width: 65rem) {
    * {
        --rhythm: 1.5rem;
    }
}

html[data-theme="dark"] {
    --color-primary-shade1: hsl(39, 80%, 60%);
    --color-primary: hsl(39, 80%, 45%);
    --color-primary-tint1: hsl(39, 80%, 35%);
    --color-accent-shade1: hsl(170, 80%, 60%);
    --color-accent: hsl(38, 88%, 47%); /*navbutton outline*/
    --color-accent-tint1: hsl(170, 80%, 35%);
    --color-link: hsl(230, 80%, 80%);
    --color-link-visited: hsl(230, 70%, 85%);
    --color-link-hover: hsl(230, 50%, 90%);
    --color-link-active: hsl(230, 50%, 90%);
    --color-neutral-shade4: hsl(170, 10%, 98%);
    --color-neutral-shade3: hsl(170, 10%, 94%);
    --color-neutral-shade2: hsl(170, 10%, 85%);
    --color-neutral-shade1: hsl(170, 10%, 68%);
    --color-neutral: hsl(170, 10%, 55%);
    --color-neutral-tint1: hsl(170, 10%, 41%);
    --color-neutral-tint2: hsl(170, 10%, 30%);
    --color-neutral-tint3: hsl(170, 10%, 18%);
    --color-neutral-tint4: hsl(170, 10%, 2%);
}

html[data-theme="ringu"] {
    --color-primary-tint1: hsl(95, 80%, 60%);
/*    --color-primary: hsl(350, 80%, 45%); */
    --color-primary: hsl(95, 48%, 50%); /*ringu green*/
    --color-primary-shade1: hsl(95, 28%, 50%);
    --color-accent-tint1: hsl(38, 90%, 55%);
    --color-accent: hsl(38, 88%, 47%); /*orange*/
    --color-accent-shade1: hsl(38, 70%, 47%);
    --color-link: hsl(240, 100%, 47%);
    --color-link-visited: hsl(270, 100%, 50%);
    --color-link-hover: hsl(38, 100%, 40%);
    --color-link-active: hsl(240, 100%, 70%);
    --color-neutral-tint4: hsl(170, 10%, 98%);
    --color-neutral-tint3: hsl(170, 10%, 94%);
    --color-neutral-tint2: hsl(170, 10%, 85%);
    --color-neutral-tint1: hsl(170, 10%, 68%);
    --color-neutral: hsl(170, 10%, 55%);
    --color-neutral-shade1: hsl(170, 10%, 41%);
    --color-neutral-shade2: hsl(170, 10%, 30%);
    --color-neutral-shade3: hsl(170, 10%, 18%);
    --color-neutral-shade4: hsl(170, 10%, 2%);
    --color-error: hsl(5, 50%, 50%);
}

[data-rhythm="small"] * {
    --rhythm: 1.5rem;
}

[data-rhythm="large"] * {
    --rhythm: 2.5rem;
}

@media (max-width: 65rem) {
    [data-rhythm="small"] * {
        --rhythm: 1rem;
    }

    [data-rhythm="large"] * {
        --rhythm: 2rem;
    }
}

[data-grid="off"] body {
    background-image: none !important;
}

h2 a {
    text-decoration: none;
}

.site-title:link,
.site-title:visited,
.site-title:hover,
.site-title:focus,
.site-title:active {
    color: var(--color-primary-shade1);
    font-family: monospace;
    text-decoration: none;
}

.title {
    color: var(--color-primary-tint1);
    /* font-family: 'Pacifico', 'Avenir', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Verdana', sans-serif; */
    font-family: 'Courier', fixed;
    font-weight: normal;
    color: var(--color-neutral-tint4);
}

a.title:link,
a.title:visited,
a.title:active {
    color: var(--color-primary-tint4);
}

a.title:hover,
a.title:focus {
    color: var(--color-primary);
}

@media (max-width: 35rem) {
    .sublogo.-hide-small {
        display: none;
    }
}

.sublogo.-show-small {
    display: none;
}


@media (max-width: 35rem) {
    .sublogo.-show-small {
        display: inline;
    }
}

@media (max-width: 35rem) {
    .dropmenu.-hide-small {
        display: none;
    }
}

.dropmenu.-show-small {
    display: none;
}

.hamburger {
    display: none;
}
@media (max-width: 35rem) {
    .dropmenu.-show-small {
        display: inline;
    }
    .navigation { 
        padding-bottom:0px;
        padding-top:0px;
        position: fixed;
        overflow: hidden;
        left: 0;
        right: 0;
        top: 45px;
        z-index: 100;
    } 
    .hamburger { 
        padding-bottom:0px;
        padding-top:0px;
        display: inline ;
        background: var(--color-tint);
    } 
    .wrapper { 
        padding-top:30px;
        margin-top:0px;
    } ; 
}


@media (max-width: 35rem) {
    .navigation.-hide-small {
        display: none;
    }
}

.navigation.-show-small {
    display: none;
}


@media (max-width: 35rem) {
    .navigation.-show-small {
        display: inline;
    }
}

.toolbar {
    background-color: var(--color-neutral-tint4);
    border-bottom: 1px solid var(--color-neutral-tint1);
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding: var(--rhythm-half) var(--rhythm);
    position: fixed;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
}

.toolbar,
.toolbar * {
    --rhythm: 1.5rem;
}

.toolbar-logo {
    --sub-rhythm: 2rem;

    float: left;
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin: 0;
}

.toolbar-controls {
    float: right;
    text-align: right;
}

.toolbar-label {
    display: none;
    padding-left: var(--rhythm-half);
}

@media (max-width: 28rem) {
    .toolbar-size {
        display: none;
    }
}

@media (min-width: 50rem) {
    .toolbar-label {
        display: inline-block;
    }
}

.toolbar-button {
    border: 1px solid var(--color-neutral-tint1);
    background-color: var(--color-neutral-tint3);
    border-radius: 2px;
    color: var(--color-neutral-shade3);
    cursor: pointer;
    display: inline-block;
    padding: var(--rhythm-eighth) var(--rhythm-half);
    vertical-align: middle;
    text-decoration: none;
}

.toolbar-button:hover,
.toolbar-button:focus {
    background-color: var(--color-neutral-tint2);
}

.toolbar-label + .toolbar-button {
    margin-left: var(--rhythm-half);
}

.toolbar-button.-small {
    --line-height-ratio: 2;

    font-size: var(--font-size);
}

.toolbar-button.-large {
    --line-height-ratio: 1;

    font-size: var(--font-size);
}

.toolbar-button.-light {
    background-color: var(--color-neutral-tint4);
    color: var(--color-neutral-shade2);
}

.toolbar-button.-dark {
    background-color: var(--color-neutral-shade2);
    color: var(--color-neutral-tint4);
}

.toolbar-button.-on {
    text-decoration: underline overline;
}

[data-theme="dark"] .toolbar-button.-light {
    background-color: var(--color-neutral-shade2);
    color: var(--color-neutral-tint4);
}

[data-theme="dark"] .toolbar-button.-dark {
    background-color: var(--color-neutral-tint4);
    color: var(--color-neutral-shade2);
}

[data-rhythm="small"] .toolbar-button.-small,
[data-rhythm="normal"] .toolbar-button.-normal,
[data-rhythm="large"] .toolbar-button.-large,
[data-theme="light"] .toolbar-button.-light,
[data-theme="dark"] .toolbar-button.-dark,
[data-grid="on"] .toolbar-button.-on,
[data-grid="off"] .toolbar-button.-off {
    cursor: normal;
    opacity: .5;
    pointer-events: none;
}

.footer-content {
    --columns: 4;

    margin: 0 auto;
    max-width: 80rem;
}

@media (max-width: 65rem) {
    .footer-content {
        --columns: 2;
    }
}

@media (max-width: 35rem) {
    .footer-content {
        --columns: 1;
    }
}

.footer ul {
    list-style-type: none;
    margin-left: 0;
}

.errormessage { 
    color: var(--color-neutral-tint4);
    border: 1px solid var(--color-error);
    background-color: var(--color-error);
    padding: var(--rhythm-sixth);
    margin: var(--rhythm-sixth);

}
.noticemessage { 
    color: var(--color-neutral-tint4);
    border: 1px solid var(--color-primary-tint1);
    background-color: var(--color-primary);
    padding: var(--rhythm-half);
    margin: var(--rhythm-sixth);
    border-radius: calc( 4 * var(--border-radius) );
    /* text-align: center; */
    position:absolute;top:5px;left:5px;z-index:101;
}
.article { 
    border: 0px solid var(--color-neutral-tint2);
    background-color: var(--color-neutral-tint4);
    padding:20px;
}
.articleheader { 
    border: 1px solid var(--color-neutral-tint2);
    background-color: var(--color-neutral-tint3);
}
.entity {
    color:#00FF00;
} 
.blob {
  border: 1px solid #808080;
  border-radius: calc(2 * var(--border-radius));
  padding: var(--rhythm-sixth);
  margin: var(--rhythm-sixth);
  background: var(--color-neutral-tint3);
  color: var(--color-neutral-shade1);
  text-decoration: none ; 
  }

.box {
  border: 1px solid #808080;
  border-radius: var(--border-radius);
  padding: var(--rhythm-sixth);
  margin: var(--rhythm-sixth);
  }
.noticebox { 
    color: var(--color-neutral-tint4);
    border: 2px solid var(--color-neutral-tint2);
    background-color: var(--color-neutral-tint1);
    border-radius: var(--border-radius);
    padding: var(--rhythm-sixth);
    margin: var(--rhythm-sixth);
    
}
  
.tabbox {
  border: 1px solid #000000;
  border-color: var(--color-neutral-shade4);
  border-radius: var(--border-radius);
  padding: var(--rhythm-sixth);
  margin: 0 ;
  width: auto ;
  }


//https://cssloaders.github.io/  change name to spinloader

.spinloader {
  width: 48px;
  height: 48px;
  border: 3px dotted #FFF;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}
.spinloader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #E1940E;
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}