koha-tmpl/opac-tmpl/prog/en/includes/opac.css

   1 /* color scheme :
   2 - #6699CC smooth blue for buttons background
   3 - #FFFFCC smooth yellow for button text
   4 - grey (
   5
   6 - #990033 (red) for hovered links
   7 - #384b73 : light blue, for menus, text enhancement, footer & header
   8
   9 - #eeeeee : light grey, for background color
  10 - #CCCCCC : for table backgrounds
  11 - #6BA037 : green for action buttons
  12 */
  13
  14 /* attribute for standard html tags */
  15
  16 body {
  17     font-family : Verdana, Geneva, Arial, sans-serif;
  18     font-size : 1em;
  19     background-color : white;
  20     text-align: left;
  21     margin-bottom:0px;
  22 }
  23
  24 h1 {
  25     padding-top:25px;
  26     color: #384b73;
  27     font-size:1.5em;
  28     text-align:left;
  29 }
  30
  31 h2 {
  32     color:#384b73;
  33 }
  34
  35 h3 {
  36     color:#384b73;
  37 }
  38
  39 p {
  40     margin:0px;
  41     padding:0px;
  42     clear:left;
  43 }
  44
  45 label {
  46     vertical-align:top;
  47     display:block;
  48     float:left;
  49     margin-right:0.2em;
  50     width:10em;
  51     font-size:0.8em;
  52 }
  53
  54 a:link, a:visited, a:active {
  55     text-decoration : none;
  56     color :#384b73;
  57 }
  58
  59 a:hover {
  60     text-decoration : none;
  61     color: #990033;
  62
  63 }
  64
  65 fieldset {
  66     display:inline;
  67     border: 1px solid #384b73;
  68     background-color:#F9F9FF;
  69 }
  70
  71 table {
  72     border-collapse : collapse;
  73     border : 1px solid #CCCCCC;
  74     margin : 1em 0;
  75 }
  76
  77 caption {
  78     font-size : 140%;
  79     text-align : left;
  80     font-weight : bold;
  81 }
  82
  83 td,th {
  84     border : 1px solid #CCCCCC;
  85     border-bottom : 1px solid #CCCCCC;
  86     padding : 5px;
  87 }
  88
  89 th {
  90     background:url( /opac-tmpl/prog/images/member-menu-background.gif);
  91     background-repeat:repeat-x;
  92     background-color:#ADC4E2;
  93     color:#096C9D;
  94     font-size:0.8em;
  95     border : 1px solid #CCCCCC;
  96     border-right: 1px solid #CCCCCC;
  97 }
  98
  99 th[scope=row] {
 100     text-align : right;
 101 }
 102
 103 input[type=submit], input[type=button], input[type=reset] {
 104     background-color : #6BA037;
 105     color : #FFFFFF;
 106     font-size : 0.8em;
 107     font-weight : bold;
 108     border: 1px outset #666666;
 109 }
 110
 111 li {
 112     list-style-type:square;
 113 }
 114
 115 ul {
 116     margin:0px;
 117 }
 118
 119 /* attributes for search result list */
 120 .searchresults td, .searchresults th, .searchresults table {
 121     border: 0;
 122 }
 123 .searchresults tr {
 124     border-bottom : 1px solid #CCCCCC;
 125 }
 126 .searchresults table {
 127     border-top : 0px solid #CCCCCC;
 128     border: 1px solid #CCCCCC;
 129 }
 130 p.searchresults {
 131     background-color : #EFF1DC;
 132 }
 133 .searchresults a.reserve {
 134     background-color : transparent;
 135     color : #006699;
 136 }
 137 .searchresults table tr:hover {
 138     background-color: #FFFFCC;
 139 }
 140 tr.highlight td, tr.highlight th {
 141     background-color : #EEEEEE;
 142     border: 1px solid #DDDDDD;
 143     border-right: 1px solid #DDDDDD;
 144 }
 145
 146 /* the top part of the opac : (the LibraryName) */
 147 #masthead {
 148     color: #000066;
 149     margin-left:15%;
 150     text-align:left;
 151     font-size:150%;
 152     font-weight:bold;
 153     margin-bottom:5px;
 154 }
 155
 156 /* The image on the top-left (the logo) */
 157 #masthead-image {
 158     position:absolute;
 159     left:10px;
 160     top:10px;
 161     background-color:white;
 162 }
 163
 164 #masthead-image img {
 165     background-color:white;
 166 }
 167
 168 /* the itemtype list in advanced search */
 169 #advsearch-itemtype table {
 170     border-collapse: separate;
 171     border-spacing: 3px;
 172     border : 0px;
 173     margin : 0px;
 174     background-color: white;
 175     border: 0px solid #D8DEB8;
 176 }
 177 }
 178 #advsearch-itemtype table tr td {
 179     background-color: #F8F8EB;
 180     border : 0px;
 181     margin : 0px;
 182     width:700px;
 183 }
 184 #advsearch-itemtype td {
 185     font-size:0.8em;
 186     background-color:#F8F8EB;
 187 }
 188
 189 /* the content part of every page */
 190 #main {
 191     margin-left:15%;
 192     margin-bottom:0px;
 193 }
 194
 195 /* the main menu (home, adv search) */
 196
 197 #menu {
 198     position:absolute;
 199     padding:10px;
 200     left:0px;
 201     top:100px;
 202     width:12%;
 203     font-size:0.8em;
 204     font-weight:bold;
 205     color:#384b73;
 206     background-color:#dddddd;
 207 }
 208 #menu ul a {
 209     display:block;
 210     margin:5px 5px 0px 5px;
 211     padding :5px 5px 0px 5px;
 212     text-decoration:none;
 213     color:#384b73;
 214     white-space: nowrap;
 215     margin:0px;
 216     padding:0px;
 217 }
 218 #menu ul a:hover {
 219     display:block;
 220     margin:0;
 221     padding :0;
 222     text-decoration:none;
 223     color:#990033;
 224     white-space: nowrap;
 225 }
 226 #menu ul {
 227     padding:0 0 0 10px;
 228     margin-left:5px;
 229 }
 230 #menu li {
 231     list-style-type:none;
 232     margin:0px;
 233     padding:0 0 10px 0;
 234 }
 235 #menu ul li {
 236     list-style-type:circle;
 237     margin:0px;
 238     padding:0 0 10px 0;
 239 }
 240
 241
 242
 243 /***************/
 244 /* login block */
 245 /***************/
 246 #login {
 247     position:absolute;
 248     left:0px;
 249     bottom:10px;
 250     font-size:0.8em;
 251     background-color : #dddddd;
 252     padding:10px;
 253     margin-right:84%;
 254     width:12%;
 255 }
 256 #login input {
 257     font-size:0.8em;
 258 }
 259 #login label {
 260     width:5em;
 261 }
 262 #login p {
 263     margin:0px;
 264 }
 265
 266 /***********************************************************/
 267 /* the user menu, for user option (and biblio detail view) */
 268 /***********************************************************/
 269 #usermenu {
 270     float:right;
 271 }
 272 #usermenu a {
 273     background-color : #6BA037;
 274     color : #FFFFFF;
 275     font-size : 0.8em;
 276     font-weight : bold;
 277     border: 1px outset #666666;
 278     display:block;
 279     margin-bottom:3px;
 280 }
 281 #usermenu a:hover {
 282     border: 1px inset #666666;
 283 }
 284
 285 /* the opac-news */
 286 #news {
 287     width:20%;
 288     float:right;
 289     font-size:11px;
 290 }
 291 #news th {
 292 background-color:white;
 293 color:#384b73;
 294 }
 295
 296 /* "problem" enhancement */
 297 .problem {
 298 color: white;
 299 background-color:red;
 300 }
 301
 302 /* action buttons */
 303 #action {
 304     margin-top:15px;
 305 }
 306 #action a {
 307     background-color : #6699cc;
 308     color : #eeeeee;
 309     font-size : 0.8em;
 310     font-weight : bold;
 311     border: 1px outset #666666;
 312     margin-right:5px;
 313     padding:0 5px 0 5px;
 314 }
 315 #action a:hover {
 316     color : white;
 317     border: 1px inset;
 318 }
 319
 320 #auth {
 321     float:left;
 322 }
 323
 324 /* facets bloc */
 325 #facets {
 326     position:absolute;
 327     right:1em;
 328     font-size:0.8em;
 329     margin:0px;
 330     background-color:#eeeeee;
 331     border:0px;
 332 }
 333
 334 #facets dl {
 335     margin:0px;
 336     border:1px solid #CCCCCC;
 337 }
 338 #facets dd {
 339     margin:0px;
 340 }
 341 #facets dt {
 342     font-weight:bold;
 343     background-color:#6BA037;
 344     border: 1px outset #666666;
 345     color:white;
 346 }
 347
 348 #facets li {
 349     list-style-type: none;
 350     margin-left:0px;
 351 }
 352
 353 #facets ul {
 354     list-style-type: none;
 355     padding-left:10px;
 356     margin-bottom:0px;
 357     margin-top:0px;
 358 }
 359
 360 /* the USER information block */
 361 #librarian_information {
 362 float:right;
 363 font-size:10pt;
 364 }
 365
 366 /* the footer */
 367 #footer {
 368     margin-top:30px;
 369     margin-left:30%;
 370     margin-right:20%;
 371     border-top:1px solid #384b73;
 372     color: #384b73;
 373     font-size:1em;
 374     text-align:center;
 375 }
 376
 377
 378 legend {
 379 font-weight:bold;
 380 color:#384b73;
 381 }
 382
 383
 384 /* css styles for reserves color alerts */
 385 .onloan {
 386     background-color: #FFED3D;
 387 }
 388
 389 .reserved {
 390     background-color: #8EBAFF;
 391 }
 392
 393 .transfered {
 394     background-color: #F9FF9A;
 395 }
 396
 397 .inwait {
 398     background-color: #33CC99;
 399 }
 400
 401 .other {
 402     background-color: #FF0000;
 403 }
 404
 405 .available {
 406     font-size:0.75em;
 407 }
 408
 409 .unavailable {
 410     background-color: #FFED3D;
 411     font-size:0.75em;
 412 }
 413
 414 /* style for search terms in catalogsearch */
 415 .term {
 416 background-color:lightyellow;
 417 color: #990033;
 418 }
 419
 420 #opac-main-search {
 421     background-image:url( /opac-tmpl/prog/images/menu-background.gif);
 422     background-repeat:repeat-x;
 423     background-color: #6699CC;
 424     border-top: 1px solid #335599;
 425     border-bottom: 1px solid #335599;
 426     margin: 0 0 0 15%;
 427     padding: 15px 0 15px 10px;
 428     color:#FFFFCC;
 429     font-weight:bold;
 430 }
 431 #opac-main-search a {
 432     color:#FFFFCC;
 433 }
 434 #opac-main-search a:visited {
 435     color:#FFFFCC;
 436 }
 437 #opac-main-search a:hover {
 438     color:#FFFFFF;
 439 }
 440
 441 #opac-main-search form {
 442     display:inline;
 443 }