/*
Theme Name: Photo Addict
Theme URI: https://designsimply.com/wordpress/theme/photo-addict/
Author: Sheri Bigelow
Author URI: https://designsimply.com/about/
Description: Photo Addict is a mouthwatering blend of flexbox with handpicked morsels of color and spiced with random images. Made for the adventurous, this theme uses advanced CSS flexbox for layout, filters to blur images for backgrounds, and transforms to make the post titles and meta drip around the edges of the post. Colors are picked from attached images. The navigation is minimal. Categories and tags may be set, but aren't displayed by the theme. Also, if you install the <a href="http://wordpress.org/plugins/random-images/">Random Images plugin</a>, the theme's attachment pages will adjust automagically. It works best if you add lots of images and galleries! All in all, it's minimal and unconventional.
Version: 1.0.2
License: GNU General Public License
License URI: license.txt
Tags: custom-header, custom-menu, editor-style, featured-images, fixed-width, one-column, photoblogging, post-formats, sticky-post
min req v 2.5
----------------------------------------------- */

/* =Fonts
----------------------------------------------- */
body, h1, h2 {
  font-family: "Lato", "Open Sans", Helvetica, sans-serif;
  font-weight: 300;
}
h3, h4, h5, h6 {
  font-family: "Overlock", Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
}
footer {
  font-family: Georgia, serif;
}

/* =Typography
----------------------------------------------- */
body {
  font-size: 22px;
  line-height: 1.4em;
}
a {
  text-decoration: none;
}
.post article a {
  text-decoration: underline;
}
.site-title {
  font-size: 1.7em;
}
.meta {
  font-size: .9em;
}
#wrapper > h2 .sep,
[rel="gallery"],
.meta .sep,
.meta > a {
  font-size: .7em;
}
h2 a {
  line-height: 1.2em;
}

/* =Colors
----------------------------------------------- */
a {
  color: #21759B;
}
a:visited {
  color: #004761;
}
a:hover,
a:focus,
a:active {
  color: #191970;
}

/* =Layout
----------------------------------------------- */
html {
  min-height: 100%;
}

body {
  width: 82%;
  margin: auto auto 1em;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

#wrapper > header h1 {
  margin-bottom: .3em;
}

article img {
  border-radius: 4px;
  height: auto;
  max-width: 100%;
}

@media screen and (min-width: 64em) {
body {
  width: 64%;
}
article {
  position: relative;
}

article .site-title {
  position: absolute;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  left: -260px;
  top: 220px;
  width: 420px;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.2em;
}

article .meta {
  position: absolute;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  right: -247px;
  top: 220px;
  width: 420px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.2em;
}

.hentry > nav {
  position: relative;
}

.hentry > nav span {
  position: absolute;
  top: 0px;
  padding: 6px;
  top: -22px;
}

.hentry > nav .previous {
  left: -82px;
}

.hentry > nav .genericon {
  padding: 22px;
}

.hentry > nav .next {
  right: -12px;
}

article.attachment #wrapper {
  min-width: 420px;
}
}

#wrapper {
  max-width: 648px;
}

/* =Menu
----------------------------------------------- */
/* No submenus allowed (@todo add menu dropdowns) */
nav[role="navigation"] ul ul {
  display: none;
}

#wrapper > nav[role="navigation"] {
  text-align: center;
}

nav[role="navigation"] ul {
  font-size: .8em;
  line-height: 1.2;
  list-style-type: none;
  margin: 0;
  padding: 0.5em 0;
}

nav[role="navigation"] ul li,
.social ul li {
  display: inline;
  margin-left: 1em;
}

nav[role="navigation"] ul li:first-child,
.social ul li:first-child {
  margin-left: 0;
}

#wrapper > nav > div,
#wrapper > footer {
  clear: both;
  overflow: hidden;
}

body .the-content .site-navigation a,
.author article ul a,
.author .gravatar {
  border: none;
}

/* =Flexbox
----------------------------------------------- */
@media screen and (min-width: 64em) {
html {
  height: 100%;
}
html,
body,
#wrapper > header,
#wrapper > section {
  /*display: -webkit-box; too slow, see http://css-tricks.com/does-flexbox-have-a-performance-problem/#comment-490956 */
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

html,
body {
   -webkit-box-align: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;

   margin: auto;
   min-height: 100%;
   width: 100% /* for Firefox */
}

#wrapper > header,
#wrapper > section {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -ms-flex-line-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#wrapper > header {
  -webkit-box-align: baseline;
  -moz-box-align: baseline;
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}

#wrapper > header em {
  margin-left: auto;
}

.home {
  width: 82%;
}

.home #wrapper {
  max-width: 100%;
}

.home #wrapper > section article {
  margin-left: 2em;
}

.home #wrapper > section article:first-child {
  margin-left: 0;
}

.home #wrapper > section article {
  min-width: 30%;
}

.safari #wrapper > section article {
  max-width: 30%;
}
}

/* =Post formats
----------------------------------------------- */
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}

/* =Random Images
----------------------------------------------- */
.hidden {
  display: none !important;
}

#wrapper > .random-images {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -ms-flex-line-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 5px 0;
}

.logged-in #wrapper > .random-images {
  padding-top: 32px;
}

#wrapper > .random-images a,
#wrapper > .random-images a img {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  display: block;
}

#wrapper > .random-images a {
  border: 2px solid rgba(0,0,0,.2);
}

.image-block {
  line-height: 1;
}

.random-images a img,
a#rollthedice img {
  -webkit-filter: grayscale(1) contrast(1.8);
  filter: grayscale(1) contrast(1.8);
}

.random-images a img:hover,
a#rollthedice img:hover {
  -webkit-filter: grayscale(0) contrast(1.2);
  filter: grayscale(0) contrast(1.2);
}

/* Only display the first 3 images on small screens */
@media screen and (max-width: 32em) {
  #wrapper > .random-images a:not(:nth-of-type(-n+3)) {
    display: none;
  }
}

/* Only display the first 4 images on small-ish screens */
@media screen and (max-width: 48em) {
  #wrapper > .random-images a:not(:nth-of-type(-n+4)) {
    display: none;
  }
}

/* Only display the first 6 images on medium-small screens */
@media screen and (max-width: 64em) {
  #wrapper > .random-images a:not(:nth-of-type(-n+6)) {
    display: none;
  }
}

@media screen and (min-width: 64em) {

.attachment #wrapper > .random-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

body.random-images #wrapper {
	/* padding-top: 100px; */
  text-align: left;
}

#wrapper {
  padding-top: 1.5em;
}
}

/* =Images
----------------------------------------------- */
#wrapper > header a img {
  border-radius: 3px;
}
.wp-caption {
  margin-bottom: 1em;
  max-width: 96%;
  padding: 9px;
}
.wp-caption.alignleft {
  margin: 5px 10px 5px 0;
}
.wp-caption.alignright {
  margin: 5px 0 5px 10px;
}
.wp-caption .wp-caption-text {
  font-size: 0.75em;
  margin: 0;
  padding: 0;
}

/* =Forms
----------------------------------------------- */
button,
input,
select,
textarea {
  font-size: 100%; /* Corrects font size not being inherited in all browsers */
  margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
  vertical-align: baseline; /* Improves appearance and consistency in all browsers */
  vertical-align: middle; /* Improves appearance and consistency in all browsers */
  background: inherit;
}
button,
input {
  line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
  overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid #ccc;
  border-color: #ccc #ccc #bbb #ccc;
  border-radius: 3px;
  background: inherit;
  color: rgba(255,255,255,.7);
  cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
  appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
  -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
  padding: .9em 1em;
}
input[type="submit"] {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa #bbb;
  background: rgba(255,255,255,.7);
  color: rgba(0,0,0,.7);
}
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  border-color: #aaa #bbb #bbb #bbb;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
  padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
  appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
  -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
  border: 0;
  padding: 0;
}
input[type=text],
input[type=email],
input[type=password],
textarea {
  color: rgba(0,0,0,.5);
  border: 1px solid #ccc;
  border-radius: 3px;
  font-weight: normal;
  padding: 0.9em 1em;
  max-width: 92%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus {
  color: rgba(0,0,0,.8);
}
textarea {
  overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
  vertical-align: top; /* Improves readability and alignment in all browsers */
  width: 92%;
}

/* =Commments
-----------------------------------------------*/
#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-url {
  display: table-row;
}

#commentform .comment-form-author label,
#commentform .comment-form-email label,
#commentform .comment-form-url label {
  display: table-cell;
  width: 25%;
  padding-bottom: 1.5em;
}

.comment {
  margin-bottom: 0;
}

.comment ~ p {
  margin-top: 0;
}

.comment.children li p:last-of-type {
  margin-bottom: 0;
}

.comment .children {
  padding-bottom: 1em;
}


/* =Show/hide comments
----------------------------------------------- */
#comments ul {
  list-style-type: none;
}

.commentlist {
  padding-left: 0;
}

.comment p:first-of-type {
  margin-top: 0.2em;
}

.comments-link {
  display: block;
  font-size: 0.75em;
  padding-bottom: 0.5em;
  text-align: center;
}

.bypostauthor {
  padding: 0.3em;
  border-radius: 3px;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
}

input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

input[type=checkbox]:checked ~ [for="read_more"] {
  margin-top: 0;
}

[for="read_more"]:hover {
    color: rgb(255,255,255);
}
input[type=checkbox] ~ .commentlist,
input[type=checkbox] ~ #respond,
[for="read_more"] span:last-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ .commentlist,
input[type=checkbox]:checked ~ #respond {
    display: block;
    visibility: visible;
    width: 100%;
}

input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
    display: block;
    visibility: visible;
}
*/

/* =Error page
----------------------------------------------- */
.error404 h2 { text-align: center; }
.error404 #searchform input[type=text] { width: 70% }
.error404 #searchform input[type=submit] { width: 22% }

/* =Search
----------------------------------------------- */
.search .hentry .site-title,
.search .hentry > nav,
.archive .hentry .site-title,
.archive .hentry > nav {
  display: none;
}

.search #wrapper .hentry:first-of-type .site-title,
.archive #wrapper .hentry:first-of-type .site-title {
  display: block;
}

.search .hentry .meta,
.search .hentry .site-title,
.archive .hentry .meta,
.archive .hentry .site-title {
  top: 205px;
}

/* =Patterns
----------------------------------------------- */
pre {
  white-space: pre-wrap;
}
.the_content ul {
  padding-left: 1em;
}
/* Text meant only for screen readers */
.assistive-text {
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}
/* Alignment */
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}
.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}
.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
    max-width: 100%;
}
/* Rotation */
.rotate90 {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotate270 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/* Extra Genericon sizes and circle background */
.genericon-22 {
  display: inline-block;
  width: 22px;
  height: 22px;
  -webkit-font-smoothing: antialiased;
  font-size: 22px;
  line-height: 1;
  font-family: 'Genericons';
  text-decoration: inherit;
  font-weight: normal;
  font-style: normal;
  vertical-align: middle;
}
.genericon-image {
  height: 25px;
}
.genericon-32 {
  display: inline-block;
  width: 32px;
  height: 32px;
  -webkit-font-smoothing: antialiased;
  font-size: 32px;
  line-height: 1;
  font-family: 'Genericons';
  text-decoration: inherit;
  font-weight: normal;
  font-style: normal;
  vertical-align: top;
}
.circle {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  padding: 6px;
  text-align: center;
}
/* Main box lists */
.home section article {
  padding-top: 1em;
}
.home section article ul {
  margin-top: 0;
  padding-left: 0;
  list-style-type: none;
}
.home #wrapper > section article ul li {
  height: 1.4em;
  overflow: hidden;
}
.home #wrapper > section article ul li:before {
  content: "&";
  padding-right: 1em;
  font-weight: 100;
}
.home section li {
  height: 1.4em;
  overflow: hidden;
}
.bio p a,
.bio p img {
  border: none;
  border-radius: 50%;
}
.tagcloud {
  text-align: center;
  line-height: 1.1;
}
.home a.sticky {
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px dotted rgba(0, 0, 0, 0.4);
}
.home a.sticky:hover {
  color: rgba(0, 0, 0, 1);
}
blockquote {
  position: relative;
  padding-left: 2.5em;
  margin: 0;
}
blockquote:before {
    font-family: Baskerville,Georgia,serif;
    font-size: 3em;
    font-weight: 700;
    content: "\201D";
    display: block;
    position: absolute;
    top: 16px;
    left: 0;
    transform: scaleX(-1);
}
.the-content {
  margin-bottom: 1em;
}
#wpstats {
  position: absolute;
  left: 0;
  bottom: 0;
}

/* =Galleries
----------------------------------------------- */

/* Don't display captions in galleries with 4+ columns */
.gallery-columns-4 .gallery-caption,
.gallery-columns-5 .gallery-caption,
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
    display: none;
}
.gallery-item {
  margin: 0 !important;
  display: table-cell;
}
#wrapper .gallery-item img {
  border: 2px solid rgba( 0, 0, 0, 0.1 );
}