/* Set of reusable classes */

/* Some colors */
.green
    color #0F0

.dark-green
    color #0A0

.red
    color #F00

/* Add light blue shadow to <input/> form controls */
.form-control:focus
    border-color        #66afe9
    outline             0
    -webkit-box-shadow  inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    box-shadow          inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)

.form-control
    display             block
    width               100%
    padding             .5em 1em
    line-height         1.42857143
    color               #555
    border              1px solid #ccc
    border-radius       4px
    -webkit-box-shadow  inset 0 1px 1px rgba(0,0,0,.075)
    box-shadow          inset 0 1px 1px rgba(0,0,0,.075)
    -webkit-transition  border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s
    -o-transition       border-color ease-in-out .15s,box-shadow ease-in-out .15s
    transition          border-color ease-in-out .15s,box-shadow ease-in-out .15s

/* Simple pagination    < page x > */
.pagination
    list-style none
    
/* Red links, used in layout header */
a.redlink, a.redlink:hover, a.redlink:visited, a.redlink:active
    color #960018

a.blacklink, a.blacklink:hover, a.blacklink:visited, a.blacklink:active
    color #000

/* A class for an "active" link, eg. in a series of menu tabs. */
a.active
    border-bottom .2rem solid #000
    color         #000

/* Remove any decorations from links */
a.nodecoration
    text-decoration none

.tag
    background-color #960018
    border-radius    4px
    color            #fff
    font-size        .6rem
    font-weight      bold
    letter-spacing   .1rem
    padding          .2rem

/* Alignment */
.left
    text-align  left

.right
    text-align  right

.center
    text-align  center

.justify
    text-align  justify

.float-left
    float left

.float-right
    float right

/* Font */
.bold
    font-weight bold

.italic
    font-style italic

.large-font
    font-size 1.5rem

.larger-font
    font-size 2rem

.small-font
    font-size .8rem

.smaller-font
    font-size .666rem

/* Some default margins */
.margin
    margin 1rem

.margin-top
    margin-top 1rem

.margin-right
    margin-right 1rem

.margin-bottom
    margin-bottom 1rem
    
.margin-left
    margin-left 1rem

.large-margin
    margin 2rem

.large-margin-top
    margin-top 2rem

.large-margin-right
    margin-right 2rem

.large-margin-bottom
    margin-bottom 2rem
    
.large-margin-left
    margin-left 2rem

.larger-margin
    margin 4rem

.larger-margin-top
    margin-top 4rem

.larger-margin-right
    margin-right 4rem

.larger-margin-bottom
    margin-bottom 4rem
    
.larger-margin-left
    margin-left 4rem

.small-margin
    margin .5rem

.small-margin-top
    margin-top .5rem

.small-margin-right
    margin-right .5rem

.small-margin-bottom
    margin-bottom .5rem
    
.small-margin-left
    margin-left .5rem

/* Some default paddings */
.padding
    padding 1rem

.padding-top
    padding-top 1rem

.padding-right
    padding-right 1rem

.padding-bottom
    padding-bottom 1rem
    
.padding-left
    padding-left 1rem

.small-padding
    padding .5rem

.small-padding-top
    padding-top .5rem

.small-padding-right
    padding-right .5rem

.small-padding-bottom
    padding-bottom .5rem
    
.small-padding-left
    padding-left .5rem

.alert
    border-radius       4px
    padding             .5em 1em

.bg-success
    background-color #d9ffca /* green */

.bg-danger
    background-color #f2dede /* red */

.bg-warning
    background-color #ffc107 /* yellow */

.bg-info
    background-color #d9edf7 /* light blue */

.bg-dark
    background-color #343a40 /* almost black */
    color            #fff

/* Some styles for buttons */
.button
    border        0px
    border-radius 2px
    cursor        pointer
    display       inline-block
    padding       .5rem 1rem
    text-align    center

@media only screen and (max-width: 800px)
    .button
        font-size 1.2rem
        padding   .5rem 1rem
        width     100%

.button_ok              /* Green */
.button_ok:hover,
.button_ok:visited
    background-color    #4caf50
    color               #fff

.button_info            /* Blue */
.button_info:hover,
.button_info:visited
    background-color    #008cba
    color               #fff

.button_alert           /* Red */
.button_alert:hover,
.button_alert:visited
    background-color    #f44336
    color               #fff

.button_default         /* Purpura */
.button_default:hover,
.button_default:visited
    background-color    #960018
    color               #fff

.button_default1,       /* Black */
.button_default1:hover,
.button_default1:visited
    background-color    #555
    color               #fff

/* If <div class="gallery">, all <img> children will have a fixed height. */
.gallery
    img, video
        height       200px
        margin-right 1rem

/* Grid templates */
.grid
    display grid

    &.grid-gap
        grid-gap 1rem 2rem
    
    /* Make grid with N columns */
    &.grid-columns-2
        grid-template-columns repeat(2, 1fr)
    
    &.grid-columns-3
        grid-template-columns repeat(3, 1fr)
    
    &.grid-columns-4
        grid-template-columns repeat(4, 1fr)
    
    /* Like above, but cells fit content */
    &.grid-columns-2-min
        grid-template-columns repeat(2, min-content)
    
    &.grid-columns-3-min
        grid-template-columns repeat(3, min-content)
    
    &.grid-columns-4-min
        grid-template-columns repeat(4, min-content)
    
    &.grid-columns-2-max
        grid-template-columns repeat(2, max-content)
    
    &.grid-columns-3-max
        grid-template-columns repeat(3, max-content)
    
    &.grid-columns-4-max
        grid-template-columns repeat(4, max-content)
    
    /* Make grid with N rows */
    &.grid-rows-2
        grid-template-rows repeat(2, 1fr)
    
    &.grid-rows-3
        grid-template-rows repeat(3, 1fr)
    
    &.grid-rows-4
        grid-template-rows repeat(3, 1fr)
    
.layout-with-sidebar
    display grid
    grid-template-columns max-content auto
    grid-template-rows 1fr
    width  100vw
    height 100vh
    
    &.left-bar
        grid-column 1
        grid-row 1
    
    &.right-bar
        grid-column 2
        grid-row 1

.layout-with-menubar
    display grid
    grid-template-columns auto
    grid-template-rows auto 1fr
    height 100%
    width  100%
    
    &.menu-bar
        grid-column 1
        grid-row 1

.layout-header-body-footer
    display grid
    grid-template-columns auto
    grid-template-rows auto 1fr auto
    height 100%
    width  100%

/* Flexbox templates */
.flexbox
    display flex
    
    /* Define the direction flex items are placed in the flex container. */
    &.flexbox-direction-row
        flex-direction row
    
    &.flexbox-direction-column
        flex-direction column
    
    /* Wrap items at the end of the line? */
    &.flexbox-wrap
        flex-direction wrap
    
    &.flexbox-nowrap
        flex-direction nowrap
    
    /* Defines the alignment along the main axis. Helps distribute extra free
     * space leftover when either all the flex items on a line are inflexible,
     * or are flexible but have reached their maximum size. */
    &.flexbox-justify-end
        justify-content flex-end
    
    &.flexbox-justify-space-around
        justify-content space-around
    
    &.flexbox-justify-space-between
        justify-content space-between
    
    &.flexbox-justify-start
        justify-content flex-start
    
    /* This defines the default behavior for how flex items are laid out along
     * the cross axis on the current line. */
    &.flexbox-items-baseline
        align-items baseline
    
    &.flexbox-items-center
        align-items center
    
    &.flexbox-items-end
        align-items flex-end
    
    &.flexbox-items-start
        align-items flex-start
    
    &.flexbox-items-stretch
        align-items stretch
    
    /* Aligns a flex container's lines within when there is extra space in the
     * cross-axis. */
    &.flexbox-content-start
        align-content flex-start
    
    &.flexbox-content-end
        align-content flex-end
    
    &.flexbox-content-center
        align-content center
    
    &.flexbox-content-between
        align-content space-between
    
    &.flexbox-content-around
        align-content space-around
    
    &.flexbox-content-stretch
        align-content stretch
    
    /* Children */
    > *
        align-self auto
        flex       0 1 auto
        order      0
