/*
  css for Just Sing Help
*/

body
{
  /*these are the standard fallbacks that are design approved for the majority of the supported devices.*/
  font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", "Droid Sans", Arial, sans-serif;
  font-style: normal;

  background: #000821; /* Old browsers */
  background: -moz-linear-gradient(top,  #000821 0%, #001236 15%, #0063b5 51%, #004a90 78%, #000822 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #000821 0%,#001236 15%,#0063b5 51%,#004a90 78%,#000822 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #000821 0%,#001236 15%,#0063b5 51%,#004a90 78%,#000822 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000821', endColorstr='#000822',GradientType=0 ); /* IE6-9 */

  color:#ebebeb; /*xboxwhite*/
  height: 100%;
}

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

.contentPanel 
{
  background-color: transparent;
}

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

.contentPanel .articleTitle, .contentPanel .articleTopic
{
  font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", "Droid Sans", Arial, sans-serif;
}

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

.contentPanel .articleTopic
{
  font-size: 1.2em;
}

.game-title 
{
  font-weight: 400;
  font-size: 1.7em;
}

button 
{
  font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", "Droid Sans", Arial, sans-serif;
}

p
{
  margin-bottom: 20px;
}

h2
{
  font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", "Droid Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.4em;
  margin-top: 10px;
  margin-bottom: 10px;
}

.helpContent ol {
  list-style-position: inside;
  margin-bottom: 20px;
}

.navLinks a
{
  border-bottom: solid 2px rgba(235,235,235,0.5);
}

.navLinks a:focus, .pageButton:focus
{
  background-color: rgba(235, 235, 235, 0.1); 
  outline-color: rgba(235, 235, 235, 0.5); 
  border-color:rgba(235, 235, 235, 0); 
}

.navLinks a:hover:not(:focus)
{
  outline: none;
  border-bottom: solid 2px rgba(235,235,235,0.5);
}

.image_widget
{
  text-align: center;
  margin-bottom: 10px;
  padding: 4px; 
}

.logo
{
  text-align: left;
  max-width: 480px;
  margin-top: 10px;
}

.logo img
{
  width: 80%;
}

.image_widget img
{
  box-shadow: 0px 0px 4px 4px rgba(255,255,255,0.3);
  width: 100%;
}

@media (orientation:portrait) and (min-width: 336px) and (max-width: 480px) and (min-height: 901px) and (max-height: 1080px) {
  .bg-top {
    background-image: url(images/bg_top.png);
    width: 100%;
    height: 300px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    background-repeat: no-repeat;
    background-size: 140%;
  }

  .bg-particle {
    position: fixed;
    top: 0;
    background-image: url(images/particle.png);
    width: 100%;
    height: inherit;
  }

  .contentSection
  {
    margin-bottom: 500px;
  }
}


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