﻿/*
ILRC COLOUR SCHEME
black text: #231f20
green titles: #404c22
pink titles: #ca006c
light grey: #bcbdc0
middle grey: #77787b
dark grey: #414142

blue: #009ac8
yellow: #deb408
*/



/*~~~~~~ Initialize elements ~~~~~~*/
body {
    margin: 0;
    margin-top: 10px;
    font-family: 'Noto Sans', sans-serif;
    color: #231f20;
    font-size: 18px;
    background: #f3f3f4 url('../_images/ILRC-Logo.png') no-repeat fixed;
    background-position:10px center;
    line-height:1.25em;
}
header {
    text-align: center;
    color: #009ac8;
}
#wrapper {
    width:calc(100% - 394px);
    margin:auto;
    background-color:#ffffff;
}
#crumbtrail {
	font-size:.75em;
	float:left;
	width:73%;
	text-transform:capitalize;
    padding:5px;
}
#userlogin {
    margin-left: 75%;
    text-align: right;
    font-size: .75em;
    color: #77787b;
    padding: 5px;
}
#mainbody {
    margin-top:20px;
    padding:0 .5em;
}
.col1of2 {
    width:48%;
    float:left;
}
.col2of2 {
    margin-left:50%;
}
.col1of3 {
    width:31%;
    float:left;
}
.col2of3 {
    margin-left:33%;
    width:31%;
}
.col3of3 {
    float:right;
    width:31%;
}
.cleaner {
    margin:0;
    padding:0;
    clear:both;
    height:0px;
    font-size:0px;
    background-color:Transparent;
}
.invisible {
    font-size:0px;
}
.hidden {
    display:none;
}
.height0 {
    height:0px;
}
.lineHeight30 {
    line-height:25px;
}
.lineHeight30 select, .lineHeight30 input {
    margin-top:3px;
}
.InitialTween {
    height:0px;
    display:none;
}
code {
	font-size: 16px;
	color: #FFFFFF;
	padding: 15px;
	width: 705px;
	background-color: #366E9F;
	display: block;
	font-family: "Courier New", Courier, mono;
	border-left-width: 15px;
	border-left-style: groove;
	border-left-color: #0099FF;
}
a {
    color: #414142;
    text-decoration: none;
    border-bottom: 1px dotted #414142;
}
a:hover {
    color: #77787b;
    border-bottom: 1px solid #77787b;
}
.lblMessage {
    color:#e72929;
    font-weight:bold;
    border:1px solid #e72929;
    padding:3px 5px 3px 5px;
    background-color:#fae1cb;
}
.ResultMessage {
    color: #231f20;
    font-weight: bold;
    border: 1px solid #77787b;
    padding: 3px 5px 3px 5px;
    background-color: #bcbdc0;
}
.ArialGrey {
    font-size: .875em;
    color: #77787b;
}
.width100 {
    width:100px;
}
.width300 {
    width:300px;
}
.width500 {
    width:500px;
}
.width30 {
    width:30px;
}
.width100percent {
    width:98%;
}
.padding3 {
    padding:3px;
}
/*~~~~~~ /Initialize elements ~~~~~~*/



/*~~~~~~ form elements ~~~~~~*/
.ddlStyled {
    color: #ca006c;
}
.ddlStyled:hover {
    background-color: #E7CD6E;
    cursor: pointer;
}
/*~~~~~~ /form elements ~~~~~~*/



/*~~~~~~ tables ~~~~~~*/
table {
    padding:0;
    border:0;
}
tr {
    vertical-align:top;
}
td {
    padding:0;
}
.trHead {
    font-weight:bold;
}
.alignleft {
    text-align:left;
    padding-left:5px;
    padding-right:5px;
}
.alignright {
    text-align:right;
    padding-right:5px;
    padding-left:5px;
}
.alignmiddle {
    text-align:center;
}
.rightHead {
    text-align:right;
    padding-right:5px;
    padding-left:5px;
    font-weight:bold;
}
.tblStyle1 {
    width: 100%;
    font-size: .9em;
    color: #414142;
}
/*~~~~~~ /tables ~~~~~~*/



/*~~~~~~ headers ~~~~~~*/
h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    line-height:1.25em;
}
h1 {
    margin-bottom:.5em;
}
h2 {
    color: #ca006c;
    margin-bottom: .5em;
}
h3 {
    color: #404c22;
    margin-bottom: .5em;
}
h4 {
    margin-top: .333em;
    margin-bottom: .333em;
    color: #404c22;
}
h5 {
    color: #ca006c;
}
h6 {
    color: #404c22;
}
/*~~~~~~ /headers ~~~~~~*/




/*~~~~~~ footer ~~~~~~*/
#Footer {
    background-color:#77787b;
    color:#fff;
    font-size:.875em;
    padding:10px;
    text-align:center;
    line-height:1.666em;
    margin-top:2em;
}
#Footer a {
    color:#fff;
    border-bottom:1px dotted #ccc9c6;
}
#Footer a:hover {
    color:#ddd;
    border-bottom:1px solid #ddd;
}
#SubFooter, h6 {
    width:35%;
    margin:auto;
    text-align:left;
    padding:6px;
    border:2px ridge #4a4540;
    background-color:#ffffff;
    color:#77787b;
}
#SubFooter a {
    color:#77787b;
    border-bottom:1px dotted #77787b;
}
#SubFooter a:hover {
    color: #414142;
    border-bottom: 1px solid #414142;
}
h6 {
    text-align:center;
    font-size:16px;
    margin-bottom:10px;
}
/*~~~~~~ /footer ~~~~~~*/




/*~~~~~~ bordered divs ~~~~~~*/
.divBox1 {
    background-color: #E7CD6E;
    padding: 10px;
    margin-bottom:.25em;
}
.divBox1 a:hover {
    background-color: #deb408;
    color: #404c22;
}
.divBox2 {
    background-color: #deb408;
    padding: 10px;
    color: #231f20;
}
.divBox3 {
    background-color: #ca006c;
    padding: .333em;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-top: .5em;
    margin-bottom: .5em;
}
.divBox3 a {
    color:#fff;
    border-color:#fff;
    font-size:.925em;
    font-weight:normal;
    padding:0 .25em;
}
.divBox3 a:hover {
    background-color: #009ac8;
}
/*~~~~~~ /bordered divs ~~~~~~*/



/*~~~~~~ reports ~~~~~~*/
.trReportHead1 td {
	font-size:13px;
	border-top:1px solid #77787b;
	border-bottom:1px solid #77787b;
	background-color:#c0bcb8;
}
.trReportDetail td {
	font-size:13px;
	border-bottom:1px solid #c0bcb8;
}
.ReportPopup {
    height:0px;
    /*opacity:0;*/
    display:none;
    position:absolute;
    z-index:20;
    border:1px solid #77787b;
    background-color:#bab5af;
    padding:2px;
}
.ReportTable {
    width:100%;
	font-size:13px;
}
.tdCatLevel_0 {
    padding:3px 0px;
    background-color:#c0bcb8;
    border-bottom:1px solid #77787b;
}
.tdCatLevel_1 {
    padding:3px 10px;
    background-color:#c0bcb8;
    border-bottom:1px solid #77787b;
}
.tdCatLevel_2 {
    padding:3px 20px;
    background-color:#c0bcb8;
    border-bottom:1px solid #77787b;
}
.tdCatLevel_3 {
    padding:3px 30px;
    background-color:#c0bcb8;
    border-bottom:1px solid #77787b;
}
.tdModule {
    padding-left:50px;
    border-bottom:1px solid #c0bcb8;
}
.trResultQuestion td {
    border-top:1px solid #bab5af;
    padding-top:3px;
}
.trResultAnswer td {
    padding-bottom:30px;
}
#divTestTotals {
    margin-bottom:20px;
    padding:10px;
    border:2px ridge #7a2426;
    background-color:#d3c89d;
    font-weight:bold;
}
.greybottom, .greybottom td {
    border-bottom:1px solid #c0bcb8;
}
/*~~~~~~ /reports ~~~~~~*/



/*~~~~~~ /Text Editor ~~~~~~*/
.DarkGreyEditor {
    border:1px inset #d07000;
}
.DarkGreyEditor .ajax__htmleditor_editor_toptoolbar {
    background-color:#060405;
    color:#859db6;
    padding:4px;
}
.DarkGreyEditor .ajax__htmleditor_editor_editpanel, .HTMLPanel {
    background-color:#191919;
    color:#859db6;
    padding:4px;
}
.DarkGreyEditor .ajax__htmleditor_editor_bottomtoolbar {
    background-color:#060405;
    color:#859db6;
    padding:4px;
}
/*~~~~~~ /Text Editor ~~~~~~*/



#UpdateProgressWrapper, #htmlProgress {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:100;
    background-color:Transparent;
    opacity:0.6;
    filter:alpha(opacity=60)
}
#UpdateProgressWrapper div, #htmlProgress div {
    width:48px;
    margin:auto;
    margin-top:200px;
}




@media screen and (max-width: 1200px) { 
    body { background-size:100px; }
    #wrapper {
        width: calc(100% - 100px);
        margin: 0 0 0 100px;
    }
}

@media screen and (max-width: 960px) { 
    body { background-image: none; }
    #wrapper {
        width: 100%;
        margin: 0;
    }
}

@media screen and (max-width: 850px) { 

}

