docs/themes/mobile/mobile.css

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