@charset "utf-8";

/* Font import */
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body{
	font-family: 'Nanum Myeongjo', 'Nanum Gothic';
	font-size: 12pt;
}

/* Float 버그 */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */



/* layout */
.container {
	padding-top: 30px;
	margin: 0 auto;
	width: 900px;
}

.sidebar {
	position: fixed;
	float: left;
	width: 210px;
}

.blogImage img{
	width: 200px;
}

.blogImage img:hover {

}


.contents {
	float: right;
	width: 640px;
}

.sidebar ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}




	.wrapper {
		margin:0 auto;
		width: 900px;
	}

	#sideBarWrapper {
		background-color: #666;
		position: fixed;
		width: 270px;
		padding: 80px 30px 20px 20px;

		-webkit-box-shadow: 2px 0 4px 0px rgba(200, 200, 200, 1);
		box-shadow: 2px 0 4px 0px rgba(200, 200, 200, 1);

		-o-transition:background .2s ease-out, background .2s ease-in;
		-ms-transition:background .2s ease-out, background .2s ease-in;
		-moz-transition:background .2s ease-out, background .2s ease-in;
		-webkit-transition:background .2s ease-out, background .2s ease-in;
		/* ...and now override with proper CSS property */
		transition:background .2s ease-out, background .2s ease-in;
	}

	#sideBarWrapper:hover {
		background-color: #5f5f5f;

	}

	#aboutMe {
		display: none;
	}

	#sidebar-elements-toggle {
		display: none;
		margin-top: 20px;
	}




	span.mobile-only-menu {
		display: none;
	}

	#entry-header {
		margin-top: 60px;
	}



	.entry-bottom {
		margin-bottom: 60px;
	}


/* typo */
	a, span, input {

		-o-transition:color .2s ease-out, background .2s ease-in;
		-ms-transition:color .2s ease-out, background .2s ease-in;
		-moz-transition:color .2s ease-out, background .2s ease-in;
		-webkit-transition:color .2s ease-out, background .2s ease-in;
		/* ...and now override with proper CSS property */
		transition:color .2s ease-out, background .2s ease-in;
	}

	a:hover {
		text-decoration: none;
	}

/* aside components */


	h1.site-title {
		font-size: 18px;
		letter-spacing: 1px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		margin-top: 20px;
	}


	/* 01 */
	h1.site-title a {
		color:#eee;
	}

	h1.site-title a:hover {
		color:white;
	}

	h2.site-subtitle {
		color: #999;
		font-size: 12px;
		margin-top: 7px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h2.site-subtitle a {
		color: #999;
		cursor: pointer;
	}

	h2.site-subtitle a:hover {
		color: #aaa;
	}

	h2.site-subtitle a:hover:after {
		content: "..?";
	}

	#aboutMe {
		margin: 20px auto;
		padding: 20px 0;
		border-top: 1px solid #6f6f6f;
		border-bottom: 1px solid #6f6f6f;
		font-weight: 600;
	}

	#aboutMe h1 {
		color: white;
		margin-bottom: 20px;
	}

	#aboutMe h2, h3 {
		color: black;
	}

	#aboutMe p {
		margin-top: 20px;
		color: #333;
	}

	#menu-buttons {
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		margin-top: 30px;
	}

	/* 02 */
	#menu-buttons a{color:#333;}
	#menu-buttons a:hover{color:black;}

	#menu-buttons ul {
		list-style-type: none;

	}

	#menu-buttons ul li {
		display: inline;
		padding-right: 20px;
	}

	#navigation {
		margin-top: 40px;
		margin-bottom: 40px;
		font-size: 14px;
		font-weight: 600;
	}

	/* 카테고리별 글 갯수 나타내지 않음 */
	.c_cnt {
		display: none;
	}

	/* 02 */
	#navigation a{color:#333; font-weight: 600;}
	#navigation a:hover{color:black;}

	#navigation ul li,
	#navigation ul li ul li {
		padding-left: 0;
		margin-left: 0;
	}

	#navigation ul li ul li ul li {
		padding-left: 5px;
		margin-left: 0;
	}

	/* etc */
	#navigation ul li ul li ul li a {color: #777;}
	#navigation ul li ul li ul li a:hover {color: #888;}

	.search {
		text-align: center;
		margin-top: 30px;
	}

	.search input[type="text"] {
		width: 100% !important;
	    background-color: transparent;
	    border: 2px solid #6f6f6f;
	    font: bold 12px Arial,Helvetica,Sans-serif;
	    color: #999;
	    padding: 6px 10px 6px 10px;
	    outline: none;
    	box-shadow:none !important;
    }

	.counter {
		position: absolute;
		bottom: 20px;
		right: 30px;
		font-size: 9px;
	}

	.counter a {color:#777;}
	.counter a:hover {color:#999;}


/* 글 상단 토글에 의한 사이드바 요소 출력 */
	
	/* 토글 버튼에 관한 스타일 */
	#toggle-sidebar {
		text-align: center;
		margin-bottom: 80px;
		margin-top: 0;
		padding-top: 5px;
	}

	#toggle-sidebar span {
		font-size: 16px;
		border-radius: 0 0 8px 8px;
		border: 1px solid;
		padding: 5px 20px;
		cursor: pointer;

		-webkit-box-shadow: 0 1px 2px 0px rgba(200, 200, 200, 0.4);
		box-shadow: 0 1px 2px 0px rgba(200, 200, 200, 0.4);
		border-color: white transparent;
	}

	/* 05 */
	#toggle-sidebar span {color: #eee}
	#toggle-sidebar span:hover {color: #62b8b5;}


	/* 탭메뉴로 나타는 요소들에 관한 스타일 */
	#sidebar-elements-toggle {
		border-bottom: 1px solid #eee;
	}

	.tab-content {
		padding: 10px;
		font-weight: bold;
	}

	/* copied from bootstrap */
	.tabs {
		border-bottom: 1px solid #eee;
		text-align: center;
		padding-top: 0;
	}

	.nav-tabs {
	  padding-left: 0;
	  margin-bottom: 0;
	  list-style: none;
	  font-weight: 600;
	}

	.nav-tabs:before,
	.nav-tabs:after {
	  display: table;
	  content: " ";
	}

	.nav-tabs:after {
	  clear: both;
	}

	.nav-tabs:before,
	.nav-tabs:after {
	  display: table;
	  content: " ";
	}

	.nav-tabs:after {
	  clear: both;
	}

	.nav-tabs > li {
	  position: relative;
	  display: inline-block;
	}

	.nav-tabs > li > a {
	  position: relative;
	  display: block;
	  padding: 10px 15px;
	}

	.nav-tabs {
	  
	}

	.nav-tabs > li {
	  margin-bottom: -2px;
	}

	.nav-tabs > li > a {
	  margin-right: 2px;
	  line-height: 1.428571429;
	}

	.nav-tabs > li > a:hover {

	}

	.nav-tabs > li.active > a,
	.nav-tabs > li.active > a:hover,
	.nav-tabs > li.active > a:focus {
	  color: #62b8b5;
	  cursor: default;
	  border-bottom: 3px solid #62b8b5;
	}

	.nav-tabs span.menu-title {
		margin-left: 3px;
	}

	.tab-content > .tab-pane {
	  display: none;
	}
	.tab-content > .active {
	  display: block;
	}

	.post ul,
	.recent-comment ul,
	.notice ul,
	.adminMenu ul,
	.category ul,
	.tagbox ul,
	.recentTrackback ul,
	.archive ul,
	.link ul { 
		padding: 0;
		padding-left: 10px;
		margin: 0;
		list-style-type: none;
	}

	.post ul li:before,
	.recent-comment ul li:before,
	.notice ul li:before,
	.category ul li:before,
	.recentTrackback ul li:before,
	.archive ul li:before,
	.link ul li:before
	{
		content: "-";
		color: #ccc;
		font-weight: 600;
	}

	.post ul li,
	.recent-comment ul li,
	.notice ul li,
	.category ul li,
	.recentTrackback ul li,
	.archive ul li,
	.link ul li {
		padding: 5px;
	}

	.tab-content .date {
		color: #999;
		margin-right: 5px;
		font-weight: 600;
	}

	.tab-content .name {

	}

	.sidebar-elements .cnt {
		color: #62b8b5;
	}

	.adminMenu ul li,
	.tagbox ul li {
		display: inline;
	}

	/* tag box */
	.tagbox ul li {
		padding: 3px 5px;
		font-weight: 600;
	}

	.tagbox .cloud5 a {color: #ccc;}
	.tagbox .cloud4 a {color: #aaa;}
	.tagbox .cloud3 a {color: #888;}
	.tagbox .cloud2 a {color: #666;}
	.tagbox .cloud1 a {color: #444;}

	.tagbox .cloud5 a:hover,
	.tagbox .cloud4 a:hover,
	.tagbox .cloud3 a:hover,
	.tagbox .cloud2 a:hover,
	.tagbox .cloud1 a:hover {
		color: #62b8b5;
	}

	/* recent Trackback */
	.recentTrackback .name {
		color: #62b8b5;
	}

    /* calendar */
    .calendar {
    	max-width: 400px !important;
    	margin: 10px auto;

    }

	.cal_month {
		margin-bottom: 10px;
		color: #999;
	}

	.tt-calendar thead {
		border-bottom: 5px solid transparent;
	}

    .cal_week1, .cal_week2 {
		font-size: 16px; 
		color: #62b8b5;
		font-weight: 600;
		text-align: center;
	}

	.cal_day {
		font-size: 16px; 
		font-weight: 600;
		color: #ccc; 
		text-align: center;
		padding: 3px;
		margin: 1px;
	}

	a.cal_click:link { color:#999;}
	a.cal_click:visited { color:#888;}
	a.cal_click:hover { color:#62b8b5;}


/* entry-sub components: 검색결과, 카테고리, 태그, 보호글 */

	#search-result-panel {
		font-weight: bold;
	}

	#search-result-panel .col-md-3,
	#search-result-panel .col-md-9 {
		padding: 0;
	}

	.search-result-panel-header-wrapper {
		padding: 0 20px 0 20px;
		color: white;
		background-color: #62b8b5;
	}

	.search-result-header {
		text-align: right;
		position: relative;
	}

	.search-result-panel-header-wrapper .search-result-count {
		font-size: 70px;
		display: block;
	}
	
	.search-result-panel-header-wrapper .search-result-about {
		font-size: 14px;
		display: block;
		margin-top: -12px;
	}

	#search-result-header-onMobile {
		display: none;
	}

	.search-result-panel-list ol {
		list-style-type: none;
		padding: 0 10px;
		margin: 0 0 0 5px;
	}

	.search-result-panel-list ol li {
		padding: 5px 0;
		border-bottom: 1px dashed #eee;
	}

	span.search-result-panel-list-date {
		color: #999;
		font-weight: 600
	}

	span.search-result-panel-list-count {
		color: #62b8b5;
	}
	
/* article components */
	.entry-date-and-comment-wrapper {
		text-align: right;
		
		font-size: 14px;
		margin-top: 30px;
	}

	.entry-date,
	.comment-number {
		padding: 5px 10px;
		color: white;
		font-weight: 600;
	}

	.entry-date {
		background-color: #ccc;
	}

	/* 06 */
	.entry-date a,
	.comment-number a {
		color: rgba(255,255,255,0.8);
	}
	.entry-date a:hover,
	.comment-number a:hover {
		color: rgba(255,255,255,1);
	}

	.comment-number {
		background-color: #62b8b5;
	}

	.entry-title {
		font-size: 40px;
		font-weight: 800;
		color: #62b8b5;
		margin-top: 50px;
		margin-bottom: 0;
		font-weight: 600;
	}

	/* etc */
	.entry-title a {color: black;}
	.entry-title a:hover {color: #999;}

	.which-category {
		margin-top: 12px;
		margin-bottom: 50px;
		font-size: 16px;
		text-transform: uppercase;
		font-weight: 600;
	}

	.entry-contents {
		color: #666;
		font-size: 16px;
		line-height: 1.5em;
		font-weight: 500;
	}

	.entry-contents ol,
	.entry-contents ul {
		margin: 20px;
		padding: 20px;
	}

	.entry-contents p.lead {
		color: #333;
		font-weight: 600;
		font-size: 22px;
		line-height: 1.4em;
		margin-bottom: 40px;
	}

	.entry-contents p {
		margin: 20px auto;
	}

	.entry-contents hr {
		height: 0;
		border-bottom: 2px solid #eee;
		margin: 40px 150px;
	}

	/* article components */

	.entry-contents h1,
	.footnotes h1,
	.entry-contents h2,
	.footnotes h2,
	.entry-contents h3,
	.footnotes h3,
	.entry-contents h4,
	.footnotes h4,
	.entry-contents h5,
	.footnotes h5,
	.entry-contents h6,
	.footnotes h6 {
		color: #333;
		font-weight: bold;
	}

	.entry-contents h1,
	.footnotes h1,
	.entry-contents h2,
	.footnotes h2 {
		margin-top: 30px;
		margin-bottom: 10px;
		line-height: 1.4em;
	}

	.entry-contents h3,
	.footnotes h3,
	.entry-contents h4,
	.footnotes h4,
	.entry-contents h5,
	.footnotes h5,
	.entry-contents h6,
	.footnotes h6 {
		margin-top: 20px;
		margin-bottom: 8px;
	}

	blockquote,
	.tx-quote-tistory {
		font-size: 18px;
		max-width: 100%;
		margin: 40px 10px;
		padding: 0 30px;
		line-height: 1.4;
		position: relative;
		color: #999;
		border-left: 0;
	}

	blockquote p,
	.tx-quote-tistory p {
		margin-bottom: 10px;
		font-weight: 600;
	}

	blockquote:before,
	.tx-quote-tistory:before {
		font-family: georgia, serif;
		display: block;
		content: "\201c";
		font-size: 80px;
		position: absolute;
		left: -20px;
		top: -50px;
		margin-top: 20px;
		margin-bottom: 20px;
		color: #62b8b5;
	}

	blockquote cite,
	.tx-quote-tistory cite {
		color: #ccc;
		font-size: 14px;
		display: block;
		margin-top: 5px;
	}
	 
	blockquote cite:before,
	.tx-quote-tistory blockquote cite:before {
		content: "\2014 \2009";
	}

	/* img style */	
	img {max-width: 100%; height: auto;}
	span.imageblock {max-width: 100%; height: auto;}
	.imageblock {
		margin: 40px auto;
	}


	/* 이미지 캡션 스타일 */
	.cap1 { 
		font-size: 14px; 
		font-weight: bold;
		line-height: 1.4em;
		color:#333; 
		max-width: 90%; 
		text-align:left; 
		border-left: 2px solid #ccc; 
		margin:5px 20px 0 5px; 
		padding: 8px 10px 8px 12px;
	}

	.footnotes ol:before {
		content: "Footnotes";
		font-weight: 600;
		color: #62b8b5;
	}

	.footnotes ol {
		margin-top: 40px;
	}

	.footnotes li{
		color: #999;
		font-weight: bolder;
		font-size: 14px;
		line-height: 1.6em;
		padding: 10px;
		border-bottom: 1px dashed #eee;
	}

/* article-sub: tag/location log, guest book, search results, etc.. */

	/* protected-article */
	.protected-entry-notice {
		font-weight: 600;
		margin-top: 40px;
	}

	.admin-menu {
		padding: 20px;
		font-size: 14px;
		font-weight: 600;
		text-align: right;
	}


/* Entry-bottom: trackback, tags and comments */
	.trackback-and-tag, .trackback {
		margin-top: 40px;
	}

	/* 06 */
	.trackback-and-tag a {color: rgba(255,255,255,0.8);}
	.trackback-and-tag a:hover {color: rgba(255,255,255,1);}

	span.trackback-number-and-toggle {
		padding: 5px 7px 5px 10px;
		color: rgba(255,255,255,0.8);
		background-color: #62b8b5;
		font-size: 16px;
		font-weight: 600;
	}

	span.tags span.icon-tag {
		color: #62b8b5;
	}

	span.tags {
		padding: 7px 8px;
		font-size: 16px;
		font-weight: bolder;
		color: #999;
	}

	/* 07 */
	span.tags a {color: #999;}
	span.tags a:hover {color: black;}


	.trackback {
		margin: 10px 10px 50px 10px;
	}

/* commment and guestbook style */
	.comment {
		padding-top: 20px;
	}

	/* list style */
	.comment-and-guestbook-wrapper {
		width: 100%;
		margin: 40px auto;
		border-bottom: 1px dashed #ccc;
	}

		.comment-and-guestbook-wrapper ol {
			margin-left: 0;
			padding-left: 0;
		}

		.comment-and-guestbook-wrapper ol li {
			list-style-type: none;
			padding: 20px 0 20px 20px;
			border-top: 1px dashed #ccc;
		}

		.comment-and-guestbook-wrapper ol li ul {
			margin: 20px 0 0 40px;
			padding-left: 0;
		}

		.comment-and-guestbook-wrapper ol li ul li {
			list-style-type: none;
			padding: 20px 0 20px 10px;
			border-top: 1px dashed #eee;
		}

	.comment-and-guestbook-header {

	}

		span.comment-and-guestbook-name {
			font-weight: 600;
			color: #62b8b5;
			margin: 0;
			font-size: 16px;
		}

		span.comment-and-guestbook-name a {color: #62b8b5;}
		span.comment-and-guestbook-name a:hover {color: #333}

		span.comment-and-guestbook-date {
			color: #ccc;
			font-size: 12px;
			font-weight: 600;
			margin: 5px;
		}

	.comment-and-guestbook-contents {

	}

		.comment-and-guestbook-content {
			font-size: 16px;
			font-weight: 500;
			line-height: 1.4em;
			margin: 10px auto;
			color: #666;
		}

		.comment-and-guestbook-buttons {
			font-size: 12px;
			font-weight: 600;
			text-align: right;
		}

		/* 04 */
		.comment-and-guestbook-buttons a{
			padding-right: 5px;
			color: #ccc;
		}
		.comment-and-guestbook-buttons a:hover {
			color: #62b8b5;
		}

		.warning { color: #f33;}


	/* input form style */
	.writeform {
		width: 100%;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.form-component input {
		width: 60%;
		min-width: 300px;
	}

	.writeform {
		color: #666;
	}

	.writeform p {
		margin-top: 15px !important;
		font-weight: 600;
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
	}

	.form-custom {
		font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
		background: #eee;
		border: none;
		border-radius: 0;
		padding: 10px 10px;
		color: #000;
		display: block;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		max-width: 100%;
		width: 100%;
	 	-webkit-appearance: none;
	 	margin-top: 3px;
		outline: none;
    	box-shadow:none !important;
	}

	.btn-custom {
		margin-top: 10px;
		font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
		font-weight: 600;
		position: relative;
		display: block;
		padding: 0 20px;
		height: 40px;
		line-height: 40px;
		outline: none;
		border: 0;
		border-radius: 0 !important;
		font-size: 16px;
		cursor: pointer;
		-webkit-appearance: none !important;
		color: white;
		background-color: #62b8b5;
	}

	.btn-custom:hover,
	.btn-custom:focus {
		color: white;
		background-color: #3da8a4; /* etc */
	}
	
	.leave-message {
		margin-bottom: 12px; 
		color: #666;
	}

	.commentBox-bookmark {
		color: #666;
	}

	

/* 페이지 네비게이션 */
	.pagination-custom {
		margin: 70px 0 70px;
		text-align: center;
		font-size: 14px;
	}

		span.numbox {
			line-height: 40px;
			font-weight: 600;
		}

		.numbox a {
			padding: 8px 12px;
			margin: 1px;
			border: 1px solid #eee;
			border-radius: 25px;
			color: #999;
			background-color: white;
		}

		.numbox a:hover {
			color: #62b8b5;
			background-color: #eee;
		}

		/* 페이지 네비게이션 (활성화) */
	.pagination-custom .selected {
		color:#62b8b5;
	}

/* category and archive */
	.readmore-and-archive {

	}

	/* 04 */
	.readmore-and-archive a{color:#ccc;}
	.readmore-and-archive a:hover{color:#62b8b5;}

	.readmore-and-archive h4 {
		color: #999;
	}

	.readmore, .archives {
		padding: 20px 0;
		margin: 0;
		font-size: 16px;
	}

	.readmore ul,
	.archives ul {
		margin-top: 15px;
		padding-left: 0;
		margin-left: 0;
		list-style-type: none;
		border-top: 1px dashed #ccc;
	}

	.readmore ul li,
	.archives ul li {
		padding: 10px 0;
		border-bottom: 1px dashed #eee;
		font-weight: bolder;
	}

	span.readmore-count {
		font-size: 14px;
		color: #eee;
	}


/* credit */
	.credit {
		margin: 40px auto;
		color: #999;
		font-size: 14px;
		font-weight: 600;
		text-align: right;
	}

	/* etc */
	.credit a {color:#62b8b5;}
	.credit a:hover {color:#333;}


/* responsible for tablet, narrow window */
@media only screen and (max-width: 991px) {

	.contents {
		padding-top: 30px;
	}

	#toggle-sidebar span {
		border-color: transparent;
	}

	.nav-tabs span {
		display: block;
	}

	.nav-tabs span.menu-title {
		font-size: 10px;
	}

	#leftColumn {
		display: none;
	}

	#search-result-header-onMobile {
		display: block;
	}

}

/* responsible for smart device */
@media only screen and (max-width: 760px) {

#sideBarWrapper {
	float: none;
	height: auto;
	position: relative;
	width: 100%;
	float: none;
	padding: 80px 0 40px 0;

	-webkit-box-shadow: 0 2px 4px 0px rgba(200, 200, 200, 1);
	box-shadow: 0 2px 4px 0px rgba(200, 200, 200, 1);
}

.sideBar {
	max-width: 400px;
	margin: auto;
}

#sidebar-head {
	text-align: center;
}

#aboutMe {
	width: 90%;
	margin: 20px auto;
}

#toggle-sidebar, #sidebar-elements-toggle {
	width: 100%;
	margin: 0 auto;
}

#toggle-sidebar {
	margin-top: 0;
}

#toggle-sidebar span {
	border-color: white #eee #eee #eee;
}

.nav-tabs > li > a {
  padding: 15px 5px 10px 5px;
}

.tab-content {
	padding: 10px 0;
	font-size: 12px;
}

#search-result-panel {
	margin: 20px auto;
	width: 90%;
}

.search-result-panel-header-wrapper {
	padding: 10px;
}

.search-result-panel-header-wrapper .search-result-count, 
.search-result-panel-header-wrapper .search-result-article,
.search-result-panel-header-wrapper .search-result-about {
	font-size: 18px;
	display: inline-block;
}

.contents {
	width: 100%;
	padding: 0 5%;
	margin: 0 auto;
	float: none;
}

.entry-contents hr {
	margin: 40px 80px;
}

.form-component input {
	width: 80%;
	min-width: 150px;
}

.footnotes ol,
.footnotes ol li {
	padding: 6px 0;
}

.comment-and-guestbook-wrapper ol li {
	padding: 20px 0 20px 0;
}

.comment-and-guestbook-wrapper ol li ul {
	margin: 20px 0 0 10px;
	padding-left: 0;
}

.pagination-custom {
	font-size: 12px;
}

.readmore ul li {
	font-size: 14px;
}


/* paste from Ver.1 */
	blockquote,
	.tx-quote-tistory {
		max-width: 100%;
		margin: 40px 10px;
		padding: 0.25em 20px;
	}

	blockquote p,
	.tx-quote-tistory p {
		line-height: 1.4em;
		font-size: 14px;
	}

	blockquote:before,
	.tx-quote-tistory:before {
		font-size: 60px;
		font-weight: bolder;
		top: -40px;
	}

/* Hidden and Seen at mobile devices */

.counter, .archives, #navigation, .search {
	display: none;
}

}