docs/themes/mobile/mobile.css

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