// 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;
	}

// Slide
// -------------------------------
.slide {
	width:$width;
	height:$height;
	background:#FFF url(../images/ribbon.svg) 865px 0 no-repeat;
	color:#000;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	&:after {
		position:absolute;
		counter-increment:slide;
		content:counter(slide, decimal-leading-zero);
		line-height:1;
		}
	.debug & {
		background:
			url(../images/ribbon.svg) 865px 0 no-repeat,
			url(../images/grid-#{$ratio}.svg) no-repeat,
			#FFF;
		}
	> div {
		position:absolute;
		top:0;
		left:0;
		overflow:hidden;
		padding:$top $sides 0;
		width:$width - $sides * 2;
		height:$height - $top;
		}
	}

// Header
.slide {
	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:#0174A7;
		text-decoration:none;
		}
	b, strong {
		font-weight:bold;
		}
	i, em {
		font-style:italic;
		}
	kbd, code, samp {
		padding:3px 8px;
		border-radius:8px;
		background:#FAFAA2;
		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 40px;
			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 39px;
			}
		}
	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;
				}
			}
		}
	// 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;
		&.t, &.m, &.b {
			left:50%;
			@include transform(translateX(-50%));
			}
		&.t { top:0; }
		&.b { bottom:0; }
		&.l, &.m, &.r {
			top:50%;
			@include transform(translateY(-50%));
			}
		&.l { left:0; }
		&.m { @include transform(translate(-50%, -50%)); }
		&.r {
			right:0;
			left:auto;
			}
		&.t.l, &.t.r, &.b.r, &.b.l {
			@include transform(none);
			}
		&.t.l, &.t.r { top:0; }
		&.b.r, &.b.l { top:auto; }
		}
	}

// 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:50%;
		}
	&:after {
		clear:both;
		display:block;
		content:'';
		}
	// Caption
	.caption {
		margin:0 0 50px;
		color:#3C3D40;
		text-shadow:0 1px 1px #8D8E90;
		h1 {
			font:bold 50px/1 'PT Sans Narrow', sans-serif;
			}
		a {
			color:#4B86C2;
			text-shadow:0 -1px 1px #1F3F60;
			text-decoration:none;
			&:hover {
				color:#5394D7;
				}
			}
		}
	// Badge
	.badge {
		position:absolute;
		top:0;
		right:0;
		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:#4B86C2;
			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));
			@include transition(background 0.3s linear);
			&:hover {
				background:#5394D7;
				}
			}
	// Slide
	.slide {
		position:relative;
		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));
			}
		&: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(#2A2B2D, 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));
				}
			}
		&:after {
			bottom:-80px;
			left:120px;
			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:before {
			box-shadow:
				0 0 0 10px rgba(#2A2B2D, 0.3),
				0 20px 50px rgba(#2A2B2D, 0.6);
			}
		&:target {
			&:before {
				box-shadow:
					0 0 0 1px #305F8D,
					0 0 0 10px #3C7CBD,
					0 20px 50px rgba(#2A2B2D, 0.6);
				@media (max-width:$break) {
					box-shadow:
						0 0 0 1px #305F8D,
						0 0 0 10px #3C7CBD,
						0 20px 50px rgba(#2A2B2D, 0.6);
					}
				}
			&:after {
				text-shadow:0 1px 1px rgba(#2A2B2D, 0.6);
				color:#4B86C2;
				}
			}
		// Wrapper
		> div {
			&:before {
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				z-index:2;
				content:'';
				}
			}
		// Notes
		footer {
			position:absolute;
			left:0;
			right:0;
			bottom:-500px;
			z-index:1;
			padding:20px 120px;
			background:#FAFAA2;
			box-shadow:0 0 0 2px rgba(#000, 0.05) inset;
			@include transition(bottom 0.4s)
			}
		&:hover footer {
			bottom:0;
			}
		}
	}

// Full
// -------------------------------
.full {
	position:absolute;
	top:50%;
	left:50%;
	overflow:hidden;
	margin:(-$height/2) 0 0 (-$width/2);
	width:$width;
	height:$height;
	background:#000;
	.caption,
	.badge {
		display:none;
		}
	.slide {
		position:absolute;
		top:0;
		left:0;
		clip:rect(0, 0, 0, 0);
		&:after {
			left:120px;
			bottom:81px;
			color:#CCC;
			line-height:18px;
			font-size:25px;
			}
		&:target {
			clip:rect(0, auto, auto, 0);
			}
		// Cover Shout
		&.cover,
		&.shout {
			z-index:1;
			&:after {
				content:'';
				}
			}
		// Note
		footer {
			display:none;
			}
		}
	// Next Lists
	li.next {
		display:none;
		&.active {
			display:block;
			}
		}
	// Progress
	.progress {
		position:absolute;
		right:118px;
		bottom:40px;
		left:118px;
		div {
			width:0;
			height:10px;
			box-shadow:0 0 0 1px rgba(#FFF, 0.4);
			border-radius:5px;
			background:rgba(#B1B1B1, 0.4);
			@include transition(width 0.2s linear);
			}
		}
	}