themes/mobile/tablet.css

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