screen.css

/*
	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 url(http://fonts.googleapis.com/css?family=PT+Sans|PT+Sans+Narrow|PT+Mono&subset=latin,cyrillic);
@import url(reset.css);
@import url(user.css);

body {
	counter-reset:paging;
	font: 25px/2 'PT Sans', Arial;
	}

/* Slide
------------------------------- */
.slide {
	padding:71px 120px 0;
	width:784px;
	height:569px;
	background: #FFF;
	color:#000;
	}
	.slide:after {
		position:absolute;
		counter-increment:paging;
		content:counter(paging, decimal-leading-zero);
		line-height:1;
		}

.slide.first,
.debug .slide.first
{

}

.slide.first .yandex,
.slide.last .yandex {
    width: 200px;
}

.slide.null {
    text-align: center;
    line-height: 640px;
}

.slide.null .yandex
{
    width: 60%;
}

.slide.first h2 {
    font-size: 90px;

    position:absolute;
    top: 50%;
    left: 120px;

    width: 550px;

    text-align: left;
    line-height: 1;

    color: #000;

    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}

.slide.first .info
{
    position: absolute;
    bottom: 50px;
    left: 120px;
    width: 450px;
    font-size: 75%;
}

.slide.first .info p
{
    margin: 0;
}

/* Debug */
.debug .slide {
	background:
		url(../images/grid.png) no-repeat,
		#FFF;
	}

/* Header */
.slide h2 {
	margin:0 0 37px;
	font: bold 50px/50px Textbook, 'PT Sans', Arial;
    position: relative;
}

/* Text */
.slide p {
	margin:0 0 30px;
	}
.slide p.note {
	color:#999;
	}
.slide a {
	border-bottom:0.1em solid;
	color:#0174A7;
	text-decoration:none;
	}
.slide b,
.slide strong {
	font-weight:bold;
	}
.slide i,
.slide em {
	font-style:italic;
	}
.slide kbd,
.slide code,
.slide samp {
	padding:3px 8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	background:#FAFAA2;
	color:#000;
	-webkit-tab-size:4;
	-moz-tab-size:4;
	-o-tab-size:4;
	tab-size:4;
	line-height:1;
	font-family:'PT Mono', monospace;
	}

/* Quote */
.slide blockquote {
	font-style:italic;
	}
	.slide blockquote:before {
		position:absolute;
		margin:-16px 0 0 -80px;
		color:#CCC;
		font:200px/1 Textbook, 'PT Sans', Arial;
		content:'\201C';
		}
.slide blockquote + figcaption {
	margin:-30px 0 40px;
	font-style:italic;
	font-weight:bold;
    text-align: right;
}

/* Lists */
.slide ol,
.slide ul {
	margin:0 0 30px;
	counter-reset:list;
	}
	.slide ul ul,
	.slide ol ul,
	.slide ol ol,
	.slide ul ol {
		margin:0 0 0 39px;
		}
	.slide ol li,
	.slide ul li {
		text-indent:-13px;
		}
	.slide ol > li:before,
	.slide ul > li:before {
		display:inline-block;
		width:13px;
		color:#F00;
		}
	.slide ul > li:before {
		content:'\25CF\00A0\00A0';
		}

    .slide ul ul > li:before,
    .slide ol ul > li:before
    {
        content:'– ';
    }

	.slide ol > li:before {
		counter-increment:list;
		content:counter(list)'.\00A0';
		}

    .slide ol ol > li:before,
    .slide ol ul > li:before,
    .slide ul ul > li:before,
    .slide ul ol > li:before
    {
        color:#000;
    }

/* Double */
.slide ol.double,
.slide ul.double {
	margin-left:-25px;
	-webkit-columns:2;
	-moz-columns:2;
	columns:2;
	-webkit-column-gap:0;
	-moz-column-gap:0;
	column-gap:0;
	}
	.slide ol.double li,
	.slide ul.double li {
		padding:0 30px 0 1em;
		}

/* Code */
.slide pre {
	margin:0 0 50px;
	counter-reset:code;
	white-space:normal;
	}
	.slide pre code {
		display:block;
		padding:0;
		background:none;
		white-space:pre;
		line-height:50px;
		}
		.slide pre code:before {
			position:absolute;
			margin:0 0 0 -110px;
			width:100px;
			color:#BBB;
			text-align:right;
			counter-increment:code;
			content:counter(code, decimal-leading-zero)'.';
			}
	.slide pre mark {
		margin:0 -8px;
		padding:3px 8px;
		border-radius:8px;
		background:rgba(236,249,0,.37);
		color:#000;
		font-style:normal;
		}
	.slide pre .important {
		margin:0;
		background:#C00;
		color:#FFF;
		font-weight:normal;
		}
	.slide pre .comment {
		margin:0;
		padding:0;
		background:none;
		color:#999;
		}

/* Cover */
.slide.cover {
	background:#000;
    overflow: hidden;
}

.slide.cover.with-header h2 {
    background: rgba(0, 0, 0, 0.6);
    bottom: 5%;
    color: #fff;
    left: 0;
    line-height: 250%;
    margin: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.slide.cover img,
.slide.cover svg,
.slide.cover video,
.slide.cover object {
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	clip:rect(0, 1024px, 640px, 0);
	}
.slide.cover.w img,
.slide.cover.w svg,
.slide.cover.w video,
.slide.cover.w object {
	width:100%;
	}
.slide.cover.h img,
.slide.cover.h svg,
.slide.cover.h video,
.slide.cover.h object {
	height:100%;
	}
.slide.cover.c img,
.slide.cover.c svg,
.slide.cover.c video,
.slide.cover.c object {
	left:50%;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	transform:translateX(-50%);
	}
.slide.cover.m img,
.slide.cover.m svg,
.slide.cover.m video,
.slide.cover.m object {
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	}

/* Shout */
.slide.shout {
	background-image:none;
	}
	.slide.shout h2 {
		position:absolute;
		top:50%;
		left: 70px;
		right: 70px;
		text-align:left;
		line-height:1;
		font-size:80px;
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		-o-transform:translateY(-50%);
		transform:translateY(-50%);
		}

/* Place */
.place {
	position:absolute;
	}
.place.t,
.place.m,
.place.b {
	left:50%;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	transform:translateX(-50%);
	}
.place.t {
	top:0;
	}
.place.b {
	bottom:0;
	}
.place.l,
.place.m,
.place.r {
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	}
.place.l {
	left:0;
	}
.place.m {
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	}
.place.r {
	right:0;
	left:auto;
	}
.place.t.l,
.place.t.r,
.place.b.r,
.place.b.l {
	-webkit-transform:none;
	-moz-transform:none;
	-ms-transform:none;
	-o-transform:none;
	transform:none;
	}
.place.t.l,
.place.t.r {
	top:0;
	}
.place.b.l,
.place.b.r {
	top:auto;
	}

/* List
------------------------------- */
.list {
	padding:80px 0 40px 100px;
	background:#585A5E url(../images/linen.png);
	}
	.list:after {
		clear:both;
		display:block;
		content:'';
		}

/* Caption */
.list .caption {
	margin:0 0 50px;
	color:#3C3D40;
	text-shadow:0 1px 1px #8D8E90;
	}
	.list .caption h1 {
		font:bold 50px/1 'PT Sans Narrow', sans-serif;
		}
	.list .caption a {
		color:#4B86C2;
		text-shadow:0 -1px 1px #1F3F60;
		text-decoration:none;
		}
	.list .caption a:hover {
		color:#5ca4ed;
		}

/* Slide */
.list .slide {
	position:relative;
	float:left;
	margin:0 -432px -220px 0;
	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	-o-transform-origin:0 0;
	transform-origin:0 0;
	-webkit-transform:scale(0.5);
	-moz-transform:scale(0.5);
	-ms-transform:scale(0.5);
	-o-transform:scale(0.5);
	transform:scale(0.5);
	}
	.list .slide:before {
		position:absolute;
		top:0;
		left:0;
		z-index:-1;
		width:512px;
		height:320px;
		box-shadow:
			0 0 30px rgba(0, 0, 0, 0.005),
			0 20px 50px rgba(42, 43, 45, 0.6);
		border-radius:2px;
		content:'';
		-webkit-transform-origin:0 0;
		-moz-transform-origin:0 0;
		-ms-transform-origin:0 0;
		-o-transform-origin:0 0;
		transform-origin:0 0;
		-webkit-transform:scale(2);
		-moz-transform:scale(2);
		-ms-transform:scale(2);
		-o-transform:scale(2);
		transform:scale(2);
		}
	.list .slide:after {
		bottom:-100px;
		left:120px;
		color:#3C3D40;
		text-shadow:0 2px 1px #8D8E90;
		font-weight:bold;
		font-size:50px;
		}
	.list .slide:hover:before {
		box-shadow:
			0 0 0 10px rgba(42, 43, 45, 0.3),
			0 20px 50px rgba(42, 43, 45, 0.6);
		}
	.list .slide:target:before {
		box-shadow:
			0 0 0 1px #305F8D,
			0 0 0 10px #3C7CBD,
			0 20px 50px rgba(42, 43, 45, 0.6);
		}
	.list .slide:target:after {
		text-shadow:0 2px 1px rgba(42, 43, 45, 0.6);
		color:#4B86C2;
		}

@media all and (max-width:1304px) {

.list .slide {
	margin:0 -718px -400px 0;
	-webkit-transform:scale(0.25);
	-moz-transform:scale(0.25);
	-ms-transform:scale(0.25);
	-o-transform:scale(0.25);
	transform:scale(0.25);
	}
	.list .slide:before {
		width:256px;
		height:160px;
		-webkit-transform:scale(4);
		-moz-transform:scale(4);
		-ms-transform:scale(4);
		-o-transform:scale(4);
		transform:scale(4);
		}
	.list .slide:after {
		bottom:-180px;
		text-shadow:0 4px 2px #8D8E90;
		font-size:100px;
		}
	.list .slide:target:before {
		box-shadow:
			0 0 0 1px #305F8D,
			0 0 0 10px #3C7CBD,
			0 20px 50px rgba(42, 43, 45, 0.6);
		}
	.list .slide:target:after {
		text-shadow:0 4px 2px rgba(42, 43, 45, 0.6);
		}
}

/* Full
------------------------------- */
.full {
	position:absolute;
	top:50%;
	left:50%;
	overflow:hidden;
	margin:-320px 0 0 -512px;
	width:1024px;
	height:640px;
	background:#000;
	}
	.full .caption {
		display:none;
		}
	.full .slide {
		position:absolute;
		top:0;
		left:0;
		visibility:hidden;
		}
		.full .slide:after {
			position:absolute;
			left:120px;
			bottom:60px;
			color:#CCC;
			line-height:18px;
			font-size:25px;
			}
	.full .slide:target {
		visibility:visible;
		}

/* Next Lists */
.full .slide li.next {
	opacity:0;
	}
.full .slide li.next.active {
	opacity:1;
	-webkit-transition:opacity 0.5s linear;
	-moz-transition:opacity 0.5s linear;
	-ms-transition:opacity 0.5s linear;
	-o-transition:opacity 0.5s linear;
	transition:opacity 0.5s linear;
	}

/* Cover */
.full .slide.cover,
.full .slide.first,
.full .slide.null,
.full .slide.shout
{
	z-index:1;
}
.full .slide.cover:after,
.full .slide.first:after,
.full .slide.null:after,
.full .slide.shout:after
{
    content:'';
}

/* Shout */
 {
	z-index:1;
	}
	 {
		content:'';
		}

/* Progress */
.full .progress {
	position:absolute;
	right:118px;
	bottom:40px;
	left:118px;
	}
	.full .progress 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);
		-webkit-transition:width 0.2s linear;
		-moz-transition:width 0.2s linear;
		-ms-transition:width 0.2s linear;
		-o-transition:width 0.2s linear;
		transition:width 0.2s linear;
		}



.first
{
    padding: 0;
	width: 1024px;
    height: 640px;
}
.arrow
{
    padding: 71px 120px 0;
    position: relative;
    height: 569px;
}
.arrow:after,
.arrow:before
{
    position: absolute;

    content: '';

    right: 150px !important; left: 0;

}
.arrow:after {
    top: 0; bottom: 50%;

    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    border-right: 2px solid #888;
}

.arrow:before {
    top: 50% !important; bottom: 0;

    -webkit-transform: skewX(340deg);
    transform: skewX(340deg);
    border-right: 2px solid #888;
}

pre.small
{
    font-size: 16px;
}
.slide pre.small code
{
    line-height: 30px;
}
.full .slide:after
{
    bottom: 30px;
    left: auto;
    right: 30px;
}
.full .progress
{
    left: 0;
    bottom: 0;
    right: 0;
}
.full .progress div
{
    border-radius: 0;
}