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