/* body/background */
html {
	background-color: rgb(255, 255, 255);
	background-image: url("\/content\/backgrounds\/499_IMG_QCK_Background_1024x768.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
body {
	background-color: rgb(255, 255, 255);
	background-image: url("\/content\/backgrounds\/499_IMG_QCK_Background_1024x768.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
#ios-fixed-background-hack {
	background-color: rgb(255, 255, 255);
	background-image: url("\/content\/backgrounds\/499_IMG_QCK_Background_1024x768.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
body {
    background-color: transparent; /* this is because of bootstrap */
}

@media (min-width: 1300px) {
 body,
 html {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
 }
}

/* text colours */
html, body, legend {
    color: rgb(51, 51, 51);
}
a {
    color: #4B4B4B;
}
a:hover {
    color: #4B4B4B;
}
.text-color-alt {
    color: #51504F;
}
.text-color-alt2 {
    color: #928F8D;
}
.text-color-strong {
    color: rgb(57, 181, 74);
}

/* menu */
.menu li a { background: rgb(255, 255, 255); border-color: rgb(149, 179, 214) !important; }
.menu li:hover a { background: rgb(206, 224, 230); border-color: rgb(187, 187, 187); }
.menu li:selected a { background: rgb(149, 179, 214); border-color: rgb(149, 179, 214); }
.menu li a, .menu li a:hover { color: rgb(51, 51, 51); }
.menu li.disabled:hover a { background: rgb(255, 255, 255) !important; border-color: rgb(149, 179, 214) !important; }

/* message box colours */
.flash-message li { background-color: rgb(57, 181, 74); border-color: rgb(57, 181, 74); color: #FFFFFF; }
.flash-message .info { background-color: rgb(20, 41, 80); border-color: rgb(20, 41, 80); color: rgb(255, 255, 255); }
.flash-message .warning, .flash-message .warn { background-color: rgb(187, 187, 187); border-color: rgb(187, 187, 187); color: rgb(255, 255, 255); }
.flash-message .error { background-color: rgb(153, 0, 0); border-color: rgb(153, 0, 0); color: #FFFFFF; }

/* skin workarounds for IE8 based template */
.box .box-tl { background: transparent url('/res/images/border/skewerz/tl.png') no-repeat !important; }
.box .box-tr { background: transparent url('/res/images/border/skewerz/tr.png') no-repeat !important; }
.box .box-bl { background: transparent url('/res/images/border/skewerz/bl.png') no-repeat !important; }
.box .box-br { background: transparent url('/res/images/border/skewerz/br.png') no-repeat !important; }
.box .box-t  { background: transparent url('/res/images/border/skewerz/t.png')  repeat-x  !important; }
.box .box-b  { background: transparent url('/res/images/border/skewerz/b.png')  repeat-x  !important; }
.box .box-r  { background: transparent url('/res/images/border/skewerz/r.png')  repeat-y  !important; }
.box .box-l  { background: transparent url('/res/images/border/skewerz/l.png')  repeat-y  !important; }

/* styles for BiFrost/etc. */
.generic-box.legacy > .box.box-tl { background-image: url('/res/images/border/skewerz/tl.png'); }
.generic-box.legacy > .box.box-tr { background-image: url('/res/images/border/skewerz/tr.png'); }
.generic-box.legacy > .box.box-bl { background-image: url('/res/images/border/skewerz/bl.png'); }
.generic-box.legacy > .box.box-br { background-image: url('/res/images/border/skewerz/br.png'); }
.generic-box.legacy > .box.box-tc { background-image: url('/res/images/border/skewerz/t.png');  }
.generic-box.legacy > .box.box-bc { background-image: url('/res/images/border/skewerz/b.png');  }
.generic-box.legacy > .box.box-cl { background-image: url('/res/images/border/skewerz/l.png');  }
.generic-box.legacy > .box.box-cr { background-image: url('/res/images/border/skewerz/r.png');  }
.generic-box.legacy > .box.box-header > h1 { color: rgb(20, 41, 80); }

/**
 * [redesign]:
 * Header will appear as per skin on desktop, whilst mobiles will only display the background color.
 */
#header,
#app > #main-header > header {
    background: rgb(20, 41, 80);
    background-size: auto 100%;
}

#header .logo,
#app > #main-header > header > .logo {
    width: 600px;
    height: 70px;
    background: url('/download/branding/391d3988-20df-41e4-8d20-47a268441e15/preview')  no-repeat;
}

button.login {
    background: url('/download/branding/cc8b74a3-6bcb-49f2-89c4-6f35ba4662f9/preview')  no-repeat;
    background-size: 60px 60px;
}

/* specificity used to align with layout */
#body-wrapper > main.page-login,
#app.module-login > #main {
    justify-content: center;
    align-items: flex-end;
}

/* ajax header */
#emulationSelector {
    border-collapse: separate;

    /* border-spacing has been overwritten by the following in skin.css
        table.noPadding, table.noVerticalPadding {
            border-spacing: 0;
        }
       In order to make both platform and ng look the same, I need to comment it out.
    */
    /* border-spacing: 2px; */

    border-color: gray;
    font-size: 12px;
    line-height: normal;
}
#emulationSelector select {
    font-size: 13px;
}
#emulationSelector .topHeaderDate {
    font-size: 10px;
}

/* begin: More CSS tweaks to make platform and ng look the same */
#emulationSelector select.dropdown,
#emulationSelector select.dropdown option { color: rgb(51, 51, 51); background-color: #e7e7e7; }
#emulationSelector a.footerLink:link,
#emulationSelector a.footerLink:visited {
    font-size: 10px;
    color: #FFFFFF;
}
/* end: More CSS tweaks to make platform and ng look the same */

/* text colours */
.text.status.na {}
.text.status.inProgress {}
.text.status.awaiting {}
.text.status.pending {
    color: rgb(187, 187, 187);
}
.text.status.completed ,
.text.status.passed {
    color: rgb(57, 181, 74);
}
.text.status.failed {
    color: rgb(20, 41, 80);
}

/**
 * [Header Menu]
 * The buttons use '>' within the selectors to not conflict with the buttons that appear within the panels.
 *
 * @deprecated to be removed with the generated CSS styles
 * @todo new colors to be done within WM-7837
 * @todo some colors don't have states yet
 */
#header > nav > ul > li > a {
    background-color: rgba(0, 0, 0, 0) !important;    border-color: rgba(215, 71, 44, 0) !important;    color: rgb(57, 181, 74) !important;}
#header > nav > ul > li.profile > a {
    border: none;
}
#header > nav > ul > li.profile > a > img {
    margin: 0;
}

#header > nav > ul > li > a:hover {
            }
#header > nav > ul > li > a:focus {
            }
#header > nav > ul > li > a:disabled ,
#header > nav > ul > li > a.disabled {
            }

/**
 * [Sidebar]
 * This wil be used for both the profile and toolbox slide out panels.
 *
 * @deprecated to be removed with the generated CSS styles
 * @todo new colors to be done within WM-7837
 */
.slideout-panel .submenu-button:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE8 */
    opacity: 0.75;
}

/**
 * [Navigation Tabs]
 * @deprecated to be removed with the generated CSS styles
 */
.nav.nav-tabs {
    border-color: #eee !important;}
.nav.nav-tabs li a {
    border-color: rgba(0, 0, 0, 0) !important;    color: #4B4B4B !important;}
.nav.nav-tabs li:hover a {
    border-color: rgba(102, 102, 102, 0) !important;    color: rgb(75, 75, 75) !important;}
.nav.nav-tabs li.active a {
    border-color: rgba(102, 102, 102, 0) !important;    color: #555 !important;}

/**
 * [Results List]
 * @deprecated to be removed with the generated CSS styles
 */
.results .list header {
    background-color: #f9f9f9 !important;    color: #333 !important;}
.results .list ,
.results .list header ,
.results .list article {
    border-color: rgb(221, 221, 221) !important;}
.results .list article {
    background-color: rgba(0, 0, 0, 0) !important;}
.results .list article ,
.results .list article a:not(.btn),
.results .list article .text.primary {
    color: #333 !important;}
.results .list article .text.secondary ,
.results .list article .info {
    color: #999999 !important;}
.results .list article:hover {
    background-color: #f5f5f5 !important;}
.results .list article:hover ,
.results .list article:hover a:not(.btn),
.results .list article:hover .text.primary {
    color: #333 !important;}
.results .list article:hover .text.secondary ,
.results .list article:hover .info {
    color: #999999 !important;}