source: main/trunk/greenstone3/web/interfaces/halftone/css/style.css@ 30163

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