docs/themes/mobile/iphone.css

   1 /* Style is optimized for iphone. Note that -webkit properties
   2 create errors in the CSS validator.
   3 Classes beginning with ".fl-" are overriding Mobile FSS,
   4 see the API @ http://wiki.fluidproject.org/display/fluid/Mobile+FSS+API
   5 for more details.
   6 */
   7 html, body{
   8         height: 100%;
   9 }
  10 #main{
  11         padding-bottom: 2.3em;
  12         overflow: auto;
  13 }
  14
  15 body,ul,li {
  16         padding:0;
  17         margin:0;
  18 }
  19
  20 .fl-theme-iphone{
  21         background: white;
  22 }
  23
  24 #header{
  25         width:100%;
  26         height:1.063em;
  27         line-height:2.813em;
  28         padding:0;
  29         font-size:1.063em;
  30 }
  31
  32 #header-section-title {
  33         text-align: center;
  34         background-image: -webkit-gradient(linear, left top, left bottom,
  35         from(#4b6b90),
  36     color-stop(0.5, #6d8cb3),
  37     color-stop(0.50, #4b6b90),
  38     color-stop(0.5, #6d8cb3),
  39     to(#4b6b90)
  40     );
  41 }
  42
  43 .fl-theme-iphone .fl-navbar{
  44         border: none;
  45         border-top: none;
  46 }
  47
  48 .fl-navbar a{
  49         font-size: 0.969em;
  50         background-image: -webkit-gradient(linear, left top, left bottom,
  51         from(#4b6b90),
  52     color-stop(0.5, #6d8cb3),
  53     color-stop(0.50, #4b6b90),
  54     color-stop(0.5, #6d8cb3),
  55     to(#4b6b90)
  56     );
  57 }
  58
  59 .fl-navbar .fl-tabs {
  60         padding-top: .3em;
  61         padding-bottom: .3em;
  62         border-top: 1px solid black;
  63         border-bottom: .5px solid black;
  64         background-color: #4b6b90;
  65     height: 2em;
  66 }
  67
  68 #navigation-contentwrapper{
  69         position: relative;
  70         background-color: #4b6b90;
  71         height: 2.5em;
  72 }
  73
  74 #navigation-bar{
  75         height: 2.5em;
  76     border-bottom: .5px solid black;
  77     padding-bottom: .3em;
  78
  79 }
  80
  81 #wrapper{
  82         width:100%;
  83         overflow:hidden;
  84         overflow: auto;
  85         min-height: 100%;
  86 }
  87
  88 #site-name, h1#section-title{
  89         display: inline;
  90         text-shadow: none;
  91         font-size: 90%;
  92         color: #4C566C;
  93         color: white;
  94 }
  95
  96 /*this CSS creates a button that looks exactly like a Mobile FSS tab.*/
  97 .navigation-bar-button{
  98     border-width:5px;
  99     -webkit-border-radius: 5px;
 100         font-size: 18px;/*keep this in px*/
 101         padding: 0 .3em;
 102         color: white;
 103         position: relative;
 104         top: .69em;
 105         left: 0.188em;
 106     /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
 107     background-image: -webkit-gradient(linear, left top, left bottom,
 108         from(#3b5371),
 109         color-stop(0.5, #374e6b),
 110         color-stop(0.50, #354d68),
 111         to(#354d68)
 112     );
 113         -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
 114     -webkit-border-left-image: none;
 115     -webkit-background-origin: border;
 116     -webkit-background-clip: border;
 117     /* to mimick the mobile FSS scolor scheme (iphone) uncomment these lines
 118         background-image: -webkit-gradient(linear, left top, left bottom,
 119         from(#9aafca),
 120         color-stop(0.5, #6d8cb3),
 121         color-stop(0.50, #4b6b90),
 122         to(#4b6b90)
 123     );*/
 124 }
 125
 126 .fl-theme-iphone .fl-tabs li{
 127     /* default mobile fss color scheme for tabs not AA compliant against a white foreground text.therefore its backgroud-image must be overrided */
 128     background-image: -webkit-gradient(linear, left top, left bottom,
 129         from(#3b5371),
 130         color-stop(0.5, #374e6b),
 131         color-stop(0.50, #354d68),
 132         to(#354d68)
 133     );
 134 }
 135
 136 div#content-link-container{
 137         background-color:#F5F5F5;
 138         padding:.375em;
 139         border: #A9ADB0 solid 1px;
 140         -webkit-border-radius: 2px;
 141 }
 142 #content_link{
 143         display: block;
 144 }
 145 #home-guide{
 146         position: absolute;
 147         top: .45em;
 148         right: 0.188em;
 149         font-size: 17px;/*keep this in px*/
 150         white-space:nowrap;
 151         display: inline;
 152
 153 }
 154
 155 /* main body attributes */
 156 p {
 157     text-align: left;
 158     line-height: 150%;
 159         font-size: 1em;
 160         padding:.75em 0;
 161         margin: 0 auto;
 162 }
 163
 164 p a {
 165     text-decoration: underline;
 166 }
 167
 168 p a:visited {
 169         color: #3F2670;
 170     background-color: transparent;
 171 }
 172 p a:active {
 173         color: #A50707;
 174     background-color: transparent;
 175 }
 176
 177 h1, h2, h3, h4, h5, h6 {
 178     color: #4C566C;
 179     clear: right;
 180     font: 100% Verdana, Helvetica, Arial, sans-serif;
 181         font-weight: bold;
 182     margin: 0;
 183         padding: 0;
 184 }
 185
 186 h1 {
 187     font-size: 160%;
 188         color: #FFF;
 189 }
 190
 191 h2 {
 192     font-size: 150%;
 193 }
 194 h2.sidebox{
 195     font-size: 110%;
 196 }
 197 h3 {
 198     font-size: 130%;
 199         padding: 0;
 200 }
 201 h3.browse-courses{
 202         font-size: 90%;
 203         text-decoration: none;
 204         clear: none;
 205         display: inline;
 206 }
 207 h3 a {
 208     font-size: 100%;
 209 }
 210 h4 {
 211     font-size: 120%;
 212 }
 213
 214
 215 h5 {
 216     font-size: 100%;
 217 }
 218
 219
 220 /* Preferences tabs */
 221 .etabbed-list-container {
 222         padding:0;
 223         margin: 0;
 224         width:70%;
 225         clear: left;
 226         height: 3em;
 227 }
 228
 229 .prefs_buttontab {
 230         padding:0;
 231         margin: 0;
 232         white-space: nowrap;
 233 }
 234 .prefs_tab{
 235         padding:0.5em 0.3em 0;
 236         margin: 0;
 237         white-space: nowrap;
 238     display: inline;
 239 }
 240
 241 .prefs_tab_selected{
 242         padding:0.7em 0.3em 0;
 243         margin: 0;
 244         margin: 0px;
 245         font-weight:bold;
 246         text-align:center;
 247         white-space: nowrap;
 248     display: inline;
 249 }
 250
 251
 252
 253 /*  Table of content attributes*/
 254 p.toc{
 255         font-family: Verdana, Helevetica, Arial, sans-serif;
 256         background-color: #E9F4F3;
 257         padding: .6em;
 258         margin-bottom: .6em;
 259         margin-top: 0em;
 260         margin-left: 1em;
 261         margin-right: 3em;
 262         border: 1px #ACCFCC solid;
 263 }
 264
 265
 266 /* link attributes */
 267 a:link, a:visited  {
 268         color: #4C566C;
 269         text-decoration: underline;
 270 }
 271 a:hover {
 272         color: #4C566C;
 273         text-decoration: underline;
 274 }
 275 a:active {
 276         color: #ffffff;
 277         text-decoration: underline;
 278 }
 279 /* align text to the left */
 280 .left {
 281         text-align: left;
 282 }
 283
 284 a.dropdown-title {
 285         color: white;
 286         font-weight: normal;
 287         text-decoration: none;
 288 }
 289
 290
 291 /* table border */
 292 .tableborder {
 293         border: 1px #595241 solid;
 294 }
 295
 296 /* main submit button */
 297 .button {
 298         background-color: #808080;
 299         font-weight: normal;
 300         color: black;
 301         text-align: center;
 302         -webkit-border-radius:3px;
 303         padding-top: 0.313em;
 304         padding-bottom: 0.313em;
 305
 306 }
 307 .button:focus {
 308         border:1px solid #A50707;
 309         background-color:  #FFDAB9;
 310 }
 311 /* small submit button at top */
 312 .button2 {
 313         font-family: Verdana, Helevetica, Arial, sans-serif;
 314         background-color: #E9F4F3;
 315
 316 }
 317 .button2:focus {
 318         background-color: #E9F4F3;
 319         border:  #ACCFCC  solid 1px;
 320 }
 321
 322 /* date attributes */
 323 small.date {
 324         font-family: Verdana, Helevetica, Arial, sans-serif;
 325         color: #595241;
 326         margin-bottom: 0;
 327         margin-top: 0;
 328         margin-left: 0.313em;
 329         margin-right: 0;
 330         font-size:1em;
 331 }
 332
 333 /* page breakline */
 334 hr {
 335         color: #ACCFCC;
 336         background-color: white;
 337         height: .063em;
 338 }
 339
 340 /* message box styles */
 341
 342 /* Editor box small */
 343 .editorsmallbox {
 344         font-family: Verdana, Helevetica, Arial, sans-serif;
 345         background-color: #E9F4F3;
 346         padding: 0.125em;
 347         padding-right: .188em;
 348         border: 1px #ACCFCC solid;
 349 }
 350
 351 /* Editor box large */
 352 .editorlargebox {
 353         font-family: Verdana, Helevetica, Arial, sans-serif;
 354         background-color: #E9F4F3;
 355         margin-left:1em;
 356         padding-left: .2em;
 357         padding-right: .5em;
 358         padding-top: .5em;
 359         padding-bottom: .4em;
 360         border: 1px #ACCFCC solid;
 361 }
 362
 363
 364 select.dropdown {
 365         font-family: Verdana, Helevetica, Arial, sans-serif;
 366 }
 367
 368 .highlight, a.highlight {
 369         background-color: #5B8E88;
 370         color: white;
 371 }
 372
 373 a .highlight{
 374         background-color: #5B8E88;
 375         color: white;
 376 }
 377
 378 .center {
 379         text-align: center;
 380 }
 381
 382
 383 /* edit content tabs */
 384 .buttontab {
 385         background-color: #E6E6E6;
 386         font-weight: 500;
 387         border:0;
 388         padding-left: .188em;
 389         padding-right: .188em;
 390         padding-top: .188em;
 391
 392 }
 393
 394 .tab {
 395         color: black;
 396         background-color: #E6E6E6;
 397         border-top: 1px #B8AE9C solid;
 398         border-left: 1px #B8AE9C solid;
 399         border-right: 1px #B8AE9C solid;
 400         text-decoration: none;
 401         text-align: center;
 402         font-weight: bold;
 403
 404
 405 }
 406 .buttontab selected {
 407         font-family: Helvetica, Arial, Helvetica, sans-serif;
 408         background-color: #6F7172;
 409         font-weight: 600;
 410         border:0;
 411         padding-left: .188em;
 412         padding-right: .188em;
 413         padding-top: .188em;
 414
 415 }
 416 td.selected{
 417         font-family: Helvetica, Arial, Helvetica, sans-serif;
 418         font-weight: 600;
 419         text-decoration: none;
 420         text-align: center;
 421         background-color: white;
 422         border-top: 1px #B8AE9C solid;
 423         border-left: 1px #B8AE9C solid;
 424         border-right: 1px #B8AE9C solid;
 425 }
 426 .econtainer{
 427         background-color: #fffaf0;
 428         border:1px #6F7172 solid;
 429         margin-left:.5em;
 430 }
 431
 432 .tab a:link, .etab a:visited {
 433         color: black;
 434         background-color: white;
 435
 436 }
 437 .tab a:hover {
 438         color: black;
 439         background-color: white;
 440 }
 441
 442 .etabself {
 443         background-color: #6F7172;
 444
 445         text-align: center;
 446         font-weight: bold;
 447         padding: 0.125em;
 448 }
 449
 450
 451 .unsaved {
 452         color: red;
 453         background-color: #FFFDE0;
 454         font-weight: bold;
 455 }
 456 .saved {
 457         background-color: #FFFDE0;
 458         margin: 0.625em;
 459 }
 460
 461
 462 /* the side menu */
 463 td.dropdown-heading {
 464         background-color: #DBFDD4;
 465         color: #595241;
 466         border-left: 1px solid #ECFEEA;
 467         border-right: 1px solid #ECFEEA;
 468         border-top: 1px solid #ECFEEA;
 469         font-weight: bold;
 470         padding: 0.125em;
 471 }
 472
 473 td.dropdown-heading a, td.dropdown-heading a:hover, td.dropdown-heading a:visited {
 474         text-decoration: none;
 475 }
 476
 477 td.dropdown-heading.closed {
 478         border-bottom: 1px solid #ECFEEA;
 479 }
 480
 481 /* the side menu content */
 482 td.dropdown {
 483         padding: 0.125em;
 484         background-color: white;
 485         color: black;
 486         border-left: 1px solid #ECFEEA;
 487         border-right: 1px solid #ECFEEA;
 488         border-bottom: 1px solid #ECFEEA;
 489         font-weight: normal;
 490 }
 491 td.dropdown a, td.dropdown a:visited  {
 492         color: #595241;
 493         text-decoration: none;
 494 }
 495 td.dropdown a:hover {
 496         color: #595241;
 497         text-decoration: underline;
 498 }
 499 td.dropdown.cell {
 500         border-bottom: 0;
 501 }
 502 td.dropdown strong {
 503         color: #2A6C28;
 504 }
 505
 506 /* added for 1.4.2: */
 507 .results {
 508         padding-left: 1.25em;
 509 }
 510
 511 h5.search-results {
 512         padding: 0.063em;
 513         margin-bottom: 0.313em;
 514         margin-top: 1em;
 515         padding-top: 3em;
 516         margin-left: 0.313em;
 517 }
 518
 519 small.search-info {
 520         color: #595241;
 521 }
 522
 523 p.search-description {
 524         background-color: #FFFCE5;
 525         color: #595241;
 526 }
 527
 528 .test-box {
 529         background-color: #F7F3ED;
 530         color: #595241;
 531         border-left: 1px solid #595241;
 532         border-right: 1px solid #595241;
 533         border-top: 1px solid #595241;
 534         font-weight: bold;
 535         padding: 0.125em;
 536 }
 537
 538 /*preferences*/
 539
 540 .input-form
 541 table.tabbed-table {
 542         width: 100%;
 543         border:thin black solid;
 544 }
 545 table.tabbed-table th#left-empty-tab {
 546         background-color: transparent;
 547         width: 0.938em;
 548         border-bottom: 1px solid #B8AE9C;
 549 }
 550 table.tabbed-table th#right-empty-tab {
 551         text-align: right;
 552         background-color: transparent;
 553         border-bottom: 1px solid #B8AE9C;
 554         width: 25em;
 555         padding-right: 0.313em;
 556 }
 557 table.tabbed-table th#right-empty-tab a {
 558         text-decoration: underline;
 559 }
 560 table.tabbed-table th.tab-spacer {
 561         background-color: transparent;
 562         width: 0.313em;
 563         border-bottom: 1px solid #B8AE9C;
 564 }
 565
 566 table.tabbed-table th.tab {
 567         padding-top: 0.125em;
 568         padding-bottom: 0.125em;
 569         width: 6.875em;
 570         background-color: #E9F4F3;
 571         border-bottom: 1px solid #B8AE9C;
 572         border-left: 1px solid #B8AE9C;
 573         border-top: 1px solid #B8AE9C;
 574         border-right: 1px solid #B8AE9C;
 575 }
 576 table.tabbed-table th.tab:hover {
 577         background-color: #ACCFCC;
 578 }
 579
 580 table.tabbed-table th.tab a:focus {
 581         color: white;
 582 }
 583 table.tabbed-table th.selected {
 584         padding-top: 0.125em;
 585         padding-bottom: 0.125em;
 586         width: 6.875em;
 587         background-color: #ACCFCC;
 588         border-left: 1px solid #B8AE9C;
 589         border-top: 1px solid #B8AE9C;
 590         border-right: 1px solid #B8AE9C;
 591 }
 592
 593 table.tabbed-table a, table.tabbed-table a:visited, table.tabbed-table a:hover {
 594         color: black;
 595         text-decoration: none;
 596 }
 597
 598
 599 .preference-buttons-container{
 600         background-color: red;
 601         height: 2.5em;
 602         width: 100%;
 603         text-align: center;
 604 }
 605
 606 div.preference-buttons-container li{
 607         display: inline;
 608         float: right;
 609 }
 610
 611 .prefs_tab_selected{
 612         font-style: italic;
 613         width: 10%;
 614 }
 615 .prefs_tab{
 616         width: 10%;
 617 }
 618
 619 .etabbed-table{
 620         margin: 0 auto;
 621 }
 622 #previewText{
 623         font-family: monospace;
 624         border: 2px solid rgb(0, 0, 0);
 625         padding: 2em;
 626         width: 80%;
 627         color: rgb(255, 255, 255);
 628         background-color: rgb(0, 0, 0);
 629 }
 630 #previewArea{;
 631         padding: 0em;
 632         border-bottom-width: 0;
 633         margin-left: auto;
 634         margin-right: auto;
 635         font-weight: normal;
 636         width: 70%;
 637         float:left;
 638         clear:right;
 639 }
 640 #display-settings-preview{
 641         width:90%;
 642         height:20em;
 643         margin: 0 auto;
 644 }
 645 #feedback{
 646         width: 90%;
 647 }
 648 #defaultfontsize-wrapper{
 649         width:90%;
 650 }
 651
 652 /* end of preferences */
 653
 654 a#my-start-page {
 655         padding: 0.125em;
 656         padding-left:  0.938em;
 657         background-repeat: no-repeat;
 658         background-position: 0.125em 0.313em;
 659 }
 660
 661 a#back-to {
 662         padding-left: 1.25em;
 663         background-image: url(images/back.gif);
 664         background-repeat: no-repeat;
 665         background-position: 0 0;
 666 }
 667
 668 .breadcrumbs, .previous-next /*a#guide*/{
 669     /* The path bar, including breadcrumbs and add to favorites */
 670         clear:both;
 671     font-size: 0.85em;
 672         padding:0 0.375em;
 673         color: #4C566C;
 674         background-color: white;
 675
 676 }
 677 #breadcrumbs-container{
 678         background-color: #4d4d4d;
 679         position: relative;
 680 }
 681 .breadcrumbs{
 682         display:none;
 683 }
 684 h2.page-title {
 685         padding-top: .5em;
 686         margin-top: .5em;
 687 }
 688 h1 {
 689         margin-bottom: 0.313em;
 690
 691 }
 692
 693
 694 div#help {
 695         border-left: 1px solid black;
 696         border-right: 1px solid black;
 697         border-bottom: 1px solid black;
 698         padding-left: 0.313em;
 699         padding-right: 0.313em;
 700         padding-bottom: 0.313em;
 701         background-color: #F7F3ED;
 702         margin-left: 0.313em;
 703         margin-right: 0.313em;
 704         font-size: small;
 705 }
 706
 707 h3#help-title {
 708         margin-left: 0.313em;
 709         margin-right: 0.313em;
 710         border-left: 1px solid black;
 711         border-right: 1px solid black;
 712         padding: 0.063em;
 713         background-color: #F7F3ED;
 714 }
 715 .line {
 716         border-bottom: 1px solid black;
 717 }
 718 div#help p {
 719         padding: 0;
 720         margin: 0;
 721 }
 722
 723 div#toctoggle {
 724         float: left;
 725         padding-left: 0.625em;
 726 }
 727
 728 h1#section-title {
 729         font-size: 90%;
 730 }
 731
 732 div#top-links {
 733         margin: 0 auto;
 734         font-size: .938em;
 735 /* moved inside of #footer for mobile theme */
 736 }
 737 #footer{
 738         /*width:100%;*/
 739         height:2.3em;
 740         background-color: #4b6b90;
 741         margin-top: -2.3em;
 742         position: relative;
 743         clear: both;
 744
 745 }
 746
 747 div#top-links a:link, div#top-links a:visited {
 748         text-decoration:none;
 749 }
 750
 751 #jumpmenu:focus{
 752         background-color:#F6EAD6;
 753 }
 754 #jumpmenu{
 755         margin: 0 auto;
 756 }
 757
 758 a#editor-link {
 759         background-color: #F7F3ED;
 760         padding-top: 0.063em;
 761         padding-bottom: 0.063em;
 762         padding-left:  0.938em;
 763         padding-right: 0.5em;
 764         border: 1px solid #cccccc;
 765         font-weight: normal;
 766         text-decoration: none;
 767 }
 768
 769 a#editor-link:hover {
 770         background-color: #F7F3ED;
 771         border: 1px solid #B8AE9C;
 772 }
 773
 774 a#editor-link.off {
 775         background-image: url(images/pen.gif);
 776         background-repeat: no-repeat;
 777         background-position: 0 0.125em;
 778 }
 779 a#editor-link.on {
 780         background-image: url(images/pen2.gif);
 781         background-repeat: no-repeat;
 782         background-position: 0 0.125em;
 783 }
 784
 785
 786 /* for data tables */
 787 table.data {
 788         width: 95%;
 789         margin: 0 auto;
 790         padding: 0;
 791         color: black;
 792         text-align: left;
 793         -webkit-border-radius:5px;
 794         border: #6D7B8D 1px solid;
 795
 796 }
 797 /* contains the headings */
 798 table.data th {
 799
 800         padding: 0.188em;
 801 }
 802
 803 table.data th a {
 804         color: #595241;
 805         background-image: url('../default/images/sort.gif');
 806         background-repeat: no-repeat;
 807         background-position: right;
 808 }
 809
 810 table.data tbody {
 811         border-top: 1px solid #B8AE9C;
 812         border-bottom: 1px solid #B8AE9C;
 813 }
 814 /*headings text*/
 815 table.data tbody th {
 816         text-align: left;
 817
 818 }
 819
 820 table.data td {
 821         padding: 0.188em;
 822         color: black;
 823         font-size: .875em;
 824         font-style: normal;
 825 }
 826 table.data td a:link, a:visited{
 827         color: black;
 828 }
 829 table.data tbody tr:hover {
 830         background-color: #efefef;
 831         cursor: pointer;
 832 }
 833
 834 table.data tbody tr.selected {
 835         background-color: #E9F4F3;
 836         cursor: auto;
 837 }
 838
 839 table.data tfoot {
 840         background-color: #F7F3ED;
 841 }
 842
 843 table.data tfoot tr:first-child td {
 844         padding: 0.313em;
 845         background-image: url('images/arrow_ltr.gif');
 846         background-repeat: no-repeat;
 847         background-position: .25em 0.313em;
 848 }
 849
 850 table.data.static tfoot td, table.data.static tfoot tr:first-child td {
 851         border-top: 1px solid #B8AE9C;
 852         padding: 0.313em;
 853         background-image: none;
 854         padding-left: 0;
 855
 856 }
 857 /* add borders to row in Required Information, Personal Information*/
 858 .row{
 859         padding:.375em 0;
 860         border-bottom: 1px #cccccc solid;
 861         font-size: 0.938em;
 862 }
 863 #last-row, .row-buttons, #last-row1, .row-blurb{
 864         border: none;
 865 }
 866 #browse-courses-table{
 867         font-size: .875em;
 868 }
 869
 870
 871 /*buttons*/
 872 table.data tfoot input {
 873         background-color: #efefef;
 874         font-weight: normal;
 875         border:  #AAA  solid 1px;
 876 }
 877 table.data tfoot input:focus {
 878         background-color: #FFDAB9;
 879         border:  #AAA  solid 1px;
 880 }
 881
 882
 883 /* used for static tables with no form elements: */
 884 table.data.static tbody tr:hover {
 885         background-color: transparent;
 886         cursor: auto;
 887 }
 888
 889
 890
 891 /* course browser: */
 892
 893 div#browse {
 894         margin-left: auto;
 895         margin-right: auto;
 896         width: 80%;
 897 }
 898
 899 div.browse-selected {
 900         background-image: url('images/side_arrow.gif');
 901         background-repeat: no-repeat;
 902         padding-left: 0.563em;
 903         background-position: center left;
 904 }
 905
 906 div.browse-unselected {
 907         padding-left: 0.563em;
 908 }
 909
 910 ul.browse-list {
 911         list-style: none;
 912         padding:0;
 913 }
 914
 915 /* feedback /errors */
 916 div#error {
 917         width: 89%;
 918         margin-left: auto;
 919         margin-right: auto;
 920         margin-top:  0.938em;
 921         margin-bottom:  0.938em;
 922         border: 1px solid #DD0000;
 923         padding: 0.313em;
 924         background-color: #F4DCDC;
 925         color: #A50707;
 926         background-color: #F4DCDC;
 927         padding-left: 1.563em;
 928         font-weight: bold;
 929         -webkit-border-radius:5px;
 930 }
 931 div#error h4 {
 932         color: black;
 933         margin-left: 0;
 934 }
 935
 936 div#error ul, div#feedback ul, div#help ul {
 937         position: relative;
 938         list-style: none;
 939         margin-left: 0;
 940         padding-left: 0;
 941 }
 942
 943 div#error ul li{
 944         margin-top: 0.313em;
 945 }
 946
 947 div#feedback, div#info {
 948         width: 95%;
 949         margin-left: auto;
 950         margin-right: auto;
 951         margin-top: 0.313em;
 952         padding-left: 0.313em;
 953         padding-right: 0.313em;
 954         font-family: Helvetica, Arial, sans-serif;
 955         -webkit-border-radius:5px;
 956         border: 1px solid #17B506;
 957         background-color: #E7EFD0;
 958         color: #3f4559;
 959         font-size: 90%;
 960         z-index: -1;
 961 }
 962 div#feedback li, div#info li, div#error li{
 963         color: #4C566C;
 964         z-index: -1;
 965 }
 966
 967 div#help {
 968         width: 95%;
 969         margin-left: auto;
 970         margin-right: auto;
 971         margin-top:  0.938em;
 972         margin-bottom:  0.938em;
 973         border: 1px solid #ACCFCC;
 974         padding: 0.313em;
 975         background-color: #E9F4F3;
 976         color: #024C41;
 977 }
 978
 979
 980 div#warning {
 981         width: 95%;
 982         margin-left: auto;
 983         margin-right: auto;
 984         margin-top:  0.938em;
 985         margin-bottom:  0.938em;
 986         border: 1px solid #FF8400;
 987         padding: 0.313em;
 988         background-color: #FFF6ED;
 989         color: #D95900;
 990         font-weight: bold;
 991 }
 992 acronym {
 993         cursor: help;
 994 }
 995
 996 div.news p {
 997         margin: 0;
 998         padding:0;
 999 }
1000 div.news span.date {
1001         font-family:Helevetica, Arial, sans-serif;
1002         color: #4C566C;
1003 }
1004
1005 .news{
1006         padding: 0;
1007 }
1008 /* home page links */
1009 div.home-link {
1010         padding: 0.125em;
1011         float: left;
1012         text-align: center;
1013         margin: 0.125em;
1014         width: 7.5em;
1015         height: 5.625em;
1016 }
1017 div.home-link:hover {
1018         padding: 0.063em;
1019         background-color: #F7F3ED;
1020         border: 1px solid #afafaf;
1021         float: left;
1022         text-align: center;
1023         margin: 0.125em;
1024 }
1025 div.home-link a {
1026         text-decoration: none;
1027         font-weight: bold;
1028 }
1029
1030 div.home-link img {
1031         border: 0;
1032 }
1033
1034 /* sequence links */
1035 div#sequence-links {
1036
1037         margin-top: 0.625em;
1038         padding-right: 0.313em;
1039         padding-top:0.438em;
1040 }
1041 div#sequence-links a {
1042         text-decoration: none;
1043         display: block;
1044 }
1045
1046 .previous-next{
1047         display: block;
1048 }
1049 div.dropdown {
1050         width: 12.5em;
1051         padding: 0.125em;
1052         background-color: white;
1053         color: black;
1054         border-left: 1px solid #ECFEEA;
1055         border-right: 1px solid #ECFEEA;
1056         border-bottom: 1px solid #ECFEEA;
1057         font-weight: normal;
1058 }
1059
1060 div.dropdown-heading {
1061         background-color: #ACCFCC;
1062         color: #595241;
1063         border-left: 1px solid #ECFEEA;
1064         border-right: 1px solid #ECFEEA;
1065         border-top: 1px solid #ECFEEA;
1066         font-weight: bold;
1067         padding: 0.125em;
1068 }
1069
1070 div.required {
1071         font-weight: bold;
1072         color: red;
1073         font-size: large;
1074         float: left;
1075         position: relative;
1076         margin-top: -0.313em;
1077         height:  0.938em;
1078         padding-right: 0.125em;
1079 }
1080
1081 div#content_text {
1082         margin-left: 0.313em;
1083 }
1084 /*needs to be set to display: none so drawer can open */
1085 #content{
1086
1087         padding-top:.5em;
1088         margin-top: .5em;
1089         background-color: #F5F5F5;
1090 }
1091 form {
1092         display:inline;
1093         max-width: 100%;
1094 }
1095
1096
1097 optgroup {
1098         /*font-size: small;*/
1099 }
1100
1101 /* paging*/
1102 div.paging {
1103
1104 }
1105 div.paging ul {
1106     list-style: none;
1107     display: inline;
1108     padding: 0;
1109         max-width: 10%;
1110         margin-bottom: 1em;
1111 }
1112 div.paging li {
1113         float: left;
1114         display: inline;
1115         padding-left: 0.125em;
1116         padding-right: 0.125em;
1117         padding-top: 0;
1118         padding-bottom: 0;
1119         width: 10%;
1120 }
1121
1122 div.paging li a {
1123         text-decoration: none;
1124         padding-left: 0.25em;
1125         padding-right: 0.25em;
1126         border-left: 1px solid white;
1127         border-right: 1px solid white;
1128 }
1129
1130 div.paging li a:hover, div.paging li a.current {
1131    background-color: #5B8E88;
1132    border-left: 1px solid #000;
1133    border-right: 1px solid #000;
1134    color: white;
1135 }
1136
1137 #tl_corner{
1138
1139         background-image:url(images/tl_corner.gif);
1140         background-position: top left;
1141         background-repeat: no-repeat;
1142         padding:0;
1143 }
1144
1145 div.tabs {
1146         /* Navigational Plone Tabs(tm), implemented by customizing the a tag - they are surprisingly elegant. The power of CSS runs strong in these :) */
1147     background-color: transparent;
1148         border-collapse: collapse;
1149         border-bottom: 1px solid #B8AE9C;
1150         padding: 0.5em 0em 0em 2em;
1151         white-space: nowrap;
1152 }
1153
1154 div.tabs a {
1155     /* The normal, unselected tabs. They are all links */
1156     background-color: transparent;
1157     border-color: #B8AE9C;
1158     border-width: 1px;
1159     border-style: solid solid none solid;
1160     color: #595241;
1161     height: 1.2em;
1162     margin-right: 0.5em;
1163     padding: 0em 2em 0em;
1164
1165 }
1166
1167 div.tabs a.selected {
1168     /* The selected tab. There's only one of this */
1169     background-color: white;
1170     border-bottom: #B8AE9C 1px solid;
1171     color: #595241;
1172     font-weight: normal;
1173 }
1174
1175 div.tabs a:hover, div.tabs a.active {
1176     background-color: #B8AE9C;
1177     border-bottom: 1px solid #B8AE9C;
1178     color: white;
1179 }
1180
1181 .headingbox a{
1182         color: #4C566C;
1183         text-decoration:underline;
1184 }
1185 div.box {
1186 }
1187 h4.box {
1188         background-color: #F5F5F5;
1189         padding: .313em;
1190 }
1191 h4.box a {
1192         display: block;
1193         color: #4C566C;
1194         background-color: #F5F5F5;
1195         text-decoration: none;
1196 }
1197 .content-expand {
1198         background-image:url("images/content-arrow-down.png");
1199         background-position: top right;
1200         background-repeat: no-repeat;
1201 }
1202 .content-closed{
1203         background-image:url("images/content-arrow-up.png");
1204         background-position: center right;
1205         background-repeat: no-repeat;
1206 }
1207
1208 div.box {
1209         padding: 0.313em;
1210         background-color: #F5F5F5;
1211         color: black;
1212         border: 1px solid #B8AE9C;
1213         font-size:0.85em;
1214         font-weight: normal;
1215         padding:0.125em;
1216 }
1217
1218 h5.box {
1219     background-color: #6F7172;
1220     border: 1px solid #B8AE9C;
1221     border-style: solid solid none solid;
1222     color: Black;
1223     padding: 0em 1em 0em 1em;
1224     display: inline;
1225         font-size:  1em;
1226     height: 1em;
1227 }
1228
1229 div.box a:link {
1230         text-decoration: none;
1231 }
1232
1233 div.box a:visited {
1234         color: #2A6C28;
1235         text-decoration: none;
1236 }
1237
1238 div.box a:hover {
1239         text-decoration: underline;
1240 }
1241
1242 .boxDetails {
1243     text-align: right;
1244 }
1245
1246 div.box .content {
1247     padding: 1em;
1248         font-size:  1em;
1249 }
1250
1251 div.box a.close {
1252     float: right;
1253     text-transform: none;
1254     border-left: 1pt solid #B8AE9C;
1255     padding: 0em 0.2em;
1256 }
1257
1258 div.box h1,
1259 div.box h2,
1260 div.box h3,
1261 div.box h4 {
1262     margin: 0;
1263     padding: 0;
1264 }
1265
1266 div.box .even {
1267     background-color: #F7F3ED;
1268 }
1269
1270 div.box .odd {
1271     background-color: transparent;
1272 }
1273
1274
1275 /* users/index.php */
1276
1277 div.course {
1278         position: relative;
1279         width: 12.5em;
1280         height: 10.5em;
1281         border: rgb(204, 204, 204) 1px solid;
1282         background-color: #F7F7F7;
1283         float: left;
1284         margin: 0.188em;
1285         padding: 0.313em;
1286 }
1287
1288 div.course.break {
1289         clear: left;
1290 }
1291
1292 div.course h2 {
1293         border: 0;
1294         font-weight: normal;
1295         font-size: large;
1296
1297 }
1298
1299 div.course:hover {
1300         background-color:#FBF4E9;
1301         border: #B8AE9C 1px solid;
1302 }
1303
1304
1305 table.data .odd img.headicon{
1306         width: 2.469em;
1307         height: 2.469em;
1308         -webkit-border-radius:5px;
1309 }
1310
1311 .icon{
1312         -webkit-border-radius:10px;
1313         border-color: white;
1314         width: 2.5em;
1315         height: 2.5em;
1316         float: left;
1317 }
1318 div.course div.shortcuts {
1319         text-align: right;
1320         clear: left;
1321         vertical-align: middle;
1322         width: 12.5em;
1323 }
1324
1325 fieldset#shortcuts {
1326         float: right;
1327         background-color: #FEFDEF;
1328         border: 1pt solid #B8AE9C;
1329         margin: -5pt 5pt 5pt 5pt;
1330         padding-right: 10pt;
1331         padding-bottom: 5pt;
1332         padding-left: 10pt;
1333 }
1334
1335 .shortcuts{
1336
1337 }
1338
1339 fieldset {
1340         margin-bottom: 10pt;
1341         -webkit-border-radius:5px;
1342         padding: 0 0.375em;
1343         width: 90%;
1344         margin: 0 auto;
1345         width:95%;
1346         margin:0 auto;
1347         border:thin #6D7B8D solid;
1348         margin-bottom: 1em;
1349 }
1350 #shortcuts legend {
1351 }
1352 #shortcuts ul {
1353         position: relative;
1354         margin-top: 0pt;
1355         margin-bottom: 0pt;
1356         margin-left: 0pt;
1357         list-style-type:  none;
1358         padding-left: 0pt;
1359 }
1360
1361 /*a#guide,*/ a#my-courses-link {
1362         background-color: #6D84A2;
1363 }
1364
1365 #guide img{
1366         border:none;
1367 }
1368
1369 #guide a:hover{
1370
1371 }
1372 div#content-text {
1373         padding-right: 5pt;
1374         line-height:150%;
1375 }
1376
1377 div#content-text li {
1378         margin-left: 15pt;
1379 }
1380
1381 div#content-test, div.content-from-module {
1382         float: left;
1383         margin-top: 2em;
1384         margin-bottom: 2em;
1385         padding-right: 5pt;
1386         width: 80%;
1387 }
1388 div#content-test ol{
1389         margin-right: 5pt;;
1390 }
1391
1392 div#content-test ol ul li{
1393         list-style: none;
1394         padding: 0 0.125em 0  0.938em;
1395         margin-bottom: 0.063em;
1396         line-height: 200%;
1397         background-color: #fdfdfd;
1398         border-bottom: 1px solid #efefef;
1399         border: 1px solid #eeeeff;
1400 }
1401
1402 div#content-info {
1403         margin: 5pt;
1404         font-size: small;
1405         color: #b8ae9c;
1406         clear: both;
1407 }
1408
1409 div#container {
1410         text-align: left;
1411         margin: 0 auto;
1412         padding: 0;
1413         border:0;
1414         width: 95%;
1415 }
1416
1417 div#menutoggle{
1418         text-align: right;
1419         padding-bottom: 0.625em;
1420         padding-right: 0.625em;
1421         float: left;
1422         margin-top: 0.625em;
1423         padding-right: 0.313em;
1424         font-size:0.95em;
1425 }
1426
1427
1428 /* login page */
1429 div.column {
1430         float: left;
1431         width: 45%;
1432         margin: 0.313em;
1433         min-width: 10.625em;
1434 }
1435
1436 div.column h3 {
1437         background-color: #F6EAD6;
1438         border-bottom: .05em solid #6F7172;
1439         font-size: small;
1440         display:block;
1441         color:black;
1442         font-weight:600;
1443         padding-left:0.5em;
1444 }
1445
1446 div.insidecol {
1447    min-height: 10.625em;
1448    height: 10.625em;
1449    padding:0.313em;
1450 }
1451
1452
1453 /* index page */
1454 ul#home-links, ul#home-detail-links {
1455         list-style: none;
1456 }
1457 ul#home-links li {
1458
1459         display: inline;
1460         float: left;
1461         padding: 0.8em;
1462         text-align: center;
1463         margin: 0.1em;
1464         width: 8.5em;
1465         height: 7.0em;
1466         padding-left:0;
1467
1468 }
1469 ul#home-links li a {
1470         text-decoration: none;
1471         border: 1px transparent;
1472         font-weight: bold;
1473 }
1474 ul#home-links li a img {
1475         border: 0;
1476         display: block;
1477         padding-left:1.563em;
1478 }
1479
1480 /*my start page */
1481 #my_courses_container{
1482         text-align: left;
1483         margin: 0 auto;
1484         border:0;
1485         min-width: 100%;
1486 }
1487 #my-courses-navlist{
1488 }
1489 .my-courses-list{
1490         border: solid 1px #A9ADB0;
1491         -webkit-border-radius:5px;
1492         padding: .375em;
1493         color: #4C566C;
1494         margin: .375em;
1495         padding: .375em;
1496 }
1497 .my-courses-list-ul{
1498         margin: 0 auto;
1499         padding-left: 0;
1500         width: 100%;
1501 }
1502 .my-courses-links{
1503         font-size: 80%;
1504         padding-top: .75em;
1505 }
1506 .my-courses-resume{
1507         float: right;
1508 }
1509 .fl-link-summary{
1510         padding-left: 0.875em;
1511         padding-bottom: 0.875em;
1512         display: inline;
1513 }
1514 .fl-list-menu li a {
1515 }
1516 .fl-theme-iphone [class*="fl-list"]:not(.fl-list):not(.fl-grid) a {
1517 }
1518 .fl-theme-iphone [class*="fl-list"] > li .fl-link-summary{
1519         color: #4C566C;
1520 }
1521 .current_head{
1522         padding-top: .5em;
1523 }
1524 .fl-list-menu {
1525
1526 }
1527
1528 .current_box{
1529         max-width: 100%;
1530 }
1531 .current_list{
1532         width: 95%;
1533         padding: 0 0.375em;
1534 }
1535 .current_list li{
1536         list-style-type: none;
1537         padding:0;
1538         margin:0;
1539
1540 }
1541 .current_list img{
1542
1543 }
1544
1545 #show-all{
1546         text-align: center;
1547 }
1548 /* enrollment tabs */
1549 #navlist {
1550         padding: 0;
1551         margin-left: 0;
1552         margin-right: auto;
1553         margin-left: auto;
1554         margin-bottom: .25em;
1555         margin-top: 0.938em;
1556         white-space: nowrap;
1557 }
1558
1559 #navlist li {
1560         list-style: none;
1561         display: inline;
1562         margin: 0;
1563 }
1564
1565 #navlist li a {
1566         padding: 0.188em 0.563em;
1567         border: 1px solid #F7F3ED;
1568         border-bottom: none;
1569         background-color: #F7F3ED;
1570         text-decoration: none;
1571         margin-left: .25em;
1572         white-space: nowrap;
1573 }
1574
1575 #navlist li a:hover, #navlist li a:active {
1576         color: #000;
1577         background-color: #fff;
1578 }
1579
1580 /* tree */
1581 .img-size-tree {
1582         vertical-align: middle;
1583         margin-top: 0;
1584     padding:0;
1585         height:1.45em;
1586         width:1.5em;
1587 }
1588 /* profile page */
1589
1590 dl#public-profile {
1591         width: 100%;
1592
1593 }
1594
1595 dl#public-profile {
1596         width: 100%;
1597
1598 }
1599 dl#public-profile dt {
1600         float: left;
1601         width: 90%;
1602         border-right: 1px solid #F7F3ED;
1603         padding: 0.313em 0.313em 0.313em 0;
1604
1605         margin-right: 0.313em;
1606 }
1607 dl#public-profile dd {
1608         margin: 0;
1609 }
1610
1611 div.social-right{
1612         margin-left:.5em;
1613         margin-top: 1em;
1614 }
1615 div.social-left{
1616         margin-left:.5em;
1617 }
1618 h4.profile{
1619         float: left;
1620 }
1621 .social-wrapper h3{
1622         padding-top: .5em;
1623 }
1624 .my-contacts h3{
1625         padding-bottom: .375em;
1626 }
1627 img#profile{
1628         border: 1px #cccccc solid;
1629         margin-left: 1em;
1630 }
1631 dd{
1632     margin: 0;
1633 }
1634
1635
1636 /** forum stuff **/
1637 #forum-thread li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; float:left; width: 97%; list-style: none; }
1638 #forum-thread li.even { background-color: #F7F3ED; border-top: none; }
1639 #forum-thread li.odd { background-color: #fff; }
1640 div.forum-post-author { float:left; width:19.375em; padding:0.5em 0.625em; }
1641 div.forum-post-author a.title {font-size: 1.1em; line-height: 1.2em; font-weight: bold; text-decoration:none; }
1642 div.forum-post-author img.profile-picture { border: 2px solid #F7F3ED; text-align:right;}
1643 div.forum-post-content { margin-left: 19.375em; padding: 0.313em 0 1.125em 1.125em;}
1644 div.forum-post-content h3 { font-weight: 500; float:left;clear:right; }
1645 div.forum-post-ctrl { float: right; padding-right: 0.313em; color: #a1a1a1;}
1646 div.forum-post-ctrl a { text-decoration: none; }
1647 div.forum-post-ctrl span { color: black; background-color: #fefdc2; padding: 0.188em; }
1648 div.forum-post-content p.date { color: #a1a1a1; border-bottom: 1px solid #F7F3ED; }
1649 div.forum-post-content div.body p { margin-bottom:1em; }
1650 div.forum-paginator{border:thin #cccccc solid; padding:.3em; width:95%;margin:auto;background-color:#F7F3ED;}
1651 span.forum-paginator-active{font-weight:700;text-decoration:underline; height:2em;}
1652
1653
1654
1655 /** inbox stuff - reuses some of the forum layout **/
1656 #inbox-msg li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; width: 95%; list-style: none; min-height: 11em;}
1657
1658 /*  tool list on admin home and manage screens  */
1659  li.top-tool {
1660         list-style: none;
1661         padding: 0.125em 0.125em 0.125em  0.938em;
1662         margin-bottom: 0.313em;
1663         line-height: 200%;
1664         border: solid 1px #A9ADB0;
1665         -webkit-border-radius:5px;
1666 }
1667 li.top-tool a {  font-weight: bold; } /* ol#tools>li>a */
1668
1669 li.child-tool a {
1670         font-size: x-small;
1671         font-weight: normal;
1672 }
1673
1674 /* ol#tools>li>ul, */
1675 ul.child-top-tool {
1676         margin-top: -0.313em;
1677         padding-left: 0;
1678         margin-left: 0;
1679         display: inline;
1680 }
1681 ul.child-top-tool:before {
1682         content: " : ";
1683 }
1684
1685 li.child-tool {
1686         display: inline;
1687         margin-right: 0.313em;
1688         font-size: x-small;
1689 }
1690
1691 .img-size-home {
1692         height:3.85em;
1693         width:3.9em;
1694 }
1695
1696 /* browse courses */
1697 div.browse-course {
1698         width: 28em;
1699         padding-bottom: 0.625em;
1700         background-color: #fffaf0;
1701         border:1px #6F7172 solid;
1702         font-size:9pt;
1703         min-height:18em;
1704         margin:auto;
1705         margin-left:1em;
1706         margin-top:1em;
1707 }
1708
1709 dl.browse-course {
1710         width: 90%;
1711         padding-bottom: 0.625em;
1712         background-color: #fffaf0;
1713
1714         margin:auto;
1715         margin-left:1em;
1716 }
1717 dl.browse-course dt {
1718         float: left;
1719         font-weight: bold;
1720         width: 25%;
1721         text-align: right;
1722         clear: left;
1723         padding: 0.313em 0.625em 0.313em 0;
1724         vertical-align: middle;
1725
1726 }
1727 dl.browse-course dd {
1728         margin-bottom: 0.313em;
1729         clear: right;
1730         padding: 0.313em 0 0.313em 0.625em;
1731         margin-left: 26%;
1732
1733 }
1734 .row .buttons{
1735         border: none;
1736 }
1737
1738 /*  form fields grouping for WCAG 2.0 conformance*/
1739
1740 fieldset.group_form{
1741         width:95%;
1742         margin:0 auto;
1743         margin-bottom: 1em;
1744         border: 1px #6D7B8D solid;
1745         -webkit-border-radius:5px;
1746 }
1747
1748 legend.group_form{
1749         background-color:white;
1750         font-weight: 600;
1751         color: #4c566c;
1752         padding:.5em;
1753         border: 1px #6D7B8D solid;
1754         -webkit-border-radius:5px;
1755 }
1756 /* file storage */
1757
1758 #fsfloat1{
1759         float:right;
1760 }
1761 #fsfloat2{
1762         float:right;
1763         width:48%;
1764 }
1765
1766
1767 /* highlight active links for WCAG 2.0 conformance */
1768 a:active,a:hover,a:focus{
1769         background-color:#F6EAD6;
1770         color:#000000;
1771 }
1772
1773
1774 /*Added by Silvia */
1775 div.column_primary {
1776         float: left;
1777         width: 42%;
1778         margin: 0.313em;
1779         padding: 0;
1780         min-width: 10.625em;
1781 /*      position: relative;*/
1782 }
1783
1784 div.column_equivalent{
1785         float: left;
1786         width: 52%;
1787         margin-left:  0.938em;
1788         margin-top: 0.313em;
1789         margin-right: 0.313em;
1790         margin-bottom: 0.313em;
1791         min-width: 10.625em;
1792         padding: 0.313em;
1793         border: 1px solid #EEE;
1794         background-color: #FFF;
1795 /*      position: relative;*/
1796
1797 }
1798
1799 div.resource_box{
1800         border: 1px solid #aaa;
1801         width: 95%;
1802         margin: 0.313em;
1803         padding: 0.313em;
1804         min-width: 9.375em;
1805         background-color: #eee;
1806 /*      position: relative;*/
1807 }
1808
1809 h2.alternatives_to{
1810         margin-top: 0.75em;
1811         font-size: 90%;
1812         color: #A50707;
1813 }
1814
1815 div.alternative_box{
1816         border: 1px solid #ddd;
1817         /*width: 90%;*/
1818         margin: 0.313em;
1819         padding: 0.313em;
1820         min-width: 9.375em;
1821         background-color: #fff;
1822 }
1823
1824 div.alternative_box legend {
1825         color: #000;
1826 }
1827
1828 div.resource_box legend {
1829         color: #000;
1830 }
1831
1832 label.primary a{
1833         color: #A50707;
1834         font-weight: bolder;
1835         background-color: white;
1836 }
1837
1838 /* format of "table of contents" on content page */
1839 #toc a          { display:block; margin:0.188em; }
1840 #toc .h2, #toc .h3, #toc .h4, #toc .h5, #toc .h6{
1841         padding:0 0 0 0;
1842 }
1843
1844
1845 fieldset#toc {
1846         background-color: #FEFDEF;
1847         border: 1pt solid #B8AE9C;
1848         width:89%;
1849 }
1850
1851 #side-menu{
1852         overflow:hidden;
1853 }
1854
1855 /* cleans up glossary question mark line spacing*/
1856 sup{
1857         border: 1pt solid #B8AE9C;
1858         vertical-align:bottom;
1859         margin-top: 1em;
1860 }
1861
1862 /* jQuery tooltip styles */
1863 #tooltip{
1864         position:absolute;
1865         z-index:3000;
1866         border:3px solid #111;
1867         background-color:#eeeeee;
1868         padding:0.313em;
1869 }
1870 #tooltip h3,#tooltip div{
1871         margin:0;
1872 }
1873
1874 /* style for home page modules "detail view" */
1875 div.home_box {
1876         padding: .75em 0;
1877         margin: 0 auto;
1878 }
1879
1880 .outside_box{
1881         background:#e0e0e0;
1882         width: 17em;
1883         margin: .375em;
1884         padding: 0;
1885         height:9.8em;
1886 }
1887
1888 .inside_box{
1889         width:100%;
1890         margin:auto;
1891         height:52%;
1892         margin-bottom:.2em;
1893         background:#eeeeee;
1894
1895 }
1896 .details_or{
1897         width:28.8em;
1898         height:9.8em;
1899         margin:0;
1900         background-image:url(images/details_r.png);
1901         background-position: top right;
1902         background-repeat:no-repeat;
1903 }
1904 .details_ol{
1905         height:9.8em;
1906         margin:0;
1907         width:.45em;
1908         background-image:url(images/details_l.png);
1909         background-position: top left;
1910         background-repeat:no-repeat;
1911 }
1912 .details_ir{
1913         width:.5em;
1914         height:100%;
1915         float:right;
1916         background-image:url(images/details_ir.png);
1917         background-position: top right;
1918         background-repeat:no-repeat;
1919 }
1920 .details_il{
1921         height:100%;
1922         float:left;
1923         background-image:url(images/details_il.png);
1924         background-position: top left;
1925         background-repeat:no-repeat;
1926 }
1927 .home-title{
1928         font-size:12pt;
1929 }
1930 .buttonbox{
1931         float:right;
1932 }
1933 .details_text{
1934         margin-left:1em;
1935 }
1936 .draggable_selected {
1937         background-color: lightgrey;
1938         cursor: move;
1939 }
1940
1941 div.menuedit{
1942         float:right;
1943         margin-top:-1.2em;
1944         border:1px solid #cccccc;
1945 }
1946 li.folders {
1947         list-style: disc url(../../images/folder.gif) outside;
1948         font-family: Verdana, Helevetica, Arial, sans-serif;
1949         margin-bottom: 0;
1950         margin-top: 0;
1951         margin-right: 0;
1952 }
1953
1954 li.folders .disabled {
1955         color: #B8AE9C;
1956 }
1957
1958 ul.folder{
1959         list-style-image:none;
1960         list-style-position:outside;
1961         list-style-type:none;
1962         margin:0em;
1963         padding:0em;
1964 }
1965
1966
1967 /*      top navigation */
1968
1969 #topnavlist-link {
1970         color: white;
1971         text-decoration: none;
1972         font-weight: bold;
1973 }
1974
1975 ul#topnavlist {
1976         display: none;
1977         position: relative;
1978         top: 1.2em;
1979         z-index: 1;
1980         background-color: white;
1981 }
1982
1983 ul#topnavlist li {
1984         padding: 0;
1985         margin: 0;
1986 }
1987 ul#topnavlist li a.active {
1988         color: black;
1989         font-style: italic;
1990         }
1991 ul#topnavlist li a:hover, ul#topnavlist li a:focus {
1992         color: black;
1993 }
1994
1995 ul#topnavlist li a  {
1996         color: #4C566C;
1997         text-decoration: none;
1998 }
1999
2000
2001 div.toolcontainer{
2002         width:90%;
2003         margin:auto;
2004         border:thin solid #e8e8e8;
2005         padding-top:1em;
2006         padding-bottom:1em;
2007 }
2008
2009 ul#subnavlist {
2010         padding: 0;
2011         padding-bottom: 0.313em;
2012         margin: 0;
2013         font-size: 90%;
2014 }
2015
2016
2017 ul#subnavlist li {
2018         display: inline;
2019 }
2020
2021 ul#subnavlist li#test{
2022         display: none;
2023 }
2024 ul#subnavlist li a:hover, ul#subnavlist li a:focus, ul#subnavlist li a.active{ /*
2025         color: black;
2026         text-decoration:none;*/
2027 }
2028
2029 ul#subnavlist li a, ul#subnavlist li a:visited {
2030         color: #4C566C;
2031 }
2032
2033
2034 /* list attributes */
2035 ul {
2036         list-style: none;
2037 }
2038 li {
2039         color: black;
2040         list-style: none;
2041 }
2042
2043 ol#tools>li:hover, ol#tools>li:hover a {
2044         border: 1px solid #e0e0e0;
2045         background-color: #e6e6e6;
2046         color: black;
2047 }
2048
2049
2050 #content-contentwrapper{
2051         height:100%;
2052     position:relative;
2053         z-index:1000;
2054         width:100%;
2055         overflow:hidden;
2056 }
2057
2058 #leftcolumn{
2059         float: left;
2060         width: 17em;
2061         margin-left: 0.313em;
2062         margin-top:-0.625em;
2063 }
2064
2065 #copyright{
2066         font-size: 0.5em;
2067 }
2068 #gototop{
2069         text-align: center;
2070         color: #4B6B90;
2071 }
2072
2073  #tools{
2074         margin: 0 auto;
2075         padding: 0.375em;
2076 }
2077
2078
2079 /* ATutor Social Styles */
2080
2081 div .profile_container {
2082         background-color:#eee;
2083         border: 1px solid #8e8e8e;
2084         width:80%;
2085         padding:0.5em;
2086         margin-bottom: 0.5em;
2087 }
2088
2089 div .profile_container .top_right {
2090         float: right;
2091 }
2092
2093 dl.public-profile dd{
2094         margin-left:0;
2095 }
2096 dl.public-profile dt {
2097         float: left;
2098         font-weight: bold;
2099         min-width:12em;
2100 }
2101
2102 /* Search form */
2103 div .search_form {
2104         margin-bottom: 1em;
2105 }
2106
2107 div .search_form .row{
2108         background-color: #DEDEC0;
2109         padding: 0.5em;
2110 }
2111 div .button {
2112         background-color: #eee;
2113         border: 1px solid #aaa;
2114 }
2115 div .button:hover{
2116         background-color: #cccccc;
2117         color: #ffffff;
2118 }
2119
2120 /* Side menu */
2121
2122
2123 ul.social_side_menu {
2124         padding-left: 2em;
2125 }
2126 ul.social_side_menu li {
2127         padding-bottom: 0.2em;
2128         list-style: circle;
2129 }
2130
2131 div .divider {
2132         border-bottom:1px solid #C1C157;
2133         padding-bottom:0.5em;
2134         margin-bottom:0.5em;
2135 }
2136
2137 .activity{
2138         line-height:18pt;
2139         font-size:.8em;
2140 }
2141
2142 div.contentbox, input-form{
2143
2144         padding:.5em;
2145         background-color: #ffffff;
2146     overflow:hidden;
2147     border: #A9ADB0 solid 1px;
2148         -webkit-border-radius: 5px;
2149 }
2150
2151 div.suggestions{
2152         border:1px solid #a50707;
2153         margin-left:0.625em;
2154         width:50%;
2155 }
2156 li.inlinelist{
2157         display: inline;
2158         padding-right: 1em;
2159 }
2160 ul.social_inline_menu{
2161         background-color: #eeeeee;
2162         border:thin #cccccc solid;
2163         padding:.5em;
2164         width:90%;
2165         margin:auto;
2166 }
2167 div.social-wrapper{
2168         width: 100%;
2169 }
2170
2171
2172 .contentbox-a{
2173     width: 100%;
2174 }
2175 .contentbox-b{
2176     padding-bottom:0.2em;
2177 }
2178
2179 div.logo{
2180 float:left;
2181 clear:right;
2182 margin-left:2em;}
2183
2184
2185