docs/themes/simplified-desktop/iphone.css

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