/*  Ladda fonter  */
/*----------------------------------------*/

/** Skrivstil **/
@font-face {
    font-family: MasterOfBreak;
    src: url(other/fonter/master_of_break.otf);
}

@font-face {
    font-family: ChopinScript;
    src: url(other/fonter/ChopinScript.otf);
}

@font-face {
    font-family: CatherineDeBeaumont;
    src: url(other/fonter/CatherineDeBeaumont.ttf);
}

@font-face {
    font-family: AliciaHighlands;
    src: url(other/fonter/AliciaontheEnchantedHighlands.ttf);
}

/** Gotic style **/
@font-face {
    font-family: MorrisRomanBlack;
    src: url(other/fonter/MorrisRomanBlack.otf);
}

/* Ikoner */
@font-face {
    font-family: MultimediaIcons;
    src: url(other/fonter/multimedia_icons.ttf);
}

@font-face {
    font-family: FontAwesome;
    src: url(other/fonter/FontAwesome.otf);
}

/*  Meny-raderna  */
/*---------------------------------------*/

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #8c8c8c;
    font-size: 1.1em;
    font-family: Helvetica, sans-serif;
}

nav li {
    float: left;
}

nav li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/** Ändrar färg när muspekaren är över menyn **/
li a:hover, .dropdown:hover .dropbtn {
    background-color: #f47e80;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
	background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}


/* Knappar */
/*--------------------------------------------*/

.button {
    border-width: 4px;
    border-color: #737373;
    padding: 15px 32px;
    display: inline-block;
    margin: 15px 15px 15px 15px;
    border-radius:0.5em;
    background-color: #8c8c8c;
    color: white;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    font-family: Helvetica, sans-serif;
}

button{
    border-width: 0px;
    margin: 0px 2px;
    padding: 0px;
    border-radius: 0px;
 	background-color: rgba(0,0,0,0.0);
    color: rgb(22, 39, 43);
}

button:hover, .button:hover{
background-color: #f47e80;
}

div.knappar{
	display: flex;
	border: 0px;
}

i, span {
	width: 22px;
	font-size: 2em;
}



/* Boxdesign */
/*--------------------------------------------*/

div.outerbox {
	float: left;
	background-color: #e9fbff;
	border-radius: 10px;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
	margin: 40px 20px;	
}

/*Rubrikraden */

div.outerbox header {
  background: #80e5ff;
  padding: 10px 20px 0px 20px;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: space-between;
}


/* Rubrik för rubrikraden */
div.outerbox header h2{
	font-family: MasterOfBreak;
	font-size: 2.4em;
	margin: 5px 5px 5px 5px;
    padding: 7px 0px 0px 0px;;
    font-weight: 400;
    display: inline-block;
}


/* Rubrik i en textarea för rubrikraden */
div.outerbox header textarea{
	font-family: MasterOfBreak;
	font-size: 2.4em;
	font-weight: 400;
	background-color:rgba(0,0,0,0.0);
	width: 300px;
	height: 40px;
	border: 0px;
	padding: 15px 0px 5px 20px;
}


/*Text placerad till höger i rubrikraden */
div.outerbox header textarea.text{
	margin-bottom: 15px;
	height: 34px;
	width: 336px;
	background-color:rgba(0,0,0,0.0);
	font-size:1.05em;
	font-family: Helvetica, sans-serif;
}

div.outerbox header p{
	width: 300px;
	font-size: 1.05em;
	text-align: right;
}

/* Liten textruta placerad till höger*/
div.outerbox header textarea.minitextruta{
width: 50px;
}

/*Själva boxen */

div.innerbox {
	padding: 10px 20px 20px 20px;
}

/* id att använda för inaktiverade saker */
#Aktivera{ opacity: 0.47; }
/*	background-color: lightgrey;
	color: #bdbbbb;
	border-color: #bdbbbb; */
	
/* id att använda för inaktivera RPM-block */
#AktiveraRPM{ opacity: 0.2; }


/*divs för att dela upp boxen i kolumner */
div.colII{
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

div.colIII{
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

/*divs för att hålla ihop element och styra hur många kolumner de tar upp */
div.groupIcol{
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	column-span: 1;
	-webkit-column-span: 1; /* Chrome, Safari, Opera */   
}

div.groupallcols{
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	column-span: all;
	-webkit-column-span: all; /* Chrome, Safari, Opera */   
}


/* Rubriker */
/*--------------------------------------------*/

/** Huvudrubrik mellan menyerna **/
h1{	
	text-align:center;
	font-family: Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	margin: 10px;
	color: #8c8c8c;
}

/* Rubrik i boxen */
h3{
	font-family:MasterOfBreak;
	font-size: 2em;
	font-weight: 100;
	padding: 25px 5px 5px 5px;
	margin: 0px 0px 0px 0px;
}

h4{
        font-family:Helvetica, sans-serif;
        font-size: 1.1em;
        font-weight: bold;
        padding: 5px 5px 0px 5px;
	margin: 10px 0px 0px 0px;
}

h5{ 
	margin: 5px 0px 0px 0px;
	font-weight: normal;
}

/* Använd när jag vill göra en snygg rubriksättning mellan boxar */

div.grupprubrik{
    float: left;
	width: 100%;
	display: flex;
	align-items: flex-end;
}


div.grupprubrik textarea{
	background-image: url("bilder/line.png");
	background-repeat: repeat-x;
	background-position: left bottom;
	font-size: 1.8em;
    font-family: MorrisRomanBlack;
    height: 23px;
    padding-left: 10px;
    text-align: center;

}

/** Utskrift **/
/*--------------------------------------------*/

.utskrift h2{
	font-size:1.9em;
	margin: 50px 0px 2px 0px;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
}

.utskrift h3{
	font-family:Georgia, serif;
	font-size:1.8em;
	padding: 25px 5px 5px 15px;
}

.utskrift{
	font-size:13px;
	font-family:"Times New Roman", Times, serif;
 	line-height:100%;
	width: 15cm;
	margin-left: 2cm;
}


/** Övriga gemensamma CSS mellan modulerna **/
/*--------------------------------------------*/

body{
	font-family: Helvetica, sans-serif;
	font-size: 0.9em;
}

form{
	display: inherit;
}

/* standardutseende på en tabell */
table {
	margin-bottom: 30px;
}

table, 
tr, 
td, 
th{
	border: 1px solid #65abbd;
	border-collapse: collapse;
	padding: 5px 5px;
}

th{ background-color: #80e5ff; }

tr:nth-of-type(even){ background-color:#f7fcfd }

textarea{
    font-family: Helvetica, sans-serif;
	resize: none;
	font-size: 1.0em;
	background-color:rgba(0,0,0,0.0);
}

p{
	margin-top: 0px;
}

footer{
	display: block;
	width: 100%;
}

/*används på de boxar där jag kan göra nya saker */
div.ny input[type=text], 
div.ny textarea {
	 background-color:rgba(0,0,0,0.0);
	border-color: #80e5ff;
}

/*Använder den för alla boxar som visar buggar
  Tillfälligt i main så länge modulerna utvärderas,
  flytta senare till admin */

div.buggar textarea{
	border-width: 2px;
	border-color: #80e5ff;
}

div.buggar .one, 
div.buggar .two{ 
	height: 120px; 
}

div.buggar .two{ width: 500px; }

div.kommentarer{ margin-top: 40px;}

div.kommentarer table{
	width: 650px;
}

div.kommentarer td.col1{
	text-align: center;
	padding: 10px 5px;
}

div.kommentarer textarea{
	height: 120px;
	width: 500px;
        border-width: 2px;
        border-color: #80e5ff;
}

/* vilken/vilka moduler använder jag den här till? */

#opacity{	background-color:rgba(0,0,0,0.0);}

/** Specifikt för inloggningen **/
/*--------------------------------------------*/

/* Felmedelande från inloggningen */
.error { color: red; }