2 /************************************************************************************************/
3 /* Style is optimized for tablets. Note that -webkit and -moz properties create errors in the CSS validator.
4 Relative units for sizes are used unless it is a border. Classes beginning with ".fl-" override Mobile FSS,
5 see the API @ http://wiki.fluidproject.org/display/fluid/Mobile+FSS+API */
6 /************************************************************************************************/
20 font-size: 18px;/*fix*/
30 background: #999; /*fallback*/
31 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
32 background: -moz-linear-gradient(#999, black);
36 .fl-theme-iphone .fl-navbar{
48 border-top: 1px solid black;
49 border-bottom: .5px solid black;
50 background-color: #4b6b90;
52 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
53 background: -moz-linear-gradient(#999, black);
56 #navigation-contentwrapper{
58 height: 2.5em; /*requires a height, do not remove */
71 background-image: url(images/idi_background.png);
76 #header-section-title {
85 #site-name, h1#section-title{
92 /************************************************************************************************/
93 /* "Navigation" button, also this CSS creates a button that looks exactly like a Mobile FSS tab.*/
94 /************************************************************************************************/
97 .navigation-bar-button-content{
99 -webkit-border-radius: 5px;
100 -moz-border-radius: 5px;
102 font-size: 18px;/*keep this in px*/
103 background-image: -webkit-gradient(linear, left top, left bottom,
105 color-stop(0.5, #374e6b),
106 color-stop(0.50, #354d68),
109 -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
110 -moz-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
111 -webkit-border-left-image: none;
112 -moz-border-left-image: none;
113 -webkit-background-origin: border;
114 -moz-background-origin: border;
115 -webkit-background-clip: border;
116 -moz-background-clip: border;
119 .fl-theme-iphone .topnavlistcontainer .topnavlist-link {/*makes the navigation button link white*/
121 text-decoration: none;
125 .fl-theme-iphone .topnavlistcontainer .topnavlist-link-highlight{/*makes the navigation button link highlight*/
127 text-decoration: none;
131 .fl-theme-iphone .fl-tabs li{
132 background-image: -webkit-gradient(linear, left top, left bottom,
134 color-stop(0.5, #374e6b),
135 color-stop(0.50, #354d68),
139 /************************************************************************************************/
140 /*fl-tabs for the "home" and "guide" and sequence links*/
141 /************************************************************************************************/
145 padding-right: .313em;
153 ul.home-guide li a:hover, ul.home-guide li a:focus, ul.home-guide li a:active,
154 ul.home-guide li.back a:hover, ul.home-guide li.back a:focus, ul.home-guide li.back a:active,
155 ul.home-guide li.forward a:hover, ul.home-guide li.forward a:focus, ul.home-guide li.forward a:active {
157 background:transparent;
159 /************************************************************************************************/
160 /* main body attributes */
161 /************************************************************************************************/
171 text-decoration: underline;
177 background-color: transparent;
182 background-color: transparent;
186 h1, h2, h3, h4, h5, h6 {
189 font: 100% Helvetica, Arial, sans-serif;
219 text-decoration: none;
228 /************************************************************************************************/
229 /* Highlighting outside of the header and footer */
230 /************************************************************************************************/
231 link highlighting -- add when the header and footer is done
232 .fl-theme-iphone a:not(.fl-tabs){
236 /************************************************************************************************/
237 /* Preferences tabs */
238 /************************************************************************************************/
239 .etabbed-list-container {
253 padding:0.5em 0.3em 0;
260 padding:0.7em 0.3em 0;
269 /************************************************************************************************/
270 /* link attributes */
271 /************************************************************************************************/
273 /* link attributes */
277 text-decoration: underline;
279 a:hover, a:visited, a:focus {
281 text-decoration: underline;
283 .fl-list-menu a, .fl-list-menu a:visited{ /*may need to be removed when FLUID-4313 is fixed*/
287 /* main submit button */
289 background-color: #808080;
292 -webkit-border-radius:3px;
293 -moz-border-radius:3px;
295 padding-top: 0.313em;
296 padding-bottom: 0.313em;
302 border:1px solid #A50707;
303 background-color: #FFDAB9;
305 /* small submit button at top */
307 font-family: Helvetica,sans-serif;
308 background-color: #E9F4F3;
312 background-color: #E9F4F3;
313 border: #ACCFCC solid 1px;
316 /* Editor box large */
318 font-family: Helvetica,sans-serif;
319 background-color: #E9F4F3;
324 padding-bottom: .4em;
325 border: 1px #ACCFCC solid;
328 /* edit content tabs */
330 background-color: #E6E6E6;
333 padding-left: .188em;
334 padding-right: .188em;
341 background-color: #E6E6E6;
342 border-top: 1px #B8AE9C solid;
343 border-left: 1px #B8AE9C solid;
344 border-right: 1px #B8AE9C solid;
345 text-decoration: none;
351 .buttontab selected {
352 font-family: Helvetica, Arial, Helvetica, sans-serif;
353 background-color: #6F7172;
356 padding-left: .188em;
357 padding-right: .188em;
362 font-family: Helvetica, Arial, Helvetica, sans-serif;
364 text-decoration: none;
366 background-color: white;
367 border-top: 1px #B8AE9C solid;
368 border-left: 1px #B8AE9C solid;
369 border-right: 1px #B8AE9C solid;
372 .tab a:link, .etab a:visited {
374 background-color: white;
378 td.dropdown-heading {
379 background-color: #DBFDD4;
381 border-left: 1px solid #ECFEEA;
382 border-right: 1px solid #ECFEEA;
383 border-top: 1px solid #ECFEEA;
386 /* the side menu content */
389 background-color: white;
391 border-left: 1px solid #ECFEEA;
392 border-right: 1px solid #ECFEEA;
393 border-bottom: 1px solid #ECFEEA;
396 td.dropdown a, td.dropdown a:visited {
398 text-decoration: none;
400 td.dropdown a:hover {
402 text-decoration: underline;
405 /* added for 1.4.2: */
407 padding-left: 1.25em;
412 margin-bottom: 0.313em;
415 margin-left: 0.313em;
419 background-color: #F7F3ED;
421 border-left: 1px solid #595241;
422 border-right: 1px solid #595241;
423 border-top: 1px solid #595241;
430 .input-form table.tabbed-table {
432 border:thin black solid;
434 table.tabbed-table th#left-empty-tab {
435 background-color: transparent;
437 border-bottom: 1px solid #B8AE9C;
439 table.tabbed-table th#right-empty-tab {
441 background-color: transparent;
442 border-bottom: 1px solid #B8AE9C;
444 padding-right: 0.313em;
446 table.tabbed-table th#right-empty-tab a {
447 text-decoration: underline;
449 table.tabbed-table th.tab-spacer {
450 background-color: transparent;
452 border-bottom: 1px solid #B8AE9C;
455 table.tabbed-table th.tab {
456 padding-top: 0.125em;
457 padding-bottom: 0.125em;
459 background-color: #E9F4F3;
460 border-bottom: 1px solid #B8AE9C;
461 border-left: 1px solid #B8AE9C;
462 border-top: 1px solid #B8AE9C;
463 border-right: 1px solid #B8AE9C;
465 table.tabbed-table th.tab:hover {
466 background-color: #ACCFCC;
469 table.tabbed-table th.tab a:focus {
472 table.tabbed-table th.selected {
473 padding-top: 0.125em;
474 padding-bottom: 0.125em;
476 background-color: #ACCFCC;
477 border-left: 1px solid #B8AE9C;
478 border-top: 1px solid #B8AE9C;
479 border-right: 1px solid #B8AE9C;
482 table.tabbed-table a, table.tabbed-table a:visited, table.tabbed-table a:hover {
485 text-decoration: none;
489 .preference-buttons-container{
490 background-color: red;
496 div.preference-buttons-container li{
513 font-family: monospace;
514 border: 2px solid rgb(0, 0, 0);
517 color: rgb(255, 255, 255);
518 background-color: rgb(0, 0, 0);
522 border-bottom-width: 0;
530 #display-settings-preview{
538 #defaultfontsize-wrapper{
542 /* end of preferences */
546 padding-left: 0.938em;
547 background-repeat: no-repeat;
548 background-position: 0.125em 0.313em;
552 padding-left: 1.25em;
553 background-image: url(images/back.gif);
554 background-repeat: no-repeat;
555 background-position: 0 0;
559 #breadcrumbs-container{
560 background-color: #4d4d4d;
570 margin-bottom: 0.313em;
575 border-left: 1px solid black;
576 border-right: 1px solid black;
577 border-bottom: 1px solid black;
578 padding-left: 0.313em;
579 padding-right: 0.313em;
580 padding-bottom: 0.313em;
581 background-color: #F7F3ED;
582 margin-left: 0.313em;
583 margin-right: 0.313em;
588 margin-left: 0.313em;
589 margin-right: 0.313em;
590 border-left: 1px solid black;
591 border-right: 1px solid black;
593 background-color: #F7F3ED;
596 border-bottom: 1px solid black;
605 padding-left: 0.625em;
618 /**********************************************************************/
620 /**********************************************************************/
623 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
624 background: -moz-linear-gradient(#999, black);
636 ul.footer-links-tabs li a:hover, ul.footer-links-tabs li a:focus, ul.footer-links-tabs li a:active,
637 ul.footer-links-tabs li.back a:hover, ul.footer-links-tabs li.back a:focus, ul.footer-links-tabs li.back a:active,
638 ul.footer-links-tabs li.forward a:hover, ul.footer-links-tabs li.forward a:focus, ul.footer-links-tabs li.forward a:active {
640 background:transparent;
643 div#footer-links a:link, div#footer-links a:visited {
644 text-decoration:none;
648 background-color:#F6EAD6;
655 background-color: #F7F3ED;
656 padding-top: 0.063em;
657 padding-bottom: 0.063em;
658 padding-left: 0.938em;
659 padding-right: 0.5em;
660 border: 1px solid #cccccc;
662 text-decoration: none;
665 a#editor-link:hover {
666 background-color: #F7F3ED;
667 border: 1px solid #B8AE9C;
671 background-image: url(images/pen.gif);
672 background-repeat: no-repeat;
673 background-position: 0 0.125em;
676 background-image: url(images/pen2.gif);
677 background-repeat: no-repeat;
678 background-position: 0 0.125em;
682 /* for data tables */
684 border: #A9ADB0 1px solid;
685 border: #cccccc 1px solid;
686 -webkit-border-radius:5px;
687 -moz-border-radius: 5px;
701 background-color: transparent;
703 /* contains the headings */
711 background-image: url('../default/images/sort.gif');
712 background-repeat: no-repeat;
713 background-position: right;
717 table.data tbody th {
728 table.data td a:link, a:visited{
733 /*should table.data tbody tr:hover and table.data tbody tr.selected highlighting
734 be improved to sync with Mobile FSS highlighting */
735 table.data tbody tr:hover {
736 background-color: #efefef;
740 table.data tbody tr.selected {
741 background-color: #E9F4F3;
743 border: 5px solid #E9F4F3;
747 background-color: #F7F3ED;
750 table.data tfoot tr:first-child td {
752 background-image: url('images/arrow_ltr.gif');
753 background-repeat: no-repeat;
754 background-position: .25em 0.313em;
757 table.data.static tfoot td, table.data.static tfoot tr:first-child td {
759 background-image: none;
763 /* add borders to row in Required Information, Personal Information*/
768 #last-row, .row-buttons, #last-row1, .row-blurb{
771 #browse-courses-table{
777 table.data tfoot input {
778 background-color: #efefef;
781 table.data tfoot input:focus {
782 background-color: #FFDAB9;
786 /* used for static tables with no form elements: */
787 table.data.static tbody tr:hover {
788 background-color: transparent;
792 /* course browser: */
799 div.browse-selected {
800 background-image: url('images/side_arrow.gif');
801 background-repeat: no-repeat;
802 padding-left: 0.563em;
803 background-position: center left;
806 div.browse-unselected {
807 padding-left: 0.563em;
815 /* feedback /errors */
821 margin-bottom: 0.938em;
822 border: 1px solid #DD0000;
824 background-color: #F4DCDC;
826 background-color: #F4DCDC;
827 padding-left: 1.563em;
829 -webkit-border-radius:5px;
830 -moz-border-radius: 5px;
838 div#error ul, div#feedback ul, div#help ul {
849 div#feedback, div#info {
854 margin-bottom: 0.313em;
856 font-family: Helvetica, Arial, sans-serif;
857 -webkit-border-radius:5px;
858 -moz-border-radius: 5px;
860 border: 1px solid #17B506;
861 background-color: #E7EFD0;
866 div#feedback li, div#info li, div#error li{
875 margin-bottom: 0.938em;
876 border: 1px solid #ACCFCC;
878 background-color: #E9F4F3;
887 margin-bottom: 0.938em;
888 border: 1px solid #FF8400;
890 background-color: #FFF6ED;
903 font-family:Helevetica, Arial, sans-serif;
913 /* home page links */
922 div.home-link:hover {
924 background-color: #F7F3ED;
925 border: 1px solid #afafaf;
931 text-decoration: none;
942 background-color: white;
944 border-left: 1px solid #ECFEEA;
945 border-right: 1px solid #ECFEEA;
946 border-bottom: 1px solid #ECFEEA;
950 div.dropdown-heading {
951 background-color: #ACCFCC;
953 border-left: 1px solid #ECFEEA;
954 border-right: 1px solid #ECFEEA;
955 border-top: 1px solid #ECFEEA;
966 margin-top: -0.313em;
968 padding-right: 0.125em;
972 margin-left: 0.313em;
975 #content, #content-tablet{
978 background-color: white;
1001 padding-left: 0.125em;
1002 padding-right: 0.125em;
1009 text-decoration: none;
1010 padding-left: 0.25em;
1011 padding-right: 0.25em;
1015 div.paging li a:hover, div.paging li a.current, #show-all a:active, #show-all a:focus, #show-all a:hover,
1016 #show-pages a:active, #show-pages a:focus, #show-pages a:hover {
1017 border: 1px solid #4c96f4;
1019 background-color: #4c96f4;
1020 -webkit-border-radius: 3px;
1021 -moz-border-radius: 3px;
1024 #show-pages:active, #show-pages:focus, #show-pages:hover, #show-all:active, #show-all:focus, #show-all:hover{
1025 background-color: #4c96f4;
1030 background-image:url(images/tl_corner.gif);
1031 background-position: top left;
1032 background-repeat: no-repeat;
1037 /* Navigational Plone Tabs(tm), implemented by customizing the a tag - they are surprisingly elegant. The power of CSS runs strong in these :) */
1038 background-color: transparent;
1039 border-collapse: collapse;
1040 border-bottom: 1px solid #B8AE9C;
1041 padding: 0.5em 0em 0em 2em;
1042 white-space: nowrap;
1046 /* The normal, unselected tabs. They are all links */
1047 background-color: transparent;
1048 border-color: #B8AE9C;
1050 border-style: solid solid none solid;
1053 margin-right: 0.5em;
1054 padding: 0em 2em 0em;
1058 div.tabs a.selected {
1059 /* The selected tab. There's only one of this */
1060 background-color: white;
1061 border-bottom: #B8AE9C 1px solid;
1063 font-weight: normal;
1066 div.tabs a:hover, div.tabs a.active {
1067 background-color: #B8AE9C;
1068 border-bottom: 1px solid #B8AE9C;
1075 .headingbox a:link, .headingbox a:visited{
1076 text-decoration: none;
1081 background-color: #F5F5F5;
1087 background-color: #F5F5F5;
1088 text-decoration: none;
1092 background-color: #F5F5F5;
1094 border: 1px solid #B8AE9C;
1096 font-weight: normal;
1101 background-color: #6F7172;
1102 border: 1px solid #B8AE9C;
1103 border-style: solid solid none solid;
1105 padding: 0em 1em 0em 1em;
1112 text-decoration: none;
1117 text-decoration: none;
1121 text-decoration: underline;
1135 text-transform: none;
1136 border-left: 1pt solid #B8AE9C;
1140 div.box h1, div.box h2, div.box h3, div.box h4 {
1146 background-color: #F7F3ED;
1150 background-color: transparent;
1154 /* users/index.php */
1159 border: rgb(204, 204, 204) 1px solid;
1160 background-color: #F7F7F7;
1172 font-weight: normal;
1178 background-color:#FBF4E9;
1179 border: #B8AE9C 1px solid;
1183 table.data .odd img.headicon{
1186 -webkit-border-radius:5px;
1187 -moz-border-radius: 5px;
1192 -webkit-border-radius:10px;
1193 -moz-border-radius: 10px;
1194 border-radius: 10px;
1195 border-color: white;
1200 div.course div.shortcuts {
1203 vertical-align: middle;
1207 fieldset#shortcuts {
1209 background-color: #FEFDEF;
1210 border: 1pt solid #B8AE9C;
1211 margin: -5pt 5pt 5pt 5pt;
1212 padding-right: 10pt;
1213 padding-bottom: 5pt;
1218 margin-bottom: 10pt;
1219 -webkit-border-radius:5px;
1220 -moz-border-radius: 5px;
1227 border:thin #A9ADB0 solid;
1238 list-style-type: none;
1242 /*a#guide,*/ a#my-courses-link {
1243 background-color: #6D84A2;
1250 div#content-test, div.content-from-module {
1267 ul#home-links, ul#home-detail-links {
1272 #my_courses_container{
1280 border: solid 1px #A9ADB0;
1281 -webkit-border-radius:5px;
1282 -moz-border-radius: 5px;
1287 background-color: white;
1291 text-decoration: none;
1295 .my-courses-list-ul{
1308 padding-left: 0.875em;
1309 padding-bottom: 0.875em;
1313 .fl-theme-iphone [class*="fl-list"] > li .fl-link-summary{
1327 list-style-type: none;
1329 padding-bottom: .5em;
1333 .current_list li a:active, .current_list li a:focus, .current_list li a:hover{
1335 background-color: #4C96F4;
1338 .current_list_date_time{
1341 #show-all, #show-pages{
1342 -webkit-border-radius: 8px;
1343 -moz-border-radius: 8px;
1346 border: solid 1px #A9ADB0;
1347 background-color: white;
1354 #show-all a, #show-pages a{
1356 padding-left: 0.25em;
1357 padding-right: 0.25em;
1358 text-decoration: none;
1362 /* enrollment tabs */
1368 margin-bottom: .25em;
1369 margin-top: 0.938em;
1370 white-space: nowrap;
1380 padding: 0.188em 0.563em;
1381 border: 1px solid #F7F3ED;
1382 border-bottom: none;
1383 background-color: #F7F3ED;
1384 text-decoration: none;
1386 white-space: nowrap;
1389 #navlist li a:hover, #navlist li a:active {
1391 background-color: #fff;
1396 vertical-align: middle;
1403 dl#public-profile dt {
1406 border-right: 1px solid #F7F3ED;
1407 padding: 0.313em 0.313em 0.313em 0;
1409 margin-right: 0.313em;
1411 dl#public-profile dd {
1429 padding-bottom: .375em;
1432 border: 1px #cccccc solid;
1440 #forum-thread li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; float:left; width: 97%; list-style: none; }
1441 #forum-thread li.even { background-color: #F7F3ED; border-top: none; }
1442 #forum-thread li.odd { background-color: #fff; }
1443 div.forum-post-author { float:left; width:19.375em; padding:0.5em 0.625em; }
1444 div.forum-post-author a.title {font-size: 1.1em; line-height: 1.2em; font-weight: bold; text-decoration:none; }
1445 div.forum-post-author img.profile-picture { border: 2px solid #F7F3ED; text-align:right;}
1446 div.forum-post-content { margin-left: 19.375em; padding: 0.313em 0 1.125em 1.125em;}
1447 div.forum-post-content h3 { font-weight: 500; float:left;clear:right; }
1448 div.forum-post-ctrl { float: right; padding-right: 0.313em; color: #a1a1a1;}
1449 div.forum-post-ctrl a { text-decoration: none; }
1450 div.forum-post-ctrl span { color: black; background-color: #fefdc2; padding: 0.188em; }
1451 div.forum-post-content p.date { color: #a1a1a1; border-bottom: 1px solid #F7F3ED; }
1452 div.forum-post-content div.body p { margin-bottom:1em; }
1453 div.forum-paginator{border:thin #cccccc solid; padding:.3em; width:95%;margin:auto;background-color:#F7F3ED;}
1454 span.forum-paginator-active{font-weight:700;text-decoration:underline; height:2em;}
1458 /** inbox stuff - reuses some of the forum layout **/
1459 #inbox-msg li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; width: 95%; list-style: none; min-height: 11em;}
1461 /* tool list on admin home and manage screens */
1464 padding: 0.125em 0.125em 0.125em 0.938em;
1465 margin-bottom: 0.313em;
1467 border: solid 1px #A9ADB0;
1468 -webkit-border-radius:8px;
1469 -moz-border-radius: 8px;
1476 font-weight: normal;
1480 margin-top: -0.313em;
1488 margin-right: 0.313em;
1493 /* browse courses */
1495 padding-bottom: 0.625em;
1500 padding-bottom: 0.625em;
1501 background-color: #fffaf0;
1505 dl.browse-course dt {
1511 padding: 0.313em 0.625em 0.313em 0;
1512 vertical-align: middle;
1515 dl.browse-course dd {
1516 margin-bottom: 0.313em;
1518 padding: 0.313em 0 0.313em 0.625em;
1526 /* form fields grouping for WCAG 2.0 conformance*/
1527 fieldset.group_form{
1533 border: 1px #A9ADB0 solid;
1534 background-color: white;
1538 background-color:white;
1543 border: 1px #4C566C solid;
1544 -webkit-border-radius: 8px;
1545 -moz-border-radius: 8px;
1549 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
1550 Ensure styling matches that in fl-tabs.*/
1551 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
1552 background-image: -webkit-gradient(linear, left top, left bottom,
1554 color-stop(0.5, #374e6b),
1555 color-stop(0.50, #354d68),
1560 /*Added by Silvia */
1561 div.column_primary {
1566 min-width: 10.625em;
1569 div.column_equivalent{
1572 margin-left: 0.938em;
1573 margin-top: 0.313em;
1574 margin-right: 0.313em;
1575 margin-bottom: 0.313em;
1576 min-width: 10.625em;
1578 border: 1px solid #EEE;
1579 background-color: #FFF;
1583 border: 1px solid #aaa;
1588 background-color: #eee;
1597 div.alternative_box{
1598 border: 1px solid #ddd;
1602 background-color: #fff;
1605 div.alternative_box legend {
1609 div.resource_box legend {
1615 font-weight: bolder;
1616 background-color: white;
1619 /* format of "table of contents" on content page */
1624 #toc .h2, #toc .h3, #toc .h4, #toc .h5, #toc .h6{
1630 background-color: #FEFDEF;
1631 border: 1pt solid #B8AE9C;
1639 /* cleans up glossary question mark line spacing*/
1641 border: 1pt solid #B8AE9C;
1642 vertical-align:bottom;
1646 /* jQuery tooltip styles */
1650 border:3px solid #111;
1651 background-color:#eeeeee;
1654 #tooltip h3,#tooltip div{
1658 /* style for home page modules "detail view" */
1684 background-image:url(images/details_r.png);
1685 background-position: top right;
1686 background-repeat:no-repeat;
1692 background-image:url(images/details_l.png);
1693 background-position: top left;
1694 background-repeat:no-repeat;
1700 background-image:url(images/details_ir.png);
1701 background-position: top right;
1702 background-repeat:no-repeat;
1707 background-image:url(images/details_il.png);
1708 background-position: top left;
1709 background-repeat:no-repeat;
1720 .draggable_selected {
1721 background-color: lightgrey;
1728 border:1px solid #cccccc;
1731 list-style: disc url(../../images/folder.gif) outside;
1732 font-family: Helvetica,sans-serif;
1738 li.folders .disabled {
1743 list-style-image:none;
1744 list-style-position:outside;
1745 list-style-type:none;
1751 -webkit-border-radius: 8px;
1752 -moz-border-radius: 8px;
1761 ul#topnavlist-tablet li {
1765 ul#topnavlist-tablet>li:hover, ul#topnavlist-tablet>li:hover a, ul#topnavlist-tablet>li:active,
1766 ul#topnavlist-tablet>li:active a, ul#topnavlist-tablet>li:focus, ul#topnavlist-tablet>li:focus a {
1768 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1769 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center, -moz-linear-gradient(#4a94f4, #236de5);
1772 ul#topnavlist-tablet li a {
1773 text-decoration: none;
1776 .flc-screenNavigator-backButton .fl-link-hilight{
1781 border: #cccccc 1px solid;
1782 -webkit-border-radius:5px;
1783 -moz-border-radius: 5px;
1793 /* list attributes */
1802 ol#tools>li:hover, ol#tools>li:hover a {
1803 /*border: 1px solid #e0e0e0;*/
1804 background-color: #e6e6e6;
1808 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
1809 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1810 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
1811 -moz-linear-gradient(#4a94f4, #236de5);
1814 [class*="fl-container"]:not(.fl-navbar){
1816 margin-left: .313em;
1817 margin-right: .313em;
1820 div#navigation-column{
1823 -webkit-border-radius: 8px;
1824 -moz-border-radius: 8px;
1830 padding-right: .2em;
1833 padding-bottom: .2em;
1837 padding-top: .313em;
1854 #content-contentwrapper{
1866 margin-left: 0.313em;
1867 margin-top:-0.625em;
1885 /* ATutor Social Styles */
1886 div .profile_container {
1887 background-color:#eee;
1888 border: 1px solid #8e8e8e;
1891 margin-bottom: 0.5em;
1894 div .profile_container .top_right {
1898 dl.public-profile dd{
1901 dl.public-profile dt {
1912 div .search_form .row{
1913 background-color: #DEDEC0;
1917 background-color: #eee;
1918 border: 1px solid #aaa;
1921 background-color: #cccccc;
1926 ul.social_side_menu {
1929 ul.social_side_menu li {
1930 padding-bottom: 0.2em;
1935 border-bottom:1px solid #C1C157;
1936 padding-bottom:0.5em;
1937 margin-bottom:0.5em;
1945 div.contentbox, input-form{
1947 background-color: #ffffff;
1949 border: #A9ADB0 solid 1px;
1950 -webkit-border-radius: 5px;
1951 -moz-border-radius: 5px;
1956 border:1px solid #a50707;
1957 margin-left:0.625em;
1964 ul.social_inline_menu{
1965 background-color: #eeeeee;
1966 border:thin #cccccc solid;
1971 .results-hide-show-link-container{
1972 border: #A9ADB0 solid 1px;
1973 -webkit-border-radius: 5px;
1974 -moz-border-radius: 5px;
1977 #results-hide-show-link{
1981 #hide-show-container{
1982 -webkit-border-radius:8px;
1983 -moz-border-radius: 8px;
1985 margin-top: 0.875em;
1986 margin-bottom: 0.875em;
1988 padding-right: .2em;
1989 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
1990 background: -moz-linear-gradient(#999, black);
1993 .hide-show-container h4{
1994 border: #A9ADB0 solid 1px;
1995 -webkit-border-radius:8px;
1996 -moz-border-radius: 8px;
1998 margin-top: 0.875em;
1999 margin-bottom: 0.875em;
2001 padding-right: .2em;
2002 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8FAFB), to(#B6C0C6));
2003 background: -moz-linear-gradient(#F8FAFB, #B6C0C6);
2007 #hide-show-container a:link,
2008 #hide-show-container a:focus,
2009 #hide-show-container a:hover{
2011 text-decoration: none;
2016 .hide-show-container a:link:not(.fl-list-menu):not(.fl-list-brief),
2017 .hide-show-container a:focus:not(.fl-list-menu):not(.fl-list-brief),
2018 .hide-show-container a:hover:not(.fl-list-menu):not(.fl-list-brief),
2019 .hide-show-container a:active:not(.fl-list-menu):not(.fl-list-brief),
2020 #hide-show-container a:active{
2023 text-decoration: none;
2028 .hide-show-container a>h4, .fl-theme-iphone a .results-hide-show-link{
2031 /* REBUILDING THE TOP NAVIGATION MENU */
2035 border-bottom: .5px solid black;
2038 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
2039 Ensure styling matches that in fl-tabs.*/
2040 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
2041 background-image: -webkit-gradient(linear, left top, left bottom,
2043 color-stop(0.5, #374e6b),
2044 color-stop(0.50, #354d68),
2051 /*this CSS creates a button that looks exactly like a Mobile FSS tab.*/
2052 .navigation-bar-button{
2054 -webkit-border-radius: 5px;
2055 -moz-border-radius: 5px;
2057 font-size: 18px;/*keep this in px*/
2059 padding-right: .3em;
2066 /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
2067 background-image: -webkit-gradient(linear, left top, left bottom,
2069 color-stop(0.5, #374e6b),
2070 color-stop(0.50, #354d68),
2073 background-color: #354D68;
2074 -moz-border-image: url("images/navbar_normal_button_insetShadow.png") 5 5 5 5 stretch;
2075 -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2076 -moz-border-image:url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2077 -webkit-border-left-image: none;
2078 -moz-border-left-image: none;
2079 -webkit-background-origin: border;
2080 -moz-background-origin: border;
2081 -webkit-background-clip: border;
2082 -moz-background-clip: border;
2084 margin-bottom: -1em;
2088 /* hiding/showing course content */
2090 div#content-link-container{
2092 padding-top: .316em;
2097 .content_link_tablet {
2099 -webkit-border-radius: 5px;
2100 -moz-border-radius: 5px;
2102 font-size: 0.875em;/*keep this in px*/
2106 padding-right: .3em;
2108 padding-bottom: .1em;
2109 margin-right: .313em;
2112 /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
2113 background-image: -webkit-gradient(linear, left top, left bottom,
2115 color-stop(0.5, #374e6b),
2116 color-stop(0.50, #354d68),
2119 -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2120 -moz-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2121 -webkit-border-left-image: none;
2122 -moz-border-left-image: none;
2123 -webkit-background-origin: border;
2124 -moz-background-origin: border;
2125 -webkit-background-clip: border;
2126 -moz-background-clip: border;
2127 margin-bottom: -0.25em;
2131 .flc-screenNavigator-navbar .content_link{
2133 text-decoration: none;
2135 background-color: #354D68;
2137 .fl-theme-iphone .content_link_tablet_highlight{
2149 -webkit-border-radius: 8px;
2150 -moz-border-radius: 8px;
2152 border: 4px solid black;
2157 /* hiding/showing top navigation and results-display */
2165 div#results-display, .results-display{
2174 ul#topnavlist>li:hover, ul#topnavlist>li:hover a, ul#topnavlist>li:active, ul#topnavlist>li:active a,
2175 ul#topnavlist>li:focus, ul#topnavlist>li:focus a {
2177 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2178 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2179 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2180 -moz-linear-gradient(#4a94f4, #236de5);
2183 ul#topnavlist li a {
2185 text-decoration: none;
2188 background-image:url("images/plus.png");
2189 background-position: 100% 100%;
2190 background-repeat: no-repeat;
2193 background-image:url("images/minus.png");
2194 background-position: 100% 100%;
2195 background-repeat: no-repeat;
2198 /* SUBNAVLIST HIGHLIGHTING and Gmail-STYLE "more" button */
2203 ul#subnavlist li a:active, ul#subnavlist li a:focus, ul#subnavlist li a:hover {
2205 border-bottom: #4C566C 2px solid;
2206 text-decoration: none;
2211 padding-bottom: 0.313em;
2219 border-bottom: #4C566C 2px solid;
2221 #subnavlist-more .more-item{
2222 font-size: 0.875em; list-style-type: bullet;
2226 background-image:url('images/hidemenu.gif');
2227 background-position: 100% 100%;
2228 background-repeat: no-repeat;
2232 .more-button-surround{
2239 ul#subnavlist li:not(#subnavlist-more){
2243 ul#subnavlist li a, ul#subnavlist li a:visited {
2247 text-decoration: none;
2250 /*creates a little up-facing arrow to help mimick an ipad-style popover.
2251 See http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
2252 .triangle-isosceles {
2256 .triangle-isosceles:after {
2257 border-style: solid;
2263 .triangle-isosceles.top:after {
2264 border-color: black transparent;
2265 border-width: 0pt 15px 15px;
2273 .triangle-isosceles.top.right:after {
2274 border-color: black transparent;
2275 border-width: 0pt 15px 15px;
2283 /*'Previous' and 'Next' buttons */
2285 margin-left:3.125em;
2288 .triangle-isosceles.previous:after {
2289 top:1em; /* controls vertical position */
2290 left:-3.125em; /* value = - border-left-width - border-right-width */
2292 border-width:15px 50px 10px 0;
2293 border-color:transparent #f3961c;
2294 border-color: transparent #F3961C;
2295 border-width: 10px 10px 10px 0pt;
2301 /* sequence links */
2309 #course-level-navigation, #sequence-links-course-navigation{
2313 /************************************************************************************************/
2314 /*Adds arrows to Fluid Tabs. Here is a good guide for creating triangles with CSS:
2315 http://jonrohan.me/guide/css/creating-triangles-in-css/ */
2316 /************************************************************************************************/
2318 ul.sequence-links li {
2325 ul.sequence-links li.back a:link,
2326 ul.sequence-links li.back a:visited {
2332 ul.sequence-links li.forward a:link,
2333 ul.sequence-links li.forward a:visited {
2335 padding-right:0.75em;
2339 ul.sequence-links li a:hover, ul.sequence-links li a:focus, ul.sequence-links li a:active,
2340 ul.sequence-links li.back a:hover, ul.sequence-links li.back a:focus, ul.sequence-links li.back a:active,
2341 ul.sequence-links li.forward a:hover, ul.sequence-links li.forward a:focus, ul.sequence-links li.forward a:active {
2343 background:transparent;
2347 ul.sequence-links li:before,
2348 ul.sequence-links li:after,
2349 ul.sequence-links li a:before,
2350 ul.sequence-links li a:after {
2357 ul.sequence-links li a:before,
2358 ul.sequence-links li a:after {
2362 /*arrow that points to the left, beside the "Previous" text */
2363 .arrow.back a:after {/*arrow pointing to the left*/
2364 background: none repeat scroll 0% 0% transparent;
2365 border-color: transparent #FFFFFF;
2366 border-style: solid;
2367 border-width: 5px 0pt 5px 6px;
2369 margin-top: -0.438em;
2372 /*left and right triangle icons change color*/
2373 .arrow a:hover:after, .arrow a:focus:after, .arrow a:active:after,
2374 .arrow.forward a:hover:after, .arrow.forward a:focus:after, .arrow.forward a:active:after{
2375 border-color: transparent #4c96f4;
2378 .arrow.back a:after {
2379 border-width: 6px 6px 6px 0pt;
2386 /*arrow that points to the right, beside the "Next" text */
2387 .arrow.forward a:after {
2388 background: none repeat scroll 0% 0% transparent;
2389 border-color: transparent #FFFFFF;
2390 border-style: solid;
2391 margin-top: -0.425em;
2394 .arrow.forward a:after {
2396 background: none repeat scroll 0% 0% transparent;
2397 border-color: transparent transparent transparent white;
2399 border-style: solid;
2405 /* style for "last modified" information of course content*/
2411 ul.my-courses-list-ul > li:hover{
2412 background-color: #4c96f4;
2414 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2415 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2416 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2417 -moz-linear-gradient(#4a94f4, #236de5);
2419 ul.my-courses-list-ul > li:hover a{
2422 #topnavlistcontainer {
2426 /* to be created as a separate desktop theme file. The classes below should be removed when
2427 Mark McLaren's port of mobile fss to firefox is committed to infusion:
2428 https://github.com/fluid-project/infusion/blob/25ad6755ef78347b414d60bd4037a0f197f9d09d/infusion-branch/src/webapp/framework/fss/css/fss-mobile-theme-firefox.css */
2429 .fl-tabs li:first-child {
2430 border-bottom-left-radius: 5px;
2431 border-top-left-radius: 5px;
2434 .fl-theme-iphone .fl-tabs li {
2435 -moz-border-image: url("images/navbar_normal_button_insetShadow.png") 5 5 5 5 stretch;
2436 background-color: #354D68;
2438 [class*="fl-container"] [class*="fl-list"] > li:first-child, [class*="fl-container"] [class*="fl-list"] > li:first-child a {
2439 border-top-left-radius: 8px;
2440 border-top-right-radius: 8px;
2442 [class*="fl-container"] [class*="fl-list"] > li:last-child, [class*="fl-container"] [class*="fl-list"] > li:last-child a {
2443 border-bottom-left-radius: 8px;
2444 border-bottom-right-radius: 8px;
2447 .fl-theme-iphone .fl-tabs .fl-tabs-active {
2448 background-image: -moz-linear-gradient(
2450 rgba(149, 184, 239,1),
2452 rgba(149, 184, 239,1) 50%,
2453 rgba(75,148,244,1) 50%
2457 /* A simulation for a:active on the device, requires JS */
2458 /* since .fl-list is for mixed material lists, dont include them in these effects */
2459 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a:active,
2460 .fl-theme-iphone [class*=fl-list]:not(.fl-list):not(.fl-grid) a.fl-link-hilight {
2461 background: url(../images/themes/iphone/listmenu_arrow.png) no-repeat right -25px,
2462 -moz-linear-gradient(#4a94f4, #236de5);