/* ======================================================================================== */
/* C U S T O M I S A T I O N   S T Y L E S H E E T                                          */
/* ---------------------------------------------------------------------------------------- */
/*
    Customisations of the look and feel of Asset Bank should go in here.
*/
/* ======================================================================================== */

/* =================================================================================
    General typography
==================================================================================== */

/* change colour of logo and registration box header */

#loginPage div.logo, #registrationPage div.logo {

background: #294932;
}

/* Colour of links throughout */
a,
span.required,
span.requiredForCompleteness,
div.copy code  {
    color: #000;
}

/* Overide color of icons within links */
a > [class^="icon-"] {
    color: #000;
}

.caret-down {
    border-top: 5px solid #000;
}

a:hover,
a:hover [class^="icon-"] {
    color: #666;
}

/*Icon attributes - No min-height set by default so does not take up space for other clients */
/*div.iconAttrWrapper {
    min-height: 1.2em;
}*/



body {
    font-family: "Helvetica 55 Roman", "helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    color: #777;
}

.button {
    font-family: "Helvetica 55 Roman", "helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}


ul.lightbox p.action{
    font-size: 11px;
}

/* =================================================================================
    Login and registration pages
==================================================================================== */
#loginPage div.logo, #registrationPage div.logo {
    /*background: #fff;*/
    padding-top: 60px;
    padding-bottom: 60px;
}


/* =================================================================================
    Borders of panels, images and horizontal rules throughout the application
==================================================================================== */
div.browsePanel,
div.newsPanel,
div.noFeatured,
.underline,
div.hr,
div.head,
ul.results li,
#footer,
div.dialogPanel,
#loginPanel,
#tabContent,
.tabContent,
fieldset,
#homePage a.imgWrapper,
.tabs,
.tabs a,
.tabs label,
div.sortStrip,
ul.lightbox li,
.lbStrip,
.bordered,
.form-actions,
.homepage-search-wrapper > .commonSaved,
.navpanel  {
    border-color: #ccc;
}

.home-classic div.browsePanel,
div.newsPanel,
div.noFeatured,
ul.lightbox>li,
div.adminTabs h2,
div.sortStrip,

table.stripey tr.even th,
table.stripey tr.even td,
ul.lightbox li,
.home-classic .tabs .is-active a,
.lbStrip,
.lbPanel-bottom,
div.commonSaved {
    background: #F3F2ED;
}

/* Hover effect on image thumbnails */
.home-classic a.imgWrapper:hover, a.videoFrameLink:hover img,
div.commonSaved a:hover img,
table.lightboxList td.thumb a.thumb:hover img,
div.imgStrip a:hover {
    border-color: #000;
    background: #FFF;
}

/* =================================================================================
    Top strip, language selector
==================================================================================== */
#topStrip {
    display:none;
}

div#topStrip.langSelect {                           /* multi-language switched on */
    background: #444;
    border-bottom:0;
    color: #eee;
    display: block;
}

/* =================================================================================
    Header styles
==================================================================================== */
#hLinks {
    margin-top: 20px;                           /* tweak to adjust hLinks position */
    margin-bottom: 13px;                            /* tweak to adjust search bar position */
}

#hLinks li {
    border-color: #ccc!important;   /* Override pipes in header */
}

a#helpLozenge {
    background-color: #fff;
    box-shadow: none;
    transition: background 0.2s;
    color: #111;
    background-image: url(../../images/standard/icon/help_icon_dark.png);
}

div.headShadow {
    background: #fff;
    padding: 0;
    margin-bottom: 0;
}

#header {
    background: #fff;                           /* Main banner colour */
    border: none;
    height: 125px;
}

@media screen and (max-width: 1024px){
    #header div.headerContent {
        margin-top: 50px;
    }
}
/* tweak position of logo in header */
#header img.logo {
    padding: 44px 0 0 0;
    margin: 0;
    width: 351px;
    height: auto;
}

@media screen and (max-width: 600px){
    #header img.logo {
        padding: 53px 0 0 0;
        margin: 0;
        width: 200px;
    }
}

/* Styling of search keywords inputs */
#header input.keywords,
#header input.inline  {
    border: 1px solid #bbb;
    padding: 3px;
}
#header .headerContent select {
    border: 1px solid #bbb;
}


/* header responsive buttons */
.button--large {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* responsive header quick search panel */
.header-search-bar input[type="text"] {
    border-color: #000;
}


/* =================================================================================
    Quick search panel on homepage
==================================================================================== */
#qsPanel,
#qsPanel.middle {
    border-color: #000;
    background: #000;
}

/* Text colour in search panel */
#qsPanel a.advanced,
#qsPanel a.advanced:hover,
#qsPanel label,
#qsPanel .hoverHelp,
#qsPanel span.inline {
    color: white;
}

/* Styling of search panel inputs */
#qsPanel input.text,
#qsPanel select,
#qsPanel input[type="text"] {
    border: 1px solid #bfbfbf;
}

/* Text colour in search panel */
#qsPanel a.advanced,
#qsPanel a.advanced:hover,
#qsPanel label,
#qsPanel .hoverHelp,
#qsPanel span.inline {
    color: #444;
}

/*qs input */
#qsPanel .search-box__input{
    border-color: #D2D2D2;
}

#qsPanel select {
    height: 26px;
}

/* Quick Search Panel -- light*/
#qsPanel, #qsPanel.middle {
    border-color: #E2E2E2;
    background: #F9F9F9;
}


/* =================================================================================
    Navigation
==================================================================================== */

/* Current page highlighting in the main navigation */
ul.nav li a.current,
ul.nav li a.current:hover {
    color: #000;
    font-weight: bold;
}

ul.nav li a {
    color: #777;
    font-weight: normal;
}

/* =================================================================================
    Revert to previous navigation styles
==================================================================================== */
/*
ul.nav {
    border-top: 1px solid #ddd;
}

ul.nav a    {
    color: #676767;
    background: #FFF;
    border-bottom: 1px solid #ddd;
    padding-left: 10px;
}

ul.nav ul li a {
    padding-left: 20px;
}

ul.nav li a.current,
ul.nav li a.current:hover,
ul.nav li.subholder a.current:hover {
    background: #e9eaeb url(../../images/standard/arrow/nav_arrow.gif) right center no-repeat !important;
}
*/

/* =================================================================================
    Button styles
==================================================================================== */

.button {
    background: #000;
}

.button:hover,
.button:focus {
    background: #444;
}

.button--large {
    background: #fff;
}

.button--large [class^="icon-"] {
    color: #000;
}

.home-classic .asset-strip__action .button {
    color: #000; /* revert button styling on classic homepage*/
}

.button:hover [class^="icon-"] {
    color: #fff
}

/* =================================================================================
    Misc styles
==================================================================================== */

.popup div.copy h2,
#popup div.copy h2,
#masks h1 {
    background: #000;                    /* Pop-up help headers */
    color: #fff;
}

/* Panels are the same colour*/
.home-classic div.browsePanel,
div.newsPanel,
div.noFeatured,
ul.lightbox>li,
div.adminTabs h2,
.homepage-search-wrapper,
div.sortStrip,
ul.lightbox li,
.home-classic .tabs .is-active a,
.lbStrip,
.lbPanel-bottom,
div.commonSaved {
    background: #F9F9F9;
}

table.stripey tr.even th,
table.stripey tr.even td{
    background: #E8E8E8;
}

/* Browse & search panels*/
ul.lightbox>li,
ul.lightbox li{
    background: #f7f7f7;
    border-color: #E6E6E6;
}

/*Squares it all off*/
.button,
.hero-text,
.catThumb-portrait,
ul.lightbox>li,
ul.lightbox li,
.quick-search-form-toolbar .search-field,
.picker__filter,
a#helpLozenge,
.tabs a,
.box__header,
.asset-strip-images,
.box__footer,
div.newsPanel,
.button-bar>.button:first-child,
.button-bar>.dropdown:first-child>.button,
.button-bar>.button:last-child,
.button-bar>.dropdown:last-child>.button,
.search-box__input, .search-box__input[type="text"], .search-box__input[type="search"],
#qsPanel input.text, #qsPanel select, #qsPanel input.button{
    border-radius: 0;

}


/* Category Panels */
.catThumb-text {
    color: #fff;
    background: #888;
    border-top: 1px solid #888;
    padding-left: 10px;
    font-weight: normal;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px #555;
}

.catThumb-count {
    color: #fff;
}

.catThumb-link:hover .catThumb-text {
    background: #999;
    border-color: #999;
}

#browsePage .catThumb-text {
    padding: 10px 10px 30px 10px;
    box-sizing: border-box;
    max-width: 240px;
}

.catThumb-portrait,
ul.catThumbs-portrait li img {
    box-shadow: none;
}

/* Nice lightbox */
.navpanel--lightbox .noBottomMargin a {
    margin-top: 16px;
    display: block;
}

.navpanel--lightbox .empty.on {
    display: block;
    margin-top: 13px;
}


.tiled-background {
    background: #f5f5f5;
    border: 1px solid #dcdcdc;
}


#browsePage .catThumb-text {
    box-sizing: border-box;
    max-width: 260px;
}

#browsePage .catThumb-placeholder-large,
#browsePage ul.catThumbs-portrait li img {
    width: 260px !important;
}



/* =================================================================================
   Deactivate drop shadows
==================================================================================== */

div.lbShadow {
    background: none;
    padding:0;
}


div.rightShadow, div.leftShadow {
    background: #FFF;
    padding-bottom: 0;
}

/* CSS3 shadows */
/*.lbShadow,
.browsePanel,
.newsPanel,
#qsPanel,
.lightbox > li,
.featuredImage  {
    -webkit-box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.1);
    box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.1);
}*/