body,
input,
select,
textarea {
font: 13px/1.231 Roboto, sans-serif
}
embed,
iframe,
img,
object,
video {
max-width: 100%
}
.accessibility,
.main_container .nav ul,
.post_info_container .post_info {
list-style: none
}
.header_title a,
.menu_title,
.nav ul li a {
-webkit-text-decoration: var(--text_deco)
}
.change_page a:hover,
.header_title a:hover,
.mainsoft:hover,
.nav ul li a:hover,
.post_title:hover {
-webkit-text-decoration: var(--no_text_deco);
text-decoration: var(--no_text_deco)
}
.main_container a:hover,
.nav ul li a:hover {
text-decoration: var(--no_text_deco)
}
:root {
--main_background: #f9f9f9;
--header_background: #fff;
--header_line: #e7e7e7;
--header_color: #333;
--search_border: #bfbfbf;
--search_input_background: #fff;
--nav_background: #ececec;
--nav_border: #bfbfbf;
--nav_color: #464646;
--nav_hover: #dbdbdb;
--menu_title_background: #126ba7;
--menu_title_color: #fff;
--text_deco: none;
--no_text_deco: underline;
--post_item_title: #126ba7;
--post_item_date: #686868;
--main_container_background: #fff;
--footer_background: #fff;
--mainsoft: #0162a0;
--anchor_links: #0c5f87
}
.contrast {
--main_background: #000;
--header_background: #ff0;
--header_line: #000;
--header_color: #000;
--search_border: #000;
--search_input_background: transparent;
--nav_background: #ff0;
--nav_border: #000;
--nav_color: #000;
--nav_hover: #e1de00;
--menu_title_background: #3a3a3a;
--menu_title_color: #ff0;
--text_deco: underline;
--no_text_deco: none;
--post_item_title: #3a3a3a;
--post_item_date: #000;
--main_container_background: #000;
--footer_background: #ff0;
--mainsoft: #333;
--anchor_links: #333
}
.grayscale {
--main_background: #ffffff;
--header_background: #f2f2f2;
--header_line: #d1d1d1;
--header_color: #1a1a1a;
--search_border: #a6a6a6;
--search_input_background: #fff;
--nav_background: #e6e6e6;
--nav_border: #b3b3b3;
--nav_color: #1a1a1a;
--nav_hover: #cccccc;
--menu_title_background: #4d4d4d;
--menu_title_color: #ffffff;
--text_deco: underline;
--no_text_deco: none;
--post_item_title: #333333;
--post_item_date: #666666;
--footer_background: #f2f2f2;
--mainsoft: #4d4d4d;
--anchor_links: #000000;
}
.normal_font {
font-size: 16px
}
.medium_font {
font-size: 18px
}
.big_font {
font-size: 20px
}
*,
::after,
::before {
box-sizing: border-box;
margin: 0;
padding: 0
}
body {
color: #333;
background: var(--main_background);
overflow-x: hidden
}
a:focus,
input:focus {
outline: #ff0000 dashed 2px
}
code,
kbd,
pre,
samp {
font-family: Roboto, sans-serif
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
opacity: 1;
border-radius: 0
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee
}
img {
height: auto;
vertical-align: middle
}
.header {
width: 100%;
background: var(--header_background);
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}
.header_top {
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
display: flex;
align-items: center;
justify-content: space-between;
height: 100px
}
.header_line {
border: none;
margin: 0;
border-top: 1px solid var(--header_line)
}
.header_title a {
display: block;
width: 420px;
font-size: 22px;
text-decoration: var(--text_deco);
color: var(--header_color)
}
.bip_logo {
display: block;
width: 54px;
height: 65px
}
.page_logo {
height: 100%
}
.page_logo img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.accessability_container {
display: flex;
align-items: center
}
.accessibility {
display: flex;
align-items: center;
margin-right: 10px
}
.contrast_btn,
.declaration_btn,
.font_btn {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: #e8e8e8;
font-size: 1.1em;
text-decoration: none;
cursor: pointer;
color: #333;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.accessibility .declaration_btn {
width: auto;
min-height: 32px;
height: auto;
font-size: 18px;
padding: 5px 5px 5px 0;
color: #333;
white-space: nowrap
}
.declaration_icon {
margin: 0 5px
}
.accessibility .contrast_btn {
background: #323232;
color: #ff0
}
.accessibility li:not(:first-child) {
margin-left: 10px
}
.search_items {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative
}
.search_input {
width: 100%;
max-width: 250px;
height: 35px;
padding: 0 30px 0 10px;
border: 1px solid var(--search_border);
border-radius: 8px;
background: var(--search_input_background)
}
.search_title {
font-size: 1.6em;
padding: 10px 25px;
margin-top: 20px
}
.logo,
.main_container {
margin: 0 auto;
display: flex;
max-width: 1200px
}
.search_btn {
position: absolute;
right: 0;
height: 100%;
width: 32px;
border: none;
background: 0 0;
font-size: 1.2em;
color: var(--search_border);
cursor: pointer
}
.searchform {
display: flex;
flex-direction: column;
}
.searchform_label {
font-size: 1em;
padding-bottom: 10px;
font-weight: bold;
display: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
color: #000;
}
.nav,
.nav ul li {
background: var(--nav_background)
}
.logo {
justify-content: space-between;
align-items: center;
height: 120px;
padding: 0 50px;
width: 100%
}
.main,
.nav {
height: 100%
}
.main_container {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background: var(--main_container_background);
margin: 50px auto;
width: 100%;
padding: 20px;
}
.nav ul li {
width: 100%;
text-align: center
}
.menu_title,
.nav ul li a {
display: block;
width: 100%;
text-decoration: var(--text_deco);
border-bottom: 1px solid var(--nav_border);
color: var(--nav_color);
padding: 10px
}
.change_page,
.footer_copyright,
.post_item {
display: flex;
width: 100%
}
.nav ul li a:hover {
background: var(--nav_hover)
}
.nav {
width: 250px;
margin-right: 25px;
display: flex;
flex-direction: column;
gap: 20px 0px;
background: transparent;
}
.menu_title {
border-top-right-radius: 8px;
border-top-left-radius: 8px;
background: var(--menu_title_background) !important;
color: var(--menu_title_color) !important;
border: none !important;
font-size: 1.2em
}
.article_header_title,
.articles_header {
font-size: 1.6em;
font-weight: 400;
border-bottom: 2px solid var(--header_line)
}
.main {
width: 925px;
background: var(--header_background)
}
.main_container a {
text-decoration: var(--text_deco);
color: var(--anchor_links)
}
.article_post_content {
padding: 25px;
line-height: 2;
text-align: justify
}
.article_date,
.articles_header {
padding: 15px 25px
}
.article_post_content ol,
.article_post_content ul {
margin-left: 20px
}
.article_header_title {
padding: 15px 25px;
color: var(--post_item_title)
}
.articles_header {
color: var(--articles_header)
}
.change_page a,
.post_title {
color: var(--post_item_title);
-webkit-text-decoration: var(--text_deco);
text-decoration: var(--text_deco)
}
.post_item {
height: auto;
padding: 10px 25px;
margin-top: 20px;
border-bottom: 2px solid var(--header_line)
}
.post_title {
font-size: 1em;
margin-bottom: 10px
}
.post_date {
margin: 15px 0;
color: var(--post_item_date)
}
.post_excerpt {
color: #323232;
overflow: hidden;
margin: 10px 0
}
.post_info_container {
background: var(--menu_title_background) !important;
color: var(--menu_title_color);
padding: 10px
}
.post_info_container .post_info li {
margin: 8px 0 8px 10px
}
.change_page {
height: 50px;
align-items: center;
justify-content: center;
margin: 20px 0
}
.change_page a {
width: 195px;
height: 42px;
display: flex;
text-align: center;
margin: 4px;
align-items: center;
justify-content: center
}
.footer {
width: 100%;
max-width: 1200px;
margin: 0 auto
}
.footer_container {
height: 100px;
background: var(--footer_background);
padding: 0 50px;
margin-bottom: 60px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.footer_copyright {
height: 100%;
align-items: center;
justify-content: space-between
}
.mainsoft {
color: var(--mainsoft) !important;
-webkit-text-decoration: var(--text_deco);
text-decoration: var(--text_deco)
}
@media (max-width:1200px) {
.header_top {
padding: 0 10px
}
.footer_container {
margin: 0
}
.nav {
width: 300px;
margin: 0 25px
}
.main {
max-width: 925px;
width: 100%;
margin: 0;
padding: 25px
}
.post_item {
padding: 5px
}
}
@media (max-width:950px) {
.declaration_btn span {
display: none
}
.accessibility .declaration_btn {
padding: 0;
width: 32px
}
.main_container {
flex-direction: column;
align-items: center
}
.nav {
width: 100%;
padding: 20px;
margin: 0
}
.header_title a {
font-size: 16px;
max-width: 300px;
width: 100%
}
.footer_container {
height: 150px;
margin: 0
}
.footer_copyright {
flex-direction: column;
justify-content: center;
text-align: center
}
.footer_copyright p:first-child {
margin-bottom: 10px
}
}
@media (max-width:768px) {
.header_top {
height: 175px;
flex-direction: column;
justify-content: center
}
.header_title a {
max-width: none;
text-align: center
}
.logo {
padding: 0 10px
}
.accessability_container {
flex-direction: column;
margin-top: 10px
}
.accessibility,
.change_page,
.change_page a {
margin: 0
}
.search {
margin-top: 8px
}
.main {
padding: 10px
}
.search_title {
font-size: 1.2em
}
}