// Contains all the page styles
//
// $author Stanislav Kalashnik <sk$infomir.eu>
// $license GNU GENERAL PUBLIC LICENSE Version 3


#pageMain {
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.7);

    > table {
        width: $width;
        height: $height / 2;
        position: absolute;
        top: $height / 4;
        > tbody {
            > .body {
                > .arrow {
                    text-align: center;
                    padding-top: $arrowPaddingTop;
                    > div {
                        width: 100%;
                        height: 100%;
                    }
                }

                > .arrow.left {
                    width: $availLeft;
                }

                > .arrow.right {
                    width: $availRight;
                }

                > .content {
                    text-align: center;
                }
            }

            > .footer {
                height: $pmFooterHeight;

                > td {
                    padding: 0 $availRight $availBottom $availLeft;
                }
            }
        }
    }
}

#pmPlayer {
    position: absolute;
    left: 24px;
    top: ((720 / 2) - 126);

    height: $pmAppMenuCellActiveHeight + $pmAppMenuCellActiveShadow;
    width: $pmAppMenuCellActiveWidth + $pmAppMenuCellActiveShadow;
    background-color: red;
    &.hidden {
        visibility:hidden;
    }
}

#pmPlayerTitle {
    position: absolute;
    top: 0;
    left: 24px;
    width: $pmAppMenuCellActiveWidth + $pmAppMenuCellActiveShadow;
    height: $pmAppMenuCellActiveHeight + $pmAppMenuCellActiveShadow;
    text-align: center;
    z-index: 9999;
    color: #fff;
    display: inline-block;
}

#pmAppTable {
    //&.small {
    //    //left: 308px;
    //    left: 252px;
    //    width: $width - 244;
    //}
}

#pmAppList {
    background-color: transparent;
    position: relative;

    > table {
        width: inherit;
        border-spacing: $pmAppMenuCellSpaceX $pmAppMenuCellSpaceY;
        border-collapse: separate;
        table-layout: fixed;

        td.item {
            padding: 0;
            height: $pmAppMenuCellNormalHeight + $pmAppMenuCellShadow * 2;
            width: $pmAppMenuCellNormalWidth + $pmAppMenuCellShadow * 2;

            > .body {
                position: relative;
                height: $pmAppMenuCellNormalHeight + $pmAppMenuCellShadow * 2;
                width: $pmAppMenuCellNormalWidth + $pmAppMenuCellShadow * 2;
                //height: 168px;
                //width: 178px;

                > .normal, > .active {
                    position: absolute;
                    padding: $pmAppMenuCellShadow;

                    > .content {
                        height: 100%;
                        width: 100%;
                        position: relative;

                        > .icon {
                            position: absolute;
                            background-repeat: no-repeat;
                            background-position: center;
                        }

                        > .name {
                            position: absolute;
                            bottom: 0;
                            text-transform: uppercase;
                            height: $pmAppMenuCellNameHeight;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            font-weight: bold;
                            text-align: center;
                            font-size: $pmAppMenuCellNameFontSize;
                        }

                        > .locked {
                            position: absolute;
                            left: 0;
                            top: 0;
                            height: $pmAppLockSize;
                            background-image: url("#{$pathImg}/lock.png");
                            padding: 0;
                            width: $pmAppLockSize;
                        }
                    }

                    > .overlay {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
                }

                > .normal {
                    height: 100%;
                    width: 100%;
                    font-size: $pmAppMenuCellNormalFont;
                    z-index: 2;
                    top: $pmAppItemNormalTop;

                    > .content {
                        > .icon {
                            width: $pmAppMenuCellNormalWidth + $pmAppMenuCellShadow * 2;
                            height: $pmAppMenuCellNormalHeight - $pmAppMenuCellNameHeight;
                        }

                        > .name {
                            width: $pmAppMenuCellNormalWidth;
                        }
                    }

                    > .overlay {
                        background: url("#{$pathImg}/shadow.normal.png") center no-repeat;
                    }
                }

                > .active {
                    visibility: hidden;
                    font-size: $pmAppMenuCellActiveFont;
                    left: ($pmAppMenuCellNormalWidth - $pmAppMenuCellActiveWidth) / 2;
                    top: ($pmAppMenuCellNormalHeight - $pmAppMenuCellActiveHeight) / 2;
                    height: $pmAppMenuCellActiveHeight + ($pmAppMenuCellActiveShadow * 2);
                    width: $pmAppMenuCellActiveWidth + ($pmAppMenuCellActiveShadow * 2);
                    z-index: 3;

                    > .icon.close {
                        position: absolute;
                        background: url("#{$pathImg}/icon.close.png") center no-repeat;
                        height: 42px;
                        top: -18px;
                        left: -4px;
                        width: 100%;
                    }

                    > .content {
                        top: $pmAppItemContentTop;
                        > .icon {
                            width: $pmAppMenuCellActiveWidth + ($pmAppMenuCellActiveShadow * 2);
                            height: $pmAppMenuCellActiveHeight - $pmAppMenuCellNameHeight;
                        }

                        > .name {
                            width: $pmAppMenuCellActiveWidth + ($pmAppMenuCellActiveShadow * 2);
                            height: $pmAppMenuCellNameHeight + 6;
                            font-size: $pmAppMenuCellActiveNameFontSize;
                        }
                    }

                    .overlay {
                        top: $pmAppItemOverlayTop;
                        background: url("#{$pathImg}/shadow.active.png") center no-repeat;
                    }
                }
            }

            &.focus {
                background-color: transparent;
                color: white;
            }

            &.mark {
                background-color: transparent;
                color: white;
            }

            &.disable {
                background-color: transparent;
                > .body {
                    > .normal, > .active {
                        > .overlay {
                            background-image: none;
                        }
                    }
                }
            }
        }
    }

    &.focus td.item.focus > .body > .active {
        visibility: inherit;
    }
    &.focus td.item.focus > .body > .normal {
        visibility:hidden;
    }

    > span {
        display: inline-block;
        height: $pmAppMenuCellActiveHeight + $pmAppMenuCellActiveShadow * 4;
        width: $pmAppMenuCellActiveWidth + $pmAppMenuCellActiveShadow * 2;
        line-height: $pmAppMenuCellActiveHeight + $pmAppMenuCellActiveShadow * 2;
        //margin-bottom: $availBottom;
    }
}

#pmArrowLeft {
    width: 100%;
    background-color: transparent;
    background-image: url("#{$pathImg}/arrow.left.png");
    background-position: center;
    background-repeat: no-repeat;
    &:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

#pmArrowRight {
    width: 100%;
    background-color: transparent;
    background-image: url("#{$pathImg}/arrow.right.png");
    background-position: center;
    background-repeat: no-repeat;
    &:hover {
        background-color: rgba(0, 0, 0, 0.3);
    }
}

#pmFooter {
    color: #fff;
    font-size: $pmFooterFont;
    text-align: center;
    height: $pmItemDescHeight;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}