body
{
    width: 480px;
    background:#FFFFFF url(snapped_bg.jpg) top right;
}

li {
    list-style-type: none;
}

#controller-layout, #campaign, #challenges,#shootingrange,#addendum,#main-menu, #sub-main-menu, #competitive-multiplayer, #barracks, #loadout, #leaderboards, #service-record, #options, #downloads, #difficulty, #interface, #gameplay, #coop, #warranty, #introduction, #main-competitive-multiplayer{
    background:#FFFFFF url(article_bg.jpg) top right;
}

.contentPanel .articleTitle
{
    width: 100%;
    margin-top:1em;
    padding-top:0;
}

/*if the element is a main menu or a sub menu hide the placeholder element to the right*/
.helpMenu .helpContent
{
    display: none;
    background:transparent;
}

nav.contentPanel
{
    padding: 32px 64px 64px 32px;
    background:none;
}

/* --Links-- */

.navLinks {
    width:430px;
    margin-top:15px;
}

.navLinks a
{
    font-family: "Futura-Heavy",HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    text-transform: uppercase;
    border-bottom:none;
    background-color: rgba(235, 235, 235, 0);
    height: 24px; /*height 108px is the value that includes the focused border.*/
    outline: none;
    line-height: 24px;
    padding-top:0;
}

.navLinks a:focus
{
    background-color: rgba(57, 57, 57, 0.10);
    border-color: transparent;
}

.navLinks a:hover:not(:focus)
{
    background-color: rgba(57, 57, 57, 0.10);
    outline: none;
    border-bottom:none;
}

/*if in snapped we need to modify the positioning scheme to allow us to insert the contents between existing nav elements*/
article .helpContent
{
    height: 616px;
    overflow: hidden;
    padding: 0 28px 0 28px;
    position: absolute;
    text-align:justify;
    left: 5px;
    top: 9em;
    width:420px;
    column-width: 424px;
}

article .contentPanel
{
    height: 100%;
}

article .contentPanel .panelButtons
{
    left: 28px; /* safe region area on the right side: 480 - 28 - 386 ~ 64px */
}

/*in snapped the safe area is on the right so these need to be different than in main.css*/
.helpMenu li {
    height:78px;
    margin-bottom:4px;
}
.helpMenu li a
{
    height:78px;
    line-height:78px;
    font-size:24px;
}

article .contentPanel .panelButtons {
    bottom:30px;
}

.buttonList {
    float:left;
    clear:both;
}

.contentPanel .articleTitle {
    margin-bottom:0;
}
.contentPanel .articleTitleTall
{ 
    font-family: Futura-Heavy, Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: 100;
    font-size:1.5em;
    margin-top:50px;
     margin-bottom:24x;
	text-transform: uppercase;
}