docs/themes/mobile/mobile.css

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