606b774b527e633408134eaa957508d7b1057e2c
[philo.git] / static / css / screen.css
1 @import "http://fonts.googleapis.com/css?family=Expletus+Sans";
2 html, body, div, span, applet, object, iframe,
3 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4 a, abbr, acronym, address, big, cite, code,
5 del, dfn, em, img, ins, kbd, q, s, samp,
6 small, strike, strong, sub, sup, tt, var,
7 b, u, i, center,
8 dl, dt, dd, ol, ul, li,
9 fieldset, form, label, legend,
10 table, caption, tbody, tfoot, thead, tr, th, td,
11 article, aside, canvas, details, embed,
12 figure, figcaption, footer, header, hgroup,
13 menu, nav, output, ruby, section, summary,
14 time, mark, audio, video {
15   margin: 0;
16   padding: 0;
17   border: 0;
18   font-size: 100%;
19   font: inherit;
20   vertical-align: baseline; }
21
22 body {
23   line-height: 1; }
24
25 ol, ul {
26   list-style: none; }
27
28 table {
29   border-collapse: collapse;
30   border-spacing: 0; }
31
32 caption, th, td {
33   text-align: left;
34   font-weight: normal;
35   vertical-align: middle; }
36
37 q, blockquote {
38   quotes: none; }
39   q:before, q:after, blockquote:before, blockquote:after {
40     content: "";
41     content: none; }
42
43 a img {
44   border: none; }
45
46 article, aside, details, figcaption, figure,
47 footer, header, hgroup, menu, nav, section {
48   display: block; }
49
50 article, aside, details, figcaption, figure,
51 footer, header, hgroup, menu, nav, section {
52   display: block; }
53
54 blockquote, q {
55   quotes: none; }
56   blockquote:before, blockquote:after, q:before, q:after {
57     content: "";
58     content: none; }
59
60 /* Compass Vars */
61 /* Custom Vars */
62 /* custom mixins */
63 body {
64   font-size: 100%;
65   line-height: 1.563em; }
66
67 html > body {
68   font-size: 16px; }
69
70 body {
71   background: #e0e5ef;
72   color: #333333;
73   text-shadow: 0 1px 0 #FFF;
74   font-family: Helvetica, Arial, serif; }
75
76 #container {
77   width: 750px;
78   margin: 20px auto;
79   background: transparent;
80   color: #333333; }
81
82 #nameplate {
83   font-size: 3.75em;
84   line-height: 1.25em;
85   margin-bottom: 25px;
86   padding-bottom: 5px;
87   border-bottom: 5px solid #333333;
88   -moz-box-shadow: 0 1px 0 white;
89   -webkit-box-shadow: 0 1px 0 white;
90   -o-box-shadow: 0 1px 0 white;
91   box-shadow: 0 1px 0 white;
92   font-family: "Expletus Sans", Helvetica, Arial, serif; }
93
94 #content a {
95   color: black;
96   text-decoration: none;
97   background: #aebbd5;
98   padding: 3px;
99   -moz-border-radius: 3px;
100   -webkit-border-radius: 3px;
101   -o-border-radius: 3px;
102   -ms-border-radius: 3px;
103   -khtml-border-radius: 3px;
104   border-radius: 3px; }
105   #content a:hover {
106     background: #95a1bb;
107     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); }
108 #content p, #content ul, #content ol, #content header {
109   margin-bottom: 1.563em; }
110 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
111   font-weight: bold;
112   margin-bottom: 0.781em; }
113 #content h2 {
114   font-size: 1.25em;
115   line-height: 1.25em; }
116 #content code {
117   background: #bec9de;
118   padding: 3px;
119   margin: -4px 0;
120   border: 1px solid #aebbd5;
121   -moz-border-radius: 3px;
122   -webkit-border-radius: 3px;
123   -o-border-radius: 3px;
124   -ms-border-radius: 3px;
125   -khtml-border-radius: 3px;
126   border-radius: 3px;
127   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
128   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
129   -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
130   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
131   font-family: Menlo, monospace;
132   font-size: 0.813em;
133   line-height: 1.923em; }
134
135 .three-up {
136   background: #333333;
137   margin: 25px -10px;
138   padding: 10px;
139   -moz-border-radius: 5px;
140   -webkit-border-radius: 5px;
141   -o-border-radius: 5px;
142   -ms-border-radius: 5px;
143   -khtml-border-radius: 5px;
144   border-radius: 5px;
145   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
146   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
147   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
148   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
149   overflow: hidden;
150   *zoom: 1; }
151   .three-up figure {
152     border: 1px solid #1a1a1a;
153     float: left;
154     width: 241.333px;
155     margin-right: 10px;
156     overflow: hidden;
157     position: relative;
158     -moz-transition-property: width;
159     -webkit-transition-property: width;
160     -o-transition-property: width;
161     transition-property: width;
162     -moz-transition-duration: 0.25s;
163     -webkit-transition-duration: 0.25s;
164     -o-transition-duration: 0.25s;
165     transition-duration: 0.25s;
166     -moz-transition-timing-function: linear;
167     -webkit-transition-timing-function: linear;
168     -o-transition-timing-function: linear;
169     transition-timing-function: linear;
170     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
171     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
172     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
173     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
174     -moz-border-radius: 3px;
175     -webkit-border-radius: 3px;
176     -o-border-radius: 3px;
177     -ms-border-radius: 3px;
178     -khtml-border-radius: 3px;
179     border-radius: 3px; }
180     .three-up figure.shrunk {
181       width: 62px; }
182     .three-up figure.expanded {
183       width: 600px; }
184     .three-up figure:last-child {
185       margin-right: 0;
186       float: right;
187       /* keeps the right margin from wiggling */ }
188     .three-up figure img {
189       display: block; }
190   .three-up figcaption {
191     position: absolute;
192     bottom: 0;
193     left: 0;
194     right: 0;
195     background: rgba(0, 0, 0, 0.75);
196     text-shadow: 1px 1px 0 #000;
197     padding: 0 5px;
198     color: #FFF;
199     width: 600px;
200     font-size: 0.813em;
201     line-height: 1.923em; }
202
203 #modelList {
204   margin-left: 1.5em; }
205   #modelList li {
206     margin-bottom: 0.781em;
207     list-style-type: disc; }
208   #modelList .name {
209     font-weight: bold; }
210
211 #contribList {
212   background: #333333;
213   margin: 25px -10px;
214   padding: 20px 10px;
215   -moz-border-radius: 5px;
216   -webkit-border-radius: 5px;
217   -o-border-radius: 5px;
218   -ms-border-radius: 5px;
219   -khtml-border-radius: 5px;
220   border-radius: 5px;
221   -moz-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
222   -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
223   -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
224   box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
225   overflow: hidden;
226   *zoom: 1;
227   text-shadow: none;
228   color: white;
229   -webkit-font-smoothing: antialiased; }
230   #contribList li {
231     width: 343px;
232     float: left;
233     margin: 0 5px 10px 5px;
234     padding: 10px;
235     background: #262626;
236     border: 1px solid #1a1a1a;
237     -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
238     -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
239     -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
240     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
241     overflow: hidden;
242     *zoom: 1;
243     -moz-border-radius: 3px;
244     -webkit-border-radius: 3px;
245     -o-border-radius: 3px;
246     -ms-border-radius: 3px;
247     -khtml-border-radius: 3px;
248     border-radius: 3px; }
249   #contribList .name, #contribList .description, #contribList .status {
250     display: block; }
251   #contribList .name {
252     font-weight: bold; }
253   #contribList .description {
254     color: #999999; }
255   #contribList .status {
256     font-style: italic;
257     font-size: 0.813em;
258     line-height: 1.923em;
259     float: right; }