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-left:0px;
 228     margin:0;
 229     padding-bottom:0px;
 230 }
 231 #menu li {
 232     list-style-type:none;
 233     margin:0px;
 234     padding-bottom:10px;
 235 }
 236
 237
 238
 239 /***************/
 240 /* login block */
 241 /***************/
 242 #login {
 243     position:absolute;
 244     left:0px;
 245     bottom:10px;
 246     font-size:0.8em;
 247     background-color : #dddddd;
 248     padding:10px;
 249     margin-right:84%;
 250     width:12%;
 251 }
 252 #login input {
 253     font-size:0.8em;
 254 }
 255 #login label {
 256     width:5em;
 257 }
 258 #login p {
 259     margin:0px;
 260 }
 261
 262 /***********************************************************/
 263 /* the user menu, for user option (and biblio detail view) */
 264 /***********************************************************/
 265 #usermenu {
 266     float:right;
 267 }
 268 #usermenu a {
 269     background-color : #6BA037;
 270     color : #FFFFFF;
 271     font-size : 0.8em;
 272     font-weight : bold;
 273     border: 1px outset #666666;
 274     display:block;
 275     margin-bottom:3px;
 276 }
 277 #usermenu a:hover {
 278     border: 1px inset #666666;
 279 }
 280
 281 /* the opac-news */
 282 #news {
 283     width:20%;
 284     float:right;
 285     font-size:11px;
 286 }
 287 #news th {
 288 background-color:white;
 289 color:#384b73;
 290 }
 291
 292 /* "problem" enhancement */
 293 .problem {
 294 color: white;
 295 background-color:red;
 296 }
 297
 298 /* action buttons */
 299 #action {
 300     margin-top:15px;
 301 }
 302 #action a {
 303     background-color : #6699cc;
 304     color : #eeeeee;
 305     font-size : 0.8em;
 306     font-weight : bold;
 307     border: 1px outset #666666;
 308     margin-right:5px;
 309     padding:0 5px 0 5px;
 310 }
 311 #action a:hover {
 312     color : white;
 313     border: 1px inset;
 314 }
 315
 316 #auth {
 317     float:left;
 318 }
 319
 320 /* facets bloc */
 321 #facets {
 322     position:absolute;
 323     right:1em;
 324     font-size:0.8em;
 325     margin:0px;
 326     background-color:#eeeeee;
 327     border:0px;
 328 }
 329
 330 #facets dl {
 331     margin:0px;
 332     border:1px solid #CCCCCC;
 333 }
 334 #facets dd {
 335     margin:0px;
 336 }
 337 #facets dt {
 338     font-weight:bold;
 339     background-color:#6BA037;
 340     border: 1px outset #666666;
 341     color:white;
 342 }
 343
 344 #facets li {
 345     list-style-type: none;
 346     margin-left:0px;
 347 }
 348
 349 #facets ul {
 350     list-style-type: none;
 351     padding-left:10px;
 352     margin-bottom:0px;
 353     margin-top:0px;
 354 }
 355
 356 /* the USER information block */
 357 #librarian_information {
 358 float:right;
 359 font-size:10pt;
 360 }
 361
 362 /* the footer */
 363 #footer {
 364     margin-top:30px;
 365     margin-left:30%;
 366     margin-right:20%;
 367     border-top:1px solid #384b73;
 368     color: #384b73;
 369     font-size:1em;
 370     text-align:center;
 371 }
 372
 373
 374 legend {
 375 font-weight:bold;
 376 color:#384b73;
 377 }
 378
 379
 380 /* css styles for reserves color alerts */
 381 .onloan {
 382     background-color: #FFED3D;
 383 }
 384
 385 .reserved {
 386     background-color: #8EBAFF;
 387 }
 388
 389 .transfered {
 390     background-color: #F9FF9A;
 391 }
 392
 393 .inwait {
 394     background-color: #33CC99;
 395 }
 396
 397 .other {
 398     background-color: #FF0000;
 399 }
 400
 401 .available {
 402     font-size:0.75em;
 403 }
 404
 405 .unavailable {
 406     background-color: #FFED3D;
 407     font-size:0.75em;
 408 }
 409
 410 /* style for search terms in catalogsearch */
 411 .term {
 412 background-color:lightyellow;
 413 color: #990033;
 414 }
 415
 416 #opac-main-search {
 417     background-image:url( /opac-tmpl/prog/images/menu-background.gif);
 418     background-repeat:repeat-x;
 419     background-color: #6699CC;
 420     border-top: 1px solid #335599;
 421     border-bottom: 1px solid #335599;
 422     margin: 0 0 0 15%;
 423     padding: 15px 0 15px 10px;
 424     color:#FFFFCC;
 425     font-weight:bold;
 426 }
 427 #opac-main-search a {
 428     color:#FFFFCC;
 429 }
 430 #opac-main-search a:visited {
 431     color:#FFFFCC;
 432 }
 433 #opac-main-search a:hover {
 434     color:#FFFFFF;
 435 }
 436
 437 #opac-main-search form {
 438     display:inline;
 439 }