body {
    width: 480px;
}

.contentPanel .articleTitle { 
    height: 3.75em;
    width: 100%;
    overflow: hidden;
    margin-top: 12px;
}

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

nav.contentPanel {
    padding: 64px 64px 64px 28px;
}

/*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;
    background-color: transparent;
    padding: 0 0 0 28px;
    position: absolute;
    left: 0px;
    top: 10em;
    column-width: 388px;
}

article .contentPanel {
    height: 100%;
  
    background-color: rgba(16, 16, 16, .8);
}

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 a
{
    margin: 16px -22px 0 -22px;
    padding: 0 56px 0 22px;
}

/* CONTROLLER - hides controller image */
img.controller {
    display: none;
}

.contentPanel a:hover {
    background-color: rgba(235, 235, 235, 0.7); 
    color: #101010; 
    outline: none;
    border: none;
}

.contentPanel a:focus {
    background-color: rgba(152,	4, 6, .7);
    color: #ebebeb;
    outline: none;
    border: none;
}