/*
Style Map
1 - Shortcode & Content Mode Styling
2 - Overlay Styling
	- Left Overlay 
	- Right Overlay
	- Overlay Bubble
3 - Widget Styling
*/

/* Short Code & Content Mode Styling */
/*
The container class that we use for shortcode and before/after content views.. 
*/
.xbsp_container {
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none !important;
}

.xbsp_container li {
	float:left;
	margin:2px !important;
	list-style: none !important;
	padding:0 !important;
	height: auto !important; 
}

/* i used a grayscale effect for on hover.. you can use anything you like... */
.xbsp_container li img:hover{
	
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
}

/* Bubbles are anoying sometimes if the theme have stupid important definitions... maybe you can need a small touch depending on plugin.. */
.bubble 
{
	position: relative;
	background: #FFFFFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: #BEBEBE solid 1px;
	padding:0 3px 0 3px;
	color: #000;
}

/* Arrow for the bubble */
.bubble:after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 5px 4px 5px 0;
	border-color: transparent #FFFFFF;
	display: block;
	width: 0;
	z-index: 1;
	left: -4px;
	top: 5px;
}

/* bor a 1px(ish) border for bubble arrow (z-index cheat..) */ 
.bubble:before 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 5px 4px 5px 0;
	border-color: transparent #BEBEBE;
	display: block;
	width: 0;
	z-index: 0;
	left: -5px;
	top: 5px;
}
/* css above this line was for shortcode and the_content....*/



/* Overlay Styling */
/* Left Overlay */
#xbooster_overlay_profile_left{
	width: 100px !important;
	position: fixed;
	top: 100px;
	left: 50px;
	text-decoration: none;
	color: #000000;
	background-color: rgba(235, 235, 235, 0.80);
	font-size: 12px;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;		
	border:1px solid #eee;
	z-index: 999999;
}

#xbooster_overlay_profile_left .xbooster_overlay_profile_left_title{

	color:#f00;
	text-align: center;
	background-color: #fff;
	width: 100%;
	font-size: 9px;
	margin:0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: #7F7F7F solid 1px;
}

#xbooster_overlay_profile_left ul {
	width: 100px;
	list-style-type: none !important;
	margin:0 !important;
	padding:0 !important;
}

#xbooster_overlay_profile_left ul li {
	width: 90px;
	padding:5px;
	margin:0 !important;
	text-align:center;
	list-style: none;
}

#xbooster_overlay_profile_left ul li a {

	width: 100%;
	text-align: center;

}

#xbooster_overlay_profile_left ul li img{

	width:48px;
	margin-left:auto;
	margin-right:auto;

}

#xbooster_overlay_profile_left ul li img:hover{

	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);

}


/* Right Overlay */ 


#xbooster_overlay_profile_right{
	width: 100px !important;
	position: fixed;
	top: 100px;
	right: 50px;
	text-decoration: none;
	color: #000000;
	background-color: rgba(235, 235, 235, 0.80);
	font-size: 12px;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;		
	border:1px solid #eee;
	z-index: 999999;
}

#xbooster_overlay_profile_right .xbooster_overlay_profile_right_title{

	color:#f00;
	text-align: center;
	background-color: #fff;
	width: 100%;
	font-size: 9px;
	margin:0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: #7F7F7F solid 1px;
}

#xbooster_overlay_profile_right ul {
	width: 100px;
	list-style-type: none !important;
	margin:0 !important;
	padding:0 !important;
}

#xbooster_overlay_profile_right ul li {
	width: 90px;
	padding:5px;
	margin:0 !important;
	text-align:center;
	list-style: none !important;
}

#xbooster_overlay_profile_right ul li a {

	width: 100%;
	text-align: center;

}

#xbooster_overlay_profile_right ul li img{

	width:48px;
	margin-left:auto;
	margin-right:auto;

}

#xbooster_overlay_profile_right ul li img:hover{

	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);

}


/* Overlay Counter Bubbles */


#xbooster_overlay_profile_bubble 
{
	position: relative;
	width: 100%;
	height: 40px;
	padding: 0;
	background: #FFFFFF;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: #7F7F7F solid 1px;

}

/* if you want an arrow on counter bubble enable these lines of code*/
/*
#xbooster_overlay_profile_bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 10px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 32px;
}

#xbooster_overlay_profile_bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 10px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
top: -11px;
left: 32px;
}
*/

#xbooster_overlay_profile_count{

	font-size:18px !important;
	text-align: center !important;
	line-height: 32px !important;
	width: 100% !important;
	padding: 0;
	margin:0;

}

/* Share Overlay */
/* Left Overlay */
#xbooster_overlay_share_left{
	width: 100px !important;
	position: fixed;
	top: 100px;
	left: 50px;
	text-decoration: none;
	color: #000000;
	background-color: rgba(235, 235, 235, 0.80);
	font-size: 12px;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;		
	border:1px solid #eee;
	z-index: 999999;
}

#xbooster_overlay_share_left .xbooster_overlay_share_left_title{

	color:#f00;
	text-align: center;
	background-color: #fff;
	width: 100%;
	font-size: 9px;
	margin:0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: #7F7F7F solid 1px;

}

#xbooster_overlay_share_left ul {
	width: 100px;
	list-style-type: none !important;
	margin:0 !important;
	padding:0 !important;
}

#xbooster_overlay_share_left ul li {
	width: 90px;
	padding:5px;
	margin:0 !important;
	text-align:center;
	list-style: none;
}

#xbooster_overlay_share_left ul li a {

	width: 100%;
	text-align: center;

}

#xbooster_overlay_share_left ul li img{

	width:48px;
	margin-left:auto;
	margin-right:auto;

}

#xbooster_overlay_share_left ul li img:hover{

	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);

}


/* Right Overlay */ 


#xbooster_overlay_share_right{
	width: 100px !important;
	position: fixed;
	top: 100px;
	right: 50px;
	text-decoration: none;
	color: #000000;
	background-color: rgba(235, 235, 235, 0.80);
	font-size: 12px;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;		
	border:1px solid #eee;
	z-index: 999999;
}

#xbooster_overlay_share_right .xbooster_overlay_share_right_title{

	color:#f00;
	text-align: center;
	background-color: #fff;
	width: 100%;
	font-size: 9px;
	margin:0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: #7F7F7F solid 1px;

}

#xbooster_overlay_share_right ul {
	width: 100px;
	list-style-type: none !important;
	margin:0 !important;
	padding:0 !important;
}

#xbooster_overlay_share_right ul li {
	width: 90px;
	padding:5px;
	margin:0 !important;
	text-align:center;
	list-style: none ;
}

#xbooster_overlay_share_right ul li a {

	width: 100%;
	text-align: center;

}

#xbooster_overlay_share_right ul li img{

	width:48px;
	margin-left:auto;
	margin-right:auto;

}
#xbooster_overlay_share_right ul li img:hover{

	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);

}


/* Overlay Counter Bubbles */


#xbooster_overlay_share_bubble 
{
	position: relative;
	width: 100%;
	height: 40px;
	padding: 0;
	background: #FFFFFF;
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;
	border: #7F7F7F solid 1px !important;

}

/* if you want an arrow on counter bubble enable these lines of code*/
/*
#xbooster_overlay_share_bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 10px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 32px;
}

#xbooster_overlay_share_bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 10px;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
top: -11px;
left: 32px;
}
*/

#xbooster_overlay_share_count{

	font-size:18px !important;
	text-align: center !important;
	line-height: 32px !important;
	width: 100% !important;
	padding: 0;
	margin:0;

}


/* Widget Styling */


.widget .xbsp_widget_container {
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none !important;
}



.widget .xbsp_widget_container li {
	float:left !important;
	margin:2px !important;
	list-style: none !important;
	background:transparent;
	border:none;
	width: auto;
	padding:0 !important;


}

.xbsp_widget_container li img:hover{

	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);

}

.xbsp_widget_container .bubble 
{
	position: relative;
	background: #FFFFFF;
	-webkit-border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	border-radius: 3px !important;
	border: #BEBEBE solid 1px !important;
	padding:0 3px 0 3px !important;

}

.xbsp_widget_container .bubble:after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 5px 4px 5px 0 !important;
	border-color: transparent #FFFFFF;
	display: block;
	width: 0;
	z-index: 1;
	left: -4px !important;
	top: 5px !important;
}

.xbsp_widget_container .bubble:before 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 5px 4px 5px 0 !important;
	border-color: transparent #BEBEBE;
	display: block;
	width: 0;
	z-index: 0;
	left: -5px !important;
	top: 5px !important;
}