themes/mobile/mobile.css

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