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