/*
Theme Name: DankSpangle
Author: Dank Spangle
Description: A super-simple Masonry Wordpress theme. One menu at the top. No sidebars or widget arears. Just an index page, posts and pages. The index page has large post thumbnails laid out on a Masonry grid. For vest effect set the 'medium' image size to a width of 340px and give your posts a feature image. The code is nice and simple and the style sheet logically arranged. The skeleton is ready for you to extend, the ideal starting point for your own custom theme. Make the stylesheet your own. Add search, sidebars, widget areas. Go on, fill your boots.
Version: 0.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: grid-layout, blog, photography
Text Domain: dankspangle
Theme URI: http://www.dankspangle.com
Author URI: http://www.vaporum.com
*/

/* ------------------------------site----------------------------------- */

body {
	background-color: #ddd;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding: 0px;
	margin: 0px;
	font-size: 16px;
}

.sticky {
    top: 0;
    position: fixed;
}

a {
    color: #0088cc;
    text-decoration: none;
}

.ds-main {
	background-color: #fff;
	max-width: 1060px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 20px;
}

.ds-site-title {
	clear: both;
	padding: 5px 0px 15px 0px;
}

.ds-cat-head {
	color: #bbb;
}

.ds-cat-head a {
	color: #bbb;
}

.ds-footer {
	clear: both;
	width: 100%;
	max-height: 40px;
	background-color: #000;
	color: #fff;
	padding: 10px 0px;
	text-align: center;
}

.ds-footer a {
	color: #c00;
	font-weight: bold;
}

/* -------------------------site mobile -------------------------------- */

@media only screen and (max-width: 768px) {
	.ds-main {
		padding: 0px 0px 0px 30px;
	}
}

/* -------------------------navigation not mobile----------------------- */

.ds-nav-not-mobile  {
	padding: 25px 5px 0px 0px;
	background-color: #fff;
	float: right;
	display: block;
}

.ds-nav-not-mobile ul    {
    margin: 0; 
    padding: 0;
}

.ds-nav-not-mobile li    {
	display: block;
	float: left;
	line-height: 30px;
	height: 30px;
	margin: 0; 
	padding: 0;
	position: relative;
	background-color: #fff;
}

.ds-nav-not-mobile li a  {
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0px 15px 0px 0px;
}

.ds-nav-not-mobile .current-menu-item a, .ds-nav-not-mobile .current_page_item a, .ds-nav-not-mobile a:hover {
	color: #000;
}

.ds-nav-not-mobile ul ul {
	display: none;
	position: absolute;
	top: 30px;
}

.ds-nav-not-mobile ul ul li {
	float: none;
	width: 150px;
	background-color: #eee;
	padding: 0px 0px 0px 5px;
}

.ds-nav-not-mobile ul ul li a {
	padding: 5px 10px;
}

.ds-nav-not-mobile ul li:hover > ul {
	display: block;
}

.ds-nav-mobile {
	display: none;
}

/* -------------------------navigation mobile -------------------------- */

@media only screen and (max-width: 768px) {
	.ds-nav-not-mobile {
		display: none;
	}
	.ds-nav-mobile {
		display: block;
		color: #0088cc;
		font-weight: bold;
		padding: 20px 20px 10px 0px;
		margin-left: -30px;
		text-align: right;
		border-style: solid;
		border-color: #ddd;
		border-width: 0px 0px 1px 0px;
	}
	.ds-nav-mobile-menu-link {
		font-size: 30px;
	}
	.ds-nav-mobile-menu-items {
		display: none;
		text-align: left;
	}
}

/* ------------------------------index---------------------------------- */

.grid-item {
	float: left;
	width: 340px;
	min-height: 100px;
	background-color: #fff;
	text-align: center;
	font-size: 18px;
}

.ds-thumb-image {
	min-height: 20px;
	background-color: #bbb;
}

.ds-thumb-image img {
	display: block;
	margin: 0px auto;
}

.ds-title {
	border-style: solid;
	border-color: #bbb;
	border-width: 0px 1px;
	padding: 10px 5px 5px 5px;
	font-weight: bold;
}

.ds-date {
	border-style: solid;
	border-color: #bbb;
	border-width: 0px 1px;
	padding: 5px;
}

.ds-tags {
	border-style: solid;
	border-color: #bbb;
	border-width: 0px 1px;
	color:#999;
	padding: 5px 5px 5px 5px;
	font-size: 16px;
}

.ds-cat {
	border-style: solid;
	border-color: #bbb;
	color:#999;
	border-width: 0px 1px 1px 1px;
	border-radius: 0px 0px 10px 10px;
	padding: 5px 5px 10px 5px;
	margin-bottom: 10px;
}

.ds-cat a, .ds-tags a {
	color: #999;
}

.ds-pag {
	clear: both;
	width: 100%;
	max-height: 40px;
	background-color: #fff;
	padding: 20px 0px 40px 0px;
	text-align: center;
	margin-left: -10px;
	margin-bottom: -22px;
	font-size: 22px;
}

/* -----------------------------index mobile --------------------------- */

@media only screen and (max-width: 768px) {
	.grid-item {
		width: 300px;
		height: auto;
	}

	.ds-thumb-image img {
		width: 300px;
		height: auto;
	}
}

/* -----------------------------single page----------------------------- */

.ds-single-page {
	display: block;
	clear: both;
	max-width: 500px;
	margin: 0px auto;
}

.ds-single-content li {
	margin-bottom: 6px;
}

.ds-single-content img {
	max-width: 500px;
	height: auto;
}

.ds-single-title {
	font-size: 28px;
	font-weight: bold;
	padding: 10px 0px;
}

.ds-single-date, .ds-single-cat a, .ds-single-cat, .ds-single-tags a, .ds-single-tags {
	color: #aaa;
}

.sd-title {
	width: 100%;
	border-top: 1px solid #999;
}

/* -------------------------single page mobile ------------------------- */

@media only screen and (max-width: 768px) {
	.ds-single-content, .wp-caption-text {
		width: 350px;
	}
	.ds-single-content img {
		width: 300px;
		height: auto;
	}
}

/* --------------------------screen reader ------------------------------*/

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

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/*----------------------------WP----------------------------------------*/

.entry-content img {
	margin: 0 0 1.5em 0;
	}
.alignleft, img.alignleft {
	margin-right: 1.5em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: 1.5em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}
.wp-caption {
	margin-bottom: 1.5em;
	text-align: center;
	padding-top: 5px;
	}
.wp-caption img {
	border: 0 none;
	padding: 0;
	margin: 0;
	}
.wp-caption p.wp-caption-text {
	font-size: 14px;
	margin: 0;
	color: #999;
	margin: 5px 0px 0px 0px;
	}
.wp-smiley {
	margin: 0 !important;
	max-height: 1em;
	}
blockquote.left {
	margin-right: 20px;
	text-align: right;
	margin-left: 0;
	width: 33%;
	float: left;
	}
blockquote.right {
	margin-left: 20px;
	text-align: left;
	margin-right: 0;
	width: 33%;
	float: right;
	}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

.bypostauthor {}

.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}