/*********************************************/
/* main elements                             */
/*********************************************/

	body {}

	.wrap {
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
		.top-bar.fixed + .wrap {top: 40px}
	.wrap-widgets .widgets {
		position: relative;
		margin: 0 auto;
	}



	/* boxed layout */
		/* IE8 shadows */
			.lie8 .boxed .wrap:after,
			.lie8 .boxed .wrap:before {
				content: '';
				position: absolute;
				width: 5px;
				height: 100%;
				left: -5px;
				top: 0;
				background: url(../img/ie8-boxed-shadow.png) repeat-y 0 0;
			}
				.lie8 .boxed .wrap:after {
					left: auto;
					right: -5px;
					background: url(../img/ie8-boxed-shadow.png) repeat-y 100% 0;
				}



/*********************************************/
/* global elements and classes               */
/*********************************************/

	a {
		text-decoration: none;
		color: blue;
	}
		a * {cursor: pointer} /* IE7 */
		a:hover {}
		a:visited {}
		.no-js .email-nospam,
		.no-js .staff-card .email,
		.no-js .staff-excerpt li.icon-envelope {display: none}

	abbr[title],
	acronym[title] {cursor: help}

	blockquote {
		position: relative;
		padding: 0 1em 0 48px;
		margin: 1.5em 0 0;
		line-height: 1.6em;
		background-repeat: no-repeat;
		background-position: 0 0.25em;
	}
		.single-format-quote .article-content blockquote {margin-top: 0}
		blockquote p {padding: 0}

		/* default blockquote icon */
		blockquote,
		.dark-icons blockquote {background-image: url(../img/black/quote.png)}
		.light-icons blockquote {background-image: url(../img/white/quote.png)}

		/* small blockquote icon */
		.sidebar blockquote,
		.footer blockquote,
		.dark-icons .sidebar blockquote,
		.footer.dark-icons blockquote {
			padding-left: 30px;
			background-image: url(../img/black/quote-small.png);
		}
		.light-icons .sidebar blockquote,
		.footer.light-icons blockquote {
			background-image: url(../img/white/quote-small.png);
		}

		/* inline quotation */
			q:before {content: '\201C'}
			q:after {content: '\201D'}

	code {padding: 0 1px}

	del, strike, s {text-decoration: line-through}

	.lie8 img[width] {width: auto}
	img,
	iframe {vertical-align: middle}
		iframe {
			border: 0;
			outline: 0;
		}
		p + iframe {margin-top: 1.5em}

		.column img,
		.column iframe,
		.widget img,
		.widget iframe,
		.pane img,
		.pane iframe {max-width: 100%}

	p {word-wrap: break-word}

	pre {
		padding: 15px;
		margin: 0;
		line-height: 30px;
		word-wrap: break-word;
		background: url(../img/lines.png) repeat 0 -15px;
		border: 1px solid #eee;
	}
		.dark-icons pre {border-color: #eee}
		.light-icons pre {border-color: #333}
		* + pre {margin-top: 1.5em}

	address.address-icons {
		padding: 0 0 0 24px;
		background-repeat: no-repeat;
		background-position: 0 0.25em;
	}
		.address-icons .contact-email,
		.address-icons .contact-phone {
			display: block;
			padding-top: 15px;
			padding-left: 24px;
			margin-left: -24px;
			background-repeat: no-repeat;
			background-position: 0 15px;
		}
		.address-icons .contact-email + br,
		.address-icons .contact-phone + br {display: none}
		.no-js .address-icons .contact-email {display: none}



	/* text selection */
		::-moz-selection {text-shadow: none}
		::selection {text-shadow: none}



	/* classes */
		.text-center {text-align: center !important}
		.text-left {text-align: left !important}
		.text-right {text-align: right !important}

		.hide {display: none !important}

		.left {float: left !important}
		.right {float: right !important}

		span.br {
			clear: both;
			display: block;
			width: 100%;
			height: 30px;
		}

		#snippet-box, /* "All In One Schema.org Rich Snippets" plugin support */
		#schema_block, /* "Schema Creator by Raven" plugin support */
		.invisible,
		.assistive-text {
			position: absolute !important;
			width: 1px !important;
			height: 1px !important;
			left: 0 !important;
			top: 0 !important;
			clip: rect(1px 1px 1px 1px) !important; /* IE7 */
			clip: rect(1px, 1px, 1px, 1px) !important;
			overflow: hidden !important;
		}

		.image-container {position: relative}
			.image-container img {width: 100%}

		.mt0 {margin-top: 0 !important}
		.mt10 {margin-top: 10px !important}
		.mt20 {margin-top: 20px !important}
		.mt30 {margin-top: 30px !important}
		.mt40 {margin-top: 40px !important}
		.mt50 {margin-top: 50px !important}
		.mt60 {margin-top: 60px !important}

		.mr0 {margin-right: 0 !important}
		.ml0 {margin-left: 0 !important}

		.bb1 {
			padding-bottom: 0.25em;
			border-bottom: 1px solid #ddd;
		}
		.no-border {border: none !important}

		mark,
		.marker {
			padding: 2px 5px;
			color: #444;
			background-color: #e3e3e3;
			-webkit-border-radius: 4px;
			   -moz-border-radius: 4px;
			        border-radius: 4px;
		}

	/* clearing */
		/* FF 3.5+, IE8+ */
		/* Use clearfix class on parent to clearfix nested columns, or wrap each row of columns in a <div class="row"> */
			.wrap-inner:before,
			.wrap-inner:after,
			.clearfix:before,
			.clearfix:after,
			.row:before,
			.row:after {
				content: " ";
				display: block;
				display: table; /* The use of 'table' rather than 'block' is only necessary if using :before to contain the top-margins of child elements. */
			}
			.wrap-inner:after,
			.row:after,
			.clearfix:after {
				clear: both;
			}



/*********************************************/
/* breadcrumbs and pagination                */
/*********************************************/

	/* breadcrumbs */
		.breadcrumbs {
			position: relative;
			line-height: 34px;
			overflow: hidden;
			color: #999;
		}
			.breadcrumbs a,
			.breadcrumbs span {
				float: left;
				display: block;
				height: 54px;
				padding: 10px 0;
				color: inherit;
			}
			.breadcrumbs span {color: #ccc}
			.breadcrumbs a:hover {text-decoration: none}
			.breadcrumbs .separator {
				width: 15px;
				height: 100%;
				margin: 0 10px;
				text-indent: -999em;
				background-repeat: no-repeat;
				background-position: 100% 50%;
			}
				.breadcrumbs .separator,
				.breadcrumbs.dark-icons .separator {background-image: url(../img/black/separator-breadcrumbs.png)}
				.breadcrumbs.light-icons .separator {background-image: url(../img/white/separator-breadcrumbs.png)}
			.breadcrumbs .current-item {cursor: help}
			.breadcrumbs .form-search {
				float: right;
				margin: 10px 0;
			}

		@media only screen and (min-width: 768px) {
			.breadcrumbs-stick .breadcrumbs {
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 0;
				z-index: 99;
			}
		}

	/* pagination */
		.pagination {
			clear: both;
			padding: 30px 0 0;
			overflow: hidden;
		}
			.pagination a,
			.pagination span,
			.pagination .wp-pagenavi a,
			.pagination .wp-pagenavi span {
				display: block;
				float: left;
				padding: 2px 10px;
			}
			.pagination > span {
				opacity: 0.33;
				filter: alpha(opacity=33); /* For IE8 and earlier */
			}
				.pagination .prev {border-right: 1px solid #ddd}
				.pagination .next {border-left: 1px solid #ddd}

			/* borders */
				.pagination a,
				.pagination span,
				.pagination .wp-pagenavi a,
				.pagination .wp-pagenavi a:hover,
				.pagination .wp-pagenavi span.current,
				.pagination .wp-pagenavi span {border: 0}

			/* dots */
				.pagination > span.dots,
				.pagination .wp-pagenavi .pages,
				.pagination .wp-pagenavi span.extend {
					min-width: auto;
					padding: 0 .5em;
					background: transparent;
					border: 0;
				}

			/* WP-PageNavi pages summary */
				.pagination .wp-pagenavi .pages {
					float: right;
					padding: 0;
					margin: 0 0 0 .25em;
				}



/*********************************************/
/* headings                                  */
/*                                           */
/* Shortcodes headings can be found directly */
/* in shortcodes.css file.                   */
/*********************************************/

	h1, h2, h3, h4, h5, h6 {
		padding: 0;
		margin: 0;
	}
		.header h1,
		.header h2,
		.header h3,
		.header h4,
		.header h5,
		.header h6 {color: inherit}
		* + h1,
		* + h2,
		* + h3,
		* + h4,
		* + h5,
		* + h6 {margin-top: 30px}
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			text-decoration: none;
			color: inherit;
		}

	/* in comments */
		#comments-title {margin: 0}

		#reply-title {
			position: relative;
			margin: 0
		}
			#reply-title small a { /* cancel reply link */
				position: absolute;
				right: 0;
				top: 0;
			}

		.list-articles .post-title {
			padding: 0;
			margin: 0;
		}
			.list-articles * + .post-title {margin-top: 20px}

		.list-search .post-title {
			padding: 10px 0 0;
			margin: 0 0 20px;
		}

		.related-projects > h3 {
			overflow: hidden;
			padding-bottom: 30px;
		}

		.bio h4 {
			padding-bottom: 0.5em;
			margin-top: 1.5em;
		}

	/* main post/page title and subtitle */
		.main-heading {
			position: relative;
			clear: both;
			overflow: hidden;
		}
			.main-heading .twelve.pane {
				padding-top: 30px;
				padding-bottom: 30px;
			}
			.single-format-status .main-heading {display: none}
			.main-heading i[class^="icon-"] {
				position: absolute;
				display: block;
				right: 0;
				top: 20px;
				line-height: 100px;
				font-size: 100px;
				opacity: 0.5;
				filter: alpha(opacity=50); /* For IE8 and earlier */
				z-index: 0;
			}
				.main-heading.text-right i[class^="icon-"] {
					left: 0;
					right: auto;
				}
			.main-heading h1,
			.main-heading .h1-style,
			.main-heading h2 {margin: 0 30% 0 0}
				.main-heading.text-right h1,
				.main-heading.text-right h2 {margin: 0 0 0 30%}
				.main-heading.text-center h1,
				.main-heading.text-center h2 {margin: 0}
			.main-heading h2 {
				margin-top: 1em;
				overflow: hidden;
			}
				.main-heading h2.h1-style {overflow: visible}
			.main-heading h2 .icon-social,
			.main-heading h2 .author-website {
				display: inline-block;
				margin: 5px 0 0;
			}
			.main-heading .invisible + h2 {margin-top: 0}
			.main-heading .avatar {
				width: 90px;
				height: 90px;
			}
			.main-heading .authorinfo {
				padding-left: 110px;
				margin-top: 20px;
			}
				.main-heading .avatar {
					float: left;
					width: 90px;
					height: 90px;
					margin-left: -110px;
				}
				.main-heading .socials {margin-top: 1em}

	/* widgets headings */
		.widget-heading {
			margin: 0 0 10px;
			text-transform: uppercase;
		}
		.widget-heading span {position: relative}
		.top-bar .widget-heading {display: none}