@charset "utf-8";
/* CSS Document
Inställningar för responsibiliteten, brytpunkt 768 px */

*{
	box-sizing: border-box;
}

/*För mobiler*/
[class*="size-"]{
	width: 98%;
	float: left;
	margin: 1%;
}

.delete{
	background-color: #d11a2a;
    padding: 8px 12px;
    color: white;
    text-decoration: none;
    border-radius: 6px;
	transition: transform 0.5s ease, color 0.5s ease;
}

.delete:hover{
	background-color: #AD9EED;
	color: black;
	transform: translateY(+5px);
}

/*För större skärmar */
@media only screen and (min-width:768px){
	.size-1 {width: 31.3%;}
	.size-2 {width: 64.6%;}
}

/* vanliga CSS-inställningar*/
body {
    font-size: 16px;
    font-family: Tahoma, Geneva, 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;
}

/* används för att strukturera filminfo + bild */
.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 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: #EEF2FF;
}

th {
    background-color: black;
    color: #FFFFFF;
}

/* -- Här slutar inställningarna för filen allfilms.php
Đây là nơi cài đặt cho tệp allfilms.php kết thúc -- */

/* -- Dessa inställningar är till för att styra menyn -- */



/* -- Các cài đặt này dùng để điều khiển menu -- */

aside a:link, a:visited {
    background-color: #DFDFDF;
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    color: black;
}

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;
    border-radius: 30px;
    color: #FFF;
    transition: ease .5s;
    position: relative;
}

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

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 10px 0;
    border-radius: 3px;
}

/* göm första klassen content, efter första labeln, efter input 
ẩn nội dung lớp đầu tiên, sau nhãn đầu tiên, sau đầu vào */
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 fomulä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;
		
}