﻿@font-face {
    font-family: 'Compacta';
    src: url('../fonts/compacta-bold.eot');
    src: url('../fonts/compacta-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/compacta-bold.woff') format('woff'), url('../fonts/compacta-bold.ttf') format('truetype'), url('../fonts/compacta-bold.svg#compacta_bd_btbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Just Dance';
    src: url('../fonts/justdance-regular.eot');
    src: url('../fonts/justdance-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/justdance-regular.woff') format('woff'), url('../fonts/justdance-regular.ttf') format('truetype'), url('../fonts/justdance-regular.svg#just_dance_web_regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Just Dance';
    src: url('../fonts/justdance-bold.eot');
    src: url('../fonts/justdance-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/justdance-bold.woff') format('woff'), url('../fonts/justdance-bold.ttf') format('truetype'), url('../fonts/justdance-bold.svg#just_dance_web_boldbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/*
 * 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,
.contentPanel .articleTopic,
.contentPanel .articleTitle {
    font-family: 'Just Dance', 'Segoe UI', 'Segoe UI Regular', HelveticaNeue, 'Droid Sans', Arial, sans-serif;
}

body {
    background: transparent url(../images/help-bg.png) no-repeat 50% 50%;
    background-size: cover;
    color: #ebebeb;
}

/*
 * 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;
}

.helpContent {
    background-color: transparent;
}

.contentPanel {
    background-color: rgba(0,0,0,0.5);
}

/**
 * Is a bottom margin on paragraphs and lists too much to ask for?
 */
p,
ul {
    margin-bottom: 1em;
}

ul.unstyled,
ul.unstyled > li {
    margin-left: 0;
    list-style: none;
}

/**
 * Applying custom font to buttons.
 */
button {
    font-family: 'Just Dance', sans-serif;
}

/**
 * Figures and images.
 */
figure {
    display: inline-block;
    margin: 0 0 1em;
}
figure img {
    display: block;
    margin-bottom: 0.25em;
}
figure figcaption {
    font-size: 87.5%;;
    text-align: center;
    margin: 0;
}

/**
 * JDTV key.
 */
.jdtv-key {
    font-family: 'Just Dance', sans-serif;
    width: 100%;
    margin-bottom: 1em;
}
.jdtv-key td,
.jdtv-key th {
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
}
.jdtv-key td {
    width: 128px;
    max-width: 25%;
}
.jdtv-key th {
    padding-left: 0.75em;
}
.jdtv-key img {
    display: block;
}

/**
 * Lobby toys images.
 */
.lobby-toy-img {
    display: block;
    
}

/*
 * 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;* /
    }
}
*/