* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html {overflow-x: hidden;}

.MagicalLayouts {padding: 15px;}
.MagicalLayouts hr {clear: both; border: none; height: 1px; background: #ccc;}

/* header group */
.MagicalLayouts > .hgroup {margin: 0 0 30px 0;}
.MagicalLayouts > .hgroup h1 {
	margin: 0;
	font-family: 'Helvetica'; font-weight: 200; font-size: 36px;
}
.MagicalLayouts > .hgroup h1 a {color: #999; text-decoration: none;}
.MagicalLayouts > .hgroup p {
	margin: 8px 0 0;
	font-size: 13px; color: #444; line-height: 1.48;
}

/* categories */
.MagicalLayouts .categories {border-width: 1px 0; border-style: solid; border-color: #ccc;}
.MagicalLayouts .categories ul {margin: 0; padding: 6px 5px; list-style: none;}
.MagicalLayouts .categories ul:after {content: ''; display: block; clear: both;}
.MagicalLayouts .categories li {float: left;}
.MagicalLayouts .categories a {
	display: block; padding: 5px 6px;
	font-size: 13px; color: #333; text-decoration: none;
}
.MagicalLayouts .categories li:hover a {text-decoration: underline;}
.MagicalLayouts .categories .on a {font-weight: 600; color: #111; text-decoration: underline;}

/* index */
.MagicalLayouts .index {margin: 30px 0;}
.MagicalLayouts .index .wrap {
	margin: 0 auto; padding: 0; list-style: none; position: relative;
}
.MagicalLayouts .index .wrap:after {content: ''; display: block; clear: both;}
.MagicalLayouts .index .item {
	overflow: hidden; margin: 15px; float: left;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
	background: #fff;
}
.MagicalLayouts .index .item:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.MagicalLayouts .index .item a {
	display: block; padding: 15px;
	text-decoration: none;
}
.MagicalLayouts .index .item p {margin: 0;}
.MagicalLayouts .index .item .thumnail img {display: block; width: 100%; border: none;}
.MagicalLayouts .index .item .body {margin: 0; padding: 18px 0 5px;}
.MagicalLayouts .index .item .body .subject {
	font-size: 13px; text-align: center; color: #666; font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.MagicalLayouts .index .empty {text-align: center; font-size: 14px; color: #666;}

/* article */
.MagicalLayouts .article > .hgroup {margin: 15px 0;}
.MagicalLayouts .article > .hgroup > h1 {margin: 0; font-size: 24px; font-weight: 200;}
.MagicalLayouts .article > .hgroup > p {margin: 3px 0 0; font-family: Verdana; font-size: 11px; color: #666;}
.MagicalLayouts .article > .body {margin: 30px 0; font-size: 13px; line-height: 20px; color: #555;}
.MagicalLayouts .article > .body p {margin: 10px 0; text-align:center;}
.MagicalLayouts .article > .body img {max-width: 100%;}
.MagicalLayouts .article > .info {margin: 20px 0;}
.MagicalLayouts .article > .info > h1 {margin: 0 0 8px; font-size: 16px;}
.MagicalLayouts .article > .info dl {margin: 0; font-size: 14px; line-height: 1.6;}
.MagicalLayouts .article > .info dl,
.MagicalLayouts .article > .info dl a {color: #555;}
.MagicalLayouts .article > .info dt {float: left; width: 70px; font-weight: 600; color: #333;}
.MagicalLayouts .article > .info dd {margin: 0 0 0 75px;}

/* page navigation */
.MagicalLayouts .paginate {margin: 30px; text-align: center;}

/* button group */
.MagicalLayouts .btngroup {margin: 30px 0; text-align: center;}
.MagicalLayouts .btngroup > a {
	display: inline-block; margin: 2px; padding: 12px 24px;
	font-size: 14px; color: #333; text-decoration: none;
}
.MagicalLayouts .btngroup > a:hover {
	box-shadow: 1px 1px 5px rgba(0,0,0,.3);
}

.MagicalLayouts #isotopeSpace {display: none;}
.MagicalLayouts #isotopeMessage {
	display: none; margin: 30px 0; padding: 20px 0;
	text-align: center; font-size: 14px; color: #666;
	border: 1px solid #ddd;
}