@import "//fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i";
/*@import "//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";*/
@import "icofont/css/fontello.css";
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	overflow-x: hidden;

	background-color: white;
}

body {
	font-family: 'Roboto', sans-serif;
	background-color: skyblue;
}

a:focus,
input:focus,
textarea:focus,
button:focus,
details > summary:focus {
  outline: none;
}

main {
	position: relative;
	z-index: 1;
}
article {
	padding: 20px;
	text-align: center;
}

article[centered] {
	color: white;
	text-align: center;
	background-color: #333;
	background-image: url("../assets/shattered.png");

	font-size: 1.5em;
    font-weight: 300;
}



[tag] {
	width: auto;
	max-width: 90%;
	border-radius: 100%;
	padding: 5px;
	background-color: white;
	border: 1px solid gray;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
}

article[cardsList] {
	columns: 3;
	column-gap: 65px; /* do not forget to add the shadow! 2*25 + 15 */
	/*margin-right: 50px; do not use!*/
	padding-right: 70px; /* 50 + 20 */
}

@media (max-width: 950px) {
	article[cardsList] {
		columns: 2;

	}
}

@media (max-width: 575px) {
	article[cardsList] {
		columns: 1;
		padding-left: 10px;
		padding-right: 60px;
	}
}

[card],
[card="blue"] {
	position: relative;
	border: 1px solid rgba(0,0,0, .2);
	padding: 5px 20px 20px 60px;
	background-color: silver;
	margin-left: 20px;
	background-color: #0046c7;
	background-image: url("../layout/quotes.png"), url("../assets/shattered.png");
	background-position: top right, top left;
	background-repeat: no-repeat, repeat;
	color: white;
	box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.5);
	margin: 25px;
	display: inline-block;
	text-align: left;
	width: 100%;
}

[card="pink"] {
	background-color: deeppink;
}
[card="red"] {
	background-color: #ff2a2a; /*palevioletred;*/
}
[card="lightgreen"] {
	background-color: #0cf80c;
}
[card="green"] {
	background-color: lightgreen;
}
[card="lightblue"] {
	background-color: lightblue;
}
[card="orange"] {
	background-color: orange;
}

[card] [head] {
	position: absolute;
	left: -22px;
	top: -22px;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	background: white;
	border: 2px solid white;
}

[card] div[head] {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 90px;

    background-color: #333;
    background-image: url(../assets/shattered.png);
    background-size: cover
}

[card] header {

	font-weight: 300;

	font-size: 1.5em;

	margin-bottom: 10px;

	text-overflow: ellipsis;
	overflow: hidden;
}

[card] div {
	overflow: hidden;
}

[card] span[datum] {

	position: absolute;

	right: 10px;

	bottom: 4px;

	font-size: 0.75em;
}

article[new] {
    max-width: 31.5%;
    min-width: 300px;
}

article[new] [card] {

}

article[new] img {
	z-index: 2;
	transition: all 200ms;
}

article[new] img:hover {
	transform: scale(1.2);
	cursor: pointer;
}

article[new] input, 
article[new] textarea {
	width: 100%;
	background: rgba(0,0,0, .7); 
	border: rgba(255,255,255, .2);
	border-radius: 3px;

	display: block;

	color: white;

	padding: 8px 10px;
}

article[new] input {
	font-size: inherit;
	font-weight: inherit;
}

article[new] button {
	border: 0;
	border-radius: 5px;
	display: block;
	width: 100%;
	margin-top: 10px;
	background-color: rgba(255,255,255, .8);

	padding: 8px 10px;

	color: black;

	transition: all 200ms;
}
article[new] button:hover {
	opacity: .8;
}

article[new] button:active {
	opacity: .6;
}

article[new] button:disabled {
	opacity: .3;
}

article[new] input[type="file"] {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}

summary {
	border: 0;
	border-radius: 5px;
	display: block;
	margin-top: 10px;
	background-color: blue;

	padding: 8px 10px;

	color: white;

	cursor: pointer;
	margin-left: 35px;
	opacity: .4;

	transition: all 200ms;
}
summary:hover {
	opacity: .8;
}

summary:active {
	opacity: .6;
}

summary:disabled {
	opacity: .3;
}

details[open] summary {
	display: none;
}



footer {
	padding: 10px;
	text-align: right;
	font-size: small;
	font-weight: 300;
	color: #333;
}

footer a {
	color: inherit;
}

nav {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	background: rgba(0,0,0, .3);
	opacity: 0;
}

nav:hover,
html[admin-microcomment-loggedin] nav {
	opacity: 1;
}

nav button {
	padding: 30px;
	font-size: 2em;
	border: 0;
	border-radius: 0;
	background: 0;
	color: rgba(255,255,255, .7);
}
/*
@media (max-width: 400px) {
	nav {
		position: static;
	}
}*/


[card] admin-ca {
	background: 0;
	font-size: 1em;

	position: absolute;
	top: -1.5em;
	right: 0;
}

[card] admin-ca button {
	border: 0;
	border-radius: 100%;
	background: 0;
	color: rgba(255,255,255, .7);
	font-size: 1.2em;
}


button:hover {
	opacity: .8;
}

button:active {
	opacity: 1;
}

button:disabled {
	opacity: .3;
}

[commentsblock="approved"] [emptyCommentMsg] {
	display: none;
}

[commentsToApprove] {
	background-color: #11548a;
	background-image: url("../assets/shattered.png");

	width: 100%;
	margin-top: 50px;
}
[commentsToApprove] > header {
	color: white;
	font-weight: 300;

	padding-top: 20px;

	border-bottom: 2px solid rgba(255,255,255, .7);
	font-size: 1.5em;
	padding-left: 30px;
}


[card]:not([uid]) [remove] {
	display: none;
}