﻿.Menu {
    display: table;
}

    .Menu > div {
        vertical-align: middle;
        display: table-cell;
    }

div.MenuOuter-Logo {
    padding-left: 20px;
    padding-top: 20px;
    cursor: pointer;
    height: 100px;
    width: 300px;
    float: left;
}

.MenuArea {
    background-color: white;
    margin-top: 25px;
    max-width: 100%;
    overflow: hidden;
    display: block;
    margin: auto;
    width: 1140px;
}

.MenuAreaInner {
    max-width: 100%;
    margin: auto;
    width: 960px;
}

div.MenuOuter-Logo img {
    max-height: 100%;
    max-width: 100%;
}

.MenuItem, .MenuItem-Active {
    background-color: #c3032a;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    border: 0px;
    color: White;
    width: 130px;
    height: 29px;
}

    .MenuItem.Gray {
        background-color: #454545;
    }

    .MenuItem.Transparent {
        background-color: transparent;
        display: none;
    }

.MenuIconCart {
    vertical-align: bottom;
    margin-bottom: 5px;
}

.MenuIconBord {
    vertical-align: bottom;
    margin-bottom: 3px;
}

.MenuIconGiftcard {
    vertical-align: bottom;
    margin-bottom: 5px;
}

.MenuItem-Active {
    background-color: #dd6c1c;
}

.MenuItem:disabled {
    color: gray;
}

.MenuItem a, .MenuItem-Active a {
    text-decoration: none;
    color: White;
}

div.MenuIcons {
    vertical-align: middle;
    padding-left: 12px;
}

.MenuSpacer {
    min-width: 4px;
    width: 4px;
}

    .MenuSpacer.HideSmall {
        display: none;
    }

.Login-Active {
    color: #f88f1d;
}



.TopMenu {
    background-color: #333333;
    height: 75px;
    color: white;
}

    .TopMenu a {
        color: white;
    }

.TopMenuInner {
    max-width: 1140px;
    margin: 0px auto;
    height: 100%;
    width: 100%;
}

.TopMenuTable {
    display: table;
    height: 100%;
}

    .TopMenuTable.Left {
        float: left;
    }

    .TopMenuTable.Right {
        /* background-color: white; Can't be white, runs f.x. https://shop.verk.fo/GistOgVist/GistOgVist/Shop.aspx */
        float: right;
    }

    .TopMenuTable > div {
        border-top: 5px solid transparent;
        text-transform: uppercase;
        border-right: 1px solid black;
        line-height: 19px;
        font-size: 14px;
        padding: 22px 10px 13px 10px;
        display: table-cell;
        cursor: pointer;
    }
        /* Ger so sniði hjá Bitanum rykkir til vinstru og høgru
.TopMenuTable > div:last-child {
    border-right: 0px;
}
*/
        .TopMenuTable > div.Active,
        .TopMenuTable > div:hover {
            border-top: 5px solid red;
        }

        .TopMenuTable > div.TopMenuLogo,
        .TopMenuTable > div.TopMenuLogo:hover {
            vertical-align: middle;
            padding-right: 40px;
            border-right: 0px;
            padding-left: 0px;
            padding-top: 0px;
            border-top: 0px;
        }

.TopMenuLogo .Logo {
    height: 49px;
}

.TopMenu .Icons {
    padding: 22px 0px 0px 0px;
    margin: auto;
    float: right;
    width: auto;
}

.TopMenuTable > div.ToggleBurgerMenu {
    display: none;
}

#pTopMenuDebitors {
    vertical-align: top;
    padding: 8px 10px 0px 10px;
}

@media screen and (max-width:945px) {
    div.MenuOuter-Logo {
        margin-bottom: 15px;
        max-width: 100%;
        display: block;
    }
}

@media screen and (max-width:600px) {
    .TopMenuTable > div.ToggleBurgerMenu {
        display: block;
    }

    .TopMenuTable.Left {
        /* padding-left: 80px; - fær designið hjá Fútastovu at síggja skeivt út á mobil */
        height: 59px;
        float: none;
    }

    .TopMenuTable.Right {
        display: none;
        float: none;
    }

        .TopMenuTable.Right > div {
            border-top: 0px solid red;
            padding: 11px 10px 11px 10px;
            display: block;
        }

            .TopMenuTable.Right > div.Active, .TopMenuTable.Right > div:hover {
                border-top: 0px solid red;
            }

    .TopMenu {
        height: auto;
    }

        .TopMenu .Icons {
            display: none;
        }
}

@media screen and (max-width:450px) {
    .MenuItem, .MenuItem-Active {
        font-size: 11px;
        min-width: 95px;
        width: 110px;
    }

    .MenuItem, .MenuItem-Active {
        font-size: 10px;
    }

        .MenuItem.Transparent {
            display: table-cell;
        }

    .MenuItem, .MenuItem-Active {
        width: 101px;
    }

    .MenuSpacer.HideSmall {
        display: none;
    }
}

/* Custom Menu */
.MenuButtonGroup {
    margin-top: 20px;
    max-width: 510px;
    display: table;
    float: right;
    width: 100%;
}

.MenuButtons {
    vertical-align: bottom;
    padding-right: 2px;
    padding-left: 2px;
    display: table-cell;
    float: none !important;
    width: 25%;
}

    .MenuButtons > div {
        margin-bottom: 4px;
        text-align: center;
        height: 23px;
    }

    .MenuButtons > div {
        background-color: black;
    }

        .MenuButtons > div.Black {
            background-color: black;
        }

    .MenuButtons a {
        font-size: 12px;
        color: white;
    }

@media (max-width: 415px) {
    .MenuButtonGroup {
        margin-top: 0px;
        display: block;
    }

    .MenuButtons {
        display: block;
        width: 100%;
    }

        .MenuButtons > div {
            line-height: 30px;
            height: 30px;
        }

    .MenuButtonGroup {
        display: none;
    }
}

@media (max-width: 750px) {
    .MenuButtonGroup {
        /* display: block; */
    }
}
