/* 
Theme Name: Hylomorphic
Theme URI: https://hylomorphism.com
Description: "Hylomorphic" WordPress theme from hylomorphism.com
Authors: Hyle and Morphe
Version: 3.12
*/

/*-----------------------------------------------------------------------------------*
/* Fonts - Generated by Font Squirrel (http://www.fontsquirrel.com)
/*-----------------------------------------------------------------------------------*/

@font-face {
    font-family: 'Dark Roast';
    src: url('fonts/dark_roast.woff2') format('woff2'),
         url('fonts/dark_roast.woff') format('woff'),
         url('fonts/dark_roast.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Simple Print';
    src: url('fonts/simple_print.woff2') format('woff2'),
         url('fonts/simple_print.woff') format('woff'),
         url('fonts/simple_print.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Josefin Slab';
    src: url('fonts/josefinslab-regular.woff2') format('woff2'),
         url('fonts/josefinslab-regular.woff') format('woff'),
         url('fonts/josefinslab-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*-----------------------------------------------------------------------------------*
/* Reset
/*-----------------------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
	font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    vertical-align: baseline;
    max-height: 33554350px;
}
a img, a {
    outline: 0;
    border: 0;
}
caption,
th,
td { 
    text-align: left;
    font-weight: normal;
}
blockquote,
q { quotes: '"' '"' "'" "'"; }

/*-----------------------------------------------------------------------------------*
/* Body, Common Classes & Wrap
/*-----------------------------------------------------------------------------------*/

html {
	font-size: 200%;
}
body {
    background: #eee url(images/white_carbon.png) repeat;
    color: #757575;
    font-family: 'Simple Print', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    padding: 100px 0;
}

a:link, a:visited {
    text-decoration: none;
    color: #000;
    transition: color 0.5s;
}
a:hover { color: #9c9c9c; }
p { margin: 0 0 1rem; }
strong { font-weight: 700; }
em { font-style: italic; }
pre { white-space: pre-wrap; }
blockquote {
	background: #f9f9f9;
    margin: 1rem 0;
    padding: 0.6rem;
	text-shadow: 1px 1px 1px #FFF;
	font-style: italic;
	letter-spacing: 1px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;
    overflow: hidden;
}
blockquote p { margin: 0; padding: 0; }

ol {
	list-style-position: inside;
	line-height: .75;
}
.no-bullets {
	list-style-type: none;
}

#wrap {
    width: 676px;
    padding: 40px;
    background: #FFF;
    margin: 0.6em auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    position: relative;
	overflow: hidden;
}

.left, .alignleft { float: left; }
.right, .alignright { float: right; text-align: right; }
.clear { clear: both }

/*-----------------------------------------------------------------------------------*
/*Headings
/*-----------------------------------------------------------------------------------*/

h1, h2, h3, h4 {
    color: #000;
    font-weight: normal;
    text-transform: capitalize;
    font-family: 'Dark Roast';
}
h2, h3, h4 {
    
}
h1 {
    font-size: 2rem;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 13px #878585;
}
h2 {
    font-size: 1.5rem;
    margin-top: 0.6rem;
    margin-bottom: 0.25rem;
}
h3 {
    font-size: 1.25rem;
	margin-top: 0.6rem;
	margin-bottom: 0.25rem;
}
h4 {
    font-size: 1rem;
    margin-top: 0.6rem;
	margin-bottom: 0.25rem;
}

/*-----------------------------------------------------------------------------------*
/* WordPress Styles
/*-----------------------------------------------------------------------------------*/

.wp-caption {
	border: 1px solid #ddd; 
	text-align: center; 
	background-color: #f3f3f3; 
	padding-top: 4px; 
	margin: 10px;
	-moz-border-radius: 3px; 
	-khtml-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	border-radius: 3px;
}
.wp-caption img {
	margin: 0; 
	padding: 0; 
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	font-size: 0.6rem; 
	line-height: 1; 
	padding: 0 4px 5px 4px; 
	margin: 0;
}


/*-----------------------------------------------------------------------------------*
/* Header and Navigation
/*-----------------------------------------------------------------------------------*/

#header {
    width: 746px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    line-height: 1;
}

#logo h2,
#logo h1 {
    font-size: 1.5rem;
    line-height: .75;
    margin: 0;
}

#header a, #bottom_menu a {
	color: #4D4D4D;
	transition: color 1s, text-shadow 1s;
    -moz-transition: color 1s, text-shadow 1s;
    -webkit-transition: color 1s, text-shadow 1s;
    -o-transition: color 1s, text-shadow 1s;
}
#header a:hover, #bottom_menu a:hover, li.current-menu-item a {
	color: #171717;
	text-shadow: rgb(56,56,56) 0 0 10px;
}

#navigation {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: right;
}
#navigation ul, #bottom_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
	line-height: 1;
	display: inline-block;
	font-size: 0.75rem;
}
#navigation li, #bottom_menu li {
    display: inline-block;
    margin-right: 15px;
}
#navigation li:last-child, #bottom_menu li:last-child {
    margin-right: 0;
}

/*-----------------------------------------------------------------------------------*
/* Footer and Bottom Menu
/*-----------------------------------------------------------------------------------*/

#site-description {
	font-size: 0.6rem;
	margin: 1rem auto;
	width: 75%;
	text-align: center;
	background: #f9f9f9;
    padding: 20px;
	font-style: italic;
	letter-spacing: 1px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.13),0 0 40px rgba(0,0,0,0.03) inset;
    overflow: hidden;
	opacity: .5;
	transition: opacity 2s, box-shadow 2s;
}
#site-description:hover {
	box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 40px rgba(0,0,0,0.06) inset;
	opacity: 1;
}

#subfooter {
	font-size: 0.6rem;
	margin-top: 35px;
	background-image: url('/wp-content/uploads/2013/09/footer.png');
	background-repeat: no-repeat;
	background-position: center;
	line-height: 27px;
}
#footer-ribbon {
	position: relative;
	width: 756px;
	margin: 35px 0 13px -40px;
	z-index: 999;
}
#footer-ribbon-inner {
	border-bottom-style: double;
	border-bottom-color: #bbb;
	border-bottom-width: 3px;
	border-top-style: double;
	border-top-color: #bbb;
	border-top-width: 3px;
	padding: 10px;
	text-align: center;
	background: #efedf0;
	background: linear-gradient(to right,  rgba(249,249,249,0.05) 0%,rgba(249,249,249,0.9) 10%,rgba(249,249,249,1) 50%,rgba(249,249,249,0.9) 90%,rgba(249,249,249,0.05) 100%);
}
#footer-ribbon h4 {
	padding: 0;
	margin: 0;
}

#bottom_menu {
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 746px;
}
#footer_description {
	font-family: 'Dark Roast';
	font-size: 1.5rem;
	line-height: .75;
}
.menu-bottom-menu-container {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 1;
}

/*-----------------------------------------------------------------------------------*
/* Dynamic colorization image styles   
/*-----------------------------------------------------------------------------------*/

/* Front page */

#colorize img#color_img {
	display: none;
}
#colorize img#bw_img {
	position: absolute;
	top: 0;
	left: 0;
}
#colorize {
	position: relative;
	border: 3px solid black;
	padding: 1px;
	width: 668px;
	height: 357px;
}
#image, #image img {
	position: relative;
	height: 357px;
	width: 668px;
	border: none;
	padding: 0;
}
#cloak {
	position: absolute;
	height: 357px;
	width: 668px;
	z-index: 999999;
	top: 0px;
}
.tmp_canvas {
	position: absolute;
	z-index: 1001;
	height: 357px;
	width: 668px;
	top: 0px;
}

/* School of Athens */

#colorize-athens p {
	margin: 0;
	padding: 0;
}
#image-athens img {
	width: 100%;
	display: block;
	padding: 0;
	margin: 0;
	border: none;
}
#image-athens {
	border: 3px solid black;
	padding: 1px;
}
#colorize-athens img#color_img_athens {
	display: none;
}
#colorize-athens {
	position: relative;
	width: 660px;
	margin: 0 auto;
}
#cloak-athens {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}
.tmp_canvas_athens {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 5;
}
#shadow_canvas {
	position: absolute;
	display: none;
	right: 999px;
}
#athens-lightbox {
	position: fixed;
	z-index: 1007;
	display: none;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
#athens-lightbox img {
	border: none;
	padding: 0;
	max-width: 100%;
	max-height: 100%;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-webkit-transform-style: preserve-3d;
	-ms-transform: translateY(-50%);
	-ms-transform-style: preserve-3d;
	transform: translateY(-50%);
	transform-style: preserve-3d;
}
#lightbox-cloak {
	display: none;
	position: fixed;
	background: rgba(0,0,0,.6);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1006;
}

/*-----------------------------------------------------------------------------------*
/* Philomap
/*-----------------------------------------------------------------------------------*/

#philomap ul {
	list-style: none;
}
#philomap > div > ul {
	margin-left: 30px;
}
#philomap ul ul, #philo_search_results {
	font-size: 85%;
	background: rgba(192, 192, 192, .15);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, .07);
	margin: 0.25rem;
	padding: 0.25rem;
}
.philo_ck:after {
	font-size: 0.75rem;
	color: #757575;
	margin-left: 0.6rem;
}
#philo_search {
	margin-left: 30px;
	width: 219px;
}
#philo_filter {
	width: 219px;
	margin-bottom: 20px;
}

/*-----------------------------------------------------------------------------------*
/* Ecological Systems Diagram
/*-----------------------------------------------------------------------------------*/

#ecologicalSystemsCanvas {
    position: relative;
    width: 676px;
    height: 676px;
}
#ecologicalSystemsCanvas .circle {
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 7px rgba(0, 0, 0, .15);
    cursor: pointer;
}
#ecologicalSystemsCanvas #circle0 { width: 100%; height: 100%; background: rgb(90%, 90%, 90%); margin-top: 0%; margin-left: 0%; }
#ecologicalSystemsCanvas #circle1 { width: 80%; height: 80%; background: rgb(80%, 80%, 80%); margin-top: 10%; margin-left: 10%; }
#ecologicalSystemsCanvas #circle2 { width: 62.5%; height: 62.5%; background: rgb(70%, 70%, 70%); margin-top: 18.75%; margin-left: 18.75%; }
#ecologicalSystemsCanvas #circle3 { width: 47.5%; height: 47.5%; background: rgb(60%, 60%, 60%); margin-top: 26.25%; margin-left: 26.25%; }
#ecologicalSystemsCanvas #circle4 { width: 35%; height: 35%; background: rgb(50%, 50%, 50%); margin-top: 32.5%; margin-left: 32.5%; }

/*-----------------------------------------------------------------------------------*
/* Philoform (Very Simple Contact Form)
/*-----------------------------------------------------------------------------------*/

.vscf input:not([type=submit]), .vscf textarea {
	margin-left: 30px;
	margin-bottom: 10px;
}
.vscf textarea {
	width: 636px;
	max-width: 636px;
}
.vscf .error { color: #e77776; }
.vscf .hide { display:none; }
.vscf .info { clear:both; font-style: italic; color:#333; }

/*-----------------------------------------------------------------------------------*
/* Forms
/*-----------------------------------------------------------------------------------*/

input, textarea {
	background: transparent;
	display: block;
}
input:not([type="submit"]), textarea {
	font-family: 'Josefin Slab';
	font-size: 0.6rem;
}
input[type="submit"] {
	border: 0;
	padding: 6px;
	cursor: pointer;
}
input[type="submit"]:hover {
	text-shadow: 0 0 2px rgba(0,0,0,.75);
}
input[type="submit"]:focus {
	outline: none;
}
input[type="text"] {
	width: 219px;
}
textarea {
	width: 664px;
	max-width: 664px;
}
input[type="text"], input[type="password"], textarea {
	border: 0;
	border-radius: 2px;
	padding: 6px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
	outline: none;
	box-shadow: 0 0 6px rgb(192,192,192), inset 0 0 20px rgba(192, 192, 192, .2);
}
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
	font-style: italic;
}

/*-----------------------------------------------------------------------------------*
/* Placeholder Polyfill
/*-----------------------------------------------------------------------------------*/

span.placeholder {
    position: absolute;
    font-size: 75%;
    color: #999;
    font-family: sans-serif;
    padding: 4px 3px;
    z-index: 1;
    cursor: text;
	font-style: italic;
}

span.placeholder-hide-except-screenreader {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

span.placeholder-hide {
	display: none;
}

label.visuallyhidden-with-placeholder {
    /*clip: auto !important;*/
    height: auto !important;
    overflow: visible !important;
    position: absolute !important;
    left: -999em;
}

/*-----------------------------------------------------------------------------------*
/* Skype
/*-----------------------------------------------------------------------------------*/

.skype {
	position: fixed;
	right: 10px;
	bottom: 10px;
	height: 40px;
	width: 40px;
	background: transparent url(images/skype.png);
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
}
.skype a {
	opacity: 0;
	transition: all 200ms;
	position: absolute;
	bottom: 90%;
	right: 0;
	width: 0%;
	text-align: center;
	padding: 10px;
	background: white;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}
.skype:hover a {
	opacity: 1;
	width: 375%;
}

/*-----------------------------------------------------------------------------------*
/* Blog Styles
/*-----------------------------------------------------------------------------------*/

#blog_style, #blog_style .post { 
	background: #fff;
	color: #333;
}

#blog_style .bottom-links { font-size: 0.75rem; color: #333; font-weight: bold; }
#blog_style .title-span { font-size: 1.125rem; color: #333; font-weight: bold; padding: 5px 0px 10px 0px; }

#blog_style p { margin: 30px auto; }

#blog_style ul, ol { padding: 0.5rem 0 1rem 0; }

#blog_style .year th { color: #666; font-size: 22px; font-weight: bold;}
#blog_style td.dayofmonth { padding-left: 1rem; }

#blog_style .entry a[rel="prev"]:link span, #blog_style .entry a[rel="next"]:link span,
#blog_style .entry a[rel="prev"]:visited span, #blog_style .entry a[rel="next"]:visited span {
    color: #666;
}
a[rel="next"] {
    float: right;
}
#blog_style .entry a[rel="prev"]:link, #blog_style .entry a[rel="next"]:link { color: #999; }
#blog_style .entry a[rel="prev"]:visited, #blog_style .entry a[rel="next"]:visited { color: #666; }
#blog_style .entry a[rel="prev"]:hover, #blog_style .entry a[rel="next"]:hover { color: #bbb; }

/*-----------------------------------------------------------------------------------*
/* Everything Else
/*-----------------------------------------------------------------------------------*/

/* Pretty Photo */
div.pp_details {
    z-index: 99;
}

/* Greek and Latin Phrases */
.phrase-column {
	float: left;
	width: 49%;
}
.phrase-column:nth-child(even) {
	margin-left: 1%;
	text-align: right;
}
.phrase-column:nth-child(even) strong {
	font-weight: normal;
}

/* Editor classes */
.indent {
    margin-left: 30px;
}
.indent2 {
    margin-left: 60px;
}
.indent3 {
    margin-left: 90px;
}

/* Hide breadcrumbs */
#philo-seo-breadcrumbs {
    display: none;
}
#philo-seo-description {
	display: none;
}