cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <head>
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
	</head>
	<body>
		<div id="et_social_wrapper" class="et_social">
			<div id="et_social_header">
				<div id="et_social_logo" class="et_social_icon_monarch et_social_icon"></div>
				<ul>
					<li><a href="#" id="et_social_tab_content_stats" class="et_social_icon_stats et_social_icon"><span></span></a></li>
					<li><a href="#" id="et_social_tab_content_importexport" class="et_social_icon_importexport et_social_icon"><span></span></a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
			<div id="et_social_navigation">
				<ul>
					<li><a href="#" class="et_social_icon_networks et_social_icon"><span>Social Sharing</span></a>
						<ul class="et_social_sharing_nav current_section">
							<li><a href="#" id="et_social_tab_content_locations" class="et_social_icon_locations et_social_icon current"><span>Locations</span></a></li>
							<li><a href="#" id="et_social_tab_content_networks_share" class="et_social_icon_networks et_social_icon"><span>Networks</span></a></li>
							<li><a href="#" id="et_social_tab_content_sidebar" class="et_social_icon_sidebar et_social_icon"><span>Sidebar</span></a></li>
							<li><a href="#" id="et_social_tab_content_inline" class="et_social_icon_inline et_social_icon"><span>Inline</span></a></li>
							<li><a href="#" id="et_social_tab_content_popup" class="et_social_icon_popup et_social_icon"><span>Pop Up</span></a></li>
							<li><a href="#" id="et_social_tab_content_flyin" class="et_social_icon_flyin et_social_icon"><span>Fly In</span></a></li>
							<li><a href="#" id="et_social_tab_content_media" class="et_social_icon_image et_social_icon"><span>On Media</span></a></li>
						</ul>
					</li>
					<li><a href="#" class="et_social_icon_follow et_social_icon"><span>Social Follow</span></a>
						<ul class="et_social_follow_nav">
							<li><a href="#" id="et_social_tab_content_networks_follow" class="et_social_icon_networks et_social_icon"><span>Networks</span></a></li>
							<li><a href="#" id="et_social_tab_content_widget" class="et_social_icon_widget et_social_icon"><span>Widget</span></a></li>
							<li><a href="#" id="et_social_tab_content_shortcode" class="et_social_icon_shortcode et_social_icon"><span>Shortcode</span></a></li>
						</ul>
					</li>
				</ul>
			</div>

			<div id="et_social_content">
				<form>

					<div class="et_social_tab_content et_social_tab_content_locations et_tab_selected">
						<div class="et_social_row">
							<h1>Manage Locations</h1>
							<p>You can select any combination of the four placements below.</p>
						</div>
						<div class="et_social_row et_social_selection">
							<div class="et_social_location et_social_multi_selectable  et_social_icon"><div class="et_social_location_tile"><h1>Sidebar</h1><div class="et_social_location_content"></div><div class="et_social_location_icons et_social_location_icons_sidebar"></div></div><input class="et_social_toggle" type="hidden" id="et_check_location_sidebar" name="location_sidebar" value="off"></div>
							<div class="et_social_location et_social_multi_selectable  et_social_icon"><div class="et_social_location_tile"><h1>Inline</h1><div class="et_social_location_content et_social_location_content_inline"></div><div class="et_social_location_icons et_social_location_icons_inline"></div></div><input class="et_social_toggle" type="hidden" id="et_check_location_inline" name="location_inline" value="off"></div>
							<div class="et_social_location et_social_multi_selectable  et_social_icon"><div class="et_social_location_tile"><h1>Pop Up</h1><div class="et_social_location_content"><div class="et_social_location_icons et_social_location_icons_popup"></div></div></div><input class="et_social_toggle" type="hidden" id="et_check_location_popup" name="location_popup" value="off"></div>
							<div class="et_social_location et_social_multi_selectable  et_social_icon"><div class="et_social_location_tile"><h1>Fly In</h1><div class="et_social_location_content"></div><div class="et_social_location_icons et_social_location_icons_flyin"></div></div><input class="et_social_toggle" type="hidden" id="et_check_location_flyin" name="location_flyin" value="off"></div>
							<div class="et_social_location et_social_multi_selectable  et_social_icon"><div class="et_social_location_tile"><h1>Media</h1><div class="et_social_location_content et_social_location_content_media"><div class="et_social_location_icons et_social_location_icons_media"></div><i class="et_social_icon_image et_social_icon"></i></div></div><input type="hidden" class="et_social_toggle" id="et_check_location_media" name="location_media" value="off"></div>
						</div>
						<div class="et_social_row">
							<h2>Note: <span><p>Selected locations will use the display settings defined from the menu on the left.</p></span></h2>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_networks_share">
						 <div class="et_social_row">
							<h1>Manage Networks</h1>
							<p>Add and rearrange any combination of social networks below.</br> You can define the Network Label and Username to the right of each.</p>
						</div>
						<div class="et_social_networks et_social_row et_social_sortable">
							<button class="et_social_icon et_social_addnetwork">Add Network</button>
							<div class="et_social_network et_social_icon"><span class="et_social_facebook"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Facebook" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_twitter"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Twitter" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_googleplus"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Google+" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_buffer"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Buffer" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_netvibes"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Netvibes" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_rss"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="RSS" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
						</div>
						<div class="et_social_row">
							<h2>Note: <span><p>Selected networks apply to all selected locations in 'Locations' Settings.</p></span></h2>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_sidebar">
						<div class="et_social_row">
							<h1>Configure Sidebar Share Icons</h1>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Style</h2>
							<div class="et_social_sidebar_style et_social_sidebar_style et_social_sidebar_flip et_social_icon et_social_single_selectable">
								<ul>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_inline_style_1" value="on">
							</div>
							<div class="et_social_sidebar_style et_social_sidebar_border et_social_icon et_social_single_selectable">
								<ul>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_inline_style_2" value="off">
							</div>
							<div class="et_social_sidebar_style et_social_sidebar_grow et_social_icon et_social_single_selectable">
								<ul>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_inline_style_3" value="off">
							</div>
							<div class="et_social_sidebar_style et_social_sidebar_slide et_social_icon et_social_single_selectable">
								<ul>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_inline_style_4" value="off">
							</div>
							<div class="et_social_sidebar_style et_social_sidebar_simple et_social_icon et_social_single_selectable">
								<ul>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
									<li class="et_social_sidebar_style_tile et_social_icon"></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_inline_style_5" value="off">
							</div>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Shape</h2>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rectangle"></div><input type="hidden" class="et_social_toggle" name="et_social_inline_shape_square" value="on"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rounded"></div><input type="hidden" class="et_social_toggle" name="et_social_inline_shape_rounded" value="off"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_circle"></div><input type="hidden" class="et_social_toggle" name="et_social_inline_shape_circle" value="off"></div>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Display Settings</h2>
							<ul>
								<!-- <li class="select"><p>Choose Location</p>
									<select>
										<option value="left" selected>Left</option>
										<option value="right">Right</option>
									</select>
								</li> -->
								<li class="select"><p>Intro Animation</p>
									<select>
										<option value="fadein">Fade In</option>
										<option value="slideright" selected>Slide Right</option>
										<option value="slideup">Slide Up</option>
										<option value="slidedown">Slide Down</option>
									</select>
								</li>
								<li class="et_social_checkbox clearfix"><p>Display Share Counts</p><input type="checkbox" id="checkbox_sharecounts_sidebar" name="sharecounts"><label for="checkbox_sharecounts_sidebar"></label></li>
								<li class="input clearfix"><p>Minimum Count Display</p><input placeholder="0" type="text" name="mincount"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Display Total Shares</p><input type="checkbox" id="checkbox_totalshares_sidebar" name="totalshares"><label for="checkbox_totalshares_sidebar"></label></li>
								<li class="et_social_checkbox clearfix"><p>Add Icon Spacing</p><input type="checkbox" id="checkbox_spaced_sidebar" name="spacedicons"><label for="checkbox_spaced_sidebar"></label></li>
								<li class="et_social_checkbox clearfix"><p>Hide On Mobile Devices</p><input type="checkbox" id="checkbox_mobile_sidebar" name="mobileshare"><label for="checkbox_mobile_sidebar"></label></li>
								<div style="clear:both;"></div>
							</ul>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Color Settings</h2>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Post Type Settings<span><p>Select the post types to display sidebar share icons</p></span></h2>
							<ul class="inline">
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_posts_sidebar" name="sharecounts"><label for="checkbox_posts_sidebar"></label><p>Posts</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_pages_sidebar" name="totalshares"><label for="checkbox_pages_sidebar"></label><p>Pages</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_projects_sidebar" name="networknames"><label for="checkbox_projects_sidebar"></label><p>Projects</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_products_sidebar" name="stickysharebar"><label for="checkbox_products_sidebar"></label><p>Products</p></li>
								<div style="clear:both;"></div>
							</ul>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_inline">
						<div class="et_social_row et_social_selection">
							<h1>Configure Inline Share Icons</h1>
						</div>
						<div class="et_social_row">
							<h2>Choose Icon Style</h2>
							<div class="et_social_style et_social_flip et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_sidebar_style_1" value="on">
							</div>
							<div class="et_social_style et_social_darken et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_sidebar_style_2" value="off">
							</div>
							<div class="et_social_style et_social_slide et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_sidebar_style_3" value="off">
							</div>
							<div class="et_social_style et_social_simple et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_sidebar_style_4" value="off">
							</div>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Shape</h2>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rectangle"></div><input type="hidden" class="et_social_toggle" name="et_social_sidebar_shape_square" value="on"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rounded"></div><input type="hidden" class="et_social_toggle" name="et_social_sidebar_shape_rounded" value="off"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_circle"></div><input type="hidden" class="et_social_toggle" name="et_social_sidebar_shape_circle" value="off"></div>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Custom Title / Message</h2>
							<textarea placeholder="Insert Text" rows="2"></textarea>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Display Settings</h2>
							<ul>
								<li class="select"><p>Choose Location</p>
									<select>
										<option value="abovecontent" selected>Above Content</option>
										<option value="belowcontent">Below Content</option>
										<option value="abovebelowcontent">Above + Below</option>
									</select>
								</li>
								<li class="select"><p>Icon Alignment</p>
									<select>
										<option value="left" selected>Left</option>
										<option value="centered">Centered</option>
										<option value="right">Right</option>
									</select>
								</li>
								<li class="select"><p>Number of Columns</p>
									<select>
										<option value="autowidth" selected>Auto Width</option>
										<option value="1col">1</option>
										<option value="2col">2</option>
										<option value="3col">3</option>
										<option value="4col">4</option>
										<option value="5col">5</option>
										<option value="6col">6</option>
									</select>
								</li>
								<li class="select"><p>Intro Animation</p>
									<select>
										<option value="fadein" selected>Fade In</option>
										<option value="slideright">Slide Right</option>
										<option value="slideup">Slide Up</option>
										<option value="slidedown">Slide Down</option>
									</select>
								</li>
								<li class="et_social_checkbox clearfix"><p>Display Share Counts</p><input type="checkbox" id="checkbox_sharecounts_inline" name="sharecounts"><label for="checkbox_sharecounts_inline"></label></li>
								<li class="input clearfix"><p>Minimum Count Display</p><input placeholder="0" type="text" name="mincount"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Display Total Shares</p><input type="checkbox" id="checkbox_totalshares_inline" name="totalshares"><label for="checkbox_totalshares_inline"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display Network Names</p><input type="checkbox" id="checkbox_networknames_inline" name="networknames"><label for="checkbox_networknames_inline"></label></li>
								<li class="et_social_checkbox clearfix"><p>Add Icon Spacing</p><input type="checkbox" id="checkbox_spaced_inline" name="spacedicons" checked><label for="checkbox_spaced_inline"></label></li>
								<!-- <li class="et_social_checkbox clearfix"><p>Enable Sticky Share Bar</p><input type="checkbox" id="checkbox_stickybar_inline" name="networknames"><label for="checkbox_stickybar_inline"></label></li> -->
								<li class="et_social_checkbox clearfix"><p>Display On Mobile</p><input type="checkbox" id="checkbox_mobile_inline" name="mobileshare" checked><label for="checkbox_mobile_inline"></label></li>
							</ul>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Color Settings</h2>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Post Type Settings<span><p>Select the post types to display sidebar share icons</p></span></h2>
							<ul class="inline">
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_posts_inline" name="sharecounts"><label for="checkbox_posts_inline"></label><p>Posts</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_pages_inline" name="totalshares"><label for="checkbox_pages_inline"></label><p>Pages</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_projects_inline" name="networknames"><label for="checkbox_projects_inline"></label><p>Projects</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_products_inline" name="stickysharebar"><label for="checkbox_products_inline"></label><p>Products</p></li>
								<div style="clear:both;"></div>
							</ul>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_popup">
						<div class="et_social_row">
							<h1>Configure Social Sharing Pop Up/h1>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Style</h2>
							<div class="et_social_style et_social_flip et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_popup_style_1" value="on">
							</div>
							<div class="et_social_style et_social_darken et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_popup_style_2" value="off">
							</div>
							<div class="et_social_style et_social_slide et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_popup_style_3" value="off">
							</div>
							<div class="et_social_style et_social_simple et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_popup_style_4" value="off">
							</div>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Shape</h2>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rectangle"></div><input type="hidden" class="et_social_toggle" name="et_social_popup_shape_square" value="on"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rounded"></div><input type="hidden" class="et_social_toggle" name="et_social_popup_shape_rounded" value="off"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_circle"></div><input type="hidden" class="et_social_toggle" name="et_social_popup_shape_circle" value="off"></div>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Title</h2>
							<textarea placeholder="Share This" rows="1"></textarea>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Message</h2>
							<textarea placeholder="Insert Text" rows="2"></textarea>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Display Settings</h2>
							<ul>
								<li class="select"><p>Text Alignment</p>
									<select>
										<option value="left" selected>Left</option>
										<option value="centered">Centered</option>
										<option value="right">Right</option>
									</select>
								</li>
								<li class="select"><p>Number of Columns</p>
									<select>
										<option value="autowidth" selected>Auto Width</option>
										<option value="1col">1</option>
										<option value="2col">2</option>
										<option value="3col">3</option>
										<option value="4col">4</option>
										<option value="5col">5</option>
										<option value="6col">6</option>
									</select>
								</li>
								<li class="select"><p>Intro Animation</p>
									<select>
										<option value="fadein" selected>Fade In</option>
										<option value="slideright">Slide Right</option>
										<option value="slideup">Slide Up</option>
										<option value="slidedown">Slide Down</option>
									</select>
								</li>
								<li class="et_social_checkbox clearfix"><p>Enable Automatic Pop Up</p><input type="checkbox" id="checkbox_auto_popup" name="autopopup"><label for="checkbox_auto_popup"></label></li>
								<li class="input clearfix"><p>Pop Up Delay ( in seconds)</p><input placeholder="10" type="text" name="delay"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Trigger on Page Leave</p><input type="checkbox" id="checkbox_leavetrigger_popup" name="leavetrigger"><label for="checkbox_leavetrigger_popup"></label></li>
								<li class="et_social_checkbox clearfix"><p>Trigger at Bottom of Post</p><input type="checkbox" id="checkbox_bottomtrigger_popup" name="bottomtrigger"><label for="checkbox_bottomtrigger_popup"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display Share Counts</p><input type="checkbox" id="checkbox_sharecounts_popup" name="sharecounts"><label for="checkbox_sharecounts_popup"></label></li>
								<li class="input clearfix"><p>Minimum Count Display</p><input placeholder="0" type="text" name="mincount"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Display Total Shares</p><input type="checkbox" id="checkbox_totalshares_popup" name="totalshares"><label for="checkbox_totalshares_popup"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display Network Names</p><input type="checkbox" id="checkbox_networknames_popup" name="networknames"><label for="checkbox_networknames_popup"></label></li>
								<li class="et_social_checkbox clearfix"><p>Add Icon Spacing</p><input type="checkbox" id="checkbox_spaced_popup" name="spacedicons" checked><label for="checkbox_spaced_popup"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display On Mobile</p><input type="checkbox" id="checkbox_mobile_popup" name="mobileshare" checked><label for="checkbox_mobile_popup"></label></li>
							</ul>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Color Settings</h2>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Post Type Settings<span><p>Select the post types to display sidebar share icons</p></span></h2>
							<ul class="inline">
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_posts_popup" name="sharecounts"><label for="checkbox_posts_popup"></label><p>Posts</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_pages_popup" name="totalshares"><label for="checkbox_pages_popup"></label><p>Pages</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_projects_popup" name="networknames"><label for="checkbox_projects_popup"></label><p>Projects</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_products_popup" name="stickysharebar"><label for="checkbox_products_popup"></label><p>Products</p></li>
								<div style="clear:both;"></div>
							</ul>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_flyin">
						<div class="et_social_row">
							<h1>Configure Social Sharing Flyin/h1>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Style</h2>
							<div class="et_social_style et_social_flip et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_flyin_style_1" value="on">
							</div>
							<div class="et_social_style et_social_darken et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_flyin_style_2" value="off">
							</div>
							<div class="et_social_style et_social_slide et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_flyin_style_3" value="off">
							</div>
							<div class="et_social_style et_social_simple et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_flyin_style_4" value="off">
							</div>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Shape</h2>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rectangle"></div><input type="hidden" class="et_social_toggle" name="et_social_flyin_shape_square" value="on"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rounded"></div><input type="hidden" class="et_social_toggle" name="et_social_flyin_shape_rounded" value="off"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_circle"></div><input type="hidden" class="et_social_toggle" name="et_social_flyin_shape_circle" value="off"></div>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Title</h2>
							<textarea placeholder="Share This" rows="1"></textarea>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Message</h2>
							<textarea placeholder="Insert Text" rows="2"></textarea>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Display Settings</h2>
							<ul>
								<li class="select"><p>Choose Location</p>
									<select>
										<option value="bottomright" selected>Bottom Right</option>
										<option value="bottomleft">Bottom Left</option>
									</select>
								</li>
								<li class="select"><p>Text Alignment</p>
									<select>
										<option value="left" selected>Left</option>
										<option value="centered">Centered</option>
										<option value="right">Right</option>
									</select>
								</li>
								<li class="select"><p>Number of Columns</p>
									<select>
										<option value="autowidth">Auto Width</option>
										<option value="1col">1</option>
										<option value="2col" selected>2</option>
										<option value="3col">3</option>
									</select>
								</li>
								<li class="select"><p>Intro Animation</p>
									<select>
										<option value="fadein">Fade In</option>
										<option value="slideright">Slide Right</option>
										<option value="slideup" selected>Slide Up</option>
										<option value="slidedown">Slide Down</option>
									</select>
								</li>
								<li class="et_social_checkbox clearfix"><p>Enable Automatic Pop Up</p><input type="checkbox" id="checkbox_auto_flyin" name="autoflyin"><label for="checkbox_auto_flyin"></label></li>
								<li class="input clearfix"><p>Fly In Delay ( in seconds)</p><input placeholder="10" type="text" name="delay"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Trigger on Page Leave</p><input type="checkbox" id="checkbox_leavetrigger_flyin" name="leavetrigger"><label for="checkbox_leavetrigger_flyin"></label></li>
								<li class="et_social_checkbox clearfix"><p>Trigger at Bottom of Post</p><input type="checkbox" id="checkbox_bottomtrigger_flyin" name="bottomtrigger"><label for="checkbox_bottomtrigger_flyin"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display Share Counts</p><input type="checkbox" id="checkbox_sharecounts_flyin" name="sharecounts"><label for="checkbox_sharecounts_flyin"></label></li>
								<li class="input clearfix"><p>Minimum Count Display</p><input placeholder="0" type="text" name="mincount"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Display Total Shares</p><input type="checkbox" id="checkbox_totalshares_flyin" name="totalshares"><label for="checkbox_totalshares_flyin"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display Network Names</p><input type="checkbox" id="checkbox_networknames_flyin" name="networknames"><label for="checkbox_networknames_flyin"></label></li>
								<li class="et_social_checkbox clearfix"><p>Add Icon Spacing</p><input type="checkbox" id="checkbox_spaced_flyin" name="spacedicons" checked><label for="checkbox_spaced_flyin"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display On Mobile</p><input type="checkbox" id="checkbox_mobile_flyin" name="mobileshare" checked><label for="checkbox_mobile_flyin"></label></li>
							</ul>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Color Settings</h2>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Post Type Settings<span><p>Select the post types to display sidebar share icons</p></span></h2>
							<ul class="inline">
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_posts_flyin" name="sharecounts"><label for="checkbox_posts_flyin"></label><p>Posts</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_pages_flyin" name="totalshares"><label for="checkbox_pages_flyin"></label><p>Pages</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_projects_flyin" name="networknames"><label for="checkbox_projects_flyin"></label><p>Projects</p></li>
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_products_flyin" name="stickysharebar"><label for="checkbox_products_flyin"></label><p>Products</p></li>
								<div style="clear:both;"></div>
							</ul>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_media">
						<div class="et_social_row">
							<h1>Configure Media Sharing Icons</h1>
							<p>Media sharing is only applied to blog post content.</p>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Style</h2>
							<div class="et_social_style et_social_flip et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_media_style_1" value="off">
							</div>
							<div class="et_social_style et_social_darken et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_media_style_2" value="off">
							</div>
							<div class="et_social_style et_social_slide et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_media_style_3" value="off">
							</div>
							<div class="et_social_style et_social_simple et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_media_style_4" value="on">
							</div>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Shape</h2>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rectangle"></div><input type="hidden" class="et_social_toggle" name="et_social_media_shape_square" value="on"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rounded"></div><input type="hidden" class="et_social_toggle" name="et_social_media_shape_rounded" value="off"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_circle"></div><input type="hidden" class="et_social_toggle" name="et_social_media_shape_circle" value="off"></div>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Display Settings</h2>
							<ul>
								<li class="et_social_checkbox clearfix"><p>Display Share Counts</p><input type="checkbox" id="checkbox_sharecounts_media" name="sharecounts"><label for="checkbox_sharecounts_media"></label></li>
								<li class="input clearfix"><p>Minimum Count Display</p><input placeholder="0" type="text" name="mincount"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Display Total Shares</p><input type="checkbox" id="checkbox_totalshares_media" name="totalshares"><label for="checkbox_totalshares_media"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display Network Names</p><input type="checkbox" id="checkbox_networknames_media" name="networknames"><label for="checkbox_networknames_media"></label></li>
								<li class="et_social_checkbox clearfix"><p>Add Icon Spacing</p><input type="checkbox" id="checkbox_spaced_media" name="spacedicons" checked><label for="checkbox_spaced_media"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display On Mobile</p><input type="checkbox" id="checkbox_mobile_media" name="mobileshare" checked><label for="checkbox_mobile_media"></label></li>
							</ul>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Color Settings</h2>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Post Type Settings<span><p>Media sharing is only available for blog post content</p></span></h2>
							<ul class="inline">
								<li class="et_social_checkbox"><input type="checkbox" id="checkbox_posts_media" name="sharecounts" checked><label for="checkbox_posts_media"></label><p>Posts</p></li>
								<div style="clear:both;"></div>
							</ul>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_networks_follow">
						 <div class="et_social_row">
							<h1>Manage Networks</h1>
							<p>Add and rearrange any combination of social networks below.</br> You can define the Network Label and Username to the right of each.</p>
						</div>
						<div class="et_social_networks et_social_row et_social_sortable">
							<button class="et_social_icon et_social_addnetwork">Add Network</button>
							<div class="et_social_network et_social_icon"><span class="et_social_facebook"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Facebook" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_twitter"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Twitter" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_googleplus"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Google+" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_buffer"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Buffer" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_netvibes"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Netvibes" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_rss"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="RSS" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
							<div class="et_social_network et_social_icon"><span class="et_social_googleplus et_social_icon_googleplus"><a href="#" class="et_social_deletenetwork"></a></span><input type="text" placeholder="Google+" name="networklabel"><input type="text" placeholder="username" name="networkusername"></div>
						</div>
						<div class="et_social_row">
							<h2>Note: <span><p>Selected networks apply to all widgets and shortcodes defined in the menu on the left.</p></span></h2>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_widget">
						<div class="et_social_row">
							<h1>Configure Social Follow Widget</h1>
							<p>Any Monarch widget added to a widget area will use the following settings.</p>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Style</h2>
							<div class="et_social_style et_social_flip et_social_icon et_social_single_selectable selected">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_widget_style_1" value="on">
							</div>
							<div class="et_social_style et_social_darken et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_widget_style_2" value="off">
							</div>
							<div class="et_social_style et_social_slide et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_widget_style_3" value="off">
							</div>
							<div class="et_social_style et_social_simple et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_widget_style_4" value="off">
							</div>
						</div>
						<div class="et_social_row et_social_selection">
							<h2>Choose Icon Shape</h2>
							<div class="et_social_shape et_social_icon et_social_single_selectable selected"><div class="et_social_shape_tile et_social_icon et_social_shape_rectangle"></div><input type="hidden" class="et_social_toggle" name="et_social_widget_shape_square" value="on"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rounded"></div><input type="hidden" class="et_social_toggle" name="et_social_widget_shape_rounded" value="off"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_circle"></div><input type="hidden" class="et_social_toggle" name="et_social_widget_shape_circle" value="off"></div>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Display Settings</h2>
							<ul>
								<li class="select"><p>Icon Placement</p>
									<select>
										<option value="top" selected>Top</option>
										<option value="left">Left</option>
									</select>
								</li>
								<li class="select"><p>Choose Number of Columns</p>
									<select>
										<option value="1col">1</option>
										<option value="2col">2</option>
										<option value="3col" selected>3</option>
										<option value="4col">4</option>
										<option value="autowidth">Auto Width</option>
									</select>
								</li>
								<li class="et_social_checkbox clearfix"><p>Display Follow Counts</p><input type="checkbox" id="checkbox_followcounts_widget" name="sharecounts"><label for="checkbox_followcounts_widget"></label></li>
								<li class="input clearfix"><p>Minimum Count Display</p><input placeholder="0" type="text" name="mincount"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Display Total Follows</p><input type="checkbox" id="checkbox_totalfollows_widget" name="totalfollows"><label for="checkbox_totalfollows_widget"></label></li>
								<li class="et_social_checkbox clearfix"><p>Add Icon Spacing</p><input type="checkbox" id="checkbox_spaced_widget" name="spacedicons" checked><label for="checkbox_spaced_widget"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display on Mobile</p><input type="checkbox" id="checkbox_mobile_widget" name="totalfollows"><label for="checkbox_mobile_widget"></label></li>
							</ul>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Color Settings</h2>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_shortcode">
						<div class="et_social_row">
							<h1>Configure Social Follow Shortcode</h1>
							<p>Define settings and generate a unique shortcode below</p>
						</div>
						<div class="et_social_row">
							<h2>Choose Icon Style</h2>
							<div class="et_social_style et_social_flip et_social_icon et_social_single_selectable selected">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_shortcode_style_1" value="on">
							</div>
							<div class="et_social_style et_social_darken et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_shortcode_style_2" value="off">
							</div>
							<div class="et_social_style et_social_slide et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_shortcode_style_3" value="off">
							</div>
							<div class="et_social_style et_social_simple et_social_icon et_social_single_selectable">
								<ul>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>100</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>200</span></section></section><span class="et_social_overlay"></span></li>
									<li><i class="et_social_icon"></i><section class="network_label"><section class="et_social_count"><span>300</span></section></section><span class="et_social_overlay"></span></li>
								</ul>
								<input type="hidden" class="et_social_toggle" name="et_social_shortcode_style_4" value="off">
							</div>
						</div>
						<div class="et_social_row">
							<h2>Choose Icon Shape</h2>
							<div class="et_social_shape et_social_icon et_social_single_selectable selected"><div class="et_social_shape_tile et_social_icon et_social_shape_rectangle"></div><input type="hidden" class="et_social_toggle" name="et_social_shortcode_shape_square" value="on"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_rounded"></div><input type="hidden" class="et_social_toggle" name="et_social_shortcode_shape_rounded" value="off"></div>
							<div class="et_social_shape et_social_icon et_social_single_selectable"><div class="et_social_shape_tile et_social_icon et_social_shape_circle"></div><input type="hidden" class="et_social_toggle" name="et_social_shortcode_shape_circle" value="off"></div>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Display Settings</h2>
							<ul>
								<li class="select"><p>Icon Placement</p>
									<select>
										<option value="top" selected>Top</option>
										<option value="left">Left</option>
									</select>
								</li>
								<li class="select"><p>Choose Number of Columns</p>
									<select>
										<option value="1col">1</option>
										<option value="2col">2</option>
										<option value="3col">3</option>
										<option value="4col" selected>4</option>
										<option value="5col">5</option>
										<option value="6col">6</option>
										<option value="autowidth">Auto Width</option>
									</select>
								</li>
								<li class="et_social_checkbox clearfix"><p>Display Follow Counts</p><input type="checkbox" id="checkbox_followcounts_shortcode" name="sharecounts"><label for="checkbox_followcounts_shortcode"></label></li>
								<li class="input clearfix"><p>Minimum Count Display</p><input placeholder="0" type="text" name="mincount"><span class="more_info et_social_icon"></span></li>
								<li class="et_social_checkbox clearfix"><p>Display Total Follows</p><input type="checkbox" id="checkbox_totalfollows_shortcode" name="totalfollows"><label for="checkbo_totalfollows_shortcode"></label></li>
								<li class="et_social_checkbox clearfix"><p>Add Icon Spacing</p><input type="checkbox" id="checkbox_spaced_shortcode" name="spacedicons" checked><label for="checkbox_spaced_shortcode"></label></li>
								<li class="et_social_checkbox clearfix"><p>Display on Mobile</p><input type="checkbox" id="checkbox_mobile_shortcode" name="totalfollows" checked><label for="checkbox_mobile_shortcode"></label></li>
							</ul>
						</div>
						<div class="et_social_form et_social_row">
							<h2>Color Settings</h2>
						</div>
						<div class="et_social_shortcode_gen et_social_form et_social_row">
							<button class="et_social_icon">Generate shortcode</button>
							<textarea placeholder="Click the button above to generate your shortcode here" rows="6"></textarea>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_stats">
						<div class="et_social_row">
							<h1>Social Sharing Stats</h1>
						</div>
						<div id="et_social_globalstats" class="et_social_row">
							<div class="et_social_globalstat et_social_globalstat_shares"><span>234</span><span class="et_social_globalstat_label"><p>Total Shares</p></span></div>
							<div class="et_social_globalstat et_social_globalstat_likes"><span>234</span><span class="et_social_globalstat_label"><p>Total Likes</p></span></div>
							<div class="et_social_globalstat et_social_globalstat_follows"><span>234</span><span class="et_social_globalstat_label"><p>Total Follows</p></span></div>
						</div>
						<div class="et_social_row">
							<h2>Past 7 Days <span><p>230 Total Shares</p></h2>
							<ul class="et_social_graph_week et_social_graph">
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="30"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="15"></div>
									</div>
								</li>
								<li>
									<div value="137">
										<div type="facebook" value="50"></div>
										<div type="twitter" value="30" ></div>
										<div type="googleplus" value="20"></div>
										<div type="pinterest" value="17"></div>
										<div type="dribbble" value="10"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="367">
										<div type="facebook" value="150"></div>
										<div type="twitter" value="60" ></div>
										<div type="googleplus" value="57"></div>
										<div type="pinterest" value="40"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="20"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="35"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="589">
										<div type="facebook" value="200"></div>
										<div type="twitter" value="160" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="69"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li class="et_social_graph_last">
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
							</ul>
							<h2>Past 30 Days <span><p>230 Total Shares</p></h2>
							<ul class="et_social_graph_month et_social_graph">
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="30"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="15"></div>
									</div>
								</li>
								<li>
									<div value="137">
										<div type="facebook" value="50"></div>
										<div type="twitter" value="30" ></div>
										<div type="googleplus" value="20"></div>
										<div type="pinterest" value="17"></div>
										<div type="dribbble" value="10"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="367">
										<div type="facebook" value="150"></div>
										<div type="twitter" value="60" ></div>
										<div type="googleplus" value="57"></div>
										<div type="pinterest" value="40"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="20"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="35"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="589">
										<div type="facebook" value="200"></div>
										<div type="twitter" value="160" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="69"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="30"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="15"></div>
									</div>
								</li>
								<li>
									<div value="137">
										<div type="facebook" value="50"></div>
										<div type="twitter" value="30" ></div>
										<div type="googleplus" value="20"></div>
										<div type="pinterest" value="17"></div>
										<div type="dribbble" value="10"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="367">
										<div type="facebook" value="150"></div>
										<div type="twitter" value="60" ></div>
										<div type="googleplus" value="57"></div>
										<div type="pinterest" value="40"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="20"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="35"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="589">
										<div type="facebook" value="200"></div>
										<div type="twitter" value="160" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="69"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="30"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="15"></div>
									</div>
								</li>
								<li>
									<div value="137">
										<div type="facebook" value="50"></div>
										<div type="twitter" value="30" ></div>
										<div type="googleplus" value="20"></div>
										<div type="pinterest" value="17"></div>
										<div type="dribbble" value="10"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="367">
										<div type="facebook" value="150"></div>
										<div type="twitter" value="60" ></div>
										<div type="googleplus" value="57"></div>
										<div type="pinterest" value="40"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="20"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="35"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="589">
										<div type="facebook" value="200"></div>
										<div type="twitter" value="160" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="69"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="30"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="15"></div>
									</div>
								</li>
								<li>
									<div value="137">
										<div type="facebook" value="50"></div>
										<div type="twitter" value="30" ></div>
										<div type="googleplus" value="20"></div>
										<div type="pinterest" value="17"></div>
										<div type="dribbble" value="10"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="367">
										<div type="facebook" value="150"></div>
										<div type="twitter" value="60" ></div>
										<div type="googleplus" value="57"></div>
										<div type="pinterest" value="40"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="20"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="35"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="589">
										<div type="facebook" value="200"></div>
										<div type="twitter" value="160" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="69"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="589">
										<div type="facebook" value="200"></div>
										<div type="twitter" value="160" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="69"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li class="et_social_graph_last">
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
							</ul>
							<h2>Past 12 Months <span><p>230 Total Shares</p></h2>
							<ul class="et_social_graph_year et_social_graph">
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="30"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="15"></div>
									</div>
								</li>
								<li>
									<div value="137">
										<div type="facebook" value="50"></div>
										<div type="twitter" value="30" ></div>
										<div type="googleplus" value="20"></div>
										<div type="pinterest" value="17"></div>
										<div type="dribbble" value="10"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="367">
										<div type="facebook" value="150"></div>
										<div type="twitter" value="60" ></div>
										<div type="googleplus" value="57"></div>
										<div type="pinterest" value="40"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="20"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="35"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="589">
										<div type="facebook" value="200"></div>
										<div type="twitter" value="160" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="69"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="425">
										<div type="facebook" value="130"></div>
										<div type="twitter" value="105" ></div>
										<div type="googleplus" value="50"></div>
										<div type="pinterest" value="75"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="25"></div>
									</div>
								</li>
								<li>
									<div value="245">
										<div type="facebook" value="80"></div>
										<div type="twitter" value="50" ></div>
										<div type="googleplus" value="40"></div>
										<div type="pinterest" value="30"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="15"></div>
									</div>
								</li>
								<li>
									<div value="137">
										<div type="facebook" value="50"></div>
										<div type="twitter" value="30" ></div>
										<div type="googleplus" value="20"></div>
										<div type="pinterest" value="17"></div>
										<div type="dribbble" value="10"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
								<li>
									<div value="367">
										<div type="facebook" value="150"></div>
										<div type="twitter" value="60" ></div>
										<div type="googleplus" value="57"></div>
										<div type="pinterest" value="40"></div>
										<div type="dribbble" value="40"></div>
										<div type="rss" value="20"></div>
									</div>
								</li>
								<li class="et_social_graph_last">
									<div value="523">
										<div type="facebook" value="160"></div>
										<div type="twitter" value="140" ></div>
										<div type="googleplus" value="120"></div>
										<div type="pinterest" value="63"></div>
										<div type="dribbble" value="30"></div>
										<div type="rss" value="10"></div>
									</div>
								</li>
							</ul>
						</div>
					</div>

					<div class="et_social_tab_content et_social_tab_content_importexport">
						<div class="et_social_row">
							<h1>Import & Export</h1>
						</div>
					</div>

					<div class="et_social_row et_social_save_changes">
						<button class="et_social_icon">Save Changes</button>
					</div>

				</form>
			</div>
		</div>

            
          
!
            
              /*------------------------------------------------*/
/*-----------------[RESET]------------------------*/
/*------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ol, ul { list-style: none; }
a { text-decoration: none; }
button { border: none;}



/*------------------------------------------------*/
/*------------------[TYPOGRAPHY]------------------*/
/*------------------------------------------------*/

body, p, button { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; color: #939AAA; line-height: 1.7em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

h1, h2, h3, h4, h5, h6, button { line-height: 1.1em; padding-bottom: .5em; color: #373942; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
h1 { font-size: 26px; }
h2 { font-size: 16px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }

.et_social_row h2 { margin-bottom: 10px; }

p { padding-bottom: 1.7em; }
	p:last-of-type { padding-bottom: 0; }

h2 span { letter-spacing: normal; text-transform: none; font-style: italic; display: inline-block; }

/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

body { padding: 0; }

#et_social_wrapper { background-color: #ECF0F6; overflow: hidden; box-shadow: 0px 1px 3px 0px rgba( 0, 0, 0, 0.06 ); position: relative; z-index: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

#et_social_content { position: relative; margin-left: 200px; padding: 60px 40px 0; min-height: 600px; }

.et_social_row { margin-bottom: 55px; float: left; width: 100%; }

.clearfix { clear: both; }

.et_social li, .et_social a, .et_social h1, .et_social button, .et_social_location, .et_social_location_content, .et_social_network span, .et_social_network span:before, .et_social_network a:before, .network_label, .et_social_overlay, .et_social_location_icons, .et_social_shape_tile, .et_social_icon:before, .et_social_icon:after { transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; }

.et_social button { color: #FFF; background-color: #BDC4D6; padding: 15px 20px; margin: 0; font-size: 14px; line-height: 1em; height: 45px; margin-right: 10px; cursor: pointer; overflow: hidden; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
	.et_social button:last-of-type { margin-right: 0; }
		.et_social button:hover { background-color: #AAB0C0; }

.et_social_save_changes button { background-color: #008AFF !important; }
.et_social_shortcode_gen button { background-color: #86D700 !important; margin-bottom: 10px; }
button.et_social_addnetwork { margin-bottom: 30px; }

.et_social button.et_social_icon:hover { padding: 15px 10px 15px 55px;}
	.et_social button.et_social_icon:before { position: absolute; background-color: rgba( 0, 0, 0, 0.1); width: 45px; line-height: 45px; top:0; left:-45px; }
		.et_social button.et_social_icon:hover:before { left: 0px; }



/*------------------------------------------------*/
/*-------------------[HEADER]---------------------*/
/*------------------------------------------------*/

#et_social_header { width: 100%; background-color: #FF6E24; float: left; }

#et_social_logo { width: 200px; height: 60px; color: #FFF; line-height: 60px; float: left; text-align: center; background-color: #FF5903; }
	#et_social_logo:before { font-size: 32px; }

#et_social_header ul { float: right; }
	#et_social_header li { height: 60px; float: right; }
		#et_social_header li a { width: 60px; color: #FFF; background-color: rgba( 255, 255, 255, 0 ); line-height: 60px; text-align: center; display: block; position: relative; }
			#et_social_header li a:hover { background-color: rgba( 255, 255, 255, 0.15 ); }
				#et_social_header .et_social_icon:before { line-height: 60px; }
				#et_social_header ul li a.current { background-color: rgba( 255, 255, 255, 0.15 );}
				#et_social_header ul li a.current:after { -webkit-animation: arrow-top .7s; animation: arrow-top .7s; background-color: #ecf0f6; content:''; width: 20px; height: 20px; right: 20px; bottom: -14px; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }


/*------------------------------------------------*/
/*---------------[MAIN NAVIGATION]----------------*/
/*------------------------------------------------*/

#et_social_navigation { width: 200px; height: 100%; background-color: #373942; position: absolute; text-transform: uppercase; }
	#et_social_navigation li a { font-size: 12px; font-weight: 700; color: #FFF; padding: 18px 15px 18px 20px; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
		#et_social_navigation li a:hover { padding-left: 30px; background-color: rgba( 255, 255, 255, 0.05 ); }

		#et_social_navigation li a.current:after { -webkit-animation: arrow .7s; animation: arrow .7s; content:''; width: 20px; height: 20px; right: -14px; top: 14px; display: block; position: absolute; background-color: #ecf0f6; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
		#et_social_navigation .et_social_sharing_nav.current_section { max-height: 400px; }
		#et_social_navigation .et_social_follow_nav.current_section { max-height: 150px; }
		#et_social_navigation > ul > li > ul { max-height: 0; overflow: hidden; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; }

		#et_social_navigation li li a { color: #939AAA; height: 50px; padding: 12px 15px 12px 20px; background-color: rgba( 0, 0, 0, 0.3); }
				#et_social_navigation li li a:hover, #et_social_navigation a.current { font-weight: 700; color: #FFF; background-color: rgba( 0, 0, 0, 0.5); }
					#et_social_navigation .et_social_icon:before { font-size: 16px; position: relative; margin-right: 15px; top: 2px; }



/*------------------------------------------------*/
/*------------------[SELECTABLE]------------------*/
/*------------------------------------------------*/

.et_social_selection { margin-bottom: 40px; }

.et_social_multi_selectable, .et_social_single_selectable { padding-bottom: 45px; float: left; position: relative; text-align: center; cursor: pointer; margin-bottom: 20px; }
	.et_social_multi_selectable:after, .et_social_single_selectable:after { position: absolute; left: 50%; margin-left: -15px; width: 30px; height: 30px; line-height: 30px; bottom: 45px; color: rgba( 255, 255, 255, 0 ); z-index: -1; background-color: rgba(147, 154, 170, 0); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
		.et_social_multi_selectable:hover:after, .et_social_single_selectable:hover:after { bottom: 0; color: rgba( 255, 255, 255, 1 ); background-color: rgba(147, 154, 170, 1)}

.et_social_multi_selectable.et_social_selected:after, .et_social_single_selectable.et_social_selected:after { bottom: 0; color: rgba( 255, 255, 255, 1 ); background-color: rgba(134, 215, 0, 1); }
	.et_social_multi_selectable.et_social_selected:hover:after { background-color: rgba(255, 89, 3, 1); }
		.et_social_selected.et_social_just_selected:hover:after { bottom: 0; color: rgba( 255, 255, 255, 1 ); background-color: rgba(134, 215, 0, 1); }



/*------------------------------------------------*/
/*------------------[LOCATIONS]-------------------*/
/*------------------------------------------------*/

/*-------------------[GENERAL]--------------------*/
.et_social_location { width: 23.5%; margin-right: 2%; min-width: 120px; }
.et_social_location:nth-child(4n) { margin-right: 0;}

.et_social_location_tile { background-color: #FFF; padding: 15px 25px 20px; -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; }

.et_social_location h1 { font-size: 12px; color: rgba( 70, 70, 70, 0.5 ); margin-bottom: 10px; }
	.et_social_location:hover h1, .et_social_location.et_social_selected h1 { color: rgba( 70, 70, 70, 1 ); }

.et_social_location_content { background-color: #ecf0f6; width: 100%; display: block; height: 100px; padding: 30px 20px; position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.et_social_location:hover .et_social_location_content, .et_social_location.et_social_selected .et_social_location_content { background-color: #E0E4E9; padding: 25px 15px; }

.et_social_location_icons { background-color: #008aff; display: block; }

/*-------------------[SIDEBAR]--------------------*/
.et_social_location_icons_sidebar { width: 15px; height: 70px; position: absolute; left: 0; top: 55px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; }
		.et_social_location:hover .et_social_location_icons_sidebar, .et_social_location.et_social_selected .et_social_location_icons_sidebar { height: 80px;top: 50px; }

/*-------------------[INLINE]---------------------*/
.et_social_location_content_inline { height: 75px; margin-bottom: 10px; }
	.et_social_location:hover .et_social_location_content_inline, .et_social_location.et_social_selected .et_social_location_content_inline { height: 70px; }
.et_social_location_icons_inline { width: 100%; height: 15px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
	.et_social_location:hover .et_social_location_icons_inline, .et_social_location.et_social_selected .et_social_location_icons_inline { height: 20px; }

/*-------------------[POPUP]----------------------*/
.et_social_location_icons_popup { width: 100%; height: 100%; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 4px 4px 0px 0px rgba(50, 50, 50, 0.1); -moz-box-shadow: 4px 4px 0px 0px rgba(50, 50, 50, 0.1); box-shadow: 4px 4px 0px 0px rgba(50, 50, 50, 0.1); }

/*-------------------[FLYIN]----------------------*/
.et_social_location_icons_flyin { width: 60px; height: 55px; position: absolute; right: 0; bottom: 45px; border-top-left-radius: 2px; }
	.et_social_location:hover .et_social_location_icons_flyin, .et_social_location.et_social_selected .et_social_location_icons_flyin { width: 60px; height: 70px; position: absolute; right: 0; bottom: 45px; border-top-left-radius: 2px; }

/*-------------------[MEDIA]----------------------*/
.et_social_location_content_media i:before { position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; line-height: 1em; font-size: 32px; color: #FFF; }
.et_social_location_icons_media { width: 50px; height: 15px; position: absolute; left: 10px; top: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
		.et_social_location:hover .et_social_location_icons_media, .et_social_location.et_social_selected .et_social_location_icons_media { width: 60px; }



/*------------------------------------------------*/
/*-------------------[NETWORKS]-------------------*/
/*------------------------------------------------*/

.et_social_network { height: 40px; margin-bottom: 15px; line-height: 40px; position: relative; clear: both; }
	.et_social_network span { color: #FFF; padding-left: 40px; float: left; font-weight: 700; overflow: hidden; text-transform: uppercase; position: relative; width: 32%; margin-right: 2%; -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; cursor: move; }
		.et_social_network span:hover { padding-left: 50px; }
		.et_social_network span:before { position: absolute; left: 10px; }
			.et_social_network span a:before { width: 40px; background-color: rgba( 0, 0, 0, 0.1 ); color: #FFF; position: absolute; right: -40px; text-align: center; }
				.et_social_network span:hover a:before { right: 0px; }


		.et_social_networks .et_social_network input { width: 32%; height: 40px; margin-right: 2%;}
		.et_social_networks .et_social_network input:last-of-type { margin-right: 0;}
		.et_social_deletenetwork { height: 40px; float: right; }



		.et_social_network .et_social_addnetwork { margin-bottom: 20px; }
		.et_social_facebook, .et_social_networks.et_social_circle .et_social_facebook i { background-color: #3a579a; }
	li.et_social_facebook:hover, .et_social_networks.et_social_circle li.et_social_facebook:hover i { background-color: #314a83; }
	.et_social_sidebar_border li.et_social_facebook:hover { border-color: #3a579a; }

/*---------------[NETWORK COLORS]----------------*/
.et_social_twitter		{ background-color: #00abf0; }
.et_social_pinterest	{ background-color: #cd1c1f; }
.et_social_googleplus	{ background-color: #df4a32; }
.et_social_email		{ background-color: #666666; }
.et_social_wordpress	{ background-color: #267697; }
.et_social_vimeo		{ background-color: #45bbfc; }
.et_social_skype		{ background-color: #1ba5f4; }
.et_social_tumblr		{ background-color: #32506d; }
.et_social_dribbble		{ background-color: #ea4c8d; }
.et_social_flickr		{ background-color: #fc1684; }
.et_social_stumbleupon	{ background-color: #ea4b24; }
.et_social_deviantart	{ background-color: #566c68; }
.et_social_rss			{ background-color: #f59038; }
.et_social_blogger		{ background-color: #f59038; }
.et_social_picassa		{ background-color: #9864ae; }
.et_social_spotify		{ background-color: #aecf29; }
.et_social_instagram	{ background-color: #517fa4; }
.et_social_myspace		{ background-color: #3a5998; }
.et_social_delicious	{ background-color: #3398fc; }
.et_social_linkedin		{ background-color: #127bb6; }
.et_social_yahoo		{ background-color: #511295; }
.et_social_yahoomail	{ background-color: #511295; }
.et_social_yahoobookmark{ background-color: #511295; }
.et_social_amazon		{ background-color: #222222; }
.et_social_aol			{ background-color: #222222; }
.et_social_buffer		{ background-color: #222222; }
.et_social_printfriendly{ background-color: #75aa33; }
.et_social_youtube		{ background-color: #a8240f; }
.et_social_google		{ background-color: #3b7ae0; }
.et_social_gmail		{ background-color: #dd4b39; }
.et_social_reddit		{ background-color: #fc461e; }
.et_social_vkontakte	{ background-color: #4c75a3; }
.et_social_newsvine		{ background-color: #0d642e; }
.et_social_netvibes		{ background-color: #5dbc22; }
.et_social_hackernews	{ background-color: #f08641; }
.et_social_evernote		{ background-color: #7cbf4b; }
.et_social_digg			{ background-color: #546b9f; }
.et_social_box			{ background-color: #1482c3; }
.et_social_baidu		{ background-color: #2b3bdd; }
.et_social_livejournal	{ background-color: #336697; }
.et_social_friendfeed	{ background-color: #5989c0; }
.et_social_github		{ background-color: #4183c4; }
.et_social_outlook		{ background-color: #1174c3; }
.et_social_blinklist	{ background-color: #fc6d21; }
.et_social_aweber		{ background-color: #127bbf; }
.et_social_mailchimp	{ background-color: #3283bf; }
.et_social_soundcloud	{ background-color: #f0601e; }
.et_social_print		{ background-color: #333333; }
.et_social_like			{ background-color: #dd4b39; }



/*------------------------------------------------*/
/*----------------[INLINE STYLES]-----------------*/
/*------------------------------------------------*/

/*--------------------[GENERAL]-------------------*/
.et_social_style .et_social_overlay { background-color: rgba( 0, 0, 0, 0.1 ); margin: 0 0 0 40px; }
.et_social_sidebar_style span.et_social_overlay, .et_social_style span.et_social_overlay { height: 100%; width: 100%; background-color: rgba( 0, 0, 0, 0.1 ); bottom: 0; left: 0; z-index: 1; position: absolute; }

.et_social_style { margin-right: 10%; width: 120px; line-height: 1em; color: #FFF; }
	.et_social_style:last-of-type { margin-right: 0; }
.et_social_style li { height: 40px; margin-bottom: 10px; position: relative; overflow: hidden; background-color: #C6CCDD; float: left; width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.et_social_style li:last-child { margin-bottom: 0; }

.et_social_style .et_social_icon, .et_social_style .et_social_icon:before, .et_social_style .et_social_icon:after { width: 40px; height: 40px; line-height: 40px; display: inline-block; }
.et_social_style .et_social_icon { float: left; }

.et_social_style .network_label { font-size: 16px; font-weight: bold; text-align: left; }
.et_social_style .network_label { margin-left: 40px; padding: 6px 10px 10px 10px; z-index: 1000; position: relative; }
	.et_social_style .network_label section { display: inline-block; margin: 6px 4px 0 4px; }
	.et_social_style section.et_social_count .et_social_count_label { font-size: 12px; font-weight: normal; margin-left: 4px; }

/*--------------------[FLIP]----------------------*/
.et_social_flip li:hover .network_label, .et_social_flip li:hover .et_social_overlay { margin: 0 0 0 50px;}
.et_social_flip li:hover .et_social_icon:before { width: 50px; }

/*--------------------[SLIDE]---------------------*/
.et_social_slide li .et_social_icon:after { display: inline-block; position: absolute; left: -40px; top: 0; }
	.et_social_slide li:hover .et_social_icon:before { opacity: 0; margin-top: 40px; }
	.et_social_slide li:hover .et_social_icon:after { top: 0; left: 0; }
	.et_social_slide li:hover .et_social_icon:before { margin-left: 40px; margin-top: 0; }
	.et_social_slide li:hover .et_social_overlay { background-color: rgba( 0, 0, 0, 0 ); margin: 0 0 0 100px; }

/*--------------------[SIMPLE]--------------------*/
.et_social_simple li .et_social_overlay { margin: 0 !important; }
	.et_social_simple li a { padding: 0 !important; }
.et_social_simple .network_label { padding-left: 0 !important; }
	.et_social_simple .network_label section { margin-left: 0 !important; }
.et_social_simple .et_social_overlay { display: none !important; }



/*------------------------------------------------*/
/*----------------[SIDEBAR STYLES]----------------*/
/*------------------------------------------------*/

/*--------------------[GENERAL]-------------------*/
.et_social_sidebar_style { margin-right: 15%; width: 40px; }
	.et_social_sidebar_style:last-of-type { margin-right: 0; }
	.et_social_sidebar_style:hover, .et_social_sidebar_style.et_social_selected { opacity: 1; }

.et_social_sidebar_style_tile, .et_social_shape_tile { width: 40px; height: 40px; color: #FFF; font-size: 16px; line-height: 40px; text-align: center; float: left; margin-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.et_social_sidebar_style li:before, .et_social_sidebar_style li:after { width: 100%; line-height: 40px; display: block; color: #FFF; }
	.et_social_sidebar_style li:hover { background-color: rgba( 0, 0, 0, 0.15 ); }

/*--------------------[FLIP]----------------------*/
.et_social_sidebar_flip li { border-left: 0 solid rgba( 0,0,0,.4); width: 48px; }
	.et_social_sidebar_flip li:hover { width: 44px; border-left: 6px solid rgba( 0, 0, 0, 0.3 ); }
	.et_social_sidebar_flip li:before { float: right; }
		.et_social_sidebar_flip li:hover:before { width: 100%; }
	.et_social_sidebar_flip li:after { display: none; }

/*-------------------[BORDER]---------------------*/
.et_social_sidebar_border li { border-left: 0 solid transparent; width: 46px; }
	.et_social_sidebar_border li:hover { border-left: 6px solid; }
	.et_social_sidebar_border li:after { display: none; }
	.et_social_sidebar_border li:hover { background-color: rgba( 0, 0, 0, 0.3 ); }
	.et_social_sidebar_border li:hover:before { background-color: rgba( 0, 0, 0, 0.2 ); }

/*--------------------[GROW]----------------------*/
.et_social_sidebar_grow li:hover { width: 50px; }
	.et_social_sidebar_grow li:after { display: none; }

/*--------------------[SLIDE]---------------------*/
.et_social_sidebar_slide li:before { left: 0; z-index: 2; position: relative; }
	.et_social_sidebar_slide li:hover:before { left: 100%; }
.et_social_sidebar_slide li:after { width:100%; height:100%; position: absolute; top: 0; right:100%; }
	.et_social_sidebar_slide li:hover:after { right:0; }



/*------------------------------------------------*/
/*----------------[STYLE PREVIEWS]----------------*/
/*------------------------------------------------*/

.et_social_sidebar_style li { height: 40px; margin-bottom: 0; position: relative; overflow: hidden; background-color: #C6CCDD; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.et_social_style:hover li:nth-child(1), .et_social_style.et_social_selected li:nth-child(1), .et_social_sidebar_style:hover li:nth-child(1), .et_social_sidebar_style.et_social_selected li:nth-child(1) { background-color: #FF5903; }
		.et_social_style li:nth-child(1):hover, .et_social_sidebar_style li:nth-child(1):hover { background-color: #d94c03; }
	.et_social_style:hover li:nth-child(2), .et_social_style.et_social_selected li:nth-child(2), .et_social_sidebar_style:hover li:nth-child(2), .et_social_sidebar_style.et_social_selected li:nth-child(2) { background-color: #86d700; }
		.et_social_style li:nth-child(2):hover, .et_social_sidebar_style li:nth-child(2):hover { background-color: #72b700; }
	.et_social_style:hover li:nth-child(3), .et_social_style.et_social_selected li:nth-child(3), .et_social_sidebar_style:hover li:nth-child(3), .et_social_sidebar_style.et_social_selected li:nth-child(3) { background-color: #008AFF; }
		.et_social_style li:nth-child(3):hover, .et_social_sidebar_style li:nth-child(3):hover { background-color: #0075d9; }
	.et_social_sidebar_border li:hover:nth-child(1) { border-color: #FF5903; }
	.et_social_sidebar_border li:hover:nth-child(2) { border-color: #86d700; }
	.et_social_sidebar_border li:hover:nth-child(3) { border-color: #008AFF; }



/*------------------------------------------------*/
/*--------------------[SHAPES]--------------------*/
/*------------------------------------------------*/

.et_social_shape { margin-right: 40px; }
	.et_social_shape:last-of-type { margin-right: 0; }

.et_social_shape_tile { width: 50px; height: 50px; line-height: 50px; background-color: #C6CCDD; }
.et_social_shape:hover .et_social_shape_tile, .et_social_shape.et_social_selected .et_social_shape_tile { background-color: rgba(255, 89, 3, 1); }

.et_social_shape_rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
	.et_social_shape_circle { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }



/*------------------------------------------------*/
/*---------------------[FORM]---------------------*/
/*------------------------------------------------*/

.et_social_form li { height: 30px; margin-bottom: 10px; }
.et_social_form li p { float: left; width: 200px; line-height: 30px; padding-bottom: 0; }

.et_social_form ul.inline li { width: auto; margin-right: 40px; float: left; }
	.et_social_form ul.inline li:last-of-type { margin-right: 0; }
.et_social_form ul.inline li p { width: auto; margin-left: 10px; }

.et_social_form input, .et_social_form select, .et_social_form textarea, .et_social_networks input { height: 30px; float: left; border: none; background-color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 300; color: #939AAA; letter-spacing: 1px; margin: 0; padding: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.et_social_form input:focus, .et_social_form select:focus, .et_social_form textarea:focus, .et_social_networks input:focus, button:focus { outline: none; }
	.et_social_form input[type=text] { width: 60px; }
	.et_social_form select { width: 140px; }
	.et_social_form textarea { width: 100%; height:inherit; }
	.et_social_form input[type=checkbox] { visibility: hidden; position: absolute; }
		.et_social_checkbox label { float: left; cursor: pointer; width: 30px; height: 30px; background: #FFF; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
			.et_social_checkbox label:after {	color: rgba(147, 154, 170, 0); line-height: 30px; text-align: center; }
				.et_social_checkbox label:hover:after { color: #E0E4E9; }
					.et_social_checkbox input[type=checkbox]:checked + label:after { color: rgba(134, 215, 0, 1); }

.et_social_form span.more_info { height: 30px; float: left; padding: 7px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
	.et_social_form span.more_info:before { color: #FFF; width: 16px; line-height: 16px; height: 16px; background-color: rgba(147, 154, 170, 0.4); display: inline-block; text-align: center; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
		.et_social_form span.more_info:hover:before { background-color: rgba(147, 154, 170, 0.7); }

.et_social_sortable_placeholder { height: 40px; width: 100%; border: 1px dashed #BDC4D6; margin-bottom: 13px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.ui-sortable-helper span, .ui-sortable-helper input {box-shadow: 0 10px 20px rgba(0,0,0,.1);}



/*------------------------------------------------*/
/*--------------------[ICONS]---------------------*/
/*------------------------------------------------*/

@font-face {
	font-family: 'ETmonarch';
	src:url('fonts/ETmonarch.eot?gd6mr8');
	src:url('fonts/ETmonarch.eot?#iefixgd6mr8') format('embedded-opentype'),
		url('fonts/ETmonarch.woff?gd6mr8') format('woff'),
		url('fonts/ETmonarch.ttf?gd6mr8') format('truetype'),
		url('fonts/ETmonarch.svg?gd6mr8#ETmonarch') format('svg');
	font-weight: normal;
	font-style: normal;
}

.et_social_icon:before, .et_social_icon:after, .et_social_icon span:before, .et_social_icon a:before, .et_social_checkbox label:after { font-family: 'etmonarch'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 16px; }

/*-------------------[GENERAL]-------------------*/
.et_social_location:after,
.et_social_shape:after,
.et_social_style:after,
.et_social_sidebar_style:after,
.et_social_checkbox label:after,
.et_social_row .et_social_selected.et_social_just_selected:hover:after	{ content: "\e60d"; }
.et_social_location.et_social_selected:hover:after,
.et_social_deletenetwork:before			{ content: "\e60f"; }
.icon-plus:before,
.et_social_addnetwork:before,
.et_social_sidebar_style li:before,
.et_social_sidebar_style li:after,
.et_social_style i:before,
.et_social_style i:after,
.et_social_shape_tile:before			{ content: "\e610"; }
.et_social_icon_monarch:before			{ content: "\e600"; }
span.more_info:before					{ content: "\e603"; }
.et_social_icon_networks:before			{ content: "\e605"; }
.et_social_icon_locations:before		{ content: "\e606"; }
.et_social_icon_follow:before			{ content: "\e60b"; }
.et_social_icon_flyin:before			{ content: "\e602"; }
.et_social_icon_inline:before			{ content: "\e604"; }
.et_social_icon_popup:before			{ content: "\e607"; }
.et_social_icon_sidebar:before			{ content: "\e60a"; }
.et_social_sharing:before				{ content: "\e608"; }
.et_social_icon_stats:before			{ content: "\e611"; }
.et_social_icon_shortcode:before,
.et_social_shortcode_gen button:before	{ content: "\e609"; }
.et_social_save_changes button:before	{ content: "\e647"; }
.et_social_icon_image:before			{ content: "\e644"; }
.et_social_icon_lock:before				{ content: "\e645"; }
.et_social_icon_widget:before			{ content: "\e601"; }
.et_social_icon_cancel:before			{ content: "\e60c"; }
.et_social_icon_cancel:before			{ content: "\e60c"; }
.et_social_icon_importexport:before		{ content: "\e646"; }

/*---------------[NETWORK ICONS]---------------*/
.et_social_behance:before				{ content: "\e643"; }
.et_social_like:before					{ content: "\e60e"; }
.et_social_aweber:before				{ content: "\e612"; }
.et_social_blinklist:before				{ content: "\e613"; }
.et_social_buffer:before				{ content: "\e614"; }
.et_social_email:before					{ content: "\e615"; }
.et_social_github:before				{ content: "\e616"; }
.et_social_mailchimp:before				{ content: "\e617"; }
.et_social_outlook:before				{ content: "\e618"; }
.et_social_print:before					{ content: "\e619"; }
.et_social_soundcloud:before			{ content: "\e61a"; }
.et_social_baidu:before					{ content: "\e61b"; }
.et_social_box:before					{ content: "\e61c"; }
.et_social_digg:before					{ content: "\e61d"; }
.et_social_evernote:before				{ content: "\e61e"; }
.et_social_friendfeed:before			{ content: "\e61f"; }
.et_social_hackernews:before			{ content: "\e620"; }
.et_social_livejournal:before			{ content: "\e621"; }
.et_social_netvibes:before				{ content: "\e622"; }
.et_social_newsvine:before				{ content: "\e623"; }
.et_social_aol:before					{ content: "\e624"; }
.et_social_gmail:before					{ content: "\e625"; }
.et_social_googlebookmarks:before		{ content: "\e626"; }
.et_social_printfriendly:before			{ content: "\e627"; }
.et_social_reddit:before				{ content: "\e628"; }
.et_social_vkontakte:before				{ content: "\e629"; }
.et_social_yahoobookmarks:before		{ content: "\e62a"; }
.et_social_yahoomail:before				{ content: "\e62b"; }
.et_social_youtube:before				{ content: "\e62c"; }
.et_social_amazon:before				{ content: "\e62d"; }
.et_social_delicious:before				{ content: "\e62e"; }
.et_social_googleplus:before			{ content: "\e62f"; }
.et_social_instagram:before				{ content: "\e630"; }
.et_social_linkedin:before				{ content: "\e631"; }
.et_social_myspace:before				{ content: "\e632"; }
.et_social_picassa:before				{ content: "\e633"; }
.et_social_spotify:before				{ content: "\e634"; }
.et_social_yahoo:before					{ content: "\e635"; }
.et_social_blogger:before				{ content: "\e636"; }
.et_social_deviantart:before			{ content: "\e637"; }
.et_social_dribbble:before				{ content: "\e638"; }
.et_social_flickr:before				{ content: "\e639"; }
.et_social_pinterest:before				{ content: "\e63a"; }
.et_social_rss:before					{ content: "\e63b"; }
.et_social_skype:before					{ content: "\e63c"; }
.et_social_stumbleupon:before			{ content: "\e63d"; }
.et_social_tumblr:before				{ content: "\e63e"; }
.et_social_facebook:before				{ content: "\e63f"; }
.et_social_twitter:before				{ content: "\e640"; }
.et_social_vimeo:before					{ content: "\e641"; }
.et_social_wordpress:before				{ content: "\e642"; }



/*------------------------------------------------*/
/*---------------------[TABS]---------------------*/
/*------------------------------------------------*/

.et_social_tab_content { display: none; }
.et_tab_selected { display: block; -webkit-animation: tab .7s; animation: tab .7s; }


/*------------------------------------------------*/
/*-------------------[ANIMATION]------------------*/
/*------------------------------------------------*/

@-webkit-keyframes arrow { 0% {right: -28px;} 100% {right: -14px;} }
@keyframes arrow { 0% {right: -28px;} 100% {right: -14px;} }
@-webkit-keyframes tab { 0% { -ms-transform: translate(-20px,0); -webkit-transform: translate(-20px,0); transform: translate(-20px,0); opacity: 0; } 100% { -ms-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; } }
@keyframes tab { 0% {-ms-transform: translate(-20px,0); -webkit-transform: translate(-20px,0); transform: translate(-20px,0); opacity: 0;} 100% { -ms-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1;} }
@-webkit-keyframes tab-top { 0% { -ms-transform: translate(0,-20px); -webkit-transform: translate(0,-20px); transform: translate(0,-20px); opacity: 0; } 100% { -ms-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1; } }
@keyframes tab-top { 0% {-ms-transform: translate(0px,-20px); -webkit-transform: translate(0,-20px); transform: translate(0,-20px); opacity: 0;} 100% { -ms-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0); opacity: 1;} }
@-webkit-keyframes arrow-top { 0% {bottom: -28px;} 100% {bottom: -14px;} }
@keyframes arrow-top { 0% {bottom: -28px;} 100% {bottom: -14px;} }
@-webkit-keyframes graph { 0% {height: 0; opacity: 0;} 100% { opacity: 1;} }
@keyframes graph { 0% {height: 0; opacity: 0;} 100% { opacity: 1;} }
@-webkit-keyframes tooltip { 0% {top: -130px; opacity: 0;} 100% {top: -110px; opacity: 1;} }
@keyframes tooltip { 0% {top: -130px; opacity: 0; } 100% {top: -110px; opacity: 1;} }



/*------------------------------------------------*/
/*---------------------[STATS]--------------------*/
/*------------------------------------------------*/

.et_social_tab_content_stats ul { height: 300px; margin: 0; padding: 0 0 60px 0; display: block; float: left; width: 100%; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.et_social_tab_content_stats ul li { background-color: #e0e4e9; height: 300px; position: relative; color: #fff; display: block; float: left; padding: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
	.et_social_tab_content_stats ul li > div { -webkit-animation: graph .7s ease-in-out; animation: graph .7s ease-in-out; bottom: 0; position: absolute; color: #fff; background-color: #008aff; width: 100%; height: 200px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
		.et_social_tab_content_stats ul li > div > div { width: 100%; }
		.et_social_tab_content_stats ul li > div > div:first-of-type { -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;}
	.et_social_tab_content_stats ul li span { color: #939AAA; position: absolute; top: -30px; left: 30%; }

.et_social_tab_content_stats ul.et_social_graph_week li { width: 11.7%; margin-right: 3%; }
.et_social_tab_content_stats ul.et_social_graph_month li { width: 2.7%; margin-right: .5%; }
.et_social_tab_content_stats ul.et_social_graph_year li { width: 6.9%; margin-right: 1.5%; }
.et_social_tab_content_stats ul li.et_social_graph_last { margin-right: 0; }
.et_social_tab_content_stats ul.et_social_graph_month li span { color: #939AAA; position: absolute; top: -30px; left: 0; font-size: 8px; }

.et_social_graph li div > div { position: relative; }
	.et_social_graph li div > div:before { display: none; }
#et_social_globalstats { padding: 40px 0; width: 100%; background-color: #FFF; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
	.et_social_globalstat { width: 33.33%; float: left; text-align: center; font-size: 58px; line-height: 1em; font-weight: 600; }
		.et_social_globalstat span { display: block; }
			.et_social_globalstat_shares { color: #ff5903; }
			.et_social_globalstat_likes { color: #008aff; }
			.et_social_globalstat_follows { color: #86d700; }
.et_social_tooltip { -webkit-animation: tooltip .2s ease-in-out; animation: tooltip .2s ease-in-out; left: 50%; top: -110px; margin-left: -70px; position: absolute; padding: 20px; background-color: rgba(0,0,0,.5); width: 100px; z-index: 99; border-radius: 3px; }
.et_social_tooltip:after { border-left:10px solid rgba(0,0,0,0); border-top:10px solid rgba(0,0,0,.5); border-bottom:10px solid rgba(0,0,0,0); border-right:10px solid rgba(0,0,0,0); content: ''; width: 0; height: 0; left:50%; margin-left: -5px; bottom: -20px; position: absolute; }



/*------------------------------------------------*/
/*-----------------[RESPONSIVE]-------------------*/
/*------------------------------------------------*/

@media screen and (max-width:960px) {
	.et_social_location {width: 45%; margin-right: 5%;}
	.et_social_location:nth-of-type(n+3) { margin-top: 20px;}
}

@media screen and (max-width:782px) {
	#et_social_content { margin-left: 0; }
	#et_social_navigation { width: 100%; position: relative;}
	#et_social_navigation li a.current:after { background-color: #f0f0f0; }
	#et_social_header ul li a.current:after { background-color: #373942; }
	#et_social_wrapper { min-width: 300px; }
	#et_social_logo { width: 100px; }
	.et_social_globalstat span { font-size: 42px; }
}

@media screen and (max-width:480px) {
	.et_social_location {width: 100%; margin-right: 0;}
	.et_social_location:nth-of-type(n+1) { margin-top: 20px;}
	.et_social_form ul.inline li { width: 100%; }
	.et_social_globalstat { width: 100%; margin-bottom: 30px; }
		.et_social_globalstat:last-of-type { margin-bottom: 0; }
	.et_social_globalstat span { font-size: inherit; }
}
            
          
!
            
              
(function($){
	$(document).ready(function(){

		/* Create checkbox/toggle UI based off form data */

		$("div.et_social_multi_selectable").click(function() {
			var checkbox = $(this).children("input");
			if ($(checkbox).val() == "on") {
				$(checkbox).val("off");
			} else {
				$(checkbox).val("on");
			}
			$(this).toggleClass( "et_social_selected et_social_just_selected" );
			$(this).mouseleave(function() {
			 	$(this).removeClass( "et_social_just_selected" );
			});
		});

		$("div.et_social_single_selectable").click(function() {
			var tabs = $(this).parents(".et_social_row").find("div.et_social_single_selectable");
			var inputs = $(this).parents(".et_social_row").find("input");
			tabs.removeClass( "et_social_selected" );
			inputs.val("off");
			$(this).toggleClass( "et_social_selected" )
			$(this).children("input").val("on")
		});

		function toggle() {
			$(this).parent().addClass("et_social_selected");
		}

		$("input.et_social_toggle[value='on']").each(toggle);

		/* Tabs System */

		$("div#et_social_navigation > ul > li > a").click(function() {
			var button = $(this).parent().find("ul > li > a").first().attr("id");
		    var tab = $("div." + button);
		    var current = $("a.current");
		    var current_section = $("ul.current_section");
			current_section.removeClass("current_section");
			$(this).next().toggleClass("current_section");
		    $(current).removeClass("current");
		    $(this).parent().find("ul > li > a").first().addClass("current");
		    $("div.et_social_tab_content").removeClass( "et_tab_selected" );
		    $(tab).addClass("et_tab_selected");
		});

		$("div#et_social_header > ul > li > a").click(function() {
			var button = $(this).attr("id");
		    var tab = $("div." + button);
		    var current = $("a.current");
		    var current_section = $("ul.current_section");
			current_section.removeClass("current_section");
		    $(current).removeClass("current");
		    $(this).addClass("current");
		    $("div.et_social_tab_content").removeClass( "et_tab_selected" );
		    $(tab).addClass("et_tab_selected");
		});

		$("#et_social_navigation ul li ul li > a").click(function() {
		    var button = $(this).attr("id");
		    var tab = $("div." + button);
		    var current = $("a.current");
		    $(current).removeClass("current");
		    $(this).addClass("current");
		    $("div.et_social_tab_content").removeClass("et_tab_selected");
		    $(tab).addClass("et_tab_selected");
		});

		/* Build a uniform statistics graph based on data input*/

		function resize() {
			var bar_array = $(".et_social_tab_content_stats ul li > div").map(function() {
	  			return $(this).attr("value");
			}).get();
			var bar_height = Math.max.apply(Math, bar_array);

			var value = $(this).attr("value");
			var li_height = value / bar_height * 300;
			$(this).height(li_height);
		}

		$(".et_social_graph li div > div").hover(function() {
			var value = $(this).attr("value");
			var type = $(this).attr("type");
			$(this).append("<div class='et_social_tooltip'><strong>"+type+"</strong><br>Shares: "+value+"</div>");
		}, function() {
			$(this).find("div.et_social_tooltip").remove();
		});

		function resize_network() {
			var value = $(this).attr("value");
			var parent_value = $(this).parent().attr("value");
			var new_height = value / parent_value * 100;
			var percentage = new_height + "%";
			var type = $(this).attr("type");
			$(this).css("height", percentage);
			$(this).addClass("et_social_" + type)
		}

		$(".et_social_tab_content_stats ul li > div").each(resize);
		$(".et_social_tab_content_stats ul li > div > div").each(resize_network);

		/* jQuery Sortable */

		$(function() {
		    $( ".et_social_sortable" ).sortable({
		      placeholder: "et_social_sortable_placeholder"
		    });
		    $( ".et_social_sortable" ).disableSelection();
		 });

    });
})(jQuery)


            
          
!
999px
Loading ..................

Console