docs/themes/mobile/mobile.css

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