@charset "utf-8";
html {
/**--color01:#996633; --color02:#bf8040; --color03:#734d26; --color035:#734d2680; --color036:#734d2690; --tausta:url(/cestaribeleina/images/marrasb.jpg); --teema:'marraskuu';**/ /*markkeri1*/
--color01:#b30000; --color02:#cc0000; --color03:#800000; --color035:#80000080; --color036:#80000090; --tausta:url(/cestaribeleina/images/joulu.jpg); --teema:'Joulukuu';
/**--color01:#666666; --color02:#808080; --color03:#4d4d4d; --color035:#4d4d4d80; --color036:#4d4d4d90; --tausta:url(/cestaribeleina/images/joulu.jpg); --teema:'Tammikuu';**/
/**--color01:#ac3973; --color02:#bf4080; --color03:#862d59; --color035:#862d5980; --color036:#862d5990; --tausta:url(/cestaribeleina/images/kukat1.jpg); --teema:'kevät';**/
--color04: #ffffff;
--color05: #FFFFFF;
--color06: #f5f5f5;
--color07: #EEEEEE;
--color08: #e5e5e5;
--color09: #dddddd;
--color10: #CCCCCC;
--color11: #999999;
--color12: #666666;
--color125: #66666680;
--color13: #333333;
--color14: #222222;
--color15: #111111;
--color16: #000000;
--color17: #d31141;
--color18: #FF6600;
--color19: #A9B8C2;
--color20: #5D8FBD;
--wrapcolor: #f5f5f580;
color-scheme: light;
--otsikkofontti1: Fleur De Leah;
--otsikkofontti2: Great Vibes;
--perusfontti: Oldenburg, serif;
--pattern1:url(/cestaribeleina/images/pattern9c.png);
}
/*FONTIT*/
@font-face { font-family: 'Cesihh';
src: url(/cestaribeleina/Cesihh-Regular.ttf); }
@font-face { font-family: 'Aisno';
src: url(/cestaribeleina/Aisno-Regular.ttf); }
.cesihh { font-size:1.6em; font-family:Cesihh; cursor:help; }
.aisno { font-size:1.4em; font-family:Aisno; cursor:help; }
/**Tredilisää**/
#wrap { background-color:var(--wrapcolor); padding-bottom:5px; min-height:300px; }
#wrap .navbar { position:absolute; left:0; top:57px; width:98%; opacity:0.8; margin-left:0; margin-right:0; padding-left:2%; padding-right:0; }
.navbar-container { max-width:100% !important; }
.navbar .responsive-search a { display:none; }
/*sivunjakodivit*/
.vasen60 { width:66.6%; float:left; padding:1%; text-align:justify; box-sizing: border-box; }
.oikea60 { width:66.6%; float:left; padding:1%; text-align:justify; box-sizing: border-box; }
.oikea30 { width:33.3%; float:right; padding:1%; text-align:justify; box-sizing: border-box; }
.vasen30 { width:33.3%; float:left; padding:1%; text-align:justify; box-sizing: border-box; }
.vasen50 { width:50%; float:left; padding:1%; text-align:justify; box-sizing: border-box; }
.oikea50 { width:50%; float:right; padding:1%; text-align:justify; box-sizing: border-box; }
.keski { width:100%; padding:1%; text-align:justify; box-sizing: border-box; }
.reuna { border:3px dotted var(--color10); border-radius:5px; }
.pad2 { padding:15px; }
@media (max-width: 900px) { .vasen60, .vasen50, .vasen30, .oikea60, .oikea50, .oikea30 { width:100%; } }
.keski:hover, .vasen30:hover, .vasen50:hover, .vasen60:hover, .oikea30:hover, .oikea50:hover, .oikea60:hover { }
.keski h2, .oikea60 h2, .vasen60 h2, .oikea50 h2, .vasen50 h2, .oikea30 h2, .vasen30 h2 { font-size:40px !important; }
.keski h3, .oikea60 h3, .vasen60 h3, .oikea50 h2, .vasen50 h2, .oikea30 h2, .vasen30 h2 { font-size:30px !important; }
.keski h4, .oikea60 h4, .vasen60 h4, .oikea50 h2, .vasen50 h2, .oikea30 h2, .vasen30 h2 { font-size:25px !important; }
/*tietosivusäätöjä*/
.valikkopalkki { width:100%; text-align:center; padding:0 0 10px 0; box-sizing:border-box; }
.valikkopalkki a { font-family:var(--perusfontti); font-size:18px !important; text-decoration:none !important; cursor:pointer; min-width:300px; padding:5px; margin:5px; box-sizing:border-box; color:var(--color04); background-color:var(--color01); border-radius:5px; }
.valikkopalkki a:hover { color:var(--color04); background-color:var(--color02); }
#ylosp { position:fixed; right:20px; bottom:20px; font-size:x-large; font-family:var(--perusfontti); }
#ylosp a { padding:0 5px 0 5px; color:var(--color04); text-decoration:none; text-shadow:0 0 5px var(--color15); }
#ylosp a:hover { transition:0.1s; text-shadow:0 0 5px var(--color02); }
/*paivi*/
#paivi a::before { content:'\27BD\0020'; }
#paivi a { font-size:0.8em; }
#paivi { text-align:center; }
#paivi span { width:100%; text-align:justify; }
.justi { text-align:justify; }
.righty { text-align:right; }
/**dropdown**/
#pudotusvalikko { position:relative; }
#pudotusvalikko a:hover { cursor:pointer; }
.pv-sisa ul { z-index:1; background:var(--color04); font-size:16px; width:250px; list-style-type: none; overflow: auto; position:absolute; }
.pv-sisa ul a { font-family:var(--perusfontti) !important; color:var(--color15) !important; text-shadow:none; margin:0; padding:0 0 0 10px; }
.pv-sisa ul a:hover { color:var(--color02) !important; text-shadow:none; }
#pudotusvalikko input[type=checkbox]{display:none;}
.pv-sisa #alkul::before { content:'\278A\0020'; } /*➊*/
.pv-sisa #pelil::before { content:'\2619\0020'; } /*☙*/
.pv-sisa #maail::before { content:'\2691\0020'; } /*⚑ black flag*/
.pv-sisa #kaupl::before { content:'\265C\0020'; } /*♜*/
.pv-sisa #kansl::before { content:'\2692\0020'; } /*⚒*/
.pv-sisa #jumal::before { content:'\2696\0020'; } /*⚖*/
.pv-sisa #lisal::before { content:'\26E8\0020'; } /*⛨*/
.pv-sisa #ohjel::before { content:'\2762\0020'; } /*❢ heavy excl ornament*/
.pv-sisa #liitl::before { content:'\27BD\0020'; } /*➽*/
.pv-sisa #yhtel::before { content:'\270E\0020'; } /*✎*/
@media screen
and (min-device-width: 951px) { .pv-sisa ul { visibility:hidden; margin-top:-15px; line-height:2.2em; border:1px solid var(--color08); } #pudotusvalikko:hover .pv-sisa ul { visibility:visible; z-index:99; } }
@media screen
and (max-device-width: 950px) { .pv-sisa ul { height:0; } #pudotusvalikko input[type=checkbox]:checked + .pv-sisa ul { height:auto; } }
/*dropdown piilotuksia ja säätöjä*/
.dropdown li { font-size:0.8em !important; }
.dropdown-extended .header, .dropdown-extended .footer { font-size:0.8em !important; }
.nav-main li { padding-right:2% !important; }
/*Help-piilotus*/
a[rel~="help"] { display:none; }
/*Alemman valikkopalkin foorumikuvake*/
a[data-navbar-reference~="index"] span::Before { content:'\26CA\0020'; }
/*subforum tekstin säätö*/
#subi { display:none; }
/** Tredilisää**/
html { background-color:var(--color03) !important; }
body {
background-image:var(--tausta);
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position:top left;
font-size:12px;
font-family:var(--perusfontti) !important;
}
/*Announcement*/
#phpbb_announcement_3 { background-color:transparent !important; box-sizing: border-box; }
/*allekirjoitus*/
.signature { padding-top:30px; margin-top:50px; color:var(--color03); }
.signature a { text-decoration:none; color:var(--color01) !important; }
/*ylösalas*/
.scroll-page { background-color:var(--color03) !important; border-radius:15px !important; opacity:0.4 !important; }
.scroll-page:hover { opacity:0.7 !important; }
/*linkinvaihto*/
.livdiv { position:relative; width:100%; text-align:center; margin:10px 0 10px 0; }
.livdiv img { width:88px; height:31px; }
.livdiv a { border:1px solid var(--color02); padding:1px !important; margin:2px; }
.livdiv a:hover { border-color:var(--color04); }
.livdiv2 { position:relative; width:100%; text-align:right; }
.livdiv2 a { border:none; }
.livdiv2 a::before { content:'\27BD'; }
/*BBCodet*/
.hidebox { border-color:var(--color01) !important; }
.hidebox_title { border-color:var(--color01) !important; font-family:var(--perusfontti) !important; }
.hidebox_visible, .hidebox_hidden { background-color:var(--color01) !important; color:var(--color04) !important; font-family:var(--perusfontti) !important; }
.mention { color:var(--color02) !important; }
.minispoileri { background-color:var(--color03); color:var(--color03); transition:0.5s; cursor:pointer; }
.minispoileri:hover { background-color:transparent; transition:0.2s; }
.hyp::before { content:'\27BA'; }
.otsi1 { width:100%; text-align:center; font-family:var(--otsikkofontti1); font-size:40px !important; font-weight:bold; padding:20px 0 20px 0; line-height:100%; }
.otsi2 { width:100%; text-align:center; font-family:Great Vibes; font-size:30px !important; padding:20px 0 15px 0; line-height:100%; }
.otsi3 { font-size:1.2em; font-weight:bold; padding:20px 0 0 0; }
.numero { font-family:var(--otsikkofontti1); font-size:2em; font-weight:bold; }
/*korostusväri*/
.korostus { background-color:var(--color01); color:var(--color04); }
/*spoileri*/
.spoilwrapper { margin:1em 0; font-weight:normal; padding:4px 10px; border:1px solid var(--color10); }
.spoiltitle { margin:0; padding:0; width:100%;}
.spoilbtn { margin:2px 5px; text-transform:uppercase; font-size:11px; font-weight:bold; display:block; cursor:pointer; color:var(--color03); }
.spoilcontent { display:none; padding:5px; border-top:1px solid var(--color10); }
.spoilbtn:hover { color:var(--color02) !important; }
.spoileri { border:none !important; background-color:var(--color04); border-radius:5px; color:var(--color14); }
.spoileri .spoilbtn { text-transform:none; font-size:15px; }
.spoileri .spoilcontent { border:none; }
/*hidebox säädöt*/
.hidebox_visible a { color:var(--color04); border:none; }
.hidebox_visible a:visited { color:var(--color04); }
.hidebox_visible a:visited:hover { color:var(--color03); }
/*työkalupalkin kuvakepakotusta*/
.abbc3_buttons_row { background-color:transparent !important; }
/*perusfonttipakotusta*/
.button, fieldset, .content, input, p.author, a.topictitle, textarea { font-family:var(--perusfontti) !important; }
/*h1-h4 otsikoinnit*/
h1 { font-family:var(--otsikkofontti1); }
h2, h3, h4 { font-family:var(--otsikkofontti2) !important; text-transform:none; }
h3 { font-size:25px; font-weight:normal; }
.postbody h3 a { font-family:var(--perusfontti); }
.postbody .author { border-bottom:1px solid var(--color10); margin-bottom:20px; }
/*hr viivat*/
hr { color:transparent; border:0; border-bottom:3px dotted var(--color10); width:80%; margin:10px 0 10px 10%; box-sizing:border-box; }
.hrala { border-bottom:1px solid var(--color10) !important; margin: 0 0 10px 0 !important; width:100% !important; box-sizing:border-box !important; }
.pages-content hr { color:transparent; border:0; border-bottom:3px dotted var(--color10); width:80%; margin:20px 0 20px 10%; box-sizing:border-box; }
/*etusivun yms. otsikko*/
.pages-title { width:100%; text-align:center; font-size:45px !important; font-family:var(--otsikkofontti1) !important; margin:0 !important; font-weight:bold !important; padding:20px 0 20px 0 !important; line-height:100%; }
/*hover väriestot*/
.row:hover, .stat-block p:hover { background-color:var(--color06) !important; }
li.row { border-color:transparent; }
li.row:hover { border-left:none !important; }
/*fooruminäkymän otsikoista ja alaotsikoista*/
.list-inner .forumtitle { padding:10px 0 0 0; display:inline-block; width:100%; height:100%; }
.list-inner .forumtitle:hover, .list-inner .subforum:hover { text-decoration:none; cursor:pointer; color:var(--color02); }
.list-inner .forumtitle, .list-inner .subforum { color:var(--color03); }
.list-inner .subforum { padding:5px; }
.topiclist .list-inner { }
.subivali::before { content:'\0020\2022\0020'; }
.alaosio { width:100%; text-align:right; }
/*fooruminkuvausspoilerit*/
.topiclist .spoileri { padding:0 0 5px 0; background-color:transparent; font-size:1.0em; text-align:justify; }
.topiclist .spoileri .spoilbtn { font-size:1.1em; font-weight:normal; color:var(--color13); }
.topiclist .spoilwrapper { margin:0 0 5px 0; }
.forums li { padding:0 !important; }
.forums li a { font-family:var(--perusfontti); font-weight:normal; }
.forumtitle { font-size:18px !important; }
.topiclist .header .list-inner a { padding:0; display:inline-block; width:100%; height:100%; font-size:30px; }
.collapse-btn { }
.page-footer .navbar { background-color:var(--color036) !important; margin-bottom:1px; }
.page-footer .navbar a { color:var(--color04) !important; }
#page-header .navbar, .topiclist .header, .stat-block h3, .footerbar { text-shadow:0 0 3px black; }
#page-header .navbar, .footerbar { background-color:var(--color036) !important; }
.topiclist .header, .stat-block h3 { background-image:var(--pattern1); background-repeat:repeat;
background-blend-mode:lightent !important; background-color:var(--color03) !important; background-size:80px; }
/*Ylempi valikkopalkki*/
#page-header .navbar { background-color:var(--color01); font-size:18px; }
#page-header .navbar a, #page-header .navbar .dropdown-trigger { color:var(--color04); font-family:var(--otsikkofontti2); }
#page-header .navbar a:hover, #page-header .navbar .dropdown-trigger:hover { color:var(--color04); font-family:var(--otsikkofontti2); text-shadow:none; }
#page-header .dropdown-container a { color:var(--color16); font-family:var(--perusfontti); }
#page-header .dropdown-container a:hover { color:var(--color02); font-family:var(--perusfontti); }
#page-header .dropdown-contents { text-shadow:none; }
/*Alempi valikkopalkki*/
#wrap .navbar { font-size:12px; }
#wrap .navbar .mark-read a { margin-right:10px; font-size:10px; }
#wrap { border-radius:10px !important; padding:10px !important; box-shadow: 1px 1px 2px var(--color11); }
@media (max-width: 1060px) {#wrap { border-radius:0px !important; padding:2px !important; box-shadow:0; }}
/*kirjanmerkkinappi*/
.alempivalikko { margin:0 10px 0 10px; }
.kirjanmerkit::before { content:'\2605'; font-size:15px; font-weight:bold; }
.kirjanmerkit::after { content:'\0020Kirjanmerkit'; font-size:10px; }
@media (max-width: 700px) { .kirjanmerkit::after { content:''; } }
/*foorumin otsikoita yms.*/
.topiclist .header, .stat-block h3 { font-size:20px; font-family:var(--otsikkofontti2); text-transform:none; }
.topiclist .header a, .topiclist .header dd, .topiclist .header .list-inner { font-family:var(--otsikkofontti2); text-transform:none; }
.stat-block h3 a:hover, .topiclist .header a:hover { text-decoration:none; }
.forum-title, .memberlist-title, .ucp-title, .searchresults-title, .solo, .topic-title, .posting-title, .group-title { width:100%; text-align:center; background-color:var(--color06); font-size:30px; margin-top:0; }
.forum-title a, .memberlist-title, .ucp-title, .searchresults-title, .solo, .topic-title, .posting-title, .group-title { font-family:var(--otsikkofontti2); color:var(--color15); padding:6px 0 6px 0; }
.forum-title a:hover, .topic-title a:hover, .posting-title a:hover { text-decoration:none; color:var(--color16); }
.post { padding:30px !important; }
.postbody { text-align:justify; }
.postprofile dt:first-child a { font-size:30px; font-family:var(--otsikkofontti1); }
.postprofile dt:first-child a:hover { text-decoration:none; }
.group-description { width:100%; text-align:center; padding:5px 0 5px 0; background-color:var(--color06); margin-top:-5px; }
/*alaotsikko*/
.alaotsikko { width:100%; text-align:center; background-color:var(--color06); font-size:1.2em; margin-top:0; padding:5px 0 5px 0; box-sizing:border-box; }
.alaotsikko2 { color:var(--color03); font-size:1.1em; }
/*ucp otsikoita*/
.ucp-main .header { text-shadow:none; background-color:var(--color01) !important; padding:0 !important; }
.ucp-main .header dt { color:var(--color04) !important; font-family:var(--otsikkofontti2); text-transform:Capitalize; padding-left:20px; }
.ucp-main h2 { font-family:var(--perusfontti) !important; }
.ucp-main .big-column { background-color:var(--color01); }
.ucp-main .big-column:hover { background-color:var(--color02); }
.ucp-main .big-column td { color:var(--color04); font-weight:bold; }
.ucp-main .two-columns .header, .ucp-main .two-long-columns .header { background-image:none; }
.ucp-main .two-columns .header dt, .ucp-main .two-long-columns .header dt { padding:0; }
.ucp-main .two-columns .list-inner, .ucp-main .two-columns .mark, .ucp-main .two-long-columns .list-inner, .ucp-main .two-long-columns .mark, .ucp-main .two-long-columns .info { font-family:var(--perusfontti); font-size:13px; padding:5px 0 5px 5px; margin:2px 0 2px 0; line-height:1.1em; }
.ucp-main .two-columns .forumtitle, .ucp-main .two-long-columns .forumtitle { width:40%; height:20%; padding:0; font-size:13px !important; }
.ucp-main .two-long-columns .info span { color:var(--color04);}
/*Logo*/
#otsikko { position:absolute; left:20%; top:180px; font-size:90px; font-family:var(--otsikkofontti1); z-index:1; }
#otsikko a, #otsikko a:hover { color:var(--color04); text-decoration:none; text-shadow:1px 1px 10px var(--color15); font-weight:bold; }
#otsikko::after { font-size:25px; font-weight:normal; font-family:var(--otsikkofontti2); content:var(--teema); margin-left:40px; color:var(--color04); text-transform:capitalize; text-shadow:1px 1px 2px var(--color15); }
@media (max-width: 1220px) { #otsikko { position:absolute; left:10%; top:100px; font-size:40px; font-family:var(--otsikkofontti1); }
#otsikko::after { margin-left:20px; font-size:12px; font-family:var(--otsikkofontti2); } }
@media (max-width: 1060px) { #otsikko { position:absolute; left:10%; top:95px; font-size:30px; font-family:var(--otsikkofontti1); }
#otsikko::after { margin-left:10px; font-size:10px; font-family:var(--otsikkofontti2); }}
@media (max-width: 900px) {#otsikko, #otsikko::after { display:none; }}
/*Avat*/
.avatar img { margin-bottom:5px; }
.header-avatar img { border-radius:50%; border:1px solid var(--color04); }
/*noppanappi, form .funktiolomX*/
.nopat { position:relative; width:100%; text-align:justify; margin-bottom:10px; margin-top:10px; }
.funktiokentta { width:25px; border:1px solid transparent !important; text-align:center; margin-right:10px; }
.funktionappi, .funktionappi2, .funktionappi3, .funktionappi4, .funktionappi5, .funktionappi6 { background-color:var(--color03) !important; border:1px solid transparent; color:var(--color04); line-height:20px; }
.funktionappi, .funktionappi2, .funktionappi3, .funktionappi4 { font-size:20px; }
.funktionappi4, .funktionappi5, .funktionappi6 { width:40px; }
.funktionappi5, .funktionappi6 { font-weight:bold; }
.funktionappi:hover, .funktionappi2:hover, .funktionappi3:hover, .funktionappi4:hover, .funktionappi5:hover, .funktionappi6:hover { background-color:var(--color02) !important; }
@media (max-width: 900px) {#piilota { display:none; }}
/*** Colours and backgrounds for common.css ***/
html, body {
background-color: var(--color05);
color: var(--color13);
}
h2 {
color: var(--color13);
}
h3 {
border-bottom-color: var(--color10);
color: var(--color13);
}
/*** Colours and backgrounds for links.css ***/
a {
color: var(--color13);
}
a:hover,
a:focus,
a:active {
color: var(--color03);
}
/* Links on gradient backgrounds */
.forumbg .header a, .forabg .header a, th a {
color: var(--color04);
}
.forumbg .header a:hover, .forabg .header a:hover,
th a:hover {
color: var(--color04);
}
/* Notification mark read link */
.dropdown-extended a.mark_read {
background-color: var(--color06);
}
/* Post body links */
.postlink, .postlink:visited {
border-bottom-color: var(--color13);
color: var(--color13);
}
.postlink:hover {
background-color: var(--color08);
border-bottom-color: var(--color03);
color: var(--color03);
}
/* Back to top of page */
.top i {
color: var(--color11);
}
/* Arrow links */
.arrow-left:hover, .arrow-right:hover {
color: var(--color03);
}
/** Round cornered boxes and backgrounds **/
.wrap {
background-color: var(--color05);
border-color: transparent;
}
.headerbar {
background-color: var(--color01);
background-image: none;
color: var(--color04);
}
.forumbg {
background-color: var(--color01);
background-image: none;
}
.forabg {
background-color: var(--color01);
background-image: none;
}
.navbar {
background-color: var(--color08);
}
.panel {
background-color: var(--color07);
color: var(--color13);
}
.post:target .content {
color: var(--color13);
}
.post h3 a.first-unread,
.post:target h3 a {
color: var(--color13);
}
.bg1 {
background-color: var(--color06);
}
table.zebra-list tr:nth-child(odd) td,
ul.zebra-list li:nth-child(odd) {
background-color: var(--color06);
}
.bg2 {
background-color: var(--color06);
}
table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(even) {
background-color: var(--color06);
}
.bg3 {
background-color: var(--color06);
}
.ucprowbg {
background-color: var(--color09);
}
.fieldsbg {
background-color: var(--color08);
}
.site_logo {
background-image: url("./images/site_logo.svg");
background-repeat: no-repeat;
}
.site-description h1 {
color: var(--color04);
}
/** Table styles **/
table.table1 thead th {
color: var(--color04);
}
table.table1 tbody tr {
border-color: var(--color08);
}
table.table1 tbody tr:hover, table.table1 tbody tr.hover {
background-color: var(--color08);
color: var(--color13);
}
table.table1 td {
color: var(--color13);
}
table.table1 tbody td {
border-bottom-color: var(--color08);
}
table.table1 tbody td {
border-top-color: var(--color06);
}
/*table.table1 tbody th {
border-bottom-color: var(--color10);
color: var(--color13);
background-color: var(--color06);
}
table.info tbody th {
color: var(--color13);
}*/
/** Misc layout styles **/
dl.details dt {
color: var(--color13);
}
dl.details dd {
color: var(--color13);
}
.sep {
color: var(--color03);
}
/** Icon styles **/
.icon.icon-black,
.icon.icon-blue,
.icon.icon-bluegray,
.icon.icon-gray,
.icon.icon-green,
.icon.icon-lightgray,
.icon.icon-orange,
.icon.icon-red {
color: var(--color13);
}
a:hover .icon.icon-black,
a:hover .icon.icon-blue,
a:hover .icon.icon-bluegray,
a:hover .icon.icon-gray,
a:hover .icon.icon-green,
a:hover .icon.icon-lightgray,
a:hover .icon.icon-orange,
a:hover .icon.icon-red {
color: var(--color03);
}
.alert_close .icon:before {
background-color: var(--color06);
}
/* Jumpbox */
.jumpbox .dropdown li {
border-top-color: var(--color10);
}
.jumpbox-cat-link {
background-color: var(--color01);
border-top-color: var(--color01);
}
.jumpbox-cat-link:hover {
background-color: var(--color02);
border-top-color: var(--color02);
}
.jumpbox-forum-link {
background-color: var(--color06);
}
.jumpbox-forum-link:hover {
background-color: var(--color08);
}
.jumpbox .dropdown .pointer-inner {
border-color: var(--color06) transparent;
}
.jumpbox-sub-link {
background-color: var(--color06);
}
.jumpbox-sub-link:hover {
background-color: var(--color08);
}
/** Miscellaneous styles **/
.copyright, .copyright a {
color: var(--color04);
}
.error {
color: var(--color17);
}
.reported {
background-color: var(--color08);
}
li.reported:hover {
background-color: var(--color08) !important;
}
div.rules {
background-color: var(--color08);
color: var(--color13);
}
p.post-notice {
background-color: var(--color10);
}
/*** Colours and backgrounds for content.css ***/
ul.forums {
background-color: var(--color06);
background-image: none;
filter: none;
}
ul.topiclist li {
color: var(--color13);
}
ul.topiclist dd,
ul.topiclist:hover dd,
.rtl ul.topiclist dd,
.rtl ul.topiclist:hover dd {
border-color: transparent;
}
li.row strong {
color: var(--color13);
}
li.row dd {
border-left-color: var(--color06);
}
.rtl li.row dd {
border-right-color: var(--color06);
border-left-color: transparent;
}
li.row:hover dd {
border-left-color: var(--color08);
}
.rtl li.row:hover dd {
border-right-color: var(--color08);
border-left-color: transparent;
}
li.header dt, li.header dd {
color: var(--color04);
}
li.row a:hover strong {
color: var(--color03); }
/** Post body styles **/
.postbody {
color: var(--color13);
}
/** Content container styles **/
.content {
color: var(--color13);
}
.content h2, .panel h2 {
border-bottom-color: var(--color10);
color: var(--color13);
}
dl.faq dt {
color: var(--color13);
}
.posthilit {
background-color: var(--color01);
color: var(--color04);
}
/* Post signature */
.signature {
border-top-color: var(--color10);
}
/* Post noticies */
.notice {
border-top-color: var(--color10);
}
/** BB Code styles **/
/* Quote block */
blockquote {
background-color: var(--color06);
border-color: var(--color08);
}
blockquote blockquote { background-color:var(--color06); }
blockquote blockquote blockquote { background-color: var(--color06); }
/* Code block */
.codebox {
background-color: var(--color06);
border-color: var(--color10);
}
.codebox p {
border-bottom-color: var(--color10);
}
.codebox code {
color: #008000;
}
/* Attachments */
.attachbox {
background-color: var(--color06);
border-color: var(--color10);
}
.pm-message .attachbox {
background-color: var(--color06);
}
.attachbox dd {
border-top-color: var(--color10);
}
.attachbox p {
color: var(--color13);
}
.attachbox p.stats {
color: var(--color13);
}
.attach-image img {
border-color: var(--color10);
}
/* Inline image thumbnails */
dl.file dd {
color: var(--color13);
}
dl.thumbnail img {
border-color: var(--color10);
background-color: var(--color06);
}
dl.thumbnail dd {
color: var(--color13);
}
dl.thumbnail dt a:hover {
background-color: var(--color10);
}
dl.thumbnail dt a:hover img {
border-color: var(--color02);
}
/** Post poll styles **/
fieldset.polls dl {
border-top-color: var(--color10);
color: var(--color13);
}
fieldset.polls dl.voted {
color: var(--color13);
}
fieldset.polls dd div {
color: var(--color06);
}
.pollbar1,
.pollbar2,
.pollbar3,
.pollbar4,
.pollbar5 {
background-color: var(--color17);
border-bottom-color: var(--color17);
border-right-color: var(--color17);
}
.rtl .pollbar1,
.rtl .pollbar2,
.rtl .pollbar3,
.rtl .pollbar4,
.rtl .pollbar5 {
border-left-color: var(--color17);
border-right-color: transparent;
}
/* Poster profile block */
.postprofile {
color: var(--color13);
border-color: var(--color10);
}
.pm .postprofile {
border-color: var(--color10);
}
.postprofile strong {
color: var(--color13);
}
dd.profile-warnings {
color: var(--color17);
}
.online-text {
color: var(--color03);
}
/* Show scrollbars for items with overflow on iOS devices */
.postbody .content::-webkit-scrollbar,
.topicreview::-webkit-scrollbar,
.post_details::-webkit-scrollbar,
.codebox code::-webkit-scrollbar,
.attachbox dd::-webkit-scrollbar,
.attach-image::-webkit-scrollbar,
.dropdown-extended ul::-webkit-scrollbar {
background: rgba(0, 0, 0, 0.1);
}
.postbody .content::-webkit-scrollbar-thumb,
.topicreview::-webkit-scrollbar-thumb,
.post_details::-webkit-scrollbar-thumb,
.codebox code::-webkit-scrollbar-thumb,
.attachbox dd::-webkit-scrollbar-thumb,
.attach-image::-webkit-scrollbar-thumb,
.dropdown-extended ul::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3);
}
/**** Colours and backgrounds for buttons.css ***/
.button {
background-color: var(--color01);
background-image: none;
border-color: var(--color01);
box-shadow: none;
-webkit-box-shadow: none;
color: var(--color04);
filter: none;
}
.button:hover,
.button:focus {
background-color: var(--color02);
background-image: none;
border-color: var(--color02);
color: var(--color04);
filter: none;
text-shadow: none;
}
.button .icon,
.button-secondary {
color: var(--color04);
}
.button-secondary:focus,
.button-secondary:hover,
.button:focus .icon,
.button:hover .icon {
color: var(--color04);
}
.button-search:hover,
.button-search-end:hover {
border-color: var(--color02);
}
.caret { border-color: var(--color04); }
.contact-icons a { background-color: var(--color06); }
.contact-icons a:hover { background-color: var(--color08); }
/* Pagination */
.pagination li a {
background-color: var(--color01);
border-color: var(--color01);
color: var(--color04);
}
.pagination li.ellipsis span {
color: var(--color13);
}
.pagination li.active span {
background-color: var(--color02);
border-color: var(--color02);
color: var(--color04);
}
.pagination li a:hover,
.pagination li a:hover .icon,
.pagination .dropdown-visible a.dropdown-trigger,
.nojs .pagination .dropdown-container:hover a.dropdown-trigger {
background-color: var(--color02);
border-color: var(--color02);
color: var(--color04);
}
/* Search box */
.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus {
background-color: var(--color06);
border-color: var(--color08)
}
.search-header {
box-shadow: none;
}
.search-results li:hover,
.search-results li.active {
background-color: var(--color06);
}
/* Icon images */
.contact-icon { background-image: url("./images/icons_contact.svg"); }
/* Forum icons & Topic icons */
.row-item[class*=_read], .row-item[class*=_unread], .forum_link, .topic_moved {
background-image: none;
}
.global_read:before,
.announce_read:before,
.sticky_read:before {
content: url("./images/announce_read.svg");
}
.global_read_mine:before,
.announce_read_mine:before,
.sticky_read_mine:before {
content: url("./images/announce_read_mine.svg");
}
.global_unread:before,
.announce_unread:before,
.sticky_unread:before {
content: url("./images/announce_unread.svg");
}
.global_unread_mine:before,
.announce_unread_mine:before,
.sticky_unread_mine:before {
content: url("./images/announce_unread_mine.svg");
}
.global_read_locked:before,
.announce_read_locked:before,
.forum_read_locked:before,
.sticky_read_locked:before,
.topic_read_locked:before {
content: url("./images/forum_topic_read_locked.svg");
}
.global_read_locked_mine:before,
.announce_read_locked_mine:before,
.sticky_read_locked_mine:before,
.topic_read_locked_mine:before {
content: url("./images/forum_topic_read_locked_mine.svg");
}
.global_unread_locked:before,
.announce_unread_locked:before,
.forum_unread_locked:before,
.topic_unread_locked:before,
.sticky_unread_locked:before {
content: url("./images/forum_topic_unread_locked.svg");
}
.global_unread_locked_mine:before,
.announce_unread_locked_mine:before,
.topic_unread_locked_mine:before,
.sticky_unread_locked_mine:before {
content: url("./images/forum_topic_unread_locked_mine.svg");
}
.forum_link:before {
content: url("./images/forum_topic_link.svg");
}
.forum_read:before,
.forum_read_subforum:before,
.topic_read:before {
content: url("./images/forum_topic_read.svg");
}
.topic_read_mine:before {
content: url("./images/forum_topic_read_mine.svg");
}
.forum_unread:before,
.forum_unread_subforum:before,
.topic_unread:before {
content: url("./images/forum_topic_unread.svg");
}
.topic_unread_mine:before {
content: url("./images/forum_topic_unread_mine.svg");
}
.topic_moved:before {
content: url("./images/forum_topic_moved.svg");
}
.topic_read_hot:before {
content: url("./images/forum_topic_read.svg");
}
.topic_read_hot_mine:before {
content: url("./images/forum_topic_read_mine.svg");
}
.topic_unread_hot:before {
content: url("./images/forum_topic_unread.svg");
}
.topic_unread_hot_mine:before {
content: url("./images/forum_topic_unread_mine.svg");
}
.pm_read:before {
content: url("./images/forum_topic_read.svg");
}
.pm_read_mine:before {
content: url("./images/forum_topic_read_mine.svg");
}
.pm_unread:before {
content: url("./images/forum_topic_unread.svg");
}
.pm_unread_mine:before {
content: url("./images/forum_topic_unread_mine.svg");
}
/** Colours and backgrounds for cp.css **/
/* Main CP box */
.panel-container h3, .panel-container hr, .cp-menu hr {
border-color: var(--color10);
}
.panel-container .panel li.row {
border-bottom-color: var(--color08);
border-top-color: transparent;
}
ul.cplist {
border-top-color: var(--color08);
}
.panel-container .panel li.header dd, .panel-container .panel li.header dt {
color: var(--color13);
}
.panel-container table.table1 thead th {
color: var(--color13);
border-bottom-color: var(--color10);
}
.cp-main .pm-message {
border-color: var(--color10);
background-color: var(--color06);
}
/* CP tabbed menu */
.tabs .tab > a {
background-color: var(--color01);
color: var(--color04);
}
.tabs .tab > a:hover {
background: var(--color02);
color: var(--color04);
}
.tabs .activetab > a,
.tabs .activetab > a:hover {
background: var(--color02);
background-image: none;
border-color: var(--color02);
box-shadow: none;
color: var(--color04);
filter: none;
}
/* Mini tabbed menu used in MCP */
.minitabs .tab > a {
background-color: var(--color01);
color: var(--color04);
}
.minitabs .tab > a:hover,
.minitabs .activetab > a,
.minitabs .activetab > a:hover {
background-color: var(--color02);
color: var(--color04);
}
/* Responsive tabs */
.responsive-tab .responsive-tab-link:before,
.responsive-tab .responsive-tab-link:hover:before {
border-color: var(--color06);
}
/** UCP navigation menu **/
/* Link styles for the sub-section links */
.navigation a, .rtl .navigation a {
background: var(--color01);
color: var(--color04);
filter: none;
}
.navigation a:hover,
.navigation .active-subsection a,
.navigation .active-subsection a:hover {
background-color: var(--color02);
color: var(--color04);
filter: none;
}
@media (max-width: 900px) {
#navigation a, .rtl #navigation a {
background: var(--color01);
}
#navigation a:hover,
#navigation .active-subsection a,
#navigation .active-subsection a:hover {
background-color: var(--color02);
color: var(--color04);
filter: none;
}
}
/* Preferences pane layout */
.panel-container h2 {
color: var(--color13);
}
.panel-container .panel {
background-color: var(--color07);
}
.cp-main .pm {
background-color: var(--color06);
}
/* Friends list */
.cp-mini {
background-color: var(--color08);
}
dl.mini dt {
color: var(--color13);
}
/** PM Styles **/
/* PM Message history */
.current {
color: var(--color13) !important;
}
/* PM marking colours */
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
border-left-color: var(--color17);
border-right-color: var(--color17);
}
.pmlist li.pm_marked_colour, .pm_marked_colour {
border-color: var(--color18);
}
.pmlist li.pm_replied_colour, .pm_replied_colour {
border-color: var(--color19);
}
.pmlist li.pm_friend_colour, .pm_friend_colour {
border-color: var(--color20);
}
.pmlist li.pm_foe_colour, .pm_foe_colour {
border-color: var(--color16);
}
/* Avatar gallery */
.gallery label {
background: var(--color06);
border-color: var(--color10);
}
.gallery label:hover {
background-color: var(--color07);
}
/** Colours and backgrounds for forms.css **/
/* General form styles */
select {
border-color: var(--color08);
background-color: var(--color06);
color: var(--color13);
}
label {
color: var(--color13);
}
option.disabled-option {
color: var(--color12);
}
/* Definition list layout for forms */
dd label {
color: var(--color13);
}
/* Hover effects */
fieldset dl:hover dt label {
color: var(--color13);
}
/* Quick-login on index page */
fieldset.quick-login input.inputbox {
background-color: var(--color06);
border-color: var(--color08);
}
/* Posting page styles */
.message-box textarea {
color: var(--color13);
}
.message-box textarea.drag-n-drop {
outline-color: var(--color125);
}
.message-box textarea.drag-n-drop-highlight {
outline-color: var(--color035);
}
/* Input field styles */
.inputbox {
background-color: var(--color06);
border-color: var(--color08);
color: var(--color13);
}
.inputbox:-moz-placeholder {
color: var(--color13);
}
.inputbox::-webkit-input-placeholder {
color: var(--color13);
}
.inputbox:hover {
border-color: var(--color08);
}
.inputbox:focus {
border-color: var(--color08);
}
/* Form button styles */
a.button1, input.button1, input.button3, a.button2, input.button2 {
background-color: var(--color01);
background-image: none;
border-color: var(--color01);
box-shadow: none;
-webkit-box-shadow: none;
color: var(--color04);
filter: none;
}
a.button1, input.button1 {
border-color: var(--color01);
}
/* Alternative button */
a.button2, input.button2, input.button3 {
border-color: var(--color01);
}
/* button in the style of the form buttons */
a.button1, a.button2 {
color: var(--color04);
}
/* Hover states */
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
background-color: var(--color02);
background-image: none;
border-color: var(--color02);
color: var(--color04);
filter: none;
}
/* Focus states */
input.button1:focus, input.button2:focus, input.button3:focus {
border-color: var(--color02);
color: var(--color04);
}
/* jQuery popups */
.phpbb_alert {
background-color: var(--color06);
border-color: var(--color08);
}
.darken {
background-color: var(--color13);
}
.loading_indicator {
background-color: var(--color04);
background-image: url("./images/loading.svg");
}
.dropdown-extended ul li {
border-top-color: var(--color08);
}
.dropdown-extended ul li:hover {
background-color: var(--color08);
color: var(--color13);
}
.dropdown-extended .header, .dropdown-extended .footer {
border-color: var(--color08);
color: var(--color13);
}
.dropdown-extended .header {
background: var(--color06);
background-image: none;
filter: none;
}
.dropdown .pointer {
border-color: var(--color08) transparent;
}
.dropdown .pointer-inner {
border-color: var(--color05) transparent;
}
.dropdown-extended .pointer-inner {
border-color: var(--color05) transparent;
}
.dropdown .dropdown-contents {
background: var(--color05);
border-color: var(--color08);
box-shadow: none;
}
.dropdown-up .dropdown-contents {
box-shadow: none;
}
.dropdown li, .dropdown li li {
border-color: var(--color08);
}
.dropdown li.separator {
border-color: var(--color08);
}
/* Notifications */
.notification_list p.notification-time {
color: var(--color13);
}
li.notification-reported strong, li.notification-disapproved strong {
color: var(--color17);
}
.badge {
background-color: var(--color01);
color: var(--color04);
}
a:hover .badge,
.badge:hover {
background-color: var(--color02);
}
/** Miscellaneous styles added **/
/* Icons & Button icons */
.dropdown-contents .fa-file-o:before { content: "\f0e5"; }
.dropdown-container .fa-level-down:before { content: "\f054" "\f054"; display: block; transform: rotate(90deg); }
.fp-forum-read::before { content: "\f046"; }
.lastpost .fa-external-link-square:before { content: "\f0e5"; }
.nav-main .fa-inbox:before { content: "\f075"; }
.nav-main .fa-question-circle:before { content: "\f128"; }
.navbar .fa-group::before { content: "\f007"; }
.pagination span .fa-clone:before { display: none; }
.post-notice .fa-exclamation:before { content: "\f071"; }
.post-notice .fa-question:before { content: "\f059"; }
.post-notice .fa-recycle:before { content: "\f2d3"; }
.postbody .fa-file:before { content: "\f0e5"; }
.row-item .fa-bar-chart:before { content: "\f012"; }
.row-item .fa-exclamation:before { content: "\f071"; }
.row-item .fa-file:before { content: "\f0e5"; }
.row-item .fa-file-o:before { content: "\f0e5"; }
.row-item .fa-question:before { content: "\f059"; }
.row-item .fa-recycle:before { content: "\f2d3"; }
/* footerbar */
.footerbar {
background-color: var(--color01);
color: var(--color04);
}
.footerbar a,
.footerbar a:hover,
.footerbar a:focus,
.footerbar a:active {
color: var(--color04);
}
.icon.fa-file-o.icon-red {
color: var(--color01);
}
a.unread, i.icon-unread {
color: var(--color03);
}
/* Post control buttons */
.format-buttons .bbcode-size {
border-color: var(--color01);
}
.format-buttons .bbcode-size:hover {
border-color: var(--color02);
}
/* No-avatar icon */
.dropdown-extended .notification-block .fa-user {
color:var(--color13);
}
/* Quick-login on index page */
fieldset.quick-login {
background-color: var(--color06);
border-bottom: 1px solid var(--color08);
}
fieldset.quick-login:hover {
background-color: var(--color08);
}
/* Round cornered boxes and backgrounds */
.bg1:hover, .bg2:hover, .bg3:hover, .panel:hover { }
/* Social links */
.socialinks ul li:hover {
background-color: var(--color02);
border-color: var(--color02);
}
.socialinks ul li a i:before {
color: var(--color04);
}
/* Stat-block */
.stat-block h3 {
background-color: var(--color01);
color: var(--color04);
}
.stat-block h3 a {
color: var(--color04);
}
.stat-block p {
background-color: var(--color06);
border-bottom: 1px solid var(--color08);
}
.stat-block p:hover {
background-color: var(--color08);
}
/* switch */
.switch-theme i:before {
content: var(--switch-light-dark);
}
/* Misc */
.navbar a {
color: var(--color13);
}
.navbar a:hover {
color: var(--color03);
}
/*** Extension compatibility ***/
/** Extension Board Annoucements 1.3.0 ( https://www.phpbb.com/customise/db/extension/boardannouncements/ ) **/
.proflat .phpbb_announcement {
background-color: var(--color09); /* default color */
}
.proflat .phpbb_announcement div {
color: var(--color12);
}
/** Extension Board Rules 3.0.1 ( https://www.phpbb.com/customise/db/extension/boardrules/ ) **/
.proflat .boardrules-container .content,
.proflat .boardrules-categories .mini-panel {
background-color: var(--color06);
}
.proflat .boardrules-container .content:hover,
.proflat .boardrules-categories .mini-panel:hover {
background-color: var(--color08);
}
.proflat .boardrules-categories .mini-panel h3 {
color: var(--color13);
}
.proflat .highlight {
background-color: var(--color08);
color: var(--color12);
}
/** Extension Collapsible Forum Categories 2.0.1 ( https://www.phpbb.com/customise/db/extension/collapsible_forum_categories/ ) **/
.proflat .collapse-btn .fa-minus-square:before,
.proflat .collapse-btn .fa-plus-square:before {
color: var(--color04);
}