body
{
    width: 480px;
	font-size:60%;
}

.contentPanel .articleTitle
{ 
	font-size:1.8em;
    height: 3em;
    overflow: hidden;
	padding-left:5px;
	width:400px;
}

.helpMenu .articleTitle
{
	font-size:2.3em;
	height:2.28em;
	margin-top:75px;
}

.articles .articleTitle
{
	display: table-cell;
	vertical-align:middle;
	text-transform: uppercase;
}

.contentPanel .backLink
{
	height:6.1em;
}

.helpMenu, .articles
{
	background:#000 url(background_snapped.png) no-repeat center center fixed;
	background-position:left bottom;
}

.navLinks
{
	width:85%;
	white-space: nowrap;
}

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

/*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: 13em;
	width:80%;
    column-width: 424px;
}

article .contentPanel
{
    height: 100%;
	width: 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
{
	width:85%;
    margin:16px -22px 0 -22px;
    padding:0 56px 0 22px;
}