/* Här definerar vi vår stilmall så att saker ser finare ut i vårt formulär */

/*
Jag använder en bakgrundsbild som ligger statiskt fixerad (se body nedan). Dock, för att
undvika att det flimrar till vitt när man hoppar mellan sidor så är det rekommenderat att
sätta en bakgrundsfärg som är nära bakgrundsbilden, och att sätta den på såväl html som body.
*/
html, body {
	background-color: #866944;
}

/*
Här definerar vi grundstilen för webbplatsens samtliga sidor.
Typsnitt sätter jag till Arial, då det är väldigt väl spritt, men annars har jag en sans-serif som stand-by
Linje-höjden är avstånd mellan rader, som jag sätter till 1.5 enheter (där detta då är normalhöjd på rader)
Inga marginaler - det sköter jag om via inre block och stilar på dessa.
Här har jag valt att ha en större mörktonad bakgrundsbild (som faktiskt är en bild på en del garnnystan som
jag tog). Mjukvaran heter Threadle - tråd - så det kändes roligt och relevant. Färgtonen är dessutom vald så
att det inte blir för påträngande.

Som säkerhet satte jag även bakgrundsfärgen till just den bruna nyans som förekommer mest i bilden: hex #866944.
Så om bilden inte skulle ladda eller ta lite tid, så blir det lite mjukare övergång.
*/
body {
	font-family: Arial, sans-serif;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	color: #404040;
    background: url('../images/bg_html.jpg') no-repeat center fixed;     
}

/*
Här använder jag ett smart sätt för att centrera det översta fältet på sidan. Jag vill ha det med fast placering
så att det stannar kvar när man scrollar, samtidigt som jag vill ha det centrerat. Så detta skapar en osynlig behållare
som jag därefter kan lägga in min header i.
*/
#header-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

/*
Här använder jag ett väldigt vedertaget sätt att centrera en div. Jag sätter en maximal bredd (så att det anpassar sig ner
ifall man har mindre skärm eller på mobil). Samtidigt sätter jag marginalen på sidorna till auto! Det innebär att <header>
nu alltid kommer vara centrerad, då auto ser till att såväl höger- som vänstermarginalen är lika stora. I och med att detta
också ligger i den ovan specificerade #header-wrapper så kommer det alltid finnas en panel överst som centrerar sig fint.
Här har jag även lagt till lite utsmyckning: bland annat en liten skugga som lägger sig på huvud-delen av sidan (main).
Notera att såväl header, header-wrapper och flera andra är specificerade med id - ej som klasser - just då de bara ska förekomma
en gång på varje sida.
*/
#header {
    max-width: 960px;
    margin: 0 auto;
    background-color: #306040;
    color: white;
    border-bottom: 1px solid #000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

/*
Titeln överst på sidan - Threadle - är ett h1-element. Men det skiljer sig från de andra header-elementen så jag definerade en
h1-variant som då bara gäller inom #header-blocket.
*/
#header h1 {
	margin:0;
	padding: 0 0 0 0.25em;
	text-align:left;
}

/*
Den översta titeln kommer vara klickbar. Då behöver jag även se till att dess färg verkligen är vit.
Jag vill heller inte ha den understryken: h1 kommer istället fungera som ett så kallat "ordmärke".
Dessutom justerar jag ner storleken lite här. Observera att jag inte kan lägga font-size-taggen i #header h1 ovan, för
då skulle det bli en absolut förändring av h1-taggens storlek, Genom att lägga den här så sätter jag istället storleken till
0.9 av den normala h1-storleken, så det är de facto en förändring relativt vad h1 är normalt.
*/
#header h1 a {
	text-decoration: none;
	color:white;
	font-size: 0.9em;
}

/*
Den här klassen är något jag lägger till i <nav>-taggen, för att lägga till lite grundstil
för menyn högst upp. De mer detaljerade bitarna lägger jag in i ul och li nedan.
*/
.links {
	flex: 1;
	height: inherit;
	line-height: inherit;
	overflow: hidden;
	margin:0.25em;
}

/*
Menyn och dess alternativ är en onumrerad lista (ul). Här fixar jag till lite marginaler och sätter list-style till none.
marginaler och padding här gäller för ul-listan i stort. Eftersom jag bara vill att detta ska gälla för ul-element som finns
i links-klasser så markerar jag detta. Detta påverkar alltså inte hur ul fungerar i stort på webbplatsen.
*/
.links ul {
	list-style: none;
	margin: 0;
	padding-top:0.25em;
	padding-left: 0;
	text-align:left;
}

/*
Varje meny-alternativ (dvs li-element) ska lägga sig inline, dvs sida vid sida, så att menyn blir horisontell. Här lägger jag in stilar för hur de enskilda list-elementen
*/
.links ul li {
	line-height: 1;
	display: inline-block;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/*
De länkar som finns i header är de för menyn. Jag vill inte ha dessa understrykna och dessutom vill jag att de är lite
ljusgråa som default. Däremot, om man för pekaren över en länk så att den blir 'hover'-märkt så ska transitionen vad gäller
färg ske lite långsammare, vilket jag sätter här.
*/
.links a {
	text-decoration: none;
	color:white;
	transition: color 0.2s ease;
}

/*
Om man då för pekaren över en meny-länk så ska den bli gul. Men ja, det blir den inte på en gång, tack vare transition-
parametern ovan!
*/
.links a:hover {
	color:yellow;
}

/*
Varje länk motsvarar en undersida. Om man således är på en viss sida så vill jag att det aktuella menyalternativet ska lysa upp.
För det skapar jag en klass 'current' som då bara gäller på länkar (a) i header-blocket. Vad som sen sker under huven är att jag
använder lite php-kod för att lägga till den här klassen i det aktuella meny-alternativet, beroende på vilken sida man är på. För
notera att webbplatsen har flera webbsidor, men använder ändå samma index.php-fil där en och samma kod för menyn alltid återfinns.
*/
.links a.current {
	color:yellow;
}

/*
På sidan User guide finns det länkar för att hoppa mellan olika delar på sidan, så kallat ankar-länkar
De ser lite annorlunda ut. Eftersom jag bara vill att de ska se annorlunda ut på den här sidan så definieras de
inom id userlinks allena
*/
#userlinks ul {
	list-style: none;
}

#userlinks ul li a {
	text-decoration: none;
	color: darkgreen;
}

#userlinks ul li a:hover {
	text-decoration: none;
	color: blue;
}



/*
Här är en motsvarande wrapper för main-innehållet, dvs där själva huvudinnehållet på sidan visas.
Den bygger på samma princip som ovan. Här har jag satt min-height: 100vh, dvs 100% av viewport-höjden.
*/
#wrapper {
	max-width:960px;
	margin: 0 auto;
	min-height:100vh;
}

/*
Jag använder main-taggen men sätter även ett id på den vid namn 'main'. Det är denna som jag därefter utsmyckar
för att passa in. Bakgrundsfärg, padding, marginaler, skuggning etc - det sätter jag här.
*/
#main {
	background-color:#ffffff;
    padding: 1.5em;
    margin-top: 65px;
	border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0,0,0,0.7);
}

/*
Jag tykcer botten-marginalerna för rubrikerna h2-h4 är för stora, så jag minskar de lite. Annars ser
man knappt att de är rubriker för de <section> som därefter följer.
*/
#main h2, h3, h4 {
	margin-bottom:0.25em;
}

/*
Även paragraferna i main justerar jag lite: för stora avstånd tycker jag.
*/
#main p {
	margin-top:0.5em;
}

/*
På sidan User Guide så finns det en meny högst upp med anchor-länkar. Med dessa navigerar man alltså runt på den aktuella
sidan. Då den är ganska stor så valde jag att INTE ha den fixerad däruppe hela tiden, som huvudmenyn, utan att den endast
ligger högst upp. Det innebär att jag löpande på sidan har "Back to top"-länkar, som då gör att man hoppar upp högst upp igen.

Ett problem med dessa är dock att jag allra högst upp har en panel med huvudmenyn. Det innebär att dessa hopp internt på en sida
gör att rubriken då hamnar UNDER det gröna fältet överst, vilket vi inte alls vill ha. För detta finns 'scroll-margin-top', som
är en standard i dagens CSS (och som varit det i mååånga år).
*/
#userguide section {
	scroll-margin-top:100px;
}

/*
När man hoppar runt i User guide så vill man kanske snabbt åter till huvudmenyn. Då finns 'back to top'-ankarlänkar redo.
De ser lite annorlunda ut.
*/
.back-to-top {
    display: inline-block;
    margin-left: 1em;
	margin-bottom:0.5em;
    color: #306040;
    text-decoration: none;
    font-size: 0.9em;
}

/*
På sidan där man laddar ner filer så finns det tabeller: de vill jag ska se lite annorlunda ut, så jag skapar table-stilar
för just den sidan (dvs inom download-id-taggen)
*/
#download table {
	border-collapse: collapse;
	margin: 1em 0;
}

#download caption {
	caption-side: top;
	text-align: left;
	font-weight: bold;
	margin-bottom: 0.5em;
}

#download th, td {
	padding: 0.6em 0.8em;
	border: 1px solid #ccc;
	text-align: center;
}

/*
Knapparna för att ladda ner filer är avstängda, ända tills man visat att man är en människa.
*/
#download button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
Threadle.CLIconsole är ett programmeringsspråk, så för att markera där jag skriver om kod generellt så
har jag dessa pre-taggar, som då är block-element. För kod i texten använder jag dock <code>
*/
pre {
	margin: 0.2em;
	padding: 0.5em;
	border: 1px dotted #ccc;
	background-color: #ffffc0;
}



/*
Längst ner på varje sida (dvs på index.php-sidan) har jag en <footer> som även den får en 'footer'-id.
Här blir stilen lite annorlunda: färg och bakgrund lite annorlunda och något mindre storlek.
Margin-bottom är viktig här: då skapas en luftlucka mellan main-panelen och slutet på sidan, så att det
ser bättre ut.
*/
#footer {
	background-color:#f0f0f0;
    text-align: center;
    font-size: 0.9em;
    color: #666;
    padding: 0.25em;
}





/*
Styckena i fottern bör inte ha några marginaler ovan
*/
#footer p {
	margin:0.5em;
}

/*
Det finns länkar i footern som får lite annan färg, plus att de blir understrykna.
*/
#footer a {
	color:#666;
	text-decoration:underline dashed 1px;;
}

/*
På cli-command-sidan, där alla kommandon till Threadle visas, så använder jag dl/dt/dd,
vilka just används för listor med definitioner.
*/
#commands dt {
	font-family: 'Courier New', monospace;
	font-size:1.1em;
	padding-top:1em;
	scroll-margin-top: 80px;
}

/*
Jag skapar en klass för bilder som används i main-fältet
Bredd är 100% men jag styr upp det med max-width i ytterligare klasser
*/
main figure img {
    width: 100%;
    height: auto;
    border-radius: 4px; 
}

/*
För höger-marginal bilder, och med fina marginaler
*/
main figure.image-right {
    float: right;
    margin: 0 0 1em 1em;
}

/*
För vänster-marginal bilder, och med fina marginaler åt andra hållet
*/

main figure.image-left {
    float: left;
    margin: 0 1em 1em 0;
}

/*
En klass för bilder vars bredd max ska vara 10%
*/
.w10p {
	max-width: 10%;
}

/*
En klass för bilder vars bredd max ska vara 20%
*/
.w20p {
	max-width: 20%;
}

/*
En klass för bilder vars bredd max ska vara 30%
*/
.w30p {
	max-width: 30%;
}