/* CSS MovieTalk */
article, aside, figure, footer, header, hgroup, menu, nav, section {
    display: block; }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Hjälplinjer under utveckling, kan aktiveras i Chrome */
/*  border: 1px solid #FF0000; */
}

/* http://www.w3schools.com/css/css_rwd_mediaqueries.asp */
[class*="col-"] {
    float: left;
    padding: 0.5em;
    width: 100%;
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 33.33%;}
    .col-2 {width: 66.66%;}
    .col-3 {width: 100%;}
}

.row:after {
    content: "";
    clear: both;
    display: block;
}
body  {
    background-color: #999999;
    font-size: 100%;
    font-family: Helvetica, Arial, Sans-serif;
}
#container  {
    background-color: #DDDDDD;
    max-width: 960px;
    margin: auto;
    padding: 10px;
}
header img  {
    margin: 10px 10px 0 10px;
    width: 230px;
    height: auto;
}
header {
    margin: auto;
    background-color: #000000;
    color: #EEEEEE;
    text-align: center;
    padding: 10px;
}
header h1.logga  {
    font-size: 3.250em;
    font-weight: bold;
    margin: 0px;
}
header h2.slogan  {
    font-size: 1.6em;  
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
    margin: 6px;
}
input[type=checkbox], input[type=radio] {
	appearance: none;
  -webkit-appearance: none;
	box-shadow: inset 0px 0px 0px 1px #e6e6e6;
	border-radius: 15px;
	background-color: #666;
	padding: 1px;
	display: inline-block;
	width: 52px;
	height: 33px;
	position: relative;
	cursor: pointer;
	transition: all .3s ease-out;
	margin: 0px 10px;
  transform: scale(1);
  -webkit-transform: scale(1); /* Adjust size here */
}
input[type=checkbox]:checked, input[type=radio]:checked {
	box-shadow: inset 0px 0px 0px 20px #53d76a;
}
input[type=checkbox]:after, input[type=radio]:after {
	content: '';
	position: absolute;
	width: 29px;
	height: 29px;
	border-radius: 15px;
	box-shadow: 0px 2px 2px 1px rgba(0,0,0,.2);
	cursor: pointer;
	background-color: #fff;
	transition: all 0.1s ease-in .1s;
}
input[type="checkbox"]:checked:after,input[type="radio"]:checked:after {
	left: 22px;
}
label {
  display: block;
  text-align:center;
  font-size: 0.8em;
  color:#FFFFFF;
	letter-spacing: 0px;
 	word-spacing: 0px;
  font-family: sans-serif;
}
.ljud {width: 100px; text-align: center;}
a:link { color: #000000; text-decoration: underline;}
a:visited { color: #000000;}
a:hover { color: #EE0000; text-decoration: none;}
a:active { color: #000000;}

/* Meny */
nav  {
    margin: 10px auto;
    background-color: #000000;
}

nav a:link { color: #EEEEEE; text-decoration: none;}
nav a:visited { color: #EEEEEE;}
nav a:active { color: #EEEEEE;}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav ul li {float: left;}

nav ul li a {
    display: inline-block;
    color: #EEEEEE;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.active {
    display: inline-block;
    color: #EEEE00;
    text-align: center;
    padding: 14px 16px;
    text-decoration: underline;
}

nav ul li a:hover {color: #EEEE00;}

nav ul li.icon {display: none;}

nav ul li.close {display: none;}

/* Form */
#contact {
    width: 65%;
    margin: auto;
}
form#contact-form {
    font-size: 1.5em;
    text-align: center;
    padding-bottom: 1em;
}
form#contact-form input {
    width: 90%;
    font-size: 1em;
    text-align: center;
    padding: 0.225em;
    margin: 0.225em 0.225em 1em 0.225em;
}
form#contact-form textarea {
    width: 90%;
    font-size: 1.2em;
    text-align: left;
    padding: 0.225em;
    margin: 0.225em;
}
form#contact-form span {
    display: block;
    color: #000000;
}
form#contact-form button {
    width: 90%;
    font-size: 1em;
    padding: 0.5em;
    background-color: #000000;
    color: #EEEEEE;
    border: 0;
}

/* Page */
h1 {
    font-size: 2em;
    margin-bottom: 1em;
    text-align: center;
}
h2 {
    font-size: 1.5em;
    line-height: 150%;
	  word-spacing: 0.188em;
    margin: 0;
}
p + h2 {
    margin-top: 1em;
}
h3 {
    font-size: 1.5em;
    line-height: 150%;
	  word-spacing: 0.188em;
    margin: 0;
}
p {
    font-size: 1.2em;
    line-height: 150%;
	  word-spacing: 0.188em;
    margin-top: 1em;
}
.menu_buttons > a {
    width: 31.3%;
    height: auto;
    padding-top: 5%;
    padding-bottom: 5%;
    text-align: center;
    font-size: 1.8em;
    float: left;
    margin: 1%;
    color: #000000;
    border: 4px solid #000000;
    text-decoration: none;
}

/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
video {
  width: 100%    !important;
  height: auto   !important;
}
.video {
    background-color: #000000;
    color: #EEEEEE;
    margin-top: 1em;
    text-align: center;
}

.video a:link { color: #EEEEEE; text-decoration: none;}
.video a:visited { color: #EEEEEE;}
.video a:hover { color: #EEEE00;}
.video a:active { color: #EEEEEE;}

.sintel {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.sintel iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.manual_img {
    width: 100%;
    height: auto;
}
figcaption {
    margin: .5em 0 1.225em 0;
}
.intro {
    font-weight: bold;
    margin: 1em auto;
    text-align: center;
}
.center {
    margin: 1em auto;
    text-align: center;
}
.radius {
    border-radius: 10px;  
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px;
}
.sponsor  {
    float: right;
    font-size: 0.750em;
    text-align: center;
    margin: 12px;
}
.appstore  {
    float: right;
}
.pts_logga {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}
a.titel {
    font-weight: bold;
    font-size: 13pt;
}
td.titel {
    font-size: 9pt;
}
ul.links {
    list-style-type: none;
    margin-bottom: 1em;
}
ul.links li {
    font-size: 1.2em;
    line-height: 150%;
	  word-spacing: 0.188em;
    margin-top: 1em;
}
table {
    margin: auto;
    width: 70%;
}
table th, td {
   border-bottom: 1px solid black;
   padding: 5px;
   word-wrap: break-word;
}
caption {
    font-size: 1.2em;
    margin-bottom: 1em;
}
table a:link { color: #000000; text-decoration: none;}
table a:visited { color: #000000;}
table a:hover { color: #000000;}
table a:active { color: #000000;}

table td.icon_movies {
    width: 40px;
}
table td.icon_flag {
    width: 50px;
}
img.icon_flag {
    width: 50px;
}
.button {
    text-align: center;
    margin-bottom: 10px;
    display: block;
    font-size: 1.5em;
    background-color: #444444;
    padding: 3px 6px 3px 6px;
    border-top: 3px solid #CCCCCC;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
    border-left: 3px solid #CCCCCC;
}
.button:link {
  color: #EEEEEE;
}
.icon_movies {
    width: 40px;
    height: auto;
}
footer {
    background-color: #000000;
    color: #EEEEEE;
    height: 3em;
}
footer p {
    font-size: 1em; 
    margin: auto;
    padding: 12px 12px 12px 12px;
}


/* When the screen is less than 768 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:768px) {

  /* Header */
  header img  {
    margin: 0;
    width: 150px;
    height: auto;
  }
  header h1.logga  {
    font-size: 2em;
    font-weight: bold;
  }
  header h2.slogan  {
    font-size: 1em;  
    margin: 0px;
  }
/* http://www.w3schools.com/howto/howto_js_topnav.asp */
  nav ul.topnav li:not(:first-child) {display: none;}
  nav ul.topnav li.icon {
    display: inline-block;
  }
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. */
  nav ul.topnav.responsive {position: relative;}

  nav ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  /* Döljer activ sida från menyn på små skärmar */
  nav ul.topnav.responsive li.active {
    display: none;
  }
  nav ul.topnav.responsive li.icon {
    display: none;
  }
  nav ul.topnav.responsive li.close {
    display: inline;
  }
  nav ul.topnav.responsive li a {
    display: block;
    text-align: center;
    font-size: 2em;
  }
  #contact {
    width: 100%;
  }
  .sponsor  {
    margin: 0;
  }
  .appstore  {
    margin-top: 0;
  }
  .menu_buttons > a {
    display: block;
    width: 100%;
    padding-top: 3%;
    padding-bottom: 3%;
    font-size: 2em;
    margin: 0.750em 0 0 0;
  }
  table {
    width: 100%;
  }
  table td.icon_movies {
    width: 20px;
  }
  .button {
    margin-bottom: 8px;
    font-size: 1em;
    padding: 3px 6px 3px 6px;
    border-top: 2px solid #CCCCCC;
    border-right: 2px solid #333333;
    border-bottom: 2px solid #333333;
    border-left: 2px solid #CCCCCC;
  }
  .icon_movies {
    width: 20px;
  }
  table td.icon_flag {
    width: 35px;
    height: auto;
  }
  img.icon_flag {
    width: 35px;
    height: auto;
  }
  td.ljud {
    width: 55px;
  }
  span.ljud {
    display: none;
  }

}