/****************************************
  ==== BLOG CORE LAYOUT
****************************************/

div.blog-header { 
  padding: 0 0 30px 0; margin: 40px 10px 30px 10px; border-bottom: #e6e6e6 1px solid;
}
div.blog-header h1 { 
  color: #3b9ab9; font-size: 1.6em; margin: 0 0 5px 0;
}
div.blog-header h2 { 
  color: #999; font-size: 1.325em; margin: 0;
}
div.prevnext {
  width: 100%;
}

div.hero-nav {
  width: 100%; 
}
div.hero-nav ul {
  float: left;
}
div.hero-nav ul li {
  display: block; float: left; margin: 0 1px 1px 0;
}
div.hero-nav ul li a {
  height: 36px; line-height: 36px; display: block; font-size: 0.875em; color: #fff; text-decoration: none; padding: 0 15px; background: rgba(0,0,0,0.75);
  transition: all .25s ease-out; -o-transition: background .25s ease-out; -moz-transition: all .25s ease-out; -webkit-transition: all .25s ease-out;
}
div.hero-nav ul li a:hover {
  color: #000; background: rgba(255,255,255,0.2); text-decoration: none;
}
div.hero-nav ul li.selected a, div.hero-nav ul li.selected a:hover {
  color: #000; background: rgba(255,255,255,0.2);
}
div.hero-nav ul li.selected a:before {
  display: none;
}

/****************************************
  ==== BLOG POST
****************************************/

div.post {
  width: 670px; padding: 0 0 30px 0; margin: 10px 30px 30px 10px; border-bottom: #e6e6e6 1px solid;
}
div.post-summary img.wp-post-image {
  margin: 0 0 20px 0; border-bottom: #e6e6e6 1px solid; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.3); box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
div.post div.meta {
  width: 160px; float: left; display: inline; margin: 0 30px 0 0;
}
div.post div.meta div.icon {
  width: 36px; height: 36px; float: right; margin: 0 0 10px 126px; background: #e6e6e6 url(images/layout/blog-sprites.png) -275px 10px no-repeat;
}
div.post div.meta div.w {
  clear: both;
}
div.post div.meta div.lbl {
  float: left; font-size: 0.75em; font-weight: bold;
}
div.post div.meta div.info {
  float: right; font-size: 0.75em; color: #999; padding: 0;
}
div.post div.content {
  width: 480px; float: right;
}

div.post div.content h2 {
  font-size: 1.25em; margin: 0;
}
div.post div.content h2 a {
  color: #444; text-decoration: none;
}
div.post div.content h2 a:hover {
  color: #5284bd; text-decoration: underline !important;
}
div.post div.content div.categories {
  font-size: 0.8125em; margin: 0 0 6px 0;
}
div.post div.content div.categories a {
  color: #999; text-decoration: none;
}
div.post div.content div.categories a:hover {
  color: #999; text-decoration: underline !important;
}
div.post div.content p {
  font-size: 0.875em;
}
div.post-full {
  position: relative; border-bottom: 0; padding: 0 0 0 0;
}
div.post-full h1 {
  color: #222; font-size: 1.75em; margin: 0 0 10px 0; padding: 0 40px 0 0;
}
div.post-full div.meta-info {
  font-size: 0.875em; color: #999; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: #e6e6e6 1px solid;
}
div.post-full div.meta-info a {
  color: #999;
}
div.post-full div.content {
  width: 670px; padding: 0 0 20px 0; margin: 0 0 10px 0; border-bottom: #e6e6e6 1px solid;
}
div.post-full div.content h1 {
  font-size: 1.5em; margin: 0 0 20px 0; color: #444;
}
div.post-full div.content h2 {
  font-size: 1.5em; margin: 0 0 15px 0; color: #444;
}
div.post-full div.content h3 {
  font-size: 1em; margin: 0 0 15px 0; color: #444; text-shadow: none;
}
div.post-full div.content h4 {
  font-size: 0.875em; margin: 0 0 15px 0; color: #444;
}
div.post-full div.content ul {list-style-type: none;margin: 0 0 10px 0;}
div.post-full div.content ul li {font-size: 0.875em;padding: 4px 0 5px 15px;background: url(images/layout/core-sprites.png) -396px -380px no-repeat;}
div.post-full div.content ul li a { background: none !important; }
div.post-full div.content ol {margin: 0 0 10px 0;padding: 0 0 0 17px; list-style-type: decimal;}
div.post-full div.content ol li {padding: 0 0 10px 5px;font-size: 0.875em;}

div.post-full div.content iframe {
  margin: 0 0 20px 0;
}
div.post-full img.wp-post-image {
margin: 0 0 20px 0;
}




div.post-full div.content img {
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.3); box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
div.post-full div.content strong {
  font-weight: bold;
}
div.post-full div.content .alignleft {
  float: left;
}
div.post-full div.content .alignright {
  float: right;
}
div.post-full div.content img.alignright {
  margin: 0 0 20px 20px !important; 
}
div.post-full div.content img.alignleft {
  margin: 0 20px 20px 0 !important;
}
div.post-full div.content img.alignnone, div.post-full div.content img.size-full {
  margin: 0 0 20px 0;
}
div.post-full div.content img.aligncenter  {
  margin: 20px auto 20px auto;
}
div.post-full div.content dl {
  margin-left: 3em; font-size: 0.875em;
}
div.post-full div.content ol {
  padding: 0 0 15px 19px; list-style-type: decimal; font-size: 0.875em;
}
div.post-full div.content ol li {
  padding: 0 0 5px 0;
}
div.post-full div.content pre {
  padding: 10px; margin: 0 0 15px 0; background: #f0f0f0; overflow: auto; font-size: 0.8125em;
}
div.post-full div.social-icons {
  margin: 0 0 0px 0; padding: 0 0 8px 0; border-bottom: #e6e6e6 1px solid;
}
div.post-full div.tweet, div.post-full div.googleplus, div.post-full div.facebook {
  float: left; margin: 0 10px 0 0; display: inline;
}
div.post-full div.meta-data {
  background: #f0f0f0; font-size: 0.6875em; padding: 5px;
}
div.post-full div.edit-post {
  width: 30px; height: 30px; position: absolute; top: 40px; right: 0; background: #e6e6e6;
}
div.post-full div.edit-post a {
  width: 30px; height: 30px; display: block; opacity: 0.5; background: url(images/layout/blog-sprites.png) 10px 10px no-repeat;
  -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out;
}
div.post-full div.edit-post a:hover {
  opacity: 1;
}

div.post-full .gallery {
	margin: auto;
	margin-bottom: 15px;
}
div.post-full .gallery-item {
	float: left;
	margin-top: 20px;
	text-align: center;
	width: 210px;
	margin-right: 20px;
	margin-left: 0px !important;
}

div.post-full .gallery-item .gallery-icon {
	height: 60px;
	overflow: hidden;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.3); box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

@media only screen and (min-width: 980px){
	div.post-full .gallery-item:nth-child(3n+3) {
		margin-right: 0px;
	}
}

div.post-full .gallery-item img {
	width: 100%;
}

div.post-full .gallery-caption {
	margin-left: 0;
	text-align: left;
	font-size: 0.9em;
	color: #999999;
}

div.post-full .gallery:after {
	content:"";
	display: block;
	width: 100%;
	margin-top: 10px;
	clear: both;
}

em {
  font-style: italic;
}

blockquote {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  padding-left: 15px;
  border-left: 3px solid #41badd;
}

/****************************************
  ==== BLOG POST COMMENTS
****************************************/

div.comment {
  margin: 0 0 20px 0; padding: 30px 0 0 0; border-top: #e6e6e6 1px solid; position: relative;
}
div.comment div.avatar {
  width: 60px; float: left; margin: 0 20px 0 0; display: inline; border: 0;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
div.comment div.content {
  width: 590px; float: left; border: 0; padding: 0; margin: 0;
}
div.comment div.content img {
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
div.comment div.content img.wp-smiley {
  display: inline;
}
div.comment div.content div.author {
  float: left; font-size: 0.875em; padding: 0 5px 0 0; text-transform: uppercase; margin: 0 0 5px 0; color: #444;
}
div.comment div.content div.date {
  float: left; font-size: 0.875em; color: #999; font-style: italic; margin: 0 0 5px 0;
}
div.comment div.content p a {
  word-break: break-word;
}
div.comment div.edit-comment {
  width: 21px; height: 21px; position: absolute; top: 30px; right: 0; background: #e6e6e6;
}
div.comment div.edit-comment a {
  width: 21px; height: 21px; display: block; opacity: 0.5; background: url(images/layout/blog-sprites.png) 5px 5px no-repeat;
  -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out;
}
div.comment div.edit-comment a:hover {
  opacity: 1;
}
div.respond {
  padding: 20px 0 0 0; border-top: #e6e6e6 1px solid;
}
div.respond div.field {
  width: 340px; float: left; margin: 0 0 10px 0;
}
div.respond div.msg {
  width: 670px;
}
div.respond div.btn {
  width: 326px;
}
div.respond div.field label {
  font-size: 0.875em; margin: 0 0 3px 0;
}
div.respond div.error label {
  color: #f00;
}
div.respond div.error label span {
  color: #555;
}
div.respond div.field input[type="text"] {
  width: 310px;
}
div.respond div.field textarea {
  width: 650px; height: 75px;
}

/****************************************
  ==== BLOG SIDEBAR
****************************************/

div.search {
  width: 200px; position: relative;
}
div.search input.field {
  width: 180px; height: 16px; float: left; padding: 10px 10px; display: block; color: #555; font-size: 0.875em; border: 0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
div.search input.field:hover {
  border-color: #ccc !important;
}
div.search input.field:focus {
  border-color: #ddd !important; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
div.search input.submit {
  width: 36px; height: 26px; border: 0; color: #fff; font-size: 0.6875em; background: #444; position: absolute; top: 5px; right: 5px; cursor: pointer;
}
div.search input.submit:active {
  top: 6px;
}
div.sidebar ul {
  list-style-type: none; margin: 0 0 10px 0;
}
div.sidebar ul li {
  font-size: 0.875em; border-top: #e6e6e6 1px solid;
}
div.sidebar ul li:first-child {
  border-top: 0;
}
div.sidebar ul li a {
  color: #999;
}
div.sidebar ul li a:hover {
  color: #5284bd;
}

/****************************************
  ==== BLOG AUTHOR HEADER
****************************************/

div.author-header { 
  width: 940px; height: 180px; margin: 0 auto 30px auto; position: relative;
}
div.author-header h2 { 
  position: absolute; bottom: 15px; left: -10px; background: rgba(0,0,0,0.7); color: #fff; padding: 5px 20px 5px 15px; margin: 0;
}

/**************************************************
  #### Portrait tablet to landscape and desktop
**************************************************/
@media only screen and (min-width: 767px) and (max-width: 979px){

div.author-header { 
  width: 700px; height: 135px; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%;
}
div.post-w {
  width: 530px;
}
div.post {
  width: 500px; padding: 0; margin: 10px 20px 20px 10px; border-bottom: 0;
}
div.post-full {
  padding: 0px 0 0 0;
}
div.post div.meta {
  width: 100%; height: 36px; float: left; margin: 0 0 10px 0; padding: 5px 0; border-top: #e6e6e6 1px solid; border-bottom: #e6e6e6 1px solid;
}
div.post div.meta div.icon {
  width: 35px; height: 36px; float: left; margin: 0 0 10px 0;
}
div.post div.meta div.w {
  height: 36px; float: left; clear: none; padding: 0 15px; border-left: #e6e6e6 1px solid;
}
div.post div.meta div.lbl {
  float: none; font-size: 0.85em; font-weight: bold; line-height: 1em; margin: 5px 0 4px 0;
}
div.post div.meta div.info {
  float: none; font-size: 0.85em; color: #999; line-height: 1em; padding: 0;
}
div.post div.content div.categories {
  margin: 0 0 10px 0; font-size: 0.85em; line-height: 22px;
}
div.post div.content {
  width: 500px; float: left;
}
div.post div.content p {
  margin: 0 0 20px 0;
}
div.post-full div.content iframe {
  width: 500px; height: 282px;
}
div.search {
  width: 150px;
}
div.search input.field {
  width: 130px; font-size: 0.85em;
}
div.sidebar ul li {
  font-size: 0.85em; border-top: #e6e6e6 1px solid;
}
div.comment div.avatar {
  width: 60px;
}
div.comment div.content {
  width: 420px;
}
div.respond div.field {
  width: 250px;
}
div.respond div.msg {
  width: 500px;
}
div.respond div.btn {
  width: 241px;
}
div.respond div.field input[type="text"] {
  width: 221px;
}
div.respond div.field textarea {
  width: 476px;
}

div.post-full .gallery-item {
	width: 240px;
}

div.post-full .gallery-item:nth-child(2n+2) {
	margin-right: 0px;
}

}

/**************************************************
  #### Mobile Landscape to Tablet Portrait
**************************************************/
@media only screen and (min-width: 480px) and (max-width: 766px) {






div.blog-header { 
  width: 420px; padding-bottom: 10px;
}
div.author-header { 
  width: 440px; height: 83px; margin-top: 10px; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%;
}
div.author-header h2 { 
  font-size: 1.125em; bottom: 10px;
}
div.post-w {
  width: 440px;
}
div.post {
  width: 420px; padding: 0; margin: 0px 20px 30px 10px; border-bottom: 0;
}
div.post-full {
  padding: 0;
}
div.post div.content {
  width: 420px; float: left;
}
div.post div.content p {
  margin: 0 0 20px 0;
}
div.post-full div.content iframe {
  width: 420px; height: 237px;
}
div.prevnext { width: 420px; margin: 0 10px 30px 10px; }
div.search {
  width: 420px;
}
div.search input.field {
  width: 400px; font-size: 0.85em;
}
div.comment div.avatar {
  width: 60px;
}
div.comment div.content {
  width: 340px;
}
div.respond div.field {
  width: 420px; margin-bottom: 10px !important;
}
div.respond div.btn label {
  display: none;
}
div.respond div.btn input {
  float: left !important;
}
div.respond div.field input[type="text"], div.respond div.field textarea {
  width: 406px;
}

div.post-full .gallery-item {
	width: 200px;
}

div.post-full .gallery-item:nth-child(2n+2) {
	margin-right: 0px;
}

}

/**************************************************
  #### Landscape phones and down
**************************************************/
@media only screen and (max-width: 479px) {

div.hero-nav {
  display:none;
}


div.blog-header { 
  width: 300px; padding-bottom: 10px;
}
div.blog-header h1 { 
  font-size: 1.8em !important;
}
div.blog-header h2 { 
  font-size: 1.2em !important;
}
div.author-header { 
  width: 320px; height: 60px; margin-top: 10px; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%;
}
div.author-header h2 { 
  font-size: 1.125em; bottom: 10px;
}
div.post {
  width: 300px; padding: 0; margin: 0px 20px 30px 10px; border-bottom: 0;
}
div.post div.content {
  width: 300px; float: left;
}
div.post-full div.content iframe {
  width: 300px; height: 169px;
}
div.post div.meta div.icon, div.post div.meta div.by {
  border: 0 !important;
}
div.post div.meta div.comments {
  display: none;
}
div.prevnext { width: 300px; margin: 0 10px 30px 10px; }
div.search {
  width: 300px;
}
div.search input.field {
  width: 280px; font-size: 0.85em;
}
div.comment div.avatar {
  width: 40px; margin: 0 10px 0 0;
}
div.comment div.avatar img {
  width: 40px; height: 40px;
}
div.comment div.content {
  width: 250px;
}
div.respond div.field {
  width: 300px; margin-bottom: 10px !important;
}
div.respond div.btn label {
  display: none;
}
div.respond div.btn input {
  float: left !important;
}
div.respond div.field input[type="text"], div.respond div.field textarea {
  width: 284px;
}

div.post-full .gallery-item {
	width: 300px;
	margin-right: 0px;
}

div.post-full .gallery-item .gallery-icon {
	height: 80px;
}

}


/**************************************************
  #### Common styles for res 320-766
**************************************************/
@media only screen and (min-width: 150px) and (max-width: 766px) {

div.blog-header { 
  text-align: center; padding: 10px 0 20px 0; margin-bottom: 20px;
}
div.blog-header h1 { 
  font-size: 2.2em;
}
div.post div.meta {
  width: 100%; height: 36px; float: left; margin: 0 0 10px 0; padding: 5px 0; border-top: #e6e6e6 1px solid; border-bottom: #e6e6e6 1px solid;
}
div.post div.meta div.icon {
  width: 35px; height: 36px; float: left; margin: 0 0 10px 0;
}
div.post div.meta div.w {
  height: 36px; float: left; clear: none; padding: 0 15px; border-left: #e6e6e6 1px solid;
}
div.post div.meta div.lbl {
  float: none; font-size: 0.75em; font-weight: bold; line-height: 1em; margin: 5px 0 4px 0;
}
div.post div.meta div.info {
  float: none; font-size: 0.75em; color: #999; line-height: 1em;
}
div.post div.content div.categories {
  margin: 0 0 10px 0; font-size: 0.85em; line-height: 22px;
}
div.post-full {
  padding: 10px 0 0 0;
}
div.sidebar ul li {
  font-size: 0.85em; border-top: #e6e6e6 1px solid;
}
div.sidebar div.search {
  position: absolute; top: 53px; background: none; padding: 0; display: none;
}
div.sidebar div.search input.submit {
  top: 6px; right: 6px;
}
div.sidebar div.search input.field {
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
div.sidebar div.search input.field:hover {
  border-color: #ddd !important;
}
div.sidebar div.search input.field:focus {
  background: #fff; border-color: #ddd !important; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3);
}

}

/* Retina  */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

div.post div.meta div.icon, div.post-full div.edit-post a, div.comment div.edit-comment a {
  background-image: url(images/layout/blog-sprites@2x.png); -webkit-background-size: 300px 34px; -moz-background-size: 300px 34px; -o-background-size: 300px 34px; background-size: 300px 34px;
}



}