body
{
    width: 480px;
    background:#222 url(bg.png) repeat 0 20%;   
}

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

{
    display: inline;
	position: fixed;
    top: 1.5em;
	left: 1.5em;
	font-family: Corbel, Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    font-weight: 100;
    /*Because we reset font family here we have to also reset the size or it will get the default body font size. 1em here means the same as it's parent*/
    font-size:0.75em;
	color:#fff;
   
}
/*if the element is a main menu or a sub menu hide the placeholder element to the right*/
.helpMenu .helpContent
{
    display: none;
}

/********************end of partial transparency example*************************/
 /********************************************************************************/

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, article:not(.helpMenu) .helpContent
{
    height: 616px;
    overflow: hidden;
    background-color: transparent;
    margin-top: 0px;
    padding: 0 0 0 28px;
    position: absolute;
    left: 0px;
    top: 10em;
    column-width: 388px;
}

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 -16px 0 -16px;
    padding:0 0 0 16px;
}