/* This file is intended to contain rules that will allow "skinning" of your manual by changeing the colors, fonts and background images. You should not place any rules here
that modify positioning or size or other layout properties*/


body {  
    background: #000000 url(../images/background-image.jpg) no-repeat;
    background-size: cover;
}

/*this would for example override the white background and text color on active links*/
/*.pageButton:hover, .contentPanel a:hover
{
    background-color: #ee4036;
    color: #222222;
}*/

/*and this would modify the focus outline*/
/*a:focus, a:hover, button:focus, button:hover
{
    outline:thick double #ee4036;
}*/

.mainBefore {
    -webkit-column-break-before: always;
    -moz-column-break-before: always;
    -ms-column-break-before: always;
    -o-column-break-before: always;
    break-before: column;
}



/*View Mode Overrides - Media Querry Overrides*/
/* SNAPPED */
@media (orientation:portrait)  and (min-width: 336px) and (max-width: 480px) and (min-height: 901px) and (max-height: 1080px) {

    .mainBefore, .tabletBefore, .mobileBefore {
        -webkit-column-break-before: auto;
        -moz-column-break-before: auto;
        -ms-column-break-before: auto;
        -o-column-break-before: auto;
        break-before: auto;
    }

    .snappedBefore {
        -webkit-column-break-before: always;
        -moz-column-break-before: always;
        -ms-column-break-before: always;
        -o-column-break-before: always;
        break-before: column;
    }
}


/* TABLET */
@media (orientation:landscape) and (max-height: 900px), (orientation:landscape) and (min-height: 1081px), 
(orientation:landscape) and (max-width: 1430px) and (min-height: 901px) and (max-height: 1080px), 
(orientation:landscape) and (min-width: 1930px) and (min-height: 901px) and (max-height: 1080px) {
     /*This would add a background image to the content panel in tablets only. Note: you need an additional selector to give this rule 
    enough weight to override the existing in tablet.css*/
    /*.articles  article:not(.helpMenu) .contentPanel
        {
        background: url("Forza_Left.png") no-repeat transparent 24px 60px;
    }*/

    .mainBefore, .snappedBefore, .mobileBefore {
            -webkit-column-break-before: auto;
            -moz-column-break-before: auto;
            -ms-column-break-before: auto;
            -o-column-break-before: auto;
            break-before: auto;
        }

        .tabletBefore {
            -webkit-column-break-before: always;
            -moz-column-break-before: always;
            -ms-column-break-before: always;
            -o-column-break-before: always;
            break-before: column;
        }

     .logo {
        width: 180px;
    }
         
}


/* MOBILE */
@media (orientation:portrait) and (max-height: 900px), (orientation:portrait) and (min-height: 1081px), 
(orientation:portrait) and (max-width: 335px) and (min-height: 901px) and (max-height: 1080px), 
(orientation:portrait) and (min-width: 481px) and (min-height: 901px) and (max-height: 1080px) {
 
    .mainBefore, .snappedBefore, .tabletBefore {
            -webkit-column-break-before: auto;
            -moz-column-break-before: auto;
            -ms-column-break-before: auto;
            -o-column-break-before: auto;
            break-before: auto;
        }

    .mobileBefore {
        -webkit-column-break-before: always;
        -moz-column-break-before: always;
        -ms-column-break-before: always;
        -o-column-break-before: always;
        break-before: column;
    }

    .logo {
        margin-top: 15px;
        width: 120px;
    }
}

.kinectSpeech {
    color: #5dc21e;
}

.KinectAaction {
    color: #35abed;
}

h4, .keyword {
    color: #e4ad5a;
}