/* bootstrap overrides*/
.list-group {padding-left: 0}
.app > nav * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.alert p:first-child {
    margin-top: 0;
}
.list-group-item-text { margin: 0; font-size: 14px; }
.text-danger {color: #a94442}
.mb15 {
    margin-bottom: 15px;
}

.mb0 {
    margin-bottom: 0px;
}

.mt10 {margin-top: 10px;}

/* ==========================================================================
	 Typography
	 ==========================================================================
	 Fonts in use:
	 font-family: 'LatoRegular';
	 font-family: 'LatoItalic';
	 font-family: 'LatoBold';
	 font-family: 'LatoLight';
	 ========================================================================== */

html {font-size: 16px; }
body { font-family: Arial; /*'LatoRegular'; */;font-size: 16px; line-height: normal; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
.column.enroll p, .column.guide p { padding: 0 20px; }
.clear { clear: both;}
.dn { display: none; }
.onlyprint { display: none; }
/* ==========================================================================
	 App
	 ========================================================================== */

.app {
		bottom: 0px;
		left: 0px;
		position: absolute;
		overflow: hidden;
		right: 0px;
		top: 0px;

}
.mobile .app {
	min-width: 315px;
	overflow-x: hidden;
	overflow: visible;
        position: static;
}

.tablet .app {
	min-width: 480px;
}

/* ==========================================================================
	 App > Header
	 ========================================================================== */
.app > header {
		background: rgb(238,241,242);
		height: 96px;
		left: 96px;
		position: absolute;
		right: 0px;
		top: 0px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	padding: 0 20px; z-index: 100;
}
.tablet .app > header { right: 0; left: 0; z-index: 100; height: 50px; }
.tablet .app > header h1 { font-size: 20px; line-height: 1.2em; margin-right: 100px; }
.mobile .app > header h1 { font-size: 15.5px; line-height: 1.2em; margin-right: 100px;}
.mobile .app > header { right: 0; left: 0; z-index: 100; height: 50px; }

.app > header h1 {
	font-family: 'LatoItalic';
	font-size: 28px;
	color: rgb(70,80,90);
	vertical-align: middle;
	/*height: 96px;*/
	margin: 0;
	line-height: 1.2em;
	margin-right: 380px;
	/*width: 70%;*/
	float: left;

}
.wide .app > header h1 { font-size: 32px; }

.header table { height: 100%; }
.header table td { vertical-align: middle;	}

.app form.search {
	float: left;
	height: 94px;
	position: absolute;
	z-index: 120;
	top: 0;
	right: 0;
	margin: 0;

}
.app form.search .input { padding: 10px 20px; }
.app form.search .btn, .tablet .app form.search .btn, .mobile .app form.search .btn {
	border: 0;
	width: auto;
	margin-left: 20px;
	height: 34px;
	padding: 6px 13px;
}
.app form.search #searchinput:focus {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
.app form.search #searchinput {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        border-radius: 4px;
        color: #555555;
        display: inline-block;
        line-height: 20px;
        margin-bottom: 10px;
        padding: 4px 6px;
        vertical-align: middle;
}
.app form.search input {
	width: 250px;
	padding: 6px 8px;
	float: left;
	border: none;
	font-size: 12px;
	border: 1px solid rgba(0,0,0,0.2);
	margin: 25px 0;
	z-index: 10;
	position: relative;
	height: 34px;


}

.hidesearch #searchform, .hidesearch #languageselect {
	display: none;
	-moz-transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
		-o-transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
		-webkit-transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
		transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
}
.hidesearch #searchform {
	top: 50px;
	background: #eef1f2;
	border-radius: 0px 0px 4px 4px;
	border-top: 1px solid #ddd;
	width: 100%;
}
.hidesearch #searchform #searchinput {
	position: absolute;
	right: 85px;
}
.hidesearch #searchform .btn {
	position: absolute;
	right: 20px;
}
.hidesearch #languageselect {
	line-height: 50px;
	top: 50px;
	text-align: right;
	background: #eef1f2;
	border-radius: 0px 0px 4px 4px;
	right: 0;
	width: 100%;
	border-top: 1px solid #ddd;
}
.hidesearch #languageselect a {
	margin-right: 10px;
}
.mobile .app #languageselect {
	width: 100%;
}
#searchtoggle {
	display: none;
}

#languagetoggle, .hidesearch #searchtoggle {
	display: inline-block;
	width: 40px;
	height: 30px;
	overflow: hidden;
	position: absolute;
	right: 70px;
	top: 10px;
	cursor: pointer;
	background: url('../img/icon-languages.png') no-repeat;
	background-size: 40px 30px;
}
#languagetoggle	{
	display: none;
}
.hidesearch #searchtoggle {
	right: 15px;
	background: url('../img/icon-search.png') no-repeat;
	background-size: 31px 30px;
}


/* ==========================================================================
	 App > Search
	 ========================================================================== */
.result { display: none; float: left; clear: left; width: 30%; height: auto; max-height: 100%; position: absolute; top: 94px; right: 0; margin: 0; list-style: none; background: #fefefe; box-shadow: 0 2px 5px rgba(0,0,0,0.3); padding: 0; z-index: 10; overflow: scroll; }
.result li { border-bottom: 1px solid #ccc; padding: 10px 20px; font-size: 12px; position: relative; overflow: hidden; }
.result a { float: left; }
.result li button { float: right; width: 100px; text-align: center; float: right; cursor: pointer; background: rgb(120,190,55); color: #fff; text-decoration: none; text-transform: uppercase; float: right; margin: 0 0 0 20px; padding: 5px 10px; border-radius: 15px; border: none; font-size: 12px; }
.result li a { color: #333; }

.tablet .result { width: 50%; top: 50px; }
.tablet .app form.search { height: 50px; }
.tablet .app form.search .input { padding: 10px 20px; }
.tablet .app form.search input {	padding: 5px 10px; margin: 0; }
.mobile .result { width: 100%; top: 50px; }
.mobile .app form.search { width: 100%; height: 50px; }
.mobile .app form.search .input { padding: 10px 20px; }
.mobile .app form.search input { padding: 5px 10px; margin: 0; width: 180px; }


/* ==========================================================================
	 App > Navigation
	 ========================================================================== */

.app > nav {
		background: rgb(130,200,60);
		bottom: 0px;
		left: 0px;
		position: absolute;
		top: 0px;
		width: 96px;

}

.app > nav > a {
		display: block;
		height: 94px;
		overflow: hidden;
		position: relative;
		text-align: center;
		width: 94px;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(0,0,0,0.2);
	font-size: 11px;
	color: rgb(50,70,20);
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center 10px;
	text-decoration: none;
}

.app > nav > a.active { background-color: rgb(120,175,55);	}

.app > nav > a[data-id="home"] { background-image: url(../img/icon-home.png); }
.app > nav > a[data-id="help"] { background-image: url(../img/icon-help.png); }
.app > nav > a[data-id="course-listings"] { background-image: url(../img/icon-courses.png); }
.app > nav > a[data-id="cart"] { background-image: url(../img/icon-cart.png); }
.app > nav > a[data-id="my-courses"] { background-image: url(../img/icon-mycourses.png); }

.tablet .app > nav { width: 100%; height: 96px; top: 50px; }
.tablet .app > nav > a, .mobile .app > nav > a { float: left; height: 96px; border: none; border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(0,0,0,0.2); }

.mobile .app > nav { width: 100%; height: 60px; top: 50px; text-align: center; 	border-bottom: 1px solid rgba(0,0,0,0.2); }
.mobile .app > nav > a { float: left; border-top: none; border-bottom: none; width: 60px; height: 60px; background-size: 50%; font-size: 9px; }

.app > nav > a > span {
		bottom: 10px;
		left: 0px;
		position: absolute;
		right: 0;
}
.app > nav > a > span.number {
	top: 10px;
	left: 10px;
	right: auto;
	position: absolute;
	background: #fff;
	border-radius: 13px;
	padding: 3px;
	width: 20px;
	height: 20px;
	font-size: 11px; line-height: 20px; text-align: center; z-index: 2;
}
.app > nav > a > span.time-remaining {
	top: 13px;
	left: auto;
	right: 10px;
	position: absolute;
	font-size: 11px;
	background: rgba(255,255,255,0.8);
	border-radius: 0 13px 13px 0;
	padding: 3px 3px 3px 10px;
	width: 45px;
	height: 14px;
	font-size: 11px; line-height: 13px; text-align: center; z-index: 1; }

.app > nav > a > span.number.hide, .app > nav > a > span.time-remaining.hide	{ display: none; }

.mobile .app > nav > a > span.number { top: 5px; left: 35px; width: 12px; height: 12px; line-height: 12px; }
.mobile .app > nav > a > span.time-remaining { width: 40px; top: auto; left: 10px; bottom: 5px; border-radius: 10px; padding: 3px 3px 3px 3px;}


/* ==========================================================================
	 Canvas
	 ========================================================================== */

.app > .canvas {
		bottom: 0px;
		left: 96px;
		position: absolute;
		overflow: hidden;
		overflow-y: scroll;
		overflow-x: hidden;
		right: 0px;
		top: 96px;
}
.tablet .app > .canvas { left: 0; top: 146px; }
.mobile .app > .canvas { left: 0; top: 111px; overflow: visible; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
	 Section container
	 ========================================================================== */

.section-container {
		left: 0px;
		position: absolute;
		right: 0px;
		top: 0;
				-moz-transition: top 250ms cubic-bezier(.10, .10, .25, .90);
				-o-transition: top 250ms cubic-bezier(.10, .10, .25, .90);
				-webkit-transition: top 250ms cubic-bezier(.10, .10, .25, .90);
		transition: top 250ms cubic-bezier(.10, .10, .25, .90);
}

/* ==========================================================================
	 Section
	 ========================================================================== */

section {
		bottom: 0px;
		left: 0px;
		position: absolute;
		overflow: hidden;
		right: 0px;
		top: 0px;
}

/* ==========================================================================
	 Columns
	 ========================================================================== */

.column {
		/*bottom: 0px; */
		left: 0px;
		position: absolute;
		top: 0px;
		width: 20%;
		-moz-transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
		-o-transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
		-webkit-transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
		transition:
				left 300ms ease-in-out,
				width 200ms ease-in-out;
		padding-bottom: 50px;
}


.column.departments {
		left: 0px;
}

.column.categories {
		left: 20%;
}

.column.subjects {
		left: 40%;
}

.column.courses {
		left: 60%;
	width: 40%;
}
.home .column.courses {
		left: 40%;
	width: 60%;
}
.home .column.intro {
		left: 0%;
	width: 40%;
}
/*.column.cart {
		left: 0%;
	width: 40%;
}*/
.column.buying {
		left: 40%;
	width: 60%;
}

/*.column.departments li, .column.categories li, .column.subjects li {
	text-transform: lowercase;
}
.column.departments li:first-letter, .column.categories li:first-letter, .column.subjects li:first-letter {
	text-transform: uppercase;
}
*/

.column-container {
		bottom: 0;
		position: absolute;
		top: 0;
		left: 0;
				-moz-transition: left 300ms ease-in-out;
				-o-transition: left 300ms ease-in-out;
				-webkit-transition: left 300ms ease-in-out;
		transition: left 300ms ease-in-out;
}

.column > .has-overflow {
		bottom: 0px;
		left: 0px;
		position: absolute;
		overflow: hidden;
		right: 0px;
		top: 85px;
}
.column header {
	padding: 20px 0px 20px 20px;
}
.canvas .registration header {
	padding: 20px 0px 20px 0px;
}
.canvas .registration .emailerror {
    width: 80%;
    max-width: 850px;
    min-width: 250px;
}
.column header > h1 {
	font-family: 'LatoLight';
	font-size: 1.5em;
	line-height: 2em;
	color: rgb(65,65,65);
	margin: 0px 0;
	margin-right: 20px;
	display: inline-block;
}

.column header > a.back {
		background: url(../img/round-arrow-left.png) no-repeat left center;
		display: block;
		width: 50px;
		height: 50px;
		float: left;
		text-indent: -9999px;
		cursor: pointer;
}

.backheader {
	cursor: pointer;
	margin-right: 0 !important;
}

.column.subjects header > h1, .column.categories header > h1, .column.courses header > h1 {
	/*background: url(../img/round-arrow-left.png) no-repeat left center;*/
}
.column.subjects header > h1:hover, .column.categories header > h1:hover, .column.courses header > h1:hover {
	/*background: url(../img/round-arrow-left.png) no-repeat left center;*/
	color: rgb(125,125,125);
}

.column ul {
	font-size: 0.875em;
	color: rgb(120,130,115);
	list-style: none;
	margin: 0;
	padding: 0 20px;
}

.column * {
		-webkit-transition: opacity 300ms ease-in-out;
}

.column ul li { padding: 10px 0; border-bottom: 1px solid #ccc; position: relative; }
.column.departments ul li, .column.categories ul li, .column.subjects ul li { cursor:pointer;}

.course-listings .column ul li:hover { color: #999;	}

.column ul li.selected { padding-right: 30px; background: url(../img/arrow-current.png) no-repeat right 10px; color: rgb(120,190,55); }

.column.departments li { padding: 10px 0 10px 50px; position: relative; }
.column.departments li span { position: absolute; left: 0; top: 9px; background: #ccc; border-radius: 10px; padding: 3px 10px; font-size: 11px; }
.column.departments li.selected span { background: rgb(120,190,55); color: #fff; }

.column.categories li { padding: 10px 0 10px 50px; position: relative; }
.column.categories li span { position: absolute; left: 0; top: 9px; background: #ccc; border-radius: 10px; padding: 3px 10px; font-size: 11px; }
.column.categories li.selected span { background: rgb(120,190,55); color: #fff; }

.column.disabled {	}
.column.disabled header h1 { color: #ccc; background: url(../img/arrow-disabled.png) no-repeat left center; }
.column.disabled ul { opacity: 0.2; /* Oikeasti ei edes n�ytet� */ }

.floating-column {
		display: block;
		float: left;
		width: 25%;
}

/* ==========================================================================
	 Column positions
	 ========================================================================== */

.wide .level-2 .column.departments,
.wide .level-3 .column.departments { left: -20%; }

.wide .level-2 .column.categories,
.wide .level-3 .column.categories { left: 0px; }

.wide .level-2 .column.subjects,
.wide .level-3 .column.subjects { left: 20%; }

.wide .level-2 .column.courses,
.wide .level-3 .column.courses { left: 40%; width: 60%; }

.desktop .column { width: 33%; }
.desktop .column.departments { left: 0; }
.desktop .column.categories { left: 33%; }
.desktop .column.subjects { left: 66%; }
.desktop .column.courses { left: 100%; }

.desktop .level-2 .column.departments,
.desktop .level-3 .column.departments { left: -33%; }

.desktop .level-2 .column.categories { left: 0px; }
.desktop .level-3 .column.categories { left: -33%; }

.desktop .level-2 .column.subjects { left: 33%; }
.desktop .level-3 .column.subjects { left: 0; }

.desktop .level-2 .column.courses { left: 66%; }
.desktop .level-3 .column.courses { left: 33%; width: 66%; }

.tablet .column { width: 50%; }
.tablet .column.departments { left: 0; }
.tablet .column.categories { left: 50%; }
.tablet .column.subjects { left: 100%; }
.tablet .column.courses { left: 100%; }

.tablet .level-2 .column.departments,
.tablet .level-3 .column.departments { left: -50%; }

.tablet .level-2 .column.categories { left: 0px; }
.tablet .level-3 .column.categories { left: -50%; }

.tablet .level-2 .column.subjects { left: 50%; }
.tablet .level-3 .column.subjects { left: -50%; }

.tablet .level-3 .column.courses { left: 0px; width: 100%; }

.tablet .column.intro { width: 48%; left: 0; }
.tablet .column.lift { width: 50%; left: 50%; }

.tablet .column.guide { width: 100%; left: 0; }

.mobile .column { width: 100%; }
.mobile .column.departments { left: 0; }
.mobile .column.categories { left: 100%; display: none; }
.mobile .column.subjects { left: 100%; display: none; }
.mobile .column.courses { left: 100%; display: none; }

.mobile .level-1 .column.departments,
.mobile .level-2 .column.departments,
.mobile .level-3 .column.departments { left: -100%; }

.mobile .level-1 .column.categories { left: 0px; }
.mobile .level-2 .column.categories,
.mobile .level-3 .column.categories { left: -100%; }

.mobile .level-2 .column.subjects { left: 0px; }
.mobile .level-3 .column.subjects { left: -100%; }

.mobile .level-3 .column.courses { left: 0px; }

.level-0 .categories header > a.back,
.level-0 .subjects header > a.back,
.level-0 .courses header > a.back,
.level-1 .subjects header > a.back,
.level-1 .courses header > a.back,
.level-2 .courses header > a.back { opacity: 0.1; }

.column.intro { width: 46%; padding-top: 25px; padding-left: 20px; }

.column.lift { left: 49%; width: 51% }

/*.column.cart { width: 33%; left: 0; }
.column.enroll { width: 66%; left: 33%; }*/

.mobile .column.intro { padding-right: 20px; }
.mobile .column.intro,
.mobile .column.lift { width: auto; position: relative; top: 0; left: 0; right: 0; bottom: 0; }
/*.mobile .column.cart,
.mobile .column.enroll { left: 0; width: 94%; position: relative; padding-right: 2%; padding-left: 4%;} */

/* ==========================================================================
	 Overflow
	 ========================================================================== */

.overflow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: scroll; /*padding-bottom: 30px;*/ }
.overflow.no-flow { overflow: hidden; }
.fade-to-top, .fade-to-bottom { position: absolute; height: 20px; width: 100%; z-index: 20; }
.fade-to-bottom { top: -20px; box-shadow: 0 10px 10px #fff; }
.fade-to-top { bottom: -20px; box-shadow: 0 -10px 10px #fff; }

/* ==========================================================================
	 Courses
	 ========================================================================== */
.column.courses .overflow > ul > li { padding: 20px 0 30px 50px; background: url(../img/course-more.png) no-repeat 0 40px; cursor: pointer; }
.column.courses .overflow > ul > li:first-child { padding: 10px 0 30px 50px; background: url(../img/course-more.png) no-repeat 0 30px;}

.extra {
	font-weight: bold;
	font-size: 1.0em;
	color: rgb(130,165,120);
}
.extra span {}
.extra span.notify { color: #cc4545; padding: 0 15px; font-weight: normal; }
.search h2, .courses h2, .lift h2 {
	font-family: 'LatoBold';
	font-size: 1.75em;
	color: rgb(120,190,55);
	margin: 2px 0 5px;
  padding-right: 140px;
}

.search .information { width: auto; min-width: 300px; }
.courses .information, .search .information, .lift .information { font-size: 0.850em;	padding: 0 130px 0 0; position: relative; min-height: 55px;}

.mobile .app .search .information { padding-right: 10px; }
.multiple_select, .search ul .information > div > a, .courses ul .information>a, .courses button, .lift ul .button_container > a, .lift button, .search .information form #submit1 { font-size: 12px; width: 120px; text-align: center; position: absolute; top: -30px; right: 0; cursor: pointer; background: rgb(120,190,55); color: #fff; text-decoration: none; text-transform: uppercase; float: right; margin: 0 0 10px 20px; padding: 5px 10px; /*border-radius: 15px;*/border-radius: 4px; }
.lift .multiple_select {margin-left: 0; right: auto;}
.lift ul .button_container > a { position: relative; float: right; margin: 0 0 5px 20px;}
.courses .information div.ng-binding, .search .information div.ng-binding, .information div.ng-binding { margin: 0 0 15px 0; font-family: 'LatoBold';}
.courses .information span.ng-binding, .search .information span.ng-binding, .information span.ng-binding { margin: 0 15px 0 0; }

/*.sv .search ul .information>a, .sv .courses ul .information>a, .sv .courses button, .sv .lift ul a, .sv .lift button { width: 125px;}*/
.mobile .sv .app .courses .information a.button { width: 80px; }
.courses button, .search .button { width: 120px; top: 30px !important; border: none;	}
.courses .button { top: 0 !important; }
.courses .darkbutton { background-color: #51A351 !important; top: 0 !important; }
.courses .darkbutton:hover { background-color: #448944 !important; }
.courses .allow_multiple, .lift .allow_multiple { top: 30px !important }

.courses .information a.allow_multiple { top: 30px !important; }
.lift .information a.allow_multiple { top: 0px !important; }
.courses a.signed, .frontpage .information a.signed, .search .information a.signed { background-color: #8EA37A !important; }
.courses .information .some {}

.courses .varasija, .courses .tallenna { display: none; }

.frontpage .information .button_container, .search .information .button_container { width: 120px; float: right; }
.frontpage .lift .button { width: 120px; float: right; }

.search .information form #submit1 { top: 30px;font-size: 12px; width: 120px; box-sizing: border-box; -moz-box-sizing:border-box; }
.mobile .search .information form input#submit1 { top: 0px; }

.button:hover { background-color: #51A351; }
div.information > a:hover{ background-color: #51A351; }
div.single a:hover{ background-color: #FFF; color: #51A351; }
div.column-3 h2 > a { color: #78BE37; text-decoration: none; }
div.column-3 h2 > a:hover { color: #51A351; text-decoration: none; }
#print-btn:hover{ background-color: #51A351; }

/* ==========================================================================
	 Categories
	 ========================================================================== */
.column.categories .overflow > ul > li {
	background-repeat: no-repeat;
	background-position: right 5px;
	background-size: 22px;
	padding: 10px 30px 10px 50px;
}
.column.categories .overflow > ul > li { background-image: url(../img/icons/icon-avoin-yliopisto.png); }
/* li.avoin-yliopisto { background-image: url(../img/icons/icon-avoin-yliopisto.png); }
ul.categories li.avoin-yliopisto { background-image: url(../img/icons/icon-erityis.png); }
ul.categories li.hostoria-ja-talous { background-image: url(../img/icons/icon-historia-talous.png); }
ul.categories li.kaden-taidot { background-image: url(../img/icons/icon-kadentaidot.png); }
ul.categories li.avoinkaupalliset { background-image: url(../img/icons/icon-kaupalliset.png); }
ul.categories li.kielet { background-image: url(../img/icons/icon-kielet.png); }
ul.categories li.kotitalous-maatalous-metsatalous { background-image: url(../img/icons/icon-koti-maa-metsatalous.png); }
ul.categories li.muu-koulutus { background-image: url(../img/icons/icon-liikenne.png); }
ul.categories li.musiikki { background-image: url(../img/icons/icon-musiikki.png); }
ul.categories li.musiikki { background-image: url(../img/icons/icon-musiikkileikkikoulu.png); }
ul.categories li.muu-koulutus { background-image: url(../img/icons/icon-muu.png); }
ul.categories li.lapset-ja-nuoret { background-image: url(../img/icons/icon-nuoret.png); }
ul.categories li.avoin-yliopisto { background-image: url(../img/icons/icon-ruoka.png); }
ul.categories li.avoin-yliopisto { background-image: url(../img/icons/icon-seniorit.png); }
ul.categories li.taide { background-image: url(../img/icons/icon-taiteen-perusopinnot.png); }
ul.categories li.tietotekniikka { background-image: url(../img/icons/icon-tietotekniikka.png); }
ul.categories li.liikunta { background-image: url(../img/icons/icon-liikunta.png); } */

/* ==========================================================================
	 Subjects
	 ========================================================================== */
.column.subjects li { padding: 10px 0 10px 50px; position: relative; }
.column.subjects li span {
	position: absolute;
	left: 0;
	top: 9px;
	background: #ccc;
	border-radius: 10px;
	padding: 3px 10px;
	font-size: 11px;
}
.column.subjects li.selected span {
	background: rgb(120,190,55);
	color: #fff;
}
/* ==========================================================================
	 Section:Help
	 ========================================================================== */
section.help {
	padding: 0 20px;
}
section.help > h1 {
	font-family: 'LatoLight';
	font-size: 1.5em;
	line-height: 2em;
	color: rgb(65,65,65);
	background: url(../img/round-arrow-right.png) no-repeat left center;
	padding: 0 0 0 50px;
	margin: 20px 0;
}
section.help > p {
	font-size: 0.875em;
	margin: 0 0 10px 50px;
}
/* ==========================================================================
	 Section:Cart
	 ========================================================================== */
/*.cart.column ul li { position: relative; padding: 15px 0 15px 50px; }
.cart.column ul li span.remove-from-cart {
	position: absolute;
	top: 7px; left: 10px;
	width: 30px;
	height: 30px;
	background: url(../img/icon-delete.png) no-repeat center;
	text-indent: -9999px;
}

.mobile .cart.column ul li span {
	width: 40px;
	height: 40px;
	left: 0;
	background-size: 100% 100%;
}*/
form.info { padding: 0 20px; margin: 20px; padding: 0; background: #eee; border: 1px solid #ccc;}
form.info ul { list-style: none; margin: 0; padding: 0; font-size: 14px; overflow: hidden; }
form.info li { overflow: hidden; padding: 10px 20px; }
form.info ul label { width: 30%; float: left; color: #444;}
form.info ul input[type=text], form.info ul textarea, form.info ul select { width: 65%; float: left; }
form.info ul .hlotunnus input[type=text] { width: 10%; float: left; }

form.info ul .puh input[type=text] { width: 30%; float: left; }

input[type=text]#Postinumero, input[type=text]#LaPostinumero { width: 10%; margin: 0 2% 0 0; float: left; }
input[type=text]#Postitoimipaikka, input[type=text]#LaPostitoimipaikka { width: 49%;/* float: left;*/ }
.infoform-under18 { display: none; margin-top: 10px; }

.mobile form.info { padding: 0; background: #eee; border-top: 1px solid #ccc;}
.mobile form.info li { overflow: hidden; padding: 10px 20px; border-top: 1px solid #fefefe; border-bottom: 1px solid #ccc; }
.mobile form.info ul label { margin: 0 0 5px; width: 100%; float: left; clear: both}
.mobile form.info ul input[type=text] { width: 95%; float: left; clear: both; }
.mobile form.info ul textarea { width: 95%; float: left; clear: both; }

.mobile input[type=text]#Postinumero, .mobile input[type=text]#LaPostinumero { width: 20%; margin: 0 2% 0 0; float: left; clear: none; }
.mobile input[type=text]#Postitoimipaikka, .mobile input[type=text]#LaPostitoimipaikka { width: 60%; float: left; clear: none;}

input[type=button], .registration button, input[type=submit] { margin: 20px; text-align: center; cursor: pointer; background: rgb(120,190,55); color: #fff; text-decoration: none; text-transform: uppercase; float: right; padding: 5px 13px; border-radius: 4px; border: none; font-size: 16px; font-size: 0.875em;}

input[type=button].btn-paytrail, input[type=submit].btn-paytrail, .registration button { float: left; margin: 20px 0;}

.single h2 { padding: 0 20px; font-family: 'LatoLight'; font-size: 1.5em; line-height: 2em; color: rgb(65,65,65); margin: 20px 0;}
.single .social { padding: 0 20px; overflow: hidden; margin: 0 0 10px; max-width: 850px;}
.single button { text-align: center; float: right; cursor: pointer; background: rgb(120,190,55); color: #fff; text-decoration: none; text-transform: uppercase; float: right; margin: 0 0 10px 20px; padding: 5px 10px; /*border-radius: 15px;*/border-radius: 4px; border: none; font-size: 0.875em;}
.single .information { padding: 0 20px; max-width: 850px;}
.single .hide { display: none; }

.single .social { overflow: visible;}
.single .multiple_select { float: none; position: relative; margin: 0 0 2px 0; }
.single .multiple_select .count { color: #333}
.single .multiple_select ul { list-style-type: none;}
.single .multiple_select a:hover { background: none; }

.social-search { padding: 0 20px; overflow: hidden; margin: 0 0 10px; max-width: 850px;}

/* ==========================================================================
	 Section:Calendar
	 ========================================================================== */
.cal-day {
  width: 14%;
  font-size: 12px;
}

.cal-date {
	background: #f7f7f7;
	color: #618384;
	padding-bottom: 5px;
	text-align:center;
	font-size: 12px;
}

.cal-border{
  vertical-align: top;
  border:1px solid #d2d2d2;
}

.cal-lesson {
	font-size: 11px;
	display: block;
	color: #fff;
	border-radius: 2px;
	margin: 1px 1px 4px 1px;
	padding: 3px;
}

a.cal-link {
	text-decoration: none;
}

.cal-lesson-vacant {
	background: #58A618;
	background: -webkit-linear-gradient(#58A618, #4F9115);
	background: -o-linear-gradient(#58A618, #4F9115);
	background: -moz-linear-gradient(#58A618, #4F9115);
	background: linear-gradient(#58A618, #4F9115);
	border-top: 1px solid #4F9115;
}

.cal-lesson-full {
	background: #bbb;
	border-top: 1px solid #bbb;
}

span.cal-lesson-vacant:hover {
	background: #437711;
	border-top: 1px solid #437711;
}

span.cal-lesson-full:hover {
	background: #aaa;
	border-top: 1px solid #aaa;
}

/* ============= */

.intro ul {
	font-size: 1em;
	color: #000;
	list-style: disc;
	margin: 0 0 0 20px;
	padding: 0 20px;
}
.intro ul li {
	border-bottom: 0;
}
.intro h3 {
	margin: 0.5em 0 !important;
}
.intro header {
	padding-left: 0;
}
.intro header .first {
	margin-top: 0;
}

.information .first {
	display: inline-block;
	width: 120px;
}

.information .last {
	display: inline-block;
	width: 300px;
}

.information .infoname {
	font-weight: bold;
}

.ui-widget {
	font-size: 0.8em;
}

.remove-from-cart {
	cursor: pointer;
}
.cart-list .disabled {
    color: #cfcfcf;
    cursor: not-allowed;
}

.hellewi-input-xsmall {
	min-width: 50px;
	margin-bottom: 0 !important;
}


.hellewi-input-small {
	width: 30%;
	max-width: 125px;
	min-width: 90px;
	margin-bottom: 0 !important;
}

.hellewi-input-medium {
	width: 40%;
	max-width: 200px;
	min-width: 100px;
	margin-bottom: 0 !important;
}

.hellewi-input-large {
	width: 80%;
	max-width: 300px;
	min-width: 180px;
	margin-bottom: 0 !important;
}

.mobile .form-horizontal .control-label {
	clear: both;
	float: none;
	text-align: left;
	width: auto;
	margin: 0 20px
}
.mobile .form-horizontal .controls {
	margin: 0 20px;
	width: auto;
}

label, input, button, select, textarea {
	font-size: 100%;
}

form.tiedot .control-group {
	width: 45%;
	min-width: 200px;
	max-width:360px;
	margin-left: 20px;

	float: left;
}
form.tiedot .control-group-wide {
	width: auto;
	min-width: none;
	max-width: none;
}

.mobile form.tiedot .control-group {
	float: none;
}
form.tiedot {
	max-width: 750px;
}

.registration {
/*	max-width: 825px;*/
	padding-left: 20px;
	padding-top: 25px;
	width: 100% !important;
}
.registration > h1 {
	 font-family: 'LatoLight';
	font-size: 1.5em;
	line-height: 2em;
	color: rgb(65,65,65);
	margin: 0px 0;
	margin-right: 20px;
	display: block;
	font-weight: normal;
}
.registration > h2 {
	font-size: 16px;
	font-weight: bold;
	}
.registration .kurssi {
	margin-top: 20px;
	min-width: 250px;
	max-width: 850px;
	width: 80%;
	background-color: #efefef;
	padding-right: 14px;
}

.registration p {
	min-width: 300px;
	max-width: 850px;
	width: 80%;
}
.registration .kurssi .info {
	width: 80%;
	min-width: 250px;
	float: left;
}
.registration .kurssi form {
	margin: 0;
}
.registration .kurssi .passi {
	float: right;
}

.single .button {
	float: left;
	margin-left: 0;
	margin-top: 0;
}
.enroll form .button {
	float :left;
}

.enroll form .maksaja {
	background-color: #8ea37a;
	margin-top: 25px;
	margin-bottom: 0;
	margin-left: 0;
}

.infoform-under18 h2 {
 font-family: 'LatoLight';
	font-size: 1.25em;
	line-height: 2em;
	color: rgb(65,65,65);
	margin: 20px 0;
	padding: 0 20px;
}

.courses .information .lisa {
	margin-bottom: 6px;
}

input.error, textarea.error, select.error {
	border-color: #CC4545;
}
label.error {
	color: #CC4545;
}
.formrow {
	float: left;
	width: 100%;
}

#dialog-confirm {
	display: none;
}
.transfertable {
	font-size: 12px;
	max-width: 540px;
}
.transfertable p {
	min-width: 0;
	max-width: none;
	width: auto;
}
.mobile .app .transfertable {
	font-size: 8px;
}
.transfertable input[type="button"], .transfertable input[type="submit"] {
	margin: 0;
}
.addedtocart {
	position: absolute;
}
.calendar-times {
	padding-right: 20px;
	float: left;
}
.mobile .app .courses .information > a {
	position: relative;
	right: auto;
	float: left;
	top: auto !important;
	margin-left: 0;
}
.mobile .app .courses .information > a.button {
	float: right;
}
.mobile .app .courses .information, .lift .information {
	padding-right: 10px;
}
.mobile .app .courses .information .lisa {
	clear: both;
}

.canvas .search, .canvas .info {
	/*width:80%;*/
	width: auto;
	max-width: 850px;
}

.canvas .info header {
	padding-left: 0;
}
.canvas .info {
	padding-left: 20px;
}

.canvas .info h2, .intro h2 {
	font-size: 19px;
	font-weight: normal;
	font-family: 'LatoLight';
}

.mobile .canvas .search {
	width: 100%;
}
.mobile .search .information a {
	position: relative;
	float: left;
	margin-left: 0;
	margin-right: 120px;
}

.app .check input[type=button], .app .check input[type=submit] {
	margin: 0;
	float: none;
}

.column .loader {
	position: absolute;
	left: 5px;
	top: 11px;
	display: none;
}

#check_registrations {
	max-width: 300px;
	min-width: 260px;
	float: left;
	margin-right: 30px;
}
form#tupas {
	 max-width: 300px;
	min-width: 260px;
 float: left;
 /*margin-left: 25px;*/
}

/*.column .activefilter:hover {
	text-decoration: underline;
}
.column .activefilter, .column .activefilter-on {
	padding: 9px;
	color: #999;
	position: relative;
	top: 0px;
	cursor: pointer;
	display: inline-block;
	display: none;
	font-size: 12px;

}
*/
.courses ul.dropdown-menu { padding: 0; }
.courses .dropdown { display: inline-block; border-radius: 4px; border: 1px solid #78BE37;padding: 0px 4px 2px 4px; color: #999;}
.courses .dropdown .dropdown-toggle { color: #999; text-decoration: none; font-size: 13px; }
.courses ul.dropdown-menu li { padding: 4px 0; }
.courses .dropdown-menu > li > a:hover,
.courses .dropdown-menu > li > a:focus,
.courses .dropdown-submenu:hover > a,
.courses .dropdown-submenu:focus > a {
	text-decoration: none;
	color: #ffffff;
	background-color: #0081c2;
	background-image: -moz-linear-gradient(top, #51a351, #78BE37);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#78BE37));
	background-image: -webkit-linear-gradient(top, #51a351, #78BE37);
	background-image: -o-linear-gradient(top, #51a351, #78BE37);
	background-image: linear-gradient(to bottom, #51a351, #78BE37);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.courses .dropdown-menu a { cursor: pointer; }
#whereami {
	position: absolute;
	padding-top: 8px;
	padding-left: 20px;
	font-size: 12px;
	color: #aaa;
	display: none;
}

.mobile .app .courses .not-active .information a {
	float: none;
	display: block;
}

/*.cart .alert { margin: 0 20px 0 70px;}
.cart .registration .alert-info { margin-left: 0;}*/
#languageselect {
	position: absolute;
	z-index: 150;
	right: 20px;
	font-size: 12px;
	top: 10px;

}
#languageselect a {
	color: #666;
	text-decoration: none;
}
#languageselect a:hover {
	text-decoration: underline;
}

#addbillinginformation {
	clear: both;
	text-align: center;
	float: left;
	cursor: pointer;
	background: rgb(120,190,55);
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0 0 0 20px;
	padding: 5px 10px;
	border-radius: 4px;
	border: none;
	font-size: 12px;
	margin-bottom: 12px;
}

.intro h1 {
 font-family: 'LatoLight';
	font-size: 1.5em;
	line-height: 2em;
	color: rgb(65,65,65);
	margin: 0px 0;
	margin-right: 20px;
	display: block;
}

#map-canvas {
	width: 100%;
	max-width: 550px;
	height: 250px;
	display: none;
}

#infomodal {
	display: none;
}

.modal-body {
		max-height: 350px;
		padding: 15px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
 }

.mobile .modal {
		position: fixed;
		top: 3%;
		right: 3%;
		left: 3%;
		width: auto;
		margin: 0;
}
.mobile .modal-body {
		height: 60%;
		max-height: 200px;
}

#print-btn { float: left; margin-left: 0; clear: both; }
.mobile #print-btn { display: none; }

input.payment-btn { float: left; margin-left: 0;}

.htunnus-info {
	font-size: 10px; position: absolute; width: 170px; margin-top: 3px; margin-left: 5px;
}

.fb-like {
	vertical-align: top;
}
	.fb_iframe_widget span {
	vertical-align: text-top !important;
}

.cart h2{font-size:1.4em;font-weight:300}
.cart h4{font-weight:300}
.cart label{font-weight:normal}
.cart a{text-decoration:underline}
.cart ul{padding:0 0 0 20px;margin:10px 0 0 0}
.cart .list-section{padding:15px;border-top:1px solid #ddd;overflow:hidden;}
.cart .list-section.selected{background:rgba(0,120,0,0.1)}

.cart .list-group{border:none}
.cart .list-group-item{border:1px solid #ddd;margin:10px 0;padding:0;}
.cart .list-group-item h4{padding:15px 15px 10px 15px;margin:0;background:#efefef}
.cart .alert{overflow:hidden}
.cart .section{background:#efefef;border:1px solid #ddd;border-radius:4px;padding:15px;margin:10px 0;overflow:hidden;}
.cart .section h2{margin:0 0 20px 0}
.cart .col-6{float:left;width:50%;}
.cart .col-6:first-child{padding-right:5px}
.cart .col-6:last-child{padding-left:5px}
.cart .list-group {padding-left: 0}


.multiple_select { top: 0px; background: #fff; padding: 0; height: 24px; width: 120px;}
.multiple_select ul li{
  float: left;
  margin: 0;
  padding: 0;
}
.multiple_select ul {
  width: 100%;
  height: 100%;
  padding: 0;
}
.multiple_select ul a {
  text-decoration: none;
  color: #fff;
  line-height: 24px;
  font-size: 20px;
}
.multiple_select ul .less, .multiple_select ul .more {
  background: none repeat scroll 0 0 rgb(120, 190, 55);
  height: 100%;
  border-radius: 4px;
  width: 24px;
  float: left;
}
.multiple_select ul .less a {
  line-height: 21px;
}
.multiple_select ul .more {
  float: right;
}

.multiple_select ul .count {
  border: 0;
  font-size: 10px;
  line-height: 24px;
  width: 72px;
}
.multiple_select ul .count .place_count {
  font-size: 14px;
}

.remove-participant {
    font-size: 16px;
}



.mobile .multiple_select {
    float: right;
    margin-right: 10px;
}
.mobile .courses .information a.allow_multiple {
  top: 28px !important;
}
.kokonaisuusinfo span {
    font-weight: bold;
}
.kokonaisuusinfo ul {
    margin-top: 0;
    list-style-type: disc;
    font-size: 12px;
}
.mobile .cart #send .btn-block {
    font-size: 12px;
    white-space: normal;
}
.cart #send {
    margin-bottom: 10px;
}
.cart .places_alert {
    margin-bottom: 10px;
}
.list-group-item-heading a {
    color: #333333;
    text-decoration: none;
}
.list-group-item-heading a:hover {
    color: #000
}
.cart .left {
    padding-bottom: 20px;
}

.lesson-list {
  /*display: none;*/
}
.lesson-list li {
  float: left;
  width: 250px;
  list-style-type: none;
}

.js-full-register {
  display: none;
}

.price {
  font-weight: bold;
}