docs/themes/mobile/tablet.css

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