1/******************************************************************** 2Screen and Print Styles for the Wrap Plugin 3********************************************************************/ 4 5/* tables in columns and boxes should span the whole width */ 6.wrap_column table, 7.wrap_left table, .wrap_right table, .wrap_center table, 8.wrap_box table, 9.wrap_info table, .wrap_important table, .wrap_alert table, .wrap_tip table, .wrap_help table, .wrap_todo table, .wrap_download table { 10 width: 100%; 11} 12/* emulate a headline */ 13.wrap_column em strong, 14.wrap_left em strong, .wrap_right em strong, .wrap_center em strong, 15.wrap_box em strong, 16.wrap_info em strong, .wrap_important em strong, .wrap_alert em strong, .wrap_tip em strong, .wrap_help em strong, .wrap_todo em strong, .wrap_download em strong { 17 font-size: 130%; 18 font-weight: bold; 19 font-style: normal; 20 display: block; 21} 22/* emulate a bigger headline with a bottom border */ 23.wrap_column em strong em.u, 24.wrap_left em strong em.u, .wrap_right em strong em.u, .wrap_center em strong em.u, 25.wrap_box em strong em.u, 26.wrap_info em strong em.u, .wrap_important em strong em.u, .wrap_alert em strong em.u, .wrap_tip em strong em.u, .wrap_help em strong em.u, .wrap_todo em strong em.u, .wrap_download em strong em.u { 27 font-size: 115%; 28 border-bottom: 1px solid __border__; 29 font-style: normal; 30 text-decoration: none; 31 display: block; 32} 33/* different bigger headline for safety notes */ 34.wrap_danger em strong em.u, .wrap_warning em strong em.u, .wrap_caution em strong em.u, .wrap_notice em strong em.u, .wrap_safety em strong em.u { 35 font-size: 115%; 36 font-style: normal; 37 text-decoration: none; 38 display: block; 39 text-transform: uppercase; 40 border-bottom-width: 0; 41} 42/* change border colour of emulated headlines inside boxes to something more neutral 43 (to match all the different background colours) */ 44.wrap_box em strong em.u, 45.wrap_info em strong em.u, .wrap_important em strong em.u, .wrap_alert em strong em.u, .wrap_tip em strong em.u, .wrap_help em strong em.u, .wrap_todo em strong em.u, .wrap_download em strong em.u { 46 border-bottom-color: #999; 47} 48 49 50/* columns 51********************************************************************/ 52 53.wrap_left, 54.wrap_column { 55 float: left; 56 margin-right: 1.5em; 57} 58.wrap_right { 59 float: right; 60 margin-left: 1.5em; 61} 62.wrap_center { 63 display: block; 64 margin-left: auto; 65 margin-right: auto; 66} 67/* 68.wrap_column, 69.wrap_left, 70.wrap_right { 71 overflow: hidden; 72} 73*/ 74.wrap_container { 75 margin-right: -1.5em; 76} 77 78 79/* alignments 80********************************************************************/ 81 82.wrap_leftalign { 83 text-align: left; 84} 85.wrap_centeralign { 86 text-align: center; 87} 88.wrap_rightalign { 89 text-align: right; 90} 91.wrap_justify { 92 text-align: justify; 93} 94 95 96/* box 97********************************************************************/ 98 99/* see styles for boxes and notes with icons in style.css */ 100 101/*____________ rounded corners ____________*/ 102/* (only for modern browsers) */ 103 104div.wrap_round { 105 border-radius: 20px; 106 -moz-border-radius: 20px; 107 -webkit-border-radius: 20px; 108 -khtml-border-radius: 20px; 109} 110span.wrap_round { 111 border-radius: 2px; 112 -moz-border-radius: 2px; 113 -webkit-border-radius: 2px; 114 -khtml-border-radius: 2px; 115} 116 117 118/* mark 119********************************************************************/ 120 121div.wrap_lo { 122 color: __text_neu__; 123 font-size: 85%; 124} 125div.wrap_em { 126 color: #c00; 127 font-weight: bold; 128} 129 130/* see styles for highlighted text in style.css */ 131 132 133/* typography 134********************************************************************/ 135 136/*____________ fonts ____________*/ 137 138div.wrap_sansserif { 139 font-family: Verdana,Tahoma,Geneva,"DejaVu Sans","Bitstream Vera Sans","Liberation Sans", Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L", sans-serif; 140} 141div.wrap_serif { 142 font-family: Georgia,Garamond,"Palatino Linotype","Book Antiqua",Palatino,Palladio,"URW Palladio L","Liberation Serif",Didot,Gentium,"Bitstream Charter","Century Schoolbook L", "Times New Roman",Times,"Nimbus Roman No9 L","FreeSerif", serif; 143} 144div.wrap_monospace { 145 font-family: Courier,"Courier New",FreeMono,"Nimbus Mono L","Liberation Mono", "Lucida Console",Monaco,"DejaVu Sans Mono","Bitstream Vera Sans Mono", monospace; 146} 147 148/*____________ font size ____________*/ 149 150div.wrap_bigger { 151 font-size: 125%; 152} 153div.wrap_muchbigger { 154 font-size: 200%; 155} 156div.wrap_smaller { 157 font-size: 75%; 158} 159 160/*____________ font colours ____________*/ 161 162div.wrap_fgred { 163 color: #900; 164} 165div.wrap_fggreen { 166 color: #090; 167} 168div.wrap_fgblue { 169 color: #009; 170} 171div.wrap_fgcyan { 172 color: #099; 173} 174div.wrap_fgviolet { 175 color: #909; 176} 177div.wrap_fgyellow { 178 color: #990; 179} 180div.wrap_fggrey { 181 color: #666; 182} 183div.wrap_fgblack { 184 color: #000; 185} 186 187/* see styles for background colours and white font colour in style.css */ 188 189 190/* miscellaneous 191********************************************************************/ 192 193/*____________ indent ____________*/ 194 195div.wrap_indent { 196 padding-left: 1.5em; 197} 198 199/*____________ outdent ____________*/ 200 201div.wrap_outdent { 202 margin-left: -1.5em; 203} 204 205/*____________ word wrapping in pre ____________*/ 206 207divdiv.wrap_prewrap pre { 208 white-space: pre-wrap; 209 word-wrap: break-word;/* for IE < 8 */ 210 /* white-space: -moz-pre-wrap; for FF < 3 */ 211} 212 213/*____________ spoiler ____________*/ 214 215divdiv.wrap_spoiler { 216 margin-bottom: 1.5em; 217} 218/* see rest of spoiler styles in style.css */ 219 220/*____________ clear float ____________*/ 221 222div.wrap_clear { 223 clear: both; 224 line-height: 0; 225 height: 0; 226 font-size: 1px; 227 visibility: hidden; 228 overflow: hidden; 229} 230 231/*____________ hide ____________*/ 232 233div.wrap_hide { 234 display: none; 235} 236 237 238/* STYLE.CSS */ 239 240/* box 241********************************************************************/ 242 243.wrap_box { 244 background: __background_alt__; 245 color: __text__; 246/* 247 overflow: hidden; 248*/ 249} 250div.wrap_box, 251div.wrap_danger, div.wrap_warning, div.wrap_caution, div.wrap_notice, div.wrap_safety { 252 padding: 1em 1em .5em; 253 margin-bottom: 1.5em; 254} 255span.wrap_box, 256span.wrap_danger, span.wrap_warning, span.wrap_caution, span.wrap_notice, span.wrap_safety { 257 padding: 0 .3em; 258} 259 260/*____________ notes with icons ____________*/ 261 262/* general styles for all note divs */ 263div.wrap_info, div.wrap_important, div.wrap_alert, div.wrap_tip, div.wrap_help, div.wrap_todo, div.wrap_download { 264 padding: 1em 1em .5em 70px; 265 margin-bottom: 1.5em; 266 min-height: 68px; 267 background-position: 10px 50%; 268 background-repeat: no-repeat; 269 color: #000; 270} 271/* special treatment for IE6 */ 272* html div.wrap_info, * html div.wrap_important, * html div.wrap_alert, * html div.wrap_tip, * html div.wrap_help, * html div.wrap_todo, * html div.wrap_download { 273 height: 68px; 274} 275/* general styles for all note spans */ 276span.wrap_info, span.wrap_important, span.wrap_alert, span.wrap_tip, span.wrap_help, span.wrap_todo, span.wrap_download { 277 padding: 0 2px 0 20px; 278 min-height: 20px; 279 background-position: 2px 50%; 280 background-repeat: no-repeat; 281 color: #000; 282} 283/* special treatment for IE6 */ 284* html span.wrap_info, * html span.wrap_important, * html span.wrap_alert, * html span.wrap_tip, * html span.wrap_help, * html span.wrap_todo, * html span.wrap_download { 285 height: 20px; 286} 287 288/*____________ info ____________*/ 289.wrap_info { background-color: #d1d7df; } 290div.wrap_info { background-image: url(../../../wrap/images/note/48/info.png); } 291span.wrap_info { background-image: url(../../../wrap/images/note/16/info.png); } 292 293/*____________ important ____________*/ 294.wrap_important { background-color: #ffd39f; } 295div.wrap_important { background-image: url(../../../wrap/images/note/48/important.png); } 296span.wrap_important { background-image: url(../../../wrap/images/note/16/important.png); } 297 298/*____________ alert ____________*/ 299.wrap_alert { background-color: #ffbcaf; } 300div.wrap_alert { background-image: url(../../../wrap/images/note/48/alert.png); } 301span.wrap_alert { background-image: url(../../../wrap/images/note/16/alert.png); } 302 303/*____________ tip ____________*/ 304.wrap_tip { background-color: #fff79f; } 305div.wrap_tip { background-image: url(../../../wrap/images/note/48/tip.png); } 306span.wrap_tip { background-image: url(../../../wrap/images/note/16/tip.png); } 307 308/*____________ help ____________*/ 309.wrap_help { background-color: #dcc2ef; } 310div.wrap_help { background-image: url(../../../wrap/images/note/48/help.png); } 311span.wrap_help { background-image: url(../../../wrap/images/note/16/help.png); } 312 313/*____________ todo ____________*/ 314.wrap_todo { background-color: #c2efdd; } 315div.wrap_todo { background-image: url(../../../wrap/images/note/48/todo.png); } 316span.wrap_todo { background-image: url(../../../wrap/images/note/16/todo.png); } 317 318/*____________ download ____________*/ 319.wrap_download { background-color: #d6efc2; } 320div.wrap_download { background-image: url(../../../wrap/images/note/48/download.png); } 321span.wrap_download { background-image: url(../../../wrap/images/note/16/download.png); } 322 323 324/*____________ safety notes ____________*/ 325 326.wrap_danger { 327 background-color: #c00; 328 color: #fff; 329} 330.wrap_warning { 331 background-color: #f60; 332 color: #000; 333} 334.wrap_caution { 335 background-color: #ff0; 336 color: #000; 337} 338.wrap_notice { 339 background-color: #06f; 340 color: #fff; 341} 342.wrap_safety { 343 background-color: #090; 344 color: #fff; 345} 346 347 348/* mark 349********************************************************************/ 350 351div.wrap_hi { 352 background-color: #ff9; 353} 354 355/* typography 356********************************************************************/ 357 358/*____________ font colours ____________*/ 359 360div.wrap_fgwhite { 361 color: #fff; 362} 363 364/*____________ background colours ____________*/ 365 366div.wrap_bgred { 367 background-color: #fcc; 368} 369div.wrap_bggreen { 370 background-color: #cfc; 371} 372div.wrap_bgblue { 373 background-color: #ccf; 374} 375div.wrap_bgcyan { 376 background-color: #9ff; 377} 378div.wrap_bgviolet { 379 background-color: #f9f; 380} 381div.wrap_bgyellow { 382 background-color: #ff9; 383} 384div.wrap_bggrey { 385 background-color: #ccc; 386} 387div.wrap_bgwhite { 388 background-color: #fff; 389} 390div.wrap_bgblack { 391 background-color: #000; 392} 393 394 395/* miscellaneous 396********************************************************************/ 397 398/*____________ spoiler ____________*/ 399 400div.wrap_spoiler { 401 background-color: __background__ !important; 402 color: __background__ !important; 403 border: 1px dotted red; 404} 405 406/*____________ only print ____________*/ 407 408div.wrap_onlyprint { 409 display: none; 410} 411