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-color: #4b6b90; /*FF*/
31 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
36 .fl-theme-iphone .fl-navbar{
44 background-image: -webkit-gradient(linear, left top, left bottom,
46 color-stop(0.5, #6d8cb3),
47 color-stop(0.50, #4b6b90),
48 color-stop(0.5, #6d8cb3),
55 border-top: 1px solid black;
56 border-bottom: .5px solid black;
57 background-color: #4b6b90;
59 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
63 #navigation-contentwrapper{
65 height: 2.5em; /*requires a height, do not remove */
78 background-image: url(images/idi_background.png);
83 #header-section-title {
92 #site-name, h1#section-title{
99 /************************************************************************************************/
100 /* "Navigation" button, also this CSS creates a button that looks exactly like a Mobile FSS tab.*/
101 /************************************************************************************************/
104 .navigation-bar-button-content{
106 -webkit-border-radius: 5px;
107 -moz-border-radius: 5px;
109 font-size: 18px;/*keep this in px*/
110 background-image: -webkit-gradient(linear, left top, left bottom,
112 color-stop(0.5, #374e6b),
113 color-stop(0.50, #354d68),
116 -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
117 -moz-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
118 -webkit-border-left-image: none;
119 -moz-border-left-image: none;
120 -webkit-background-origin: border;
121 -moz-background-origin: border;
122 -webkit-background-clip: border;
123 -moz-background-clip: border;
126 .fl-theme-iphone .topnavlistcontainer .topnavlist-link {/*makes the navigation button link white*/
128 text-decoration: none;
132 .fl-theme-iphone .topnavlistcontainer .topnavlist-link-highlight{/*makes the navigation button link highlight*/
134 text-decoration: none;
138 .fl-theme-iphone .fl-tabs li{
139 background-image: -webkit-gradient(linear, left top, left bottom,
141 color-stop(0.5, #374e6b),
142 color-stop(0.50, #354d68),
146 /************************************************************************************************/
147 /*fl-tabs for the "home" and "guide" and sequence links*/
148 /************************************************************************************************/
152 padding-right: .313em;
160 ul.home-guide li a:hover, ul.home-guide li a:focus, ul.home-guide li a:active,
161 ul.home-guide li.back a:hover, ul.home-guide li.back a:focus, ul.home-guide li.back a:active,
162 ul.home-guide li.forward a:hover, ul.home-guide li.forward a:focus, ul.home-guide li.forward a:active {
164 background:transparent;
166 /************************************************************************************************/
167 /* main body attributes */
168 /************************************************************************************************/
178 text-decoration: underline;
184 background-color: transparent;
189 background-color: transparent;
193 h1, h2, h3, h4, h5, h6 {
196 font: 100% Helvetica, Arial, sans-serif;
226 text-decoration: none;
235 /************************************************************************************************/
236 /* Highlighting outside of the header and footer */
237 /************************************************************************************************/
238 link highlighting -- add when the header and footer is done
239 .fl-theme-iphone a:not(.fl-tabs){
243 /************************************************************************************************/
244 /* Preferences tabs */
245 /************************************************************************************************/
246 .etabbed-list-container {
260 padding:0.5em 0.3em 0;
267 padding:0.7em 0.3em 0;
276 /************************************************************************************************/
277 /* link attributes */
278 /************************************************************************************************/
280 /* link attributes */
284 text-decoration: underline;
286 a:hover, a:visited, a:focus {
288 text-decoration: underline;
290 .fl-list-menu a, .fl-list-menu a:visited{ /*may need to be removed when FLUID-4313 is fixed*/
294 /* main submit button */
296 background-color: #808080;
299 -webkit-border-radius:3px;
300 -moz-border-radius:3px;
302 padding-top: 0.313em;
303 padding-bottom: 0.313em;
309 border:1px solid #A50707;
310 background-color: #FFDAB9;
312 /* small submit button at top */
314 font-family: Helvetica,sans-serif;
315 background-color: #E9F4F3;
319 background-color: #E9F4F3;
320 border: #ACCFCC solid 1px;
323 /* Editor box large */
325 font-family: Helvetica,sans-serif;
326 background-color: #E9F4F3;
331 padding-bottom: .4em;
332 border: 1px #ACCFCC solid;
335 /* edit content tabs */
337 background-color: #E6E6E6;
340 padding-left: .188em;
341 padding-right: .188em;
348 background-color: #E6E6E6;
349 border-top: 1px #B8AE9C solid;
350 border-left: 1px #B8AE9C solid;
351 border-right: 1px #B8AE9C solid;
352 text-decoration: none;
358 .buttontab selected {
359 font-family: Helvetica, Arial, Helvetica, sans-serif;
360 background-color: #6F7172;
363 padding-left: .188em;
364 padding-right: .188em;
369 font-family: Helvetica, Arial, Helvetica, sans-serif;
371 text-decoration: none;
373 background-color: white;
374 border-top: 1px #B8AE9C solid;
375 border-left: 1px #B8AE9C solid;
376 border-right: 1px #B8AE9C solid;
379 .tab a:link, .etab a:visited {
381 background-color: white;
385 td.dropdown-heading {
386 background-color: #DBFDD4;
388 border-left: 1px solid #ECFEEA;
389 border-right: 1px solid #ECFEEA;
390 border-top: 1px solid #ECFEEA;
393 /* the side menu content */
396 background-color: white;
398 border-left: 1px solid #ECFEEA;
399 border-right: 1px solid #ECFEEA;
400 border-bottom: 1px solid #ECFEEA;
403 td.dropdown a, td.dropdown a:visited {
405 text-decoration: none;
407 td.dropdown a:hover {
409 text-decoration: underline;
412 /* added for 1.4.2: */
414 padding-left: 1.25em;
419 margin-bottom: 0.313em;
422 margin-left: 0.313em;
426 background-color: #F7F3ED;
428 border-left: 1px solid #595241;
429 border-right: 1px solid #595241;
430 border-top: 1px solid #595241;
437 .input-form table.tabbed-table {
439 border:thin black solid;
441 table.tabbed-table th#left-empty-tab {
442 background-color: transparent;
444 border-bottom: 1px solid #B8AE9C;
446 table.tabbed-table th#right-empty-tab {
448 background-color: transparent;
449 border-bottom: 1px solid #B8AE9C;
451 padding-right: 0.313em;
453 table.tabbed-table th#right-empty-tab a {
454 text-decoration: underline;
456 table.tabbed-table th.tab-spacer {
457 background-color: transparent;
459 border-bottom: 1px solid #B8AE9C;
462 table.tabbed-table th.tab {
463 padding-top: 0.125em;
464 padding-bottom: 0.125em;
466 background-color: #E9F4F3;
467 border-bottom: 1px solid #B8AE9C;
468 border-left: 1px solid #B8AE9C;
469 border-top: 1px solid #B8AE9C;
470 border-right: 1px solid #B8AE9C;
472 table.tabbed-table th.tab:hover {
473 background-color: #ACCFCC;
476 table.tabbed-table th.tab a:focus {
479 table.tabbed-table th.selected {
480 padding-top: 0.125em;
481 padding-bottom: 0.125em;
483 background-color: #ACCFCC;
484 border-left: 1px solid #B8AE9C;
485 border-top: 1px solid #B8AE9C;
486 border-right: 1px solid #B8AE9C;
489 table.tabbed-table a, table.tabbed-table a:visited, table.tabbed-table a:hover {
492 text-decoration: none;
496 .preference-buttons-container{
497 background-color: red;
503 div.preference-buttons-container li{
520 font-family: monospace;
521 border: 2px solid rgb(0, 0, 0);
524 color: rgb(255, 255, 255);
525 background-color: rgb(0, 0, 0);
529 border-bottom-width: 0;
537 #display-settings-preview{
545 #defaultfontsize-wrapper{
549 /* end of preferences */
553 padding-left: 0.938em;
554 background-repeat: no-repeat;
555 background-position: 0.125em 0.313em;
559 padding-left: 1.25em;
560 background-image: url(images/back.gif);
561 background-repeat: no-repeat;
562 background-position: 0 0;
566 #breadcrumbs-container{
567 background-color: #4d4d4d;
577 margin-bottom: 0.313em;
582 border-left: 1px solid black;
583 border-right: 1px solid black;
584 border-bottom: 1px solid black;
585 padding-left: 0.313em;
586 padding-right: 0.313em;
587 padding-bottom: 0.313em;
588 background-color: #F7F3ED;
589 margin-left: 0.313em;
590 margin-right: 0.313em;
595 margin-left: 0.313em;
596 margin-right: 0.313em;
597 border-left: 1px solid black;
598 border-right: 1px solid black;
600 background-color: #F7F3ED;
603 border-bottom: 1px solid black;
612 padding-left: 0.625em;
625 /**********************************************************************/
627 /**********************************************************************/
630 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
642 ul.footer-links-tabs li a:hover, ul.footer-links-tabs li a:focus, ul.footer-links-tabs li a:active,
643 ul.footer-links-tabs li.back a:hover, ul.footer-links-tabs li.back a:focus, ul.footer-links-tabs li.back a:active,
644 ul.footer-links-tabs li.forward a:hover, ul.footer-links-tabs li.forward a:focus, ul.footer-links-tabs li.forward a:active {
646 background:transparent;
649 div#footer-links a:link, div#footer-links a:visited {
650 text-decoration:none;
654 background-color:#F6EAD6;
661 background-color: #F7F3ED;
662 padding-top: 0.063em;
663 padding-bottom: 0.063em;
664 padding-left: 0.938em;
665 padding-right: 0.5em;
666 border: 1px solid #cccccc;
668 text-decoration: none;
671 a#editor-link:hover {
672 background-color: #F7F3ED;
673 border: 1px solid #B8AE9C;
677 background-image: url(images/pen.gif);
678 background-repeat: no-repeat;
679 background-position: 0 0.125em;
682 background-image: url(images/pen2.gif);
683 background-repeat: no-repeat;
684 background-position: 0 0.125em;
688 /* for data tables */
690 border: #A9ADB0 1px solid;
691 border: #cccccc 1px solid;
692 -webkit-border-radius:5px;
693 -moz-border-radius: 5px;
707 background-color: transparent;
709 /* contains the headings */
717 background-image: url('../default/images/sort.gif');
718 background-repeat: no-repeat;
719 background-position: right;
723 table.data tbody th {
734 table.data td a:link, a:visited{
739 /*should table.data tbody tr:hover and table.data tbody tr.selected highlighting
740 be improved to sync with Mobile FSS highlighting */
741 table.data tbody tr:hover {
742 background-color: #efefef;
746 table.data tbody tr.selected {
747 background-color: #E9F4F3;
749 border: 5px solid #E9F4F3;
753 background-color: #F7F3ED;
756 table.data tfoot tr:first-child td {
758 background-image: url('images/arrow_ltr.gif');
759 background-repeat: no-repeat;
760 background-position: .25em 0.313em;
763 table.data.static tfoot td, table.data.static tfoot tr:first-child td {
765 background-image: none;
769 /* add borders to row in Required Information, Personal Information*/
774 #last-row, .row-buttons, #last-row1, .row-blurb{
777 #browse-courses-table{
783 table.data tfoot input {
784 background-color: #efefef;
787 table.data tfoot input:focus {
788 background-color: #FFDAB9;
792 /* used for static tables with no form elements: */
793 table.data.static tbody tr:hover {
794 background-color: transparent;
798 /* course browser: */
805 div.browse-selected {
806 background-image: url('images/side_arrow.gif');
807 background-repeat: no-repeat;
808 padding-left: 0.563em;
809 background-position: center left;
812 div.browse-unselected {
813 padding-left: 0.563em;
821 /* feedback /errors */
827 margin-bottom: 0.938em;
828 border: 1px solid #DD0000;
830 background-color: #F4DCDC;
832 background-color: #F4DCDC;
833 padding-left: 1.563em;
835 -webkit-border-radius:5px;
836 -moz-border-radius: 5px;
844 div#error ul, div#feedback ul, div#help ul {
855 div#feedback, div#info {
860 margin-bottom: 0.313em;
862 font-family: Helvetica, Arial, sans-serif;
863 -webkit-border-radius:5px;
864 -moz-border-radius: 5px;
866 border: 1px solid #17B506;
867 background-color: #E7EFD0;
872 div#feedback li, div#info li, div#error li{
881 margin-bottom: 0.938em;
882 border: 1px solid #ACCFCC;
884 background-color: #E9F4F3;
893 margin-bottom: 0.938em;
894 border: 1px solid #FF8400;
896 background-color: #FFF6ED;
909 font-family:Helevetica, Arial, sans-serif;
919 /* home page links */
928 div.home-link:hover {
930 background-color: #F7F3ED;
931 border: 1px solid #afafaf;
937 text-decoration: none;
948 background-color: white;
950 border-left: 1px solid #ECFEEA;
951 border-right: 1px solid #ECFEEA;
952 border-bottom: 1px solid #ECFEEA;
956 div.dropdown-heading {
957 background-color: #ACCFCC;
959 border-left: 1px solid #ECFEEA;
960 border-right: 1px solid #ECFEEA;
961 border-top: 1px solid #ECFEEA;
972 margin-top: -0.313em;
974 padding-right: 0.125em;
978 margin-left: 0.313em;
981 #content, #content-tablet{
984 background-color: white;
1007 padding-left: 0.125em;
1008 padding-right: 0.125em;
1015 text-decoration: none;
1016 padding-left: 0.25em;
1017 padding-right: 0.25em;
1021 div.paging li a:hover, div.paging li a.current, #show-all a:active, #show-all a:focus, #show-all a:hover,
1022 #show-pages a:active, #show-pages a:focus, #show-pages a:hover {
1023 border: 1px solid #4c96f4;
1025 background-color: #4c96f4;
1026 -webkit-border-radius: 3px;
1027 -moz-border-radius: 3px;
1030 #show-pages:active, #show-pages:focus, #show-pages:hover, #show-all:active, #show-all:focus, #show-all:hover{
1031 background-color: #4c96f4;
1036 background-image:url(images/tl_corner.gif);
1037 background-position: top left;
1038 background-repeat: no-repeat;
1043 /* Navigational Plone Tabs(tm), implemented by customizing the a tag - they are surprisingly elegant. The power of CSS runs strong in these :) */
1044 background-color: transparent;
1045 border-collapse: collapse;
1046 border-bottom: 1px solid #B8AE9C;
1047 padding: 0.5em 0em 0em 2em;
1048 white-space: nowrap;
1052 /* The normal, unselected tabs. They are all links */
1053 background-color: transparent;
1054 border-color: #B8AE9C;
1056 border-style: solid solid none solid;
1059 margin-right: 0.5em;
1060 padding: 0em 2em 0em;
1064 div.tabs a.selected {
1065 /* The selected tab. There's only one of this */
1066 background-color: white;
1067 border-bottom: #B8AE9C 1px solid;
1069 font-weight: normal;
1072 div.tabs a:hover, div.tabs a.active {
1073 background-color: #B8AE9C;
1074 border-bottom: 1px solid #B8AE9C;
1081 .headingbox a:link, .headingbox a:visited{
1082 text-decoration: none;
1087 background-color: #F5F5F5;
1093 background-color: #F5F5F5;
1094 text-decoration: none;
1098 background-color: #F5F5F5;
1100 border: 1px solid #B8AE9C;
1102 font-weight: normal;
1107 background-color: #6F7172;
1108 border: 1px solid #B8AE9C;
1109 border-style: solid solid none solid;
1111 padding: 0em 1em 0em 1em;
1118 text-decoration: none;
1123 text-decoration: none;
1127 text-decoration: underline;
1141 text-transform: none;
1142 border-left: 1pt solid #B8AE9C;
1146 div.box h1, div.box h2, div.box h3, div.box h4 {
1152 background-color: #F7F3ED;
1156 background-color: transparent;
1160 /* users/index.php */
1165 border: rgb(204, 204, 204) 1px solid;
1166 background-color: #F7F7F7;
1178 font-weight: normal;
1184 background-color:#FBF4E9;
1185 border: #B8AE9C 1px solid;
1189 table.data .odd img.headicon{
1192 -webkit-border-radius:5px;
1193 -moz-border-radius: 5px;
1198 -webkit-border-radius:10px;
1199 -moz-border-radius: 10px;
1200 border-radius: 10px;
1201 border-color: white;
1206 div.course div.shortcuts {
1209 vertical-align: middle;
1213 fieldset#shortcuts {
1215 background-color: #FEFDEF;
1216 border: 1pt solid #B8AE9C;
1217 margin: -5pt 5pt 5pt 5pt;
1218 padding-right: 10pt;
1219 padding-bottom: 5pt;
1224 margin-bottom: 10pt;
1225 -webkit-border-radius:5px;
1226 -moz-border-radius: 5px;
1233 border:thin #A9ADB0 solid;
1244 list-style-type: none;
1248 /*a#guide,*/ a#my-courses-link {
1249 background-color: #6D84A2;
1256 div#content-test, div.content-from-module {
1273 ul#home-links, ul#home-detail-links {
1278 #my_courses_container{
1286 border: solid 1px #A9ADB0;
1287 -webkit-border-radius:5px;
1288 -moz-border-radius: 5px;
1293 background-color: white;
1297 text-decoration: none;
1301 .my-courses-list-ul{
1314 padding-left: 0.875em;
1315 padding-bottom: 0.875em;
1319 .fl-theme-iphone [class*="fl-list"] > li .fl-link-summary{
1333 list-style-type: none;
1335 padding-bottom: .5em;
1339 .current_list li a:active, .current_list li a:focus, .current_list li a:hover{
1341 background-color: #4C96F4;
1344 .current_list_date_time{
1347 #show-all, #show-pages{
1348 -webkit-border-radius: 8px;
1349 -moz-border-radius: 8px;
1352 border: solid 1px #A9ADB0;
1353 background-color: white;
1360 #show-all a, #show-pages a{
1362 padding-left: 0.25em;
1363 padding-right: 0.25em;
1364 text-decoration: none;
1368 /* enrollment tabs */
1374 margin-bottom: .25em;
1375 margin-top: 0.938em;
1376 white-space: nowrap;
1386 padding: 0.188em 0.563em;
1387 border: 1px solid #F7F3ED;
1388 border-bottom: none;
1389 background-color: #F7F3ED;
1390 text-decoration: none;
1392 white-space: nowrap;
1395 #navlist li a:hover, #navlist li a:active {
1397 background-color: #fff;
1402 vertical-align: middle;
1409 dl#public-profile dt {
1412 border-right: 1px solid #F7F3ED;
1413 padding: 0.313em 0.313em 0.313em 0;
1415 margin-right: 0.313em;
1417 dl#public-profile dd {
1435 padding-bottom: .375em;
1438 border: 1px #cccccc solid;
1446 #forum-thread li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; float:left; width: 97%; list-style: none; }
1447 #forum-thread li.even { background-color: #F7F3ED; border-top: none; }
1448 #forum-thread li.odd { background-color: #fff; }
1449 div.forum-post-author { float:left; width:19.375em; padding:0.5em 0.625em; }
1450 div.forum-post-author a.title {font-size: 1.1em; line-height: 1.2em; font-weight: bold; text-decoration:none; }
1451 div.forum-post-author img.profile-picture { border: 2px solid #F7F3ED; text-align:right;}
1452 div.forum-post-content { margin-left: 19.375em; padding: 0.313em 0 1.125em 1.125em;}
1453 div.forum-post-content h3 { font-weight: 500; float:left;clear:right; }
1454 div.forum-post-ctrl { float: right; padding-right: 0.313em; color: #a1a1a1;}
1455 div.forum-post-ctrl a { text-decoration: none; }
1456 div.forum-post-ctrl span { color: black; background-color: #fefdc2; padding: 0.188em; }
1457 div.forum-post-content p.date { color: #a1a1a1; border-bottom: 1px solid #F7F3ED; }
1458 div.forum-post-content div.body p { margin-bottom:1em; }
1459 div.forum-paginator{border:thin #cccccc solid; padding:.3em; width:95%;margin:auto;background-color:#F7F3ED;}
1460 span.forum-paginator-active{font-weight:700;text-decoration:underline; height:2em;}
1464 /** inbox stuff - reuses some of the forum layout **/
1465 #inbox-msg li {border:1px solid #eee; border-bottom: 1px solid #F7F3ED; width: 95%; list-style: none; min-height: 11em;}
1467 /* tool list on admin home and manage screens */
1470 padding: 0.125em 0.125em 0.125em 0.938em;
1471 margin-bottom: 0.313em;
1473 border: solid 1px #A9ADB0;
1474 -webkit-border-radius:8px;
1475 -moz-border-radius: 8px;
1482 font-weight: normal;
1486 margin-top: -0.313em;
1494 margin-right: 0.313em;
1499 /* browse courses */
1501 padding-bottom: 0.625em;
1506 padding-bottom: 0.625em;
1507 background-color: #fffaf0;
1511 dl.browse-course dt {
1517 padding: 0.313em 0.625em 0.313em 0;
1518 vertical-align: middle;
1521 dl.browse-course dd {
1522 margin-bottom: 0.313em;
1524 padding: 0.313em 0 0.313em 0.625em;
1532 /* form fields grouping for WCAG 2.0 conformance*/
1533 fieldset.group_form{
1539 border: 1px #A9ADB0 solid;
1540 background-color: white;
1544 background-color:white;
1549 border: 1px #4C566C solid;
1550 -webkit-border-radius: 8px;
1551 -moz-border-radius: 8px;
1555 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
1556 Ensure styling matches that in fl-tabs.*/
1557 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
1558 background-image: -webkit-gradient(linear, left top, left bottom,
1560 color-stop(0.5, #374e6b),
1561 color-stop(0.50, #354d68),
1567 /*Added by Silvia */
1568 div.column_primary {
1573 min-width: 10.625em;
1576 div.column_equivalent{
1579 margin-left: 0.938em;
1580 margin-top: 0.313em;
1581 margin-right: 0.313em;
1582 margin-bottom: 0.313em;
1583 min-width: 10.625em;
1585 border: 1px solid #EEE;
1586 background-color: #FFF;
1590 border: 1px solid #aaa;
1595 background-color: #eee;
1604 div.alternative_box{
1605 border: 1px solid #ddd;
1609 background-color: #fff;
1612 div.alternative_box legend {
1616 div.resource_box legend {
1622 font-weight: bolder;
1623 background-color: white;
1626 /* format of "table of contents" on content page */
1631 #toc .h2, #toc .h3, #toc .h4, #toc .h5, #toc .h6{
1637 background-color: #FEFDEF;
1638 border: 1pt solid #B8AE9C;
1646 /* cleans up glossary question mark line spacing*/
1648 border: 1pt solid #B8AE9C;
1649 vertical-align:bottom;
1653 /* jQuery tooltip styles */
1657 border:3px solid #111;
1658 background-color:#eeeeee;
1661 #tooltip h3,#tooltip div{
1665 /* style for home page modules "detail view" */
1691 background-image:url(images/details_r.png);
1692 background-position: top right;
1693 background-repeat:no-repeat;
1699 background-image:url(images/details_l.png);
1700 background-position: top left;
1701 background-repeat:no-repeat;
1707 background-image:url(images/details_ir.png);
1708 background-position: top right;
1709 background-repeat:no-repeat;
1714 background-image:url(images/details_il.png);
1715 background-position: top left;
1716 background-repeat:no-repeat;
1727 .draggable_selected {
1728 background-color: lightgrey;
1735 border:1px solid #cccccc;
1738 list-style: disc url(../../images/folder.gif) outside;
1739 font-family: Helvetica,sans-serif;
1745 li.folders .disabled {
1750 list-style-image:none;
1751 list-style-position:outside;
1752 list-style-type:none;
1758 -webkit-border-radius: 8px;
1759 -moz-border-radius: 8px;
1768 ul#topnavlist-tablet li {
1772 ul#topnavlist-tablet>li:hover,
1773 ul#topnavlist-tablet>li:hover a,
1774 ul#topnavlist-tablet>li:active,
1775 ul#topnavlist-tablet>li:active a,
1776 ul#topnavlist-tablet>li:focus,
1777 ul#topnavlist-tablet>li:focus a {
1779 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1782 ul#topnavlist-tablet li a {
1783 text-decoration: none;
1786 .flc-screenNavigator-backButton .fl-link-hilight{
1791 border: #cccccc 1px solid;
1792 -webkit-border-radius:5px;
1793 -moz-border-radius: 5px;
1803 /* list attributes */
1812 ol#tools>li:hover, ol#tools>li:hover a {
1813 /*border: 1px solid #e0e0e0;*/
1814 background-color: #e6e6e6;
1818 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
1819 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
1823 [class*="fl-container"]:not(.fl-navbar){
1825 margin-left: .313em;
1826 margin-right: .313em;
1829 div#navigation-column{
1832 -webkit-border-radius: 8px;
1833 -moz-border-radius: 8px;
1839 padding-right: .2em;
1842 padding-bottom: .2em;
1846 padding-top: .313em;
1863 #content-contentwrapper{
1875 margin-left: 0.313em;
1876 margin-top:-0.625em;
1894 /* ATutor Social Styles */
1895 div .profile_container {
1896 background-color:#eee;
1897 border: 1px solid #8e8e8e;
1900 margin-bottom: 0.5em;
1903 div .profile_container .top_right {
1907 dl.public-profile dd{
1910 dl.public-profile dt {
1921 div .search_form .row{
1922 background-color: #DEDEC0;
1926 background-color: #eee;
1927 border: 1px solid #aaa;
1930 background-color: #cccccc;
1935 ul.social_side_menu {
1938 ul.social_side_menu li {
1939 padding-bottom: 0.2em;
1944 border-bottom:1px solid #C1C157;
1945 padding-bottom:0.5em;
1946 margin-bottom:0.5em;
1954 div.contentbox, input-form{
1956 background-color: #ffffff;
1958 border: #A9ADB0 solid 1px;
1959 -webkit-border-radius: 5px;
1960 -moz-border-radius: 5px;
1965 border:1px solid #a50707;
1966 margin-left:0.625em;
1973 ul.social_inline_menu{
1974 background-color: #eeeeee;
1975 border:thin #cccccc solid;
1980 .results-hide-show-link-container{
1981 border: #A9ADB0 solid 1px;
1982 -webkit-border-radius: 5px;
1983 -moz-border-radius: 5px;
1986 #results-hide-show-link{
1990 #hide-show-container{
1991 -webkit-border-radius:8px;
1992 -moz-border-radius: 8px;
1994 margin-top: 0.875em;
1995 margin-bottom: 0.875em;
1997 padding-right: .2em;
1998 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
2001 .hide-show-container h4{
2002 border: #A9ADB0 solid 1px;
2003 -webkit-border-radius:8px;
2004 -moz-border-radius: 8px;
2006 margin-top: 0.875em;
2007 margin-bottom: 0.875em;
2009 padding-right: .2em;
2010 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(black));
2011 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F8FAFB), to(#B6C0C6));
2015 #hide-show-container a:link,
2016 #hide-show-container a:focus,
2017 #hide-show-container a:hover{
2019 text-decoration: none;
2024 .hide-show-container a:link:not(.fl-list-menu):not(.fl-list-brief),
2025 .hide-show-container a:focus:not(.fl-list-menu):not(.fl-list-brief),
2026 .hide-show-container a:hover:not(.fl-list-menu):not(.fl-list-brief),
2027 .hide-show-container a:active:not(.fl-list-menu):not(.fl-list-brief),
2028 #hide-show-container a:active{
2031 text-decoration: none;
2036 .hide-show-container a>h4, .fl-theme-iphone a .results-hide-show-link{
2039 /* REBUILDING THE TOP NAVIGATION MENU */
2043 border-bottom: .5px solid black;
2046 /*Overrides above a:active, a:hover, a:focus so the "Navigation" button itself isn't highlighted when activated.
2047 Ensure styling matches that in fl-tabs.*/
2048 .topnavlistcontainer a:hover, .topnavlistcontainer a:active, .topnavlistcontainer a:focus{
2049 background-image: -webkit-gradient(linear, left top, left bottom,
2051 color-stop(0.5, #374e6b),
2052 color-stop(0.50, #354d68),
2059 /*this CSS creates a button that looks exactly like a Mobile FSS tab.*/
2060 .navigation-bar-button{
2062 -webkit-border-radius: 5px;
2063 -moz-border-radius: 5px;
2065 font-size: 18px;/*keep this in px*/
2067 padding-right: .3em;
2074 /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
2075 background-image: -webkit-gradient(linear, left top, left bottom,
2077 color-stop(0.5, #374e6b),
2078 color-stop(0.50, #354d68),
2081 -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2082 -moz-border-image:url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2083 -webkit-border-left-image: none;
2084 -moz-border-left-image: none;
2085 -webkit-background-origin: border;
2086 -moz-background-origin: border;
2087 -webkit-background-clip: border;
2088 -moz-background-clip: border;
2090 margin-bottom: -1em;
2094 /* hiding/showing course content */
2096 div#content-link-container{
2098 padding-top: .316em;
2103 .content_link_tablet {
2105 -webkit-border-radius: 5px;
2106 -moz-border-radius: 5px;
2108 font-size: 0.875em;/*keep this in px*/
2112 padding-right: .3em;
2114 padding-bottom: .1em;
2115 margin-right: .313em;
2118 /* default mobile fss color scheme for tabs not AA compliant. Here is a compliant bg image: */
2119 background-image: -webkit-gradient(linear, left top, left bottom,
2121 color-stop(0.5, #374e6b),
2122 color-stop(0.50, #354d68),
2125 -webkit-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2126 -moz-border-image: url(images/navbar_normal_button_insetShadow.png) 5 5 5 5 stretch;
2127 -webkit-border-left-image: none;
2128 -moz-border-left-image: none;
2129 -webkit-background-origin: border;
2130 -moz-background-origin: border;
2131 -webkit-background-clip: border;
2132 -moz-background-clip: border;
2133 margin-bottom: -0.25em;
2137 .flc-screenNavigator-navbar .content_link{
2139 text-decoration: none;
2142 .fl-theme-iphone .content_link_tablet_highlight{
2154 -webkit-border-radius: 8px;
2155 -moz-border-radius: 8px;
2157 border: 4px solid black;
2162 /* hiding/showing top navigation and results-display */
2170 div#results-display, .results-display{
2179 ul#topnavlist>li:hover,
2180 ul#topnavlist>li:hover a,
2181 ul#topnavlist>li:active,
2182 ul#topnavlist>li:active a,
2183 ul#topnavlist>li:focus,
2184 ul#topnavlist>li:focus a {
2186 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2187 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2190 ul#topnavlist li a {
2192 text-decoration: none;
2195 background-image:url("images/plus.png");
2196 background-position: 100% 100%;
2197 background-repeat: no-repeat;
2200 background-image:url("images/minus.png");
2201 background-position: 100% 100%;
2202 background-repeat: no-repeat;
2205 /* SUBNAVLIST HIGHLIGHTING and Gmail-STYLE "more" button */
2210 ul#subnavlist li a:active, ul#subnavlist li a:focus, ul#subnavlist li a:hover {
2212 border-bottom: #4C566C 2px solid;
2213 text-decoration: none;
2218 padding-bottom: 0.313em;
2226 border-bottom: #4C566C 2px solid;
2228 #subnavlist-more .more-item{
2229 font-size: 0.875em; list-style-type: bullet;
2233 background-image:url('images/hidemenu.gif');
2234 background-position: 100% 100%;
2235 background-repeat: no-repeat;
2239 .more-button-surround{
2246 ul#subnavlist li:not(#subnavlist-more){
2250 ul#subnavlist li a, ul#subnavlist li a:visited {
2254 text-decoration: none;
2257 /*creates a little up-facing arrow to help mimick an ipad-style popover.
2258 See http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
2259 .triangle-isosceles {
2263 .triangle-isosceles:after {
2264 border-style: solid;
2270 .triangle-isosceles.top:after {
2271 border-color: black transparent;
2272 border-width: 0pt 15px 15px;
2280 .triangle-isosceles.top.right:after {
2281 border-color: black transparent;
2282 border-width: 0pt 15px 15px;
2290 /*'Previous' and 'Next' buttons */
2292 margin-left:3.125em;
2293 background-image: -webkit-gradient(linear, left top, left bottom,
2295 color-stop(0.5, #374e6b),
2296 color-stop(0.50, #354d68),
2301 .triangle-isosceles.previous:after {
2302 top:1em; /* controls vertical position */
2303 left:-3.125em; /* value = - border-left-width - border-right-width */
2305 border-width:15px 50px 10px 0;
2306 border-color:transparent #f3961c;
2307 border-color: transparent #F3961C;
2308 border-width: 10px 10px 10px 0pt;
2314 /* sequence links */
2322 #course-level-navigation, #sequence-links-course-navigation{
2326 /************************************************************************************************/
2327 /*Adds arrows to Fluid Tabs. Here is a good guide for creating triangles with CSS:
2328 http://jonrohan.me/guide/css/creating-triangles-in-css/ */
2329 /************************************************************************************************/
2331 ul.sequence-links li {
2338 ul.sequence-links li.back a:link,
2339 ul.sequence-links li.back a:visited {
2345 ul.sequence-links li.forward a:link,
2346 ul.sequence-links li.forward a:visited {
2348 padding-right:0.75em;
2352 ul.sequence-links li a:hover, ul.sequence-links li a:focus, ul.sequence-links li a:active,
2353 ul.sequence-links li.back a:hover, ul.sequence-links li.back a:focus, ul.sequence-links li.back a:active,
2354 ul.sequence-links li.forward a:hover, ul.sequence-links li.forward a:focus, ul.sequence-links li.forward a:active {
2356 background:transparent;
2360 ul.sequence-links li:before,
2361 ul.sequence-links li:after,
2362 ul.sequence-links li a:before,
2363 ul.sequence-links li a:after {
2370 ul.sequence-links li a:before,
2371 ul.sequence-links li a:after {
2375 /*arrow that points to the left, beside the "Previous" text */
2376 .arrow.back a:after {/*arrow pointing to the left*/
2377 background: none repeat scroll 0% 0% transparent;
2378 border-color: transparent #FFFFFF;
2379 border-style: solid;
2380 border-width: 5px 0pt 5px 6px;
2382 margin-top: -0.438em;
2385 /*left and right triangle icons change color*/
2386 .arrow a:hover:after, .arrow a:focus:after, .arrow a:active:after,
2387 .arrow.forward a:hover:after, .arrow.forward a:focus:after, .arrow.forward a:active:after{
2388 border-color: transparent #4c96f4;
2391 .arrow.back a:after {
2392 border-width: 6px 6px 6px 0pt;
2399 /*arrow that points to the right, beside the "Next" text */
2400 .arrow.forward a:after {
2401 background: none repeat scroll 0% 0% transparent;
2402 border-color: transparent #FFFFFF;
2403 border-style: solid;
2404 margin-top: -0.425em;
2407 .arrow.forward a:after {
2409 background: none repeat scroll 0% 0% transparent;
2410 border-color: transparent transparent transparent white;
2412 border-style: solid;
2418 /* style for "last modified" information of course content*/
2424 ul.my-courses-list-ul > li:hover{
2425 background-color: #4c96f4;
2427 background: url(../images/themes/iphone/listmenu_loader.gif) no-repeat 97% center,
2428 -webkit-gradient(linear, left top, left bottom, from(#4a94f4), to(#236de5));
2430 ul.my-courses-list-ul > li:hover a{
2433 #topnavlistcontainer {