
/* = Page Text
-------------------------------------------------------------- */

.page_text {
	line-height: 1.6;
	color: #77797e;
}

	.page_text a {
		color: #74a0ca;
	}
	
	.home_latest_posts.page_text a:hover {
		font-weight: bold;
		color: #242840;
	}

	.page_text h1,
	.page_text h2,
	.page_text h3,
	.page_text h4,
	.page_text h5,
	.page_text h6 {
		padding-bottom: .5em;
		font-family: 'Play', sans-serif;
		color: #242840;
		-webkit-font-smoothing: antialiased;
	}

	.page_text h1 {
		font-size: 1.188em;
	}
	
	.page_text header h1 {
		padding: 0 0 30px 0;
	}
	
	.page_text h2 {
		font-size: 1.125em;
	}

	.page_text h3 {
		font-size: 1.063em;
	}
	
	.page_text h4 {
		font-size: 1.0em;
	}

	.page_text h5 {
		font-size: 0.938em;
	}
	.page_text h6 {
		font-size: 0.875em;
	}

	.page_text h1 strong {
		font-weight: bold;
		color: inherit;
	}
	
	.page_text li {
		padding: 0 0 5px 20px;
		font-size: 12px;
	}
	
	.page_text figure {
		font-size: 0.75em;
	}
	
	.page_text figure figcaption {
		background: #8bb1d5;
		margin: -6px 0 0 0;
		padding: 2px 0 5px 0;
		text-align: center;
		font-size: 0.91em;
		color: white;
	}
	
	.page_text figure img { 
		border-bottom: 4px solid #8bb1d5;
	}
	
	.page_text figure.float_left {
		margin: 0 40px 10px 0;
	}
	
	.page_text figure.float_right {
		margin: 0 0 10px 40px;
	}
	
	.page_text p {
		font-size: 0.75em;
		padding-bottom: 20px;
	}
	
	.page_text em {
		font-style: italic;
	}
	
	.page_text .blue {
		color: #6992b9;
	}

	.page_text blockquote,
	.page_text cite,
	.page_text q {
		background: url(../img/cite.png) no-repeat 0 18px;
		padding: 15px 0 40px 45px;
		font-style: italic;
		font-size: 12px;
		color: #8bb1d5;
	}

	.page_text blockquote {
		padding: 15px 0 20px 45px;
	}
	
	.page_text blockquote p {
		font-size: 12px;
	}
	
	.page_text blockquote p.author {
		float: right;
		margin: -10px 0 15px 0;
		font-weight: bold;
		font-style: italic;
		color: #77797e;
	}
	

	.page_text cite {
		display: block;
		width: 400px;
	}
	
	.page_text q {
		width: 400px;
	}




header.title {
	background: url(../img/hr.png) repeat-x 0 bottom;
}

	header.title h1 { padding-bottom: 12px; }



/*
article.page_text {
color: #77797e;
	 }
*/
	article.page_text a {
		font-style: italic;
		text-decoration: underline;
	}



/* = Lists
----------------- */

ul.plus li {
	background: url(../img/li_plus.png) no-repeat 0 4px;
}

ul.minus li {
	background: url(../img/li_minus.png) no-repeat 0 7px;
}

ul.dot li {
	background: url(../img/li_dot.png) no-repeat 0 6px;
}

ul.tick li {
	background: url(../img/li_tick.png) no-repeat 0 4px;
	padding-left: 24px;
}

ul.cross li {
	background: url(../img/li_cross.png) no-repeat 0 3px;
}



/* = Accordion
----------------- */

.accordion {
	position: relative;
	height: 1%;
	margin: 0 0 10px 0;
}

.accordion:after {
	clear: both;
	display: block;
	content: ''; }

	.accordion p.title {
		border: 1px solid #d3d3d3;
		padding: 8px 0;
		font-style: normal;
		font-weight: bold;
		text-decoration: none;
		cursor: pointer;
		color: #242840;
	}
	
	.accordion p.title:hover {
		text-decoration: underline;
	}
	
		.accordion .title .icon {
			background: url(../img/toggle.png) no-repeat 0 -50px;
			padding: 2px 12px 0 0;
			margin: 0 10px 0 10px;
		}
	
		.accordion .title .text {
			border-left: 1px solid #d3d3d3;
			padding: 10px 0 10px 15px;
		}
		
		.accordion .content {
			display: none;
			padding: 5px 0 0 50px;
		}

	.accordion p.title.active .icon {
		background: url(../img/toggle.png) no-repeat 0 8px;
	}


.toggle_plus{ background-position: 0 -52px; width: 14px; height: 14px; } 




/* = About
----------------- */

article.about {
	background: url(../img/hr.png) repeat-x 0 bottom;
	float: left;
	width: 100%;
	margin: 0 0 40px 0;
	padding: 0 0 30px 0;
}

	article.about h2 {
		margin: 0 0 20px 0;
		font-size: 19px;
	}

	article.about .column {
		width: 480px;
	}
	
		

	article.about .gallery {
		float: right; 
	}

	article.about .gallery img:first-child {
			margin-right: 20px;
	}

	.about_summary {
		float: left;
		width: 100%;
		margin: 0 0 100px 0;
	}

	.about_summary .experience,
	.about_summary .reviews { margin-top: -7px; }

	.about_summary h1 { font-weight: bold; }

	.about_summary .reviews .photo {
		float: left;
		background: url(../img/arrow-cloud-blue.png) no-repeat 0 bottom;
		width: 88px; height: 92px;
	}
	
		.about_summary .reviews figcaption {
			background: none;
			margin: 0;
			padding: 0;
			text-align: left;
			font-weight: bold;
			font-size: 12px;
			color: #77797e;
		}
	
		.about_summary .reviews .photo img {
			float: left;
			position: relative; z-index: 5;
			border: 4px solid #8fb5d9;
			margin: 0 0 15px 0;
		}
		
		.about_summary .reviews .photo a {
			font-weight: bold;
		}

		.about_summary .reviews .photo a:hover {
			text-decoration: underline;
		}
	
		.about_summary .reviews article {
			float: right;
			width: 190px;
			margin: -4px 0 0 0;
		}

		.tabs {
			float: left;
			background: white;
			padding: 4px;
		}
		
			.tabs article {
				display: none;
				background: #ededed;
				padding: 15px;
			}
		
			.tabs nav {
				font-size: 1.33em;
			}
			
				.tabs nav li {
					float: left;
					border-right: 1px solid #ededed;
					border-top: 1px solid #ededed;
					padding: 6px 20px;
					font-size: 16px;
					cursor: pointer;
					color: #989898;
				}
				
				.tabs nav li:first-child {
					border-left: 1px solid #ededed;
				}
				
				.tabs nav li:hover {
					color: inherit;
				}

				.tabs nav li.current {
					background: #ededed;
					border-top: 1px solid #8eb4d8;
					text-shadow: 0 1px 0 #f1f1f1;
					text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
					color: #2c2c2c;
				}


/* = Blog
----------------- */

.blog {
	float: left;
	width: 700px;
	padding-bottom: 40px;
}

	.blog .post {
		float: left;
		background: url(../img/hr.png) repeat-x 0 bottom;
		margin: 0 0 40px 0;
		padding: 0 0 10px 0;
	}
	
	.blog .post .description {
		width: 480px;
	}

		.blog .column {
			margin: 0;
		}

		.blog .column_25 img,
		.blog header img {
			border-bottom: 4px solid #8eb5db;
		}

		.blog .post .column_25 .comments {
			margin: 5px 0 0 0;
		}
	
		.blog .post p.date {
			padding-bottom: 6px;
		}

		.blog .post h2 {
			padding: 0 0 25px 0;
			font-family: 'Arial', sans-serif;
			font-size: 1.188em; 
			color: #2c2c2c; }

		.blog .post .more a {
			text-decoration: none;
			font-style: normal;
		}

		.blog .post .more a:hover {
			text-decoration: underline;
		}

		.icon {
			background: url(../img/icons.png) no-repeat;
			padding: 0 0 0 20px; }
			
		.icon.comments {
			background-position: 2px -55px;
		} 
		
		.icon.date {
			background-position: 2px -115px;
		}
		
		.icon.user {
			background-position: 2px 4px;
		} 


/* = Blog Full
----------------- */

.blog.full header {
	margin-bottom: 35px;
}

.blog.full .article {
	width: 480px;
}

	.blog.full .article h1 {
		margin-top: -6px;
		font-family: 'Arial', sans-serif;
	}


.blog.full .date, .blog.full .user {
	color: #77797e;
}

.blog.full .column_25 p {
	padding-bottom: 2px;
}




/* = Comments
----------------- */

#comments {
	float: left;
	background: url(../img/hr.png) repeat-x 0 0;
	width: 100%;
	margin: 16px 0 0 0;
	padding: 30px 0 0 0;
}

	#comments li {
		float: left;
		width: 100%;
		padding: 0;
	}

	#comments p {
		padding: 0;
		font-size: 12px;
	}

		#comments article {
			float: right;
			width: 620px;
		}

		#comments .post {
			width: 100%;
			padding: 0 0 16px 0;
			margin: 0 0 18px 0;
		}

		#comments .post ul {
			float: right;
			width: 620px;
			padding: 0 0 0 0;
		}
		
		#comments li li .post { 
			width: 620px;
			padding-left: 80px;
		}
		
		#comments li li .post article {
			width: 540px;
		}

			#comments .photo {
				float: left;
			}

			#comments p.meta {
				margin: -3px 0 0 0;
				padding: 0 0 8px 0;
			}
		
				#comments .meta a {
					color: #77797e;
				}
				
				#comments .date {
					background-position: 0 -115px;
					padding: 0 0 0 18px;
				}
				
				#comments .date:after {
					content: " // ";
					color: #8eb4d8;
				}
		
				#comments .user:after {
					content: " //";
					color: #8eb4d8;
				}
				
				#comments a.reply {
					margin: 0 0 0 5px;
					font-weight: bold;
					font-style: normal;
					color: #8eb4d8 !important;
				}
				
				#comments a.reply:hover {
					color: #242840 !important;
				}
		

/* = Respond
----------------- */

#respond { }

	#respond h1 {
		padding: 0 0 20px 0;
	}

	#respond form p {
		float: left;
		width: 100%;
		padding: 0 0 5px 0;
	}

	#respond form label, #respond form input[type='text'], #respond form textarea {
		float: left;
	}

	#respond form label {
		width: 80px;
		padding: 7px 0 0 0;
	}

	#respond form textarea {
		width: 603px; height: 146px;
		margin: 5px 0 0 0;
	}
	
	#respond .button {
		float: right;
		margin: 15px 3px;
	}



/* = Portfolio
----------------- */

.portfolio header.title {
	margin: 0 0 30px 0;
}

.portfolio .post {
	float: left;
	background: url(../img/hr.png) repeat-x 0 bottom;
	padding: 0 0 40px 0;
	margin: 0 0 40px 0;
}

	.portfolio .post .column {
		margin: 0;
	}
	
	.portfolio .photo {
		width: 580px;
	}
	
	.portfolio .description {
		width: 400px;
	}

	.portfolio .photo a {
		float: left;
		width: 542px;
		position: relative;
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		box-shadow: 0 0 0 transparent inset;
	}

		.portfolio .photo img {
			float: left;
			position: relative; z-index: 5;
			opacity: 0.6;
		}

		.portfolio .photo span {
			opacity: 0;
			position: absolute; left: 50%; top: 50%; z-index: 10;
			width: 91px; height: 91px;
			background: url(../img/lens.png);
			margin-left: -45px;
			margin-top: -45px;
		}
		
		.portfolio .photo:hover a  {
			box-shadow: 0 4px 0 #8fb5d9, 0 -4px 0 #8fb5d9;
		}

		.portfolio .photo:hover img {
			opacity: 1;
			-webkit-transition: opacity .25s ease-in-out;
			-moz-transition: opacity .25s ease-in-out;
			-o-transition: opacity .25s ease-in-out;
			transition: opacity .25s ease-in-out;
		}

		.portfolio .photo:hover span {
			opacity: 1;
			-webkit-transition: opacity .25s ease-in-out;
			-moz-transition: opacity .25s ease-in-out;
			-o-transition: opacity .25s ease-in-out;
			transition: opacity .25s ease-in-out;
		}
		
		.portfolio h2 {
			padding: 0;
			margin: -6px 0 20px 0;
			font-family: 'Arial', sans-serif;
			font-size: 1.188em;
			color: #2c2c2c;
		}
		
		.portfolio .more a {
			text-decoration: none;
			font-style: normal;
		}
		
		.portfolio .more a:hover {
			text-decoration: underline;
		}


/* = Portfolio Project
-------------------------- */

.portfolio.project { margin: 0 0 40px 0; float: left; }

	.portfolio.project .title {
		background: none;
	}
	
		.portfolio.project .description {
			width: 240px;
		}
	
			.portfolio.project details { 
				background: url(../img/hr.png) repeat-x 0 0;
				margin: 15px 0 0 0;
				padding: 40px 0 0 0;
			}
			
			.portfolio.project details strong, .portfolio.project details span, .portfolio.project details a {
				display: block;
			}
			
			.portfolio.project details p {
				padding: 0 0 20px 0;
			}
			
	.portfolio .photo-big {
		width: 700px;
	}


/* = Simple Article
-------------------------- */

.typography .title {
	float: left;
	width: 100%;
	background: none;
	padding: 0;
	margin: 0 0 10px 0;
}


/* = Contact
----------------- */

.contact {
	padding: 0 0 40px 0;
}

.contact .title {
	float: left;
	width: 100%;
	background: none;
	padding: 0;
	margin: 0 0 10px 0;
}

	.contact label {
		display: block;
		padding: 0 0 5px 0;
	}

	.contact h3 {
		padding: 0 0 30px 0;
	}
	
	.contact .contact-data {
		float: left;
		width: 100%;
		padding: 0 0 20px 0;
	}

		.contact .contact-data p {
			padding: 0;
		}
		
		.contact .contact-data dl {
			float: left;
			width: 100%;
		}
	
		.contact .contact-data dt,
		.contact .contact-data dd {
			float: left;
			font-size: 12px;
		}
		
		.contact .contact-data dt {
			width: 45px;
		}
		
		.contact textarea {
			width: 711px;
			height: 150px;
		}

.google-map {
	float: left;
	width: 101%;
	height: 360px;
	margin: 0 -5px 60px -5px;
	box-shadow: inset -0 0 5px rgba(0, 0, 0, 0.5);
	padding: 3px 0 0 0;
}

	.google-map #maps {
		height: 357px;
	}



/* = Contact Form
----------------- */

#contact ul {
	float: left;
	width: 100%;
	list-style: none;
	margin: 0 0 15px 0;
}

	#contact li {
		float: left;
		padding: 0 20px 0 0;
	}

	#contact .button {
		float: right;
	}
	
	#contact .error {
		border: 1px solid #c43737;
	}

	#contact fieldset.thanks {
		display: none;
	}



/* = Pagination
-------------------------------------------------------------- */

.pagination {
	float: left;
	width: 100%;
	margin: -20px 0 60px 0;
	text-align: center; }

	.pagination a {
		padding: 5px 8px;
		background: #8fb5d9;
		text-decoration: none !important;
		font-style: normal !important;
		font-size: 0.688em;
		color: white;
	}
	
	.pagination a:hover {
		background: #242840;
	}
	
	.pagination a.current {
		font-weight: bold;
	}
	
	.pagination a.prev {
		background: #8fb5d9 url(../img/arrow-nav.png) no-repeat 8px -49px;
		padding: 5px 9px;
	}
	
	.pagination a.next {
		background: #8fb5d9 url(../img/arrow-nav.png) no-repeat 8px -163px;
		padding: 5px 9px;
	}
	
	.pagination a.current {
		background-color: #242840;
	}

	.pagination span {
		font-size: 0.688em;
	}
	
	.pagination a.prev:hover {
		background-color: #242840;
		background-position: 8px 8px;
	}
	
	.pagination a.next:hover {
		background-color: #242840;
		background-position: 8px -106px;
	}





/* = Clouds
-------------------------------------------------------------- */

.cloud {
	position: relative;
	display: block;
	width: 23px;
	height: 28px;
}

	.cloud .arrow {
		position: absolute; bottom: -5px; z-index: 5;
		background: url(../img/arrow-cloud-blue.png) no-repeat;
		width: 5px;
		height: 5px;
	}
	
	.cloud.facebook	{ background: #8fb5d9 url(../img/icons.png) no-repeat 7px -170px; }
	.cloud.rss		{ background: #8fb5d9 url(../img/icons.png) no-repeat 7px -469px; }
	.cloud.text		{ background: #8fb5d9 url(../img/icons.png) no-repeat 6px -644px; }
	.cloud.video	{ background: #8fb5d9 url(../img/icons.png) no-repeat 7px -706px; }
	
	
	a.cloud:hover { background-color: #242840; }
	a.cloud:hover .arrow { background: url(../img/arrow-cloud-dark.png); }
	
	/*
	.icon-windows{ background-position: 0 -883px; width: 11px; height: 12px; } 
	*/



/* = Navigation arrows
-------------------------------------------------------------- */

nav.arrows { }

	nav.arrows a {
		float: right;
		width: 23px;
		height: 23px;
		margin: 0 0 0 5px; }
		
	nav.arrows a.prev {
		background: #8fb5d9 url(../img/arrow-nav.png) no-repeat 8px -49px;
	}
	
	nav.arrows a.next {
		background: #8fb5d9 url(../img/arrow-nav.png) no-repeat 8px -163px;
	}
	
	nav.arrows a:hover {
		background-color: #242840;
	}
	
	nav.arrows a.prev:hover {
		background-position: 8px 8px;
	}
	
	nav.arrows a.next:hover {
		background-position: 8px -106px;
	}



/* = Cite box
-------------------------------------------------------------- */

.cite_box {
	background: url(../img/hr.png) repeat-x 0 bottom;
	padding: 30px 0 40px 0;
	margin: 0 0 34px 0;
	text-align: center;
	font-family: 'Play', sans-serif;
	color: #2c2c2c;
	-webkit-font-smoothing: antialiased; }
	
	.cite_box p { padding: 0; font-size: 19px; }

	.home .cite_box strong { font-size: 22px; }



/* = Columns
-------------------------------------------------------------- */

.columns {
	float: left;
	width: 100%; }

	.column {
		float: left;
		margin-right: 40px; }

	.columns > .column:last-child {
		margin-right: 0;
	}

	.column_16 {
		width: 164px;
	}

	.column_25 {
		width: 215px;
	}

	.column_33 {
		width: 300px;
	}

	.column_50 {
		width: 470px;
	}

	.column_66 {
		width: 600px;
	}

	.column_75 {
		width: 725px;
	}

	


.padding_bottom_30 {
	padding-bottom: 30px !important;
}

.padding_bottom_60 {
	padding-bottom: 60px;
}



/* = Buttons
-------------------------------------------------------------- */

.button {
	position: relative;
	padding: 7px 25px;
	font-family: 'Arial', sans-serif;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
}

.button.big {
	padding: 12px 35px;
}

.button span {
	position: absolute; left: 0; bottom: -5px; z-index: 5;
	display: block;
	width: 5px; height: 5px
}


/* = Blue with arrow
------------------------ */

.button.blue {
	background: #8fb5d9;
	color: white;
}

.button.blue.arrow span {
	background: url(../img/arrow-cloud-blue.png);
}

.button.blue:hover {
	background-color: #242840;
}

.button.blue:hover span {
	background: url(../img/arrow-cloud-dark.png);
}


/* = Black with arrow
------------------------ */

.button.black {
	background: #242840;
	color: #8fb5d9;
}

.button.black.arrow span {
	background: url(../img/arrow-cloud-dark.png);
}


/* = Gray with arrow
------------------------ */

.button.gray {
	background: #f0f0f0;
	border: 1px solid #d3d3d3;
	color: #242840;
}

.button.gray.arrow span {
	left: -1px;
	bottom: -6px;
	height: 6px;
	background: url(../img/arrow-cloud-gray.png);
}


/* = Green with arrow
------------------------ */

.button.green {
	background: #66e98e;
	color: white;
}

.button.green.arrow span {
	background: url(../img/arrow-cloud-green.png);
}

/* = Magenta with arrow
------------------------ */

.button.magenta {
	background: #e96698;
	color: white;
}

.button.magenta.arrow span {
	background: url(../img/arrow-cloud-magenta.png);
}
