GMWeb/www/css/ui_green.css

/******************************************
* Color scheme.                           *
*                                         *
* background: #bfa                        *
* link:       #64a                        *
* link-h:     #317                        *
* section:    #9a9                        *
* shadows:    #ded                        *
* shadows-h:  #111                        *
* header:     #aaa                        *
* entry:      #ded                        *
* border:     #333                        *
* extra1:     #cfc                        *
* extra2:     #8a8                        *
* extra3:     #                           *
*                                         *
******************************************/

/******************************************
* Hide elements intended for mobile.      *
******************************************/
.mobile{
    display:    none;
}

/******************************************
* Fonts used across the page              *
******************************************/

/* Glogal font */
@font-face{
    font-family:    font;
    font-family:    font;
    src:            url('/font/texgyreadventor-regular.otf')
}


/******************************************
* Styles for html tags, without id or     *
* class.                                  *
******************************************/

/* Links */
a{
    color:                #64a;
    text-shadow:        0 0 0.5em #7799ff;
    text-decoration:    none;
    transition:            all .2s ease-in-out;
}

a:hover{
    color:                #317;
    text-shadow:        0 0 0.4em #ffffff;
    text-decoration:    underline;
}

/* Body */
body{
    font-family:        font;
    margin:                0;
    background-color:    #bfa;
}


/******************************************
* Common elements present across the      *
* whle site.                              *
******************************************/

/* Icon for slider sections */
img.slid{
    height:            1.2em;
    width:            1.2em;
    cursor:            pointer;
    vertical-align:    middle;
    transition:        opacity 0.5s ease-in-out;
}

/* Elements that should have the cursor as pointer */
.pointer{
    cursor:    pointer;
}

/* Elemnts not to be displayed */
.hidden{
    display:    none;
}

/* Elements with an italic font */
.italic{
    font-style:    italic;
}


/******************************************
* Styles for the site header that is      *
* always visible.                         *
******************************************/

/* Header top container */
div#header{
    margin:                -1em auto 2.5em auto;
    padding:            1em    0 0 0;
    width:                95%;
    max-width:            80em;
    background-color:    #aaa;
    border-radius:        0 0 0.3em 0.3em;
    border:                1px solid #333;
    box-shadow:            0 0 2em #ded;
}

div#header div#header_content{
    margin:        0;
    width:        100%;
}

/* Main image of the header, contains the logo */
div#header img{
    display:        inline-block;
    width:            10%;
    max-width:        15em;
    margin:            0.5em;
    margin-left:    -1em;
    margin-bottom:    -1.8em;
/*     padding:        1%; */
    vertical-align:    middle;
    -webkit-filter:    drop-shadow(0 0 0.4em #ded);
/*     filter:            url(#drop-shadow); */
    filter:            drop-shadow(0 0 0.4em #ded);
    -ms-filter:        "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#ded')";
    filter:            "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#ded')";
}

/* Section of the header containing links to sections */
div#header_menu{
    display:            inline-block;
    vertical-align:        middle;
    width:                90%;
    margin-top:            -1em;
    margin-left:        -4%;
    background-color:    #cfc;
    border-radius:        0.5em;
    border:                0.2em solid #9a9;
}

/* Table with the links to the sections */
div#header_menu table{
    display:            table;
    margin:                auto 0 auto 0;
     width:                100%;
    border-collapse:    collapse;
    border-spacing:        0;
}

div#header_menu table tbody{
    width:    100%;
}
div#header_menu table tbody tr{
    width:    100%;
}

/* Containers of the section links */
div#header_menu table td{
    width:            12%;
    text-align:        center;
    transition:        all .3s ease-in-out;
    white-space:    nowrap;
}

div#header_menu table td:hover{
    background-color:    #8a8;
}

/* Actual links in the header */
div#header_menu table a{
    display:        inline-block;
    font-weight:    bold;
    font-size:        115%;
    width:            100%;
    padding-top:    0.8em;
    padding-bottom:    0.8em;
}


/******************************************
* Styles for the site footer that is      *
* always visible.                         *
******************************************/

/* Footer top container */
div#footer{
    width:        100%;
    display:    inline-block;
}

/* Table containing the footer elemnts */
div#footer div#footer_table{
    width:        100%;
    display:    table;
}

div#footer div#footer_table div.tr{
    width:        100%;
    display:    table-row;
}

/* Each main section of the footer */
div#footer div#footer_table div.td{
    display:        table-cell;
    width:            33%;
    text-align:        center;
    vertical-align:    top;
}

div#footer div#footer_table div#footer_center{
    padding-top:    1em;
}

/* Images for language selection */
img.lang{
    height:            1em;
    margin:            0.5em;
    border-radius:    0.2em;
    border:            0.15em solid #333;
    cursor:            pointer;
    box-shadow:        0 0 0.7em #ded;
    transition:        all .3s ease-in-out;
}

img.lang:hover{
    box-shadow:        0 0 1em #111;
}

/* Mobile app link image in the footer */
img.app{
    height:            3em;
/*     margin:            0.5em; */
    border-radius:    0.4em;
    border:            0.15em solid #333;
    cursor:            pointer;
    box-shadow:        0 0 0.5em #ded;
    transition:        all .3s ease-in-out;
}

img.app:hover{
    box-shadow:    0 0 0.8em #ded;
}

/* Each of the social links in the footer */
img.footer_social_icon{
    height:            2.2em;
    margin:            0.12em;
    transition:        all .3s ease-in-out;
    -webkit-filter:    drop-shadow(0 0 0.2em #ded);
    filter:            drop-shadow(0 0 0.2em #ded);
    -ms-filter:        "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#ded')";
    filter:            "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#ded')";
}

img.footer_social_icon:hover{
    -webkit-filter:    drop-shadow(0 0 0.6em #111);
    filter:            drop-shadow(0 0 0.6em #111);
}

/******************************************
* Styles for the main block that compose  *
* the site. Most of the pages share the   *
* same structure.
******************************************/

/* Content */
div#content{
    margin:        auto;
    width:        90%;
    max-width:    80em;
    min-width:    60em;
}

/* Sections */
div.section{
    background-color:    #9a9;
    border-radius:        0 0 0.6em 0.6em;
    padding:            0.3em 0.3em 0.5em 0.3em;
    border:                0.1em solid #333;
    border-top:            0.3em solid #333;
    box-shadow:            0 0 0.3em #ded;
}

/* Title for each section */
div.section .section_title{
    font-size:    130%;
    font-style:    bold;
    margin-top:    0.5em;
    
}

/* Entries */
div.entry{
    background-color:    #ded;
    padding:            0.2em;
    margin:                0.4em;
    border:                0.1em solid #333;
    box-shadow:            inset 0 0 0.2em #ded;
    transition:            all .3s ease-in-out;
}

/* Comments */
div.comment{
    margin:    0.5em 1em 0.5em 1em;
}

div.comment span.comment_user{
    font-weight:    bold;
}

div.comment span.comment_date{
    font-style:    italic;
    font-size:    80%;
}

div.comment span.comment_date::before {
    content:    " - ";
    font-size:    80%;
}

div.comment span.comment_date::before {
    content:    " - ";
    font-size:    80%;
}

div.comment p.comment_text{
    margin:    0.5em 1em 0.5em 0.5em;
}