| 8146 |
amit.gupta |
1 |
@charset "utf-8";
|
|
|
2 |
|
|
|
3 |
@font-face {
|
|
|
4 |
font-family: 'Helvetica 65 Medium';
|
|
|
5 |
src: url('../fonts/helvetica_65_medium-webfont.eot');
|
|
|
6 |
src: url('../fonts/helvetica_65_medium-webfont.eot?#iefix') format('embedded-opentype'),
|
|
|
7 |
url('../fonts/helvetica_65_medium-webfont.woff') format('woff'),
|
|
|
8 |
url('../fonts/helvetica_65_medium-webfont.ttf') format('truetype'),
|
|
|
9 |
url('../fonts/helvetica_65_medium-webfont.svg#helvetica_neuemedium') format('svg');
|
|
|
10 |
font-weight: normal;
|
|
|
11 |
font-style: normal;
|
|
|
12 |
}
|
|
|
13 |
|
|
|
14 |
@font-face {
|
|
|
15 |
font-family: 'Helvetica Neue Light';
|
|
|
16 |
src: url('../fonts/helvetica_45_light-webfont.eot');
|
|
|
17 |
src: url('../fonts/helvetica_45_light-webfont.eot?#iefix') format('embedded-opentype'),
|
|
|
18 |
url('../fonts/helvetica_45_light-webfont.woff') format('woff'),
|
|
|
19 |
url('../fonts/helvetica_45_light-webfont.ttf') format('truetype'),
|
|
|
20 |
url('../fonts/helvetica_45_light-webfont.svg#helvetica_neuemedium') format('svg');
|
|
|
21 |
font-weight: normal;
|
|
|
22 |
font-style: normal;
|
|
|
23 |
}
|
|
|
24 |
|
|
|
25 |
.inline_block,
|
|
|
26 |
/* General */ [class^="icon_"], [class*="dropdown_con"], .color_square, .dot_caption,
|
|
|
27 |
/* Arrow links */ .arrow_link, .landing_middle_content a:before,
|
|
|
28 |
/* Back to Top */ .back_to_top_arrow, .back_to_top_text,
|
|
|
29 |
/* Buttons */ [class^="btn_"],
|
|
|
30 |
/* Form Hint Icon */ .no_error .icon_hint, .has_error .icon_hint,
|
|
|
31 |
/* Form Hints */ .form_hint.show, .form_hint.has_error, .form_hint.no_error,
|
|
|
32 |
/* Header */ .logo_digi, .main_nav > a, .sub_nav > a,
|
|
|
33 |
/* Inputs */ .input_radio, .input_checkbox, .grey_textbox,
|
|
|
34 |
/* Pagination */ .prev_page, .next_page, .page_num, .page_dot,
|
|
|
35 |
/* Popups */ .close_popup, .popup_header .close_popup:after,
|
|
|
36 |
/* Tabs */ .content_tabber, .tabber_label
|
|
|
37 |
{ display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
|
|
|
38 |
|
|
|
39 |
.clearfix:after, .content:after, .precontent:after, .utility_bar:after, #topFooter:after, #bottomFooter:after, .my_cart_content:after, .dot_holder:after, .sub_menu:after, .padded_content:after
|
|
|
40 |
{ content: '.'; width: 0; height: 0; font: 0/0 a; color: transparent; display: block; clear: both; }
|
|
|
41 |
|
|
|
42 |
.clearfix { *zoom: 1; *clear: both; }
|
|
|
43 |
|
|
|
44 |
h1, h2, h3, h4 { color: #21282e; margin: .2em 0 .4em; font-weight: normal; line-height: 1em; }
|
|
|
45 |
h1, h2, h3 { font-family:"Helvetica 65 Medium", Helvetica, Arial, sans-serif; }
|
|
|
46 |
h1 { font-size: 28px; }
|
|
|
47 |
h2 { font-size: 22px; }
|
|
|
48 |
h3 { font-size: 18px; }
|
|
|
49 |
h4 { font-size: 14px; }
|
|
|
50 |
|
|
|
51 |
a, .arrow_link { color: #0091d2; text-decoration: none; }
|
|
|
52 |
|
|
|
53 |
td a, p a, li a { text-decoration: underline; }
|
|
|
54 |
td [class*="btn_"], p [class*="btn_"] { text-decoration: none; }
|
|
|
55 |
|
|
|
56 |
img { -ms-interpolation-mode: bicubic; }
|
|
|
57 |
|
|
|
58 |
hr.one_half_spaced { margin: 1.5em 0; }
|
|
|
59 |
hr.double_spaced { margin: 2em 0; }
|
|
|
60 |
|
|
|
61 |
p { margin: 0; padding: 0 0 1em; }
|
|
|
62 |
|
|
|
63 |
ul, ol { margin: 0; padding: 0; }
|
|
|
64 |
ol { margin: 0 0 1em 1.5em; }
|
|
|
65 |
.bottom_spaced_li li { margin-bottom: 1em; }
|
|
|
66 |
.left_spaced_li li { padding-left: 1.5em; }
|
|
|
67 |
|
|
|
68 |
textarea { font-family: Arial, Helvetica, sans-serif; }
|
|
|
69 |
|
|
|
70 |
.fontBlack { color: #21282e; }
|
|
|
71 |
.fontDarkGrey { color: #666; }
|
|
|
72 |
.fontGrey { color: #999; }
|
|
|
73 |
.fontBlue { color: #0091d2; }
|
|
|
74 |
.fontOrange { color: #fb7a14; }
|
|
|
75 |
.fontRed { color: #f00; }
|
|
|
76 |
|
|
|
77 |
.text_mega { font-size: 38px; }
|
|
|
78 |
|
|
|
79 |
.align_bottom { vertical-align: bottom; }
|
|
|
80 |
span.align_bottom > img { vertical-align: bottom; }
|
|
|
81 |
|
|
|
82 |
.price_text { color: #fb7a14; font-size: 15px; font-weight: bold; }
|
|
|
83 |
.price_text.large { font-size: 20px; }
|
|
|
84 |
.price_text.xlarge { font-size: 25px; }
|
|
|
85 |
|
|
|
86 |
.vertical_middle,
|
|
|
87 |
table .vertical_middle td { vertical-align: middle; }
|
|
|
88 |
.relative { position: relative; }
|
|
|
89 |
|
|
|
90 |
.arrow_link,
|
|
|
91 |
.landing_middle_content a,
|
|
|
92 |
.island .arrow_link,
|
|
|
93 |
.tbl_link_list .arrow_link,
|
|
|
94 |
ul.link_list a { background-position: left 7px; }
|
|
|
95 |
|
|
|
96 |
.warning { color: #f00; font-size: 12px; font-weight: normal; }
|
|
|
97 |
|
|
|
98 |
.notes { font-size: 11px; color: #999; }
|
|
|
99 |
.faded { color: #999; }
|
|
|
100 |
.notes li, .faded li { background-image: url(/cs/site_template/ecommerce/images/general/bullet_point_grey_tiny.png); }
|
|
|
101 |
|
|
|
102 |
.greyBG { background-color: #e2e4e5; }
|
| 8210 |
anupam.sin |
103 |
.blue_bg { background: #2789C1; }
|
| 8146 |
amit.gupta |
104 |
|
|
|
105 |
.horizontal_divider { width: 100%; height: 0; margin-bottom: 2em; position: relative; }
|
|
|
106 |
.horizontal_divider.double_spaced { margin: 1em 0 3em; }
|
|
|
107 |
.horizontal_divider:after { content: ''; width: 100%; height: 57px; position: absolute; top: 0; left: 0; background: url(/cs/site_template/ecommerce/images/general/general_img_divider_sdw.png) center top no-repeat; }
|
|
|
108 |
.grid_3_left_middle .horizontal_divider:after { background-image: url(/cs/site_template/ecommerce/images/general/general_img_divider_sdw_670px.png); }
|
|
|
109 |
|
|
|
110 |
.li [class^="input_"] { float: left; }
|
|
|
111 |
.li .li_content { display: inline-block; *display: inline; *zoom: 1; }
|
|
|
112 |
|
|
|
113 |
/* .greyLine_1px { background: #bdbdbd; height: 1px; } */
|
|
|
114 |
|
|
|
115 |
.black_overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10; background: url(/cs/site_template/ecommerce/images/general/overlay_black.png) repeat; background: rgba(0,0,0,0.7); display: none; }
|
|
|
116 |
.black_overlay.light { background: rgba(0,0,0,0.4); }
|
|
|
117 |
|
|
|
118 |
.white_overlay { width: 100%; height: 100%; background: url(/cs/site_template/ecommerce/images/general/overlay_white_85.png) repeat; background: rgba(255,255,255,0.85); position: absolute; top: 0; left: 0; }
|
|
|
119 |
|
|
|
120 |
@media print {
|
|
|
121 |
.back_to_top { display: none; }
|
|
|
122 |
}
|
|
|
123 |
|
|
|
124 |
|
| 8150 |
amit.gupta |
125 |
|
| 8146 |
amit.gupta |
126 |
.banner_carousel { height: 370px; border: 1px solid #bdbdbd; border-bottom: 0; position: relative; z-index: 4; }
|
|
|
127 |
.banner_carousel.slightly_shorter { height: 340px; }
|
|
|
128 |
.banner_carousel.slightly_x_shorter { height: 320px; }
|
|
|
129 |
.banner_carousel.short { height: 190px; }
|
|
|
130 |
|
|
|
131 |
.banner_carousel h1 { margin: 0 0 .2em; }
|
|
|
132 |
|
|
|
133 |
.banner_carousel .banner_clicker { height: 100%; display: block; background: center top no-repeat; }
|
|
|
134 |
.banner_carousel .banner_clicker.hidden { display: block; }
|
|
|
135 |
.banner_carousel .island_group { width: 205px; position: absolute; top: 10px; right: 10px; z-index: 1; }
|
|
|
136 |
|
|
|
137 |
.dot_holder { height: 10px; position: absolute; bottom: 20px; right: 50%; z-index: 1; }
|
|
|
138 |
.dot_holder .dot { width: 13px; height: 14px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) -80px -60px no-repeat; float: left; margin-left: 5px; }
|
|
|
139 |
.dot_holder .dot.selected { background-position: -93px -60px; }
|
|
|
140 |
|
|
|
141 |
.dot_hoverer { padding: 12px 15px; position: absolute; left: 0; bottom: 45px; background: #fff; -webkit-box-shadow: 0 2px 2px 1px rgba(150,150,150, 0.5); -moz-box-shadow: 0 2px 2px 1px rgba(150,150,150, 0.5); box-shadow: 0 2px 2px 1px rgba(150,150,150, 0.5); display: none; }
|
|
|
142 |
.dot_caption { max-width: 150px; }
|
|
|
143 |
.dot_hoverer:after { content: ''; width: 16px; height: 12px; margin-left: -8px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) -20px 0 no-repeat; position: absolute; left: 50%; bottom: -12px; }
|
|
|
144 |
.dot_hoverer img { margin-right: 10px; vertical-align: middle; }
|
|
|
145 |
|
|
|
146 |
.has_tabbers .dot_holder { bottom: 70px; }
|
|
|
147 |
.has_tabbers .dot_hoverer { bottom: 95px; }
|
|
|
148 |
|
|
|
149 |
.banner_notes { width: 520px; }
|
|
|
150 |
|
|
|
151 |
/*
|
|
|
152 |
* For pages like the Whats Hot template, where the content tabber
|
|
|
153 |
* appears at the bottom of the static banner carousel.
|
|
|
154 |
*/
|
|
|
155 |
.banner_carousel .content_tabber_con { width: 100%; position: absolute; bottom: 0; left: 0; }
|
|
|
156 |
.banner_carousel .content_tabber_con.multi_page { bottom: -10px; }
|
|
|
157 |
.banner_carousel + .utility_bar { border-top: 0; }
|
|
|
158 |
.banner_carousel .content_tabber_con .content_tabber:first-child { margin-left: 10px; }
|
|
|
159 |
|
|
|
160 |
.sub_search { width: 440px; margin: .5em 10px 1em; font-size: 18px; }
|
|
|
161 |
div .sub_search input[type="text"] { width: 400px; height: 50px; border: 0; background: transparent; line-height: 50px; } /* Extra div for increased specificity, for overriding */
|
|
|
162 |
div .sub_search input[type="submit"] { padding: 0; border: 0; margin: -4px 0 0; } /* Extra div for increased specificity, for overriding */
|
|
|
163 |
|
|
|
164 |
|
|
|
165 |
|
|
|
166 |
/* Blue buttons */
|
|
|
167 |
|
| 8210 |
anupam.sin |
168 |
[class^="btn_"] { padding: 0 5px; margin: 0 5px; background-color: #FF5D00; color: #fff; font-weight: bold; text-align: center; position: relative; }
|
| 8146 |
amit.gupta |
169 |
[class^="btn_"]:before, [class^="btn_"]:after { content: ''; width: 5px; position: absolute; top: 0; }
|
|
|
170 |
|
|
|
171 |
[class^="btn_"]:hover { background-color: #007bb2; }
|
|
|
172 |
[class^="btn_"]:hover:before { background-position: left 0; }
|
|
|
173 |
[class^="btn_"]:hover:after { background-position: right 0; }
|
|
|
174 |
|
|
|
175 |
.btn_large { font-size: 17px; line-height: 40px; }
|
| 8156 |
anupam.sin |
176 |
.btn_large:before { height: 40px; background: url(/images/androidland/btn_large_sides.png) left -40px no-repeat; left: -5px; }
|
|
|
177 |
.btn_large:after { height: 40px; background: url(/images/androidland/btn_large_sides.png) right -40px no-repeat; right: -5px; }
|
| 8146 |
amit.gupta |
178 |
|
|
|
179 |
/* 3D buttons */
|
|
|
180 |
|
| 8156 |
anupam.sin |
181 |
.btn_3d { background: url('/images/androidland/btn_3d_mid.png') center top repeat-x; }
|
| 8146 |
amit.gupta |
182 |
.btn_3d .label_btn { position: relative; top: -2px; }
|
|
|
183 |
.btn_3d:active { top: 1px; }
|
|
|
184 |
.btn_3d:active .label_btn { top: 0; }
|
|
|
185 |
|
|
|
186 |
.btn_small.btn_3d:before { background-position: left -125px; }
|
|
|
187 |
.btn_small.btn_3d:after { background-position: right -125px; }
|
|
|
188 |
.btn_small.btn_3d:active { background-position: center -25px; }
|
|
|
189 |
.btn_small.btn_3d:active:before { background-position: left -150px; }
|
|
|
190 |
.btn_small.btn_3d:active:after { background-position: right -150px; }
|
|
|
191 |
|
|
|
192 |
.btn_medium.btn_3d { background-position: center -50px; }
|
|
|
193 |
.btn_medium.btn_3d:before { background-position: left -150px; }
|
|
|
194 |
.btn_medium.btn_3d:after { background-position: right -150px; }
|
|
|
195 |
.btn_medium.btn_3d:active { background-position: center -80px; }
|
|
|
196 |
.btn_medium.btn_3d:active:before { background-position: left -180px; }
|
|
|
197 |
.btn_medium.btn_3d:active:after { background-position: right -180px; }
|
|
|
198 |
|
|
|
199 |
.btn_large.btn_3d { background-position: center -110px; }
|
|
|
200 |
.btn_large.btn_3d:before { background-position: left -200px; }
|
|
|
201 |
.btn_large.btn_3d:after { background-position: right -200px; }
|
|
|
202 |
.btn_large.btn_3d:active { background-position: center -150px; }
|
|
|
203 |
.btn_large.btn_3d:active:before { background-position: left -240px; }
|
|
|
204 |
.btn_large.btn_3d:active:after { background-position: right -240px; }
|
|
|
205 |
|
|
|
206 |
/* Buttons with Inputs */
|
|
|
207 |
|
|
|
208 |
[class^="btn_"].input { padding: 0; }
|
|
|
209 |
|
|
|
210 |
[class^="btn_"] input { padding: 0 5px; border: 0; margin: 0; background: transparent; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
|
|
|
211 |
/* [class^="btn_"].extra_padded input { padding: 0 15px; *padding: 0; } */
|
|
|
212 |
|
| 8210 |
anupam.sin |
213 |
.btn_small { font-size: 14px; height: 25px; line-height: 25px; }
|
|
|
214 |
.btn_medium { font-size: 15px; height: 30px; line-height: 30px; }
|
|
|
215 |
.btn_large { font-size: 17px; height: 40px; line-height: 40px; }
|
| 8146 |
amit.gupta |
216 |
|
|
|
217 |
/* Disabled button */
|
|
|
218 |
|
|
|
219 |
[class^=btn_].disabled { background-color: #bdbdbd; cursor: default; pointer-events: none; }
|
|
|
220 |
.btn_small.disabled:before { background-position: left -50px; }
|
|
|
221 |
.btn_small.disabled:after { background-position: right -50px; }
|
|
|
222 |
|
|
|
223 |
.btn_medium.disabled:before { background-position: left -60px; }
|
|
|
224 |
.btn_medium.disabled:after { background-position: right -60px; }
|
|
|
225 |
|
|
|
226 |
.btn_large.disabled:before { background-position: left -80px; }
|
|
|
227 |
.btn_large.disabled:after { background-position: right -80px; }
|
|
|
228 |
|
|
|
229 |
/* Red buttons */
|
|
|
230 |
|
|
|
231 |
[class^=btn_].red { background-color: #d40000; }
|
|
|
232 |
.btn_small.red:before { background-position: left -75px; }
|
|
|
233 |
.btn_small.red:after { background-position: right -75px; }
|
|
|
234 |
|
|
|
235 |
.btn_medium.red:before { background-position: left -90px; }
|
|
|
236 |
.btn_medium.red:after { background-position: right -90px; }
|
|
|
237 |
|
|
|
238 |
.btn_large.red:before { background-position: left -120px; }
|
|
|
239 |
.btn_large.red:after { background-position: right -120px; }
|
|
|
240 |
|
|
|
241 |
/* Orange buttons */
|
|
|
242 |
|
|
|
243 |
[class^=btn_].orange { background-color: #fb7a14; }
|
|
|
244 |
.btn_small.orange:before { background-position: left -100px; }
|
|
|
245 |
.btn_small.orange:after { background-position: right -100px; }
|
|
|
246 |
|
|
|
247 |
.btn_medium.orange:before { background-position: left -120px; }
|
|
|
248 |
.btn_medium.orange:after { background-position: right -120px; }
|
|
|
249 |
|
|
|
250 |
.btn_large.orange:before { background-position: left -160px; }
|
|
|
251 |
.btn_large.orange:after { background-position: right -160px; }
|
|
|
252 |
|
|
|
253 |
|
|
|
254 |
[class^="btn_"] .icon_left_arrow { position: relative; top: -1px; left: -5px; }
|
|
|
255 |
[class^="btn_"] .icon_right_arrow { position: relative; top: -1px; left: 5px; }
|
|
|
256 |
[class^="btn_"] .icon_small_shopping_cart { position: relative; top: -1px; }
|
|
|
257 |
|
|
|
258 |
|
|
|
259 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
260 |
Catalogues
|
| 8146 |
amit.gupta |
261 |
---------------------------------------------------------------------
|
|
|
262 |
For pages such as Devices, Rewards, Store Locator and Whats
|
|
|
263 |
Hot, where all of them use a similar catalogue layout.
|
|
|
264 |
|
|
|
265 |
- .product_catalogue for Devices page
|
|
|
266 |
- .product_catalogue.accessories_catalogue for Accessories page
|
|
|
267 |
-------------------------------------------------------------------*/
|
|
|
268 |
|
|
|
269 |
.padded_catalogue { padding: 15px 10px 0; }
|
|
|
270 |
|
|
|
271 |
.catalogue_item { width: 220px; margin: 0 12.5px 15px 0; float: left; position: relative; }
|
|
|
272 |
.catalogue_item .item_preview { width: 198px; padding: 10px; border: 1px solid #e5e5e5; color: #666; cursor: pointer;}
|
|
|
273 |
|
|
|
274 |
.catalogue_item.hidden { display: none; }
|
|
|
275 |
.catalogue_item.opened,
|
|
|
276 |
.catalogue_item.opened .item_preview { border: 0; background-color: #eff1f1; }
|
|
|
277 |
.catalogue_item.opened .item_preview { padding: 11px; }
|
|
|
278 |
.catalogue_item .item_name { height: 40px; display: block; color: #0091d2; font-weight: bold; line-height: 1.4em; }
|
|
|
279 |
|
|
|
280 |
.catalogue_item .item_toggler { padding-left: 20px; display: block; background: url(/cs/site_template/ecommerce/images/general/btn_plus.png) left 3px no-repeat; color: #21282e; font-size: 15px; font-weight: bold; line-height: 1.4em; cursor: pointer; }
|
|
|
281 |
.catalogue_item.opened .item_toggler { background-image: url(/cs/site_template/ecommerce/images/general/btn_minus.png); }
|
|
|
282 |
|
| 8210 |
anupam.sin |
283 |
.catalogue_item .item_thumb { width: 200px; height: 54px; border: 1px solid #e5e5e5; margin: 1em 0 1em -1px; text-align: center; overflow: hidden; }
|
| 8146 |
amit.gupta |
284 |
.catalogue_item .item_thumb img { max-width: 100%; max-height: 100%; vertical-align: bottom; }
|
|
|
285 |
|
|
|
286 |
.catalogue_item .item_content { width: 900px; padding: 10px; margin-top: 15px; background: #eff1f1; position: absolute; left: 0; z-index: 1; display: none; }
|
|
|
287 |
.item_content_title { margin: 1em 0; font-size: 15px; font-weight: bold; }
|
|
|
288 |
.catalogue_item .item_images { margin-bottom: 10px; }
|
|
|
289 |
.catalogue_item .item_images img { padding: 5px; border: 1px solid #dcdcdc; margin-left: 3px; display: inline-block; vertical-align: bottom; background: #fff; }
|
|
|
290 |
.catalogue_item .item_images img:first-child { margin-left: 0; }
|
|
|
291 |
|
|
|
292 |
.catalogue_item .tbl_dark_horizontal { margin-bottom: 15px; }
|
|
|
293 |
.catalogue_item .item_content ul { margin-bottom: 1em; }
|
|
|
294 |
.catalogue_item .item_content li { padding-left: 1.5em; }
|
|
|
295 |
.catalogue_item .notes li { padding-left: .75em; }
|
|
|
296 |
|
|
|
297 |
/* Extra div in front is needed to raise specificity for overriding */
|
|
|
298 |
div.catalogue_item.node4,
|
|
|
299 |
div.catalogue_item.last_in_row { margin: 0 0 15px 0; }
|
|
|
300 |
|
|
|
301 |
.catalogue_item.node2 .item_content { left: -234px; }
|
|
|
302 |
.catalogue_item.node3 .item_content { left: -468px; }
|
|
|
303 |
.catalogue_item.node4 .item_content { left: -700px; }
|
|
|
304 |
|
|
|
305 |
.grid_3_left_middle .catalogue_item .item_content { width: 665px; }
|
|
|
306 |
|
|
|
307 |
/* Product & Accessories catalogue - for pages that have Devices/Accesories listing */
|
|
|
308 |
|
|
|
309 |
.product_catalogue .catalogue_item { width: 218px; height: 398px; border: 1px solid #e5e5e5; font-size: 11px; line-height: normal; }
|
|
|
310 |
.short_product_catalogue .catalogue_item { height: 333px; }
|
|
|
311 |
.product_name { font-size: 16px; line-height: 1.4em; font-weight: bold; position: absolute; top: 10px; left: 10px; }
|
|
|
312 |
.info_ribbon ~ .product_name { width: 72%; }
|
|
|
313 |
.product_rating { font: 0/0 a; position: absolute; top: 32px; left: 10px; }
|
|
|
314 |
|
|
|
315 |
.product_catalogue .info_ribbon { position: absolute; top: -4px; right: -4px; }
|
|
|
316 |
|
|
|
317 |
.product_catalogue .product_img { width: 110px; height: 185px; position: absolute; top: 65px; left: 0; text-align: center; line-height: 185px; }
|
|
|
318 |
.product_catalogue .product_img img { max-width: 100%; max-height: 100%; vertical-align: top; }
|
|
|
319 |
.product_catalogue .badge { position: absolute; bottom: 0; right: -35px; }
|
|
|
320 |
|
|
|
321 |
.product_price_con { width: 95px; position: absolute; bottom: 10px; left: 10px; z-index: 2; font-weight: bold; }
|
|
|
322 |
.plan_product_catalogue .product_price_con { bottom: 14px; }
|
|
|
323 |
.product_price_con .product_price { color: #fb7a14; font-size: 22px; line-height: .8em; *line-height: 1em; } /* *line-height: 1em is to fix IE7 clipping issue */
|
|
|
324 |
|
|
|
325 |
.product_catalogue .product_details { width: 85px; position: absolute; top: 75px; left: 115px; }
|
|
|
326 |
|
|
|
327 |
.product_colors { width: 95px; color: #c7c7c7; position: absolute; bottom: 65px; right: 10px; }
|
|
|
328 |
.product_colors .color_square { margin-top: 2px; *margin-right: 4px; }
|
|
|
329 |
|
|
|
330 |
.product_catalogue .icon_epp,
|
|
|
331 |
.product_catalogue .product_icon { position: absolute; top: 150px; left: 115px; }
|
|
|
332 |
.plan_product_catalogue .icon_epp,
|
|
|
333 |
.plan_product_catalogue .product_icon { top: 170px; }
|
|
|
334 |
.product_catalogue .compare_con { position: absolute; bottom: 70px; left: 10px; font-size: 12px; }
|
|
|
335 |
.product_catalogue .compare_con input { vertical-align: middle; }
|
|
|
336 |
.product_catalogue .btn_medium { position: absolute; bottom: 10px; right: 10px; z-index: 2; font-size: 13px; }
|
|
|
337 |
.product_desc { display: none; }
|
|
|
338 |
|
| 8210 |
anupam.sin |
339 |
.product_grey_bg { width: 218px; height: 55px; border-top: 1px solid #e2e4e5; position: absolute; bottom: 0; left: 0; z-index: 1; background-color: #f6f6f6; }
|
| 8146 |
amit.gupta |
340 |
.product_grey_bg:before { content: ''; width: 100%; height: 0; border-top: 1px solid #fff; position: absolute; top: 0; left: 0; }
|
|
|
341 |
|
|
|
342 |
.accessories_catalogue .catalogue_item { height: 338px; }
|
|
|
343 |
.accessories_catalogue .product_img { width: 100%; top: 45px; }
|
|
|
344 |
.accessories_catalogue .product_img img { vertical-align: bottom; }
|
|
|
345 |
.accessories_catalogue .badge { bottom: 40px; right: 40px; }
|
|
|
346 |
|
|
|
347 |
.accessories_catalogue .product_quantity { position: absolute; top: 240px; right: 10px; font-weight: bold; }
|
|
|
348 |
|
|
|
349 |
.product_catalogue.list .catalogue_item { width: 918px; height: 175px; margin-right: 0; }
|
|
|
350 |
.product_catalogue.list .catalogue_item.last_row { margin-left: 0; }
|
|
|
351 |
|
|
|
352 |
.product_catalogue.list .product_img { width: 120px; height: 150px; top: 15px; left: 10px; line-height: 150px; }
|
|
|
353 |
.product_catalogue.list .badge { right: 0; }
|
|
|
354 |
|
|
|
355 |
.product_catalogue.list .product_details { width: 150px; top: 75px; left: 135px; }
|
|
|
356 |
.plan_product_catalogue.list .product_details { display: none; }
|
|
|
357 |
.product_catalogue.list .product_name { width: 110px; top: 25px; left: 135px; line-height: 1.1em; }
|
|
|
358 |
.product_catalogue.list .icon_epp,
|
|
|
359 |
.product_catalogue.list .product_icon { top: 25px; left: 250px; right: auto; }
|
|
|
360 |
.product_catalogue.list .product_rating { top: 42px; left: 135px; }
|
|
|
361 |
.product_catalogue.list .product_price_con { top: 25px; right: 25px; bottom: auto; left: auto; }
|
|
|
362 |
|
|
|
363 |
.product_catalogue.list .compare_con { bottom: 15px; left: 135px; font-size: 11px; }
|
|
|
364 |
.product_catalogue.list .compare_con input { margin-top: -1px; }
|
|
|
365 |
|
|
|
366 |
.product_catalogue.list .product_colors { width: 355px; top: 105px; left: 355px; line-height: 23px; }
|
|
|
367 |
.product_catalogue.list .product_colors .color_square { margin: 0; *margin-right: 4px; vertical-align: middle; }
|
|
|
368 |
|
|
|
369 |
.product_catalogue.list .btn_medium { min-width: 60px; top: 85px; right: auto; bottom: auto; left: 800px; }
|
|
|
370 |
|
|
|
371 |
.product_catalogue.list .product_desc { width: 355px; position: absolute; top: 25px; left: 355px;font-size: 13px; line-height: normal; display: block; }
|
|
|
372 |
|
|
|
373 |
.product_catalogue.list .product_action { width: 95px; padding: 0; border: 0; margin: 0; position: static; float: right; background-color: #fff; line-height: normal; display: none; }
|
|
|
374 |
.product_catalogue.list .product_action .btn_medium { margin-top: 15px; }
|
|
|
375 |
|
|
|
376 |
.product_catalogue.list .product_grey_bg { display: none; }
|
|
|
377 |
|
|
|
378 |
.accessories_catalogue.list .product_name { width: 150px; }
|
|
|
379 |
.accessories_catalogue.list .product_quantity { top: 42px; left: 135px; }
|
|
|
380 |
.accessories_catalogue.list .badge { bottom: 25px; }
|
|
|
381 |
|
|
|
382 |
.product_catalogue .load_more { width: 65px; margin: 0 auto; display: block; font-size: 12px; font-weight: bold; text-align: center; clear: both; }
|
|
|
383 |
.product_catalogue .load_more.loading { padding-left: 20px; background: url(/cs/site_template/ecommerce/images/general/icon_loading.gif) left center no-repeat; color: #ccc; cursor: default; pointer-events: none; }
|
|
|
384 |
|
|
|
385 |
|
|
|
386 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
387 |
Column Layouts
|
| 8146 |
amit.gupta |
388 |
-------------------------------------------------------------------*/
|
|
|
389 |
|
|
|
390 |
.column_obj { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
|
|
|
391 |
.column_obj iframe { margin-bottom: 1em; }
|
|
|
392 |
|
|
|
393 |
.two_columns .column_obj { width: 47%; }
|
|
|
394 |
.two_columns .column_obj:first-child { margin-right: 4%; *margin-right: 2%; }
|
|
|
395 |
.two_columns .column_obj.wider { width: 57%; }
|
|
|
396 |
.two_columns .column_obj.wider + .column_obj { width: 37%; }
|
|
|
397 |
|
|
|
398 |
.three_columns .column_obj { width: 30.3%; }
|
|
|
399 |
.three_columns .column_obj:first-child,
|
|
|
400 |
.three_columns .column_obj:first-child + .column_obj { margin-right: 4%; }
|
|
|
401 |
|
|
|
402 |
.four_columns .column_obj { width: 24.5%; }
|
|
|
403 |
|
|
|
404 |
|
|
|
405 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
406 |
Content Togglers
|
| 8146 |
amit.gupta |
407 |
-------------------------------------------------------------------*/
|
|
|
408 |
|
|
|
409 |
.content_toggler_con { margin-bottom: 1em; }
|
|
|
410 |
.content_toggler_con.padded { padding: 15px; }
|
|
|
411 |
.content_toggler_con .content_toggler { cursor: pointer; }
|
|
|
412 |
.content_toggler_con .toggled_content { display: none; *zoom: 1; }
|
|
|
413 |
.content_toggler_con .toggled_content.unpadded { padding: 0; }
|
|
|
414 |
|
|
|
415 |
/* Self Content togglers */
|
|
|
416 |
|
| 8210 |
anupam.sin |
417 |
.self_content_toggler .content_toggler_obj { border: 1px solid #bdbdbd; margin-bottom: 1em; background: url(/cs/site_template/ecommerce/images/general/gradient_white_30px.png) center bottom repeat-x; }
|
| 8146 |
amit.gupta |
418 |
.self_content_toggler .content_toggler { padding: 7px 10px 7px 35px; position: relative; color: #0091d2; font-size: 14px; font-weight: bold; background: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_down.png) 10px 6px no-repeat; }
|
|
|
419 |
.self_content_toggler .toggled .content_toggler { background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_up.png); }
|
|
|
420 |
.self_content_toggler .toggled_content { padding: 10px 20px 20px; }
|
|
|
421 |
|
|
|
422 |
.self_content_toggler.large .content_toggler { background-position: 10px 10px; font-size: 18px; }
|
|
|
423 |
.self_content_toggler .flush_right { position: absolute; right: 10px; top: 7px; color: #21282e; font-size: 13px; font-weight: normal; line-height: 22px; }
|
|
|
424 |
.self_content_toggler.cart .toggled_content { padding: 10px; }
|
|
|
425 |
|
|
|
426 |
.self_content_toggler .right_action_con { text-align: right; }
|
|
|
427 |
.self_content_toggler .btn_grey { margin-left: 1em; }
|
|
|
428 |
.self_content_toggler .btn_grey i { margin: -2px 5px 0 0; }
|
|
|
429 |
|
|
|
430 |
.self_content_toggler .content_toggler .warning { vertical-align: middle; }
|
|
|
431 |
|
|
|
432 |
/* Single Content togglers */
|
|
|
433 |
|
|
|
434 |
.single_content_toggler > .content_toggler { padding-left: 20px; margin-left: 1.5em; float: right; font-size: 14px; font-weight: bold; vertical-align: middle; background: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_2_down.png) left top no-repeat; }
|
|
|
435 |
.single_content_toggler > .content_toggler.toggled { background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_2_up.png); }
|
|
|
436 |
.single_content_toggler > .toggled_content_con { padding-top: 1em; clear: both; }
|
| 8210 |
anupam.sin |
437 |
.single_content_toggler > .toggled_content_con > .toggled_content { padding: 15px; background: #f1f1f1; box-shadow: inset 0 1px 2px #aaa; }
|
| 8146 |
amit.gupta |
438 |
.single_content_toggler .toggled_content .content_rounder { background: #fff; }
|
|
|
439 |
|
|
|
440 |
.single_content_toggler ul { margin: 1em 0; }
|
|
|
441 |
.single_content_toggler li { padding-left: 1em; }
|
|
|
442 |
.single_content_toggler li li { margin-left: 1em; }
|
|
|
443 |
.single_content_toggler li ul { margin: 0; }
|
|
|
444 |
|
|
|
445 |
|
|
|
446 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
447 |
Content Rounder
|
| 8146 |
amit.gupta |
448 |
-------------------------------------------------------------------*/
|
|
|
449 |
|
|
|
450 |
.content_rounder { padding: 15px; border: 1px solid #bdbdbd; margin-bottom: 1em; }
|
|
|
451 |
.content_rounder.unpadded { padding: 0; }
|
|
|
452 |
.content_rounder > .content_title,
|
|
|
453 |
.content_rounder > .padded_content > .content_title { margin-bottom: .2em; font-size: 18px; font-weight: bold; }
|
|
|
454 |
|
|
|
455 |
.static_content_con .content_rounder,
|
|
|
456 |
.content_rounder.static { border: 0; background-color: #eff1f1; }
|
|
|
457 |
.content_rounder.grey { border-color: #e5e5e5; background-color: #eff1f1; }
|
| 8210 |
anupam.sin |
458 |
.content_rounder.blue { border: 0; background: #2789C1; color: #666; }
|
| 8146 |
amit.gupta |
459 |
|
|
|
460 |
.transaction_num_con { width: 400px; text-align: center; }
|
|
|
461 |
.content_title + .transaction_num_con { margin-top: 2em; }
|
|
|
462 |
.transaction_num_con .transaction_num { margin: .25em 0 .5em; color: #21282e; font-size: 28px; font-weight: bold; }
|
|
|
463 |
.transaction_num_con .understate { font-size: 12px; }
|
|
|
464 |
|
|
|
465 |
|
|
|
466 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
467 |
Content Switcher
|
| 8146 |
amit.gupta |
468 |
-------------------------------------------------------------------*/
|
|
|
469 |
|
|
|
470 |
.content_switcher_content { display: none; }
|
|
|
471 |
.content_switcher_content:first-child { display: block; }
|
|
|
472 |
|
|
|
473 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
474 |
Grid
|
| 8146 |
amit.gupta |
475 |
-------------------------------------------------------------------*/
|
|
|
476 |
|
|
|
477 |
[class*="grid_3_"] { margin-right: 18px; float: left; }
|
|
|
478 |
.grid_3_left, .grid_3_right { width: 205px; min-height: 1px; }
|
|
|
479 |
.grid_3_middle { width: 460px; min-height: 1px;}
|
|
|
480 |
.grid_3_left_middle, .grid_3_middle_right { width: 685px; min-height: 1px; }
|
|
|
481 |
.grid_3_left, .grid_3_left_middle { clear: left; }
|
|
|
482 |
.grid_3_right, .grid_3_middle_right { margin-right: 0; }
|
|
|
483 |
|
|
|
484 |
/* Nested grid */
|
|
|
485 |
|
|
|
486 |
[class*="grid_3_"] > .grid_3_middle,
|
|
|
487 |
[class*="grid_3_"] > .grid_3_right { margin-right: 0; }
|
|
|
488 |
|
|
|
489 |
|
|
|
490 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
491 |
Icons
|
| 8146 |
amit.gupta |
492 |
-------------------------------------------------------------------*/
|
|
|
493 |
|
|
|
494 |
/* Sprite sheet grid size: 20x20px */
|
| 8156 |
anupam.sin |
495 |
[class^="icon_"] { background: url(/images/androidland/general_sprite_sheet.png) no-repeat; *margin-right: 4px; }
|
| 8146 |
amit.gupta |
496 |
|
|
|
497 |
/* Row 1 */
|
|
|
498 |
|
|
|
499 |
.icon_search { width: 20px; height: 19px; }
|
|
|
500 |
.icon_epp { width: 38px; height: 27px; background-position: -40px 0; }
|
|
|
501 |
.icon_fb { width: 16px; height: 17px; background-position: -120px 0; }
|
|
|
502 |
.icon_twitter { width: 16px; height: 17px; background-position: -140px 0; }
|
|
|
503 |
.icon_share { width: 16px; height: 17px; background-position: -160px 0; }
|
|
|
504 |
.icon_rss { width: 16px; height: 17px; background-position: -180px 0; }
|
|
|
505 |
|
|
|
506 |
/* Row 2*/
|
|
|
507 |
|
|
|
508 |
.icon_left_arrow { width: 6px; height: 12px; background-position: -120px -20px; }
|
|
|
509 |
.icon_right_arrow { width: 6px; height: 12px; background-position: -126px -20px; }
|
|
|
510 |
.icon_my_ocs { width: 10px; height: 15px; background-position: -140px -20px; }
|
|
|
511 |
.icon_white_pin { width: 10px; height: 16px; background-position: -160px -20px; }
|
|
|
512 |
.icon_pin { width: 9px; height: 13px; background-position: -280px -20px; }
|
|
|
513 |
|
|
|
514 |
/* Row 3 */
|
|
|
515 |
|
|
|
516 |
.icon_my_cart { width: 20px; height: 14px; background-position: 0 -40px; }
|
|
|
517 |
.icon_live_chat { width: 17px; height: 15px; background-position: -20px -40px; }
|
|
|
518 |
.icon_help { width: 16px; height: 16px; background-position: -40px -40px; }
|
|
|
519 |
.icon_question { width: 15px; height: 14px; background-position: -60px -40px; cursor: pointer; }
|
|
|
520 |
.icon_letter { width: 15px; height: 10px; background-position: -80px -40px; }
|
|
|
521 |
.icon_cube { width: 19px; height: 17px; background-position: -100px -40px; }
|
|
|
522 |
.icon_magnify { width: 17px; height: 18px; background-position: -120px -40px; }
|
|
|
523 |
.icon_picture { width: 19px; height: 16px; background-position: -140px -40px; }
|
|
|
524 |
.icon_video { width: 18px; height: 16px; background-position: -160px -40px; }
|
|
|
525 |
.icon_printer { width: 17px; height: 13px; background-position: -180px -40px; }
|
|
|
526 |
.icon_thumbs_up { width: 17px; height: 18px; background-position: -200px -40px; }
|
|
|
527 |
.icon_thumbs_down { width: 17px; height: 18px; background-position: -220px -40px; }
|
|
|
528 |
.icon_cancel { width: 13px; height: 12px; margin-top: -2px; background-position: -240px -40px; cursor: pointer; }
|
|
|
529 |
.icon_small_star { width: 14px; height: 13px; background-position: -260px -40px; }
|
|
|
530 |
.icon_small_star_filled { width: 14px; height: 13px; background-position: -274px -40px; }
|
|
|
531 |
|
|
|
532 |
/* Row 4 */
|
|
|
533 |
|
|
|
534 |
.icon_reload { width:15px; height:15px; background-position: 0 -60px; }
|
|
|
535 |
.icon_my_account { width:13px; height:11px; background-position: -20px -60px; }
|
|
|
536 |
.icon_find_store { width:9px; height:13px; background-position: -40px -60px; }
|
|
|
537 |
.icon_switch { width:14px; height:14px; background-position: -60px -60px; }
|
|
|
538 |
.icon_close { width: 15px; height: 15px; background-position: -120px -60px; }
|
|
|
539 |
.icon_large_star { width: 20px; height: 19px; background-position: -260px -60px; }
|
|
|
540 |
.icon_large_star_filled { width: 20px; height: 19px; background-position: -280px -60px; }
|
|
|
541 |
|
|
|
542 |
/* Row 5 */
|
|
|
543 |
|
|
|
544 |
.icon_tick { width: 15px; height: 15px; background-position: left -80px; }
|
|
|
545 |
.icon_cross { width: 15px; height: 15px; background-position: -15px -80px; }
|
|
|
546 |
.icon_tick_small { width: 12px; height: 12px; background-position: -40px -80px; }
|
|
|
547 |
.icon_cross_small { width: 12px; height: 12px; background-position: -52px -80px; }
|
|
|
548 |
.icon_grid_view { width: 10px; height: 10px; margin: 0 10px 0 6px; background-position: -140px -80px; }
|
|
|
549 |
.icon_list_view { width: 10px; height: 10px; margin: 0 10px 0 6px; background-position: -160px -80px; }
|
|
|
550 |
.icon_link_arrow { width: 13px; height: 12px; background-position: -180px -80px; }
|
|
|
551 |
|
|
|
552 |
/* Row 6 */
|
|
|
553 |
|
|
|
554 |
.icon_alert { width: 24px; height: 29px; background-position: -60px -100px; }
|
|
|
555 |
.icon_plus_blue { width: 14px; height: 14px; background-position: -140px -100px; }
|
|
|
556 |
.icon_search_blue { width: 24px; height: 23px; background-position: -160px -100px; }
|
|
|
557 |
|
|
|
558 |
/* Row 7 */
|
|
|
559 |
|
|
|
560 |
.icon_tabber_dot { width: 8px; height: 8px; background-position: -140px -120px; }
|
|
|
561 |
.icon_cancel_large { width: 21px; height: 20px; background-position: -200px -120px; }
|
|
|
562 |
.icon_shopping_cart { width: 21px; height: 17px; background-position: -240px -120px; }
|
|
|
563 |
.icon_small_shopping_cart { width: 19px; height: 14px; background-position: -280px -120px; }
|
|
|
564 |
|
|
|
565 |
.color_square { width: 22px; height: 22px; border: 1px solid #bfbfbf; }
|
|
|
566 |
|
|
|
567 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
568 |
Islands
|
| 8146 |
amit.gupta |
569 |
-------------------------------------------------------------------*/
|
|
|
570 |
|
|
|
571 |
.island { padding-bottom: 5px; margin-bottom: 1em; background-color: #eff1f1; }
|
| 8210 |
anupam.sin |
572 |
.island_title { padding: 8px 10px; background: #2789C1; position: relative; font-size: 15px; line-height: 1.1em; font-weight: bold; color:#FFFFFF;}
|
| 8146 |
amit.gupta |
573 |
.island_img { width: 100%; text-align: center; overflow: hidden; }
|
|
|
574 |
.island_img img { width: 100%; height: auto; }
|
|
|
575 |
.island_content { padding: 10px; display: block; }
|
| 8210 |
anupam.sin |
576 |
.island .blue_bg { background: #2789C1; }
|
| 8146 |
amit.gupta |
577 |
|
|
|
578 |
.island_list { padding-left: 2em; *padding-left: 0; *margin-left: 2em; }
|
|
|
579 |
.island_list li { margin: 10px 0; }
|
|
|
580 |
|
|
|
581 |
.island_link,
|
|
|
582 |
.island_block { padding: 10px 5px; margin: 0 5px; border-bottom: 1px dotted #cfcfcf; display: block; }
|
|
|
583 |
.island .arrow_link { margin-left: 10px; line-height: 25px; display: block; }
|
|
|
584 |
.island_content .arrow_link { margin-left: 0; }
|
|
|
585 |
.island .arrow_link:before { top: 6px; }
|
|
|
586 |
.island_link.last,
|
|
|
587 |
.island_block.last { border: 0; }
|
|
|
588 |
.island_link.last + .island_title,
|
|
|
589 |
.island_block.last + .island_title { margin-top: 10px; }
|
|
|
590 |
|
|
|
591 |
.island .icon_question { margin-top: -4px; }
|
|
|
592 |
|
|
|
593 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
594 |
Tables
|
| 8146 |
amit.gupta |
595 |
---------------------------------------------------------------------
|
|
|
596 |
A billion tables used throughout the entire site.
|
|
|
597 |
-------------------------------------------------------------------*/
|
|
|
598 |
|
|
|
599 |
/*
|
|
|
600 |
* Removes all default spacing in tables. With this, we no longer
|
|
|
601 |
* need to use [cellpadding="0"] and [cellspacing="0"] anymore.
|
|
|
602 |
*/
|
|
|
603 |
table, td { padding: 0; *border-collapse: collapse; border-spacing: 0; vertical-align: top; }
|
|
|
604 |
|
|
|
605 |
table .icon_question { vertical-align: top; }
|
|
|
606 |
|
|
|
607 |
.tbl_round { margin-bottom: 1em; border: solid 1px #bdbdbd; background: #fff; }
|
|
|
608 |
.tbl_round > table { width: 100%; height: 100%; }
|
|
|
609 |
.tbl_dark_vertical th,
|
|
|
610 |
.tbl_dark_vertical td { padding: 20px 0px 20px 15px; }
|
|
|
611 |
.tbl_dark_vertical th { text-align: left; }
|
|
|
612 |
.tbl_dark_vertical tr > :first-child { color: #fff; background: #21282e; }
|
|
|
613 |
|
|
|
614 |
.tbl_dark_horizontal th,
|
|
|
615 |
.tbl_dark_horizontal td { padding: 10px; border-left: 1px solid #bdbdbd; text-align: left; }
|
|
|
616 |
.tbl_dark_horizontal th { background: #21282e; color: #fff; }
|
|
|
617 |
.tbl_dark_horizontal td { border-top: 1px solid #bdbdbd; background: #fff; font-size: 12px; vertical-align: top; }
|
|
|
618 |
.tbl_dark_horizontal tr > :first-child { border-left: 0; }
|
|
|
619 |
|
|
|
620 |
.tbl_light_horizontal td { padding: 20px; background: #fff; }
|
|
|
621 |
.tbl_light_horizontal th { padding: 10px 20px; /* border-bottom: 1px solid #cfcfcf; */ background: #dcdbdb url(/cs/site_template/ecommerce/images/general/gradient_grey_50px.png) repeat-x; text-align: left; vertical-align: middle; }
|
|
|
622 |
|
|
|
623 |
|
|
|
624 |
/*
|
|
|
625 |
* In IE7, even if we do not declare the colspan attribute on the node, it
|
|
|
626 |
* is still considered to have a colspan of 1. Thus, it will be affected by
|
|
|
627 |
* the text-align: center in (A), which targets any <th> node that has the
|
|
|
628 |
* colspan attribute. To reverse this, I added a th[colspan="1"] selector at
|
|
|
629 |
* (B), which will reapply text-align: left. Other browsers will be unaffected.
|
|
|
630 |
*/
|
|
|
631 |
.tbl_grey_horizontal th { padding: 10px 20px; border-top: 1px solid #e0e0e0; background: #eff1f1; text-align: left; }
|
|
|
632 |
.tbl_grey_horizontal th[colspan] { text-align: center; } /* A */
|
|
|
633 |
.tbl_grey_horizontal th[colspan="1"], /* B */
|
|
|
634 |
.tbl_grey_horizontal th[colspan="2"] { text-align: left; }
|
|
|
635 |
.tbl_grey_horizontal .subheader th { background: #e5e5e5; text-align: left; }
|
|
|
636 |
.tbl_grey_horizontal .slightly_smaller th { font-size: 12px; }
|
|
|
637 |
.tbl_grey_horizontal td { padding: 10px 20px; border-top: 1px solid #e5e5e5; vertical-align: top; }
|
|
|
638 |
.tbl_grey_horizontal tr:first-child > td,
|
|
|
639 |
.tbl_grey_horizontal tr:first-child > th { border-top: 0; }
|
|
|
640 |
.tbl_grey_horizontal .thumbs_up { left: -20px; }
|
|
|
641 |
.tbl_grey_horizontal .thumbs_up:before { padding: 10px 0; top: -12px; }
|
|
|
642 |
.tbl_grey_horizontal .label { text-align: right; }
|
|
|
643 |
.tbl_grey_horizontal .icon_tick,
|
|
|
644 |
.tbl_grey_horizontal .icon_cross { margin-right: .5em; }
|
|
|
645 |
|
|
|
646 |
.tbl_grey_horizontal th.spanned_header { padding: 10px 20px; background: transparent; font-weight: bold; text-align: left; }
|
|
|
647 |
.tbl_grey_horizontal .spanned_header h4 { font-weight: bold; margin: 0.6em 0 0; }
|
|
|
648 |
.tbl_grey_horizontal tr:first-child .spanned_header h4 { margin-top: 0; }
|
|
|
649 |
|
|
|
650 |
.tbl_blue_first_con td:first-child,
|
|
|
651 |
.tbl_blue_second_con td:first-child + td,
|
|
|
652 |
.blue_first_con td:first-child,
|
|
|
653 |
.blue_second_con td:first-child + td,
|
|
|
654 |
td.blue_con { background: #cbdde9; }
|
|
|
655 |
|
|
|
656 |
.tbl_red_first_con td:first-child,
|
|
|
657 |
.tbl_red_second_con td:first-child + td,
|
|
|
658 |
.red_first_con td:first-child,
|
|
|
659 |
.red_second_con td:first-child + td,
|
|
|
660 |
td.red_con, th.red_con { background: #fff5ef; }
|
|
|
661 |
|
|
|
662 |
.black_first_con td:first-child,
|
|
|
663 |
.black_second_con td:first-child + td,
|
|
|
664 |
td.black_con { background: #21282e; color: #fff; border-bottom: 0; }
|
|
|
665 |
|
|
|
666 |
td.dark_red_con, th.dark_red_con { background: #ffe5d6; }
|
| 8210 |
anupam.sin |
667 |
td.blue_con, th.blue_con { background: #2789C1;color:#FFFFFF; }
|
| 8146 |
amit.gupta |
668 |
td.green_con, th.green_con { background: #28a957; }
|
|
|
669 |
td.bright_blue_con, th.bright_blue_con { background: #1398e5; }
|
|
|
670 |
td.orange_con, th.orange_con { background: #ff8500; }
|
|
|
671 |
td.light_grey_con, th.light_grey_con { background: #f5f5f5; }
|
|
|
672 |
td.grey_con, th.grey_con { background: #e8e8e8; }
|
|
|
673 |
td.medium_grey_con, th.medium_grey_con { background: #cfcfcf; }
|
|
|
674 |
|
|
|
675 |
.light_grey_con td { background: #f5f5f5; }
|
|
|
676 |
.grey_con td { background: #eff1f1; }
|
|
|
677 |
.dark_grey_con td { background: #dee2e2; }
|
|
|
678 |
|
|
|
679 |
.tbl_last_centered_con tr .last { text-align: center; }
|
|
|
680 |
.tbl_last_centered_con tr .last a { padding: 0 15px; font-size: 12px; text-decoration: none; }
|
|
|
681 |
.tbl_last_centered_con tr .last .btn_medium { padding: 0 15px; font-size: 15px; }
|
|
|
682 |
|
|
|
683 |
.tbl_black_first_con tr > td:first-child { background: #21282e; }
|
|
|
684 |
|
|
|
685 |
.tbl_plain tr td { padding: 0; border: 0; }
|
|
|
686 |
|
|
|
687 |
|
|
|
688 |
/* Misc. general table styling */
|
|
|
689 |
|
|
|
690 |
.tbl_fully_bordered th,
|
|
|
691 |
.tbl_fully_bordered td,
|
|
|
692 |
.tbl_vertically_bordered th,
|
|
|
693 |
.tbl_vertically_bordered td { border-left: 1px solid #e5e5e5; }
|
|
|
694 |
.tbl_fully_bordered th,
|
|
|
695 |
.tbl_horizontally_bordered td { border-top: 1px solid #e5e5e5; }
|
|
|
696 |
.tbl_fully_bordered tr:first-child > th,
|
|
|
697 |
.tbl_horizontally_bordered tr:first-child > td { border-top: 0; }
|
|
|
698 |
.tbl_regular .bordered_row > td { border-bottom: 1px solid #e5e5e5; }
|
|
|
699 |
|
|
|
700 |
div [class^="tbl_"] tr > :first-child { border-left: 0; } /* Extra div needed to raise specificity for overriding */
|
|
|
701 |
tr.last > td { border-bottom: 0; }
|
|
|
702 |
|
|
|
703 |
[class^="tbl_"] .align_top,
|
|
|
704 |
[class^="tbl_"] .align_top td { vertical-align: top; }
|
|
|
705 |
[class*=tbl_] .understate { color: #666; font-size: 12px; font-weight: normal; }
|
|
|
706 |
|
|
|
707 |
table.tbl_regular,
|
|
|
708 |
.tbl_regular > table { width: 100%; }
|
|
|
709 |
.tbl_regular td { padding: 10px 20px; vertical-align: top; }
|
|
|
710 |
.tbl_regular .bordered_row { border-bottom: 1px solid #e5e5e5; }
|
|
|
711 |
|
|
|
712 |
.tbl_service_info > table > tbody > tr > td:first-child { width: 225px; }
|
|
|
713 |
|
|
|
714 |
/* Manual border-radius classes */
|
|
|
715 |
td.no_radius,
|
|
|
716 |
td.no_radius:last-child,
|
|
|
717 |
tr:last-child > td.no_radius:last-child,
|
|
|
718 |
tr:first-child > td.no_radius:first-child { border-radius: 0; }
|
|
|
719 |
|
|
|
720 |
|
|
|
721 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
722 |
Tabs
|
| 8146 |
amit.gupta |
723 |
-------------------------------------------------------------------*/
|
|
|
724 |
|
| 8150 |
amit.gupta |
725 |
/* Horizontal Tabber */
|
| 8146 |
amit.gupta |
726 |
|
|
|
727 |
.content_tabber_con { height: 45px; background: transparent; white-space: nowrap; }
|
|
|
728 |
.content_tabber_con.multi_page { height: 55px; overflow: hidden; }
|
| 8147 |
amit.gupta |
729 |
.content_tabber { height: 45px; padding: 0 10px; margin: 0 5px; *margin: 0 10px 0 5px; vertical-align: top; position: relative; background: #f6f6f6 url(/images/androidland/tab_grey_mid.png) repeat-x; color: #666; line-height: 45px; font-weight: bold; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; }
|
| 8146 |
amit.gupta |
730 |
.content_tabber.is_invisible { visibility: hidden; }
|
|
|
731 |
.content_tabber.tab_scroller { padding: 0 5px; }
|
|
|
732 |
.content_tabber .icon_tabber_dot { *margin-left: -4px; *position: relative; *top: 16px; *vertical-align: middle; *line-height: 45px; }
|
|
|
733 |
.content_tabber:before,
|
| 8147 |
amit.gupta |
734 |
.content_tabber:after { content: ''; width: 5px; height: 45px; background: url(/images/androidland/tab_grey_sides.png) no-repeat; position: absolute; top: 0; }
|
| 8146 |
amit.gupta |
735 |
.content_tabber:before { background-position: left top; left: -5px; }
|
|
|
736 |
.content_tabber:after { background-position: right top; right: -5px; }
|
|
|
737 |
|
| 8210 |
anupam.sin |
738 |
.content_tabber.current { border: 0; background: #2789C1 url(/images/androidland/tab_yellow_mid.png) repeat-x; color: #21282e; }
|
| 8146 |
amit.gupta |
739 |
|
|
|
740 |
/*
|
|
|
741 |
* Note on Pseudo Elements for IE8
|
|
|
742 |
*
|
|
|
743 |
* There may be several occasions where IE8 doesn't repaint pseudo elements
|
|
|
744 |
* properly, e.g. using jQuery to add a new class to the element, but the
|
|
|
745 |
* pseudo elements are unaffected, or they do not change style until you
|
|
|
746 |
* click on another element, etc.
|
|
|
747 |
*
|
|
|
748 |
* In such cases, you need to change the value of the content property.
|
|
|
749 |
* For example, in .content_tabber:after, the value of the content property
|
|
|
750 |
* is '' (which is nothing). However, in .content_tabber.current:after,
|
|
|
751 |
* the value of the content property is ' ' (which is a space character).
|
|
|
752 |
* This causes IE8 to repaint the pseudo elements properly again.
|
|
|
753 |
*
|
|
|
754 |
* Note: This does not occur if you're using IE8 mode within IE9. Need to
|
|
|
755 |
* use a more 'proper' IE8 simulator, such as the one in IETester
|
|
|
756 |
* (http://www.my-debugbar.com/wiki/IETester/HomePage)
|
|
|
757 |
*
|
|
|
758 |
* Source: http://stackoverflow.com/questions/8703799/forcing-ie8-to-rerender-repaint-before-after-pseudo-elements
|
|
|
759 |
*/
|
| 8147 |
amit.gupta |
760 |
.content_tabber.current:before, .content_tabber.current:after { background-image: url(/images/androidland/tab_yellow_sides.png); }
|
| 8146 |
amit.gupta |
761 |
|
|
|
762 |
.content_tabber img { height: 12px; position: absolute; left: -5px; bottom: -10px; }
|
|
|
763 |
|
|
|
764 |
.tabber_content{ display: none; *zoom: 1; } /* zoom is needed to fix some weird rendering issue in IE7 */
|
|
|
765 |
.tabber_content.current { display: block; }
|
|
|
766 |
|
| 8150 |
amit.gupta |
767 |
/* Vertical Tabber */
|
| 8146 |
amit.gupta |
768 |
|
|
|
769 |
.vertical_tabber .tabber,
|
|
|
770 |
.vertical_tabber a,
|
|
|
771 |
.vertical_sub_tabber { padding: 10px 0; border-bottom: 1px dotted #bdbdbd; display: block; cursor: pointer; position: relative; overflow: hidden; color: #0091d2; }
|
|
|
772 |
.vertical_tabber .tabber.last,
|
|
|
773 |
.vertical_sub_tabber.last { border-bottom: 0; }
|
|
|
774 |
.vertical_tabber > .toggle_sub_tabs:after { content: ''; width: 12px; height: 6px; margin-top: -3px; position: absolute; top: 50%; right: 5px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) -220px -60px no-repeat; }
|
|
|
775 |
.vertical_tabber > .toggled:after { background-position: -232px -60px; }
|
|
|
776 |
.vertical_tabber .toggled { border: 0; color: #21282e; }
|
|
|
777 |
.vertical_tabber .current { color: #21282e; font-weight: bold; }
|
|
|
778 |
.vertical_sub_tabber, .vertical_sub_tabber.current { padding: 5px 0; border-bottom: 1px dotted #bdbdbd; display: none; background: #eff1f1; font-weight: normal; }
|
|
|
779 |
.vertical_sub_tabber.current { display: block; }
|
|
|
780 |
.vertical_sub_tabber > .tabber,
|
|
|
781 |
.vertical_sub_tabber > a { padding: 5px 10px; border: 0; }
|
|
|
782 |
|
|
|
783 |
.vertical_tabber_content { display: none; }
|
|
|
784 |
.vertical_tabber_content.current { display: block; }
|
|
|
785 |
|
|
|
786 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
787 |
Widgets
|
| 8146 |
amit.gupta |
788 |
-------------------------------------------------------------------*/
|
|
|
789 |
|
|
|
790 |
.rss_timeline_holder { border: 1px solid #ccc; }
|
|
|
791 |
.rss_timeline_header { padding: 10px; border-bottom: 1px solid #ccc; line-height: 1.5; }
|
|
|
792 |
.rss_timeline_header .header_icon { float: right; }
|
|
|
793 |
.rss_timeline_header .android_icon { width: 27px; height: 32px; background: url(../images/general/logo_android_icon.jpg) center center no-repeat; }
|
|
|
794 |
.rss_timeline_header .header_subtitle { font-size: 12px; }
|
|
|
795 |
|
|
|
796 |
.rss_timeline { height: 265px; overflow: auto; }
|
|
|
797 |
.rss_timeline .timeline_item { padding: 10px 5px 10px 15px; border-top: 1px solid #ccc; }
|
|
|
798 |
.rss_timeline .timeline_item:first-child { border-top: 0; }
|
|
|
799 |
.rss_timeline .timeline_item_timestamp { margin-bottom: 3px; font-size: 11px; text-align: right; }
|
|
|
800 |
.rss_timeline .timeline_item_title { color: #21282e; font-weight: bold; text-decoration: underline; }
|
|
|
801 |
.rss_timeline .timeline_item_content { margin-top: 3px; }
|
|
|
802 |
|
|
|
803 |
.rss_timeline_footer { height: 10px; background-color: #e5e5e5; line-height: 10px; }
|
|
|
804 |
|
|
|
805 |
|
| 8210 |
anupam.sin |
806 |
.twitter_timeline_holder {background: #8fc1da; }
|
| 8146 |
amit.gupta |
807 |
.twitter_timeline_header { padding: 10px; color: #fff; }
|
|
|
808 |
.twitter_timeline_header .header_title { font-size: 12px; font-weight: bold; }
|
|
|
809 |
.twitter_timeline_header .header_subtitle { padding-top: 3px; border-top: 1px dotted #ccc; margin-top: 3px; display: inline-block; *display: inline; *zoom: 1; }
|
|
|
810 |
|
|
|
811 |
.twitter_timeline_spacing { margin: 0 1px; }
|
|
|
812 |
.twitter_timeline_spacing > iframe { width: 100%; height: 240px; }
|
|
|
813 |
|
|
|
814 |
.twitter_timeline_footer .footer_logo { width: 91px; height: 22px; padding: 5px; margin-left: 10px; display: inline-block; *display: inline; *zoom: 1; background: url(../images/general/logo_twitter_timeline.jpg) center center no-repeat; }
|
|
|
815 |
|
|
|
816 |
|
|
|
817 |
/*-------------------------------------------------------------------
|
| 8150 |
amit.gupta |
818 |
Structure
|
| 8146 |
amit.gupta |
819 |
-------------------------------------------------------------------*/
|
|
|
820 |
|
|
|
821 |
.wrapper, .precontent { width: 940px; margin: 10px auto; }
|
|
|
822 |
|
|
|
823 |
.content { padding-bottom: 1em; border: 1px solid #bdbdbd; margin-bottom: 15px; background-color: #fff; }
|
|
|
824 |
.content > .padded_content { padding-bottom: 0; }
|
| 8210 |
anupam.sin |
825 |
.content.blue { background: #2789C1; box-shadow: inset 0 0 0 1px #fff; }
|
|
|
826 |
.content.blue .right_action_con { margin-top: 5px; float: right; }
|
| 8146 |
amit.gupta |
827 |
.right_action_con .btn_grey { margin-left: 10px; }
|
|
|
828 |
.right_action_con .btn_grey i { margin: -2px 5px 0 0; }
|
|
|
829 |
.padded_content { padding: 15px; *zoom: 1; } /* Zoom for IE7 rendering issue */
|
|
|
830 |
.padded_content.less_padding { padding: 10px; }
|
| 8210 |
anupam.sin |
831 |
.content_header { padding: 1em; border-bottom: 1px solid #bdbdbd; margin: 1px; background: #f5f8fa;}
|
| 8146 |
amit.gupta |
832 |
|
|
|
833 |
.precontent { margin: 0 auto .75em; position: relative; z-index: 5; background: transparent; }
|
|
|
834 |
.precontent h1, .precontent h2 { float: left; margin-top: -10px; }
|
|
|
835 |
.precontent .btn_small { font-size: 13px; }
|
|
|
836 |
.precontent .breadcrumbs { font-size: 11px; float: left; }
|
|
|
837 |
.precontent .floatRight [class^=icon_] { margin-left: 20px; }
|
|
|
838 |
.precontent .addthis_toolbox { margin-left: 20px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
|
|
|
839 |
.precontent .addthis_toolbox a { margin-left: 10px; }
|
|
|
840 |
.precontent .addthis_toolbox a:first-child { margin-left: 0; }
|
|
|
841 |
|
|
|
842 |
.postcontent { border-top: 1px solid #bfbfbf; padding: 10px 0; background-color: #eff1f1; }
|
|
|
843 |
.postcontent .wrapper, .footer .wrapper { background: transparent; border: 0; padding: 0; }
|
|
|
844 |
|
|
|
845 |
.breadcrumbs { font-size: 11px; line-height: normal; color: #bfbfbf; }
|
|
|
846 |
|
|
|
847 |
.utility_bar { min-height: 65px; padding: 0 10px; border-bottom: 1px solid #bdbdbd; background: url(/cs/site_template/ecommerce/images/general/gradient_grey_70px.png) repeat-x; color: #21282e; font-size: 12px; }
|
|
|
848 |
.utility_bar.wrapper { width: 920px; padding: 0 10px; margin: 0 auto; }
|
|
|
849 |
.utility_bar .content_counter { width: 145px; line-height: normal; color: #999; font-weight: normal; }
|
|
|
850 |
.utility_btn { width: 150px; height: 45px; padding-top: 20px; border-right: 1px solid #bdbdbd; margin: 0; float: left; line-height: 25px; font-weight: bold; }
|
|
|
851 |
.utility_btn.opened { background: #fff; }
|
|
|
852 |
.utility_btn.last { border-right: 0; }
|
|
|
853 |
.utility_btn .dropdown_arrow { margin-right: 10px; }
|
|
|
854 |
|
|
|
855 |
/*
|
|
|
856 |
* Some overriding styles needed in order to override the dropdown_con's
|
|
|
857 |
* appearance and make them look like the other utility_btn.
|
|
|
858 |
*/
|
|
|
859 |
.utility_btn [class*=dropdown_btn] { padding-left: 20px; border: 0; background: transparent; }
|
|
|
860 |
.utility_btn [class*=dropdown_btn]:before,
|
|
|
861 |
.utility_btn [class*=dropdown_btn]:after { display: none; }
|
|
|
862 |
.utility_btn select { padding: 0; left: -1px; }
|
|
|
863 |
.utility_btn .arrow { right: 10px; }
|
|
|
864 |
|
|
|
865 |
/* Grid/List view */
|
|
|
866 |
.grid_view,
|
|
|
867 |
.list_view { width: 104px; padding-left: 10px; cursor: pointer; position: relative; }
|
|
|
868 |
.grid_view.current,
|
|
|
869 |
.list_view.current { background: #fff; }
|
|
|
870 |
.list_view:after { content: ''; /* For IE7-pseudo */ }
|
|
|
871 |
.grid_view.current:after,
|
|
|
872 |
.list_view.current:after { content: ''; width: 100%; height: 4px; background: #fff; position: absolute; bottom: -3px; left: 0; }
|
|
|
873 |
|
|
|
874 |
/* .utility_bar + .wrapper,
|
|
|
875 |
.wrapper[class*=_catalogue] { border-top: 0; padding-top: 25px; } */
|
|
|
876 |
|
| 8210 |
anupam.sin |
877 |
a.btn_medium:hover{
|
|
|
878 |
color:#FFFFFF;
|
| 8146 |
amit.gupta |
879 |
}
|