/*
  copyright(c) "my". all rights reserved.
*/
/* ========================================================== */
/* lib.css */
/* ========================================================== */


/* initialization */
/* ********************************************************** */

/* *{margin:0; padding:0;} */
body, address, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, img, a, ul, ol, li, dl, dt, dd, table, caption, th, td, form, input, textarea, button, select, option, fieldset{word-break:break-word; word-wrap:break-word; margin:0; padding:0;}

html{height:100%;}

/* body */
body{/*font-size:100%;*/ font-weight:normal; font-style:normal; font-variant:normal; font-stretch:normal; font-size-adjust:none; line-height:1.6em; text-align:left; vertical-align:baseline; text-decoration:none; letter-spacing:normal; word-spacing:normal; text-transform:none; text-indent:0; white-space:normal; text-shadow:none;}

/* text */
p, address, blockquote{font-style:normal; line-height:1.5em; text-indent:0;}
cite, em, strong, dfn, abbr, acronym, code, var, kbd, samp, ins, del{font-style:normal;}
code, kbd, samp{font-family:monospace;}
ins{text-decoration:underline;}
del{text-decoration:line-through;}

/* anchor */
a:focus{outline:none;}

/* image */
img{vertical-align:middle; border:none;}

/* list */
ul li{list-style-type:none;}
ol{margin-left:5px; padding-left:30px;}
ol li{list-style-position:outside;}

/* table */
table{border-collapse:collapse; border-spacing:0;}
caption{caption-side:top;}
th, td{text-align:left; vertical-align:top;}


/* general purpose classes */
/* ********************************************************** */

/* color */
.black{color:black;}
.silver{color:silver;}
.gray{color:gray;}
.white{color:white;}
.maroon{color:maroon;}
.red{color:red;}
.purple{color:purple;}
.fuchsia{color:fuchsia;}
.green{color:green;}
.lime{color:lime;}
.olive{color:olive;}
.yellow{color:yellow;}
.navy{color:navy;}
.blue{color:blue;}
.teal{color:teal;}
.aqua{color:aqua;}

/* background color */
.bg-black{background-color:black;}
.bg-gray{background-color:gray;}
.bg-white{background-color:white;}
.bg-red{background-color:red;}
.bg-green{background-color:green;}
.bg-yellow{background-color:yellow;}
.bg-blue{background-color:blue;}
.bg-ivory{background-color:#eeeecc;}

/* font family */
.serif{font-family:serif;}
.sans-serif{font-family:sans-serif;}
.mono{font-family:monospace;}

/* font size */
.small{font-size:90%;}
.medium{font-size:100%;}
.big{font-size:120%;}
.bigger{font-size:144%;}
.biggest{font-size:172%;}
.small, .medium, .big, .bigger, .biggest{line-height:1.6em;}

/* font weight */
.bold{font-weight:bold;}
.normal{font-weight:normal;}

/* font style */
.pre{white-space:pre;}
.nowrap{white-space:nowrap;}
.del{text-decoration:line-through;}
.underline{text-decoration:underline;}

/* text indent */
.indent{text-indent:1em;}
.ls-01{letter-spacing:0.1em;}
.ls-05{letter-spacing:0.5em;}
.ls-10{letter-spacing:1em;}
.ls-20{letter-spacing:2em;}
.ls-30{letter-spacing:3em;}
.margin-indent{margin-left:1em;}
.id-01{padding-left:0.1em;}
.id-05{padding-left:0.5em;}
.id-10{padding-left:1em;}
.id-20{padding-left:2em;}
.id-30{padding-left:3em;}
.id-40{padding-left:4em;}
.id-50{padding-left:5em;}
.id-60{padding-left:6em;}
.id-70{padding-left:7em;}
.id-80{padding-left:8em;}
.id-90{padding-left:9em;}

/* text align */
.center{text-align:center;}
.right{text-align:right;}
.left{text-align:left;}
.justify{text-align:justify;}

/* vertical align */
.top{vertical-align:top;}
.middle{vertical-align:middle;}
.bottom{vertical-align:bottom;}
.baseline{vertical-align:baseline;}
.text-bottom{vertical-align:text-bottom;}
.text-top{vertical-align:text-top;}

/* paragrapgh */
.text{padding:0.4em 5px;}

/* margin & padding */
.just{margin:0; padding:0;}
.margin{margin:10px;}
.x-margin{margin-right:10px; margin-left:10px;}
.y-margin{margin-top:10px; margin-bottom:10px;}
.margin-top{margin-top:20px;}
.margin-bottom{margin-bottom:20px;}
.padding{padding:10px;}
.x-padding{padding-right:10px; padding-left:10px;}
.y-padding{padding-top:10px; padding-bottom:10px;}
.padding-top{padding-top:20px;}
.padding-bottom{padding-bottom:20px;}
.to-center{margin-right:auto; margin-left:auto;}
.to-left{margin-right:auto; margin-left:0;}
.to-right{margin-right:0; margin-left:auto;}
.clearance{padding-top:40px; padding-bottom:40px;}

/* border */
.border{border:#999999 1px solid;}
.border-top{border-top:#999999 1px solid;}
.border-bottom{border-bottom:#999999 1px solid;}
.border-left{border-left:#999999 1px solid;}
.border-right{border-right:#999999 1px solid;}

/* float */
.float-left{float:left;}
.float-right{float:right;}
.clearfix:after{height:0; clear:both; visibility:hidden; content:" "; display:block;}
.clear{font-size:0; line-height:0; height:0; clear:both;}
.clear-left{clear:left;}
.clear-right{clear:right;}
.clear-both{clear:both;}

/* display */
.none{display:none;}
.block{display:block;}
.inline{display:inline;}

/* overflow */
.overflow{overflow:visible;}
.scroll{overflow:scroll;}
.scroll-auto{overflow:auto;}

/* box alignment */
.relative{position:relative;}
.absolute{position:absolute;}

/* width ( multiple of 50 80 120 ) */
.w-max{width:100%;}
.w-half{width:50%;}
.w-auto{width:auto;}
.w-50{width:50px;}
.w-80{width:80px;}
.w-100{width:100px;}
.w-120{width:120px;}
.w-150{width:150px;}
.w-160{width:160px;}
.w-200{width:200px;}
.w-240{width:240px;}
.w-250{width:250px;}
.w-300{width:300px;}
.w-320{width:320px;}
.w-350{width:350px;}
.w-360{width:360px;}
.w-400{width:400px;}
.w-450{width:450px;}
.w-480{width:480px;}
.w-500{width:500px;}
.w-550{width:550px;}
.w-560{width:560px;}
.w-600{width:600px;}
.w-640{width:640px;}
.w-720{width:720px;}

/* height ( multiple of 50 80 120 ) */
.h-max{height:100%;}
.h-half{height:50%;}
.h-auto{height:auto;}
.h-50{height:50px;}
.h-80{height:80px;}
.h-100{height:100px;}
.h-120{height:120px;}
.h-150{height:150px;}
.h-160{height:160px;}
.h-200{height:200px;}
.h-240{height:240px;}
.h-250{height:250px;}
.h-300{height:300px;}
.h-320{height:320px;}
.h-350{height:350px;}
.h-360{height:360px;}
.h-400{height:400px;}
.h-450{height:450px;}
.h-480{height:480px;}
.h-500{height:500px;}
.h-550{height:550px;}
.h-560{height:560px;}
.h-600{height:600px;}
.h-640{height:640px;}

/* minimum height ( multiple of 50 80 120 ) */
.mh-50{height:50px; min-height:50px;} html>body .mh-50{height:auto;}
.mh-80{height:80px; min-height:80px;} html>body .mh-80{height:auto;}
.mh-100{height:100px; min-height:100px;} html>body .mh-100{height:auto;}
.mh-120{height:120px; min-height:120px;} html>body .mh-120{height:auto;}
.mh-150{height:150px; min-height:150px;} html>body .mh-150{height:auto;}
.mh-160{height:160px; min-height:160px;} html>body .mh-160{height:auto;}
.mh-200{height:200px; min-height:200px;} html>body .mh-200{height:auto;}
.mh-240{height:240px; min-height:240px;} html>body .mh-240{height:auto;}
.mh-250{height:250px; min-height:250px;} html>body .mh-250{height:auto;}
.mh-300{height:300px; min-height:300px;} html>body .mh-300{height:auto;}
.mh-320{height:320px; min-height:320px;} html>body .mh-320{height:auto;}
.mh-350{height:350px; min-height:350px;} html>body .mh-350{height:auto;}
.mh-360{height:360px; min-height:360px;} html>body .mh-360{height:auto;}
.mh-400{height:400px; min-height:400px;} html>body .mh-400{height:auto;}
.mh-450{height:450px; min-height:450px;} html>body .mh-450{height:auto;}
.mh-480{height:480px; min-height:480px;} html>body .mh-480{height:auto;}
.mh-500{height:500px; min-height:500px;} html>body .mh-500{height:auto;}
.mh-550{height:550px; min-height:550px;} html>body .mh-550{height:auto;}
.mh-560{height:560px; min-height:560px;} html>body .mh-560{height:auto;}
.mh-600{height:600px; min-height:600px;} html>body .mh-600{height:auto;}
.mh-640{height:640px; min-height:640px;} html>body .mh-640{height:auto;}

/* list */
.list li{margin-left:2em; padding-left:0; list-style-type:disc; list-style-position:outside;}
.no-order li{list-style-type:none;}

/* cursor */
.pointer{cursor:pointer;}