PageRenderTime 56ms CodeModel.GetById 18ms app.highlight 34ms RepoModel.GetById 1ms app.codeStats 0ms

/hyde/layouts/basic/content/media/css/site.css

http://github.com/hyde/hyde
CSS | 471 lines | 390 code | 76 blank | 5 comment | 0 complexity | f2ff82218757290b4d9e184d79f835ed MD5 | raw file
  1* {
  2    vertical-align: baseline;
  3    font-weight: inherit;
  4    font-family: inherit;
  5    font-style: inherit;
  6    text-decoration:inherit;
  7    font-size: 100%;
  8    padding: 0;
  9    border: 0;
 10    margin: 0;
 11}
 12
 13article,aside,details,figcaption,figure,
 14footer,header,hgroup,menu,nav,section {
 15    display:block;
 16}
 17
 18table {
 19    border-collapse: collapse;
 20}
 21
 22:focus {
 23    outline: 0;
 24}
 25
 26::-moz-focus-inner {
 27    border: 0;
 28}
 29
 30/* clearfix */
 31.clearfix:after {
 32    content: ".";
 33    display: block;
 34    clear: both;
 35    visibility: hidden;
 36    line-height: 0;
 37    height: 0;
 38}
 39
 40.clearfix {
 41    display: block;
 42}
 43
 44
 45* html .clearfix {
 46    height: 1%;
 47}
 48
 49a {
 50    color: #37e;
 51    text-decoration: underline;
 52    text-shadow: 0px 2px 0px #fff;
 53}
 54
 55a:hover{
 56    color: #222;
 57}
 58
 59body{
 60    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 61    background-color: #efefef;
 62    padding: 0;
 63    margin: 0;
 64    text-shadow: 0px 2px 0px #efefef;
 65}
 66
 67#container{
 68          background-color: #eaeaea;
 69          width: 640px;
 70         margin: 0 auto;
 71         padding: 12px;
 72-moz-box-shadow: 0px 4px 12px #ccc; /* FF3.5+ */
 73-webkit-box-shadow: 0px 4px 12px #ccc; /* Saf3.0+, Chrome */
 74      box-shadow: 0px 4px 12px #ccc; /* Opera 10.5, IE 9.0 */
 75          filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc'); /* IE6,IE7 */
 76      -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc')"; /* IE8 */
 77}
 78
 79footer{
 80    font-size: 10px;
 81    text-align: center;
 82    margin-top: 24px;
 83    text-shadow: 0px 2px 0px #fff;
 84}
 85
 86/* Button styles from the awesome: http://www.webdesignerwall.com/demo/css-buttons.html */
 87
 88.button {
 89    display: inline-block;
 90    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
 91    *display: inline;
 92    vertical-align: baseline;
 93    margin: 0 2px;
 94    outline: none;
 95    cursor: pointer;
 96    text-align: center;
 97    text-decoration: none;
 98    font: 14px/100% Arial, Helvetica, sans-serif;
 99    padding: .5em 2em .55em;
100    text-shadow: 0 1px 1px rgba(0,0,0,.3);
101    -webkit-border-radius: .5em;
102    -moz-border-radius: .5em;
103    border-radius: .5em;
104    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
105    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
106    box-shadow: 0 1px 2px rgba(0,0,0,.2);
107}
108.button:hover {
109    text-decoration: none;
110}
111.button:active {
112    position: relative;
113    top: 1px;
114}
115
116.bigrounded {
117    -webkit-border-radius: 2em;
118    -moz-border-radius: 2em;
119    border-radius: 2em;
120}
121.medium {
122    font-size: 12px;
123    padding: .4em 1.5em .42em;
124}
125.small {
126    font-size: 11px;
127    padding: .2em 1em .275em;
128}
129
130
131/* white */
132.white {
133    color: #606060;
134    border: solid 1px #b7b7b7;
135    background: #fff;
136    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
137    background: -moz-linear-gradient(top,  #fff,  #ededed);
138    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
139}
140.white:hover {
141    background: #ededed;
142    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
143    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
144    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
145}
146.white:active {
147    color: #999;
148    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
149    background: -moz-linear-gradient(top,  #ededed,  #fff);
150    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
151}
152
153.banner{
154    border-bottom: 12px solid #222;
155    padding: 0 12px;
156    position: relative;
157}
158
159.banner h1{
160    font-weight: 100;
161    font-size: 32px;
162    line-height: 48px;
163}
164
165
166.banner h3{
167    color: #666;
168    font-weight: normal;
169    font-size: 16px;
170    line-height: 24px;
171    margin-bottom: 12px;
172}
173
174.banner nav{
175    position: absolute;
176    right: 0;
177    bottom: 0;
178}
179
180.banner nav li{
181    list-style-type: none;
182    float: left;
183}
184
185.banner nav li a.button{
186    margin:0;
187    -webkit-border-bottom-left-radius: 0;
188    -webkit-border-bottom-right-radius: 0;
189    -moz-border-radius-bottomleft: 0;
190    -moz-border-radius-bottomright: 0;
191    border-bottom-left-radius: 0;
192    border-bottom-right-radius: 0;
193}
194
195.banner nav li a.button:hover{
196    color: #000;
197}
198.banner nav li a.button.active{
199    color: #d7d7d7;
200    border: solid 1px #333;
201    background: #333;
202    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
203    background: -moz-linear-gradient(top,  #666,  #000);
204    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
205}
206
207.blog_excerpt{
208    padding-bottom: 24px;
209}
210
211.blog_excerpt .post time{
212    float: none;
213    clear: left;
214}
215
216.blog_excerpt .button{
217    float: right;
218}
219
220.blog_excerpt h3,
221h1.title{
222    font-size: 24px;
223    line-height: 36px;
224    border-bottom: 1px solid #ccc;
225}
226
227.blog_excerpt h3{
228    margin-bottom: 24px;
229}
230
231section.content{
232    padding: 12px;
233}
234
235/* listing */
236
237.listing{
238    margin-top: 24px;
239}
240
241.listing img{
242    width: 120px;
243    height: 120px;
244}
245
246.listing li{
247    background-color: #ededed;
248    list-style-type: none;
249    float: left;
250    width: 272px;
251    margin-right: 24px;
252    margin-bottom: 24px;
253    padding: 12px;
254    -moz-box-shadow: 0px 4px 12px #ccc; /* FF3.5+ */
255    -webkit-box-shadow: 0px 4px 12px #ccc; /* Saf3.0+, Chrome */
256          box-shadow: 0px 4px 12px #ccc; /* Opera 10.5, IE 9.0 */
257              filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc'); /* IE6,IE7 */
258          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc')"; /* IE8 */
259
260}
261
262.listing li:nth-child(2){
263    margin-right: 0;
264}
265
266.listing li:nth-child(3){
267    clear: left;
268}
269
270.listing li p{
271    font-size: 10px;
272    line-height: 12px;
273    margin-bottom: 12px;
274}
275
276
277.listing h3{
278    border-bottom: 1px solid #ccc;
279    font-size: 12px;
280    line-height: 18px;
281    margin-bottom: 6px;
282}
283
284.listing time{
285    display:block;
286    border-top: 1px solid #ccc;
287    padding-top: 4px;
288    font-size: 10px;
289}
290
291/* Content */
292
293article.post p{
294    font-size: 12px;
295    line-height: 24px;
296    margin: 6px 0;
297}
298
299article.post img{
300    display: block;
301    margin-bottom: 24px;
302}
303
304.post time{
305    font-size: 12px;
306    color: #999;
307    float:left;
308    margin-top: 6px;
309}
310
311ul.tags{
312    margin-bottom: 24px;
313    text-align: right;
314}
315
316ul.tags li{
317    list-style-type: none;
318    display: inline;
319}
320
321ul.tags li a{
322    color: #999;
323    text-decoration: none;
324}
325
326h1.tag:before,
327ul.tags li a:before{
328    content: '\00AB';
329}
330
331h1.tag:after,
332ul.tags li a:after{
333    content: '\00BB';
334}
335
336ul.tags li a:hover{
337    color: #222;
338}
339
340h1 a, h2 a, h3 a{
341    text-decoration: none;
342}
343
344nav.post_nav{
345    background-color: #efefef;
346    position: fixed;
347    width: 124px;
348    margin-left: -186px;
349    font-size: 12px;
350    padding: 12px;
351    padding-right: 24px;
352    -moz-box-shadow: 0px 2px 4px #ccc; /* FF3.5+ */
353    -webkit-box-shadow: 0px 2px 4px #ccc; /* Saf3.0+, Chrome */
354          box-shadow: 0px 2px 4px #ccc; /* Opera 10.5, IE 9.0 */
355              filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc'); /* IE6,IE7 */
356          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc')"; /* IE8 */
357
358}
359
360a.backlink{
361    display:block;
362    line-height: 24px;
363    margin-bottom: 12px;
364}
365
366a.backlink:before{
367    content: '\2190';
368}
369
370a.prev:before{
371    content: '\00AB';
372}
373
374a.next:after{
375    content: '\00BB';
376}
377
378a.prev{
379    margin-right: 12px;
380}
381
382a.prev,
383a.next{
384    display: block;
385    float: left;
386    margin-bottom: 12px;
387}
388
389a.next{ float: right };
390
391a.backlink:hover, a.prev:hover, a.next:hover{
392    color: #222;
393}
394
395.post_nav a.disabled{
396    color: #ccc;
397}
398
399.post_nav a{
400    color: #666;
401    text-decoration: none;
402    text-shadow: 0px 2px 0px #fff;
403}
404
405.post_nav div{
406    display: block;
407    float: left;
408    width: 58px;
409    overflow: hidden;
410    margin-left: 4px;
411}
412
413#facebook_like{
414    margin-top: 1px;
415}
416
417.archives ul.posts{
418    margin-top: 24px;
419}
420
421.archives li.post{
422    list-style-type: none;
423    border-bottom: 1px dotted #ccc;
424    padding: 12px 0;
425
426}
427
428.archives li.post time{
429    color: #999;
430    text-shadow: 0px 2px 0px #fff;
431    margin-right: 24px;
432    display:block;
433    float: left;
434    width: 120px;
435}
436
437.archives li.post a{
438    float: left;
439}
440
441.archives ul.tags{
442    float: right;
443    margin-bottom:0;
444}
445
446
447.codebox {
448  margin-top: 8px;
449  margin-bottom: 12px;
450}
451.code {
452  position: relative;
453  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
454  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
455  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
456  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
457  background-color: #F0F3F3;
458}
459.code figcaption {
460  font-size: 10px;
461  position: absolute;
462  bottom: 3px;
463  right: 12px;
464  color: rgba(0, 0, 0, 0.5);
465}
466.highlight pre {
467  font-size: 12px;
468  padding: 16px 12px 12px;
469  line-height: 24px;
470  margin-bottom: 8px;
471}