MDL-31830 course: fixed up minor points as noted by Damyon's integration review
[moodle.git] / theme / base / style / course.css
1 /**
2  * CSS for displaying courses and everything in them
3  */
4 .section_add_menus {text-align:right;}
5 .dir-rtl .section_add_menus {text-align:left;}
6 .section_add_menus .horizontal div,
7 .section_add_menus .horizontal form {display:inline;}
8 .section_add_menus optgroup {font-weight:normal;font-style: italic;}
9 .section_add_menus .urlselect { margin-left: .4em;}
10 .dir-rtl .section_add_menus .urlselect { margin-right: .4em; margin-left: 0;}
11 .section_add_menus .urlselect select { margin-left: .2em;}
12 .dir-rtl .section_add_menus .urlselect select { margin-right: .2em; margin-left: 0;}
13 .section_add_menus .urlselect img.iconhelp { padding: 0; margin: 0; vertical-align: text-bottom;}
15 .site-topic ul.section,
16 .course-content ul.section { margin: 1em;}
17 .sitetopic .section .activity img.activityicon,
18 .course-content .section .activity img.activityicon {vertical-align:text-bottom;margin-right: 6px;}
19 .dir-rtl .sitetopic .section .activity img.activityicon,
20 .dir-rtl .course-content .section .activity img.activityicon {margin-left: 6px; margin-right: 0;}
21 .sitetopic .section .activity .activityinstance,
22 .course-content .section .activity .activityinstance,
23 .sitetopic .section .activity .activityinstance div,
24 .course-content .section .activity .activityinstance div { display: inline;}
25 .sitetopic .section .activity .activityinstance,
26 .course-content .section .activity .activityinstance { padding-right: 3em; }
27 .dir-rtl .sitetopic .section .activity .activityinstance,
28 .dir-rtl .course-content .section .activity .activityinstance { padding-right: 0; padding-left: 3em;}
29 .sitetopic .section .activity .commands,
30 .course-content .section .activity .commands { white-space: nowrap; display: inline-block; }
31 .section .activity .moodle-actionmenu .menubar > li > * {display:inline-block;min-height:16px;padding: 0.2em;}
32 .section .activity .moodle-actionmenu .menubar > li > img {margin: 0.2em;vertical-align: text-bottom;padding:0 3px 0 0;}
33 .section .activity .moodle-actionmenu .iconsmall {vertical-align: baseline;width:16px;height:16px;}
34 .single-section h3.sectionname {text-align:center;clear:both;}
35 .sitetopic .section li.activity,
36 .course-content .section li.activity {padding: .2em;}
37 .section .activity .activityinstance .groupinglabel { padding-left: .45em; }
38 .sitetopic .section .activity .availabilityinfo,
39 .sitetopic .section .activity .contentafterlink,
40 .course-content .section .activity .availabilityinfo,
41 .course-content .section .activity .contentafterlink { margin-top: 0.5em; margin-left: 30px;}
42 .dir-rtl .sitetopic .section .activity .availabilityinfo,
43 .dir-rtl .sitetopic .section .activity .contentafterlink,
44 .dir-rtl .course-content .section .activity .availabilityinfo,
45 .dir-rtl .course-content .section .activity .contentafterlink { margin-left: 0; margin-right: 30px;}
46 .section .activity .contentafterlink p { margin:.5em 0; }
47 .sitetopic .section .activity:hover,
48 .course-content .section .activity:hover { background-color: #EEE; }
49 .course-content .section-summary { border: 1px solid #DDD; margin-top: 5px; list-style: none; }
50 .course-content .section-summary .section-title  { margin: 2px 5px 10px 5px; }
51 .course-content .section-summary .summarytext { margin: 2px 5px 2px 5px; }
52 .course-content .section-summary .section-summary-activities .activity-count {margin-right: 10px;color: #AAA; font-size: 12px; margin-right: 15px;}
53 .course-content .section-summary .summary { margin-top: 5px; }
54 .course-content .single-section { margin-top: 1em; }
55 .course-content .single-section .section-navigation { display: block; padding: 0.5em; margin-bottom: -0.5em; }
56 .course-content .single-section .section-navigation .title { font-weight: bold; font-size: 108%; }
57 .course-content .single-section .section-navigation .mdl-left { font-weight: normal; float: left; margin-right: 1em; }
58 .dir-rtl .course-content .single-section .section-navigation .mdl-left {float:right;}
59 .course-content .single-section .section-navigation .mdl-left .larrow { margin-right: 0.1em; }
60 .course-content .single-section .section-navigation .mdl-right { font-weight: normal; float: right; margin-left: 1em; }
61 .dir-rtl .course-content .single-section .section-navigation .mdl-right {float: left;}
62 .course-content .single-section .section-navigation .mdl-right .rarrow { margin-left: 0.1em; }
63 .course-content .single-section .section-navigation .mdl-bottom { margin-top: 0; }
65 #page-site-index .subscribelink {text-align:right;}
66 #site-news-forum h2,
67 #frontpage-course-list h2,
68 #frontpage-category-names h2,
69 #frontpage-category-combo h2 {margin-bottom: 9px;}
70 #page-site-index .clearfloat {float: none;clear: both; height:0px;}
72 .path-course-view a.reduce-sections {padding-left: 0.2em;}
73 .path-course-view .subscribelink {text-align:right;}
74 .path-course-view .unread {margin-left: 3em;}
75 .path-course-view .block.drag .header {cursor: move;}
76 .path-course-view .completionprogress { text-align: right; }
77 .dir-rtl.path-course-view .completionprogress { text-align: left; }
78 .path-course-view .single-section .completionprogress { margin-right: 5px; }
79 .path-course-view .section .summary {line-height:normal;}
81 .path-site li.activity > div,
82 .path-course-view li.activity > div {position:relative;}
83 .path-course-view li.activity span.autocompletion,
84 .path-course-view li.activity form.togglecompletion {position: absolute; top: 0; right: .2em;}
85 .path-course-view li.activity span.autocompletion img,
86 .path-course-view li.activity form.togglecompletion input {position:absolute; top: .25em; right: 0px;}
87 .path-course-view li.activity form.togglecompletion .ajaxworking {position:absolute; right: 22px; top: 5px; width: 16px; height: 16px; background: url([[pix:i/ajaxloader]]) no-repeat;}
88 .path-course-view li.activity form.togglecompletion div {display:inline;}
89 .dir-rtl.path-course-view li.activity form.togglecompletion,
90 .dir-rtl.path-course-view li.activity span.autocompletion {left:1.7em;right:auto;padding:0px;}
91 .dir-rtl.path-course-view .completionprogress {float: none;}
92 .dir-rtl.path-course-view li.activity form.togglecompletion .ajaxworking {right: -22px;}
94 li.section.hidden span.commands a.editing_hide,
95 li.section.hidden span.commands a.editing_show {cursor:default;}
97 .section img.movetarget {height:16px;width:80px;}
99 .course ul.section {margin:5px;padding:0;}
101 .weeks-format, /* Window-width: 800 pixels.IE doesn't support, see inline IE conditional comment. */
102 .topics-format {margin-top: 8px;min-width: 763px;}
104 #page-course-pending .singlebutton,
105 #page-course-index .singlebutton,
106 #page-course-index-category .singlebutton,
107 #page-course-editsection .singlebutton {text-align:center;}
109 #coursesearch {margin-top: 1em;text-align:center;}
111 #page-course-pending .pendingcourserequests {margin-bottom: 1em;}
112 #page-course-pending .pendingcourserequests .singlebutton {display: inline;}
113 #page-course-pending .pendingcourserequests .cell {padding: 0 5px;}
114 #page-course-pending .pendingcourserequests .cell.c6 {white-space: nowrap;}
116 /* Courses and categories lists */
118 .coursebox {width: 100%;margin-bottom:15px;}
119 .coursebox.collapsed {margin-bottom:0}
120 .coursebox.collapsed > .content {display:none;}
121 .coursebox > .info > .coursename a {display:block;background-image:url([[pix:moodle|i/course]]);background-repeat: no-repeat;padding-left:21px;background-position: left top;}
122 .coursebox.remotehost .coursename a {background-image:url([[pix:moodle|i/mnethost]]);}
123 .coursebox > .info > .coursename,
124 .coursebox .content .teachers,
125 .coursebox .content .courseimage,
126 .coursebox .content .coursefile {float:left;width:40%;clear:left;}
127 .coursebox .content .teachers li {list-style-type:none;padding:0;margin:0;}
128 .coursebox .enrolmenticons {padding:3px 0;float:right;}
129 .coursebox .moreinfo {padding:3px 0;float:right;}
130 .coursebox .enrolmenticons img,
131 .coursebox .moreinfo img {margin:0 .2em;}
132 .coursebox .content {clear:both;overflow: hidden;}
133 .coursebox .content .summary,
134 .coursebox .content .coursecat {float:right;width: 55%;}
135 .coursebox .content .coursecat {text-align:right;clear:right;}
136 .coursebox.remotecoursebox .remotecourseinfo {float:left;width: 40%;}
137 .coursebox .content .courseimage img {max-width:100px;max-height:100px;}
139 .coursebox >.info >.coursename {margin: 5px;padding:0;}
140 .coursebox .content .teachers,
141 .coursebox .content .coursecat,
142 .coursebox .content .summary,
143 .coursebox .content .courseimage,
144 .coursebox .content .coursefile,
145 .coursebox.remotecoursebox .remotecourseinfo {margin:3px 5px;padding:0;}
147 .dir-rtl .coursebox > .info > .coursename a {padding-left:0;padding-right:21px;background-position: top right;}
148 .dir-rtl .coursebox > .info > .coursename,
149 .dir-rtl .coursebox .teachers,
150 .dir-rtl .coursebox .content .courseimage,
151 .dir-rtl .coursebox .content .coursefile {float:right;clear:right;}
152 .dir-rtl .coursebox .enrolmenticons,
153 .dir-rtl .coursebox .moreinfo {float:left;}
154 .dir-rtl .coursebox .summary,
155 .dir-rtl .coursebox .coursecat {float:left;}
156 .dir-rtl .coursebox .coursecat {text-align:left;clear:left;}
158 .course_category_tree .category .numberofcourse {font-size: 0.85em;}
159 .dir-rtl .course_category_tree .category .numberofcourse {padding-right: 20px;}
161 .course_category_tree .controls {visibility: hidden;}
162 .course_category_tree .controls div {display:inline;cursor:pointer;}
163 .jsenabled .course_category_tree .controls {visibility: visible;}
165 .course_category_tree .category >.info > .categoryname {background-image:url([[pix:moodle|t/collapsed_empty]]);background-repeat: no-repeat;background-position:center left;margin:0.5em 5px;}
166 .dir-rtl .course_category_tree .category >.info > .categoryname {background-image:url([[pix:moodle|t/collapsed_empty_rtl]]);background-position:center right;margin:0.5em 5px;}
167 .course_category_tree .category.with_children >.info > .categoryname {background-image:url([[pix:moodle|t/expanded]]);}
168 .course_category_tree .category.with_children.collapsed >.info > .categoryname {background-image:url([[pix:moodle|t/collapsed]]);}
169 .dir-rtl .course_category_tree .category.with_children.collapsed >.info .categoryname {background-image:url([[pix:moodle|t/collapsed_rtl]]);}
170 .course_category_tree .category.collapsed >.content {display:none;}
171 .course_category_tree .category > .info > .categoryname {padding:2px 18px;margin:3px;}
172 .course_category_tree .category > .content {padding-left:16px;overflow: hidden;}
174 .dir-rtl .course_category_tree .category > .content {padding-left:0;padding-right:16px;}
176 .course_category_tree .subcategories > .paging,
177 .courses > .paging {margin:0;padding:5px;text-align:center;}
179 .courses > .paging.paging-morelink,
180 .course_category_tree .subcategories > .paging.paging-morelink {text-align:left;}
182 .dir-rtl .courses > .paging.paging-morelink,
183 .dir-rtl .course_category_tree .subcategories > .paging.paging-morelink {text-align:right;}
185 #page-course-info .generalbox.info,
186 #page-enrol-index .generalbox.info {border:none;}
188 .path-course .clearfloat {float:none; clear:both;height:0px;}
190 /* Quick edit of module name */
192 .sitetopic .section .activity form.activityinstance,
193 .course-content .section .activity form.activityinstance { display: inline; vertical-align: bottom; }
194 span.editinstructions {
195     position: absolute;
196     top: 0px;
197     left: 0px;
198     margin-top: -22px;
199     margin-left: 30px;
200     line-height: 16px;
201     font-size: .85em;
202     padding: .1em .4em;
203     background-color: #ffc;
204     color: #000;
205     text-decoration: none;
206     z-index:9999;
207     box-shadow:2px 2px 5px 1px #ccc;
208     border:1px solid #ddd;
210 .dir-rtl span.editinstructions { left: auto; right: 32px;}
211 input.titleeditor { width: 330px; vertical-align: text-bottom; }
213 /* Course drag and drop upload styles */
214 #dndupload-status {width:40%;margin:0 30%;padding:6px;border:1px solid #ddd;text-align:center;background:#ffc;position:absolute;z-index:9999;box-shadow:2px 2px 5px 1px #ccc;border-radius:0px 0px 8px 8px;z-index: 0;}
215 .dndupload-preview {color:#909090;border:1px dashed #909090;list-style:none; margin-top: .2em; padding: .3em; line-height: 16px;}
216 .dndupload-preview img.icon { vertical-align: text-bottom; padding: 0;}
217 .dndupload-progress-outer {width:70px;border:1px solid black;border-radius:4px;height:10px;display:inline-block;margin:0;padding:0;overflow:hidden;position:relative;}
218 .dndupload-progress-inner {width:0%;height:100%;background-color:green;display:inline-block;margin:0;padding:0;float:left;box-shadow: 0 0 4px #229b15;border-radius:2px;background-repeat:repeat-x;background-position:top;background-image:url([[pix:theme_base|progress]])}
219 .dndupload-hidden {display:none;}
221 /** Course category management **/
222 #course-category-listings {background-color:#fff;border:1px solid #e1e1e8;margin-bottom:200px;}
224 /** Two column layout */
225 #course-category-listings.columns-2 > #category-listing > div {border-right:1px solid #e1e1e8;}
226 #course-category-listings.columns-2 > #course-listing > div {border-left:1px solid #e1e1e8;margin-left:-1px;}
227 #course-category-listings.columns-2.viewmode-courses.course-selected > #course-listing > div {border-right:1px solid #e1e1e8;margin-right:-1px;}
228 #course-category-listings.columns-2 > #course-detail > div {border-left:1px solid #e1e1e8;}
230 /** Three column layout */
231 #course-category-listings.columns-3 #category-listing > div {border-right:1px solid #DDD;}
232 #course-category-listings.columns-3 #course-listing > div {border-right:1px solid #e1e1e8;border-left:1px solid #e1e1e8;margin-right:-1px;margin-left:-1px;}
233 #course-category-listings.columns-3 #course-detail > div {border-left:1px solid #DDD;}
235 #course-category-listings > div {}
236 #course-category-listings > div > div {min-height:300px;}
237 #course-category-listings h3 {margin:0;padding:0.6em 1em 0.5em;text-align:left;background-color:#f7f7f9;border-bottom:1px solid #e1e1e8;}
238 #course-category-listings h4 {margin:1em 0 0;padding:0.6em 1em 0.5em;text-align:left;}
239 #course-category-listings .listing-actions {text-align:center;}
240 #course-category-listings .listing-actions > * {margin:0.4em 0.3em 0.3em;display:inline-block;line-height:2.2em;}
241 #course-category-listings .listing-actions > .moodle-actionmenu {display:inline-block;}
242 #course-category-listings .listing-actions > .moodle-actionmenu .menu a {padding-left:1em;}
243 #course-category-listings .listing-actions .iconsmall {margin-left:0.5em;}
244 #course-category-listings ul.ml {list-style: none;margin:1em 0;}
245 #course-category-listings ul.ml ul.ml {margin:0;}
246 #course-category-listings li {line-height:2.2em;}
247 #course-category-listings li > div {border-bottom:1px solid #fff;border-top:1px solid #fff;}
248 #course-category-listings li > div:hover {background-color:#fafafa;}
249 #course-category-listings li.highlight > div,
250 #course-category-listings li.highlight > div:hover,
251 #course-category-listings li[data-selected='1'].highlight > div {background-color:#ddffaa;}
252 #course-category-listings li+li > div,
253 #course-category-listings li:first-child > div {border-top-color:#f7f7f9;}
254 #course-category-listings li .tree-icon {vertical-align:text-top;margin-right:0.5em;width:12px;height:12px;}
255 #course-category-listings li[data-selected='1'] > div {background-color:#f7f7f9;border-top-color: #e1e1e8;border-bottom-color:#f7f7f9;}
256 #course-category-listings li[data-selected='1'] li:first-of-type > div,
257 #course-category-listings li[data-selected='1'][data-expandable='0']+li > div {border-top-color:#e1e1e8;}
258 #course-category-listings li[data-selected='1']:last-of-type > div {border-bottom-color:#e1e1e8;}
259 #course-category-listings > div > div > ul.ml > li:first-child > div {border-top:0;}
261 .jsenabled #course-category-listings .category-item-actions .menu-action-text {padding-left:0.3em;}
263 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) li {line-height:normal;}
264 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a,
265 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menu .menu-action-text {display:inline-block;}
266 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a {color:inherit;}
267 #course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a > img {display:none;}
269 #course-category-listings li[data-selected='1'] > div {background-image:url([[pix:t/collapsed]]);background-repeat: no-repeat; background-position: right center;}
271 #course-category-listings .item-actions {margin-right:1em;display:inline-block;display:initial;}
272 #course-category-listings .item-actions img {margin: 0 0.3em;}
273 #course-category-listings .item-actions .menu .menu-action {margin-right:1em;}
275 #course-category-listings li .tree-icon {margin-left:1em;}
276 #course-category-listings li li .tree-icon {margin-left:2em;}
277 #course-category-listings li li li .tree-icon {margin-left:3em;}
278 #course-category-listings li li li li .tree-icon {margin-left:4em;}
279 #course-category-listings li li li li li .tree-icon {margin-left:5em;}
281 #course-listing .listitem .drag-handle {margin-right:0.5em;}
282 #course-listing .listitem .idnumber {color:#a1a1a8;margin-right:2em;}
283 #course-listing .listitem .categoryname {display:inline-block;margin-left:1em;color:#a1a1a8;}
284 #course-listing .listitem .coursename {display:inline-block;}
286 #category-listing .course-count {color:#a1a1a8;margin-right:2em;min-width:35px;display:inline-block;}
287 #category-listing .listitem.collapsed > ul.ml {display: none;}
288 #category-listing .course-count .smallicon {width:0.8em;height:0.8em;vertical-align:middle;margin:0 0.3em;}
290 #course-category-listings .listitem > div > .float-left {float:left;}
291 #course-category-listings .listitem > div > .float-right {float:right;text-align:right;}
292 #course-category-listings .listitem[data-visible="0"],
293 #course-category-listings .listitem[data-visible="0"] a.categoryname,
294 #course-category-listings .listitem[data-visible="0"] > div > a {color:#AAA;}
295 #course-category-listings .listitem > div .item-actions .action-hide,
296 #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-show {display:inline;}
297 #course-category-listings .listitem > div .item-actions .action-show,
298 #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-hide,
299 #course-category-listings .listitem[data-visible="0"] > ul .item-actions.category-item-actions .action-hide,
300 #course-category-listings .listitem[data-visible="0"] > ul .item-actions.category-item-actions .action-show,
302 #category-listing .listitem:first-child > div .item-actions .action-moveup,
303 #category-listing .listitem:last-child > div .item-actions .action-movedown,
304 #course-listing > .firstpage .listitem:first-child > div .item-actions .action-moveup,
305 #course-listing > .lastpage .listitem:last-child > div .item-actions .action-movedown {display: none;}
307 #course-category-listings .listitem > div a.without-actions {color: #333;}
309 #course-listing li > div {padding-left:1em;}
311 #course-category-listings .detail-pair {border-bottom:1px solid #e1e1e8;margin:0 1em;}
312 #course-category-listings .detail-pair > * {display:inline-block;line-height:2.2em;}
313 #course-category-listings .detail-pair .pair-key {color:#075698;font-weight:bold;text-align:right;}
314 #course-category-listings .detail-pair .pair-key span {margin-right: 1em;display:block;}
315 #course-category-listings .detail-pair:last-child {border-bottom-width:0;}
317 #course-category-listings .bulk-actions .detail-pair > * {display:block;width:100%;text-align:left;}
318 #course-category-listings .bulk-actions .detail-pair .pair-value {margin-left:2.2em;}
320 #course-category-listings .select-a-category .notifymessage,
321 #course-category-listings .select-a-category .alert {margin: 1em;}
323 /** Management header styling **/
324 .coursecat-management-header {vertical-align:middle;}
325 .coursecat-management-header  h2 {display:inline-block;text-align:left;}
326 .coursecat-management-header  > div {display:inline-block;float:right;margin-left:1em;}
327 .coursecat-management-header .view-mode-selector img {margin-left:0.5em;vertical-align: baseline;}
328 .coursecat-management-header  select {max-width: 300px;white-space: nowrap;}
330 .listing-pagination,
331 .listing-pagination-totals {text-align:center;}
332 .listing-pagination .yui3-button {background-color:#FFF;border:0;margin:0.4em 0.2em 0.45em;font-size:10.4px;}
333 .listing-pagination .yui3-button.active-page {background-color:#E5EFFD;}
334 .listing-pagination-totals.dimmed {color:#999;margin:0.4em 1em 0.45em;}
336 #category-listing .bulk-action-checkbox {margin-left:0.3em;margin-right:0.3em;vertical-align:middle;margin-bottom:0.5em;}
337 #course-listing .bulk-action-checkbox {margin-right:0.6em;vertical-align:middle;margin-bottom:0.5em;}
339 /**
340  * Display sizes:
341  * Large displays                   1200        +
342  * Default displays                  980     1199
343  * Tablets                           768      979
344  * Small tablets and large phones    481      767
345  * Phones                              0      480
346  */
348 @media (min-width: 1200px) and (max-width: 1600px) {
349     #course-category-listings.columns-3 {background-color:transparent;border:0;}
350     #course-category-listings.columns-3 #category-listing,
351     #course-category-listings.columns-3 #course-listing {width:50%;}
352     #course-category-listings.columns-3 #category-listing > div,
353     #course-category-listings.columns-3 #course-listing > div,
354     #course-category-listings.columns-3 #course-detail {border:1px solid #e1e1e8;background-color:#FFF;}
355     #course-category-listings.columns-3 #course-detail > div {border:0;}
356     #course-category-listings.columns-3 #course-detail {width:100%;margin-top:1em;}
359 @media (max-width: 1199px) {
360     #course-category-listings.columns-2,
361     #course-category-listings.columns-3 {background-color:transparent;border:0;}
362     #course-category-listings.columns-2 #category-listing,
363     #course-category-listings.columns-2 #course-listing,
364     #course-category-listings.columns-2 #course-detail,
365     #course-category-listings.columns-3 #category-listing,
366     #course-category-listings.columns-3 #course-listing,
367     #course-category-listings.columns-3 #course-detail {width:100%;margin-bottom:1em;}
368     #course-category-listings.columns-2 #category-listing > div,
369     #course-category-listings.columns-2 #course-listing > div,
370     #course-category-listings.columns-2 #course-detail > div,
371     #course-category-listings.columns-3 #category-listing > div,
372     #course-category-listings.columns-3 #course-listing > div,
373     #course-category-listings.columns-3 #course-detail > div {border:1px solid #e1e1e8;background-color:#FFF;}
376 /** Custom YUI grid CSS **/
377 .grid-col {
378     display: inline-block;
379     zoom: 1; *display: inline;
380     letter-spacing: normal;
381     word-spacing: normal;
382     vertical-align: top;
383     text-rendering: auto;
385 .grid-col-1{display:block;}
386 .grid-col-1-2{width: 50%;}
387 .grid-col-1-3{width: 33.33333%;}
388 .grid-col-2-3{width: 66.66667%;}
389 .grid-col-1-4{width: 25%;}
390 .grid-col-3-4{width: 75%;}
391 .grid-col-1-5{width: 20%;}
392 .grid-col-2-5{width: 40%;}
393 .grid-col-3-5{width: 60%;}
394 .grid-col-4-5{width: 80%;}
395 .grid-col-1-6{width: 16.66667%;}
396 .grid-col-5-6{width: 83.33333%;}
397 .grid-col-1-7{width: 14.28571%;}
398 .grid-col-2-7{width: 28.57143%;}
399 .grid-col-3-7{width: 42.85714%;}
400 .grid-col-4-7{width: 57.14286%;}
401 .grid-col-5-7{width: 71.42857%;}
402 .grid-col-6-7{width: 85.71429%;}
403 .grid-col-1-8{width: 12.5%;}
404 .grid-col-3-8{width: 37.5%;}
405 .grid-col-5-8{width: 62.5%;}
406 .grid-col-7-8{width: 87.5%;}
407 .grid-col-1-9{width: 11.11111%;}
408 .grid-col-2-9{width: 22.22222%;}
409 .grid-col-4-9{width: 44.44444%;}
410 .grid-col-5-9{width: 55.55556%;}
411 .grid-col-6-9{width: 66.66667%;}
412 .grid-col-7-9{width: 77.77778%;}
413 .grid-col-8-9{width: 88.88889%;}
414 .grid-col-1-10{width: 10%;}
415 .grid-col-3-10{width: 30%;}
416 .grid-col-7-10{width: 70%;}
417 .grid-col-9-10{width: 90%;}
418 .grid-col-1-11{width: 9.09091%;}
419 .grid-col-2-11{width: 18.18182%;}
420 .grid-col-3-11{width: 27.27273%;}
421 .grid-col-4-11{width: 36.36364%;}
422 .grid-col-5-11{width: 45.45455%;}
423 .grid-col-6-11{width: 54.54545%;}
424 .grid-col-7-11{width: 63.63636%;}
425 .grid-col-8-11{width: 72.72727%;}
426 .grid-col-9-11{width: 81.81818%;}
427 .grid-col-10-11{width: 90.90909%;}
428 .grid-col-1-12{width: 8.33333%;}
429 .grid-col-5-12{width: 41.66667%;}
430 .grid-col-7-12{width: 58.33333%;}
431 .grid-col-9-12{width: 75%;}
432 .grid-col-11-12{width: 91.66667%;}
433 .grid-row-r {
434     letter-spacing: -0.31em;
435     *letter-spacing: normal;
436     word-spacing: -0.43em;
439 .opera-only :-o-prefocus,
440 .grid-row-r {word-spacing: -0.43em;}
441 .grid-row-r img {max-width: 100%;}
443 @media (min-width:980px) {
444     .grid-visible-phone     { display: none; }
445     .grid-visible-tablet    { display: none; }
446     .grid-visible-desktop   { }
447     .grid-hidden-phone      { }
448     .grid-hidden-tablet     { }
449     .grid-hidden-desktop    { display: none; }
452 @media (max-width:480px) {
453     .grid-row-r > [class ^= "grid-col"] {
454         width:100%;
455     }
458 @media (max-width:767px) {
459     .grid-row-r > [class ^= "grid-col"] {
460         width:100%;
461     }
462     .grid-visible-phone     { }
463     .grid-hidden-phone      { display: none; }
464     .grid-hidden-desktop    { }
465     .grid-visible-desktop   { display: none; }
468 @media (min-width:768px) and (max-width:979px) {
469     .grid-visible-tablet    {}
470     .grid-hidden-tablet     { display: none; }
471     .grid-hidden-desktop    {}
472     .grid-visible-desktop   { display: none; }