aboutsummaryrefslogtreecommitdiffstats
path: root/themes
diff options
context:
space:
mode:
authorPaul Bakaus <paul.bakaus@googlemail.com>2008-07-10 15:52:18 +0000
committerPaul Bakaus <paul.bakaus@googlemail.com>2008-07-10 15:52:18 +0000
commit979e64bdd20afd4fd096c5fe089d3aa6e3c89880 (patch)
tree152f6e6e732b564880774850e6cda0fd0295713b /themes
parent0cf0a105e677c363e09a40350933d584d804ed83 (diff)
downloadjquery-ui-979e64bdd20afd4fd096c5fe089d3aa6e3c89880.tar.gz
jquery-ui-979e64bdd20afd4fd096c5fe089d3aa6e3c89880.zip
- moved all default css files into themes/default
- added Colorpicker, heavily modified for UI (thanks Stefan!)
Diffstat (limited to 'themes')
-rw-r--r--themes/default/images/colorpicker_background.pngbin0 -> 1897 bytes
-rw-r--r--themes/default/images/colorpicker_hex.pngbin0 -> 532 bytes
-rw-r--r--themes/default/images/colorpicker_hsb_b.pngbin0 -> 970 bytes
-rw-r--r--themes/default/images/colorpicker_hsb_h.pngbin0 -> 1012 bytes
-rw-r--r--themes/default/images/colorpicker_hsb_s.pngbin0 -> 1171 bytes
-rw-r--r--themes/default/images/colorpicker_indic.gifbin0 -> 86 bytes
-rw-r--r--themes/default/images/colorpicker_overlay.pngbin0 -> 10355 bytes
-rw-r--r--themes/default/images/colorpicker_rgb_b.pngbin0 -> 970 bytes
-rw-r--r--themes/default/images/colorpicker_rgb_g.pngbin0 -> 1069 bytes
-rw-r--r--themes/default/images/colorpicker_rgb_r.pngbin0 -> 1066 bytes
-rw-r--r--themes/default/images/colorpicker_select.gifbin0 -> 78 bytes
-rw-r--r--themes/default/images/colorpicker_submit.pngbin0 -> 984 bytes
-rw-r--r--themes/default/images/custom_background.pngbin0 -> 1916 bytes
-rw-r--r--themes/default/images/custom_hex.pngbin0 -> 562 bytes
-rw-r--r--themes/default/images/custom_hsb_b.pngbin0 -> 1097 bytes
-rw-r--r--themes/default/images/custom_hsb_h.pngbin0 -> 970 bytes
-rw-r--r--themes/default/images/custom_hsb_s.pngbin0 -> 1168 bytes
-rw-r--r--themes/default/images/custom_indic.gifbin0 -> 86 bytes
-rw-r--r--themes/default/images/custom_rgb_b.pngbin0 -> 1008 bytes
-rw-r--r--themes/default/images/custom_rgb_g.pngbin0 -> 1069 bytes
-rw-r--r--themes/default/images/custom_rgb_r.pngbin0 -> 1018 bytes
-rw-r--r--themes/default/images/custom_submit.pngbin0 -> 997 bytes
-rw-r--r--themes/default/images/select.pngbin0 -> 506 bytes
-rw-r--r--themes/default/images/select2.pngbin0 -> 518 bytes
-rw-r--r--themes/default/ui.autocomplete.css (renamed from themes/jquery.autocomplete.css)0
-rw-r--r--themes/default/ui.colorpicker.css161
-rw-r--r--themes/default/ui.datepicker.css (renamed from themes/ui.datepicker.css)414
27 files changed, 368 insertions, 207 deletions
diff --git a/themes/default/images/colorpicker_background.png b/themes/default/images/colorpicker_background.png
new file mode 100644
index 000000000..8401572f1
--- /dev/null
+++ b/themes/default/images/colorpicker_background.png
Binary files differ
diff --git a/themes/default/images/colorpicker_hex.png b/themes/default/images/colorpicker_hex.png
new file mode 100644
index 000000000..4e532d7c6
--- /dev/null
+++ b/themes/default/images/colorpicker_hex.png
Binary files differ
diff --git a/themes/default/images/colorpicker_hsb_b.png b/themes/default/images/colorpicker_hsb_b.png
new file mode 100644
index 000000000..dfac595d0
--- /dev/null
+++ b/themes/default/images/colorpicker_hsb_b.png
Binary files differ
diff --git a/themes/default/images/colorpicker_hsb_h.png b/themes/default/images/colorpicker_hsb_h.png
new file mode 100644
index 000000000..3977ed9f2
--- /dev/null
+++ b/themes/default/images/colorpicker_hsb_h.png
Binary files differ
diff --git a/themes/default/images/colorpicker_hsb_s.png b/themes/default/images/colorpicker_hsb_s.png
new file mode 100644
index 000000000..a2a699736
--- /dev/null
+++ b/themes/default/images/colorpicker_hsb_s.png
Binary files differ
diff --git a/themes/default/images/colorpicker_indic.gif b/themes/default/images/colorpicker_indic.gif
new file mode 100644
index 000000000..f9fa95e28
--- /dev/null
+++ b/themes/default/images/colorpicker_indic.gif
Binary files differ
diff --git a/themes/default/images/colorpicker_overlay.png b/themes/default/images/colorpicker_overlay.png
new file mode 100644
index 000000000..561cdd9c5
--- /dev/null
+++ b/themes/default/images/colorpicker_overlay.png
Binary files differ
diff --git a/themes/default/images/colorpicker_rgb_b.png b/themes/default/images/colorpicker_rgb_b.png
new file mode 100644
index 000000000..dfac595d0
--- /dev/null
+++ b/themes/default/images/colorpicker_rgb_b.png
Binary files differ
diff --git a/themes/default/images/colorpicker_rgb_g.png b/themes/default/images/colorpicker_rgb_g.png
new file mode 100644
index 000000000..72b32760a
--- /dev/null
+++ b/themes/default/images/colorpicker_rgb_g.png
Binary files differ
diff --git a/themes/default/images/colorpicker_rgb_r.png b/themes/default/images/colorpicker_rgb_r.png
new file mode 100644
index 000000000..4855fe03f
--- /dev/null
+++ b/themes/default/images/colorpicker_rgb_r.png
Binary files differ
diff --git a/themes/default/images/colorpicker_select.gif b/themes/default/images/colorpicker_select.gif
new file mode 100644
index 000000000..599f7f13a
--- /dev/null
+++ b/themes/default/images/colorpicker_select.gif
Binary files differ
diff --git a/themes/default/images/colorpicker_submit.png b/themes/default/images/colorpicker_submit.png
new file mode 100644
index 000000000..7f4c0825f
--- /dev/null
+++ b/themes/default/images/colorpicker_submit.png
Binary files differ
diff --git a/themes/default/images/custom_background.png b/themes/default/images/custom_background.png
new file mode 100644
index 000000000..cf55ffdd6
--- /dev/null
+++ b/themes/default/images/custom_background.png
Binary files differ
diff --git a/themes/default/images/custom_hex.png b/themes/default/images/custom_hex.png
new file mode 100644
index 000000000..888f44449
--- /dev/null
+++ b/themes/default/images/custom_hex.png
Binary files differ
diff --git a/themes/default/images/custom_hsb_b.png b/themes/default/images/custom_hsb_b.png
new file mode 100644
index 000000000..2f99dae8e
--- /dev/null
+++ b/themes/default/images/custom_hsb_b.png
Binary files differ
diff --git a/themes/default/images/custom_hsb_h.png b/themes/default/images/custom_hsb_h.png
new file mode 100644
index 000000000..a217e9218
--- /dev/null
+++ b/themes/default/images/custom_hsb_h.png
Binary files differ
diff --git a/themes/default/images/custom_hsb_s.png b/themes/default/images/custom_hsb_s.png
new file mode 100644
index 000000000..7826b4150
--- /dev/null
+++ b/themes/default/images/custom_hsb_s.png
Binary files differ
diff --git a/themes/default/images/custom_indic.gif b/themes/default/images/custom_indic.gif
new file mode 100644
index 000000000..222fb94cf
--- /dev/null
+++ b/themes/default/images/custom_indic.gif
Binary files differ
diff --git a/themes/default/images/custom_rgb_b.png b/themes/default/images/custom_rgb_b.png
new file mode 100644
index 000000000..80764e5d6
--- /dev/null
+++ b/themes/default/images/custom_rgb_b.png
Binary files differ
diff --git a/themes/default/images/custom_rgb_g.png b/themes/default/images/custom_rgb_g.png
new file mode 100644
index 000000000..fc9778be1
--- /dev/null
+++ b/themes/default/images/custom_rgb_g.png
Binary files differ
diff --git a/themes/default/images/custom_rgb_r.png b/themes/default/images/custom_rgb_r.png
new file mode 100644
index 000000000..91b0cd4c5
--- /dev/null
+++ b/themes/default/images/custom_rgb_r.png
Binary files differ
diff --git a/themes/default/images/custom_submit.png b/themes/default/images/custom_submit.png
new file mode 100644
index 000000000..cd202cd93
--- /dev/null
+++ b/themes/default/images/custom_submit.png
Binary files differ
diff --git a/themes/default/images/select.png b/themes/default/images/select.png
new file mode 100644
index 000000000..21213bfd5
--- /dev/null
+++ b/themes/default/images/select.png
Binary files differ
diff --git a/themes/default/images/select2.png b/themes/default/images/select2.png
new file mode 100644
index 000000000..2cd2cabeb
--- /dev/null
+++ b/themes/default/images/select2.png
Binary files differ
diff --git a/themes/jquery.autocomplete.css b/themes/default/ui.autocomplete.css
index 4e7eb2ca3..4e7eb2ca3 100644
--- a/themes/jquery.autocomplete.css
+++ b/themes/default/ui.autocomplete.css
diff --git a/themes/default/ui.colorpicker.css b/themes/default/ui.colorpicker.css
new file mode 100644
index 000000000..b7b7c0715
--- /dev/null
+++ b/themes/default/ui.colorpicker.css
@@ -0,0 +1,161 @@
+.ui-colorpicker {
+ width: 356px;
+ height: 176px;
+ overflow: hidden;
+ position: absolute;
+ background: url(images/colorpicker_background.png);
+ font-family: Arial, Helvetica, sans-serif;
+ display: none;
+}
+.ui-colorpicker-color {
+ width: 150px;
+ height: 150px;
+ left: 14px;
+ top: 13px;
+ position: absolute;
+ background: #f00;
+ overflow: hidden;
+ cursor: crosshair;
+}
+.ui-colorpicker-color div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 150px;
+ height: 150px;
+ background: url(images/colorpicker_overlay.png);
+}
+.ui-colorpicker-color div div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 11px;
+ height: 11px;
+ overflow: hidden;
+ background: url(images/colorpicker_select.gif);
+ margin: -5px 0 0 -5px;
+}
+.ui-colorpicker-hue {
+ position: absolute;
+ top: 13px;
+ left: 171px;
+ width: 35px;
+ height: 150px;
+ cursor: n-resize;
+}
+.ui-colorpicker-hue div {
+ position: absolute;
+ width: 35px;
+ height: 9px;
+ overflow: hidden;
+ background: url(images/colorpicker_indic.gif) left top;
+ margin: -4px 0 0 0;
+ left: 0px;
+}
+.ui-colorpicker-new-color {
+ position: absolute;
+ width: 60px;
+ height: 30px;
+ left: 213px;
+ top: 13px;
+ background: #f00;
+}
+.ui-colorpicker-current-color {
+ position: absolute;
+ width: 60px;
+ height: 30px;
+ left: 283px;
+ top: 13px;
+ background: #f00;
+}
+.colorpicker input {
+ background-color: transparent;
+ border: 1px solid transparent;
+ position: absolute;
+ font-size: 10px;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #898989;
+ top: 4px;
+ right: 11px;
+ text-align: right;
+ margin: 0;
+ padding: 0;
+ height: 11px;
+}
+.ui-colorpicker-hex {
+ position: absolute;
+ width: 72px;
+ height: 22px;
+ background: url(images/colorpicker_hex.png) top;
+ left: 212px;
+ top: 142px;
+}
+.ui-colorpicker-hex input {
+ right: 6px;
+}
+.ui-colorpicker-field {
+ height: 22px;
+ width: 62px;
+ background-position: top;
+ position: absolute;
+}
+.ui-colorpicker-field span {
+ position: absolute;
+ width: 12px;
+ height: 22px;
+ overflow: hidden;
+ top: 0;
+ right: 0;
+ cursor: n-resize;
+}
+.ui-colorpicker-rgb-r {
+ background-image: url(images/colorpicker_rgb_r.png);
+ top: 52px;
+ left: 212px;
+}
+.ui-colorpicker-rgb-g {
+ background-image: url(images/colorpicker_rgb_g.png);
+ top: 82px;
+ left: 212px;
+}
+.ui-colorpicker-rgb-b {
+ background-image: url(images/colorpicker_rgb_b.png);
+ top: 112px;
+ left: 212px;
+}
+.ui-colorpicker-hsb-h {
+ background-image: url(images/colorpicker_hsb_h.png);
+ top: 52px;
+ left: 282px;
+}
+.ui-colorpicker-hsb-s {
+ background-image: url(images/colorpicker_hsb_s.png);
+ top: 82px;
+ left: 282px;
+}
+.ui-colorpicker-hsb-b {
+ background-image: url(images/colorpicker_hsb_b.png);
+ top: 112px;
+ left: 282px;
+}
+.ui-colorpicker-submit {
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ background: url(images/colorpicker_submit.png) top;
+ left: 322px;
+ top: 142px;
+ overflow: hidden;
+}
+.ui-colorpicker-focus {
+ background-position: center;
+}
+.ui-colorpicker-hex.ui-colorpicker-focus {
+ background-position: bottom;
+}
+.ui-colorpicker-submit.ui-colorpicker-focus {
+ background-position: bottom;
+}
+.ui-colorpicker-slider {
+ background-position: bottom;
+}
diff --git a/themes/ui.datepicker.css b/themes/default/ui.datepicker.css
index da9d0eebf..6719b162c 100644
--- a/themes/ui.datepicker.css
+++ b/themes/default/ui.datepicker.css
@@ -1,207 +1,207 @@
-/* Main Style Sheet for jQuery UI date picker */
-#ui-datepicker-div, .ui-datepicker-inline {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 14px;
- padding: 0;
- margin: 0;
- background: #ddd;
- width: 185px;
-}
-#ui-datepicker-div {
- display: none;
- border: 1px solid #777;
- z-index: 9999; /*must have*/
-}
-.ui-datepicker-inline {
- float: left;
- display: block;
- border: 0;
-}
-.ui-datepicker-rtl {
- direction: rtl;
-}
-.ui-datepicker-dialog {
- padding: 5px !important;
- border: 4px ridge #ddd !important;
-}
-button.ui-datepicker-trigger {
- width: 25px;
-}
-img.ui-datepicker-trigger {
- margin: 2px;
- vertical-align: middle;
-}
-.ui-datepicker-prompt {
- float: left;
- padding: 2px;
- background: #ddd;
- color: #000;
-}
-* html .ui-datepicker-prompt {
- width: 185px;
-}
-.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
- clear: both;
- float: left;
- width: 100%;
- color: #fff;
-}
-.ui-datepicker-control {
- background: #400;
- padding: 2px 0px;
-}
-.ui-datepicker-links {
- background: #000;
- padding: 2px 0px;
-}
-.ui-datepicker-control, .ui-datepicker-links {
- font-weight: bold;
- font-size: 80%;
-}
-.ui-datepicker-links label { /* disabled links */
- padding: 2px 5px;
- color: #888;
-}
-.ui-datepicker-clear, .ui-datepicker-prev {
- float: left;
- width: 34%;
-}
-.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
- float: right;
- text-align: right;
-}
-.ui-datepicker-current {
- float: left;
- width: 30%;
- text-align: center;
-}
-.ui-datepicker-close, .ui-datepicker-next {
- float: right;
- width: 34%;
- text-align: right;
-}
-.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
- float: left;
- text-align: left;
-}
-.ui-datepicker-header {
- padding: 1px 0 3px;
- background: #333;
- text-align: center;
- font-weight: bold;
- height: 1.3em;
-}
-.ui-datepicker-header select {
- background: #333;
- color: #fff;
- border: 0px;
- font-weight: bold;
-}
-.ui-datepicker {
- background: #ccc;
- text-align: center;
- font-size: 100%;
-}
-.ui-datepicker a {
- display: block;
- width: 100%;
-}
-.ui-datepicker-title-row {
- background: #777;
-}
-.ui-datepicker-days-row {
- background: #eee;
- color: #666;
-}
-.ui-datepicker-week-col {
- background: #777;
- color: #fff;
-}
-.ui-datepicker-days-cell {
- color: #000;
- border: 1px solid #ddd;
-}
-.ui-datepicker-days-cell a{
- display: block;
-}
-.ui-datepicker-week-end-cell {
- background: #ddd;
-}
-.ui-datepicker-title-row .ui-datepicker-week-end-cell {
- background: #777;
-}
-.ui-datepicker-days-cell-over {
- background: #fff;
- border: 1px solid #777;
-}
-.ui-datepicker-unselectable {
- color: #888;
-}
-.ui-datepicker-today {
- background: #fcc !important;
-}
-.ui-datepicker-current-day {
- background: #999 !important;
-}
-.ui-datepicker-status {
- background: #ddd;
- width: 100%;
- font-size: 80%;
- text-align: center;
-}
-
-/* ________ Datepicker Links _______
-
-** Reset link properties and then override them with !important */
-#ui-datepicker-div a, .ui-datepicker-inline a {
- cursor: pointer;
- margin: 0;
- padding: 0;
- background: none;
- color: #000;
-}
-.ui-datepicker-inline .ui-datepicker-links a {
- padding: 0 5px !important;
-}
-.ui-datepicker-control a, .ui-datepicker-links a {
- padding: 2px 5px !important;
- color: #eee !important;
-}
-.ui-datepicker-title-row a {
- color: #eee !important;
-}
-.ui-datepicker-control a:hover {
- background: #fdd !important;
- color: #333 !important;
-}
-.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
- background: #ddd !important;
- color: #333 !important;
-}
-
-/* ___________ MULTIPLE MONTHS _________*/
-
-.ui-datepicker-multi .ui-datepicker {
- border: 1px solid #777;
-}
-.ui-datepicker-one-month {
- float: left;
- width: 185px;
-}
-.ui-datepicker-new-row {
- clear: left;
-}
-
-/* ___________ IE6 IFRAME FIX ________ */
-
-.ui-datepicker-cover {
- display: none; /*sorry for IE5*/
- display/**/: block; /*sorry for IE5*/
- position: absolute; /*must have*/
- z-index: -1; /*must have*/
- filter: mask(); /*must have*/
- top: -4px; /*must have*/
- left: -4px; /*must have*/
- width: 200px; /*must have*/
- height: 200px; /*must have*/
-}
+/* Main Style Sheet for jQuery UI date picker */
+#ui-datepicker-div, .ui-datepicker-inline {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ padding: 0;
+ margin: 0;
+ background: #ddd;
+ width: 185px;
+}
+#ui-datepicker-div {
+ display: none;
+ border: 1px solid #777;
+ z-index: 9999; /*must have*/
+}
+.ui-datepicker-inline {
+ float: left;
+ display: block;
+ border: 0;
+}
+.ui-datepicker-rtl {
+ direction: rtl;
+}
+.ui-datepicker-dialog {
+ padding: 5px !important;
+ border: 4px ridge #ddd !important;
+}
+button.ui-datepicker-trigger {
+ width: 25px;
+}
+img.ui-datepicker-trigger {
+ margin: 2px;
+ vertical-align: middle;
+}
+.ui-datepicker-prompt {
+ float: left;
+ padding: 2px;
+ background: #ddd;
+ color: #000;
+}
+* html .ui-datepicker-prompt {
+ width: 185px;
+}
+.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
+ clear: both;
+ float: left;
+ width: 100%;
+ color: #fff;
+}
+.ui-datepicker-control {
+ background: #400;
+ padding: 2px 0px;
+}
+.ui-datepicker-links {
+ background: #000;
+ padding: 2px 0px;
+}
+.ui-datepicker-control, .ui-datepicker-links {
+ font-weight: bold;
+ font-size: 80%;
+}
+.ui-datepicker-links label { /* disabled links */
+ padding: 2px 5px;
+ color: #888;
+}
+.ui-datepicker-clear, .ui-datepicker-prev {
+ float: left;
+ width: 34%;
+}
+.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
+ float: right;
+ text-align: right;
+}
+.ui-datepicker-current {
+ float: left;
+ width: 30%;
+ text-align: center;
+}
+.ui-datepicker-close, .ui-datepicker-next {
+ float: right;
+ width: 34%;
+ text-align: right;
+}
+.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
+ float: left;
+ text-align: left;
+}
+.ui-datepicker-header {
+ padding: 1px 0 3px;
+ background: #333;
+ text-align: center;
+ font-weight: bold;
+ height: 1.3em;
+}
+.ui-datepicker-header select {
+ background: #333;
+ color: #fff;
+ border: 0px;
+ font-weight: bold;
+}
+.ui-datepicker {
+ background: #ccc;
+ text-align: center;
+ font-size: 100%;
+}
+.ui-datepicker a {
+ display: block;
+ width: 100%;
+}
+.ui-datepicker-title-row {
+ background: #777;
+}
+.ui-datepicker-days-row {
+ background: #eee;
+ color: #666;
+}
+.ui-datepicker-week-col {
+ background: #777;
+ color: #fff;
+}
+.ui-datepicker-days-cell {
+ color: #000;
+ border: 1px solid #ddd;
+}
+.ui-datepicker-days-cell a{
+ display: block;
+}
+.ui-datepicker-week-end-cell {
+ background: #ddd;
+}
+.ui-datepicker-title-row .ui-datepicker-week-end-cell {
+ background: #777;
+}
+.ui-datepicker-days-cell-over {
+ background: #fff;
+ border: 1px solid #777;
+}
+.ui-datepicker-unselectable {
+ color: #888;
+}
+.ui-datepicker-today {
+ background: #fcc !important;
+}
+.ui-datepicker-current-day {
+ background: #999 !important;
+}
+.ui-datepicker-status {
+ background: #ddd;
+ width: 100%;
+ font-size: 80%;
+ text-align: center;
+}
+
+/* ________ Datepicker Links _______
+
+** Reset link properties and then override them with !important */
+#ui-datepicker-div a, .ui-datepicker-inline a {
+ cursor: pointer;
+ margin: 0;
+ padding: 0;
+ background: none;
+ color: #000;
+}
+.ui-datepicker-inline .ui-datepicker-links a {
+ padding: 0 5px !important;
+}
+.ui-datepicker-control a, .ui-datepicker-links a {
+ padding: 2px 5px !important;
+ color: #eee !important;
+}
+.ui-datepicker-title-row a {
+ color: #eee !important;
+}
+.ui-datepicker-control a:hover {
+ background: #fdd !important;
+ color: #333 !important;
+}
+.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
+ background: #ddd !important;
+ color: #333 !important;
+}
+
+/* ___________ MULTIPLE MONTHS _________*/
+
+.ui-datepicker-multi .ui-datepicker {
+ border: 1px solid #777;
+}
+.ui-datepicker-one-month {
+ float: left;
+ width: 185px;
+}
+.ui-datepicker-new-row {
+ clear: left;
+}
+
+/* ___________ IE6 IFRAME FIX ________ */
+
+.ui-datepicker-cover {
+ display: none; /*sorry for IE5*/
+ display/**/: block; /*sorry for IE5*/
+ position: absolute; /*must have*/
+ z-index: -1; /*must have*/
+ filter: mask(); /*must have*/
+ top: -4px; /*must have*/
+ left: -4px; /*must have*/
+ width: 200px; /*must have*/
+ height: 200px; /*must have*/
+}