@charset "UTF-8";
/* CSS Document */

#top {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 80px;
	margin: 0 auto;
	background-color: #518ECB;
}

#image {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 600px;
	margin: 0 auto;
	background-image: url(../images/intro%20bg.jpg);
	background-repeat: repeat;
	background-position: center;
	
}
.scrapnotelogo {
	position: absolute;
	top: 13px;
}



#intuitive {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 1100px;
	margin: 0 auto;

}
#scrap {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 1200px;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.2);
}
#scrapdata {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 1300px;
	margin: 0 auto;

}
#design {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 2000px;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.2);
}

#pen {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 1400px;
	margin: 0 auto;
}


#etc {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 600px;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.2);
}
#review {
	position: relative;
	padding: 0px;
	width: 100%;
	height: 500px;
	margin: 0 auto;
	background-color: #FFF;

}

#youtubevideo {
	display: block;
	width: 570px;
	height: 365px;
	margin: 0px auto;
	color: transparent;     /* hide the text */
	text-indent: -9999em;    /* ditto, to ensure */
	position: absolute;
	top: 78px;
	left: 166px;
	border-radius: 4px;
	box-shadow: 0 1px 10px rgba(0,0,0,0.4);
	-webkit-border-radius: 4px;
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.7);
	-moz-border-radius: 4px;
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,0.7);
	background-image: url(../images/playbt.png), url(../images/intro_video.jpg);
	background-size: 72px 72px, contain;
	background-position: center center, left top;
	background-repeat: no-repeat;
}

#youtubevideo:hover, #youtubevideo:active {
	-webkit-box-shadow: 
		1px 1px 3px rgba(0,0,0,0.7),
		0px 0px 10px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 10px #000000;
}


/*
.intro_video {
	position: absolute;
	top: 58px;
	left: 166px;
	border-radius: 4px;
	box-shadow: 0 1px 10px rgba(0,0,0,0.4);
	-webkit-border-radius: 4px;
	-webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.7);
	-moz-border-radius: 4px;
	-moz-box-shadow: 0 1px 10px rgba(0,0,0,0.7);
}
.playbt {
	position: absolute;
	left: 416px;
	top: 200px;
}
*/
.appstore {
	position: absolute;
	left: 346px;
	top: 478px;
	-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
	-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
	-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
	-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

.appstore:hover, .appstore:active {
		-webkit-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.7));
		-moz-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.7));
		-ms-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.7));
		-o-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.7));
		filter: drop-shadow(1px 1px 6px rgba(0,0,0,.7));	
}


.title_lighter {
	font-family: Helvetica;
	font-size: 42px;
	font-weight: bold;
	color: #FFF;
	position: absolute;
	top: 100px;
	left: 0px;
	width: 900px;
	height: 43px;
	text-align: center;
}
.sub_script {
	font-family: Helvetica;
	font-size: 18px;
	color: #666;
	top: 170px;
	text-align: center;
	position: absolute;
	width: 850px;
	left: 25px;
}

.iPad_scrap {
	position: absolute;
	left: 450px;
	top: 358px;
}
ul {
	position:relative;
}
.detail_script {
	font-family: Helvetica;
	font-size: 18px;
	color: #666;
	top: 361px;
	position: absolute;
	width: 426px;
	height: 439px;
	text-align: left;
	padding-left: 0px;
	left: 1px;
}
#dtail_title {
	font-family: Helvetica;
	font-size: 18px;
	color: #666;
	font-weight: bold;
	top: 11px;
	width: 426px;
}

#dtail_body {
	font-family: Helvetica;
	font-size: 16px;
	color: #666;
	font-weight: nomal;
	padding-bottom: 15px;
}

.documents {
	position: absolute;
	left: 0px;
	top: 712px;
}
.contents_image {
	position: absolute;
	top: 350px;
	
}
.design_image {
	position: absolute;
	top: 915px;
	left: 0px;
}

#notecover_sum {
	position: absolute;
	top: 1530px;
	margin-right: 1px;
	margin-left: 1px;
	position: relative;
	height:111px;
}

#notecover_sum li {
	display: inline-block;
	margin-left: 10px;
	
    color: transparent;     /* hide the text */
    text-indent: -9999em;    /* ditto, to ensure */

	background-size: 85px 111px contain;
	height:111px;
	width:85px;
}

#notecover_sum li:hover, #notecover_sum li:active {
		-webkit-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));
		-moz-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));
		-ms-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));
		-o-filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));
		filter: drop-shadow(2px 2px 4px rgba(0,0,0,.5));	
}

#newspaper_note {
	background : url('../images/small_newspaper.png');
}

#vintage_note {
	background : url('../images/small_vintage.png');
}

#black_note {
	background : url('../images/small_black.png');
}

#blue_note {
	background : url('../images/small_blue.png');
}

#green_note {
	background : url('../images/small_green.png');
}

#orange_note {
	background : url('../images/small_orange.png');
}

#mint_note {
	background : url('../images/small_mint.png');
}

#yellow_note {
	background : url('../images/small_yellow.png');
}

#red_note {
	background : url('../images/small_red.png');
}

.review {
	padding-left: 45px;
	padding-top: 120px;
}


#quicklook {
	position: absolute;
	left: 2px;
	top: 100px;
	width: 268px;
	height: 380px;
	z-index: 3;
	text-align: center;
	padding-right: 15px;
	padding-left: 15px;
}
#retina {
	position: absolute;
	left: 302px;
	top: 100px;
	width: 268px;
	height: 380px;
	z-index: 2;
	text-align: center;
	padding-right: 15px;
	padding-left: 15px;
}
#export {
	position: absolute;
	left: 602px;
	top: 100px;
	width: 268px;
	height: 380px;
	z-index: 1;
	text-align: center;
	padding-right: 15px;
	padding-left: 15px;
}
.quicklook_copy {
	font-family: Helvetica;
	font-size: 24px;
	font-weight: bold;
	color: #666;
	text-align: center;
}
.quicklook_script {
	font-family: Helvetica;
	font-size: 16px;
	color: #6C6C6C;
	
}
.pen_sample {
	position: absolute;
	top: 820px;
	left: 150px;
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.4);
	-webkit-border-radius: 4px;
	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.6);
	-moz-border-radius: 4px;
	-moz-box-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

#review_image {
	top: 160px;
	position: relative;
	text-align: center;
	left: 100px;
	right: 100px;
}
#review_image:hover, #review_image:active {
	position: relative;
	width: 740px;
	height: 156px;
	left: 80px;
	right: 80px;
}
.scrap_etc {
	position: absolute;
	left: 75px;
	top: 962px;
}
.scrapdata_etc {
	position: absolute;
	left: 436px;
	top: 999px;
}
.various_sample_notes {
	position: absolute;
	left: 56px;
	top: 1663px;
}


#facebook_like {
	position: absolute;
	left: 168px;
	top: 43px;
	width: 102px;
	height: 28px;
	z-index: 1;
}