/*
* 2013, LeeThree
* leethree.me
*/

/* Content specific styles
================================================== */

/* About */

	#about {
		margin-top: 9px;
	}

	#about h5 {
		margin-bottom: 10px;
	}

	#chinese-name {
		vertical-align: text-bottom;
	}

/* Background */

	#background p {
		margin-bottom: 0;
	}

	#background .image-cropper {
		overflow: hidden;
		max-height: 240px;
	}

/* Contact */

	#address p {
		padding-left: 25px;
	}

	#address p .leading {
		margin-left: -25px;
	}

	#address-text {
		border-bottom: 1px dotted #777;
		font-style: italic;
	}

	#sites {
		margin-bottom: 0;
	}

	#sites li a {
		font-size: 25px;
		color: #002fa7;
		text-decoration: none;
	}

	#sites li a i {
		text-align: left;
	}

	#twitter:hover,
	#twitter:focus {
		color: #00aced;
	}

	#facebook:hover,
	#facebook:focus {
		color: #3b5998;
	}

	#googleplus:hover,
	#googleplus:focus {
		color: #dd4b39;
	}

	#linkedin:hover,
	#linkedin:focus {
		color: #007bb6;
	}

/* Links */

	#link-list {
		overflow: hidden;
	}

	#link-list .link {
		line-height: 42px;  /* height of 2 lines */
		width: 160px;  /* three columns */
	}

	#link-list .description {
		width: 280px;  /* five columns - 20px */
		height: 42px;
	}

	#link-list .description:before {
		font-family: FontAwesome;
		line-height: 42px;
		width: 20px;
		display: block;
	}

	#link-list li:nth-child(odd) .link {
		margin-right: 10px;
		float: left;
	}

	#link-list li:nth-child(odd) .description {
		margin-left: 10px;
		float: left;
	}

	#link-list li:nth-child(odd) .description:before {
		content: '\f053';
		float: left;
	}

	#link-list li:nth-child(even) .link {
		margin-left: 10px;
		float: right;
	}

	#link-list li:nth-child(even) .description {
		margin-right: 10px;
		float: right;
	}

	#link-list li:nth-child(even) .description:before {
		content: '\f054';
		text-align: right;
		float: right;
	}

/* Quote */

	#qod-quote:before {
		color: #002fa7;
		content: '\201C';  /* curly quotation mark */
		font-family: Helvetica, Arial, sans-serif;
		font-size: 80px;
		font-weight: bold;
		line-height: 0;
		margin: 0 10px 0 -10px;
		vertical-align: bottom;
	}

	#qod-quote {
		padding: 6px 0 0 9px;
		margin-left: -10px;
	}

	#qod-quote .qod-text {
		display: inline;
        text-align: justify;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
	}

	#qod-quote .qod-author {
		margin-top: 10px;
	}

/* Divider */

	#divider {
		margin-bottom: 10px;
		height: 25px;
		overflow: hidden;
	}

	#divider hr {
		clear: none;
	}

	#more-dot-gap {
		background: url("../images/dot.png") 7px 7px no-repeat;
		height: 20px;
	}

/* More */

	#more p {
		margin-bottom: 10px;
	}

	#more ul {
		margin-left: 16px;
	}

	#more li i {  /* inline icons */
		color: #002fa7;
	}

	#more h5 {
		margin-bottom: 10px;
	}

/* Footer */

	#mark {
		text-align: right;
	}

/* IE6,7 fix */
	.ie6 .sidebar,
	.ie7 .sidebar {
		text-align: left;
	}

	.ie6 nav, .ie6 #logo,
	.ie7 nav, .ie7 #logo {
		text-align: right;
	}

	.ie6 hr, .ie6 .hr,
	.ie7 hr, .ie7 .hr {
		height: 6px;
		border: none;
		background: #ddd;
	}

	.ie6 #more-dot-gap,
	.ie7 #more-dot-gap {
		display: none;
	}

	.ie6 #more-dot-right,
	.ie7 #more-dot-right {
		display: none;
	}

	.ie6 #foot-wrapper,
	.ie7 #foot-wrapper {
		position: relative;
	}

/* Workaround for Hoverizr on IE */
	.overlayed {
		line-height: 0;
	}

	.overlayed .fade,
	.overlayed .canv {
		max-height: 100%;
		width: auto;
	}

/* Media queries */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {

		#quote {
			margin-left: 0;
		}

		#qod-quote {
			border: 0;
			margin-left: 0;
			padding-left: 0;
		}

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		#background .image-cropper {
			max-height: 190px;
		}

		#link-list .link {
			width: 172px;  /* four columns */
		}

		#link-list .description {
			width: 316px;  /* seven columns */
		}

		#quote {
			width: 508px;  /* eleven columns */
		}

		#more-dot-gap {
			background-position-x: 4px;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

		#about {
			margin-top: 50px;
		}

		#background .image-cropper {
			max-height: none;
		}

		#sites li {
			width: 25%;
		}

		#link-list .link,
		#link-list li:nth-child(odd) .link,
		#link-list li:nth-child(even) .link {
			width: auto;
			float: none;
			margin: 0;
		}

		#link-list .description,
		#link-list li:nth-child(odd) .description,
		#link-list li:nth-child(even) .description {
			width: auto;
			float: none;
			margin: 0;
			padding-left: 25px;
		}

		#link-list .description:before,
		#link-list li:nth-child(odd) .description:before,
		#link-list li:nth-child(even) .description:before {
			content: none;
		}

		#more-dot-gap, #more-dot-right {
			display: none;
		}

	}