/*
    Base Container Layouts
*/

/*
    Fake 3d translation for Safari
    Include footer-bar for Safari 5.0.6
*/
.footer-bar,
.nkn-ih-container {
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: scale3d(1, 1, 1);
}


.nkn-ih-container {
    background: transparent url(/static/images/backgrounds/bg_ih_btm.jpg) no-repeat center bottom;
    position: relative;
    font-size: 12px;
    height: 700px;
    color: #454545;
    width: 960px;
    margin: 0 auto;
    padding-bottom: 6px;
    #outline: 1px solid #aaddaa;
}
.nkn-ih-body {
    overflow: visible;
    position: absolute;
    z-index: 1;
    height: 700px;
    display: none;
    width: 1200px;
    left: -120px;
    #outline: 1px solid #FF00FF;
}

.nkn-ih-link {
    text-align: center;
}

.nkn-ih-loading {
    background-color: #FFF;
    height: 700px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 4;
}
    .nkn-ih-loading img {
        display: block;
        margin: 0 auto;
        position: relative;
        top: -22px;
        z-index: -1;
    }
    .nkn-ih-loading .loader {
        background: url(/static/images/icons/icon_loading.gif) no-repeat scroll center bottom transparent;
        font-size: 15px;
        height: 65px;
        text-align: center;
    }

.nkn-ih-panel-container {
    height: 700px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    display: none;
    background-color: #fff;
}
    .nkn-ih-panel-container.animating {
        width: 1200px;
        left: -120px;
    }
    .nkn-ih-panel-container.animating .nkn-ih-panel {
        left: 0;
    }

/*
    Damn stupid global css that does not apply any more
*/
.nkn-ih-container a {
    background: none transparent;
}

/*
    Tile Styles
*/
.nik-ih-tiles {
    height: 590px;
    margin: 0 auto;
    position: relative;
    width: 960px;
    #outline: 1px solid #0000FF;
}
.nkn-ih-tile {
    position: absolute;
    #outline: 1px solid #FFdd00;
    cursor: pointer;
    top:252px;
    left:330px;
}
    .nkn-ih-tile .tile-img{
        width: 300px;
    }
    .nkn-ih-tile .animation-img {
        display: none;
        height: 298px;
        left: 87px;
        position: absolute;
        top: 54px;
        width: 448px;
    }
        .large,
        .my-layout .masked-tile.primary {
            cursor: auto !important;
        }
        .large .play-btn {
            background: url(/static/images/backgrounds/playbutton.png) no-repeat scroll left top transparent;
            content: "";
            display: block;
            height: 101px;
            left: 299px;
            position: absolute;
            top: 177px;
            width: 101px;
            z-index: 25;
            filter:alpha(opacity=60);
            -ms-filter:alpha(opacity=60);
            opacity: 0.6;
            cursor: pointer !important;
            display:block !important;
        }
        .my-layout .masked-tile.primary:hover + .large:after,
        .large:hover .play-btn {
            background-position: 0 -102px;
            filter:alpha(opacity=100);
            -ms-filter:alpha(opacity=100);
            opacity: 1;
            cursor: pointer !important;
        }
.slot-3d {
    left: 82px;
    position: relative;
    top: 595px;
    width: 200px;
    filter:alpha(opacity=100);
    -ms-filter:alpha(opacity=100);
    opacity: 1; /* removed !important keyword, conflict with 360 View active state rule below */
    display: none;
    -moz-transition:opacity .3s ease;
    -ms-transition:opacity .3s ease;
    -webkit-transition:opacity .3s ease;
    transition:opacity .3s ease;
}
    .slot-3d.active {
        filter:alpha(opacity=60) !important;
        -ms-filter:alpha(opacity=60) !important;
        opacity: .6 !important;
    cursor: default;
    }
    .slot-3d img {
        width: 200px;
        height: 175px;
    }


/* image tiles */
.my-layout .tile-img {
    -webkit-transition: width .5s ease-in-out;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-transition: width .5s ease-in-out;
    -ms-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}
    .my-layout .nkn-ih-tile {
        z-index: 4;
        #outline: 1px solid #0000FF;
        -webkit-transition: left .5s ease-in-out, top .5s ease-in-out, height .15s ease-in-out, width .15s ease-in-out, -webkit-transform .4s ease-in-out, opacity .2s linear;
        -webkit-perspective: 0;
        -webkit-backface-visibility: hidden;
        -moz-transition: left .5s ease-in-out, top .5s ease-in-out, height .15s ease-in-out, width .15s ease-in-out, -moz-transform .4s ease-in-out, opacity .2s linear;
        -ms-transition: left .5s ease-in-out, top .5s ease-in-out, height .15s ease-in-out, width .15s ease-in-out, -ms-transform .4s ease-in-out, opacity .2s linear;
        transition: left .5s ease-in-out, top .5s ease-in-out, height .15s ease-in-out, width .15s ease-in-out, transform .4s ease-in-out, opacity .2s linear;
    }
    .nkn-ih-tile .play-btn {
        display:none;
    }
    .nik-ih-tiles.active .nkn-ih-tile:not(.primary) {
        filter:alpha(opacity=60);
        -ms-filter:alpha(opacity=60);
        opacity: 0.6;
    }

    .my-layout .slot-1 {
        left: 260px;
        top: 120px;
        z-index: 5;
        filter:alpha(opacity=100);
        -ms-filter:alpha(opacity=100);
        opacity: 1;
    }
    .my-layout .slot-1 .tile-img {
        width: 475px;
    }

    .my-layout .slot-2 {
        left: -80px;
        top: 60px;
    }
    .my-layout .slot-2 .tile-img {
        width:330px;
    }

    .my-layout .slot-3 {
        left: 40px;
        top: 320px;
        z-index: 5;
    }
    .my-layout .slot-3 .tile-img {
        width: 375px;
    }

    .my-layout .slot-4 {
        left: 595px;
        top: 75px;
    }
    .my-layout .slot-4 .tile-img {
        width:400px;
    }

    .my-layout .slot-5 {
        left: 665px;
        top: 370px;
    }
    .my-layout .slot-5 .tile-img {
        width: 340px;
    }

    .my-layout .primary {
        left: 130px;
        top: 90px;
        z-index:7;
    }
    .my-layout .primary .tile-img {
        width: 700px;
    }
    .my-layout .large .animation-img {
        display: block;
    }
/*
    Scatter positions per slot
    matrix3d(m00, m01, m02, m03,
             m10, m11, m12, m13,
             m20, m21, m22, m23,
             m30, m31, m31, m33)

    To Scale:
    matrix3d(X%, m01, m02, m03,
             m10, Y%, m12, m13,
             m20, m21, Z%, m23,
             m30, m31, m31, POS%)

    To Shift Positions
    matrix3d(m00, m01, m02, m03,
             m10, m12, m12, m13,
             m20, m21, m22, m23,
             X-Shift, Y-Shift, Z-Shift, m33)

     http://9elements.com/html5demos/matrix3d/

*/
    .scatter-1.slot-2 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-1.slot-3 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, -40,-40,0,1);
        -moz-transform: matrix(0.9, 0, 0, 0.9, -40px, 40px);
        -ms-transform: matrix(0.9, 0, 0, 0.9, -40, 40);
        transform: matrix(.9,0,0,.9,-40,40);
    }
    .scatter-1.slot-4 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 40,-5,0,1);
        -moz-transform: matrix(.9,0,0,.9,40px,-5px);
        -ms-transform: matrix(.9,0,0,.9,40,-5);
        transform: matrix(.9,0,0,.9,40,-5);
    }
    .scatter-1.slot-5 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }

    .scatter-2.slot-1 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-2.slot-3 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-2.slot-4 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-2.slot-5 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }

    .scatter-3.slot-1 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,-50,0,1);
        -moz-transform: matrix(0.9, 0, 0, 0.9, 0, -50px);
        -ms-transform: matrix(0.9, 0, 0, 0.9, 0, -50);
        transform: matrix(0.9, 0, 0, 0.9, 0, -50);
    }
    .scatter-3.slot-2 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-3.slot-4 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 40,-5,0,1);
        -moz-transform: matrix(.9,0,0,.9,40px,-5px);
        -ms-transform: matrix(.9,0,0,.9,40,-5);
        transform: matrix(.9,0,0,.9,40,-5);
    }
    .scatter-3.slot-5 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }

    .scatter-4.slot-1 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, -50,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,-50px,0);
        -ms-transform: matrix(.9,0,0,.9,-50,0);
        transform: matrix(.9,0,0,.9,-50,0);
    }
    .scatter-4.slot-2 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-4.slot-3 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-4.slot-5 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }

    .scatter-5.slot-1 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, -10,-10,0,1);
        -moz-transform: matrix(.9,0,0,.9,-10px,-10px);
        -ms-transform: matrix(.9,0,0,.9,-10,-10);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-5.slot-2 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,0);
        -ms-transform: matrix(.9,0,0,.9,0,0);
        transform: matrix(.9,0,0,.9,0,0);
    }
    .scatter-5.slot-3 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, -10,0,0,1);
        -moz-transform: matrix(.9,0,0,.9,-10px,0);
        -ms-transform: matrix(.9,0,0,.9,-10,0);
        transform: matrix(.9,0,0,.9,-10,0);
    }
    .scatter-5.slot-4 {
        -webkit-transform: matrix3d(.9,0,0,0, 0,.9,0,0, 0,0,1,0, 0,-10,0,1);
        -moz-transform: matrix(.9,0,0,.9,0,-10px);
        -ms-transform: matrix(.9,0,0,.9,0,-10);
        transform: matrix(.9,0,0,.9,0,-10);
    }
/*
Active state positions
*/
    .my-layout .active .nkn-ih-tile:not(.primary) .tile-img {
        width:400px;
    }

    .my-layout .nik-ih-tiles.active .slot-2 {
        left: -90px;
        top: 50px;
    }

    .my-layout .nik-ih-tiles.active .slot-3 {
        left: -30px;
        top: 280px;
        z-index: 4;
    }

    .my-layout .nik-ih-tiles.active .masked-tile.slot-3 {
        left: -80px;
        top: 325px;
        z-index: 10;
    }

    .my-layout .nik-ih-tiles.active .slot-4 {
        left: 620px;
        top: 35px;
    }

    .my-layout .nik-ih-tiles.active .slot-5 {
        left: 605px;
        top: 380px;
    }

/* masked tiles for overlap z-index'ing */
    .my-layout .masked-tile {
        filter:alpha(opacity=.1) !important;
        -ms-filter:alpha(opacity=.1) !important;
        opacity: .01 !important;
        z-index: 10;
        background-color: #fff;
    }
        .my-layout .masked-tile.slot-1 {
            width: 475px;
            height: 312px;
        }
        .my-layout .masked-tile.primary {
            top: 145px;
            left:220px;
            z-index: 0;
        }
        .my-layout .masked-tile.slot-2 {
            width: 330px;
            height: 217px;
        }
        .my-layout .masked-tile.slot-3 {
            height: 246px;
            width: 375px;
        }
        .my-layout .masked-tile.slot-4 {
            width: 400px;
            height: 263px;
        }
        .my-layout .masked-tile.slot-5 {
            width: 340px;
            height: 223px;
        }
    .my-layout .masked-tile:hover + .nkn-ih-tile:not(.primary) {
        -webkit-transform: scale3d(1.08, 1.08, 1);
        -webkit-perspective: 0;
        -moz-transform: scale(1.08);
        -ms-transform: matrix(1.08,0,0,1.08,0,0);
        transform: scale(1.08);
        filter:alpha(opacity=100);
        -ms-filter:alpha(opacity=100);
        opacity: 1;
    }

/*
    Panel Styles
*/
.nkn-ih-panel {
    height: 679px;
    left: -120px;
    position: relative;
    text-align: left;
    width: 1200px;
}
    .nkn-ih-panel-close {
        display: block;
        margin: 20px auto 0;
        overflow: hidden;
        position: relative;
        width: 960px;
    }
        .nkn-ih-panel-close .label {
            background: url(/static/images/buttons/btn_back_arrow.png) no-repeat scroll 0 -2px transparent;
            color: #454545;
            cursor: pointer;
            font-size: 18px;
            font-weight: normal;
            margin-left: 10px;
            min-height: 18px;
            padding-left: 27px;
        }
        .nkn-ih-panel-close .label:hover  {
            background-position: 0 -33px;
        }

    .nkn-ih-panel .contents {
        height: 370px;
        margin: 0 auto;
        #outline: 1px solid #FFDD00;
        width: 960px;
    }
    .nkn-ih-panel .side {
        width: 475px;
        max-width: 475px;
        height: 100%;
    }
    .nkn-ih-panel .side.left {
        float: left;
        position: relative;
    }
    .nkn-ih-panel .side.right {
        float: right;
        width: 395px;
    }
    .nkn-ih-panel h3.title {
        font-size: 22px;
        font-weight: normal;
        margin: 0;
    }
    .nkn-ih-panel .right .section {
        overflow: hidden;
    }
    .nkn-ih-panel .right .info {
        line-height: 23px;
        text-align: left;
    }
    .nkn-ih-panel .right .views {
        bottom: 0;
        position: absolute;
    }
    .nkn-ih-panel .right .links {
        margin-top: 3px;
        max-height: 5%;
        overflow: hidden;
        list-style: none outside none;
        padding: 0;
    }
    .nkn-ih-panel .right .summary {
        margin-top: 15px;
        font-size: 13px;
    }
    .nkn-ih-panel .right .wrapper {
        bottom: 0;
        position: relative;
        width:395px;
        height: 100%;
    }
    .nkn-ih-panel .view {
        float: left;
        margin-right: 10px;
        margin-top: 6px;
        cursor: pointer;
    }
    .nkn-ih-panel .view.active {
        filter:alpha(opacity=60);
        -ms-filter:alpha(opacity=60);
        opacity: 0.6;
    }

/*
    3dView Styles
*/
    .container-3d {
        display: none; /* hidden by default - JS will show/hide as needed */
        margin:0 auto 28px;
        overflow: hidden;
        width: 590px;
        height: 360px;
    }
    .container-3d.active {
        display:block;
    }
    .container-3d img {
        margin: 0 auto;
        max-width: 100%;
        vertical-align: bottom;
    }
    .controls-3d {
        position: relative;
        margin: 0 auto;
        width: 590px;
    }
    .controls-3d .slider {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 520px; height:6px;
        background: #e9e9e9;
        border-top: 2px solid rgba(0,0,0,0.1);
        border-left: 2px solid rgba(0,0,0,0.1);
        -moz-border-radius: 20px;
        border-radius: 20px;
        -moz-box-shadow: 0 1px 3px #ddd;
        -webkit-box-shadow: 0 1px 3px #ddd;
        box-shadow: 0 1px 3px #ddd;

    }
    .controls-3d .ui-slider-handle {
        display: block;
        position:relative; top:-8px; left:0;
        margin-left: -8px;
        padding: 0;
        width:21px;
        height:21px;
        background:url(/static/images/backgrounds/ih-3d-ui-slider-handle.png) 50% 50% no-repeat;
    }
    .controls-3d .views {
        margin-top: 10px;
        padding: 0 8px;
        width:590px;
    }
        .controls-3d .view-container {
            position: relative;
            float: left;
            margin: 0;
        }
        .controls-3d .view-container .label,
        .controls-3d .view-container .view-3d-icon {
            float: left;
            margin: 0;
            position: relative;
        }
        .controls-3d .view-container .label {
            margin:23px 0 0 30px;
        }
        .controls-3d .views .view-container:first-child .label {
            margin-left: 0;
        }
        .controls-3d .view-container .view-3d-icon {
            position: relative;
            margin-left: 10px;
            width:54px;
            height:57px;
            line-height: 0;
        }
        .controls-3d .view-container .view-3d-icon:after {
            content: "";
            position: absolute; bottom:0; left:3px;
            z-index: 100;
            display: block;
            width:48px;
            height: 3px;
            background:transparent;
            -webkit-transition:background 0.2s ease-in-out;
            -moz-transition:background 0.2s ease-in-out;
            -ms-transition:background 0.2s ease-in-out;
            transition:background 0.2s ease-in-out;
        }
        .controls-3d .view-container .view-3d-icon.active {
            opacity: 1;
        }
        .controls-3d .view-container .view-3d-icon:hover:after,
        .controls-3d .view-container .view-3d-icon.active:after {
            content: " "; /* IE8 retains "ghost" artifacts on :after pseudo-element after hovering... changing content exercises those demons */
            background:#cbcbcb;
        }
        .controls-3d .view-container .view-3d-icon a {
            position: relative;
            top:7px;
            display: block;
            padding: 0;
            line-height: 0;
            -webkit-transition:top 0.2s linear;
            -moz-transition:top 0.2s linear;
            -ms-transition:top 0.2s linear;
            transition:top 0.2s linear;
            cursor: pointer;
        }
        .controls-3d .view-container .view-3d-icon:hover {
            height:54px;
            padding-bottom: 3px;
        }
        .controls-3d .view-container .view-3d-icon a:hover,
        .controls-3d .view-container .view-3d-icon.active a {
            top:0;
            padding-bottom:10px;
        }
        .controls-3d .view-container .icon {
            width: 54px;
            height: 47px;
        }
        .controls-3d .view-container .view-3d-icon a:hover .icon,
        .controls-3d .view-container .icon.active {
            top:0;
        }

/* 360 View image loader styles */
#container-all-3d {
    position: relative;
    background-color: #fff;
}
#nkn-ih-panel-3d .loading {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1000;
    display: none;
    margin-left:-295px;
    width: 590px;
    height: 360px;
    background:url(/static/images/icons/icon_loading.gif) 50% 50% no-repeat;
}

/*
    Positioning Statement
    We make is z-index 20 so it appears over the zindex 15 details panel
*/
.nkn-ih-statements {
    position: relative;
    width:960px;
    margin:35px auto 0;
    z-index:20;
}
.nkn-ih-statement {
    display:none;
    position: absolute;
    top:0;
    width:960px;
    margin: 0 auto;
    text-align: center;
}
.nkn-ih-statement br {
    line-height: 0;
    margin: 0; padding: 0;
}

    .nkn-ih-statement h2.statement {
        margin: 0;
        font-size: 30px;
        font-weight: normal;
        color:#454545;
        line-height:35px;
    }
    .nkn-ih-statement h3.statement {
        font-size: 18px;
        font-weight: normal;
        color: #999;
        line-height: 30px;
        margin: 4px 0 11px;
    }
.nkn-ih-loading .nkn-ih-statement {
    display: block;
    margin-top: 35px;
    position: relative;
}
.nkn-ih-panel-container .nkn-ih-statement {
    display: block;
    margin-top: 14px;
    max-height: 115px;
    height: 115px;
    padding-bottom: 29px;
    position: relative;
}
#nkn-ih-panel-3d {
    background-color: #fff;
}
#nkn-ih-panel-3d .nkn-ih-statement {
    margin-top:5px;
    padding-bottom:0;
    height:auto;
    background-image:none;
}