/*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 needed to make certain types of accordian-like, or vertical fill layouts, work correctly.*/
.so-container-v{
   display: flex;
   flex-flow: column;
   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;
}

/* 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;
}

/*  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 wrap;
    justify-content: flex-start;
    position: relative;
}

/* wc stands for wrap centered.
   This container is used when you want wrapped items to wrap to the center of the next line*/
.so-container-wc {
    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-html-default, 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-html-default{
  position: relative;
  display: block;
}

/* For these to work correctly, the parent container cannot have any padding, so additional container nesting may be necessary to make this type of overlap work. :( */
.so-container-overlay, .so-layer {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgba(0,0,0,0);
}



/*---------------------------------------------------------------------------------------------
    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-padding {
    padding: 0.191cm;
}

.so-copy-parent-v {
    height: 100%;
}
.so-copy-parent-h {
    width: 100%;
}
.so-copy-parent-size {
    width: 100%;
    height: 100%;
}

.so-spacer-v-confident {
    height: 0.6180cm;
}
.so-spacer-v-normal {
    height: 0.3820cm;
}
.so-spacer-v-shy {
    height: 0.191cm;
}

.so-spacer-h-confident {
    width: 0.6180cm;
}
.so-spacer-h-normal {
    width: 0.3820cm;
}
.so-spacer-h-shy {
    width: 0.191cm;
}


/*---------------------------------------------------------------------------------------------
    FORCES SECTION
---------------------------------------------------------------------------------------------*/

/*f stands for flow. Meaning the element will attempt to fill in as much space as it can in the direction of the main flow of its parent container element*/
.so-force-expand-f,
.so-force-expand-f-1 {
    flex-grow: 1;
    overflow: hidden;
}

.so-force-expand-f-2{
    flex-grow: 2;
    overflow: hidden;
}
.so-force-expand-f-3 {
    flex-grow: 3;
    overflow: hidden;
}
/*I find myself needing this behavior more often than I think I would. It allows you to have an expanding force that can compress the regular expanding forces that use flex-grow of 1-3.
  So, you can create an element that--when wrapped to a new line--has a different alignment than it did when it was on the same line as the unrivaled force..*/
.so-force-expand-f-unrivaled{
    flex-grow: 10000;
}

/*af stands for against flow. Meaning it will attempt to fill in the alignment space to the full capacity based on the opposite direction of the flex-flow
NOTE Super important. This tag does NOT work exactly like you'd expect it would, based on the behavior of the so-force-expand-f tag. If ANY size matching the
against flow direction is applied to the object, it will take that size as precident. This includes max-height and height, for example. It will also not align the object correctly.
Adding other forces to the object (like self-align-af-s or self-just-t) will shrink the object to its min-height / min-width depending on the container flow.
This is basically only useful when you want an element to match the height of the other things on its line. When the element goes to a new line, it will become its default size, or min-size.
The expected behavior of a so-force-expand-af can be achieved by use of a nested so-container-hc with vertical centering*/
.so-force-match-af{
    align-self: stretch !important;
}

.so-force-maintain-size{
    flex-shrink: 0;
}

/*this is somewhat of a kludgey fix for a incredibly specific behavior, in which you want the so-force-expand-f 1-3 to work like percentages. Flex-box uses part of the elment
size to determine weighted space to give to flex-grow items. This fix, when applied to each element in a container, will allow them to split their size exactly in proportion to the ratio of the flex-grow property*/
.so-force-normalize-distribution{
    flex-basis: 1px;
}


/*---------------------------------------------------------------------------------------------
    ALIGNING SECTION - should probs ultimately be part of the force section.
    But this is an intermediate framework for now.
---------------------------------------------------------------------------------------------*/
/* in this framework, the word ALIGN means the location of the element in the direction opposite of the flow direction. Although, I included the af (against flow) for clarity when writing tags.
The reason you don't see tags below with the f (for flow) word, is because most of the alignment on the flow direction is already taken care of by the selection of the correct container type*/

/* the word children refers to all the children contained within an element. So the tags with 'children' refer to a parent container and the way it lays out its children*/
.so-children-align-af-c{
  align-items: center;
}

.so-self-align-af-s{
  align-self: flex-start;
}
.so-self-align-af-c{
  align-self: center;
}
.so-self-align-af-e{
  align-self: flex-end;
}

/* just stands for justify which is used here to mean a flow agnostic alignment force.*/
/* t stands for top, b stands for bottom, l stands for left, r stands for right */
.so-self-just-t {
    margin-top: 0;
    margin-bottom: auto;
}
.so-self-just-b{
    margin-bottom: 0;
    margin-top: auto;
}
.so-self-just-l {
    margin-left: 0;
    margin-right: auto;
}
.so-self-just-r {
    margin-left: auto;
    margin-right: 0
}
.so-self-just-vc {
    margin-top: auto;
    margin-bottom: auto;
}
.so-self-just-hc {
    margin-left: auto;
    margin-right: auto;
}
.so-self-just-c {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}


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

.so-text-title {
  font-size: 160%;
  line-height: 130%
}

.so-text-paragraph{
  font-size: 120%;
  line-height: 130%
}

.so-text-confident{
  font-size: 130%;
}
.so-text-shy{
  font-size: 90%;
}

.so-text-align-l{
  text-align: left;
}
.so-text-align-r{
  text-align: right;
}
.so-text-align-c{
  text-align: center;
}
.so-text-align-j{
  text-align: justify;
}

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

.so-text-nowrap{
    white-space: nowrap;
    overflow: hidden;
}
.so-text-decoration-remove{
    text-decoration: none;
}


/*---------------------------------------------------------------------------------------------
    COMMON COMPONENTS SECTION - most of these are here as examples of useful tricks when
    building website layouts. Unless you override these defaults, they probably won't be quite
    right for your design.
---------------------------------------------------------------------------------------------*/

/* this can be used to set a consistant size for the main content pages on a website. So, if this is centered on a page you can create a minimum size for the bulk of your content to be readable. */
.so-page-segment{
  max-width: 28cm;
}
/* the flex-basis property is nearly always neccessary when using this framework. It basically allows you to set the size point of wrapping on a dynamic object--one with a variable size, that you still want to expand when it wraps.
This size can be thought of as the smallest size an element can get before it wraps to a new line.*/
.so-content-wrap-size{
  flex-basis: 12cm;
}

/* often, it's better to use a new element than a border for the separation of content. It can allow you to get the layout more responsive and consistant. This is not always the case though.  */
.so-content-separator{
  background-color: #515151;
  height: 1px;
}

/* can help a design feel a bit easier on the eyes, and less jarring. the round corners make a design feel more friendly, more often than not*/
.so-smooth-corners {
    border-radius: 6px;
}

/* this can be unbelievable useful for making text work on slightly distracting backgrounds, or where text doesn't have enough contrast with the background--on its own--to be easily readable */
.so-text-outline-subtle{
  text-shadow: 0 0 1px #515151;
}


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

.so-hide {
    display: none;
}

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

.so-clickable {
    cursor:pointer;
}

.so-scrollable{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* sometimes it's cleaner to set a default margin on a bunch of elements, and then remove it for a particular child to make things
   look correct. Like for a nav element that appears in multiple places in the UI, but you want to use the same css class. This can help fix alignments quickly and cleanly, as long as you use it intelligently and sparingly.*/
.so-margin-remove{
  margin: 0 !important;
}

/* the containers in this framework all prevent overlow by default. This is a quick way to allow things to appear to overlap and spill out of their original containers */
.so-overflow-visible{
  overflow: visible !important;
}

/* this one is a little misleading and cryptic, and probably wouldn't make much sense to use without javascript applying it to
   some element at an opportune time. The idea is that you can tell an element to take up the entirety of a wrap line, and not let
   other elements join in with it. When used with a media query--ew--this can give you interesting and useful wrapping behavior;
   such as an element that is originally aligned to the right of the container, but that will always be centered in its row after the first wrap */
.so-resist-wrap-buddies{
    flex-basis: 100%;
}

/* 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-row {
    flex-direction: row-reverse;
}
.so-reverse-column {
    flex-direction: column-reverse;
}
/* turns out that certain nesting structures can break the scrolling on IOS devices. It makes the scrolling act a bit gittery, and destroys momentum.
   This tag, when applied to a scrolling element, fixes this problem.*/
.so-ios-momentum-scroll-fix{
  -webkit-overflow-scrolling: touch;
}