main.styl

#container{
	position:relative;
	min-height:100%;
	#mobile-nav{
		display: none;
		.overlay{
			height: 110px;
			position: absolute;
			width: 100%;
			background: #4d4d4d;
			&.fixed{
		        position: fixed;
		        height: 42px;
		        z-index: 99;
		    }
		}
		#header{
			padding: 10px 0 0 0;
			.profilepic{
				display: block;
				position: relative;
				z-index: 100;
			}
			.header-menu{
				height: auto;
				margin: 10px;
				ul{
					text-align: center;
					cursor: default;
				}
				li{
					display: inline-block;
					margin: 3px;
				}
			}
		}
	}
	.left-col {
		background: #fff;
		width: 300px;
		position:fixed;
		opacity:1;
		transition:all .2s ease-in;
		height:100%;

		.overlay{
			width: 100%;
			height: 180px;
			background-color: black;
			position: absolute;
			opacity: 0.7;
		}

		.intrude-less {
			width: 76%;
			text-align: center;
			margin: 112px auto 0;
		}
		li:hover {
			background: none;
			font-weight: bold;
		};
	}
	.mid-col {
		position:absolute;
		right:0;
		min-height:100%;
		background:#eaeaea;
		left: 300px;
		width: auto;
	}

	@media screen and (max-width:1040px) {
		
	}@media screen and (max-width:800px) {
		@import "_partial/mobile"
	}
}
.header-author{
	text-align: center;
	margin: 13px 0;
	font-family: Roboto, "Roboto", serif;
	font-size: 30px;
	transition: 0.3s;
}
#header{
	width:100%;
	a {
		color: #696969;
		&:hover {
			color: #B0A0AA;
		}
	}
	.profilepic{
		text-align: center;
		display: block;
		border: 5px solid #fff;
		border-radius: 50%;
		width: 128px;
		height: 128px;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		background: #88acdb;
		-webkit-transition: all 0.2s ease-in;
		display: -webkit-box;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		text-align: center;
		img{
			width: 20%;
			height: 20%;
			border-radius: 300px;
			opacity: 0;
			-webkit-transition: all 0.2s ease-in;
			&.show{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		&:hover {
			background: white;
			border: 5px solid #88acdb;
		};
	}
	.header-subtitle{
		text-align: center;
		color:#999;
		font-size: 14px;
		line-height: 25px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.header-menu{
		font-weight: 550;
		line-height: 28px;
		font-family: inherit;
		cursor: pointer;
		text-transform: uppercase;
		float:none;
		height: 140px;
		margin-left: -12px;
		text-align: center;
		display: -webkit-box;
		-webkit-box-orient: horizontal;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		li{
			cursor: default;
			a{
				font-size: 14px;
				min-width: 300px;
			}
		}
	}
	.switch-area{
		position: relative;
		width: 100%;
		overflow: hidden;
		min-height: 500px;
		font-size: 14px;
		.switch-wrap{
			transition: transform .3s ease-in;
			position: relative;
		}
	}
	.turn-left{
	    transform: translate(-100%, 0 );
	}
	.header-nav{
		width: 100%;
		position: absolute;
		transition: transform .3s ease-in;
		.social {
			margin-right:15px;
			margin-top:10px;
			text-align: center;
			a {
				border-radius:50%;
				display:-moz-inline-stack;
				display:inline-block;
				vertical-align:middle;
				*vertical-align:auto;
				zoom:1;
				*display:inline;
				text-indent:-9999px;
				margin:0 4px 15px 4px;
				opacity:0.6;
				width:35px;
				height:35px;
				transition:0.3s;
				&:hover {
					opacity:1;
				}
			}
			a:last-of-type {
				margin-right:0
			}
			a.V2EX {
				background:url('/img/v2ex.png') center no-repeat gainsboro;
				border:1px solid gainsboro;
				&:hover {
					border:2px solid gainsboro;
				}
			}
			a.新浪微博 {
				background:url('/img/weibo.png') center no-repeat #ecc260;
				border:1px solid #ecc260;
				&:hover {
					border:2px solid #ecc260;
				}
			}
			a.RSS订阅 {
				background:url('/img/rss.png') center no-repeat #ef7522;
				border:1px solid #ef7522;
				&:hover {
					border:1px solid #cf5d0f;
				}
			}
			a.GitHub {
				background:url('/img/github.png') center no-repeat gainsboro;
				border:1px solid gainsboro;
				&:hover {
					border:2px solid gainsboro;
				}
			}
			a.Facebook {
				background:url('/img/facebook.png') center no-repeat #3b5998;
				border:1px solid #3b5998;
				&:hover {
					border:1px solid #2d4373;
				}
			}
			a.Google {
				background:url('/img/google.png') center no-repeat #c83d20;
				border:1px solid #c83d20;
				&:hover {
					border:1px solid #9c3019;
				}
			}
			a.Twitter {
				background:url('/img/twitter.png') center no-repeat #55cff8;
				border:1px solid #55cff8;
				&:hover {
					border:1px solid #24c1f6;
				}
			}
			a.Linkedin {
				background:url('/img/linkedin.png') center no-repeat #005a87;
				border:1px solid #005a87;
				&:hover {
					border:1px solid #006b98;
				}
			}
			a.知乎 {
				background:url('/img/zhihu.png') center no-repeat #0078d8;
				border:1px solid #0078d8;
				&:hover {
					border:1px solid #0078d8;
				}
			}
			a.豆瓣 {
				background:url('/img/douban.png') center no-repeat #06c611;
				border:1px solid #06c611;
				&:hover {
					border:1px solid #06c611;
				}
			}
			a.邮件 {
				background:url('/img/email.png') center no-repeat #1eabe6;
				border:1px solid #1eabe6;
				&:hover {
					border:2px solid #1eabe6;
				}
			}
		}
	}
	.switch-part{
		width: 100%;
		position: absolute;
	}
	.switch-part1{
		left: 0;
	}
	.switch-part2{
		left: 100%;
		top: 20px;
		overlay-x: hidden;
		overflow-y: auto;
		max-height: 200px;
	}
	.switch-part3{
		left: 200%;
		line-height: 30px;
		.switch-friends-link{
			margin-right: 9px;
			border-radius: 3px;
			padding: 5px;
			&:hover{
				background: #88acdb;
				color: #fff;
			}
		}
	}
	.switch-part4{
		left: 300%;
		text-align: left;
		line-height: 30px;
	}
}

.duoshuo{
	padding: 0 40px;
}

#disqus_thread{
	padding: 0 40px;
}

.search {
	padding: 0;
	margin-top: 1px;
	font-family: inherit;
	border:2px solid white;
	border-bottom: 2px solid lightgray;
	border-radius: 2px;
	width: 68%;
	opacity: .2;
	height: 18px;
	background: none;
	&:hover {
		opacity: 1;
		border: 2px solid lightgray;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	};
}


/*MOxFIVE's color schemes*/
body {
	background: url(/resources/bg12.jpg) fixed;
    background-size:cover;
}
#container .left-col {
	background-color: rgba(255,255,255,.85);
}
#container .mid-col {
	background-color: rgba(255,255,255,.8);
}
.overlay {
	opacity: 0;
}
.player {
	opacity: 0.5;
}
.player:hover {
	opacity: .9;
};