// Ribbon theme for Shower HTML presentation engine: github.com/shower/shower
// Copyright © 2010–2013 Vadim Makeev, pepelsbey.net
// Licensed under MIT license: github.com/shower/shower/wiki/MIT-License

@import 'defaults';
@import 'fonts';
@import 'reset';

body {
	counter-reset:slide;
	font:25px/2 'PT Sans', sans-serif;
	}
a {
	text-decoration:none;
	}

// Caption
// -------------------------------
.caption {
	display:none;
	margin:0 0 50px;
	color:#3C3D40;
	text-shadow:0 1px 1px #8D8E90;
	h1 {
		font:bold 50px/1 'PT Sans Narrow', sans-serif;
		}
	a {
		color:$blue;
		text-shadow:0 -1px 1px #1F3F60;
		text-decoration:none;
		&:hover {
			color:lighten($blue, 5%);
			}
		}
	}

// Badge
// -------------------------------
.badge {
	position:absolute;
	top:0;
	right:0;
	display:none;
	overflow:hidden;
	visibility:hidden;
	width:11em;
	height:11em;
	line-height:2.5;
	font-size:15px;
	}
	.badge a {
		position:absolute;
		bottom:50%;
		right:-50%;
		left:-50%;
		visibility:visible;
		background:$blue;
		box-shadow:0 0 1em rgba(#000, 0.3);
		color:#FFF;
		text-decoration:none;
		text-align:center;
		@include transform-origin(50% 100%);
		@include transform(rotate(45deg) translateY(-1em));
		&:hover {
			background:lighten($blue, 3%);
			}
		}

// Slide
// -------------------------------
.slide {
	position:relative;
	width:$width;
	height:$height;
	background:#FFF;
	color:#000;
	-webkit-print-color-adjust:exact;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	// Number
	&:after {
		position:absolute;
		top:0;
		right:119px;
		padding:20px 0 0;
		width:50px;
		height:80px;
		background:url(../images/ribbon.svg) no-repeat;
		color:#FFF;
		counter-increment:slide;
		content:counter(slide);
		text-align:center;
		font-size:20px;
		}
	// Inner
	> div {
		position:absolute;
		top:0;
		left:0;
		overflow:hidden;
		padding:$top $sides 0;
		width:$width - $sides * 2;
		height:$height - $top;
		}
	// Debug
	.debug & {
		background:#FFF url(../images/grid-#{$ratio}.svg) no-repeat;
		}
	}

// Elements
// -------------------------------
.slide {
	// Header
	h2 {
		margin:0 0 37px;
		color:#666;
		font:bold 50px/1 'PT Sans Narrow', sans-serif;
		}
	// Text
	p {
		margin:0 0 50px;
		}
	p.note {
		color:#999;
		}
	a {
		border-bottom:0.1em solid;
		color:$blue;
		}
	b, strong {
		font-weight:bold;
		}
	i, em {
		font-style:italic;
		}
	kbd, code, samp {
		padding:3px 8px;
		border-radius:8px;
		background:$yellow;
		color:#000;
		@include tab-size(4);
		line-height:1;
		font-family:'PT Mono', monospace;
		}
	// Quote
	blockquote {
		font-style:italic;
		&:before {
			position:absolute;
			margin:-16px 0 0 -80px;
			color:#CCC;
			font:200px/1 'PT Sans', sans-serif;
			content:'\201C';
			}
		& + figcaption {
			margin:-50px 0 50px;
			font-style:italic;
			font-weight:bold;
			}
		}
	// Lists
	ol, ul {
		margin:0 0 50px;
		counter-reset:list;
		li {
			text-indent:-2em;
			&:before {
				display:inline-block;
				width:2em;
				color:#BBB;
				text-align:right;
				}
			}
		ol,
		ul {
			margin:0 0 0 2em;
			}
		}
	ul > li:before {
		content:'\2022\00A0\00A0';
		}
	ul > li:lang(ru):before {
		content:'\2014\00A0\00A0';
		}
	ol > li:before {
		counter-increment:list;
		content:counter(list)'.\00A0';
		}
	// Code
	pre {
		margin:0 0 49px;
		padding:1px 0 0;
		counter-reset:code;
		white-space:normal;
		code {
			display:block;
			padding:0;
			background:none;
			white-space:pre;
			line-height:50px;
			&:before {
				position:absolute;
				margin:0 0 0 -110px;
				width:100px;
				color:#BBB;
				text-align:right;
				counter-increment:code;
				content:counter(code, decimal-leading-zero)'.';
				}
			&:only-child:before {
				content:'';
				}
			}
		mark {
			padding:3px 8px;
			border-radius:8px;
			background:#F7FCA0;
			color:#000;
			font-style:normal;
			&.important {
				background:#C00;
				color:#FFF;
				font-weight:normal;
				}
			&.comment {
				padding:0;
				background:none;
				color:#999;
				}
			}
		}
	// Table
	table {
		margin:0 0 50px;
		width:100%;
		border-collapse:collapse;
		border-spacing:0;
		th, td {
			background:url($dot) 0 100% repeat-x;
			}
		th {
			text-align:left;
			font-weight:bold;
			}
		&.striped {
			tr:nth-child(even) {
				background:#EEE;
				}
			}
		}
	// Cover Shout
	&.cover,
	&.shout {
		z-index:1;
		&:after {
			visibility:hidden;
			}
		}
	// Cover
	&.cover {
		background:#000;
		@mixin cover {
			img, svg, video,
			object, canvas {
				@content;
				}
			}
		@include cover {
			position:absolute;
			top:0;
			left:0;
			z-index:-1;
			}
		&.w {
			@include cover {
				top:50%;
				width:100%;
				@include transform(translateY(-50%));
				}
			}
		&.h {
			@include cover {
				left:50%;
				height:100%;
				@include transform(translateX(-50%));
				}
			}
		&.w.h {
			@include cover {
				top:0;
				left:0;
				@include transform(none);
				}
			}
		}
	// Shout
	&.shout {
		background-image:none;
		h2 {
			position:absolute;
			top:50%;
			left:0;
			width:100%;
			text-align:center;
			line-height:1;
			font-size:150px;
			@include transform(translateY(-50%));
			}
		}
	// Place
	.place {
		position:absolute;
		top:50%;
		left:50%;
		@include transform(translate(-50%, -50%));
		&.t.l, &.t.r, &.b.r, &.b.l {
			@include transform(none);
			}
		&.t, &.b {
			@include transform(translate(-50%, 0));
			}
		&.l, &.r {
			@include transform(translate(0, -50%));
			}
		&.t, &.t.l, &.t.r {
			top:0;
			}
		&.r {
			right:0;
			left:auto;
			}
		&.b, &.b.r, &.b.l {
			top:auto;
			bottom:0;
			}
		&.l {
			left:0;
			}
		}
	// Notes
	footer {
		position:absolute;
		left:0;
		right:0;
		bottom:-$height;
		z-index:1;
		display:none;
		padding:20px 120px;
		background:$yellow;
		box-shadow:0 0 0 2px desaturate($yellow, 20%) inset;
		@include transition(bottom 0.3s)
		}
	&:hover footer {
		bottom:0;
		}
	}

// Screen
@media screen {
	// List
	.list {
		position:absolute;
		clip:rect(0, auto, auto, 0); // Having fun with IE10
		padding:80px 0 40px 100px;
		background:#585A5E url(../images/linen.png);
		@include retina {
			background-image:url(../images/linen@2x.png);
			background-size:256px;
			}
		// Outfit
		.caption,
		.badge {
			display:block;
			}
		// Slide
		.slide {
			float:left;
			margin:0 (100-$width/2) (100-$height/2) 0;
			@include transform-origin(0 0);
			@include transform(scale(0.5));
			@media (max-width:$break) {
				margin:0 (80-($width/2+$width/4)) (80-($height/2+$height/4)) 0;
				@include transform(scale(0.25));
				}
			// Shadow
			&:before {
				position:absolute;
				top:0;
				left:0;
				z-index:-1;
				width:$width/2;
				height:$height/2;
				box-shadow:
					0 0 30px rgba(#000, 0.005),
					0 20px 50px rgba($grey, 0.6);
				border-radius:2px;
				content:'';
				@include transform-origin(0 0);
				@include transform(scale(2));
				@media (max-width:$break) {
					width:$width/4;
					height:$height/4;
					@include transform(scale(4));
					}
				}
			// Number
			&:after {
				top:auto;
				right:auto;
				bottom:-80px;
				left:120px;
				padding:0;
				width:auto;
				height:auto;
				background:none;
				color:#3C3D40;
				text-shadow:0 1px 1px #8D8E90;
				font-weight:bold;
				@include transform-origin(0 0);
				@include transform(scale(2));
				@media (max-width:$break) {
					bottom:-104px;
					@include transform(scale(4));
					}
				}
			// Hover
			&:hover:before {
				box-shadow:
					0 0 0 10px rgba($grey, 0.3),
					0 20px 50px rgba($grey, 0.6);
				}
			// Current
			&:target {
				&:before {
					box-shadow:
						0 0 0 1px darken($blue, 10%),
						0 0 0 10px $blue,
						0 20px 50px rgba($grey, 0.6);
					@media (max-width:$break) {
						box-shadow:
							0 0 0 1px darken($blue, 10%),
							0 0 0 10px $blue,
							0 20px 50px rgba($grey, 0.6);
						}
					}
				&:after {
					text-shadow:0 1px 1px rgba($grey, 0.6);
					color:$blue;
					}
				}
			// Inner
			> div {
				&:before {
					position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
					z-index:2;
					content:'';
					}
				}
			// Cover Shout
			&.cover,
			&.shout {
				&:after {
					visibility:visible;
					}
				}
			// Notes
			footer {
				display:block;
				}
			}
		}
	// Full
	.full {
		position:absolute;
		top:50%;
		left:50%;
		overflow:hidden;
		margin:(-$height/2) 0 0 (-$width/2);
		width:$width;
		height:$height;
		background:#000;
		// Slide
		.slide {
			position:absolute;
			top:0;
			left:0;
			margin-left:150%;
			// Next
			.next {
				visibility:hidden;
				&.active {
					visibility:visible;
					}
				}
			// Current
			&:target {
				margin:0;
				}
			// Shout
			&.shout {
				&.grow, &.shrink {
					h2 {
						opacity:0;
						@include transition(all 0.4s ease-out);
						}
					&:target h2 {
						opacity:1;
						@include transform(scale(1) translateY(-50%));
						}
					}
				&.grow h2 {
					@include transform(scale(0.1) translateY(-50%));
					}
				&.shrink h2 {
					@include transform(scale(10) translateY(-50%));
					}
				}
			}
		// Progress
		.progress {
			position:absolute;
			right:0;
			bottom:0;
			left:-10px;
			z-index:1;
			div {
				padding-left:10px;
				width:0;
				height:10px;
				background:url(../images/progress.svg) 100% 0 no-repeat;
				background-clip:content-box;
				@include transition(width 0.2s linear);
				}
			}
		}
	}

// Print
@page {
	margin:0;
	size:$width $height;
	}
