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