/*This is the beginning of a simple css framework.

    h - stands for horizontal
    v - stands for vertical
    w - stands for wrap
    c - stands for centered
    e - stands for edge

    so - stands for stratis optimization
*/

/*---------------------------------------------------------------------------------------------
    MAIN PAGE SECTION

    Need to set some default overrides to make the flexbox stuff function correctly.
---------------------------------------------------------------------------------------------*/
* {
    box-sizing: border-box;
}

html {
    margin: 0cm;
    padding: 0cm;
}

body {
    margin: 0cm;
    padding: 0cm;
}

li {
    margin-bottom: 0.191cm;
    list-style-position: inside;
}

/*---------------------------------------------------------------------------------------------
    CONTAINER SECTION
---------------------------------------------------------------------------------------------*/

/*v stands for vertical.
  This container is just for laying out content vertically...*/
.so-container-v{
  position: relative;
}

/*col stands for column.
  This container is needed to make certain types of accordian-like, or vertical fill layouts, work correctly.*/
.so-container-col{
   display: flex;
   flex-flow: column;
   position: relative;
}

/* hc stands for horizontal centered.
   This container is used when you want a full width row that keeps content centered horizontally*/
.so-container-hc{
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    position: relative;
}
/* he stands for horizontal edge.
   This container is used when you want a row of items to dynamically change the space between the children, but still have the first and last child up against the edge of the container*/
.so-container-he{
   display: flex;
   flex-flow: row;
   justify-content: space-between;
   position: relative;
}
/* h stands for horizontal.
   This container is used when you want a row of items to be placed like a single line of text in a book. There is no wrapping*/
.so-container-h{
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    position: relative;
}

/*  This container is used when you want wrapped items to wrap like the text in a book. Each element on a new row preserves its size*/
.so-container-book {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}

/* w stands for wrap.
   This container is used when you want wrapped items to wrap to the center of the next line*/
.so-container-w {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    position: relative;
}

/* we stands for wrap to edge.
   This container is used when you want wrapped items to wrap to the edges of the next line*/
.so-container-we {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
}

/*sfc stands for scroll friendly centering.
  This container will fill the width of the parent element, center the content, but allow the parent container to have scrolling
  Should be used with a parent container of so-container-v, with overflow set to auto or scroll.
  NOTE! There is a slight bug in microsoft edge, where inline-flex ignores the scrollbar at the bottom of the screen, and triggers the vertical scroll bar to appear, even when not needed.
*/
.so-container-sfc {
    display: inline-flex;
    flex-flow: row;
    justify-content: space-around;
    position: relative;

    align-items: center;

    min-width: 100%;
    min-height: 100%;

    /*min-height: calc(100% - 0.5cm); this will fix the bug in edge by making up the scrollbar height difference*/
}

.so-container-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0);
}

.so-adorner-overlay{
  position: relative;
  min-height: 100vh;
}

/*---------------------------------------------------------------------------------------------
    PADDING SECTION

    If we used a fixed padding and only apply it to the inner most elements�or
    sparingly when you need some indentation�you can get things to always line up.
---------------------------------------------------------------------------------------------*/

.so-child-padding {
    padding: 0.191cm;
}

.so-child-padding-squished{
  margin-top: 0;
}

.so-container-padding {
    padding: 0.191cm;
}
.so-container-padding.so-container-padding-bonus-v {
    padding-top: 0.3820cm;
    padding-bottom: 0.3820cm;
}

/*af stands for against flow. Meaning it will fill in the alignment space to the full capacity based on the direction of the flex-flow*/
.so-fill-af{
    align-self: stretch;
}

.so-fill-parent-v {
    height: 100%;
}

.so-spacer-h-confident {
    height: 0.6180cm;
}
.so-spacer-h-normal {
    height: 0.3820cm;
}
.so-spacer-h-shy {
    height: 0.191cm;
}
.so-fill,
.so-fill1 {
    flex-grow: 1;
    overflow: hidden;
}

.so-fill2 {
    flex-grow: 2;
    overflow: hidden;
}
.so-fill3 {
    flex-grow: 3;
    overflow: hidden;
}
.so-normalize-flex-basis{
    flex-basis: 1px;
}

.so-match-parent-width{
  width: 100%;
}
.so-match-parent-height{
  height: 100%;
}

.so-full-force-spring{
  flex-grow: 10000;
}

/*---------------------------------------------------------------------------------------------
    TEXT SECTION
---------------------------------------------------------------------------------------------*/

.so-title-text {
    font-size: 160%;
    padding: 0.3820cm;
}
.so-paragraph-text{
  font-size: 120%;
}
.so-sub-title-span-text{
  font-size: 80%;
}
.so-text-confident{
  font-size: 130%;
}
.so-text-shy{
  font-size: 90%;
}
.so-text-align-r{
  text-align: right;
}
.so-text-align-center{
  text-align: center;
}

.so-bold-text {
    font-weight: 700;
}
.so-italic-text {
    font-style: italic;
}

.so-nowrap{
  white-space: nowrap;
  overflow: hidden;
}

/*---------------------------------------------------------------------------------------------
    BUTTON SECTION
---------------------------------------------------------------------------------------------*/
/* which includes nothing for now :D */


/*---------------------------------------------------------------------------------------------
    ALIGNING SECTION
---------------------------------------------------------------------------------------------*/


.so-align-self-start{
  align-self: flex-start;
}

.so-align-center{
  align-items: center;
}

.so-align-self-end{
  align-self: flex-end;
}


.so-child-just-t {
    margin-top: 0 !important;
    margin-bottom: auto !important;
}
.so-child-just-b{
    margin-bottom: 0 !important;
    margin-top: auto !important;
}
.so-child-just-l {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.so-child-just-r {
    margin-left: auto !important;
    margin-right: 0 !important;
}


/*---------------------------------------------------------------------------------------------
    HELPER SECTION
---------------------------------------------------------------------------------------------*/

.so-hide {
    display: none;
}

.so-selectable{
    pointer-events: auto;
}

.so-unselectable {
    pointer-events: none;
}

.so-clickable {
    cursor:pointer;
}

.so-remove-underline{
    text-decoration: none;
}

.so-close-overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    cursor: pointer;
}

.so-scrollable{
    overflow: auto;
}
.so-resist-force{
    flex-shrink: 0;
}

/*ONLY use for changing the order of overlap, so we can avoid using z-orders
  This will allow you to use the order in the html to dictate overlap.
  Use sparingly if at all, as it's kind of kludgey.
*/
.so-reverse-r {
    flex-direction: row-reverse;
}
.so-reverse-c {
    flex-direction: column-reverse;
}

.so-layer {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgba(0,0,0,0);
    left: 0;
    top: 0;
}

.so-ios-disable-overflow-scrolling{
  -webkit-overflow-scrolling: auto !important;
}

/* This is a class that gets toggled with javascript in order to turn the main
page content into a background that is not part of the page flow. This allows
the overlay to be the thing to trigger the html/body scroll effect. This is so
we can scroll the html, and not the particular overlay. Which fixes a lot of
horrible cross browser performance problems. Without additional work, this will
get not save the scroll position of the user when it is applied. I.e. The page
will snap to the top. This only really works since the navbar is at the top of
the page. To fix this--if needed--apply the scroll position to this class like
top: scroll-position-in-pixels. You will then need to put them back where they
were after the overlay is closed.;
*/
/* top: scroll-position-at-time-of-overlay; */
.so-backgroundify-to-viewport{
  position: fixed;
}