/************************************
SHORTCODES PLUGIN STYLE.CSS									 

GENERAL MOSAIC
SHORTCODE: MESSAGE
SHORTCODE: ACCORDION / TOGGLE
SHORTCODE: QUOTE SLIDER
SHORTCODE: BLOCKQUOTE
SHORTCODE: GRAPHS

*************************************/

/************************************************************************
GENERAL MOSAIC
************************************************************************/

.mosaic-block {
	position:relative;
	overflow:hidden;
	background:#ffffff url(http://cafenola.at/wp-content/plugins/scoop-shortcodes-plugin/css/img/progress.gif) no-repeat center center;
}

.mosaic-backdrop {
	display:none;
	height:100%;
	width:100%;
}

.mosaic-overlay {
	display:none;
	z-index:5;
	position:absolute;
	width:100%;
	height:100%;
}

.mosaic-backdrop img {
	width: 100%;	
}

.fade .mosaic-overlay {
	background:url(http://cafenola.at/wp-content/plugins/scoop-shortcodes-plugin/css/img/hover-magnify.png) no-repeat center center;
	background-color: rgba(0, 0, 0, .3);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
	filter:alpha(opacity=00);
	opacity:0;
}

.fade .mosaic-overlay.hover-link {
	background:url(http://cafenola.at/wp-content/plugins/scoop-shortcodes-plugin/css/img/hover-link.png) no-repeat center center;
	background-color: rgba(0, 0, 0, .3);
}

.fade .mosaic-overlay.hover-play {
	background:url(http://cafenola.at/wp-content/plugins/scoop-shortcodes-plugin/css/img/hover-play.png) no-repeat center center;
	background-color: rgba(0, 0, 0, .3);
}




/************************************************************************
SHORTCODE: MESSAGE
************************************************************************/

.message {
	padding: 1em;
	margin: .5em 0;	
}

.message.notice { background: #fffcce; }
.message.success { background: #e2f5e4; }
.message.info { background: #d2e4f1; }
.message.error { background: #ffd4ce; }


/************************************************************************
SHORTCODE: ACCORDION / TOGGLE
************************************************************************/

.sc_accordion, .sc_toggle {
	list-style: none;
}

.sc_accordion li, .sc_toggle li {
	border-bottom: 1px solid #eeeded;
	padding: 10px 0;
}

.sc_accordion li:first-child, .sc_toggle li:first-child {
	padding-top: 0;
}

.sc_accordion-btn, .sc_toggle-btn {
	font-size: 1.2em;
	font-weight: 800;
	color: #666666;
}

.sc_accordion-btn:before, .sc_toggle-btn:before {
	content: "+";
	display: inline-block;
	width: 1.1em;
}

.sc_accordion-btn.active:before, .sc_toggle-btn.active:before {
	content: "-";	
}


/* FOOTER / DARK BACKGROUND */

footer .sc_accordion-btn, footer .sc_toggle-btn {
	color: #f9f9f9;
}


/************************************************************************
SHORTCODE: QUOTE SLIDER
************************************************************************/

.flexslider.sc_quote_slider {
	margin-bottom: 0;	
}

.sc_quote_slider blockquote {
	padding: .5em 0;
	border: 0;
	text-align: center;
	font-size: 2em;	
	font-weight: 100;
}

.sc_quote_slider cite {
	display: block;
	text-align: center;
	font-size: 0.7em;
	margin-top: .5em;
}


/************************************************************************
SHORTCODE: BLOCKQUOTE
************************************************************************/

.sc_blockquote.left {
	margin-right: 1em;	
}

.sc_blockquote.right {
	float: right;
	margin-left: 1em;	
}

/************************************************************************
SHORTCODE: GRAPHS
************************************************************************/

.sc_graphs {
	list-style: none;
	color: #f9f9f9;
	font-weight: 700;
}

.sc_graphs li {
	margin-bottom: 10px;
	background-color: #eeeded;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.sc_graphs li span {
	float: right;	
}

.sc_graphs li div {
	padding: .5em;	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

.per-10{ width: 10%; }
.per-20{ width: 20%; }
.per-30{ width: 30%; }
.per-40{ width: 40%; }
.per-50{ width: 50%; }
.per-60{ width: 60%; }
.per-70{ width: 70%; } 
.per-80{ width: 80%; }
.per-90{ width: 90%; }
.per-100{ width: 100%; }