2 Copyright (c) 2009, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.net/yui/license.txt
7 /* Place the border around the editor */
8 .yui-skin-sam .yui-editor-container {
9 border: 1px solid #808080;
11 /* Color the border of the container */
12 .yui-skin-sam .yui-toolbar-container {
15 /* Load the background image on the Toolbars titlebar */
16 .yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar {
17 background: url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -200px;
20 .yui-skin-sam .yui-editor-container .draggable .yui-toolbar-titlebar {
24 /* Give the titlebar some color and padding */
25 .yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar h2 {
34 /* Give the toolbars groups titles some color and padding */
35 .yui-skin-sam .yui-toolbar-container .yui-toolbar-group h3 {
44 /* Hide all of the sepatators borders */
45 .yui-toolbar-container span.yui-toolbar-separator {
52 /* Background color of the toolbar */
53 .yui-skin-sam .yui-toolbar-container {
54 background-color: #F2F2F2;
57 /* Add some padding to the toolbars sub container */
58 .yui-skin-sam .yui-toolbar-container .yui-toolbar-subcont {
59 padding: 0 1em 0.35em;
60 border-bottom:1px solid #808080;
62 /* When the collapsed class is added, add a border to the bottom of the titlebar (since the toolbar itself is display none) */
63 .yui-skin-sam .yui-toolbar-container-collapsed .yui-toolbar-titlebar {
64 border-bottom:1px solid #808080;
67 /* Remove the shadows from the menus in the toolbar - Menu.css override */
68 .yui-skin-sam .yui-editor-container .visible .yui-menu-shadow,
69 .yui-skin-sam .yui-editor-panel .visible .yui-menu-shadow {
73 /* Remove padding/margin from lists */
74 .yui-skin-sam .yui-editor-container ul {
75 list-style-type: none;
79 /* Remove padding/margin from list items */
80 .yui-skin-sam .yui-editor-container ul li {
81 list-style-type: none;
85 /* Float the LI's that wrap the buttons */
86 .yui-skin-sam .yui-toolbar-group ul li.yui-toolbar-groupitem {
90 /* Set the color and the border of the dompath container at the bottom of the editor */
91 .yui-skin-sam .yui-editor-container .dompath {
92 background-color: #F2F2F2;
93 border-top:1px solid #808080;
99 /* Set the image for the collapse button on the toolbar */
100 .yui-skin-sam .yui-toolbar-container .collapse {
101 background: url(../../../../assets/skins/sam/sprite.png) no-repeat 0 -400px;
103 /* Set the image for the collapse button on the toolbar */
104 .yui-skin-sam .yui-toolbar-container .collapsed {
105 background: url(../../../../assets/skins/sam/sprite.png) no-repeat 0 -350px;
107 /* Position the image and the container */
108 .yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar span.collapse {
120 /* Set the default styles for the buttons */
121 .yui-skin-sam .yui-toolbar-container .yui-push-button,
122 .yui-skin-sam .yui-toolbar-container .yui-color-button,
123 .yui-skin-sam .yui-toolbar-container .yui-menu-button {
124 background: url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0;
131 border-color: #808080;
137 /* Set the height of the buttons and pad them on the left for the icon */
138 .yui-skin-sam .yui-toolbar-container .yui-push-button a,
139 .yui-skin-sam .yui-toolbar-container .yui-color-button a,
140 .yui-skin-sam .yui-toolbar-container .yui-menu-button a {
143 text-decoration: none;
151 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a,
152 .yui-skin-sam .yui-toolbar-container .yui-toolbar-select a {
155 /* Set the height of the buttons and pad them on the left for the icon */
156 .yui-skin-sam .yui-toolbar-container .yui-push-button .first-child,
157 .yui-skin-sam .yui-toolbar-container .yui-color-button .first-child,
158 .yui-skin-sam .yui-toolbar-container .yui-menu-button .first-child {
159 border-color: #808080;
166 .yui-skin-sam .yui-toolbar-container .yui-push-button-disabled .first-child,
167 .yui-skin-sam .yui-toolbar-container .yui-color-button-disabled .first-child,
168 .yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled .first-child {
171 .yui-skin-sam .yui-toolbar-container .yui-push-button-disabled a,
172 .yui-skin-sam .yui-toolbar-container .yui-color-button-disabled a,
173 .yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled a {
177 .yui-skin-sam .yui-toolbar-container .yui-push-button-disabled,
178 .yui-skin-sam .yui-toolbar-container .yui-color-button-disabled,
179 .yui-skin-sam .yui-toolbar-container .yui-menu-button-disabled {
182 /* IE needs a little help positioning the first child */
183 .yui-skin-sam .yui-toolbar-container .yui-button .first-child {
187 /* Font Family Drop Down */
188 .yui-skin-sam .yui-toolbar-container .yui-toolbar-fontname {
192 /* Header Drop Down */
193 .yui-skin-sam .yui-toolbar-container .yui-toolbar-heading {
197 /* Handle the hover state of the buttons */
198 .yui-skin-sam .yui-toolbar-container .yui-button-hover {
199 background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1300px;
200 border-color: #808080;
203 /* Handle the selected state of the buttons */
204 .yui-skin-sam .yui-toolbar-container .yui-button-selected {
205 background: url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1700px;
206 border-color: #808080;
208 /* When the nogrouplabels class is applied, set the h3's to display none */
209 .yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels h3 {
212 /* When not showing the h3 group labels, add some margin to make up for them*/
213 .yui-skin-sam .yui-toolbar-container .yui-toolbar-nogrouplabels .yui-toolbar-group {
218 /* Handle the icon placeholder for the buttons
219 This is very important - position of this must be absolute.
220 If it is not positioned absolute, IE will place it over the a in the Toolbar
221 Doing this will cause the editor to loose focus and loose the selection.
223 .yui-skin-sam .yui-toolbar-container .yui-push-button span.yui-toolbar-icon,
224 .yui-skin-sam .yui-toolbar-container .yui-color-button span.yui-toolbar-icon,
225 .yui-skin-sam .yui-toolbar-container .yui-menu-button span.yui-toolbar-icon {
232 background: url(editor-sprite.gif) no-repeat 30px 30px;
235 /* Swap out the image to an active image */
236 .yui-skin-sam .yui-toolbar-container .yui-button-selected span.yui-toolbar-icon, .yui-skin-sam .yui-toolbar-container .yui-button-hover span.yui-toolbar-icon {
237 background-image: url(editor-sprite-active.gif);
239 /* Change the defaults to make them look more like the editor */
240 .yui-skin-sam .yui-toolbar-container .visible .yuimenuitemlabel {
246 /* Set the background color of all menu containers */
247 .yui-skin-sam .yui-toolbar-container .yui-button-menu {
248 background-color: #fff;
250 /* Adding this style to Menu's allows the scrolled menu to work in IE */
251 .yui-skin-sam .yui-toolbar-container .yui-button-menu .yui-menu-body-scrolled {
254 /* Set the background of all menu items that are selected */
255 .yui-skin-sam div.yuimenu li.selected {
256 background-color: #B3D4FF;
258 /* Set the color of the hrefs in a selected menu item */
259 .yui-skin-sam div.yuimenu li.selected a.selected {
262 /* Setting the background position of the sprite */
263 .yui-skin-sam .yui-toolbar-container .yui-toolbar-bold span.yui-toolbar-icon {
264 background-position: 0 0;
267 /* Setting the background position of the sprite */
268 .yui-skin-sam .yui-toolbar-container .yui-toolbar-strikethrough span.yui-toolbar-icon {
269 background-position: 0 -108px;
272 /* Setting the background position of the sprite */
273 .yui-skin-sam .yui-toolbar-container .yui-toolbar-italic span.yui-toolbar-icon {
274 background-position: 0 -36px;
277 /* Setting the background position of the sprite */
278 .yui-skin-sam .yui-toolbar-container .yui-toolbar-undo span.yui-toolbar-icon {
279 background-position: 0 -1326px;
282 /* Setting the background position of the sprite */
283 .yui-skin-sam .yui-toolbar-container .yui-toolbar-redo span.yui-toolbar-icon {
284 background-position: 0 -1355px;
287 /* Setting the background position of the sprite */
288 .yui-skin-sam .yui-toolbar-container .yui-toolbar-underline span.yui-toolbar-icon {
289 background-position: 0 -72px;
292 /* Setting the background position of the sprite */
293 .yui-skin-sam .yui-toolbar-container .yui-toolbar-subscript span.yui-toolbar-icon {
294 background-position: 0 -180px;
297 /* Setting the background position of the sprite */
298 .yui-skin-sam .yui-toolbar-container .yui-toolbar-superscript span.yui-toolbar-icon {
299 background-position: 0 -144px;
302 /* Setting the background position of the sprite */
303 .yui-skin-sam .yui-toolbar-container .yui-toolbar-forecolor span.yui-toolbar-icon {
304 background-position: 0 -216px;
307 /* Setting the background position of the sprite */
308 .yui-skin-sam .yui-toolbar-container .yui-toolbar-backcolor span.yui-toolbar-icon {
309 background-position: 0 -288px;
312 /* Setting the background position of the sprite */
313 .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyleft span.yui-toolbar-icon {
314 background-position: 0 -324px;
317 /* Setting the background position of the sprite */
318 .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifycenter span.yui-toolbar-icon {
319 background-position: 0 -360px;
322 /* Setting the background position of the sprite */
323 .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyright span.yui-toolbar-icon {
324 background-position: 0 -396px;
327 /* Setting the background position of the sprite */
328 .yui-skin-sam .yui-toolbar-container .yui-toolbar-justifyfull span.yui-toolbar-icon {
329 background-position: 0 -432px;
332 /* Setting the background position of the sprite */
333 .yui-skin-sam .yui-toolbar-container .yui-toolbar-indent span.yui-toolbar-icon {
334 background-position: 0 -720px;
337 /* Setting the background position of the sprite */
338 .yui-skin-sam .yui-toolbar-container .yui-toolbar-outdent span.yui-toolbar-icon {
339 background-position: 0 -684px;
342 /* Setting the background position of the sprite */
343 .yui-skin-sam .yui-toolbar-container .yui-toolbar-createlink span.yui-toolbar-icon {
344 background-position: 0 -792px;
347 /* Setting the background position of the sprite */
348 .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertimage span.yui-toolbar-icon {
349 background-position: 1px -756px;
352 /* Setting the background position of the sprite */
353 .yui-skin-sam .yui-toolbar-container .yui-toolbar-left span.yui-toolbar-icon {
354 background-position: 0 -972px;
357 /* Setting the background position of the sprite */
358 .yui-skin-sam .yui-toolbar-container .yui-toolbar-right span.yui-toolbar-icon {
359 background-position: 0 -936px;
362 /* Setting the background position of the sprite */
363 .yui-skin-sam .yui-toolbar-container .yui-toolbar-inline span.yui-toolbar-icon {
364 background-position: 0 -900px;
367 /* Setting the background position of the sprite */
368 .yui-skin-sam .yui-toolbar-container .yui-toolbar-block span.yui-toolbar-icon {
369 background-position: 0 -864px;
372 /* Setting the background position of the sprite */
373 .yui-skin-sam .yui-toolbar-container .yui-toolbar-bordercolor span.yui-toolbar-icon {
374 background-position: 0 -252px;
377 /* Setting the background position of the sprite */
378 .yui-skin-sam .yui-toolbar-container .yui-toolbar-removeformat span.yui-toolbar-icon {
379 background-position: 0 -1080px;
382 /* Setting the background position of the sprite */
383 .yui-skin-sam .yui-toolbar-container .yui-toolbar-hiddenelements span.yui-toolbar-icon {
384 background-position: 0 -1044px;
387 /* Setting the background position of the sprite */
388 .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertunorderedlist span.yui-toolbar-icon {
389 background-position: 0 -468px;
392 /* Setting the background position of the sprite */
393 .yui-skin-sam .yui-toolbar-container .yui-toolbar-insertorderedlist span.yui-toolbar-icon {
394 background-position: 0 -504px;
397 /* Set the width of the spin buttons */
398 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton,
399 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child {
402 /* Pad the first child */
403 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton .first-child a {
408 /* Spin Buttons - Remove the icon holder, they don't need it */
409 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton span.yui-toolbar-icon {
413 /* Spin Buttons - Prep the arrows */
414 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.up,
415 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.down {
417 background: url(editor-sprite.gif) no-repeat 0 -1222px;
424 /* Spin Buttons - The up arrow */
425 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.up {
427 background-position: 0 -1222px;
429 /* Spin Buttons - The down arrow */
430 .yui-skin-sam .yui-toolbar-container .yui-toolbar-spinbutton a.down {
432 background-position: 0 -1187px;
434 /* Handle plain Select Elements */
435 .yui-skin-sam .yui-toolbar-container select {
437 border: 1px solid #808080;
439 /* Pad and align the Select Menus */
440 .yui-skin-sam .yui-toolbar-container .yui-toolbar-select .first-child a {
444 /* Set the icon of the select menu for the drop down arrow */
445 .yui-skin-sam .yui-toolbar-container .yui-toolbar-select span.yui-toolbar-icon {
446 background: url( editor-sprite.gif ) no-repeat 0 -1144px;
452 /* Fix the color menu background if it's inside a Property Editor */
453 .yui-skin-sam .yui-editor-panel .yui-color-button-menu .bd {
454 background-color: transparent;
459 /* Place a border around the color menu */
460 .yui-skin-sam .yui-color-button-menu .yui-toolbar-colors {
461 border: 1px solid #808080;
465 /* Property Editor Panel styles */
466 .yui-skin-sam .yui-editor-panel {
470 background-color: transparent;
475 /* Margins on the header of the Property Editor */
476 .yui-skin-sam .yui-editor-panel .hd {
481 /* Setup the background image on the title bar
482 We are styling the h3 instead if the div so we can make room
483 for the "knob" that floats on the top of the window.
485 .yui-skin-sam .yui-editor-panel .hd h3 {
487 border: 1px solid #808080;
488 background: url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -200px;
497 /* Style the body of the Property Editor */
498 .yui-skin-sam .yui-editor-panel .bd {
499 background-color: #F2F2F2;
500 border-left: 1px solid #808080;
501 border-right: 1px solid #808080;
507 /* Remove the padding/margin on lists in the Property Editor */
508 .yui-skin-sam .yui-editor-panel ul {
509 list-style-type: none;
514 /* Remove the padding/margin on list items in the Property Editor */
515 .yui-skin-sam .yui-editor-panel ul li {
519 /* IE is havig trouble with our menu sizes here */
520 .yui-skin-sam .yui-editor-panel .yuimenu {
521 /**width: 90px !important;*/
523 /* Remove the border from the toolbar's container and add some margin to it */
524 .yui-skin-sam .yui-editor-panel .yui-toolbar-container .yui-toolbar-subcont {
529 /* Set the width of the bordersize and bordertype menu buttons */
530 .yui-skin-sam .yui-editor-panel .yui-toolbar-bordersize, .yui-skin-sam .yui-editor-panel .yui-toolbar-bordertype {
535 .yui-skin-sam .yui-editor-panel label {
542 .yui-skin-sam .yui-editor-panel label strong {
550 .yui-skin-sam .yui-editor-panel label input {
554 .yui-skin-sam .yui-editor-panel .createlink_target,
555 .yui-skin-sam .yui-editor-panel .insertimage_target {
561 .yui-skin-sam .yui-editor-panel .removeLink {
564 /* Color the input yellow if it has the warning class applied */
565 .yui-skin-sam .yui-editor-panel label input.warning {
566 background-color: #FFEE69;
569 /* Style the titles of the toolbar groups */
570 .yui-skin-sam .yui-editor-panel .yui-toolbar-group h3 {
579 /* Style the header for the Height and Width boxes */
580 .yui-skin-sam .yui-editor-panel .height-width h3 {
581 margin: 3px 0 0 10px;
583 /* Style the height and width container */
584 .yui-skin-sam .yui-editor-panel .height-width {
585 margin: 3px 0 0 35px;
590 /* Give the border group a width */
591 .yui-skin-sam .yui-editor-panel .yui-toolbar-group-border {
594 .yui-skin-sam .yui-editor-panel .no-button .yui-toolbar-group-border {
597 /* Give the padding group a width */
598 .yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding {
602 .yui-skin-sam .yui-editor-panel .no-button .yui-toolbar-group-padding {
605 /* Fix some margins for the H3's */
606 .yui-skin-sam .yui-editor-panel .yui-toolbar-group-padding h3 {
610 /* Image Properties - Text flow container size */
611 .yui-skin-sam .yui-editor-panel .yui-toolbar-group-textflow {
615 /* Remove the background image set in Panel.css */
616 .yui-skin-sam .yui-editor-panel .hd {
620 /* Give the footer som color and a border */
621 .yui-skin-sam .yui-editor-panel .ft {
622 background-color: #F2F2F2;
623 border: 1px solid #808080;
629 /* Style the close button in the Property Editor */
630 .yui-skin-sam .yui-editor-panel .hd span.close {
631 background:url(../../../../assets/skins/sam/sprite.png) no-repeat 0 -300px;
642 /* Style the tip in the footer */
643 .yui-skin-sam .yui-editor-panel .ft span.tip {
644 background-color: #EDF5FF;
645 border-top: 1px solid #808080;
648 /* Style the tip in the footer */
649 .yui-skin-sam .yui-editor-panel .ft span.tip strong {
656 /* Setup the icon for a tip */
657 .yui-skin-sam .yui-editor-panel .ft span.tip span.icon {
658 background: url( editor-sprite.gif ) no-repeat 0 -1260px;
666 /* Setup the background image for an info icon */
667 .yui-skin-sam .yui-editor-panel .ft span.tip span.icon-info {
668 background-position: 2px -1260px;
670 /* Setup the background image for a warning icon */
671 .yui-skin-sam .yui-editor-panel .ft span.tip span.icon-warn {
672 background-position: 2px -1296px;
675 /* Handle the knob that floats on top of the panel */
676 .yui-skin-sam .yui-editor-panel .hd span.knob {
684 background: url( editor-knob.gif ) no-repeat 0 0;
686 /* Reset some styles from the editor toolbar, when a toolbar is inside the Property Editor */
687 .yui-skin-sam .yui-editor-panel .yui-toolbar-container {
690 background-image: none;
693 /* Reset styles for menu buttons inside the Property Editor */
694 .yui-skin-sam .yui-editor-panel .yui-toolbar-container .bd {
695 background-color: #ffffff;
698 /* This image is the one used to place the blankimage placeholder into the editor when you click on Insert an Image */
699 .yui-editor-blankimage {
700 background-image: url( blankimage.png );
703 .yui-skin-sam .yui-editor-container .yui-resize-handle-br {
704 /* Make the handle a little bigger than the default */
707 /* Resposition the image */
708 background-position: -20px -60px;
709 /* Kill the hover on the handle */
710 background-color: transparent;