/***************************************************************************
 * <copyright file="Kinect-1.8.0.css" company="Microsoft">                 *
 *     Copyright (c) Microsoft Corporation.  All rights reserved.          *
 * </copyright>                                                            *
 ***************************************************************************/

.kinect-button {
    margin: 10px;
    display: inline-block;
    padding: 25px;
    height: 200px;
    width: 200px;
    position: relative;
    font-family: 'Segoe UI';
    font-size: 16pt;
    font-weight: 600;
}

.kinect-button.small {
    height: 120px;
    width: 120px;
    font-size: 12pt;
    font-weight: 500;
}

.kinect-button.medium {
    height: 200px;
    width: 200px;
    font-size: 16pt;
    font-weight: 600;
}

.kinect-button.large {
    height: 300px;
    width: 300px;
    font-size: 20pt;
    font-weight: 600;
}

.kinect-button-surface {
    position: relative;
    left: 3%;
    top: 3%;
    width: 94%;
    height: 94%;
    transition: left 0.16s, top 0.16s, width 0.16s, height 0.16s;
}

.kinect-button-text {
    position: absolute;
    left: 0px;
    top: 50%;
    height: 20pt;
    width: 100%;
    margin-top: -10pt;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
            
.button-hover .kinect-button-surface {
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    transition: left 0.16s, top 0.16s, width 0.16s, height 0.16s;
}

.button-pressed .kinect-button-surface {
    left: 7.5%;
    top: 7.5%;
    width: 85%;
    height: 85%;
    transition: left 0.10s, top 0.10s, width 0.10s, height 0.10s;
}

.kinect-button.tile .kinect-button-surface {
    border: none;
    background: linear-gradient(to bottom, #511c74, #311040);
    color: white;
}

#kinect-cursor {
    position: absolute;
    display: none;
    width: 120px;
    height: 120px;
}

/* normal cursor state */
#kinect-cursor-glow {
    stroke-opacity: 0.0;
}

#kinect-cursor-normal {
    stroke-opacity: 1.0;
    fill-opacity: 1.0;
}

#cursor-progress {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

#kinect-cursor-extended {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

/* hover cursor state */
.cursor-hover #kinect-cursor-glow {
    stroke-opacity: 1.0;
}

.cursor-hover #kinect-cursor-progress {
    stroke-opacity: 1.0;
    fill-opacity: 1.0;
}

/* pressed cursor state */
.cursor-pressed #kinect-cursor-normal {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

.cursor-pressed #kinect-cursor-progress {
    stroke-opacity: 0.0;
    fill-opacity: 0.0;
}

.cursor-pressed #kinect-cursor-extended {
    stroke-opacity: 1.0;
    fill-opacity: 1.0;
}