/*
	Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
	Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/
	Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
*/

@import url(fonts.css);
@import url(reset.css);

BODY {
	font:25px/1.8 'ヒラギノ角ゴ ProN W3', sans-serif;
	counter-reset:paging;
	}

/* Slide
---------------------------------------- */
.slide:after {
	counter-increment:paging;
	content:counter(paging, decimal-leading-zero);
	}
.slide SECTION {
	padding:80px 120px 0;
	width:784px;
	height:560px;
	background:#FFF;
	color:#000;
	}
	.slide SECTION:before {
		position:absolute;
		top:0;
		right:120px;
		width:40px;
		height:120px;
		background:url(../images/ribbon.svg) no-repeat;
		content:'';
		}

/* Header */
.slide HEADER {
	margin:0 0 40px;
	color:#666;
	font:bold 40px/1.13 'PT Sans Narrow', sans-serif;
	}

/* Elements */
.slide P {
	margin:0 0 45px;
	}
.slide P.note {
	color:#888;
	}
.slide A {
	border-bottom:0.1em solid;
	color:#0174A7;
	text-decoration:none;
	}
.slide A[target=_blank] {
	margin-right:22px;
	}
.slide A[target=_blank]:after {
	position:absolute;
	margin-left:7px;
	font-family:'Target Blank';
	content:'\005E';
	}
.slide B,
.slide STRONG {
	font-weight:bold;
	}
.slide I,
.slide EM {
	font-style:italic;
	}
.slide KBD,
.slide CODE {
	padding:3px 8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
	background:#FAFAA2;
	-webkit-tab-size:4;
	-moz-tab-size:4;
	-o-tab-size:4;
	tab-size:4;
	font-family:'PT Mono', monospace;
	}

/* Quote */
.slide BLOCKQUOTE {
	font-style:italic;
	}
.slide BLOCKQUOTE:before {
	position:absolute;
	margin:-15px 0 0 -80px;
	color:#CCC;
	font:200px/1 'PT Sans', sans-serif;
	content:'\201C'; /* ldquo */
	}
.slide BLOCKQUOTE:after {
	margin:-45px 0 45px;
	display:block;
	color:#444;
	font-weight:bold;
	content:attr(cite);
	}

/* Lists */
.slide OL,
.slide UL {
	margin:0 0 20px;
	counter-reset:list;
	}
	.slide UL UL,
	.slide OL UL,
	.slide OL OL,
	.slide UL OL {
		margin:0 0 0 38px;
		}
	.slide OL > LI:before,
	.slide UL > LI:before {
		position:absolute;
		margin-left:-120px;
		width:100px;
		color:#BBB;
		text-align:right;
		}
	.slide UL > LI:before {
		content:'\2022'; /* bull */
		line-height:1.1;
		font-size:40px;
		}
	.slide OL > LI:before {
		counter-increment:list;
		content:counter(list)'.';
		}

/* Code */
.slide PRE {
	margin:0 0 45px;
	counter-reset:code;
	white-space:normal;
	}
	.slide PRE CODE {
		display:block;
		padding:0;
		background:none;
		white-space:pre;
		}
	.slide PRE CODE:before {
		position:absolute;
		margin:0 0 0 -120px;
		width:110px;
		color:#BBB;
		text-align:right;
		counter-increment:code;
		content:counter(code, decimal-leading-zero)'.';
		}
	.slide PRE MARK {
		padding:3px 8px;
		-webkit-border-radius:8px;
		-moz-border-radius:8px;
		border-radius:8px;
		}
	.slide PRE MARK {
		background:#FAFAA2;
		color:#000;
		font-style:normal;
		}
	.slide PRE MARK.important {
		background:#C00;
		color:#FFF;
		font-weight:normal;
		}

/* Background */
.slide.bg SECTION {
	background:transparent;
	}
	.slide.bg SECTION:before {
		display:none;
		}
.slide.bg IMG {
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	}

/* Shout */
.slide.shout SECTION:before {
	display:none;
	}
.slide.shout H2 {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	text-align:center;
	line-height:1;
	font-size:150px;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	}
	.slide.shout H2 A[target=_blank] {
		margin:0;
		}
		.slide.shout H2 A[target=_blank]:after {
			content:'';
			}

/* Middle */
.middle {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	-moz-transform:translate(-50%, -50%);
	-ms-transform:translate(-50%, -50%);
	-o-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	}

/* List
---------------------------------------- */
.list {
	float:left;
	padding:80px 0 80px 100px;
	background:#585A5E url(../images/linen.png);
	}

/* Caption */
.list .caption {
	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 50px 0 0;
	padding:80px 0 0;
	}
	.list .slide:after {
		position:absolute;
		bottom:-45px;
		left:60px;
		color:#3C3D40;
		text-shadow:0 1px 1px #8D8E90;
		line-height:1;
		font-weight:bold;
		font-size:25px;
		}
	.list .slide:target:after {
		text-shadow:0 -1px 1px #1F3F60;
		color:#4B86C2;
		}
	.list .slide > DIV {
		position:relative;
		overflow:hidden;
		width:512px;
		height:320px;
		box-shadow:0 0 50px #3C3D40;
		border-radius:1px;
		background:rgba(0, 0, 0, 0.3);
		}
	.list .slide > DIV:hover {
		box-shadow:
			0 0 0 10px rgba(60, 61, 64, 0.6),
			0 0 50px #3C3D40;
		}
	.list .slide:target > DIV {
		box-shadow:
			0 0 0 1px #305F8D,
			0 0 0 10px #3C7CBD,
			0 0 50px #3C3D40;
		}
	.list .slide SECTION {
		-webkit-transform-origin:0 0;
		-webkit-transform:scale(0.5);
		-moz-transform-origin:0 0;
		-moz-transform:scale(0.5);
		-ms-transform-origin:0 0;
		-ms-transform:scale(0.5);
		-o-transform-origin:0 0;
		-o-transform:scale(0.5);
		transform-origin:0 0;
		transform:scale(0.5);
		}
		.list .slide SECTION:after {
			position:absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			content:'';
			}

/* Small */
@media all and (max-width:1274px) {
	.list .slide:after {
		left:30px;
		}
	.list .slide > DIV {
		width:256px;
		height:160px;
		}
	.list .slide SECTION {
		-webkit-transform:scale(0.25);
		-moz-transform:scale(0.25);
		-ms-transform:scale(0.25);
		-o-transform:scale(0.25);
		transform:scale(0.25);
		}
	}

/* 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;
		visibility:hidden;
		}
		.full .slide:target {
			visibility:visible;
			}
		.full .slide:after {
			position:absolute;
			bottom:85px;
			left:120px;
			color:#BBB;
			line-height:1;
			}
		.full .slide SECTION {
			-webkit-transform:scale(1);
			-moz-transform:scale(1);
			-ms-transform:scale(1);
			-o-transform:scale(1);
			transform:scale(1);
			}
		.full .slide.bg {
			z-index:1;
			}
			.full .slide.bg:after,
			.full .slide.shout:after {
				content:'';
				}

/* Inner Navigation */
.full .inner > * {
	opacity:0;
	}
.full .inner > .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;
	}

/* Progress */
.full .progress {
	position:absolute;
	right:118px;
	bottom:49px;
	left:118px;
	border-radius:7px;
	border:2px solid rgba(255, 255, 255, 0.2);
	}
	.full .progress DIV {
		width:0;
		height:10px;
		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;
		}
.full .progress-off {
	z-index:1;
	}

/* additional */

p.fs01{
font-size:150%;
}


#no4 ul li:nth-child(2){
color:#f00;
font-weight:bold;
}

#no5 ul li{
display:inline;
padding:5px;
margin-right:10px;
list-style:none;
border:1px solid #000;
}

#no5 ul li:before{
display:none;
}
#no5 ul li:nth-child(3n){
border:1px solid #f00;
}

/*
#no6.slide p{
margin-bottom:5px;
line-height:1.4;
font-size:80%;
}
#no6.slide ul{
font-size:80%;
line-height:1.4;
margin-bottom:5px;
}
#no6.slide ul li{
}

#no6 ul li:last-child{
border:2px solid red;
}
#no6 ul:last-of-type{
border:2px solid blue;
}
#no6 p:last-of-type{
font-size:100%;
}
*/

.slide .codes{
margin-top:2em;
padding:10px;
border:2px dashed #ccc;
font-size:90%;
}
.slide strong{
color:#c00;
}

.slide h2.lh01{
line-height:1.2;
}


/*
#no9 p,
#no10 p{
margin-bottom:10px;
padding:10px 20px;
line-height:1.4;
}

#no9 .grad1{
background: -webkit-linear-gradient(270deg, #36C, #fff);
}
#no9 .grad2{
background:-webkit-radial-gradient(ellipse, #fff, #f60);
}
#no9 .grad3{
background:-webkit-radial-gradient(100% 0%, #fff, #f69);
}

#no10 p{
line-height:1.2;
}

#no10 .grad1{
background:url(../../../image.png) no-repeat 97% 50%, -webkit-linear-gradient(#36C, #fff);
}

#no10 .grad2{
padding-left:90px;
background:url(../../../image.png) no-repeat 97% 50%,  url(../../../image.png) no-repeat 3% 50%;
}

#no11 .trans1{
padding:0 20px;
background:#ccf;
}

#no11 .trans1:hover{
-webkit-transition: all .5s ease-out;
-webkit-transform:translate(20px, 20px);
}

#no12 p{
line-height:1.4;
}

#no12 .color1{
padding:5px 10px;
background:#090;
margin-bottom:10px;
}
#no12 .op1{
color: rgba(0, 0, 0, 0.5);
}

#no12 .color2{
margin-bottom:10px;
padding:5px 10px;
background:#090;
opacity:0.5;
}
#no12 .color2:hover{
opacity:1;
}

#no13 .shadow1{
margin-bottom:10px;
padding:5px 10px;
border:1px solid #000;
box-shadow: 2px 2px 5px #666;
}
#no13 .shadow2{
margin-bottom:10px;
color:#ccc;
text-shadow: 5px 5px 4px #000;
font-size:150%;
font-weight:bold;
}

#no14 p{
line-height:1.4;}

#no14 .button1{
margin-bottom:10px;
padding:10px;
text-align:center;
border:1px solid #000;
border-radius:10px;
background: -moz-linear-gradient(#fff 0%, #f8f8f8 50%, #ececec 50%, #999 100%);
background:-webkit-gradient(linear, left top, left bottom, from( #fff ), color-stop( 0.5, #f8f8f8 ), color-stop( 0.5, #ececec ), to( #999 ) );
box-shadow: 2px 2px 4px #666;
}

#no14 .button1:hover{
box-shadow: 0px 0px 0px;
-webkit-transform:translate(2px,3px);
}

#no14 .button2{
margin-bottom:10px;
padding:10px;
text-align:center;
border-top:10px solid #03c;
background:#ccf;
}
#no14 .button2:hover{
opacity: 0.8;
}
*/