/*standardss 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;
	 /* -=== FULL SCREEN VS SNAPPED TEST*/
}

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 /* ====================TOP PANEL OF HELP GUIDE, BEFORE GUIDE OPTIONS====*/
{
    width: 388px;
    height: 900px;
    background-color: transparent; /* ==== BG COLOR OF GUIDE ===*/
    
    color: #1A171E; /*================COLOR OF TITLE TEXT=========*/
    float: left;
    padding: 64px 28px 64px 64px;
    vertical-align: top;
    font-size:2.4em;
}

.helpContent
{
    color: black; /*================COLOR OF THE TEXT IN THE BODY OF THE SECTION=========*/
    height: 794px;
    overflow: hidden;
    background-color: transparent; /*================IN FULL SCREEN THE COLOR OF THE BG========*/
    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;
}

.contentPanel .articleTitle
{ 
    font-family: Garamond, Kartika Bold, Segoe UI Light, Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: 100;
    font-size:1.5em;
    font-color: black
    margin-top:10px;
     margin-bottom:32px;
}

.contentPanel .articleTopic
{
    font-family: Garamond, Kartika Bold, 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;
   
}

.panelRule
{
    color: #c900ff; /*unknown orange 1*/
}

.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 
{
    border-bottom:solid 4px rgba(230, 137, 53, .2); /* ==========COLOR OF HORIZONTAL LINES BETWEEN OPTIONS*/
    background: url ("button_1.png"); 
    width: 432px;
    height: 108px; /*height 108px is the value that includes the focused border.*/
    outline: 4px solid rgba(235, 235, 235, 0);
    line-height: 2.4em;
    padding: 36px 0 0 18px;
}

.navLinks a:focus, .pageButton:focus
{
    background-color: rgba(235, 235, 235, 0.1); 
    outline-color: #E68935; /* ==== COLOR OPTION BOX TEXT FOCUS==== */
    border-color:rgba(235, 235, 235, 0); 
}

.navLinks a:hover:not(:focus)
{
    background-color: transparent;
    outline: solid 4px #E68935;   /* ==== COLOR OPTION BOX TEXT HOVER==== */
    border-bottom:solid 4px transparent;
}

.pageButton
{
    height: 90px;
    color: #DA792E;  /* ==== COLOR OF NEXT PAGE TEXT==== */
    text-align: left;
    line-height: 140px;
    width: 178px;
    margin: 0 10px 0 0;
    -ms-attraction: 0% 0% 0% 0%;
    border: 1px solid #CF5D24; /* ===== COLOR OF PREVIOUS PAGE BUTTON WHEN IDLE ==== */
    background-color: rgba(235, 235, 235, 0); 
    outline: 4px solid rgba(235, 235, 235, 0);   
}

 .pageButton:hover:not(:focus) 
 {
    background-color: transparent;
    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;
    display: block;
    height: 5.1em;
    width: 5.1em;
    margin: -60px 0 0 -24px;
    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: transparent; /*unknown orange COLOR*/
   -ms-attraction: 0% 0% 0% 0%;
}

.helpMenu li a
{
    color: black; /*====COLOR OF GUIDE OPTIONS.....===*/
    height:4em;
    width: 100%;
    display: block;
    line-height: 4em;
    margin:0 0 0 -59px;
    padding:0 25px 0 56px;
    -ms-attraction: 0% 0% 0% 0%;
}

.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 */
    left: 64px; /* 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;
}