themes/mobile/tablet.css

   1
   2 /************************************************************************************************/
   3 /* Style is optimized for tablets. Note that -webkit  and -moz properties create errors in the CSS validator.
   4 Relative units for sizes are used unless it is a border. Classes beginning with ".fl-" override Mobile FSS,
   5 see the API @ http://wiki.fluidproject.org/display/fluid/Mobile+FSS+API  */
   6 /************************************************************************************************/
   7
   8
   9 html, body{
  10         height: 100%;
  11 }
  12
  13 #main{
  14         overflow-x: visible;
  15 }
  16
  17 body,ul,li {
  18         padding:0;
  19         margin:0;
  20         font-size: 18px;/*fix*/
  21 }
  22
  23
  24 #header{
  25         width:100%;
  26         line-height:1em;
  27         padding-top: 158;
  28         font-size:1.063em;
  29         height: 3.2em;
  30         background: #999; /*fallback*/
  31         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
  32         background: -moz-linear-gradient(#999, black);
  33 }
  34
  35
  36 .fl-theme-iphone .fl-navbar{
  37         border: none;
  38         border-top: none;
  39
  40 }
  41
  42 .fl-navbar a{
  43         font-size: 0.969em;
  44 }
  45 .fl-navbar .fl-tabs{
  46         padding-top: .3em;
  47         padding-bottom: .3em;
  48         border-top: 1px solid black;
  49         border-bottom: .5px solid black;
  50         background-color: #4b6b90;
  51     height: 2em;
  52     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
  53     background: -moz-linear-gradient(#999, black);
  54 }
  55
  56 #navigation-contentwrapper{
  57         position: relative;
  58         height: 2.5em; /*requires a height, do not remove */
  59         top: 1em;
  60
  61 }
  62
  63 #contentwrapper{
  64         margin-bottom: 3em;
  65         padding: .313em;
  66 }
  67 #wrapper{
  68         width:100%;
  69         overflow: auto;
  70         min-height: 100%;
  71         background-image: url(images/idi_background.png);
  72
  73
  74
  75 }
  76 #header-section-title {
  77         width: 100%;
  78         position: relative;
  79         color: white;
  80         font-size: 0.938em;
  81         height: .3em;
  82
  83 }
  84
  85 #site-name, h1#section-title{
  86         width: 100%;
  87         color: white;
  88         text-shadow: none;
  89
  90 }
  91
  92 /************************************************************************************************/
  93 /* "Navigation" button, also this CSS creates a button that looks exactly like a Mobile FSS tab.*/
  94 /************************************************************************************************/
  95
  96
  97 .navigation-bar-button-content{
  98         border-width:5px;
  99     -webkit-border-radius: 5px;
 100     -moz-border-radius: 5px;
 101         border-radius: 5px;
 102         font-size: 18px;/*keep this in px*/
 103     background-image: -webkit-gradient(linear, left top, left bottom,
 104         from(#3b5371),
 105         color-stop(0.5, #374e6b),
 106         color-stop(0.50, #354d68),
 107         to(#354d68)
 108     );
 109         -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
 110         -moz-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
 111     -webkit-border-left-image: none;
 112     -moz-border-left-image: none;
 113     -webkit-background-origin: border;
 114     -moz-background-origin: border;
 115     -webkit-background-clip: border;
 116         -moz-background-clip: border;
 117 }
 118
 119 .fl-theme-iphone .topnavlistcontainer .topnavlist-link {/*makes the navigation button link white*/
 120         color: white;
 121         text-decoration: none;
 122         font-weight: bold;
 123 }
 124
 125 .fl-theme-iphone .topnavlistcontainer .topnavlist-link-highlight{/*makes the navigation button link highlight*/
 126         color: #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 -- add when the header and footer is done
 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-style: 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
1347 }
1348 #show-all{
1349
1350 }
1351 #show-all a, #show-pages a{
1352     color: black;
1353     padding-left: 0.25em;
1354     padding-right: 0.25em;
1355     text-decoration: none;
1356     display: block;
1357 }
1358
1359 /* enrollment tabs */
1360 #navlist {
1361         padding: 0;
1362         margin-left: 0;
1363         margin-right: auto;
1364         margin-left: auto;
1365         margin-bottom: .25em;
1366         margin-top: 0.938em;
1367         white-space: nowrap;
1368 }
1369
1370 #navlist li {
1371         list-style: none;
1372         display: inline;
1373         margin: 0;
1374 }
1375
1376 #navlist li a {
1377         padding: 0.188em 0.563em;
1378         border: 1px solid #F7F3ED;
1379         border-bottom: none;
1380         background-color: #F7F3ED;
1381         text-decoration: none;
1382         margin-left: .25em;
1383         white-space: nowrap;
1384 }
1385
1386 #navlist li a:hover, #navlist li a:active {
1387         color: #000;
1388         background-color: #fff;
1389 }
1390
1391 /* tree */
1392 .img-size-tree {
1393         vertical-align: middle;
1394         margin-top: 0;
1395     padding:0;
1396         height:1.45em;
1397         width:1.5em;
1398 }
1399 /* profile page */
1400 dl#public-profile dt {
1401         float: left;
1402         width: 90%;
1403         border-right: 1px solid #F7F3ED;
1404         padding: 0.313em 0.313em 0.313em 0;
1405
1406         margin-right: 0.313em;
1407 }
1408 dl#public-profile dd {
1409         margin: 0;
1410 }
1411
1412 div.social-right{
1413         margin-left:.5em;
1414         margin-top: 1em;
1415 }
1416 div.social-left{
1417         margin-left:.5em;
1418 }
1419 h4.profile{
1420         float: left;
1421 }
1422 .social-wrapper h3{
1423         padding-top: .5em;
1424 }
1425 .my-contacts h3{
1426         padding-bottom: .375em;
1427 }
1428 img#profile{
1429         border: 1px #cccccc solid;
1430         margin-left: 1em;
1431 }
1432 dd{
1433     margin: 0;
1434 }
1435
1436 /** forum stuff **/
1437 #forum-thread li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; float:left; width: 97%; list-style: none; }
1438 #forum-thread li.even { background-color: #F7F3ED; border-top: none; }
1439 #forum-thread li.odd { background-color: #fff; }
1440 div.forum-post-author { float:left; width:19.375em; padding:0.5em 0.625em; }
1441 div.forum-post-author a.title {font-size: 1.1em; line-height: 1.2em; font-weight: bold; text-decoration:none; }
1442 div.forum-post-author img.profile-picture { border: 2px solid #F7F3ED; text-align:right;}
1443 div.forum-post-content { margin-left: 19.375em; padding: 0.313em 0 1.125em 1.125em;}
1444 div.forum-post-content h3 { font-weight: 500; float:left;clear:right; }
1445 div.forum-post-ctrl { float: right; padding-right: 0.313em; color: #a1a1a1;}
1446 div.forum-post-ctrl a { text-decoration: none; }
1447 div.forum-post-ctrl span { color: black; background-color: #fefdc2; padding: 0.188em; }
1448 div.forum-post-content p.date { color: #a1a1a1; border-bottom: 1px solid #F7F3ED; }
1449 div.forum-post-content div.body p { margin-bottom:1em; }
1450 div.forum-paginator{border:thin #cccccc solid; padding:.3em; width:95%;margin:auto;background-color:#F7F3ED;}
1451 span.forum-paginator-active{font-weight:700;text-decoration:underline; height:2em;}
1452
1453
1454
1455 /** inbox stuff - reuses some of the forum layout **/
1456 #inbox-msg li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; width: 95%; list-style: none; min-height: 11em;}
1457
1458 /*  tool list on admin home and manage screens  */
1459  li.top-tool {
1460         list-style: none;
1461         padding: 0.125em 0.125em 0.125em  0.938em;
1462         margin-bottom: 0.313em;
1463         line-height: 200%;
1464         border: solid 1px #A9ADB0;
1465         -webkit-border-radius:8px;
1466         -moz-border-radius: 8px;
1467         border-radius: 8px;
1468         background: white;
1469 }
1470
1471 li.child-tool a {
1472         font-size: x-small;
1473         font-weight: normal;
1474 }
1475
1476 ul.child-top-tool {
1477         margin-top: -0.313em;
1478         padding-left: 0;
1479         margin-left: 0;
1480         display: inline;
1481 }
1482
1483 li.child-tool {
1484         display: inline;
1485         margin-right: 0.313em;
1486         font-size: x-small;
1487 }
1488
1489
1490 /* browse courses */
1491 div.browse-course {
1492         padding-bottom: 0.625em;
1493 }
1494
1495 dl.browse-course {
1496         width: 90%;
1497         padding-bottom: 0.625em;
1498         background-color: #fffaf0;
1499         margin:auto;
1500         margin-left:1em;
1501 }
1502 dl.browse-course dt {
1503         float: left;
1504         font-weight: bold;
1505         width: 25%;
1506         text-align: right;
1507         clear: left;
1508         padding: 0.313em 0.625em 0.313em 0;
1509         vertical-align: middle;
1510
1511 }
1512 dl.browse-course dd {
1513         margin-bottom: 0.313em;
1514         clear: right;
1515         padding: 0.313em 0 0.313em 0.625em;
1516         margin-left: 26%;
1517
1518 }
1519 .row .buttons{
1520         border: none;
1521 }
1522
1523 /*  form fields grouping for WCAG 2.0 conformance*/
1524 fieldset.group_form{
1525         width:98%;
1526         margin:0 auto;
1527         color: #4C566C;
1528         padding:.313em;
1529         margin: .313em;
1530         border: 1px #A9ADB0 solid;
1531         background-color: white;
1532 }
1533
1534 legend.group_form{
1535         background-color:white;
1536         font-weight: 600;
1537         color: #4C566C;
1538         padding:.313em;
1539         margin: .313em;
1540         border: 1px #4C566C solid;
1541         -webkit-border-radius: 8px;
1542         -moz-border-radius: 8px;
1543         border-radius: 8px;
1544 }
1545
1546 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
1547 Ensure styling matches that in fl-tabs.*/
1548 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
1549     background-color: white;
1550 }
1551
1552 /*Added by Silvia */
1553 div.column_primary {
1554         float: left;
1555         width: 42%;
1556         margin: 0.313em;
1557         padding: 0;
1558         min-width: 10.625em;
1559 }
1560
1561 div.column_equivalent{
1562         float: left;
1563         width: 52%;
1564         margin-left:  0.938em;
1565         margin-top: 0.313em;
1566         margin-right: 0.313em;
1567         margin-bottom: 0.313em;
1568         min-width: 10.625em;
1569         padding: 0.313em;
1570         border: 1px solid #EEE;
1571         background-color: #FFF;
1572 }
1573
1574 div.resource_box{
1575         border: 1px solid #aaa;
1576         width: 95%;
1577         margin: 0.313em;
1578         padding: 0.313em;
1579         min-width: 9.375em;
1580         background-color: #eee;
1581 }
1582
1583 h2.alternatives_to{
1584         margin-top: 0.75em;
1585         font-size: 90%;
1586         color: #A50707;
1587 }
1588
1589 div.alternative_box{
1590         border: 1px solid #ddd;
1591         margin: 0.313em;
1592         padding: 0.313em;
1593         min-width: 9.375em;
1594         background-color: #fff;
1595 }
1596
1597 div.alternative_box legend {
1598         color: #000;
1599 }
1600
1601 div.resource_box legend {
1602         color: #000;
1603 }
1604
1605 label.primary a{
1606         color: #A50707;
1607         font-weight: bolder;
1608         background-color: white;
1609 }
1610
1611 /* format of "table of contents" on content page */
1612 #toc a {
1613         display:block;
1614         margin:0.188em;
1615 }
1616 #toc .h2, #toc .h3, #toc .h4, #toc .h5, #toc .h6{
1617         padding:0 0 0 0;
1618 }
1619
1620
1621 fieldset#toc {
1622         background-color: #FEFDEF;
1623         border: 1pt solid #B8AE9C;
1624         width:89%;
1625 }
1626
1627 #side-menu{
1628         overflow:hidden;
1629 }
1630
1631 /* cleans up glossary question mark line spacing*/
1632 sup{
1633         border: 1pt solid #B8AE9C;
1634         vertical-align:bottom;
1635         margin-top: 1em;
1636 }
1637
1638 /* jQuery tooltip styles */
1639 #tooltip{
1640         position:absolute;
1641         z-index:3000;
1642         border:3px solid #111;
1643         background-color:#eeeeee;
1644         padding:0.313em;
1645 }
1646 #tooltip h3,#tooltip div{
1647         margin:0;
1648 }
1649
1650 /* style for home page modules "detail view" */
1651 div.home_box {
1652         padding: .75em 0;
1653         margin: 0 auto;
1654 }
1655
1656 .outside_box{
1657         background:#e0e0e0;
1658         width: 17em;
1659         margin: .375em;
1660         padding: 0;
1661         height:9.8em;
1662 }
1663
1664 .inside_box{
1665         width:100%;
1666         margin:auto;
1667         height:52%;
1668         margin-bottom:.2em;
1669         background:#eeeeee;
1670
1671 }
1672 .details_or{
1673         width:28.8em;
1674         height:9.8em;
1675         margin:0;
1676         background-image:url(images/details_r.png);
1677         background-position: top right;
1678         background-repeat:no-repeat;
1679 }
1680 .details_ol{
1681         height:9.8em;
1682         margin:0;
1683         width:.45em;
1684         background-image:url(images/details_l.png);
1685         background-position: top left;
1686         background-repeat:no-repeat;
1687 }
1688 .details_ir{
1689         width:.5em;
1690         height:100%;
1691         float:right;
1692         background-image:url(images/details_ir.png);
1693         background-position: top right;
1694         background-repeat:no-repeat;
1695 }
1696 .details_il{
1697         height:100%;
1698         float:left;
1699         background-image:url(images/details_il.png);
1700         background-position: top left;
1701         background-repeat:no-repeat;
1702 }
1703 .home-title{
1704         font-size:12pt;
1705 }
1706 .buttonbox{
1707         float:right;
1708 }
1709 .details_text{
1710         margin-left:1em;
1711 }
1712 .draggable_selected {
1713         background-color: lightgrey;
1714         cursor: move;
1715 }
1716
1717 div.menuedit{
1718         float:right;
1719         margin-top:-1.2em;
1720         border:1px solid #cccccc;
1721 }
1722 li.folders {
1723         list-style: disc url(../../images/folder.gif) outside;
1724         font-family: Helvetica,sans-serif;
1725         margin-bottom: 0;
1726         margin-top: 0;
1727         margin-right: 0;
1728 }
1729
1730 li.folders .disabled {
1731         color: #B8AE9C;
1732 }
1733
1734 ul.folder{
1735         list-style-image:none;
1736         list-style-position:outside;
1737         list-style-type:none;
1738         margin:0em;
1739         padding:0em;
1740 }
1741
1742 #topnavlist-tablet{
1743         -webkit-border-radius: 8px;
1744         -moz-border-radius: 8px;
1745         border-radius: 8px;
1746         border: black;
1747         background: black;
1748         z-index: 1000;
1749         padding-bottom: 0;
1750         margin-bottom: 0;
1751 }
1752
1753 ul#topnavlist-tablet li {
1754         color: white;
1755 }
1756
1757 ul#topnavlist-tablet>li:hover, ul#topnavlist-tablet>li:hover a,  ul#topnavlist-tablet>li:active,
1758 ul#topnavlist-tablet>li:active a, ul#topnavlist-tablet>li:focus, ul#topnavlist-tablet>li:focus a {
1759         color: #fff;
1760     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1761         background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center, -moz-linear-gradient(#4a94f4, #236de5);
1762 }
1763
1764 ul#topnavlist-tablet li a  {
1765         text-decoration: none;
1766 }
1767
1768 .flc-screenNavigator-backButton .fl-link-hilight{
1769         display: none;
1770 }
1771
1772 div.toolcontainer{
1773         border: #cccccc 1px solid;
1774         -webkit-border-radius:5px;
1775         -moz-border-radius: 5px;
1776         border-radius: 5px;
1777         margin-top: 1em;
1778         margin-bottom: 1em;
1779 }
1780
1781
1782
1783
1784
1785 /* list attributes */
1786 ul {
1787         list-style: none;
1788 }
1789 li {
1790         color: black;
1791         list-style: none;
1792 }
1793
1794 ol#tools>li:hover, ol#tools>li:hover a {
1795         /*border: 1px solid #e0e0e0;*/
1796         background-color: #e6e6e6;
1797         color: black;
1798
1799         color: #fff;
1800     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
1801    -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1802     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
1803    -moz-linear-gradient(#4a94f4, #236de5);
1804 }
1805
1806 [class*="fl-container"]:not(.fl-navbar){
1807         margin: 0;
1808         margin-left: .313em;
1809         margin-right: .313em;
1810         padding: 0;
1811 }
1812 div#navigation-column{
1813
1814         width: 50%;
1815         -webkit-border-radius: 8px;
1816         -moz-border-radius: 8px;
1817         border-radius: 8px;
1818         z-index: 1000;
1819         position: absolute;
1820         top: 2em;
1821         background: black;
1822         padding-right: .2em;
1823         padding-left: .2em;
1824         padding-top: .2em;
1825         padding-bottom: .2em;
1826         display: none;
1827 }
1828 div#contentcolumn{
1829         padding-top: .313em;
1830         margin-top: .313em;
1831         padding: .313em;
1832         margin-bottom: 1em;
1833         position: absolute;
1834         top: .7em;
1835         top: 1.2em;
1836         top: 2em;
1837 }
1838 #content-text{
1839         position: relative;
1840         top: .7em;
1841 }
1842
1843
1844
1845
1846 #content-contentwrapper{
1847         height:100%;
1848     position:relative;
1849         z-index:1000;
1850         width:100%;
1851         overflow:hidden;
1852
1853 }
1854
1855 #leftcolumn{
1856         float: left;
1857         width: 17em;
1858         margin-left: 0.313em;
1859         margin-top:-0.625em;
1860 }
1861
1862 #copyright{
1863         font-size: 0.5em;
1864 }
1865 #gototop{
1866         text-align: center;
1867         color: #4B6B90;
1868 }
1869
1870 #tools{
1871         margin: 0 auto;
1872         padding: 0.313em;
1873
1874 }
1875
1876
1877 /* ATutor Social Styles */
1878 div .profile_container {
1879         background-color:#eee;
1880         border: 1px solid #8e8e8e;
1881         width:80%;
1882         padding:0.5em;
1883         margin-bottom: 0.5em;
1884 }
1885
1886 div .profile_container .top_right {
1887         float: right;
1888 }
1889
1890 dl.public-profile dd{
1891         margin-left:0;
1892 }
1893 dl.public-profile dt {
1894         float: left;
1895         font-weight: bold;
1896         min-width:12em;
1897 }
1898
1899 /* Search form */
1900 div .search_form {
1901         margin-bottom: 1em;
1902 }
1903
1904 div .search_form .row{
1905         background-color: #DEDEC0;
1906         padding: 0.5em;
1907 }
1908 div .button {
1909         background-color: #eee;
1910         border: 1px solid #aaa;
1911 }
1912 div .button:hover{
1913         background-color: #cccccc;
1914         color: #ffffff;
1915 }
1916
1917 /* Side menu */
1918 ul.social_side_menu {
1919         padding-left: 2em;
1920 }
1921 ul.social_side_menu li {
1922         padding-bottom: 0.2em;
1923         list-style: circle;
1924 }
1925
1926 div .divider {
1927         border-bottom:1px solid #C1C157;
1928         padding-bottom:0.5em;
1929         margin-bottom:0.5em;
1930 }
1931
1932 .activity{
1933         line-height:18pt;
1934         font-size:.8em;
1935 }
1936
1937 div.contentbox, input-form{
1938         padding:.5em;
1939         background-color: #ffffff;
1940     overflow:hidden;
1941     border: #A9ADB0 solid 1px;
1942         -webkit-border-radius: 5px;
1943         -moz-border-radius: 5px;
1944         border-radius: 5px;
1945 }
1946
1947 div.suggestions{
1948         border:1px solid #a50707;
1949         margin-left:0.625em;
1950         width:50%;
1951 }
1952 li.inlinelist{
1953         display: inline;
1954         padding-right: 1em;
1955 }
1956 ul.social_inline_menu{
1957         background-color: #eeeeee;
1958         border:thin #cccccc solid;
1959         padding:.5em;
1960         width:90%;
1961         margin:auto;
1962 }
1963 .results-hide-show-link-container{
1964         border: #A9ADB0 solid 1px;
1965         -webkit-border-radius: 5px;
1966         -moz-border-radius: 5px;
1967         border-radius: 5px;
1968 }
1969 #results-hide-show-link{
1970         height: 100%;
1971 }
1972
1973 #hide-show-container{
1974         -webkit-border-radius:8px;
1975         -moz-border-radius: 8px;
1976         border-radius: 8px;
1977         margin-top: 0.875em;
1978         margin-bottom: 0.875em;
1979         padding: 0.875em;
1980         padding-right: .2em;
1981         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
1982         background: -moz-linear-gradient(#999, black);
1983 }
1984
1985 .hide-show-container h4{
1986         border: #A9ADB0 solid 1px;
1987         -webkit-border-radius:8px;
1988         -moz-border-radius: 8px;
1989         border-radius: 8px;
1990         margin-top: 0.875em;
1991         margin-bottom: 0.875em;
1992         padding: 0.875em;
1993         padding-right: .2em;
1994         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8FAFB), to(#B6C0C6));
1995         background: -moz-linear-gradient(#F8FAFB, #B6C0C6);
1996         background: white;
1997 }
1998
1999 #hide-show-container a:link,
2000 #hide-show-container a:focus,
2001 #hide-show-container a:hover{
2002         color: white;
2003         text-decoration: none;
2004         text-shadow: none;
2005         display: block;
2006 }
2007
2008 .hide-show-container a:link:not(.fl-list-menu):not(.fl-list-brief),
2009 .hide-show-container a:focus:not(.fl-list-menu):not(.fl-list-brief),
2010 .hide-show-container a:hover:not(.fl-list-menu):not(.fl-list-brief),
2011 .hide-show-container a:active:not(.fl-list-menu):not(.fl-list-brief),
2012 #hide-show-container a:active{
2013         color: white;
2014         color: #4C566C;
2015         text-decoration: none;
2016         text-shadow: none;
2017         display: block;
2018 }
2019
2020 .hide-show-container a>h4, .fl-theme-iphone a .results-hide-show-link{
2021         color: white;
2022 }
2023 /* REBUILDING THE TOP NAVIGATION MENU */
2024
2025 #navigation-bar{
2026         height: 2;
2027     border-bottom: .5px solid black;
2028 }
2029
2030 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
2031 Ensure styling matches that in fl-tabs.*/
2032 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
2033     background-color: white;
2034 }
2035
2036
2037
2038 /*this CSS creates a button that looks exactly like a Mobile FSS tab.*/
2039 .navigation-bar-button{
2040     border-width:5px;
2041     -webkit-border-radius: 5px;
2042     -moz-border-radius: 5px;
2043         border-radius: 5px;
2044         font-size: 18px;/*keep this in px*/
2045         padding-left: .3em;
2046         padding-right: .3em;
2047         padding-top: .1em;
2048         color: white;
2049         position: relative;
2050         top: .4em;
2051     background-image: -webkit-gradient(linear, left top, left bottom,
2052         from(#3b5371),
2053         color-stop(0.5, #374e6b),
2054         color-stop(0.50, #354d68),
2055         to(#354d68)
2056     );
2057         background-color: #354D68;
2058         -moz-border-image: url("images/navbar_normal_button_insetShadow.png") 5 5 5 5 stretch;
2059         -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2060         -moz-border-image:url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2061     -webkit-border-left-image: none;
2062     -moz-border-left-image: none;
2063     -webkit-background-origin: border;
2064     -moz-background-origin: border;
2065     -webkit-background-clip: border;
2066         -moz-background-clip: border;
2067         margin-top: .3em;
2068         margin-bottom: -1em;
2069 }
2070
2071
2072 /* hiding/showing course content */
2073
2074 div#content-link-container{
2075         list-style: none;
2076         padding-top: .316em;
2077         float: right;
2078 }
2079
2080
2081 .content_link_tablet {
2082         border-width:5px;
2083     -webkit-border-radius: 5px;
2084     -moz-border-radius: 5px;
2085         border-radius: 5px;
2086         font-size: 0.875em;/*keep this in px*/
2087         font-size: 18px;
2088         /*padding: .1em;*/
2089         padding-left: .3em;
2090         padding-right: .3em;
2091         padding-top: .1em;
2092         padding-bottom: .1em;
2093         margin-right: .313em;
2094
2095
2096     /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
2097     background-image: -webkit-gradient(linear, left top, left bottom,
2098         from(#3b5371),
2099         color-stop(0.5, #374e6b),
2100         color-stop(0.50, #354d68),
2101         to(#354d68)
2102     );
2103         -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2104     -moz-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2105     -webkit-border-left-image: none;
2106     -moz-border-left-image: none;
2107     -webkit-background-origin: border;
2108     -moz-background-origin: border;
2109     -webkit-background-clip: border;
2110     -moz-background-clip: border;
2111     margin-bottom: -0.25em;
2112
2113
2114 }
2115 .flc-screenNavigator-navbar .content_link{
2116         color: white;
2117         text-decoration: none;
2118         font-weight: bold;
2119         background-color: #354D68;
2120
2121 }
2122 .fl-theme-iphone .content_link_tablet_highlight{
2123          font-weight: bold;
2124          color: #bfd9fb;
2125
2126 }
2127
2128
2129 #content{
2130         position: absolute;
2131         top: 2em;
2132         right: 0.313em;
2133         width: 50%;
2134         float: right;
2135         -webkit-border-radius: 8px;
2136         -moz-border-radius: 8px;
2137         border-radius: 8px;
2138         border: 4px solid black;
2139         z-index: 1000;
2140         display: none;
2141 }
2142
2143 /*      hiding/showing top navigation and results-display */
2144 ul#topnavlist {
2145         display: none;
2146         position: relative;
2147         top: 1.2em;
2148         z-index: 1;
2149 }
2150
2151 div#results-display, .results-display{
2152         display: none;
2153 }
2154
2155 ul#topnavlist li {
2156         padding: 0;
2157         margin: 0;
2158 }
2159
2160 ul#topnavlist>li:hover, ul#topnavlist>li:hover a,  ul#topnavlist>li:active, ul#topnavlist>li:active a,
2161 ul#topnavlist>li:focus, ul#topnavlist>li:focus a {
2162         color: #fff;
2163     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2164    -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2165     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2166    -moz-linear-gradient(#4a94f4, #236de5);
2167 }
2168
2169 ul#topnavlist li a  {
2170         color: #4C566C;
2171         text-decoration: none;
2172 }
2173 .content-expand {
2174         background-image:url("images/plus.png");
2175         background-position: 100% 100%;
2176         background-repeat: no-repeat;
2177 }
2178 .content-closed{
2179         background-image:url("images/minus.png");
2180         background-position: 100% 100%;
2181         background-repeat: no-repeat;
2182 }
2183
2184 /* SUBNAVLIST HIGHLIGHTING and Gmail-STYLE "more" button */
2185 ul#subnavlist li a{
2186         color: black;
2187 }
2188
2189 ul#subnavlist li a:active, ul#subnavlist li a:focus, ul#subnavlist li  a:hover {
2190         color: red;
2191         border-bottom: #4C566C 2px solid;
2192         text-decoration: none;
2193 }
2194 ul#subnavlist{
2195         color: black;
2196         padding: 0;
2197         padding-bottom: 0.313em;
2198         margin: 0;
2199         font-size: 90%;
2200         text-align: center;
2201 }
2202 .selected{
2203         color: red;
2204         font-size: 0.875em;
2205         border-bottom: #4C566C 2px solid;
2206 }
2207 #subnavlist-more .more-item{
2208         font-size: 0.875em; list-style-type: bullet;
2209
2210 }
2211 .more-icon {
2212         background-image:url('images/hidemenu.gif');
2213         background-position: 100% 100%;
2214         background-repeat: no-repeat;
2215 }
2216 .more-button{
2217 }
2218 .more-button-surround{
2219 }
2220 .subnavlist-more{
2221
2222         display: block;
2223         display: none;
2224 }
2225 ul#subnavlist li:not(#subnavlist-more){
2226         display: inline;
2227 }
2228
2229 ul#subnavlist li a, ul#subnavlist li a:visited {
2230         color: black;
2231 }
2232 ul#subnavlist li a{
2233         text-decoration: none;
2234 }
2235
2236  /*creates a little up-facing arrow to help mimick an ipad-style popover.
2237  See http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
2238 .triangle-isosceles {
2239      position: relative;
2240 }
2241
2242 .triangle-isosceles:after {
2243      border-style: solid;
2244      content: "";
2245      display: block;
2246      position: absolute;
2247 }
2248
2249 .triangle-isosceles.top:after {
2250      border-color: black transparent;
2251      border-width: 0pt 15px 15px;
2252      bottom: auto;
2253      left: auto;
2254      left: 20%;
2255      top: 95%;
2256      z-index: 1000;
2257 }
2258
2259 .triangle-isosceles.top.right:after {
2260      border-color: black transparent;
2261      border-width: 0pt 15px 15px;
2262      bottom: auto;
2263      left: auto;
2264      right: 30%;
2265      top: 98%;
2266      z-index: 1000;
2267 }
2268
2269 /*'Previous' and 'Next' buttons */
2270 .previous{
2271         margin-left:3.125em;
2272 }
2273
2274 .triangle-isosceles.previous:after {
2275         top:1em; /* controls vertical position */
2276         left:-3.125em; /* value = - border-left-width - border-right-width */
2277         bottom:auto;
2278         border-width:15px 50px 10px 0;
2279         border-color:transparent #f3961c;
2280         border-color: transparent #F3961C;
2281     border-width: 10px 10px 10px 0pt;
2282     bottom: auto;
2283     left: -0.75em;
2284     top: 0;
2285 }
2286
2287 /* sequence links */
2288 #sequence-links{
2289         float: left;
2290         padding-right:0;
2291         position: relative;
2292         right: -.313em;
2293 }
2294
2295 #course-level-navigation, #sequence-links-course-navigation{
2296                 float: right;
2297 }
2298
2299 /************************************************************************************************/
2300 /*Adds arrows to Fluid Tabs. Here is a good guide for creating triangles with CSS:
2301 http://jonrohan.me/guide/css/creating-triangles-in-css/ */
2302 /************************************************************************************************/
2303
2304 ul.sequence-links li {
2305     position:relative;
2306     z-index:1;
2307     overflow:hidden;
2308     list-style:none;
2309 }
2310
2311 ul.sequence-links li.back a:link,
2312 ul.sequence-links li.back a:visited {
2313     display:block;
2314     padding-left:12px;
2315     color:white;
2316 }
2317
2318 ul.sequence-links li.forward a:link,
2319 ul.sequence-links li.forward a:visited {
2320     display:block;
2321     padding-right:0.75em;
2322     color:white;
2323 }
2324 /*WCAG*/
2325 ul.sequence-links li a:hover, ul.sequence-links li a:focus, ul.sequence-links li a:active,
2326 ul.sequence-links li.back a:hover, ul.sequence-links li.back a:focus, ul.sequence-links li.back a:active,
2327 ul.sequence-links li.forward a:hover, ul.sequence-links li.forward a:focus, ul.sequence-links li.forward a:active {
2328     color: #bfd9fb;
2329     background:transparent;
2330 }
2331
2332
2333 ul.sequence-links li:before,
2334 ul.sequence-links li:after,
2335 ul.sequence-links li a:before,
2336 ul.sequence-links li a:after {
2337     content:"";
2338     position:absolute;
2339     top:50%;
2340    /* left:0;*/
2341 }
2342
2343 ul.sequence-links li a:before,
2344 ul.sequence-links li a:after {
2345     margin:-0.5em 0 0;
2346   }
2347
2348 /*arrow that points to the left, beside the "Previous" text */
2349 .arrow.back a:after {/*arrow pointing to the left*/
2350      background: none repeat scroll 0% 0% transparent;
2351      border-color: transparent #FFFFFF;
2352      border-style: solid;
2353      border-width: 5px 0pt 5px 6px;
2354      left: .5em;
2355      margin-top: -0.438em;
2356 }
2357
2358 /*left and right triangle icons change color*/
2359 .arrow a:hover:after, .arrow a:focus:after, .arrow a:active:after,
2360 .arrow.forward a:hover:after, .arrow.forward a:focus:after, .arrow.forward a:active:after{
2361         border-color: transparent #bfd9fb;
2362 }
2363
2364 .arrow.back a:after {
2365      border-width: 6px 6px 6px 0pt;
2366      left: 0.188em;
2367
2368      top: .75em;
2369 }
2370
2371 }
2372 /*arrow that points to the right, beside the "Next" text */
2373 .arrow.forward a:after {
2374      background: none repeat scroll 0% 0% transparent;
2375      border-color: transparent #FFFFFF;
2376      border-style: solid;
2377      margin-top: -0.425em;
2378
2379 }
2380 .arrow.forward a:after {
2381
2382       background: none repeat scroll 0% 0% transparent;
2383      border-color: transparent transparent transparent white;
2384          border-width: 6px;
2385          border-style: solid;
2386          width:0;
2387          height:0;
2388          right: -0.313em;
2389          top: 0.85em;
2390 }
2391 /* style for "last modified" information of course content*/
2392 #content-info{
2393         padding-top: 2em;
2394         font-size: 80%;
2395 }
2396
2397 ul.my-courses-list-ul > li:hover{
2398         background-color: #4c96f4;
2399         color: #fff;
2400     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2401     -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2402     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2403     -moz-linear-gradient(#4a94f4, #236de5);
2404 }
2405 ul.my-courses-list-ul > li:hover a{
2406         color: white;
2407 }
2408 #topnavlistcontainer {
2409     float: left;
2410 }
2411
2412 /* to be created as a separate desktop theme file. The classes below should be removed when
2413 Mark McLaren's port of mobile fss to firefox is committed to infusion:
2414 https://github.com/fluid-project/infusion/blob/25ad6755ef78347b414d60bd4037a0f197f9d09d/infusion-branch/src/webapp/framework/fss/css/fss-mobile-theme-firefox.css */
2415 .fl-tabs li:first-child {
2416     border-bottom-left-radius: 5px;
2417     border-top-left-radius: 5px;
2418 }
2419
2420 .fl-theme-iphone .fl-tabs li {
2421     -moz-border-image: url("images/navbar_normal_button_insetShadow.png") 5 5 5 5 stretch;
2422     background-color: #354D68;
2423 }
2424 [class*="fl-container"] [class*="fl-list"] > li:first-child, [class*="fl-container"] [class*="fl-list"] > li:first-child a {
2425     border-top-left-radius: 8px;
2426     border-top-right-radius: 8px;
2427 }
2428 [class*="fl-container"] [class*="fl-list"] > li:last-child, [class*="fl-container"] [class*="fl-list"] > li:last-child a {
2429     border-bottom-left-radius: 8px;
2430     border-bottom-right-radius: 8px;
2431 }
2432
2433 .fl-theme-iphone .fl-tabs .fl-tabs-active {
2434     background-image: -moz-linear-gradient(
2435         center top,
2436         rgba(149, 184, 239,1),
2437         rgba(35,109,229,1),
2438         rgba(149, 184, 239,1)  50%,
2439         rgba(75,148,244,1) 50%
2440     );
2441 }
2442
2443 /* A simulation for a:active on the device, requires JS */
2444 /* since .fl-list is for mixed material lists, dont include them in these effects */
2445 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a:active,
2446 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a.fl-link-hilight {
2447     background: url(../images/themes/iphone/listmenu_arrow.png) no-repeat right -25px,
2448                 -moz-linear-gradient(#4a94f4, #236de5);
2449 }