@font-face {
	font-family: exo2;
	src: url(http://www.storynsound.com/fonts/Exo2-Regular.woff) format("woff");
}
@font-face {
	font-family: segoeui-bold;
	src: url(http://www.storynsound.com/fonts/SegoeUI-Bold.woff) format("woff");
}

/* public tag name set */
body { background-color:#f9be17 }
body,td,div,span { font-family:Segoe UI,Helvetica,Malgun Gothic,Tahoma,Arial; font-size:12px; }
ul { list-style-type:square }
a:link,a:visited { color:#3851a0; text-decoration:none }
a:hover { color:#a13d1e; text-decoration:none }
image { border:0 }
p { margin-bottom:45px; padding:0; margin-top:0 }

/* common set */
.block    { display:block }
.inline   { display:inline }
.inline-block { display:inline-block }
.none     { display:none }

.left     { float:left }
.right    { float:right }
.clear    { clear:both }
.center { text-align:center }
.align-center { text-align:center }
.align-left { text-align:left }
.align-right { text-align:right }

.pointer  { cursor:pointer }

.w5p { width:5% }
.w8p { width:8% }
.w10p { width:10% }
.w11p { width:11% }
.w12p { width:12% }
.w13p { width:13% }
.w14p { width:14% }
.w15p { width:15% }
.w16p { width:16% }
.w17p { width:17% }
.w18p { width:18% }
.w19p { width:19% }
.w20p { width:20% }
.w21p { width:21% }
.w22p { width:22% }
.w23p { width:23% }
.w24p { width:24% }
.w25p { width:25% }
.w27p { width:27% }
.w28p { width:28% }
.w30p { width:30% }
.w32p { width:32% }
.w33p { width:33% }
.w35p { width:35% }
.w40p { width:40% }
.w45p { width:45% }
.w50p { width:50% }

.c20 { width:5% }
.c12 { width:8.25% }
.c10 { width:10% }
.c8 { width:12.5% }
.c6 { width:16.7% }
.c5 { width:20% }
.c4 { width:25% }
.c3 { width:33% }
.c2 { width:50% }

.w10px { width:10px }
.w15px { width:15px }
.w20px { width:20px }
.w25px { width:25px }
.w30px { width:30px }
.w35px { width:35px }
.w40px { width:40px }
.w45px { width:45px }
.w50px { width:50px }
.w55px { width:55px }
.w60px { width:60px }
.w65px { width:65px }
.w70px { width:70px }
.w75px { width:75px }
.w80px { width:80px }
.w85px { width:85px }
.w90px { width:90px }
.w95px { width:95px }
.w100px { width:100px }
.w105px { width:105px }
.w110px { width:110px }
.w115px { width:115px }
.w120px { width:120px }
.w125px { width:125px }
.w130px { width:130px }
.w135px { width:135px }
.w140px { width:140px }
.w145px { width:145px }
.w150px { width:150px }
.w155px { width:155px }
.w160px { width:160px }
.w165px { width:165px }
.w170px { width:170px }
.w175px { width:175px }
.w180px { width:180px }
.w200px { width:200px }
.w250px { width:250px }
.w300px { width:300px }
.w320px { width:320px }
.w350px { width:350px }
.w400px { width:400px }
.w480px { width:480px }
.w500px { width:500px }
.w550px { width:550px }
.w600px { width:600px }
.w640px { width:640px }


.ctext9   { font-size: 9px; font-weight:normal }
.ctext9b  { font-size: 9px; font-weight:bold }
.ctext10  { font-size:10px; font-weight:normal }
.ctext10b { font-size:10px; font-weight:bold }
.ctext11  { font-size:11px; font-weight:normal }
.ctext11b { font-size:11px; font-weight:bold }
.ctext12  { font-size:12px; font-weight:normal }
.ctext12b { font-size:12px; font-weight:bold }
.ctext13  { font-size:13px; font-weight:normal }
.ctext13b { font-size:13px; font-weight:bold }
.ctext14  { font-size:14px; font-weight:normal }
.ctext14b { font-size:14px; font-weight:bold }
.ctext15  { font-size:15px; font-weight:normal }
.ctext15b { font-size:15px; font-weight:bold }
.ctext16  { font-size:16px; font-weight:normal }
.ctext16b { font-size:16px; font-weight:bold }
.ctext17  { font-size:17px; font-weight:normal }
.ctext17b { font-size:17px; font-weight:bold }
.ctext18  { font-size:18px; font-weight:normal }
.ctext18b { font-size:18px; font-weight:bold }
.ctext19  { font-size:19px; font-weight:normal }
.ctext19b { font-size:19px; font-weight:bold }
.ctext20  { font-size:20px; font-weight:normal }
.ctext20b { font-size:20px; font-weight:bold }
.ctext21  { font-size:21px; font-weight:normal }
.ctext21b { font-size:21px; font-weight:bold }
.ctext22  { font-size:22px; font-weight:normal }
.ctext22b { font-size:22px; font-weight:bold }
.ctext23  { font-size:23px; font-weight:normal }
.ctext23b { font-size:23px; font-weight:bold }
.ctext24  { font-size:24px; font-weight:normal }
.ctext24b { font-size:24px; font-weight:bold }
.ctext25  { font-size:25px; font-weight:normal }
.ctext25b { font-size:25px; font-weight:bold }
.ctext26  { font-size:26px; font-weight:normal }
.ctext26b { font-size:26px; font-weight:bold }
.ctext27  { font-size:27px; font-weight:normal }
.ctext27b { font-size:27px; font-weight:bold }
.ctext28  { font-size:28px; font-weight:normal }
.ctext28b { font-size:28px; font-weight:bold }
.ctext29  { font-size:29px; font-weight:normal }
.ctext29b { font-size:29px; font-weight:bold }
.ctext30  { font-size:30px; font-weight:normal }
.ctext30b { font-size:30px; font-weight:bold }
.ctext31  { font-size:31px; font-weight:normal }
.ctext31b { font-size:31px; font-weight:bold }
.ctext32  { font-size:32px; font-weight:normal }
.ctext32b { font-size:32px; font-weight:bold }
.ctext33  { font-size:33px; font-weight:normal }
.ctext33b { font-size:33px; font-weight:bold }
.ctext34  { font-size:34px; font-weight:normal }
.ctext34b { font-size:34px; font-weight:bold }
.ctext35  { font-size:35px; font-weight:normal }
.ctext35b { font-size:35px; font-weight:bold }
.ctext36  { font-size:36px; font-weight:normal }
.ctext36b { font-size:36px; font-weight:bold }
.ctext37  { font-size:37px; font-weight:normal }
.ctext37b { font-size:37px; font-weight:bold }
.ctext38  { font-size:38px; font-weight:normal }
.ctext38b { font-size:38px; font-weight:bold }
.ctext39  { font-size:39px; font-weight:normal }
.ctext39b { font-size:39px; font-weight:bold }
.ctext40  { font-size:40px; font-weight:normal }
.ctext40b { font-size:40px; font-weight:bold }
.ctext45  { font-size:45px; font-weight:normal }
.ctext45b { font-size:45px; font-weight:bold }
.ctext50  { font-size:50px; font-weight:normal }
.ctext50b { font-size:50px; font-weight:bold }

.bold { font-weight:bold }
.normal { font-weight:normal }
.italic { font-style:italic }

.bg-white { background-color:white }
.bg-black { background-color:black }
.bg-ggray { background-color:#f6f6f6 }
.bg-dblue { background-color:#9ca3b6 }
.bg-eblue { background-color:#cacfdc }
.bg-redbrown { background-color:#dfc89f }
.bg-lime { background-color:#ccd896 }
.bg-cyan { background-color:#bcdfdf }
.bg-gold { background-color:#ebe060 }
.bg-gbeige { background-color:#fff8b0; }
.bg-yellow { background-color:#fffecd; }
.bg-elime { background-color:#edf5c4; }
.bg-flime { background-color:#f6fbdf; }
.bg-vestige { background-color:#f0f0f2; }

.border-egray { border:1px solid #eee }

.black { color:#000 }
.darkergray { color:#383838 }
.darkgray { color:#606060 }
.gray { color:#808080 }
.lightgray { color:#a0a0a0 }
.lightergray { color:#b8b8b8 }
.vestige { color:#f0f0f2 }
.white { color:#fff }
.blue { color:#6781b7 }
.red { color:#d82020 }
.ablue { color:#3366cc }
.bblue { color:#5a7ab6 } /* 6d7b98 */
.cblue { color:#758095 }
.dblue { color:#9ca3b6 }
.eblue { color:#cacfdc }
.fblue { color:#dee1e8 }
.agreen { color:#76b900 }
.aorange { color:#ed8000 }
.adarkred { color:#ad3a3a }

.new { font-weight:bold; color:#e37f1e }

/* ID set */

#canvas-main { width:85%; background-color:white; padding:50px 75px 40px 75px }
#canvas-side { width:15% }

/* DELETE FROM HERE */
#intro-video {
	width:480px;
	height:270px;
	background-color:#fff;
	border:1px solid #ddd;
	box-shadow:3px 3px 4px rgba(192,192,192,0.6);
}
#pagehead {
	height:55px;
	line-height:55px;
	text-align:center;
	overflow:hidden;
	background-color:#758095; /* #606060; #5075a6 */
	background-image:-webkit-gradient(linear, left top, left bottom, from(#828c9f), to(#596379));
	background-image:-moz-linear-gradient(top, #828c9f, #596379);
	background-image:-o-linear-gradient(#828c9f, #596379);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#828c9f', endColorstr='#596379');
	zoom:1;
	xborder-left:1px solid #9da4b3; /* #9da4b3; #666f7f; */
	xborder-right:1px solid #9da4b3;
	xborder-top:1px solid #a5acba;
	box-shadow:0px 3px 4px rgba(96,96,96,0.5);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0,direction=180,strength=5);
}
#headtitle { font-size:30px; line-height:inherit; font-weight:bold; color:#fff; text-shadow:0px 1px 2px #000 }
#wrapper { padding:20px; padding-top:22px; padding-bottom:24px; background-color:#f4f4f4; border:1px solid #e4e4e4 }
/* DELETE UNTIL HERE */



/* tag custom set */
td.stage-body { background-color:#fdfcf3 }
img.border { border:1px solid #ddd }
img.right { text-align:right; margin:8px 0 8px 16px }
img.top2px { position:relative; top:2px }
img.top3px { position:relative; top:3px }

div.table-headline { width:100%; border-bottom:1px solid #ddd; font-weight:bold; padding-top:2px; padding-bottom:2px; float:left }
div.table-eachline { width:100%; border-bottom:1px solid #ddd; float:left }
span.table-eachline-item { display:inline-block; vertical-align:top; line-height:17px; padding:2px; padding-left:5px; float:left }
span.table-eachline-value { display:inline-block; vertical-align:top; line-height:17px; padding:2px 10px 3px 10px; float:left }
div.table-close { clear:both; padding:5px; padding-bottom:8px; line-height:17px; border-bottom:2px solid #888 }
div.pagetitle { font-size:16px; font-weight:bold; margin-bottom:15px }
div.paratitle { font-size:14px; font-weight:bold; color:#5a7ab6; margin-bottom:5px }

/*
span.table-eachline-itemset { width:300px; display:inline-block; padding-top:2px; padding-bottom:2px }
span.table-eachline-itemset > span:first-child { width:90px; display:inline-block; padding-left:5px; background-color:yellow }
*/

div.dialog { margin:30px 0 35px 0; text-align:center; color:#444; font-family:Book Antiqua,serif; }

img.embedded { float:left; margin: 5px 15px 8px 0; width:300px; }
div.embedded-left { float:left; width:300px; margin: 0 20px 8px 0; }

div.imageframe { margin:30px 0 40px 0; vertical-align:top; text-align:center }
.dq-begin { display:inline-block; width:15px; height:12px; background-image:url(/images/dq-begin.png); position:relative; top:-7px }
.dq-end { display:inline-block; width:14px; height:12px; background-image:url(/images/dq-end.png); position:relative; top:7px }

img.dq-begin { width:15px; height:12px; src:url(/images/dq-begin.png); position:relative; top:-7px }
img.dq-end { width:14px; height:12px; src:url(/images/dq-end.png); position:relative; top:7px }


span.sup { font-size:smaller; position:relative; top:-5px }
span.date { font-size:11px; font-family:Courier New; color:#888 }

div.tip { margin:15px 0 15px 20px; padding:15px 20px 15px 20px; border:1px solid #b9cde5; color:#282828; background-color:#fafafa; }


pre.quote { padding-left:16px; width:95%; margin-bottom:25px; line-height:30px; border-left:5px solid #ddd }
ul.circle { list-style-type:circle }
table.chart { border-top:3px solid #ccc; border-bottom:3px solid #ccc; background-color:#dddddd }
/* div.tip { margin-left:25%; margin-right:5%; border:3px solid #ddd; background-color:#f8f8f8; padding:16px } */
div.line { height:1px; border-top:1px solid #ddd; margin-top:5px; margin-bottom:10px }
div.overflow-hidden { overflow:hidden; *position:relative; }


/* user custom set */
.box-menu {
	height:60px;
	text-align:center;
	overflow:hidden;
	background-color:#b6cc82; /* #606060; #5075a6 */
	background-image:-webkit-gradient(linear, left top, left bottom, from(#cadd9e), to(#9fb864));
	background-image:-moz-linear-gradient(top, #cadd9e, #9fb864);
	background-image:-o-linear-gradient(#cadd9e, #9fb864);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cadd9e', endColorstr='#9fb864');
	zoom:1;
	xborder-left:1px solid #d6dfc0; /* #9da4b3; #666f7f; */
	xborder-right:1px solid #d6dfc0;
	color:#000;
	font-size:14px;
	text-shadow:0px 1px 0px #e8eddc;
	box-shadow:0px 3px 4px rgba(96,96,96,0.5);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#808080,direction=180,strength=5);
}
.guide-info { padding-top:25px; line-height:20px }
.shaded-2 {
	box-shadow:1px 1px 3px rgba(16,16,16,0.5);
	-moz-box-shadow:1px 1px 3px rgba(16,16,16,0.5);
	-webkit-box-shadow:1px 1px 3px rgba(16,16,16,0.5);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0,direction=135,strength=3);
}
.shaded-4 {
	box-shadow:2px 2px 5px rgba(192,192,192,0.55);
	-moz-box-shadow:2px 2px 5px rgba(192,192,192,0.55);
	-webkit-box-shadow:2px 2px 5px rgba(192,192,192,0.55);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0,direction=135,strength=6);
}

.gray-shaded-4 {
	box-shadow:2px 2px 5px rgba(16,16,16,0.35);
	-moz-box-shadow:2px 2px 5px rgba(16,16,16,0.35);
	-webkit-box-shadow:2px 2px 5px rgba(16,16,16,0.35);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=135,strength=6);
}
.dark-shaded-4 {
	box-shadow:2px 2px 5px rgba(16,16,16,0.7);
	-moz-box-shadow:2px 2px 5px rgba(16,16,16,0.7);
	-webkit-box-shadow:2px 2px 5px rgba(16,16,16,0.7);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#282828,direction=135,strength=6);
}

.gray-shaded-2 {
	box-shadow:1px 1px 3px rgba(16,16,16,0.35);
	-moz-box-shadow:1px 1px 3px rgba(16,16,16,0.35);
	-webkit-box-shadow:1px 1px 3px rgba(16,16,16,0.35);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=135,strength=3);
}
.dark-shaded-2 {
	box-shadow:1px 1px 3px rgba(16,16,16,0.7);
	-moz-box-shadow:1px 1px 3px rgba(16,16,16,0.7);
	-webkit-box-shadow:1px 1px 3px rgba(16,16,16,0.7);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#282828,direction=135,strength=3);
}


.gray-shaded-down {
	box-shadow:0 2px 4px rgba(16,16,16,0.35);
	-moz-box-shadow:0 2px 4px rgba(16,16,16,0.35);
	-webkit-box-shadow:0 2px 4px rgba(16,16,16,0.35);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=90,strength=6);
}


#canvas {
	background-color:#fff;
	box-shadow:3px 3px 6px rgba(0,0,0,0.35);
	-moz-box-shadow:3px 3px 6px rgba(0,0,0,0.35);
	-webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.35);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#888888,direction=135,strength=5);
}
#canvas-body { margin-top:50px }
.tag {
	width:200px
}
.tag-head {
	height:25px;
	line-height:25px;
	background-color:orange;
	padding-left:12px
}
.tag-body {
	width:199px;
	border-left:1px solid #e8e8e8;
}
.tag-canvas {
	padding-top:15px;
	padding-bottom:10px;
	text-align:center;
	border-bottom:1px solid #f2f2f2;
}
.tag-desc {
	width:175px;
	text-align:left;
	display:inline-block;
	line-height:16px;
	color:#555;
}
.tag-photo {
	max-width:175px;
	margin-bottom:15px;
}
.tag-userphoto {
	width:32px;
	margin:8px;
}
.tag-info {
	text-align:right;
	padding-top:10px;
	padding-right:10px;
}
.tag-owner {
	border-bottom:1px dashed #c8c8c8;
	background-color:#e4e4e4;
	text-align:left;
}
.tag-owner:first-child {
	border-top:1px solid #f8f8f8;
}
.tag-owner:last-child {
	border-bottom:1px solid #d0d0d0;
}
.tag-comment {
	border-top:1px dashed #fff;
	border-bottom:1px dashed #ccc;
	background-color:#f2f2f2;
	text-align:left;
}
.tag-comment:first-child {
	border-top:1px solid #fff;
}
.tag-comment:last-child {
	border-bottom:1px solid #ddd;
}

.tag-comment-button {
	height:23px;
	line-height:23px;
	border-top:1px solid #f8f8f8;
	background-color:#e8e8e8;
}

.gray-shaded-3 {
	box-shadow:2px 3px 3px rgba(32,32,32,0.25);
	-moz-box-shadow:2px 3px 3px rgba(32,32,32,0.25);
	-webkit-box-shadow:2px 3px 3px rgba(32,32,32,0.25);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=3);
}
.dark-shaded-3 {
	box-shadow:2px 3px 3px rgba(32,32,32,0.5);
	-moz-box-shadow:2px 3px 3px rgba(32,32,32,0.5);
	-webkit-box-shadow:2px 3px 3px rgba(32,32,32,0.5);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=3);
}

#overlay-screen {
	display:none;
	width:100%;
	height:100%;
	-overflow:scroll;
	position:absolute;
	left:0;
	top:0;
	background-image:url(../images/black-80.png);
	-background-color:#000;
	-opacity:0.7;
	-filter:alpha(opacity='70');
	z-index:5;
}

#overlay-canvas {
	background-color:white;
	margin-top:20px;
	margin-bottom:20px;
	opacity:0.95;
	filter:alpha(opacity='95');
	z-index:7;
}

img.overlay {
	max-width:640px
}
img.userphoto {
	width:50px;
	margin:8px 0 0 8px;
}

.rounded-2 {
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
}
.rounded-3 {
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
}
.rounded-4 {
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
}
.rounded-6 {
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-o-border-radius:6px;
}
.rounded-8 {
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-o-border-radius:8px;
}
.shaded-8 {
	box-shadow:4px 4px 10px rgba(32,32,32,0.35);
	-moz-box-shadow:4px 4px 10px rgba(32,32,32,0.35);
	-webkit-box-shadow:4px 4px 10px rgba(32,32,32,0.35);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0,direction=135,strength=8);
}

.codeas { font-size:11px; line-height:15px; font-family:Courier New,monospace; background:white; border:1px solid #bad1d1; padding:8px; }
.courier { font-family:Courier New,monospace }



.canvas-menu-background-purple {
	background-color:#6c4fa3;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#9b83cd), to(#4f3586));
	background-image:-moz-linear-gradient(top, #9b83cd, #4f3586);
	background-image:-o-linear-gradient(#9b83cd, #4f3586);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9b83cd', endColorstr='#4f3586');
	zoom:1;
	box-shadow:0px 2px 4px rgba(0,0,0,0.4);
	position:relative;
}

.menu-selected-background-purple {
	background-color:#6c4fa3;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#785cb2), to(#321d60));
	background-image:-moz-linear-gradient(top, #785cb2, #321d60);
	background-image:-o-linear-gradient(#785cb2, #321d60);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#785cb2', endColorstr='#321d60');
	zoom:1;
	box-shadow:0px 2px 4px rgba(0,0,0,0.4);
	position:relative;
}

.canvas-menu-background-orange {
	background-color:#c3672f;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#dc8c5b), to(#a84b13));
	background-image:-moz-linear-gradient(top, #dc8c5b, #a84b13);
	background-image:-o-linear-gradient(#dc8c5b, #a84b13);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc8c5b', endColorstr='#a84b13');
	zoom:1;
	box-shadow:0px 2px 4px rgba(0,0,0,0.4);
	position:relative;
}

.canvas-menu-text {
	text-shadow:1px 1px 3px black;
}

.canvas-small {
	background-color:#fcfcf8;
	box-shadow:1px 1px 3px rgba(0,0,0,0.4);
}
.link-on-black:hover { color:#fff }
.link-on-menu:hover {
	#color:#dc8c5b;
	background-color:#ca5914;
}

.canvas-delimeter { height:90px }

div.title { font-size:15px; font-weight:bold }
div.desc { color:#444; margin-top:10px; margin-bottom:35px; line-height:19px }