/*
##########################################################################

© JuTho-Agentur, www.jutho.com
Version 3, 28.04.2016

~~~~~~~~~~~~~~~~~~
Einbindung
~~~~~~~~~~~~~~~~~~
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jutho_fbprivacy.js"></script>
<link href="jutho_fbprivacy.css" rel="stylesheet">

~~~~~~~~~~~~~~~~~~
Definition
~~~~~~~~~~~~~~~~~~
Sowohl der Facebook-Like-Button als auch das Facebook-Page-Plugin
werden über ein div mit der Klasse jutho_fbprivacy eingebunden:
<div class="jutho_fbprivacy" data-lbl-clickable="true" data-class="fb-page" data-href="https://www.facebook.com/jutho.agentur"></div>

Das div kann bzw. sollte dabei mit verschiedenen data-Attributen 
versehen werden:

data-lbl-off				=> [Text]									: Text des Labels, wenn deaktiviert (Standard: "Facebook - deaktiviert") 
data-lbl-on					=> [Text]									: Text des Labels, wenn aktiviert (Standard: "Facebook - aktiviert") 
data-lbl-clickable			=> true,false								: Legt fest, ob über Klick auf das Label das Plugin aktiviert kann.
data-helper-id				=> [ID eines bestehenden Elementes]			: Wird zunächst ausgeblendet und als Hilfe/Tooltipp beim Überfahren des Labels angezeigt.
data-class					=> fb-like,fb-page							: Unterscheidung zwischen Like-Button und Page-Plugin
data-href					=> [URL]									: href des Like-Buttons bzw. URL zur Facebook-Page
data-width					=> [Zahl]									: Breite des Plugins (Standard: Breite des Elternelements
data-layout					=> standard,box_count,button_count,button	: Layout des Like-Buttons (Standard: standard) [Nur bei fb-like]
data-action					=> like,recommend							: Aktion des Like-Buttons (Standard: like) [Nur bei fb-like]
data-show-faces				=> true,false								: Gesichter von Freunden anzeigen (Standard: true) [Nur bei fb-like]
data-share					=> true,false								: Button "Teilen" hinzufügen (Standard: false) [Nur bei fb-like]
data-tabs					=> timeline,events							: Angezeigte Tabs bei Page-Plugin (Standard: timeline) [Nur bei fb-page]
data-height					=> [Zahl] 									: Mindesthöhe des Plugins (Standard): Höhe des Elternelements [Nur bei fb-page]
data-small-header			=> true,false								: Kleinen Header verwenden (Standard: true) [Nur bei fb-page]
data-adapt-container-width	=> true,false								: An Plugin-Container-Breite anpassen (Standard: true) [Nur bei fb-page]
data-hide-cover				=> true,false								: Titelbild verbergen (Standard: false) [Nur bei fb-page]
data-show-facepile			=> true,false								: Gesichter der Freunde anzeigen (Standard: true) [Nur bei fb-page]

##########################################################################
*/
.jutho_onoffswitch {
	display:inline-block;
	background-color:lightgray;
	width:2.5rem;
	height:0.5rem;
	border-radius:0.25rem;
	transform:translate(0px, 6px);
	margin-right:0.5rem;
	-webkit-box-shadow: inset 0px 0px 2px 0px rgba(59,59,59,1);
	-moz-box-shadow: inset 0px 0px 2px 0px rgba(59,59,59,1);
	box-shadow: inset 0px 0px 2px 0px rgba(59,59,59,1);
}

.jutho_onoffswitch.off .bull, .jutho_onoffswitch .bull {
	background-color:red;
	display:inline-block;
	width:1rem;
	height:1rem;
	border-radius:0.5rem;
    position: relative;
	left: -5px;
    top: -4px;
	transition: all 0.25s ease-in;
	cursor:pointer;
	-webkit-box-shadow: 0px 0px 2px 1px rgba(59,59,59,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(59,59,59,1);
	box-shadow: 0px 0px 2px 1px rgba(59,59,59,1);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c12626+35,6b0000+100 */
	background: #c12626; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #c12626 35%, #6b0000 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  #c12626 35%,#6b0000 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  #c12626 35%,#6b0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c12626', endColorstr='#6b0000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.jutho_onoffswitch.on .bull {
	background-color:green;
	left:1.6rem;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#27c449+35,016800+100 */
	background: #27c449; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #27c449 35%, #016800 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  #27c449 35%,#016800 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  #27c449 35%,#016800 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27c449', endColorstr='#016800',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.jutho_onoffswitch_label {
	display:inline-block;
	border: 2px solid #0055cc;
    border-radius: 5px;
    box-sizing: border-box;
    color: #0055cc;
    font-family: Calibri;
    font-weight: bold;
    padding: 3px;
}

.jutho_fb_live {
	margin:1rem 0 1rem 0.5rem;
}

/*
##########################################################################
########## Versionshistorie:
##########################################################################

+ Version 1: Grundfunktionen entwickelt
+ Version 2: Änderungen im JavaScript
+ Version 3: Fehlerkorrektur beim Deaktivieren des Plugins
*/