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 38px 0 28px;
    position: absolute;
    left: 0px;
    top: 10em;
    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 a
{
    margin:16px -22px 0 -22px;
    padding:0 56px 0 22px;
}

/**********button state formats***********/
.navLinks a 
{
    border-bottom:solid 4px rgba(235, 235, 235, 0);
    background-color: rgba(235, 235, 235, 0); 
    width: 432px;
    height: 108px; /*height 108px is the value that includes the focused border.*/
    outline: 4px solid rgba(235, 235, 235, 0);
    line-height: 2.4em;
    padding: 36px 0 0 28px;
}

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

.navLinks a:hover:not(:focus)
{
    background-color: transparent;
    outline: solid 4px rgb(107, 107, 107);
    border-bottom:solid 4px transparent;
    padding-right:0;
}