VoxelBlockGame / Minecraft.Client / Durango / ServiceConfig / HelpDocument / main.css

/*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: 388px;
    height: 900px;
    background-color: #222222;
    color: #ebebeb;
    float: left;
    padding: 64px 28px 64px 64px;
    vertical-align: top;
    font-size:2.4em;
}

.helpContent
{
    height: 794px;
    overflow: hidden;
    background-color: #282828;
    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: Segoe UI Light, Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: 100;
    font-size:1.5em;
    margin-top:10px;
     margin-bottom:32px;
}

.contentPanel .articleTopic
{
    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;
   
}

.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 
{
    border-bottom:solid 4px #ebebeb;
    background-color: rgba(235, 235, 235, 0); 
    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: rgba(235, 235, 235, 1); 
    border-color:rgba(235, 235, 235, 0); 
}

.navLinks a:hover:not(:focus)
{
    background-color: transparent;
    outline: solid 4px rgb(107, 107, 107);
    border-bottom:solid 4px transparent;
}

.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: 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: #ebebeb;
   -ms-attraction: 0% 0% 0% 0%;
}

.helpMenu li a
{
    color: #ebebeb;
    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;
}