@charset "utf-8";

* {
    box-sizing:border-box; 
}

[class *="size-"]
{
    width: 98%;
    float: left;
    margin: 1%;

}

@media only screen and (min-width:768px)
{
    .size-1{width:31.3%;}
    .size-2{width:64.6%;}
}

body {
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1400px;
    margin: 0 auto;

}

nav{
    background-color: #999;
    padding: 5px;
}

header, footer{
    background-color: #666;
    padding: 5px;
}

header h1{
    font-size: 24px;
    text-align: center;
    color: white;
    margin: 20px 0 20px 0;

}

footer p{
    color:white;
}

article{
    padding:5px;
    float:left;
}

.first, .second{
    float: left;
    margin: 0 2.5%;
    width:45%;
}

footer{
    clear:both;
}
h1{
    font-size: 24px;
    text-align: center;
    margin: 20px 0 20px 0;
}

h2{
    font-size: 18px;
    text-align: center;
    margin:20px 0 20px 0;
}

button{
    background-color: #dfdfdf;
    border-radius: 5px;
    padding: 10px;
}

/*Här slutar vanliga CSS inställningar*/

/* Inställningar för menyn*/
aside a:link, a:visited{
    background-color: #999;
    text-decoration: none;
    color: black;
    border-radius: 5px;
    padding: 5px;
}

aside a:hover {
    background-color: #999;
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    color: white;
}

aside label{
    display: block;
    padding: 8px 30px;
    margin: 0 0 2px 0;
    cursor: pointer;
    background-color: black;
    color:#FFFFFF;
    border-radius: 3px;
    transition: ease .5s;
    position: relative;
}


aside label:hover { 
    background-color: #ADCCFA;
}

aside label::after {
    content: '+'; 
    font-size: 22px; 
    font-weight: bold;
    position: absolute; 
    left: 10px;
    top: 2px;
}

/*Efter första etiketten, efter input som är ikryssad*/
aside input:checked + label::after {
    content: '-';
    right: 14px; 
    top: 3px;
}

aside .content {
    background-color: #FAFAFA; 
    padding: 10px 25px;
    border: 1px solid #A7A7A7;
    margin: 0 0 1px 0;
    border-radius: 3px;
}

/* göm första klassen content, efter första labeln, efter input */ 
aside input + label + .content {
    display: none;
}

aside input:checked + label + .content {
    display: block;
}

aside input {
    display: none;
}

/*Här slutar inställningarna för menyn */


/* -- Inställningar specifika för formuläret new.php -- */ 
article fieldset{
    width:100%;
}

article input[type=text], textarea{
    width: 100%; 
    padding: 12px;
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    resize: vertical;
}

article input[type=submit] { 
    background-color: #DFDFDF; 
    color: black;
    padding: 12px 20px; 
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

article select{
    width:100%; 
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px; 
    box-sizing: border-box; 
    resize: vertical;
}

/*Här slutar inställningarna för formuläret new.php -- */


/* -- Inställningar för filen allfilms.php --*/
#container { 
    width:98%; 
    float:left;
    margin:5px;
    background-color: #CCCCCC;
    border-radius:10px;
    padding: 10px;
}

table {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 16px;
    border-collapse: collapse;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

table, th, td {
border: none;
}

th, td {
    height: 25px;
    text-align: center;
    padding: 5px;
}
tr:nth-child(even){
    background-color: #E6F2FF;
}
th {
background-color:black;
color: #FFFFFF;
}
/*Här slutar inställningarna för filen allfilms.php -- */