html, body { 
	height: 100%;
}

body {
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

* {
	box-sizing:border-box;
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#header {
	width:100%;
	height:80px;
	background-color:#f5f5f5;
	border-bottom:1px solid #aaa;
}

#side {
	width:160px;
	height:calc(100% - 81px);
	border-right: 1px solid #aaa;
	background-color:#f5f5f5;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

#canvas {
	position:absolute;
	top:81px;
	left:161px;
	background: transparent;
	z-index:100;
	pointer-events: none;
	-ms-touch-action: none;
	touch-action: none;
}

.preview {
	width:100px;
	height:100px;
	background-color:#ffffff;
	border:1px solid #aaaaaa;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:top center;
	margin:20px 20px 38px 20px;
	cursor: pointer;
	position:relative;
}

.preview p {
	width:90px;
	position:absolute;
	text-align:center;
	top:106px;
	font-size:12px;
}

.current_slide {
	border:3px solid #248600;
}

.current_slide p {
	top:104px;
	font-weight:bold;
	color:#248600;
}

#content {
	position:absolute;
	top:81px;
	left:161px;
	height:calc(100% - 81px);
	overflow: hidden;
	-ms-touch-action: none;
	touch-action: none;
}

.noselect {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}

.logo {
	width:250px;
	position:absolute;
	font-family: Century;
	font-size:20px;
	color:#248600;
	top:14px;
	left:18px;
}

.back_to_index {
	font-size:12px;
	color:#1a60d9;
	text-decoration:none;
	position:absolute;
	top:15px;
	right:20px;
}

.back_to_index:hover {
	text-decoration:underline;
}

.login_id {
	font-size:11px;
	color:#333333;
	position:absolute;
	top:15px;
	right:20px;
}

.book {
	font-size:11px;
	color:#333333;
	position:absolute;
	top:48px;
	left:20px;
}

.lesson {
	font-size:11px;
	color:#333333;
	position:absolute;
	top:48px;
	left:80px;
}

.em {
	color:#248600;
}

.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/**
 * 	controls
 */

.controls {
	position:absolute;
	top:18px;
	left:300px;
	width:300px;
}

.controls .button {
	width:100px;
	height:42px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #777;
    text-shadow: 1px 1px #fff;
}

.controls .reset {
	position:absolute;
    left:285px;
}

.controls .toc {
	position:absolute;
    left:440px;
}
.controls .button:active {
	color:#fff;
	border-color: #248600;
    background-image: -moz-linear-gradient(top, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
    background-image: -ms-linear-gradient(top, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
    background-image: -webkit-linear-gradient(top, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
    background-image: -webkit-linear-gradient(to bottom, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
    text-shadow: -1px -1px rgba(0,0,0,.3);
}


/**
 * 	segmented button
 */

.segmented {
    display: inline-block;
}
.segmented .label {
    background-color: #eee;
    border: 1px #ccc;
    border-style: solid none solid solid;
    color: #777;
    cursor: pointer;
    float: left;
    height:42px;
    line-height:42px;
    text-align: center;
    text-shadow: 1px 1px #fff;
    width: 90px;
    font-size:12px;
}
.segmented :first-child .label {
    border-radius: 4px 0 0 4px;
}
.segmented :last-child .label {
    border-radius: 0 4px 4px 0;
    border-right-style: solid;
}
.segmented input {
    display: none;
}
.segmented input:checked + .label {
    background-color: #248600;
    border-color: #248600;
    box-shadow: 3px 2px 10px rgba(0,0,0,0.1) inset, -3px 2px 10px rgba(0,0,0,0.1) inset;
    color: #fff;
    text-shadow: -1px -1px rgba(0,0,0,.3);
}

/* ---------------- */

.segmented .label {
}

.segmented input:checked + span {
    background-image: -moz-linear-gradient(top, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
    background-image: -ms-linear-gradient(top, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
    background-image: -webkit-linear-gradient(top, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
    background-image: -webkit-linear-gradient(to bottom, hsl(103,100%,26%) 0%, hsl(103,100%,31%) 100%);
}

#pen_color_select {
	padding: 0px;
	margin-top:10px;
	position: absolute;
	z-index:101;
	top:45px;
	left:115px;
}

.box {
	position: relative;
	background: #fff;
	height: 125px;
	width: 203px;
	padding:10px;
	border: 1px solid #ccc;
	border-radius:4px;
	box-shadow:rgba(0, 0, 0, 0.17) 1px 1px 2px 2px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.17) 1px 1px 2px 2px;
	-moz-box-shadow:rgba(0, 0, 0, 0.17) 1px 1px 2px 2px;
}

.box:after {
	content: '';
	position: absolute;
	border-bottom: 10px solid #fff;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	top: -9px;
	left: 15px;
}

.box:before {
	content: '';
	position: absolute;
	border-bottom: 10px solid #ccc;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	top: -11px;
	left: 15px;
}

.box ul {
	width:200px;
	font-size: 0;
	overflow: hidden;
}

.box li {
	display:inline-block;
	width:30px;
	height:30px;
	border:2px solid #eee;
	margin:3px;
	box-sizing: border-box;
	color:#fff;
}

.box li.selected {
	border:2px solid #666;
}

.box li i {
	position:absolute;
	width:28px;
	line-height:28px;
	font-size:15px;
	text-align:center;
}

.box .close_color_chip {
	position:absolute;
	width:174px;
	height:24px;
	box-sizing: border-box;
	letter-spacing:2px;
	bottom:10px;
	left:13px;
	margin:0px auto;
	text-align:center;
	line-height:1em;
}

/**
 * 	toc
 */

#toc {
	width:100%;
	height:100%;
	background-color:#f5f5f5;
	padding:50px 30px;
}

#toc .title_box {
	display:inline-block;
	width:525px;
	height:135px;
	vertical-align: top;
}

.logo_l {
	height:36px;
	font-family: Century;
	font-size:2.0em;
	color:#248600;
	position:relative;
	top:22px;
	left:40px;
}

#toc .book_title {
	width:395px;
	height:36px;
	font-family: Century;
	font-size:2.0em;
	color:#248600;
	position:relative;
	top:32px;
	left:40px;
	text-align:center;
}

#toc .author {
	position:relative;
	top:30px;
	left:375px;
	font-size:14px;
}

#toc .item {
	display: inline-block;
	width:250px;
	height:140px;
	border:1px solid #248600;
	background-color:#FFFFFF;
	position:relative;
	border-radius:8px;
	margin:5px;
}

#toc .item .img {
	width:180px;
	height:80px;
	margin:10px auto;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

#toc .item a {
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
	position:absolute;
	top:0px;
}

#toc span.title {
	display:block;
	width:100%;
	font-family: "Comic Sans MS";
	color:#333;
	text-align:center;
	position:absolute;
	bottom:8px;
	pointer-events:none;
	font-size:13px;
	font-weight:bold;
}

.link_list {
	display:block;
	width:100%;
	margin-top:30px;
	margin-bottom:30px;
}

.link_list ul li {
	display:inline-block;
	margin-left:0px;
	margin-right:30px;
	font-size:15px;
}

.link_list a {
	color:#1A60D9;
	text-decoration:none;
}

.link_list a:hover {
	text-decoration:underline;
}

.left_pad {
	margin-left:60px !important;
}