docs/themes/mobile/tablet.css

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