/*

TRS 3.small.css

This describes the layout on small (phone) screens.

This builds on 1.main.css; some sections are empty but keep them there as 
placeholders in case they are required in future.
 HISTORY                                                            
                                                                         
 Version  Name            Date         Description                  
 =======  ====            ====         ===========                  
   1.0    David Gough     10-05-2016   CR34294 Allow long text fields to wrap in mobile screen
   1.1    Punit Mehta     07-01-2021   CHG2005725 Added more variations of div IDs for accessibility compliance
   1.2    David Gough     04-09-2024   CHG2008938 Accessibility updates

 */

/*CHG2008444 McCloud updates*/
/* Make sure buttons are not shown when page orientation is changed*/
button.pensionOptionbutton,
button.pensionOptionbuttonActive {
    display: none;
}

    /* General selector overrides ----------------------------------------------- */
    th, td { padding: 0.25em; }

/* Page area overrides ------------------------------------------------------ */

div#pageHeader,
div#pageFooter,
div#containment,
div#breadcrumb,
div#pageInnerBody,
div#pageOuterBody,
div#pageBody {
    margin: 0;
    width: 100%;
}

/* Masthead overrides ------------------------------------------------------- */

div#pageHeader div#branding { 
    font-size: 1em;
    height: 5em;
    background: none;
}

div#pageHeader div#branding h1 {
    font-size: 1em;
    height: 5em;
    background: transparent url("Images/bg-heading_CR35500.png") 100% 100% no-repeat;
    background-size: contain;
}

/* Main navigation overrides ------------------------------------------------ */

div.MenuShimStart,
div.MenuShimEnd { display: none; }

div#mainMenu ul {
    float: none;
    height: auto;
    display: none;
    position: absolute;
    right: 0%;
    background-color: #fff;
    border: 1px solid #c5c4c4;
    border-radius: 0.3em;
    box-shadow: 0 0 5px #999;
    padding: 0;
    width: 90%;
    margin: 0 !important;
    z-index: 2;
}

div#mainMenu ul li {
    background-color: #fff;
    display: list-item;
    padding: 1.35em 0.35em;
}

li.Sep { display: none !important; }

div#mainMenu button#menuReveal {
    display: block;
    float: right;
    color: #fff;
    font-weight: normal;
    background: #06c url("Images/menu-reveal.png") 90% 50% no-repeat;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    margin: 0.125em 1em 0 0;
    padding: 0.25em 2em 0.25em 1em;
    cursor: pointer;
}

div#mainMenu div.FRight { 
    float: none;
    padding: 0;
}

div#mainMenu > ul > li > a { 
    padding: 0 0 0 1em;
    color: #000;
    display: block;
}

div#mainMenu ul li.Selected { background: #fff none; }

div#mainMenu > ul > li.Selected > a { 
    color: #06c; 
    background: #fff url("Images/bullet-selected-action.png") 0 50% no-repeat;
}

div#mainMenu div#accountManagement {
    background: transparent url("Images/icon-user.png") 0 50% no-repeat;
    padding: 0 0 0 1.5em;
    margin: 0 0 0 1em;
}

div#mainMenu div#accountManagement span {
    display: inline-block;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: auto;
}

div#mainMenu div#accountManagement span.WelcomeText { display: none; }

div#mainMenu div#accountManagement span:hover strong { display: none; }
div#mainMenu div#accountManagement span:hover+form { display: none; }

div#mainMenu div#accountManagement span:hover { 
    overflow: visible; 
    z-index: 9999;
    font-size: 95%;
}

/* Breadcrumb overrides ----------------------------------------------------- */

div#breadcrumb { display: none; }

/* Login page-specific overrides -------------------------------------------- */

div.LoginBox { width: 90%; }

div.LoginBox h2 { font-size: 1.25em; }

/* Homepage-specific overrides ---------------------------------------------- */

div#splash {
    border: 0;
    padding: 0;
    margin: 0;
}

div#splash h1 {
    font-size: 1.5em;
    padding: 0.5em 0 0 0.5em; 
}

div#infoPanels div { 
    padding-top: 1em;
    float: none;
    border-bottom: 1px solid #06c;
    width: 100%;
    margin: 0;
}

div#infoPanels {
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

div#infoPanels > div#infoPanelRight { border: 0; }

div#infoPanels p img {
    display: block;
    margin: 0 auto;
    width: 280px;
    height: auto;
}

div#infoPanels > div > div.ImagePlaceholder { 
    clear: both;
    float: none;
    width: 100%;
    height: 40px;
    padding: 0;
    margin: 0.5em 0;
    border-width: 2px !important;
}

div#infoPanels div h1 { text-align: center; }

/* Help page-specific overrides --------------------------------------------- */

div.FAQBox {
    width: 100%;
    margin: 0;
    float: none;
    clear: both;
}

div.FaqBox.Left { float: none; }

div.FAQBox h2 { text-align: center; }

div.FAQBox img {
    display: block;
    margin: 0 auto;
}

/* Sidebar overrides -------------------------------------------------------- */

div#outerSideBar,
div#sideBar {
    clear: both;
    float: none;
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

    div#outerSideBar div,
    div#sideBar div {
        padding: 0.5em;
    }

        div#outerSideBar div p,
        div#sideBar div p {
            margin: 0;
        }

div#sideSearch input[type=text] { width: 96%; }

/* Main view overrides ------------------------------------------------------ */

div#view {
    float: none;
    width: 90% !important;
    margin: 1em auto;
}

/* Tab controls, containers and content overrides --------------------------- */

div#view > h1,
ul.OuterTabs,
ul.InnerTabs { display: none !important; }

/*CR34093 Retain inner inner tabs but make them smaller */
ul.InnerInnerTabs{
    font-size: small;
    line-height: 20%;
    border-width: .1px;
    margin-bottom: .1px;
}

div#mobileHeading h1 {
    display: block;
    background-color: #f2f2f2; /* CHG2008444 #dbe6f5;*/
    padding: 1em;
    font-size: 1.125em;
}

div#combinedMenu_Trigger {
    text-transform: uppercase;
    float: right;
    display: block;
    color: #0e0d0d; /* CHG2008444 #fff */
    font-weight: 500; /* CHG2008444 normal */
    background: #f49600 url("Images/menu-reveal.png") 90% 50% no-repeat;
    text-transform: uppercase;
    border: 0;
    border-radius: 0;
    margin: 1em 1em 0 0;
    padding: 0.25em 2em 0.25em 1em;
    cursor: pointer;
}

div#combinedMenu_Display { 
    z-index: 5000;
    display: block;
    background-color: #f49600;
    color: #fff;
    padding: 0.5em;
}

div#combinedMenu_Display h1 {
    font-size: 1em;
    padding: 0.5em 0 0 0.5em;
}

div ul#combinedMenu {
    width: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    cursor: pointer;
    display: none;
}

div ul#combinedMenu li {
    list-style-type: none;
    background-color: #d8e9fb;
    padding: 0.5em 2em
}

    div ul#combinedMenu li span.MajorMode,
    div#combinedMenu_Display h1 span.MajorMode {
        font-size: 0.85em;
        font-weight: bold;
        color: #0e0d0d; /* CHG2008444 #000 */
        text-transform: uppercase;
    }

div ul#combinedMenu li span.MinorMode {
    font-size: 1.25em;
}

div#combinedMenu_Display h1 span.MinorMode {
    color: #0e0d0d; /* CHG2008444 #ffc */
    text-transform: none;
    font-weight: normal; /* CHG2008444 bold*/
    font-size: 1.75em;
}

div ul#combinedMenu li:hover {
    background-color: #ecf5fe;
}

img.EmployerLogo {
    width: 50%;
    height: auto;
}

div.TabContent,
div.InnerTabContent,
div.InnerInnerTabContent { 
    border: none; 
    padding: 0;
}

div#pieChart { display: none; }

span.EmployersContributionValue {
    color: black /* CHG2008938 #da8300*/;
}

p.EmployersContribution { 
    width: 96%; 
    font-size: 95%;
    background: none;
    padding: 0 !important;
}

/* Table overrides ---------------------------------------------------------- */
/* -------------------------------------------- Details and financial summary */

table.TRSDetails { font-size: 0.875em; }

table.TRSDetails tbody th.First { 
    display: none !important; 
    font-size: 0.1em;
}

table.FinancialSummary { width: 100%; }

/* ------------------------------------------------------ Employers statement */
/* -------------------------------------------------------- Pension statement */

table.PensionStatementTable,
table.PensionStatementBox { width: 100%; }

/*table.PensionStatementTable tbody td { font-size:87.5%; }*/

/* ----------------------------------------------------------- Search Results */
/* ----------------------------------------------------------------- Citizens */
/* Form overrides ----------------------------------------------------------- */
/*CR34294 Allow long text fields to wrap in mobile screen*/
.WrapNormal {white-space:normal;}
/* Modals and popout overrides ---------------------------------------------- */
/* System messeges and errors ----------------------------------------------- */
/* Help bubble overrides ---------------------------------------------------- */
/* Footer overrides --------------------------------------------------------- */

div#pageFooter { 
    padding: 0;
    margin: 0 0 2em 0;
}