// OVERRIDES FOR CAMOSUN SITE
// --------------------------

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,300,400,600,700|Roboto:100,300,400,700,900"); // Something a little different
@import url("variables-camosun.less");
@import url("mixins.less");

// Mixins
// ------

.mainNavHover {
	color: @white;
	background-color: @darkBackground;
	border-style: solid;
	border-color: @darkBackground;
	border-width: 0 0 1px 0;
}

// Layout
// ------

body {
	font-family: @baseFontFamily;
	background-color: @bodyBackground;
	font-size: @baseFontSize;
	&.csScrollFix
	{
		#mainNav
		{
			position: fixed;
			z-index: 100;
			.navbar-inner
			{
				#translucent > .background(@white, 80%) !important;
			}
			top: -200px;
		}
		#content {
			padding-top: 41px;
		}
	}
}

.row.equal-height {
	overflow: hidden;
}
.row.equal-height > div > div.pop-box {
	padding-bottom: 99999px;
	margin-bottom: -99999px;
	&.pop-box-img {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
}
p.tweet {
	margin-bottom: 0 !important;
}
.pop-box {
	background: @lightestGrey;
	padding: 10px;
	margin-bottom: 20px;
	img {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	&.pop-box-blue {
		* {
			color: @white;
		}
		background: @camosunLightBlue;
		a
		{
			text-decoration: underline;
		}
	}
	&.pop-box-green {
		* {
			color: @white;
		}
		background: @freshGreen;
		a
		{
			text-decoration: underline;
		}
	}
	&.pop-box-white
	{
		background: @white;
		border: 1px solid @lightestGrey;
		a
		{
			text-decoration: underline;
		}
	}
	&.pop-box-orange {
		background: @camosunOrange;
		* {
			color: @white;
		}
		a
		{
			text-decoration: underline;
		}
	}
	&.pop-box-dark-grey
	{
		background: @camosunGrey;
		* {
			color: @white;
		}
		a
		{
			text-decoration: underline;
		}
	}
	&.pop-box-em {
		text-align: center;
		p.notice-me {
			font-size: 24px;
			font-weight: bold;
			line-height: 24px;
		}
	}
	&.pop-box-img {
		img {
			padding: 0 !important;
			margin: 0 !important;
		}
	}
	&.pop-box-ce {
		font-size: 11px;
	}
}

.nav-tabs-panel
{
	ul.nav-tabs
	{
		margin-bottom: 0;
		.active {
			a {
				background-color: @lightestGrey;
			}
		}
	}
	.tab-content {
		padding: @lineHeightSize;
		background-color: @lightestGrey;
	}
}

#logoPrint {
	display: none !important;
}
#footerPrint {
	display: none !important;
}
#pageNav {
	img {
		padding: 0 !important;
	}
}
.last_updated {
	font-size: @smallFontSize;
	color: #666;
	background: @lightestGrey;
	display: inline-block;
	padding: 2px 4px;
	float: left;
	margin-top: 20px;
}
div.testimonial {
	background: url('/template/images/misc/quote-marks.png') no-repeat 20px 20px;
	padding: 20px 20px 20px 112px;
	margin-bottom: 20px;
}
div, p, img {
	&.pad-right {
		margin-right: 20px;
	}
	&.pad-left {
		margin-left: 20px;
	}
	&.pad-bottom {
		margin-bottom: 20px;
	}
	&.pad-top {
		margin-top: 20px;
	}
	&.pad-none {
		padding: 0 !important;
		margin: 0 !important;
	}
	&.pull-left {
		.pad-right;
	}
	&.pull-right {
		.pad-left;
	}
}
div.mini-wrapper-fix {
	min-width: 940px !important;
}
#header {
	background-color: #91bd36;
	background-repeat: repeat;
	border-width: 5px 0 0 0;
	border-color: @quickNavColor;
	border-style: solid;

	#quickNav {
		.nav {
			text-transform: uppercase;
			background-color: @quickNavColor;
			font-size: @smallFontSize;
			margin-bottom: 8px;
			a {
				color: @white;
				padding: 5px 10px;
				margin: 0;
			}
			a:hover {
				background: @quickNavHoverColor;
			}
			.caret {
				border-top-color: @camosunGrey;
				border-bottom-color: @camosunGrey;
			}
		}
		input.search-query {
			.box-shadow(~"0 0 0");
			border-width: 0;
		}
	}	
	#logo {
		padding: 14px 0;
		max-height: 45px;
	}
}

#mainNav {
	* {
		.box-sizing(border-box);
	}
	margin-bottom: 0;
	width: 100%;
	.navbar-inner {
		background-image: none;
		.reset-filter();
		background-color: @white;
		min-height: @navBarHeight;
		font-size: @baseFontSize;
		.container {
			width: 960px;
		}
	}
	.divider-vertical {
		background: lighten(@navBarDark, 5%);
		border-right-color: darken(@navBarDark, 5%);
	}
	.btn-navbar {
		.buttonBackground(@navBarLight, @navBarDark);
	}
	.navbar-search {
		display: none;
	}
	#roleNav {
		font-weight: bold;
	}
	#camNavBar {
		width: 100%;
	}
	.camNavTab {
		>a {
			text-transform: uppercase; 
			text-shadow: none;
			color: @camosunGrey;

			&:hover {
				background: @camosunGrey;
				color: #fff;
			}
		}
		.camDropDown {
			font-size: @baseFontSize;
			position: absolute;
			top: @navBarHeight;
			left: 0;
			margin: 0;
			padding: 0;
			background: @white;
			border-width: 4px 0 0 0;
			border-color: @camosunGrey;
			border-style: solid;
			z-index: 100;
			div {
				&.column, &.column-header {
					float: left;
					padding: 10px;
				}
				&.column-header {
					width: 100%;
					padding: 5px 10px;
					border-bottom: 1px solid @lightGrey;
				}
			}
			ul 
			{
			  padding-left: 15px;
			  padding-right: 15px;
			  margin-bottom: 0;
				li {
					text-transform: none;
					display: block;
				}
				li + .section {
				  margin-top: 9px;
				}
				li.section {
				  display: block;
				  padding: 3px 15px;
				  font-weight: bold;
				  text-transform: uppercase;
				  font-size: @smallFontSize;
				}				
				li > a,
				li.section {
					margin-left:  -15px;
					margin-right: -15px;
					padding: 3px 15px;
				}
				li > a {
					display: block;
				}
				li.divider {
					margin: 9px 1px;
					border-bottom: 1px solid @lightestGrey;
					&.invisible {
						border-bottom-width: 0;
					}
				}
			}
			display: none;
			i [class^="icon-"]
			{
				margin-top: 2px !important;
			}
			div.buttonBar {
				clear: both;
				background: @lightestGrey;
				overflow: auto;
				margin: 0;
				padding: 10px;
				a {
					padding: 3px 15px;
					&:hover {
						background: @camosunLightBlue;
						color: @white;
						text-decoration: none;
					}
				}
			}
		}
		&.show {

			>a {
				color: @white;
				background-color: @camosunGrey;
			}
			.camDropDown {
				.box-shadow(~"1px 1px 10px rgba(0,0,0,.2)");
				li > a {
					background-color: transparent;
					color: @linkColor;
					&:visited {
						color: @linkColorVisited;
					}
					&:hover {
						color: @white;
						background-color: @camosunLightBlue;
						text-decoration: none
					}
				}
			}
		}
	}
	border-width: 0 0 2px 0;
	border-style: solid;
	border-color: @freshGreen;
	color: @camosunGrey;
//	.box-shadow(~"0 4px 10px 0px rgba(0,0,0,.2), inset 0 -1px 0 rgba(0,0,0,.04)");
}

#quickSearch {
	clear: right;
	&.well {
		padding: 5px;
		#translucent > .background(@black, 30%);
	}
}

#megaFooter {
	background: @megaFooterBackground; // url('/template/images/backgrounds/megaFooter.png');
	font-size: @smallFontSize;
	color: @lightestGrey;
	padding: 20px 0 40px 0;
	
	.well {
		#translucent > .background(@black, 10%);
		&.mirage {
			background: transparent;
			border-width: 0;
		}
		.box-shadow(~"0 0 0");
	}
	
	.nav-list{
		.nav-header {
			color: @megaFooterColor;
			text-shadow: none;
		}
	}
	h1, h2, h3, h4, h5, h6 {
		color: @lightestGrey;
	}
	a {
		text-shadow: none;
		color: @white;
		&:hover {
			background-color: lighten(@camosunGrey, 5%);
		}
	}
}

#content {
	background: @white;
	&.camosun_wide {
		.page-header {
			margin-top: 0 !important;
		}
	}
	padding-bottom: 80px;
	&.homePage {
		padding-top: 0;
		#mainStory {
			.image {
				height: 394px !important;
				position: relative;
			}
			.caption {
				position: absolute;
				width: 300px;
				margin: 20px;
				padding: 20px;
				bottom: 0;
				left: 0;
			}
			.caption-dark {
				#translucent > .background(@black, 60%);
				h1, p, a:link, a:visited, a:hover {
					color: @white;
					text-decoration: none;
				}
				.cite {
					small
					{
						color: @white;
					}
				}
				.learn-more {
					display: inline-block;
					padding: 4px 10px;
					background-color: @freshGreen;
					color: @white;
					&:hover {
						background: @quickNavColor;
					}
				}
			}
			.caption-light {
				#translucent > .background(@white, 85%);
				h1, p, a:link, a:visited, a:hover {
					color: @black;
					text-decoration: none;
				}
				.cite {
					small
					{
						color: @black;
					}
				}
			}

			.tagline
			{
				&.tagline-left {
					position: absolute;
					bottom: 0;
					left: 0;
				}
				&.tagline-right {
					position: absolute;
					bottom: 0;
					right: 0;
				}
				clear: right;
				margin: 20px;
			}
		}
		.press-release {
			p:first-child {
				margin-top: 5px;
			}
		}
	}
	.infoSessionLink {
		.clearfix();
		img {
			float: left;
			vertical-align: middle;
		}
		p {
			line-height: 64px;
		}
	}
	#pageNav {
		li {
			font-size: @smallFontSize;
			&.subNav a {
				padding-left: 25px;
			}
		}
		.well {
			padding: 10px 0;
			.box-shadow(~"0 0 0");
			background: @lightestGrey;
			border-color: darken(@lightestGrey, 5%);
		}
		&.legacy {
			h2 {
				font-size: @baseFontSize;
				text-transform: uppercase;
				border-bottom: 1px solid @lightestGrey;
				line-height: @baseFontSize + 10;
			}
			ul {
				margin-top: 5px;
			}
		}
	}
	.pageHeader {
	}
	.page-header
	{
		position: relative;
		img {
			margin-top: 0;
			margin-left: auto;
			margin-right: auto;
			line-height: 0;
			margin-bottom: @baseFontSize;
			padding: 0;
			min-height: 145px;
			max-height: 395px;
			width: 940px;
		}
		div {
			&.caption {
				margin-right: 20px;
				margin-left: 20px;
				padding: 20px;
				position: absolute;
				top: 40px;
				&.caption-dark {
					#translucent > .background(@black, 60%);
					h1, p, a:link, a:visited, a:hover {
						color: @white;
						text-decoration: none;
					}
					.cite {
						small
						{
							color: @white;
						}
					}
				}
				&.caption-light {
					#translucent > .background(@white, 85%);
					h1, p, a:link, a:visited, a:hover {
						color: @black;
						text-decoration: none;
					}
					.cite {
						small
						{
							color: @black;
						}
					}
				}
				.learn-more {
					display: inline-block;
					padding: 4px 10px;
					background-color: @freshGreen;
					color: @white;
					&:hover {
						background: @quickNavColor;
					}
				}
				&.caption-top {
					top: 20px;
					bottom: auto;
				}
				&.caption-bottom {
					top: auto;
					bottom: 140px;
				}
				&.caption-right {
					right: 0;
					left: auto;
				}
				&.caption-left {
					right: auto;
					left: 0;
				}
			}
		}
	}
}
#content ul.thumbnails img {
	padding: 0;
	margin: 0;
}
.thumbnail {
	background: @white;
	.box-shadow(~"0 0 0");
}
#legacyAds {
	li {
		font-size: @lAdsFontSize;
	}
	margin-left: 10px;
	margin-bottom: 10px;
	.makeColumn(3);
	float: right;
	.well {
		padding: 10px 0;
		border: 1px solid @lightestGrey;
		background: @white;
		.box-shadow(~"0 0 0 0");
	}
}
#sectionNav {
	background-color: @lightestGrey;	
	.nav-pills {
		li {
			a {
				&:hover {
					background-color: @freshGreen;
					color: @white;
				}
			}
			&.active {
				a {
					background-color: @freshGreen;
					color: @white;
				}
			}
		}
	}
	
	.navbar-inner {
		.box-shadow(~"0 0 0 0");
		#gradient > .vertical(@lightestGrey, @lightestGrey);
		.nav {
			li {
				a {
					color: @camosunGrey;
					text-shadow: none;
				}
				a:hover {
					background-color: @freshGreen;
				//	#gradient > .vertical(@freshGreen, darken(@freshGreen, 10%));
					color: @white;
				}
			}
		}
	}	
}
.roleQuickNav {
	li {
		display: block;
		background: @roleQuickNavColor;
		margin-bottom: 1px;
		overflow: auto;
	}
	a {
		display: block;
		height: 20px;
		line-height: 20px;
		padding: 5px;
		text-transform: uppercase;
		color: @white;
		&:hover {
			color: @white;
			text-decoration: none;
			background: @roleQuickNavHoverColor;
		}
	}
	&.special
	{
		li {
			background: @camosunLightBlue;
		}
		a {
			&:hover
			{
				background: @camosunBlue;
			}
			
		}
	}
}

.lookHere, .highlight {
	background-color: @lightestGrey;
	padding: 5px 10px;
}
.pageChoices {
	div {
	}
}


#footer {
	p {
		font-size: @smallFontSize;
	}
	color: @white;
	padding: 15px 0 0 0;
}

// Typography
// ----------

p {
	font-family: @baseFontFamily;
	font-size: @baseFontSize;
}

h1, h2, h3, h4, h5, h6 {
	font-family: @headingsFontFamily;
	font-weight: @headingsFontWeight;
}

h6 {
	font-weight: 700;
}

// Floats
// ------
.right {
	float: right;
}
.left {
	float: left;
}

// Icons
// -----

.icon-facebook {
	background-image: @connectedIconsPath;
	background-position: 0 -14px;	
	&.icon-white
	{
		background-position: 0 0;
	}
}
.icon-youtube {
	background-image: @connectedIconsPath;
	background-position: -14px -14px;
	&.icon-white
	{
		background-position: -14px 0;
	}
}
.icon-rss {
	background-image: @connectedIconsPath;
	background-position: -28px -14px;
	&.icon-white
	{
		background-position: -28px 0;
	}
}
.icon-flickr {
	background-image: @connectedIconsPath;
	background-position: -42px -14px;
	&.icon-white
	{
		background-position: -42px 0;
	}
}
.icon-twitter-box {
	background-image: @connectedIconsPath;
	background-position: -56px -14px;
	&.icon-white
	{
		background-position: -56px 0;
	}
}
.icon-email {
	background-image: @connectedIconsPath;
	background-position: -70px -14px;
	&.icon-white
	{
		background-position: -70px 0;
	}
}
.icon-phone {
	background-image: @connectedIconsPath;
	background-position: -84px -14px;
	&.icon-white
	{
		background-position: -84px 0;
	}
}
.icon-twitter {
	background-image: @connectedIconsPath;
	background-position: -98px -14px;
	&.icon-white
	{
		background-position: -98px 0;
	}
}
.icon-good-lock {
	background-image: @connectedIconsPath;
	background-position: -112px -14px;
	&.icon-white {
		background-position: -112px 0;
	}
}
.icon-external-link {
	background-image: @connectedIconsPath;
	background-position: -126px -14px;
	&.icon-white {
		background-position: -126px 0;
	}
}

.icon-blank {
	background-image: none;
	background-position: 0 0;
}
.icon32 {
	margin-top: 0 !important;
	padding: 0 !important;
}

img.icon16 {
	width: 16px;
	height: 16px;
}
img.icon32 {
	width: 32px;
	height: 32px;
}
img.icon48 {
	width: 48px;
	height: 48px;
}
img.icon64 {
	width: 64px;
	height: 64px;
}

.icon-tiny-calendar {
	background-image: @connectedIconsPath;
	background-position: -142px -14px;
	&.icon-semitransparent {
		background-position: -142px -42px;
	}
	&.icon-white {
		background-position: -142px 0;
		&.icon-semitransparent {
			background-position: -142px -28px;
		}
	}
	width: 10px !important;
}
.icon-tiny-tag {
	background-image: @connectedIconsPath;
	background-position: -156px -14px;
	&.icon-semitransparent {
		background-position: -156px -42px;
	}
	&.icon-white {
		background-position: -156px 0;
		&.icon-semitransparent {
			background-position: -156px -28px;
		}
	}
	width: 10px !important;
}

.icon-unchecked {
	background-image: @connectedIconsPath;
	background-position: -182px -14px;
}


.homeAds img {
	margin: auto;
	display: block;
}
.hpCalendar, .sideCalendar {
	caption {
		font-family: @headingsFontFamily;
		font-size: 16px;
		text-align: left;
	}
	p, li, th, td {
		font-size: @smallFontSize;
	}
	td, th {
		text-align: center;
	}
	tr:hover td {
		background: transparent !important;
	}
	tr:hover td.event, td.event {
		font-weight: bold;
		background: @eventDay !important;
	}
	tr:hover td.notmonth, td.notmonth {
		background: @lightestGrey !important;
		color: @lightGrey;
	}
	tr:hover td.today, td.today {
		background: @camosunBlue !important;
		color: @white;
	}
	a.btn {
		font-weight: normal;
	}
}

table.event-calendar {
	tr:hover td {
		background: transparent !important;
	}
	tr:hover td.event, td.event {
		background: @eventDay !important;
	}
	tr:hover td.outside, td.outside {
		background: @lightestGrey !important;
		color: @lightGrey;
	}
	tr:hover td.today, td.today {
		border-width: 1px 0 0 0;
		border-color: @camosunBlue;
		border-style: solid;
		background: @camosunBlue !important;
		color: @white;
	}
	td.today a {
		color: #fff !important;
	}
	&.calendar-mini {
		span.date {
			font-size: @smallFontSize;
		}
		span.event-count {
			display: inline-block;
			float: right;
			background: @camosunBlue;
			height: 3px;
			width: 3px;
		}
		th {
			width: 14%;
		}
		td {
			padding: 2px 0 0 2px;
			height: 30px;
		}
		a {
			color: #000 !important;
			display: block;
			width: 100%;
			height: 30px;
			text-decoration: none !important;
		}
		margin-bottom: @baseFontSize / 2;
	}
	&.full-size {
		th {
			width: 14%;
		}
		td {
			height: 80px;
		}
		ul.summary li {
			font-size: @smallFontSize;
		}
	}
}
table.map-key {
	font-size: @smallFontSize;
}
div.upcoming-events {
	li {
		font-size: @smallFontSize;
		&.summary {
		}
	}
	ul
	{
		margin-bottom: @smallFontSize / 2;
	}
}

div.homePage div#social-facebook {
	p {
		font-size: 11px;
		small {
			font-size: 10px;
		}
	}
	.facebook-attachment h5 {
		font-size: 11px;
	}
}
div#social-facebook {
	.fb_gallery img {
		width: 29%;
		float: left;
	}
	.facebook-attachment {
		.pop-box;
		img {
			float: right;
			max-width: 40%;
		}
	}
}

.no-wrap {
	white-space: nowrap;
}
.eventDescription, .eventDate
{
	font-weight: bold;
}

.alert-highlight {
	background: @lightestGrey;
	color: #333;
	border-color: darken(@lightestGrey, 5%);
}
.captionBox {
	width: 250px; // Rolled back to 250px as Julia Hunerli is relying on it being this size. Why changed? - COLIN
	border: 1px solid #e8e8e8;
	padding: 5px;
	margin: 5px;
	text-align: center;
}
.facultyContact {
	.clearfix();
	img {
		float: left;
	}
}
.goog-te-gadget { 
	select {
		float: none !important;
	}
}
caption {
	text-align: left;
	font-size: 18px;
	line-height: 27px;
	font-weight: normal;
	font-family: @headingsFontFamily;
}
tfoot {
	font-weight: bold;
}
.eps-banner-alert {
	padding-top: @lineHeightSize / 2;
}

hr {
	&.no-show {
		visibility: hidden;
	}
	&.modest {
		width: 75%;
		margin-left: auto;
		margin-right: auto;
	}
}

// Bootstrap Carousel Modifications
.carousel .carousel-control {
	visibility: hidden;
	line-height: 25px !important;
}
.carousel:hover .carousel-control {
	visibility: visible;
}
.carousel {
	float: none;
	margin-left: 0px;
}
.caption-text p, .caption-text{
	text-align: center;
	font-size: 12px;
	line-height: 14px;
	margin: -5px 5px;
}
ul.thumbnails li div.carousel.thumbnail {
	margin-bottom:0;
}

.dl-horizontal {
	&.dl-small
	{
		dt {
			width: 70px;
		}
		dd {
			margin-left: 80px;
		}
	}
	&.dl-large {
		dt {
			width: 180px;
		}
		dd {
			margin-left: 190px;
		}
	}
	&.dl-xlarge {
		dt {
			width: 240px;
		}
		dd {
			margin-left: 250px;
		}
	}
	dt
	{
		line-height: @lineHeightSize !important; // Why this is 17px by default in Bootstrap I have no idea.
	}
}

.dl-important-dates {
	dd {
		&.detail-date, &.detail-tags {
			font-size: @smallFontSize !important;
		}
		&.detail-notes {
			font-size: @smallFontSize !important;
			*
			{
				font-size: @smallFontSize !important;
			}
			p
			{
				margin-bottom: 0;
			}
		}
	}
	dt {
		&.detail-notes {
			font-size: @smallFontSize !important;
		}
	}
}

dl.dl-mini-meta {
	dd {
		font-size: @smallFontSize !important;
		* {
			font-size: @smallFontSize !important;
		}
	}
	dt {
		font-size: @smallFontSize !important;
	}
}

dd
{
	small
	{
		font-size: @smallFontSize;
	}
}
li
{
	small
	{
		font-size: @smallFontSize;
	}
}


* {
	.border-radius(0px) !important;
}

#content
{
	&.camosun_wide
	{
		div 
		{
			&#third-level-nav
			{
				.pop-box;
				margin-left: 20px;
				.makeColumn(3);
				float: right;
			}
		}
	}
}


.nav {
	&.nav-list {
		li
		{
			a {
				&:hover {
					background: @camosunLightBlue;
					color: @white;
					text-shadow: none;
				}
			}
		}
	}
}
span {
	&.label {
		text-shadow: none;
	}
}

div#lh_chat {
	position: fixed;
	right: 160px;
	bottom: 0px;
	font-size: 14px;
	font-weight: bold;

	div.chat-online {
		background: #91bd36;
		color: #fff;
		padding: 8px 16px 8px 16px;
		width: 320px;
	}

	div.chat-offline {
		background: #b5b5b5;
		color: #fff;
		padding: 8px 16px 8px 16px;
		width: 320px;
	}

	a {
		color: #fff !important;
	}
}


/* ============================================================================================================= */
/* = The following is for the new program page template, and really needs to be properly merged in the future. = */
/* ============================================================================================================= */

#content.minimalist {
	.hero-unit {
		&.main-page {
			height: 400px;
			div.blurb {
				position: absolute;
				bottom: 20px;
				left: 20px;
				#translucent > .background(@black, 60%);
				padding: 10px;
				h1 {
					font-size: @heroUnitFontSize;
					&.scale-down {
						font-size: @heroUnitScaleDownFontSize;
						&.chatty-cathy {
							font-size: @heroUnitChattyCathyFontSize;
						}
					}
				}
				* {
					color: @white;
				}
			}	
		}
		padding-top: 0;
		padding: 0;
		background: #ddd;
		min-height: 185px;
		max-height: 400px;
		position: relative;
		overflow: hidden;
		margin-bottom: 0;
		&.sub-page {
			min-height: 145px;
			max-height: 145px;
			background: transparent;
			div.blurb {
				position: absolute;
				bottom: 20px;
				left: 0;
				h1 {
					font-size: @heroUnitFontSize;
					&.scale-down {
						font-size: @heroUnitScaleDownFontSize;
					}
				}
			}
		}
		img {
			margin: 0 !important;
			padding: 0 !important;
		}
	}
	


	padding-bottom: 0;
	div.section-nav {
		ul
		{
			&.nav
			{
				li
				{
					a
					{
						background: @camosunLightestGrey;
						line-height: 28px;
						&:hover {
							color: @white;
							background: @camosunLightBlue;
						}
					}
					&.active {
						position: relative;
						a {
							background: @camosunBlue;
							color: @white;
							&:hover {
								background: @camosunLightBlue;
							}
						}
						&:after {
							content:"";
							border-top:10px solid @camosunBlue;
							border-right:10px solid transparent;
							border-left:10px solid transparent;
							position: absolute;
							bottom: -8px;
							left: 40%;
							}
						&:hover:after {
							border-top-color: @camosunLightBlue;
							}
						}
					}
				}
			}
		}
		
	div#page-banner {
		background: @camosunLightestGrey;
		&.bokeh-dark
			{
				background: url('/template/helpers/helper.image_rotator.php?img_dir=/template/images/page-headers/bokeh-dark/') no-repeat!important;
				color:@white;
			}
		&.bokeh-light
			{
				background: url('/template/helpers/helper.image_rotator.php?img_dir=/template/images/page-headers/bokeh-light/') no-repeat!important;
				color:@black;
			}
		}
	div#page-second-level-nav
	{
		margin-top: 20px;
	}
	div.section {
		padding: 20px 0 20px 0;
		&.section-grey
		{
			background: @camosunLightestGrey;
/*
			div.pop-box {
				background: @white;
			}
*/
		}
	}
	div#page-footer {
		background: @camosunLightestGrey;
		padding: 40px 0;
		margin-top: 40px;
	}
	div.tile-panel {
		.makeRow();
		div
		{
			.box-sizing(border-box);
		}
		div.tile-caption-dark {
			#translucent > .background(@black, 60%);
			* {
				color: @white;
			}
		}
		div.tile-caption-light {
			#translucent > .background(@white, 60%);
			* {
				color: @black;
			}
		}
		img {
			padding: 0 !important;
			margin: 0 !important;
		}
		div.tile-content {
			padding: 4px;
		}
		div.main-tile {
			.makeColumn(8);
			height: 300px;
			background: @camosunGrey;
			position: relative;
			overflow: hidden;
			img.special {
				margin-top: -40px;
			}
			div.tile-caption {
				position: absolute;
				bottom: 0;
				left: 0;
				padding: 4px;
				max-height: 90px;
				width: 100%;
				p {
					margin-bottom: 0;
				}
			}
			a {
				display: block;
				height: 100%;
				&:hover {
					text-decoration: none;
				}
			}
			&.half {
				.makeColumn(4);
			}
			&.quarter {
				.makeColumn(2);
			}
			&.eighth {
				.makeColumn(1);
			}

			&.tile-blue {
				background: @camosunBlue;
				* {
					color: @white;
				}
			}
			&.tile-green {
				background: @freshGreen;
				* {
					color: @white;
				}
			}
			&.tile-dark-grey {
				background: @camosunGrey;
				* {
					color: @white;
				}
			}
			&.tile-grey {
				background: @camosunLightestGrey;
			}
			&.tile-white {
				background: @white;
			}
			
		}
		div.tile-box {
			.makeColumn(4);
			div.tile-box-row {
				.makeRow();
				div.tile {
					.makeColumn(2);
					height: 140px;
					margin-bottom: 20px;
					position: relative;
					a {
						&:hover {
							text-decoration: none;
						}
					}
					&.tile-blue {
						background: @camosunBlue;
						* {
							color: @white;
						}
					}
					&.tile-green {
						background: @freshGreen;
						* {
							color: @white;
						}
					}
					&.tile-dark-grey {
						background: @camosunGrey;
						* {
							color: @white;
						}
					}
					&.tile-grey {
						background: @camosunLightestGrey;
					}
					&.tile-white {
						background: @white;
					}
					div.tile-caption {
						margin: 0;
						width: 100%;
						max-height: 90px;
						padding: 4px;
						position: absolute;
						bottom: 0;
						left: 0;
						p {
							font-size: @smallFontSize;
							margin-bottom: 0;
						}
					}
					img {
						min-width: 140px;
						max-width: 140px;
						min-height: 140px;
						max-height: 140px;
					}
					&.tile-double {
						.makeColumn(4);
						img {
							min-width: 300px;
							max-width: 300px;
							min-height: 140px;
							max-height: 140px;
						}
					}
				}
			}
		}
	}
	
	p.cost-estimate {
		font-family: @headingsFontFamily;
		font-weight: 300;
		font-size: 48px;
		text-align: center;
		line-height: 72px;
		margin-left: -10px;
	}
	div#page-third-level-nav {
		.makeColumn(3);
		float: right;
		background: @camosunLightestGrey;
		.nav-list {
			li {
				position: relative;
			}
			>.active
			{
				>a
				{
					&:hover {
						background: @camosunLightBlue;
					}
					background: @camosunBlue;
				}
				&:before {
					content:'';
					width: 0 !important;
					height: 0 !important;
					border-top: 8px solid transparent;
					border-right: 8px solid @camosunBlue;
					border-bottom: 8px solid transparent;
					position: absolute;
					top: 4px;
					left: -23px;
				}
				&:hover:before
				{
					border-right-color: @camosunLightBlue;
				}
			}
		} 
	}

	span.label.full-size {
		text-shadow: none;
		font-weight: normal;
		font-size: @baseFontSize;
	}
}

.btn [class^="icon-"] {
	margin-top: 2px;
}

// Fixes for @#Y&*@#

em > strong, em > b, i > strong, i > b {
	font-weight: normal !important;
}
strong > em, strong > i, b > em, b > i {
	font-style: normal !important;
}

ul.jumplist {
	display: inline;
	li {
		display: inline-block;
		width: 32px;
		height: 32px;
		float: left;
		margin-right: 3px;
		text-align: center;
		background: @camosunLightestGrey;
		color: @lightGrey;
		line-height: 32px;
		a {
			background: @camosunBlue;
			color: @white !important;
			display: block;
			width: 100%;
			height: 100%;
			&:hover {
				background: @camosunLightBlue;
				text-decoration: none;
			}
		}
	}
	&.jumplist-small {
		li {
			width: 22px;
			height: 22px;
			line-height: 22px;
		}
	}
}

span.sencoten {
	font-family: sans-serif;
}
ul.rss-title-list {
	small {
		font-size: @smallFontSize;
	}
	li {
		margin-bottom: @smallFontSize;
	}
}
div.rss-meta {
	font-size: @smallFontSize !important;
}

div.social-share { 
	width: 200px;
	height:auto;
	margin-top: 10px;
	h6, ul {
		margin-left: 40px;
		font-size: .97em;
		line-height: 2.1em;
	}		
	ul li {
		float:left; 
		padding: 0 9px 0 0;
		text-align: left;
		line-height: 10px;
	}
	div.social-down ul li {
			float:none;
			line-height: @lineHeightSize;
 	}
	div.social-down ul:first-child {
			margin-top: 8px;
	}		
}

.hidden {
  visibility: hidden;
  display: none;
  }

/* VIDEO BOOKING FORM SPECIFIC SIZING - /services/library/library-video-booking.html */

div.vidbook {
	div {
		float:left;
		margin: 3px;
	}
	div:first-child {		
		margin: 3px 2px 2px 0px;
		width: 210px;
		textarea {
			width: 200px; 
			height: 140px;
		}
	}
	div:nth-child(2) {
		width: 300px;
		textarea {
			width: 290px; 
			height: 140px;
		}
	}
	div:last-child {	
		width:110px;
		textarea {
			width: 75px; 
			height: 140px;
		}
	}
}

div.footnotes
{
	* {
		font-size: @smallFontSize;
	}
}

/* Better Validation Error Display on Forms */

label.radio label.error, label.checkbox label.error {
    margin-top: -27px;
}
label.error {
    padding: 2px 2px;
    font-weight: 900;
    width: 136px;
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

/* Squeeze Recaptcha into input-XLarge sizing - WO101553*/
div.squeezeCaptcha div.g-recaptcha div div iframe {
  border-right-color: rgb(211, 211, 211);
  border-right-width: 1px;
  max-width: 279px;
}

/* Allow tile-caption style on all images... hopefully */

div.image-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 10px;
	max-height: 30%;
	width: 100%;
	h2 {
	    line-height: 1.2em;
	}
	&.image-caption-dark {
		#translucent > .background(@black, 60%);
		* {
			color: @white;
		}
	}
	&.image-caption-light {
		#translucent > .background(@white, 60%);
		* {
			color: @black;
		}
	}

}

div.image-caption-wrapper {
	position: relative;
	overflow: hidden;
}

.link-target:target {
	animation: lookhere 3s;
	animation-delay: 1s;
}

@keyframes lookhere {
	0% {
		background-color: #d9edf7;
	}
	100% {
		background-color: auto;
	}
}

.youtubeContainer {
    position: relative;
    width: 100%;
    height: 0;
	padding-bottom: 56.25%; /* 16:9 */
	/* padding-top: 25px; */



}
.youtubeContainer iframe, .youtubeContainer object, .youtubeContainer embed {
    position: absolute;
top: 0;
left: 0;
    width: 100%;
    height: 100%;

}


/* Adding default bootstrap table cell colours for success, error, warning, info and camosun colours as per WO 132223 */

.table tbody {
  tr.success > td {
    background-color: #dff0d8;
  }
  tr.error > td {
    background-color: #f2dede;
  }
  tr.warning > td {
    background-color: #fcf8e3;
  }
  tr.info > td {
    background-color: #d9edf7;
  }
  tr.camgreen > td {
    background-color: #91bd36;
    color: #fff;
  }
  tr.camgrey > td {
    background-color: #5a5a5a;
    color: #fff;
  }
}

.table-hover tbody {
  tr.success:hover > td {
    background-color: #d0e9c6;
  }
  tr.error:hover > td {
    background-color: #ebcccc;
  }
  tr.warning:hover > td {
    background-color: #faf2cc;
  }
  tr.info:hover > td {
    background-color: #c4e3f3;
  }
  tr.camgreen:hover > td {
    background-color: #91bd36;
    color: #fff;
  }
  tr.camgrey:hover > td {
    background-color: #5a5a5a;
    color: #fff;
  }
}

/* WO 144602 to style opentable iframe app */
#ot-widget-container1 {
    text-align: center;
}

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

/* Big thicc border for Jason */
.beefy-bottom-border {
	border-color: #5a5a5a;
	border-width: 0 0 8px 0;
	border-style: solid;
}