/*
	--------------------------
	Global Styles
	--------------------------
*/

/*#region  Colors 
--------------------------  */

    .orng
        { color: #ff6400; }
    .gry
        { color: #2a2a2a; }
    .lgry
        { color: #c8c8c8; }

/*#endregion */

/*#region  Custom Classes
-----------------------------  */

    .hidden
        { display: none; }
    .invisible
        { visibility: hidden; }
    .clear
        { clear: both; }

    .centre
        { text-align: center; }
    .left
        { float: left; }
    .right
        { float: right; }

    img.left
        { margin-right: 1em; }
    img[style*="left"]
        { margin-right: 1em; }
    img.right
        { margin-left: 1em; }
    img[style*="right"]
        { margin-left: 1em; }
        
    input[type="checkbox"]
        { display: none; }
    input[type="checkbox"] + label
        { position: relative; }
    input[type="checkbox"] + label:before
        { background-color: #fafafa; padding: 0.5em 0.75em; border-radius: 0.25em; display: inline-block; font-family: "pt-sans",sans-serif; font-style: normal; font-weight: 400; font-size: 1em; content: "\2714"; vertical-align: middle; margin-right: 0.5em; line-height: 1em; }

    /*#region  Custom Responsive
    ----------------------------  */

        @media screen and (max-width: 950px) {
           img.left, img[style*="left"]
            { margin-right: 0; float: none !important; margin-bottom: 1em; display: block; }
           img.right, img[style*="right"]
            { margin-left: 0; float: none !important; margin-bottom: 1em; display: block; }
        }

    /*#endregion */

/*#endregion */


/*#region  Typography 
--------------------------  */

    h1
        { font-family: "pt-sans", sans-serif; font-size: 1.75em; font-weight: 700; margin: 0 0 1em 0; color: #ff6400; }
    h2
        { font-family: "pt-sans", sans-serif; font-size: 1.5em; font-weight: 700; }
    h3
        { font-family: "pt-sans", sans-serif; font-size: 1.25em; font-weight: 700; }

    article h1, section h1
        { font-size: 1.5em; color: #2a2a2a; }

    strong
        { font-weight: 600; }

    input, textarea, select
        { margin: 0; padding: 0.5em 0.75em; margin-bottom: 0.75em; width: 100%; border-radius: 0.25em; border: none; font-family: "pt-sans",sans-serif; font-style: normal; font-weight: 400; font-size: 1em; 
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    button
        { width: 100%; border: none; border-radius: 0.25em; padding: 0.5em; font-family: "pt-sans",sans-serif; font-style: normal; font-size: 1em; font-weight: 400; 
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    p
        { margin: 0 0 1em 0; }
    a
        { color: #ff6400; text-decoration: none; }
    a:hover
        { text-decoration: underline; }

    ul, ol
        { overflow: hidden; }

    img
        { max-width: 100%; }

/*#endregion */

/*#region  body 
--------------------------  */

    body
        { text-align: left; font-family: "pt-sans",sans-serif; font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.5em; width: 100%; padding: 0; margin: 0; min-width: 18.75em; background: #c8c8c8 url("/_resources/files/template/noise.png") repeat; color: #2a2a2a; }

/*#endregion */

/*#region  Header 
--------------------------  */

    header
        { float: left; text-align: left; width: 100%; min-width: 18.75em; padding: 0.5em 1em; background: #2a2a2a url("/_resources/files/template/noise.png") repeat; overflow: hidden;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

    /* nav */
    header > nav
        { float: right; margin-top: 0.25em; font-size: 0.9em; }
    header > nav ul
        { float: left; list-style-type: none; padding: 0; margin: 0; background: transparent url("/_resources/files/template/noise.png") repeat; border-radius: 0.5em; overflow: hidden; }
    header > nav ul li
        { float: left; }
    header > nav ul li a
        { text-decoration: none; position: relative; display: block; padding: 0.5em 1em; color: #c8c8c8; border-left: solid 2px #2a2a2a; }
    header > nav ul li:first-child a
        { border-left: none; }
    header > nav ul li a:hover
        { background-color: #ff6400; text-decoration: none; }

    /*#region  Header Responsive
    -----------------------------  */

        @media screen and (max-width: 600px) {
           header > nav
            { float: none; margin-left: 50%; min-width: 20em;
               -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
        }

    /*#endregion */

    
/*#endregion */

/*#region  Main 
--------------------------  */

    main
        { margin: 2%; float: left; width: 96%; }

/*#endregion */

/*#region  Footer 
--------------------------  */

    footer
        { padding-top: 1em; position: fixed; text-align: right; left: 0; bottom: 0; width: 95%; z-index: 10; min-width: 18.75em; padding: 0.5em 2.5%; }

/*#endregion */

/*#region  Flow 
--------------------------  */

    .flw
        { padding: 0; display: flex; 
          -ms-flex-flow: row wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; }
    .flw article
        { width: 33%; margin: 0 1em 3em 1em; padding: 1em 1em 3em 1em; background-color: #2a2a2a; color: #c8c8c8; background: #2a2a2a url("/_resources/files/template/noise.png") repeat; position: relative;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
          -ms-flex: 1 0 22%; -webkit-flex: 1 0 22%; flex: 1 0 22%; }
    .flw article div
        { display: flex; cursor: pointer; 
          -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
    .flw article h1
        { color: #c8c8c8; }
    .flw article div p
        { -ms-flex: 1 0 auto; -webkit-flex: 1 0 auto; flex: 1 0 auto; }

    .flw article div > a
        { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5em; text-align: center; background: #ff6400 url("/_resources/files/template/noise.png") repeat; color: #c8c8c8; }
    .flw article div:hover > a
        { background: #ff6400; text-decoration: none; }

    /*#region  Flow Responsive
    --------------------------  */

        @media screen and (max-width: 1200px) {
           .flw article
            { flex-basis: 30%; }
        }

        @media screen and (max-width: 450px) {
           .flw article
            { flex-basis: 75%; }
        }

    /*#endregion */

/*#endregion */

/*#region  Tutorials 
--------------------------  */

    section.ttl
        { margin-bottom: 0.5em; clear: both; float: left; width: 100%; }
    section.ttl:first-of-type
        { margin-top: 1em; }
    section.ttl h1
        { margin-bottom: 0.5em; }
    section.ttl h1 a
        { color: #2a2a2a; background: #bbb url("/_resources/files/template/noise.png") repeat; display: block; padding: 0.5em; }
    section.ttl h1 a:hover
        { text-decoration: none; background-color: #a9a9a9; }
    section.ttl h1 a:after
        { content: "v"; float: right; font-weight: 400; font-size: 0.8em; line-height: 1.25em;
          -moz-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; transition: all ease-in-out .2s; 
          -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    section.ttl.o h1 a:after
        { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
    section.ttl div
        { max-height: 0; overflow: hidden; padding: 0 0.5em;
          -moz-transition: max-height linear .5s; -o-transition: max-height linear .5s; -webkit-transition: max-height linear .5s; transition: max-height linear .5s; }
    section.ttl.o div
        { max-height: 300em; }
    
    nav.sqn
        { margin-top: 2em; }    
    nav.sqn a
        { background: #2a2a2a url("/_resources/files/template/noise.png") repeat; display: block; float: left; padding: 0.5em; font-size: 0.9em; }
    nav.sqn a:hover
        { text-decoration: none; background-color: #ff6400; color: #c8c8c8; }
    nav.sqn a.n
        { float: right; }
    nav.sqn a.p:before
        { content: "< "; }
    nav.sqn a.n:after
        { content: " >"; }

    /*#region  Tutorials Responsive
    -------------------------------  */

        @media screen and (max-width: 600px) {
           nav.sqn a
            { margin-bottom: 1em; }
        }

    /*#endregion */

/*#endregion */