.maris_share {
	margin-top: 1px;
	float: right;
	}

.maris_share > ul > li {
	background-color: #0a67a3;
	color: #fff;
	width: 36px;
	height: 24px;
	}

.maris_share > ul > li:hover	{ opacity: 0.7; }

.maris_share > ul > li > a 		{ text-indent: -9999px; }

.socialshare_button,
.maris_share span.socialshare_label:before {
	content: "";
	background-image: url(/grfx/socialmedia-icons.png);
	background-repeat: no-repeat;
	background-size: 36px 500px;
	width: 36px;
	height: 24px;
	float: left;
	display: inline-block;
	}

.socialshare_button {
	text-indent: -9999px;
	float: none;
	cursor: pointer;
	}

.socialshare > li {
	display: inline-block;
	margin-right: 5px;
	list-style: none;
    }

.socialshare .social_service {
	display: inline-block;
	text-decoration: none;
	/*padding: 1px 8px 1px 6px;*/
	box-sizing: border-box;
    }

.social_service {
	-moz-transition: background .3s linear;
	-webkit-transition: background .3s linear;
	-o-transition: background .3s linear;
	transition: background .3s linear;
	}


.social_service_linkedin span.socialshare_label:before		{ background-position: 0px -250px; }
.social_service_googleplus  span.socialshare_label:before	{ background-position: 0px -300px; }
.social_service_facebook  span.socialshare_label:before		{ background-position: 0px 0px; }
.social_service_twitter span.socialshare_label:before		{ background-position: 0px -50px; }
.social_service_email span.socialshare_label:before			{ background-position: 0px -100px; }
.social_service_print span.socialshare_label:before			{ background-position: 0px -150px; }
.social_service_citeulike  span.socialshare_label:before	{ background-position: 0px -400px; }
.social_service_mendeley  span.socialshare_label:before		{ background-position: 0px -350px; }


/** Button version **/
#content .socialshare_panel ul	{ margin-left: 0px; margin-bottom: 0px; }
#content .socialshare_panel li	{ margin-right: 0px; }

.maris_share > ul > li.socialshare_button:hover,
.maris_share > ul > li.socialshare_button.hover	{
	opacity: 1;
	}

.socialshare_panel {
	position: absolute;
	display: none;  /* uitzetten voor debug van panels*/
	margin: 0px;
	padding: 0px;
	background: #fff;
	width: 180px;
    }

.socialshare_panel > ul > li span.socialshare_label:before {
	background-color: #0a67a3;
	margin-right: 6px;
	}

.socialshare_button {
	position: relative;
	background-position: 0px -200px;
    }

.socialshare_button:hover .socialshare_panel,
.socialshare_button.hover .socialshare_panel {
	text-indent: 0px;
	display: block;
    }

.socialshare_panel li,
.socialshare_panel .social_service {
	display: block;
    }


/** Panel position left **/
.socialshare_button.left:before {
    content:'';
    width: 3px;
    height: 100%;
    display:block;
    position: absolute;
    left: -3px;
	}

.left .socialshare_panel {
    right: 100%;
    margin-right: 3px;
    margin-bottom:3px;
    top:0;
	}


/** Panel position right **/
.socialshare_button.right:before {
    content:'';
    width: 3px;
    height: 100%;
    display:block;
    position: absolute;
    right: -3px;
	}

.right .socialshare_panel {
    left: 100%;
    margin-left: 3px;
    margin-bottom:3px;
    top:0;
	}


/** Panel position top **/
.socialshare_button.top:before {
    content:'';
    width: 100%;
    height: 3px;
    display:block;
    position: absolute;
    top: -3px;
    left: 0px;
	}

.top .socialshare_panel {
    left: 0;
    bottom: 100%;
    margin-bottom:3px;
	}


/** Panel position bottom **/
.socialshare_button.bottom:after {
    content:'';
    width: 100%;
    height: 10px;
    display:block;
    position: absolute;
    bottom:-3px;
    left: 0px;
	}

.bottom .socialshare_panel {
    left: 0;
    top: 100%;
    margin-top:3px;
	}


/* --------------------------------------- */
/* mediaqueries css */
/* --------------------------------------- */

/* notebooks, tablets */
@media only screen and (max-width: 1024px) {

	.maris_share				{ float: none; }

}

/* ==> breakpoint notebooks, tablets */
@media only screen and (max-width: 800px) {

	.maris_share				{ float: right; }

}

/* ==> breakpoint notebooks, tablets */
@media only screen and (max-width: 800px) and (orientation : portrait) {

	.socialshare_panel li {
		margin-bottom: 10px;
		}

	.bottom .socialshare_panel {
		left: auto;
	    right: 0;
		top: 100%;
		}

}

/* ==> breakpoint tablets */
@media only screen and (max-width: 768px) {

	.maris_share				{ float: none; }

}