/*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: 44%;
    }

    article.helpMenu ul:not(.breadcrumb) a
    {
        height:2.25em;
        line-height:2.25em;
        margin:0 0 0 -5px;
        padding:0 50px 0 10px;
    }
      
}

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

    article.helpMenu ul:not(.breadcrumb) a
    {
        height:2em;
        line-height:2em;
        margin:0 0 0 -5px;
        padding:0 50px 0 10px;
    }
   
}



/*gradient for smartglass UI*/
body 
{
    /*background:#000 url("images/backgrounds/Background_main_snap.jpg") no-repeat;*/
   
   /*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;
    line-height:1;
}

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

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

.contentPanel .backLink
{
    /*need to resize the back button due the change in font size for retina displays*/
    background-size:100%;
    background-position:0em 0em;
    height:2.0em;
    width:2.0em;
    float: left;
    margin: 0px;
}

/*note you must re-initialize any background properties if you swap images*/
.contentPanel .backLink:focus
{
    background-size:100%;
    background-position:0em 0em;
}

.contentPanel .tocLink
{
    /*need to resize the back button due the change in font size for retina displays*/
    background-size:100%;
    background-position:0em 0em;
    height:2.0em;
    width:2.0em;
    float: left;
    margin-left: 10px;
}

/*note you must re-initialize any background properties if you swap images*/
.contentPanel .tocLink:focus
{
    background-size:100%;
    background-position:0em 0em;
}

article .contentPanel .articleTitle, .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;
    margin-left: 0.75em;
}

.helpMenu ul:not(.breadcrumb) a
{
    height: 2.75em;
    line-height: 2.75em;
}

.breadcrumb {
	margin: 40px 0 5px 40px;
	font: 12px Segoe UI Regular,HelveticaNeue, Droid Sans, Arial, Sans-Serif;
}

/*remove controller button states*/
.navLinks a, .navLinks a.first, .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:block;
   position:fixed;
   bottom:.15em;
   
   right:.5em;
}

/* BACKGROUNDS */
#TOC {
    background-image: url(images/backgrounds/Background_main_mobile.jpg);
}

#article1000 {
    background-image: url(images/backgrounds/Background_10_mobile.jpg);
}

#article1100, #article1200, #article1300, #article1400 {
    background-image: url(images/backgrounds/Background_11_mobile.jpg);
}

#article2000, #article2200, #article2300, #article2400, #article2500 {
    background-image: url(images/backgrounds/Background_20_mobile.jpg);
}

#article2100, #article2110, #article2210, #article2220, #article2310, #article2320, #article2440, #article2410, #article2420, #article2430, #article2550, #article2510, #article2520, #article2530, #article2540 {
    background-image: url(images/backgrounds/Background_21_mobile.jpg);
}

#article3000, #article3100, #article3140, #article3150, #article3200, #article3300, #article3400, #article3500 {
    background-image: url(images/backgrounds/Background_30_mobile.jpg);
}

#article3110, #article3120, #article3130, #article3141, #article3142, #article3143, #article3151, #article3152, #article3210, #article3220, #article3230, #article3240, #article3250, #article3310, #article3320, #article3330, #article3340, #article3410, #article3420, #article3510, #article3520, #article3530, #article3531 {
    background-image: url(images/backgrounds/Background_31_mobile.jpg);
}

#article4000 {
    background-image: url(images/backgrounds/Background_40_mobile.jpg);
}

#article4100, #article4200 {
    background-image: url(images/backgrounds/Background_41_mobile.jpg);
}

#article5000 {
    background-image: url(images/backgrounds/Background_50_mobile.jpg);
}

#article5100, #article5200 {
    background-image: url(images/backgrounds/Background_51_mobile.jpg);
}