source: main/trunk/greenstone3/web/interfaces/therin/less/style.less@ 28644

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

A new interface created using a CSS template by luiszuno.com. Based on the default interface.

File size: 13.1 KB
Line 
1
2
3@import "palette.less";
4
5
6
7/* IMPORT ------------------------------------------------------------*/
8
9@import url('reset.css');
10@import url('widgets.css');
11@import url('comments.css');
12@import url('forms.css');
13@import url('social.css');
14@import url('shortcodes.css');
15
16/* aditional */
17@import url('../js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css');
18@import url('font-awesome.css');
19
20/* Fonts ----------------------------------------------------*/
21
22
23/* Here you go ie */
24@font-face {
25 font-family: 'mensch';
26 font-style: normal;
27 font-weight: normal;
28 src: url('../fonts/mensch-webfont.eot');
29}
30
31/* For real web browsers */
32@font-face {
33 font-family: 'mensch';
34 font-style: normal;
35 font-weight: normal;
36 src: url('../fonts/mensch-webfont.ttf');
37}
38
39/* GENERAL ------------------------------------------------------------*/
40
41
42
43.cf:after,
44.cf:before {
45 content:"";
46 display:table;
47}
48
49.cf:after {
50 clear:both;
51}
52
53.cf {
54 zoom:1;
55}
56
57.wrapper{
58 margin: 0 auto;
59 width: 980px;
60 position: relative;
61 background: @fgColor url(../img/noise.png);
62 .shadow()
63}
64
65body{
66 font-family: Tahoma, Arial, sans-serif;
67 font-size: 16px;
68 line-height: 1.5em;
69 background: @bgColor url(../img/bg.png);
70 color: @fontColor;
71 a{
72 text-decoration: none;
73 .transition();
74 }
75
76 p{
77 margin-bottom: 21px;
78 }
79
80}
81
82
83#main h1,
84#main h2,
85#main h3,
86#main h4,
87#main h5,
88#main h6 {
89 font-family: mensch;
90 line-height: 1.3em;
91}
92
93h1{ font-size: 48px; }
94h2{ font-size: 36px; }
95h3{ font-size: 30px; }
96h4{ font-size: 24px; }
97h5{ font-size: 18px; }
98h6{ font-size: 14px; }
99
100#main{
101
102
103
104 .headline{
105 font-family: mensch;
106 line-height: 1.3em;
107 font-size: 48px;
108 color: #4d4d4d;
109 .text-shadow();
110 text-align: center;
111 margin-bottom: 20px;
112 margin-right: 20px;
113 margin-left: 20px;
114 }
115}
116
117/* HEADER ----------------------------------------------------*/
118
119header{
120 #logo{
121 margin-top: 20px;
122 margin-bottom: 30px;
123 &:hover{ opacity: 0.8;}
124 img{
125 display: block;
126 margin: 0 auto;
127 }
128 }
129}
130
131/* NAVIGATION ------------------------------------------------------------*/
132
133nav{
134 padding-top: 28px;
135 padding-bottom: 20px;
136 margin-top: 110px;
137 margin-bottom: 25px;
138 float: left;
139 width: 100%;
140 margin-top: 0px;
141 position: relative;
142 background: url(../img/nav-top.png) repeat-x top left;
143 border-bottom: 1px solid #9d9b92;
144}
145
146#nav{
147 clear: left;
148 display: block;
149 float: right;
150 position: relative;
151 right: 50%;
152 text-align: center;
153
154
155 >li{
156 display: block;
157 float: left;
158 position: relative;
159 left: 50%;
160 font-family: mensch;
161 word-spacing: -.1em;
162 font-size: 24px;
163 margin-right: 0px;
164 padding-left: 15px;
165 .noTransition();
166 margin-left: 5px;
167 margin-right: 5px;
168
169
170 span{
171 padding-right: 15px;
172 }
173
174 &:hover,
175 &.current-menu-item,
176 &.current_page_item {
177
178 background: url(../img/current-menu-item.png) no-repeat 0px -37px;
179
180 span{
181 display: block;
182 background: url(../img/current-menu-item.png) no-repeat top right;
183 }
184 a{
185 color: #fff;
186 .text-shadow();
187 }
188 }
189
190 a{
191 display: block;
192 line-height: 37px;
193 height: 37px;
194 color: @fontColor;
195 .text-shadow-white();
196 .noTransition();
197 }
198
199
200 /* sub navigation -----------------------------------------------------*/
201
202 ul{
203 font-size: 14px;
204 font-family: Tahoma,Geneva,Kalimati,sans-serif;
205
206 text-align: left;
207 margin-top: 19px;
208
209 background: url(../img/subnav.png) no-repeat top left;
210 padding-top: 26px;
211
212
213
214 li{
215
216 a{
217 height: auto;
218 padding: 8px 16px;
219 background: @accentColor;
220 color: #fff;
221 .text-shadow();
222 &:hover{
223 background: @accentColor + 33;
224 }
225 }
226
227 border-top: 1px solid @accentColor + 10;
228 border-bottom: 1px solid @accentColor - 10;
229
230 &:last-child{
231 border-bottom: none;
232 }
233
234 >ul{
235 background: none;
236 padding-top: 0px;
237 }
238 }
239 }
240 }
241}
242
243
244/* COMBO NAVIGATION ------------------------------------------------------------*/
245
246#comboNav{
247 width: 100%;
248 margin-top: 20px;
249 margin-bottom: 30px;
250 float: left;
251}
252
253/* PAGE CONTENT ------------------------------------------------------------*/
254
255.page-content{
256 position: relative;
257 margin-left: 20px;
258 margin-right: 20px;
259 margin-bottom: 80px;
260}
261
262/* ENTRY CONTENT ------------------------------------------------------------*/
263
264.entry-content{
265
266
267
268 .text-shadow-white();
269
270 a{
271 color: @accentColor;
272 }
273
274 strong{
275 font-weight: bold;
276 }
277
278 ul,ol{
279 margin-left: 20px;
280 }
281
282 ul{
283 list-style: disc;
284 }
285
286 ol{
287 list-style: decimal;
288 }
289
290 .heading{
291 margin-bottom: 20px;
292 }
293}
294
295/* FEATURED & WORK LIST ------------------------------------------------------------*/
296
297.nav-categories{
298 display: block;
299 margin-left: 20px;
300 margin-right: 20px;
301 margin-bottom: 20px;
302 padding-bottom: 7px;
303 border-bottom: 1px dashed #ccc;
304 li{
305 display: block;
306 float: left;
307 margin-right: 20px;
308 a{
309 font-size: 12px;
310 line-height: 1.5em;
311 color: @fontColorLight;
312 &:hover{
313 color: @accentColor;
314 }
315 }
316
317 &.current{
318 a{
319 color: @accentColor;
320 font-weight: bold;
321 }
322 }
323 }
324}
325
326.feature,
327.work-list{
328 display: block;
329 margin-bottom: 20px;
330 li{
331
332 display: block;
333 float: left;
334 width: 300px;
335 margin-left: 20px;
336 margin-bottom: 40px;
337
338 .thumb{
339 display: block;
340 line-height: 0em;
341 position: relative;
342 color: @fgColor;
343 margin-bottom: 50px;
344 background: #000;
345
346 &:hover{
347 .img-overlay{
348 display: block;
349 }
350 img{
351 opacity: 0.5;
352 }
353 }
354 img{
355 max-width: 100%;
356 .shadow();
357 .transition();
358 }
359 .date{
360 position: absolute;
361 bottom: -35px;
362 left: 150px - 35;
363 background: @accentColor;
364 width: 70px;
365 height: 70px;
366 .border-radius();
367 .shadow-hard();
368
369 font-family: mensch;
370 font-size: 24px;
371 line-height: 1.0em;
372 text-align: center;
373 span{
374 display: block;
375 margin-top: 12px;
376 }
377 .d{
378 margin-top: 0px;
379 }
380 }
381 .img-overlay{
382 position: absolute;
383 top: 50%;
384 left: 50%;
385 margin-left: -20px;
386 margin-top: -20px;
387 color: #fff;
388 font-size: 36px;
389 display: none;
390 }
391 }
392 .excerpt{
393 display: block;
394 font-size: 16px;
395 color: #4d4d4d;
396 text-align: center;
397 padding-bottom: 10px;
398 margin-bottom: 10px;
399 border-bottom: 1px solid #888888;
400 }
401 .categories{
402 font-size: 12px;
403 text-align: center;
404 a{
405 color: #888888;
406 &:hover{
407 text-decoration: underline;
408 }
409 }
410 }
411 }
412}
413
414.feature{
415 background: url(../img/feature-line.png) top center no-repeat;
416 padding-top: 40px;
417}
418
419.work-list{
420 li{
421 margin-bottom: 45px;
422
423 .thumb{
424 display: block;
425 line-height: 0em;
426 position: relative;
427 color: @fgColor;
428 margin-bottom: 25px;
429 background: #000;
430 }
431 }
432}
433
434/* PROJECT ------------------------------------------------------------*/
435
436#project-title{
437 margin-left: 20px;
438 font-size: 48px;
439 line-height: 1.2em;
440 font-family: mensch;
441 margin-bottom: 20px;
442 .text-shadow-white();
443}
444
445#project-gallery{
446 width: 620px;
447 float: left;
448 margin-left: 20px;
449 margin-bottom: 40px;
450 .thumb{
451 .shadow();
452 line-height: 0em;
453 margin-bottom: 20px;
454 img{
455 max-width: 100%;
456 }
457 }
458}
459
460#project-info{
461 width: 290px;
462 float: left;
463 margin-left: 20px;
464 margin-bottom: 40px;
465 #project-sheet{
466 background: url(../img/project-sheet.png) repeat-x top left;
467 padding-top: 20px;
468 margin-top: 10px;
469 font-size: 14px;
470 strong{
471 font-weight: bold;
472 }
473 }
474}
475
476
477/* RELATED PROJECTS ------------------------------------------------------------*/
478
479.related-projects{
480 margin-bottom: 80px;
481 margin-top: 40px;
482
483 .related-heading{
484 margin-bottom: 10px;
485 margin-left: 20px;
486 }
487
488 a{
489 color: @fontColor;
490 }
491
492 .related-list{
493 li{
494 float: left;
495 width: 300px;
496 text-align: center;
497 margin-left: 20px;
498
499 .thumb{
500 .shadow();
501 display: block;
502 line-height: 0em;
503 img{
504 max-width: 100%;
505 }
506 margin-bottom: 18px;
507 }
508
509
510 }
511 }
512}
513
514
515/* BLOG ------------------------------------------------------------*/
516
517#posts-list{
518 position: relative;
519 width: 580px;
520 margin-left: 20px;
521 margin-bottom: 40px;
522 float: left;
523
524 article{
525 position: relative;
526 margin-bottom: 60px;
527
528 .feature-image{
529 line-height: 0em;
530 margin-bottom: 20px;
531 img{
532 max-width: 100%;
533 .shadow();
534 }
535 }
536
537 .entry-left-data{
538 width: 80px;
539 float: left;
540 }
541
542 .entry-right-data{
543 width: 483px;
544 float: left;
545 margin-left: 17px;
546 .text-shadow-white();
547 .post-heading{
548 display: block;
549 font-family: mensch;
550 color: @fontColor;
551 font-size: 36px;
552 line-height: 1.3em;
553 border-bottom: 1px solid @fontColor;
554 }
555 .meta{
556 font-size: 12px;
557 color: @fontColorLight;
558 margin-bottom: 20px;
559 a{
560 color: @fontColorLight;
561 }
562 }
563 .excerpt{
564 margin-bottom: 20px;
565 }
566 }
567
568 .entry-date{
569 margin: 0 auto 10px auto;
570 background: @accentColor;
571 color: #fff;
572 width: 70px;
573 height: 70px;
574 .border-radius();
575 .shadow-hard();
576
577 font-family: mensch;
578 font-size: 24px;
579 line-height: 1.0em;
580 text-align: center;
581 span{
582 display: block;
583 padding-top: 12px;
584 }
585 .d{
586 padding-top: 0px;
587 }
588 }
589
590 .comments{
591 display: block;
592 text-decoration: none;
593 margin: 0 auto;
594 width: 37px;
595 height: 33px;
596 background: url(../img/comments.png) no-repeat;
597 color: #dddddd;
598 font-size: 12px;
599 text-align: center;
600 }
601 }
602}
603
604/* SIDEBAR ------------------------------------------------------------*/
605
606#sidebar{
607 position: relative;
608 width: 320px;
609 margin-right: 20px;
610 margin-bottom: 40px;
611 float: right;
612 font-size: 14px;
613 color: @fontColor;
614
615 .block{
616 .sidebar-content{
617 background: url(../img/sidebar.png) repeat-y;
618 width: 300px;
619 padding-left: 10px;
620 padding-right: 10px;
621 margin-bottom: 0px;
622 padding-bottom: 10px;
623 }
624 .sidebar-top{
625 background: url(../img/sidebar-top.png) no-repeat ;
626 width: 100%;
627 height: 38px;
628 }
629 .sidebar-bottom{
630 background: url(../img/sidebar-bottom.png) no-repeat;
631 width: 100%;
632 height: 38px;
633 }
634
635 }
636
637 .heading{
638 border-bottom: 1px solid #888;
639 margin-bottom: 20px;
640 text-align: center;
641 }
642
643 li{
644 display: block;
645 }
646
647 a{
648 color: @accentColor;
649 }
650}
651
652/* PAGE NAVIGATION ------------------------------------------------------------*/
653
654#main .page-navigation{
655 position: relative;
656 left: 50%;
657 display: block;
658 margin-bottom: 100px;
659 float: left;
660
661 div{
662 position: relative;
663 right: 50%;
664 .transition();
665 .shadow-hard();
666
667 span{
668 margin-bottom: 15px;
669 display: inline-block;
670 }
671
672 &:hover{
673 -webkit-transform: translate(0, 2px);
674 -moz-transform: translate(0, 2px);
675 -o-transform: translate(0, 2px);
676 transform: translate(0, 2px);
677 }
678 }
679
680 a{
681 display: block;
682 .transition();
683 color: @accentColor;
684 display: block;
685 padding: 10px 15px;
686
687 }
688
689 .nav-next{
690 float: left;
691 margin-right: 20px;
692 background: #f1f1f1 url(../img/arrow-left.png) no-repeat left 12px;
693 padding-left: 20px;
694 }
695
696 .nav-previous{
697 float: right;
698 background: #f1f1f1 url(../img/arrow-right.png) no-repeat right 12px;
699 padding-right: 20px;
700 }
701}
702
703/* CONTACT ------------------------------------------------------------*/
704
705
706#map_canvas{
707 display: block;
708 height: 300px;
709 width: 100%;
710 margin-bottom: 20px;
711 .shadow();
712}
713
714/* TWITTER ----------------------------------------------------*/
715
716#twitter-holder{
717 position: relative;
718 .ribbon{
719 background: #e37655;
720 min-height: 92px;
721 text-align: center;
722 }
723
724 .ribbon-left{
725 position: absolute;
726 width: 56px;
727 height: 92px;
728 background: url(../img/ribbon-left.png) no-repeat;
729 top: -18px;
730 left: -56px;
731 }
732
733 .ribbon-right{
734 position: absolute;
735 width: 56px;
736 height: 92px;
737 background: url(../img/ribbon-right.png) no-repeat;
738 top: -18px;
739 right: -56px;
740 }
741}
742
743
744/* WIDGET COLS ------------------------------------------------------------*/
745
746.widget-cols{
747 padding-top: 50px;
748 padding-bottom: 50px;
749 font-size: 14px;
750 color: @fgColor;
751 background-color: #3e3e3e;
752 background-image: url(../img/widgets-bg.png);
753 display: none;
754
755 a{
756 color: #fff;
757 border-bottom: 1px dotted #aaa;
758 &:hover{
759 color: @linkColor;
760 }
761 }
762
763 h1, h2, h3, h4, h5, h6{
764 font-family: mensch;
765 color: @fgColor;
766 margin-bottom: 20px;
767 font-weight: normal;
768 text-align: center;
769 border-bottom: 1px solid #605f5b;
770 padding-bottom: 7px;
771 }
772
773 >li{
774 width: 220px;
775 float: left;
776 margin-left: 20px;
777
778 &.fourth-col{
779 margin-right: 0px;
780 }
781 }
782}
783
784
785.multiplebgs .widget-cols{
786 background-image: url(../img/widgets-bg.png) , url(../img/widgets-degree.png);
787 background-repeat: repeat, repeat-x;
788}
789
790
791/* BOTTOM ------------------------------------------------------------*/
792
793#bottom{
794 background: #4d4d4d;
795 position: relative;
796 min-height: 20px;
797 border-top: 1px solid #656565;
798
799 #widget-trigger-holder{
800 position: relative;
801 left: 50%;
802 text-align: center;
803 float: left;
804 margin-top: -15px;
805
806 #widget-trigger{
807 display: block;
808 position: relative;
809 float: left;
810 right: 50%;
811 width: 35px;
812 height: 36px;
813 background: url(../img/widget-trigger.png) no-repeat 0px 0px;
814 .noTransition();
815 &.tab-closed{
816 background-position: 0px -36px;
817 }
818 }
819 }
820
821 #content{
822 padding-top: 20px;
823 padding-bottom: 20px;
824 text-align: center;
825 color: #f1f1f1;
826 font-size: 14px;
827 line-height: 1.5em;
828 clear: both;
829
830 a{
831 color: @linkColor;
832 &:hover{
833 text-decoration: underline;
834 }
835 }
836 }
837
838}
839
840
841
842
843
844
845
846
847
Note: See TracBrowser for help on using the repository browser.