/* # ------------------ BEGIN LICENSE BLOCK ------------------ # # This file is part of PluXml : http://www.pluxml.org # # Package: theme.css # Copyright (c) 2017 PluXml # Authors Stephane F., Pedro "P3ter" CADETE. # Licensed under the GPL license. # See http://www.gnu.org/licenses/gpl.html # # ------------------- END LICENSE BLOCK ------------------- */ @font-face { font-family: 'open_sansregular'; src: url('../fonts/OpenSans-Regular-webfont.eot'); src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Regular-webfont.woff') format('woff'), url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'open_sansregular', sans-serif; font-size: 1.7em; line-height: 1.6em; color: #3A4145; background-color: #fff; } /* ---------- Header ---------- */ @media (min-width: 64rem) { .container { padding-left: 15rem; padding-right: 15rem; } } .header { background-color: #fff; border-bottom: 1px solid #ddd; padding: 1.3rem 0 1.3rem 0; height: 12rem; z-index: 2; display: flex; justify-content: center; align-items: center; } .header a { color: #222; } .header a:hover { text-decoration: none; } header img{ height: 82px; width: 104px; } #title{ display: flex; flex-direction: column; justify-content: center; } @media (max-width: 921px) { #title h2 { display: none; } } @media (max-width: 463px) { #title h1 { display: none; } } /* ----- Nav / Menu ----- */ .nav { text-align: right; padding-top: 1.7rem; position: absolute; right: 0; top: 0; max-height: 250px; } .nav>div{ min-width: 200px; } ul.menu { margin-right: 30px; } .menu>li.menu { padding: 5px 5px 2px 5px; } .menu>li ul { display: none; position: absolute; padding: 0; line-height: 2.8rem; z-index: 10; } .menu>li:hover ul { display: block; } .menu ul li { display: block; margin: 0; padding: 0 1rem; background-color: #fff; text-align: left; } .menu span::before { content: '\25bc'; } @media (max-width: 767px) { .nav { height: auto; /* max-height: 200px; */ overflow-y: auto; text-align: left; margin-top: 0; z-index: 10; } .nav>.container { padding: 0; } li.menu { padding: 5px 5px 2px 5px; background: #efefef; } li.menu:hover { border: none; } .responsive-menu label { background-color: transparent; color: #333; font-size: 3.5rem; margin: .75rem; text-align: right; } .responsive-menu label:before { content: '\2630'; } .menu>li ul { position: relative !important; } .menu>li ul li:hover { background-color: #fff; } .menu>li ul li:hover a { text-decoration: underline; } .responsive-menu ul li.active a, .responsive-menu ul li.active:hover { background-color: #fff; color: #000; } } li.active a, a.active { color: #000; } .static.group.active, .static.menu.active a { color: #000; white-space: nowrap; } .static.group.noactive, .static.menu.noactive a { color: #258fd6; white-space: nowrap; } /* ---------- Main ---------- */ .main { background-color: #fff; padding-top: 2rem; } .repertory { margin-top: 4rem; } /* ------- Pagination ------- */ .pagination { margin: 3rem 0 3rem 0; } .pagination a { background-color: #258fd6; border-radius: .3rem; color: #fff; padding: .9rem .7rem; transition-duration: .2s; } .pagination a:hover { background-color: #3a6c96; color: #fff; text-decoration: none; } .pagination span:first-letter, .pagination a:first-letter { text-transform: uppercase; } .p_first, .p_prev, .p_current, .p_next, .p_last { display: inline-block; } /* ------- Article ------- */ .article header { margin-top: 2rem; } .article header div { margin: 0; } .article header h2, .article header h2 a { color: #222; font-size: 3.2rem; line-height: 1.2em; letter-spacing: -1px; font-weight: bold; margin: 0; } .article header h2 a:hover { color: #111; text-decoration: none; } .article header small, .comment small { color: #9EABB3; } .article header span:before, .article header time:before, .article footer span:before { padding-left: 1.5rem; padding-right: .3rem; } .article .art-date { font-size: 1.5rem; color: #9EABB3; } .article .written-by:after { content: '|'; padding-left: 0; } .article .classified-in:after { content: '|'; padding-left: 0; } .article img.art_thumbnail { padding: 30px 15px 15px 0; float: left; } .page.mode-article .article footer { border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; } /* ------- Comments ------- */ #form { border-top: 130px solid transparent; margin: -130px 0 0; } .comment { background-image: url('../img/user.png'); background-repeat: no-repeat; margin-bottom: 2.5rem; padding-left: 6rem; border-top: 100px solid transparent; margin-top: -100px; } .comment blockquote { margin: 0; font-size: 1.3rem; } .type-admin { background-color: #F0F8FF; padding: .2rem .5rem; } .nbcom { background-color: #258fd6; border-radius: .3rem; color: #fff; padding: .4rem .6rem; } .nbcom:hover { background-color: #3a6c96; color: #fff; text-decoration: none; } .level-0 { margin-left: 0; } .level-1 { margin-left: 5rem; } .level-2 { margin-left: 10rem } .level-3 { margin-left: 15rem; } .level-4 { margin-left: 20rem; } .level-5, .level-max { margin-left: 25rem; } @media (max-width: 768px) { .comment { background-image: none; padding-left: 0; } .level-1 { margin-left: 1rem; } .level-2 { margin-left: 2rem; } .level-3 { margin-left: 3rem; } .level-4 { margin-left: 4rem; } .level-5, .level-max { margin-left: 5rem; } } #id_answer { margin-bottom: 1.5rem; padding: 1.5rem; border: 1px solid #eee; width: 100%; background: #fafafa; display: none; } .capcha-letter, .capcha-word { font-weight: bold; } .capcha-word { background-color: #ddd; border-radius: .3rem; letter-spacing: .5rem; padding: .9rem .7rem; transition-duration: .2s; } .capcha-word:hover { background-color: #666; color: #fff; transition-duration: .2s; } /* ------- Sidebar ------- */ .aside { padding: 0 2rem 0 2rem; } .aside h3 { font-size: 1.5rem; font-weight: bold; margin-top: 5rem; text-transform: uppercase; } .aside ul { margin: 0; } @media (max-width: 768px) { .aside { padding-left: 1.5rem; } } /* tags */ .aside ul.tag-list { list-style-type: none; padding: 0; } .aside ul.tag-list li { display: inline-block; } .aside ul.tag-list li a { padding: 0 0.5rem 0 0; } .aside ul.tag-list li a.active { font-weight: bold; background-color: #68838b; color: #fff; padding: 0 0.5rem 0 0.5rem; } /* https://www.w3schools.com/colors/colors_trends.asp (The 10 Hottest Fall Colors for 2016) */ .tag-size-1 a { font-size: 1.0rem; /* Riverside */ color: #4C6A92; } .tag-size-2 a { font-size: 1.2rem; /* Airy Blue */ color: #92B6D5; } .tag-size-3 a { font-size: 1.4rem; /* Sharkskin */ color: #838487; } .tag-size-4 a { font-size: 1.6rem; /* Bodacious */ color: #B76BA3; } .tag-size-5 a { color: #AF9483; /* Warm Taupe */ font-size: 1.8rem; } .tag-size-6 a { color: #AD5D5D; /* Dusty Cedar */ font-size: 2.0rem; } .tag-size-7 a { font-size: 2.2rem; /* Lush Meadow */ color: #006E51; } .tag-size-8 a { font-size: 2.4rem; /* Spicy Mustard */ color: #D8AE47; } .tag-size-9 a { font-size: 2.6rem; /* Potter's Clay */ color: #9E4624; } .tag-size-10 a { font-size: 2.8rem; /* Aurora Red */ color: #B93A32; } .tag-size-11 a { font-size: 3.0rem; /* Snorkel Blue */ color: #034F84; } /* ---------- Footer ---------- */ .footer { background: #fff; color: #666; padding: 6rem 0; text-align: center; font-size: 1.2rem; } .footer p { margin: 0; } #subtitle{ margin-top: 10px; }