// GO MOBILE FIRST!
.the-header {
	.unit-inner {
		width: @3cols;
		margin-top: @line-height / @em;
		margin-bottom: @line-height / @em;
		margin-left: auto;
		margin-right: auto;
	}
	.logo a {
		font-size: 32px;
		line-height: 42px;
	}
} // the-header

.unit-article {

	.unit-head-inner, .entry-content, .misc-content, .unit-foot-inner {
		width: @3cols;
		margin-left: auto;
		margin-right: auto;
	}

	.unit-head-inner {
		.meta { margin-bottom: @line-height / @em; }
	}

} // .the-article 

.layout-page {

	.unit-body {
		.unit-body-inner {
			width: @3cols;
			margin-left: auto;
			margin-right: auto;
		}
		.article-list { 
			.meta { margin-bottom: @line-height / @em; }
		}
	}

} // .layout-page

.the-footer {

	.unit-foot {
		width: @3cols;
		margin-left: auto;
		margin-right: auto;
	}

}  // .the-footer

/*
 	IE
*/

.ie {
	.the-header {
		.unit-inner {
			width: @11cols;
			margin-top: @line-height / @em;
			margin-bottom: @line-height / @em;
			margin-left: auto;
			margin-right: auto;
		}
		.logo {
			width: @5cols;
			float: left;
		}
		.nav-global {
			margin-top: 50px;
			text-align: right;
			width: @5cols;
			float: right;
		}
	} // the-header

	.unit-article {

		.unit-head-inner, .entry-content, .misc-content, .unit-foot-inner {
			width: @11cols;
			margin-left: auto;
			margin-right: auto;
		}
		.unit-head-inner, .entry-content, .misc-content {
			h1, h2, h3, h4, h5, p, ul, ol, dl, blockquote {
				margin-right: 210px;
			}
		}

		.unit-head-inner {
			.meta {
				width: @4cols;
				float: right;
			}
		}

	} // .unit-article  

	.layout-page {

		.unit-body {
			.unit-body-inner{
				width: @8cols;
				margin-left: auto;
				margin-right: auto;
			}
			.article-list {
				width: @8cols;
				.meta {
					width: @4cols;
					float: right;
				}
			}
		}

	} // layout-page

	.the-footer {

		.unit-foot {
			width: @11cols;
			margin-left: auto;
			margin-right: auto;
		}

	}  // .the-footer

} // .ie

/*
	Smartphone
*/

@media only screen and (min-width: 320px) and (max-width: 767px) {
	img { max-width: 100%; }
}

/*
	Wide Smartphone
*/

@media only screen and (min-width: 480px) {

	.the-header {
		.unit-inner { width: @5cols; }
		.logo a {
			font-size: 42px;
			line-height: 52px;
			letter-spacing: -1px;
		}
		.nav-global {
			margin-top: @line-height / @em;
			letter-spacing: -0.31em;
			*letter-spacing: normal;
			word-spacing: -0.43em;
			list-style: none;
			padding-left: 0;
			.home:after {
				margin-left: 16px;
				content: "/";
			}
			li {
				display: inline-block;
				*display: inline;
				zoom: 1;
				line-height: normal;
				letter-spacing: normal;
				margin-right: 16px;
				word-spacing: normal;
				vertical-align: middle;
				&:last-child { margin-right: 0; }
			}
		}
	} // the-header

	.unit-article {

		.unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { width: @5cols; }
		.unit-foot {
			.gotop { margin-top: @line-height / @em; }
		}

	} // .unit-article  

	.layout-page {

		.unit-body {
			.unit-body-inner { width: @5cols; }
			.article-list { width: @5cols; }
		}

	} // .layout-page 

	.the-footer {

		.unit-foot { width: @5cols; }

	}  // .the-footer

} // min-width: 480px

/*
	Tablet
*/

@media only screen and (min-width: 768px) {

	.the-header {
		.unit-inner { width: @8cols; }
	} // the-header

	.unit-article {

		.unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { width: @8cols;  }

		.unit-head-inner {
			.meta {
				margin-bottom: 0;
				text-align: right;
				width: @4cols;
				float: right;
			}
		}

	} // .the-article 

	.layout-page {

		.unit-body {
			.unit-body-inner { width: @8cols; }
			.article-list {
				width: @8cols;
				.meta {
					margin-bottom: 0;
					text-align: right;
					width: @4cols;
					float: right;
				}
			}
		}

	} // .layout-page

	.the-footer {

		.unit-foot { width: @8cols; }

	}  // the-footer

} // min-width: 768px

/*
	Not that old computer layout 
*/

@media only screen and (min-width: 1280px) {

	.the-header {
		.unit-inner { width: @11cols; }
		.logo {
			width: @5cols;
			float: left;
		}
		.nav-global {
			margin-top: 21px;
			text-align: right;
			width: @5cols;
			float: right;
		}
	} // the-header

	.unit-article {

		.unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { width: @8cols; }

		.unit-foot {
			.pagination {
				float: left;
				width: @7cols;
			}
			.gotop {
				float: right;
				margin-top: 0;
				text-align: right;
				width: @4cols;
			}
		}

	} // .unit-article 

	.layout-page {

		.unit-body {
			.unit-body-inner { width: @8cols; }
			.article-list {
				width: @8cols;
				.meta { width: @4cols; }
			}
		}

	} // .layout-page

	.the-footer {

		.unit-foot { width: @11cols; }

	}  // .the-footer

} // min-width: 1280px

/*
	Huge-screen layout 
*/

@media only screen and (min-width: 1410px) {

	.the-header {
		.unit-inner { width: @16cols; }
		.logo { width: @8cols; }
		.nav-global { width: @8cols; }
	} // the-header

	.unit-article {

		.unit-head-inner, .entry-content, .misc-content { width: @8cols; }
		.unit-foot-inner { width: @16cols; }

		.unit-foot {
			.pagination { width: @10cols; }
			.gotop {
				padding-right: 360px;
				width: @2cols;
			}
		}

	} // .unit-article

	.layout-page {

		.unit-body {
			.unit-body-inner { width: @8cols; }
			.article-list {
				width: @8cols;
				.meta { width: @4cols; }
			}
		}

	} // .layout-page

	.the-footer {

		.unit-foot { width: @16cols; }
		.unit-inner {
			h1, h2, h3, h4, h5, p, ul, ol, dl, blockquote {
				margin-left: 360px;
				margin-right: 360px;
			}
		}

	}  // .the-footer

} // min-width: 1410px
