======================================================================
=== SimpleBoxes CSS coding guideline =================================
======================================================================
                                Written by Takuya Otani / 01 Jun 2007 
                         Copyright (C) 2007 SimpleBoxes/SerendipityNZ 
                                                  All rights reserved.

[Revision History]
* ver 0.00 [2007/06/01] first edition

[Summary]
This document defines a CSS coding style for Takuya Otani@SimpleBoxes.

[License]
This document is licensed under the Creative Commons Attribution 3.0 
Unported: http://creativecommons.org/licenses/by/3.0/

[Comments]
- use the pair of "/*" and "*/" as comments.
- use the pair of "/*[" and "]*" for group separator.

[Guideline]
The guideline may be declared in CSS with url.

[Groups]
There are the following groups.  The following list also indicates the 
sequence of groups.

* defaults
  Reseting and Redefining default style for user agents.
  The basic styles in this group are same for any css basically.

* layout
  Defining visual layout style.

* (specific block elemenrs)
  Defining styles for each specific block.
  The name of group depends on the block to define.

* (specific inline elements)
  Defining styles for inline elements in the specific block.
  The name of group depends on the specific block.
  This group will appear if there are many style definitions for 
  inline elements in specific range.

* fonts
  Defining font-family properties if necessary.

* colors
  Defining color and background-color properties.

* borders
  Defining border properties.

* images
  Defining list-style-image and background properties.

* (additioanal styles)
  Defining additional styles if necessary.
  The name of group depends on the application.

[Indent and The number of characters per line]
* Tabs
  Use a tab as an indent.  Editor can choose own tab width.
  Tab can be used for indent only, use spaces for formatting if 
  necessary.

* The number of characters per line
  Thu number of characters per line is NOT defined.

[Selectors]
* Description
  Selector should be described with no indent.

* Selector list
  Listing selectors, "," and linefeed should be inserted for each 
  selector.
  Putting space and opening brace "{" for last selector.

* Braces
  Put a linefeed next to "{" and "}".
  "}" will appear singularly.
  "}" can be indented, but the rule should be unified in a style.

* Examples
selector {
	property: value;
}
selector1,
selector2 {
	property: value;
}

* Examples (with indented braces)
selector {
	property: value;
	}
selector1,
selector2 {
	property: value;
	}

[Properties]
* Description
  Each property should be indented.
  Put ":" next to property name (no space).

* Semicolon
  Put ";" at the end of value.

* Sequence of properties
  The property sequence depends on order of CSS2 Specification, but 
  there are some exceptions.
  - CSS2 Specification : http://www.w3.org/TR/REC-CSS2/

     1. content - *0
     2. margin-top
     3. margin-right
     4. margin-bottom
     5. margin-left
     6. margin
     7. padding-top
     8. padding-right
     9. padding-bottom
    10. padding-left
    11. padding
    12. (border-top-width) - *3
    13. (border-right-width) - *3
    14. (border-bottom-width) - *3
    15. (border-left-width) - *3
    16. (border-width) - *3
    17. (border-top-color) - *3
    18. (border-right-color) - *3
    19. (border-bottom-color) - *3
    20. (border-left-color) - *3
    21. (border-color) - *3
    22. (border-top-style) - *3
    23. (border-right-style) - *3
    24. (border-bottom-style) - *3
    25. (border-left-style) - *3
    26. (border-style) - *3
    27. (border-top) - *3
    28. (border-bottom) - *3
    29. (border-right) - *3
    30. (border-left) - *3
    31. (border) - *3
    32. display
    33. position
    34. top
    35. right
    36. bottom
    37. left
    38. float
    39. clear
    40. z-index
    41. direction
    42. unicode-bidi
    43. width
    44. min-width
    45. max-width
    46. height
    47. min-height
    48. max-height
    49. line-height
    50. vertical-align
    51. overflow
    52. clip
    53. visibility
    54. compact
    55. run-in
    56. quotes
    57. marker-offset
    58. list-style-type
    59. (list-style-image) - *4
    60. list-style-position
    61. list-style
    62. size
    63. marks
    64. page-break-before
    65. page-break-after
    66. page-break-inside
    67. page
    68. orphans
    69. widows
    70. (color) - *2
    71. (background-color) - *2
    72. (background-image) - *4
    73. (background-repeat) - *4
    74. (background-attachment) - *4
    75. (background-position) - *4
    76. (background) - *4
    77. (font-family) - *1
    78. font-style
    79. font-variant
    80. font-weight
    81. font-stretch
    82. font-size
    83. font-size-adjust
    84. font
    85. text-indent
    86. text-align
    87. text-decoration
    88. text-shadow
    89. letter-spacing
    90. word-spacing
    91. text-transform
    92. white-space
    93. table-layout
    94. empty-cells
    95. speak-header
    96. cursor
    97. outline
    98. volume
    99. speak
   100. pause-before
   101. pause-after
   102. pause
   103. cue-before
   104. cue-after
   105. cue
   106. play-during
   107. azimuth
   108. elevation
   109. speech-rate
   110. voice-family
   111. pitch
   112. pitch-range
   113. stress
   114. richness
   115. speak-punctuation
   116. speak-numeral
   117. browser dependent properties (alphabetical order)

  *0 content
     This property will appear at first, if necessary.
  *1 font-family
     This property is defined in fonts group.
  *2 color and background-color
     These properties are defined in colors group.
  *3 border-* and border
     These properties are defined in borders group.
  *4 list-style-image and background-* (except background-color)
     These properties are defined in images group.

[Special notes]
* Character set
  Declaration of charset (@charset) should be at the beginning of the 
  document if necessary.

* Value for line-height
  The value of line-height should be without unit.

[References]
- http://www.w3.org/TR/REC-CSS2/
- http://hail2u.net/blog/webdesign/css2-property-order.html

[Sample]
@charset "UTF-8";

/* style.css */
/* == written by Takuya Otani <takuya.otani@gmail.com> === */
/* == Copyright (C) 2004 SimpleBoxes/SerendipityNZ Ltd. == */

/*
	guideline : http://serennz.sakura.ne.jp/guidelines/css_en_000.txt
*/

/* [defaults] */
* {
	margin: 0px;
	padding: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1em 0px;
	font-style: normal;
	font-weight: bold;
	font-size: 110%;
}
p,
dl,
ul,
ol,
blockquote,
form,
pre {
	margin: 1em 0px;
	font-style: normal;
	font-weight: normal;
}
th,
dt {
	font-style: normal;
	font-weight: bold;
}
blockquote {
	margin: 1em 2em;
}
p {
	line-height: 1.4;
}
strong,
em {
	font-style: normal;
	font-weight: bold;
}
a {
	text-decoration: underline;
}
q {
	quotes: none;
	font-style: normal;
}
/* [layout] */
body {
	margin: 0px;
	padding: 0px;
}
/* [specific_block] */

/* use this group if necessary */

/* [specific_inline] */

/* use this group if necessary */

/* [fonts] */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: sans-serif;
}
pre,
code,
kbd {
	font-family: "Courier New",monospace;
}
/* [colors] */
body {
	color: #333;
	background-color: #fff;
}
a:link {
	color: #66b;
}
a:active {
	color: #55c;
}
a:visited {
	color: #96c;
}
a:hover {
	color: #e50;
}
/* [borders] */
img {
	border: 0px none #000;
}
/* [background-images] */
body {
	background-image: url(sample.jpg);
	background-repeat: repeat;
	background-position: 0% 0%;
}