/*standard plus html5 specific resets*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section
{
    display: block;
}

img, object, embed
{
    max-width: 100%;
}

/*end resets*/

/*setting default font size so that 1 em will approximately equal 10 pixels and so that we can use media queries to scale the fonts*/
body
{
    height:100%;
    font-size: 62.5%;
    overflow: hidden;
}

button
{
    /*button is a special case and gets a default font size from the browser so we reset it to the same font-size as it's parent container*/
    font-size: 1em;
}

a
{
  text-decoration: none;
}

article
{
    overflow: hidden;
}

.articles article
{
    margin-top: 0;
    display: none;
}

.contentPanel li
{
    list-style-type: none;
}

article
{
    position: relative;
}

.menuLink {} /* marker class for links to menu pages */
.contentLink {} /* marker class for content pages */

.contentPanel
{
    width: 478px;
    height: 100%;
    background: #222 url(img/logo.png) no-repeat center top;
    color: #ebebeb;
    float: right;
    padding: 0;
    vertical-align: top;
    font-size:2.4em;
    -webkit-box-shadow:  -5px 0px 25px 5px rgba(0, 0, 0, .5);
    box-shadow:  -5px 0px 25px 5px rgba(0, 0, 0, .5);
}

.helpContent
{
    height: 794px;
    overflow: hidden;
    padding: 136px 64px 64px 64px;
    -moz-column-count: auto; /* Firefox - SmartGlass and console do not need these -moz-XXXX, but if help rendered on regular desktop it could be FF */
    -webkit-column-count: auto; /* Safari and Chrome */
    column-count: auto;
    -moz-column-width: 344px;
    -webkit-column-width: 344px;
    column-width: 344px;
    -moz-column-gap: 80px; /* Firefox */
    -webkit-column-gap: 80px; /* Safari and Chrome */
    column-gap: 80px;
    /*without this property the columns will always try to have the same amount of content each. 
    Using auto if you set the height it will only fill as needed*/
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
    font-size:2.4em;
    line-height:1.5;
    position: relative;
}

    .helpContent h1 {
        margin: 0 0 0.5em;
        font-size: 2em;
        font-weight: bold;
        line-height: 1.5;
        -webkit-column-span: all;
	    -moz-column-span: all;
        -ms-column-span: all;
	    -o-column-span: all;
	    column-span: all;
    }

    .helpContent h2 {
        font-size: 1.5em;
        font-weight: bold;
        line-height: 1.5;
    }

    .helpContent h3 {
        font-size: 1.25em;
        font-weight: bold;
        font-style: italic;
        line-height: 1.5em;
    }

    .helpContent p, .helpContent ul, .helpContent dl {
        line-height: 1.5em;
        margin: 0 0 1em;
    }

    .helpContent li {
        margin: 0 0 0 1em;
        list-style-position: inside;
    }

    .helpContent dt {
        font-weight: 600;
    }

    .helpContent dd {
        margin: 0 0 1em 1em;
    }

    .helpContent img, .helpContent object, .helpContent embed {
        display: block;
        margin: 1em auto;
    }


.contentPanel .articleTopic
{
    display: none;
    font-family: Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: normal;
    /*Because we reset font family here we have to also reset the size or it will get the default body font size. 1em here means the same as it's parent*/
    font-size:1em;
   
}

.contentPanel .articleTitle {
    font-family: Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: 600;
    font-size:1.5em;
    margin: 50px 0 200px 50px;
    padding: 0;
    color: #fff;
}

.panelRule
{
    color: #ebebeb;
}

.panelButtons
{
    /*if there are additional buttons or other elements in the panel you'll need to adjust this value*/
    margin-top: 680px;
    margin-left: 28px;
}


/**********button state formats***********/
.navLinks a 
{
    
    background: -ms-linear-gradient(left, #68b3dapx, #68b3da 29px, #444 21px);
    color: #bababa;
    width: 432px;
    height: 108px; /*height 108px is the value that includes the focused border.*/
    line-height: 2.4em;
    padding: 36px 0 0 18px;
    outline: none;
}

.navLinks a:focus, .pageButton:focus
{
    background: #68b3da; 
    color: #fff;
}

.navLinks a:hover:not(:focus)
{
    background: #444;
}

.pageButton
{
    height: 90px;
    color: #ebebeb;  
    text-align: left;
    line-height: 140px;
    width: 178px;
    margin: 0 10px 0 0;
    -ms-attraction: 0% 0% 0% 0%;
    border: 1px solid #ebebeb;
    background-color: #444; 
    outline: 4px solid rgba(235, 235, 235, 0);   
}

 .pageButton:hover:not(:focus) 
 {
    background-color: #444;
    outline: solid 4px rgb(107, 107, 107); 
    border:none;
 }

.pageButton.next
{
   line-height: 46px;
   float: right;
}

.panelButtons .pageCounter 
{
   display:block;
   height:2em;
   overflow:hidden;
}

.pageCounter
{
   display:none;
}

.win-voice-activelistening .pageCounter
{
   display:none;
}

 .pageButton.previous
 {
    float: left;
 }

.contentPanel .backLink
{
    background: transparent url(left_arrow.png) no-repeat 28px 62px;
    position: absolute;
    display: block;
    height: 5.1em;
    width: 5.1em;
    margin: 100px 0 0;
    background-size: 49%;
    font-size:1em;
}

.contentPanel .backLink:hover
 {
    background-color: transparent;
 }

.contentPanel .backLink:focus
 {
    background: transparent url(left_arrow_hoverFocus.png) no-repeat 28px 62px;
    background-size: 49%;
    outline:0;
 }

.contentPanel a
{
   display: inline;
   line-height: 1;
   color: #ebebeb;
   -ms-attraction: 0% 0% 0% 0%;
}

.helpMenu li a
{
    height:4em;
    width: 100%;
    display: block;
    line-height: 4em;
    margin: 0 0 8px;
    padding: 0;
    -ms-attraction: 0% 0% 0% 0%;
}

    .helpMenu li a span {
        margin: 0 0 0 48px;
    }

.endMark
{
    /*this empty element is given a width so that it will stretch to fill the last column as needed*/
    visibility: hidden;
    display: block;
    height: 1px;
    width: 100%;
    break-before: column;
}

/*note that we use absolute postitioning here instead of static so we reset the margin to 0*/
article .contentPanel .panelButtons
{
    position: absolute;
    margin: 0;
    bottom: 44px; /* safe region area */
   right: 36px; /* safe region area on the left: 64px */
    width: 386px;
}

/* The following styles are only applied when voice commands are in use on the console */
.win-voice-activelistening[data-win-voice]
{
    color: green;
}

/* CONTROLLER IMAGE - DISPLAYED */
img.controller_screamrider_piloting {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
    -ms-column-span: all;
    -o-column-span: all;
    margin: 0 auto 1em;
    max-width: 80%;
}