/*

 *	www.sauliala.fi - CSS by Tuomas Sauliala, 2013

 */





/* Typography and basic colours */

body {background-color: #f6f6f6; padding-top: 60px;}
ul, p {font-family: "abril-text", serif;}
a {color: #0083a4;}
a:hover {color: #005970 !important; }
h1, h2, h3, h4, h5 { font-family: "pragmatica-web", arial; font-weight: 700; color: #e3001b; }
h3, h4, h5 {font-weight: 300;}

/* H4 is the ingres */
.entry-content h4 {font-family: "abril-text", serif; color: #222; font-size: 1.5em; margin: 0 0 1.3em 0;}

/* Reset navigation colours and typograpgy */
.top-bar,
	.top-bar a,
	.top-bar.expanded .title-area,
	.top-bar.expanded .toggle-topbar a span,
.contain-to-grid,
.top-bar-section ul { background-color: transparent !important;	color: #0083a4 !important; }
	.top-bar-section ul li, 
	.top-bar-section ul li:hover {background-color: transparent;}

/* Menu-search, experimental code */
.title-area li.name {float: left;}
.top-bar .toggle-topbar.menu-icon a {width: 75px; padding: 4px;}
.top-bar .toggle-topbar.menu-icon {float: right; position: relative; top: 0; left: 0; padding: 0 10px; margin: 0; } 
.menu-search {float: right;}
	.menu-search input {float: left;}
	.menu-search #s {width: 130px;}
.screen-reader-text {display: none;}


/* Make title-area icon and paddings */
.top-bar ul.title-area li.name a {text-indent: 100% !important; white-space: nowrap !important; overflow: hidden !important; background: transparent url('../img/saulialafi-sprite.png') no-repeat 10px 0 !important; display: block; width: 65px; height: 45px;}
.navigation {padding-top: 7px; padding-bottom: 7px; position: fixed; z-index: 1000; border-bottom: 1px solid #cccccc; box-shadow:  1px 4px 9px -6px; margin-top: -60px; background-color: rgba(255, 255, 255, 0.92) !important;}
.fixed.navigation {border-bottom: 1px solid #cccccc; box-shadow:  1px 4px 9px -6px;}

/* Navigation typography */
.top-bar-section a { font-family: "pragmatica-web", arial; font-size: 1.1em !important;	 -webkit-transition: color 0.15s ease-in; -moz-transition: color 0.15s ease-in; -o-transition: color 0.15s ease-in; -ms-transition: color 0.15s ease-in; -webkit-transition:background-color 0.15s linear; }
.top-bar-section a:hover {background-color: #e8f0f2 !important; border-radius: 3px; -webkit-border-radius: 3px; text-decoration: none !important;}
/* .top-bar-section a:hover {	background-color: #75bcce !important; color: #ffffff !important; border-radius: 3px; -webkit-border-radius: 3px; } */
.top-bar .toggle-topbar.menu-icon a span {
	-webkit-box-shadow: 0 10px 0 1px #0083A4, 0 16px 0 1px #0083A4, 0 22px 0 1px #0083A4;
	box-shadow: 0 10px 0 1px #0083A4, 0 16px 0 1px #0083A4, 0 22px 0 1px #0083A4;
}

/******************************************************************************************** 
 *	Frontpage
 */

#short-intro {margin: 60px 0 0 60px; max-width: 470px;}

/* Hero */
.hero {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 39%, #f4ee9c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#ffffff), color-stop(100%,#f4ee9c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 39%,#f4ee9c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 39%,#f4ee9c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 39%,#f4ee9c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 39%,#f4ee9c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4ee9c',GradientType=0 ); /* IE6-9 */
	border-bottom: 3px solid #491319;
}
#hero-wrapper-1 {background: transparent url('../img/saulialafi-silhuetti.png') no-repeat left bottom;} 
#hero-wrapper-2 {background: transparent url('../img/saulialafi-silhuetti.png') no-repeat right bottom; }
#hero-wrapper-3 {background: transparent url('../img/saulialafi-silhuetti-2.png') no-repeat center bottom; max-width: 90em; margin: 0 auto; min-height: 570px; overflow: hidden;}
.hero-intro {	font-family: "adelle-sans",sans-serif;}
.hero-intro h1 { font-weight: 400; font-size: 1.9em; line-height: 1.1em;}
.hero-intro h2 { font-weight: 400; font-size: 1.6em; line-height: 1.1em;}

/* Sub tile elements */
.sub-tile-element {position: relative; width: 33.333%; }
	.sub-tile-element .rounded {height: 240px;}
	.sub-tile-element h4 {margin-top: 0; line-height: 32px; text-align: center;}
.sub-tiles {background-color: #f6f6f6; border-top: 1px solid #afafaf; box-shadow: inset 1px 4px 9px -6px; padding: 20px 0; overflow: hidden;}
.sub-tiles-wrapper {max-width: 1200px; margin: 0 auto;}
.double {width: 66.667% !important;}
	.double h4 {text-transform: uppercase; font-size: 1.7em;}

.intro-blog-container {margin: 2em 1em; padding: 2.5em 2.2em; font-size: 1.2em;}
	.intro-blog-container h2 {font-size: 2em; text-align: center; font-family: "abril-text", serif; line-height: 1.1em !important;}
	.intro-blog-container h4, 
	.intro-blog-container .entry-meta {font-size: 1.1em; text-align: center; text-align: center; font-family: "abril-text", serif; font-style: italic;}
	.intro-blog-container .entry-meta {font-size: 0.9em; margin: 0 0 30px 0;}

/******************************************************************************************** 
 *	Footer 
 */

footer .footerlinks {margin: 0 1em 4em 1em; height: 200px; border-top: 1px solid #c5c5c5; padding: 0.7em; background: transparent url('../img/saulialafi-sprite.png') no-repeat 0 -378px;}
footer .link-to-home a {text-indent: 100% !important; white-space: nowrap !important; overflow: hidden !important; width: 110px; height: 150px; display: block;}
footer .footerlinks ul li { list-style-type: none; float: left; padding: 1em;}

/******************************************************************************************** 
 *	Single blog post
 */

body.single-post article {font-family: "abril-text", serif;}
	body.single-post article header {text-align: center; padding: 2em 0.5em;}
body.single-post h1 {font-family: "abril-text", serif; font-size: 2.8em; text-align: center; line-height: 1.1em !important;}
body.single-post .entry-content h5,
body.single-post .entry-content h2,
body.single-post .entry-content h3 {font-family: "abril-text", serif; color: #222222; font-weight: 700; line-height: 1.4em; font-size: 1.4em;}
body.single-post .entry-content p,
body.single-post .entry-content li {font-size: 1.2em; }
body.single-post .entry-meta {font-size: 1.1em; font-style: italic; color: #696969; }
body.single-post footer.entry-meta { border-top: 1px solid #c5c5c5; padding: 1.3em; font-size: 1em; line-height: 1.4em;}
body.single-post nav.nav-single {overflow: hidden;}
	body.single-post nav.nav-single h3 {text-align: center; line-height: 1em; margin-top: 0; padding-top: 0;}
p.wp-caption-text {font-size: 1em; font-style: italic; margin: 0.3em 0 1em 0; }

/******************************************************************************************** 
 *	Category listing
 */

body.category .category-header {border-bottom: 1px solid #c5c5c5; padding: 2em 0; text-align: center !important; margin-bottom: 1em;}
	body.category .category-header h1 {font-family: "abril-text", serif; font-size: 2.8em; text-align: center; line-height: 1.1em !important;}
	body.category .category-header .archive-meta {max-width: 500px; margin: 0 auto;}
	body.category article.post {margin: 0.5em 1em 2em 4em; }
		body.category article.post h1 {font-family: "abril-text", serif; font-size: 1.6em; line-height: 1.2em;}
		body.category article.post h5, body.category article.post h3 {font-family: "abril-text", serif; color: #222222; line-height: 1.4em; font-size: 1.1em;}

/* Sidebar */
.sidebar {padding-right: 1.5em;}
.sidebar h3 {font-size: 1.3em;}
.sidebar ul {padding-left: 1.4em; }
	.sidebar ul li  {font-family: "pragmatica-web", arial; line-height: 1.1em; margin: 0 0 10px 0;}
.sidebar .post-date {font-size: 0.9em; color: #999999;}
.top-sidebar {padding: 4px 0 !important; margin: 0 0 1.5em 0 !important; }
	.top-sidebar ul {margin: 0; padding: 0;}
	.top-sidebar ul li {list-style-type: none; margin: 0; padding: 0; background-color: #ffffff;}
		.top-sidebar ul li ul {padding: 0 5px; display: none;}
		.top-sidebar ul li ul li {padding: 5px 0; border-top: 1px solid #ececec;}
		.top-sidebar a {padding: 0.7em 1em; display: block;}
			.top-sidebar a:hover {background-color: #e8f0f2; }
	.top-sidebar h3 {color: #0083a4; padding: 0.7em 1em; background-color: #ffffff; margin: 0;}
	.top-sidebar h3, 
	.top-sidebar a {font-size: 1.2em; font-weight: 300; cursor: pointer;}

/******************************************************************************************** 
 *	CSS for page element
 */

body.page .entry-header {padding: 2em 1em 1em 1em;}
body.page #content h1 {font-family: "abril-text", serif; font-size: 2.8em; text-align: center; line-height: 1.1em !important;}
body.page #content h2 {font-size: 2em; line-height: 1em; padding: 1.4em 7em 0.5em 0; font-weight: 300; border-top: 1px solid #c5c5c5; margin-top: 1em;}
body.page #content h3 {font-family: "abril-text", serif; font-weight: 700; color: #222222; font-size: 1.3em;}
/* ingres */
body.page #content h4 {text-align: center; padding: 0em 4em;}
body.page #content p, 
body.page #content li  {font-size: 1.2em; }
body.page #content p,
body.page #content ul {max-width: 750px; } 
body.page #content p img {margin: 0.3em -2em;}
/*
body.page #content h2,
body.page #content h3 {max-width: 750px; margin: 1.5em auto 0.8em auto} */
body.page .entry-content {padding-bottom: 3em;}

/******************************************************************************************** 
 *	Misc 
 */

.rounded {border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.bg-white {background-color: #ffffff;}
.bg-red .bg-white {background-color: #a81e22; color: #ffffff}
	.bg-red .bg-white * {color: #ffffff;}
	.bg-red .bg-white blockquote {background-position: -60px -4px;}
.shadow {-webkit-box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15); -moz-box-shadow:    0px 4px 9px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15); }
#short-intro strong {font-size: 3em; display: block; margin-bottom: 20px; line-height: 1em; font-weight: 400;}
.sub-tile-element blockquote {border: none; color: #222222; background: transparent url('../img/saulialafi-sprit.png') no-repeat -559px -4px; padding: 2px 0 0 39px;}
	.sub-tile-element blockquote p {font-family: "pragmatica-web",sans-serif; font-size: 1.1em; font-weight: 700; margin: 0; padding: 0; line-height: 1.4em;}
	.sub-tile-element blockquote cite {color: #222222;}
.top-sidebar {display: none;}
.entry-content ul, 
#content ul {padding: 0 0 0 2em;}
.blog-post-container blockquote {color: #222222; padding: 0.5em 1.2em; border: 1px solid #c5c5c5; background-color: #ffffff;}
.blog-post-container blockquote p {color: #222222; }
.blog-post-container blockquote h1 {font-family: "pragmatica-web",sans-serif; color: #222222; font-size: 2em; }

/* Make there nice bg-image at CV-page */
body.page-id-257 {background: #f6f6f6 url('../img/bg-person-1.jpg') no-repeat left 150px !important; }
body.page-id-257 .entry-content {padding-left: 292px;}

/* General padding and margin */
.p10 {padding: 10px;}
.p20 {padding: 20px;}
.m10 {margin: 10px;}
.m20 {margin: 20px;}
.m-15-00 {margin: 15px 0;}
.m-30-0 {margin: 30px 0;}
.aligncenter {text-align: center;}

 /* Foundation supports only one breakpoint at 768px. So I 
  * add one to make a difference between iPad portrait and smartphone 
  */
@media only screen and (max-width : 1024px) {
	.hero-intro h1 {font-size: 1.7em !important;}
	.entry-content h4 {font-size: 1.3em;}
	body.page #content h2 {padding-right: 0; padding-top: 1.2em;}
	body.page #content h4 {text-align: center; padding: 0.4em;}
	body.page #content p, 
	body.page #content li  {font-size: 1.1em; }
	body.page-id-257 {background: #f6f6f6 !important; }
	body.page-id-257 .entry-content {padding-left: 0;}
	.top-sidebar {display: none !important;}
}

@media only screen and (max-width : 768px) {
	.sub-tile-element {width: 50%; } 
	/* .sub-tile-element {width: 100%; }  */
	.double {width: 100% !important;}
	.intro-blog-container {margin: 0em; padding: 1em;}
		.intro-blog-container h2 {font-size: 1.6em;}
	#short-intro {margin: 1em; padding: 1em;}
	.intro-blog-container {border-top: 1px solid #afafaf;}
	#hero-wrapper-1 {background: none;}
	#hero-wrapper-2 {background: transparent url('../img/saulialafi-mobile-herobg.png') no-repeat right bottom; }
	.hero-latest {margin-bottom:8em;}
	body.single-post article header {text-align: center; padding: 1em 0.1em;}
	body.single-post h1 {font-size: 2.2em;}
	body.category article.post {margin: 0.5em 1em 2em 1em; }
	h4 {line-height: 1.3em; font-size: 1.25em;}
	.top-sidebar {display: none !important;}
	body.category .category-header {border: none; margin-bottom: 0;}
	.navigation {padding-top: 4px; padding-bottom: 4px; }
	body.page #content h2 {font-size: 1.7em;}
	.side {padding: 1em; border-top: 1px solid #c5c5c5;}
}

@media only screen and (max-width : 640px) {
	.top-sidebar {display: block !important;}
	#short-intro strong {margin-top: 0.1em;}
	.sub-tile-element {width: 100% !important; } 
}