/**
 * framework.css
 * The CSS page that serves all page requests on a Theme.
 *
 * @author	James Kim
 * @update	2015/09/23
 * @contact	james@itfunpeople.com
 */
	/**
	 * Common
	 * Treatment fonts, link, textual for the Core
	 */
	html, html a, * {-webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; text-shadow:rgba(0,0,0,.01) 0 0 1px;}
	body {color:#666;}
	a {color:#444547;}
	a:hover,
	a:focus {color:#55aaea;}
	blockquote p {font-size:13px;}

#en {font:14px/1.42857143 Arial,Helvetica,AppleGothic,sans-serif;}
#en h1, #en h2, #en h3, #en h4, #en h5, #en h6, #en .h1, #en .h2, #en .h3, #en .h4, #en .h5, #en .h6 {font-family:'Roboto',sans-serif; font-weight:400;}
#ko {font:14px/22px 'Noto Sans KR',sans-serif; font-weight:300;}
#ko h1, #ko h2, #ko h3, #ko h4, #ko h5, #ko h6, #ko .h1, #ko .h2, #ko .h3, #ko .h4, #ko .h5, #ko .h6 {font-family:'Noto Sans KR',sans-serif; font-weight:400;}
#ja {font:13px/22px 'メイリオ','Meiryo','MS P Gothic','Hiragino Kaku Gothic Pro',arial,sans-serif;}
#ja h1, #ja h2, #ja h3, #ja h4, #ja h5, #ja h6, #ja .h1, #ja .h2, #ja .h3, #ja .h4, #ja .h5, #ja .h6 {font-family:'Noto Sans JP',sans-serif;}
#en pre {font-family:Calibri,Arial,Helvetica,AppleGothic,sans-serif;}
#ko pre {font-family:'Noto Sans KR',sans-serif;}
#ja pre {font-family:'Noto Sans JP',sans-serif;}

	/**
	 * Header
	 *
 	 * @dependency Bootstrap
	 */
	.navbar {margin-bottom:0;}
	.header {}

	.navbar-default {border-color:#fff; background-color:#fff;}

	.navbar-default .navbar-brand {font-family:'Roboto',sans-serif; font-weight:500;}
	.navbar-default .navbar-brand,
	.navbar-default .navbar-brand:focus,
	.navbar-default .navbar-brand:hover {color:#333;}
	.navbar-default .navbar-nav > li > a {white-space:nowrap; color:#333;}
	.navbar-default .navbar-nav > li > a:focus,
	.navbar-default .navbar-nav > li > a:hover {background-color:#eee; color:#333;}
	.navbar-default .navbar-nav > .active > a,
	.navbar-default .navbar-nav > .active > a:focus,
	.navbar-default .navbar-nav > .active > a:hover {background-color:#eee; color:#2481b7;}
	.navbar-default .navbar-nav > .open > a,
	.navbar-default .navbar-nav > .open > a:focus,
	.navbar-default .navbar-nav > .open > a:hover {background-color:#eee; color:#2481b7;}
	.navbar-default .dropdown-menu > .active > a,
	.navbar-default .dropdown-menu > .active > a:focus,
	.navbar-default .dropdown-menu > .active > a:hover {background-color:transparent; color:#2481b7;}
#en .navbar-default .dropdown-menu > li > a {}
#ko .navbar-default .dropdown-menu > li > a {font-size:14px; font-weight:300;}
#ja .navbar-default .dropdown-menu > li > a {font-size:14px; font-weight:normal;}

	/**
	 * Masthead
	 *
 	 * @dependency Bootstrap
	 */
	.masthead {margin-bottom:40px; padding-top:60px; padding-bottom:60px; background-color:#0fa7db; background-image:url('../images/common/background-masthead.png');}
	.masthead h1 {margin:0 0 10px 0; color:#fff;}
	.masthead h3 {margin:0; color:#fff;}
#en .masthead h1 {font-size:45px;}
#en .masthead h3 {font-size:24px; font-weight:300;}
#ko .masthead h1 {font-family:'Roboto',sans-serif; font-size:45px; font-weight:400;}
#ko .masthead h3 {font-size:24px; font-weight:400;}
#ja .masthead h1 {font-size:45px; font-weight:500;}
#ja .masthead h3 {font-size:24px; font-weight:400;}
	.masthead .list-group {margin-bottom:0;}
	.masthead .list-group-item > .badge {font-family:arial,sans-serif; font-size:14px; font-weight:normal;}

	/**
	 * Contents
	 *
 	 * @dependency Bootstrap
	 */
	.contents {position:relative;}

	.docs-section {overflow:hidden; margin-bottom:60px;}
	.docs-section:last-child {margin-bottom:0;}
	.docs-section .code-example {position:relative; padding:45px 15px 15px; border:1px solid #ddd; border-radius:4px 4px 0 0; box-shadow:none; background-color:#fff;}
	.docs-section .code-example::after {position:absolute; top:15px; left:15px; font-size:12px; font-weight:700; color:#959595; text-transform:uppercase; letter-spacing:1px; content:'Example';}
	.docs-section .code-example .image-container .row {margin-left:0; margin-right:0;}
	.docs-section .code-example .image-container .row > div {padding-left:0; padding-right:0;}
	.docs-section .code-example .image-container .row > div > img {padding:1px;}
	.docs-section .code-example + .highlight pre {margin:-1px 0 0 0; border-radius:0 0 4px 4px;}
	.docs-section .highlight pre {background:#f7f7f9;}
	.docs-section :not(pre) > code[class*="language-"],
	.docs-section pre[class*="language-"] {border-color:#e1e1e8; background:#f7f7f9;}

	.page-header {margin:0 0 20px 0; padding-top:20px; padding-bottom:9px;}
	.page-header h2 {margin:0;}
#en .page-header h2 {font-size:36px;}
#ko .page-header h2 {font-size:28px; font-weight:500;}
#ja .page-header h2 {font-size:30px; font-weight:700;}
#en .page-content h3 {font-size:24px;}
#ko .page-content h3 {font-size:20px; font-weight:400;}
#ja .page-content h3 {font-size:20px; font-weight:500;}
	.page-content ul {margin:25px 0;}
	.page-content li {margin-bottom:15px;}

	.affix-wrap {top:0; width:165px; margin:20px 0;}
	.affix-wrap .nav > li > a {display:block; padding:4px 20px; color:#767676;}
#en .affix-wrap .nav > li > a {font-size:13px;}
#ko .affix-wrap .nav > li > a {font-size:13px;}
#ja .affix-wrap .nav > li > a {font-size:13px;}
	.affix-wrap .nav > li.active > a {padding-left:18px; border-left:2px solid #2481b7; background-color:transparent; color:#2481b7;}
	.affix-wrap .nav > li > a:focus,
	.affix-wrap .nav > li > a:hover {padding-left:18px; border-left:2px solid #2481b7; text-decoration:none; background-color:transparent; color:#2481b7;}
	.affix-wrap .back-to-top {display:block; margin-top:10px; margin-left:10px; padding:4px 10px; font-size:12px; font-weight:500; color:#999;}

	/**
	 * Footer
	 *
 	 * @dependency Bootstrap
	 */
	footer {margin-top:60px; padding:55px 0 60px; border-top:1px solid #f2f2f2; text-align:center;}
	footer ul li {color:#666;}
#en footer ul li {font-size:14px;}
#ko footer ul li {font-size:14px;}
#ja footer ul li {font-size:14px;}
	footer p {color:#a6a6a6;}
#en footer p {font-size:14px;}
#ko footer p {font-size:14px;}
#ja footer p {font-size:14px;}
	footer address {font-size:13px; color:#666;}

/**
 * Media Query
 */
@media (min-width:768px) and (max-width:991px) {
}

@media (min-width:992px) and (max-width:1199px) {
}

@media (max-width:767px) {
}

@media (max-width:991px) {/* Mobile & Tablet */
	#en {font-size:14px; line-height:1.42857143;}
	#ko {font-size:15px; line-height:22px;}
	#ja {font-size:14px; line-height:22px;}

	.navbar-default .navbar-toggle {border-color:transparent;}
	.navbar-default .navbar-toggle:focus,
	.navbar-default .navbar-toggle:hover {background-color:transparent;}
	.navbar-default .navbar-toggle:focus .icon-bar,
	.navbar-default .navbar-toggle:hover .icon-bar {background-color:#0fa7db;}
	.navbar-default .navbar-nav {margin-bottom:0;}
	.navbar-default .navbar-right {margin-top:0; margin-bottom:7.5px;}

		.masthead {padding-top:15px; padding-bottom:15px;}
		.masthead h1 {margin-bottom:20px;}
	#en .masthead h1 {font-size:35px;}
	#ko .masthead h1 {font-size:35px;}
	#ja .masthead h1 {font-size:35px;}
		.masthead h3 {margin-bottom:15px;}
	#en .masthead h3 {font-size:18px;}
	#ko .masthead h3 {font-size:20px;}
	#ja .masthead h3 {font-size:20px;}

	#en .page-header h2 {font-size:36px;}
	#ko .page-header h2 {font-size:28px; font-weight:500;}
	#ja .page-header h2 {font-size:30px; font-weight:700;}
	#en .page-content h3 {font-size:24px;}
	#ko .page-content h3 {font-size:20px; font-weight:400;}
	#ja .page-content h3 {font-size:20px; font-weight:500;}
}