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