added link to blog and removed <center> tag cause it's haraam
[shapado:piglops-shapado.git] / app / stylesheets / application.sass
1 @import buttons
2 @import form
3 @import markdown
4 @import users_index
5 @import pagination
6 @import compass/utilities/tables/scaffolding
7 @import compass/utilities/general/tag_cloud.sass
8 @import compass/utilities/lists/horizontal_list.sass
9
10 body
11   background: #4A7499
12   color: #666
13   font: normal 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif
14
15 .two-column
16   background: #eee
17   padding: 5px
18
19 a:link, a:visited
20   font-weight: bold
21   color: #669933
22
23
24 a:hover, a:active
25   color: #96a51e
26
27 a, strong, b
28   line-height: 17px
29
30
31 .clear
32   clear: both
33
34 .left
35   float: left
36
37 .right
38   float: right
39
40 strong, b
41   line-height: 19px
42
43
44 abbr
45   border-bottom: 1px dotted #b4b4b4
46   cursor: help
47
48
49 .hidden
50   display: none
51
52
53 #header
54   display: block
55
56   #logo
57     margin: 20px 10px
58     width: 250px
59     height: 61px
60     background: transparent url("/images/logo.png") no-repeat
61
62     a
63       border: 0
64       display: block
65
66       img
67         display: block
68         display: block
69         width: 0
70
71
72   #user-actions
73     em.label
74       color: #91ce9b
75       font-size: .75em
76       font-style: normal
77       font-weight: bold
78       margin-top: 35px
79       text-transform: uppercase
80       text-align: right
81
82     p
83       float: left
84       margin: 0 3px
85
86     em.helper
87       font-size: .75em
88       font-style: normal
89
90   .buttons
91     clear: none
92     margin: 0px
93
94     button
95       float: none
96       margin-left: 5px
97
98 input
99   float: none
100
101 x
102   &:-moz-any-link, &:default
103     -moz-border-radius: 14px
104
105 #banner
106   background: #86c340 url("/images/bg_banner.png") top center repeat-x
107   border-top: 1px solid #6cbd92
108   border-bottom: 1px solid #78af39
109
110 #wrapper
111   background: #fff url("/images/bg.png") top center repeat-x
112
113
114 .home #wrapper
115   padding-top: 20px
116
117
118 .tour #wrapper
119   background: #000
120
121
122 #header
123   margin: 0 10px
124   position: relative
125
126 h1, h2
127   letter-spacing: -.05em
128   line-height: 40px
129
130
131 h1
132   color: #000
133   font-size: 32px
134   font-weight: bold
135
136 h2
137   color: #666
138   font-size: 28px
139   font-weight: normal
140
141
142 h3
143   color: #59892f
144   font-size: 18px
145
146   &.section
147     border-top: 1px solid #eee
148     clear: both
149     color: #888
150     font-size: .75em
151     margin: 0 0 20px 0
152     padding: 9px 0 10px 0
153     text-transform: uppercase
154
155
156 .blog_post .copy h4
157   border-top: 1px solid #eee
158   clear: both
159   color: #888
160   font-size: .75em
161   margin: 0 0 20px 0
162   padding: 9px 0 10px 0
163   text-transform: uppercase
164
165
166 h4
167   color: #3f5c26
168   font-size: 1em
169
170   &.section
171     border-top: 1px solid #eee
172     clear: both
173     color: #888
174     font-size: .75em
175     margin: 0 0 20px 0
176     padding: 9px 0 10px 0
177     text-transform: uppercase
178
179
180 h5
181   color: #3f5c26
182   font-size: 1em
183
184
185 h3 span, h4 span, h5 span
186   font-weight: normal
187
188
189 input
190   font: normal 1em 'Helvetica Neue', Helvetica, Arial, sans-serif
191   padding: 5px
192
193   &:focus
194     background: #fff
195
196
197 label.required
198   font-weight: bold
199
200
201 #content
202   label.error
203     color: #d12f19
204     font-size: 0.75em
205     font-weight: bold
206
207   input.error
208     border-color: #fbc2c4
209
210
211 input.error:focus
212   border-color: #fbc2c4
213
214
215 .odd
216   background-color: #efefef
217
218
219 hr
220   border: 0
221   border-top: 1px solid #eee
222   clear: both
223   height: 0
224   margin: 0
225
226
227 q, .pullquote
228   color: #666
229   font: italic 1em/20px Cambria, Georgia, Times, 'Times New Roman', serif
230
231
232 cite
233   display: block
234   font-style: normal
235   font-weight: bold
236
237   span
238     font-weight: normal
239
240
241 #content p
242   margin: 4px 0
243
244
245 .bulleted li
246   list-style-type: disc
247   margin-left: 1em
248
249
250 .newsletter
251   .bulleted, .numbered
252     margin-bottom: 20px
253
254
255 .numbered li
256   list-style-type: decimal
257   margin-left: 20px
258
259
260 .download
261   background: transparent url("/images/icons/download_16x16.png") left center no-repeat
262   padding-left: 20px
263
264
265 a.download
266   &:hover, &:active
267     background-image: url("/images/icons/download_16x16.png")
268     background-position: left center
269     background-repeat: no-repeat
270
271
272 .info
273   background-color: #ecf8fa
274
275
276 .important
277   margin-bottom: 0
278
279   p
280     font-size: 1.15em
281
282
283 #content .message p
284   margin: 0
285
286
287 #errorExplanation
288   background-color: #fbe3e4
289   border: 1px solid #fbc2c4
290   margin: 20px
291   padding: 10px
292
293   h3
294     color: #260000
295     margin-bottom: 10px
296
297   p
298     margin-bottom: 10px
299
300   ul
301     margin-bottom: 10px
302
303     li
304       float: none
305       margin-bottom: 0
306       padding: 0
307
308
309 #post_form .fieldWithErrors
310   input, textarea
311     border-color: #fbc2c4
312
313
314 #contact_form .fieldWithErrors
315   input, textarea
316     border-color: #fbc2c4
317
318   #runner
319     border-top: 1px solid #444
320     clear: both
321     color: #444
322     margin-top: 20px
323     padding-top: 19px
324
325     .sitemap_primary, .sitemap_secondary, p
326       text-align: right
327
328     .sitemap_primary li, .sitemap_secondary li
329       display: inline
330       margin-left: 20px
331
332     .sitemap_primary li a
333       font-weight: normal
334
335     #watermark
336       padding: 7px 0
337
338     .omega
339       float: right
340
341     #watermark img
342       display: block
343
344   #pitch a
345     &:link, &:visited
346       color: #666
347       font-weight: normal
348
349     &:hover, &:active
350       color: #fff
351
352
353 blockquote
354   cite
355     margin-bottom: 20px
356
357   em
358     color: #b4b4b4
359     font-style: normal
360     font-weight: normal
361
362 #navigation
363   #menu_primary
364     ul
365       list-style-type: none
366       overflow: hidden
367       margin: 0px
368       li
369         float: left
370         margin-right: 10px
371         margin-left: 0px
372         a
373           border-top: 1px solid #d4d4d4
374           border-left: 1px solid #d4d4d4
375           border-right: 1px solid #d4d4d4
376           display: block
377           font-size: .75em
378           padding: 6px 20px
379           text-align: center
380           background: #FFF
381           color: #999
382           text-transform: uppercase
383           text-decoration: none
384         a:hover, a:focus, a:active
385           color: #828282
386           outline: none
387         &.ask_question
388           float: right
389           a
390             background: #004181
391             color: #dedede
392
393 =active_tab
394   background-color: #ddd
395   color: #000
396
397
398 #navigation.questions #menu_primary ul li.selected a,
399 #navigation.questions #menu_primary ul li.questions a,
400 #navigation.ask_question #menu_primary ul li.ask_question a,
401 #navigation.tags #menu_primary ul li.tags a,
402 #navigation.unanswered #menu_primary ul li.unanswered a,
403 #navigation.users #menu_primary ul li.users a
404   +active_tab
405
406 .subtitle
407   color: #000
408   font-size: 20px
409   font-weight: bold
410   border-bottom: 1px solid #999
411   margin-top: 10px
412   .tabs
413     ul
414       +horizontal-list(6px)
415       li.tab
416         a
417           color: #828282
418           text-decoration: none
419           border-width: 1px
420           border-style: solid solid none
421           border-color: #999
422           padding: 2px 10px
423           font-size: 85%
424         a:hover, a:focus, a:active
425           color: #121314
426           outline: none
427
428 =active_subtab
429   color: #121314
430   background-color: #ffd
431
432 .subtitle#welcome.active .tabs li.active a,
433 .subtitle#welcome.hot .tabs li.hot a,
434 .subtitle#questions_index.active .tabs li.active a,
435 .subtitle#questions_index.newest .tabs li.newest a,
436 .subtitle#questions_index.hot .tabs li.hot a,
437 .subtitle#questions_index.votes .tabs li.votes a,
438 .subtitle#moderate.all .tabs li.all a,
439 .subtitle#moderate.questions .tabs li.questions a,
440 .subtitle#moderate.answers .tabs li.answers a
441   +active_subtab
442
443 #system-msg
444   background: #FFFCDE
445   border: 1px solid #E1DCAA
446   text-align: center
447
448 .message
449   margin-bottom: 5px
450   &.notice
451     :background #E6EFC2
452     :color #264409
453     :border-color #C6D880
454     a
455       :color #264409
456   &.error
457     :background #FBE3E4
458     :color #8a1f11
459     :border-color #FBC2C4
460     a
461       :color #8a1f11
462   &.warn
463     :background #FFF6BF
464     :color #514721
465     :border-color #FFD324
466     a
467       :color #514721
468
469 #main-content
470   background: #dfdfdf
471   border-left: 1px solid #d4d4d4
472   border-bottom: 1px solid #b4b4b4
473   border-right: 1px solid #b4b4b4
474   clear: both
475   overflow: hidden
476   padding: 9px
477
478 #user-nav
479   margin-top: 20px
480
481 .box
482   padding: 5px
483   border: 1px solid #b4b4b4
484   background: #ddd
485   &.highlight
486     background: #E8E5B7
487
488 #layout
489   background: #F6F6F6
490   border: 1px solid #E6E6E6
491
492 #content
493   background: #FFF
494
495 #sidebar
496
497 .internal
498   padding: 5px
499
500 #footer
501   clear: both
502   margin: 18px 0
503   padding: 0 0 18px 0
504   text-align: left
505   p
506     float: left
507     margin: 0
508
509     &.feedback
510       float: right
511
512     &#powered_by
513       clear: both
514       margin-bottom: 18px
515
516   a:link, a:visited
517     font-weight: bold
518     color: #666
519
520   em a:link, em a:visited
521     font-style: normal
522     color: #669933
523
524   a:hover, em a:hover, a:active, em a:active
525     color: #96a51e
526
527 .center
528   text-align: center
529
530 table.list
531   +table-scaffolding
532   :width 100%
533
534 .vote_box
535   border: 1px solid #d4d4d4
536   border-radius: 2px
537   -webkit-border-radius: 2px
538   -moz-border-radius: 2px
539   padding: 3px
540   font-size: 24px
541   text-align: center
542   vertical-align: middle
543   a
544     font-size: 25px
545     text-decoration: none
546
547 .item
548   width: 78px
549   height: 48px
550   float: left
551   margin-left: 5px
552   text-align: center
553   border: 1px solid #d4d4d4
554
555
556 .tag_cloud
557   a.tag
558     text-decoration: none
559     line-height: 26px
560
561
562 //TODO: move it
563 #questions
564   min-height: 10em
565
566 .questions_count
567   font-weight: bolder
568   font-size: 380%
569   color: #ACACAC
570   text-align: left
571
572 .question
573   margin-bottom: 10px
574   border-bottom: 1px solid #d4d4d4
575   padding: 5px
576   background: #EEEEFF
577   .item
578     color: #999999
579     padding: 4px
580     font-weight: bold
581     &.count_views
582       background: #FFFFCC
583     &.count_answers
584       background: #CCFFCC
585     &.count_votes
586       background: #FFCCCC
587     .counter
588       color: #666
589       font-size: 26px
590       font-weight: bolder
591
592 .tags-list
593   font-size: .785em
594   overflow: hidden
595   line-height: 30px
596   .tag
597     margin-left: 3px
598     display: inline
599     overflow: hidden
600     float: left
601     a
602       -webkit-border-radius: 2px
603       -moz-border-radius-bottomleft: 0
604       -moz-border-radius-bottomright: 4px
605       -moz-border-radius-topleft: 4px
606       -moz-border-radius-topright: 0
607       color: #666
608       background: #DDDDEC
609       cursor: pointer
610       display: block
611       font-size: 100%
612       font-weight: bold
613       margin-bottom: 5px
614       padding: 2px 8px
615       text-align: center
616       text-decoration: none
617       text-transform: uppercase
618       white-space: nowrap
619       line-height: 12px
620       &:hover
621         color: #dedede
622         background: #004181
623
624 a.feed_url
625   background: #DEDEFE
626   color: #666
627   text-decoration: none
628   font: normal 15px arial, sans-serif
629   height: 54px
630   display: block
631   margin-right: 6px
632   padding-right: 18px
633   border-bottom: 2px #ACACAC solid
634   border-right: 1px #ACACAC solid
635
636   &:hover
637     background: #D0D0EE
638
639   span.icon
640     width: 32px
641     float: left
642     padding: 10px 0
643     img:
644       height: 100%
645
646   span.text
647     float: left
648     width: 145px
649     padding: 8px 0 5px 1px
650     text-align: center
651
652 table#pricing
653   width: 100%
654   th
655     background-color: #B4B4B4
656     text-align: center
657     padding: 10px 0px
658     color: #F6F6F6
659     font-size: 13px
660     font-weight: bold
661     border: 1px white solid
662   td
663     padding-left: 4px
664     border-bottom: 1px solid #DFDFDF
665     padding-bottom: 0.25em
666     padding-top: 0.25em
667     text-align: center
668     padding: 0.5em
669     &.first
670       font-weight: bold
671       text-align: left
672
673 #facts
674   text-align: center