android-developer-core.css revision 8a0625bcb898fdbfe3b81e7b31651ed9912b6bb0
1/* file: android-developer-core.css
2   author: smain
3   date: september 2008
4   info: core developer styles (developer.android.com)
5*/
6
7
8/* RESET STYLES */
9
10html,body,div,h1,h2,h3,h4,h5,h6,p,img,
11dl,dt,dd,ol,ul,li,table,caption,tbody,
12tfoot,thead,tr,th,td,form,fieldset,
13embed,object,applet {
14  margin: 0;
15  padding: 0;
16  border: 0;
17}
18
19.rebox {
20  background:#daf3fc;
21  margin-bottom:1.5em;
22  -moz-border-radius:5px;
23  -webkit-border-radius:5px;
24}
25.rebox.lil p img {
26  display:block;
27  margin-bottom:2em;
28}
29
30.rebox .p {
31  padding:1.5em;
32  line-height:1.25em;
33}
34
35.p-r {
36  padding-right:1.5em;
37}
38
39.rebox h2, .rebox h3 {
40  font-size:16px;
41  color:#fff;
42  display:block;
43  background:url('/assets/images/rebox-gradient.gif') no-repeat center bottom #95c0d0;
44  padding:.5em .5em .5em .75em;
45  -moz-border-radius-topright:5px;
46  -moz-border-radius-topleft:5px;
47  -webkit-border-top-right-radius:5px;
48  -webkit-border-top-left-radius:5px;
49}
50
51.rebox.lil {
52}
53.rebox.lil img {
54  float:left;
55  margin:0 1em 0 0;
56  padding:0 0 3em 0;
57}
58
59.rebox.green {
60  background:#d4e9a9;
61}
62
63.rebox.green h2, .rebox.green h3 {
64  background:url('images/rebox-gradient-green.gif') no-repeat center bottom #aaca46;
65  font-weight:bold;
66}
67
68.rebox.green a:link, .rebox.green a:visited {
69  color:#360;
70}
71
72/* BASICS */
73
74html, body {
75  overflow:hidden; /* keeps scrollbar off IE */
76  background-color:#fff;
77}
78
79body {
80  font-family:arial,sans-serif;
81  color:#000;
82  font-size:13px;
83  color:#333;
84  background-image:url(images/bg_fade.jpg);
85  background-repeat:repeat-x;
86}
87
88a, a code {
89  color:#006699;
90}
91
92
93a:active,
94a:active code {
95  color:#f00;
96}
97
98a:visited,
99a:visited code {
100  color:#006699;
101}
102
103input, select,
104textarea, option {
105  font-family:inherit;
106  font-size:inherit;
107  padding:0;
108  margin:0;
109}
110
111option {
112  padding:0 4px;
113}
114
115p {
116  padding:0;
117  margin:0 0 1em;
118}
119
120code, pre {
121  color:#007000;
122  font-family:monospace;
123  line-height:1em;
124}
125
126var {
127  color:#007000;
128  font-style:italic;
129}
130
131pre {
132  border:1px solid #ccc;
133  background-color:#fafafa;
134  padding:10px;
135  margin:0 0 1em 1em;
136  overflow:auto;
137  line-height:inherit; /* fixes vertical scrolling in webkit */
138}
139
140h1,h2,h3,h4,h5 {
141  margin:1em 0;
142  padding:0;
143}
144
145p,ul,ol,dl,dd,dt,li {
146  line-height:1.3em;
147}
148
149ul,ol {
150  margin:0 0 .8em;
151  padding:0 0 0 2em;
152}
153
154li {
155  padding:0 0 .5em;
156}
157
158dl {
159  margin:0 0 1em 0;
160  padding:0;
161}
162
163dt {
164  margin:0;
165  padding:0;
166}
167
168dd {
169  margin:0 0 1em;
170  padding:0 0 0 2em;
171}
172
173li p {
174  margin:.5em 0 0;
175}
176
177dd p {
178  margin:1em 0 0;
179}
180
181li pre, li table, li img {
182  margin:.5em 0 0 1em;
183}
184
185dd pre, dd table, dd img {
186  margin:1em 0 0 1em;
187}
188
189li ul,
190li ol,
191dd ul,
192dd ol {
193  margin:0;
194  padding: 0 0 0 2em;
195}
196
197li li,
198dd li {
199  margin:0;
200  padding:.5em 0 0;
201}
202
203dl dl,
204ol dl,
205ul dl {
206  margin:0 0 1em;
207  padding:0;
208}
209
210table {
211  font-size:1em;
212  margin:0 0 1em;
213  padding:0;
214  border-collapse:collapse;
215  border-width:0;
216  empty-cells:show;
217}
218
219td,th {
220  border:1px solid #ccc;
221  padding:6px 12px;
222  text-align:left;
223  vertical-align:top;
224  background-color:inherit;
225}
226
227th {
228  background-color:#dee8f1;
229}
230
231hr.blue {
232  background-color:#DDF0F2;
233  border:none;
234  height:5px;
235  margin:20px 0 10px;
236}
237
238/* LAYOUT */
239#body-content {
240  /* "Preliminary" watermark for preview releases and interim builds.
241  background:transparent url(images/preliminary.png) repeat scroll 0 0;  */
242  margin:0;
243  position:relative;
244  width:100%;
245}
246
247#header {
248  height: 114px;
249  position:relative;
250  z-index:100;
251  min-width:576px;
252  padding:0 10px;
253  border-bottom:3px solid #94b922;
254}
255
256#headerLeft{
257  padding: 25px 0 0;
258}
259
260#headerLeft img{
261  height:50px;
262  width:349px;
263}
264
265#headerRight {
266  position:absolute;
267  right:0;
268  top:0;
269  text-align:right;
270}
271
272/* Tabs in the header */
273#header ul {
274  list-style: none;
275  margin: 7px 0 0;
276  padding: 0;
277  height: 29px;
278}
279
280#header li {
281  float: left;
282  margin: 0px 2px 0px 0px;
283  padding:0;
284}
285
286#header li a {
287  text-decoration: none;
288  display: block;
289  background-image: url(images/bg_images_sprite.png);
290  background-position: 0 -58px;
291  background-repeat: no-repeat;
292  color: #666;
293  font-size: 13px;
294  font-weight: bold;
295  width: 94px;
296  height: 29px;
297  text-align: center;
298  margin: 0px;
299}
300
301#header li a:hover {
302  background-image: url(images/bg_images_sprite.png);
303  background-position: 0 -29px;
304  background-repeat: no-repeat;
305}
306
307#header li a span {
308  position:relative;
309  top:7px;
310}
311
312#header li a span+span {
313  display:none;
314}
315
316/* TAB HIGHLIGHTING */
317.home #home-link a,
318.community #community-link a,
319.porting #porting-link a,
320.source #source-link a,
321.about #about-link a,
322.downloads #downloads-link a,
323.compatibility #compatibility-link a,
324.videos #videos-link a {
325  background-image: url(images/bg_images_sprite.png);
326  background-position: 0 0;
327  background-repeat: no-repeat;
328  color: #fff;
329  font-weight: bold;
330  cursor:default;
331}
332
333.home #home-link a:hover,
334.community #community-link a:hover,
335.home #home-link a:hover,
336.community #community-link a:hover,
337.porting #porting-link a:hover,
338.source #source-link a:hover,
339.about #about-link a:hover,
340.downloads #downloads-link a:hover,
341.compatibility #compatibility-link a:hover,
342.videos #videos-link  a:hover {
343  background-image: url(images/bg_images_sprite.png);
344  background-position: 0 0;
345}
346
347#headerLinks {
348  margin:10px 10px 0 0;
349  height:13px;
350  font-size: 11px;
351  vertical-align: top;
352}
353
354#headerLinks a {
355  color: #7FA9B5;
356}
357
358#headerLinks img {
359  vertical-align:middle;
360}
361
362#language {
363  margin:0 10px 0 4px;
364}
365
366#search {
367  height:45px;
368  margin:15px 10px 0 0;
369}
370
371/* main */
372
373#mainBodyFluid {
374  margin: 20px 10px;
375  color:#333;
376}
377
378#mainBodyFixed {
379  margin: 20px 10px;
380  color: #333;
381  width:930px;
382  position:relative;
383}
384
385#mainBodyFixed h3,
386#mainBodyFluid h3 {
387  color:#336666;
388  font-size:1.25em;
389  margin: 0em 0em 0em 0em;
390  padding-bottom:.5em;
391}
392
393#mainBodyFixed h2,
394#mainBodyFluid h2 {
395  color:#336666;
396  font-size:1.25em;
397  margin: 0;
398  padding-bottom:.5em;
399}
400
401#mainBodyFixed h1,
402#mainBodyFluid h1 {
403  color:#435A6E;
404  font-size:1.7em;
405  margin: 1em 0;
406}
407
408#mainBodyFixed .green,
409#mainBodyFluid .green,
410#jd-content .green {
411  color:#7BB026;
412  background-color:none;
413}
414
415#mainBodyLeft {
416  float: left;
417  width: 600px;
418  margin-right: 20px;
419  color: #333;
420  position:relative;
421}
422
423div.indent {
424  margin-left: 40px;
425  margin-right: 70px;
426}
427
428#mainBodyLeft p {
429  color: #333;
430  font-size: 13px;
431}
432
433#mainBodyLeft p.blue {
434  color: #669999;
435}
436
437#mainBodyLeft #communityDiv {
438  float: left;
439  background-image:url(images/bg_community_leftDiv.jpg);
440  background-repeat: no-repeat;
441  width: 581px;
442  height: 347px;
443  padding: 20px 0px 0px 20px;
444}
445
446#mainBodyRight {
447  float: left;
448  width: 300px;
449  color: #333;
450}
451
452#mainBodyRight p {
453  padding-right: 50px;
454  color: #333;
455}
456
457#mainBodyRight table {
458  width: 100%;
459}
460
461#mainBodyRight td {
462  border:0px solid #666;
463  padding:0px 5px;
464  text-align:left;
465}
466
467#mainBodyRight .blueBorderBox {
468  border:5px solid #ddf0f2;
469  padding:18px 18px 18px 18px;
470  text-align:left;
471}
472
473#mainBodyFixed .seperator {
474  background-image:url(images/hr_gray_side.jpg);
475  background-repeat:no-repeat;
476  width: 100%;
477  float: left;
478  clear: both;
479}
480
481#mainBodyBottom {
482  float: left;
483  width: 100%;
484  clear:both;
485  color: #333;
486}
487
488#mainBodyBottom .seperator {
489  background-image:url(images/hr_gray_main.jpg);
490  background-repeat:no-repeat;
491  width: 100%;
492  float: left;
493  clear: both;
494}
495
496/* Footer */
497#footer {
498  float: left;
499  width:90%;
500  margin: 20px;
501  color: #aaa;
502  font-size: 11px;
503}
504
505#footer a {
506  color: #aaa;
507  font-size: 11px;
508}
509
510#footer a:hover {
511  text-decoration: underline;
512  color:#aaa;
513}
514
515#footerlinks {
516  margin-top:2px;
517}
518
519#footerlinks a,
520#footerlinks a:visited {
521  color:#006699;
522}
523
524#homeBottom td {
525  border:0px solid #666;
526  padding: 8px 18px 8px 18px;
527}
528
529#homeBottom table {
530  width: 100%;
531}
532
533
534#homeBottom {
535  padding: 0px 0px 0px 0px;
536  float: left;
537  width: 585px;
538  height: 165px;
539  background-image:url(images/home/bg_home_bottom.jpg);
540  background-repeat: no-repeat;
541}
542
543.groupTable {
544  width: 100%;
545}
546
547.groupTable th {
548  padding: 10px;
549  color: #ffffff;
550  background-color: #6D8293;
551  border: 2px solid #fff;
552}
553
554.groupTable td {
555  padding: 10px;
556  color: #333333;
557  background-color: #d9d9d9;
558  border: 2px solid #fff;
559}
560
561.groupTable .evenRow td {
562  background-color: #ededed;
563}
564
565span.BigBlue {
566  color:#336666;
567  font-size:1.25em;
568  margin: 0em 0em 0em 0em;
569  padding-bottom:.5em;
570  font-weight: bold;
571}
572
573span.emBlue {
574  color: #336666;
575  font-style:italic;
576}
577
578.pageTable {
579  width: 95%;
580  border: none;
581}
582
583.pageTable img {
584vertical-align: bottom;
585}
586
587.pageTable td {
588  border: none;
589}
590
591.pageTable td.leftNav {
592  width: 100px;
593}
594
595.greenBox {
596  margin: 10px 30px 10px 30px;
597  padding: 10px 20px 10px 20px;
598  background-color: #EBF3DB;
599  width: 75%;
600}
601
602.blueBox {
603  margin: 10px 30px 10px 30px;
604  padding: 10px 20px 10px 20px;
605  background-color: #DDF0F2;
606  width: 75%;
607}
608
609.blueHR {
610  margin: 10px 30px 10px 30px;
611  height: 5px;
612  background-color: #DDF0F2;
613  width: 75%;
614}
615
616/* SEARCH FILTER */
617#search_autocomplete {
618  color:#aaa;
619}
620
621#search-button {
622  display:inline;
623}
624
625#search_filtered_div {
626  position:absolute;
627  margin-top:-1px;
628  z-index:101;
629  border:1px solid #BCCDF0;
630  background-color:#fff;
631}
632
633#search_filtered {
634  min-width:100%;
635}
636#search_filtered td{
637  background-color:#fff;
638  border-bottom: 1px solid #669999;
639  line-height:1.5em;
640}
641
642#search_filtered .jd-selected {
643  background-color: #94b922;
644  cursor:pointer;
645}
646#search_filtered .jd-selected,
647#search_filtered .jd-selected a {
648  color:#fff;
649}
650
651.no-display {
652  display: none;
653}
654
655.jd-autocomplete {
656  font-family: Arial, sans-serif;
657  padding-left: 6px;
658  padding-right: 6px;
659  padding-top: 1px;
660  padding-bottom: 1px;
661  font-size: .8em;
662  border: none;
663  margin: 0;
664  line-height: 1.05em;
665}
666
667.show-row {
668  display: table-row;
669}
670.hide-row {
671  display: hidden;
672}
673
674/* SEARCH */
675
676/* restrict global search form width */
677#searchForm {
678  width:350px;
679}
680
681#searchTxt {
682  width:200px;
683}
684
685/* disable twiddle and size selectors for left column */
686#leftSearchControl div {
687  width: 100%;
688}
689
690#leftSearchControl .gsc-twiddle {
691  background-image : none;
692}
693
694#leftSearchControl td, #searchForm td {
695  border: 0px solid #000;
696}
697
698#leftSearchControl .gsc-resultsHeader .gsc-title {
699  padding-left : 0px;
700  font-weight : bold;
701  font-size : 13px;
702  color:#006699;
703  display : none;
704}
705
706#leftSearchControl .gsc-resultsHeader div.gsc-results-selector {
707  display : none;
708}
709
710#leftSearchControl .gsc-resultsRoot {
711  padding-top : 6px;
712}
713
714#leftSearchControl div.gs-visibleUrl-long {
715  display : block;
716  color:#006699;
717}
718
719.gsc-webResult div.gs-visibleUrl-short,
720table.gsc-branding,
721.gsc-clear-button {
722  display : none;
723}
724
725.gsc-cursor-box .gsc-cursor div.gsc-cursor-page,
726.gsc-cursor-box .gsc-trailing-more-results a.gsc-trailing-more-results,
727#leftSearchControl a,
728#leftSearchControl a b {
729  color:#006699;
730}
731
732.gsc-resultsHeader {
733  display: none;
734}
735
736/* Disable built in search forms */
737.gsc-control form.gsc-search-box {
738  display : none;
739}
740table.gsc-search-box {
741  margin:6px 0 0 0;
742  border-collapse:collapse;
743}
744
745td.gsc-input {
746  padding:0 2px;
747  width:100%;
748  vertical-align:middle;
749}
750
751input.gsc-input {
752  border:1px solid #BCCDF0;
753  width:99%;
754  padding-left:2px;
755  font-size:.95em;
756}
757
758td.gsc-search-button {
759  text-align: right;
760  padding:0;
761  vertical-align:top;
762}
763
764#search-button {
765  margin:0 0 0 2px;
766  font-size:11px;
767}
768
769/* search result tabs */
770
771#doc-content .gsc-control {
772  position:relative;
773}
774
775#doc-content .gsc-tabsArea {
776  position:relative;
777  white-space:nowrap;
778}
779
780#doc-content .gsc-tabHeader {
781  padding: 3px 6px;
782  position:relative;
783}
784
785#doc-content .gsc-tabHeader.gsc-tabhActive {
786  border-top: 2px solid #94B922;
787}
788
789#doc-content h2#searchTitle {
790  padding:0;
791}
792
793#doc-content .gsc-resultsbox-visible {
794  padding:1em 0 0 6px;
795}
796
797/* CAROUSEL */
798
799#homeMiddle {
800  padding: 0px 0px 0px 0px;
801  float: left;
802  width: 584px;
803  height: 580px;
804  position:relative;
805}
806
807#topAnnouncement {
808  background:url(images/home/bg_home_announcement.png) no-repeat 0 0;
809}
810
811#homeTitle {
812  padding:15px 15px 0;
813  height:30px;
814}
815
816#homeTitle h2 {
817  padding:0;
818}
819
820#announcement-block {
821  padding:0 15px 0;
822  overflow:hidden;
823  background: url(images/hr_gray_side.jpg) no-repeat 15px 0;
824  zoom:1;
825}
826
827#announcement-block>* {
828  padding:15px 0 0;
829}
830
831#announcement-block img {
832  float:left;
833  margin:0 30px 0 0;
834}
835
836#announcement {
837  float:left;
838  margin:0;
839}
840
841#carousel {
842  background:url(images/home/bg_home_carousel.png) no-repeat 0 0;
843  position:relative;
844  height:400px;
845}
846
847#carouselMain {
848	background: url(images/home/bg_home_carousel_board.png) 0 0 no-repeat;
849	height:auto;
850  padding: 25px 21px 0;
851  overflow:hidden;
852  position:relative;
853  zoom:1; /*IE6*/
854}
855
856#carouselMain img {
857  margin:0;
858}
859
860#carouselMain .bulletinDesc h3 {
861	margin:0;
862	padding:0;
863}
864
865#carouselMain .bulletinDesc p {
866	margin:0;
867	padding:0.7em 0 0;
868}
869
870#carouselWheel {
871	background: url(images/home/bg_home_carousel_wheel.png) 0 0 no-repeat;
872	padding-top:40px;
873	height:150px;
874}
875
876.clearer { clear:both; }
877
878a#arrow-left, a#arrow-right {
879  float:left;
880  width:42px;
881  height:42px;
882  background-image:url(images/home/carousel_buttons_sprite.png);
883  background-repeat:no-repeat;
884}
885a#arrow-left {
886  margin:35px 3px 0 10px;
887}
888a#arrow-right {
889  margin:35px 10px 0 0;
890}
891a.arrow-left-off,
892a#arrow-left.arrow-left-off:hover {
893  background-position:0 0;
894}
895a.arrow-right-off,
896a#arrow-right.arrow-right-off:hover {
897  background-position:-42px 0;
898}
899a#arrow-left:hover {
900  background-position:0 -42px;
901}
902a#arrow-right:hover {
903  background-position:-42px -42px;
904}
905a.arrow-left-on {
906  background-position:0 0;
907}
908a.arrow-right-on {
909  background-position:-42px 0;
910}
911a.arrow-right-off,
912a.arrow-left-off {
913  cursor:default;
914}
915
916.app-list-container {
917  margin:0 20px;
918  position:relative;
919  width:100%;
920}
921
922div#list-clip {
923  height:110px;
924  width:438px;
925  overflow:hidden;
926  position:relative;
927  float:left;
928}
929
930div#app-list {
931  left:0;
932  z-index:1;
933  position:absolute;
934  margin:11px 0 0;
935  _margin-top:13px;
936  width:1000%;
937}
938
939#app-list a {
940  display:block;
941  float:left;
942  height:90px;
943  width:90px;
944  margin:0 24px 0;
945  padding:3px;
946  background:#99cccc;
947  -webkit-border-radius:7px;
948  -moz-border-radius:7px;
949  border-radius:7px;
950  text-decoration:none;
951  text-align:center;
952  font-size:11px;
953  line-height:11px;
954}
955
956#app-list a span {
957  position:relative;
958  top:-4px;
959}
960
961#app-list img {
962  width:90px;
963  height:70px;
964  margin:0;
965}
966
967#app-list a.selected,
968#app-list a:active.selected,
969#app-list a:hover.selected {
970  background:#A4C639;
971  color:#fff;
972  cursor:default;
973  text-decoration:none;
974}
975
976#app-list a:hover,
977#app-list a:active {
978  background:#ff9900;
979}
980
981#app-list a:hover span,
982#app-list a:active span {
983  text-decoration:underline;
984}
985
986#droid-name {
987  padding-top:.5em;
988  color:#666;
989  padding-bottom:.25em;
990}
991
992/*IE6*/
993* html #app-list a { zoom: 1; margin:0 24px 0 15px;}
994
995* html #list-clip {
996  width:430px !important;
997}
998
999/*carousel bulletin layouts*/
1000/*460px width*/
1001/*185px height*/
1002.img-left {
1003  float:left;
1004  width:230px;
1005  overflow:hidden;
1006  padding:8px 0 8px 8px;
1007}
1008.desc-right {
1009  float:left;
1010  width:270px;
1011  padding:10px;
1012}
1013.img-right {
1014  float:right;
1015  width:220px;
1016  overflow:hidden;
1017  padding:8px 8px 8px 0;
1018}
1019.desc-left {
1020  float:right;
1021  width:280px;
1022  padding:10px;
1023  text-align:right;
1024}
1025.img-top {
1026  padding:20px 20px 0;
1027}
1028.desc-bottom {
1029  padding:10px;
1030}
1031
1032
1033/* VIDEO PAGE */
1034
1035#mainBodyLeft.videoPlayer {
1036  width:570px;
1037}
1038
1039#mainBodyRight.videoPlayer {
1040  width:330px;
1041}
1042
1043/* player */
1044
1045#videoPlayerBox {
1046  background-color: #DAF3FC;
1047  border-radius:7px;
1048  -moz-border-radius:7px;
1049  -webkit-border-radius:7px;
1050  width:530px;
1051  padding:20px;
1052  border:1px solid #d3ecf5;
1053  box-shadow:2px 3px 1px #eee;
1054  -moz-box-shadow:2px 3px 1px #eee;
1055  -webkit-box-shadow:2px 3px 1px #eee;
1056}
1057
1058#videoBorder {
1059  background-color: #FFF;
1060  min-height:399px;
1061  height:auto !important;
1062  border:1px solid #ccdada;
1063  border-radius:7px 7px 0 0;
1064  -moz-border-radius:7px 7px 0 0;
1065  -webkit-border-top-left-radius:7px;
1066  -webkit-border-top-right-radius:7px;
1067}
1068
1069#videoPlayerTitle {
1070  width:500px;
1071  padding:15px 15px 0;
1072}
1073
1074#videoPlayerTitle h2 {
1075  font-weight:bold;
1076  font-size:1.2em;
1077  color:#336666;
1078  margin:0;
1079  padding:0;
1080}
1081
1082#objectWrapper {
1083  padding:15px 15px;
1084  height:334px;
1085  width:500px;
1086}
1087
1088/* playlist tabs */
1089
1090ul#videoTabs {
1091  list-style-type:none;
1092  padding:0;
1093  clear:both;
1094  margin:0;
1095  padding: 20px 0 0 15px;
1096  zoom:1; /* IE7/8, otherwise top-padding is double */
1097}
1098
1099ul#videoTabs li {
1100  display:inline;
1101  padding:0;
1102  margin:0 3px 0 0;
1103  line-height:2em;
1104}
1105
1106ul#videoTabs li a {
1107  border-radius:7px 7px 0 0;
1108  -moz-border-radius:7px 7px 0 0;
1109  -webkit-border-top-left-radius:7px;
1110  -webkit-border-top-right-radius:7px;
1111  background:#95c0d0;
1112  color:#fff;
1113  text-decoration:none;
1114  padding:.45em 1.5em;
1115  font-weight:bold;
1116}
1117
1118ul#videoTabs li.selected a {
1119  font-weight:bold;
1120  text-decoration:none;
1121  color:#555;
1122  background:#daf3fc;
1123  border-bottom:1px solid #daf3fc;
1124}
1125
1126ul#videoTabs li:hover a {
1127  background:#85acba;
1128}
1129
1130ul#videoTabs li.selected:hover a {
1131  background:#daf3fc;
1132}
1133
1134/* playlists */
1135
1136#videos {
1137  background:#daf3fc;
1138  margin-bottom:1.5em;
1139  padding:15px;
1140  border-radius:5px;
1141  -moz-border-radius:5px;
1142  -webkit-border-radius:5px;
1143  box-shadow:2px 3px 1px #eee;
1144  -moz-box-shadow:2px 3px 1px #eee;
1145  -webkit-box-shadow:2px 3px 1px #eee;
1146}
1147
1148#videos div {
1149  display:none;
1150}
1151
1152#videos div.selected {
1153  display:block;
1154}
1155
1156ul.videoPreviews {
1157  list-style:none;
1158  padding:0;
1159  margin:0;
1160  zoom:1; /* IE, otherwise, layout doesn't update when showing 'more' */
1161}
1162
1163ul.videoPreviews li {
1164  margin:0 0 5px;
1165  padding:0;
1166  overflow:hidden;
1167  position:relative;
1168}
1169
1170#mainBodyFixed ul.videoPreviews h3 {
1171  font-size: 12px;
1172  margin:0 0 1em 130px;
1173  padding:0;
1174  font-weight:bold;
1175  color:inherit;
1176}
1177
1178ul.videoPreviews a {
1179  margin:1px;
1180  padding:10px;
1181  text-decoration:none;
1182  height:90px;
1183  display:block;
1184  border-radius:5px;
1185  -moz-border-radius:5px;
1186  -webkit-border-radius:5px;
1187  background-color:transparent;
1188}
1189
1190ul.videoPreviews a:hover {
1191  background-color:#FFF;
1192  border:none; /* IE8, otherwise, bg doesn't work */
1193}
1194
1195ul.videoPreviews a.selected {
1196  background-color: #FF9900;
1197}
1198
1199ul.videoPreviews img {
1200  float:left;
1201  clear:left;
1202  margin:0;
1203}
1204
1205ul.videoPreviews h3 {
1206  font-size:12px;
1207  font-weight:bold;
1208  text-decoration:none;
1209  margin:0 0 1em 130px;
1210  padding:0;
1211}
1212
1213ul.videoPreviews p {
1214  font-size: 12px;
1215  text-decoration:none;
1216  margin:0 0 1.2em 130px;
1217}
1218
1219ul.videoPreviews p.full {
1220  display:none;
1221}
1222
1223ul.videoPreviews span.more {
1224  padding:0 0 0 12px;
1225  background:url(images/arrow_bluelink_down.png) 0 2px no-repeat;
1226}
1227
1228ul.videoPreviews span.less {
1229  padding:0 0 0 12px;
1230  background:url(images/arrow_bluelink_up.png) 0 2px no-repeat;
1231  display:none;
1232}
1233
1234ul.videoPreviews p.toggle {
1235  position:absolute;
1236  margin:0;
1237  margin-top:-23px; /* instead of bottom:23px, because IE won't do it correctly */
1238  left:140px;
1239}
1240
1241ul.videoPreviews p.toggle a {
1242  height:auto;
1243  margin:0;
1244  padding:0;
1245  zoom:1; /* IE6, otherwise the margin considers the img on redraws */
1246}
1247
1248ul.videoPreviews p.toggle a:hover {
1249  text-decoration:underline;
1250  background:transparent; /* IE6, otherwise it inherits white */
1251}
1252
1253/* featured videos */
1254
1255#mainBodyRight h2 {
1256  padding:0 0 5px;
1257}
1258
1259#mainBodyRight ul.videoPreviews {
1260  margin:10px 0 0;
1261}
1262
1263#mainBodyRight ul.videoPreviews li {
1264  font-size:11px;
1265  line-height:13px;
1266  margin:0 0 5px;
1267  padding:0;
1268}
1269
1270#mainBodyRight ul.videoPreviews h3 {
1271  padding:0;
1272  margin:0;
1273}
1274
1275#mainBodyRight ul.videoPreviews a {
1276  text-decoration:none;
1277  height:108px;
1278  border:1px solid #FFF;
1279}
1280
1281#mainBodyRight ul.videoPreviews a:hover {
1282  border:1px solid #CCDADA;
1283}
1284
1285#mainBodyRight ul.videoPreviews a.selected {
1286  border:1px solid #FFF;
1287}
1288
1289#mainBodyRight ul.videoPreviews p {
1290	line-height:1.2em;
1291  padding:0;
1292  margin:4px 0 0 130px;
1293}
1294
1295#mainBodyRight ul.videoPreviews img {
1296	margin-top:5px;
1297}
1298