Fixes and additions and doc updates

clog-element.lisp

@@ -176,7 +176,18 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric access-key (clog-element)
-  (:documentation "Get/Setf access-key."))
+  (:documentation "Get/Setf access-key. Used for hot key access to element.
+[special key] + Access_Key
+
+   The [special key] per browser and platform is:
+  
+    Browser              Windows       Linux           Mac
+    -----------------    -------       -----           ---
+    Internet Explorer     [Alt]         N/A            N/A
+    Chrome                [Alt]        [Alt]     [Control][Alt]
+    Firefox           [Alt][Shift] [Alt][Shift]  [Control][Alt]
+    Safari                [Alt]         N/A      [Control][Alt]
+    Opera 15+             [Alt]        [Alt]          [Alt]"))
 
 (defmethod access-key ((obj clog-element))
   (property obj "accessKey"))
@@ -193,7 +204,8 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric advisory-title (clog-element)
-  (:documentation "Get/Setf advisory-title."))
+  (:documentation "Get/Setf advisory title of Element, usually
+used for body and image maps."))
 
 (defmethod advisory-title ((obj clog-element))
   (property obj "title"))
@@ -210,7 +222,9 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric class-name (clog-element)
-  (:documentation "Get/Setf class-name."))
+  (:documentation "Get/Setf class-name. CSS Class name, can be multiple
+seperated by <space>. See add-class, remove-class and toggle-class methods
+for adding and removing individual or groups of classes in an easier way."))
 
 (defmethod class-name ((obj clog-element))
   (property obj "className"))
@@ -227,7 +241,8 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;
 
 (defgeneric editablep (clog-element)
-  (:documentation "Get/Setf editable."))
+  (:documentation "Get/Setf editable. This will make almost any element with
+content editable, even non-form types in most browsers."))
 
 (defmethod editablep ((obj clog-element))
   (js-true-p (property obj "isContentEditable")))
@@ -244,7 +259,10 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric draggablep (clog-element)
-  (:documentation "Get/Setf draggablep."))
+  (:documentation "Get/Setf draggablep. In order to make an object draggable
+in addition to Draggable being true the on-drag-start event _must_ be bound
+as well to set the drag-text. To receive a drop, you need to bind on-drop.
+See clog-base.lisp"))
 
 (defmethod draggablep ((obj clog-element))
   (js-true-p (property obj "draggable")))
@@ -261,7 +279,10 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;
 
 (defgeneric hiddenp (clog-element)
-  (:documentation "Get/Setf hiddenp."))
+  (:documentation "Get/Setf hiddenp. The hidden property will make an element
+invisible, however unlike visiblep, hiddenp implies the element is semantically
+not relevant not just visually and will _also_ remove it from layout similar to
+setting display (None)."))
 
 (defmethod hiddenp ((obj clog-element))
   (js-true-p (property obj "hidden")))
@@ -273,12 +294,42 @@ HTML-ID must be unique."))
   (setf (property obj "hidden") (p-true-js value)))
 (defsetf hiddenp set-hiddenp)
 
+;;;;;;;;;;;;;;
+;; visiblep ;;
+;;;;;;;;;;;;;;
+
+(defgeneric visiblep (clog-element)
+  (:documentation "Get/Setf visiblep. This will cause the Element to no longer
+be visible but it will still take up space where it was in the layout. Use
+hiddenp to also remove from layout.
+Note: that each property, visiblep, hiddenp and display (None) all work
+      independantly and do not reflect the actual client side visual state
+      but the property state. To check if an object is for sure not visible
+      would require checking all three properties."))
+
+(defmethod visiblep ((obj clog-element))
+  (equalp (property obj "visibility") "visible"))
+
+(defgeneric set-visiblep (clog-element value)
+  (:documentation "Set visiblep VALUE for CLOG-ELEMENT"))
+
+(defmethod set-visiblep ((obj clog-element) value)
+  (if value
+      (setf (property obj "visibility") "visible")
+      (setf (property obj "visibility") "hidden")))
+(defsetf visiblep set-visiblep)
+
 ;;;;;;;;;;;;;;;;
 ;; inner-html ;;
 ;;;;;;;;;;;;;;;;
 
 (defgeneric inner-html (clog-element)
-  (:documentation "Get/Setf inner-html."))
+  (:documentation "Get/Setf inner-html. This will completely replace the inner
+html of an element. This will remove any Elements within Element from the DOM.
+If those elements were created in CLOG they are still available and can be
+placed in the DOM again using the placement methods. However if they were
+created through html writes or otherwise not assigned an ID by CLOG, they are
+lost forever."))
 
 (defmethod inner-html ((obj clog-element))
   (jquery-query obj "html()"))
@@ -295,7 +346,8 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric outer-html (clog-element)
-  (:documentation "Get/Setf outer-html."))
+  (:documentation "Get/Setf outer-html. Returns the HTML for Element and all
+its contents"))
 
 (defmethod outer-html ((obj clog-element))
   (query obj "outerHTML"))
@@ -305,7 +357,8 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;;
 
 (defgeneric spellcheckp (clog-element)
-  (:documentation "Get/Setf spellcheckp."))
+  (:documentation "Get/Setf spellcheckp. If true Element is subject to browser
+spell checking if Editable is also true."))
 
 (defmethod spellcheckp ((obj clog-element))
   (js-true-p (property obj "spellcheck")))
@@ -339,7 +392,11 @@ HTML-ID must be unique."))
 ;;;;;;;;;;
 
 (defgeneric text (clog-element)
-  (:documentation "Get/Setf text."))
+  (:documentation "Get/Setf text.
+
+<tag>Text Content</tag> - Text content is the content contained by the
+                          tag. This should not be confused with the
+                          'Value' of a Form Tag. (See clog-form.lisp)"))
 
 (defmethod text ((obj clog-element))
   (jquery-query obj "text()"))
@@ -358,7 +415,7 @@ HTML-ID must be unique."))
 (deftype text-direction-type () '(member :ltr :rtl))
 
 (defgeneric text-direction (clog-element)
-  (:documentation "Get/Setf text-direction."))
+  (:documentation "Get/Setf BiDi text-direction."))
 
 (defmethod text-direction ((obj clog-element))
   (property obj "dir"))
@@ -392,7 +449,8 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;;
 
 (defgeneric client-left (clog-element)
-  (:documentation "Get client-left."))
+  (:documentation "Get client-left. The width of the left border of an element
+in pixels. It does not include the margin or padding."))
 
 (defmethod client-left ((obj clog-element))
   (property obj "clientLeft"))
@@ -402,37 +460,43 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric client-top (clog-element)
-  (:documentation "Get client-top."))
+  (:documentation "Get client-top. The width of the top border of an element
+in pixels. It does not include the margin or padding."))
 
 (defmethod client-top ((obj clog-element))
   (property obj "clientTop"))
 
-;;;;;;;;;;;;;;;;;;;
-;; client-bottom ;;
-;;;;;;;;;;;;;;;;;;;
-
-(defgeneric client-bottom (clog-element)
-  (:documentation "Get client-bottom."))
-
-(defmethod client-bottom ((obj clog-element))
-  (property obj "clientBottom"))
-
 ;;;;;;;;;;;;;;;;;;
-;; client-right ;;
+;; client-width ;;
 ;;;;;;;;;;;;;;;;;;
 
-(defgeneric client-right (clog-element)
+(defgeneric client-width (clog-element)
-  (:documentation "Get client-right."))
+  (:documentation "Get client-width. Inner width of an element in pixels.
+CSS width + CSS padding - width of vertical scrollbar (if present)
+Does not include the border or margin."))
 
-(defmethod client-right ((obj clog-element))
+(defmethod client-width ((obj clog-element))
-  (property obj "clientRight"))
+  (property obj "clientWidth"))
+
+;;;;;;;;;;;;;;;;;;;
+;; client-height ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric client-height (clog-element)
+  (:documentation "Get client-right. Inner height of an element in pixels.
+CSS height + CSS padding - height of horizontal scrollbar (if present)
+Does not include the border or margin."))
+
+(defmethod client-height ((obj clog-element))
+  (property obj "clientHeight"))
 
 ;;;;;;;;;;;;;;;;;
 ;; offset-left ;;
 ;;;;;;;;;;;;;;;;;
 
 (defgeneric offset-left (clog-element)
-  (:documentation "Get offset-left."))
+  (:documentation "Get offset-left. The width from parent element border to
+child border left."))
 
 (defmethod offset-left ((obj clog-element))
   (property obj "offsetLeft"))
@@ -442,37 +506,41 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric offset-top (clog-element)
-  (:documentation "Get offset-top."))
+  (:documentation "Get offset-top. The width from parent element border to
+child border top."))
 
 (defmethod offset-top ((obj clog-element))
   (property obj "offsetTop"))
 
-;;;;;;;;;;;;;;;;;;;
-;; offset-bottom ;;
-;;;;;;;;;;;;;;;;;;;
-
-(defgeneric offset-bottom (clog-element)
-  (:documentation "Get offset-bottom."))
-
-(defmethod offset-bottom ((obj clog-element))
-  (property obj "offsetBottom"))
-
 ;;;;;;;;;;;;;;;;;;
-;; offset-right ;;
+;; offset-width ;;
 ;;;;;;;;;;;;;;;;;;
 
-(defgeneric offset-right (clog-element)
+(defgeneric offset-width (clog-element)
-  (:documentation "Get offset-right."))
+  (:documentation "Get offset-width. CSS width + CSS padding + width of
+vertical scrollbar (if present) + Border"))
 
-(defmethod offset-right ((obj clog-element))
+(defmethod offset-width ((obj clog-element))
-  (property obj "offsetRight"))
+  (property obj "offsetWidth"))
+
+;;;;;;;;;;;;;;;;;;;
+;; offset-height ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric offset-height (clog-element)
+  (:documentation "Get offset-height. CSS height + CSS padding + height of
+horizontal scrollbar (if present) + Border"))
+
+(defmethod offset-height ((obj clog-element))
+  (property obj "offsetHeight"))
 
 ;;;;;;;;;;;;;;;;;
 ;; scroll-left ;;
 ;;;;;;;;;;;;;;;;;
 
 (defgeneric scroll-left (clog-element)
-  (:documentation "Get scroll-left."))
+  (:documentation "Get scroll-left. The number of pixels that an element's
+content is scrolled to the left. For RTL languages is negative."))
 
 (defmethod scroll-left ((obj clog-element))
   (property obj "scrollLeft"))
@@ -489,7 +557,8 @@ HTML-ID must be unique."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric scroll-top (clog-element)
-  (:documentation "Get scroll-top."))
+  (:documentation "Get scroll-top. The number of pixels that an element's
+content has been scrolled upward."))
 
 (defmethod scroll-top ((obj clog-element))
   (property obj "scrollTop"))
@@ -501,25 +570,27 @@ HTML-ID must be unique."))
   (setf (property obj "scrollTop") value))
 (defsetf scroll-top set-scroll-top)
 
-;;;;;;;;;;;;;;;;;;;
-;; scroll-bottom ;;
-;;;;;;;;;;;;;;;;;;;
-
-(defgeneric scroll-bottom (clog-element)
-  (:documentation "Get scroll-bottom."))
-
-(defmethod scroll-bottom ((obj clog-element))
-  (property obj "scrollBottom"))
-
 ;;;;;;;;;;;;;;;;;;
-;; scroll-right ;;
+;; scroll-width ;;
 ;;;;;;;;;;;;;;;;;;
 
-(defgeneric scroll-right (clog-element)
+(defgeneric scroll-width (clog-element)
-  (:documentation "Get scroll-right."))
+  (:documentation "Get scroll-width. Either the width in pixels of the content
+of an element or the width of the element itself, whichever is greater."))
 
-(defmethod scroll-right ((obj clog-element))
+(defmethod scroll-width ((obj clog-element))
-  (property obj "scrollRight"))
+  (property obj "scrollWidth"))
+
+;;;;;;;;;;;;;;;;;;;
+;; scroll-height ;;
+;;;;;;;;;;;;;;;;;;;
+
+(defgeneric scroll-height (clog-element)
+  (:documentation "Get scroll-height. Height of an element's content, including
+content not visible on the screen due to overflow."))
+
+(defmethod scroll-height ((obj clog-element))
+  (property obj "scrollHeight"))
 
 ;;;;;;;;;;;;;;
 ;; html-tag ;;
@@ -543,7 +614,9 @@ HTML-ID must be unique."))
 (deftype box-sizing-type () '(member :content-box :border-box))
 
 (defgeneric box-sizing (clog-element)
-  (:documentation "Get/Setf box-sizing."))
+  (:documentation "Get/Setf box-sizing. Affects if height and width
+properteries represent just the content or the border, marging, padding,
+scroll and conent area as a whole. The default is content-box"))
 
 (defmethod box-sizing ((obj clog-element))
   (style obj "box-sizing"))
@@ -563,7 +636,8 @@ HTML-ID must be unique."))
   '(member :none :left :right :both :inline-start :inline-end))
 
 (defgeneric clear-side (clog-element)
-  (:documentation "Get/Setf clear-side."))
+  (:documentation "Get/Setf clear-side. When using 'float' for layout sets
+if the right or left side of block should be clear of any 'floated' Element."))
 
 (defmethod clear-side ((obj clog-element))
   (style obj "clear"))
@@ -603,7 +677,25 @@ elements wrap around it."))
 (deftype display-type () '(member :none :block :inline :inline-block :flex))
 
 (defgeneric display (clog-element)
-  (:documentation "Get/Setf display."))
+  (:documentation "Get/Setf display. Display sets the CSS Display property that
+handles how elements are treated by the browser layout engine.
+   
+    Common Values:
+
+    none         - Remove Element from layout but remain in the DOM this is
+                   similar to hiddenp, but not like visiblep that makes the
+                   element not visible but still take up space in layout.
+   
+    block        - Displays an element starting on a new line and stretches
+                   out to the left and right as far as it can. e.g. <div> by
+                   default
+   
+    inline       - Wraps with text in a paragraph. e.g. <span> by default
+   
+    inline-block - Flows with paragraph but will always fill from left to
+                   right.
+   
+    flex         - Use the flexbox model"))
 
 (defmethod display ((obj clog-element))
   (style obj "display"))
@@ -622,7 +714,8 @@ elements wrap around it."))
 (deftype overflow-type () '(member :visible :hidden :clip :scroll :auto))
 
 (defgeneric overflow (clog-element)
-  (:documentation "Get/Setf overflow."))
+  (:documentation "Get/Setf overflow.  How to handle overflow of contents of
+an element's box. The default is visible - no clipping."))
 
 (defmethod overflow ((obj clog-element))
   (style obj "overflow"))
@@ -641,7 +734,8 @@ elements wrap around it."))
 (deftype overflow-x-type () '(member :visible :hidden :clip :scroll :auto))
 
 (defgeneric overflow-x (clog-element)
-  (:documentation "Get/Setf overflow-x."))
+  (:documentation "Get/Setf overflow-x. How to handle overflow of contents of
+an element's box for X. The default is Visible - no clipping."))
 
 (defmethod overflow-x ((obj clog-element))
   (style obj "overflow-x"))
@@ -660,7 +754,8 @@ elements wrap around it."))
 (deftype overflow-y-type () '(member :visible :hidden :clip :scroll :auto))
 
 (defgeneric overflow-y (clog-element)
-  (:documentation "Get/Setf overflow-y."))
+  (:documentation "Get/Setf overflow-y. How to handle overflow of contents of
+an element's box for Y. The default is Visible - no clipping."))
 
 (defmethod overflow-y ((obj clog-element))
   (style obj "overflow-y"))
@@ -677,7 +772,9 @@ elements wrap around it."))
 ;;;;;;;;;;;;;
 
 (defgeneric z-index (clog-element)
-  (:documentation "Get/Setf z-index."))
+  (:documentation "Get/Setf z-index. Set stack order of element.
+Note: z-index only works on Elements with Position Type of absolute,
+      relative and fixed."))
 
 (defmethod z-index ((obj clog-element))
   (style obj "z-index"))
@@ -693,10 +790,12 @@ elements wrap around it."))
 ;; resizable ;;
 ;;;;;;;;;;;;;;;
 
-(deftype resizable-type () '(member :none :both :horizontal :vertical :block :inline))
+(deftype resizable-type ()
+  '(member :none :both :horizontal :vertical :block :inline))
 
 (defgeneric resizable (clog-element)
-  (:documentation "Get/Setf resizable."))
+  (:documentation "Get/Setf resizable. If overflow is not set to visible,
+resizeable sets if element can be resized by user."))
 
 (defmethod resizable ((obj clog-element))
   (style obj "resize"))
@@ -715,7 +814,16 @@ elements wrap around it."))
 (deftype positioning-type () '(member :static :relative :absolute :sticky :fixed))
 
 (defgeneric positioning (clog-element)
-  (:documentation "Get/Setf positioning."))
+  (:documentation "Get/Setf positioning. Determins how the properties left, right,
+top and bottom are interpreted.
+
+   Static   - According to document flow, position properties have no
+              affect.
+   Absolute - Position properties are relative to the first non-static
+              element in the DOM before Element
+   Fixed    - Position properties are relative to browser window
+   Relative - Position properties are relative to where the static position
+              of the element would in the normal document flow."))
 
 (defmethod positioning ((obj clog-element))
   (style obj "position"))
@@ -842,7 +950,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;
 
 (defgeneric box-height (clog-element)
-  (:documentation "Get/Setf box-height."))
+  (:documentation "Get/Setf box-height. Height based on box sizing."))
 
 (defmethod box-height ((obj clog-element))
   (style obj "height"))
@@ -859,7 +967,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;
 
 (defgeneric box-width (clog-element)
-  (:documentation "Get/Setf box-width."))
+  (:documentation "Get/Setf box-width. Width based on box sizing."))
 
 (defmethod box-width ((obj clog-element))
   (style obj "width"))
@@ -956,31 +1064,19 @@ parent in the DOM."))
   (setf (style obj "max-height") value))
 (defsetf maximum-height set-maximum-height)
 
-;;;;;;;;;;;;;;
+;;  For reference:
-;; visiblep ;;
+;;  | Margin | Border | Padding | Scroll | [Element] | Scroll | Padding ...
-;;;;;;;;;;;;;;
+;;
-
+;;  Height and Width of Element are in part of clog-base
-(defgeneric visiblep (clog-element)
+;;  All the following have the advantage of the CSS related size properties
-  (:documentation "Get/Setf visiblep."))
+;;  in that the results are always pixels and numeric.
-
-(defmethod visiblep ((obj clog-element))
-  (equalp (property obj "visibility") "visible"))
-
-(defgeneric set-visiblep (clog-element value)
-  (:documentation "Set visiblep VALUE for CLOG-ELEMENT"))
-
-(defmethod set-visiblep ((obj clog-element) value)
-  (if value
-      (setf (property obj "visibility") "visible")
-      (setf (property obj "visibility") "hidden")))
-(defsetf visiblep set-visiblep)
 
 ;;;;;;;;;;;;;;;;;;
 ;; inner-height ;;
 ;;;;;;;;;;;;;;;;;;
 
 (defgeneric inner-height (clog-element)
-  (:documentation "Get/Setf inner-height."))
+  (:documentation "Get/Setf inner-height. Includes padding but not border."))
 
 (defmethod inner-height ((obj clog-element))
   (jquery-query obj "innerHeight()"))
@@ -997,7 +1093,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;
 
 (defgeneric inner-width (clog-element)
-  (:documentation "Get/Setf inner-width."))
+  (:documentation "Get/Setf inner-width. Includes padding but not border."))
 
 (defmethod inner-width ((obj clog-element))
   (jquery-query obj "innerWidth()"))
@@ -1014,7 +1110,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;
 
 (defgeneric outer-height (clog-element)
-  (:documentation "Get outer-height."))
+  (:documentation "Get outer-height. Includes padding and border but not margin."))
 
 (defmethod outer-height ((obj clog-element))
   (jquery-query obj "outerHeight()"))
@@ -1024,7 +1120,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;
 
 (defgeneric outer-width (clog-element)
-  (:documentation "Get outer-width."))
+  (:documentation "Get outer-width. Includes padding and border but not margin."))
 
 (defmethod outer-width ((obj clog-element))
   (jquery-query obj "outerWidth()"))
@@ -1034,7 +1130,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric outer-height-to-margin (clog-element)
-  (:documentation "Get outer-height-to-margin."))
+  (:documentation "Get outer-height-to-margin. Includes padding and border and margin."))
 
 (defmethod outer-height-to-margin ((obj clog-element))
   (jquery-query obj "outerHeight(true)"))
@@ -1044,7 +1140,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric outer-width-to-margin (clog-element)
-  (:documentation "Get outer-width-to-margin."))
+  (:documentation "Get outer-width-to-margin. Includes padding and border and margin."))
 
 (defmethod outer-width-to-margin ((obj clog-element))
   (jquery-query obj "outerWidth(true)"))
@@ -1087,6 +1183,8 @@ parent in the DOM."))
 ;; background-attachment ;;
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(deftype background-attachment-type () '(member :scroll :fixed :local))
+
 (defgeneric background-attachment (clog-element)
   (:documentation "Get/Setf background-attachment."))
 
@@ -1122,7 +1220,8 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric background-image (clog-element)
-  (:documentation "Get/Setf background-image url."))
+  (:documentation "Get/Setf background-image url. proper syntax is
+'url(...)' | nil to clear"))
 
 (defmethod background-image ((obj clog-element))
   (style obj "background-image"))
@@ -1141,7 +1240,8 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric background-position (clog-element)
-  (:documentation "Get/Setf background-position."))
+  (:documentation "Get/Setf background-position. combination of 2 -
+left/right/center/top/bottom | %x %y | x y"))
 
 (defmethod background-position ((obj clog-element))
   (style obj "background-position"))
@@ -1157,8 +1257,12 @@ parent in the DOM."))
 ;; background-origin ;;
 ;;;;;;;;;;;;;;;;;;;;;;;
 
+(deftype background-origin-type ()
+  '(member :border-box :padding-box :content-box))
+
 (defgeneric background-origin (clog-element)
-  (:documentation "Get/Setf background-origin."))
+  (:documentation "Get/Setf background-origin. Background position property
+is relative to origin of: padding-box|border-box|content-box"))
 
 (defmethod background-origin ((obj clog-element))
   (style obj "background-origin"))
@@ -1174,8 +1278,12 @@ parent in the DOM."))
 ;; background-repeat ;;
 ;;;;;;;;;;;;;;;;;;;;;;;
 
+(deftype background-repeat-type ()
+  '(member :repeat-x :repeat-y :repeat :space :round :no-repeat))
+
 (defgeneric background-repeat (clog-element)
-  (:documentation "Get/Setf background-repeat."))
+  (:documentation "Get/Setf background-repeat. repeat-x | repeat-y |
+[ repeat | space | round | no-repeat ]{1,2}"))
 
 (defmethod background-repeat ((obj clog-element))
   (style obj "background-repeat"))
@@ -1191,8 +1299,12 @@ parent in the DOM."))
 ;; background-clip ;;
 ;;;;;;;;;;;;;;;;;;;;;
 
+(deftype background-clip-type ()
+  '(member :border-box :padding-box :content-box :text))
+    
 (defgeneric background-clip (clog-element)
-  (:documentation "Get/Setf background-clip."))
+  (:documentation "Get/Setf background-clip. If an element's background extends
+underneath its border box, padding box, or content box."))
 
 (defmethod background-clip ((obj clog-element))
   (style obj "background-clip"))
@@ -1209,7 +1321,7 @@ parent in the DOM."))
 ;;;;;;;;;;;;;;;;;;;;;
 
 (defgeneric background-size (clog-element)
-  (:documentation "Get/Setf background-size."))
+  (:documentation "Get/Setf background-size. auto | w h | % = cover of parent | contain"))
 
 (defmethod background-size ((obj clog-element))
   (style obj "background-size"))
@@ -1225,18 +1337,25 @@ parent in the DOM."))
 ;; border ;;
 ;;;;;;;;;;;;
 
+(deftype border-style-type ()
+  '(member :none :hidden :dotted :dashed :solid :double :groove :ridge :inset :outset))
+
 (defgeneric border (clog-element)
-  (:documentation "Get/Setf border."))
+  (:documentation "Get border. <line-width> <line-style> <line-color>"))
 
 (defmethod border ((obj clog-element))
   (style obj "border"))
 
-(defgeneric set-border (clog-element value)
+;;;;;;;;;;;;;;;;
-  (:documentation "Set border VALUE for CLOG-ELEMENT"))
+;; set-border ;;
+;;;;;;;;;;;;;;;;
 
-(defmethod set-border ((obj clog-element) value)
+(defgeneric set-border (clog-element line-width line-style line-color)
-  (setf (style obj "border") value))
+  (:documentation "Set border width style and color.
-(defsetf border set-border)
+line-width - size or medium|thin|thick|length|initial|inherit"))
+
+(defmethod set-border ((obj clog-element) line-width line-style line-color)
+  (setf (style obj "border") (format nil "~A ~A ~A" line-width line-style line-color)))
 
 ;;;;;;;;;;;;;;;;;;;
 ;; border-radius ;;
@@ -1266,7 +1385,7 @@ parent in the DOM."))
   (style obj "box-shadow"))
 
 (defgeneric set-box-shadow (clog-element value)
-  (:documentation "Set box-shadow VALUE for CLOG-ELEMENT"))
+  (:documentation "Set box-shadow. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator"))
 
 (defmethod set-box-shadow ((obj clog-element) value)
   (setf (style obj "box-shadow") value))
@@ -1276,51 +1395,62 @@ parent in the DOM."))
 ;; outline ;;
 ;;;;;;;;;;;;;
 
-(defgeneric outline (clog-element)
+(deftype outline-style-type ()
-  (:documentation "Get/Setf outline."))
+  '(member :none :hidden :dotted :dashed :solid :double
+    :groove :ridge :inset :outset))
 
-(defmethod border ((obj clog-element))
+(defgeneric outline (clog-element) 
+  (:documentation "Get outline. <line-color> <line-style> <line-width>"))
+
+(defmethod outline ((obj clog-element))
   (style obj "outline"))
 
-(defgeneric set-outline (clog-element value)
+;;;;;;;;;;;;;;;;;
-  (:documentation "Set outline VALUE for CLOG-ELEMENT"))
+;; set-outline ;;
+;;;;;;;;;;;;;;;;;
 
-(defmethod set-outline ((obj clog-element) value)
+(defgeneric set-outline (clog-element line-color line-style line-width)
-  (setf (style obj "outline") value))
+  (:documentation "Set outline <line-color> <line-style> <line-width>
-(defsetf outline set-outline)
+line-width -  size or medium|thin|thick|length|initial|inherit"))
+
+(defmethod set-outline ((obj clog-element) line-color line-style line-width)
+  (setf (style obj "outline") (format nil "~A ~A ~A" line-color line-style line-width)))
 
 ;;;;;;;;;;;;
 ;; margin ;;
 ;;;;;;;;;;;;
 
 (defgeneric margin (clog-element)
-  (:documentation "Get/Setf margin."))
+  (:documentation "Get margin."))
 
 (defmethod margin ((obj clog-element))
   (style obj "margin"))
 
-(defgeneric set-margin (clog-element value)
+;;;;;;;;;;;;;;;;
-  (:documentation "Set margin VALUE for CLOG-ELEMENT"))
+;; set-margin ;;
+;;;;;;;;;;;;;;;;
 
-(defmethod set-margin ((obj clog-element) value)
+(defgeneric set-margin (clog-element top right bottom left)
-  (setf (style obj "margin") value))
+  (:documentation "Set margins, Each can be - <length>|auto|initial|inherit"))
-(defsetf margin set-margin)
+
+(defmethod set-margin ((obj clog-element) top right bottom left)
+  (setf (style obj "margin") (format nil "~A ~A ~A ~A" top right bottom left)))
 
 ;;;;;;;;;;;;;
 ;; padding ;;
 ;;;;;;;;;;;;;
 
 (defgeneric padding (clog-element)
-  (:documentation "Get/Setf padding."))
+  (:documentation "Get padding."))
 
 (defmethod padding ((obj clog-element))
   (style obj "padding"))
 
-(defgeneric set-padding (clog-element value)
+(defgeneric set-padding (clog-element top right bottom left)
-  (:documentation "Set padding VALUE for CLOG-ELEMENT"))
+  (:documentation "Set padding. Each can be - <length>|initial|inherit"))
 
-(defmethod set-padding ((obj clog-element) value)
+(defmethod set-padding ((obj clog-element) top right bottom left)
-  (setf (style obj "padding") value))
+  (setf (style obj "padding") (format nil "~A ~A ~A ~A" top right bottom left)))
 (defsetf padding set-padding)
 
 ;;;;;;;;;;;;
@@ -1328,7 +1458,11 @@ parent in the DOM."))
 ;;;;;;;;;;;;
 
 (defgeneric cursor (clog-element)
-  (:documentation "Get/Setf cursor."))
+  (:documentation "Get/Setf cursor. Sets the cursor to a standard type or an
+image if set to url(url_to_image). When using a url is best to suggest an
+alternate cursor, e.g. 'url(url_to_image),auto'
+A list of standard cursor types can be found at:
+  http://www.w3schools.com/cssref/pr_class_cursor.asp"))
 
 (defmethod cursor ((obj clog-element))
   (style obj "cursor"))
@@ -1344,18 +1478,46 @@ parent in the DOM."))
 ;; font ;;
 ;;;;;;;;;;
 
+(deftype font-style-type () '(member :normal :italic :unique))
+
+(deftype font-variant-type () '(member :normal :small-caps))
+
 (defgeneric font (clog-element)
   (:documentation "Get/Setf font."))
 
 (defmethod font ((obj clog-element))
   (style obj "font"))
 
-(defgeneric set-font (clog-element value)
+(defgeneric set-font
-  (:documentation "Set font VALUE for CLOG-ELEMENT"))
+    (clog-element font-style font-variant font-weight font-height font-family)
+(:documentation "Set font."))
 
-(defmethod set-font ((obj clog-element) value)
+(defmethod set-font
-  (setf (style obj "font") value))
+    ((obj clog-element)
-(defsetf font set-font)
+     font-style font-variant font-weight font-height font-family)
+  (setf (style obj "font")
+	(format nil "~A ~A ~A ~A ~A"
+		font-style font-variant font-weight font-height font-family)))
+
+;;;;;;;;;;;;;;;;;;;;
+;; text-alignment ;;
+;;;;;;;;;;;;;;;;;;;;
+
+(deftype text-alignment-type ()
+  '(member :start :end :left :right :center :justify :match-parent))
+
+(defgeneric text-alignment (clog-element)
+  (:documentation "Get/Setf text-alignment."))
+
+(defmethod text-alignment ((obj clog-element))
+  (style obj "text-align"))
+
+(defgeneric set-text-alignment (clog-element value)
+  (:documentation "Set text-alignment VALUE for CLOG-ELEMENT"))
+
+(defmethod set-text-alignment ((obj clog-element) value)
+  (setf (style obj "text-align") value))
+(defsetf text-alignment set-text-alignment)
 
 ;;;;;;;;;;;;;;;;;;;;
 ;; vertical-align ;;
@@ -1444,9 +1606,8 @@ html id than Element_Type will have an ID of undefined and therefore attached
 to no actual HTML elemen."))
 
 (defmethod first-child ((obj clog-element))
-  (make-clog-element
+  (attach-as-child
-   (connection-id obj)
+   obj (jquery-execute obj (format nil "children().first().attr('id');"))))
-   (jquery-execute obj (format nil "children().first().attr('id');"))))
 
 ;;;;;;;;;;;;;;;;;;
 ;; next-sibling ;;
@@ -1458,6 +1619,4 @@ html id than Element_Type will have an ID of undefined and therefore attached
 to no actual HTML elemen."))
 
 (defmethod next-sibling ((obj clog-element))
-  (make-clog-element
+  (attach-as-child obj (jquery-execute obj (format nil "next().attr('id');"))))
-   (connection-id obj)
-   (jquery-execute obj (format nil "next().attr('id');"))))

clog.lisp

@@ -125,6 +125,7 @@ application."
   (class-name          generic-function)
   (editablep           generic-function)
   (draggablep          generic-function)
+  (visiblep            generic-function)
   (hiddenp             generic-function)
   (inner-html          generic-function)
   (outer-html          generic-function)
@@ -136,12 +137,12 @@ application."
   (language-code       generic-function)
   (client-left         generic-function)
   (client-top          generic-function)
-  (client-bottom       generic-function)
+  (client-width        generic-function)
-  (client-right        generic-function)
+  (client-height       generic-function)
   (offset-left         generic-function)
   (offset-top          generic-function)
-  (offset-bottom       generic-function)
+  (offset-width        generic-function)
-  (offset-right        generic-function)
+  (offset-height       generic-function)
   (html-tag            generic-function)
 
   "CLOG-Element - Styles"
@@ -178,7 +179,6 @@ application."
   (maximum-width              generic-function)
   (minimum-height             generic-function)
   (minimum-width              generic-function)
-  (visiblep               generic-function)
   (inner-height               generic-function)
   (inner-width                generic-function)
   (outer-height               generic-function)
@@ -187,22 +187,37 @@ application."
   (outer-width-to-margin      generic-function)
   (color                      generic-function)
   (opacity                    generic-function)
+  (background-attachment-type type)
   (background-attachment      generic-function)
   (background-color           generic-function)
   (background-image           generic-function)
   (background-position        generic-function)
+  (background-origin-type     type)
   (background-origin          generic-function)
+  (background-repeat-type     type)
   (background-repeat          generic-function)
+  (background-clip-type       type)
   (background-clip            generic-function)
   (background-size            generic-function)
+  (border-style-type          type)
   (border                     generic-function)
+  (set-border                 generic-function)
   (border-radius              generic-function)
   (box-shadow                 generic-function)
+  (outline-style-type         type)
   (outline                    generic-function)
+  (set-outline                generic-function)
   (margin                     generic-function)
+  (set-margin                 generic-function)
   (padding                    generic-function)
+  (set-padding                generic-function)
   (cursor                     generic-function)
+  (font-style-type            type)
+  (font-variant-type          type)
   (font                       generic-function)
+  (set-font                   generic-function)
+  (text-alignment-type        type)
+  (text-alignment             generic-function)
   (vertical-align-type        type)
   (vertical-align             generic-function)
 

doc/clog-manual.html

@@ -610,7 +610,19 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AACCESS-KEY-20GENERIC-FUNCTION-29" >ACCESS-KEY</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf access-key.</p></li>
+<p>Get/Setf access-key. Used for hot key access to element.
+[special key][] + Access_Key</p>
+
+<p>The [special key][] per browser and platform is:</p>
+
+<pre><code>Browser              Windows       Linux           Mac
+-----------------    -------       -----           ---
+Internet Explorer     [Alt]         N/A            N/A
+Chrome                [Alt]        [Alt]     [Control][Alt]
+Firefox           [Alt][Shift] [Alt][Shift]  [Control][Alt]
+Safari                [Alt]         N/A      [Control][Alt]
+Opera 15+             [Alt]        [Alt]          [Alt]
+</code></pre></li>
 </ul>
 
 <p><a id='x-28CLOG-3AADVISORY-TITLE-20GENERIC-FUNCTION-29'></a></p>
@@ -618,7 +630,8 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AADVISORY-TITLE-20GENERIC-FUNCTION-29" >ADVISORY-TITLE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf advisory-title.</p></li>
+<p>Get/Setf advisory title of Element, usually
+used for body and image maps.</p></li>
 </ul>
 
 <p><a id='x-28CLASS-NAME-20GENERIC-FUNCTION-29'></a></p>
@@ -626,7 +639,9 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLASS-NAME-20GENERIC-FUNCTION-29" >CLASS-NAME</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf class-name.</p></li>
+<p>Get/Setf class-name. CSS Class name, can be multiple
+seperated by <space>. See add-class, remove-class and toggle-class methods
+for adding and removing individual or groups of classes in an easier way.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AEDITABLEP-20GENERIC-FUNCTION-29'></a></p>
@@ -634,7 +649,8 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AEDITABLEP-20GENERIC-FUNCTION-29" >EDITABLEP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf editable.</p></li>
+<p>Get/Setf editable. This will make almost any element with
+content editable, even non-form types in most browsers.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ADRAGGABLEP-20GENERIC-FUNCTION-29'></a></p>
@@ -642,7 +658,24 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ADRAGGABLEP-20GENERIC-FUNCTION-29" >DRAGGABLEP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf draggablep.</p></li>
+<p>Get/Setf draggablep. In order to make an object draggable
+in addition to Draggable being true the on-drag-start event <em>must</em> be bound
+as well to set the drag-text. To receive a drop, you need to bind on-drop.
+See clog-base.lisp</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AVISIBLEP-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AVISIBLEP-20GENERIC-FUNCTION-29" >VISIBLEP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
+
+<p>Get/Setf visiblep. This will cause the Element to no longer
+be visible but it will still take up space where it was in the layout. Use
+hiddenp to also remove from layout.
+Note: that each property, visiblep, hiddenp and display (None) all work
+      independantly and do not reflect the actual client side visual state
+      but the property state. To check if an object is for sure not visible
+      would require checking all three properties.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AHIDDENP-20GENERIC-FUNCTION-29'></a></p>
@@ -650,7 +683,10 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AHIDDENP-20GENERIC-FUNCTION-29" >HIDDENP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf hiddenp.</p></li>
+<p>Get/Setf hiddenp. The hidden property will make an element
+invisible, however unlike visiblep, hiddenp implies the element is semantically
+not relevant not just visually and will <em>also</em> remove it from layout similar to
+setting display (None).</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AINNER-HTML-20GENERIC-FUNCTION-29'></a></p>
@@ -658,7 +694,12 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AINNER-HTML-20GENERIC-FUNCTION-29" >INNER-HTML</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf inner-html.</p></li>
+<p>Get/Setf inner-html. This will completely replace the inner
+html of an element. This will remove any Elements within Element from the DOM.
+If those elements were created in <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> they are still available and can be
+placed in the DOM again using the placement methods. However if they were
+created through html writes or otherwise not assigned an ID by <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a>, they are
+lost forever.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AOUTER-HTML-20GENERIC-FUNCTION-29'></a></p>
@@ -666,7 +707,8 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOUTER-HTML-20GENERIC-FUNCTION-29" >OUTER-HTML</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf outer-html.</p></li>
+<p>Get/Setf outer-html. Returns the <code>HTML</code> for Element and all
+its contents</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ASPELLCHECKP-20GENERIC-FUNCTION-29'></a></p>
@@ -674,7 +716,8 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASPELLCHECKP-20GENERIC-FUNCTION-29" >SPELLCHECKP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf spellcheckp.</p></li>
+<p>Get/Setf spellcheckp. If true Element is subject to browser
+spell checking if Editable is also true.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ATAB-INDEX-20GENERIC-FUNCTION-29'></a></p>
@@ -690,7 +733,11 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ATEXT-20GENERIC-FUNCTION-29" >TEXT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf text.</p></li>
+<p>Get/Setf text.</p>
+
+<p><tag>Text Content</tag> - Text content is the content contained by the
+                          tag. This should not be confused with the
+                          'Value' of a Form Tag. (See clog-form.lisp)</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ATEXT-DIRECTION-TYPE-20-28TYPE-29-29'></a></p>
@@ -704,7 +751,7 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ATEXT-DIRECTION-20GENERIC-FUNCTION-29" >TEXT-DIRECTION</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf text-direction.</p></li>
+<p>Get/Setf BiDi text-direction.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ALANGUAGE-CODE-20GENERIC-FUNCTION-29'></a></p>
@@ -720,7 +767,8 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLIENT-LEFT-20GENERIC-FUNCTION-29" >CLIENT-LEFT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get client-left.</p></li>
+<p>Get client-left. The width of the left border of an element
+in pixels. It does not include the margin or padding.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ACLIENT-TOP-20GENERIC-FUNCTION-29'></a></p>
@@ -728,23 +776,28 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLIENT-TOP-20GENERIC-FUNCTION-29" >CLIENT-TOP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get client-top.</p></li>
+<p>Get client-top. The width of the top border of an element
+in pixels. It does not include the margin or padding.</p></li>
 </ul>
 
-<p><a id='x-28CLOG-3ACLIENT-BOTTOM-20GENERIC-FUNCTION-29'></a></p>
+<p><a id='x-28CLOG-3ACLIENT-WIDTH-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
-<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLIENT-BOTTOM-20GENERIC-FUNCTION-29" >CLIENT-BOTTOM</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLIENT-WIDTH-20GENERIC-FUNCTION-29" >CLIENT-WIDTH</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get client-bottom.</p></li>
+<p>Get client-width. Inner width of an element in pixels.
+CSS width + CSS padding - width of vertical scrollbar (if present)
+Does not include the border or margin.</p></li>
 </ul>
 
-<p><a id='x-28CLOG-3ACLIENT-RIGHT-20GENERIC-FUNCTION-29'></a></p>
+<p><a id='x-28CLOG-3ACLIENT-HEIGHT-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
-<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLIENT-RIGHT-20GENERIC-FUNCTION-29" >CLIENT-RIGHT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLIENT-HEIGHT-20GENERIC-FUNCTION-29" >CLIENT-HEIGHT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get client-right.</p></li>
+<p>Get client-right. Inner height of an element in pixels.
+CSS height + CSS padding - height of horizontal scrollbar (if present)
+Does not include the border or margin.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AOFFSET-LEFT-20GENERIC-FUNCTION-29'></a></p>
@@ -763,20 +816,22 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <p>Position in pixels from top relative to the document.</p></li>
 </ul>
 
-<p><a id='x-28CLOG-3AOFFSET-BOTTOM-20GENERIC-FUNCTION-29'></a></p>
+<p><a id='x-28CLOG-3AOFFSET-WIDTH-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
-<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOFFSET-BOTTOM-20GENERIC-FUNCTION-29" >OFFSET-BOTTOM</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOFFSET-WIDTH-20GENERIC-FUNCTION-29" >OFFSET-WIDTH</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get offset-bottom.</p></li>
+<p>Get offset-width. CSS width + CSS padding + width of
+vertical scrollbar (if present) + Border</p></li>
 </ul>
 
-<p><a id='x-28CLOG-3AOFFSET-RIGHT-20GENERIC-FUNCTION-29'></a></p>
+<p><a id='x-28CLOG-3AOFFSET-HEIGHT-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
-<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOFFSET-RIGHT-20GENERIC-FUNCTION-29" >OFFSET-RIGHT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOFFSET-HEIGHT-20GENERIC-FUNCTION-29" >OFFSET-HEIGHT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get offset-right.</p></li>
+<p>Get offset-height. CSS height + CSS padding + height of
+horizontal scrollbar (if present) + Border</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AHTML-TAG-20GENERIC-FUNCTION-29'></a></p>
@@ -800,7 +855,9 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABOX-SIZING-20GENERIC-FUNCTION-29" >BOX-SIZING</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf box-sizing.</p></li>
+<p>Get/Setf box-sizing. Affects if height and width
+properteries represent just the content or the border, marging, padding,
+scroll and conent area as a whole. The default is content-box</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ACLEAR-SIDE-TYPE-20-28TYPE-29-29'></a></p>
@@ -814,7 +871,8 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLEAR-SIDE-20GENERIC-FUNCTION-29" >CLEAR-SIDE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf clear-side.</p></li>
+<p>Get/Setf clear-side. When using 'float' for layout sets
+if the right or left side of block should be clear of any 'floated' Element.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AFLOAT-WRAP-TYPE-20-28TYPE-29-29'></a></p>
@@ -843,7 +901,26 @@ elements wrap around it.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ADISPLAY-20GENERIC-FUNCTION-29" >DISPLAY</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf display.</p></li>
+<p>Get/Setf display. Display sets the CSS Display property that
+handles how elements are treated by the browser layout engine.</p>
+
+<pre><code>Common Values:
+
+none         - Remove Element from layout but remain in the DOM this is
+               similar to hiddenp, but not like visiblep that makes the
+               element not visible but still take up space in layout.
+
+block        - Displays an element starting on a new line and stretches
+               out to the left and right as far as it can. e.g. &lt;div&gt; by
+               default
+
+inline       - Wraps with text in a paragraph. e.g. &lt;span&gt; by default
+
+inline-block - Flows with paragraph but will always fill from left to
+               right.
+
+flex         - Use the flexbox model
+</code></pre></li>
 </ul>
 
 <p><a id='x-28CLOG-3AOVERFLOW-TYPE-20-28TYPE-29-29'></a></p>
@@ -857,7 +934,8 @@ elements wrap around it.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOVERFLOW-20GENERIC-FUNCTION-29" >OVERFLOW</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf overflow.</p></li>
+<p>Get/Setf overflow.  How to handle overflow of contents of
+an element's box. The default is visible - no clipping.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AOVERFLOW-X-TYPE-20-28TYPE-29-29'></a></p>
@@ -871,7 +949,8 @@ elements wrap around it.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOVERFLOW-X-20GENERIC-FUNCTION-29" >OVERFLOW-X</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf overflow-x.</p></li>
+<p>Get/Setf overflow-x. How to handle overflow of contents of
+an element's box for X. The default is Visible - no clipping.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AOVERFLOW-Y-TYPE-20-28TYPE-29-29'></a></p>
@@ -885,7 +964,8 @@ elements wrap around it.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOVERFLOW-Y-20GENERIC-FUNCTION-29" >OVERFLOW-Y</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf overflow-y.</p></li>
+<p>Get/Setf overflow-y. How to handle overflow of contents of
+an element's box for Y. The default is Visible - no clipping.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AZ-INDEX-20GENERIC-FUNCTION-29'></a></p>
@@ -893,7 +973,9 @@ elements wrap around it.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AZ-INDEX-20GENERIC-FUNCTION-29" >Z-INDEX</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf z-index.</p></li>
+<p>Get/Setf z-index. Set stack order of element.
+Note: z-index only works on Elements with Position Type of absolute,
+      relative and fixed.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ARESIZABLE-TYPE-20-28TYPE-29-29'></a></p>
@@ -907,7 +989,8 @@ elements wrap around it.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ARESIZABLE-20GENERIC-FUNCTION-29" >RESIZABLE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf resizable.</p></li>
+<p>Get/Setf resizable. If overflow is not set to visible,
+resizeable sets if element can be resized by user.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3APOSITION-TYPE-20-28TYPE-29-29'></a></p>
@@ -921,7 +1004,16 @@ elements wrap around it.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3APOSITIONING-20GENERIC-FUNCTION-29" >POSITIONING</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf positioning.</p></li>
+<p>Get/Setf positioning. Determins how the properties left, right,
+top and bottom are interpreted.</p>
+
+<p>Static   - According to document flow, position properties have no
+              affect.
+   Absolute - Position properties are relative to the first non-static
+              element in the DOM before Element
+   Fixed    - Position properties are relative to browser window
+   Relative - Position properties are relative to where the static position
+              of the element would in the normal document flow.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3APOSITION-TOP-20GENERIC-FUNCTION-29'></a></p>
@@ -995,7 +1087,7 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABOX-HEIGHT-20GENERIC-FUNCTION-29" >BOX-HEIGHT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf box-height.</p></li>
+<p>Get/Setf box-height. Height based on box sizing.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABOX-WIDTH-20GENERIC-FUNCTION-29'></a></p>
@@ -1003,7 +1095,7 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABOX-WIDTH-20GENERIC-FUNCTION-29" >BOX-WIDTH</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf box-width.</p></li>
+<p>Get/Setf box-width. Width based on box sizing.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AMAXIMUM-HEIGHT-20GENERIC-FUNCTION-29'></a></p>
@@ -1038,14 +1130,6 @@ parent in the DOM.</p></li>
 <p>Get/Setf minimum-width.</p></li>
 </ul>
 
-<p><a id='x-28CLOG-3AVISIBLEP-20GENERIC-FUNCTION-29'></a></p>
-
-<ul>
-<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AVISIBLEP-20GENERIC-FUNCTION-29" >VISIBLEP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
-
-<p>Get/Setf visiblep.</p></li>
-</ul>
-
 <p><a id='x-28CLOG-3AINNER-HEIGHT-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
@@ -1083,7 +1167,7 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOUTER-HEIGHT-TO-MARGIN-20GENERIC-FUNCTION-29" >OUTER-HEIGHT-TO-MARGIN</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get outer-height-to-margin.</p></li>
+<p>Get outer-height-to-margin. Includes padding and border and margin.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AOUTER-WIDTH-TO-MARGIN-20GENERIC-FUNCTION-29'></a></p>
@@ -1091,7 +1175,7 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOUTER-WIDTH-TO-MARGIN-20GENERIC-FUNCTION-29" >OUTER-WIDTH-TO-MARGIN</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get outer-width-to-margin.</p></li>
+<p>Get outer-width-to-margin. Includes padding and border and margin.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ACOLOR-20GENERIC-FUNCTION-29'></a></p>
@@ -1110,6 +1194,12 @@ parent in the DOM.</p></li>
 <p>Get/Setf opacity.</p></li>
 </ul>
 
+<p><a id='x-28CLOG-3ABACKGROUND-ATTACHMENT-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-ATTACHMENT-TYPE-20-28TYPE-29-29" >BACKGROUND-ATTACHMENT-TYPE</a></span></span></span></li>
+</ul>
+
 <p><a id='x-28CLOG-3ABACKGROUND-ATTACHMENT-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
@@ -1131,7 +1221,8 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-IMAGE-20GENERIC-FUNCTION-29" >BACKGROUND-IMAGE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf background-image url.</p></li>
+<p>Get/Setf background-image url. proper syntax is
+'url(...)' | nil to clear</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABACKGROUND-POSITION-20GENERIC-FUNCTION-29'></a></p>
@@ -1139,7 +1230,14 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-POSITION-20GENERIC-FUNCTION-29" >BACKGROUND-POSITION</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf background-position.</p></li>
+<p>Get/Setf background-position. combination of 2 -
+left/right/center/top/bottom | %x %y | x y</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ABACKGROUND-ORIGIN-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-ORIGIN-TYPE-20-28TYPE-29-29" >BACKGROUND-ORIGIN-TYPE</a></span></span></span></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABACKGROUND-ORIGIN-20GENERIC-FUNCTION-29'></a></p>
@@ -1147,7 +1245,14 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-ORIGIN-20GENERIC-FUNCTION-29" >BACKGROUND-ORIGIN</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf background-origin.</p></li>
+<p>Get/Setf background-origin. Background position property
+is relative to origin of: padding-box|border-box|content-box</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ABACKGROUND-REPEAT-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-REPEAT-TYPE-20-28TYPE-29-29" >BACKGROUND-REPEAT-TYPE</a></span></span></span></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABACKGROUND-REPEAT-20GENERIC-FUNCTION-29'></a></p>
@@ -1155,7 +1260,14 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-REPEAT-20GENERIC-FUNCTION-29" >BACKGROUND-REPEAT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf background-repeat.</p></li>
+<p>Get/Setf background-repeat. repeat-x | repeat-y |
+[ repeat | space | round | no-repeat ][]{1,2}</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ABACKGROUND-CLIP-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-CLIP-TYPE-20-28TYPE-29-29" >BACKGROUND-CLIP-TYPE</a></span></span></span></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABACKGROUND-CLIP-20GENERIC-FUNCTION-29'></a></p>
@@ -1163,7 +1275,8 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-CLIP-20GENERIC-FUNCTION-29" >BACKGROUND-CLIP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf background-clip.</p></li>
+<p>Get/Setf background-clip. If an element's background extends
+underneath its border box, padding box, or content box.</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABACKGROUND-SIZE-20GENERIC-FUNCTION-29'></a></p>
@@ -1171,7 +1284,13 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABACKGROUND-SIZE-20GENERIC-FUNCTION-29" >BACKGROUND-SIZE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf background-size.</p></li>
+<p>Get/Setf background-size. auto | w h | % = cover of parent | contain</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ABORDER-STYLE-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ABORDER-STYLE-TYPE-20-28TYPE-29-29" >BORDER-STYLE-TYPE</a></span></span></span></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABORDER-20GENERIC-FUNCTION-29'></a></p>
@@ -1179,7 +1298,16 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ABORDER-20GENERIC-FUNCTION-29" >BORDER</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf border.</p></li>
+<p>Get border. <line-width> <line-style> <line-color></p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASET-BORDER-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-BORDER-20GENERIC-FUNCTION-29" >SET-BORDER</a></span></span> <span class="locative-args">CLOG-ELEMENT LINE-WIDTH LINE-STYLE LINE-COLOR</span></span></p>
+
+<p>Set border width style and color.
+line-width - size or medium|thin|thick|length|initial|inherit</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ABORDER-RADIUS-20GENERIC-FUNCTION-29'></a></p>
@@ -1198,12 +1326,27 @@ parent in the DOM.</p></li>
 <p>Get/Setf box-shadow.</p></li>
 </ul>
 
+<p><a id='x-28CLOG-3AOUTLINE-STYLE-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3AOUTLINE-STYLE-TYPE-20-28TYPE-29-29" >OUTLINE-STYLE-TYPE</a></span></span></span></li>
+</ul>
+
 <p><a id='x-28CLOG-3AOUTLINE-20GENERIC-FUNCTION-29'></a></p>
 
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AOUTLINE-20GENERIC-FUNCTION-29" >OUTLINE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf outline.</p></li>
+<p>Get outline. <line-color> <line-style> <line-width></p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASET-OUTLINE-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-OUTLINE-20GENERIC-FUNCTION-29" >SET-OUTLINE</a></span></span> <span class="locative-args">CLOG-ELEMENT LINE-COLOR LINE-STYLE LINE-WIDTH</span></span></p>
+
+<p>Set outline <line-color> <line-style> <line-width>
+line-width -  size or medium|thin|thick|length|initial|inherit</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3AMARGIN-20GENERIC-FUNCTION-29'></a></p>
@@ -1211,7 +1354,15 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AMARGIN-20GENERIC-FUNCTION-29" >MARGIN</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf margin.</p></li>
+<p>Get margin.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASET-MARGIN-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-MARGIN-20GENERIC-FUNCTION-29" >SET-MARGIN</a></span></span> <span class="locative-args">CLOG-ELEMENT TOP RIGHT BOTTOM LEFT</span></span></p>
+
+<p>Set margins, Each can be - <length>|auto|initial|inherit</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3APADDING-20GENERIC-FUNCTION-29'></a></p>
@@ -1219,7 +1370,15 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3APADDING-20GENERIC-FUNCTION-29" >PADDING</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf padding.</p></li>
+<p>Get padding.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ASET-PADDING-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-PADDING-20GENERIC-FUNCTION-29" >SET-PADDING</a></span></span> <span class="locative-args">CLOG-ELEMENT TOP RIGHT BOTTOM LEFT</span></span></p>
+
+<p>Set padding. Each can be - <length>|initial|inherit</p></li>
 </ul>
 
 <p><a id='x-28CLOG-3ACURSOR-20GENERIC-FUNCTION-29'></a></p>
@@ -1227,7 +1386,23 @@ parent in the DOM.</p></li>
 <ul>
 <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACURSOR-20GENERIC-FUNCTION-29" >CURSOR</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
 
-<p>Get/Setf cursor.</p></li>
+<p>Get/Setf cursor. Sets the cursor to a standard type or an
+image if set to url(url_to_image). When using a url is best to suggest an
+alternate cursor, e.g. 'url(url_to_image),auto'
+A list of standard cursor types can be found at:
+  http://www.w3schools.com/cssref/pr_class_cursor.asp</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3AFONT-STYLE-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3AFONT-STYLE-TYPE-20-28TYPE-29-29" >FONT-STYLE-TYPE</a></span></span></span></li>
+</ul>
+
+<p><a id='x-28CLOG-3AFONT-VARIANT-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3AFONT-VARIANT-TYPE-20-28TYPE-29-29" >FONT-VARIANT-TYPE</a></span></span></span></li>
 </ul>
 
 <p><a id='x-28CLOG-3AFONT-20GENERIC-FUNCTION-29'></a></p>
@@ -1238,6 +1413,28 @@ parent in the DOM.</p></li>
 <p>Get/Setf font.</p></li>
 </ul>
 
+<p><a id='x-28CLOG-3ASET-FONT-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-FONT-20GENERIC-FUNCTION-29" >SET-FONT</a></span></span> <span class="locative-args">CLOG-ELEMENT FONT-STYLE FONT-VARIANT FONT-WEIGHT FONT-HEIGHT FONT-FAMILY</span></span></p>
+
+<p>Set font.</p></li>
+</ul>
+
+<p><a id='x-28CLOG-3ATEXT-ALIGNMENT-TYPE-20-28TYPE-29-29'></a></p>
+
+<ul>
+<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ATEXT-ALIGNMENT-TYPE-20-28TYPE-29-29" >TEXT-ALIGNMENT-TYPE</a></span></span></span></li>
+</ul>
+
+<p><a id='x-28CLOG-3ATEXT-ALIGNMENT-20GENERIC-FUNCTION-29'></a></p>
+
+<ul>
+<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ATEXT-ALIGNMENT-20GENERIC-FUNCTION-29" >TEXT-ALIGNMENT</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
+
+<p>Get/Setf text-alignment.</p></li>
+</ul>
+
 <p><a id='x-28CLOG-3AVERTICAL-ALIGN-TYPE-20-28TYPE-29-29'></a></p>
 
 <ul>

test/test-clog.lisp

@@ -24,9 +24,10 @@
     (setf (box-sizing tmp) :border-box)
     (setf (width tmp) 300)
     (setf (height tmp) 50)    
-    (setf (border (create-child win
+    (set-border (create-child win
 			  (format nil "<H2>~A</H2>"
-				  (gethash "connection-id" (connection-data win))))) "4px dotted blue")
+				  (gethash "connection-id" (connection-data win))))
+	    "4px" :dotted "blue")
     (setf *last-obj* (create-child win "<button>********</button>"))
     (set-on-mouse-enter *last-obj*
 			(lambda ()