Subversion Repositories oidinfo_new_design

Rev

Rev 4 | Go to most recent revision | View as "text/css" | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1.  
  2. /** Style for all pages **/
  3. #standards {
  4.     width: 100%;
  5.     margin-left: auto;
  6.     margin-right: auto;
  7.     /*background: #eee;*/
  8.     padding: auto;
  9.     display: block;
  10.     display: block;
  11.     height: auto;
  12. }
  13.  
  14. #what_is_an_OID, #table_faq, #table_search_in_basic_search, #management, #management_mobile, #reg_in_regexp, #oid_validate_mobile {
  15.     width: 100%;
  16.     margin-left: auto;
  17.     margin-right: auto;
  18.     /*background: #eee;*/
  19.     float: left;
  20.     padding: auto;
  21.     display: block;
  22.     height: auto;
  23. }
  24.  
  25. #allocated_in_index, #repository_in_index, #explanations_in_index {
  26.     width: 100%;
  27.     margin-left: auto;
  28.     margin-right: auto;
  29.     /*background: #eee;*/
  30.     float: left;
  31.     padding: auto;
  32.     display: none;
  33.     height: auto;
  34. }
  35.  
  36. #table_display_in_index, #extraction {
  37.     width: 100%;
  38.     margin-left: auto;
  39.     margin-right: auto;
  40.     /*background: #eee;*/
  41.     float: left;
  42.     /*padding: 0.5%;*/
  43.     display: block;
  44.     height: auto;
  45. }
  46.  
  47. #table_draw_in_index, #table_add_in_index, #warning_in_index, #number_oid_in_index, #table_answers_in_faq, #name-forms {
  48.     width: 100%;
  49.     margin-left: auto;
  50.     margin-right: auto;
  51.     margin-top: 2%;
  52.     /*background: #eee;*/
  53.     float: left;
  54.     /*padding: 0.5%;*/
  55.     display: block;
  56. }
  57.  
  58. #introduction {
  59.     width: 98%;
  60.     margin-left: auto;
  61.     margin-right: auto;
  62.     /*background: #eee;*/
  63.     float: left;
  64.     padding-left: 2%;
  65.     display: block;
  66. }
  67.  
  68. #manage_in_management {
  69.     width: 99%;
  70.     margin-left: auto;
  71.     margin-right: auto;
  72.     margin-top: 2%;
  73.     /*background: #eee;*/
  74.     float: left;
  75.     /*padding: 0.5%;*/
  76.     display: block;
  77. }
  78.  
  79. #errors, #errors_mobile {
  80.     width: 100%;
  81.     margin-left: auto;
  82.     margin-right: auto;
  83.     margin-top: 2%;
  84.     margin-bottom: 2%;
  85.     /*background: #eee;*/
  86.     float: left;
  87.     padding: auto;
  88.     display: block;
  89.     height: auto;
  90. }
  91.  
  92. #count_in_management, #country_in_management, #search_replace_in_management, #admin_in_management, #execute_in_management, #accounts_in_management,
  93. #display_example_in_management, #explanations_in_management, #registrant_chart_in_management {
  94.     width: 98%;
  95.     margin-left: auto;
  96.     margin-right: auto;
  97.     margin-top: 2%;
  98.     /*background: #eee;*/
  99.     float: left;
  100.     /*padding: 1%;*/
  101.     display: none;
  102. }
  103.  
  104. #main_actions_in_index {
  105.     width: 100%;
  106.     margin-left: auto;
  107.     margin-right: auto;
  108.     height: auto;
  109.     max-width: 750px;
  110.     min-width: 300px;
  111. }
  112.  
  113. .rounded {
  114.     -webkit-border-radius: 20px;
  115.     -moz-border-radius: 20px;
  116.     border-radius: 20px;
  117. }
  118.  
  119. #menu {
  120.     width: 98%;
  121.     margin-right: 2%;
  122.     margin-top: 2%;
  123. }
  124.  
  125.     #menu ul {
  126.         float: right;
  127.         padding: 0;
  128.         margin: 0;
  129.         list-style: none;
  130.         line-height: 35px;
  131.         text-align: left;
  132.     }
  133.  
  134.     #menu li {
  135.         margin: auto;
  136.         padding: 0;
  137.         background-color: black;
  138.         position: relative;
  139.     }
  140.  
  141.         #menu li a {
  142.             display: block;
  143.             background: #E28923 /*#6e6e6e*/;
  144.             color: #fff;
  145.             text-decoration: none;
  146.             width: 150px;
  147.             padding: 0px 15px 0px;
  148.             font-family: Arial, Helvetica, sans-serif;
  149.             font-size: 11px;
  150.             font-weight: bold;
  151.             line-height: 20px;
  152.         }
  153.  
  154.         #menu li img {
  155.             display: block;
  156.             background: #E28923 /*#6e6e6e*/;
  157.             width: 20px;
  158.             padding: 0px 15px 0px;
  159.         }
  160.  
  161.         #menu li a:hover {
  162.             background: #E23923;
  163.         }
  164.  
  165.     #menu ul li ul {
  166.         display: none;
  167.     }
  168.  
  169.     #menu ul li:hover ul {
  170.         display: block;
  171.     }
  172.  
  173.     #menu li:hover ul li {
  174.         float: none;
  175.     }
  176.  
  177.     #menu li ul {
  178.         position: absolute;
  179.     }
  180.  
  181. #header img {
  182.     display: inline;
  183.     float: left;
  184. }
  185.  
  186. #header_url_and_menu {
  187.     width: 100%;
  188. }
  189.  
  190. #header_menu_right {
  191.     float: inline;
  192.     margin-left: 32%;
  193.     position: absolute;
  194. }
  195.  
  196. #country-oid-general, #country-oid-title {
  197.     width: 100%;
  198.     margin-left: auto;
  199.     margin-right: auto;
  200.     margin-top: 2%;
  201.     /*background: #eee;*/
  202.     float: left;
  203.     /*padding: 0.5%;*/
  204.     display: block;
  205. }
  206.  
  207. #country-oid-check-list, #country-oid-template, #country-oid-RAS {
  208.     width: 100%;
  209.     margin-left: auto;
  210.     margin-right: auto;
  211.     margin-top: 2%;
  212.     /*background: #eee;*/
  213.     float: left;
  214.     /*padding: 0.5%;*/
  215.     display: none;
  216. }
  217. /** end style for all pages **/
  218.  
  219.     .question {
  220.         font-weight: bold;
  221.     }
  222.  
  223. /**Screen version**/
  224. @media (min-width: 768px) {
  225.     #header_url {
  226.         float: left;
  227.     }
  228.  
  229.     #header_mobile, #remote_button, #navigation {
  230.         display: none;
  231.     }
  232.  
  233.     #global_container {
  234.         display: block;
  235.     }
  236.  
  237.     #footer {
  238.         display: block;
  239.     }
  240.  
  241.     #main_actions_in_index {
  242.         display: block;
  243.     }
  244.  
  245.     #section_menu_in_management {
  246.         display: block;
  247.     }
  248.  
  249.     #manage_in_management {
  250.         display: block;
  251.     }
  252.  
  253.     #errors_mobile, #management_mobile {
  254.         display: none;
  255.     }
  256.  
  257.     #errors, #management {
  258.         display: block;
  259.     }
  260.  
  261.     #oid_validate_mobile {
  262.         display: none;
  263.     }
  264.  
  265.     #country-oid-title {
  266.         display: block;
  267.     }
  268.  
  269.     #country-oid-general {
  270.         display: block;
  271.     }
  272.  
  273.     body {
  274.         font-family: arial,sans-serif;
  275.     }
  276.     /***Page header***/
  277.     #global_container {
  278.         width: 800px;
  279.         max-width: calc( 100% - 20px );
  280.         height: auto;
  281.         margin: 0px auto 0px;
  282.         padding: 0px;
  283.         position: relative;
  284.     }
  285.  
  286.     #header {
  287.         width: 760px;
  288.         max-width: calc( 100% - 20px );
  289.         height: 110px;
  290.         background-color: #E9E9E9;
  291.         margin-top: 22px;
  292.         padding: 20px;
  293.         position: relative;
  294.         margin: 0px auto 0px;
  295.     }
  296.  
  297.         #header h1 {
  298.             position: relative;
  299.             font-weight: bold;
  300.             color: #fff;
  301.             font-size: 20px;
  302.             display: inline;
  303.             float: left;
  304.             margin: -10px 0px 0px 10px;
  305.         }
  306.  
  307.     #bg_menu {
  308.         width: 779px;
  309.         max-width: calc( 100% - 20px );
  310.         height: 41px;
  311.         background-color: #5f5f5f;
  312.         padding: 0px 21px 0px 0px;
  313.         margin-bottom: 14px;
  314.         position: relative;
  315.         z-index: 1200;
  316.     }
  317.  
  318.     #header_menu {
  319.         font-weight: bold;
  320.         font-family: Arial;
  321.     }
  322.  
  323.         #header_menu, #header_menu ul {
  324.             float: right;
  325.             padding: 0;
  326.             margin: 0;
  327.             list-style: none;
  328.             line-height: 35px;
  329.             text-align: left;
  330.         }
  331.  
  332.             html > body #header_menu li {
  333.                 border-right: 1px solid transparent;
  334.             }
  335.  
  336.             #header_menu li {
  337.                 float: left;
  338.                 border-right: 1px solid #fff;
  339.             }
  340.  
  341.             #header_menu a {
  342.                 display: block;
  343.                 background: #E28923;
  344.                 color: #fff;
  345.                 text-decoration: none;
  346.                 width: auto;
  347.                 padding: 0px 15px 0px;
  348.                 text-transform: uppercase;
  349.                 font-family: Arial, Helvetica, sans-serif;
  350.                 font-size: 14px;
  351.                 font-weight: bold;
  352.             }
  353.  
  354.             #header_menu img {
  355.                 display: block;
  356.                 background: #E28923 /*#6e6e6e*/;
  357.                 color: #fff;
  358.                 margin-left: 0px;
  359.             }
  360.  
  361.             #header_menu a:hover {
  362.                 background: #E23923;
  363.             }
  364.  
  365.             #header_menu img:hover {
  366.                 background: #E23923;
  367.             }
  368.     /*** Vertical menu ***/
  369.     .vertical_menu {
  370.         width: 190px;
  371.         margin-left: 73.5%;
  372.         height: 297px;
  373.         background-color: #E28923;
  374.         text-align: left;
  375.         border: 3px solid #E28923;
  376.     }
  377.  
  378.         .vertical_menu ul {
  379.             margin: 0;
  380.             padding: 0;
  381.             width: 100%;
  382.             list-style-type: none;
  383.         }
  384.  
  385.             .vertical_menu ul li a {
  386.                 text-decoration: none;
  387.                 color: #fff;
  388.                 padding: 10.5px 11px;
  389.                 background-color: #E28923;
  390.                 display: block;
  391.                 font-size: 17px;
  392.             }
  393.  
  394.                 .vertical_menu ul li a:hover, .vertical_menu ul li .current {
  395.                     background-color: #E23923;
  396.                 }
  397.     /*** banner ***/
  398.     #wrapper_carousel {
  399.         position: relative;
  400.         width: 60%;
  401.         height: 300px;
  402.         margin-bottom: 15px;
  403.         float: left;
  404.         margin-left: 7px;
  405.     }
  406.     /***************************/
  407.     a img {
  408.         border: none;
  409.     }
  410.  
  411.     #content h1 {
  412.         font-weight: bold;
  413.         font-size: 20px;
  414.     }
  415.  
  416.     #search {
  417.         position: absolute;
  418.         left: 700px;
  419.     }
  420.  
  421.     #google_translate {
  422.         display: inline;
  423.         float: right;
  424.     }
  425.  
  426.     #global_content {
  427.         width: 800px; /* 760 + 2*20 */
  428.         max-width: calc( 100% - 20px );
  429.         height: auto;
  430.         background-color: white;
  431.         padding: 20px;
  432.         position: relative;
  433.         margin: 0px auto 0px;
  434.         margin-top: 20px;
  435.     }
  436.  
  437.     #error400, #error403-404, #error500 {
  438.         width: 750px;
  439.         max-width: calc( 100% - 20px );
  440.         border: 3px solid #7f7f7f;
  441.         margin-left: auto;
  442.         margin-right: auto;
  443.         /*background: #eee;*/
  444.         float: center;
  445.         padding: 3px;
  446.         display: block;
  447.         height: auto;
  448.     }
  449.  
  450.     div.clear {
  451.         clear: both;
  452.     }
  453.  
  454.     .page_title {
  455.         font-weight: bold;
  456.         /*font-size: 18px;*/
  457.         font-size: 25px;
  458.         /*color: #FF5500;*/color: #E28923;
  459.     }
  460.  
  461.     .page_subtitle {
  462.         font-weight: bold;
  463.         font-size: 20px;
  464.         /*color: #FF5500;*/color: #E28923;
  465.     }
  466.  
  467.     .section_title {
  468.         font-size: 16px;
  469.         /*color: #FF5500;*/color: #E28923;
  470.         font-weight: bold;
  471.     }
  472.  
  473.     .action_title {
  474.         font-size: 16px;
  475.         color:black;
  476.     }
  477.  
  478.     #global_in_index {
  479.         width: 101%;
  480.     }
  481.     /*** FAQ ***/
  482.     .question, .answer {
  483.         /*
  484.         margin-left: 30px;
  485.         padding: 10px;
  486.         display: block;
  487.         width: 95%;
  488.      */
  489.     }
  490.  
  491.     .answer {
  492.         display: block;
  493.         width: auto;
  494.         height: auto;
  495.     }
  496.     /*** Management page menu ***/
  497.     #menu_manage {
  498.         font-weight: bold;
  499.         font-family: Arial;
  500.     }
  501.  
  502.         #menu_manage, #menu_manage ul {
  503.             padding: 0;
  504.             margin: 0;
  505.             list-style: none;
  506.             line-height: 35px;
  507.             text-align: left;
  508.         }
  509.  
  510.             html > body #menu_manage li {
  511.                 border-right: 1px solid transparent;
  512.             }
  513.  
  514.             #menu_manage li {
  515.                 float: left;
  516.                 border-right: 1px solid #fff;
  517.             }
  518.  
  519.             #menu_manage a {
  520.                 display: block;
  521.                 background: #E28923 /*#6e6e6e*/;
  522.                 color: #fff;
  523.                 text-decoration: none;
  524.                 width: auto;
  525.                 padding: 0px 8px 0px;
  526.                 text-transform: uppercase;
  527.                 font-family: Arial, Helvetica, sans-serif;
  528.                 font-size: 14px;
  529.                 font-weight: bold;
  530.             }
  531.  
  532.                 #menu_manage a:hover {
  533.                     background: #E23923;
  534.                 }
  535.  
  536.     #section_menu_in_management {
  537.         width: 100%;
  538.         max-width: calc( 100% - 20px );
  539.         height: 41px;
  540.         /*background-color: #5f5f5f;*/
  541.         padding: 0px 21px 0px 0px;
  542.         margin-top: 20px;
  543.         margin-bottom: 14px;
  544.         position: relative;
  545.         z-index: 1200;
  546.     }
  547. }
  548. /* end of Screen media query */
  549.  
  550. /* mobile styles */
  551. @media (max-width: 767px) {
  552.  
  553.     #header_url {
  554.         float: right;
  555.     }
  556.  
  557.     #mobile_version {
  558.         display: block;
  559.     }
  560.  
  561.     #global_container {
  562.         display: none;
  563.     }
  564.  
  565.     #footer {
  566.         display: none;
  567.     }
  568.  
  569.     #global_in_index {
  570.         display: none;
  571.     }
  572.  
  573.     #header_mobile {
  574.         background-color: #E9E9E9;
  575.     }
  576.  
  577.     #header_mobile {
  578.         /*Daniel: If it is "block", then the header will not be stretched on 540px width (Surface Duo) */
  579.         /*display: block;*/
  580.     }
  581.    
  582.     #remote_button {
  583.         display: block;
  584.     }
  585.    
  586.     #navigation {
  587.         display: block;
  588.     }
  589.  
  590.     #main_actions_in_index {
  591.         display: none;
  592.     }
  593.  
  594.     #section_menu_in_management {
  595.         display: none;
  596.     }
  597.  
  598.     #manage_in_management {
  599.         display: none;
  600.     }
  601.  
  602.     #errors_mobile, #management_mobile {
  603.         display: block;
  604.     }
  605.  
  606.     #errors, #management {
  607.         display: none;
  608.     }
  609.  
  610.     #oid_validate_mobile {
  611.         display: block;
  612.     }
  613.  
  614.     #country-oid-title {
  615.         display: none;
  616.     }
  617.  
  618.     #country-oid-general {
  619.         display: none;
  620.     }
  621.  
  622.     input[type=text] {
  623.         width: 50%;
  624.     }
  625.     /* wrapper styles */
  626.     .wrapper {
  627.         position: absolute;
  628.         min-height: 100vh;
  629.     }
  630.  
  631.     .wrapper_in_management {
  632.         position: absolute;
  633.         min-height: 150vh;
  634.     }
  635.  
  636.     .sidebar {
  637.         position: absolute;
  638.         top: 0;
  639.         width: 50vw;
  640.         min-height: 100vh;
  641.     }
  642.  
  643.     .wrapper {
  644.         transform: translateX(0) translateZ(0);
  645.         transition: transform .2s;
  646.         will-change: transform;
  647.     }
  648.  
  649.     .wrapper_in_management {
  650.         transform: translateX(0) translateZ(0);
  651.         transition: transform .2s;
  652.         will-change: transform;
  653.     }
  654.     /* Button deco */
  655.     [class^="nav-button"] {
  656.         display: block;
  657.         z-index: 1;
  658.         height: 3rem;
  659.         width: 3.5rem;
  660.         background-color: transparent;
  661.         background-image: linear-gradient(to right, #d38922, #d38922), linear-gradient(to right, #d38922, #d38922), linear-gradient(to right, #d38922, #d38922);
  662.         background-position: center top, center, center bottom;
  663.         background-repeat: no-repeat;
  664.         background-size: 3.5rem .6rem;
  665.         padding: 0;
  666.         outline: 0;
  667.         border: 0;
  668.         cursor: pointer;
  669.     }
  670.     /* here's goes the push left effect */
  671.     body:target .wrapper {
  672.         transform: translateX(50vw);
  673.     }
  674.  
  675.     body:target .wrapper_in_management {
  676.         transform: translateX(50vw);
  677.     }
  678.  
  679.     .nav-button-close,
  680.     body:target .nav-button-open {
  681.         display: none;
  682.     }
  683.  
  684.     .nav-button-open,
  685.     body:target .nav-button-close {
  686.         display: block;
  687.     }
  688.  
  689.     * {
  690.         box-sizing: border-box;
  691.     }
  692.  
  693.     html {
  694.         font-size: 62.5%;
  695.     }
  696.  
  697.     body {
  698.         margin: 0;
  699.         padding: 0;
  700.         color: #fff;
  701.         font-size: 1.3em;
  702.         font-family: arial, sans-serif;
  703.     }
  704.  
  705.     #navigation a {
  706.         color: #fff;
  707.         text-decoration: none !important;
  708.     }
  709.  
  710.     .wrapper {
  711.         background-color: white;
  712.         color: #333;
  713.         width: 100%;
  714.     }
  715.  
  716.     .wrapper_in_management {
  717.         background-color: white;
  718.         color: #333;
  719.         width: 100%;
  720.     }
  721.  
  722.     .sidebar {
  723.         padding-top: 1em;
  724.         background: #333;
  725.         color: #ddd;
  726.     }
  727.  
  728.     nav a {
  729.         display: block;
  730.         padding: .7em;
  731.         margin-bottom: 2px;
  732.         text-decoration: none;
  733.         background: rgba(255,255,255, 0.1);
  734.     }
  735.  
  736.     aside nav a:hover {
  737.         background-color: #d38922;
  738.     }
  739.  
  740.     .vertical_menu {
  741.         width: 30%;
  742.         height: 300px;
  743.         background-color: #E28923 /*#6e6e6e*/;
  744.         text-align: left;
  745.     }
  746.  
  747.         .vertical_menu ul {
  748.             margin: 0;
  749.             padding: 0;
  750.             width: 28;
  751.             list-style-type: none;
  752.         }
  753.  
  754.             .vertical_menu ul li a {
  755.                 text-decoration: none;
  756.                 color: #fff;
  757.                 padding: 10.5px 11px;
  758.                 background-color: #E28923 /*#6e6e6e*/;
  759.                 display: block;
  760.                 font-size: 17px;
  761.             }
  762.  
  763.                 .vertical_menu ul li a:hover, .vertical_menu ul li .current {
  764.                     background-color: #E23923;
  765.                 }
  766.  
  767.     #header_mobile {
  768.         width: 100%;
  769.     }
  770.  
  771.     #left_bouton {
  772.         margin-left: 0px;
  773.         width: 50%;
  774.     }
  775.  
  776.     #right_title {
  777.         width: 50%;
  778.         margin-left: 60%;
  779.         margin-top: 0px;
  780.     }
  781.  
  782.     .myButton {
  783.         -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
  784.         -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  785.         box-shadow: inset 0px 1px 0px 0px #ffffff;
  786.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  787.         background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  788.         background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  789.         background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  790.         background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  791.         background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  792.         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
  793.         background-color: #f9f9f9;
  794.         -moz-border-radius: 15px;
  795.         -webkit-border-radius: 15px;
  796.         border-radius: 15px;
  797.         border: 1px solid #dcdcdc;
  798.         display: inline-block;
  799.         cursor: pointer;
  800.         color: #666666;
  801.         font-family: Arial;
  802.         font-size: 13px;
  803.         font-weight: bold;
  804.         text-decoration: none;
  805.         text-shadow: 0px 1px 0px #ffffff;
  806.         width: 100%;
  807.         height: 100px;
  808.         text-align: center;
  809.         vertical-align: center;
  810.         padding-top: 10px;
  811.     }
  812.  
  813.         .myButton img {
  814.             height: 60px;
  815.             width: auto;
  816.         }
  817.  
  818.         .myButton:hover {
  819.             background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  820.             background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  821.             background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  822.             background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  823.             background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  824.             background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  825.             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
  826.             background-color: #e9e9e9;
  827.         }
  828.  
  829.         .myButton:active {
  830.             position: relative;
  831.             top: 1px;
  832.         }
  833.  
  834.     .section_title {
  835.         font-size: 12px;
  836.         /*color: #FF5500;*/color: #E28923;
  837.         font-weight: bold;
  838.     }
  839.  
  840.     .action_title {
  841.         font-size: 12px;
  842.         color: black;
  843.     }
  844.  
  845.     html, body {
  846.         overflow-x: hidden;
  847.     }
  848.  
  849.     #question {
  850.         display: block;
  851.         width: 95%%;
  852.     }
  853.  
  854.     .page_title {
  855.         font-weight: bold;
  856.         font-size: 14px;
  857.         /*color: #FF5500;*/color: #E28923;
  858.     }
  859.  
  860.     .page_subtitle {
  861.         font-weight: bold;
  862.         font-size: 12px;
  863.         /*color: #FF5500;*/color: #E28923;
  864.     }
  865. }
  866. /* end of mobile media query */
  867. /*Dynamic web page*/
  868.  
  869. .note {
  870.     font-size: 11px;
  871. }
  872.  
  873. span.background_orange {
  874.     background-color: orange;
  875. }
  876.  
  877. .color_orange {
  878.     /*color: #FF5500;*/color: #E28923;
  879. }
  880.  
  881. .color_red {
  882.     color: #ff0000;
  883. }
  884. /* End dynamic web page*/
  885.  
  886. #content_replace_in_search_replace {
  887.     width: 760px;
  888.     max-width: calc( 100% - 20px );
  889.     height: auto;
  890.     /*background-color: #5f5f5f;*/
  891.     padding: 20px;
  892.     position: relative;
  893.     margin: 0px auto 0px;
  894.     margin-top: 20px;
  895. }
  896.  
  897. #content_code_in_country_code {
  898.     width: 930px;
  899.     max-width: calc( 100% - 20px );
  900.     height: auto;
  901.     background-color: #5f5f5f;
  902.     padding: 20px;
  903.     position: relative;
  904.     margin: 0px auto 0px;
  905.     margin-top: 20px;
  906. }
  907.  
  908. #country-code {
  909.     width: 920px;
  910.     max-width: calc( 100% - 20px );
  911.     margin-left: auto;
  912.     margin-right: auto;
  913.     background: #eee;
  914.     padding: 3px;
  915.     display: block;
  916.     height: auto;
  917. }
  918.  
  919. #replace {
  920.     width: 98%;
  921.     margin-left: auto;
  922.     margin-right: auto;
  923.     /*background: #eee;*/
  924.     /*padding: 1%;*/
  925.     display: block;
  926.     height: auto;
  927. }
  928.  
  929. #advanced_search {
  930.     width: 98%;
  931.     margin-left: auto;
  932.     margin-right: auto;
  933.     /*background: #eee;*/
  934.     float: left;
  935.     /*padding: 1.2%;*/
  936.     display: block;
  937.     height: auto;
  938. }
  939.  
  940. /* Taken from the old design */
  941.  
  942. a:link {
  943.         text-decoration:underline;
  944.         /*font-family:Helvetica Neue Light 45;*/
  945.         /*color:#000000;*/
  946.         color:#803000;
  947. }
  948. a:visited {
  949.         text-decoration:underline;
  950.         /*color:#000000;*/
  951.         color:#803000;
  952. }
  953. a:hover {
  954.         text-decoration:underline;
  955.         background-color:#FFCC00;
  956. }
  957. a:active :not(.nav-button-open) :not(.nav-button-close) {
  958.         text-decoration:underline;
  959.         background-color:#FFCC00;
  960. }
  961.  
  962. body {
  963.     font-family: "Helvetica Neue Light 45",sans-serif;
  964.     color: black;
  965.     background-color: white;
  966. }
  967.  
  968. /* Misc additions by Daniel */
  969.  
  970. a img:hover {
  971.     /* TODO: when you hover over an image, you still can see yellow below the image?! */
  972.     /* But the image has no background anymore (can be seen on the transparent OCaml logo */
  973.     text-decoration: none !important;
  974.     background-color: none !important;
  975. }
  976.  
  977. .withborder {
  978.     padding: 10px;
  979.     border-style: solid;
  980.     border-width: 1px;
  981.     border-color: orange;
  982. }
  983.  
  984. .myButton {
  985.     text-decoration: none !important;
  986.     color: #444444 !important;
  987. }
  988.  
  989. #disclaimer_wrapper {
  990.     width: 100%;
  991.     text-align: center;
  992. }
  993.  
  994. #disclaimer {
  995.     /*padding-left: 10px;
  996.     padding-right: 10px;
  997.     width: 800px;
  998.     max-width: calc( 100% - 20px );*/
  999.     text-align: left;
  1000.     /*margin-left: auto;
  1001.     margin-right: auto;*/
  1002. }
  1003.  
  1004. #searchbox_mobile {
  1005.     width: 100%;
  1006. }
  1007.