/*
 * This file is intended to contain rules that will allow "skinning" of your manual by changeing the colors, fonts and background images.
 * You should not place any rules here that modify positioning or size or other layout properties.
 */


body {
    font-family: Segoe UI Regular, HelveticaNeue, Droid Sans, Arial, Sans-Serif;
    background: url(division_bg.png) no-repeat 50% 50%;
    background-size: cover;
    color: #ebebeb;
}

/*
 * this would for example override the white background and text color on active links
 */
.pageButton:hover,
.contentPanel a:hover {
    
    /*background-color: #ee4036;*/
    color: #FFFFFF;
    
}

/*
 * and this would modify the focus outline
 */
a:focus,
a:hover,
button:focus,
button:hover {
   /*
   outline: thick double #ee4036;
   */
}

article a.articleTitle,
article a.articleTitle:visited {
    color: #6b6b6b;
}

.helpContent {
    background-color: transparent;
}

.contentPanel {
    background-color: rgba(0,0,0,0.5);
}


p,
ul {
    margin-bottom: 1em;
}



@media (orientation:landscape) and (max-height: 900px),
(orientation:landscape) and (min-height: 1081px),
(orientation:landscape) and (max-width: 1430px) and (min-height: 901px) and (max-height: 1080px),
(orientation:landscape) and (min-width: 1930px) and (min-height: 901px) and (max-height: 1080px)
{
/*This would add a background image to the content panel in tablets only. Note: you need an additional selector to give this rule enough weight to override the existing in tablet.css*/ 
    .articles  article:not(.helpMenu) .contentPanel {
       /* background: url(sg_logo_20.png) no-repeat 24px 60px;*/
    }
}