/* 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*/

body{ background:url(img/bg_html.jpg) repeat-x bottom; }

body
{
  /*these are the standard fallbacks that are design approved for the majority of the supported devices.*/
  font-family:Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;

  /*add your skin background here if needed
   background:#000 url(background.png) fixed no-repeat 0 20%;
  */

  color:#fff; /*xboxwhite*/
  background-color:#000;
}

/*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;*/
    }
}



/****************************************************************************************************************************************************/

.contentPanel {
    font-size:2.0em;
}
.contentPanel .articleTitle {
    font-size:1.4em;
}
.contentPanel .articleTopic {
    font-size:0.8em;
}

.contentPanel .backLink {
    background-size: 39%;
}
.contentPanel .backLink:focus  {
    background-size: 39%;
 }
.helpMenu li a {
    height:3em;
    line-height: 3em;
    padding:0 25px 0 56px;
}


/****************************************************************************************************************************************************/

.helpContent {
    -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;
	font-size:1.6em;
    line-height:1.4;
}

/****************************************************************************************************************************************************/

.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { zoom:1; }

.white-line {
	border:1px solid #FFF; padding:20px 20px 20px 20px;
}

.fsmall { font-size:1.0em; line-height:1.3em; display:block;}
.contentPanel .articleTopic .fsmall { display:inline;}

.fsmall_s { font-size:0.9em; line-height:1em; display:block;}

.img_bor { border:1px solid #5a5a5a; box-sizing:border-box; }

.indent01 { display:block; text-indent:-0.5em; padding:0.5em 0 0.5em 0.5em; line-height:1.3em; }

.point-color-01 { color:#ffb400;}
.point-color-02 { color:#00b1d2;}
.point-color-03 { color:#ff0000;}

.fwb{ font-weight:bold; }

/* attention */
/*
.attention01, .attention02 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95); -moz-opacity: 0.95; -webkit-opacity:0.95; -khtml-opacity:0.95; opacity:0.95;}
*/
.attention01 { background:#404040; padding:15px; margin-bottom:10px; }
/*
.attention01 span { float:left; width:90%; }
.attention01 .mark { display:block; }
.attention01 .mark { min-height:100%; width:10%; text-align:left;}
.attention01 .icon { max-height:100%; margin:5px 0 5px 3%;}
*/
.attention02 { background:#583333; padding:15px; margin-bottom:10px; }
.attention02 .title{ background:#340300; color:#dc1400; font-weight:bold; padding:3px; }
/*
.attention02 .atten_ti { background:#FFF; border-bottom:1px solid #FFF; }
.attention02 .exc { background:#FFF; color:#000; text-align:center; width:1em; min-height:1em;  float:left; padding:5px; margin-right:0.5em; }
.attention02 .name { background:#000; padding:5px 5px 5px 2em; min-height:1.1em;}
.attention02 .content { clear:both; padding:10px; line-height:1.41;}
*/
.attention03{ background:#505050; padding:15px; border-radius:4px; }
.attention03 .inner{ background:#000; padding:10px; line-height:1.3em; }


ul.circle{  line-height:1.4em; }
ul.circle li{ list-style-type:disc; list-style-position:inside; padding-left:1em; text-indent:-1em; margin:0.5em; }

.text-link { padding-left:1.5em; background-size:auto 80%; color:#ffd200; }

.helpContent_box { margin-bottom:40px; }
.helpContent_box p { margin-bottom:1.0em; line-height:1.6em; }
.helpContent_box p:last-child{ margin-bottom:0em; }

.helpContent_box_submenu { margin-bottom:20px; }
.helpContent_box_subtext { margin-bottom:20px; }

.helpContent_box .left{ width:49%; float:left; }
.helpContent_box .right{ width:49%; float:right; }

.pageLink li {
	display:inline-block;
}
.pageLink a {
	display:block;
	font-size:0.7em;
	padding:5px 10px;
	color: #ebebeb;
	margin: 0 10px 0px 0;
	-ms-attraction: 0% 0% 0% 0%;
	border: 2px solid #ebebeb;
	background-color: rgba(235, 235, 235, 0);
}
.pageLink a:hover:not(:focus) {
	background-color: transparent;
	border: 2px solid rgb(107, 107, 107);
}

/* title_a */
.title_a{ margin-bottom:20px; }
.title_a .top{ height:13px; background:repeat-x top; width:100%; }
.title_a p{ padding:0 10px; font-weight:bold; font-size:1.1em; color:#fff; text-align:center; }
.title_a .bottom{ height:12px; background:repeat-x bottom; width:100%; }

.title_a{ background-color:#4b477b; }
.title_a.attack{ background-color:#ab2313; }
.title_a.defence{ background-color:#261a9a; }
.title_a.common{ background-color:#1eaa14; }

.title_a .top, .title_a .bottom{ background-image:url(img/title_a.png); }
.title_a.attack .top, .title_a.attack .bottom{ background-image:url(img/title_a_attack.png); }
.title_a.defence .top, .title_a.defence .bottom{ background-image:url(img/title_a_defence.png); }
.title_a.common .top, .title_a.common .bottom{ background-image:url(img/title_a_common.png); }

.title_a span { display:inline-block; color:#01cbf1; font-weight:normal; font-size:0.80em; padding-left:1em; }

/* title_b */
.title_b{ background:repeat-y center; background-size:100%; margin-bottom:15px; border-style:solid; border-width:1px 0px; text-align:center; font-size:1em; line-height:1.1; padding:10px 0; color:#fff; }
.title_b{ border-color:#8c9ba5; background-image:url(img/title_b.png); }
.title_b.attack{ border-color:#e6321e; background-image:url(img/title_b_attack.png); }
.title_b.defence{ border-color:#1e32e6; background-image:url(img/title_b_defence.png); }
.title_b.common{ border-color:#32a023; background-image:url(img/title_b_common.png); }

/* tableBox1 */
.tableBox1 { width:100%; border-collapse:collapse; border:1px solid #6e6e6e; border-bottom-width:0px; }
.tableBox1 th, .tableBox1 td{ border-collapse:collapse; text-align:left; font-weight:normal; padding:10px; border-bottom:1px solid #6e6e6e; }

.tableBox1 th{ background-color:#3c3c73; color:#fff; text-align:center; }
.tableBox1.attack th{ background-color:#910000; }
.tableBox1.defence th{ background-color:#192896;}
.tableBox1.common th{ background-color:#0a4614;}
.tableBox1.block th, .tableBox1.block td{ display:block; }
.tableBox1 td{ background-color:#000; line-height:1.3em; }

.tableBox2 {
border:1px solid #FFF;
border-collapse:collapse;
width:100%;
}
.tableBox2 th {
background:#FFF;
color:#000;
text-align:center;
vertical-align:middle;
}
.tableBox2 td {
background:#000;
padding:20px 20px;
}

/* dlBox1 */
.dlBox1 dl{ display:block;width:100%;clear:both;}
.dlBox1 dl:after { content: ""; display: block; clear: both; }
.dlBox1 dl { zoom:1; background-color:#505050; border-radius:4px; }
.dlBox1 dl { margin-top:12px; }
.dlBox1 dl dt { font-weight:bold; padding:4px; text-align:center; }
.dlBox1 dl dd { padding:5px 0.5em;font-size:0.9em; margin:1px; border-radius:4px; text-align:center; }
.dlBox1 dl dd:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
/*.dlBox1 dl dd span{ float:left; margin-right:20px; display:inline-block; }*/
.dlBox1 dl dd span:last-child{ margin-right:0; }
.dlBox1 dl var{ background-color:#5c7d99; color:#fff; font-weight:bold; border:1px solid #78b4e6; font-style:normal;
display:inline-block; width:30px; height:30px; line-height:30px; text-align:center; margin-right:5px; }

.dlBox2{ border:2px solid #fff; margin-bottom:12px; }
.dlBox2 dt{ background-color:#3c3c73; border-bottom:2px solid #fff; padding:12px; }
.dlBox2 dd{ background-color:#969696; padding:6px; }
.dlBox2 dd ul{ display:table; width:100%; }
.dlBox2 dd ul li{ display:table-cell; width:33.3333%; background-color:#000; padding:9px 6px; box-sizing:border-box; text-align:center; vertical-align:middle; border:3px solid #969696;}
.dlBox2.typeSp ul, .dlBox2.typeSp ul li
{ display:block; width:100%; }

/* pic01Box */
.pic01Box{ margin-top:20px; }
.pic01Box .dispSp img{ margin:auto; }

/* pic02Box */
.pic02Box:after { content: ""; display: block; clear: both; }
.pic02Box.typePc img.right{ float:right; width:48%; margin:0 0 2% 2%; }

/* pic03Box*/
.pic03Box ul:after { content: ""; display: block; clear: both; }
.pic03Box ul li{ list-style-type:none; background-color:#000; box-sizing:border-box; padding:5px; text-align:center; border:1px solid #fff;margin-bottom:10px; width:50%; float:left; }
.pic03Box.typePc ul li{ width:50%; float:left; }

.title_a span.buttonAImage_RGB235 , .title_a span.buttonBImage_RGB235 , .title_a span.buttonXImage_RGB235 , .title_a span.buttonYImage_RGB235 , .title_a span.leftBumperImage_RGB235 , .title_a span.rightBumperImage_RGB235 , .title_a span.leftTriggerImage_RGB235 , .title_a span.rightTriggerImage_RGB235 , .title_a span.leftStickImage_RGB235 , .title_a span.rightStickImage_RGB235 , .title_a span.dPadImage_RGB235 , .title_a span.dPadUpImage_RGB235 , .title_a span.dPadDownImage_RGB235 , .title_a span.dPadLeftImage_RGB235 , .title_a span.dPadRightImage_RGB235 , .title_a span.buttonViewImage_RGB235 , .title_a span.buttonMenuImage_RGB235 {
	display:inline-block;
}

img.icon{ vertical-align:middle; margin:8px; }

.fc_attack{ color:#dc1400; background-color:#fbe7e5; border:1px solid #fff; }
.fc_defence{ color:#1400dc; background-color:#e7e5fb;border:1px solid #fff; }

.tips{ margin-top:14px; }
.tips img.icon{ margin-left:0px; }

span.nw{ white-space:nowrap; }
/****************************************************************************************************************************************************/

#TOC .helpContent {}

/****************************************************************************************************************************************************/

.p0010 .helpContent {}

/****************************************************************************************************************************************************/

#article0020{}

/****************************************************************************************************************************************************/

#article0030{}

/****************************************************************************************************************************************************/

#article0040{}
.planLabel01,.planLabel02{ padding:6px 9px;}
.planLabel01{ background-color:#3c3c73; }
.planLabel02{ background-color:#000;}

/****************************************************************************************************************************************************/

#article0050{}

/****************************************************************************************************************************************************/

#article0060{}

#article0061 dl.dlBox1{ margin:20px 0;}
#note01{ text-align:center; margin-bottom:20px; }
#note01 span.fc_attack, #note01 span.fc_defence{ padding:2px 4px; border-radius:4px; }

#article0062{}
#article0063{}
#article0064{}
#article0065{}
#article0066{}
#article0067{}
#article0068{}

/****************************************************************************************************************************************************/

#article0070{}

/****************************************************************************************************************************************************/
#article0080{}

/****************************************************************************************************************************************************/

#article0090{}

/****************************************************************************************************************************************************/