/*modify the base font size for mobile devices*/
 body
{
    /*bumping up the font-sizes for higher res displays*/
    font-size:54%;
}

@media (max-width: 336px)
{
    body
    {
        font-size: 12px;
    }

    article.helpMenu li a
    {
        height:2.25em;
        line-height:2.25em;
    }

    .mobile-height-fix {
        height:800px !important;
    }

    .articleTitle {
        font-size:24px !important;
    }

}

/*for odd Android aspect ratios*/
@media (max-width: 385px) and (min-width:337px) and (max-height:520px)
{
     body
    {
        font-size: 44%;
    }

    article.helpMenu li a
    {
        height:2em;
        line-height:2em;
    }
   
}

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

article .contentPanel
{
    width:420px;
    padding: 0 2% 1em 2%;
}

article .helpContent
{
   top:7em;
   left:1em;
}

.contentPanel .backLink
{
    background-position-x: 1em;
    background-position-y: 1em;
    /*need to resize the back button due the change in font size for retina displays*/
    background-size:75%;
    background-position:.15em .5em;
    height:2.5em;
    width:2.5em;
    float: left;
    margin: 0;
}

/*note you must re-initialize any background properties if you swap images*/
.contentPanel .backLink:focus
{
    background-position-x: 1em;
    background-position-y: 1em;
    background-position:.15em .5em;
    background-size:75%;
}

.articles article:not(.helpMenu) .articleTitle 
{
    margin-top: 1.9em;
    margin-left: .35em;
    height: 2.25em;
    
}

article .contentPanel
{
    margin-top:10px;
    display: block;
    width: 70%;
    max-height: 3.8em;
}

.navLinks {
    padding:0;
    left:10px !important;
}

article .contentPanel .navLinks
{
    clear: both;
}

.helpMenu li a
{
    height: 1em;
    line-height: 1em;
}

/*remove controller button states*/
.navLinks a, .navLinks a:focus, .navLinks a:hover:not(:focus) 
{
   
    border:none;
    background-color: transparent;
    outline:0; 
    box-shadow:none; 
}


article .contentPanel .panelButtons
{
   display: none;
}

.pageCounter
{
    display:none;
}

section, article {

	overflow:visible;
    width:360px !important;
}

.articleTopic {
    position:absolute;
    left:10px;
    top:75px;
    font-size:24px !important;
    line-height:20px;
}

.contentPanel {
    position:absolute;
    top:0;
    left:5px;
    padding:0;
    height:inherit;
}

.helpContent {
    background-color: transparent;
    top:10px;
    left:10px;
    position:absolute;
    z-index:99;
    margin: 0;
    padding:0;
    column-width: 360px;
    -webkit-column-count: 1;
    -webkit-column-width: 360px;
    line-height:30px;
    font-size:20px;
    height:auto;
    text-align: justify;
    overflow:visible;
}


article, .navLinks {
    width:380px;
}

ul.list li {
    padding:5px 0;
    text-align: left;
}

#logo {
    width:75px;
    height:28px;
    background:url(logo_small.png) no-repeat 0 0 transparent;
    display:block;
    position:absolute;
    top:20px;
    right:10px;
}

header.articleTitle {
    display:none;
}

.helpMenu li {
    height:34px;
}

.helpMenu li a {
    font-size:16px;
}