Subversion Repositories SmartDukaan

Rev

Rev 8147 | Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
8146 amit.gupta 1
@charset "utf-8";
2
 
3
/*-------------------------------------------------------------------
4
	DiGi Ecomm - March - Combined CSS file
5
---------------------------------------------------------------------
6
	$ Index
7
---------------------------------------------------------------------
8
 
9
	$ Colors
10
	$ Shared
11
	$ General
12
 
13
	$ Assets
14
	  $ Back To Top
15
	  $ Banner Carousel
16
	  $ Buttons
17
	  $ Catalogues
18
	  $ Column Layouts
19
	  $ Content Togglers
20
	  $ Content Rounder
21
	  $ Content Switcher
22
	  $ Cursors
23
	  $ Dropdowns
24
	  $ Form Hints
25
	  $ Grid
26
	  $ Icons
27
	  $ Inputs
28
	  $ Islands
29
	  $ Lists
30
	  $ Link List
31
	  $ Media Link
32
	  $ Media Gallery
33
	  $ My Cart
34
	  $ Pagination
35
	  $ Popup
36
	  $ Progress Steps
37
	  $ Quick Links
38
	  $ Tables
39
	  $ Tabs
40
	  $ Tooltips
41
	  $ Widgets
42
 
43
	$ Structure
44
	  $ Header
45
	  $ Footer
46
 
47
	$ Pages
48
	  $ Comparison
49
	  $ Configure
50
	  $ Devices
51
	  $ Device Details
52
	  $ Error
53
	  $ Form Pages
54
	  $ Help & Support
55
	  $ International Services
56
	  $ Landing
57
	  $ Login + $ Register
58
	  $ Logout
59
	  $ My Account
60
	  $ My Cart Summary
61
	  $ Plan Details
62
	  $ Rewards
63
	  $ Reload
64
	  $ Search
65
	  $ Sitemap
66
	  $ Store Locator
67
	  $ Whats Hot
68
 
69
-------------------------------------------------------------------*/
70
 
71
 
72
/*-------------------------------------------------------------------
73
  	$ Colors
74
---------------------------------------------------------------------
75
 
76
	Light Blue (for tables)		-	#cbdde9
77
  	Blue						-	#0091d2
78
  	Blue (for blue button)		-	#007bb2
79
  	Orange						-	#fb7a14
80
  	Yellow						-	#fd0
81
	Pale Yellow					-	#fbe448
82
	Red							-	#f00
83
  	Dull Red (for red button)	-	#d40000
84
 
85
  	Light Grey					-	#f6f6f6
86
  	Grey						-	#eff1f1
87
  	Dark Grey					-	#e5e5e5
88
  	Black						-	#21282e
89
 
90
  	Grey (borders for buttons)	-	#cfcfcf
91
	Grey (borders for wrapper)	-	#bdbdbd
92
 
93
-------------------------------------------------------------------*/
94
 
95
 
96
/*------------------------------------------------------------------
97
	$ Shared
98
------------------------------------------------------------------*/
99
 
100
@font-face {
101
    font-family: 'Helvetica 65 Medium';
102
    src: url('../fonts/helvetica_65_medium-webfont.eot');
103
    src: url('../fonts/helvetica_65_medium-webfont.eot?#iefix') format('embedded-opentype'),
104
         url('../fonts/helvetica_65_medium-webfont.woff') format('woff'),
105
         url('../fonts/helvetica_65_medium-webfont.ttf') format('truetype'),
106
         url('../fonts/helvetica_65_medium-webfont.svg#helvetica_neuemedium') format('svg');
107
    font-weight: normal;
108
    font-style: normal;
109
}
110
 
111
@font-face {
112
    font-family: 'Helvetica Neue Light';
113
    src: url('../fonts/helvetica_45_light-webfont.eot');
114
    src: url('../fonts/helvetica_45_light-webfont.eot?#iefix') format('embedded-opentype'),
115
         url('../fonts/helvetica_45_light-webfont.woff') format('woff'),
116
         url('../fonts/helvetica_45_light-webfont.ttf') format('truetype'),
117
         url('../fonts/helvetica_45_light-webfont.svg#helvetica_neuemedium') format('svg');
118
    font-weight: normal;
119
    font-style: normal;
120
}
121
 
122
.inline_block,
123
/* General */ [class^="icon_"], [class*="dropdown_con"], .color_square, .dot_caption,
124
/* Arrow links */ .arrow_link, .landing_middle_content a:before,
125
/* Back to Top */ .back_to_top_arrow, .back_to_top_text,
126
/* Buttons */ [class^="btn_"],
127
/* Form Hint Icon */ .no_error .icon_hint, .has_error .icon_hint,
128
/* Form Hints */ .form_hint.show, .form_hint.has_error, .form_hint.no_error,
129
/* Header */ .logo_digi, .main_nav > a, .sub_nav > a,
130
/* Inputs */ .input_radio, .input_checkbox, .grey_textbox,
131
/* Pagination */ .prev_page, .next_page, .page_num, .page_dot,
132
/* Popups */ .close_popup, .popup_header .close_popup:after,
133
/* Progress Steps */ .progress_steps .step, .progress_steps .num, .progress_content .component, .progress_con [class$="_sign"], .progress_content .total_price, 
134
/* Tabs */ .content_tabber, .tabber_label
135
	{ display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
136
 
137
.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
138
	{ content: '.'; width: 0; height: 0; font: 0/0 a; color: transparent; display: block; clear: both; }
139
 
140
.clearfix { *zoom: 1; *clear: both; }
141
 
142
/* General */	 .color_square, .dot_hoverer, .content_rounder, .tbl_round, .content,
143
/* Catalogues */ .catalogue_item, .catalogue_item .item_preview, .catalogue_item .item_content,
144
/* Inputs */     .wrapper input[type="text"], .wrapper input[type="password"], .wrapper textarea,
145
				 .input_box,
146
/* Islands */	 .island,
147
/* Popups */	 .popup_con, .popup_loading,
148
/* Header */ 	 .main_nav, input.main_search
149
	{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
150
 
151
.sub_nav_con, .sub_menu, .banner_carousel + .content
152
	{ -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }
153
 
154
.banner_carousel, .banner_carousel .banner_clicker, .popup_header, .progress_steps, .island_title
155
	{ -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
156
 
157
 
158
/*-------------------------------------------------------------------
159
	$ General
160
-------------------------------------------------------------------*/
161
 
162
h1, h2, h3, h4 { color: #21282e; margin: .2em 0 .4em; font-weight: normal; line-height: 1em; }
163
h1, h2, h3 { font-family:"Helvetica 65 Medium", Helvetica, Arial, sans-serif; }
164
h1 { font-size: 28px; }
165
h2 { font-size: 22px; }
166
h3 { font-size: 18px; }
167
h4 { font-size: 14px; }
168
 
169
a, .arrow_link { color: #0091d2; text-decoration: none; }
170
 
171
td a, p a, li a { text-decoration: underline; }
172
td [class*="btn_"], p [class*="btn_"] { text-decoration: none; }
173
 
174
img { -ms-interpolation-mode: bicubic; }
175
 
176
hr.one_half_spaced { margin: 1.5em 0; }
177
hr.double_spaced { margin: 2em 0; }
178
 
179
p { margin: 0; padding: 0 0 1em; }
180
 
181
ul, ol { margin: 0; padding: 0; }
182
ol { margin: 0 0 1em 1.5em; }
183
	.bottom_spaced_li li { margin-bottom: 1em; }
184
	.left_spaced_li li { padding-left: 1.5em; }
185
 
186
textarea { font-family: Arial, Helvetica, sans-serif; }
187
 
188
.fontBlack { color: #21282e; }
189
.fontDarkGrey { color: #666; }
190
.fontGrey { color: #999; }
191
.fontBlue { color: #0091d2;  }
192
.fontOrange { color: #fb7a14; }
193
.fontRed { color: #f00; }
194
 
195
.text_mega { font-size: 38px; }
196
 
197
.align_bottom { vertical-align: bottom; }
198
span.align_bottom > img { vertical-align: bottom; }
199
 
200
.price_text { color: #fb7a14; font-size: 15px; font-weight: bold; }
201
.price_text.large { font-size: 20px; }
202
.price_text.xlarge { font-size: 25px; }
203
 
204
.vertical_middle,
205
table .vertical_middle td { vertical-align: middle; }
206
.relative { position: relative; }
207
 
208
.arrow_link,
209
.landing_middle_content a { padding-left: 20px; background: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_right.png) left 2px no-repeat; }
210
.landing_middle_content a,
211
.island .arrow_link,
212
.tbl_link_list .arrow_link,
213
ul.link_list a { background-position: left 7px; }
214
 
215
.warning { color: #f00; font-size: 12px; font-weight: normal; }
216
 
217
.notes { font-size: 11px; color: #999; }
218
.faded { color: #999; }
219
.notes li, .faded li { background-image: url(/cs/site_template/ecommerce/images/general/bullet_point_grey_tiny.png); }
220
 
221
.greyBG { background-color: #e2e4e5; }
222
.yellow_bg { background: #fd0; }
223
 
224
.horizontal_divider { width: 100%; height: 0; margin-bottom: 2em; position: relative; }
225
.horizontal_divider.double_spaced { margin: 1em 0 3em; }
226
	.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; }
227
	.grid_3_left_middle .horizontal_divider:after { background-image: url(/cs/site_template/ecommerce/images/general/general_img_divider_sdw_670px.png); }
228
 
229
.li [class^="input_"] { float: left; }
230
.li .li_content { display: inline-block; *display: inline; *zoom: 1; }
231
 
232
/* .greyLine_1px { background: #bdbdbd; height: 1px; } */
233
 
234
.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; }
235
.black_overlay.light { background: rgba(0,0,0,0.4); }
236
 
237
.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; }
238
 
239
 
240
/*-------------------------------------------------------------------
241
	Assets
242
---------------------------------------------------------------------
243
	$ Back To Top
244
-------------------------------------------------------------------*/
245
 
246
.back_to_top { width: 70px; height: 70px; border: 1px solid #bdbdbd; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; position: fixed; z-index: 5; bottom: -72px; right: 10px; background: url(/cs/site_template/ecommerce/images/general/gradient_grey_70px.png) repeat-x; text-align: center; font-weight: bold; cursor: pointer; font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
247
.back_to_top:active { background: #f9f9f9; }
248
	.back_to_top_arrow { width: 12px; height: 7px; margin: 5px 0; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) -280px 0 no-repeat; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
249
	.back_to_top_text { height: 45px; padding-top: 5px; line-height: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
250
 
251
@media print {
252
    .back_to_top { display: none; }
253
}
254
 
255
/*-------------------------------------------------------------------
256
	$ Banner Carousel
257
-------------------------------------------------------------------*/
258
 
259
.banner_carousel { height: 370px; border: 1px solid #bdbdbd; border-bottom: 0; position: relative; z-index: 4; }
260
.banner_carousel.slightly_shorter { height: 340px; }
261
.banner_carousel.slightly_x_shorter { height: 320px; }
262
.banner_carousel.short { height: 190px; }
263
 
264
	.banner_carousel h1 { margin: 0 0 .2em; }
265
 
266
	.banner_carousel .banner_clicker { height: 100%; display: block; background: center top no-repeat; }
267
	.banner_carousel .banner_clicker.hidden { display: block; }
268
	.banner_carousel .island_group { width: 205px; position: absolute; top: 10px; right: 10px; z-index: 1; }
269
 
270
	.dot_holder { height: 10px; position: absolute; bottom: 20px; right: 50%; z-index: 1; }
271
		.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; }
272
		.dot_holder .dot.selected { background-position: -93px -60px; }
273
 
274
	.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; }
275
		.dot_caption { max-width: 150px; }
276
		.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; }
277
		.dot_hoverer img { margin-right: 10px; vertical-align: middle; }
278
 
279
	.has_tabbers .dot_holder { bottom: 70px; }
280
	.has_tabbers .dot_hoverer { bottom: 95px; }
281
 
282
	.banner_notes { width: 520px; }
283
 
284
	/*
285
	 * For pages like the Whats Hot template, where the content tabber
286
	 * appears at the bottom of the static banner carousel.
287
	 */
288
	.banner_carousel .content_tabber_con { width: 100%; position: absolute; bottom: 0; left: 0; }
289
	.banner_carousel .content_tabber_con.multi_page { bottom: -10px; }
290
	.banner_carousel + .utility_bar { border-top: 0; }
291
		.banner_carousel .content_tabber_con .content_tabber:first-child { margin-left: 10px; }
292
 
293
.sub_search { width: 440px; margin: .5em 10px 1em; font-size: 18px; }
294
	div .sub_search input[type="text"] { width: 400px; height: 50px; border: 0; background: transparent; line-height: 50px; } /* Extra div for increased specificity, for overriding */
295
	div .sub_search input[type="submit"] { padding: 0; border: 0; margin: -4px 0 0; } /* Extra div for increased specificity, for overriding */
296
 
297
 
298
/*-------------------------------------------------------------------
299
	$ Buttons
300
-------------------------------------------------------------------*/
301
 
302
/* Blue buttons */
303
 
304
[class^="btn_"] { padding: 0 5px; margin: 0 5px; background-color: #0091d2; color: #fff; font-weight: bold; text-align: center; position: relative; }
305
	[class^="btn_"]:before, [class^="btn_"]:after { content: ''; width: 5px; position: absolute; top: 0; }
306
 
307
[class^="btn_"]:hover { background-color: #007bb2; }
308
	[class^="btn_"]:hover:before { background-position: left 0; }
309
	[class^="btn_"]:hover:after { background-position: right 0; }
310
 
311
.btn_small { font-size: 14px; line-height: 25px; }
312
	.btn_small:before { height: 25px; background: url(/cs/site_template/ecommerce/images/general/btn_small_sides.png) left -25px no-repeat; left: -5px; }
313
	.btn_small:after { height: 25px; background: url(/cs/site_template/ecommerce/images/general/btn_small_sides.png) right -25px no-repeat; right: -5px; }
314
 
315
.btn_medium { font-size: 15px; line-height: 30px; }
316
	.btn_medium:before { height: 30px; background: url(/cs/site_template/ecommerce/images/general/btn_medium_sides.png) left -30px no-repeat; left: -5px; }
317
	.btn_medium:after { height: 30px; background: url(/cs/site_template/ecommerce/images/general/btn_medium_sides.png) right -30px no-repeat; right: -5px; }
318
 
319
.btn_large { font-size: 17px; line-height: 40px; }
320
	.btn_large:before { height: 40px; background: url(/cs/site_template/ecommerce/images/general/btn_large_sides.png) left -40px no-repeat; left: -5px; }
321
	.btn_large:after { height: 40px; background: url(/cs/site_template/ecommerce/images/general/btn_large_sides.png) right -40px no-repeat; right: -5px; }
322
 
323
/* 3D buttons */
324
 
325
.btn_3d { background: url(../images/general/btn_3d_mid.png) center top repeat-x; }
326
    .btn_3d .label_btn { position: relative; top: -2px; }
327
.btn_3d:active { top: 1px; } 
328
    .btn_3d:active .label_btn { top: 0; }
329
 
330
    .btn_small.btn_3d:before { background-position: left -125px; }
331
    .btn_small.btn_3d:after { background-position: right -125px; }
332
.btn_small.btn_3d:active { background-position: center -25px; }
333
    .btn_small.btn_3d:active:before { background-position: left -150px; }
334
    .btn_small.btn_3d:active:after { background-position: right -150px; }
335
 
336
.btn_medium.btn_3d { background-position: center -50px; }
337
    .btn_medium.btn_3d:before { background-position: left -150px; }
338
    .btn_medium.btn_3d:after { background-position: right -150px; }
339
.btn_medium.btn_3d:active { background-position: center -80px; }
340
    .btn_medium.btn_3d:active:before { background-position: left -180px; }
341
    .btn_medium.btn_3d:active:after { background-position: right -180px; }
342
 
343
.btn_large.btn_3d { background-position: center -110px; }
344
    .btn_large.btn_3d:before { background-position: left -200px; }
345
    .btn_large.btn_3d:after { background-position: right -200px; }
346
.btn_large.btn_3d:active { background-position: center -150px; }
347
    .btn_large.btn_3d:active:before { background-position: left -240px; }
348
    .btn_large.btn_3d:active:after { background-position: right -240px; }
349
 
350
 /* Buttons with Inputs */
351
 
352
[class^="btn_"].input { padding: 0; }
353
 
354
[class^="btn_"] input { padding: 0 5px; border: 0; margin: 0; background: transparent; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
355
/* [class^="btn_"].extra_padded input { padding: 0 15px; *padding: 0; } */
356
 
357
.btn_small input { font-size: 14px; height: 25px; line-height: 25px; }
358
.btn_medium input { font-size: 15px; height: 30px; line-height: 30px; }
359
.btn_large input { font-size: 17px; height: 40px; line-height: 40px; }
360
 
361
/* Disabled button */
362
 
363
[class^=btn_].disabled { background-color: #bdbdbd; cursor: default; pointer-events: none; }
364
	.btn_small.disabled:before { background-position: left -50px; }
365
	.btn_small.disabled:after { background-position: right -50px; }
366
 
367
	.btn_medium.disabled:before { background-position: left -60px; }
368
	.btn_medium.disabled:after { background-position: right -60px; }
369
 
370
	.btn_large.disabled:before { background-position: left -80px; }
371
	.btn_large.disabled:after { background-position: right -80px; }
372
 
373
/* Red buttons */
374
 
375
[class^=btn_].red { background-color: #d40000; }
376
	.btn_small.red:before { background-position: left -75px; }
377
	.btn_small.red:after { background-position: right -75px; }
378
 
379
	.btn_medium.red:before { background-position: left -90px; }
380
	.btn_medium.red:after { background-position: right -90px; }
381
 
382
	.btn_large.red:before { background-position: left -120px; }
383
	.btn_large.red:after { background-position: right -120px; }
384
 
385
/* Orange buttons */
386
 
387
[class^=btn_].orange { background-color: #fb7a14; }
388
	.btn_small.orange:before { background-position: left -100px; }
389
	.btn_small.orange:after { background-position: right -100px; }
390
 
391
	.btn_medium.orange:before { background-position: left -120px; }
392
	.btn_medium.orange:after { background-position: right -120px; }
393
 
394
	.btn_large.orange:before { background-position: left -160px; }
395
	.btn_large.orange:after { background-position: right -160px; }
396
 
397
/* Grey buttons */
398
 
399
.btn_grey, .btn_grey:hover { height: 27px; margin: 0 5px; *margin: 0 10px; background: url(/cs/site_template/ecommerce/images/general/btn_grey_27px_mid.png) repeat-x; line-height: 27px; position: relative; color: #0091d2; }
400
	.btn_grey:before, .btn_grey:after { width: 5px; height: 100%; background: url(/cs/site_template/ecommerce/images/general/btn_grey_27px_sides.png) no-repeat; position: absolute; top: 0; }
401
	.btn_grey:before { left: -5px; }
402
	.btn_grey:after, .btn_grey:hover:after { right: -5px; background-position: -5px top; }
403
 
404
.btn_grey.large { height: 32px; background-image: url(/cs/site_template/ecommerce/images/general/btn_grey_32px_mid.png); line-height: 32px; }
405
	.btn_grey.large:before, .btn_grey.large:after { background-image: url(/cs/site_template/ecommerce/images/general/btn_grey_32px_sides.png); }
406
 
407
[class^="btn_"] .icon_left_arrow { position: relative; top: -1px; left: -5px; }
408
[class^="btn_"] .icon_right_arrow { position: relative; top: -1px; left: 5px; }
409
[class^="btn_"] .icon_small_shopping_cart { position: relative; top: -1px; }
410
 
411
 
412
/*-------------------------------------------------------------------
413
	$ Catalogues
414
---------------------------------------------------------------------
415
	For pages such as Devices, Rewards, Store Locator and Whats
416
	Hot, where all of them use a similar catalogue layout.
417
 
418
	- .product_catalogue for Devices page
419
	- .product_catalogue.accessories_catalogue for Accessories page
420
-------------------------------------------------------------------*/
421
 
422
.padded_catalogue { padding: 15px 10px 0; }
423
 
424
.catalogue_item { width: 220px; margin: 0 12.5px 15px 0; float: left; position: relative; }
425
	.catalogue_item .item_preview { width: 198px; padding: 10px; border: 1px solid #e5e5e5; color: #666; cursor: pointer;}
426
 
427
.catalogue_item.hidden { display: none; }
428
.catalogue_item.opened,
429
.catalogue_item.opened .item_preview { border: 0; background-color: #eff1f1; }
430
	.catalogue_item.opened .item_preview { padding: 11px; }
431
		.catalogue_item .item_name { height: 40px; display: block; color: #0091d2; font-weight: bold; line-height: 1.4em; }
432
 
433
		.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; }
434
		.catalogue_item.opened .item_toggler { background-image: url(/cs/site_template/ecommerce/images/general/btn_minus.png); }
435
 
436
		.catalogue_item .item_thumb { width: 200px; height: 54px; border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 1em 0 1em -1px; text-align: center; overflow: hidden; }
437
			.catalogue_item .item_thumb img { max-width: 100%; max-height: 100%; vertical-align: bottom; }
438
 
439
	.catalogue_item .item_content { width: 900px; padding: 10px; margin-top: 15px; background: #eff1f1; position: absolute; left: 0; z-index: 1; display: none; }
440
		.item_content_title { margin: 1em 0; font-size: 15px; font-weight: bold; }
441
		.catalogue_item .item_images { margin-bottom: 10px; }
442
			.catalogue_item .item_images img { padding: 5px; border: 1px solid #dcdcdc; margin-left: 3px; display: inline-block; vertical-align: bottom; background: #fff; }
443
			.catalogue_item .item_images img:first-child { margin-left: 0; }
444
 
445
		.catalogue_item .tbl_dark_horizontal { margin-bottom: 15px; }
446
		.catalogue_item .item_content ul { margin-bottom: 1em; }
447
			.catalogue_item .item_content li { padding-left: 1.5em; }
448
		.catalogue_item .notes li { padding-left: .75em; }
449
 
450
/* Extra div in front is needed to raise specificity for overriding */
451
div.catalogue_item.node4,
452
div.catalogue_item.last_in_row { margin: 0 0 15px 0; }
453
 
454
.catalogue_item.node2 .item_content { left: -234px; }
455
.catalogue_item.node3 .item_content { left: -468px; }
456
.catalogue_item.node4 .item_content { left: -700px; }
457
 
458
.grid_3_left_middle .catalogue_item .item_content { width: 665px; }
459
 
460
/* Product & Accessories catalogue - for pages that have Devices/Accesories listing */
461
 
462
.product_catalogue .catalogue_item { width: 218px; height: 398px; border: 1px solid #e5e5e5; font-size: 11px; line-height: normal; }
463
.short_product_catalogue .catalogue_item { height: 333px; }
464
	.product_name { font-size: 16px; line-height: 1.4em; font-weight: bold; position: absolute; top: 10px; left: 10px; }
465
	.info_ribbon ~ .product_name { width: 72%; }
466
	.product_rating { font: 0/0 a; position: absolute; top: 32px; left: 10px; } 
467
 
468
	.product_catalogue .info_ribbon { position: absolute; top: -4px; right: -4px; }
469
 
470
	.product_catalogue .product_img { width: 110px; height: 185px; position: absolute; top: 65px; left: 0; text-align: center; line-height: 185px; }
471
		.product_catalogue .product_img img {  max-width: 100%; max-height: 100%; vertical-align: top; }
472
		.product_catalogue .badge { position: absolute; bottom: 0; right: -35px; }
473
 
474
	.product_price_con { width: 95px; position: absolute; bottom: 10px; left: 10px; z-index: 2; font-weight: bold; } 
475
	   .plan_product_catalogue .product_price_con { bottom: 14px; }
476
		.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 */
477
 
478
	.product_catalogue .product_details { width: 85px; position: absolute; top: 75px; left: 115px; }
479
 
480
	.product_colors { width: 95px; color: #c7c7c7; position: absolute; bottom: 65px; right: 10px; } 
481
		.product_colors .color_square { margin-top: 2px; *margin-right: 4px; }
482
 
483
	.product_catalogue .icon_epp,
484
       .product_catalogue .product_icon { position: absolute; top: 150px; left: 115px; }
485
	.plan_product_catalogue .icon_epp,
486
       .plan_product_catalogue .product_icon { top: 170px; }
487
	.product_catalogue .compare_con { position: absolute; bottom: 70px; left: 10px; font-size: 12px; }
488
		.product_catalogue .compare_con input { vertical-align: middle; }
489
	.product_catalogue .btn_medium { position: absolute; bottom: 10px; right: 10px; z-index: 2; font-size: 13px; }
490
	.product_desc { display: none; }
491
 
492
	.product_grey_bg { width: 218px; height: 55px; border-top: 1px solid #e2e4e5; border-radius: 0 0 5px 5px; position: absolute; bottom: 0; left: 0; z-index: 1; background-color: #f6f6f6; }
493
		.product_grey_bg:before { content: ''; width: 100%; height: 0; border-top: 1px solid #fff; position: absolute; top: 0; left: 0; }
494
 
495
.accessories_catalogue .catalogue_item { height: 338px; }
496
.accessories_catalogue .product_img { width: 100%; top: 45px; }
497
	.accessories_catalogue .product_img img { vertical-align: bottom; }
498
	.accessories_catalogue .badge { bottom: 40px; right: 40px; }
499
 
500
.accessories_catalogue .product_quantity { position: absolute; top: 240px; right: 10px; font-weight: bold; }
501
 
502
.product_catalogue.list .catalogue_item { width: 918px; height: 175px; margin-right: 0; }
503
.product_catalogue.list .catalogue_item.last_row { margin-left: 0; }
504
 
505
.product_catalogue.list .product_img { width: 120px; height: 150px; top: 15px; left: 10px; line-height: 150px; }
506
	.product_catalogue.list .badge { right: 0; }
507
 
508
.product_catalogue.list .product_details { width: 150px; top: 75px; left: 135px; }
509
.plan_product_catalogue.list .product_details { display: none; }
510
.product_catalogue.list .product_name { width: 110px; top: 25px; left: 135px; line-height: 1.1em; }
511
.product_catalogue.list .icon_epp,
512
.product_catalogue.list .product_icon { top: 25px; left: 250px; right: auto; }
513
.product_catalogue.list .product_rating { top: 42px; left: 135px; }
514
.product_catalogue.list .product_price_con { top: 25px; right: 25px; bottom: auto; left: auto; }
515
 
516
.product_catalogue.list .compare_con { bottom: 15px; left: 135px; font-size: 11px; }
517
	.product_catalogue.list .compare_con input { margin-top: -1px; }
518
 
519
.product_catalogue.list .product_colors { width: 355px; top: 105px; left: 355px; line-height: 23px; }
520
	.product_catalogue.list .product_colors .color_square { margin: 0; *margin-right: 4px; vertical-align: middle; }
521
 
522
.product_catalogue.list .btn_medium { min-width: 60px; top: 85px; right: auto; bottom: auto; left: 800px; }
523
 
524
.product_catalogue.list .product_desc { width: 355px; position: absolute; top: 25px; left: 355px;font-size: 13px; line-height: normal; display: block; }
525
 
526
.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; }
527
	.product_catalogue.list .product_action .btn_medium { margin-top: 15px; }
528
 
529
.product_catalogue.list .product_grey_bg { display: none; }
530
 
531
.accessories_catalogue.list .product_name { width: 150px; }
532
.accessories_catalogue.list .product_quantity { top: 42px; left: 135px; }
533
.accessories_catalogue.list .badge { bottom: 25px; }
534
 
535
.product_catalogue .load_more { width: 65px; margin: 0 auto; display: block; font-size: 12px; font-weight: bold; text-align: center; clear: both; }
536
.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; }
537
 
538
 
539
/*-------------------------------------------------------------------
540
	$ Column Layouts
541
-------------------------------------------------------------------*/
542
 
543
.column_obj { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
544
	.column_obj iframe { margin-bottom: 1em; }
545
 
546
.two_columns .column_obj { width: 47%; }
547
.two_columns .column_obj:first-child { margin-right: 4%; *margin-right: 2%; }
548
	.two_columns .column_obj.wider { width: 57%; }
549
	.two_columns .column_obj.wider + .column_obj { width: 37%; }
550
 
551
.three_columns .column_obj { width: 30.3%; }
552
.three_columns .column_obj:first-child,
553
.three_columns .column_obj:first-child + .column_obj { margin-right: 4%; }
554
 
555
.four_columns .column_obj { width: 24.5%; }
556
 
557
 
558
/*-------------------------------------------------------------------
559
	$ Content Togglers
560
-------------------------------------------------------------------*/
561
 
562
.content_toggler_con { margin-bottom: 1em; }
563
.content_toggler_con.padded { padding: 15px; }
564
	.content_toggler_con .content_toggler { cursor: pointer; }
565
	.content_toggler_con .toggled_content { display: none; *zoom: 1; }
566
	.content_toggler_con .toggled_content.unpadded { padding: 0; }
567
 
568
/* Self Content togglers */
569
 
570
.self_content_toggler .content_toggler_obj { border: 1px solid #bdbdbd; border-radius: 5px; margin-bottom: 1em; background: url(/cs/site_template/ecommerce/images/general/gradient_white_30px.png) center bottom repeat-x; }
571
	.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; }
572
	.self_content_toggler .toggled .content_toggler { background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_up.png); }
573
	.self_content_toggler .toggled_content { padding: 10px 20px 20px; }
574
 
575
.self_content_toggler.large .content_toggler { background-position: 10px 10px; font-size: 18px; }
576
.self_content_toggler .flush_right { position: absolute; right: 10px; top: 7px; color: #21282e; font-size: 13px; font-weight: normal; line-height: 22px; }
577
.self_content_toggler.cart .toggled_content { padding: 10px; }
578
 
579
.self_content_toggler .right_action_con { text-align: right; }
580
	.self_content_toggler .btn_grey { margin-left: 1em; }
581
	.self_content_toggler .btn_grey i { margin: -2px 5px 0 0; }
582
 
583
.self_content_toggler .content_toggler .warning { vertical-align: middle; }
584
 
585
/* Single Content togglers */
586
 
587
.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; }
588
.single_content_toggler > .content_toggler.toggled { background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_2_up.png); }
589
	.single_content_toggler > .toggled_content_con { padding-top: 1em; clear: both; }
590
	.single_content_toggler > .toggled_content_con > .toggled_content { padding: 15px; background: #f1f1f1; border-radius: 5px; box-shadow: inset 0 1px 2px #aaa; }
591
	.single_content_toggler .toggled_content .content_rounder { background: #fff; }
592
 
593
.single_content_toggler ul { margin: 1em 0; }
594
.single_content_toggler li { padding-left: 1em; }
595
	.single_content_toggler li li { margin-left: 1em; }
596
	.single_content_toggler li ul { margin: 0; }
597
 
598
/* Question & Answer togglers */
599
 
600
.question_answer_toggler { border: 1px solid #e5e5e5; border-radius: 5px; background: #fff; }
601
	.question_answer_toggler .content_toggler_obj { border-top: 1px dotted #bdbdbd; }
602
	.question_answer_toggler .content_toggler_obj:first-child { border-top: 0; }
603
 
604
		.question_answer_toggler .content_toggler { padding: 10px 30px; position: relative; color: #0091d2; background: url(/cs/site_template/ecommerce/images/general/btn_plus.png) 10px 12px no-repeat; }
605
		.question_answer_toggler .toggled .content_toggler { background: #eff1f1 url(/cs/site_template/ecommerce/images/general/btn_minus.png) 10px 12px no-repeat; font-weight: bold; }
606
		.question_answer_toggler :first-child .content_toggler { border-radius: 5px 5px 0 0; }
607
 
608
		.question_answer_toggler .toggled_content { padding: 10px 30px; }
609
			.question_answer_toggler .understate { color: #666; }
610
 
611
/* My Cart Summary toggler */
612
 
613
.cart_summary_toggler .content_toggler_obj { border: 0; margin-bottom: 0; background: none; }
614
	.cart_summary_toggler .content_toggler { padding: 10px 10px 10px 40px; }
615
		.cart_summary_toggler .content_toggler:before { left: 15px; }
616
		.cart_summary_toggler .flush_right { top: 10px; }
617
	.cart_summary_toggler .toggled_content { padding: 0; position: relative; background: #eff1f1; }
618
	.cart_summary_toggler .toggled_content:before,
619
	.cart_summary_toggler .toggled_content:after { content: ''; width: 100%; height: 5px; position: absolute; top: 0; left: 0; background: url(/cs/site_template/ecommerce/images/general/shadow_top_bottom.png) bottom left repeat-x; }
620
	.cart_summary_toggler .toggled_content:after { top: auto; bottom: 0; background-position: top left; }
621
 
622
 
623
/*-------------------------------------------------------------------
624
	$ Content Rounder
625
-------------------------------------------------------------------*/
626
 
627
.content_rounder { padding: 15px; border: 1px solid #bdbdbd; margin-bottom: 1em; }
628
.content_rounder.unpadded { padding: 0; }
629
	.content_rounder > .content_title,
630
	.content_rounder > .padded_content > .content_title { margin-bottom: .2em; font-size: 18px; font-weight: bold; }
631
 
632
.static_content_con .content_rounder,
633
.content_rounder.static { border: 0; background-color: #eff1f1; }
634
.content_rounder.grey { border-color: #e5e5e5; background-color: #eff1f1; }
635
.content_rounder.yellow { border: 0; background: #fbe448; color: #666; }
636
 
637
.transaction_num_con { width: 400px; text-align: center; }
638
.content_title + .transaction_num_con { margin-top: 2em; }
639
	.transaction_num_con .transaction_num { margin: .25em 0 .5em; color: #21282e; font-size: 28px; font-weight: bold; }
640
	.transaction_num_con .understate { font-size: 12px; }
641
 
642
 
643
/*-------------------------------------------------------------------
644
	$ Content Switcher
645
-------------------------------------------------------------------*/
646
 
647
.content_switcher_content { display: none; }
648
.content_switcher_content:first-child { display: block; }
649
 
650
 
651
/*-------------------------------------------------------------------
652
	$ Cursors
653
-------------------------------------------------------------------*/
654
 
655
.ui-draggable, .draggable { cursor: url(/cs/site_template/ecommerce/images/general/cursor_open_hand.cur), default !important; position: absolute; top: 0; left: 0; }
656
.ui-draggable-dragging, .dragging { cursor: url(/cs/site_template/ecommerce/images/general/cursor_closed_hand.cur), default !important; }
657
 
658
.cursor_zoom_in { cursor: url(/cs/site_template/ecommerce/images/general/cursor_zoom_in.png), default !important; }
659
.cursor_zoom_out { cursor: url(/cs/site_template/ecommerce/images/general/cursor_zoom_out.png), default !important; }
660
 
661
 
662
/*-------------------------------------------------------------------
663
	$ Dropdowns
664
-------------------------------------------------------------------*/		
665
 
666
[class*="dropdown_con"] { width: 110px; height: 27px; margin: 0 5px; position: relative; line-height: 27px; }
667
	[class*="dropdown_btn"] { padding: 0 15px 0 5px; height: 100%; background: url(/cs/site_template/ecommerce/images/general/btn_light_grey_27px_mid.png) left top repeat-x; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; *white-space: normal; }
668
		[class*="dropdown_btn"]:before,
669
		[class*="dropdown_btn"]:after { content: ''; width: 5px; height: 100%; background: url(/cs/site_template/ecommerce/images/general/btn_light_grey_27px_sides.png) no-repeat; position: absolute; top: 0; }
670
		[class*="dropdown_btn"]:before { left: -5px; }
671
		[class*="dropdown_btn"]:after { background-position: right top; right: -5px; }
672
 
673
		.dropdown_arrow,
674
		.dropdown_arrow_down,
675
		.dropdown_con .arrow,
676
		.dropdown_con .arrow_down { width: 9px; height: 12px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) -260px -80px no-repeat; position: absolute; top: 50%; right: 5px; margin-top: -6px; }
677
		.dropdown_arrow_down,
678
		.dropdown_con .arrow_down { height: 6px; right: 8px; background-position: -260px -86px; margin-top: -3px; }
679
 
680
		.dropdown_con.bordered_arrow:after,
681
		.quantity_dropdown:after { content: ''; width: 0; height: 100%; border-left: 1px solid #cfcfcf; position: absolute; top: 0; right: 30px; }
682
		.quantity_dropdown:after { height: 32px; }
683
 
684
	.dropdown_con select,
685
	[class*="dropdown_menu"] { width: 100%; height: 100%; padding: 0 4px; position: absolute; top: -2px; left: -4px; *top: 0; *left: 0; opacity: 0; background: none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: menulist-button;}/* -webkit-appearance is to allow the 100% height to take effect for Chrome on Mac */
686
 
687
	.quantity_dropdown { height: 34px; line-height: 34px; }
688
		.quantity_dropdown .dropdown_btn { height: 100%; background: url(/cs/site_template/ecommerce/images/general/btn_light_grey_34px_mid.png) repeat-x; }
689
		.quantity_dropdown .dropdown_btn:before,
690
		.quantity_dropdown .dropdown_btn:after { height: 100%; background-image: url(/cs/site_template/ecommerce/images/general/btn_light_grey_34px_sides.png); }
691
 
692
.quantity_dropdown { width: 60px; margin-left: 10px; *left: 10px; }
693
 
694
.dropdown_white_xlarge { height: 65px; } 
695
	.dropdown_white_xlarge .dropdown_btn { padding-right: 20px; background: url(/cs/site_template/ecommerce/images/general/btn_white_shadow_65px_center.png) repeat-x; line-height: 60px; }
696
		.dropdown_white_xlarge .dropdown_label { display: inline-block; *display: inline; *zoom: 1; line-height: normal; *position: relative; *top: 50%; vertical-align: middle; }
697
			.dropdown_white_xlarge .dropdown_label span { *position: relative; *top: -50%; }
698
		.dropdown_white_xlarge .dropdown_btn:before,
699
		.dropdown_white_xlarge .dropdown_btn:after { content: ''; width: 10px; height: 65px; position: absolute; top: 0; background: url(/cs/site_template/ecommerce/images/general/btn_white_shadow_65px_sides.png) left top no-repeat; }
700
		.dropdown_white_xlarge .dropdown_btn:before { left: -10px; }
701
		.dropdown_white_xlarge .dropdown_btn:after { right: -10px; background-position: right top; }
702
		.dropdown_white_xlarge .arrow { width: 14px; height: 7px; margin-top: -3px; background-position: -120px -120px; }
703
 
704
	.dropdown_white_xlarge select { height: 60px; padding: 0 9px; left: -9px; }
705
 
706
.dropdown_con.language { width: 130px; }
707
 
708
/*-------------------------------------------------------------------
709
	$ Form Hints
710
-------------------------------------------------------------------*/	
711
 
712
.form_hint { margin-left: 5px; display: none; vertical-align: top; background: none; color: #999; cursor: default; }
713
[class*=dropdown_con] + .form_hint { margin-left: 10px; }
714
 
715
.form_hint_msg { font-size: 11px; line-height: normal; vertical-align: middle; }
716
.form_hint_error_msg { font-size: 13px; line-height: normal; }
717
.form_hint.has_error,
718
.form_hint.server_error { color: #fb7a14; }
719
	.form_hint_error_msg,
720
	.has_error.show_form_hint .form_hint_error_msg,
721
	.no_error .form_hint_msg,
722
	.has_error .form_hint_msg,
723
	.server_error .form_hint_msg { display: none; }
724
	.show_form_hint .form_hint_msg { display: inline-block; *display: inline; *zoom: 1; }
725
	div.icon_hint { width: 21px; height: 15px; *margin-right: 4px; vertical-align: top; display: none; background-position: -80px -80px; }
726
	.has_error .icon_hint, .server_error .icon_hint { background-position: -101px -80px; }
727
	.has_error .form_hint_error_msg, .server_error .form_hint_error_msg { display: inline; }
728
	.server_error .form_hint_msg { display: none; }
729
 
730
 
731
/*-------------------------------------------------------------------
732
	$ Grid
733
-------------------------------------------------------------------*/
734
 
735
[class*="grid_3_"] { margin-right: 18px; float: left; }
736
	.grid_3_left, .grid_3_right { width: 205px; min-height: 1px; }
737
	.grid_3_middle { width: 460px; min-height: 1px;}
738
	.grid_3_left_middle, .grid_3_middle_right { width: 685px; min-height: 1px; }
739
		.grid_3_left, .grid_3_left_middle { clear: left; }
740
		.grid_3_right, .grid_3_middle_right { margin-right: 0; }
741
 
742
/* Nested grid */
743
 
744
[class*="grid_3_"] > .grid_3_middle,
745
[class*="grid_3_"] > .grid_3_right { margin-right: 0; }
746
 
747
 
748
/*-------------------------------------------------------------------
749
	$ Icons
750
-------------------------------------------------------------------*/
751
 
752
/* Sprite sheet grid size: 20x20px */
753
[class^="icon_"] { background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) no-repeat; *margin-right: 4px; }
754
 
755
	/* Row 1 */
756
 
757
	.icon_search { width: 20px; height: 19px; }
758
	.icon_epp { width: 38px; height: 27px; background-position: -40px 0; }
759
	.icon_fb { width: 16px; height: 17px; background-position: -120px 0; }
760
	.icon_twitter { width: 16px; height: 17px; background-position: -140px 0; }
761
	.icon_share { width: 16px; height: 17px; background-position: -160px 0; }
762
	.icon_rss { width: 16px; height: 17px; background-position: -180px 0; }
763
 
764
	/* Row 2*/
765
 
766
	.icon_left_arrow { width: 6px; height: 12px; background-position: -120px -20px; }
767
	.icon_right_arrow { width: 6px; height: 12px; background-position: -126px -20px; }
768
	.icon_my_ocs { width: 10px; height: 15px; background-position: -140px -20px; }
769
	.icon_white_pin { width: 10px; height: 16px; background-position: -160px -20px; }
770
	.icon_pin { width: 9px; height: 13px; background-position: -280px -20px; }
771
 
772
	/* Row 3 */
773
 
774
	.icon_my_cart { width: 20px; height: 14px; background-position: 0 -40px; }
775
	.icon_live_chat { width: 17px; height: 15px; background-position: -20px -40px; }
776
	.icon_help { width: 16px; height: 16px; background-position: -40px -40px; }
777
	.icon_question { width: 15px; height: 14px; background-position: -60px -40px; cursor: pointer; }
778
	.icon_letter { width: 15px; height: 10px; background-position: -80px -40px; }
779
	.icon_cube { width: 19px; height: 17px; background-position: -100px -40px; }
780
	.icon_magnify { width: 17px; height: 18px; background-position: -120px -40px; }
781
	.icon_picture { width: 19px; height: 16px; background-position: -140px -40px; }
782
	.icon_video { width: 18px; height: 16px; background-position: -160px -40px; }
783
	.icon_printer { width: 17px; height: 13px; background-position: -180px -40px; }
784
	.icon_thumbs_up { width: 17px; height: 18px; background-position: -200px -40px; }
785
	.icon_thumbs_down { width: 17px; height: 18px; background-position: -220px -40px; }
786
	.icon_cancel { width: 13px; height: 12px; margin-top: -2px; background-position: -240px -40px; cursor: pointer; }
787
	.icon_small_star { width: 14px; height: 13px; background-position: -260px -40px; }
788
	.icon_small_star_filled { width: 14px; height: 13px; background-position: -274px -40px; }
789
 
790
	/* Row 4 */
791
 
792
	.icon_reload { width:15px; height:15px; background-position: 0 -60px; }
793
	.icon_my_account { width:13px; height:11px; background-position: -20px -60px; }
794
	.icon_find_store { width:9px; height:13px; background-position: -40px -60px; }
795
	.icon_switch { width:14px; height:14px; background-position: -60px -60px; }
796
	.icon_close { width: 15px; height: 15px; background-position: -120px -60px; }
797
	.icon_large_star { width: 20px; height: 19px; background-position: -260px -60px; }
798
	.icon_large_star_filled { width: 20px; height: 19px; background-position: -280px -60px; }
799
 
800
	/* Row 5 */
801
 
802
	.icon_tick { width: 15px; height: 15px; background-position: left -80px; }
803
	.icon_cross { width: 15px; height: 15px; background-position: -15px -80px; }
804
	.icon_tick_small { width: 12px; height: 12px; background-position: -40px -80px; }
805
	.icon_cross_small { width: 12px; height: 12px; background-position: -52px -80px; }
806
	.icon_grid_view { width: 10px; height: 10px; margin: 0 10px 0 6px; background-position: -140px -80px; }
807
	.icon_list_view { width: 10px; height: 10px; margin: 0 10px 0 6px; background-position: -160px -80px; }
808
	.icon_link_arrow { width: 13px; height: 12px; background-position: -180px -80px; }
809
 
810
	/* Row 6 */
811
 
812
	.icon_alert { width: 24px; height: 29px; background-position: -60px -100px; }
813
	.icon_plus_blue { width: 14px; height: 14px; background-position: -140px -100px; }
814
	.icon_search_blue { width: 24px; height: 23px; background-position: -160px -100px; }
815
 
816
	/* Row 7 */
817
 
818
	.icon_tabber_dot { width: 8px; height: 8px; background-position: -140px -120px; }
819
	.icon_cancel_large { width: 21px; height: 20px; background-position: -200px -120px; }
820
	.icon_shopping_cart { width: 21px; height: 17px; background-position: -240px -120px; }
821
	.icon_small_shopping_cart { width: 19px; height: 14px; background-position: -280px -120px; }
822
 
823
.color_square { width: 22px; height: 22px; border: 1px solid #bfbfbf; }
824
 
825
 
826
/*-------------------------------------------------------------------
827
	$ Inputs
828
-------------------------------------------------------------------*/
829
 
830
.input_checkbox, .input_radio { margin-right: 5px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) no-repeat; vertical-align: middle; cursor: pointer; outline: 0; }
831
	.input_checkbox { width: 19px; height: 20px; background-position: -180px -60px; }
832
	.input_checkbox.checked { background-position: -199px -60px; }
833
	.input_radio { width: 18px; height: 19px; background-position: -140px -60px; }
834
	.input_radio.checked { background-position: -158px -60px; }
835
 
836
label { cursor: pointer; }
837
 
838
input[type="checkbox"], input[type="radio"] { outline : 0; }
839
input[type="submit"], input[type="reset"] { cursor: pointer; }
840
 
841
input.placeholder { color: #999; }
842
.input_hidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); *clip: rect(1px 1px 1px 1px); opacity: 0; }
843
 
844
 
845
.input_white_xlarge, form.sub_search { height: 65px; position: relative; background: url(/cs/site_template/ecommerce/images/general/btn_white_shadow_65px_center.png) repeat-x; line-height: 65px; display: inline-block; *display: inline; *zoom: 1; }
846
	.input_white_xlarge:before,
847
	.input_white_xlarge:after,
848
	form.sub_search:before,
849
	form.sub_search:after { content: ''; width: 10px; height: 65px; position: absolute; top: 0; background: url(/cs/site_template/ecommerce/images/general/btn_white_shadow_65px_sides.png) left top no-repeat; }
850
	.input_white_xlarge:before,
851
	form.sub_search:before { left: -10px; }
852
	.input_white_xlarge:after,
853
	form.sub_search:after { right: -10px; background-position: right top; }
854
	.input_white_xlarge input,
855
	form.sub_search input { box-shadow: none; }
856
 
857
 
858
/*-------------------------------------------------------------------
859
	$ Islands
860
-------------------------------------------------------------------*/
861
 
862
.island { padding-bottom: 5px; margin-bottom: 1em; background-color: #eff1f1; }
863
	.island_title { padding: 8px 10px; background: #fd0; position: relative; font-size: 15px; line-height: 1.1em; font-weight: bold; }
864
	.island_img { width: 100%; text-align: center; overflow: hidden; }
865
		.island_img img { width: 100%; height: auto; }
866
	.island_content { padding: 10px; display: block; }
867
	.island .yellow_bg { background: #fd0; }
868
 
869
	.island_list { padding-left: 2em; *padding-left: 0; *margin-left: 2em; }
870
		.island_list li { margin: 10px 0; }
871
 
872
	.island_link,
873
	.island_block { padding: 10px 5px; margin: 0 5px; border-bottom: 1px dotted #cfcfcf; display: block; }
874
	.island .arrow_link { margin-left: 10px; line-height: 25px; display: block; }
875
	.island_content .arrow_link { margin-left: 0; }
876
		.island .arrow_link:before { top: 6px; }
877
	.island_link.last,
878
	.island_block.last { border: 0; }
879
	.island_link.last + .island_title,
880
	.island_block.last + .island_title { margin-top: 10px; }
881
 
882
	.island .icon_question { margin-top: -4px; }
883
 
884
 
885
/*-------------------------------------------------------------------
886
	$ Lists
887
-------------------------------------------------------------------*/
888
 
889
.arrow_list > li { padding-left: 20px; background: url(/cs/site_template/ecommerce/images/general/arrow_links_grey.png) 6px 4px no-repeat; }
890
 
891
.spaced_list > li { margin-top: 3px; margin-bottom: 3px; }
892
 
893
 
894
/*-------------------------------------------------------------------
895
	$ Link List
896
-------------------------------------------------------------------*/
897
 
898
.link_list > .current { font-weight: bold; color: #000; }
899
 
900
/* div.link_list > a > span.link_label > span */
901
.link_list.horizontal { margin-bottom: 10px; }
902
	.link_list.horizontal > a { *height: 35px; padding: 0 15px; border-bottom: 1px dotted #bdbdbd; position: relative; display: inline-block; *display: inline; *zoom: 1; line-height: 35px; *vertical-align: bottom; }
903
	.link_list.horizontal > a:first-child { padding-left: 0; }
904
		.link_list.horizontal .link_label { *position: relative; *top: 50%; display: inline-block; *display: inline; *zoom: 1; line-height: normal; vertical-align: middle; *cursor: pointer; }
905
			.link_list.horizontal .link_label span { *position: relative; *top: -50%; }
906
		.link_list.horizontal > a:before { content: ''; width: 0; height: 15px; border-right: 1px dotted #bdbdbd; position: absolute; left: 0; bottom: 0; }
907
		.link_list.horizontal > a:first-child:before { display: none; }
908
 
909
/* ul.link_list > li > (regular text)
910
 * ul.link_list > li > a */
911
ul.link_list li { padding: 0; font-weight: bold; border-top: 1px solid #eee; background: none; }
912
ul.link_list li:first-child { border-top: 0; }
913
	ul.link_list a { padding: 5px 0 5px 20px; }
914
	ul.link_list .group_title { padding: 5px 0; }
915
 
916
 
917
/*-------------------------------------------------------------------
918
	$ Media Link
919
-------------------------------------------------------------------*/
920
 
921
.media_link_con { padding-bottom: 3em; position: relative; }
922
	.media_link { width: 220px; margin: 10px 16px 1em 0; *margin-right: 20px; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
923
	.media_link.last_in_row,
924
	.content .media_link.last_in_row { margin-right: 0; }
925
		.media_link .media_img { width: 100%; border-radius: 5px; overflow: hidden; margin-bottom: 1em; display: block;  }
926
			.media_link .media_img img { max-width: 100%; vertical-align: bottom; }
927
		.media_link a { display: block; font-weight: bold; margin-bottom: 5px; }
928
 
929
	.content .media_link { width: 200px; margin-right: 31px; }
930
		.content .media_img { border: 1px solid #e5e5e5; }
931
 
932
 
933
/*-------------------------------------------------------------------
934
	$ Media Gallery
935
-------------------------------------------------------------------*/
936
 
937
.media_gallery { margin-bottom: 20px; position: relative; } 
938
    .media_gallery_main_media { margin: 0 auto; }
939
    .media_gallery_main_media.standard_media_size { width: 570px; height: 320px; }
940
    .media_gallery_thumbnails { padding: 0 40px; position: relative; text-align: center; white-space: nowrap; }
941
    .media_gallery_main_media + .media_gallery_thumbnails { margin-top: 15px; }
942
        .media_gallery_thumbnails .thumbnails_hider { width: 100%; position: relative; overflow: hidden; }
943
        .media_gallery .next_thumbnail,
944
        .media_gallery .prev_thumbnail { width: 30px; height: 100%; border: 0; position: absolute; top: 0; background: center center no-repeat; cursor: pointer; }
945
        .media_gallery .next_thumbnail.is_hidden,
946
        .media_gallery .prev_thumbnail.is_hidden { display: none; }
947
        .media_gallery .next_thumbnail { right: 7px; background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_2_right.png); }
948
        .media_gallery .prev_thumbnail { left: 7px; background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_2_left.png); }
949
        .media_gallery_thumbnails .gallery_thumbnail {
950
            margin: 0 5px; cursor: pointer;
951
        }
952
        .media_gallery_thumbnails .gallery_thumbnail img {
953
            filter: alpha(opacity=60);
954
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
955
            opacity: 0.6;
956
            -webkit-transition: opacity 0.25s;
957
               -moz-transition: opacity 0.25s;
958
                 -o-transition: opacity 0.25s;
959
                    transition: opacity 0.25s;
960
        }
961
        .media_gallery_thumbnails .gallery_thumbnail.current img,
962
        .media_gallery_thumbnails .gallery_thumbnail:hover img {
963
            filter: alpha(opacity=100);
964
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
965
            opacity: 1;
966
        }
967
 
968
 
969
/*-------------------------------------------------------------------
970
	$ My Cart
971
-------------------------------------------------------------------*/
972
 
973
.my_cart_con { width: 265px; padding: 0 20px; position: absolute; top: 18px; left: auto; right: -30px; z-index: 5; display: none; }
974
	.my_cart_arrow { width: 17px; height: 11px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) -100px -120px no-repeat; position: absolute; top: 0; right: 55px; z-index: 2; }
975
	.my_cart.popup_con { width: 100%; margin: 10px 0 0 0; border: 1px solid #bdbdbd\9; position: static; top: auto; left: auto; display: block; }
976
 
977
	.my_cart .popup_header { padding: 10px; }
978
 
979
	.my_cart_category_title { font-size: 16px; font-weight: bold; }
980
	.my_cart .padded_content { padding: 10px; }
981
		.my_cart_subtotal + .padded_content { border-top: 1px solid #bdbdbd; }
982
 
983
	.my_cart_component { padding: 1em 0; border-top: 1px solid #e5e5e5; font-size: 11px; }
984
	.my_cart_component.empty { padding: 1em; border-top: 0; display: none; }
985
	.my_cart_category_title + .my_cart_component { border-top: 0; }
986
		.my_cart_component_img { width: 45px; height: 55px; float: left; text-align: center; }
987
			.my_cart_component_img img { max-width: 100%; max-height: 100%; }
988
		.my_cart_component_details { padding-left: 50px; *padding-left: 10px; margin-top: 5px; min-height: 50px; } /* Floating doesn't seem to work the same in IE7, so the left padding is reduced to compensate for the behaviour */
989
 
990
	.my_cart .price { color: #fb7a14; float: right; }
991
 
992
	.my_cart_subtotal { padding: 0 1em; background: #fffae7; font-weight: bold; line-height: 40px; }
993
		.my_cart_subtotal .price { font-size: 15px; }
994
	.my_cart_total { padding: 0 1em; background: #21282e; color: #fff; font-weight: bold; line-height: 40px; }
995
		.my_cart_total .price { font-size: 20px; }
996
 
997
	.my_cart_action { padding: 1em; text-align: right; }
998
		.my_cart_action .btn_medium { margin-left: 1em; }
999
		.my_cart_action .clear_my_cart { line-height: 30px; color: #21282e; }
1000
			.clear_my_cart .icon_cancel { margin-top: -3px; }
1001
 
1002
 
1003
/*-------------------------------------------------------------------
1004
	$ Pagination
1005
-------------------------------------------------------------------*/
1006
 
1007
.pagination, .pagination.utility_btn { width: auto; float: right; font-size: 12px; line-height: 30px; font-weight: normal; }
1008
	.next_page, .prev_page { width: 24px; height: 23px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) no-repeat; vertical-align: middle; cursor: pointer; }
1009
	.next_page { background-position: -224px -80px ; }
1010
	.prev_page { background-position: -200px -80px ; }
1011
	.page_num { padding: 0 5px; color: #21282e; }
1012
	.page_num.current { font-weight: bold; }
1013
	.page_dot { padding:0; color:#21282e; }
1014
 
1015
.pagination + .header-title { line-height: 30px; }
1016
 
1017
 
1018
/*-------------------------------------------------------------------
1019
	$ Popup
1020
-------------------------------------------------------------------*/
1021
 
1022
.show_popup { cursor: pointer; }
1023
 
1024
.popup_con { width: 620px; margin-left: -310px; position: absolute; top: 30%; left: 50%; background-color: #fff; box-shadow: 0 1px 10px 3px rgba(0,0,0,0.5); display: none; }
1025
.popup .popup_con { z-index: 15; }
1026
	/* .popup_loading { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: url(/cs/site_template/ecommerce/images/general/overlay_white_85.png) repeat; background: rgba(255,255,255,0.85); } */
1027
	.popup_loading.hidden { display: none; }
1028
		.popup_loading:after { content: ''; width: 32px; height: 32px; margin: -16px 0 0 -16px; background: url(/cs/site_template/ecommerce/images/ajax-loading-large.gif) no-repeat; position: absolute; top: 50%; left: 50%; }
1029
 
1030
	.popup_header { padding: 10px 20px; border-bottom: 1px solid #bdbdbd; background: #f6f6f6 url(/cs/site_template/ecommerce/images/general/gradient_grey_50px.png) repeat-x; font-size: 20px; font-family: "Helvetica 65 Medium", Helvetica, Arial, sans-serif; line-height: normal; }
1031
		.popup_header .close_popup { padding-right: 20px; margin-top: 5px; font-size: 13px; font-weight: normal; line-height: normal; float: right; background: url(/cs/site_template/ecommerce/images/general/icon_blue_cross.png) right center no-repeat; }
1032
	.popup_content { padding: 20px 25px; }
1033
	.popup_scroll { overflow: auto; }
1034
	iframe.popup_content { width: 100%; padding: 0; border: 0; }
1035
 
1036
.accessory_popup { width: 405px; margin-left: -202px; }
1037
	.accessory_popup .accessory_img { margin-bottom: 2em; text-align: center; }
1038
		.accessory_popup .accessory_img_holder { display: inline-block; *display: inline; *zoom: 1; position: relative; vertical-align: top; }
1039
		.accessory_popup .accessory_img .badge { position: absolute; bottom: 25px; right: -10px; }
1040
 
1041
.plan_services_popup { width: 700px; margin-left: -350px; }
1042
 
1043
.splash_popup { width: 715px; height: 630px; border-radius: 0; margin-left: -357px; box-shadow: none; background: url(/cs/site_template/ecommerce/images/splash/yellow-tuesday-splash-bg.png) center center no-repeat; }
1044
    .splash_popup .close_popup { width: 35px; padding-top: 35px; position: absolute; top: 25px; right: 50px; z-index: 2; background: url(/cs/site_template/ecommerce/images/general/icon_black_cross.png) 2px top no-repeat; color: #fff; font-weight: bold; text-align: center; text-transform: uppercase; font-size: 11px; }
1045
    .splash_popup .popup_content { width: 450px; padding: 355px 0 0 135px; position: relative; text-align: center; }
1046
    .splash_popup p { padding-bottom: 5px; }
1047
 
1048
/*-------------------------------------------------------------------
1049
	$ Progress Steps
1050
-------------------------------------------------------------------*/
1051
 
1052
.progress_steps_con { height: 53px; padding: 0 10px; border-bottom: 2px solid #bdbdbd; border-radius: 5px 5px 0 0; background-color: #fbe448; font-size: 14px; font-weight: bold; line-height: 53px; text-align: center; }
1053
	.progress_step { margin-right: 45px; display: inline-block; *display: inline; *zoom: 1; text-align: left; position: relative; }
1054
		.progress_step .num { width: 25px; height: 25px; margin: -2px 5px 0 0; border: 1px solid transparent; display: inline-block; *display: inline; *zoom: 1; background-color: #fff; border-radius: 25px; vertical-align: middle; font-size: 18px; text-align: center; line-height: 25px; }
1055
 
1056
	.progress_step.current, .progress_step.done { color: #21282e; }
1057
		.progress_step.current .num { border: 1px solid #1e1e1e; background-color: #1e1e1e; color: #fff; }
1058
		.progress_step.done .num { border: 0; background-color: #7a6701; color: #fff; }
1059
	.progress_step.current:after,
1060
	.progress_step.done:after { content: ''; width: 150%; height: 2px; background-color: #1e1e1e; position: absolute; bottom: -2px; left: -25%; }
1061
 
1062
 
1063
/*-------------------------------------------------------------------
1064
	$ Quick Links
1065
-------------------------------------------------------------------*/
1066
 
1067
.quick_links_con { width: 280px; padding: 0 20px 20px; margin-left: 175px; position: absolute; top: 105px; left: 50%; z-index: 6; display: none; }
1068
.quick_links { width: 100%; margin-top: 11px; border: 0; border: 1px solid #ccc\9; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 10px 3px rgba(0,0,0,0.5); font-size: 11px; }
1069
.quick_links_arrow { width: 17px; height: 11px; background: url(../images/general/general_sprite_sheet.png) -100px -120px no-repeat; position: absolute; top: 1px; right: 140px; z-index: 2; }
1070
.quick_links_header { padding: 10px; }
1071
 
1072
.quick_links_contents { padding: 0 10px; }
1073
.quick_links_contents.no_results { padding: 10px; }
1074
.quick_links_contents.is_searching { padding: 30px 10px 10px; text-align: center; background: url(../images/ajax-loading.gif) center 10px no-repeat; }
1075
	.quick_link { min-height: 65px; padding: 10px; border-bottom: 1px solid #e5e5e5; color: #21282e; display: block; }
1076
	.quick_link:hover,
1077
	.quick_link:active { background: #f0f0f0; }
1078
		.quick_link_img { float: left; }
1079
		.quick_link_details { padding: 5px 0 0 75px; }
1080
			.quick_link_title { display: block; }
1081
 
1082
.quick_links_footer { padding: 10px 15px; text-align: right; }
1083
	.more_quick_links i { margin: -2px 5px 0 0; }
1084
 
1085
 
1086
/*-------------------------------------------------------------------
1087
	$ Tables
1088
---------------------------------------------------------------------
1089
	A billion tables used throughout the entire site.
1090
-------------------------------------------------------------------*/
1091
 
1092
/*
1093
 * Removes all default spacing in tables. With this, we no longer
1094
 * need to use [cellpadding="0"] and [cellspacing="0"] anymore.
1095
 */
1096
table, td { padding: 0; *border-collapse: collapse; border-spacing: 0; vertical-align: top; }
1097
 
1098
table .icon_question { vertical-align: top; }
1099
 
1100
.tbl_round { margin-bottom: 1em; border: solid 1px #bdbdbd; background: #fff; }
1101
	.tbl_round > table { width: 100%; height: 100%; }
1102
	.tbl_round > table tr:first-child > :first-child { -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; }
1103
	.tbl_round > table tr:first-child > :last-child { -moz-border-radius-topright: 5px; border-top-right-radius: 5px; }
1104
	.tbl_round > table tr:last-child > :last-child { -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; }
1105
	.tbl_round > table tr:last-child > :first-child { -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; }
1106
 
1107
.tbl_dark_vertical th,
1108
.tbl_dark_vertical td { padding: 20px 0px 20px 15px; }
1109
.tbl_dark_vertical th { text-align: left; }
1110
.tbl_dark_vertical tr > :first-child { color: #fff; background: #21282e; }
1111
 
1112
.tbl_dark_horizontal th,
1113
.tbl_dark_horizontal td { padding: 10px; border-left: 1px solid #bdbdbd; text-align: left; }
1114
.tbl_dark_horizontal th { background: #21282e; color: #fff; }
1115
.tbl_dark_horizontal td { border-top: 1px solid #bdbdbd; background: #fff; font-size: 12px; vertical-align: top; }
1116
.tbl_dark_horizontal tr > :first-child { border-left: 0; }	
1117
 
1118
.tbl_light_horizontal td { padding: 20px; background: #fff; }
1119
.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; }
1120
 
1121
 
1122
/*
1123
 * In IE7, even if we do not declare the colspan attribute on the node, it
1124
 * is still considered to have a colspan of 1. Thus, it will be affected by
1125
 * the text-align: center in (A), which targets any <th> node that has the
1126
 * colspan attribute. To reverse this, I added a th[colspan="1"] selector at
1127
 * (B), which will reapply text-align: left. Other browsers will be unaffected.
1128
 */
1129
.tbl_grey_horizontal th { padding: 10px 20px; border-top: 1px solid #e0e0e0; background: #eff1f1; text-align: left; }
1130
.tbl_grey_horizontal th[colspan] { text-align: center; } /* A */
1131
.tbl_grey_horizontal th[colspan="1"],  /* B */
1132
.tbl_grey_horizontal th[colspan="2"] { text-align: left; }
1133
.tbl_grey_horizontal .subheader th { background: #e5e5e5; text-align: left; }
1134
.tbl_grey_horizontal .slightly_smaller th { font-size: 12px; }
1135
.tbl_grey_horizontal td { padding: 10px 20px; border-top: 1px solid #e5e5e5; vertical-align: top; }
1136
.tbl_grey_horizontal tr:first-child > td,
1137
.tbl_grey_horizontal tr:first-child > th { border-top: 0; }
1138
.tbl_grey_horizontal .thumbs_up { left: -20px; }
1139
.tbl_grey_horizontal .thumbs_up:before { padding: 10px 0; top: -12px; }
1140
.tbl_grey_horizontal .label { text-align: right; }
1141
.tbl_grey_horizontal .icon_tick,
1142
.tbl_grey_horizontal .icon_cross { margin-right: .5em; }
1143
 
1144
.tbl_grey_horizontal th.spanned_header { padding: 10px 20px; background: transparent; font-weight: bold; text-align: left; }
1145
	.tbl_grey_horizontal .spanned_header h4 { font-weight: bold; margin: 0.6em 0 0; }
1146
	.tbl_grey_horizontal tr:first-child .spanned_header h4 { margin-top: 0; }
1147
 
1148
.tbl_blue_first_con td:first-child,
1149
.tbl_blue_second_con td:first-child + td,
1150
.blue_first_con td:first-child,
1151
.blue_second_con td:first-child + td,
1152
td.blue_con { background: #cbdde9; }
1153
 
1154
.tbl_red_first_con td:first-child,
1155
.tbl_red_second_con td:first-child + td,
1156
.red_first_con td:first-child,
1157
.red_second_con td:first-child + td,
1158
td.red_con, th.red_con { background: #fff5ef; }
1159
 
1160
.black_first_con td:first-child,
1161
.black_second_con td:first-child + td,
1162
td.black_con { background: #21282e; color: #fff; border-bottom: 0; }
1163
 
1164
td.dark_red_con, th.dark_red_con { background: #ffe5d6; }
1165
td.yellow_con, th.yellow_con { background: #ffde03; }
1166
td.green_con, th.green_con { background: #28a957; }
1167
td.bright_blue_con, th.bright_blue_con { background: #1398e5; }
1168
td.orange_con, th.orange_con { background: #ff8500; }
1169
td.light_grey_con, th.light_grey_con { background: #f5f5f5; }
1170
td.grey_con, th.grey_con { background: #e8e8e8; }
1171
td.medium_grey_con, th.medium_grey_con { background: #cfcfcf; }
1172
 
1173
.light_grey_con td { background: #f5f5f5; }
1174
.grey_con td { background: #eff1f1; }
1175
.dark_grey_con td { background: #dee2e2; }
1176
 
1177
.tbl_last_centered_con tr .last { text-align: center; }
1178
	.tbl_last_centered_con tr .last a { padding: 0 15px; font-size: 12px; text-decoration: none; }
1179
	.tbl_last_centered_con tr .last .btn_medium { padding: 0 15px; font-size: 15px; }
1180
 
1181
.tbl_black_first_con tr > td:first-child { background: #21282e; }
1182
 
1183
.tbl_plain tr td { padding: 0; border: 0; }
1184
 
1185
/*
1186
 * Plan List table
1187
 *   - to display a list of plans and their details (rates, prices,
1188
 *     quota and so on.
1189
 */
1190
 
1191
.tbl_plan_list { font-weight: bold; }
1192
	.tbl_plan_list td { height: 40px; padding: 10px; vertical-align: middle; border-top: 1px solid #e5e5e5; }
1193
	.tbl_plan_list th { padding: 0 10px; height: 60px; }
1194
	.tbl_plan_list .thumbs_up { left: -10px; }
1195
	.tbl_plan_list .plan_name_con { color: #0091d2; font-size: 16px; }
1196
	.tbl_plan_list .plan_name_con[colspan] { color: #0091d2; font-size: 16px; }
1197
	.tbl_plan_list .notes { font-weight: normal; }
1198
 
1199
.tbl_link_list { text-align: left; }
1200
	.tbl_link_list th,
1201
	.tbl_link_list td	{ padding: 5px 10px; }
1202
	.tbl_link_list td { border-left: 0; }
1203
	.tbl_link_list tr:first-child > th { font-weight: bold; text-align: left; }
1204
	.tbl_link_list .arrow_link { border-top: 1px solid #ededed; display: block; line-height: 25px; }
1205
	.tbl_link_list .arrow_link:first-child { border-top: 0; }
1206
		.tbl_link_list .arrow_link:before { top: 5px; }
1207
 
1208
/*
1209
 * Purchase List Table
1210
 *   - to display a list of products together with individual,
1211
 *     subtotal and grand total prices.
1212
 *   - used in a number of pages - My Cart/Cart Summary, My Account (My Saved
1213
 *	   Cart section), Summary, Form (Payment), and so on.
1214
 */
1215
 
1216
.cart .tbl_purchase_list { padding-bottom: 2em; }
1217
	.tbl_purchase_list th,
1218
	.tbl_purchase_list td { padding: 10px }
1219
	.tbl_purchase_list td { border-bottom: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; }
1220
	.tbl_purchase_list td[rowspan] { -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottom-left: 5px; border-bottom-left-radius: 5px; }
1221
	.tbl_purchase_list td[rowspan] + td { border-left: 0; }
1222
	.tbl_purchase_list .monthly_payment { width: 120px; padding-left: 20px; }
1223
	.tbl_purchase_list tr .last { width: 160px; padding-left: 35px; }
1224
	.tbl_purchase_list td.last { background: #f5f8fa; }
1225
 
1226
	.cart .tbl_purchase_list td { border-bottom: 1px dashed #e5e5e5; }
1227
 
1228
	.tbl_purchase_list.accessories td:first-child + td { border-left: 0; }
1229
	.tbl_purchase_list.accessories td { padding-top: 5px; padding-bottom: 5px; vertical-align: middle; }
1230
	.tbl_purchase_list.accessories .subtotal_con td { padding-top: 10px; padding-bottom: 10px; }
1231
	.tbl_purchase_list.accessories td:first-child { border-bottom: 0; background: #fff; }
1232
 
1233
	.tbl_purchase_list .purchase_category td { padding-bottom: 0; border-bottom: 0; font-weight: bold; }
1234
	.tbl_purchase_list .purchase_category.emphasize { font-size: 16px; }
1235
 
1236
	.purchase_img { width: 40px; height: 50px; margin-right: .5em; float: left; line-height: 50px; text-align: center; }
1237
		.purchase_img img { vertical-align: top; }
1238
	.large_purchase_img { width: 140px; height: 185px; text-align: center; }
1239
	.small_purchase_img { width: 140px; height: 70px; text-align: center; }
1240
		.purchase_img img,
1241
		.small_purchase_img img,
1242
		.large_purchase_img img { max-width: 100%; max-height: 100%; }
1243
 
1244
	.purchase_info { padding-left: 50px; }
1245
 
1246
	.tbl_purchase_list .subtotal_con td { border-left: 0; background: #fffae7; font-weight: bold; }
1247
		.tbl_purchase_list .subtotal_con .emphasize { font-size: 15px; }
1248
	.tbl_purchase_list .total_con td { border-left: 0; background: #21282e; color: #fff; font-size: 15px; font-weight: bold; vertical-align: middle; }
1249
		.tbl_purchase_list .total_con .price_text { color: #fb7a14; font-size: 25px; }
1250
 
1251
/*
1252
 * Recommanded Plan
1253
 *   - emphasize a specific plan by highlighting it, and styling a
1254
 *     thumbs up icon next to the plan name.
1255
 */
1256
 
1257
.recommended_plan td { background: #cbdde9; }
1258
	.recommended_plan .notes { color: #666; }
1259
	table .recommended_plan .thumbs_up { width: 20px; background: #fd0; text-align: center; }
1260
		.recommended_plan .thumbs_up i { width: 17px; height: 20px; display: inline-block; *display: inline; *zoom: 1; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) left -120px no-repeat; }
1261
 
1262
/*
1263
 * Cart Summary
1264
 */
1265
 
1266
.tbl_cart_summary { width: 100%; }
1267
	.tbl_cart_summary td { padding: 5px 35px; vertical-align: middle; }
1268
	.tbl_cart_summary .sign { width: 30px; padding: 5px 0; }
1269
	.tbl_cart_summary .component_img { width: 80px; height: 70px; float: left; text-align: center; line-height: 70px; }
1270
		.tbl_cart_summary .component_img img { max-width: 100%; max-height: 100%; vertical-align: middle; }
1271
	.tbl_cart_summary .component_details { padding: 15px 0 0 90px; }
1272
	.tbl_cart_summary .price_con td { background: #dee2e2; font-size: 12px; font-weight: bold; }
1273
		.tbl_cart_summary .price_text { margin-left: .5em; vertical-align: middle; }
1274
 
1275
/* Misc. general table styling */
1276
 
1277
.tbl_fully_bordered th,
1278
.tbl_fully_bordered td,
1279
.tbl_vertically_bordered th,
1280
.tbl_vertically_bordered td	{ border-left: 1px solid #e5e5e5; }
1281
.tbl_fully_bordered th,
1282
.tbl_horizontally_bordered td { border-top: 1px solid #e5e5e5; }
1283
.tbl_fully_bordered tr:first-child > th,
1284
.tbl_horizontally_bordered tr:first-child > td { border-top: 0; }
1285
.tbl_regular .bordered_row > td { border-bottom: 1px solid #e5e5e5; }
1286
 
1287
div [class^="tbl_"] tr > :first-child { border-left: 0; } /* Extra div needed to raise specificity for overriding */
1288
tr.last > td { border-bottom: 0; }
1289
 
1290
[class^="tbl_"] .align_top,
1291
[class^="tbl_"] .align_top td { vertical-align: top; }
1292
[class*=tbl_] .understate { color: #666; font-size: 12px; font-weight: normal; }
1293
 
1294
table.tbl_regular,
1295
.tbl_regular > table { width: 100%; }
1296
.tbl_regular td { padding: 10px 20px; vertical-align: top; }
1297
.tbl_regular .bordered_row { border-bottom: 1px solid #e5e5e5; }
1298
 
1299
.tbl_service_info > table > tbody > tr > td:first-child { width: 225px; }
1300
 
1301
/* Manual border-radius classes */
1302
td.top_left_radius { border-top-left-radius: 5px; }
1303
td.top_right_radius { border-top-right-radius: 5px; }
1304
td.bottom_right_radius { border-bottom-right-radius: 5px; }
1305
td.bottom_left_radius { border-bottom-left-radius: 5px; }
1306
td.no_radius,
1307
td.no_radius:last-child,
1308
tr:last-child > td.no_radius:last-child,
1309
tr:first-child > td.no_radius:first-child { border-radius: 0; }
1310
 
1311
 
1312
/*-------------------------------------------------------------------
1313
	$ Tabs
1314
-------------------------------------------------------------------*/
1315
 
1316
 /* $ Horizontal Tabber */
1317
 
1318
.content_tabber_con { height: 45px; background: transparent; white-space: nowrap; }
1319
.content_tabber_con.multi_page { height: 55px; overflow: hidden; }
1320
	.content_tabber { height: 45px; padding: 0 10px; margin: 0 5px; *margin: 0 10px 0 5px; vertical-align: top; position: relative; background: #f6f6f6 url(/cs/site_template/ecommerce/images/general/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; }
1321
	.content_tabber.is_invisible { visibility: hidden; }
1322
	.content_tabber.tab_scroller { padding: 0 5px; }
1323
	.content_tabber .icon_tabber_dot { *margin-left: -4px; *position: relative; *top: 16px; *vertical-align: middle; *line-height: 45px; }
1324
		.content_tabber:before,
1325
		.content_tabber:after { content: ''; width: 5px; height: 45px; background: url(/cs/site_template/ecommerce/images/general/tab_grey_sides.png) no-repeat; position: absolute; top: 0; }
1326
		.content_tabber:before { background-position: left top; left: -5px; }
1327
		.content_tabber:after { background-position: right top; right: -5px; }
1328
 
1329
	.content_tabber.current { border: 0; background: #fd0 url(/cs/site_template/ecommerce/images/general/tab_yellow_mid.png) repeat-x; color: #21282e; }
1330
 
1331
		/*
1332
		 * Note on Pseudo Elements for IE8
1333
		 * 
1334
		 * There may be several occasions where IE8 doesn't repaint pseudo elements
1335
		 * properly, e.g. using jQuery to add a new class to the element, but the
1336
		 * pseudo elements are unaffected, or they do not change style until you
1337
		 * click on another element, etc.
1338
		 * 
1339
		 * In such cases, you need to change the value of the content property.
1340
		 * For example, in .content_tabber:after, the value of the content property
1341
		 * is '' (which is nothing). However, in .content_tabber.current:after,
1342
		 * the value of the content property is ' ' (which is a space character).
1343
		 * This causes IE8 to repaint the pseudo elements properly again.
1344
		 * 
1345
		 * Note: This does not occur if you're using IE8 mode within IE9. Need to
1346
		 * use a more 'proper' IE8 simulator, such as the one in IETester
1347
		 * (http://www.my-debugbar.com/wiki/IETester/HomePage)
1348
		 * 
1349
		 * Source: http://stackoverflow.com/questions/8703799/forcing-ie8-to-rerender-repaint-before-after-pseudo-elements
1350
		 */
1351
		.content_tabber.current:before, .content_tabber.current:after { background-image: url(/cs/site_template/ecommerce/images/general/tab_yellow_sides.png); }
1352
 
1353
	.content_tabber img { height: 12px; position: absolute; left: -5px; bottom: -10px; }
1354
 
1355
.tabber_content{ display: none; *zoom: 1; } /* zoom is needed to fix some weird rendering issue in IE7 */
1356
.tabber_content.current { display: block; }
1357
 
1358
 /* $ Vertical Tabber */
1359
 
1360
.vertical_tabber .tabber,
1361
.vertical_tabber a,
1362
.vertical_sub_tabber { padding: 10px 0; border-bottom: 1px dotted #bdbdbd; display: block; cursor: pointer; position: relative; overflow: hidden; color: #0091d2; }
1363
.vertical_tabber .tabber.last,
1364
.vertical_sub_tabber.last { border-bottom: 0; }
1365
	.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; }
1366
	.vertical_tabber > .toggled:after { background-position: -232px -60px; }
1367
.vertical_tabber .toggled { border: 0; color: #21282e; }
1368
.vertical_tabber .current { color: #21282e; font-weight: bold; }
1369
	.vertical_sub_tabber, .vertical_sub_tabber.current { padding: 5px 0; border-bottom: 1px dotted #bdbdbd; display: none; background: #eff1f1; font-weight: normal; }
1370
	.vertical_sub_tabber.current { display: block; }
1371
	.vertical_sub_tabber > .tabber,
1372
	.vertical_sub_tabber > a { padding: 5px 10px; border: 0; }
1373
 
1374
.vertical_tabber_content { display: none; }
1375
	.vertical_tabber_content.current { display: block; }
1376
 
1377
 
1378
/*-------------------------------------------------------------------
1379
	$ Tooltips
1380
-------------------------------------------------------------------*/
1381
 
1382
.tooltip { width: 225px; padding: 15px 10px; border: 1px solid #bdbdbd; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; top: 0; left: 0; z-index: 5; display: none; background: #f7f7f7 url(/cs/site_template/ecommerce/images/general/gradient_white_400px.png) repeat-x; color: #21282e; font-size: 13px; font-weight: normal; line-height: 1.2em; text-align: center; }
1383
.popup-is-shown .tooltip { z-index: 16; }
1384
	.tooltip_arrow { width: 15px; height: 11px; position: absolute; top: -11px; left: 55px; background: url(/cs/site_template/ecommerce/images/general/arrow_tooltip.png) no-repeat; }
1385
	.tooltip.flipped .tooltip_arrow { left: auto; right: 55px; }
1386
 
1387
.tooltip_content { display: none; }
1388
.tooltip .tooltip_content { display: block; }
1389
 
1390
.tooltip_expanded { width: auto; max-width: 400px; text-align: left; }
1391
 
1392
 
1393
/*-------------------------------------------------------------------
1394
	$ Widgets
1395
-------------------------------------------------------------------*/ 
1396
 
1397
.rss_timeline_holder { border: 1px solid #ccc; }
1398
    .rss_timeline_header { padding: 10px; border-bottom: 1px solid #ccc; line-height: 1.5; }
1399
        .rss_timeline_header .header_icon { float: right; }
1400
            .rss_timeline_header .android_icon { width: 27px; height: 32px; background: url(../images/general/logo_android_icon.jpg) center center no-repeat; }
1401
        .rss_timeline_header .header_subtitle { font-size: 12px; }
1402
 
1403
    .rss_timeline { height: 265px; overflow: auto; }
1404
        .rss_timeline .timeline_item { padding: 10px 5px 10px 15px; border-top: 1px solid #ccc; }
1405
        .rss_timeline .timeline_item:first-child { border-top: 0; }
1406
            .rss_timeline .timeline_item_timestamp { margin-bottom: 3px; font-size: 11px; text-align: right; }
1407
            .rss_timeline .timeline_item_title { color: #21282e; font-weight: bold; text-decoration: underline; }
1408
            .rss_timeline .timeline_item_content { margin-top: 3px; }
1409
 
1410
    .rss_timeline_footer { height: 10px; background-color: #e5e5e5; line-height: 10px; }
1411
 
1412
 
1413
.twitter_timeline_holder { border-radius: 5px; background: #8fc1da; }
1414
    .twitter_timeline_header { padding: 10px; color: #fff; }
1415
        .twitter_timeline_header .header_title { font-size: 12px; font-weight: bold; }
1416
        .twitter_timeline_header .header_subtitle { padding-top: 3px; border-top: 1px dotted #ccc; margin-top: 3px; display: inline-block; *display: inline; *zoom: 1; }
1417
 
1418
    .twitter_timeline_spacing { margin: 0 1px; }
1419
        .twitter_timeline_spacing > iframe { width: 100%; height: 240px; }
1420
 
1421
    .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; }
1422
 
1423
 
1424
/*-------------------------------------------------------------------
1425
	$ Structure
1426
-------------------------------------------------------------------*/ 
1427
 
1428
.wrapper, .precontent { width: 940px; margin: 10px auto; }
1429
 
1430
.content { padding-bottom: 1em; border: 1px solid #bdbdbd; margin-bottom: 15px; background-color: #fff; }
1431
.content > .padded_content { padding-bottom: 0; }
1432
.padded_content.blue_gradient { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background: #fff url(/cs/site_template/ecommerce/images/general/gradient_bg_blue.jpg) no-repeat; }
1433
.content.yellow { background: #fd0; box-shadow: inset 0 0 0 1px #fff; }
1434
	.content.yellow .right_action_con { margin-top: 5px; float: right; }
1435
		.right_action_con .btn_grey { margin-left: 10px; }
1436
		.right_action_con .btn_grey i { margin: -2px 5px 0 0; }
1437
.padded_content { padding: 15px; *zoom: 1; } /* Zoom for IE7 rendering issue */
1438
.padded_content.less_padding { padding: 10px; }
1439
	.content_header { padding: 1em; border-bottom: 1px solid #bdbdbd; margin: 1px; background: #f5f8fa; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
1440
 
1441
.precontent { margin: 0 auto .75em; position: relative; z-index: 5; background: transparent; }
1442
	.precontent h1, .precontent h2 { float: left; margin-top: -10px; }
1443
	.precontent .btn_small { font-size: 13px; }
1444
	.precontent .breadcrumbs { font-size: 11px; float: left; }
1445
	.precontent .floatRight [class^=icon_] { margin-left: 20px; }
1446
    .precontent .addthis_toolbox { margin-left: 20px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
1447
        .precontent .addthis_toolbox a { margin-left: 10px; }
1448
        .precontent .addthis_toolbox a:first-child { margin-left: 0; }
1449
 
1450
.postcontent { border-top: 1px solid #bfbfbf; padding: 10px 0; background-color: #eff1f1; }
1451
	.postcontent .wrapper, .footer .wrapper { background: transparent; border: 0; padding: 0; }
1452
 
1453
.breadcrumbs { font-size: 11px; line-height: normal; color: #bfbfbf; }
1454
 
1455
.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; }
1456
.utility_bar.wrapper { width: 920px; padding: 0 10px; margin: 0 auto; }
1457
	.utility_bar .content_counter { width: 145px; line-height: normal; color: #999; font-weight: normal; }
1458
	.utility_btn { width: 150px; height: 45px; padding-top: 20px; border-right: 1px solid #bdbdbd; margin: 0; float: left; line-height: 25px; font-weight: bold; }
1459
	.utility_btn.opened { background: #fff; }
1460
	.utility_btn.last { border-right: 0; }
1461
		.utility_btn .dropdown_arrow { margin-right: 10px; }
1462
 
1463
	/*
1464
	 * Some overriding styles needed in order to override the dropdown_con's
1465
	 * appearance and make them look like the other utility_btn.
1466
	 */
1467
	.utility_btn [class*=dropdown_btn] { padding-left: 20px; border: 0; background: transparent; }
1468
	.utility_btn [class*=dropdown_btn]:before,
1469
	.utility_btn [class*=dropdown_btn]:after { display: none; }
1470
	.utility_btn select { padding: 0; left: -1px; }
1471
	.utility_btn .arrow { right: 10px; }
1472
 
1473
	/* Grid/List view */
1474
	.grid_view,
1475
	.list_view { width: 104px; padding-left: 10px; cursor: pointer; position: relative; }
1476
		.grid_view.current,
1477
		.list_view.current { background: #fff; }
1478
		.list_view:after { content: ''; /* For IE7-pseudo */ }
1479
		.grid_view.current:after,
1480
		.list_view.current:after { content: ''; width: 100%; height: 4px; background: #fff; position: absolute; bottom: -3px; left: 0; }
1481
 
1482
/* .utility_bar + .wrapper,
1483
.wrapper[class*=_catalogue] { border-top: 0; padding-top: 25px; } */
1484
 
1485
/*-------------------------------------------------------------------
1486
	$ Header
1487
-------------------------------------------------------------------*/
1488
 
1489
.header { height: 130px; margin-bottom: .5em; }
1490
 
1491
/* Small Navi */
1492
 
1493
.small_nav, .small_nav .wrapper { background: #ddd; height: 35px; margin-bottom: 15px; line-height: 37px; font-weight: bold; }
1494
.small_nav { border-bottom: 1px solid #ccc; }
1495
	.small_nav [class*=icon_] { margin-top: -4px; }
1496
	.small_nav a { height: 36px; display: inline-block; *display: inline; *zoom: 1; }
1497
 
1498
	.small_nav .left_links { float: left; font-size: 12px; }
1499
		.small_nav .left_links a { padding: 0 15px; color: #333; }
1500
		.small_nav .left_links a:hover { color: #999; }
1501
		.small_nav .left_links a:first-child { margin-left: 30px; }
1502
		.small_nav .left_links a.current { background: #eee; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
1503
	.small_nav .right_links { float: right; font-size: 11px; }
1504
		.small_nav .right_links a { margin: 0 5px; color: #888; }
1505
		.small_nav .right_links a:hover { color: #333; }
1506
		.small_nav .right_links .my_digi_link { margin-right: 5px; }
1507
		.small_nav .right_links .logout_link { margin: 0 0 0 5px; color: #0091d2; }
1508
		.small_nav .right_links .logout_link:hover { color: #00a2e3; }
1509
		.small_nav a.icon_alert { height: 22px; padding: 2px 0; margin: 0 0 0 10px; }
1510
 
1511
/* Main Navi */
1512
 
1513
.main_nav { width: 910px; height: 70px; margin: 0 auto; padding: 0 15px; position: relative; z-index: 6; background:url(../images/general/general_img_main_navi_mid.png) repeat-x; text-align: center; }
1514
	.main_nav a { cursor: pointer; vertical-align: top; }
1515
	.main_nav a[href^="#"] { cursor: default; }
1516
	.main_nav > a { padding: 0 25px; color: #e3e3e3; font-size: 17px; line-height: 70px; font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
1517
		.main_nav > a:hover, .main_nav > a.current, .main_nav > a.selected { color: #fd0; }
1518
	.main_nav .logo_digi { width: 52px; height: 56px; padding: 0; margin: 5px 15px 0 0; background: url(../images/general/general_logo_digi.png) top left no-repeat; float: left; vertical-align: middle; line-height: 70px; }
1519
 
1520
.main_search_con { width: 145px; float: right; position: relative; line-height: 70px; }
1521
	.main_search_con .icon_search { border: 0; margin-top: -10px; position: absolute; top: 50%; right: 5px; z-index: 1; }
1522
	input.main_search { width: 105px; padding: 10px 30px 10px 10px; border: 1px solid #000; outline: 0; box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.5); background: #2a2a2a; color: #fff; }
1523
 
1524
/* Sub Navi */
1525
 
1526
.sub_nav_con { width: 920px; height: 45px; padding: 0 10px; position: absolute; top: 65px; left: 0; z-index: 1; background: #fd0; -webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 0 rgba(0,0,0,0.2); display: none; text-align: left; }
1527
.sub_nav_con.expanded { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
1528
	.sub_nav { display: none; }
1529
	.sub_nav.current { display: block; }
1530
	.sub_nav > a { padding: 0 15px; color: #21282e; font-weight: bold; line-height: 45px; }
1531
	.sub_nav > a.current { background: url(/cs/site_template/ecommerce/images/general/general_nav_sub_menu_arrow.png) center bottom no-repeat; }
1532
 
1533
	/* Sub Menu */
1534
 
1535
	.sub_menu { width: 920px; padding: 10px; position: absolute; top: 45px; left: 0; -webkit-box-shadow: 0 3px 1px rgba(0,0,0,0.3); -moz-box-shadow: 0 3px 1px rgba(0,0,0,0.3); box-shadow: 0 3px 1px rgba(0,0,0,0.3); background: #e2e2e2 url(/cs/site_template/ecommerce/images/general/gradient_grey_270px.png) repeat-x; font-size: 12px; line-height: 23px; display: none; }
1536
		.sub_menu_list { /* width: 165px; */ padding: 0 15px; float: left; font-weight: bold; }
1537
		.sub_menu_list a { display: block; font-weight: normal; }
1538
 
1539
		.narrow .sub_menu_list { width: 115px; margin-left: 10px; }
1540
		.narrow .sub_menu_list:first-child { margin-left: 0; }
1541
 
1542
 
1543
/*-------------------------------------------------------------------
1544
	$ Footer
1545
-------------------------------------------------------------------*/
1546
 
1547
.footer { border-top:#cecfd0 1px solid; padding-bottom:30px; background-color: #fff; }
1548
.footer a { color: #21282e; text-decoration: none; }
1549
 
1550
.footerCtntHolder { margin-left: 17px; font-size: 12px; line-height: normal; float: left; }
1551
.footerCtntHolder:first-child { margin-left: 0; }
1552
	.footerCtntHolder ul { padding: 0 10px 0 15px; margin: 0; }
1553
	.footerCtntHolder li { padding-left: 0; margin: 3px 0 0; background: none; list-style-image: url(../images/general/arrow_links_grey.png); }
1554
 
1555
#topFooter { margin: 20px auto; *padding-top: 20px; }
1556
#bottomFooter { font-size: 11px; margin-top: 20px; }
1557
#bottomFooter [class^=icon_] { margin-left: 4px; vertical-align: top; }
1558
 
1559
.cfm_holder { width: 185px; position: relative; }
1560
    .cfm_holder .cfm_logo { height: 60px; position: absolute; top: 0; left: 5px; }
1561
    .cfm_holder .cfm_text { padding: 0 0 15px 75px; font-size: 11px; }
1562
 
1563
 
1564
/*-------------------------------------------------------------------
1565
	$ Comparison page
1566
-------------------------------------------------------------------*/
1567
 
1568
.tbl_round.comparison { margin-top: 1em; background: #eff1f1; }
1569
 
1570
.comparison_holder td { font-weight: bold; text-align: center; }
1571
	.tbl_comparison td { padding: 10px; border-bottom: 1px solid #e5e5e5; vertical-align: top; }
1572
		.tbl_comparison .tabs a { font-weight: normal; }
1573
		.tbl_comparison td { background: #f5f5f5; }
1574
		.tbl_comparison .tabs .blank { padding: 0; background: #eff1f1; }
1575
		.tbl_comparison td:first-child,
1576
		.tbl_comparison .tabs > :first-child { border-left: 0; }
1577
        .tbl_comparison tr.arrows > td { padding-top: 20px; }
1578
        .tbl_comparison tr.arrows .btn_medium { margin-top: 5px; }
1579
        .tbl_comparison tr.arrows .btn_medium ~ .btn_medium { margin-top: 10px; }
1580
 
1581
.tbl_comparison.labels { width: 100%; }
1582
	.tbl_comparison.labels td,
1583
	.tbl_comparison .label,
1584
	.tbl_comparison .arrows .label { padding-left: 10px; border-left: 0; background: #fff; text-align: left; font-weight: bold; }
1585
	.tbl_comparison td > div { width: 160px; word-wrap: break-word; word-break: break-word; }
1586
	.comparison_holder .tbl_comparison td > div { width: auto; }
1587
 
1588
.tbl_comparison .tabs > td,
1589
.tbl_comparison.labels .tabs > td { padding: 15px; *padding: 0 15px; background: #eff1f1 center bottom no-repeat; border-bottom: 0; text-align: center; vertical-align: middle; }
1590
.tbl_comparison.labels tr:last-child td:first-child { border-radius: 0 0 0 5px; }
1591
.tbl_comparison.labels tr:last-child td:last-child { border-radius: 0 0 5px 0; }
1592
.tbl_comparison .tabs > td { border-top-left-radius: 5px; border-top-right-radius: 5px; }
1593
.tbl_comparison .tabs .yellow_bordered { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_yellow_bordered.png); }
1594
.tbl_comparison .tabs .yellow_bright { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_yellow_bright.png); }
1595
.tbl_comparison .tabs .yellow { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_yellow.png); }
1596
.tbl_comparison .tabs .orange { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_orange.png); }
1597
.tbl_comparison .tabs .brown { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_brown.png); }
1598
 
1599
.tbl_comparison .arrows td { background: #f5f5f5 center top no-repeat; text-align: center; }
1600
.tbl_comparison .arrows .yellow_bordered { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_arrow_yellow_bordered.png); }
1601
.tbl_comparison .arrows .yellow_bright { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_arrow_yellow_bright.png); }
1602
.tbl_comparison .arrows .yellow { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_arrow_yellow.png); }
1603
.tbl_comparison .arrows .orange { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_arrow_orange.png); }
1604
.tbl_comparison .arrows .brown { background-image: url(/cs/site_template/ecommerce/images/comparison/tab_arrow_brown.png); }
1605
	.tbl_comparison .component_title { font-size: 18px; font-weight: bold; }
1606
	.tbl_comparison .component_title.large { font-size: 24px; }
1607
 
1608
	.tbl_comparison .component_img { width: 115px; height: 190px; margin-bottom: .5em; text-align: center; display: inline-block; *display: inline; *zoom: 1; line-height: 190px; }
1609
	.tbl_comparison .component_img img { max-width: 100%; max-height: 100%; vertical-align: middle; }
1610
 
1611
	.tbl_comparison .component_details { font-weight: normal; }
1612
		.tbl_comparison .component_details .price_text { font-size: 13px; }
1613
 
1614
.tbl_comparison .blank,
1615
.tbl_comparison .arrows .blank { padding: 0; background: #fff; }
1616
 
1617
.tbl_hider { width: 629px; position: absolute; top: 0; right: 0; overflow: hidden; }
1618
.tbl_hider.is_scrollable { right: 30px; }
1619
	.tbl_extender.is_extended { width: 250%; }
1620
		.tbl_extender .last td:first-child { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
1621
 
1622
.tbl_scroller { width: 26px; height: 63px; position: absolute; top: 25px; display: none; background: url(/cs/site_template/ecommerce/images/general/arrow_select_grey.png) no-repeat; }
1623
	.tbl_scroller.show { display: block; }
1624
	.tbl_scroller.prev { left: 234px; }
1625
	.tbl_scroller.next { right: 4px; background-position: -26px 0; }
1626
 
1627
.tbl_comparison .emphasized_label,
1628
.sticky_row { padding: 10px; background: #21282e; color: #fff; font-size: 16px; font-weight: bold; }
1629
.sticky_row.toggle_full_specs { background-color: #21282e; border-radius: 0 0 5px 5px; }
1630
.sticky_row.toggle_full_specs.toggled { border-radius: 0; }
1631
 
1632
.comparison .full_specs > table { width: 100%; *table-layout: fixed; }
1633
 
1634
.tbl_extender .tbl_comparison { width: 100%; *table-layout: fixed; }
1635
 
1636
.comparison_holder { position: relative; }
1637
.comparison_holder:first-child { margin-top: 5px; }
1638
 
1639
 
1640
/*-------------------------------------------------------------------
1641
	$ Configure page
1642
-------------------------------------------------------------------*/
1643
 
1644
.configure.padded_content { min-height: 585px; position: relative; }
1645
 
1646
.configure .highlighter { padding: .5em 1em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: .25em 0; display: inline-block; *display: inline; *zoom: 1; }
1647
.configure .highlighter:hover { background: #ddd; }
1648
.configure .highlighter.highlighted { background: #fd0; }
1649
	.configure .highlighter [class*="input_"] { margin-right: 1em; }
1650
 
1651
.configure .content_box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f1f1f1; }
1652
.configure .content_box.padded { padding: 1em; }
1653
.configure .content_box.bordered { border: 1px solid #e5e5e5; box-shadow: inset 0 0 0  1.5px #fff; }
1654
	.configure .content_box li { margin-top: 1em; }
1655
	.configure .content_box li:first-child { margin-top: 0; }
1656
 
1657
.configure .is_being_edited .action_edit { display: none; } 
1658
.configure .is_being_edited .content_title { padding-left: 0; }
1659
 
1660
.configure .toggle_content { padding: 15px; margin-top: 0; }
1661
	.configure .toggle_content_action { text-align: right; }
1662
 
1663
.device_configure_component { padding: 25px 0; border-top: 1px solid #bdbdbd; }
1664
.device_configure_component:first-child { padding-top: 15px; border-top: 0; }
1665
	.device_configure_component_title { font-size: 18px; }
1666
 
1667
/* Configure - Cart Summary */
1668
 
1669
.configure .my_cart { width: 198px; border: 1px solid #bdbdbd; margin: 0; float: right; box-shadow: none; }
1670
	.configure .my_cart .popup_header { padding: 0; font-size: 16px; background-image: url(/cs/site_template/ecommerce/images/general/gradient_grey_70px.png); }
1671
	.configure .popup_header_title { padding: 10px; }
1672
		.configure .my_cart .clear_my_cart { width: 69px; padding: 5px 0; *padding-top: 9px; border-left: 1px solid #bdbdbd; border-radius: 0 5px 0 0; float: right; display: block; background: url(/cs/site_template/ecommerce/images/general/gradient_light_grey_70px.png) repeat-x; font-size: 12px; line-height: 24px; color: #21282e; text-align: center; }
1673
 
1674
	.configure .my_cart_component { padding: 10px 0; font-size: 13px; /* display: none; */ }
1675
	.configure .my_cart_component:first-child { padding-top: 0; border-top: 0; }
1676
 
1677
	.configure .my_cart_component_right { float: right; }
1678
	.configure .my_cart_component_left { margin-bottom: 10px; }
1679
 
1680
	.configure .my_cart_total { padding: 10px 0; background: transparent; text-align: right; font-weight: bold; color: #fb7a14; font-size: 20px; }
1681
 
1682
	.configure .my_cart_component_img { width: 55px; height: 85px; }
1683
	.configure .my_cart_component_details { min-height: 85px; padding-left: 65px; *padding-left: 5px; position: relative; }
1684
 
1685
	.configure .my_cart .btn_medium { font-size: 14px; }
1686
	.configure .my_cart_action { text-align: center; }
1687
 
1688
/* Available Options */
1689
 
1690
.configure .order_img { width: 95px; height: 150px; margin-right: 1em; float: left; line-height: 150px; text-align: center; }
1691
	.configure .order_img img { max-width: 100%; max-height: 100%; vertical-align: middle; }
1692
	.configure .order_options { margin-left: 110px; }
1693
 
1694
.configure .selection_con { width: 190px; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
1695
.configure .selection_con + .selection_con { margin-left: 5px; *margin-left: 10px; }
1696
	.configure .selection_title { font-size: 15px; font-weight: bold; }
1697
	.configure .selection_con .content_box { padding-top: .2em; margin-top: 1em; }
1698
		.configure .selection_con .highlighter { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; display: block; }
1699
 
1700
/* Available Plans */
1701
 
1702
.tbl_available_plans > table > tbody > tr > th { padding: 10px; font-size: 12px; }
1703
.tbl_available_plans > table > tbody > tr > td { padding: 10px; font-weight: bold; font-size: 13px; }
1704
.tbl_available_plans > table > tbody > tr > td:first-child { font-size: 14px; background: #f1f1f1; }
1705
	.tbl_available_plans .input_radio { float: left; }
1706
	.tbl_available_plans .plan_name { margin-left: 25px; }
1707
	.tbl_available_plans .plan_name a { font-size: 12px; }
1708
	.tbl_available_plans > table > tbody > tr > td.highlighted { background: #fd0; }
1709
	.tbl_available_plans > table > tbody > tr > td[colspan="6"] { background: transparent; font-weight: normal; }
1710
	.tbl_available_plans .details_row > td { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
1711
	.tbl_available_plans .details_row.last > td { border-bottom: 0; }
1712
	.tbl_available_plans .is_hidden,
1713
	.tbl_available_plans .details_toggle_con { display: none; }
1714
	.tbl_available_plans .has_bottom_radius > td:first-child { border-radius: 0 0 0 5px; }
1715
	.tbl_available_plans .has_bottom_radius > td:last-child { border-radius: 0 0 5px 0; }
1716
 
1717
.configure .payment_method_box { margin-top: 1em; }
1718
.configure .payment_method_img { width: 40px; float: left; text-align: left; }
1719
.configure ul.payment_method_list { min-height: 85px; margin-left: 65px; }
1720
 
1721
/* Available Tenures */
1722
 
1723
.configure .selection_con.horizontal { width: auto; }
1724
.configure .selection_con.horizontal .highlighter { margin: -2px 0 1px; padding: 1em; display: inline-block; *display: inline; *zoom: 1; }
1725
 
1726
/* Select Your Mobile Number */
1727
 
1728
.dropdown_con.state { width: 170px; }
1729
.configure .dropdown_con.state { font-weight: bold; }
1730
 
1731
.tbl_num_searcher { margin-bottom: 10px; }
1732
	.tbl_num_searcher th { padding: 0 10px 10px 0; text-align: left; }
1733
	.tbl_num_searcher td { padding: 0 10px 10px 0; vertical-align: middle; }
1734
	.tbl_num_searcher td:first-child { padding-right: 30px; }
1735
 
1736
.num_searcher input[type="text"] { width: 95px; padding: 6px 5px; margin-right: 5px; vertical-align: middle; }
1737
.num_searcher a { margin-left: 5px; font-size: 12px; text-decoration: underline; }
1738
.num_searcher .btn_medium { margin: 0 15px 0 5px; font-size: 14px; text-decoration: none; }
1739
 
1740
.num_list { padding: 15px 15px 0; padding: 14px 14px 0\9; border: 1px solid #bbb\9; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 15px; background: #f1f1f1; box-shadow: inset 0 1px 3px #bbb; display: none; *zoom: 1; }
1741
	.num_list .num_text { margin-bottom: 20px; }
1742
	.num_list .num { width: 150px; margin-bottom: 20px; display: inline-block; *display: inline; *zoom: 1; }
1743
 
1744
/* Four Quadrants aka Four Princesses - shared styles */
1745
 
1746
.getStarted.popup_con { display: block; }
1747
 
1748
.popup_con .column_btn { width: 210px; height: 185px; padding: 20px 10px; position: relative; float: left; display: block; cursor: pointer; }
1749
.popup_con .column_btn.last_in_row { margin-right: 0; }
1750
	.popup_con .column_btn.last_in_row:after { display: none; }
1751
.popup_con .column_btn.toggled { background: #eff1f1; }
1752
	.popup_con .column_btn:after { content: ''; width: 0; height: 80%; border-left: 1px solid #e8e8e8; position: absolute; top: 10%; right: 0; }
1753
 
1754
	.column_btn_label { padding: 7px 10px 7px 35px; margin-bottom: 10px; background: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_down.png) 10px 6px no-repeat; color: #0091d2; font-size: 15px; font-weight: bold; line-height: 1.2em; position: relative; }
1755
	.column_btn.toggled > .column_btn_label { background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_up.png); }
1756
 
1757
	.column_btn_content { padding: 0 25px; color: #21282e; }
1758
		.princess_icon { height: 55px; background: center center no-repeat; }
1759
		.princess_principal_line_icon { background-image: url(/cs/site_template/ecommerce/images/configure/icon_principal_line.png); }
1760
		.princess_supplementary_line_icon { background-image: url(/cs/site_template/ecommerce/images/configure/icon_supplementary_line.png); }
1761
		.princess_change_plans_icon { background-image: url(/cs/site_template/ecommerce/images/configure/icon_change_plans.png); }
1762
		.princess_coupon_code_icon { background-image: url(/cs/site_template/ecommerce/images/configure/icon_coupon_code.png); }
1763
		.princess_switch_to_digi_icon { background-image: url(/cs/site_template/ecommerce/images/configure/icon_switch_to_digi.png); }
1764
 
1765
.column_content_con { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; background: #eff1f1; clear: both; }
1766
	.column_content { padding: 15px;  display: none; }
1767
	.column_content.toggled { display: block; }
1768
 
1769
.popup_back_con { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e5e5; clear: both; }
1770
.popup_back_con a { margin-left: 15px; float: right; font-weight: bold; line-height: 30px; }
1771
	.popup_back_con .check_validation { display: none; }
1772
 
1773
.tbl_princesses { width: 100%; margin: 10px 0 20px; }
1774
	.tbl_princesses td { padding: 3px 0; }
1775
	.tbl_princesses .column1 { width: 37%; padding-right: 10px; text-align: right; }
1776
	.tbl_princesses input[type=text] { width: 190px; }
1777
	.tbl_princesses input.field_mobile_num1 { width: 40px; }
1778
	.tbl_princesses input.field_mobile_num2 { width: 115px; }
1779
	.tbl_princesses .dropdown_con { width: 170px; font-weight: bold; }
1780
 
1781
.popup_con .additional_details { color: #666; font-size: 12px; }
1782
.popup_con .additional_details > strong { color: #21282e; margin-bottom: 5px; display: block; }
1783
.popup_con .additional_details a { text-decoration: underline; }
1784
.popup_con .additional_details ul { margin: 0; padding-left: 4em; }
1785
.popup_con .additional_details li { padding: 0 0 3px 1em; }
1786
.popup_con .additional_details .input_checkbox { margin: 0 10px 5px 0; }
1787
 
1788
/* Four Princesses - Get Started popup */
1789
 
1790
.getStarted.popup_con { width: 535px; margin: -80px 0 0 -265px; top: 50%; }
1791
	.or_divider { width: 29px; height: 50px; margin: 0 5px; background: url(/cs/site_template/ecommerce/images/configure/img_or_divider.png) no-repeat; }
1792
	.get_started.popup_content .btn_medium { margin-top: 15px; }
1793
 
1794
/* Four Princesses - New Number popup */
1795
 
1796
.newNumber.popup_con { width: 640px; margin-left: -300px; }
1797
	.newNumber .column_btn { width: 275px; height: 125px; }
1798
 
1799
/* Four Princesses - Existing Number popup */
1800
 
1801
.existingNumber.popup_con { width: 740px; margin-left: -370px; }
1802
 
1803
/* Four Princesses - Error popup */
1804
 
1805
.error.popup_con { width: 490px; margin-left: -245px; }
1806
	.error.popup_con .emphasis { color: #f00; font-size: 15px; }
1807
 
1808
 
1809
/*-------------------------------------------------------------------
1810
	$ Devices page
1811
-------------------------------------------------------------------*/
1812
 
1813
.compare_label
1814
	{ display: inline-block; zoom: 1; *display: inline; vertical-align: middle; }
1815
 
1816
.product_filter_btn { width: 165px; padding-left: 20px; position: relative; outline: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }
1817
.product_filter_con { position: relative; z-index: 3; }
1818
.product_filter_con.opened .product_filter_btn { background: #fff; }
1819
 
1820
	.product_filter_content { min-width: 660px; padding: 1em 0; border: 1px solid #bdbdbd\9; border-top: 0\9; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; position: absolute; top: 65px; left: 10px; background: #f7f7f7 url(/cs/site_template/ecommerce/images/general/gradient_white_400px.png) repeat-x;  box-shadow: 0 5px 3px 2px rgb(200,200,200); display: none; }
1821
		.product_filter_column { min-width: 150px; min-height: 220px; padding: 0 1em 1em 1.5em; margin: 10px 0 0 0; float: left; position: relative; font-size: 13px; line-height: 1.9em; }
1822
			.product_filter_column:before { content: ''; width: 0; border-right: 1px solid #e2e4e5; position: absolute; top: 40px; bottom: 0; left: 0; }
1823
			.product_filter_column:first-child:before { display: none; }
1824
			.product_filter_column .column_title { height: 40px; font-size: 14px; line-height: normal; font-weight: bold; }
1825
		.product_filter_footer { padding: .5em 1em 0; border-top: 1px solid #e2e4e5; line-height: 39px; clear: both; text-align: right; }
1826
			.product_filter_footer a { margin-left: .5em; *margin-right: 1em; }
1827
			.product_filter_footer .btn_medium { margin-left: 1em; *margin-left: 0; }
1828
 
1829
 
1830
.dropdown_con.product_sort { width: 175px; float: left; }
1831
 
1832
	/* IE7 <select>'s height cannot be adjusted, therefore need to position it in the center */
1833
	.dropdown_con.product_sort select { *margin-top: 23px; }
1834
 
1835
.product_compare_con { width: 180px; color: #999; font-weight: normal; }
1836
	.product_compare { line-height: 1em; }
1837
		.product_compare .btn_small { margin: 0; font-size: 13px; }
1838
		.product_compare .compare_label { margin: 0 10px; vertical-align: middle; }
1839
 
1840
 
1841
/*-------------------------------------------------------------------
1842
	$ Device Details page
1843
-------------------------------------------------------------------*/
1844
 
1845
.review_entry:after, .entry_comment:after, .detail_list:after, .yellow_tab:after, .planHolder .theTab:after, .planHolder .theContent:after, .popup_back_con:after, .device_details .additional_info:after
1846
	{ content: '.'; width: 0; height: 0; font: 0/0 a; color: transparent; display: block; clear: both; }
1847
 
1848
.text_free_delivery, .or_divider, .popup_back_con .check_validation.show
1849
	{ display: inline-block; zoom: 1; *display: inline; vertical-align: middle;  }
1850
 
1851
.device_details_title h1 { line-height: 30px; margin: 0; }
1852
.device_details_title .slogan { margin-top: 5px; }
1853
 
1854
.device_details .device_visuals { width: 320px; margin: 10px 0 0 10px; position: relative; left: -10px; z-index: 2; float: right; text-align: center; }
1855
	.device_details .device_img { width: 100%; height: 420px; position: relative; text-align: center; line-height: 380px; }
1856
		.device_details .device_img img { max-width: 100%; max-height: 100%; vertical-align: middle; }
1857
		.device_details .device_img .badge { margin-top: -10px; position: absolute; top: 50%; left: 5px; }
1858
 
1859
	.device_details .colorPanel { position: absolute; width: 31px; top: 25px; right: 5px; }
1860
	.device_details .colorPanel .selected { width: 23px; height: 23px; padding: 4px; margin-bottom: 2px; cursor: pointer; }
1861
	.device_details .colorPanel .selected.active { background:url(/cs/site_template/ecommerce/images/device_details/img_colorSelectedBg.png) left top no-repeat; }
1862
 
1863
	.device_details .show_popup_con { width: 110%; margin-top: 1em; color: #ccc; font-weight: bold; position: relative; left: -5%; }
1864
 
1865
.device_details .device_info { width: 630px; margin-right: 15px; float: left; }
1866
.device_details .device_info.full_width { width: auto; float: none; }
1867
 
1868
	.device_details .device_info > h1 { margin-bottom: 5px; }
1869
	.device_details .device_price_con { margin-top: 20px; position: relative; font-size: 14px; font-weight: bold; }
1870
		.device_details .device_price_con .from_label { font-size: 16px; }
1871
		.device_details .device_price { position: relative; top: -2px; font-size: 46px; color: #fb7a14; vertical-align: top; line-height: 1; }
1872
        .device_details .device_price_con .device_action_btn { position: absolute; top: 20px; left: 300px; }
1873
	.device_details .device_info .device_info_desc { padding-right: 20px; }
1874
	.device_details .device_info .device_info_list { margin: 0; padding: 0; font-weight: bold; } 
1875
 
1876
	.device_details .content_tabber_con { padding-left: 5px; border-bottom: 1px solid #bdbdbd; margin-bottom: 1em; }
1877
	.device_details .tabber_content,
1878
	.device_details .tabber_content	.padded_content { padding: 10px; }
1879
 
1880
/*---- Device Details - Calculator ----*/
1881
 
1882
.device_details .device_calculator { width: 255px; height: 550px; padding: 0; margin: 0; float: right; background: transparent; }
1883
 
1884
 .device_calculator { background: transparent; }
1885
 
1886
	.device_calculator_con { border: 1px solid #bdbdbd; border-radius: 5px; margin-bottom: 5px; background: #f7f7f7 url(../images/general/gradient_white_400px.png) repeat-x; line-height: 1.6; }
1887
 
1888
	.device_calculator_component + .device_calculator_component { padding-top: 10px; margin-top: 10px; }
1889
 
1890
	.device_calculator_title { margin-bottom: 10px; font-weight: bold; font-size: 14px; color: #666; }
1891
 
1892
	.device_calculator .dropdown_con { margin-bottom: 5px; }
1893
	.device_calculator_pair_right { float: right; }
1894
	.dropdown_con + .device_calculator_pair_left { line-height: 30px; }
1895
 
1896
	.device_calculator_color { width: 130px; }
1897
	.device_calculator_memory_size { width: 65px; }
1898
 
1899
	.dropdown_full_length { width: auto; display: block; }
1900
 
1901
	.device_calculator_total { text-align: center; }
1902
		.device_calculator_total_label { font-size: 13px; font-weight: bold; }
1903
		.device_calculator_total_price { margin-left: 15px; font-size: 24px; line-height: 1.5; color: #fb7a14; vertical-align: middle; font-weight: bold; }
1904
		.device_calculator_total_btn { padding: 0 10px; margin-top: 5px; }
1905
			.device_calculator_total_btn .icon_shopping_cart { margin-right: 10px; position: relative; top: -2px; }
1906
 
1907
	.device_calculator .notes { font-size: 11px; }
1908
 
1909
/*----- Device Details - Tab Contents ----*/
1910
 
1911
.tabber_content_title { font-size: 16px; font-weight: bold; }
1912
 
1913
/* Available Plans */
1914
 
1915
.plan_category_title { padding: 1em 0 .2em; font-size: 20px; font-weight: bold; }
1916
.plan_category_title:first-child { padding-top: 0; }
1917
 
1918
.available_plans .tbl_light_horizontal { margin: 1em 0; }
1919
 
1920
/* Specs */
1921
 
1922
.tabber_content.specs { padding: 15px; }
1923
	.specs_left_con { width: 685px; float: left; }
1924
		.tbl_specs { width: 100%; }
1925
			.tbl_specs td { padding: 8px 0; border-top: 1px solid #e8e8e8; vertical-align: top; }
1926
			.tbl_specs .row1 td { background: #eff1f1; font-weight: bold; }
1927
			.tbl_specs .column_label { font-weight: bold; }
1928
			.tbl_specs ul { padding-left: 1.2em; margin-top: 0; *padding-left: 0; *margin-left: 1.2em; }
1929
			.tbl_specs .fontGrey { font-weight: normal; }
1930
 
1931
		.tabber_content.specs .toggle_full_spec { padding: 8px 10px 8px 35px; border-top: 1px solid #e8e8e8; position: relative; background-color: #eff1f1; font-weight: bold; cursor: pointer; }
1932
			.toggle_full_spec:before { top: 7px; }
1933
 
1934
	.specs_right_con { width: 205px; float: right; }
1935
		.specs_phone { width: 205px; float: right; text-align: center; }
1936
		.tabber_content.specs .island { width: 205px; margin: 20px 0; float: right; }
1937
 
1938
.tabber_content.specs .toggle_full_specs { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }
1939
.tabber_content.specs .toggle_full_specs.toggled { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
1940
 
1941
.toggle_full_specs { padding: 12px 10px 12px 35px; background: #eff1f1 url(/cs/site_template/ecommerce/images/general/arrow_blue_round_down.png) 10px 11px no-repeat; font-weight: bold; cursor: pointer; }
1942
.toggle_full_specs.toggled { background-image: url(/cs/site_template/ecommerce/images/general/arrow_blue_round_up.png); }
1943
 
1944
.full_specs { display: none; }
1945
 
1946
/*---- Device Details - Popups ----*/
1947
 
1948
/* Video popup */
1949
 
1950
.video.popup_con { width: 610px; }
1951
 
1952
/* 360 view popup */
1953
 
1954
.view360.popup_con { width: 550px; margin-left: -275px; }
1955
	.view360 .popup_content { height: 340px; position: relative; }
1956
	.view360_img_con { width: 100%; height: 340px; position: absolute; top: 20px; left: 0; z-index: 1; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
1957
		.view360_img_con img { max-height: 100%; display: none; margin: 0 auto; position: relative; z-index: 1; }
1958
		.view360_img_con .current { display: block; }
1959
	.view360 .click_trap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 4; background: url(/cs/site_template/ecommerce/images/general/general_spacer.gif) repeat; -webkit-user-select: none; -moz-user-select: -moz-none; user-select: none; }
1960
	.view360_ring { width: 221px; height: 46px; margin-left: -110px; position: absolute; bottom: 20px; left: 50%; z-index: 2; background: url(/cs/site_template/ecommerce/images/device_details/view360_ring.png) no-repeat; }
1961
		.view360_ring .ring_dot { width: 8px; height: 8px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: -4px 0 0 -4px; position: absolute; top: 50%; left: 50%;z-index: 3;  background: #0091d2; }
1962
 
1963
/* Gallery popup */
1964
 
1965
.gallery .popup_content { height: 440px; position: relative; text-align: center; }
1966
	.gallery.popup_con .left_arrow,
1967
	.gallery.popup_con .right_arrow { width: 59px; height: 59px; position: absolute; top: 0; background:url(/cs/site_template/ecommerce/images/general/arrow_banner.png) left center no-repeat; }
1968
	.gallery.popup_con .left_arrow { left: 0; display: none; }
1969
	.gallery.popup_con .right_arrow { right: 0; background-position: right center; }
1970
	.gallery .left_arrow.disabled,
1971
	.gallery .right_arrow.disabled { cursor: default; }
1972
 
1973
	.gallery_images img { max-width: 570px; max-height: 360px; display: none; position: absolute; top: 50%; left: 50%; margin: -225px 0 0 -135px; }
1974
	.gallery_images img:first-child { display: block; }
1975
	.gallery_thumbnails { width: 570px; position: absolute; bottom: 20px; left: 25px; text-align: left; }
1976
		.gallery_thumbnails .thumbnails_hider { width: 426px; height: 59px; margin: 0 auto; position: relative; overflow: hidden; white-space: nowrap; text-align: center; }
1977
			.gallery_thumbnails .thumbnails_con { /* width: 300%; height: 100%; */ margin-left: 0; }
1978
				.gallery_thumbnails .thumbnail { width: 80px; height: 57px; border: 1px solid #bdbdbd; display: inline-block; *display: inline; *zoom: 1; margin-right: 4px; position: relative; cursor: pointer; text-align: center; vertical-align: top; line-height: 57px; overflow: hidden; }
1979
					.gallery_thumbnails .thumbnail_overlay { width: 100%; height: 100%; background: url(/cs/site_template/ecommerce/images/general/overlay_black_10.png) repeat; background: rgba(0,0,0,0.1); position: absolute; top: 0; left: 0; }
1980
					.gallery_thumbnails .thumbnail:hover .thumbnail_overlay,
1981
					.gallery_thumbnails .thumbnail.current .thumbnail_overlay { display: none; }
1982
					.gallery_thumbnails img { max-width: 100%; max-height: 100%; vertical-align: middle; }
1983
 
1984
.gallery .photo_count { width: 100%; font-size: 11px; position: absolute; bottom: 20px; left: 0; }
1985
 
1986
/* Zoom popup */
1987
 
1988
.zoom.popup_con { width: 600px; margin-left: -300px; }
1989
	.zoom.popup_con .popup_content { height: 450px; overflow: hidden; position: relative; }
1990
	.zoom.popup_con .zoom_img { position: absolute; top: 0; left: 0; }
1991
	.zoom_img_con { width: 1300px; height: 2000px; padding: 350px 250px; position: absolute; top: -1100px; left: -600px; }
1992
 
1993
 
1994
/*-------------------------------------------------------------------
1995
	$ Error page
1996
-------------------------------------------------------------------*/
1997
 
1998
.error_con { width: 540px; padding: 60px 0; margin: 0 auto; text-align: center; }
1999
	.error_con h2 { line-height: 1.2; }
2000
	.error_con .main_logo { float: left; }
2001
	.error_page_title { min-height: 45px; padding: 50px 0 0 80px; text-align: right; font-size: 14px; color: #808080; }
2002
 
2003
 
2004
/*-------------------------------------------------------------------
2005
	$ Form pages
2006
-------------------------------------------------------------------*/
2007
 
2008
.tbl_form .grey_textbox { width: 205px; }
2009
.tbl_form input[type="text"],
2010
.tbl_form input[type="password"] { width: 213px; }
2011
.tbl_form .label { padding-right: 25px; text-align: right; }
2012
.tbl_form [class*="has_"] .label { padding-top: 5px; }
2013
	.tbl_form .label .notes { margin-top: -0.2em; font-size: 11px; display: block; }
2014
.tbl_form [class*="has_"] .form_hint { padding-top: 5px; vertical-align: top; }
2015
.tbl_form [class*="has_"] .icon_question { margin: 5px 0 0 5px; }
2016
 
2017
.form .content_rounder { color: #999; }
2018
.form .content_rounder.current,
2019
.form .content_rounder.complete { color: #21282e; }
2020
 
2021
	.form_content,
2022
	.toggle_content { margin-top: .5em; display: none; }
2023
	.form_content.show,
2024
	.toggle_content.show { display: block; }
2025
 
2026
		.action_edit { width: 20px; margin-right: 5px; color: #0091d2; cursor: pointer; font-size: 11px; float: left; vertical-align: top; }
2027
		.toggle_validation.disabled .action_edit,
2028
		.toggle_validation.current .action_edit { display: none; }
2029
			.action_edit .edit_icon { width: 20px; height: 20px; background: url(/cs/site_template/ecommerce/images/general/general_sprite_sheet.png) -20px -120px no-repeat; }
2030
 
2031
		.action_edit + .content_title { padding-left: 30px; line-height: 30px; }
2032
		.toggle_validation.disabled .action_edit + .content_title,
2033
		.toggle_validation.current .action_edit + .content_title { padding-left: 0; }
2034
 
2035
		.form_content .action_con { text-align: right; }
2036
 
2037
.static_content_con .content_rounder,
2038
.content_rounder.static { color: #666; }
2039
 
2040
/* Form (Payment) */
2041
 
2042
.tbl_delivery_details { margin-top: 1em; table-layout: fixed; }
2043
	.tbl_delivery_details .label { width: 125px; padding-right: 20px; text-align: right; }
2044
 
2045
.tbl_payment_method th,
2046
.tbl_payment_method td { width: 50%; border-left: 1px solid #e5e5e5; }
2047
.tbl_payment_method .credit_card_con { background: url(/cs/site_template/ecommerce/images/form/visa_mastercard.jpg) bottom right no-repeat; }
2048
	.payment_method img { margin-left: 1em; vertical-align: middle; }
2049
 
2050
 
2051
/* Form (Configure Mobile Number) */
2052
 
2053
.form .line_header { height: 17px; padding: 10px 15px; border-top: solid 1px #cccccc; margin: 10px 0; background: url(/cs/site_template/ecommerce/images/general/gradient_grey_50px.png) repeat-x; font-size: 15px; font-weight: bold; }
2054
.form .line_content { margin: 15px 0; padding: 0 15px; }
2055
	.form .line_img { margin-right: 25px; float: left; }
2056
	.form .line_details { float: left; margin-bottom: 15px; }
2057
		.form .line_details input[type=text] { margin: 7px 5px 5px 0; }
2058
 
2059
		.form .line_full_details { width: 858px; height: 275px; padding-left: 60px; margin-left: -15px; position: relative; background-color: #f7f7f7; clear: both; overflow: hidden; display: none; }
2060
			.tbl_sup_line { margin: 15px 0; }
2061
			.form .line_full_details:before,
2062
			.form .line_full_details:after { content: ''; width: 100%; height: 20px; position: absolute; left: 0; background: url(/cs/site_template/ecommerce/images/form/form_grey_bg_shadow.gif) repeat-x; }
2063
			.form .line_full_details:before { top: -10px; }
2064
			.form .line_full_details:after { bottom: -10px; }
2065
 
2066
			.form .line_full_details .form_hint { width: 270px; margin-left: 10px; }
2067
			.form .line_full_details .form_hint.short { width: 200px; }
2068
				.form .line_full_details .form_hint.show,
2069
				.form .line_full_details .form_hint.has_error,
2070
				.form .line_full_details .form_hint.no_error { margin-top: -3px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; }
2071
			.form .line_full_details input[type=text] { width: 200px; }
2072
			.form .line_full_details input[name=street_address] { width: 460px; }
2073
			.form .line_full_details input[name=city] { width: 270px; }
2074
 
2075
			.tbl_form input.field_ic1,
2076
			.tbl_form input.field_confirm_ic1,
2077
			.tbl_princesses input.field_ic1 { width: 60px; }
2078
			.tbl_form input.field_ic2,
2079
			.tbl_form input.field_confirm_ic2,
2080
			.tbl_princesses input.field_ic2 { width: 30px; }
2081
			.tbl_form input.field_ic3,
2082
			.tbl_form input.field_confirm_ic3,
2083
			.tbl_princesses input.field_ic3 { width: 50px; }
2084
			.tbl_form input.field_security_answer { width: 260px; }
2085
			.tbl_form .security_question.dropdown_con { width: 260px; margin: 0 0 5px 5px; }
2086
			.tbl_form .id_type.dropdown_con { width: 130px; margin: 0 0 5px 5px; }
2087
 
2088
.tbl_form .dropdown_con { width: 110px; margin-left: 3px; }
2089
	.tbl_form .year.dropdown_con,
2090
	.tbl_princesses .year.dropdown_con { width: 80px; margin-left: 3px; }
2091
	.tbl_form .month.dropdown_con,
2092
	.tbl_form .day.dropdown_con,
2093
	.tbl_princesses .month.dropdown_con,
2094
	.tbl_princesses .day.dropdown_con { width: 60px; margin-left: 10px; }
2095
	.tbl_form .state.dropdown_con,
2096
	.tbl_princesses .state.dropdown_con { width: 140px; margin-left: 3px; }
2097
	.tbl_form .delivery_option.dropdown_con { width: 200px; }
2098
 
2099
/* Form (My Account Information) */
2100
 
2101
.tbl_form .tnc { margin-top: .5em; display: inline-block; *display: inline; *zoom: 1; }
2102
.delivery_label { width: 190px; display: inline-block; *display: inline; *zoom: 1; }
2103
 
2104
.address_form,
2105
.self_pick_up_form { display: none; }
2106
	.digi_stores.dropdown_con { width: 200px; margin: 1em 5px; }
2107
	.self_pick_up_form .tbl_round { width: 465px; display: none; } 
2108
		.self_pick_up_form .tbl_round td { width: 50%; }
2109
			.get_directions { text-decoration: none; }
2110
 
2111
/* Form (Complete) */
2112
 
2113
.form_thank_you .left_column { width: 400px; padding-top: 1em; }
2114
	.form_thank_you .transaction_num_con { width: auto; }
2115
 
2116
.form_thank_you .right_column { width: 395px; margin-top: 1em; float: right; } 
2117
	.form_thank_you .right_column .emphasize { font-size: 16px; font-weight: bold; }
2118
 
2119
.form_thank_you .share_img { width: 110px; height: 185px; float: left; line-height: 185px; }
2120
	.form_thank_you .share_img img { max-width: 100%; max-height: 100%; }
2121
	.form_thank_you .share_content { padding: 15px 0; }
2122
	.form_thank_you .share_content .share_title { margin-bottom: 1em; font-size: 16px; font-weight: bold; }
2123
	.form_thank_you .share_content [class*="icon"] { margin-right: 4px; }
2124
 
2125
.textarea_address { width: 213px; height: 5em; font-family: Arial, Helvetica, sans-serif; font-size: 13px; resize: none; }
2126
 
2127
.input_box { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
2128
.char_count { padding: 5px 10px; }
2129
 
2130
/*-------------------------------------------------------------------
2131
	$ Help & Support
2132
-------------------------------------------------------------------*/
2133
 
2134
.help_support.tbl_link_list { width: 460px; }
2135
 
2136
/* Feedback Form */
2137
 
2138
textarea.textarea_comments { width: 100%; height: 150px; display: block; margin-bottom: .5em; }
2139
.contact_num_type.dropdown_con { width: 75px; }
2140
.contact_num_prefix.dropdown_con { width: 65px; }
2141
.contact_num { vertical-align: middle; }
2142
 
2143
 
2144
/*-------------------------------------------------------------------
2145
	$ International Services pages
2146
-------------------------------------------------------------------*/
2147
 
2148
.country_to_country_con { text-align: center; }
2149
	.country_to_country_con img { vertical-align: middle; }
2150
	.country_obj { min-width: 175px; padding: 0 10px; display: inline-block; *display: inline; *zoom: 1; font-weight: bold; }
2151
		.country_obj img { margin-right: .5em; }
2152
 
2153
/* International Direct Dial (IDD) */
2154
 
2155
.call_plan_type_label { display: block; margin-bottom: .5em; }
2156
.select_call_plan.dropdown_con { width: 170px; margin-bottom: 1em; display: none; font-weight: bold; }
2157
.select_call_country.dropdown_con { width: 210px; font-weight: bold; }
2158
 
2159
/* Unlimited Internet Roaming */
2160
 
2161
.unlimited_internet_roaming.dropdown_con { width: 250px; font-weight: bold; }
2162
 
2163
 
2164
/*-------------------------------------------------------------------
2165
	$ Landing page
2166
-------------------------------------------------------------------*/
2167
 
2168
.landing_middle_con:after, .landing_promo_con:after, .sign_in_panel:after
2169
	{ content: '.'; width: 0; height: 0; font: 0/0 a; color: transparent; display: block; clear: both; }
2170
 
2171
.landing_banner { border: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 15px; }
2172
	.landing_banner .banner_clicker { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 
2173
.landing_banner + .content { border-top: 1px solid #bdbdbd; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
2174
 
2175
/* Sign in panel */
2176
 
2177
.landing_quick_panel { width: 200px; padding-bottom: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; top: 5px; right: 5px; overflow: hidden; }
2178
	.sign_in_panel { background: #f8f8f8; padding: 10px 10px 15px; font-size: 12px; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }
2179
		.sign_in_panel form { margin-bottom: 10px; }
2180
		.sign_in_panel .btn_medium { float: right; font-size: 13px; }
2181
		.sign_in_panel h3 { color: #222; margin: 0px; font-size: 16px; }
2182
		.sign_in_panel td { padding-bottom: 10px; }
2183
		.sign_in_panel .arrow_link { margin: 3px 0; }
2184
 
2185
	.landing_quick_panel .quick_linker { padding: 15px 60px 15px 15px; display: block; background: #fd0 right center no-repeat; color: #21282e; border-radius: 0 0 5px 5px; }
2186
 
2187
	#keepSignInCon { vertical-align: middle; }
2188
 
2189
/* Landing content */
2190
 
2191
.landing_featured_phone { width: 100%; height: 220px; position: relative; }
2192
	.landing_featured_phone .arrow_left, .landing_featured_phone .arrow_right { width: 26px; height: 100%; position: absolute; top: 0; background:url(/cs/site_template/ecommerce/images/general/arrow_select_grey.png) no-repeat left center; cursor: pointer; }
2193
	.landing_featured_phone .arrow_left { left: -42px; }
2194
	.landing_featured_phone .arrow_right { background-position: right center; right: -42px; }
2195
	.landing_phone_holder { width: 100%; height: 100%; float: left; position: relative; overflow: hidden; }
2196
		.landing_phone_mover  { width: 9999px; height: 100%; position: absolute; top: 0; left: 0; }
2197
			.landing_phone_holder .phone { width: 210px; padding: 5px 0; margin: 0 10px; float: left; font-size: 11px; }
2198
				.landing_phone_holder .title { margin-left: 10px; font-size: 16px; color: #0091d2; font-weight: bold; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
2199
				.landing_phone_holder .subtitle { width: 85px; height: 65px; clear: both; } 
2200
				.landing_phone_holder .imager { width: 100px; height: 160px; position: relative; float: left; text-align: center; overflow: hidden; }
2201
					.landing_phone_holder .imager img { max-width: 100%; max-height: 100%; }
2202
                    .landing_phone_holder .imager .badge { width: 50px; height: 50px; position: absolute; bottom: 30px; right: 0; }
2203
				.landing_phone_holder .description { width: 105px; height: 140px; padding: 20px 0 0 5px; float: left; }
2204
				.landing_phone_holder .textValue { color: #fb7a14; font-weight: bold; font-size: 20px; line-height: normal; }
2205
 
2206
.landing_middle_con { background:url(/cs/site_template/ecommerce/images/landing/bg_line_shadow.png) no-repeat center top; padding:30px 0px 0px; }
2207
	.landing_middle_content { width: 200px; margin-right: 33px; float: left; }
2208
	.landing_middle_content.last_node { margin-right: 0px; }
2209
	.landing_middle_content .title { color: #0091d2; font-size: 16px; font-weight: bold; }
2210
	.landing_middle_content .imager { overflow: hidden; height: 93px; width: 200px; border: 1px solid #e8e8e8; margin: 20px 0 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
2211
	.landing_middle_content a { border-top: 1px dotted #bdbdbd; display: block; font-size: 12px; line-height: 25px; }
2212
	.landing_middle_content .imager + a { border-top: 0; }
2213
 
2214
 
2215
/*-------------------------------------------------------------------
2216
	$ Login page and $ Register page
2217
-------------------------------------------------------------------*/
2218
 
2219
.login_extra_info { width: 500px; }
2220
	.login_extra_info .content_title { font-size: 15px; }
2221
 
2222
.tbl_register_confirm td { padding-bottom: 1em; }
2223
.thank_you.popup_con { width: 440px; margin-left: -220px; }
2224
 
2225
 
2226
/*-------------------------------------------------------------------
2227
	$ Logout page
2228
-------------------------------------------------------------------*/
2229
 
2230
.logout_additional_content { padding-bottom: 20px; }
2231
	.logout_additional_content .start_side { float: left; }
2232
	.logout_additional_content .flip_side { padding-left: 255px; text-align: center; }
2233
		.logout_additional_content .title_text { font-size: 38px; font-weight: bold; }
2234
		.logout_additional_content .subtitle_text { font-size: 16px; margin-bottom: 5px; }
2235
		.logout_additional_content p { width: 70%; margin: 0 auto; }
2236
 
2237
 
2238
/*-------------------------------------------------------------------
2239
	$ My Account page
2240
-------------------------------------------------------------------*/
2241
 
2242
.my_account h1 { margin-bottom: .2em; *zoom: 1; }
2243
.my_account .clear_cart { color: #21282e; }
2244
 
2245
.tbl_id_info { margin-top: 15px; }
2246
	.tbl_id_info td { padding-bottom: 5px; }
2247
	.tbl_id_info td:first-child { font-weight: bold; }
2248
 
2249
.link_ocs { width: 355px; }
2250
.dropdown_con.ocs_type { width: 190px; margin-bottom: 10px; font-weight: bold; }
2251
.field_ocs_num { width: 190px; margin: 0 0 5px; }
2252
 
2253
/* Online Customer Service */
2254
 
2255
.tbl_ocs_num th,
2256
.tbl_ocs_num td { padding: 10px 15px; }
2257
	.tbl_ocs_num a { text-decoration: none; }
2258
	.tbl_ocs_num .remove_num { color: #21282e; }
2259
 
2260
/* My Purchases */
2261
 
2262
.tbl_my_purchases td { border-bottom: 1px solid #bdbdbd; }
2263
	.tbl_my_purchases .payment_con { text-align: center; }
2264
	.tbl_my_purchases .success { color: #749a01; }
2265
	.tbl_my_purchases .tbl_plain { margin-bottom: 2em; }
2266
 
2267
.purchased_item_img { width: 60px; height: 120px; float: left; text-align: center; }
2268
	.purchased_item_img img { max-width: 100%; max-height: 100%; }
2269
.purchased_item_details { padding-left: 80px; min-height: 120px; }
2270
	.purchased_item_details ol { padding: 0; margin: 0 0 0 1.5em; }
2271
 
2272
/* Purchase History */
2273
 
2274
.tbl_purchase_history th,
2275
.tbl_purchase_history td { padding: 10px; }
2276
.tbl_purchase_history th { *padding: 0 10px; }
2277
.tbl_purchase_history td { border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; }
2278
.tbl_purchase_history td.last { border-left: 0; background: #f5f8fa; }
2279
 
2280
/* Account Settings */
2281
 
2282
.password_strength_con { width: 83px; height: 8px; border: 1px solid #bdbdbd; margin: 6px 2px 0 5px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
2283
	.password_strength { width: 0; height: 100%; background: url(/cs/site_template/ecommerce/images/my_account/bg_password_strength.gif) repeat-x; }
2284
	.password_strength.passed { background-position: left -8px; }
2285
 
2286
.password_strength_con + .icon_question { margin-top: 4px; vertical-align: middle; }
2287
 
2288
.tbl_account_settings_form tr td { padding-bottom: .5em; }
2289
.tbl_account_settings_form .label { width: 140px; padding: .5em 1em 0 0; text-align: right; }
2290
	.tbl_account_settings_form input[type="password"] { width: 140px; }
2291
	.tbl_account_settings_form input[type="text"] { width: 140px; }
2292
	.tbl_account_settings_form textarea { width: 250px; }
2293
	.tbl_account_settings_form input.field_city { width: 220px; }
2294
	.tbl_account_settings_form input,
2295
	.tbl_account_settings_form textarea { margin: 0; font: 13px Arial, Helvetica, sans-serif; resize: none; }
2296
 
2297
.tbl_grey { border: 0; font-size: 11px; color: #666; }
2298
	.tbl_grey [class*="dropdown_con"] { font-size: 13px; color: #21282e; }
2299
	.tbl_grey td { padding: 10px; border-bottom: 1px solid #fff; border-left: 1px solid #fff; }
2300
	.tbl_grey td:first-child { background: #eff1f1; }
2301
	.tbl_grey .last { background: #e5e5e5; }
2302
	.tbl_grey strong { font-size: 13px; color: #21282e; display: block; }
2303
 
2304
.security_question.dropdown_con { width: 245px; }
2305
.field_security_answer { width: 245px; }
2306
.field_alternate_email { width: 190px; }
2307
 
2308
.change_address_info { display: none; }
2309
 
2310
 
2311
/*-------------------------------------------------------------------
2312
	$ My Cart Summary page
2313
-------------------------------------------------------------------*/
2314
 
2315
.promo_code { padding: 5px 10px; *padding-right: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline-block; *display: inline; *zoom: 1; background: #21282e; color: #fff; text-align: left; }
2316
	.promo_code input { width: 185px; height: 15px; margin: -3px 0 0 10px; vertical-align: middle; }
2317
	.promo_code .icon_question { margin: -3px 10px 0 5px; vertical-align: middle; }
2318
 
2319
 
2320
/*-------------------------------------------------------------------
2321
	$ Plan Details page
2322
-------------------------------------------------------------------*/
2323
 
2324
.plan_details_title { margin-top: .5em; }
2325
/* .plan_details_subtitle { width: 350px; } */
2326
 
2327
.plan_details_action { margin-bottom: 2em; line-height: 40px; }
2328
	.plan_details_price { margin-right: 15px; color: #fb7a14; font-size: 30px; font-weight: bold; vertical-align: middle; }
2329
 
2330
.tbl_plan_details { width: 510px; }
2331
	.tbl_plan_details th { *padding-top: 0; *padding-bottom: 0; }
2332
.tbl_postpaid_internet { width: 260px; }
2333
.tbl_prepaid_internet { width: 400px; }
2334
 
2335
.plan_service_popup { width: 530px; }
2336
.prepaid_internet_popup { width: 740px; margin-left: -370px; }
2337
	.prepaid_popup_media { width: 100%; height: 190px; margin-bottom: 1em; line-height: 190px; }
2338
		.prepaid_popup_media img { vertical-align: middle; }
2339
 
2340
 
2341
/*-------------------------------------------------------------------
2342
	$ Rewards page
2343
-------------------------------------------------------------------*/
2344
 
2345
.rewards_banner { height: 340px; }
2346
 
2347
/* .rewards .catalogue_item { height: 221px; } */
2348
	/* .rewards .item_preview { height: 199px; overflow: hidden; } Catalogue item height - 22px */
2349
	/* .rewards .item_content { top: 236px; } */
2350
 
2351
.rewards_sort_dropdown_con { width: 190px; }
2352
.mall_filter.dropdown_con { width: 170px; font-weight: bold; }
2353
 
2354
.mall_img { width: 200px; margin-top: .2em; float: left; }
2355
	.mall_img img { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
2356
.mall_details { width: 340px; min-height: 120px; padding-left: 230px; *padding-left: 2em;  margin-top: .2em; color: #333; } /* Again, float behaviour differs a bit in IE7, so need to reduce padding to compensate */
2357
 
2358
 
2359
/*-------------------------------------------------------------------
2360
	$ Reload page
2361
-------------------------------------------------------------------*/
2362
 
2363
.tbl_reload_form { width: 80%; margin-top: 1em; }
2364
.tbl_reload_form label { margin-bottom: .5em; display: block; }
2365
.two_columns.payment_methods { width: 420px; }
2366
	.payment_methods label img { margin-left: .5em; vertical-align: middle; }
2367
	.tbl_reload_form td { padding-bottom: 1em; }
2368
 
2369
.payment_additional_info { display: none; }
2370
 
2371
 
2372
/*-------------------------------------------------------------------
2373
	$ Search page
2374
-------------------------------------------------------------------*/
2375
 
2376
.sub_search_category.dropdown_con { width: 120px; margin-right: 1em; font-weight: bold; }
2377
.sub_search_category .dropdown_btn { white-space: normal; overflow: visible; text-overflow: visible; }
2378
.sub_search input[type="text"] { font-size: 18px; }
2379
 
2380
.search_result { width: 765px; clear: both; margin-bottom: 2em; }
2381
	.result_thumb { width: 80px; height: 60px; border: 1px solid #e5e5e5; margin: 0 20px 2em 0; float: left; }
2382
		.result_thumb img { max-width: 100%; max-height: 100%; }
2383
	.result_details p { padding: 0; }
2384
	.search_src { color: #008000; }
2385
 
2386
 
2387
/*-------------------------------------------------------------------
2388
	$ Sitemap page
2389
-------------------------------------------------------------------*/
2390
 
2391
.horizontal_divider + h3 { position: relative; }
2392
 
2393
.tbl_sitemap { margin-top: 15px; }
2394
	.tbl_sitemap td { width: 197px; padding: 20px 0 0 40px; }
2395
	.tbl_sitemap td:first-child { padding-left: 0; }
2396
	.tbl_sitemap tr:first-child td { padding-top: 0; }
2397
		.tbl_sitemap h4 { font-weight: bold; }
2398
		.tbl_sitemap h4 a { text-decoration: none; }
2399
		.tbl_sitemap .link_list .group_title { margin-top: 10px; }
2400
 
2401
 
2402
/*-------------------------------------------------------------------
2403
	$ Store Locator page
2404
-------------------------------------------------------------------*/
2405
 
2406
.store_state.dropdown_con { width: 135px; }
2407
.store_type.dropdown_con { width: 155px; }
2408
.store_services_products.dropdown_con { width: 210px; }
2409
 
2410
.stores .catalogue_item { height: 185px; }
2411
	/* .stores .item_toggler { height: 40px; } */
2412
	.stores .item_preview { height: 163px; }  /* Catalogue item height - 22px */
2413
	.catalogue_item .store_details { padding-top: 1em; margin-bottom: 1em; }
2414
	.catalogue_item .icon_pin { vertical-align: top; margin: 2px 2px 0 0; }
2415
 
2416
	/* .stores .item_content { top: 200px; } */
2417
		.stores .tbl_operating_hours { width: 195px; margin-right: 25px; float: left; }
2418
		.store_services { width: 215px; margin-left: 10px; float: left; }
2419
			.store_services_title { margin-bottom: .2em; font-size: 15px; font-weight: bold; }
2420
			.store_services ul { width: 100%; padding: 0; margin: 0; list-style: none; }
2421
				.catalogue_item .store_services li { padding-left: 0; border-top: dotted 1px #b9b9b9; position: relative; background: none; color: #666; line-height: 22px; }
2422
					.store_services li [class^="icon_"] { margin: -2px 4px 0 0; vertical-align: middle; }
2423
				.store_services li:first-child { border-top: 0; }
2424
 
2425
.store_locator .tbl_dark_horizontal { margin-right: 25px; float: left; width: 195px; }
2426
 
2427
.store_locator_google_map { width: 700px; margin-left: -350px; }
2428
	.store_locator_google_map .popup_content { height: 450px; }
2429
		.store_locator_google_map .infowindow { width: 500px; }
2430
 
2431
 
2432
/*-------------------------------------------------------------------
2433
	$ Whats Hot pages
2434
-------------------------------------------------------------------*/
2435
 
2436
.whatshot .catalogue_item { width: 198px; height: 220px; padding: 10px; border: 1px solid #e5e5e5; }
2437
	.whatshot .item_title { height: 3em; font-weight: bold; line-height: 1.2em; }
2438
	.whatshot .item_thumb { width: 200px; height: 100px; margin: 0 0 .25em -1px; }
2439
 
2440
.tbl_whatshot_rates { margin: 10px 0 20px; }
2441
    .whatshot { position: relative; }
2442
        .whatshot_temp_bg { position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; }
2443
        .whatshot_top_img,
2444
            .whatshot_temp_bg > img,
2445
            .whatshot_top_img > img { border-radius: 5px 5px 0 0; }
2446
        .whatshot_temp_content { position: relative; z-index: 2; }
2447
 
2448
/*-------------------------------------------------------------------
2449
	$ Digi Survey Floating
2450
-------------------------------------------------------------------*/
2451
.dsy_close
2452
{
2453
    display:block;
2454
    background-image:url(/cs/site_template/ecommerce/images/digisurvey/close.png);
2455
    width:48px;height:48px;
2456
    background-repeat:no-repeat;
2457
    text-decoration:none;
2458
    cursor:pointer;
2459
    position:absolute;
2460
    z-index:10
2461
}
2462
 
2463
.dsy_feedbacktab
2464
{
2465
    display:block;
2466
    background-image:url(/cs/site_template/ecommerce/images/digisurvey/dso_tabbtn.png);
2467
    width:60px;
2468
    height:83px;
2469
    margin-left: 470px;
2470
    background-repeat:no-repeat;
2471
    text-decoration:none;
2472
    cursor:pointer;
2473
    position:fixed;
2474
    top: 235px;
2475
    left: 50%;
2476
    font: 0/0 a;
2477
    z-index:10
2478
 
2479
}
2480
 
2481
.dsy_feedbacktab.align_to_bottom {
2482
    position: absolute;
2483
    top: auto;
2484
}