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 div.paging ul {
 997     list-style: none;
 998     display: inline;
 999     padding: 0;
1000         max-width: 10%;
1001         margin-bottom: 1em;
1002 }
1003 div.paging li {
1004         display: inline;
1005         padding-left: 0.125em;
1006         padding-right: 0.125em;
1007         padding-top: 0;
1008         padding-bottom: 0;
1009         width: 10%;
1010 }
1011
1012 div.paging li a {
1013         text-decoration: none;
1014         padding-left: 0.25em;
1015         padding-right: 0.25em;
1016         color: black;
1017 }
1018
1019 div.paging li a:hover, div.paging li a.current, #show-all a:active, #show-all a:focus, #show-all a:hover,
1020 #show-pages a:active, #show-pages a:focus, #show-pages a:hover   {
1021    border: 1px solid #4c96f4;
1022    color: white;
1023    background-color: #4c96f4;
1024    -webkit-border-radius: 3px;
1025    -moz-border-radius: 3px;
1026    border-radius: 3px;
1027 }
1028 #show-pages:active, #show-pages:focus, #show-pages:hover, #show-all:active, #show-all:focus, #show-all:hover{
1029         background-color: #4c96f4;
1030 }
1031
1032 #tl_corner{
1033
1034         background-image:url(images/tl_corner.gif);
1035         background-position: top left;
1036         background-repeat: no-repeat;
1037         padding:0;
1038 }
1039
1040 div.tabs {
1041         /* Navigational Plone Tabs(tm), implemented by customizing the a tag - they are surprisingly elegant. The power of CSS runs strong in these :) */
1042     background-color: transparent;
1043         border-collapse: collapse;
1044         border-bottom: 1px solid #B8AE9C;
1045         padding: 0.5em 0em 0em 2em;
1046         white-space: nowrap;
1047 }
1048
1049 div.tabs a {
1050     /* The normal, unselected tabs. They are all links */
1051     background-color: transparent;
1052     border-color: #B8AE9C;
1053     border-width: 1px;
1054     border-style: solid solid none solid;
1055     color: #595241;
1056     height: 1.2em;
1057     margin-right: 0.5em;
1058     padding: 0em 2em 0em;
1059
1060 }
1061
1062 div.tabs a.selected {
1063     /* The selected tab. There's only one of this */
1064     background-color: white;
1065     border-bottom: #B8AE9C 1px solid;
1066     color: #595241;
1067     font-weight: normal;
1068 }
1069
1070 div.tabs a:hover, div.tabs a.active {
1071     background-color: #B8AE9C;
1072     border-bottom: 1px solid #B8AE9C;
1073     color: white;
1074 }
1075
1076 .headingbox a{
1077         color: #4C566C;
1078 }
1079 .headingbox a:link, .headingbox a:visited{
1080         text-decoration: none;
1081 }
1082 div.box {
1083 }
1084 h4.box {
1085         background-color: #F5F5F5;
1086         padding: .313em;
1087 }
1088 h4.box a {
1089         display: block;
1090         color: #4C566C;
1091         background-color: #F5F5F5;
1092         text-decoration: none;
1093 }
1094 div.box {
1095         padding: 0.313em;
1096         background-color: #F5F5F5;
1097         color: black;
1098         border: 1px solid #B8AE9C;
1099         font-size:0.85em;
1100         font-weight: normal;
1101         padding:0.125em;
1102 }
1103
1104 h5.box {
1105     background-color: #6F7172;
1106     border: 1px solid #B8AE9C;
1107     border-style: solid solid none solid;
1108     color: Black;
1109     padding: 0em 1em 0em 1em;
1110     display: inline;
1111         font-size:  1em;
1112     height: 1em;
1113 }
1114
1115 div.box a:link {
1116         text-decoration: none;
1117 }
1118
1119 div.box a:visited {
1120         color: #2A6C28;
1121         text-decoration: none;
1122 }
1123
1124 div.box a:hover {
1125         text-decoration: underline;
1126 }
1127
1128 .boxDetails {
1129     text-align: right;
1130 }
1131
1132 div.box .content {
1133     padding: 1em;
1134         font-size:  1em;
1135 }
1136
1137 div.box a.close {
1138     float: right;
1139     text-transform: none;
1140     border-left: 1pt solid #B8AE9C;
1141     padding: 0em 0.2em;
1142 }
1143
1144 div.box h1, div.box h2, div.box h3, div.box h4 {
1145     margin: 0;
1146     padding: 0;
1147 }
1148
1149 div.box .even {
1150     background-color: #F7F3ED;
1151 }
1152
1153 div.box .odd {
1154     background-color: transparent;
1155 }
1156
1157
1158 /* users/index.php */
1159 div.course {
1160         position: relative;
1161         width: 12.5em;
1162         height: 10.5em;
1163         border: rgb(204, 204, 204) 1px solid;
1164         background-color: #F7F7F7;
1165         float: left;
1166         margin: 0.188em;
1167         padding: 0.313em;
1168 }
1169
1170 div.course.break {
1171         clear: left;
1172 }
1173
1174 div.course h2 {
1175         border: 0;
1176         font-weight: normal;
1177         font-size: large;
1178
1179 }
1180
1181 div.course:hover {
1182         background-color:#FBF4E9;
1183         border: #B8AE9C 1px solid;
1184 }
1185
1186
1187 table.data .odd img.headicon{
1188         width: 2.469em;
1189         height: 2.469em;
1190         -webkit-border-radius:5px;
1191         -moz-border-radius: 5px;
1192         border-radius: 5px;
1193 }
1194
1195 .icon{
1196         -webkit-border-radius:10px;
1197         -moz-border-radius: 10px;
1198         border-radius: 10px;
1199         border-color: white;
1200         width: 2.5em;
1201         height: 2.5em;
1202         float: left;
1203 }
1204 div.course div.shortcuts {
1205         text-align: right;
1206         clear: left;
1207         vertical-align: middle;
1208         width: 12.5em;
1209 }
1210
1211 fieldset#shortcuts {
1212         float: right;
1213         background-color: #FEFDEF;
1214         border: 1pt solid #B8AE9C;
1215         margin: -5pt 5pt 5pt 5pt;
1216         padding-right: 10pt;
1217         padding-bottom: 5pt;
1218         padding-left: 10pt;
1219 }
1220
1221 fieldset {
1222         margin-bottom: 10pt;
1223         -webkit-border-radius:5px;
1224         -moz-border-radius: 5px;
1225         border-radius: 5px;
1226         padding: 0 0.375em;
1227         width: 90%;
1228         margin: 0 auto;
1229         width:95%;
1230         margin:0 auto;
1231         border:thin #A9ADB0 solid;
1232         margin-bottom: 1em;
1233
1234 }
1235 #shortcuts legend {
1236 }
1237 #shortcuts ul {
1238         position: relative;
1239         margin-top: 0pt;
1240         margin-bottom: 0pt;
1241         margin-left: 0pt;
1242         list-style-type:  none;
1243         padding-left: 0pt;
1244 }
1245
1246 /*a#guide,*/ a#my-courses-link {
1247         background-color: #6D84A2;
1248 }
1249
1250 #guide img{
1251         border:none;
1252 }
1253
1254 div#content-test, div.content-from-module {
1255         float: left;
1256         margin-top: 2em;
1257         margin-bottom: 2em;
1258         padding-right: 5pt;
1259         width: 80%;
1260 }
1261
1262 div#container {
1263         text-align: left;
1264         margin: 0 auto;
1265         padding: 0;
1266         border:0;
1267         width: 95%;
1268 }
1269
1270 /* index page */
1271 ul#home-links, ul#home-detail-links {
1272         list-style: none;
1273 }
1274
1275 /*my start page */
1276 #my_courses_container{
1277         text-align: left;
1278         margin: 0 auto;
1279         border:0;
1280         min-width: 100%;
1281 }
1282
1283 .my-courses-list{
1284         border: solid 1px #A9ADB0;
1285         -webkit-border-radius:5px;
1286         -moz-border-radius: 5px;
1287         border-radius: 5px;
1288         padding: .313em;
1289         margin: .313em;
1290         padding: .313em;
1291 }
1292 .my-courses-list a{
1293         color: black;
1294         text-decoration: none;
1295
1296 }
1297
1298 .my-courses-list-ul{
1299         margin: 0 auto;
1300         padding-left: 0;
1301         width: 100%;
1302 }
1303 .my-courses-links{
1304         font-size: 80%;
1305         padding-top: .75em;
1306 }
1307 .my-courses-resume{
1308         float: right;
1309 }
1310 .fl-link-summary{
1311         padding-left: 0.875em;
1312         padding-bottom: 0.875em;
1313         display: inline;
1314 }
1315
1316 .fl-theme-iphone [class*="fl-list"] > li .fl-link-summary{
1317         color: #4C566C;
1318 }
1319 .current_head{
1320         padding-top: .5em;
1321 }
1322 .current_box{
1323         max-width: 100%;
1324 }
1325 .current_list{
1326         width: 95%;
1327         padding: 0.375em;
1328 }
1329 .current_list li{
1330         list-style-type: none;
1331         font-style: bold;
1332         padding-bottom: .5em;
1333         padding-left: .5em;
1334         margin:0;
1335 }
1336 .current_list li a:active, .current_list li a:focus, .current_list li a:hover{
1337         color: white;
1338         background-color: #4C96F4;
1339 }
1340
1341 .current_list_date_time{
1342         font-size: 65%;
1343 }
1344 #show-all, #show-pages{
1345         -webkit-border-radius: 8px;
1346         -moz-border-radius: 8px;
1347         border-radius: 8px;
1348         padding: .5em;
1349         border: solid 1px #A9ADB0;
1350         background-color: white;
1351
1352
1353 }
1354 #show-all{
1355
1356 }
1357 #show-all a, #show-pages a{
1358     color: black;
1359     padding-left: 0.25em;
1360     padding-right: 0.25em;
1361     text-decoration: none;
1362     display: block;
1363 }
1364
1365 /* enrollment tabs */
1366 #navlist {
1367         padding: 0;
1368         margin-left: 0;
1369         margin-right: auto;
1370         margin-left: auto;
1371         margin-bottom: .25em;
1372         margin-top: 0.938em;
1373         white-space: nowrap;
1374 }
1375
1376 #navlist li {
1377         list-style: none;
1378         display: inline;
1379         margin: 0;
1380 }
1381
1382 #navlist li a {
1383         padding: 0.188em 0.563em;
1384         border: 1px solid #F7F3ED;
1385         border-bottom: none;
1386         background-color: #F7F3ED;
1387         text-decoration: none;
1388         margin-left: .25em;
1389         white-space: nowrap;
1390 }
1391
1392 #navlist li a:hover, #navlist li a:active {
1393         color: #000;
1394         background-color: #fff;
1395 }
1396
1397 /* tree */
1398 .img-size-tree {
1399         vertical-align: middle;
1400         margin-top: 0;
1401     padding:0;
1402         height:1.45em;
1403         width:1.5em;
1404 }
1405 /* profile page */
1406 dl#public-profile dt {
1407         float: left;
1408         width: 90%;
1409         border-right: 1px solid #F7F3ED;
1410         padding: 0.313em 0.313em 0.313em 0;
1411
1412         margin-right: 0.313em;
1413 }
1414 dl#public-profile dd {
1415         margin: 0;
1416 }
1417
1418 div.social-right{
1419         margin-left:.5em;
1420         margin-top: 1em;
1421 }
1422 div.social-left{
1423         margin-left:.5em;
1424 }
1425 h4.profile{
1426         float: left;
1427 }
1428 .social-wrapper h3{
1429         padding-top: .5em;
1430 }
1431 .my-contacts h3{
1432         padding-bottom: .375em;
1433 }
1434 img#profile{
1435         border: 1px #cccccc solid;
1436         margin-left: 1em;
1437 }
1438 dd{
1439     margin: 0;
1440 }
1441
1442 /** forum stuff **/
1443 #forum-thread li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; float:left; width: 97%; list-style: none; }
1444 #forum-thread li.even { background-color: #F7F3ED; border-top: none; }
1445 #forum-thread li.odd { background-color: #fff; }
1446 div.forum-post-author { float:left; width:19.375em; padding:0.5em 0.625em; }
1447 div.forum-post-author a.title {font-size: 1.1em; line-height: 1.2em; font-weight: bold; text-decoration:none; }
1448 div.forum-post-author img.profile-picture { border: 2px solid #F7F3ED; text-align:right;}
1449 div.forum-post-content { margin-left: 19.375em; padding: 0.313em 0 1.125em 1.125em;}
1450 div.forum-post-content h3 { font-weight: 500; float:left;clear:right; }
1451 div.forum-post-ctrl { float: right; padding-right: 0.313em; color: #a1a1a1;}
1452 div.forum-post-ctrl a { text-decoration: none; }
1453 div.forum-post-ctrl span { color: black; background-color: #fefdc2; padding: 0.188em; }
1454 div.forum-post-content p.date { color: #a1a1a1; border-bottom: 1px solid #F7F3ED; }
1455 div.forum-post-content div.body p { margin-bottom:1em; }
1456 div.forum-paginator{border:thin #cccccc solid; padding:.3em; width:95%;margin:auto;background-color:#F7F3ED;}
1457 span.forum-paginator-active{font-weight:700;text-decoration:underline; height:2em;}
1458
1459
1460
1461 /** inbox stuff - reuses some of the forum layout **/
1462 #inbox-msg li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; width: 95%; list-style: none; min-height: 11em;}
1463
1464 /*  tool list on admin home and manage screens  */
1465  li.top-tool {
1466         list-style: none;
1467         padding: 0.125em 0.125em 0.125em  0.938em;
1468         margin-bottom: 0.313em;
1469         line-height: 200%;
1470         border: solid 1px #A9ADB0;
1471         -webkit-border-radius:8px;
1472         -moz-border-radius: 8px;
1473         border-radius: 8px;
1474         background: white;
1475 }
1476
1477 li.child-tool a {
1478         font-size: x-small;
1479         font-weight: normal;
1480 }
1481
1482 ul.child-top-tool {
1483         margin-top: -0.313em;
1484         padding-left: 0;
1485         margin-left: 0;
1486         display: inline;
1487 }
1488
1489 li.child-tool {
1490         display: inline;
1491         margin-right: 0.313em;
1492         font-size: x-small;
1493 }
1494
1495
1496 /* browse courses */
1497 div.browse-course {
1498         padding-bottom: 0.625em;
1499 }
1500
1501 dl.browse-course {
1502         width: 90%;
1503         padding-bottom: 0.625em;
1504         background-color: #fffaf0;
1505         margin:auto;
1506         margin-left:1em;
1507 }
1508 dl.browse-course dt {
1509         float: left;
1510         font-weight: bold;
1511         width: 25%;
1512         text-align: right;
1513         clear: left;
1514         padding: 0.313em 0.625em 0.313em 0;
1515         vertical-align: middle;
1516
1517 }
1518 dl.browse-course dd {
1519         margin-bottom: 0.313em;
1520         clear: right;
1521         padding: 0.313em 0 0.313em 0.625em;
1522         margin-left: 26%;
1523
1524 }
1525 .row .buttons{
1526         border: none;
1527 }
1528
1529 /*  form fields grouping for WCAG 2.0 conformance*/
1530 fieldset.group_form{
1531         width:98%;
1532         margin:0 auto;
1533         color: #4C566C;
1534         padding:.313em;
1535         margin: .313em;
1536         border: 1px #A9ADB0 solid;
1537         background-color: white;
1538 }
1539
1540 legend.group_form{
1541         background-color:white;
1542         font-weight: 600;
1543         color: #4C566C;
1544         padding:.313em;
1545         margin: .313em;
1546         border: 1px #4C566C solid;
1547         -webkit-border-radius: 8px;
1548         -moz-border-radius: 8px;
1549         border-radius: 8px;
1550 }
1551
1552 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
1553 Ensure styling matches that in fl-tabs.*/
1554 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
1555     background-image: -webkit-gradient(linear, left top, left bottom,
1556         from(#3b5371),
1557         color-stop(0.5, #374e6b),
1558         color-stop(0.50, #354d68),
1559         to(#354d68)
1560     );
1561
1562 }
1563
1564 /*Added by Silvia */
1565 div.column_primary {
1566         float: left;
1567         width: 42%;
1568         margin: 0.313em;
1569         padding: 0;
1570         min-width: 10.625em;
1571 }
1572
1573 div.column_equivalent{
1574         float: left;
1575         width: 52%;
1576         margin-left:  0.938em;
1577         margin-top: 0.313em;
1578         margin-right: 0.313em;
1579         margin-bottom: 0.313em;
1580         min-width: 10.625em;
1581         padding: 0.313em;
1582         border: 1px solid #EEE;
1583         background-color: #FFF;
1584 }
1585
1586 div.resource_box{
1587         border: 1px solid #aaa;
1588         width: 95%;
1589         margin: 0.313em;
1590         padding: 0.313em;
1591         min-width: 9.375em;
1592         background-color: #eee;
1593 }
1594
1595 h2.alternatives_to{
1596         margin-top: 0.75em;
1597         font-size: 90%;
1598         color: #A50707;
1599 }
1600
1601 div.alternative_box{
1602         border: 1px solid #ddd;
1603         margin: 0.313em;
1604         padding: 0.313em;
1605         min-width: 9.375em;
1606         background-color: #fff;
1607 }
1608
1609 div.alternative_box legend {
1610         color: #000;
1611 }
1612
1613 div.resource_box legend {
1614         color: #000;
1615 }
1616
1617 label.primary a{
1618         color: #A50707;
1619         font-weight: bolder;
1620         background-color: white;
1621 }
1622
1623 /* format of "table of contents" on content page */
1624 #toc a {
1625         display:block;
1626         margin:0.188em;
1627 }
1628 #toc .h2, #toc .h3, #toc .h4, #toc .h5, #toc .h6{
1629         padding:0 0 0 0;
1630 }
1631
1632
1633 fieldset#toc {
1634         background-color: #FEFDEF;
1635         border: 1pt solid #B8AE9C;
1636         width:89%;
1637 }
1638
1639 #side-menu{
1640         overflow:hidden;
1641 }
1642
1643 /* cleans up glossary question mark line spacing*/
1644 sup{
1645         border: 1pt solid #B8AE9C;
1646         vertical-align:bottom;
1647         margin-top: 1em;
1648 }
1649
1650 /* jQuery tooltip styles */
1651 #tooltip{
1652         position:absolute;
1653         z-index:3000;
1654         border:3px solid #111;
1655         background-color:#eeeeee;
1656         padding:0.313em;
1657 }
1658 #tooltip h3,#tooltip div{
1659         margin:0;
1660 }
1661
1662 /* style for home page modules "detail view" */
1663 div.home_box {
1664         padding: .75em 0;
1665         margin: 0 auto;
1666 }
1667
1668 .outside_box{
1669         background:#e0e0e0;
1670         width: 17em;
1671         margin: .375em;
1672         padding: 0;
1673         height:9.8em;
1674 }
1675
1676 .inside_box{
1677         width:100%;
1678         margin:auto;
1679         height:52%;
1680         margin-bottom:.2em;
1681         background:#eeeeee;
1682
1683 }
1684 .details_or{
1685         width:28.8em;
1686         height:9.8em;
1687         margin:0;
1688         background-image:url(images/details_r.png);
1689         background-position: top right;
1690         background-repeat:no-repeat;
1691 }
1692 .details_ol{
1693         height:9.8em;
1694         margin:0;
1695         width:.45em;
1696         background-image:url(images/details_l.png);
1697         background-position: top left;
1698         background-repeat:no-repeat;
1699 }
1700 .details_ir{
1701         width:.5em;
1702         height:100%;
1703         float:right;
1704         background-image:url(images/details_ir.png);
1705         background-position: top right;
1706         background-repeat:no-repeat;
1707 }
1708 .details_il{
1709         height:100%;
1710         float:left;
1711         background-image:url(images/details_il.png);
1712         background-position: top left;
1713         background-repeat:no-repeat;
1714 }
1715 .home-title{
1716         font-size:12pt;
1717 }
1718 .buttonbox{
1719         float:right;
1720 }
1721 .details_text{
1722         margin-left:1em;
1723 }
1724 .draggable_selected {
1725         background-color: lightgrey;
1726         cursor: move;
1727 }
1728
1729 div.menuedit{
1730         float:right;
1731         margin-top:-1.2em;
1732         border:1px solid #cccccc;
1733 }
1734 li.folders {
1735         list-style: disc url(../../images/folder.gif) outside;
1736         font-family: Helvetica,sans-serif;
1737         margin-bottom: 0;
1738         margin-top: 0;
1739         margin-right: 0;
1740 }
1741
1742 li.folders .disabled {
1743         color: #B8AE9C;
1744 }
1745
1746 ul.folder{
1747         list-style-image:none;
1748         list-style-position:outside;
1749         list-style-type:none;
1750         margin:0em;
1751         padding:0em;
1752 }
1753
1754 #topnavlist-tablet{
1755         -webkit-border-radius: 8px;
1756         -moz-border-radius: 8px;
1757         border-radius: 8px;
1758         border: black;
1759         background: black;
1760         z-index: 1000;
1761         padding-bottom: 0;
1762         margin-bottom: 0;
1763 }
1764
1765 ul#topnavlist-tablet li {
1766         color: white;
1767 }
1768
1769 ul#topnavlist-tablet>li:hover,
1770 ul#topnavlist-tablet>li:hover a,
1771 ul#topnavlist-tablet>li:active,
1772 ul#topnavlist-tablet>li:active a,
1773 ul#topnavlist-tablet>li:focus,
1774 ul#topnavlist-tablet>li:focus a {
1775         color: #fff;
1776     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1777 }
1778
1779 ul#topnavlist-tablet li a  {
1780         text-decoration: none;
1781 }
1782
1783 .flc-screenNavigator-backButton .fl-link-hilight{
1784         display: none;
1785 }
1786
1787 div.toolcontainer{
1788         border: #cccccc 1px solid;
1789         -webkit-border-radius:5px;
1790         -moz-border-radius: 5px;
1791         border-radius: 5px;
1792         margin-top: 1em;
1793         margin-bottom: 1em;
1794 }
1795
1796
1797
1798
1799
1800 /* list attributes */
1801 ul {
1802         list-style: none;
1803 }
1804 li {
1805         color: black;
1806         list-style: none;
1807 }
1808
1809 ol#tools>li:hover, ol#tools>li:hover a {
1810         /*border: 1px solid #e0e0e0;*/
1811         background-color: #e6e6e6;
1812         color: black;
1813
1814         color: #fff;
1815     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
1816    -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1817
1818 }
1819
1820 [class*="fl-container"]:not(.fl-navbar){
1821         margin: 0;
1822         margin-left: .313em;
1823         margin-right: .313em;
1824         padding: 0;
1825 }
1826 div#navigation-column{
1827
1828         width: 50%;
1829         -webkit-border-radius: 8px;
1830         -moz-border-radius: 8px;
1831         border-radius: 8px;
1832         z-index: 1000;
1833         position: absolute;
1834         top: 2em;
1835         background: black;
1836         padding-right: .2em;
1837         padding-left: .2em;
1838         padding-top: .2em;
1839         padding-bottom: .2em;
1840         display: none;
1841 }
1842 div#contentcolumn{
1843         padding-top: .313em;
1844         margin-top: .313em;
1845         padding: .313em;
1846         margin-bottom: 1em;
1847         position: absolute;
1848         top: .7em;
1849         top: 1.2em;
1850         top: 2em;
1851 }
1852 #content-text{
1853         position: relative;
1854         top: .7em;
1855 }
1856
1857
1858
1859
1860 #content-contentwrapper{
1861         height:100%;
1862     position:relative;
1863         z-index:1000;
1864         width:100%;
1865         overflow:hidden;
1866
1867 }
1868
1869 #leftcolumn{
1870         float: left;
1871         width: 17em;
1872         margin-left: 0.313em;
1873         margin-top:-0.625em;
1874 }
1875
1876 #copyright{
1877         font-size: 0.5em;
1878 }
1879 #gototop{
1880         text-align: center;
1881         color: #4B6B90;
1882 }
1883
1884 #tools{
1885         margin: 0 auto;
1886         padding: 0.313em;
1887
1888 }
1889
1890
1891 /* ATutor Social Styles */
1892 div .profile_container {
1893         background-color:#eee;
1894         border: 1px solid #8e8e8e;
1895         width:80%;
1896         padding:0.5em;
1897         margin-bottom: 0.5em;
1898 }
1899
1900 div .profile_container .top_right {
1901         float: right;
1902 }
1903
1904 dl.public-profile dd{
1905         margin-left:0;
1906 }
1907 dl.public-profile dt {
1908         float: left;
1909         font-weight: bold;
1910         min-width:12em;
1911 }
1912
1913 /* Search form */
1914 div .search_form {
1915         margin-bottom: 1em;
1916 }
1917
1918 div .search_form .row{
1919         background-color: #DEDEC0;
1920         padding: 0.5em;
1921 }
1922 div .button {
1923         background-color: #eee;
1924         border: 1px solid #aaa;
1925 }
1926 div .button:hover{
1927         background-color: #cccccc;
1928         color: #ffffff;
1929 }
1930
1931 /* Side menu */
1932 ul.social_side_menu {
1933         padding-left: 2em;
1934 }
1935 ul.social_side_menu li {
1936         padding-bottom: 0.2em;
1937         list-style: circle;
1938 }
1939
1940 div .divider {
1941         border-bottom:1px solid #C1C157;
1942         padding-bottom:0.5em;
1943         margin-bottom:0.5em;
1944 }
1945
1946 .activity{
1947         line-height:18pt;
1948         font-size:.8em;
1949 }
1950
1951 div.contentbox, input-form{
1952         padding:.5em;
1953         background-color: #ffffff;
1954     overflow:hidden;
1955     border: #A9ADB0 solid 1px;
1956         -webkit-border-radius: 5px;
1957         -moz-border-radius: 5px;
1958         border-radius: 5px;
1959 }
1960
1961 div.suggestions{
1962         border:1px solid #a50707;
1963         margin-left:0.625em;
1964         width:50%;
1965 }
1966 li.inlinelist{
1967         display: inline;
1968         padding-right: 1em;
1969 }
1970 ul.social_inline_menu{
1971         background-color: #eeeeee;
1972         border:thin #cccccc solid;
1973         padding:.5em;
1974         width:90%;
1975         margin:auto;
1976 }
1977 .results-hide-show-link-container{
1978         border: #A9ADB0 solid 1px;
1979         -webkit-border-radius: 5px;
1980         -moz-border-radius: 5px;
1981         border-radius: 5px;
1982 }
1983 #results-hide-show-link{
1984         height: 100%;
1985 }
1986
1987 #hide-show-container{
1988         -webkit-border-radius:8px;
1989         -moz-border-radius: 8px;
1990         border-radius: 8px;
1991         margin-top: 0.875em;
1992         margin-bottom: 0.875em;
1993         padding: 0.875em;
1994         padding-right: .2em;
1995         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
1996 }
1997
1998 .hide-show-container h4{
1999         border: #A9ADB0 solid 1px;
2000         -webkit-border-radius:8px;
2001         -moz-border-radius: 8px;
2002         border-radius: 8px;
2003         margin-top: 0.875em;
2004         margin-bottom: 0.875em;
2005         padding: 0.875em;
2006         padding-right: .2em;
2007         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
2008         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8FAFB), to(#B6C0C6));
2009         background: white;
2010 }
2011
2012 #hide-show-container a:link,
2013 #hide-show-container a:focus,
2014 #hide-show-container a:hover{
2015         color: white;
2016         text-decoration: none;
2017         text-shadow: none;
2018         display: block;
2019 }
2020
2021 .hide-show-container a:link:not(.fl-list-menu):not(.fl-list-brief),
2022 .hide-show-container a:focus:not(.fl-list-menu):not(.fl-list-brief),
2023 .hide-show-container a:hover:not(.fl-list-menu):not(.fl-list-brief),
2024 .hide-show-container a:active:not(.fl-list-menu):not(.fl-list-brief),
2025 #hide-show-container a:active{
2026         color: white;
2027         color: #4C566C;
2028         text-decoration: none;
2029         text-shadow: none;
2030         display: block;
2031 }
2032
2033 .hide-show-container a>h4, .fl-theme-iphone a .results-hide-show-link{
2034         color: white;
2035 }
2036 /* REBUILDING THE TOP NAVIGATION MENU */
2037
2038 #navigation-bar{
2039         height: 2;
2040     border-bottom: .5px solid black;
2041 }
2042
2043 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
2044 Ensure styling matches that in fl-tabs.*/
2045 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
2046     background-image: -webkit-gradient(linear, left top, left bottom,
2047         from(#3b5371),
2048         color-stop(0.5, #374e6b),
2049         color-stop(0.50, #354d68),
2050         to(#354d68)
2051     );
2052 }
2053
2054
2055
2056 /*this CSS creates a button that looks exactly like a Mobile FSS tab.*/
2057 .navigation-bar-button{
2058     border-width:5px;
2059     -webkit-border-radius: 5px;
2060     -moz-border-radius: 5px;
2061         border-radius: 5px;
2062         font-size: 18px;/*keep this in px*/
2063         padding-left: .3em;
2064         padding-right: .3em;
2065         padding-top: .1em;
2066         color: white;
2067         position: relative;
2068         top: .4em;
2069
2070
2071     /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
2072     background-image: -webkit-gradient(linear, left top, left bottom,
2073         from(#3b5371),
2074         color-stop(0.5, #374e6b),
2075         color-stop(0.50, #354d68),
2076         to(#354d68)
2077     );
2078         -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2079         -moz-border-image:url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2080     -webkit-border-left-image: none;
2081     -moz-border-left-image: none;
2082     -webkit-background-origin: border;
2083     -moz-background-origin: border;
2084     -webkit-background-clip: border;
2085         -moz-background-clip: border;
2086         margin-top: .3em;
2087         margin-bottom: -1em;
2088 }
2089
2090
2091 /* hiding/showing course content */
2092
2093 div#content-link-container{
2094         list-style: none;
2095         padding-top: .316em;
2096         float: right;
2097 }
2098
2099
2100 .content_link_tablet {
2101         border-width:5px;
2102     -webkit-border-radius: 5px;
2103     -moz-border-radius: 5px;
2104         border-radius: 5px;
2105         font-size: 0.875em;/*keep this in px*/
2106         font-size: 18px;
2107         /*padding: .1em;*/
2108         padding-left: .3em;
2109         padding-right: .3em;
2110         padding-top: .1em;
2111         padding-bottom: .1em;
2112         margin-right: .313em;
2113
2114
2115     /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
2116     background-image: -webkit-gradient(linear, left top, left bottom,
2117         from(#3b5371),
2118         color-stop(0.5, #374e6b),
2119         color-stop(0.50, #354d68),
2120         to(#354d68)
2121     );
2122         -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2123     -moz-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2124     -webkit-border-left-image: none;
2125     -moz-border-left-image: none;
2126     -webkit-background-origin: border;
2127     -moz-background-origin: border;
2128     -webkit-background-clip: border;
2129     -moz-background-clip: border;
2130     margin-bottom: -0.25em;
2131
2132
2133 }
2134 .flc-screenNavigator-navbar .content_link{
2135         color: white;
2136         text-decoration: none;
2137         font-weight: bold;
2138 }
2139 .fl-theme-iphone .content_link_tablet_highlight{
2140          color: #4c96f4;
2141          font-weight: bold;
2142
2143 }
2144
2145 #content{
2146         position: absolute;
2147         top: 2em;
2148         right: 0.313em;
2149         width: 50%;
2150         float: right;
2151         -webkit-border-radius: 8px;
2152         -moz-border-radius: 8px;
2153         border-radius: 8px;
2154         border: 4px solid black;
2155         z-index: 1000;
2156         display: none;
2157 }
2158
2159 /*      hiding/showing top navigation and results-display */
2160 ul#topnavlist {
2161         display: none;
2162         position: relative;
2163         top: 1.2em;
2164         z-index: 1;
2165 }
2166
2167 div#results-display, .results-display{
2168         display: none;
2169 }
2170
2171 ul#topnavlist li {
2172         padding: 0;
2173         margin: 0;
2174 }
2175
2176 ul#topnavlist>li:hover,
2177 ul#topnavlist>li:hover a,
2178 ul#topnavlist>li:active,
2179 ul#topnavlist>li:active a,
2180 ul#topnavlist>li:focus,
2181 ul#topnavlist>li:focus a {
2182         color: #fff;
2183     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2184    -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2185 }
2186
2187 ul#topnavlist li a  {
2188         color: #4C566C;
2189         text-decoration: none;
2190 }
2191 .content-expand {
2192         background-image:url("images/plus.png");
2193         background-position: 100% 100%;
2194         background-repeat: no-repeat;
2195 }
2196 .content-closed{
2197         background-image:url("images/minus.png");
2198         background-position: 100% 100%;
2199         background-repeat: no-repeat;
2200 }
2201
2202 /* SUBNAVLIST HIGHLIGHTING and Gmail-STYLE "more" button */
2203 ul#subnavlist li a{
2204         color: black;
2205 }
2206
2207 ul#subnavlist li a:active, ul#subnavlist li a:focus, ul#subnavlist li  a:hover {
2208         color: red;
2209         border-bottom: #4C566C 2px solid;
2210         text-decoration: none;
2211 }
2212 ul#subnavlist{
2213         color: black;
2214         padding: 0;
2215         padding-bottom: 0.313em;
2216         margin: 0;
2217         font-size: 90%;
2218         text-align: center;
2219 }
2220 .selected{
2221         color: red;
2222         font-size: 0.875em;
2223         border-bottom: #4C566C 2px solid;
2224 }
2225 #subnavlist-more .more-item{
2226         font-size: 0.875em; list-style-type: bullet;
2227
2228 }
2229 .more-icon {
2230         background-image:url('images/hidemenu.gif');
2231         background-position: 100% 100%;
2232         background-repeat: no-repeat;
2233 }
2234 .more-button{
2235 }
2236 .more-button-surround{
2237 }
2238 .subnavlist-more{
2239
2240         display: block;
2241         display: none;
2242 }
2243 ul#subnavlist li:not(#subnavlist-more){
2244         display: inline;
2245 }
2246
2247 ul#subnavlist li a, ul#subnavlist li a:visited {
2248         color: black;
2249 }
2250 ul#subnavlist li a{
2251         text-decoration: none;
2252 }
2253
2254  /*creates a little up-facing arrow to help mimick an ipad-style popover.
2255  See http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
2256 .triangle-isosceles {
2257      position: relative;
2258 }
2259
2260 .triangle-isosceles:after {
2261      border-style: solid;
2262      content: "";
2263      display: block;
2264      position: absolute;
2265 }
2266
2267 .triangle-isosceles.top:after {
2268      border-color: black transparent;
2269      border-width: 0pt 15px 15px;
2270      bottom: auto;
2271      left: auto;
2272      left: 20%;
2273      top: 95%;
2274      z-index: 1000;
2275 }
2276
2277 .triangle-isosceles.top.right:after {
2278      border-color: black transparent;
2279      border-width: 0pt 15px 15px;
2280      bottom: auto;
2281      left: auto;
2282      right: 30%;
2283      top: 98%;
2284      z-index: 1000;
2285 }
2286
2287 /*'Previous' and 'Next' buttons */
2288 .previous{
2289         margin-left:3.125em;
2290         background-image: -webkit-gradient(linear, left top, left bottom,
2291         from(#3b5371),
2292         color-stop(0.5, #374e6b),
2293         color-stop(0.50, #354d68),
2294         to(#354d68)
2295     );
2296 }
2297
2298 .triangle-isosceles.previous:after {
2299         top:1em; /* controls vertical position */
2300         left:-3.125em; /* value = - border-left-width - border-right-width */
2301         bottom:auto;
2302         border-width:15px 50px 10px 0;
2303         border-color:transparent #f3961c;
2304         border-color: transparent #F3961C;
2305     border-width: 10px 10px 10px 0pt;
2306     bottom: auto;
2307     left: -0.75em;
2308     top: 0;
2309 }
2310
2311 /* sequence links */
2312 #sequence-links{
2313         float: left;
2314         padding-right:0;
2315         position: relative;
2316         right: -.313em;
2317 }
2318
2319 #course-level-navigation, #sequence-links-course-navigation{
2320                 float: right;
2321 }
2322
2323 /************************************************************************************************/
2324 /*Adds arrows to Fluid Tabs. Here is a good guide for creating triangles with CSS:
2325 http://jonrohan.me/guide/css/creating-triangles-in-css/ */
2326 /************************************************************************************************/
2327
2328 ul.sequence-links li {
2329     position:relative;
2330     z-index:1;
2331     overflow:hidden;
2332     list-style:none;
2333 }
2334
2335 ul.sequence-links li.back a:link,
2336 ul.sequence-links li.back a:visited {
2337     display:block;
2338     padding-left:12px;
2339     color:white;
2340 }
2341
2342 ul.sequence-links li.forward a:link,
2343 ul.sequence-links li.forward a:visited {
2344     display:block;
2345     padding-right:0.75em;
2346     color:white;
2347 }
2348 /*WCAG*/
2349 ul.sequence-links li a:hover, ul.sequence-links li a:focus, ul.sequence-links li a:active,
2350 ul.sequence-links li.back a:hover, ul.sequence-links li.back a:focus, ul.sequence-links li.back a:active,
2351 ul.sequence-links li.forward a:hover, ul.sequence-links li.forward a:focus, ul.sequence-links li.forward a:active {
2352     color: #4c96f4;
2353     background:transparent;
2354 }
2355
2356
2357 ul.sequence-links li:before,
2358 ul.sequence-links li:after,
2359 ul.sequence-links li a:before,
2360 ul.sequence-links li a:after {
2361     content:"";
2362     position:absolute;
2363     top:50%;
2364    /* left:0;*/
2365 }
2366
2367 ul.sequence-links li a:before,
2368 ul.sequence-links li a:after {
2369     margin:-0.5em 0 0;
2370   }
2371
2372 /*arrow that points to the left, beside the "Previous" text */
2373 .arrow.back a:after {/*arrow pointing to the left*/
2374      background: none repeat scroll 0% 0% transparent;
2375      border-color: transparent #FFFFFF;
2376      border-style: solid;
2377      border-width: 5px 0pt 5px 6px;
2378      left: .5em;
2379      margin-top: -0.438em;
2380 }
2381
2382 /*left and right triangle icons change color*/
2383 .arrow a:hover:after, .arrow a:focus:after, .arrow a:active:after,
2384 .arrow.forward a:hover:after, .arrow.forward a:focus:after, .arrow.forward a:active:after{
2385         border-color: transparent #4c96f4;
2386 }
2387
2388 .arrow.back a:after {
2389      border-width: 6px 6px 6px 0pt;
2390      left: 0.188em;
2391
2392      top: .75em;
2393 }
2394
2395 }
2396 /*arrow that points to the right, beside the "Next" text */
2397 .arrow.forward a:after {
2398      background: none repeat scroll 0% 0% transparent;
2399      border-color: transparent #FFFFFF;
2400      border-style: solid;
2401      margin-top: -0.425em;
2402
2403 }
2404 .arrow.forward a:after {
2405
2406       background: none repeat scroll 0% 0% transparent;
2407      border-color: transparent transparent transparent white;
2408          border-width: 6px;
2409          border-style: solid;
2410          width:0;
2411          height:0;
2412          right: -0.313em;
2413          top: 0.75em;
2414 }
2415 /* style for "last modified" information of course content*/
2416 #content-info{
2417         padding-top: 2em;
2418         font-size: 80%;
2419 }
2420
2421 ul.my-courses-list-ul > li:hover{
2422         background-color: #e6e6e6;
2423         color: #fff;
2424     background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2425    -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2426 }
2427 ul.my-courses-list-ul > li:hover a{
2428         color: white;
2429 }
2430 #topnavlistcontainer {
2431     float: left;
2432 }