/* 	Cool Social Share Button with Share Count Script for PHP
		The fastest share buttons with share count
		Created By Jeff Baker on December 16, 2016
		Copyright (C) 2016 Jeff Baker
		www.seabreezecomputers.com/social/
		Version 1.0 - 12/16/2016
	*/


.cool_social_div { /* All the social buttons will be in this div */
	font-family: arial;
	display: inline-block;
	/* max-width: 6em; */ /* uncomment max-width: 6em for vertical buttons */
}
.vertical_buttons .cool_social_button { /* For vertical buttons add .vertical_buttons to cool_social_div */
	/* max-width: 6em; */ /* This will do vertical buttons by setting max-width to width of buttons */
	display: block;	/* Or this will do vertical buttons by setting display to block instead of inline-block */
}
.cool_social_button { /* This will be the style of each social button */
	border: 1px solid black; 
	cursor: pointer; 
	display: inline-block; 
	width: 5em; 
	text-align: center;
	position: relative;
	margin: 5px 2px;
}
.cool_social_button a { /* Make sure the anchor tags inherit the font color of each button */
	text-decoration: none;	
	color: inherit;
	width: 100%;
	display: block;
}
.cool_social_count { /* If you want to style the count (likes) display for a button */
	/* display: block; */
}
.bubble_top { /* Add .bubble_top to each cool_social_button to have the count on top in a bubble */
	margin-top: 1.7em;	
}
.bubble_top .cool_social_count {
	color: black;
	font-family: arial;
	background-color: white;
	border: 1px solid black;
	position: absolute;
	z-index: 1;
	top: -1.6em;
	width: 3em;
	left: 50%;
	margin-left: -1.5em; /* Use half of width to center */
}
.bubble_top .cool_social_count::before {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.bubble_top .cool_social_count::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}
.bubble_right { /* Add .bubble_right to each cool_social_button to have the count to right in a bubble */
	margin-right: 4em;
}
.bubble_right .cool_social_count {
    color: black;
	font-family: arial;
	background-color: white;
	border: 1px solid black;
	position: absolute;
	z-index: 1;
	width: 3em;
	left: 108%;
	top: -1px;
}
.bubble_right .cool_social_count::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.bubble_right .cool_social_count::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}
.cool_social_google { /* Colors for google share button */
	background: #ffffff;
	color: #000000;
}
.cool_social_google:hover { /* Hover colors for google share button */
	background: #eeeeee;
}
.cool_social_g { /* Colors for "G+" in Google+ button */
	color: #DB4437
}
.cool_social_twitter { /* Colors for twitter share button */
	background: #1B95E0;
	color: white;	
}
.cool_social_twitter:hover { /* Hover colors for twitter share button */
	background: #0C7ABF;
}
.cool_social_facebook { /* Colors for facebook share button */
	background: #405BA8;
	color: white;
}
.cool_social_facebook:hover { /* Hover colors for facebook share button */
	background: #4E6CBD;
}
.cool_social_f { /* Colors for "f" in facebook button */
	background-color: white;
	color: #405BA8;
	padding: 0px 0px 0px 10px;
    margin: 5px;
}
.cool_social_linkedin { /* Colors for LinkedIn share button */
	background-color: #0077B5;
	color: white;	
}
.cool_social_linkedin:hover { /* Hover colors for LinkedIn share button */
	background-color: #0369A0;
}
.cool_social_in { /* Style for "in" in LinkedIn share button */
	text-shadow: 0 -1px 4px rgb(255, 255, 255);
	border-right: 1px solid black;
	padding-right: 5px;
}
.cool_social_pinterest { /* Style for pinterest share button */
	background: white;
	color: #BD081C;
	font-family: Georgia, serif;
	letter-spacing: -2px;
}
.cool_social_pinterest:hover { /* Hover style for pinterest share button */
	background: #eeeeee;
}
</style>