﻿/*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;
}

.contentPanel
{
    width: 480px;
    height: 1080px;
    background-color: #ebebeb;
    color: #222222;
    float: left;
    vertical-align: top;
    font-size:2.4em;
}


.helpContent
{
    width: 400px;
    overflow: hidden;
    padding: 40px 40px 64px 40px;
    -moz-column-count: auto; 
    -webkit-column-count: auto; 
    column-count: auto;
    -moz-column-width: 344px;
    -webkit-column-width: 344px;
    column-width: 344px;
    -moz-column-gap: 80px;
    -webkit-column-gap: 80px; 
    column-gap: 80px;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
    line-height:1.5;
    position: relative;
}


.navLinks{
    width: 460px;
    padding: 40px 10px 64px 10px;
}


.contentPanel .articleTitle
{ 
    font-family: Segoe UI Light, Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: 100;
    width: 452px;
    height: 270px;
    background-color: #D6000F;
    padding-left:28px;
    /*background-color: #D6000F;*/
    border: 1px solid #D6000F;
}


.contentPanel .articleTitle .img{
    margin-top:100px;
    height:140px;
    width:266px;
    background:#D6000F url("logo.png") no-repeat;
}


.contentPanel .articleTopic
{
    font-family: Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: bold;
    color:#222222;
    height:40px;
    width:480px;
    margin-left:35px;
}


.contentPanel .helpContent .articleTopic{
    font-family: Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: bold;
    color:#222222;
    height:40px;
    width:480px;
    margin-left:0px;
    margin-bottom:15px;
}


.contentPanel .articleTitle a{
    height:300px;
    width:200px;
    margin-bottom:0;
    margin-right:0;
}

/**********button state formats***********/
.contentPanel .navLinks li a 
{
    color: #222222;
    background-color:#ebebeb;
    width: 380px; /**432px;**/
    height: 55px; /*height 108px is the value that includes the focused border.*/
    border-bottom:solid 2px #888888;
    line-height: 2.4em;
    padding: 36px 0 0 25px;
}

.contentPanel .navLinks a:focus
{
    background-color:#ebebeb;
    outline:4px solid #ebebeb;
    border:4px solid #222222;
    box-shadow: -4px -4px 8px #666666,4px 4px 8px #666666;
}


.contentPanel .navLinks a:hover:not(:focus)
{
    outline:4px solid #ebebeb;
    border:4px solid #222222;
    box-shadow: -4px -4px 8px #666666,4px 4px 8px #666666;
}


.contentPanel .backLink.rSize
{
    background: transparent;
    display: block;
    height: 5.1em;
    width: 5.1em;
    background-size: 49%;
    position: fixed;
    bottom:20px;
    left:20px;
    /*width: 400px;
    height: 20px;*/
}


.contentPanel .backLink.rSize:focus{
    background: transparent url("back.png") no-repeat center;
    outline:4px solid #ebebeb;
    border:4px solid #222222;
    box-shadow: -4px -4px 8px #666666,4px 4px 8px #666666;
}


.contentPanel .backLink.rSize:hover:not(:focus){
    background: transparent url("back.png") no-repeat center;
    outline:4px solid #ebebeb;
    border:4px solid #222222;
    box-shadow: -4px -4px 8px #666666,4px 4px 8px #666666;
}


/*.contentPanel a
{
   display: inline;
   -ms-attraction: 0% 0% 0% 0%;
}*/

.helpMenu li a
{
    color: #ebebeb;
    height:4em;
    width: 100%;
    display: block;
    line-height: 4em;
    margin:10px 24px 10px 24px;
    padding:0 56px 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;
}


/* The following styles are only applied when voice commands are in use on the console */
.win-voice-activelistening[data-win-voice]
{
    color: green;
}
