@charset "utf-8";

div.vote .img-wrap {
	position:relative;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}

.vote .img-wrap > img {
	opacity:0;
	width:100%;
	height:auto;
}

.vote-option-img {
	position:relative;
}

/*
.vote-option-img > .img-wrap {
	background-size:cover;
	overflow:hidden;
}
.vote-option-img > .img-wrap:before {
	content:'';
	display:block;
	padding-top:61.8034%;
}
.vote-option-img > .img-wrap > img {
	position:absolute;
	top:0;left:0;
	opacity:0;
	width:100%;
	min-height:100%;
	height:auto;
}
*/

.vote-option-img > cite.img-via {
	position:absolute;
	right:.625em; /* .5em / 80% */
	bottom:.625em;
	background:rgba(0, 0, 0, .5);
	font-size:80%;
	padding:2px 5px;
	
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	
	max-width:calc(100% - 1.25em);
}
.vote-option-img > cite.img-via > * {
	color:white !important;
	opacity:.8;
}


/********* options *********/

.vote-options {
	list-style:none;
	margin:.5em 0;
	padding:0;
}

.vote-option {
	line-height:1.2;
	margin:0; padding:0;
	display:block;
	position:relative;
}

.vote-option-img,
.vote-option-title > div,
.vote-option-description > p {
	margin:0;
	font-size:100%;
}
.vote-option-title + .vote-option-description {
	padding-top:0;
	flex-grow:1;
}

div.vote.voting .vote-option {
	opacity:.5;
}

.vote-option-img {
	display:flex;
	flex-direction:column;
}

.vote-option-img > .img-wrap {
	flex:1 0 auto;
	background-size:cover;
}


.vote-options:not(.options-type-link) .vote-option-embed,
.vote-options:not(.options-type-link) .vote-option-link,
.vote-options:not(.options-type-link) .vote-option-description,
.vote-options.options-type-link .vote-option.init .vote-option-title,
.vote-options.options-type-link .vote-option.init .vote-option-description,
.vote-options.options-type-link .vote-option.init .vote-option-embed,
.vote-options.options-type-link .vote-option.init .vote-option-img,
.vote-options.options-type-link .vote-option .vote-option-img .img-via,
.vote-options.options-type-text .vote-option-img {
	display:none;
}

/*
.vote-options .vote-option .vote-option-img,
.vote-options .vote-option .vote-option-title,
.vote-options .vote-option .vote-option-description {
	display:none;
}

.vote-options.options-type-text .vote-option .vote-option-title,
.vote-options.options-type-photo .vote-option .vote-option-img,
.vote-options.options-type-photo .vote-option .vote-option-title {
	display:block;
}
*/


.vote-option {
	margin-bottom:.5em;
}

.vote-option-text {
	padding:.5em;
}

.vote-option-img {
	padding:.5em;
}

.vote-option-title {
	display:flex;
}

.vote-option-title,
.vote-option-description,
.vote-option-link {
	padding:0;
}

.vote-option-description,
.vote-option-link,
.vote-option-result {
	margin-top:.5em;
}

.vote-option-title + .vote-option-description {
	
}

.vote-option-title > div { font-weight:bold; }



/* type photo */


/* type link */

@media (min-width:767px) {

	.vote-options.options-type-link .vote-option-container {
		display:flex;
		flex-direction:row;
	}
	.vote-options.options-type-link .vote-option-img {
		flex:0 0 33.3333%;
	}
	.vote-options.options-type-link .vote-option-text {
		flex:0 0 100%;
		
		display:flex;
		flex-direction: column;
		
		padding:.5em;
	}
	
	.vote-options.options-type-link .vote-option-img + .vote-option-text {
		flex-basis:66.6666%;
	}

}

.vote-result[data-content-cached-at-relative-unit]::before {
	display:block;
	text-align:right;
	opacity:.5;
	font-size:80%;
	padding:.25em .5em;
	content:
		'Results created on '
		attr(data-content-cached-at-relative-num)
		' ' attr(data-content-cached-at-relative-unit) 's'
		' ago';
	font-style:italic;
}
.vote-result[data-content-cached-at-relative-unit][data-content-cached-at-num="1"]::before {
	content:
		'Results created on '
		attr(data-content-cached-at-relative-num)
		' ' attr(data-content-cached-at-relative-unit)
		' ago';
}

.vote-result .vote-options.options-type-link .vote-option-description,
.vote-subject .vote-options.options-type-link .vote-option-description {
	font-size:80%;
}


.vote-subject .vote-options.options-type-link .vote-option-description {
	padding-left:1.5625em; /* 1.25 / 80% */
}
.vote-subject .vote-options.options-type-link .vote-option-link {
	padding-left:1.25em;
}

.vote-option .vote-option-link {
	text-align:right;
}



/***** multi column options *****/

/* for desktop only */
@media (min-width:767px) {
	
	/* columns */
	
	.vote-subject .vote-options.options-cols-2,
	.vote-subject .vote-options.options-cols-3 {
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
		justify-content:space-between;
	}
	
	.vote-subject .vote-options.options-cols-2 > * {
		flex: 0 0 auto;
		width:49%;
		width:calc(50% - .2em);
	}
	
	.vote-subject .vote-options.options-cols-3 > *,
	.vote-subject .vote-options.options-cols-3:after {
		flex: 0 0 auto;
		width:32%;
		width:calc(33.3333% - .25em);
	}
	
	/* spacer */
	.vote-subject .vote-options.options-cols-3:after {
		content:"";
	}
	
	.vote-subject .vote-options.options-cols-2 .vote-option,
	.vote-subject .vote-options.options-cols-3 .vote-option {
		margin-top:0;
	}
	
	
	/* option contents */
	
	.vote-subject .vote-options.options-text-small .vote-option-text {
		font-size:80%;
	}
	
	.vote-subject .vote-options:not(.options-type-text).options-cols-2 .vote-option,
	.vote-subject .vote-options:not(.options-type-text).options-cols-3 .vote-option {
		display:flex;
	}
		
	.vote-subject .vote-options:not(.options-type-text).options-cols-2 .vote-option-container,
	.vote-subject .vote-options:not(.options-type-text).options-cols-3 .vote-option-container {
		width:100%;
		display:flex;
		flex-direction:column;
	}
	
	.vote-subject .vote-options:not(.options-type-text).options-cols-3 .vote-option-container:after,
	.vote-subject .vote-options:not(.options-type-text).options-cols-2 .vote-option-container:after {
		content:'';
		display:flex;
		flex-grow:1;
	}
	
	.vote-subject .vote-options:not(.options-type-text).options-cols-3 .vote-option-text,
	.vote-subject .vote-options:not(.options-type-text).options-cols-2 .vote-option-text {
		flex-grow:0;
		display:flex;
	}
	
	.vote-subject .vote-options.options-type-photo .vote-option-text {
		align-items:flex-end;
	}
	.vote-subject .vote-options.options-type-photo .vote-option-title {
		flex:0 0 100%;
	}
	
	.vote-subject .vote-options:not(.options-type-text).options-cols-3 .vote-option-description,
	.vote-subject .vote-options:not(.options-type-text).options-cols-2 .vote-option-description {
		flex-grow:1;
	}
	.vote-subject .vote-options:not(.options-type-text).options-cols-3 .vote-option-text,
	.vote-subject .vote-options:not(.options-type-text).options-cols-2 .vote-option-text {
		padding-top:0;
	}
	
	
}

.vote-subject .vote-options.options-type-embed:not(.options-cols-2):not(.options-cols-3) .vote-option-img,
.vote-result .vote-options.options-type-embed .vote-option-img {
	flex-basis:50%;
}

.vote-subject .vote-options.options-type-embed:not(.options-cols-2):not(.options-cols-3) .vote-option-img + .vote-option-text,
.vote-result .vote-options.options-type-embed .vote-option-img + .vote-option-text {
	flex-basis:50%;
}

@media (min-width:767px) {
	.vote-subject .vote-options.options-type-link:not(.options-cols-2):not(.options-cols-3) .vote-option-img + .vote-option-text,
	.vote-result .vote-options:not(.options-type-text) .vote-option-img + .vote-option-text {
		padding-left:0;
	}
}


.vote-subject .vote-options.options-type-link.options-cols-2 .vote-option-img,
.vote-subject .vote-options.options-type-link.options-cols-3 .vote-option-img,
.vote-subject .vote-options.options-type-link.options-cols-2 .vote-option-text,
.vote-subject .vote-options.options-type-link.options-cols-3 .vote-option-text {
	flex:none;
}


/************* voted mark ********************/

.vote-subject .vote-option-title > div {
	display:inline-block;
	width:90%;
	width:calc(100% - 1.25em);
	position:relative;
}

.vote-subject .vote-option-title:before {
	font-family:FontAwesome;
	content:"\f096"; /* fa-check-square-o */
}

.vote-subject .vote-option-title:before {
	display:inline-block;
	position:relative;
	width:1em;
	margin-right:.25em;
	vertical-align:top;
}

div.vote:not(.voted):not(.voting):not(.is-closed) .vote-subject .vote-option:hover .vote-option-title:before,
.vote-subject  .vote-option.voting .vote-option-title:before,
.vote-subject  .vote-option.voted .vote-option-title:before {
	content:"\f046"; /* fa-check-square-o */
}

/*********** options **********/

.vote-options .vote-option {
	/* margin-top:.5em; */
	margin-bottom:.5em;
	border-style: solid;
	border-width:1px;
}

.vote-options .vote-option-title > div {
}

.vote-result .vote-options .vote-option-title > div {
	font-weight:bold;
}

div.vote:not(.voted):not(.voting):not(.is-closed) .vote-subject .vote-options .vote-option:hover,
.vote-subject .vote-options .vote-option.voting,
.vote-subject .vote-options .vote-option.voted {
	/* border-color:black; */
	
	/* background: #dcbd23; /* hsl(49, 72, 50); dino yellow */
	background: hsla(49, 72%, 50%, .5);
	background:rgba(220, 189, 35, .2);
}

.vote-subject .vote-options.options-type-photo .vote-option-text {
}

.vote-result .vote-option-img {
	position:relative;
}

@media (max-width:767px) {
	.vote-result .vote-option-img .img-wrap:before {
		padding-top:100%;
	}
}

.vote-result .vote-option-img .img-via,
.vote-result .vote-option-img .img-via > a
 {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	opacity:0;
	padding:0;
	max-width:none;
}

/********** option img size **************/

.vote-options.options-imgcut-none .vote-option-img .img-wrap {
	background-size:cover;
}
.vote-options.options-imgcut-contain .vote-option-img .img-wrap {
	background-size:contain;
}
.vote-options.options-imgcut-cover .vote-option-img .img-wrap {
	background-size:cover;
}

.vote-options.options-imgcut-none .vote-option-img .img-wrap img {
	position:relative;
	width:100%;
	height:auto;
	display:block;
}

.vote-options:not(.options-imgcut-none) .vote-option-img .img-wrap {}
.vote-options:not(.options-imgcut-none) .vote-option-img .img-wrap:before {
	content:'';
	display:block;
	padding-top:100%;
}
.vote-options:not(.options-imgcut-none) .vote-option-img .img-wrap img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.vote-options.options-imgsize-square .vote-option-img .img-wrap:before {
	padding-top:100%;
}
.vote-options.options-imgsize-landscape .vote-option-img .img-wrap:before {
	/* padding-top:61.8%; */
	padding-top:56.25%; /* 16:9 */
}
.vote-options.options-imgsize-portrait .vote-option-img .img-wrap:before {
	/* padding-top:161.8%; */
	padding-top:177.777778%;
}

.vote-options.options-type-link .vote-option-img .img-wrap {
	background-position: center top;
}

.vote-options.options-type-link .vote-option-img {
	display:block;
}

/*
.vote-options:not(.optinos-imgsize-native) .vote-option-embed iframe[src*='soundcloud.com/player/'] {
	height:100%;
	min-height:5em;
}
*/



/********** result **************/
div.vote.voted .vote-subject .vote-options.options-type-text .vote-option:not(.voted) {
	display:none;
}

div.vote:not(.voted) .vote-result,
div.vote.voted .vote-subject .vote-options {
	display:none;
}

.vote-result-text > p {
	margin:0;
	padding:.5em 0;
}


.vote-result .vote-options.options-type-text .vote-option-container {
	position:relative;
}
.vote-result .vote-options.options-type-text .vote-option-text {
	position:relative;
	z-index:2;
}

.vote-option-result {
	position:relative;
}
.vote-option-img + .vote-option-text > .vote-option-result {
	margin-left:0;
}

.vote-result .vote-option-img {
	width:25%;
}

.vote-result .vote-options.options-type-link .vote-option-container,
.vote-result .vote-options.options-type-photo .vote-option-container {
	display:flex;
	flex-direction:row;
}
.vote-result .vote-options.options-type-link .vote-option-container > .vote-option-img,
.vote-result .vote-options.options-type-photo .vote-option-container > .vote-option-img {
	flex:0 0 25%;
	width:25%;
}
.vote-result .vote-options.options-type-link .vote-option-container > .vote-option-text,
.vote-result .vote-options.options-type-photo .vote-option-container > .vote-option-text {
	flex:0 0 75%;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	width:75%;
}

/* result percent, count */

.vote-result .vote-options .vote-option-result-percent,
.vote-result .vote-options .vote-option-result-count {
	display:inline;
	position:relative;
	line-height:1.1;
	margin-right:.25em;
}

.vote-result .vote-options .vote-option-result-percent-num:after {
	content: '%';
}
.vote-result .vote-options .vote-option-result-count-num:before {
	content: '(';
}
.vote-result .vote-options .vote-option-result-count-num:after {
	content: ')';
}

.vote-option-result-bar {
	display:block;
	flex:none;
	position:absolute;
	left:0;
	bottom:0;
	height:100%;
	/* width:attr(data-percent %); spacified on html */
	border-color: hsla(197, 95%, 82%, 1);
	border-style: solid;
	background:hsla(197, 95%, 82%, .75);
}

.vote-result .vote-option.voted {
	border:2px solid black;
}

/***** quiz correct or wrong *****/

/* quiz answer marker */

div.vote.quiz.voted .vote-option-result {
	margin-right:2em;
}

div.vote.quiz.voted .vote-result .vote-option-result:after {
	font-family:FontAwesome;
	font-size:2em;
	line-height:1;
	content:' ';
	
	position:absolute;
	left:100%;
	top:-40%;
	width:1em;
	text-align:right;
}

div.vote.quiz.voted .vote-result .vote-option[data-answer] .vote-option-result:after {
	content:'\f10c'; /* circle-o */
	color:limegreen;
}
div.vote.quiz.voted .vote-result .vote-option.voted:not([data-answer]) .vote-option-result:after {
	content:'\f00d'; /* times */
	color:#ff8034;
}

/*
div.vote.voted .vote-result .options-type-link > .vote-option {
	cursor:pointer;
}
*/

/******* results per option ***********/
div.vote .sub-article { display:none; }
div.vote.voted .vote-result .sub-article { display:block; }

div.vote .vote-result .vote-result-block.sub-article {
	margin-top:1em;
	padding:0;
}

/******* need login **********/
body.snsuser-logined .vote-need-login {
	display:none !important;
}
.vote-need-login {
	cursor:pointer;
	padding:.5em 1em;
	font-size:75%;
	font-style:italic;
	background:#eee;
	color:#888;
	margin-top:.5em;
}
.vote-need-login > span:empty:before {
	content:"Login Required";
}
.vote-need-login:before {
	font-family:FontAwesome;
	content:"\f011"; /* fa-power-off */
	font-style:normal;
	font-weight:normal;
	margin-right:.25em;
}

.vote.is-closed .vote-need-login {
	display:none!important;
}

/**** result options ******/
div.vote.voted.resultopts-noaggregate .vote-result .vote-options .vote-option-result > *,
div.vote.voted.resultopts-none        .vote-result .vote-options {
	display:none;
}

div.vote.voted.resultopts-noaggregate .vote-result .vote-options .vote-option-result {
	margin-top:0;
}
div.vote.voted.resultopts-noaggregate .vote-result .vote-options .vote-option-result:after {
	top:auto;
	bottom:-.2em;
	background:rgba(255,255,255,.8);
}
div.vote.quiz.voted.resultopts-noaggregate .vote-result .vote-option[data-answer] .vote-option-link,
div.vote.quiz.voted.resultopts-noaggregate .vote-result .vote-option.voted .vote-option-link {
	margin-right:2.5em;
}

/**** comment ****/
div.vote:not(.voted) .vote-result-comment,
.vote-result-comment.sent-comment .vote-result-comment-send,
.vote-result-comment:not(.sent-comment) .vote-result-comment-sent {
	display:none;
}

.vote-result-comment-send,
.vote-result-comment-sent {
	background:#f8f8f8;
	position:relative;
	padding:1em;
	margin:1em;
}
.vote-result-comment-send > div {
	position:relative;
}
.vote-result-comment-send > div:first-child > textarea {
	display:block;
	width:100%;
	min-height:4em;
}

div.vote.is-closed .vote-result-comment-sent div:last-child {
	margin-top:1em;
}

/***** closed *********/
div.vote .vote-subject-closed {
	display:block;
	background: #f8f8f8;
	margin:1em 2em;
	padding:1em;
}

div.vote:not(.is-closed) .vote-subject-closed {
	display:none;
}

div.vote.is-closed .vote-result-comment-send,
div.vote.is-closed .vote-result-comment-sent div:last-child > button {
	opacity:.5;
	cursor:not-allowed;
}

/********/
div.vote.vote-checking .vote-options,
div.vote.voting .vote-options {
	opacity:.5;
	cursor:wait !important;
}

div.vote.is-closed .vote-option {
	cursor:default !important;
}