source: documentation/trunk/tutorial_sample_files/libraries/althor/css/style.css@ 28599

Last change on this file since 28599 was 28599, checked in by jlwhisler, 10 years ago

Draft interface for use in Defining Libraries tutorial.

File size: 13.7 KB
Line 
1@import url('reset.css');
2
3@import url('widgets.css');
4
5@import url('elements.css');
6
7@import url('comments.css');
8
9@import url('../js/poshytip-1.1/src/tip-yellow/tip-yellow.css');
10
11@import url('isotope.css');
12/*
13* Folder v1.0
14*
15*/
16/* Vars ----------------------------------------------------*//* Mixins ----------------------------------------------------*//* IMPORT ------------------------------------------------------------*/
17/* aditional */
18/* Fonts ----------------------------------------------------*//* Here you go ie */
19@font-face {
20 font-family: 'mensch';
21 font-style: normal;
22 font-weight: normal;
23 src: url('../fonts/mensch-webfont.eot');
24}
25/* For real web browsers */
26@font-face {
27 font-family: 'mensch';
28 font-style: normal;
29 font-weight: normal;
30 src: url('../fonts/mensch-webfont.ttf');
31}
32/* GENERAL ------------------------------------------------------------*/
33.cf:after,
34.cf:before {
35 content: "";
36 display: table;
37}
38.cf:after {
39 clear: both;
40}
41.cf {
42 zoom: 1;
43}
44.wrapper {
45 margin: 0 auto;
46 width: 940px;
47 position: relative;
48}
49body {
50 font-family: Helvetica, Arial, sans-serif;
51 font-size: 16px;
52 line-height: 1.5em;
53 background: #95c9c3 url(../img/grunge.png) repeat-x center 150px;
54}
55body a {
56 text-decoration: none;
57 -webkit-transition: all 0.3s ease;
58 -moz-transition: all 0.3s ease;
59 -o-transition: all 0.3s ease;
60 transition: all 0.3s ease;
61}
62body p {
63 margin-bottom: 21px;
64}
65#main h1,
66#main h2,
67#main h3,
68#main h4,
69#main h5,
70#main h6 {
71 font-family: mensch;
72 line-height: 1.3em;
73}
74h1 {
75 font-size: 48px;
76}
77h2 {
78 font-size: 36px;
79}
80h3 {
81 font-size: 30px;
82}
83h4 {
84 font-size: 24px;
85}
86h5 {
87 font-size: 18px;
88}
89h6 {
90 font-size: 14px;
91}
92/* HEADER ----------------------------------------------------*/header {
93 background: url(../img/header.png);
94 height: 150px;
95}
96
97#logo {
98text-align: center;
99}
100
101header #logo:hover {
102 opacity: 0.8;
103}
104header #logo img {
105 display: inline-block;
106 margin: 50px 20px 30px 20px;
107}
108
109#div-title {
110 display: inline;
111 font-size: 70px;
112 margin-top: -20px;
113 margin: 50px 20px 50px 20px;
114 color: #F3E4C8;
115}
116
117/* NAVIGATION ------------------------------------------------------------*/
118nav {
119 height: 68px;
120 float: left;
121 width: 100%;
122 margin-top: 0px;
123 position: relative;
124 background: url(../img/ribbon.png) no-repeat top center;
125}
126#nav {
127 clear: left;
128 display: block;
129 float: right;
130 position: relative;
131 right: 50%;
132 text-align: center;
133}
134#nav > li {
135 display: block;
136 float: left;
137 position: relative;
138 left: 50%;
139 font-family: mensch;
140 word-spacing: -0.1em;
141 font-size: 20px;
142 /* sub navigation -----------------------------------------------------*/
143
144}
145#nav > li.current-menu-item i,
146#nav > li.current_page_item i {
147 display: block;
148}
149#nav > li a {
150 display: block;
151 padding: 20px 10px 0px 10px;
152 color: #f3e4c8;
153 text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
154}
155#nav > li a:hover i {
156 display: block;
157}
158#nav > li a i {
159 display: none;
160 width: 16px;
161 height: 16px;
162 position: absolute;
163 left: 50%;
164 top: -4px;
165}
166#nav > li a i b {
167 position: absolute;
168 display: block;
169 background: url(../img/current.png) no-repeat 0px 0px;
170 width: 16px;
171 height: 16px;
172 left: -8px;
173}
174#nav > li ul {
175 font-size: 14px;
176 font-family: Tahoma;
177 text-align: left;
178 margin-top: 19px;
179 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
180}
181#nav > li ul li {
182 border-top: 1px solid #a03a26;
183 border-bottom: 1px solid #812f1e;
184}
185#nav > li ul li a {
186 padding: 15px;
187 background: #963724;
188}
189#nav > li ul li a:hover {
190 background: #a03a26;
191}
192#nav > li ul li:last-child {
193 border-bottom: none;
194}
195/* COMBO NAVIGATION ------------------------------------------------------------*/
196#comboNav {
197 width: 100%;
198 margin-top: 20px;
199 margin-bottom: 30px;
200 float: left;
201}
202/* MAIN ----------------------------------------------------*/#main .wrapper {
203 margin-top: 60px;
204 margin-bottom: 50px;
205 min-height: 500px;
206 color: #444;
207 font-size: 16px;
208 line-height: 1.5em;
209}
210/* HEALINE ----------------------------------------------------*/.headline {
211 color: #cb5432;
212 text-align: center;
213 font-family: mensch;
214 font-size: 48px;
215 line-height: 1.3em;
216 word-spacing: -0.1em;
217 text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
218 margin-bottom: 20px;
219}
220
221/* FEATURE ----------------------------------------------------*/.feature {
222 width: 960px;
223 margin-left: -20px;
224}
225.feature li {
226 position: relative;
227 background: #f3e4c8;
228 width: 300px;
229 margin-bottom: 50px;
230 margin-left: 20px;
231 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
232}
233.feature li .thumb {
234 display: block;
235 margin: 10px;
236 width: 280px;
237}
238.feature li .thumb img {
239 max-width: 100%;
240}
241.feature li .caption {
242 padding: 10px 10px 20px 10px;
243 text-align: center;
244}
245.feature li a {
246 color: #cb5432;
247}
248.feature li .thumb {
249 position: relative;
250}
251.feature li .thumb .date {
252 position: absolute;
253 bottom: -25px;
254 left: 110px;
255 display: block;
256 -moz-border-radius: 40px 40px 40px 40px;
257 -webkit-border-radius: 40px 40px 40px 40px;
258 border-radius: 40px 40px 40px 40px;
259 height: 50px;
260 width: 60px;
261 background: #f3e4c8;
262 float: left;
263 font-family: mensch;
264 padding-top: 10px;
265}
266.feature li .thumb .date span {
267 display: block;
268 text-align: center;
269 font-size: 20px;
270 line-height: 20px;
271}
272/* PAGE CONTENT ----------------------------------------------------*/.page-content {
273 position: relative;
274 background: #f3e4c8;
275 color: #585246;
276 padding: 50px 30px 60px 30px;
277 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
278}
279.page-content .heading {
280 border-bottom: 5px solid #585246;
281 margin-bottom: 30px;
282 padding-bottom: 10px;
283}
284.page-content .c-1,
285.page-content .c-2,
286.page-content .c-3,
287.page-content .c-4 {
288 position: absolute;
289 width: 48px;
290 height: 50px;
291}
292.page-content .c-1 {
293 top: 0px;
294 left: 0px;
295 background: url(../img/corner-1.png) no-repeat top left;
296}
297.page-content .c-2 {
298 top: 0px;
299 right: 0px;
300 background: url(../img/corner-2.png) no-repeat top left;
301}
302.page-content .c-3 {
303 bottom: 0px;
304 left: 0px;
305 background: url(../img/corner-3.png) no-repeat top left;
306}
307.page-content .c-4 {
308 bottom: 0px;
309 right: 0px;
310 background: url(../img/corner-4.png) no-repeat top left;
311}
312/* CONTACT ------------------------------------------------------------*/
313#map_canvas {
314 display: block;
315 height: 300px;
316 width: 100%;
317 margin-bottom: 20px;
318}
319/* PORTFOLIO ----------------------------------------------------*/.portfolio-content {
320 margin-bottom: 40px;
321}
322.portfolio-content .project-content {
323 float: left;
324 width: 660px;
325}
326.portfolio-content .project-info {
327 float: right;
328 width: 160px;
329 font-size: 14px;
330 padding-left: 30px;
331 border-left: 1px solid #585246;
332}
333.portfolio-content .project-info p {
334 margin-bottom: 10px;
335}
336.portfolio-content .project-info strong {
337 font-weight: bold;
338 display: block;
339}
340.portfolio-content .project-info a {
341 color: #cb5432;
342}
343/* RELATED PROJECTS ------------------------------------------------------------*/
344.related-projects {
345 margin-bottom: 80px;
346}
347.related-projects .related-heading {
348 text-align: center;
349 margin-bottom: 10px;
350}
351.related-projects a {
352 color: #444444;
353}
354.related-projects .related-list li {
355 float: left;
356 width: 300px;
357 text-align: center;
358 margin-right: 20px;
359}
360.related-projects .related-list li .thumb {
361 background: #f3e4c8;
362 padding: 10px;
363 display: block;
364 line-height: 0em;
365 margin-bottom: 10px;
366 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
367}
368.related-projects .related-list li .thumb img {
369 max-width: 100%;
370}
371.related-projects .related-list li:last-child {
372 margin-right: 0px;
373}
374/* ENTRY CONTENT ------------------------------------------------------------*/
375.entry-content a {
376 color: #cb5432;
377}
378.entry-content strong {
379 font-weight: bold;
380}
381.entry-content ul,
382.entry-content ol {
383 margin-left: 20px;
384}
385.entry-content ul {
386 list-style: disc;
387}
388.entry-content ol {
389 list-style: decimal;
390}
391/* BLOG ------------------------------------------------------------*/
392#posts-list {
393 position: relative;
394 width: 620px;
395 float: left;
396}
397#posts-list article {
398 position: relative;
399 margin-bottom: 50px;
400 padding: 30px;
401 background: #f3e4c8;
402 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
403}
404#posts-list article .tape {
405 position: absolute;
406 top: -15px;
407 left: 250px;
408 display: block;
409 width: 122px;
410 height: 35px;
411 background: url(../img/tape.png) no-repeat top left;
412}
413#posts-list article .feature-image {
414 position: relative;
415 line-height: 0em;
416}
417#posts-list article .feature-image img {
418 max-width: 100%;
419}
420#posts-list article .feature-image .entry-date {
421 position: absolute;
422 bottom: -66px;
423 right: 0px;
424 width: 51px;
425 height: 66px;
426 background: url(../img/date.png) no-repeat top left;
427 font-family: mensch;
428 font-size: 20px;
429 line-height: 1.1em;
430 text-align: center;
431 color: #f3e4c8;
432}
433#posts-list article .feature-image .entry-date .month {
434 margin-top: 7px;
435}
436#posts-list article .excerpt {
437 margin-top: 40px;
438 color: #585246;
439}
440#posts-list article .excerpt .post-heading {
441 font-family: mensch;
442 font-size: 36px;
443 line-height: 1.1em;
444 color: #585246;
445 display: block;
446 max-width: 480px;
447}
448#posts-list article .meta {
449 display: block;
450 border-top: 1px solid #585246;
451 font-size: 14px;
452 padding-top: 10px;
453}
454#posts-list article .meta a {
455 color: #cb5432;
456}
457/* PAGE NAVIGATION ------------------------------------------------------------*/
458#main .page-navigation {
459 position: relative;
460 left: 50%;
461 display: block;
462 margin-bottom: 100px;
463 float: left;
464}
465#main .page-navigation div {
466 position: relative;
467 right: 50%;
468 box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
469}
470#main .page-navigation div span {
471 margin-bottom: 15px;
472 display: inline-block;
473}
474#main .page-navigation a {
475 display: block;
476 -webkit-transition: all 0.3s ease;
477 -moz-transition: all 0.3s ease;
478 -o-transition: all 0.3s ease;
479 transition: all 0.3s ease;
480 color: #cb5432;
481 display: block;
482 padding: 10px 15px;
483}
484#main .page-navigation .nav-next {
485 float: left;
486 margin-right: 20px;
487 background: #f3e4c8 url(../img/arrow-left.png) no-repeat left 12px;
488 padding-left: 20px;
489}
490#main .page-navigation .nav-previous {
491 float: right;
492 background: #f3e4c8 url(../img/arrow-right.png) no-repeat right 12px;
493 padding-right: 20px;
494}
495/* SIDEBAR ------------------------------------------------------------*/
496#sidebar {
497 position: relative;
498 width: 260px;
499 float: right;
500 font-size: 14px;
501}
502#sidebar .block {
503 margin-bottom: 40px;
504 padding-bottom: 5px;
505}
506#sidebar .heading {
507 border-top: 5px solid #444444;
508 border-bottom: 5px solid #444444;
509 margin-bottom: 15px;
510 padding-top: 15px;
511 padding-bottom: 10px;
512 line-height: 1.1em;
513 text-align: center;
514}
515#sidebar li {
516 margin-bottom: 7px;
517}
518#sidebar a {
519 color: #cb5432;
520}
521/* FILTERED ITEMS ----------------------------------------------------*/.isotope-item {
522 z-index: 2;
523}
524.isotope-hidden.isotope-item {
525 pointer-events: none;
526 z-index: 1;
527}
528#filter-buttons {
529 text-align: center;
530 background: url(../img/filter.png) no-repeat top center;
531 height: 47px;
532 margin-bottom: 20px;
533}
534#filter-buttons li {
535 display: inline-block;
536 margin-bottom: 0px;
537}
538#filter-buttons li a {
539 display: block;
540 text-decoration: none;
541 margin-bottom: 0px;
542 margin-right: 5px;
543 line-height: 47px;
544 color: #cb5432;
545}
546#filter-buttons li .selected {
547 background: url(../img/filter-arrow.png) no-repeat center top;
548}
549/* COLUMNS LAYOUT----------------------------------------------------------*/
550.one-half,
551.one-third,
552.one-fourth {
553 float: left;
554 margin-bottom: 40px;
555 margin-right: 2.1276%;
556 position: relative;
557}
558.one-half {
559 width: 48.9361%;
560}
561.one-third {
562 width: 31.9148%;
563}
564.one-fourth {
565 width: 23.4042%;
566}
567.last {
568 clear: right;
569 margin-right: 0 !important;
570}
571/* FOOTER ----------------------------------------------------*/footer {
572 background: #585246 url(../img/footer.png) repeat-x;
573 color: #f3e4c8;
574 padding-bottom: 60px;
575}
576footer a {
577 color: #fff;
578 text-decoration: none;
579}
580footer a:hover {
581 color: #cb5432;
582}
583footer h1,
584footer h2,
585footer h3,
586footer h4,
587footer h5,
588footer h6 {
589 color: #f9f5ed;
590 font-family: mensch;
591 word-spacing: -0.1em;
592 text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
593 line-height: 1.3em;
594}
595footer .sb-holder {
596 position: relative;
597 left: 50%;
598 text-align: center;
599 float: left;
600}
601footer #social-bar {
602 display: block;
603 position: relative;
604 float: left;
605 right: 50%;
606 margin: -7px 5px 0px 5px;
607 background: url(../img/social-bg.png) repeat-x;
608 height: 46px;
609 padding-top: 8px;
610 padding-left: 10px;
611 padding-right: 10px;
612}
613footer #social-bar li {
614 float: left;
615 line-height: 1em;
616 margin-left: 3px;
617 margin-right: 3px;
618}
619footer #social-bar li a {
620 display: block;
621 line-height: 0em;
622}
623footer #social-bar li a:hover {
624 -webkit-transform: translate(0px, -2px);
625 -moz-transform: translate(0px, -2px);
626 -o-transform: translate(0px, -2px);
627 transform: translate(0px, -2px);
628}
629footer #social-bar .left-corner {
630 position: absolute;
631 top: 0px;
632 left: -10px;
633 display: block;
634 width: 10px;
635 height: 18px;
636 background: url(../img/social-left-corner.png) no-repeat left top;
637}
638footer #social-bar .right-corner {
639 position: absolute;
640 top: 0px;
641 right: -13px;
642 display: block;
643 width: 10px;
644 height: 18px;
645 background: url(../img/social-right-corner.png) no-repeat left top;
646}
647footer #footer-bottom {
648 font-size: 14px;
649 text-align: center;
650 border-top: 1px solid rgba(0, 0, 0, 0.2);
651 padding-top: 25px;
652}
653/* WIDGET COLS ------------------------------------------------------------*/
654.widget-cols {
655 margin-top: 80px;
656 margin-bottom: 30px;
657 font-size: 14px;
658}
659.widget-cols h1,
660.widget-cols h2,
661.widget-cols h3,
662.widget-cols h4,
663.widget-cols h5,
664.widget-cols h6 {
665 margin-bottom: 20px;
666 font-weight: normal;
667 text-align: center;
668 border-bottom: 0px solid #ada18e;
669 border-top: 0px solid #ada18e;
670 padding-top: 0px;
671 padding-bottom: 0px;
672}
673.widget-cols > li {
674 width: 220px;
675 float: left;
676 margin-right: 20px;
677}
678.widget-cols > li.fourth-col {
679 margin-right: 0px;
680}
Note: See TracBrowser for help on using the repository browser.