Subversion Repositories oidinfo_new_design

Rev

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