Updated demo page meta tags

Author: lcdsantos

public/demo.html

@@ -10,12 +10,22 @@
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="customoptions.css">
   <link rel="stylesheet" href="lib/prism.css">
-  <meta property="og:title" content="jQuery Selectric">
-  <meta property="og:type" content="website">
+
+  <meta property="og:title"       content="jQuery Selectric">
+  <meta property="og:type"        content="website">
   <meta property="og:description" content="Fast, simple and light jQuery plugin to customize HTML selects">
-  <meta property="og:url" content="http://lcdsantos.github.io/jQuery-Selectric/demo.html">
-  <meta property="og:site_name" content="jQuery Selectric">
-  <meta property="og:image" content="http://lcdsantos.github.io/jQuery-Selectric/share.jpg">
+  <meta property="og:url"         content="http://lcdsantos.github.io/jQuery-Selectric/">
+  <meta property="og:site_name"   content="jQuery Selectric">
+  <meta property="og:image"       content="http://lcdsantos.github.io/jQuery-Selectric/share.jpg">
+
+  <meta name="twitter:card"        content="summary_large_image">
+  <meta name="twitter:site"        content="@lcdsantos">
+  <meta name="twitter:creator"     content="@lcdsantos">
+  <meta name="twitter:title"       content="jQuery Selectric">
+  <meta name="twitter:description" content="Fast, simple and light jQuery plugin to customize HTML selects">
+  <meta name="twitter:image:src"   content="http://lcdsantos.github.io/jQuery-Selectric/share.jpg">
+
+  <link rel="author" href="https://plus.google.com/110463198138936295653/posts">
 
   <link rel="stylesheet" id="theme" href="selectric.css">
   <style id="template" style="display: none;"></style>
@@ -375,5 +385,8 @@ <h3>Sizes</h3>
     ga('require', 'displayfeatures');
     ga('send', 'pageview');
   </script>
+
+
+
 </body>
 </html>

public/plugins/jquery.selectric.addNew.css

@@ -1,16 +1,16 @@
 /* Add new item */
-.selectricScroll {
+.selectric-scroll {
   position: relative;
 }
 
-.selectricScroll .createNew {
+.selectric-scroll .createNew {
   position: absolute;
   top: 0;
   width: 100%;
 }
 
-.selectricScroll .createNew > input[type=text],
-.selectricScroll .createNew > button {
+.selectric-scroll .createNew > input[type=text],
+.selectric-scroll .createNew > button {
   height: 24px;
   margin: 3px 1%;
   padding: 5px;
@@ -19,7 +19,7 @@
   font-weight: normal;
 }
 
-.selectricScroll .createNew > input[type=text] {
+.selectric-scroll .createNew > input[type=text] {
   background: #fff;
   width: 76%;
   border: 1px solid #ddd;
@@ -28,7 +28,7 @@
   color: #444;
 }
 
-.selectricScroll .createNew > button {
+.selectric-scroll .createNew > button {
   width: 20%;
   background: #c02126;
   border: 1px solid #981317;
@@ -42,6 +42,6 @@
   text-transform: uppercase;
 }
 
-.selectricScroll .createNew + ul {
+.selectric-scroll .createNew + ul {
   margin-top: 30px;
 }