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

@media (max-width: 336px)
{
    body
    {
        font-size: 44%;
    }
    .articles article .contentPanel .articleTitle 
    {
        top:.26em;
    }
    
}

/*gradient for smartglass UI*/
body 
{
   /*gradient for smartglass UI*/
   background: -webkit-linear-gradient(top, #000000 50%, #323232); /* Safari and Chrome*/
   background: -moz-linear-gradient(top, #000000 50%, #323232);/*Firefox*/
   background: -ms-linear-gradient(top, #000000 50%, #323232);/*IE*/
}

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

article .helpContent
{
    height: 75%;
    background-color: transparent;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 5em;
    left: 5%;
    width: 90%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

article .contentPanel
{
    width: 96%;
    height: 100%;
    padding: 0px 2% 1em 2%;
    overflow:hidden;
}

article .helpContent
{
   top:7em;
   height: 65%;
}

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

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

article .contentPanel .articleTitle
{
    margin-top:.25em;
    left: 2em; 
    display: block;
    width: 70%;
    max-height: 3.8em;
    overflow: hidden;  
}

article .contentPanel .navLinks
{
    clear: both;
}

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

article .contentPanel hr
{
    display: none;
}

/*note: due to strange css bug in some browsers resetting the focus outline back to it's original must be set after you hide the rules
if you put it before the hr's will be visible again even though hidden*/
a:focus, a:hover, button:focus, button:hover
{
  outline:inherit;
}

article .contentPanel .panelButtons
{
   display: none;
}

.pageCounter
{
   display:block;
   position:fixed;
   bottom:.15em;
   
   right:.5em;
}