/* 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
{
  /*these are the standard fallbacks that are design approved for the majority of the supported devices.*/
  font-family:'Open Sans', Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
  /*background:black url(wolf-tno-bg.jpg) no-repeat!important;  
   background-size: 100% auto!important;
   background-position: 480px 20%!important;*/
  /*add your skin background here if needed*/
   color:#fbf1e3; /*xboxwhite*/
   background-color:transparent;
   font-weight: 400;
}

em{
  font-family:'Open Sans', Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
  font-style: italic;
  font-weight: 400;
}

strong{
  font-family:'Open Sans', Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
  font-weight: 700;
}

.extrabold{
  font-family:'Open Sans', Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
  font-weight: 800;
}

.articleTitle, .contentPanel .articleTitle{
  font-family:'Open Sans', Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
  font-style: normal;
  font-weight: 400;
}

.articleTopic, .contentPanel .articleTopic{
  font-family:'Open Sans', Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
  font-style: normal;
  font-weight: 800;
}

.contentPanel .articleTitle, .contentPanel .articleTopic{
  text-transform: uppercase;
}

.contentPanel, .helpMenu li a{
  color: #fbf1e3;
}

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

p{
  margin-bottom: 1em;
}

.articles{
background: -moz-linear-gradient(left,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(25%,rgba(0,0,0,0.65)), color-stop(75%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

}

.helpContent{
  background: transparent;
}

.contentPanel{
  background: transparent;
}

.navLinks a:hover:not(:focus)
{
    background-color: #fbf1e3!important;
    outline: none;
    border-bottom:solid 0px transparent;
    color: #be111c;
}

.navLinks{
  text-transform: uppercase;
  font-weight: 800;
}

.navLinks a{
  outline: none;
  border: none;
}

.navLinks a:focus{
background-color: #fbf1e3!important;
color: #000000;
}

.navLinks a:hover:focus{
background-color: #fbf1e3!important;
color: #be111c;
}

.small{
  font-size: .5em;
}

.numbercallout{
  background: #be111c;
  color: #fbf1e3;
  font-weight: 800;
  padding: 2px 8px;
  margin: 0 10px 0 0;
  font-size: 14px;
}

.weapons{
  margin: 0 0 2em 0;
  break-after: column;
    -webkit-column-break-after: column;
    -moz-column-break-after: column;
    -ms-column-break-after: column;
    -o-column-break-after: column;
}

.pageButton{
  background: #fbf1e3;
  color: #be111c;
  border: 0;
  outline: 0;
  font-size: .8em;
  /*width: 140px;*/
  margin: 0 10px 0 5px;
  /*height: 85px;*/
}

.pageButton:focus{
  background: #be111c;
  color: #fbf1e3;
  border: 0;
  outline: 0;
}

.pageButton:hover, .pageButton:hover:not(:focus){
  background: #be111c;
  color: #fbf1e3;
}

.pageCounter{
text-transform: uppercase;
}

.nextButtonText, .pageButton.previous{
  font-weight: 800;
  text-transform: uppercase;
}

.pageButton.next{
  line-height: 42px;
}

a{
  color: #be111c;
  background: #fbf1e3;
  text-decoration: none;
  /*padding: 0 10px;*/
}

a:hover{
  color: #fbf1e3;
  background: #be111c;
}

.contentPanel .backLink{
  background-size: 40%;
  height: 5.8em;
}

.contentPanel .backLink:focus{
  background-size: 40%;
  height: 5.8em;
}

/* Force column break before/after element. Use to keep content "grouped," such as pictures with text. */
.breakBefore {
    break-before: column;
    -webkit-column-break-before: column;
    -moz-column-break-before: column;
    -ms-column-break-before: column;
    -o-column-break-before: column;
}

.breakAfter {
    break-after: column;
    -webkit-column-break-after: column;
    -moz-column-break-after: column;
    -ms-column-break-after: column;
    -o-column-break-after: column;
}

.helpMenu li a{
  font-size: .8em;
}


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

@media screen and (min-height: 901px){
  body{
    background-position: 348px 20%!important;
background:#b81519 url(wolftobbg.jpg) no-repeat!important;  
   background-size: 100% auto!important;
 }
}

@media screen and (max-height: 900px) and (orientation: landscape){
body {
  background-position: 348px 20%!important;
background:#b81519 url(wolftobbg.jpg) no-repeat!important;  
   background-size: 100% auto!important;
}

.articles{
  background: #b81519;
}

.navLinks a:hover:not(:focus)
{
    background-color: #fbf1e3;
    outline: none;
    border-bottom:solid 4px transparent;
    color: black;
}

}

@media screen and (max-height: 900px) and (orientation: portrait){
  body {
  background: #b81519!important;
  background:#b81519 url(wolftobbg.jpg) no-repeat!important;  
   background-size: 100% auto!important;
}

.articles{
background: transparent;
}


.helpMenu li a {
  line-height: 1em!important;
  }

  .navLinks a:hover:not(:focus)
{
    background-color: #fbf1e3;
    outline: none;
    border-bottom:solid 4px transparent;
    color: black;
}
}