/* 
    Base styles - GOMvc Template. 
    Note: If you need to modify or add custom styles, it is recommended that you create a separate CSS file in order to avoid loosing your changes the next time you update the GOMvc template.
          Site.css has been defined in the bundle.config, you can use the same name as the filename for the new css file. 
          Or name it as you wish and link it accordingly.
    
    - Skins -
    Fore-colors and background-colors are defined in separate css files in the skins folder.

*/

ol.greetings {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0px;
    bottom: 0;
    right: 5px;
    text-align: right;
    line-height: 1.3;
    -webkit-text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-shadow: 0 1px 1px rgba(0,0,0,.2)
}

    ol.greetings .hi {
        font-size: 1.4em
    }

    ol.greetings a {
        text-decoration: none;
        font-size: 1.4em;
        padding: 10px 20px;
        display: inline-block
    }

        ol.greetings a .fa {
            margin-left: 10px
        }

    ol.greetings ol {
        list-style: none;
        padding: 0;
        display: none
    }

        ol.greetings ol li {
            display: inline
        }

            ol.greetings ol li a {
                font-size: 0.9em;
                padding: 10px;
                text-shadow: none
            }

                ol.greetings ol li a:hover {
                }

    ol.greetings li:hover ol {
        display: block
    }

    ol.greetings li ol {
        list-style: none;
        display: none;
        margin: 0;
        padding: 0;
        position: absolute;
        right: 0;
        top: 40px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: inset 3px 3px 5px rgba(255,255,255,.2),3px 3px 5px rgba(0,0,0,.2);
        box-shadow: inset 3px 3px 5px rgba(255,255,255,.2),3px 3px 5px rgba(0,0,0,.2)
    }

        ol.greetings li ol li {
            display: inline-block;
            float: none;
            padding: 0;
            width: 100%;
            background: -webkit-gradient(linear,top,top,from(#fefefe),to(#ededed));
            background: -webkit-linear-gradient(top, #fefefe,#ededed);
            background: -moz-linear-gradient(top,#fefefe,#ededed);
            background: -ms-linear-gradient(top, #fefefe,#ededed);
            background: -o-linear-gradient(top,#fefefe,#ededed)
        }

            ol.greetings li ol li a {
                display: inline-block;
                min-width: 165px;
                background: none;
                border-radius: 0;
                border-top: none;
                margin: 0;
                padding: 10px 20px
            }

ol.skinPallete {
    list-style: none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 200px;
    right: -200px;
    background: #fff;
    border: solid 1px rgba(0,0,0,.2);
    background: -webkit-gradient(linear,top,top,from(#fefefe),to(#ededed));
    background: -webkit-linear-gradient(top, #fefefe,#ededed);
    background: -moz-linear-gradient(top,#fefefe,#ededed);
    background: -ms-linear-gradient(top, #fefefe,#ededed);
    background: -o-linear-gradient(top,#fefefe,#ededed);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset 3px 3px 5px rgba(255,255,255,.2),3px 3px 5px rgba(0,0,0,.2);
    box-shadow: inset 3px 3px 5px rgba(255,255,255,.2),3px 3px 5px rgba(0,0,0,.2)
}

    ol.skinPallete li {
        margin: 10px;
        padding: 10px;
        color: #fff;
        cursor: pointer;
        border: solid 1px #fff
    }

        ol.skinPallete li:hover {
            border: solid 1px rgba(0,0,0,.2)
        }

    ol.skinPallete #close {
        margin: 5px 0px 0 80%;
        cursor: pointer
    }

ol.greetings {
}

    ol.greetings .hi {
        color: #fff
    }

    ol.greetings a, ol.greetings a .fa {
        color: #fff
    }

        ol.greetings a:hover, ol.greetings li:hover {
            background: #353434;
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a',endColorstr='#353434',GradientType=0 );
            background: -webkit-gradient(linear,top,top,from(#4a4a4a),to(#353434));
            background: -webkit-linear-gradient(top, #4a4a4a,#353434);
            background: -moz-linear-gradient(top, #4a4a4a,#353434);
            background: -ms-linear-gradient(top, #4a4a4a,#353434);
            background: -o-linear-gradient(top, #4a4a4a,#353434)
        }

    ol.greetings ol {
        background: #fff
    }

    ol.greetings li ol li a .fa {
        color: #656565
    }

    ol.greetings li ol li a {
        color: #656565;
        background: #ededed;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe',endColorstr='#ededed',GradientType=0 );
        background: -webkit-gradient(linear,top,top,from(#fefefe),to(#ededed));
        background: -webkit-linear-gradient(top, #fefefe,#ededed);
        background: -moz-linear-gradient(top,#fefefe,#ededed);
        background: -ms-linear-gradient(top, #fefefe,#ededed);
        background: -o-linear-gradient(top,#fefefe,#ededed)
    }

    ol.greetings li ol li:hover {
        background: #333
    }

        ol.greetings li ol li:hover a {
            background: #333;
            color: white
        }

            ol.greetings li ol li:hover a .fa {
                color: white
            }

    ol.greetings li ol {
        background: #ededed;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe',endColorstr='#ededed',GradientType=0 );
        background: -webkit-gradient(linear,top,top,from(#fefefe),to(#ededed));
        background: -webkit-linear-gradient(top, #fefefe,#ededed);
        background: -moz-linear-gradient(top,#fefefe,#ededed);
        background: -ms-linear-gradient(top, #fefefe,#ededed);
        background: -o-linear-gradient(top,#fefefe,#ededed)
    }

@media(min-width:0px) {
}

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
}

@media(min-width:768px) {
}

@media(min-width:1024px) {
    ol.greetings {
        right: 10px;
        background: none
    }
}

.flexnav {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
    -webkit-transform-style: preserve-3d;
    overflow: hidden;
    margin: 0 !important;
    width: 100%;
    max-height: 0
}

    .flexnav.opacity {
        opacity: 0
    }

    .flexnav.flexnav-show {
        max-height: 2000px;
        opacity: 1;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }

    .flexnav.one-page {
        position: fixed;
        top: 50px;
        right: 5%;
        max-width: 200px
    }

    .flexnav li {
        font-size: 100%;
        position: relative;
        overflow: hidden
    }

        .flexnav li a {
            position: relative;
            display: block;
            padding: .96em;
            z-index: 2;
            overflow: hidden;
            color: #222;
            background: #a6a6a2;
            border-bottom: 1px solid rgba(0,0,0,0.15)
        }

        .flexnav li ul {
            /*width: 100%*/
            min-width: 120px !important;
        }

            .flexnav li ul li {
                font-size: 100%;
                position: relative;
                overflow: hidden
            }

            .flexnav li ul.flexnav-show li {
                overflow: visible
            }

            .flexnav li ul li a {
                display: block;
                background: #b2b2af
            }

    .flexnav ul li ul li a {
        background: #bfbfbc
    }

    .flexnav ul li ul li ul li a {
        background: #cbcbc9
    }

    .flexnav .touch-button {
        position: absolute;
        z-index: 999;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        display: inline-block;
        background: #acaca1;
        background: rgba(0,0,0,0.075);
        text-align: center
    }

        .flexnav .touch-button:hover {
            cursor: pointer
        }

        .flexnav .touch-button .navicon {
            position: relative;
            top: 1.4em;
            font-size: 12px;
            color: #666
        }

.menu-button {
    position: relative;
    display: block;
    padding: 1em;
    background: #a6a6a2;
    color: #222;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.2)
}

    .menu-button.one-page {
        position: fixed;
        top: 0;
        right: 5%;
        padding-right: 45px
    }

    .menu-button .touch-button {
        background: transparent;
        position: absolute;
        z-index: 999;
        top: 0;
        right: 0;
        width: 50px;
        display: inline-block;
        text-align: center
    }

        .menu-button .touch-button .navicon {
            font-size: 16px;
            position: relative;
            top: 1em;
            color: #666
        }

@media all and (min-width:1000px) {
    body.one-page {
        padding-top: 70px
    }

    .flexnav {
        overflow: visible
    }

        .flexnav.opacity {
            opacity: 1
        }

        .flexnav.one-page {
            top: 0;
            right: auto;
            max-width: 1080px
        }

        .flexnav li {
            position: relative;
            list-style: none;
            float: left;
            display: block;
            background-color: #a6a6a2;
            overflow: visible;
            width: 100%;
        }

            .flexnav li a {
                /*border-left: 1px solid #acaca1;*/
                border-bottom: none
            }

            .flexnav li > ul {
                position: absolute;
                top: auto;
                left: 0
            }

                .flexnav li > ul li {
                    min-width: 200px;
                    width: 100%;
                }

            .flexnav li ul li > ul {
                margin-left: 100%;
                top: 0
            }

            .flexnav li ul li a {
                border-bottom: none
            }

            .flexnav li ul.open {
                min-width: 200px;
                display: block;
                opacity: 1;
                visibility: visible;
                z-index: 1
            }

                .flexnav li ul.open li {
                    min-width: 200px;
                    overflow: visible;
                    max-height: 100px
                }

                .flexnav li ul.open ul.open {
                    margin-left: 100%;
                    top: 0
                }

    .menu-button {
        display: none
    }
}

.oldie body.one-page {
    padding-top: 70px
}

.oldie .flexnav {
    overflow: visible
}

    .oldie .flexnav.one-page {
        top: 0;
        right: auto;
        max-width: 1080px
    }

    .oldie .flexnav li {
        position: relative;
        list-style: none;
        float: left;
        display: block;
        background-color: #a6a6a2;
        width: 20%;
        min-height: 50px;
        overflow: visible
    }

        .oldie .flexnav li:hover > ul {
            display: block;
            width: 100%;
            overflow: visible
        }

            .oldie .flexnav li:hover > ul li {
                width: 100%;
                float: none
            }

        .oldie .flexnav li a {
            /*border-left: 1px solid #acaca1;*/
            border-bottom: none;
            overflow: visible
        }

        .oldie .flexnav li > ul {
            background: #acaca1;
            position: absolute;
            top: auto;
            left: 0;
            display: none;
            z-index: 1;
            overflow: visible
        }

        .oldie .flexnav li ul li ul {
            top: 0
        }

        .oldie .flexnav li ul li a {
            border-bottom: none
        }

        .oldie .flexnav li ul.open {
            display: block;
            width: 100%;
            overflow: visible
        }

            .oldie .flexnav li ul.open li {
                width: 100%
            }

            .oldie .flexnav li ul.open ul.open {
                margin-left: 100%;
                top: 0;
                display: block;
                width: 100%;
                overflow: visible
            }

    .oldie .flexnav ul li:hover ul {
        margin-left: 100%;
        top: 0
    }

.oldie .menu-button {
    display: none
}

.oldie.ie7 .flexnav li {
    width: 19.9%
}

div.Menu {
    width: 98%;
    margin: 0 auto 0 auto;
    background: none;
    border-radius: 0 0 10px 10px;
    z-index: 90;
    min-height: 40px;
    position: relative
}

div.Menu {
    background: #ededed;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4cb9',endColorstr='#214f6a',GradientType=0 );
    background: -webkit-gradient(linear,top,top,from(#4d4cb9),to(#214f6a));
    background: -webkit-linear-gradient(top,#4d4cb9,#214f6a);
    background: -moz-linear-gradient(top,#4d4cb9,#214f6a);
    background: -ms-linear-gradient(top,#4d4cb9,#214f6a);
    background: -o-linear-gradient(top,#4d4cb9,#214f6a);
}

    div.Menu .flexnav {
        margin-left: -35px !important;
        width: 98%
    }

        div.Menu .flexnav a {
            text-decoration: none;
            padding-bottom: 11px
        }

        div.Menu .flexnav li a {
            font-size: 0.9em;
            text-decoration: none;
            text-wrap: avoid;
            white-space: nowrap
        }

    div.Menu ul li, div.Menu ul li a {
        background: none
    }

        div.Menu ul li a {
            color: #fff;
            margin: 0;
            /*border-left: solid 1px #585757*/
        }

    div.Menu .flexnav li ul {
        display: none;
        background: #ededed;
        right: 0;
        left: inherit;
        padding-left: 0;
        border: solid 1px #353434;
        list-style: none;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: inset 3px 3px 5px rgba(255,255,255,.2),3px 3px 5px rgba(0,0,0,.2);
        box-shadow: inset 3px 3px 5px rgba(255,255,255,.2),3px 3px 5px rgba(0,0,0,.2)
    }

    div.Menu ul.flexnav li ul {
        width: 105%;
        left: 0;
        border: solid 1px #d4d4d4;
        border-top: 0
    }

        div.Menu ul.flexnav li ul li {
            margin-bottom: 1px
        }

            div.Menu ul.flexnav li ul li:last-child {
                margin-bottom: 0px
            }

    div.Menu ul.flexnav li a:hover, div.Menu ul.flexnav li:hover a {
        background: #353434;
        background: -webkit-gradient(linear,top,top,from(#4a4a4a),to(#353434));
        background: -webkit-linear-gradient(top, #4a4a4a,#353434);
        background: -moz-linear-gradient(top, #4a4a4a,#353434);
        background: -ms-linear-gradient(top, #4a4a4a,#353434);
        background: -o-linear-gradient(top, #4a4a4a,#353434)
    }

    div.Menu ul.flexnav li ul li a {
        color: #656565;
        border: none;
        background: #ededed !important;
        background: -webkit-gradient(linear,top,top,from(#fefefe),to(#ededed));
        background: -webkit-linear-gradient(top, #fefefe,#ededed);
        background: -moz-linear-gradient(top,#fefefe,#ededed);
        background: -ms-linear-gradient(top, #fefefe,#ededed);
        background: -o-linear-gradient(top,#fefefe,#ededed);
        text-wrap: normal;
        white-space: pre-wrap
    }

        div.Menu ul.flexnav li ul li a:hover {
            background: #353434 !important;
            color: #fff
        }

    div.Menu ul.flexnav li ul li.lineTop {
        border-top: solid 1px #d4d4d4
    }

    div.Menu ul.flexnav li ul li.lineBottom {
        border-bottom: solid 1px #d4d4d4
    }

.flexnav .touch-button {
    width: 50px;
    height: 40px
}

    .flexnav .touch-button .navicon {
        top: 1em
    }

.menu-button {
    color: #fff;
    background: #ededed;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575',endColorstr='#585757',GradientType=0 );
    background: -webkit-gradient(linear,top,top,from(#757575),to(#585757));
    background: -webkit-linear-gradient(top,#757575,#585757);
    background: -moz-linear-gradient(top,#757575,#585757);
    background: -ms-linear-gradient(top,#757575,#585757);
    background: -o-linear-gradient(top,#757575,#585757)
}

    .menu-button .touch-button {
        width: 50px;
        height: 40px
    }

        .menu-button .touch-button .navicon {
            top: 0.8em;
            color: #fff
        }

@media all and (min-width:1000px) {
    .flexnav li {
        width: 10%
    }

    .flexnav .touch-button {
        width: 20px
    }
}

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
    div.Menu .flexnav {
    }

        div.Menu .flexnav a {
            margin-top: 1px;
            padding-top: 10px;
            padding-bottom: 10px
        }
}