/*Nollställer marginaler*/
* { 
    margin: 0; 
    padding: 0; 
}
/*s141490 Christina Parisi*/

/*Stylar länkar*/
a:link {
    color: #333333; 
    text-decoration: underline;
}
a:visited { 
    color: #333333; 
    text-decoration: underline;
}
a:active { 
    color: #333333; 
    text-decoration: underline;
} 
a:hover { 
    color: rgba(173, 166, 166, 0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
}

a:visited {
    text-decoration: underline;
}

/*Stylar all brödbext*/
p {
    font-family: serif;
    font-size: 14pt;
}

/*Stylar body*/
body {
    background: url(images/background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/*Stylar header*/
header {
    width: auto;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.8);
    margin: auto;
    margin-top: 50px;
    padding-top: 15px;
}

/*Stylar rubrik i header*/
h1 {
    margin-top: 30px;
    margin: 30px auto auto auto;
    text-align: center;
    font-family: avenir, sans-serif;
    font-size: 25pt;
}

/*Stylar bilder i header*/
header #lus1 {
    float: left;
    margin: 10px 50px 10px 40px;
}

header #lus2 {
    float: right;
    margin: 10px 40px 10px 50px;
}

/*Stylar wrapper*/
#wrapper {
    width: auto;
    margin: auto;
}

/*Stylar textrutan*/
#info {
    width: 900px;
    height: auto;
    text-align: left;
    margin: 10px auto 10px auto;
    padding: 5px;
    border-style: solid;
    border-radius: 10px;
    border-color: rgba(255, 255, 255, 0.8);
    border-width: medium;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: rgba(255, 255, 255, 0.8);
}

/*Stylar bilder i första textrutan*/
#luskammning1 {
    float: left;
    margin: auto 10px 0px 0px;
    border-radius: 5px;
}

#luskammning2 {
    float: right;
    margin: auto 0px 0px 10px;
    border-radius: 5px;
}

/*Stylar rutan som innehåller rullgardinsmeny, alternativ för att visa/dölja och diagram*/
#info_diagram {
    width: 900px;
    height: 550px;
    margin: 10px auto 10px auto;
    padding: 5px;
    border-style: solid;
    border-radius: 0.8em;
    border-color: rgba(255, 255, 255, 0.8);
    border-width: thin;
    background-color: rgba(255, 255, 255, 0.8);

}

/*Stylar rullgardinsmenyer*/
form {
    margin: 10px 5px 10px 5px;
}

label {
    font-family: sans-serif;
    font-weight: bold;
    margin: 5px 5px 0px 10px;
}

select {
    height: 25px;
    border-radius: 5px;
    border-color: rgba(255, 255, 255, 0.8);
    border-width: thin;
    background-color: rgba(158, 163, 162, 0.8); 
}

/*Stylar sektionen därval finns för att visa eller dölja*/
#hide_show {
    float: left;
    width: 220px;
    margin: 20px 5px 10px 10px;
}

.visa {
    padding-right: 5px;
    float: right;
}

.hide {
    padding-right: 5px;
    float: right;
}

#fsk {
    background-color: #f052f0;
    padding: 5px;
}

#f3 {
    background-color: #e69b29;
    padding: 5px;
}

#a46 {
    background-color: #08d6d6;
    padding: 5px;
}

/*Diagrammets placering*/
#svg {
    float: right;
    margin: auto 10px auto auto;
}

/*Stylar texten under diagrammet*/
#beskrivning {
    width: 560px;
    display: block;
    float: right;
    margin: 0pt 10pt 5pt 5pt;
    font-family: serif;
    font-size: 12pt;
    font-style: italic;

}

/*Stylar informationen som kommer vid klick på respektive kategori under diagrammen*/
#details {
    float: left;
    margin: 20px 0px 10px 20px;
}

h2 {
    font-family: sans-serif;
}

#details ul li {
    list-style: none;
    font-family: serif;
    font-size: 14pt;
}

span {
    font-family: serif;
    font-size: 15pt;
    font-weight: bold;
}

/*Stylar linjerna i diagrammen för att de inte ska bete sig tokigt*/
path {
    stroke: #777777;
    stroke-width: 2;
    fill: none;
}

/*Stylar diagrammen*/
.axis path, .axis line {
    fill: none;
    stroke: #777777;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.legend {
    font-size: 16px;
    font-weight: bold;
    text-anchor: middle;
}