/* **********************************************
* Navigation
********************************************** */

/*
* Bracken learner navigation.
*/

#brackenContainer .previousPageButton,
#brackenContainer .nextPageButton {
	visibility: hidden;
}

#brackenContainer .previousPageButton.visible,
#brackenContainer .nextPageButton.visible {
	visibility: visible;
}

#brackenContainer.printPreview .previousPageButton,
#brackenContainer.printPreview .nextPageButton {
	visibility: hidden;
}

#brackenContainer.printPreview .contentFooter {
	display: none;
}

@media print {
	#brackenContainer .headerBar,
	#brackenContainer .brackenPrintBar {
		display: none;
	}
}

#blockLayer {
	height: 655px;
	/*z-index: 900; - is this needed? */
}


#mediaManagerContainer {
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	z-index: 900;
}

	#mediaManagerContainer .mmContainer .mmMainHeight {
		height: 590px;
	}


/*
* Navigation
*/
.brButtonSize {
	width: 170px;
	height: 42px;
	margin: 0;
}

.brButton {
	display: none;
	color: white;
	font-size: 16px;
	border: none;
	background-color: #8DBB3D;
}

	.brButton:hover {
		background-color: #a1d546;
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
		transition: 0.3s;
	}

	.brButton:active {
		background-color: #698140;
	}

	.brButton .icon {
		display: inline-block;
		width: 24px;
		height: 36px;
		vertical-align: middle;
	}

		.brButton .icon.thumbsUp {
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 30 180 270" stroke="none" fill="white"><path d="M169 196 Q169 212 162 229 L142 229 Q127 246 110 253 Q105 254 102 254 Q95 254 86 251 L81 254 L75 254 Q54 254 54 240 Q54 238 54 237 Q39 235 39 222 Q39 220 40 218 Q28 215 28 204 Q28 200 31 195 Q24 187 24 177 Q24 151 73 151 Q71 137 65 127 Q56 110 56 101 Q56 89 63 82 Q69 77 82 74 L89 105 L115 133 Q124 145 137 161 Q140 163 162 163 Q169 179 169 196 ZM162 197 Q162 184 157 170 Q140 170 135 168 Q131 166 123 155 Q112 141 111 139 L83 109 L77 83 Q63 88 63 101 Q63 108 71 121 Q80 138 81 158 Q31 158 31 176 Q31 184 37 190 Q42 195 51 195 L59 196 L85 184 Q79 175 69 175 Q64 175 54 180 L47 180 L40 173 L52 173 Q61 169 68 169 Q86 169 95 187 L90 189 Q99 194 103 205 L98 207 Q104 211 110 221 L101 225 Q108 230 113 240 L95 247 Q100 248 103 248 Q103 248 108 248 Q127 237 138 222 L158 222 Q162 209 162 197 ZM94 201 Q89 195 82 193 L61 202 L54 202 Q43 202 37 199 Q36 202 36 204 Q36 213 53 213 L68 213 L94 201 ZM100 218 Q95 213 90 210 L69 220 L46 220 Q46 221 46 222 Q46 230 62 230 L73 230 L100 218 ZM103 237 Q100 234 94 228 L74 237 L61 237 L61 238 Q61 247 75 247 L80 247 L103 237 Z"/></svg>');
		}

		.brButton .icon.pushPin {
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 300 300" stroke="none" fill="white" ><path d="M273 131 Q273 145 269 153 Q268 154 262 158 Q257 162 250 164 Q245 165 246 165 Q249 165 234 163 L197 202 Q202 215 202 229 Q202 238 195 247 Q187 257 179 257 Q164 257 156 254 Q153 252 146 248 Q141 245 132 240 Q113 257 74 293 Q60 306 53 312 Q41 323 30 329 Q20 335 16 335 Q15 335 13 333 Q11 331 11 331 Q11 318 56 269 L106 215 Q96 197 94 192 Q89 182 89 168 Q89 166 92 160 Q100 144 118 144 Q125 144 130 145 Q131 145 144 149 Q146 149 165 132 Q183 115 183 112 Q183 110 182 106 Q182 101 182 99 Q182 100 183 95 Q187 72 215 72 Q231 72 252 94 Q273 115 273 131 ZM263 132 Q263 119 258 112 Q247 98 239 92 Q227 82 213 82 Q204 82 197 88 Q191 93 191 102 Q191 103 191 106 Q191 108 191 109 Q198 105 199 105 Q210 105 214 108 Q221 112 230 122 Q241 133 241 138 L241 149 Q241 149 236 155 L248 155 Q253 155 258 149 Q263 144 263 132 ZM236 144 Q236 141 233 135 Q231 129 229 127 Q220 115 209 112 Q204 110 202 110 Q202 110 197 112 Q192 114 192 115 Q189 117 179 126 Q170 136 150 157 Q156 161 168 169 Q171 172 176 177 L223 129 Q229 137 229 146 Q229 150 226 153 Q225 155 213 167 Q201 180 188 192 Q188 194 190 195 Q200 186 218 168 Q223 164 231 155 Q236 149 236 144 ZM192 225 Q192 221 189 211 Q189 209 188 204 Q176 179 151 164 Q148 162 142 158 Q129 154 120 154 Q114 154 112 155 Q108 156 104 162 Q99 168 99 171 Q99 192 116 209 Q119 206 123 201 Q127 196 128 195 Q131 192 137 192 Q143 192 148 198 Q154 203 154 209 Q154 215 148 221 Q142 226 137 231 Q147 240 154 243 Q163 247 174 247 Q178 247 184 242 Q190 238 191 234 Q192 230 192 225 ZM149 206 Q149 204 140 197 Q139 198 137 199 Q137 199 123 213 L63 273 Q57 279 45 291 Q43 293 35 304 Q25 317 17 329 Q31 321 56 301 Q72 287 95 262 Q127 229 135 222 Q149 208 149 206 ZM261 133 Q261 139 253 148 Q253 148 251 148 Q249 149 248 149 Q248 149 246 147 Q247 140 247 140 Q247 137 241 128 Q248 130 249 130 Q250 130 254 128 Q257 126 258 124 Q261 133 261 133 ZM145 207 Q116 237 89 265 Q78 276 54 299 Q54 299 28 319 L143 203 Q144 205 145 207 Z" stroke="none" /></svg>');
		}

		.brButton .icon.reload {
			font-size: 24px;
		}

/*
* Footer content
*/

	hoverMenuAnchor > .hoverMenuPopup {
		display: none;
}

	.hoverMenuAnchor[data-hover-menu-visible="true"] > .hoverMenuPopup {
		display: block;
	}

.contentFooter {
	position: relative;
	left: 58px;
	width: 952px;
}

.navigationScrollAnchor {
	position: relative;
	cursor: pointer;
}

	.navigationScrollAnchor .navigationScroll {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 2px;
		background-color: #e7e7e7;
		white-space: nowrap;
		overflow: hidden;
		overflow-x: auto;
	}

	.navigationScrollAnchor .navigationScroll li {
		display: inline-block;
	}

.lessonProgressBar {
	margin: 2px 0;
	background-color: #ccc;
	border-radius: 4px;
}

	.lessonProgressBar .fill {
		position: relative;
		height: 0.5em;
		width: 0;
		border-radius: 4px;
		transition: width 0.3s ease-out;
	}

		.lessonProgressBar .fill:after {
			content: " ";
			position: absolute;
			width: 0.5em;
			height: 0.5em;
			top: 0;
			right: -0.25em;
			border-radius: 50%;
		}

		.lessonProgressBar .fill,
		.lessonProgressBar .fill:after {
			background-color: #8DBB3D;
		}

.navigationButtons {
	position: absolute;
	right: 0;
}

.navigationSaving,
.lessonMarks {
	font-size: 16px;
	color: #8DBB3D;
}
.lessonMarks {
	text-align: center;
	padding-top: 0.8em;
}

	.lessonMarks #lessonPage {
		display: none;
	}

[data-lesson-mode-name="Wizard"] .lessonMarks {
	display: none;
}

.navigationSaving {
	position: absolute;
	left: 0;
}

.navigationSaving label {
	display: none;
}
.navigationSaving[data-save-progress="saving"] [data-save-progress="saving"],
.navigationSaving[data-save-progress="saved"] [data-save-progress="saved"] {
	display: inline-block;
}

/*
* Prev / next Buttons
*/
.previousPageButton,
.contentFrame,
.nextPageButton {
	display: inline-block;
	vertical-align: top;
}

@media print {
	.contentFrame {
		display: block;
	}
	.brackenPrintModulePage {
		page-break-inside: avoid;
	}
}

.previousPageButton,
.nextPageButton {
	display: inline-block;
	width: 58px;
	height: 602px;
	line-height:602px;
	vertical-align: middle;
	text-align: center;
	font-size: 64px;
	color: #8DBB3D;
	border: none;
	background-color: #fff;
}


	.previousPageButton:hover,
	.nextPageButton:hover {
		text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
		transition: 0.3s;
		text-decoration: none;
	}

	.previousPageButton:active,
	.nextPageButton:active {
	}

/*
* Transitions
*/

/* Content layer (incoming) */
#contentFrame #contentLayer,
#contentFrame #contentLayerOut {
	position: relative;
}

#contentFrame.canTransition.transition #contentLayer {
	opacity: 0;
}

#contentFrame.canTransition.transition.next #contentLayer {
	left: 20px;
}

#contentFrame.canTransition.transition.prev #contentLayer {
	left: -20px;
}

#contentFrame.canTransition.transitioned #contentLayer {
	left: 0;
	opacity: 1;
	transition: 0.5s;
}

/* Content layer out (outgoing) */
#contentFrame #contentLayerOut {
	display: none;
}

#contentFrame.canTransition #contentLayerOut {
	display: block;
}

#contentFrame.canTransition.transition #contentLayerOut {
	left: 0;
	opacity: 1;
}

#contentFrame.canTransition.transitioned.prev #contentLayerOut {
	left: +30px;
	opacity: 0;
	transition: 0.5s;
}

#contentFrame.canTransition.transitioned.next #contentLayerOut {
	left: -30px;
	opacity: 0;
	transition: 0.5s;
}