/*

COLORS

logo blue: #14729F
logo yellow: #F9B133

*/

body {
	font-family: "Open Sans", Helvetica, Arial, 'lucida grande', sans-serif; /* just make open sans the default font for everything for now */
	background: #F9F9F9;
}


.flex {
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
}

.flex-center {
	align-items: center;
	justify-content: center;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-column {
	flex-direction: column;
}

.flex-space-around {
	justify-content: space-around;
}

/** Colors **/

.text-ofcourse-yellow {
	color: #F9B133;
}
.text-ofcourse-blue {
	color: #14729F;
}

/** Container **/

.inner-container.fixed-width {
	width: auto;
	max-width: 960px;
}

.full-width-container .inner-container.fixed-width {
	width: auto;
	max-width: 80%;
}

.content-pad {
	padding: 15px;
}

/** Headers **/

.container h1,
.container .h1,
.container h2,
.container .h2,
.container h3,
.container .h3 {
	line-height: normal;
}

/** Base Overrides **/

.textinput-large .textinput {
	font-size: 18px;
}
.textinput-large .textinput-icon {
	padding-left: 36px !important;
}

/** Tables Overrides **/

.rowtable td {
	border-bottom: 1px solid #D2D2D2;
	padding: 10px;
}

.rowtable td:first-child > .fa {
	margin-left: 2px;
}

/** Header Banner Override **/

.header-banner {
	margin-top: 0px;
	padding-top: 0px;
}

/** Content Box Overrides **/

.content-box {
	/*border: 0px;*/
	border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

.fa-ul li {
	margin-bottom: 10px;
}

/** Shapes **/

.circle {
	border-radius: 50%;
	background: #aaa; /* ie defaults to gray */
	display: inline-block;
	text-align: center;
}
/*.circle > * {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}*/

/** Progress Bars **/

.progress .bar {
	background-image: none;
	background-color: #F9B133;
}

.progress.completed .bar {
	background-color: #45910e;
}

/** Buttons **/

.button {
	box-shadow: none;
}

input.button-large, .button-large > span {
	padding: 12px;
	padding-left: 20px;
	padding-right: 20px;
}

/*****************************************************************************/
/** .vertical-timeline **/
/* Renders a vertical tabbed timeline */

.vertical-timeline {

}

.vertical-timeline .row {
	position: relative;
}

.vertical-timeline .row::after {
	content: ' ';
	position: absolute;
	left: 50%;
	top: 0px;
	bottom: 0px;
	margin-left: -1px; /* to compensate for width */
	
	width: 2px;
	background: #aaa;
}
.vertical-timeline .row:first-child::after {
	top: 50%;
	margin-top: -1px; /* to account for height of .focus:after */
}
.vertical-timeline .row:last-child::after {
	bottom: 50%;
	margin-bottom: -1px; /* to account for height of .focus:after */
}

.vertical-timeline .row > * { /* ie > .left, > .right */
	position: relative;
	float: none;
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}

.vertical-timeline .row > .left {
	text-align: right;
}
.vertical-timeline .row > .right {
	text-align: left;
}

.vertical-timeline .row > * > div {
	padding: 35px 35px;
}
.vertical-timeline .row:first-child > * > div {
	padding-top: 0px;
}
.vertical-timeline .row:last-child > * > div {
	padding-bottom: 0px;
}

.vertical-timeline .row > .focus::after {
	content: ' ';
	position: absolute;
	top: 50%;
	margin-top: -1px; /* to compensate for height */

	width: 10px;
	height: 2px;
	background: #aaa;
}
.vertical-timeline .row > .left.focus::after {
	right: 0px;
}
.vertical-timeline .row > .right.focus::after {
	left: 0px;
}

@media(max-width:767px) {
	/* lol the following cascading shit show is an exercise in how CSS style precedence works */

	.vertical-timeline .row::after,
	.vertical-timeline .row > .focus::after {
		display: none;
	}

	.vertical-timeline .row > * {
		display: block;
		width: auto;
	}

	.vertical-timeline .row > .left,
	.vertical-timeline .row > .right {
		text-align: center;
	}

	/* this is where it really gets fun */

	.vertical-timeline .row > * > div {
		padding: 15px 0px;
	}
	.vertical-timeline .row > *:first-child > div {
		padding-top: 25px;
	}
	.vertical-timeline .row > *:last-child > div {
		padding-bottom: 25px;
	}
	.vertical-timeline .row:first-child > *:first-child > div {
		padding-top: 0px;
	}
	.vertical-timeline .row:last-child > *:last-child > div {
		padding-bottom: 0px;
	}
}

/*****************************************************************************/
/** 

Info Boxes 
Those boxes which feature courses etc, for example. These styles are common to them

**/

.info-boxes {

}

.info-box {
	display: block;
}

.info-box h3,
.info-box .h3 {
	font-size: 14px;
	line-height: normal;
	color: inherit;
	font-weight: bold;
	color: rgba(0,0,0,1.0);
	text-transform: none;
}

/* .info-box-banner is used when the course banner is displayed as part of wider info about the course */

.info-box .info-box-banner {
	display: block; /* as we use an a to make this clickable, need to make it a block */
	position: relative;

	background-size: cover;
	background-position: center center;
	background-color: #ccc; /* default color */

	width: auto;
	height: 150px;

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
.info-box-focused .info-box-banner {
	height: 175px;
}

/* .info-box-banner-container is used when the course banner is designed to be the entire info-box */

.info-box .info-box-banner-container {
	display: block; /* as we use an a to make this clickable */

	background: #000;	

	width: auto;
	height: 150px;

	text-align: center;
	text-decoration: none;
}
.info-box .info-box-banner-container .info-box-banner {
	position: absolute;
	z-index: 0;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;

	background-size: cover;
	background-position: center center;

	opacity: 0.4;
}

.info-box .info-box-banner-container .text-container {
	position: relative;
	z-index: 1;
	white-space: nowrap;
	padding: 5px;
}
.info-box .info-box-banner-container .text-container .midaligner {
	height: 140px;
}
.info-box .info-box-banner-container .text-container .text {
	line-height: normal;
	display: inline-block;
	vertical-align: middle;
	white-space: normal;

	font-size: 19px;
	color: #fff;
	font-family: "Open Sans";
	font-weight: 500; /* ie bold */
}

/*@media(max-width:767px) {
	.info-box .info-box-banner-container .text-container .text {
		font-size: 19px;
	}	
}*/

/* .info-box .quick-info */

.info-box .quick-info {
	
}

.info-box .quick-info > span {
	
}
.info-box .quick-info > span::after {
	content: "/";
	padding-right: 10px;
	padding-left: 10px;
	color: rgba(0,0,0,0.35);
	font-weight: normal;
}
.info-box .quick-info > span:last-child::after {
	content: "";
	padding-right: 0px;
	padding-left: 0px;
}

/* .info-boxes-noMargin */
/* Removes significant styling and margin from around info-boxes */

.info-boxes-noMargin {
	padding: 0px;
}

.info-boxes-noMargin {
	margin-left: -1px;
	margin-right: -1px;
	margin-bottom: -1px;
}

.info-boxes-noMargin .info-box {
	margin-left: 1px;
	margin-right: 1px;
}

.info-boxes-noMargin .equal-block-container {
	margin-bottom: 1px;
}

/* .info-boxes-noStyling */
/* Removes significant styling from the borders etc of info-boxes */

.info-boxes-noStyling .content-box {
	border: 0px !important;
	border-radius: 0px !important;
	box-shadow: none !important;
}

/** .info-box-carousel **/
/* Allows us to focus in on a particular info box */

.info-box-carousel {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;

	top: 0px;
}

.info-box-carousel .info-boxes {
	white-space: nowrap;
	position: relative;
	left: 0%;
	right: 0%;

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.info-box-carousel .info-boxes .equal-block-container {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.info-box-horizontal {

}

@media(min-width:767px) {
	.info-box-horizontal {

	}

	.info-box-horizontal .info-box-title-section {
		padding-right: 55px;
	}

	.info-box-horizontal .info-box-banner {
		position: absolute;
		width: 40%;
		height: 100%;
	}

	.info-box-horizontal .info-box-content {
		position: relative;
		margin-left: 40%;
		padding-left: 10px;
	}
}

/** 

Countdown
Lets us render a countdown to a specific date/time

**/

.countdown {

}

.countdown > div {
	margin: 0px 10px;

	text-align: center;
	line-height: 100%;
}

.countdown > div > div:first-child {
	font-size: 28px;
	font-weight: 100;
	margin-bottom: 10px;
}

.countdown > div > div:last-child {
	font-size: 15px;
	font-weight: bold;
}

/** 

Markdown
Styles markdown globally

**/

.markdown-content {

}

.markdown-content img {
	max-width: 100%;
}

.markdown-content ol {
	padding-left: 15px;
}

/**

Splash

**/

@media(max-width: 767px) {
	.splash .splash-inner { 
		/* increase padding on mobile layout to deal with larger headers */

		padding-top: 60px;
		padding-bottom: 60px;
	}
}

/**

Speech Bubbles
Credit: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

**/

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.speech-bubble {
	margin-bottom: 15px;
	position: relative;
	/*color:#333;*/
}

.speech-bubble .speech-bubble-content {
  position:relative;
  background:#fff;

  border-radius: 2px;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

.modal-speech-bubble .speech-bubble-content {
	box-shadow: 0px 0px 15px rgba(0,0,0,0.55);
	border: 0px;
}
/*.modal-speech-bubble.speech-bubble-avatar > .user-avatar {
	box-shadow: 0px 0px 15px rgba(0,0,0,0.55);
}*/

.speech-bubble-content > .speech-bubble-pad {
	padding: 15px;
}
.speech-bubble-content > .speech-bubble-megaPad {
	padding: 25px
}

.speech-bubble .speech-bubble-content-container > p {
	margin-top: 10px;
	margin-bottom: 0px;
}

.speech-bubble.speech-bubble-left.speech-bubble-avatar .speech-bubble-content-container > p {
	margin-left: 45px;
}
.speech-bubble.speech-bubble-right.speech-bubble-avatar .speech-bubble-content-container > p {
	margin-right: 45px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.speech-bubble.speech-bubble-left .speech-bubble-content {
  margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.speech-bubble.speech-bubble-right .speech-bubble-content {
  margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */
/* Default: bottom */

.speech-bubble .speech-bubble-content:after {
  content:"";
  position:absolute;

  top: auto;
  right: auto;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:50%;
  margin-left: -13px; /* 50% of width */
  border-width:13px 13px 0;

  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

.speech-bubble.speech-bubble-top .speech-bubble-content:after {
  top:-13px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:50%;
  right: auto;
  /*right:47px;*/ /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width:0 13px 13px;
  margin-left: -13px;
}

/* Variant : left
------------------------------------------ */

.speech-bubble.speech-bubble-left .speech-bubble-content:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-21px; /* value = - border-left-width - border-right-width */
  right:auto;
  border-width:9px 21px 9px 0;
  border-color:transparent #fff;
  margin-left: 0;
}

/* Variant : right
------------------------------------------ */

.speech-bubble.speech-bubble-right .speech-bubble-content:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 21px;
  border-color:transparent #fff;
  margin-left: 0;
}

/* AVATAR
------------------------------------------------------------------------------------------------------------------------------- */

.speech-bubble-avatar.speech-bubble-left > .user-avatar {
	float: left;
}
.speech-bubble-avatar.speech-bubble-right > .user-avatar {
	float: right;
}

.speech-bubble-avatar > div {
	position: relative;
}

@media(max-width:767px) {

	.speech-bubble-avatar > .user-avatar {
		float: none !important;
		display: block !important;

		margin: 0 auto;
		margin-bottom: 25px;
	}
	.speech-bubble-avatar .speech-bubble-content,
	.speech-bubble-avatar .speech-bubble-content-container {
		/* override inline margin styles */

		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	.speech-bubble.speech-bubble-left.speech-bubble-avatar .speech-bubble-content-container > p {
		margin-left: 15px;
	}
	.speech-bubble.speech-bubble-right.speech-bubble-avatar .speech-bubble-content-container > p {
		margin-right: 15px;
	}

	/** left => move to top **/

	.speech-bubble-avatar.speech-bubble-left .speech-bubble-content:after {
		top:-13px; /* value = - border-top-width - border-bottom-width */
		bottom:auto;
		left:50%;
		right: auto;
		/*right:47px;*/ /* value = (:before right) + (:before border-right) - (:after border-right) */
		border-width:0 13px 13px;
		border-color:#fff transparent;
		margin-left: -13px;
	}

	/** right => move to bottom **/
	
	.speech-bubble-avatar.speech-bubble-right .speech-bubble-content:after {
		top: auto;
		right: auto;
		bottom:-13px; /* value = - border-top-width - border-bottom-width */
		left:50%; /* value = (:before left) + (:before border-left) - (:after border-left) */
		border-width:13px 13px 0;
		border-color:#fff transparent;
		margin-left: -13px;
	}

}

/**

Corner Ribbons

**/

.corner-ribbon{
	width: 200px;
	background: #e43;
	position: absolute;
	top: 25px;
	left: -50px;
	bottom: auto;
	right: auto;
	text-align: center;
	line-height: 50px;
	letter-spacing: 1px;
	color: #f0f0f0;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	height: auto;
	font-weight: bold;
}

.corner-ribbon.top-left{
	top: 25px;
	left: -50px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
	top: 25px;
	right: -50px;
	left: auto;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
	top: auto;
	bottom: 25px;
	left: -50px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
	top: auto;
	right: -50px;
	bottom: 25px;
	left: auto;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}