Subversion Repositories oidinfo_new_design

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2 daniel-mar 1
/** Style for all pages **/
2
#standards {
3
   width:100%;
4
   margin-left: auto;
5
   margin-right: auto;
6
   background: #eee;
7
   padding: auto;
8
   display:block;
9
   height: auto;
10
 
11
}
12
#what_is_an_OID,#table_faq, #table_search_in_basic_search, #management, #management_mobile, #reg_in_regexp, #disclaimer, #oid_validate_mobile{
13
   width:100%;
14
   margin-left: auto;
15
   margin-right: auto;
16
   background: #eee;
17
   float:left;
18
   padding: auto;
19
   display:block;
20
   height: auto;
21
} 
22
#allocated_in_index, #repository_in_index, #explanations_in_index, #submit_xml_in_index{
23
   width:100%;
24
   margin-left: auto;
25
   margin-right: auto;
26
   background: #eee;
27
   float:left;
28
   padding: auto;
29
   display:none;
30
   height: auto;
31
}
32
#table_display_in_index, #extraction{
33
   width:100%;
34
   margin-left: auto;
35
   margin-right: auto;
36
   background: #eee;
37
   float:left;
38
   padding: 0.5%;
39
   display:block;
40
   height: auto;
41
} 
42
#table_draw_in_index, #table_add_in_index, #warning_in_index, #disclaimer_in_index, #number_oid_in_index, #table_answers_in_faq , #name-forms {
43
   width:100%;
44
   margin-left: auto;
45
   margin-right: auto;
46
   margin-top: 2%;
47
   background: #eee;
48
   float:left;
49
   padding: 0.5%;
50
   display:block;
51
}
52
#introduction{
53
   width:98%;
54
   margin-left: auto;
55
   margin-right: auto;
56
   background: #eee;
57
   float:left;
58
   padding-left: 2%;
59
   display:block;
60
}
61
#manage_in_management{
62
   width:99%;
63
   margin-left: auto;
64
   margin-right: auto;
65
   margin-top: 2%;
66
   background: #eee;
67
   float:left;
68
   padding: 0.5%;
69
   display:block;
70
}
71
#errors, #errors_mobile  {
72
   width:100%;
73
   margin-left: auto;
74
   margin-right: auto;
75
   margin-top: 2%;
76
   margin-bottom:2%;
77
   background: #eee;
78
   float:left;
79
   padding: auto;
80
   display:block;
81
   height:auto;
82
}
83
#count_in_management, #country_in_management, #search_replace_in_management, #admin_in_management, #execute_in_management, #accounts_in_management,
84
#submit_xml_in_management, #display_example_in_management, #explanations_in_management, #registrant_chart_in_management {
85
   width:98%;
86
   margin-left: auto;
87
   margin-right: auto;
88
   margin-top: 2%;
89
   background: #eee;
90
   float:left;
91
   padding: 1%;
92
   display:none;
93
}
94
#main_actions_in_index{
95
   width:100%;
96
   margin-left: auto;
97
   margin-right: auto;
98
   height: auto;
99
   max-width:750px;
100
   min-width:300px;
101
}
102
.rounded {
103
   -webkit-border-radius: 20px;
104
   -moz-border-radius: 20px;
105
   border-radius: 20px;
106
}
107
.styled-select {
108
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 105% 0;
109
   height: 23px;
110
   overflow: hidden;
111
   width: 100%;
112
   background-color: #6e6e6e;
113
   margin-top:10px;
114
   color:white;
115
   border: none;
116
}
117
.styled-select select {
118
   background: transparent;
119
   border: none;
120
   font-size: 12px;
121
   height: 23px;
122
   padding: 0px;
123
   width: 100%;
124
}
125
#menu{
126
   width: 98%;
127
   margin-right:2%;
128
   margin-top:2%;
129
}
130
#menu ul {
131
   float: right;
132
   padding: 0;
133
   margin:0;
134
   list-style: none;
135
   line-height: 35px;
136
   text-align: left;
137
}
138
#menu li {
139
 margin:auto;
140
 padding:0;
141
 background-color:black;
142
 position:relative;
143
}
144
#menu li a {
145
 display: block;
146
   background: #6e6e6e;
147
   color: #fff;
148
   text-decoration: none;
149
   width: 150px;
150
   padding: 0px 15px 0px;
151
   font-family: Arial, Helvetica, sans-serif;
152
   font-size: 11px;
153
   font-weight: bold;
154
   line-height: 20px;
155
}
156
#menu li img {
157
 display: block;
158
   background: #6e6e6e;
159
   width: 20px;
160
   padding: 0px 15px 0px;
161
}
162
#menu li a:hover {
163
   background: #ff7e43;
164
}
165
#menu ul li ul {
166
 display:none;
167
}
168
#menu ul li:hover ul {
169
 display:block;
170
}
171
#menu li:hover ul li {
172
 float:none;
173
}
174
#menu li ul {
175
 position:absolute;
176
}
177
#header img {
178
   display: inline;
179
   float: left;
180
}
181
#header_url_and_menu {
182
   width:100%;
183
}
184
#header_url {
185
   float:left;
186
}
187
#header_menu_right {
188
   float:inline;
189
   margin-left:32%;
190
   position:absolute;
191
}
192
#country-oid-general, #country-oid-title{
193
   width:100%;
194
   margin-left: auto;
195
   margin-right: auto;
196
   margin-top: 2%;
197
   background: #eee;
198
   float:left;
199
   padding: 0.5%;
200
   display:block;
201
}
202
#country-oid-check-list, #country-oid-template, #country-oid-RAS{
203
   width:100%;
204
   margin-left: auto;
205
   margin-right: auto;
206
   margin-top: 2%;
207
   background: #eee;
208
   float:left;
209
   padding: 0.5%;
210
   display:none;
211
}
212
/** end style for all pages **/
213
 
214
/**Screen version**/
215
@media (min-width: 768px) {
216
#header_mobile, #remote_button, #navigation{display:none;}
217
#global_container{display:block;}
218
#main_actions_in_index{display:block;}
219
#section_menu_in_management{display:block;}
220
#manage_in_management{display:block;}
221
#errors_mobile, #management_mobile{display:none;}
222
#errors , #management{display:block;}
223
#oid_validate_mobile{display:none;}
224
#country-oid-title{display:block;}
225
#country-oid-general{display:block;}
226
 
227
body{
228
   font-family: arial,sans-serif;
229
}
230
/***Page header***/
231
#global_container {
232
   width: 800px;
233
   height: auto;
234
   margin: 0px auto 0px;
235
   padding: 0px;
236
   position: relative;
237
}
238
#header {
239
   width: 760px;
240
   height: 110px;
241
   background-color: #5f5f5f;
242
   margin-top: 22px;
243
   padding: 20px;
244
   position: relative;
245
   margin: 0px auto 0px;
246
}
247
#header h1 {
248
   position: relative;
249
   font-weight: bold;
250
   color: #fff;
251
   font-size: 20px;
252
   display: inline;
253
   float: left;
254
   margin: -10px 0px 0px 10px;
255
}
256
#bg_menu {
257
   width: 779px;
258
   height: 41px;
259
   background-color: #5f5f5f;
260
   padding: 0px 21px 0px 0px;
261
   margin-bottom: 14px;
262
   position: relative;
263
   z-index: 1200;
264
}
265
#header_menu {
266
   font-weight: bold;
267
   font-family: Arial;
268
}
269
#header_menu, #header_menu ul {
270
   float: right;
271
   padding: 0;
272
   margin: 0;
273
   list-style: none;
274
   line-height: 35px;
275
   text-align: left;
276
}
277
html > body #header_menu li {
278
   border-right: 1px solid transparent;
279
}
280
#header_menu li {
281
   float: left;
282
   border-right: 1px solid #fff;
283
}
284
#header_menu a {
285
   display: block;
286
   background: #6e6e6e;
287
   color: #fff;
288
   text-decoration: none;
289
   width: auto;
290
   padding: 0px 15px 0px;
291
   text-transform: uppercase;
292
   font-family: Arial, Helvetica, sans-serif;
293
   font-size: 14px;
294
   font-weight: bold;
295
}
296
#header_menu img {
297
   display: block;
298
   background: #6e6e6e;
299
   color: #fff;
300
   margin-left:0px;
301
}
302
#header_menu a:hover {
303
   background: #ff7e43;
304
}
305
#header_menu img:hover {
306
   background: #ff7e43;
307
}
308
/*** Vertical menu ***/
309
.vertical_menu {
310
   width:190px;
311
   margin-left:73.5%;
312
   height:297px;
313
   background-color:#6e6e6e;
314
   text-align: left;
315
   border: 3px solid #7f7f7f;
316
}
317
.vertical_menu ul {
318
   margin: 0; 
319
   padding: 0;
320
   width:180px;
321
   list-style-type: none;
322
}
323
.vertical_menu ul li a {
324
   text-decoration: none;
325
   color: #fff;
326
   padding: 10.5px 11px;
327
   background-color: #6e6e6e;
328
   display:block;
329
   font-size: 17px;
330
}
331
.vertical_menu ul li a:hover, .vertical_menu ul li .current {
332
   background-color: #ff7e43;
333
}
334
/*** banner ***/
335
#wrapper_carousel{
336
   position: relative;
337
   width: 60%;
338
   height: 300px;	
339
   margin-bottom: 15px;
340
   float:left;
341
   margin-left:7px;
342
}
343
/***************************/
344
a img {
345
   border: none;
346
}
347
#content h1 {
348
   font-weight: bold;
349
   font-size: 20px;
350
}
351
#search {
352
   position: absolute;
353
   left: 700px;
354
}
355
#google_translate {
356
   display: inline;
357
   float: right;
358
}
359
#global_content {
360
   width: 760px;
361
   height: auto;
362
   background-color: #5f5f5f;
363
   padding: 20px;
364
   position: relative;
365
   margin: 0px auto 0px;
366
   margin-top:20px;
367
}
368
#error400,#error403-404, #error500 {
369
   width:750px;
370
   border: 3px solid #7f7f7f;
371
   margin-left: auto;
372
   margin-right: auto;
373
   background: #eee;
374
   float:center;
375
   padding: 3px;
376
   display:block;
377
   height: auto;
378
}
379
div.clear{clear:both;}
380
.page_title{
381
   font-weight:bold;
382
   font-size:18px;
383
   color:#FF5500;
384
}
385
.section_title , .action_title{ 
386
   font-size:16px;
387
   color:#FF5500;
388
}
389
#global_in_index{
390
   width:101%;
391
}
392
/*** FAQ ***/
393
#question{
394
   margin-left:30px;
395
   padding:10px;
396
   display:block;
397
   width:95%;
398
}
399
/*** Management page menu ***/
400
#menu_manage {
401
   font-weight: bold;
402
   font-family: Arial;
403
}
404
#menu_manage, #menu_manage ul {
405
   padding: 0;
406
   margin: 0;
407
   list-style: none;
408
   line-height: 35px;
409
   text-align: left;
410
}
411
html > body #menu_manage li {
412
   border-right: 1px solid transparent;
413
}
414
#menu_manage li {
415
   float: left;
416
   border-right: 1px solid #fff;
417
}
418
#menu_manage a {
419
   display: block;
420
   background: #6e6e6e;
421
   color: #fff;
422
   text-decoration: none;
423
   width: auto;
424
   padding: 0px 8px 0px;
425
   text-transform: uppercase;
426
   font-family: Arial, Helvetica, sans-serif;
427
   font-size: 14px;
428
   font-weight: bold;
429
}
430
#menu_manage a:hover {
431
   background: #ff7e43;
432
}
433
#section_menu_in_management {
434
   width: 758px;
435
   height: 41px;
436
   background-color: #5f5f5f;
437
   padding: 0px 21px 0px 0px;
438
   margin-top:20px;
439
   margin-bottom: 14px;
440
   position: relative;
441
   z-index: 1200;
442
}
443
}
444
 /* end of Screen media query */
445
 
446
/* mobile styles */
447
@media (max-width: 767px) {
448
 
449
#mobile_version{display:block;}
450
#global_container{display:none;}
451
#global_in_index{display:none;}
452
#header_mobile, #remote_button, #navigation{display:block;}
453
#main_actions_in_index{display:none;}
454
#section_menu_in_management{display:none;}
455
#manage_in_management{display:none;}
456
#errors_mobile, #management_mobile{display:block;}
457
#errors , #management{display:none;}
458
#oid_validate_mobile{display:block;}
459
#country-oid-title{display:none;}
460
#country-oid-general{display:none;}
461
 
462
input[type=text]{
463
   width:50%;
464
}
465
/* wrapper styles */
466
.wrapper {
467
   position: absolute;
468
   min-height: 100vh;
469
}
470
.wrapper_in_management{
471
   position: absolute;
472
   min-height: 150vh;
473
}
474
.sidebar {
475
   position: absolute;
476
   top: 0;
477
   width: 50vw;
478
   min-height: 100vh;
479
}
480
.wrapper {
481
   transform: translateX(0) translateZ(0);
482
   transition: transform .2s;
483
   will-change: transform;
484
}
485
.wrapper_in_management{
486
transform: translateX(0) translateZ(0);
487
   transition: transform .2s;
488
   will-change: transform;
489
}
490
  /* Button deco */
491
[class^="nav-button"] {
492
   display: block;
493
   z-index: 1;
494
   height: 3rem; width: 3.5rem;
495
   background-color: transparent;
496
   background-image: linear-gradient(to right, #d38922, #d38922),
497
      linear-gradient(to right, #d38922, #d38922),
498
      linear-gradient(to right, #d38922, #d38922);
499
   background-position: center top, center, center bottom;
500
   background-repeat: no-repeat;
501
   background-size: 3.5rem .6rem;
502
   padding: 0;
503
   outline: 0;
504
   border: 0;
505
   cursor: pointer;
506
}
507
  /* here's goes the push left effect */
508
body:target .wrapper {
509
   transform: translateX(50vw);
510
}
511
body:target .wrapper_in_management {
512
   transform: translateX(50vw);
513
 }
514
.nav-button-close,
515
body:target .nav-button-open {
516
   display: none;
517
}
518
.nav-button-open,
519
body:target .nav-button-close {
520
   display: block;
521
  }
522
* {
523
   box-sizing: border-box;
524
}
525
html {
526
   font-size: 62.5%;
527
}
528
body {
529
   margin: 0;
530
   padding: 0;
531
   color: #fff;
532
   font-size: 1.3em;
533
   font-family: arial, sans-serif;
534
}
535
#navigation a {
536
   color: #fff;
537
}
538
.wrapper {
539
   background-color:#5f5f5f;
540
   color: #333;
541
   width:100%;
542
}
543
.wrapper_in_management{
544
   background-color:#5f5f5f;
545
   color: #333;
546
   width:100%;
547
}
548
.sidebar {
549
   padding-top: 1em;
550
   background: #333;
551
   color: #ddd;
552
}
553
nav a {
554
   display: block;
555
   padding: .7em;
556
   margin-bottom: 2px;
557
   text-decoration: none;
558
   background: rgba(255,255,255, 0.1);
559
}
560
aside nav a:hover{
561
   background-color:#d38922;
562
}
563
.vertical_menu {
564
   width:30%;
565
   height:300px;
566
   background-color:#6e6e6e;
567
   text-align: left;
568
}
569
.vertical_menu ul {
570
   margin: 0; 
571
   padding: 0;
572
   width:28;
573
   list-style-type: none;
574
}
575
.vertical_menu ul li a {
576
   text-decoration: none;
577
   color: #fff;
578
   padding: 10.5px 11px;
579
   background-color: #6e6e6e;
580
   display:block;
581
   font-size: 17px;
582
}
583
.vertical_menu ul li a:hover, .vertical_menu ul li .current {
584
   background-color: #ff7e43;
585
}
586
#header_mobile{
587
   width:100%;
588
}
589
#left_bouton{
590
   margin-left:0px;
591
   width:50%;
592
}
593
#right_title{
594
   width:50%;
595
   margin-left:60%;
596
   margin-top:0px;
597
}
598
.myButton {
599
   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
600
   -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
601
   box-shadow:inset 0px 1px 0px 0px #ffffff;
602
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
603
   background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
604
   background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
605
   background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
606
   background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
607
   background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
608
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
609
   background-color:#f9f9f9;
610
   -moz-border-radius:15px;
611
   -webkit-border-radius:15px;
612
   border-radius:15px;
613
   border:1px solid #dcdcdc;
614
   display:inline-block;
615
   cursor:pointer;
616
   color:#666666;
617
   font-family:Arial;
618
   font-size:13px;
619
   font-weight:bold;
620
   text-decoration:none;
621
   text-shadow:0px 1px 0px #ffffff;
622
   width:100%;
623
   height:100px;
624
   text-align:center;
625
   vertical-align:center;
626
   padding-top:10px;
627
}
628
.myButton:hover {
629
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
630
   background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
631
   background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
632
   background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
633
   background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
634
   background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
635
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
636
   background-color:#e9e9e9;
637
}
638
.myButton:active {
639
   position:relative;
640
   top:1px;
641
}
642
.section_title , .action_title{ 
643
   font-size:12px;
644
   color:#FF5500;
645
   font-weight:bold;
646
}
647
html,body {
648
  overflow-x: hidden;
649
}
650
#question{
651
   display:block;
652
   width:95%%;
653
}
654
.page_title{
655
   font-weight:bold;
656
   font-size:14px;
657
   color:#FF5500;
658
}
659
}
660
 /* end of mobile media query */
661
/*Dynamic web page*/
662
 
663
.note
664
{
665
	font-size : 11px;
666
}
667
span.background_orange
668
{
669
	background-color:orange;
670
}
671
.color_orange
672
{
673
	color: #ff5500;
674
}
675
.color_red
676
{
677
	color: #ff0000;
678
}
679
/* End dynamic web page*/