/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body { line-height:1; }

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none; }

/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

table { border-collapse:collapse; border-spacing:0; }

/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; outline-width:0; }

/*
Standard
Author: Jan Mentz
*/

@font-face {
   font-family: 'Sosa';
   src: url( fonts/sosa-regular-webfont.eot);
   src: url( fonts/sosa-regular-webfont.woff) format('woff'), 
   url( fonts/sosa-regular-webfont.ttf) format('truetype'),
   url( fonts/sosa-regular-webfont.svg) format('svg');
}

html, body { background:#eee; font-family:'Noto Sans', Helvetica, Arial; }

/*
Devices
Author: Jan Mentz
*/

.container { position:relative; padding-bottom:70px; margin-top:70px; //border:1px solid red; left:50%; margin-left:-135px; }

.device_frame { 
	background: #373737; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM3MzczNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left,  #373737 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#373737), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #373737 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #373737 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #373737 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(left,  #373737 0%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373737', endColorstr='#000000',GradientType=1 ); /* IE6-8 */
	display:inline-block;
	border:1px solid #333;
	box-shadow:inset 0px 1px 0px #c3c3c3;
	border-radius:40px;
	margin-bottom:-70px;
	position:relative;
}
.device_frame_shine { position:absolute; width:100%; height:480px; bottom:1px; border-radius:40px; box-shadow:inset 0 -1px 0 rgba(250,250,250,.1); border-bottom:1px solid #000; }
.device {
	margin:1px 1px 0;
	border:2px solid black;
	box-shadow:inset 0px 1px 0px #616161;
	border-radius:40px;
	padding:60px 10px;
	position:relative;
}
.lock_btn { 
	position:absolute; 
	right:44px; 
	top:-2px; 
	height:2px; 
	width:30px; 
	border-top-left-radius:2px;
	border-top-right-radius:2px;
	background: rgb(33,33,33); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(33,33,33,1) 0%, rgba(165,165,165,1) 11%, rgba(89,89,89,1) 22%, rgba(145,145,145,1) 80%, rgba(198,198,198,1) 90%, rgba(66,66,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(33,33,33,1)), color-stop(11%,rgba(165,165,165,1)), color-stop(22%,rgba(89,89,89,1)), color-stop(80%,rgba(145,145,145,1)), color-stop(90%,rgba(198,198,198,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#424242',GradientType=1 ); /* IE6-9 */
	box-shadow:0 -1px 0 rgba(250,250,250,.5);
}
.mute_btn {
	position:absolute; 
	left:-3px; 
	top:44px; 
	height:30px; 
	width:2px; 
	border-top-left-radius:2px;
	border-bottom-left-radius:2px;
	box-shadow:inset -1px 1px 1px rgba(0,0,0,.5);
	background: rgb(33,33,33); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(165,165,165,1) 11%, rgba(89,89,89,1) 22%, rgba(145,145,145,1) 80%, rgba(198,198,198,1) 90%, rgba(66,66,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,33,33,1)), color-stop(11%,rgba(165,165,165,1)), color-stop(22%,rgba(89,89,89,1)), color-stop(80%,rgba(145,145,145,1)), color-stop(90%,rgba(198,198,198,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(165,165,165,1) 11%,rgba(89,89,89,1) 22%,rgba(145,145,145,1) 80%,rgba(198,198,198,1) 90%,rgba(66,66,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
}
.vol_btn_up {
	position:absolute; 
	left:-3px; 
	top:94px; 
	height:20px; 
	width:2px; 
	border-top-left-radius:2px;
	border-bottom-left-radius:2px;
	background: rgb(33,33,33); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(188,188,188,1) 50%, rgba(104,104,104,1) 66%, rgba(198,198,198,1) 84%, rgba(66,66,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,33,33,1)), color-stop(50%,rgba(188,188,188,1)), color-stop(66%,rgba(104,104,104,1)), color-stop(84%,rgba(198,198,198,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
}
.vol_btn_down {
	position:absolute; 
	left:-3px; 
	top:134px; 
	height:20px; 
	width:2px; 
	border-top-left-radius:2px;
	border-bottom-left-radius:2px;
	background: rgb(33,33,33); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(188,188,188,1) 50%, rgba(104,104,104,1) 66%, rgba(198,198,198,1) 84%, rgba(66,66,66,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,33,33,1)), color-stop(50%,rgba(188,188,188,1)), color-stop(66%,rgba(104,104,104,1)), color-stop(84%,rgba(198,198,198,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(188,188,188,1) 50%,rgba(104,104,104,1) 66%,rgba(198,198,198,1) 84%,rgba(66,66,66,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#424242',GradientType=0 ); /* IE6-9 */
}
.device_shine {
	position:absolute;
	top:0;
	left;
	z-index:2;
	margin:3px;
	height:100%;
	width:100%;
	display:block;
	-webkit-border-radius:39px;
	-moz-border-radius:39px;
	-o-border-radius:39px;
	border-radius:39px;
	background:url(images/gradient.svg) no-repeat left top;
	background-size:100% auto;
}

.device_shadow { box-shadow:0 10px 70px rgba(0,0,0,.4); position:relative; border-radius:40px; }

.display_container {
	height:390px;
	width:250px;
	overflow:hidden; 
	border-radius:3px;
	position:relative;
	background:#000;
}
.display {
	z-index:1;
	position:relative;
	height:133.33%!important;
	width:133.33%!important;
	zoom:0.75;
	-moz-transform:scale(0.75);
	-moz-transform-origin:top left;
	-o-transform:scale(0.75);
	-o-transform-origin:top left;
	-webkit-transform:scale(0.75);
	-webkit-transform-origin:top left;
}
.iframe { 
	width:100%;
	height:100%;
	background:transparent;
	position:relative;
	padding:0;
	margin:0;
	border-radius:3px;
}

.home_btn { 
	position:absolute; 
	bottom:12px; 
	left:50%; 
	margin-left:-20px; 
	padding:13px;
	border-radius:40px;
	box-shadow:0 -1px 1px rgba(250,250,250,.2);
	background: rgb(33,33,33); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(0,0,0,1) 46%, rgba(45,45,45,1) 53%, rgba(86,86,86,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,33,33,1)), color-stop(46%,rgba(0,0,0,1)), color-stop(53%,rgba(45,45,45,1)), color-stop(100%,rgba(86,86,86,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#565656',GradientType=0 ); /* IE6-9 */
}

.speaker_frame { position:absolute; left:50%; margin-left:-20px; top:30px; padding:2px; border-radius:20px; z-index:3; box-shadow:inset 0 -2px 2px rgba(250,250,250,.3); background:rgba(0,0,0,.5); }
.speaker { width:40px; height:5px; background:#333; border-radius:20px; box-shadow:inset 0 2px 2px rgba(0,0,0,.5); }
.camera { 
	position:absolute; 
	left:50%; 
	margin-left:-40px; 
	border-radius:20px; 
	padding:2px;
	top:30px;
	box-shadow:0 -1px 0 rgba(0,0,0,.4);
	background: rgb(33,33,33); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(33,33,33,1) 0%, rgba(0,0,0,1) 46%, rgba(45,45,45,1) 53%, rgba(86,86,86,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,33,33,1)), color-stop(46%,rgba(0,0,0,1)), color-stop(53%,rgba(45,45,45,1)), color-stop(100%,rgba(86,86,86,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(33,33,33,1) 0%,rgba(0,0,0,1) 46%,rgba(45,45,45,1) 53%,rgba(86,86,86,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#565656',GradientType=0 ); /* IE6-9 */
}
.camera_eye {
	height:5px; 
	width:5px;
	border-radius:20px;
	background: rgb(88,137,201); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(88,137,201,1) 0%, rgba(45,46,94,1) 51%, rgba(141,167,198,1) 84%, rgba(88,137,201,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(88,137,201,1)), color-stop(51%,rgba(45,46,94,1)), color-stop(84%,rgba(141,167,198,1)), color-stop(100%,rgba(88,137,201,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(88,137,201,1) 0%,rgba(45,46,94,1) 51%,rgba(141,167,198,1) 84%,rgba(88,137,201,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(88,137,201,1) 0%,rgba(45,46,94,1) 51%,rgba(141,167,198,1) 84%,rgba(88,137,201,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(88,137,201,1) 0%,rgba(45,46,94,1) 51%,rgba(141,167,198,1) 84%,rgba(88,137,201,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(88,137,201,1) 0%,rgba(45,46,94,1) 51%,rgba(141,167,198,1) 84%,rgba(88,137,201,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5889c9', endColorstr='#5889c9',GradientType=1 ); /* IE6-9 */
}
.home_btn_print { height:14px; width:14px; background:rgba(0,0,0,.3); border:1px solid #777; box-shadow:0 0 30px #000; border-radius:3px; }

.notebook_container { opacity:0; z-index:3; display:none; position:absolute; bottom:0; }
.notebook { 
	position:relative; 
	left:-50px; 
	width:1170px; 
	height:28px; 
	background: rgb(117,117,117); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(117,117,117,1) 1%, rgba(104,104,104,1) 3%, rgba(198,198,198,1) 31%, rgba(198,198,198,1) 72%, rgba(104,104,104,1) 97%, rgba(117,117,117,1) 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(117,117,117,1)), color-stop(3%,rgba(104,104,104,1)), color-stop(31%,rgba(198,198,198,1)), color-stop(72%,rgba(198,198,198,1)), color-stop(97%,rgba(104,104,104,1)), color-stop(99%,rgba(117,117,117,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(117,117,117,1) 1%,rgba(104,104,104,1) 3%,rgba(198,198,198,1) 31%,rgba(198,198,198,1) 72%,rgba(104,104,104,1) 97%,rgba(117,117,117,1) 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(117,117,117,1) 1%,rgba(104,104,104,1) 3%,rgba(198,198,198,1) 31%,rgba(198,198,198,1) 72%,rgba(104,104,104,1) 97%,rgba(117,117,117,1) 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(117,117,117,1) 1%,rgba(104,104,104,1) 3%,rgba(198,198,198,1) 31%,rgba(198,198,198,1) 72%,rgba(104,104,104,1) 97%,rgba(117,117,117,1) 99%); /* IE10+ */
	background: linear-gradient(to right,  rgba(117,117,117,1) 1%,rgba(104,104,104,1) 3%,rgba(198,198,198,1) 31%,rgba(198,198,198,1) 72%,rgba(104,104,104,1) 97%,rgba(117,117,117,1) 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#757575',GradientType=1 ); /* IE6-9 */
	box-shadow:inset 0 5px 10px rgba(0,0,0,.1);
}
.opener { 
	position:absolute;
	left:50%;
	margin-left:-100px;
	width:200px;
	height:13px;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	box-shadow:inset 0 -5px 10px rgba(0,0,0,.2);
	background: rgb(170,170,170); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(170,170,170,1) 0%, rgba(221,221,221,1) 8%, rgba(221,221,221,1) 93%, rgba(170,170,170,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(170,170,170,1)), color-stop(8%,rgba(221,221,221,1)), color-stop(93%,rgba(221,221,221,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(221,221,221,1) 93%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(221,221,221,1) 93%,rgba(170,170,170,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(221,221,221,1) 93%,rgba(170,170,170,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(221,221,221,1) 93%,rgba(170,170,170,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#aaaaaa',GradientType=1 ); /* IE6-9 */
}
.notebook_bottom {
	position:relative;
	width:1170px;
	height:12px;
	left:-50px;
	overflow:hidden;
}
.notebook_bottom_round {
	position:absolute;
	bottom:0;
	width:1439px;
	left:-134px;
	height:600px;
	border-radius:200px;
	box-shadow:inset 0 -1px 8px rgba(0,0,0,.8);
	background: rgb(170,170,170); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(170,170,170,1) 0%, rgba(221,221,221,1) 8%, rgba(186,186,186,1) 97%, rgba(135,135,135,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,170,170,1)), color-stop(8%,rgba(221,221,221,1)), color-stop(97%,rgba(186,186,186,1)), color-stop(100%,rgba(135,135,135,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(186,186,186,1) 97%,rgba(135,135,135,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(186,186,186,1) 97%,rgba(135,135,135,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(186,186,186,1) 97%,rgba(135,135,135,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(170,170,170,1) 0%,rgba(221,221,221,1) 8%,rgba(186,186,186,1) 97%,rgba(135,135,135,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#878787',GradientType=0 ); /* IE6-9 */
}

#loading {  
	font-family:'Sosa';
	font-size:30px;
	color:#fff;
	top:50%;
	left:50%;
	margin:-20px 0 0 -20px;
	position:absolute;  
	-webkit-animation-name:spin;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name:spin;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear; 
}
@-webkit-keyframes spin {
    0% {-webkit-transform:rotate(0deg);}
    50% {-webkit-transform:rotate(180deg);}
    100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spin {
    0% {-moz-transform:rotate(0deg);}
    50% {-moz-transform:rotate(180deg);}
    100% {-moz-transform:rotate(360deg);}
}

#loading_error {
	display:none;
	z-index:3;
	background:#000;
	font-size:16px;
	color:#ccc;
	top:50%;
	left:50%;
	margin:-30px 0 0 -55px;
	position:absolute; 
}
#loading_error span { font-size:30px; margin-bottom:10px; color:#cc0a0a; display:block; text-align:center; font-family:'Sosa'; }

.draw { display:none; opacity:0; z-index:0; position:absolute; border-radius:8px; margin:63px 0 0 0; padding-left:100px; height:387px; width:200px; border:3px dashed #bbb; color:#eee; line-height:1.3; }
.draw h2 { font-size:20px; margin:30px 0 10px; }
.draw p { color:#fff; }
.draw a.button { 
	display:inline-block; 
	padding:6px 10px 7px; 
	background:#e3e3e3; 
	text-decoration:none; 
	color:#989898; 
	border-radius:5px; 
	font-size:14px; 
	margin-top:50px; 
	box-shadow:inset 0 -2px 0 rgba(0,0,0,.4); 
	transition:background .4s ease;
	-webkit-transition:background .4s ease;
	-moz-transition:background .4s ease;
	-o-transition:background .4s ease;
}
.draw a.button span { color:#555; display:block; }
.draw a.button:hover { background:#f2bf42; }

/*************************************************************************/

.row { width:100%; max-width:1000px; margin:0 auto; position:relative; }
section.wrap { 
	width:100%; 
	overflow:hidden; 
	padding-bottom:80px; 
	position:relative; 
	background: rgb(198,198,198);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(198,198,198,1) 2%, rgba(102,102,102,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(2%,rgba(198,198,198,1)), color-stop(100%,rgba(102,102,102,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(198,198,198,1) 2%,rgba(102,102,102,1) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(198,198,198,1) 2%,rgba(102,102,102,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(198,198,198,1) 2%,rgba(102,102,102,1) 100%);
	background: radial-gradient(ellipse at center,  rgba(198,198,198,1) 2%,rgba(102,102,102,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#666666',GradientType=1 );
	background:url(images/grey.jpg) no-repeat center;
}

section.manual { background:#fff; position:relative; box-shadow:0 -10px 30px rgba(0,0,0,.2); z-index:2; padding:40px 0; }
section.manual h3 { font-size:30px; color:#333; font-weight:normal; margin-bottom:30px; }
section.manual ul li { margin-left:30px; padding-left:10px; margin-top:10px; list-style-type:decimal; line-height:1.7; font-size:20px; color:#555; }

.sp_input { display:inline-block; border-bottom:3px solid #333; color:#000; }
.sp_button { display:inline-block; background:#f2bf42; color:#000; border-radius:5px; padding-left:10px; padding-right:10px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.2); }

.arrow { position:absolute; left:50%; margin-left:-20px; height:0; width:0; bottom:-20px; border-left:20px solid transparent; border-right:20px solid transparent; }
.arrow.black { border-top:20px solid #fff; }

header { background:#eee; width:100%; padding:12px 0 12px; color:#fff; }
header h1 img { width:60px; height:auto; }
p.html5 { position:absolute; right:0; top:0; color:#999; font-family:'Sosa'; font-size:23px; line-height:1; }
p.html5 span { font-size:9px; }
p.html5 img { display:inline-block; margin-bottom:-5px; width:65px; }

nav { background:#fff; padding:34px 0; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.2); z-index:2; }
nav label, nav input, nav button, nav section button { font-size:30px; font-family:'Noto Sans', Helvetica, Arial; position:relative; border-radius:5px; }
nav label { color:#333; }
nav section { display:block; margin-bottom:30px; }

nav input { 
	background:none; 
	border:none; 
	border-bottom:3px solid #333; 
	color:#333; 
	width:400px;
	margin:0 20px; 
	padding:6px 0;
	border-radius:0;
}
nav input.focus {
	-webkit-animation-name:blinking;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name:blinking;
	-moz-animation-duration:20s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
}
@-webkit-keyframes blinking {
    0% {background:#fff;}
    44% {background:#fff;}
    50% {background:#ccc;}
    53% {background:#fff;}
    100% {background:#fff;}
}
@-moz-keyframes blinking {
    0% {background:#fff;}
    44% {background:#fff;}
    50% {background:#ccc;}
    53% {background:#fff;}
    100% {background:#fff;}
}

nav input:hover { background:#fff; }

nav button { 
	background:#f2bf42; 
	box-shadow:inset 0 -2px 0 rgba(0,0,0,.2); 
	font-size:16px;
	border:none; 
	padding:6px 10px; 
	color:#000; 
	cursor:pointer; 
	transition:background .4s ease;
	-webkit-transition:background .4s ease;
	-moz-transition:background .4s ease;
	-o-transition:background .4s ease;
}
nav button:hover { background:#ccc; }

nav .tooltip { 
	opacity:0;
	color:#f2bf42;
	font-size:22px;
	font-family:'Sosa';
	margin:2px 0 0 6px; 
	position:absolute; 
	padding:6px 10px 6px; 
	background:#000;
	border-radius:3px;
}
nav .tooltip.active {
	-webkit-animation-name:tooltip;
	-webkit-animation-duration:15s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name:tooltip;
	-moz-animation-duration:15s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear; 
}
@-webkit-keyframes tooltip {
    0% {opacity:0;}
    46% {opacity:0;}
    47% {margin-left:16px;opacity:1;}
    48% {margin-left:6px}
    49% {margin-left:16px;}
    50% {margin-left:6px}
    51% {margin-left:16px;}
    52% {margin-left:6px}
    53% {margin-left:16px;}
    54% {margin-left:6px}
    55% {margin-left:16px;}
    56% {margin-left:6px}
    57% {margin-left:16px;}
    58% {margin-left:6px;opacity:1;}
    59% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes tooltip {
    0% {opacity:0;margin-top:0;padding:8px 10px;}
    46% {opacity:0;}
    47% {margin-left:16px;opacity:1;}
    48% {margin-left:6px}
    49% {margin-left:16px;}
    50% {margin-left:6px}
    51% {margin-left:16px;}
    52% {margin-left:6px}
    53% {margin-left:16px;}
    54% {margin-left:6px}
    55% {margin-left:16px;}
    56% {margin-left:6px}
    57% {margin-left:16px;}
    58% {margin-left:6px;opacity:1;}
    59% {opacity:0;}
    100% {opacity:0;margin-top:0;padding:8px 10px;}
}
nav .tooltip:before { content:''; position:absolute; margin-top:5px; height:0; width:0; border-top:6px solid transparent; border-bottom:6px solid transparent; z-index:22; border-right:6px solid #000; left:-6px; }

.share { float:right; margin-right:90px; position:relative; }
.share span { font-size:13px; position:absolute; top:13px; right:-41px; }
.share button { 
	font-family:'Sosa'; 
	color:#fff; 
	padding:8px 10px; 
	transition:background .4s ease;
	-webkit-transition:background .4s ease;
	-moz-transition:background .4s ease;
	-o-transition:background .4s ease;
}
.share button:hover { background:#ccc; }
.share .twitter { background:#00aced; }
.share .facebook { background:#3b5997; }
.share .google { background:#dc4d38; }
.share .mail { background:#999; }

.css_only_container { position:absolute; z-index:10; right:0; top:0; width:120px; height:120px; overflow:hidden; }
.css_only { 
	position:absolute;
	right:-50px; 
	top:23px;
	background:#f2bf42;
	color:#000;
	text-transform:uppercase;
	padding:4px 50px;
	width:80px;
	text-align:center;
	font-size:12px;
	font-weight:600;
	line-height:1.2;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
	box-shadow:0 1px 3px rgba(0,0,0,.4);
}

footer { background:#eee; padding:40px 0; position:relative; z-index:2; }
footer h2 { font-size:14px; color:#777; font-weight:normal; margin-bottom:8px; }
footer p { font-size:10px; color:#aaa; }
footer .contact { font-family:'Sosa'; font-size:40px; float:right; }
footer .contact a { 
	color:#888; 
	text-decoration:none; 
	margin-left:20px; 
	transition:color .4s ease;
	-webkit-transition:color .4s ease;
	-moz-transition:color .4s ease;
	-o-transition:color .4s ease;
}
footer .contact a:hover { color:#f2bf42; }