utf8/skins/grey/grey.css

   1 /*\r
   2         This is the CSS stylesheet that is used for the default Nucleus skin.\r
   3         \r
   4         Here's how the pages are built up:\r
   5 \r
   6         (Note: the format outlined below is NOT mandatory. If you want your \r
   7          site to use another structure, edit skins and templates, and define \r
   8          your own stylesheet. The default skins and templates only serves as \r
   9          an example of how a site running Nucleus can look.)\r
  10 \r
  11         MAIN PAGE\r
  12         ---------\r
  13 \r
  14         body\r
  15           div.contents\r
  16             h1 (site title)\r
  17               h2 (date header)\r
  18                 h3 (item title)\r
  19                   div.itembody (item text)\r
  20                   span.iteminfo (time / author / editlink / amount of comments)\r
  21           div.logo\r
  22           div.menu\r
  23             h1 (navigation, hidden link)\r
  24               h2 (menu titles)\r
  25         \r
  26         DETAILED PAGE\r
  27         -------------\r
  28         body\r
  29           div.contents\r
  30             h1 (site title)\r
  31               h2 (item title)\r
  32                 div.itembody (item text)\r
  33                 div.iteminfo (item info)\r
  34               h2 (comments)\r
  35                 h3 (commentor name)\r
  36                   div.commentbody\r
  37               h2 (add comment)\r
  38           div.logo\r
  39           div.menu      \r
  40             h1 (navigation, hidden link)\r
  41               h2 (menu titles)\r
  42 \r
  43         OTHER PAGES\r
  44         -----------\r
  45         \r
  46         other pages are similar, having a .contents and a .menu part\r
  47 */\r
  48  \r
  49 \r
  50 /*\r
  51         The body definitions define how the page should globally look:\r
  52         - a small verdana, arial or font from the sans-serif family\r
  53         - black text on a white background\r
  54 */\r
  55 \r
  56 \r
  57 body {\r
  58         font-family: verdana, arial, sans-serif;\r
  59         font-size: small;       \r
  60         background-color: #fff;\r
  61         color: #000;\r
  62 }\r
  63 \r
  64 /* \r
  65         The definitions below determine how the page looks.\r
  66         \r
  67         There are 3 main div-elements, which are all positioned absolute\r
  68         (relative to the upper left corner of the screen):\r
  69         \r
  70         .contents: contains the main contents of the page.\r
  71         .menu: sidebar with menu\r
  72         .logo: logo to be displayed above the sidebar\r
  73 \r
  74 */\r
  75 \r
  76 /* definitions applying to the contents block */\r
  77 .contents {\r
  78         position: absolute;\r
  79 \r
  80         left: 200px;\r
  81         width: 550px;\r
  82 }\r
  83 \r
  84 /* definitions applying to the logo */\r
  85 .logo {\r
  86         position: absolute;\r
  87 \r
  88         top: 20px;\r
  89         left: 20px;\r
  90 }\r
  91 \r
  92 .menu {\r
  93         position: absolute;\r
  94 \r
  95         top: 175px;\r
  96         left: 30px;\r
  97         width: 110px;\r
  98 \r
  99         /* use a lighter text color (grey) and a smaller font */\r
 100         color: #777;\r
 101         font-size: small;       \r
 102 }\r
 103 \r
 104 /*\r
 105         Definitions for headers in the menu (.menu h2), page titles (h1) \r
 106         and dateheads (.contents h2):\r
 107         - page titles are centered (within the .contents div)\r
 108         - menu headers (h2) use a small font\r
 109         - dateheads use a large font and are in a box\r
 110 */\r
 111 \r
 112 h1 {\r
 113         text-align: center;\r
 114 }\r
 115 \r
 116 .menu h2 {\r
 117         font-size: small;\r
 118 }\r
 119 \r
 120 .contents h2 {\r
 121         background-color: whitesmoke;\r
 122         border: 1px solid #ccc;\r
 123 \r
 124         padding: 5px; \r
 125         \r
 126         font-size: large;\r
 127 \r
 128         margin-bottom: 5px;\r
 129 }\r
 130 \r
 131 /* \r
 132         Definitions for the item listings like they are done on the main page and in archives\r
 133         - h3.item is the title of an item (<h3 class="item">)\r
 134         - .itembody is the item contents\r
 135         - .iteminfo contains the time of posting and the name of the author, and the amount of comments\r
 136         \r
 137         anchors in the iteminfo (.iteminfo a) are not underlined and bold\r
 138 */\r
 139 \r
 140 /* item title */\r
 141 h3.item {\r
 142         font-size: medium;\r
 143         margin: 0px;\r
 144         margin-top: 10px;\r
 145 }\r
 146 \r
 147 .itembody {     \r
 148         margin-top: 5px;        \r
 149         margin-bottom: 5px;\r
 150 }\r
 151 \r
 152 .iteminfo {     \r
 153         font-size: x-small;\r
 154         color: gray;\r
 155 }\r
 156 \r
 157 .iteminfo a {\r
 158         font-weight: bolder;\r
 159         color: #555;\r
 160         text-decoration: none;\r
 161 }\r
 162 \r
 163 /*\r
 164         Definitions of how comments listings look like on item pages\r
 165         - h3.comment contains the name of the comment author\r
 166         - .commentbody contains the text from the comment\r
 167         - .commentinfo contains the time of commenting\r
 168 */\r
 169 \r
 170 /* comment title */\r
 171 h3.comment {\r
 172         font-size: medium;\r
 173         margin-bottom: 10px;\r
 174 }\r
 175 \r
 176 .commentbody {\r
 177         text-align: justify;\r
 178 }\r
 179 \r
 180 .commentinfo {  \r
 181         font-size: x-small;\r
 182         color: gray;\r
 183 }\r
 184 \r
 185 \r
 186 /*\r
 187         Some rules that apply to contents generated using the markup buttons \r
 188         "add left box" and "add right box"\r
 189         \r
 190         both boxes have slightly larger text, and take a maximum of 20% of \r
 191         the width of the contents.\r
 192 */\r
 193 \r
 194 .leftbox, .rightbox {\r
 195         margin: 3px;\r
 196         padding: 3px;\r
 197         font-size: larger;\r
 198         width: 20%;\r
 199 }\r
 200 .leftbox {\r
 201         float: left;\r
 202         border-right: 2px solid #ccc;   \r
 203 }\r
 204 .rightbox {\r
 205         float: right;\r
 206         border-left: 2px solid #ccc;    \r
 207 }\r
 208 \r
 209 \r
 210 /*\r
 211         Some general rules:\r
 212         - images never have a border (even when they are inside a hyperlink)\r
 213         - elements having class="skip" are not shown\r
 214         - item lists using <ul class="nobullets"> have no list-item bullets\r
 215         - highlighted text (in search results) have a yellow background\r
 216 */\r
 217 \r
 218 img {\r
 219         border: none;\r
 220 }\r
 221 \r
 222 .skip {\r
 223         display: none;\r
 224 }\r
 225 \r
 226 ul.nobullets {\r
 227         list-style: none;\r
 228         margin-left: 0px;\r
 229         padding-left: 0px;\r
 230 }\r
 231 \r
 232 .highlight {\r
 233         background-color: yellow;\r
 234 }\r
 235 \r
 236 \r
 237 \r