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