/* MAXIUM CONTENT WIDTH */

.show-content{
max-width: 50em;
margin: 0px auto;
}


/* MINIMISED NAV BAR LOGO BACKGROUND */

.ic-app-header__logomark-container {
    background-color: var(--ic-brand-global-nav-bgd);
}

/* COURSE BANNER, NAV AND BREADCRUMB */

.ic-app-nav-toggle-and-crumbs {
    border-bottom: none;
    margin: 0px;
    padding: 25px;
    background: var(--ic-brand-global-nav-bgd);
    background-image: url("https://cranfield.instructure.com/courses/465/files/24909/preview");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 10%;
}

.ic-app-course-nav-toggle {
    margin-right: 12px;
    padding: 6px;
    width: 43px;
    height: 43px;
    background: white;
    border-radius: 5px;
}

.ic-app-nav-toggle-and-crumbs .btn-link:hover, .Button--link:hover {
    color: var(--ic-link-color-darkened-10);
    text-decoration: underline;
    background: white;
}

.block{
    margin: 30px 0px;
}

/* HOME PAGE BUTTONS */

.home-page-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0px 30px;
}

.home-page-buttons > div {
    width: 30%;
    margin: 5px 10px;
    text-align: center;
    border-radius: 5px; 
}
    
.home-page-buttons a {
    display: block;
    color: white;
    text-decoration: none;
    background-color: var(--ic-brand-global-nav-bgd);
    border-radius: 5px;
    padding: 7px
    }
    
.home-page-buttons .nav-btn img {
    height: 40px;
    padding-bottom: 5px
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
    
    .home-page-buttons > div {
    width: 100%;
    margin: 5px 0px;
    text-align: center;
    border-radius: 5px; 
    }
    
}

/* CANVAS STANDARD 2 (CS2) STYLES */

/* DEFAULT BANNER BACKGROUND GRADIENT */

.ic-app-nav-toggle-and-crumbs {
	background: var(--ic-brand-primary);
background-image: linear-gradient(120deg, var(--ic-brand-primary) 0%, var(--ic-brand-primary-lightened-15) 80%, var(--ic-brand-primary-darkened-15) 80.2%, var(--ic-brand-primary) 90%);
}

/* SECTION HEADINGS - APPLY TO H2 HEADINGS FOR SHARD BACKGROUND */

.cs2-heading{
	display: block;
	position: relative;
	margin-top: 30px;
	color:  var(--ic-brand-global-nav-bgd);
	background-image: linear-gradient(120deg, rgba(255,255,255,0.78) 90%, rgba(255,255,255,0) 90.2%);
	border-left: solid 4px var(--ic-brand-global-nav-bgd);
	padding: 7px 40px 7px 10px;
	}

.cs2-heading::before{
			position: absolute;
			left: 0;
			top: 0;
			content: "";
			background-image: linear-gradient(120deg, var(--ic-brand-global-nav-bgd) 90%, rgba(255,255,255,0) 90.1%);
			width: 100%;
			height: 100%;
			z-index: -1;
			}

/* REDUCE SPACE FROM TOP OF FIRST HEADING ON A PAGE */

.cs2-heading:first-of-type{
	margin-top: 0px;
	}

/* QUICK LINKS CONTAINER */

.ql-box{
	padding: 0px 15px 20px 15px;
	border-radius: 3px;
	background-image: linear-gradient(#485960, #3b4950); /* LIGHT STEEL TO STEEL */
	/*background-image: linear-gradient(var(--ic-brand-global-nav-bgd), var(--ic-brand-button--secondary-bgd-darkened-15));*/
	box-shadow: 0px 5px 10px 0px #D0D6D6;
	}

.ql-box h3{
	color: white;
	font-size: 1.5em;
	}

/* QUICK LINKS BUTTON */
		
.ql-box a {
	display: block;
	text-align: left;
	color: white;
	text-decoration: none !important;
	padding: 10px 10px 10px 30px;
    text-indent: -10px;
	margin-top: 10px;
	position: relative;
	font-weight: 600;
	border: none;
	background-image: linear-gradient(120deg, var(--ic-brand-primary) 90%, var(--ic-brand-primary-darkened-15) 90%);
	transition: 0.5s;
	}
	
.ql-box a:hover, .ql-box a:focus {
	background-image: linear-gradient(120deg, var(--ic-brand-primary-lightened-15) 90%, var(--ic-brand-primary) 90%);
	color: white;
	}

.ql-box a:first-of-type{
	margin-top: 0px;
	}

/* BRAND GRADIENTS */

.sunset-grad{
	background-image: linear-gradient(30deg, #dd7a0f, #f6c310);
	color: white;
	}

.grass-grad{
	background-image: linear-gradient(-30deg, #5b7813, #95c11f);
	color: white;
	}

.sea-grad{
	background-image: linear-gradient(30deg, #27376f, #0080a9);
	color: white;
	}

.grape-grad{
	background-image: linear-gradient(-30deg, #442b58, #633e88);
	color: white;
	}

.petal-grad{
	background-image: linear-gradient(30deg, #812143, #d1356f);
	color: white;
	}

.space-grad{
	background-image: linear-gradient(-30deg, #091932, #0c406d);
	color: white;
	}

.berry-grad{
	background-image: linear-gradient(-30deg, #830e21, #e4003a);
	color: white;
	}


/* CS2 TABS */

.cs2-tabs{
	margin: 40px 0px;
	}

.cs2-tabs .ui-widget{
	font-size: 16px;
	font-size: 1rem;
	}

.cs2-tabs .ui-corner-right {
    border-top-right-radius: 0px;
	}

.cs2-tabs .ui-corner-left {
    border-top-left-radius: 0px;
	}

.cs2-tabs .ui-tabs .ui-tabs-nav li a {
    outline-width: 0px;
    color: #ffffff;
    padding: 10px 10px 8px;
    background: var(--ic-brand-button--secondary-bgd);
	border-bottom: 4px solid var(--ic-brand-button--secondary-bgd-darkened-15);
	transition: background 0.5s;
	text-decoration: none !important;
	}

.cs2-tabs .ui-tabs .ui-tabs-nav li a:hover {
    color: #ffffff;
    background: var(--ic-brand-button--secondary-bgd-darkened-15);
	border-bottom: 4px solid var(--ic-brand-button--secondary-bgd-darkened-15);
		}

.cs2-tabs .ui-tabs .ui-tabs-panel {
    padding: 14px;
	border: none;
	background: #e9ecec;
	border-radius: 0 3px 3px 3px;
	position: relative;
    z-index: 0;
	}


.cs2-tabs .ui-tabs .ui-tabs-nav {
    border-width: 0 0 0px 0;
	}

.cs2-tabs .ui-tabs .ui-tabs-nav li {
    margin: 0 1px 0px 0;
    padding: 0;
	}

/* BELOW: SETS ROUNDED CORNERS ON FIRST AND LAST TABS */

.cs2-tabs .tabs ul li:first-of-type a{
	border-radius: 3px 0 0 0;
	}

.cs2-tabs .tabs ul li:last-of-type a{
	border-radius: 0 3px 0 0;
	}

/* BELOW: KEEPS HOVER TEXT WHITE */

.cs2-tabs .ui-tabs .ui-tabs-nav li:hover a{
	color: white;
	}

/* BELOW: SETS THE TEXT COLOUR AND BACKGROUND OF THE ACTIVE TAB AND REMOVES DEFAULT BORDERS */

.cs2-tabs .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: var(--ic-brand-font-color-dark);
	background: #e9ecec;
	border-bottom: 4px solid #e9ecec;
	}

/* BELOW: KEEPS HOVER TEXT ON ACTIVE TAB GRAY */

.cs2-tabs .ui-tabs .ui-tabs-nav li.ui-tabs-active a:hover {
    color: var(--ic-brand-font-color-dark);
	}

/* BELOW: REMOVES ALL REMAINING BORDERS */

.cs2-tabs .ui-tabs .ui-tabs-nav li.ui-tabs-active, .cs2-tabs .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-hover, .cs2-tabs .ui-tabs .ui-tabs-nav li.ui-tabs-active:hover {
    
    border: none;
	}

.cs2-tabs .ui-state-default, .cs2-tabs .ui-widget-header .ui-state-default {
    border: none;
	}

.cs2-tabs .ui-state-hover{
	border: none;
	}


/* CS2 TABLES */

.cs2-table thead tr{
	border-bottom: solid 3px var(--ic-brand-primary);
}

.cs2-table td{
	border-bottom-color: var(--ic-brand-primary);
}

/* END OF CANVAS STANDARD 2 (CS2) STYLES */