/*   
Theme Name: Daigo 2013 Reverie child 
Theme URI: 
Description: Reverie Child Theme by Daigo. Responsive and based on Foundation 4. Child theme developed in August 2013.
Author: Daigo Fujiwara
Author URI: http://daigo.org/
Template: reverie
Version: 1.1
Tags: 


Update logs: Reverie 5 is out, and I am editing bunch of small style stuff to match style. Upgrading to 1.1. Dec 23, 2013

*/

/* Googe fonts */
/* I will be using those fonts.
headlines: Stint Ultra Expanded 
body: Lora, 18px over 28px 
daigo.org Logo is Didact Gothic
*/
@import url("http://fonts.googleapis.com/css?family=Lora:400,700,400italic|Stint+Ultra+Expanded");
@import url("css/font-awesome.min.css");

/* getting base css for reverie */

@import url("../reverie/style.css");
/* responsive table from zurb http://zurb.com/playground/responsive-tables */
@import url("css/responsive-tables.css");


/* custom CSS link */
/* this is how I uded to do it, but why not just edit here? 
@import url("custom/daigo.css");
*/

/* Over ride foundation defaults
*/ 

body {
	font-family: 'Lora', Georgia, serif;
	color: #444;
	background: #fff;
}
.row {
	max-width: 76.125em;
}
.contain-to-grid .top-bar {
	max-width: 76.125em;
	margin-bottom: 0;
	border-bottom: none;
}
.top-bar-section ul li.active > a {
	color: #111;
}

/* remove reverie override style.css 37*/
h4.subheader, ol.commentlist cite.subheader.fn {
  margin-top: 0;
}
#sidebar .panel, .footer-widget .panel {
	background-color: #f7f7f7;
}

/* Default Link Styles
foundation link color is #2ba6cb hover #2795b6 */
a {
  color: #8bad93;
	}
  a:hover, a:focus {
    color: #314836; 
	}
.accent {
	color: #8bad93;
}

/* colors: default to Green */
/* Green */
.green .darkcolor, 
.green a:hover, 
.green a:focus {
	color: #314836;
	}
.green .midcolor, 
.green a, 
.sub-nav dd a.green {
	color: #8bad93;
	} 
.green .basecolor {
	color: #e0edd0;
}
.green .page-numbers li span.current {
	background: #314836;
}
/* Blue */
.blue .darkcolor, 
.blue a:hover, 
.blue a:focus {
	color: #1f324d;
	}
.blue .midcolor, 
.blue a, 
.sub-nav dd a.blue {
	color: #8ea8cb;
	} 
.blue .basecolor {
	color: #dae9fd;
	}
.blue .page-numbers li span.current {
	background: #1f324d;
}
/* Purple */
.purple .darkcolor, 
.purple a:hover, 
.purple a:focus {
	color: #190b31;
	}
.purple .midcolor, 
.purple a, 
.sub-nav dd a.purple {
	color: #9081a1;
	} 
.purple .basecolor {
	color: #e1dce5;
}
.purple .page-numbers li span.current {
	background: #190b31;
}
/* Red */
.red .darkcolor, 
.red a:hover, 
.red a:focus {
	color: #661c12;
	}
.red .midcolor, 
.red a, 
.sub-nav dd a.red {
	color: #b34f48;
	} 
.red .basecolor {
	color: #fed8cd;
}
.red .page-numbers li span.current {
	background: #661c12;
}

article {
	margin-bottom: 2.25em;
}
article header {
	margin-bottom: 1.5em;
}
article header .author {
	margin-top: .75em;
}

/* More white spaces for wider screen */
@media only screen and (min-width: 1000px){
	article {
		margin-bottom: 4.25em;
	}
	article header {
		margin-bottom: 2.5em;
	}
	article header.comment-author {
		margin-bottom: 1em;
	}
	article header .author {
		margin-top: 1.75em;
	}
}


article.fixed {position:static;}


/* Default header styles */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Stint Ultra Expanded',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #222222;
	line-height: 1em; 
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

  h1 small, 
  h2 small, 
  h3 small, 
  h4 small, 
  h5 small, 
  h6 small {
    font-size: 60%;
    color: #6f6f6f;
    line-height: 0; }

.brand {
	overflow: hidden;
}
.brand h1 {
	margin-left:60px;
} 
.brand h4 {
	font-family: 'Lora', Gergia, serif;
	font-style: italic;
	margin-left: 60px;
	color: #999;
	font-size:1.1em;
}

.glasses-conatiner {
	width: 55px;
	float:left;
	margin-top:10px;
}

.top-bar-section ul li > a,
.menu-icon span,
.top-bar-section input{
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

input#searchsubmit {
	font-family: FontAwesome;
	padding:0;
	height:2.2em;
}


/* 48em is 768px */
@media only screen and (min-width: 48em){
	/* Brand - expand with menu */
	.brand h1 {
		margin-left:80px;
	} 
	.brand h4 {
		margin-left: 80px;
		font-size:1.2em;
	}
	.glasses-conatiner {
		width: 70px;
		margin-top:20px;
	}
}

.post header h1, 
.post header h1 a,
.post header h2, 
.post header h2 a {
	color: #000;
}

/* body text */

.entry-content p,
.entry-content > ul,
.entry-content > ol,
.entry-content > dl,
.page-content p,
.page-content > ul,
.page-content > ol,
.page-content > dl {
	font-size: 1.125em;  /* 18px */
	line-height: 1.750em; /* 28px */
}

.yarpp-related ol {
	margin-left: 5%;
}


.byline {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;	
	font-size: 1em; /* 16px */
	color: #888;
	margin-bottom: 0.2em;
}
.editthis {
	float:right;
	font-weight:bold;
}

article footer p, 
.rss-date, 
.post-date {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;	
	font-size: 0.875em; /* 14px */
	color: #666;
}


/* Top nav area */
.the-d {
	font-family: 'Stint Ultra Expanded',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 	text-shadow: 1px -2px 0 rgba(0,0,0,.2);
 	color:white;
}
.top-bar {
	background: #f3f3f3;
	background: -moz-linear-gradient(top,  #f3f3f3 0%, #f9f9f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: -o-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: -ms-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: linear-gradient(to bottom,  #f3f3f3 0%,#f9f9f9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f9f9f9',GradientType=0 );
	border-top: 1px solid #f2f2f2;
	border-bottom: 1px solid #ddd; 
}
.contain-to-grid  {
	background: transparent;
}
.top-bar.expanded {
	background: #f3f3f3;
	background: -moz-linear-gradient(top,  #f3f3f3 0%, #f9f9f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: -o-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: -ms-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: linear-gradient(to bottom,  #f3f3f3 0%,#f9f9f9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f9f9f9',GradientType=0 );
	border-top: 1px solid #f2f2f2;
	border-bottom: 1px solid #ddd;
}   
.top-bar.expanded .title-area {
	background: transparent;
}
.top-bar-section ul {
 background: transparent; }
  .top-bar-section ul li > a {
    background: transparent; }
    .top-bar-section ul li > a:hover {
      background: rgba(0,0,0,.05); }
    .top-bar-section ul li > a.button {
      background: #999;
      font-size: 0.8125em; }
      .top-bar-section ul li > a.button:hover {
        background: #666; }
  .top-bar-section ul li.active a {
    background: rgba(0,0,0,.05); }
	.top-bar-section .divider {
		border-bottom: solid 1px #e0e0e0;
		border-top: solid 1px #fff;
	}
.top-bar .name h1 a, .top-bar-section ul li > a {
	color: #6d6d6d;
}
.top-bar .toggle-topbar.menu-icon a span {
	-webkit-box-shadow: 0 10px 0 1px #bbb, 0 16px 0 1px #bbb, 0 22px 0 1px #bbb;
	box-shadow: 0 10px 0 1px #bbb, 0 16px 0 1px #bbb, 0 22px 0 1px #bbb;
	color: #bbb;
}

 .contain-to-grid  {
	background: #f3f3f3;
	background: -moz-linear-gradient(top,  #f3f3f3 0%, #f9f9f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(100%,#f9f9f9));
	background: -webkit-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: -o-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: -ms-linear-gradient(top,  #f3f3f3 0%,#f9f9f9 100%);
	background: linear-gradient(to bottom,  #f3f3f3 0%,#f9f9f9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f9f9f9',GradientType=0 );
	border-top: 1px solid #f2f2f2;
	border-bottom: 1px solid #ddd;
}
   
  .top-bar {
    background: transparent; }

    .top-bar.expanded {
      background: transparent; }
 .top-bar-section li a:not(.button)  {
      background: transparent; }
  .top-bar-section li a:not(.button):hover {
        background: rgba(0,0,0,.1); }
 .top-bar-section .dropdown li a {
        background: rgba(0,0,0,.05); }
      .top-bar-section .dropdown li label {
        background: rgba(0,0,0,.05); }
    .top-bar-section .has-form {
      background: transparent;}
       .top-bar-section > ul > .divider {
      border-right: solid 1px #e0e0e0;
      border-left: solid 1px #fff; }


header hr {
	border-color: #eee;
}


/* body spacer 
	first child elements in .entry-content gets a little margin-left
	Default
*/

	/* level one */
	article header > p,
	article header > time,
	article footer,
	.entry-content > p,
	.entry-content > pre,
	#commentform,
	.yarpp-related,
	.sharedaddy,
	[id^="contact-form-"] {
		margin-left: 2%;
		-ms-word-wrap: break-word;
		word-wrap: break-word;
	}
	/* level two */
	.entry-content > ul,
	.entry-content > ol,
	.entry-content > dl, 
	#comments > ol {
		margin-left: 6%;
	}

	/* level three */
	.entry-content > blockquote, 
	.entry-content > address {
		margin-left: 10%;
		-ms-word-wrap: break-word;
		word-wrap: break-word;
	}

/* media queries, larger than 1000px more white space! */
@media only screen and (min-width: 1000px)  {
	/* level one */
	article header > p,
	article header > time,
	article footer,
	.entry-content > p,
	.entry-content > pre,
	#commentform,
	.yarpp-related,
	.sharedaddy,
	[id^="contact-form-"] {
		margin-left: 15%;
	}
	/* level two */
	.entry-content > ul,
	.entry-content > ol,
	.entry-content > dl, 
	#comments > ol {
		margin-left: 20%;
	}
	/* level three */
	.entry-content > blockquote, 
	.entry-content > address {
		margin-left: 25%;
	}
}

/* Body unorderd list to have document icons. */ 
/* http://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon */
.entry-content > ul li {
  padding-left: 1.2em;
  list-style: none;
}
.entry-content > ul li:before {
	color: #bbb;
	content: "\f15c";
	font-family: FontAwesome;
	display: inline-block;
	margin-left: -1.2em; /*same as padding-left set on li*/
	width: 1.2em; /*same as padding-left set on li*/
}

.entry-content > ul ul li:before {
	content: "\f016";
}

.entry-content > ul ul ul li:before {
	content: "\f15b";
}


/* pagination */

.pagination-centered > ul {
	margin: 1em auto;
}
.page-numbers li {
	float: none;
	display: inline-block;
}


ul.find-me li {
	float: none;
	display: inline-block;
}
ul.find-me li:first-child {
	margin-left:0;
}
/* specify icon here */
.entry-content > ul.arrow li:before {
	content: "\f061";
}

/* for side bar and footer widget */
.widget div > ul, .widget > ul {
  list-style: none;
}
.widget div > ul li:before, .widget > ul li:before {
	color: #999;
	content: "\f0da";
	font-family: FontAwesome;
	display: inline-block;
	margin-left: -.8em;	
	width: .8em;
}

/* spacing in the side bar */
#sidebar .row {
	margin-bottom: 2em;
}

/* side bar */
.textwidget {
	line-height: 1.6;
}

.widget h6, .widget h6 a {
	/* title */
	color: #000;
}

#wp-calendar {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	border-color: #eee;
}
#wp-calendar tr td {
		padding: 0.3625em 0.325em; /* 0.5625em 0.625em */
	}



#sidebar .panel #calendar_wrap {
	margin-left: 0;
}
/* calendar move right */
@media only screen and (min-width: 1024px) and (max-width: 1249px) {
	#sidebar .panel #calendar_wrap {
		margin-left: -0.9375em; 
	}
}


#tumblr-badge {
	font-size: 0.875em;
}

/* Footer */

.site-footer {
	background-color: #e6e6e6;
	margin: 1.5em 0 0;
	padding-bottom:3em;
}
.site-footer p, 
.site-footer ul  {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;	
	font-size: 0.875em; /* 14px */
	color: #999;
	margin-bottom:2.1em;
}
.site-footer > a {
	font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;	
	font-size: .688em; /* 11px */
	color: #ccc;	
}
	
/* table - chart */	
	
	table.chart {
    	margin-bottom: 2em;
    	border-top: 1px solid #ccc;
    	border-left: 1px solid #ccc;
    	border-collapse: collapse;
    	font-size: 100%;
    	font-family: sans-serif
    	}

    table.chart th  {
    	background: #eee;
    	}

    table.chart th.caption  {
    	background: #ddd;
    	}

    table.chart th, table.chart td {
    	padding: 5px;
    	border-right: 1px solid #ccc;
    	border-bottom: 1px solid #ccc;
    	font-size: 80%;
    	font-family: sans-serif
    	}

    table.chart td {
    	vertical-align: top;
    	}	
    	
	p.caption, p.photocaption, tfoot td {
		margin-top: 0;
		font-size:80%;
		color: #888;
		}

	p.caption {
		margin-top:-22px;padding-top:0; margin-left:0;
	}


/* plugin stuff */

.sharedaddy {
	margin-top: 1.5em;
	margin-bottom: 2em;
}
.sd-content ul {
	float: right;
}

ul.scrd_digest {
	font-size: 1em !important;
}

a.pdf {
	background:url("/img/pdf.gif") no-repeat right top;
	padding-right:20px;
	margin-right: 4px;
}
a.doc {
	background:url("/img/doc.gif") no-repeat right top;
	padding-right:20px;
	margin-right: 4px;
}
a.external {
	background:url("/img/othersite.gif") no-repeat right top;
	padding-right:19px;
	margin-right: 4px;

}



/* Tumblr Badge js style http://code.google.com/p/tumblrbadge/ */
.tumblr-badge ul {
	margin-left: 0px;
}

.tumblr {
        list-style: none;
        padding: 0;
}
.tumblr li {
        list-style: none;
        margin: .25em 0 1em 0;
        padding-right: .25em;
        width: 121px;
        height: 200px;
        overflow:hidden;
        float:left;
}
.tumblr p {
        margin: 0;
}
.tumblr img {
        display: block;
}
.tumblr em {
        display: block;
        margin-top: 0.2em;
        line-height: 1.2;
}
.tumblr .tumblr-post-date{
        display: block;
        font-size: 0.8em;
}
.tumblr  a {
	 	color:#999;
		 text-decoration:none;
 }
 .tumblr  a:hover {
	 	color:#000;
		 text-decoration: underline;
 }
.more-tumblr {
		margin-bottom: 2em;
		font-weight: bold;
}

/* http://webdesignerwall.com/tutorials/css-elastic-videos 
wrap the video with div class="video" */
.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}