The following files exists in this folder. Click to view.
stilmall.css859 lines UTF-8 Unix (LF) 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859
@charset "utf-8";
/*
Gör om med
http://www.colorcombos.com/color-schemes/124/ColorCombo124.html
Nya färger
#E8D0A9 orange, tan
#B7AFA3 nomad, orange
#C1DAD6 blue green, jetstream
#F5FAFA baby blue
#ACD1E9 regent st blue
#6D929B gothic light blue
Befintliga färger:
#fff; // Body
#000;
#333;
#999;
#DDD; // Bakgrund
#666
#ccc
#f00
#933
Grymt många formateringar som inte används.
*/
form {
background: lightgray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
counter-reset: fieldsets;
padding: 20px;
width: 600px;
margin: 0 0 20px 20px;
}
form fieldset {
border: none;
margin-bottom: 10px;
}
form fieldset:last-of-type {
margin-bottom: 0;
}
form ol li {
background: #b9cf6a;
background: rgba(255,255,255,.3);
border-color: #e3ebc3;
border-color: rgba(255,255,255,.6);
border-style: solid;
border-width: 2px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form ol ol li {
background: none;
border: 0;
float: left;
}
form label {
float: left;
font-size: 13px;
width: 150px;
}
form fieldset fieldset label {
background:none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form fieldset fieldset label:hover {
cursor: pointer;
}
form input:not([type=radio]),
form textarea {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form select {
background: #ffffff;
border: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form input:not([type=submit]):focus,
form textarea:focus {
background: #eaeaea;
}
form input[type=radio] {
float: left;
margin-right: 5px;
}
form button {
background: grey;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
color: #ffffff;
display: block;
font: 18px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
margin: auto;
padding: 7px 25px;
text-shadow: 0 1px 1px #000000;
text-transform: uppercase;
}
form button:hover {
background: black;
cursor: pointer;
}
p.mess {
color: #ff0000;
padding: 10px 0 0 0;
text-shadow: 1em 1em 1em #000000;
font-size: 12px;
}
/* CSS Document */
body {
font: 85%/1.4 Karla, Calibri, Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0;
padding: 0;
color: #000;
}
iframe .youtube {
allowfullscreen;
frameborder: 0;
}
address {
color: #333;
margin-top: 0;
/* om du tar bort toppmarginalen kringgår du ett problem där marginaler kan försvinna från sitt innehållsblock. Bottenmarginalen som finns kvar håller den undan från efterföljande element. */
padding-right: 15px;
padding-left: 15px;
/* om du lägger till utfyllnaden på sidorna av elementen i blocken, i stället för i blockelementen själva, slipper du all rutmodellsmatematik. Du kan även som alternativ metod använda ett kapslat block med utfyllnad på sidorna. */
font-style: italic;
}
.slide {
padding: 1px;
border: 1px dotted #aaa;
max-width: 100%;
/*
max-width: 100%;
padding: 10px 0 0 0;
width:100%;
border: 2px;
max-width:600px;
*/
}
/* ~~ Element-/taggväljare ~~ */
ul, ol, dl {
/* På grund av skillnader mellan webbläsare är det bäst att nollställa utfyllnad (padding) och marginal (margin) i listor. För att få det konsekvent kan du ange värdena du vill ha antingen här eller i listobjekten (LI, DT, DD) som de innehåller. Kom ihåg att det du gör här överlappar till navigeringslistan om du inte skriver en mer specifik väljare. */
padding: 0;
margin: 0;
}
ul.checklist{
list-style-type: none;
margin: 0 -20px;
}
p {
color: #333;
margin-top: 0;
/* om du tar bort toppmarginalen kringgår du ett problem där marginaler kan försvinna från sitt innehållsblock. Bottenmarginalen som finns kvar håller den undan från efterföljande element. */
padding-right: 5px;
padding-left: 5px;
/* om du lägger till utfyllnaden på sidorna av elementen i blocken, i stället för i blockelementen själva, slipper du all rutmodellsmatematik. Du kan även som alternativ metod använda ett kapslat block med utfyllnad på sidorna. */
}
.codeImg {
max-width: 100%;
padding: 0;
}
a img {
/* den här väljaren tar bort den blå kanten som visas i vissa webbläsare runt en bild när den omges av en länk */
border: none;
}
.img {
max-width: 100%;
padding: 10px 0 10px 0;
}
.image {
padding: 10px 0 10px 0;
width: 100%;
max-width: 100%;
border: none;
}
/* ~~ Formateringen av webbplatsens länkar måste förbli i den här ordningen – inklusive gruppen av väljare som skapar hovringseffekten. ~~ */
a:link {
color: #333;
text-decoration: underline;
/* såvida du inte formaterar dina länkar så att de ser extremt unika ut, är det bäst att använda understrykning för snabb visuell igenkänning */
}
a:visited, a:active, a:focus {
color: #333;
text-decoration: underline;
}
a:hover {
/* den här gruppen väljare ger den som använder tangentbord samma hovringsupplevelse som den som använder mus. */
text-decoration: none;
}
/* ~~ Den här behållaren med fast bredd omger alla övriga block ~~ */
.container {
width: 990px;
/* 1240 */
background: #FFF;
margin: 0 auto;
/* det automatiska värdet på sidorna, tillsammans med bredden, centrerar layouten */
border: 1px solid #999;
/*border-bottom: 0px solid #ccc;*/
/*
-moz-box-shadow: 0px 0px 5px 5px #888;
-webkit-box-shadow: 0px 0px 5px 5px#888; */
box-shadow: 0px 0px 5px 5px #999;
}
/* ~~ Du anger inte någon bredd för sidhuvudet. Det sträcker sig över layoutens hela bredd. ~~ */
header {
background: #008200;
/*background-image:url(bak1.jpg);*/
height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 36px;
font-weight: bold;
color: white;
padding: 12px 20px 12px 20px;
}
header a:link, a:visited, a:active, a:focus {
color: #333;
text-decoration: none;
}
.imgright {
float: right;
margin: 0px 0px 15px 15px;
}
/* meny */
#menycontainer {
border-bottom: 0px solid #666666;
background: #000;
}
#menycontainer ul {
padding: 0.5em 0;
margin: 0;
}
#menycontainer li {
margin-left: 0.2em;
margin-right: 0.2em;
display: inline;
list-style: none;
}
#menycontainer li a {
text-decoration: none;
padding: 0.5em 1em;
margin-left: 0;
background: #ccc;
border: 1px solid #666666;
font-weight: bold;
}
#menycontainer a:link {
color: #000000;
}
#menycontainer a:visited {
color: #000000;
}
#menycontainer a:hover {
background: #000;
color: #ffffff;
}
#menycontainer a#current {
background: #fff;
border-bottom: 1px solid #fff;
color: #000000;
}
/* ~~ Det här är kolumnerna för layouten. ~~
1) Utfyllnad (padding) anges bara i topp och/eller botten på blockelementen. Elementen i de här blocken har utfyllnad på sidorna. Detta besparar dig all "rutmodellsmatematik". Kom ihåg att om du lägger till någon utfyllnad eller kant på sidorna på själva blocken, läggs detta till bredden som du definierar och bildar den "totala" bredden. Du kan också välja att ta bort utfyllnaden på elementet i blockelementet och placera ett andra blockelementet inuti det utan någon bredd och med den utfyllnad som designen kräver.
2) Ingen marginal har angetts för kolumnerna eftersom alla är flytande. Om du måste lägga till marginal ska du undvika att placera den på den sida som du flyter mot (t.ex. en högermarginal på ett block som flyter åt höger). Ofta kan du använda utfyllnad i stället. För block där den här regeln måste brytas bör du lägga till deklarationen display:inline i blockelementets regel för att motverka ett fel där marginalen fördubblas i vissa versioner av Internet Explorer.
3) Eftersom klasser kan användas flera gånger i ett dokument (och ett element kan också ha flera tillämpade klasser), har kolumnerna tilldelats klassnamn i stället för ID:n. Två sidospaltsblock kan t.ex. staplas om det behövs. De kan mycket enkelt ändras till ID:n om det är vad du föredrar, så länge du bara använder dem en gång per dokument.
4) Om du hellre vill ha navigeringen till vänster än till höger låter du helt enkelt de här kolumnerna flyta åt motsatt håll (längst till vänster i stället för höger) så återges de i omvänd ordning. Det är onödigt att flytta runt på blocken i HTML-källan.
*/
.sidebar1 {
float: left;
width: 210px;
background: #fff;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 570px;
/* 820 */
float: left;
}
.content_full {
padding: 10px 0;
width: 770px;
/* 820 */
float: left;
}
.sidebar2 {
float: right;
width: 210px;
background: #fff;
padding-bottom: 10px;
}
aside {
float: left;
width: 210px;
background: #fff;
padding: 10px 0;
}
/* ~~ Den här grupperade väljaren anger listorna i innehållsområdet ~~ */
.content ul, .content ol, .content_full ul, .content_full ol {
padding: 0px 15px 15px 40px;
/* den här utfyllnaden (padding) speglar utfyllnaden åt höger i rubrikerna och styckelinjen ovan. Utfyllnad placerades längst ned för att få mellanrum mellan andra element i listorna och till vänster för att skapa indraget. Detta kan du anpassa efter egna önskemål. */
}
/* ~~ Navigeringslistformaten (kan tas bort om du väljer att använda en fördefinierad flytande popup-meny som Spry) ~~ */
nav ul {
list-style: none;
/* det här tar bort listmarkeringen */
/*border-top: 1px solid #666; det här skapar den övre kanten för länkarna – alla andra läggs in med en nedre kant på LI */
margin: 15px;
/* det här skapar utrymmet mellan navigeringen i innehållet nedan */
width: 178px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
nav ul li {
border-bottom: 1px solid #666;
/* det här skapar knappavståndet */
}
nav ul a, nav ul a:visited, nav ul a:link {
/* genom att gruppera de här väljarna ser du till att länkarna behåller sitt knapputseende även sedan de besökts */
padding: 3px 1px 3px 5px;
display: block;
/* det här anger länkblocksegenskaperna och får det att fylla hela den LI som det ingår i. Detta får hela området att reagera på ett musklick. */
text-decoration: none;
background: white;
}
nav ul a:hover, nav ul a:active, nav ul a:focus {
/* det här ändrar bakgrunds- och textfärgen för både mus- och tangentbordsanvändare */
background: #FC3;
color: #000;
text-decoration: none;
}
/* ~~ Sidfoten ~~ */
footer {
padding: 10px 0;
background: #fff;
position: relative;
/* det här aktiverar IE6 hasLayout att rensa ordentligt */
clear: both;
/* den här rensningsegenskapen tvingar behållaren att läsa av var kolumnerna slutar och innesluta dem */
border-top: 1px solid #ccc;
}
/* ~~ Olika float/clear-klasser ~~ */
.fltrt {
/* den här klassen kan du använda för att låta ett element flyta åt höger på sidan. Det flytande elementet måste komma före elementet som det ska ligga bredvid på sidan. */
float: right;
margin-left: 8px;
}
.fltlft {
/* den här klassen kan du använda för att låta ett element flyta åt vänster på sidan. Det flytande elementet måste komma före elementet som det ska ligga bredvid på sidan. */
float: left;
margin-right: 8px;
}
.clearfloat {
/* den här klassen kan du placera på en <br /> eller tomt blockelement som sista element efter den sista flytande blocken (i behållaren, .container) om sidfoten tas bort ur behållaren */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
/*HTML 5-stöd – Anger nya HTML 5-taggar till display:block så att webbläsare vet hur taggarna ska återges. */
header, section, footer, aside, nav, article, figure {
display: block;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
/* om du tar bort toppmarginalen kringgår du ett problem där marginaler kan försvinna från sitt innehållsblock. Bottenmarginalen som finns kvar håller den undan från efterföljande element. */
padding-right: 10px;
padding-left: 10px;
color: white;
/* om du lägger till utfyllnaden på sidorna av elementen i blocken, i stället för i blockelementen själva, slipper du all rutmodellsmatematik. Du kan även som alternativ metod använda ett kapslat block med utfyllnad på sidorna. */
}
h1 {
border: 1px solid black;
color: black;
background-color: #ccc;
margin: 5px 0px 0px 0px;
font-size: 36px;
letter-spacing: 2px;
text-transform: uppercase;
}
h2 {
border: 1px solid black;
background-color: #008200;
font-weight: 400;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 5px 10px 5px;
}
h3 {
border: 1px solid black;
background-color: #008200;
margin: 20px 15px 10px 0px;
letter-spacing: 1px;
font-size: 18px;
}
h3.uppgift{
border: 1px solid black;
background-color: orange;
}
h4 {
border: 1px solid #666;
background-color: #eee;
margin: 10px 150px 10px 0px;
}
pre {
font-size: 11px;
}
/* JAg har flyttat kodräkningen från pre- till div-taggen */
div {
padding: 0px 0px 0px 0px;
margin: 0px;
}
.logga {
width: 750px;
float: left;
}
.datumtidvecka {
font: 12px Calibri, Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
width: 130px;
float: right;
background-color: rgba(200, 200, 200, 0.3);
margin-top: 6px;
}
.rubrikrad {
padding: 3px 1px 3px 5px;
background-color: #008200;
color: white;
font-weight: 400;
font-family: Verdana, Geneva, sans-serif;
}
.disconnected {
padding: 3px 1px 3px 5px;
display: block;
/* det här anger länkblocksegenskaperna och får det att fylla hela den LI som det ingår i. Detta får hela området att reagera på ett musklick. */
text-decoration: none;
background-color: #EEE;
color: black;
font-style: italic;
font-size: 11px;
font-family: Verdana, Geneva, sans-serif;
}
.box {
border: 1px solid #aaa;
/* padding: 0px;*/
padding: 20px 20px;
margin: 10px 0px;
/*
background-image: url(bak2.jpg);
background-repeat: repeat-x;
*/
}
.copy{
background-color: #F7F6E2;
border: 2px solid red;;
}
.ruta {
border: 1px solid #aaa;
margin: 15px 0px 10px 15px;
padding: 0 0 0 10px;
width: 178px;
float: left;
}
.bg-green {
background-color: #6C6;
}
.bg-orange {
background-color: #FC3;
}
.bg-blue {
background-color: #39F;
}
.bg-lightgrey {
background-color: #ddd;
}
.bg-lightbrown {
background-color: #963;
}
.bg-lightgreen {
background-color: #CF6;
}
.bg-peachcolor {
background-color: #F96;
}
.bg-lightturquoise {
background-color: #9CC;
}
.bg-red {
background-color: #f66;
}
.bg-lightpurple {
background-color: #96F;
}
.centrerat {
text-align: center;
}
/*
hr {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
width: 90%;
}*/
/*
hr:before {
/* Not really supposed to work, but does
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}*/
.noborder {
border-width: 0px;
}
.kod {
color: #000;
margin: 15px;
padding: 5px 15px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 85%;
border: 1px solid #666;
background-color: #FFC;
}
.webbsida {
color: #000;
margin: 15px;
padding: 5px 15px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 85%;
border: 1px solid #666;
background-color: #dfd;
}
.viktigt {
color: #000;
margin: 15px;
padding: 5px 15px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 85%;
border: 1px solid #666;
background-color: #f99;
}
.currentpart {
font-weight: bold;
}
.marginleft15px {
margin-left: 15px;
}
.vit {
color: white;
}
.red {
color: red;
}
.green {
color: green;
}
::selection{
color: #2c3132;
background: #faef79;
}
/* Tabell enkel */
.utskrift table {
margin: 5px;
width: auto;
min-width: 500px;
border-collapse: collapse;
border: 2px solid black;
font-size: 11px;
}
.utskrift tr:nth-child(even) {
background: #EEE;
}
.utskrift td {
border: 1px solid black;
padding: 5px;
vertical-align: top;
}
.utskrift td p {
padding: 2px 5px 5px 5px;
font-size: 12px;
}
.utskrift th {
background: #DDD;
border: 1px solid black;
border-bottom: 2px solid black;
padding: 1px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
/* Tabell kunskapskrav */
table.kunskapskrav {
margin: 5px;
width: auto;
min-width: 500px;
border-collapse: collapse;
border: 2px solid black;
font-size: 11px;
}
.kunskapskrav tr:nth-child(even) {
background: #EEE;
}
.kunskapskrav td {
border: 1px solid black;
padding: 1px;
vertical-align: top;
}
.kunskapskrav p {
padding: 2px 5px 5px 5px;
font-size: 12px;
}
.kunskapskrav th {
background: #DDD;
border: 1px solid black;
border-bottom: 2px solid black;
padding: 1px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
/* utskrift */
table.utskrift {
margin: 10px;
/* 5 default */
width: auto;
width: 100%;
/* min-width: 500px;*/
border-collapse: collapse;
border: 2px solid black;
font-size: 12px;
}
.utskrift tr:nth-child(even) {
background: #EEE;
}
.utskrift td {
border: 1px solid black;
padding: 1px;
vertical-align: middle;
}
.utskrift p {
padding-right: 0px;
padding-right: 0px;
}
.utskrift th {
background: #DDD;
border: 1px solid black;
border-bottom: 2px solid black;
padding: 1px;
font-weight: bold;
font-size: 12px;
}
/* Veckoplaneringstabell */
table.planering {
margin: 0px;
width: 100%;
font-size: 12px;
border-collapse: collapse;
border: 1px solid black;
}
.planering td {
border: 1px solid black;
padding: 3px;
vertical-align: top;
}
.planering th {
border: 1px solid black;
padding: 3px;
font-weight: bold;
font-size: 14px;
}
.planering .week{
background-color: green;
color: white;
font-weight:bold;
}
.planering .red{
background-color: red;
color: black;
font-weight:bold;
}
caption {
font-size: 24px;
font-weight: bold;
}
tr.brown {
background-color: #C96;
}
th.kolumn1 {
width: 40px;
}
th.kolumn3 {
width: 150px;
}
.planering td:first-child {
text-align: center;
}
#canvasContainer {
width: 502px;
margin-left: auto;
margin-right: auto;
}
.canvasContainer {
width: 502px;
margin-left: auto;
margin-right: auto;
}
canvas {
border: 1px solid black;
}
.content section .planering tr .kolumn1 {
text-align: center;
}
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}