/*
 Theme Name:   purplearth cozmik imagez 2016
 Description:  purplearth2016 theme, customized to display images
 Author:       Obbie King
 Author URI:   http://purplearth.net
 Template:     purplearth2016
 Version:      1.0.0
 Text Domain:  purplearth2016_cozmikimagez
*/

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

#page {
	max-width: inherit;
	margin: inherit;
}

#main {
	padding-top:48px;
}

#primary, #bottom-widgets {
    /*width: 95%;*/
    float: none;
    width: 93.5%;
    margin: 0 auto 1.5em;
    border: solid thin #c9f;
    padding: 1.5%;
    border-radius: 15px;
    background-color: #f8f8f8;
}
.hentry, .not-found {
	margin: 0 0 1.5em 0;
}

.entry-header {
    margin-bottom: 5px;
}

.widget {
    margin: 0 0 1.5em;
}

/* purplearth-teaser */
.purplearth-teaser {
	margin: 0 0 1.5em 0;
	border: solid thin #c9f;
	padding: 1.5%;
	border-radius: 15px;
	background-color: #ccf;
}
.purplearth-teaser .teaser-thumbnail {
	max-width: 35%;
	float: left;
	margin-right:5px;
}
.purplearth-teaser .teaser-thumbnail img {
	max-width: 100%;
	height:auto;
}
.purplearth-teaser .entry-content {
    width: 60%;
    float: left;
}
/*button.read-on {
	background: #306;
    color: #ff0;
    box-shadow: none;
    text-shadow: none;
    border-radius: 10px;
    font-size: 16px;
    font-size: 1rem;
    padding-top: .5em;
    margin-left: 10%;	
}*/


/****** Podcast archive screen stuff ***********/
#pe-podcast-image {
	width:25%;
	float: left;
}
#pe-podcast-image img {
	max-width: 100%;
	height: auto;
}
#pe-podcast-header {
	float: right;
	width:73%;
}
#pe-podcast-header .page-title {
	font-size: 2.5em;
	line-height: 1.2em;
}
#pe-podcast-header .taxonomy-description p {
	font-size: 1.5em;
}

/*--------------------------------------------------------------
## Header, masthead, logo, etc
--------------------------------------------------------------*/
header#masthead {
	background: linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
	background: -moz-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
	background: -webkit-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );

	position: fixed;
	top:0;
	width:100%;
	z-index: 2;
	
	/*background-color: #000;*/
	color: #306;
	height: 40px;
	padding-top: 5px;
}
.admin-bar #wpadminbar {
	position: fixed;
}
.admin-bar header#masthead {
	top:46px;
}
@media screen and (min-width: 783px) {
	.admin-bar header#masthead {
		top:32px;
	}
}

header#masthead .site-logo {
	width: 10%;
    max-width: 35px;
	float: left;
	margin-left:5px;
}

header#masthead .site-branding {
	float:left;
}

/*** Make this font size bigger for bigger screens */
header#masthead .site-branding .site-title {
	font-family:HR-black,"Arial Black", Gadget, sans-serif;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1.7em;
	font-weight: normal;
	margin: 0 5px 0 15px;
}

header#masthead .site-branding .site-title a,
header#masthead .site-branding .site-title a:visited {
	text-decoration: none;
	color: inherit;
}
header#masthead .site-branding .site-title a:hover {
	color:#90c;
}


header#masthead .site-branding .site-description {
	margin: 0;
	display: none;	/*** bring display back on bigger screens */
}

/*--------------------------------------------------------------
## Main nav menu, etc
--------------------------------------------------------------*/
#purplearth-main-nav {
	float:right;
	clear:right;
	display: none;
}
/*.menu-toggle {
    cursor: pointer;
    display: block;
    padding: 0.3em 0 0.1em;
    width: 75%;
    background-color: #ff0;
    margin: 5px auto 0;
    text-align: center;
    border: solid 2px #c9f;
    border-radius: 15px;
    line-height: 1em;
    font-size: 1.1em;
    background: linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
    background: -moz-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
    background: -webkit-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
}*/

#masthead #header-menu-button:before {
	cursor: pointer;
	content: "\f228";
    display: inline-block;
    float: right;
    font: 400 30px/32px dashicons;
    vertical-align: middle;
    outline: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 30px;
    /*width: 50px;*/
    padding: 0 10px 0 0;
    border: none;
    text-align: center;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*.main-navigation {
	width:100%;
}
.main-navigation ul {
	width:100%;
	border-top:none;
}
.main-navigation li {
	float:left;
	background-color: inherit;
	background:none;
	border:none;
	font-size: 0.85em;
}*/
/*.main-navigation ul {
    background-color: #FF0;
    border-left: thin solid #306;
    border-right: thin solid #306;
    border-bottom: thin solid #306;
    background: linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
    background: -moz-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
    background: -webkit-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
}*/
.main-navigation {
	width:100%;
}
.main-navigation ul {
	top:100%;
	width:100%;
	left:-1px;
	border-top: thin solid #306;
}
.main-navigation ul li {
	width:100%;

    background-color: #FF0;
	border-left: thin solid #306;
    border-right: thin solid #306;
    border-bottom: thin solid #306;
    background: linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
    background: -moz-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
    background: -webkit-linear-gradient(top, #ff6600,#ffff00 45%, #ff6600 );
    font-size: 1em;
}
.main-navigation ul ul,
.main-navigation ul ul ul {
    left: -101%;
    top: -1px;
}

#colophon {
    width: 93%;
    margin: 0 1.5%;
}

/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/
.home .hentry {
	border: none;
    padding: 0;
    font-size: 1.2em;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
## image content styling
--------------------------------------------------------------*/
#content {
	margin-top:0;
}
article div.purplearth-supplemental-image-info .entry-caption {
	font-size: 1.2em;
}
article div.purplearth-supplemental-image-info .entry-caption .pe-capture-date {
    font-size: 0.8em;
    text-align: right;	
}
/*article div.purplearth-supplemental-image-info*/ .purplearth-location {
	width: 100%;
	height: 300px;
	border: #c9f solid 1px;
	margin: 20px 0;
}
/* fixes potential theme css conflict */
article div.purplearth-supplemental-image-info .purplearth-location img {
   max-width: inherit !important;
}
div.purplearth-supplemental-image-info .entry-meta {
	clear:right;
}

/* portrait images */
article.pe-portrait div.entry-content {
	/*max-width: 59%;*/
	height:70vh;
	width:59%;
	float: left;
	margin-top:0;
}
article.pe-portrait div.entry-content .entry-attachment,
article.pe-portrait div.entry-content .entry-attachment .attachment {
	height:100%;
}
article.pe-portrait div.entry-content .entry-attachment .attachment img {
	max-height: 100%;
	display: block;
	margin: auto;
}
article.pe-portrait div.purplearth-supplemental-image-info {
	width: 39%;
	float:right;
}

/* landscape images */
article.pe-landscape div.entry-content,
article.pe-landscape div.purplearth-supplemental-image-info {
	max-width: 100%;
	float: none;
}
article.pe-landscape div.entry-content .attachment img {
	max-width: 100%;
	max-height: 70vh;
	display: block;
	margin:auto;
}
article.pe-landscape div.purplearth-supplemental-image-info {
	margin-top:1em;
}
article.pe-landscape div.purplearth-supplemental-image-info .entry-caption {
	width:49%;
	float:left;
}
article.pe-landscape div.purplearth-supplemental-image-info .purplearth-location,
article.pe-landscape div.purplearth-supplemental-image-info .entry-meta {
	width:49%;
	float:right;
}
article.pe-landscape div.purplearth-supplemental-image-info .purplearth-location {
	margin-top:0;
}


@media (min-width: 1000px) { /* 1000 pixels or wider */
	#main, #header-wrap, #colophon {
		max-width: 1000px;
		margin:auto;
	}
	#colophon {
		max-width: 930px;
	}
}

@media (max-width: 650px) { /* 650 pixels or smaller */
	article.pe-portrait div.entry-content,
	article.pe-portrait div.purplearth-supplemental-image-info {
		width: 100%;
		float: none;
	}
	article.pe-portrait div.purplearth-supplemental-image-info .entry-caption {
		width:49%;
		float:left;
	}
	article.pe-portrait div.purplearth-supplemental-image-info .purplearth-location,
	article.pe-portrait div.purplearth-supplemental-image-info .entry-meta {
		width:49%;
		float:right;
	}
	article.pe-portrait div.purplearth-supplemental-image-info .purplearth-location {
		height:200px;
		margin-top:0;
	}
}

@media (max-width: 450px) { /* 450 pixels or smaller */
	article.pe-portrait div.purplearth-supplemental-image-info .entry-caption,
	article.pe-portrait div.purplearth-supplemental-image-info .purplearth-location,
	article.pe-portrait div.purplearth-supplemental-image-info .entry-meta,
	article.pe-landscape div.purplearth-supplemental-image-info .entry-caption,
	article.pe-landscape div.purplearth-supplemental-image-info .purplearth-location,
	article.pe-landscape div.purplearth-supplemental-image-info .entry-meta {
		width:100%;
		float:none;
	}
	article.pe-portrait div.entry-content .entry-attachment .attachment img {
		margin-bottom:10px;
	}
}
/************************
 * responsive structure
 *************************/

@media (max-width: 767px) {	/* smaller than a tablet */
	header#masthead .site-branding .site-title {
	    font-size: 18px;
	    font-size: 1.8rem;
	    line-height: 2.2em;
	}

}

@media (max-width: 650px) { /* 650 pixels or smaller */
	#primary, #secondary, #bottom-widgets {
	    width: 93.5%;
	}

	.widget, #bottom-widgets .widget, #footer-widgets .widget {
		margin:5px 0;
	}
}

@media (max-width: 450px) { /* 450 pixels or smaller */
	.main-small-navigation ul ul,
	.main-small-navigation ul ul ul {
	    left: 10%;
	    top: 100%;
	}
}

@media (max-width: 320px) { /* just in case we get ridiculously tiny screens */
	header#masthead .site-branding .site-title {
	    font-size: 14px;
	    font-size: 1.4rem;
	    line-height: 2.7em;
	}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* smartphones in landscape mode */

}

@media (min-width: 768px) {	/* tablets and bigger */

	}