@CHARSET "ISO-8859-1";
@import url('/public/css/templates/salaryexchange/salaryextrascss.php');
@import url('/public/css/bootstrap/bootstrap.min.css');

body { background-color:#EFEFF0!important; }

/**** background colours *****/
.background-blue,
.background-your-benefits,
.background-workplace-extras,
.background-lifestyle-benefits,
.background-reward-and-recognition,
.background-health-and-wellbeing { background-color: #5987c6 !important; }

.navbar-mob-toggle { margin-top: 5px !important; padding: 4px 10px !important; position: fixed; top: 0px; }

.btn-spmenu { height: 25px !important; }

.helptip { cursor: pointer; font-size: 11px; top: -2px; position: relative; }

.sectionline { float: left; width: 100%; margin-bottom: 15px; border-bottom: 3px solid #C0C0C0; }

#searchform-container { width: 215px; float: left; }
#searchform-holder { display:inline-block; width:178px; margin-top:7px; margin-left:10px; border:1px solid #C0C0C0; background-color:#FFFFFF; }

#topstrip, #bottomstrip { width:100%; height:4px; display:inline-block; position: relative; bottom: -4px; }
#topstrip { position: fixed; top: 134px; display:table; }

.page-title { font-size: 28px; font-size: 1.7rem; height: 38px; overflow: hidden; }
#page-title-holder { display: inline; }
@media (max-width: 768px) {
    #page-title-holder {
        display: inline-block; height: 38px; overflow: hidden; width: 70%;
    }
}

#wrapper { width: 100%; background-color: #fff; font-size: 13px; }
#wrapper a { text-decoration: none; }
#navwrapper { position: fixed; right: 0; left: 0; z-index: 1030; height: 138px; width: 100%;}
#sidemenuwrapper { padding-top: 0; width: 220px; display: inline-block; vertical-align: top; text-align: left; position: fixed; top: 138px; left: 0; z-index: 1050; min-height: calc(100% - 138px); }
#pagewrapper { top: 172px; position: fixed; }
#headercontainer { display: inline-block; left: 0px; top: 34px; position: fixed; }
#header { left:0 !important; margin-left:30px !important;}

h1 { font-size:30px !important; }
h2 { font-size:24px !important; }
h3 { font-weight: bold; }
.bikeh2 { width:300px; }

[class^="icon-"], [class*=" icon-"] {
    font-size: 16px;
}

#sidemenu { float: left; width: 216px; color: #535353; position: absolute; overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; height:auto; }

/*
#sidemenu #sidemenu-list > .sidemenu-item > ul {
    display: none;
}

#sidemenu #sidemenu-list > .sidemenu-item.active > ul {
    display: block !important;
}
*/

#sidemenu-list{ margin-top:0px !important; }

#sidemenu a { color:#fff; }

#sidemenu h3 { margin-bottom: 10px; font-size:18px; font-weight:bold; color:#FFF; }
#sidemenu ul { padding:0; margin:0 }
#sidemenu li { list-style-type: none; }
#sidemenu .header { height:58px; }
.sidemenu-group ul { margin-bottom: 14px !important; }
#sidemenu #sidemenu-list .sidemenu-item { width:100%; display:inline-block; list-style-type: none; height: auto; cursor: pointer; }
#sidemenu #sidemenu-list .sidemenu-item > a { position: relative; display: inline-block; padding: 10px 0px 10px 15px; padding-right:0; }
#sidemenu .sidemenu-subitem { width:auto; display:inline-block; list-style-type: none; margin-bottom: 0; }
#sidemenu .sub-menu { padding-bottom:16px; }

.sidemenu-spacer { float:left; width:6px; height:30px; display:inline-block; }
.sidemenu-text { width:100%; margin-left: 3px; padding-top:4px; padding-bottom:3px; display:inline-block; }
.sidemenu-item a i { float: right; padding-right: 0px; padding-top: 5px; }
.schemename { position:relative; top:-6px;}

.sidemenu-icon { font-size: 22px; }
.group-heading { display: inline-block; font-size:15px; max-width: 182px;}
.activescheme { border-bottom:0; }
.activeschemelink { color:#ffffff !important; font-weight:bold !important; }
.activepagelink { color:#ffffff !important; }
.sidemenu-subitem a { font-size:12px !important; }
.search { height: 40px; }
.page { border-bottom: 0 !important; height: 28px; }
.page a { font-size:12px !important; }
.pageend { height: 10px; }
.scheme-menu-item { padding-left:24px; }
li.active { background-color: #FFFFFF; height:auto; }

#sidemenu .glyphicon { float:right; color:#fff; top:17px; margin-right:8px; font-size:11px }
#sidemenu .glyphicon:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
}
/* Icon when the collapsible content is hidden */
#sidemenu .glyphicon.collapsed:after {
    content: "\e080";
}
#sidemenu .expander:hover { cursor:pointer; }


#contentwrapper { width: calc(100% - 216px); margin-left:216px; margin-top: 138px; background-color: #FFFFFF; }

@media (max-width: 767px) {
    #contentwrapper { margin-left: 0px !important; width: 100%; margin-top: 130px !important; }
}

.mainwrapper { height: 100%; min-height: 310px; }
.pagewrapper { height: 100%; }
.min-height { min-height: 590px !important; }
.section-narrow { margin: 10px -5px !important; }
.filter-separator { float: left; width: 100%; height: 4px; margin-bottom: 10px; }

@media (max-width: 768px) {
    #container-textholder { padding-top: 20px !important; }
    .section-colored-white { padding-top: 0 !important; }
    #searchform-holder { width:105px; }
}
@media (min-width: 768px) {
    .mainwrapper,
    .pagewrapper {
        max-width: 580px;
    }
}
@media (min-width: 992px) {
    .mainwrapper,
    .pagewrapper {
        max-width: 580px;
    }
}
@media (min-width: 1200px) {
    .mainwrapper,
    .pagewrapper {
        max-width: 1100px;
    }

    .padding-left-lg {
        padding-left: 5px;
    }
}

.iconcounter { color: #ffffff; display: inline; float: right; font-weight: bold; height: 24px; margin-top: -7px; padding-top: 2px; width: 26px; }

#contact-list { margin:40px 0 0 0 !important; }
.contact-item { list-style-type:none; height:42px; vertical-align:top; }
.contact-icon { width:34px; height:42px; float:left ;margin-left: 6px; }
.contact-text { width:156px; height:38px; padding-left:10px; float:left; font-size: 12px !important; vertical-align:middle; }
.telephone { height:42px !important; display:table; }
.email { height:42px !important; display:table; }
.hours { height:42px !important; display:table; }
#contact-list p { display:table-cell; vertical-align:middle; font-size:12px; color:#FFF; }

.section_div { width: 100%; height: 100%; display: inline-block; background: #FFFFFF url("/public/images/templates/salaryexchange/stripbackground.png") repeat-x 0 0; }
@media (max-width: 768px) {
    .section_div {
        background: transparent !important;
    }
}
.div_color { background-color: #EFEFF0; }
.section_header { margin-top:24px; }
.full_width { width:100% }

#footercontainer { background-image:none; display: inline-block; height: auto; width: 100%; background-color: #EFEFF0; border-top: none; text-align: center; }
#footer1 { height: auto; margin-top: 16px; color: #535353; max-width: 955px; display: inline-block; text-align: left; margin-left: auto; width: 100%; margin-right: auto; left: 0; float: none; }
#footer1left { font-size: 11px; width: auto; }
#footer1right { font-size: 11px; margin-top: 0px !important; margin-right: 0px !important; width: auto; }
#footer2 {  float: none; font-size: 11px; background-color: #EFEFF0; color: #535353; text-align: center; width: 100%; padding-bottom: 20px; padding-top: 40px !important; }

h2:before { display: block; content: " "; margin-top: -236px; height: 236px; width: 2px; visibility: hidden; }

.vertical-center { display: table-cell; vertical-align: middle; max-height: 148px; min-height: 65px; width: 100%; }
.vertical-center p { text-align: center; }
.first_paragraph { margin-top: 0; }

#sidemenu h3 { margin-left:10px; padding-top:16px; }

#container-headerholder { margin-left:0; margin-bottom:12px; display:inline-block; background-color: #fff; height: 100px; width: auto;  }

#container-iconholder { float:left; width:66px; height:76px; margin-right:16px; margin-left: 246px; }
.container-icon-background { font-size: 42px; border-radius: 42px; min-width: 42px; height: 42px; text-align: center; background: #FFFFFF; position: relative; top: 14px; left: 9px; }

.flex-box { display: flex; align-items: center; min-height: 248px; }

/* Had to change this to be compatible with IE9/10/11 - on the splash page it still seems fine in other browsers*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .flex-box {
        display: table;
        width: 100%;
        align-items: center;
        min-height: 248px;
    }
}

.focus-tip { float: left; display: inline-block; width: 104px; height: 60px; margin-top: -10px; padding: 11px 12px 3px 10px; font-size: 13px; background-color: #949599; min-height: 60px; position: absolute; left: 0px; text-align: center; }
.focus-banner { float: right;  display:inline-block; margin-top: -10px; width: 100%; max-width: 520px; height: 100%; max-height: 60px; overflow: hidden; }
.focus-banner img { width: 100%; max-width: 520px; height: 100%; max-height: 70px; margin-top: 0px; }

#container-titleholder { float:left; height:48px; margin-top:14px; }
#container-titleholder h1 { margin-bottom:0 !important; }
#container-titleholder h2 { font-size:20px !important; color: #535353 !important; }

#container-schemeicon { vertical-align:bottom; margin-top:5px; }

#container-buttonholder, #savingscalculator { float:right; width:140px;	height:42px; margin-top:24px; text-align:right;	display: inline-block; margin-right: 20px; }
#savingscalculator { width:160px; }

#container-textholder { overflow:hidden; color:#535353; padding: 0; height: auto; }

#container-textholder h3 { color: #535353 !important; display: inline-block; }

#text_panel { display: inline-block; max-width: 1100px; text-align: left; }

#banner_container { width: 100%; height: auto; }

/* resize images */
.resizing_img { width: 100%; height: auto; }

.left_list { margin-left: -23px; }
.numbered_list { margin-top:4px; margin-bottom:0; }
.numbered_list_number { font-weight:bold; margin-right:12px; }

.table { width:98% !important; display:table; }
.table_cell_auto { width:auto;display:table-cell; }

.vertical_separator { width:26px;display:table-cell;height:auto; }
.horizontal_separator { width:100%; height:34px; }

.link-holder { display: inline-block; width: 100%; max-width: 249px; height: 100%; min-height: 248px; max-height: 260px; overflow: hidden; background-repeat: no-repeat; }
.link-title { display:inline-block; width:100%; min-height:90px; margin-top:158px; color:#FFF; background-color: rgba(108, 108, 112, 0.75); font-size: 22px; padding-left: 20px; padding-right: 20px; text-align: center; padding-top: 6%; }
.link-title.single-line { padding-top: 28px; }
.link-image { height: 120px; overflow:  hidden; }
.link-title-narrow { display:inline-block; width: 100%; min-height: 32px; margin-top: 68px; color: #FFF; background-color: rgba(108, 108, 112, 0.75); font-size: 90%; padding-left: 5px; padding-right: 5px; text-align: center; padding-top: 5px; }
.boxlink { width: 100%; max-width: 260px; height: 100%; max-height: 260px; padding-left: 5px; padding-right: 5px;  min-height: 248px; }
.boxlink .box-container { border:1px solid #c0c0c0; background-color:#FFF; }
.box-scheme .title-holder { height: 100%; bottom: 0px; margin-top: -90px; }
.box-scheme .title-holder .title { display: inline-block; width: 100%; min-height: 90px; color: #FFF; background-color: rgba(108, 108, 112, 0.75); font-size: 22px; font-size: 1.4rem; padding-left: 20px; padding-right: 20px; text-align: center; padding-top: 7%; }
.box-scheme .title-holder .title.single-line { padding-top: 12%; }

/* customised carousal */
#carousel-news .carousel-inner { background-color: #FFF; }

.carousel-custom { width: 100%; min-height: 150px; background-color: unset; }

.carousel-custom .carousel-inner .item .col-xs-3 { padding-right: 0px; padding-left: 0px; }

.carousel-header { width: 100%; height: 100%; min-height: 60px; max-height: 60px; display: inline-block; padding: 10px 0px; margin-top: 17px; text-align: center; vertical-align: middle; color: #FFF; }

.carousel-header a { color: #ffffff; }

.carousel-header a:hover { color: #ffffff; }

.carousel-header span { font-size: 16px; font-weight: normal; }

.carousel-control-holder { display: inline-block; width: 100%; height: 32px; color: #FFF; position: relative; margin-top: 0px; }

.carousel-custom .carousel-inner { max-height: 135px; min-height: 135px; }

.carousel-custom .carousel-control.left,
.carousel-custom .carousel-control.right {
    width: 30px; height: 30px; opacity: 1; margin-top: 136px; text-shadow: none; z-index: 1;
}

.carousel-custom .carousel-control .fa-angle-left,
.carousel-custom .carousel-control .fa-angle-right,
.carousel-custom .carousel-control .icon-next,
.carousel-custom .carousel-control .icon-prev {
    font-size: 28px;
}

.carousel-custom .carousel-indicators {
    bottom: 87px;
}

.carousel-custom .carousel-indicators {
    margin-bottom: 0px;
}

.carousel-custom .carousel-indicators li {
    margin-bottom: 0px !important;
    margin-right: 5px;
}

.carousel-custom .carousel-indicators li.active {
    width: 10px;
    height: 10px;
}

@media (min-width: 0px) and (max-width: 767px) {
    .no-padding-top-xs {
        padding-top: 0px !important;
    }

}
@media (min-width: 968px) and (max-width: 1200px) {
    .no-padding-top-sm {
        padding-top: 0px !important;
    }
}
@media (max-width: 1200px) {
    .no-padding-top-md {
        padding-top: 0px !important;
    }
}

.modal { z-index: 3050; background-color: rgba(000,000,000,0.3); }
.modal-header { border-bottom: none; }
.modal-body { padding: 10px !important; background-color: #FFF; }
.modal-body-container {	background-color: #FFF;	width: 100%; float: left; overflow: hidden; }

.fc-state-highlight { background: #b0cef7; }

/** news slider **/
#news-header { height:48px; padding-top: 13px; text-align:center; }
#news-header a { font-size:16px; color:#FFF; }
#news-event-container { display: inline-block; width: 494px; height:140px; margin:10px; background-color:#FFF;}
#news-event-container a { display:table-cell; vertical-align:middle; color: #535353; }
#news-header-text, #bbcnews-header-text, #stock-header-text, #traffic-header-text, #weather-header-text { margin-left:10px; }
#news-item-title, #bbcnews-item-title { width:100%; margin-bottom: 12px; }
#news-image { width: 100%; max-width: 100px; height: 100%; max-height: 100px; }
#news-item-description, #bbcnews-item-description, #traffic-item-description,#weather-item-description { width:100%; font-size:12px; margin:10px 0 8px 0; }
#news-item-description { overflow: auto; width: auto; max-width: 380px; height: 100px; margin-left:12px; margin-bottom: 0; }
#news-item-image, #bbcnews-item-image  { width: 100px; height: 100px;  text-align:right; }
#news-feed-link, #bbcnews-news-link, #traffic-feed-link, #weather-feed-link { font-size:11px; }
#news-item-link { font-size: 14px; margin-top: 10px; }
/** /.news slider **/

/* document pages */
.filetype-image { width: 70px; height: 100%; float: left; }
.documentitem {	border: 1px solid #FFF; display: inline-block; padding: 5px 0px;	margin-bottom: 5px; width: 100%; height: 100%; min-height: 115px; }
.documentitem:hover {	border: 1px solid #c0c0c0; }
.delete-file { margin-left: 30px; color: #ff0000; font-weight: bold; }
/* /.document pages */

/* submenu */
.navbar-submenu { position: absolute; }
.navbar-submenu li.dropdown { padding: 0px; background: transparent; border: 0px; }
#topstrip .navbar-submenu { display: inline-block; float: left; margin: 0; margin-left: 50px; top: 0px; }
@media (max-width: 768px) {
    #topstrip .navbar-submenu { margin-left: 10px; }
}
#topstrip .dropdown { border:0; border-radius: 0; font-size: 26px; background: none; padding: 0 !important; }
#topstrip .dropdown #dLabel {  padding: 0 !important; color: #FFF; }
#topstrip .dropdown #dLabel:link { background: none; }
#topstrip .dropdown #dLabel:hover { background: none; }
#topstrip .dropdown #dLabel:active { background: none; }
#topstrip .dropdown #dLabel:visited { background: none; }
#topstrip .dropdown #pages-menu { margin-top: 1px; }
#topstrip .dropdown .caret { margin-left: 6px; border-top: 8px dashed; border-right: 6px solid transparent; border-left: 6px solid transparent; }

/* ./submenu */

/* comments */
.timeline-comment-wrapper {  position: relative;  padding-left: 60px;  margin-top: 15px;  margin-bottom: 15px;  border-top: 2px solid #fff;  border-bottom: 2px solid #fff; }
.timeline-comment-avatar { position: relative; float: left; margin-left: -60px; border-radius: 3px; }
.timeline-comment { position: relative; background-color: #fff; border: 1px solid #d1d5da; border-radius: 3px; }

.timeline-comment-wrapper>.timeline-comment::after,
.timeline-comment-wrapper>.timeline-comment::before,
.timeline-new-comment .timeline-comment::after,
.timeline-new-comment .timeline-comment::before {
    position: absolute; top: 11px; right: 100%; left: -16px; display: block; width: 0; height: 0; pointer-events: none; content: " "; border-color: transparent; border-style: solid solid outset;
}
.timeline-comment-wrapper>.timeline-comment::before, .timeline-new-comment .timeline-comment::before {
    border-width: 8px;  border-right-color: #d1d5da;
}
.timeline-comment-wrapper>.timeline-comment::after, .timeline-new-comment .timeline-comment::after {
    margin-top: 1px; margin-left: 2px; border-width: 7px; border-right-color: #f6f8fa;
}
.timeline-comment-header {
    padding-right: 15px; padding-left: 15px; color: #586069; background-color: #f6f8fa; border-bottom: 1px solid #d1d5da; border-top-left-radius: 3px; border-top-right-radius: 3px;
}
.timeline-comment-body {
    padding: 10px 15px;
}
#flash-message {
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
}
.marketing-optout {
    font-weight: normal !important;
    padding-left: 20px;
}
/* /.comments */