Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <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>
!

CSS 

              
                /*------------------------------------------------*/
/*-----------------[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('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167861/monarch.ttf') format('truetype');
	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; }
}
!

JS 

              
                
(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

Console