/* This stylesheet is used to style the public view of the plugin.
 * It should only contain generic styling
 * Thematic styling should be in it's own css file
 */

/* LAYOUT */
.pzcodex-step {
	overflow:hidden;
}
.entry-content .pzcodex-step pre {
	margin:0;
	padding:0;
	border:none;
}

.pzcodex-step {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-flow:row wrap;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
}

.pzcodex-step-description,
.pzcodex-step-media,
.pzcodex-step-code {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.pzcodex-step-media img {
	max-width: 100%;
	height: auto;
}

.pzcodex-step-media {
	text-align: center;
}

.pzcodex-step-code pre {
  width:inherit;
}
.pzcodex-step-code pre code {
	overflow-x:auto;
	font-size:0.9em;
}



.type-codex h3,
h3.clarify-step-title {
  border-bottom:dotted 1px;
  color:tomato!important;
  font-size:20px;
}


.clarify-article-content img,
.type-codex img,
img.clarify-step-image {
  max-width:100%;
  height:auto;
}

.type-codex,
.clarify-step-instructions {
  font-family:"Open Sans",Helvetica,Arial,sans-serif;
  font-size:15px;
}
.type-code p,
.clarify-step-instructions p {
  font-size:15px!important;
}

.type-codex p span,
.clarify-article-content p span {
  text-decoration:none!important;
}

.type-codex p span strong,
.clarify-article-content p span strong,
.type-codex p span b,
.clarify-article-content p span b
{
  font-weight:normal;
  font-family:Palatino, serif;
  font-size:16px;
  color:#407cbf;
}
.type-codex em,
.clarify-step-instructions em,
.type-codex i,
.clarify-step-instructions i
{
  color:tomato;
}

.type-codex .clarify-step-container {
  clear:both;
}

.type-codex .clarify-step-instructions {
  width:49%;
  margin-right:1%;
  float:left;
}

.type-codex .clarify-step-image-wrapper {
  width:49%;
  margin-left:1%;
  float:left;
  padding:0 10px;
  box-sizing:border-box;
}
.codex-list-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow:column;
  -ms-flex-flow:column;
  flex-flow:column;
}

/* Codex widget and shortcode lists */
.codex-list-container.list-columns-2,
.codex-list-container.list-columns-3,
.codex-list-container.list-columns-4
{
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.codex-list-container.list-columns-1 .codex-list-category {
  -webkit-flex-basis:100%;
  -ms-flex-preferred-size:100%;
  flex-basis:100%;
}
.codex-list-container.list-columns-2 .codex-list-category {
  -webkit-flex-basis:50%;
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
}
.codex-list-container.list-columns-3 .codex-list-category {
  -webkit-flex-basis:33%;
  -ms-flex-preferred-size:33%;
  flex-basis:33%;
}
.codex-list-container.list-columns-4 .codex-list-category {
  -webkit-flex-basis:25%;
  -ms-flex-preferred-size:25%;
  flex-basis:25%;
}

.codex-list-container .codex-list-category {
  margin-bottom:10px;
}

  @media all and (max-width: 40em) {
    .codex-list-container.list-columns-1 .codex-list-category,
    .codex-list-container.list-columns-2 .codex-list-category,
    .codex-list-container.list-columns-3 .codex-list-category,
    .codex-list-container.list-columns-4 .codex-list-category {
      -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
    }
  }

.pzcodex-anchor {
  display:none;
}

.pzcodex-step-media.uselightbox img
{
  cursor:zoom-in;
}

.pzcodex-flexChild.pzcodex-rowParent.dont-preserve-layout:empty,
.pzcodex-flexChild.pzcodex-columnParent.dont-preserve-layout:empty {
  display:none;
}

.pzcodex-doc-link {display:none;}
@media print {
  .pzcodex-step-container  {
    break-before:page;
    /* break-after:page; */
  }
  .pzcodex-doc-link {display:block;}
}