docs/themes/mobile/mobile.css

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