/*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;
    color: #ebebeb; /*xboxwhite*/
    background-color: #000000; /*was orange 9/4 - not sure where this shows up*/
    font-family: CustomFont, "Segoe UI", "Segoe UI Light", "Segoe UI Regular", HelveticaNeue, "Droid Sans", Arial, Sans-Serif; /* added back-up 8/25 */
}

/*overriding fonts to target culture specific font families for asian fonts. This is dependent on the body tag having the appropriate lang attribute.*/
/*these fonts are for Japanese*/
body:lang(ja-JP)
{
    font-family: "Meiryo UI", Meiryo, Hiragino, "Yu Gothic";
}
/*these fonts are for Simplified Chinese*/
body:lang(zh-SG), body:lang(zh-CN)
{
	font-family: "Microsoft YaHei UI", SimSun;
}
/*these fonts are for Traditional Chinese*/
body:lang(zh-HK), body:lang(zh-TW)
{
	font-family: "Microsoft Jhenghei UI", PMingLiU;
}
/*these fonts are for Korean*/
body:lang(ko-KR)
{
	font-family: "Malgun Gothic", Gulim;
}

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 {
		color: #487799;	/* added 8/21 didnt work*/	
} /* marker class for links to menu pages */

.contentLink {
		color: #487799;	/* added 8/21 didnt work*/
} /* marker class for content pages */

.contentPanel {
    width: 388px;
    height: 900px;
    background-color: rgba(0, 0, 0, 0.20); /* 9/4 this was neon green - this shows up when at a large screen size */
    /*background: url(MCC_fullbg.jpg) fixed no-repeat; /*this is the constant background when you have it snapped. - cut as of 9/12 - cn*/
    color: #ebebeb; /* this stomps on all body text */
    float: left;
    padding: 64px 28px 64px 64px;
    vertical-align: top;
    font-size: 2.4em;
}

.helpContent {
    height: 794px;
    overflow: hidden;
    background-color: #000000; /*once the window is scaled a certain size w/ text, this color will fill out the bg - this was yellow 9/4 */
    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.5em;
    position: relative;
    /*color: #487799;  body text */
}

/* new 8/21 */
.helpContent h1 {             
    color: #487799;     
}                       

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

.helpContent h3 {
    font-size: 1.25em; /*formatting for the the h3 headers. h4 is the most widely used throughout */
    font-weight: bold;
    /*font-style: italic;*/
    line-height: 1.5em;
    color: #487799;
}

/* new 8/21 */
.helpContent h4 { 
    color: #487799;        
}                        

/* new 8/27 for HUD lists. Font size is a bit smaller than the overall body font */
.helpContent h5 { 
    color: #ebebeb;
    font-size: 0.85em;
    font-weight: normal;              
}       

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

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

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

.helpContent img {
    display: block;
    margin: 1em auto;
}
	
.contentPanel .articleTitle { 
    font-weight: normal; /* it was 100 - 8/25 */
    font-size: 1.35em; /* default was 1.5 - 8/25 */
    margin-top: 40px;
    margin-bottom: 32px; /*default was 32 - 8/25 */
		color: #ebebeb; /* #487799 dont change this, Help On is now blue */
		font-family: CustomFont, "Segoe UI", "Segoe UI Light", "Segoe UI Regular", HelveticaNeue, "Droid Sans", Arial, Sans-Serif; /*added 8/26 - this worked, but not for BlenderPro yet.*/
}

.contentPanel .articleTopic {
    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;
    color: #ebebeb; /*dont change this, Campaign Playlists is now white*/    
}

.panelRule {
    color: #487799; /* this is not for the title page borders -CN */
}

.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: transparent 4px #ebebeb; /* cut 'solid'. these are the main page borders -CN */
    background-color: rgba(235, 235, 235, 0); 
    width: 432px;
    height: 108px; /*height 108px is the value that includes the focused border.*/
    outline: transparent; /*4px solid rgba(235, 235, 235, 0); swapped color to transp. -CN */
    line-height: 2.4em;
    padding: 36px 0 0 18px;
    color: #487799;   /*test to make nav links blue */   
}

.navLinks a:focus, .pageButton:focus {
    background-color: rgba(235, 235, 235, 0.13); /* 0 was 0.1 as of 8/20. that filled the current nav button and next page button */
    outline-color: transparent; /*rgba(235, 235, 235, 1) swapped color to transp. -CN */
    border-color: rgba(235, 235, 235, 0);
    /*color: #487799;*/
    outline: solid 2px #ebebeb; /*added on 8/25 to try and solve for page button outlines when selected */     
}

.navLinks a:hover:not(:focus) {
    background-color: rgba(235, 235, 235, 0.13); /* prev. was transparent 8/20; */ /*8/26 adjusted alpha to 0 and didnt change anything */
    outline: solid 2px rgb(255, 255, 255); /* previously was 107 x3 */
    border-bottom: solid 4px transparent;
    /*color: #487799; this changed the mouse-over text to blue for the nav buttons */ 
		/*font-weight: bold;*/   
}


.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: 2px solid #ebebeb; 
    background-color: rgba(235, 235, 235, 0.13); /* RGB + alpha?!? */
    /*outline: 4px solid rgba(235, 235, 235, 0); cut on 8/25 */
		font-family: CustomFont, "Segoe UI", "Segoe UI Light", "Segoe UI Regular", HelveticaNeue, "Droid Sans", Arial, Sans-Serif; /*added 8/26 - this worked, but not for BlenderPro yet.*/
}

 .pageButton:hover:not(:focus) {
    background-color: rgba(235, 235, 235, 0.13); /* Previously was transparent 8/20 */
    /*outline: solid 4px #ebebeb;*/
    border: 2px solid #ebebeb; /* was none; 8/25 */
 }

.pageButton.next {
    line-height: 46px;
    float: right;
		/*outline: solid 2px #ebebeb; /* just added 8/20... cut on 8/25*/
    /*border: none; /* commented out 8/25 */
    background-color: rgba(235, 235, 235, 0.13); /* New line added 8/20 */
}


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

.pageCounter {
    display: none;
}

.win-voice-activelistening .pageCounter {
    visibility: hidden;
}

.pageButton.previous {
    float: left;
    /*border: solid 2px #ebebeb; /*added this line on 8/25 */
}

/* The following styles is the deafult back button which is invisible in fill and snapped mode. */
body .contentPanel .backLink {
    background: transparent url(left_arrow.png) no-repeat 28px 62px;
    display: block;
    height: 5.1em;
    width: 5.1em;
    margin: -64px 0 0 -28px;
    background-size: 45%;
    font-size: 1em;
    visibility: hidden;
    outline: 0;
}

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

.helpMenu li a {
    color: #487799; /*was #ebebeb 8/25 --> this changed all nav buttons to blue text */
    height: 4em;
    width: 100%;
    display: block;
    line-height: 4em;
    margin: 16px 0 0 -16px;
    padding: 0 0 0 16px;
    -ms-attraction: 0% 0% 0% 0%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.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: #5dc21e;
}

article a.articleTitle, article a.articleTitle:visited {
    color: #487799; /* was #6b6b6b - 8/25 */
}

/* The following styles are for voice. */
body.win-voice-voicemodeactive .contentPanel .backLink[data-win-voice] {
      text-indent: 28px;
      line-height: 280px;
      padding-left: 0; /*This overrides help.css*/
      padding-top: 0; /*This overrides help.css*/
      background: transparent url(left_arrow_vui.png) no-repeat 28px 62px;
      background-size: 45%;
      visibility: visible;
}

/* The following styles are applied for Gesture and Gesture+Voice */
body.win-gestureactive .contentPanel .backLink,
body.win-gestureactive .contentPanel .backLink.win-voice-activelistening[data-win-voice] {
      background-image: url(left_arrow.png);
      visibility: visible;
}

body.win-gestureactive .contentPanel .backLink:hover, 
body.win-gestureactive .contentPanel .backLink:active,
body.win-gestureactive .contentPanel .backLink.win-voice-activelistening[data-win-voice]:hover,
body.win-gestureactive .contentPanel .backLink.win-voice-activelistening[data-win-voice]:active {
    background: transparent url(left_arrow_hoverFocus.png) no-repeat 28px 62px;
    background-size: 45%;
    outline:0;

}