/* This file is intended to contain rules that will allow "skinning" of your manual by changeing the colors, fonts and background images. You should not place any rules here
that modify positioning or size or other layout properties*/

/* text styles - requires both .otf and .eot versions */
@font-face{
font-family: KnulReg;
    src: url('fonts/Knul_Reg-webfont.otf') format('opentype'),
         url('fonts/Knul_Reg-webfont.eot') format('embedded-opentype'); /* IE requires eot*/
}

@font-face{
font-family: KnulItl;
    src: url('fonts/Knul_RegItal-webfont.otf') format('opentype'),
         url('fonts/Knul_RegItal-webfont.eot') format('embedded-opentype'); /* IE requires eot*/
}

@font-face{
font-family: KnulBld;
    src: url('fonts/Knul_Bold-webfont.otf') format('opentype'),
         url('fonts/Knul_Bold-webfont.eot') format('embedded-opentype'); /* IE requires eot*/
}

body
{
  /*these are the standard fallbacks that are design approved for the majority of the supported devices.*/
  font-family: KnulReg, Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
  font-weight:normal;
  
  /*add your skin background here if needed */
	background:url("../images/landscapeBg.jpg") no-repeat fixed;
    background-size: cover;
  	color:#000; /*__________________Default color of text goes here*/
}

/* Headers and paragraph styles ____________________________________*/

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

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

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

p
{
	break-after:avoid-column;
	color:#000;
}


h1, h2, h3, h4, h5, title, header
{
	font-family: KnulBld, Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
	text-transform: uppercase;
	color:#000;
	margin-bottom:8px;
}

h6
{
	font-size: 180%;
	border-bottom: 2px solid #000;
	text-transform: uppercase;
	font-family: KnulBld, Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
	color:#000;
	break-after:avoid-column;
}

b
{
	font-family: KnulBld,Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;

}


h5
{
	font-size: 100%;

}

h4
{
	font-size: 120%;

}

h3
{
	font-size: 140%;
}

h2
{
	font-size: 180%;
	border-bottom: 2px solid #000;
	line-height: 1em
}

h1
{
	font-size: 180%;
	border-bottom: 2px solid #000;
}

/* a href styles are not used in xbox one manuals - this is a default */
a
{
	color:#f8cc32; 
	font-family: KnulReg, Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
}

/* unorderd list style __________________________________________________________*/

ul, ol
{
	list-style-type:none;
	padding-left: 20px;
	margin-bottom:15px;
}

ul.a
{
	list-style-type:disc;
	padding-left: 20px;
	margin-bottom:15px;
}
ol.a 
{
	font-size: 100%;
	list-style-type:decimal;
	margin-left: -40px;
	margin-bottom:0px;
}

/* Table style for complete controls sections____________________________________*/
.table1
{
	/*border-collapse: collapse;*/
	width: 100%;
	margin-top: 5px;
	margin-bottom: 15px;
	break-after: column;
}
	

.table1 tr
{
	min-height: 60px;
	break-inside: avoid-column;
}

.table1 td
{
	padding-top: 10px;
	padding-left:7px;
	padding-bottom: 10px;
	font-family: KnulReg, Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
}



/* Alternate color settings for table rows ____________________________________*/
.table1 tr:nth-child(even) {
	background-color: rgba(248, 204, 50, 1);
	color:#090a11;
}

.table1 tr:nth-child(odd) {
	background-color: rgba(248, 204, 50, .75);
	color:#090a11;
}

/* Table style for Kinect voice command section _______________________________*/
.T_kinect
{
	/*border-collapse: collapse;*/
	width: 100%;
	margin-top: 5px;
	margin-bottom: 15px;
	break-after: column;
}


.T_kinect th
{
	height: 15px;
	background-color: rgba(255, 255, 255, .7);
	padding-top: 7px;
	padding-bottom: 7px;
	color: #000;
	font-size: 115%;
	font-family: KnulReg, Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
	text-transform: uppercase;
}	

.T_kinect tr
{
	min-height: 60px;
	break-inside: avoid-column;
}

.T_kinect td
{
	vertical-align: center;
	padding-top: 10px;
	padding-left:7px;
}

/* Alternate color settings for table rows ____________________________________*/
.T_kinect td:nth-child(even) {
	background-color: rgba(248, 204, 50, 1);
	color:#090a11;
}

.T_kinect td:nth-child(odd) {
	background-color: rgba(248, 204, 50, .75);
	color:#090a11;
}


.gameLogo{
	background:url("../images/menuLogo.png") top left no-repeat;
	width:10em;
	height:3em;
	background-size:75%;
	overflow:hidden;
	text-indent:-1000%;
}


/*this would for example override the white background and text color on active links*/
.pageButton:hover, .contentPanel a:hover
{
    /*background-color: #ee4036;
    color:#222;*/
}

/*and this would modify the focus outline*/
a:focus, a:hover, button:focus, button:hover
{
   /*outline:thick double #ee4036;*/
}


article a.articleTitle, article a.articleTitle:visited 
{
    color:#6b6b6b;
}

/*Here's an example of using this file to skin based upon a media query, in this case it will work on smartglass tablet devices
 Note: this is a duplicate of the media query used inline in the html to load tablet.css for the index page*/
@media (orientation:landscape) and (max-height: 900px),
(orientation:landscape) and (min-height: 1081px),
(orientation:landscape) and (max-width: 1430px) and (min-height: 901px) and (max-height: 1080px),
(orientation:landscape) and (min-width: 1930px) and (min-height: 901px) and (max-height: 1080px)
{
   /*This would add a background image to the content panel in tablets only. Note: you need an additional selector to give this rule 
   enough weight to override the existing in tablet.css*/ 
  .articles  article:not(.helpMenu) .contentPanel 
    {
        /*background: url("Forza_Left.png") no-repeat transparent 24px 60px;*/
    }
}

.navLinks a {
	border-color: #ce0808;
}

.navLinks a:focus {
	background: #ce0808;
	color: white;
	border-color: #ce0808;
	outline-color: #ce0808;
}

.navLinks a:hover:not(:focus) {
	outline-color: #ce0808;
}

.gameLogo {
	background-position: top center;
	height: 100px;
	width: auto;
}

.helpMenu li a {
	text-align: center;
	height: auto;
	padding: 1em 0em !important;
	width: auto;
	color: #ce0808;
	outline: 1px solid #ce0808;
}

.pageButton {
	color: #ce0808;
	border-color: #ce0808;
}

.pageButton:focus {
	outline-color: #ce0808;
	background: #ce0808;
	color: white;
}

.pageButton:hover:not(:focus) {
	outline-color: #ce0808;
}