| 5 | 1 <html> | 
|  | 2 <head> | 
|  | 3 <title>flowerbed</title> | 
|  | 4 | 
|  | 5 <style type="text/css"> | 
|  | 6 dt { | 
|  | 7 float: left; | 
|  | 8 clear: left; | 
|  | 9 font-style: italic; | 
|  | 10 } | 
|  | 11 | 
|  | 12 dt::after { content: ": "; | 
|  | 13 } | 
|  | 14 | 
|  | 15 dd { | 
|  | 16 font-family: monospace; | 
|  | 17 } | 
|  | 18 | 
|  | 19 div.app, div.conditions { | 
|  | 20 text-align: center; | 
|  | 21 align: center; | 
|  | 22 } | 
|  | 23 | 
|  | 24 div.app { | 
|  | 25 width: 200px; | 
|  | 26 margin: 10px; | 
|  | 27 } | 
|  | 28 | 
|  | 29 div.app { | 
|  | 30 border: thin black solid; | 
|  | 31 background: red; | 
|  | 32 } | 
|  | 33 | 
|  | 34 div.conditions { | 
|  | 35 background: lightblue; | 
|  | 36 } | 
|  | 37 | 
|  | 38 div.options { | 
|  | 39 background: orange; | 
|  | 40 } | 
|  | 41 | 
|  | 42 ol { | 
|  | 43 list-style-type: square; | 
|  | 44 } | 
|  | 45 | 
|  | 46 div.apps > span:first-child, | 
|  | 47 div.app > span:first-child | 
|  | 48 { | 
|  | 49 font-family: sans-serif; | 
|  | 50 font-weight: bold; | 
|  | 51 color: #222; | 
|  | 52 } | 
|  | 53 | 
|  | 54 div.apps > span:first-child { | 
|  | 55 border: thin solid black; | 
|  | 56 background: red; | 
|  | 57 } | 
|  | 58 | 
|  | 59 </style> | 
|  | 60 | 
|  | 61 </head> | 
|  | 62 <body> | 
|  | 63 <div class="apps"> | 
|  | 64   <span class="name">Your site</span> | 
|  | 65   <ol class="apps"> | 
|  | 66     <li class="app"> | 
|  | 67       <div class="app"> | 
|  | 68         <span class="name">config</span> | 
|  | 69         <div class="conditions"> | 
|  | 70           <span class="name">conditions</span> | 
|  | 71           <dl></dl> | 
|  | 72           <input type="button" value="+"/> | 
|  | 73         </div> | 
|  | 74         <div class="options"> | 
|  | 75           <dl> | 
|  | 76             <dt>factory</dt> | 
|  | 77             <dd>%(self)s</dd> | 
|  | 78           </dl> | 
|  | 79         </div> | 
|  | 80       </div> | 
|  | 81     </li> | 
|  | 82     <li class="app"> | 
|  | 83       <div class="app"> | 
|  | 84         <span class="name">json</span> | 
|  | 85 | 
|  | 86         <div class="conditions"> | 
|  | 87           <span class="name">conditions</span> | 
|  | 88           <dl class="conditions"> | 
|  | 89             <dt>path</dt><dd>/json</dd> | 
|  | 90           </dl> | 
|  | 91           <input type="button" value="+"/> | 
|  | 92         </div> | 
|  | 93 | 
|  | 94         <div class="options"> | 
|  | 95           <span class="name">options</span> | 
|  | 96           <dl> | 
|  | 97             <dt>factory</dt> | 
|  | 98             <dd>%(self)s</dd> | 
|  | 99           </dl> | 
|  | 100         </div> | 
|  | 101       </div> | 
|  | 102     </li> | 
|  | 103     <li> | 
|  | 104       <input type="button" value="+"/> | 
|  | 105     </li> | 
|  | 106   </ol> | 
|  | 107 </span> | 
|  | 108 | 
|  | 109 </body> | 
|  | 110 </html> |