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

@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;
	&:after {
		position:absolute;
		counter-increment:slide;
		content:counter(slide, decimal-leading-zero);
		line-height:1;
		}
	.debug & {
		@if	$width == 1024px {
			@if $height == 640px {
				$grid:'url(../images/grid-16x10.png) no-repeat,'
				}
			@if $height == 768px {
				$grid:'url(../images/grid-4x3.png) no-repeat,'
				}
			}
		background:url(../images/ribbon.svg) 865px 0 no-repeat, #{$grid} #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 50px;
		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 {
			margin:0 -8px;
			padding:3px 8px;
			border-radius:8px;
			background:rgba(236,249,0,.37);
			color:#000;
			font-style:normal;
			&.important {
				margin:0;
				background:#C00;
				color:#FFF;
				font-weight:normal;
				}
			&.comment {
				margin:0;
				padding:0;
				background:none;
				color:#999;
				}
			}
		}
	// Cover
	&.cover {
		background:#000;
		img, svg, video,
		object, canvas {
			position:absolute;
			top:0;
			left:0;
			z-index:-1;
			}
		&.w {
			img, svg, video,
			object, canvas {
				top:50%;
				width:100%;
				@include transform(translateY(-50%));
				}
			}
		&.h {
			img, svg, video,
			object, canvas {
				left:50%;
				height:100%;
				@include transform(translateX(-50%));
				}
			}
		&.w.h {
			img, svg, video,
			object, canvas {
				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 {
	padding:80px 0 40px 100px;
	background:#585A5E url(../images/linen.png);
	&: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:#5ca4ed;
				}
			}
		}
	// 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(0, 0, 0, 0.005),
				0 20px 50px rgba(42, 43, 45, 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:-100px;
			left:120px;
			color:#3C3D40;
			text-shadow:0 2px 1px #8D8E90;
			font-weight:bold;
			font-size:50px;
			@media (max-width:$break) {
				bottom:-180px;
				text-shadow:0 4px 2px #8D8E90;
				font-size:100px;
				}
			}
		&:hover:before {
			box-shadow:
				0 0 0 10px rgba(42, 43, 45, 0.3),
				0 20px 50px rgba(42, 43, 45, 0.6);
			}
		&:target {
			&:before {
				box-shadow:
					0 0 0 1px #305F8D,
					0 0 0 10px #3C7CBD,
					0 20px 50px rgba(42, 43, 45, 0.6);
				@media (max-width:$break) {
					box-shadow:
						0 0 0 1px #305F8D,
						0 0 0 10px #3C7CBD,
						0 20px 50px rgba(42, 43, 45, 0.6);
					}
				}
			&:after {
				text-shadow:0 2px 1px rgba(42, 43, 45, 0.6);
				color:#4B86C2;
				@media (max-width:$break) {
					text-shadow:0 4px 2px rgba(42, 43, 45, 0.6);
					}
				}
			}
		}
	}

// Full
// -------------------------------
.full {
	position:absolute;
	top:50%;
	left:50%;
	overflow:hidden;
	margin:(-$height/2) 0 0 (-$width/2);
	width:$width;
	height:$height;
	background:#000;
	.caption {
		display:none;
		}
	.slide {
		position:absolute;
		top:0;
		left:0;
		clip:rect(0, 0, 0, 0);
		&:after {
			left:120px;
			bottom:80px;
			color:#CCC;
			line-height:18px;
			font-size:25px;
			}
		&:target {
			clip:rect(0, auto, auto, 0);
			}
		// Cover Shout
		&.cover,
		&.shout {
			z-index:1;
			&:after {
				content:'';
				}
			}
		}
	// 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(255, 255, 255, 0.4);
			border-radius:5px;
			background:rgba(177, 177, 177, 0.4);
			@include transition(width 0.2s linear);
			}
		}
	}