docs/themes/mobile/mobile.css

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