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