// 321-wide styles, excluding portal

@import "../../base/web_root/css/outofthebox/tandem_sequence.less";
@tandem-color-player1: orange;
@tandem-color-player2: yellow;

@import "common.less";




@tdu-header-height:                                  10vh;
@tdu-header-height-small:                            5vh;
@tdu-header-background:                              rgba(0,0,0,0.2);
@tdu-header-small-background:                        fade(@global-background, 95%);

@tdu-header-shadow-sticky:                           0 0 50px 1px rgba(0,0,0,0.2);
@tdu-header-shadow-teaser:                           0 0 150px 1px rgba(0,0,0,0.5);





//
// Styles for via's out of the box components
// Use these as a starting point, reuse them in your site's styles.
//

//
// Fonts
//


// @font-face {
// 		font-family: 'Roboto';
// 		font-style: normal;
// 		font-weight: 200;
// 		src: local('Roboto Thin'), local('Roboto-Thin'), url(//fonts.gstatic.com/s/roboto/v15/Jzo62I39jc0gQRrbndN6nfesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
// }
// @font-face {
// 		font-family: 'Roboto';
// 		font-style: normal;
// 		font-weight: 300;
// 		src: local('Roboto Light'), local('Roboto-Light'), url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
// }
// @font-face {
// 		font-family: 'Roboto';
// 		font-style: normal;
// 		font-weight: 400;
// 		src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
// }
// @font-face {
// 		font-family: 'Roboto';
// 		font-style: normal;
// 		font-weight: 500;
// 		src: local('Roboto Medium'), local('Roboto-Medium'), url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
// }
// @font-face {
// 		font-family: 'Roboto';
// 		font-style: normal;
// 		font-weight: 700;
// 		src: local('Roboto Bold'), local('Roboto-Bold'), url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
// }

@font-face {
		font-family: 'Permanent Marker';
		font-style: normal;
		font-weight: 400;
		src: local('Permanent Marker'), local('PermanentMarker'), url(//fonts.gstatic.com/s/permanentmarker/v5/9vYsg5VgPHKK8SXYbf3sMrg27BfaRSB61e9iDGqjWqk.ttf) format('truetype');
}

//
// UIkit
//

//@global-primary-background: @via-basic-background-color;

//Obsolete?
@position-darken-background:                     #f5f5f5;
@position-contrast-background:                   #111;
@position-padding:                               20px;

@subnav-line-border:                             @global-border;

// 
// Accordion
// 

@acc-number-background: #000;
@acc-number-color: #fff;
@acc-number-height: 31px; 
@acc-number-padding-top: 9px;
@acc-number-padding-left: 18px;

@acc-title-float: left;
@acc-title-padding-left: 20px;
@acc-title-padding-top: 9px;

@acc-subtitle-font-size: 0.7em;
@acc-subtitle-padding-top: 9px;


//
// Backgrounds
//

@fixed-background-a: url(../images/fixed-background-a.jpg);
@fixed-background-b: url(../images/fixed-background-b.jpg);
@fixed-background-c: url(../images/fixed-background-c.jpg);
@fixed-background-height: 22rem;





//
// Misc
//

@rand-auswahlbox:  3px solid @global-primary-background;
@auswahltextgroesse: 16px;
@iconkachel-groesse:    24px;

//
// Claim fuer 321 via
//

@claim-padding-left: 200px;
@claim-p-height:0.4em;



//
// Teaser & Header
//

@teaser-background:                              none;



//
// Panel Box Border
//

@panel-box-border-padding:                      15px;
@panel-box-border-border:                       @global-border;
@panel-box-border-width:                        3px;


//
// Headline Border
//

@headline-border-width:                          3px;
@headline-border-border:                         @global-primary-background;
@headline-border-padding:                        15px;



//
// Facebook
//
@facebook-blue: #4267B2;


// ===================================================================================

//
// Only for Development. Might put it in development.less but this
// will be needed for staging platform aswell.
// 

div.devDummy {
		background-color: #eee;
		padding: 0.5em;
		border: 1ps solid #ccc;
		margin: 1em 0;
}


// ===================================================================================


//
// Basic styles
//

table {
		border-collapse: collapse;
		
		td, th {
				border-bottom: 1px solid #999;
				padding: 2px 5px;
		}
}


option {		
		font-size: @auswahltextgroesse;
}





.uk-button {
		&.level-a1, &.level-a2, &.level-b1, &.level-b2, &.level-c1, &.level-c2 {
				.level-badge();																																		 
				margin: 0.3em;
				width: 50px;
				height: 50px;
				padding: 0;
				text-align: center;

				&.selected,
				&:hover {
						border: 6px solid white;
				}
		}
}


img.icon {
    width: 20px;
    height: 20px;		
}



.uk-button, button {
		margin-top: 0.3em;
		margin-bottom: 0.3em;
		small {
				margin-left: 0.5em;
		}
}


//
// Hintergrund/bild eingeloggt
//

body.loggedIn {
		div.core {
				background-color: white;
				min-height: 500px;
		}
}


// ===================================================================================

//
// module design
//
div.moduleCard {

		> img { width: 100% }
		
		&.mini {
				@pad: 0.7em;
				padding: @pad @pad 0.2em @pad;

				div.title {
						//						text-transform: uppercase;
				}

				span.level-badge {
						right: @pad * 1.1;
						top: @pad * 1.1;
						border: 1px solid;
				}

				span.exam-badge {
						right: @pad * 1.1;
						top: @pad * 3.1;
						border: 2px solid;
				}
		}

		&.normal {
				@pad: 1.5em;
				padding: @pad @pad 0.5em @pad;
				
				span.level-badge {
						right: @pad * 1.1;
						top: @pad * 1.1;
						border: 2px solid;
				}

				span.exam-badge {
						right: @pad * 1.1;
						top: @pad * 3.1;
						border: 2px solid;
				}
		}
		
		.badge-in-card() {
				position: absolute;
				vertical-align: text-bottom;
				text-align: center;
				width: 30px;
				height: 30px;
		}
		
		span.level-badge {
				.badge-in-card();
		}		

		span.done-badge, span.inWork-badge {
				// OPTIMIZE
				-webkit-border-radius: 55px;
				-moz-border-radius: 55px;
				border-radius: 55px;
				position: absolute;
				left: -10px;
				top: -10px;
				color: white;
				// background-color: black;
				vertical-align: text-bottom;
				text-align: center;
				width: 30px;
				height: 30px;
				font-size: 20px;

				span.uk-icon {
						// OPTIMIZE
						vertical-align: text-bottom;
						text-align: center;
						margin-top: 4px;
				}
		}

		span.done-badge {
				background-color: black;
		}
		span.inWork-badge {
				background-color: gray;
		}

		span.exam-badge {
				.level-badge();
				.badge-in-card();
				color: black;
				background-color: yellow;
		}


		.tdu-angaben-box {
				img.tdu-kuchen {
						width: @iconkachel-groesse; 
						padding-right: 10px;
						background-color: none;
				}

				ul.activityTypeTags {
						margin: 0;
						padding: 0;
						list-style-type: none;
						display: inline-block;

						li {
								display: inline-block;
								margin-right: 3px;

								+ li {
										border-left: 1px solid black;
										padding-left: 3px;
								}
								
								span.activityTypeCount {
										font-weight: bold;
										color: black;
								}
								
								img.iconActivityType {
										width:     @iconkachel-groesse;
										height:    @iconkachel-groesse;
								}
						}
				}
		}




		div.tdu-titel-box {
				font-size: 120%;
				text-transform: uppercase;
				color: #fff;
				padding: 10px 0px 9px 0px;
				min-height: 2em;
		}

		div.tdu-tags {
				margin-top: 15px;
				padding-top: 4px;
				border-top: 1px dotted #fff;
				color:  #fff;
				font-size: 0.8em;
				line-height: 1.3em;
				height: 4em;
				overflow: hidden;
		}

		div.rating {
				margin-top: 4px;
				color:  #fff;
				height: 1.2em;
		}
		
}








div.coreContainer {

		div.core {
				@pad: 0.5em;
				padding: 0 @pad @pad @pad;

				.expandToCore {
						margin-left: -@pad;
						margin-right: -@pad;
						// padding-left: @pad;
						// padding-right: @pad;
				}
		}
}



div.inputDialog {
		textarea {
 				width: 500px;
		}
}


div.flashMessages {
		margin-top: 20px;
}

div.VIAExamTeacherAnalyzer {

		div.analyticsLegend {
				margin: 10px 0;

				div.colorScale {
						margin: 10px 0;
						color: gray;
						font-size: 75%;
				}
		}
		
		span.analyticsBox {
				display: inline-block;
				padding: 3px;

				span.analyticsDetails {
						margin-left: 5px;
						margin-right: 5px;
						padding: 2px 5px;
				}
		}

		div.audioPlayer,
		div.videoPlayer,
		div.imageDisplayer {
				margin: 10px 0;
		}

		span.clozeTextPlaceholder {
				.clozeTextPlaceholder;
				display: inline-block;
				min-height: 1em;
				vertical-align: middle;
				width: 5em;
		}
		
}



div.VIALoginBaseComponent {
		a.facebookLogin {
				margin-right: 2em;
				img.facebookLogo {
						width: 40px;
						margin-right: 5px;
				}				
		}
		a.googleLogin {
				margin-right: 2em;
				img.googleLogo {
						width: 40px;
						margin-right: 5px;
						background-color: white;
						border: 3px solid white;
				}				
		}
}



// a.backButtonAnchor, input.check.submit  { 
//     background-color: @global-primary-background;
//     color: #fff;
//     font-weight: normal;
//     font-size: 1em;
//     padding: 4px 10px 4px 10px;

// 		border-radius:@radius-auswahlbox;
// }

// a.backButtonAnchor:hover {
// 		color: #ddd;   
// }
// Back button

// div.backButton {
// 		padding-top: 0.5em;
// }


div.acc-bar {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    cursor: pointer;
		padding: 00px;
		height: 40px;
		color: #fff;
    border: none;

		&.ignored {
				background-color: #bbb;
				color: #ddd;
		}
		
		.acc-number {
				background-color:               @acc-number-background;
				color:                          @acc-number-color;
				height:                         @acc-number-height; 
				padding-top:                    @acc-number-padding-top;
				padding-left:                   @acc-number-padding-left;   
				
				font-weight: bold;
				width: 30px;
				float: left;
				border: none;
				position: relative; 
		}

		.acc-icon  {
				float: left; 
 				color: #fff;
				text-align: center;
				padding-left:10px; 
				padding-top: 9px; 
				font-size: 1.4em;
				min-width: 20px;
				height: 20px;

				img.icon {
						background-color: #fff;
				}
		}

		.acc-title {
				float:                    @acc-title-float;
				padding-left:             @acc-title-padding-left;
				padding-top:              @acc-title-padding-top;
		}

		.acc-toggle  {
				float: right; 
				width:20px;
				height: 20px;
				padding-top: 10px;
				margin-left: 20px;
				margin-right: 20px;
		}


		.acc-subtitle {
				font-size: @acc-subtitle-font-size;
				padding-top: @acc-subtitle-padding-top;
				float: right;
				white-space: nowrap;
		}
}


// ==================================================================================

//
// Styles for exercising tasks
//

@wrongColor: inherit;
@correctColor: #efe;
@dragHandleOffset: 25px;


.noUserSelect() {
		
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		cursor: default;
}

.noTouch() {
		touch-action: none;
}

.draggable() {
		.noUserSelect();
		.noTouch();
		cursor: move;
}

.dropHover() {
		&.dropHover {
				background-color: @dropTargetHoverColor;
		}
}


figure.inlineAssetImage {
		display: inline-block;

		// figcaption {
		// 		display: none;
		// }
}

.correct {
		background-color: #cfc;
}

.wrong {
		background-color: @wrongColor;
}

span.partiallyCorrectIcon {
		color: orange;
}

span.correctIcon {
		color: #1a1;
}

span.wrongIcon {
		color: #666;
		padding-left: 4px;
		padding-right: 2px;
}

div.webui-popover {
		span.markAsEmpty {
				cursor: pointer;
				border: 2px solid green;

				&.active {
						background-color: green;
				}
		}
}

div.pillarParagraph {
		// Anstelle eines echten p-Tags, weil das nicht schachtelbar ist
		margin-top: 5px;

		figure.inlineAssetImage {
				span.assetInfo {
						.uk-text-muted();
						cursor: pointer;
						float: right;
				}
		}

}



div.VIAExerciserSolutionComponent,
div.VIAExerciserFinishedComponent {
		.solution {
				// background-color: lightyellow;

				&.answerWasWrong {
						// background-color: @wrongColor;
				}

				&.answerWasCorrect {
						background-color: @correctColor;
				}
		}
}

// div.VIAExerciserFinishedComponent {
// 		.solution {

// 				&.answerWasWrong {
// 						// background-color: transparent;
// 				}

// 		}
// }



//
// Embedded module UI
//
div.embeddedModule {
		// div.core {
		// 		margin: 0;
		// }

		div.VIAModuleExerciser {
				padding: 0;
		}
		
		div.VIAEmbeddedModuleExerciser {
				div.taskExercise {
						position: relative;
						a.clickOverlay {
								position: absolute;
								z-index: 999;
								top: 0px;
								left: 0px;
								height: 100%;
								width: 100%;
								
								> * {
										pointer-events: none;
								}
						}

						a.start {
								background: #f00;
								color: #fff;
								border:  0px;
								padding: 3px;
								// font-size: 1.2em;
								cursor: pointer;
						}

						
				}
		}
}

span.copyPaste, pre.copyPaste {
		cursor: pointer;
}


//
// Styles for an exercise
//
div.exercise {
		
		@dropTargetHoverColor: yellow;
		font-weight: 500; // semibold in exercises

		margin-bottom: 50px;

		div.topToolbar {
				float: right;
		}
		
		h1 {
				font-size: 120%;
		}

		h2 {
				font-size: 110%;
		}

		h3 {
				font-size: 100%;
		}

		table {
				border: 1px solid #999;
				border-collapse: collapse;
				
				td, th {
						border: 1px solid #999;
						padding: 2px 5px;
				}
		}

		
		input[type=text] {
				font: inherit;
				padding: 0 2px;
				margin: -2px 0;
		}

		input[type=text].clozeTextPlaceholder {
				.clozeTextPlaceholder;

				&:focus {
						outline: 1px solid #ccc;
						background-color: #ffd;
				}

				// Intentionally set as empty by user
				&.markedAsEmpty {
						background-color: black;
				}
		}

		
		input, select, textarea {
				// font-family: @base-body-font-family;
		}

		p {
				margin-top: 3px;
				margin-bottom: 3px;
		}


		
		div.selectOneInput, div.selectPointsInput {
				margin-bottom: 10px;

				label:hover {
						background-color: #eee;
				}

				span.wrongIcon {
						// position: absolute;
						// left: -15px;
				}


		}

		select.selectOneInput {
				max-width: 100%;
		}

		div.selectMany {
				label:hover {
						background-color: #eee;
				}

				span.wrongIcon {
						position: absolute;
						left: -15px;
				}
		}
		
		div.clozeText {
				line-height: 1.8em;

				div.selectOneInput {
						display: inline-block;
				}


				span.dragDropDraggable {
						.draggable();
						
						background-color: #eee;
						padding: 1px 2px;
						border: 1px solid #ccc;

						// margin-bottom: 10px;
						// line-height: normal;
						display: inline-block;

						&:hover {
								border: 1px solid black;
						}

						figure.inlineAssetImage {
								display: inline-block;

								figcaption {
										display: none;
								}
						}
						
				}
				
				span.dragDropTarget {
						display: inline-block;
						min-width: 100px;
						background-color: #eee;
						padding-left: 5px;
						min-height: 1em;
						border-top: none;
						border-left: none;
						border-right: none;
						border-bottom: @borderBottomClozePlaceholders;

						.dropHover();

						// Drag element in a drop container
						span.dragDropDraggable {
								margin-right: 5px;
						}
						// Container, combining correction and element
						span.draggableContainer {
								white-space: nowrap;
								display: inline-block;
						}

				}

				div.dragDropDraggables {
						background-color: #eee;
						border: 1px dotted black;
						margin: 10px 0;
						padding: 1px 5px;
						min-height: 20px;

						.dropHover();
						
						span.dragDropDraggable {
								.draggable();
								
								margin-right: 5px;
								// line-height: normal;
								display: inline-block;

								figure.inlineAssetImage {
										display: inline-block;

										figcaption {
												display: none;
										}
										
										// span.assetInfo {
										// 		.uk-text-muted();
										// 		cursor: pointer;
										// 		float: right;
										// }
								}
								
						}
				}

		}

		div.buttons {

				margin-top: 15px;

				input.submit, button {
						&.check, &.reset, &.recheck, &.revealAnswers, &.save {
								background: #f00;
								color: #fff;
								border:  0px;
								padding: 10px;
								font-size: 1.2em;
								cursor: pointer;
						}
				}

		}


		div.audioPlayer {
				//				width: 50%;
				margin: 10px 0px;
				span.assetInfo {
						float: right;
				}

				
				div.transcriptionContainer {

						div.transcriptionText {
								font-size: 90%;
								line-height: normal;
						}

						
						div.audioTranscription {
								&.disabled {
										.uk-hidden();
								}

								button.printThis {
										float: right;
								}
						}

				}
				
		}

		
		div.videoPlayer {
				
				div.videoContainer {
						margin-right: 10px;
				}

				div.transcriptionContainer {

						div.videoTranscription {
								&.disabled {
										.uk-hidden();
								}

								button.printThis {
										float: right;
								}
						}

						div.transcriptionText {
								font-size: 90%;
								line-height: normal;
						}
				}

				span.assetInfo {
						float: right;
				}
		}

		div.imageDisplayer {
				span.image {
						display: inline-block;
						text-align: right;
						img {
								display: block;
						}
						span.assetInfo {
						}
						
				}
		}

		span.assetInfo {
				.uk-text-muted();
				cursor: pointer;
		}

		span.hintSymbol {
				margin-left: 3px;
				margin-right: 3px;
		}


		div.mapPairs {
				@pairBorder: 1px solid black;
				
				border-top: @pairBorder;
				display: table;
				border-collapse: collapse;
				
				div.objectPair {
						display: table-row;
						border-bottom: @pairBorder;

						.dropHover();

						span.hintSymbol {
								float:left;
								margin-left: -20px;
								margin-top: 10px;
						}
						
						div.leftObject {
								display: table-cell;
								padding-left: 10px;
						}

						div.middleColumn {
								display: table-cell;
						}

						div.rightObject {
								display: table-cell;
								padding: 5px 10px 5px (@dragHandleOffset + 10px);

								div.objectPairDraggable {
										background-color: #eee;
										padding: 10px;
										border: 1px solid #ddd;
										margin-bottom: 10px;

										.draggable();

										&:hover {
												border: 1px solid #333;
										}

										&:only-child {
												margin-bottom: 0;
										}

										&:not(:first-child) {
												background-color: #f99;
										}

										span.dragHandle {
												position: absolute;
												margin-left: -@dragHandleOffset;
										}

								}
						}
				}
				
		}

		div.score {
				margin-top: 30px;
				background-color: white;
		}


		div.orderItems {
				ul.orderItemsList {
						list-style: none;
						padding: 0;

						li.orderItem {
								@pairBorder: 1px solid black;
								@pad: 0.3em;

								&:hover {
										background-color: #eee;
								}
								
								border-top: @pairBorder;
								&:last-child {
										border-bottom: @pairBorder;
								}
								
								cursor: move;
								display: flex;
								justify-content: flex-start;
								align-items: flex-start;
								margin-top: 0;
								margin-bottom: 0;
								padding: @pad 0;

								div.orderSymbol {
										flex: 0 0 2rem;
								}
						}
				}
		}
		
}

span.dictionaryEntry {
		border-bottom: 1px dotted #333;
}

div.objectPairDragHelper {
		padding: 10px;
		border: 1px solid black;
}

div.highlightAreas {

		.noUserSelect();
		.noTouch();
		//		cursor: url('/files/images/horizontal-text-select.cur'), default;
		//		font-size: 120%;
		letter-spacing: 0.1em;
		//Nicht, hinterlässt weisse verratene Lücken beim Markieren		word-spacing: 0.1em;
		padding: 10px;
		margin: 15px 0;
		border: 1px solid #aaa;

		span.highlightArea.solution {
				//				background-color: #ddd;
				border: 1px solid #333;
				padding-left: 1px;
		}

		div.pillarParagraph:first-child {
				margin-top: 0;
		}
		
		// Version 2 ==========================
		span.selChar {
				cursor: url('/images/horizontal-text-select.cur'), text;
				//				cursor: text;
				&.highlighted {
						background-color: green;
						color: white;
						padding-top: 1px;
				}
				&.selected {
						background-color: red;
				}
		}
		

		// Version 1 =========================
		// 		::selection {
		// 				// background-color: #ddd;
		// 				// color: red;
		// 				background-color: green;
		// 				color: white;
		// 		}
		
		// 		.selectedText { // , ::selection
		// 				// Nicht, weil das die Fragmente sichtbar macht &:hover {
		// 				// 		background-color: #ada;
		// 				// }
		
		// 				background-color: green;
		// 				color: white;
		// //				cursor: pointer;
		// 				cursor: url('/files/images/selection-remove.cur'), default;
		// 				padding-top: 1px;
		// 		}

}

div.taskGroup {
		
		div.taskGroupItem {
				margin: 10px 0px;
		}
}

button.taskBrickGroupToggler {
		background-color: #999;

		&:hover {
				background: black;
		}
}

div.taskBrickGroup {
		padding: 5px;
}

.finished {
		background-color: #999;
}

.inWork {
		background-color: #999;
}

div.moduleScore {

		table.scoreTable {
				border-collapse: collapse;

				td {
						border: 1px solid black;

						&.ignored {
								background-color: #999;
								color: #666;
						}

						span.taskNumber {
								font-size: 14px;
								margin: 0 5px;
								font-weight: bold;
						}

				}
				
		}
}

div.moduleBody {
		clear: both;
		position: relative; // Wichtig, damit eingebettete versteckte absolute-Elemente die Breite korrekt berechnen können
}

div.searchResults {
		h2 {
				margin-top: 20px;
		}
}


div.VIAExamsModuleTeacherComponent {
		padding: 0.5em;
}























































body {
		&.loggedIn {
				//		background-color: lighten(desaturate(@global-primary-background, 30%), 110%, relative);
				//		background-color: #eee;

				// Kein Background mehr laut Sara
				// background-image: @fixed-background-b;	
				// -webkit-background-size: cover;
				// -moz-background-size: cover;
				// -o-background-size: cover;
				// background-size: cover;
				// background-attachment: fixed;

				background-color: white;

				div.core {
						//				background: rgba(255,255,255,0.8);
						background-color: white;
						min-height: 500px;
				}
		}
}





//
// header 
//
div.tdu-header {
    
		background-color: @global-background;

		img.tdu-logo {
				height: @tdu-header-height;
				width: auto;
				min-height: 3em;
		}

		.tdu-claim {
				//		padding-left: @claim-padding-left;
				font-size: 16px;
				vertical-align: top;
				// line-height: 22px;
				margin-top: 1em;

				p {
						line-height: @claim-p-height;
				}

		}

		ul.uk-navbar-nav {
				margin-top: 1em;
		}

		a.mainMenuToggler {
				span.uk-icon {
						margin-right: 0.2em;
				}
		}
		
		&.uk-active {

				height: @tdu-header-height-small;
				box-shadow: @tdu-header-shadow-sticky !important;
				background: @tdu-header-small-background;

				> .uk-container {
						height: @tdu-header-height-small;

						div.uk-navbar-right, div.uk-navbar-left {
								align-items: flex-start;
						}
				}

				//    .uk-dropdown-navbar { margin-top: 15px; }

				// .uk-navbar-nav > li:not(.uk-active) > a {
				// 		color: @navbar-nav-item-color !important;				
				// }

				//    .uk-navbar-toggle { color: @navbar-toggle-color !important; }

		}

		// Menu, in navbar or in offcanvas
		#mainMenu {
				ul.uk-nav, ul.uk-navbar-nav {
						// Login Menu, Facebook-Vorgaben
						li.loginMenu {
								ul.loginMenu {
										background-color: #f6f6f6;
										padding: 5px;

										a {
												&:hover {
														color: @base-link-color;
												}
												color: #333;

												.icon {
														width: 20px;
												}
										}
										
										li.facebookLogin, li.googleLogin {
												// padding-left: 2px;
												// background-color: #f6f6f6;

												a.facebookLogin, a.googleLogin {
														// &:hover {
														// 		color: @base-link-color;
														// }
														// color: #333;

														img.facebookLogo {
																width: 20px;
														}

														img.googleLogo {
																width: 16px;
																margin: 2px;
														}
												}
										}
								}
						}
				}

				&.uk-offcanvas {
						ul.uk-nav {
								li {
										a {
												color: white;
										}
								}
						}
				}
		}

}


div.searchBarContainer {

		background-color: @global-primary-background;
		padding: 1.5em 0;
 		border-bottom: darken(@global-primary-background, 20%) 5px solid;

		div.searchBar {

				padding: 0 0.3em;
				
				div.uk-search {

						input.uk-search-input {
								background-color: #fff;   
								border-radius: 12px;
						}
						
						// button.searchButton
						// {
						// 		background-color: @via-coloredbutton-color;
						// 		border: 2px solid white;
						// 		&:hover {
						// 				background-color: @via-coloredbutton-hover-color;
						// 		}
						// }

						
				}

				button.actionButton, button.levelButton {
						.level-badge();																																		 
						margin: 0.3em;
						width: 50px;
						height: 50px;
						padding: 0;
						text-align: center;

						&.selected,
						&:hover {
								border: 6px solid white;
						}
				}
				
				div.extendedSearch {
						margin: 20px 0 0 0;
				}
		}
}



div.VIAModuleSearchComponent {
		div.mapContainer.swissMap {
				margin: 50px auto;
				width: 50%;
		}
}

nav.tdu-navbar {
		ul.uk-navbar-nav > li {
				span.menuDivider {
						display: inline-block;
						width: 1px;
						height: 30px;
						background-color: @global-primary-background;
						// -webkit-transform: rotate(20deg);
	    			// -ms-transform: rotate(20deg);
						transform: rotate(20deg);
				}

		}
}



//
// ModuleExerciser
//
div.VIATduModuleExerciser {
		
		padding-left: 0.5em;
		padding-right: 0.5em;

		// 
		// Titel besser
		//
		h2.moduleTitle {
				padding:5px 5px 5px 5px;
				background-color: #fff;
				border-bottom: 1px solid #F00;
				font-weight: 200;
				font-size: 2em;

				span.level-badge {
						width: 50px;
						height: 50px;
						padding: 5px;
				}

				span.rating {
						float: right;
				}
		}

		div.moduleMenu {
				div.rating {
						a.noRating {
								color: @global-muted-color;
						}
				}
		}

		div.hiddenTaskExercise {
				position: absolute !important;
				top: -9999px !important;
				left: -9999px !important;
				width: 100%; // TODO: Smarter, aber ich fand nicht heraus, wo die Breite drin steht. Wir brauchen aber eine feste Breite, damit die Berechnung per JS OK ist
				visibility: hidden;
		}

		
		div.moduleFootnotes {
				margin-top: 20px;
				border: 1px solid #ddd;
				padding: 5px;
		}

		div.teacherNotes {
				.uk-hidden();
		}

		div.swissgermanToolbox {
				margin-bottom: 5px;
		}

		
		div.moduleDetails {
				@indent: 2rem;
				
				margin-top: 10px;
				margin-bottom: 20px;
				//				padding-left: 1em;

				// Should all be onliners
				// > div {
				// 		white-space: nowrap;
				// }
				
				svg.icon.bullet {
						width: @indent;
						text-align: left;
				}
				
				span.moduleEmbedHtml {
						font-family: monospace;
						display: block;
						font-size: 80%;
						border: 1px solid #666;
						line-height: 0.9em;
						padding: 3px;
						margin: 2px 0 4px @indent;
						//						background-color: #eee;
						color: #999;
						word-break: break-all;
						
				}

				span.modulePermalink {
						font-size: 90%;
						white-space: nowrap;
				}

				div.moduleMenu {
						
						div.rating {
								a.noRating {
										color: @global-muted-color;
								}
						}
				}
				
		}
		

		
}

//
// Exam Exerciser
//
div.VIATduExamModuleExerciser {

		div.submitExam {

				margin-top: 75px;
				
				.uk-button.submitExam {
						background: #f00;
						color: #fff;
						border:  0px;
						padding: 10px;
						font-size: 1.2em;
				}
		}
}


//
// Personal portfolio
//
div.VIAMyPortfolioComponent {
		div.certificatePreview {
				border: 20px white solid;
				margin-top: 15px;
		}

		a.certificatePreview,
		a.certificatePreview:hover {
				color: inherit;
		}

}




//
// Home
//
div.VIAPublicHomeComponent {
		div#award {
				position: absolute;
		}

		div.sisterSites {
				margin: 0 30% 0 0;
				text-align: right;

				a {
						color: white;
						padding: 2px 1em;
						white-space: nowrap;

						&:hover {
								color: black;
						}
						&.site321partez {
								background-color: @tdu-language-color-fr;
						}
						&.site321via {
								background-color: @tdu-language-color-it;
						}
						&.site321los {
								background-color: @tdu-language-color-de;
						}
				}
		}
		
		div.jumbo {
				position: relative;
				
				// a.loginButton {
				// 		display: block;
				// 		max-width: 20em;
				// 		width: 75%;
				// 		margin: (@fixed-background-height*0.6) auto 0 auto;
				// 		font-size: 2em;
				// 		line-height: 2em;
				// 		background-color: rgba(50,50,50,0.7);
				// 		border: 2px solid grey;
				// 		color: white;

				// 		&:hover {
				// 				background-color: rgba(50,50,50,1);
								
				// 		}
				// }

				.waveBorder('#svgPathClip1', 60px, white);
				div.waveBorder {
						position: absolute;
						bottom: 0;
				}
				
		}

}





//
// Fixed backgrounds variants
//

.tdu-fixed-background-a,
.tdu-fixed-background-b,
.tdu-fixed-background-c {
    background-attachment: fixed;
    background-size: cover;
    padding: @position-padding 0;
    position: relative;
    box-shadow: inset 0 0 150px 1px rgba(0,0,0,0.5);
		min-height: @fixed-background-height;
}

.tdu-fixed-background-a { background-image: @tdu-fixed-background-a; }
.tdu-fixed-background-b { background-image: @tdu-fixed-background-b; }
.tdu-fixed-background-c { background-image: @tdu-fixed-background-c; }


/* Breakpoints
 ========================================================================== */

// Small and bigger
@media (min-width: @breakpoint-small) {

		div.coreContainer {
				//				padding-top: 1em;
				// padding-left: 2em;
				// padding-right: 2em;
		}

		div.VIAMyPortfolioComponent {
				div.certificatePreview {
						transform: translate(-25%, -25%) scale(0.5);
				}
		}
		
}

// Not small phones
@media (min-width: @breakpoint-small-max) {
		body.loggedIn {
				background-color: #eee;
				div.core {
						min-height: 500px;
				}
		}

		div.VIATduModuleExerciser {
				.uk-container();
				div.moduleDetails {
						padding-left: 1em;
				}
		}

		// Fixed footer
		div.footerContainer {
				position: fixed;
				z-index: 15;
				bottom: 0;
				width: 100%;
		}

		div.coreContainer {
				// Wegen fixem footer:
				padding-bottom: (@footer-min-height*2) + 25px;
		}
		
}

// Only small phones
@media (max-width: @breakpoint-small) {

		body.loggedIn {
				background-attachment: scroll;
		}

		// div.tdu-header {
		// 		border-bottom: 2px solid #eee;
		// }

		.tdu-fixed-background-a,
    .tdu-fixed-background-b,
    .tdu-fixed-background-c { background-attachment: scroll; }

		
    .uk-navbar-brand,
    .uk-navbar-content { padding: 0 !important; }

    .uk-navbar-toggle { padding-right: 0; }

    h1, .uk-h1 {
        font-size: @base-h1-font-size - 10px;
        line-height: @base-h1-line-height - 10px;
    }

    h2, .uk-h2 {
        font-size: @base-h2-font-size - 10px;
        line-height: @base-h2-line-height - 10px;
    }

    h3, .uk-h3 {
        font-size: @base-h3-font-size - 10px;
        line-height: @base-h3-line-height - 10px;
    }

    h4, .uk-h4 {
        font-size: @base-h4-font-size - 2px;
        line-height: @base-h4-line-height - 2px;
    }

    h5, .uk-h5 {
        font-size: @base-h5-font-size;
        line-height: @base-h5-line-height;
    }

    h6, .uk-h6 {
        font-size: @base-h6-font-size;
        line-height: @base-h6-line-height;
    }

    .tdu-position-teaser { position: absolute !important; }

		div.moduleCard {

				&.mini {
						padding: 0.2em;
				}

				&.normal {
						padding: 0.5em;
				}


				div.tdu-titel-box {
						font-size: 90%;
						line-height: normal;
				}

		}

		div.VIAPublicHomeComponent {

				div.sisterSites {
						margin: 0 auto;
						text-align: center;
				}
				
				div.jumbo {
						div.waveBorder {
								height: 30px;
						}
				}
		}
		

}




// Emacs!! For development we use 321via as the reference
// Local Variables:
// less-css-compile-at-save: t
// less-css-input-file-name: "styles_321via.less"
// less-css-output-file-name: "styles_321via.css"
// End:
