/***** HOME PAGE *****/

body {
	background: #262626;
}

.posts-grid {
	max-width: 900px;
}

.mdl-card h2 {
	margin-bottom: 5px;
}

.mdl-card h2 a, .post-title h1 {
	font-weight: 100;
}

.mdl-card h2 a:hover {
	text-decoration: none;
}


.posts-grid .mdl-card {
	min-height: 360px;
	color: white;
	margin-bottom: 30px;
}

.posts-grid .mdl-card a {
	color: white;
}

.posts-grid .mdl-card__media {
  box-sizing: border-box;
  background-size: cover;
  padding: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  cursor: pointer;	
	position: relative; /* Needed to make the text above the texture-overlay */
}

.mdl-card__media-text {  /* Needed to make the text above the texture-overlay */
	position: relative;
}

.texture-overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-image: url(/assets/global/grid.png);	
	background-color: rgba(0,0,0,0.6);
}

.mdl-card__media {
	background-color: #2b2b2b;
}



/***** END OF HOME PAGE *****/



/***** POST PAGE *****/

.post-ribbon {
	width: 100%;
  height: 40vh;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
	background-position: 50% 50%;
}

.post-ribbon .texture-overlay {
	position: relative;
}


.post-container {
  max-width: 900px;
  width: calc(100% - 16px);
  margin: 0 auto 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;	
	position: relative;	
}

.post-content {
  border-radius: 2px;
  padding: 32px 56px;
	margin: 8px auto 60px;
}

.post-content .post-title {
	margin-bottom: 50px;
}

#disqus_thread {
  border-top: rgba(0,39,59,.08) 2px solid;
}


.end-of-post {
	width: 100px;
	margin: 40px auto;
	text-align: center;
}


/***** END OF POST PAGE *****/


/***** GLOBAL *****/

body {
	font-family: "Roboto","Helvetica","Arial",sans-serif;
}

.canvas-background {
	position: fixed;
	opacity: 0;
}

.mdl-layout__content .mdl-mini-footer {
	padding: 10px 16px;
	text-align: center;
}

.mdl-mini-footer .mdl-mini-footer__link-list {
	margin: auto;
}

.mdl-layout__content { /* Making header scrollable on small screens, from http://stackoverflow.com/questions/31304232/how-can-i-make-header-scrollable-for-smaller-screens-in-mdl */
	flex-shrink: 0;
}

.tsuzuku {
	width: 100%;
	height: 75px;
	background: black url('/assets/global/tsuzuku.png') no-repeat 95% 50%;
}

blockquote:before, blockquote:after { /* Remove the "" from the blockquote */
	display: none;
}

.mdl-layout__header {
	margin: 26px 0 10px;
}

header .mdl-layout-title {
	color: white;
	font-weight: 300;
}

header .mdl-layout-title:hover {
	color: white;
	text-decoration: none;
}

.mdl-layout__header-single-item {
	text-align: center;
	margin: auto;
	padding: 0;
}

.mdl-layout__header-single-item .mdl-layout-title {
	font-size: 40px;
}


/* WARNINGS */

.mdl-card-alert p, .mdl-card-success p, .mdl-card-warning p, .mdl-card-error p {
	margin-bottom: 0;
	color: rgba(0,0,0,.54);	
}

.mdl-card-alert, .mdl-card-success, .mdl-card-warning, .mdl-card-error {
	padding: 16px;
}

.mdl-grid .mdl-card-alert {
	min-height: inherit;
	background-color: #64B5F6;
	text-align: center;
}

.mdl-card-success {
	min-height: inherit;
}

.mdl-card-warning {
	min-height: inherit;	
}

.mdl-card-error {
	min-height: inherit;	
}



/***** END OF GLOBAL *****/
