/**
 * Theme Name: Oppida
 * Theme URI: N/A
 * Description: N/A
 * Version: 1.0.0
 * Author: Johan Stoltz
 * Author URI: https://johanstoltz.se
 * Tags: N/A
 * Text Domain: N/A
 * Domain Path: N/A
 * Tested up to: N/A
 * Requires at least: N/A
 * Requires PHP: N/A
 * License: N/A
 * License URI: N/A
 */

/* Global */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

}

/* Links */



a:link {
    color: #FFF5EE;
    text-decoration: none;
    font-style: normal;
    transition: color 0.2s ease-out;
}

a:visited {
    color: #FFF5EE;
    font-style: normal;
}

a:hover {
    /*color: rgb(132, 181, 245);
     *    transition: color 1s ease;*/
    color: rgb(225, 225, 230);
    transition: color 0.8s ease;
}

a:hover, a:visited {

}

/* Search engine */

#sec { /* Search Engine Cell i border */
padding: 0px 10px 0px 10px;
text-align: right;

}

.asearch{ /*Article Search*/
    margin-top:7px;
    margin-left:7px;
}

.se { /*Search Engine*/
    background-color:hsl(0, 1%, 32%, 1);
    color: transparent;
    height: 30px;
    width: 30px;
    border-radius: 30px;
    /*url("../bilder/searchicon.png");*/
    outline: none;

}

.se:focus, .se:hover {
    border-color: white;
    width: 200px;
    height: 30px;
    padding-left: 10px;
    color: #FFF5EE;

}

.se:hover {
    transition: 0.2s ease;

}

.se:focus {
    background-color: hsla(0, 0%, 60%, 0.5);

}

.se:not(:focus) {
    transition: 0.8s ease;

}

/* Body */

#main-wrapper {
grid-template-rows: 1fr 2fr 3fr;

}

#leftsq {
grid-template-rows:1fr 2fr;
grid-column: 1;
z-index: 1;
width: fit-content;
height: fit-content;

}
#centersq {
grid-column: 2;
z-index: 2;
width: fit-content;
height: fit-content;
margin: 0% 25% 0% 25%;

}

#rightsq {
grid-column: 3;
width: 100px;
height: 100px;
margin: 0% 50% 0% 50%;

}

#sub-wrapper {
grid-template-columns: 1fr 2fr 3fr;
height: 100%;
width: 100%;
}

#left-column {
height: fit-content;
width: fit-content;
position: absolute;
grid-column: 1;
margin: 0px 0px 20px 20px;

}

#center-column {
height: fit-content;
width: fit-content;
grid-column: 2;
margin: 20px auto 20px auto;

}

#right-column {
grid-column: 3;
margin: 20px 20px 20px 0px;
}


.default-bgc { /*Default background color*/
    background-color: rgb(225, 225, 230);

}

.article-bgc {
    background-color: rgb(69, 69, 69);

}



/* TA BORT!! #fpage {
 *
 *    background: rgb( 225, 225, 230);
 *
 * }*/


/* Bild i header */

#border {
display: flex;

}

#bgpic {
position:relative;
width:100%;
height:150px;
border-radius: 5px 5px 0px 0px;
object-fit:cover;

}

/* Navigering */

#tbg { /* Table background */
z-index:1;
/*row: 2;*/
width:100%;
padding-top:0px;
padding-bottom:0px;
padding-right: 50px;
background-color: hsl(0, 1%, 32%, 1);
border-radius: 0px 0px 0px 0px;

}

#nc { /* Cell för varje navigeringsknapp */
height: 30px;
width: 70px;
align-self: stretch;
}

.nc_style { /* Navigeringsknapp */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    width: 71px;
    background-color: hsla(0, 1%, 32%, 1);
    padding: 1px 5px 0px 5px;
    /*margin: auto;*/
    font-size: 16px;
    color: #FFF5EE;
    font-family: Verdana, Arial, sans-serif;

}

.nc_style:hover {
    background: hsl(0, 1%, 50%, 1);

}

.nc-dropdown{
    display: none;
    position:relative;
}

.nc_style:hover .nc-dropdown {
    margin-top: 138px;
    margin-left: 15px;
    position:absolute;
    display: block;
    border: 1px solid red;
    width:fit-content;
    height:100px;
}

/*.nc_style:hover .nc-dropdown{
 *        border: 1px solid red;
 *        padding-top: 10px;
 *        width: fit-content;
 *        height: fit-content;
 *        position: absolute;
 *        display:block;
 * }*/

.nc_style:active {

    background: hsl(0, 1%, 65%, 1);
}

.nc_style-tt { /*Tyck till*/
    display: flex;
    justify-content: center;
    align-items: center;
    height:36px;
    width:71px;
    background-color:hsla(0, 1%, 32%, 1);
    padding:1px 5px 0px 5px;
    margin: auto;
    font-size:16px;
    color: #FFF5EE;
    font-family: Verdana, Arial, sans-serif;
}

.nc_style-tt:hover {
    background-color:hsla(250, 100%, 40%, 1);

}



/* Front News */

#news { /*Table ID*/
margin: 10% auto 10% auto;
padding: 5px 3px 5px 3px;
border-color: hsla(0, 1%, 32%, 0.2);
border-radius: 5px;
width: fit-content;
background-color: hsl(0, 1%, 32%, 1);

}

#th { /*Table Header*/
padding: 10px 0px 1px 10px;
color: #FFF5EE;
text-align: left;
font-size: 20px;
font-family: Verdana, Arial, sans-serif; /* Skilj på font-family och font-style. */

}

#t_rubrik{ /*Rubrik i table*/
text-align: middle;
font-size: 20px;
padding: 50px;
font-family: Georgia, Times, serif;
font-style:italic;
color: #FFF5EE;

}

#trmark:hover { /*Table Row*/
background-color: hsla(0, 0%, 60%, 0.5);

}

#timg{ /*Table image*/
min-width: 200px;
max-width: 250px;
min-height: 100px;
max-height: 150px;
padding: 2px 1px 2px 5px;

}

#tp{ /*Table Paragraph*/
text-align: middle;
min-width: 100px;
max-width: 500px;
min-height: 50px;
max-height: 100px;
margin: 0px;
padding: 5px;
overflow: scroll;
font-family: Georgia, Times, serif;
font-size: 16px;
color: #FFF5EE;
border-radius: 10px 10px;
line-height: 1.8em;

}

/* Artikel */

#bglayout{
position: absolute;
height: 100%;
width: 100%;
background-color: rgb(69, 69, 69);

}

#article-border {
grid-template-columns: 1fr 2fr 1fr;
display: grid;
/*align-items:*/

}



/* TA BORT!! #sqfeat{
 *    width:100px;
 *    height:100px;
 * }*/

.uppersec {
    grid-column: 1;
    height: 50px;
    width: 100px;

}

.lowersec {
    grid-column: 2;
    height: 50px;
    width: 100px;

}




/* TA BORT !! #topborder{
 *    grid-template-columns: 1fr 2fr 1fr;
 *    grid-template-rows:1fr 2fr 1fr;
 *    position:sticky;
 *    margin-top:0px;
 *    height:100px;
 *    width:100%;
 *    background-color:rgb(69, 69, 69);
 *    margin-left:0px;
 *    z-index:1;
 * }*/

/* TA BORT !! #innertop{
 *    background-color:rgb(69, 69, 69);
 *    height:50px;
 *    width:100%;
 *    position:fixed;
 *    margin-left:0px;
 * }*/

/* TA BORT !! #innerbottom{
 *    grid-template-columns: 1fr auto 1fr;
 *    grid-template-rows: fit-content(50%);
 *    display:grid;
 *    background-color:rgb(69, 69, 69);
 *    height:50px;
 *    width:100%;
 *    position:fixed;
 *    z-index:2;
 *    margin-left:0px;
 *    margin-top:50px;
 *    padding-bottom:4px;
 * }*/



#a_infobox{ /*Slå ihop med .author?*/
z-index:1;
/*background-color:rgb(69, 69, 69);*/
position:fixed;
height:220px;
width:250px;
margin-top: 5%;
margin-left:10px;
/*border:5px ridge black*/;

}

#authpic {
margin: 10px auto 10px auto;
display: flex;
width: 100px;
height: 100px;

}

.authpic_border {
    object-fit: cover;
    padding-top: 0px;
    border-radius: 100px;

}

.author { /* Författare av artikel */
    text-align: center;
    color: #FFF5EE;
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    line-break: strict;

}

.ainfo {
    text-align: center;
    font-family: Verdana, Arial, sans-serif;
    color: #FFF5EE;
    font-size: 12px;
    line-break: strict;

}

#pglayout {
position: normal;
margin: 10% auto 10% auto;
width: 900px;
background-color: white;
/*border: 5px ridge black;*/
box-shadow: 0px 0px 500px 0px white;

}

.poi { /*"Point of interest", t ex om något begrepp är av särskilt intresse*/
    color: rgb(21, 47, 82);
    font-family: Georgia, Times, serif;

}

.pgnav {
    margin-left:0px;
    margin-top:8px;
    z-index:2;

}

#toolbox{
justify-self: start;
font-size: 0px;
height: 35px;
width: 35px;
border-radius: 35px;
border-color: white;
margin-left: 10px;
margin-top: 10px;

}

#glare {
visibility: hidden;
height: 0px;
width: 0px;

}

#toolbox:hover {
background-color: white;
font-size: 10px;
height: 150px;
width: 200px;
border-radius: 0px;
transition: 0.2s ease;

}

.toolbox_buttons{
    width:10px;
}

/* Toolbox: Buttons */

.paperborder{

}

.paperborder:hover{

}

/* TA BORT !! #bglayout{ /*Left side layout
 *    background: radial-gradient(#ffffff 50%, #000000 125%);
 *    }*/

 /* TA BORT !! #gendiv{
  *
  *    border: 5px solid black;
  * }*/

 /* Titlar och rubriker */
 #rb1{
 font-family: Verdana, Arial, sans-serif;
 text-align: center;
 color:#FFF5EE;
 }

 #rb1_div{
 justify-self:center;
 height:fit-content;


 }

 #rb2{
 font-family: Georgia, Times, serif;
 text-align: left;

 padding-left:20px;
 color:pink !important;}

 #rb3{}

 #rb4{}


 #ar_p{ /*Paragraftext i artikel*/
 /*overflow: scroll;*/

 color: black;
 border-radius: 10px 10px;
 line-height: 1.8em;
 padding:10px 30px 10px 30px;
 line-height: 2em;
 text-align: justify;
 }

 .fontsize1 {
     font-size: 30px;

 }

 .fontsize2 {
     font-size: 28px;

 }

 .fontsize3 {
     font-size: 26px;

 }

 .font-size4 {
     font-size: 24px;

 }

 .font-size5 {
     font-size: 22px;

 }

 .font-size6 {
     font-size: 20px;

 }

 .font-size7 {
     font-size: 18px;

 }

 .font-size8 {
     font-size: 16px;
 }

 /* Blogg */



 .border_box{

     object-fit:cover;
 }

 #blogg-index{
 display:grid;
 grid-row:2;
 grid-template-columns: 1fr 2fr 3fr;
 }

 #blogg-index-l{
 border:1px solid red;
 margin:0px 0px 0px 0px;
 width:100px;
 height:100px;
 grid-column: 1;
 }

 #blogg-index-c{
 border:1px solid green;
 margin:0px auto 0px auto;
 width:100px;
 height:100px;
 grid-column:2;
 }

 #blogg-index-r{
 border:1px solid blue;
 margin:0px 0px 0px auto;
 width:100px;
 height:100px;
 grid-column:3;
 }




 /* Paragraph */
 #fp {
 font-family: Georgia, Times, serif;
 font-size: 16px;
 color: #FFF5EE;
 padding: 25px;
 border-radius: 10px 10px;
 line-height: 2em;
 height: fit-content; /* Använd tillsammans med overflow för att konstruera sid-lika sidor (typ som i en PDF). */

 }

 /* --------------------------------------------------------------- */

 /* About */
@media (min-width: 600px) {
	#aboutpic {grid-area:1 / span 3;}
	#paragraph-about {grid-area: 2 / span 3;}
	
}

 #aboutpic_wrapper {
 border: 1px solid red;


 }

 #aboutpic {
 position: absolute;
 z-index: 2;
 width: 400px;
 height: 400px;
 object-fit: contain;
 margin: 0px 0px 0px 0px;
 display: flex;
 transition: 0.8s ease;
 /*anchor-name: --bild;*/

 }

 .aboutpic_position {

     position: absolute;


 }

 #paragraph-about {
 z-index: 1;
 margin: 50px auto 10px auto;
 position: sticky;
 width: 800px;
 height: fit-content;
 color: black;
 line-height: 1.8em;
 padding: 14px 30px 10px 30px;
 line-height: 2em;
 text-align: justify;
 /*position-anchor: --bild;
  * anchor: --bild bottom;*/
 }

 #aboutpic:hover {
 transition: 0.2s ease;
 width: 800px;
 height: 800px;
 z-index: 4;
 }

 #credits_wrapper {
 z-index: 2;
 position: relative;
 height: 30px;
 width: 200px;
 border: 1px solid yellow;
 margin: 100% 100% 0% 0%;
 }



 .aboutpic_credits {
     z-index: 3;
     position: absolute;
     margin: 355px 100px 0px 5px;
     padding: 0px 2px 0px 2px;
     width: 150px;
     height: fit-content;
     font-size: 12px;
     background-color: rgba(225, 225, 230, 0.8);
     transition: 0.2 ease;
     /*text-align: justify;*/
 }

 /* --------------------------------------------------------------- */

 /* Index för artiklar */

 #index-table {
 margin: 150px 0px 150px 0px;
 background-color: rgb(69, 69, 69);
 border-radius: 5px 5px;
 width: 1000px;
 height: fit-content;
 padding: 20px 0px 20px 20px;
 }

 #index-order {
 color: #FFF5EE;
 margin-left: 5px;
 padding-right: 150px;
 padding-bottom: 50px;
 font-size: 100px;
 font-family: Georgia, Times, serif;
 width: 100px;
 /*border-bottom: 1px solid black;*/
 }

 #index-data {
 display: block;
 padding-right: 5px;
 text-align: middle;
 width: 98%;
 min-height: 50px;
 max-height: 150px;
 margin: 0px;
 overflow: scroll;
 font-family: Georgia, Times, serif;
 font-size: 16px;
 color: #FFF5EE;
 line-height: 1.8em;
 }

 #index-row:hover {
 background-color: hsla(0, 0%, 60%, 0.5);
 }

 #index_ul {
 width: fit-content;
 list-style-image: url('../bilder/bulletpoint.png');
 }

 /* Footer */

 footer {
     background-color: rgb(69, 69, 69);

 }

 #footer_table {
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 border-collapse: collapse;
 }

 #footer_col {

 font-size: 1em;
 color: #FFF5EE;
 padding: 0px 15px 10px 13px;
 }



 #resources {
 margin: 0px 10px 0px 10px;
 display: block;
 }

 #footer_td {
 padding: 5px 0px 5px 0px;
 /*border-bottom: 1px solid;
  *    border-color: rgba(69, 69, 69, 1);*/
 font-size: 0.8em;
 }


 #begr{
 position:absolute;

 top: 8;
 bottom: 0;
 left: 2;
 right: 0;
 pointer-events: none;
 }

 #begr:hover {
 width: 0;

 }

 .test{
     position:absolute
     align-content: center;
     text-align: center;
     height: 36px;
     width: 100px;
     border: 1px solid pink;
     transition: all 5s ease-out;
 }

 .test2{

     height: 36px;
     width: 75px;
 }


 .test:hover {
     font-size: 0px;
     text-align: right;
     z-index:100;
     position: relative;
     width:500px;
     height:36px;
     border: 1px solid pink;
     transition: all 5s ease;
 }

 /* Senast uppdaterad 25/11-2025 */