$background-color-hex: #f0f0f0;
$background-color-rgb: rgba(240,240,240,1.0);
$background-color-rgb-fade: rgba(240,240,240,0);

$max-container-width: 1400px;

@mixin post-layout-basic() {
	margin: 0 auto;
	max-width: 640px;
	box-sizing: border-box;
	@media (max-width: 680px) {
		padding: 0 20px;
		width: 100%;
	}
}

hmtl, body
{
	background: $background-color-hex;
}

ul {
	margin: 0;
}

div.wrapper
{
	position: relative;
	margin: 0 auto;
	max-width: $max-container-width;
}

div#to-top
{
	position: fixed;
	z-index: 20;
	bottom: 16px;
	right: 16px;
	font-size: 32px;
	a {
		text-decoration: none;
		color: $font-main-color;
		opacity: 0.5;
		transition: opacity 0.5s;
	}
	a:hover {
		opacity: 1;
	}
}

@mixin icon-divide($height) {
	position: relative;
	z-index: 10;
	padding: 0 0.5em;
	font-size: $height;
}

@mixin icon-divide-fill($height) {
	span.divide-icon {
		@include icon-divide($height);
		background: $background-color-hex;
	}
}

@mixin icon-divide-head($height) {
	span.divide-icon {
		@include icon-divide($height);
	}
}

@mixin full-divide() {
	div.full-divide
	{
		position: absolute;
		top: 0;
		height: 50%;
		width: 100%;
		border-bottom-width: 2px;
		border-bottom-style: solid;
	}
}

@mixin full-divide() {
	div.full-divide
	{
		position: absolute;
		top: 45%;
		height: 9px;
		width: 100%;
		border-bottom-width: 3px;
		border-bottom-style: solid;
		border-top-width: 3px;
		border-top-style: solid;
	}
}

@mixin head-divide() {
	div.full-divide
	{
		//position: absolute;
		top: 35%;
		height: 9px;
		width: 100%;
		border-bottom-width: 3px;
		border-bottom-style: solid;
		border-top-width: 3px;
		border-top-style: solid;
	}
}

header.overview {
	position: relative;
	padding-top: 1em;
	z-index: 1;
	text-align: center;
	h1 {
		@include main-header-basic();
		padding: 0 0.5em;
		color: $font-main-color;
		line-height: 1em;
	}
}

header.full
{
	position: relative;
	width: 100%;
	max-height: $max-container-width/2;
	min-height: 280px;
	//height: 100%;

    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;

	div.title-container {
		position: absolute;
		left: 50%;
		bottom: 1em;
		div.title-contents {
			position: relative;
			left: -50%;
			overflow: hidden;
			color: $font-main-color;
			h1 {
				position: relative;
				text-align: center;
				@include main-header-basic();
				@media (min-width: 640px) {
					white-space: nowrap;
				}
			}
			div.subhead {
         		$height: 56px;
         		position: relative;
    			top: 5px;
    			width: 100%;
    			height: $height;
  				img.section-logo span.divide-icon{
  					position: absolute;
  					bottom: 0;
  					width: $height;
  					height: $height;
  				}
  				span.divide-icon {
  					position: absolute;
  					bottom: $height/2.5;
  					width: 100%;
  					text-align: center;
  					font-size: $height;
  				}
    			div.divide-section {
    				position: absolute;
    				bottom: 0;
    				width: 50%;
    				height: $height;
    			}
    			div.divide-section.left {
    				left: -$height;
    			   	box-sizing: border-box;
    				@include head-divide();
    			}
      			div.divide-section.right {
    				right: -$height;
    				@include head-divide();
    			}
    		}
		}
	}

	/*
	h1 {
		@include main-header-basic();
		position: absolute;
		z-index: 5;
		bottom: 1em;
		width: 100%;
		text-align: center;
    	color: $header-full-title-color;
    	span {
    		position: relative;
    		text-align: center;
    		display: block;

    		div.subhead {
    			position: absolute;
        		$height: 56px;
    			bottom: -$height/1.4;
    			width: 100%;
    			height: $height;
    			line-height: $height;
    			font-size: $height;
    			overflow: hidden;
  				@include icon-divide-head($height);
  				img.section-logo {
  					width: $height;
  					height: $height;
  				}
    			div.divide-section {
    				position: absolute;
    				top: 0;
    				width: 50%;
    				height: $height;
    			}
    			div.divide-section.left {
    				left: -$height;
    			   	box-sizing: border-box;
    				@include head-divide();
    			}
      			div.divide-section.right {
    				right: -$height;
    				@include head-divide();
    			}
    		}
    	}
	}
	*/
	img
	{
		position: relative;
		z-index: 0;
		width: 100%;
		height: auto;
	}
}

// See NAV.SCSS

div#summary, div#status {
	padding: 1em 0 1em 0;
	position: relative;
	width: 100%;
	header {
		$header-height: 3em;
		position: relative;
		margin: 0 auto;
		max-width: 640px;
		text-align: center;
		color: $font-main-color;
		@include icon-divide-fill($header-height);
		@include full-divide();
	}
	main {
		@include post-layout-basic();
		padding: 1em 0;
		text-align: justify;
		p {
			@include post-content-loud;
			margin: 0.5em 0;
			color: $font-main-color;
			span {
				padding: 0 5px;
				transition: color 0.5s;
			}
			a {
				text-decoration: none;
				opacity: 0.9;
				transition: opacity 0.2s;
			}
			a:hover, .line-hover {
				opacity: 1;
			}
			.line-hover {
				background: #e0e0e0;
				border-radius: 0.5em;
			}
			a, a:visited {
				color: $font-author-color;
			}
			i {
				padding: 0;
				font-size: 0.75em;
			}
		}
	}
	footer {
		$footer-height: 3em;
		position: relative;
		margin: 0 auto;
		max-width: 640px;
		height: $footer-height;
		text-align: center;
		transition: color 0.5s;
		@include icon-divide-fill($footer-height);
		@include full-divide();
		div {
			position: absolute;
			top: 0;
			height: $footer-height;
			line-height: $footer-height;
			background: $background-color-hex;
			a {
				text-decoration: none;
				@include nav-loud();
				color: $font-main-color;
				transition: color 0.5s;
			}
		}
		.prev {
			left: 0;
			padding-right: 1em;
			text-align: left;
		}
		.next {
			right: 0;
			padding-left: 1em;
			text-align: right;
		}
	}
}

div#status {
	padding-top: 0;
	main {
		p {
			@include post-content-louder;
			a {
				color: $font-main-color-fade;
				opacity: 0.8;
				transition: opacity 0.5s;
			}
			a.hover {
				opacity: 1;
			}
			a.author {
				color: rgba(219,166,20,1.0);
			}
			span.time {
				font-family: "Lucida Console", Monaco, monospace;
			}
		}
	}
}

div#about-divide {
	padding-top: 1em;
	width: 100%;
	text-align: center;
	span.about-picto {
		font-size: 15em;
		font-size: 50vw;
		color: $font-author-color;
	}
}