/* === COLOR PALETTE ===
Lighter blue          =  #b4c1d4;
Darker blue           =  #8596AE;
Lighter blue RGBA     =  rgb(180, 193, 212);
Darker blue RGBA      =  rgb(133, 150, 174);
*/

html,
body{
  font-family: /*'Metrophobic', */sans-serif;
  font-size: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  background: #f5f5f5 url('img/bodyTile.png') repeat-y top center;
  color: #444;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

a{
  text-decoration: none;
  color: inherit;
}

img,span{display: inline-block;}

.wrapper{
  width: 1200px;
  margin: auto;
}

#programTable {
    width: 1000px;
    margin: auto;
}

header{
  width: 100%;
  padding: 30px 0;
  background: black;
}
header .logo{float: left;}
header .logo img{
  vertical-align: middle;
  width: 220px;
  height: 75px;
}
header hgroup{
  margin-left: 2em;
  float: left;
  vertical-align: middle;
  color: white;
}
header hgroup h2{margin-top: 0;}

section.searchField{
  background: url('img/bgTile1.png') repeat-x top;
  padding-top: 8px;
  height: 67px;
}

section.progress{
  background: url('img/bgTile1.png') repeat-x top;
  padding-top: 8px;
  height: 30px;
}

/*section.searchField input[type="textfield"]{margin-top: 2px;}*/

section.searchField .icon,
section.searchField .form{float: left;}
section.searchField .icon img{
  -webkit-border-radius: 40px;
  border-radius: 40px;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  margin-right: .5em;
}
.maaling section.searchField .icon{width: 190px;}
section.searchField .field+.field{margin-left: 40px;}
section.searchField .field label{
  display: block;
  margin-bottom: 3px;
}
section.searchField .field{
  float: left;
  width: auto;
  margin-top: 6px;
}
#timeSpan + #searchButton{margin-left: 5px;}
section.searchField #showLastField{
  margin-top: 25px;
  margin-left: 40px;
}
section.searchField #searchButton{margin-top: 25px;}
section.searchField #timeSpan input{width: 80px;}
section.searchField #broadcastTime input{width: 60px;}

.maaling #nrkTable th{width: auto;}
#nrkTable th{
  height: 75px;
  padding: 0 10px;
  text-align: left;
  font-weight: normal;
}
#nrkTable th.icon{
  white-space:nowrap;
  padding: 0;
}
.maaling #nrkTable th.icon{width: 215px;}
#nrkTable th.icon span{vertical-align: middle;}
#nrkTable th.icon img{
  -webkit-border-radius: 40px;
  border-radius: 40px;
  vertical-align: middle;
  white-space:nowrap;
  height: 60px;
  margin-right: .5em;
}
#nrkTable td{
  background-color: transparent;
  padding: 10px;
  white-space:nowrap;
  cursor: pointer;
  -webkit-transition: all .15s;
  transition: all .15s;
}
.maaling #nrkTable td{
  width: auto;
  white-space: nowrap;
}
#nrkTable th+th,
#nrkTable td+td{text-align: center;}

#nrkTable colgroup.hover,
#nrkTable tr.hover{ background-color: rgba(180, 193, 212, .1); }
/*#nrkTable tr.hover td:hover{ background-color: rgba(180, 193, 212, .1); }*/

#nrkTable .tdNynorsk {
  background-image: url('img/bgTile1.png');
  font-weight: bold;
}

.percent {
  text-align: right;
}
.uncertainty{
  text-align: left;
  font-size: .8em;
  margin-left: .5em;
  color: #678;
}
.maaling #nrkTable .date{
  text-align: left;
}
.maaling #nrkTable .hour{
  text-align: right;
  font-size: .8em;
  color: #678;
}

section.blueTop,
section.channels{
  background: url('img/bgTile2.png') repeat-x top;
}

#channelForm{display: none;}
section.details iframe{
  width: 100%;
  min-height: 350px;
  border: none;
  outline: 0;
  margin: 0;
  padding: 0;
}

button,
input[type="submit"]{
  padding: 1px 15px;
}
select,
button,
input[type="submit"]{
  cursor: pointer;
  outline: 0;
	-moz-box-shadow:inset 0px 1px 0px 0px #fff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fff;
	box-shadow:inset 0px 1px 0px 0px #fff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #dcdcdc;
	display:inline-block;
  color:#666;
	font-family: inherit;
	font-size: inherit;
	font-style:normal;
	height: 25px;
	line-height: 21px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #fff;
}
select:hover,
button:hover,
input[type="submit"]:hover{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}
select:active,
button:active,
input[type="submit"]:active{
  outline: none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ccc), color-stop(1, #ddd) );
	background:-moz-linear-gradient( center top, #ccc 5%, #ddd 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#ddd');
	background-color:#ccc;
	border-color: #c5c5c5;
	text-shadow: 1px 1px 0px #eee;
	-moz-box-shadow:inset 0px 1px 0px 0px #ddd;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ddd;
	box-shadow:inset 0px 1px 0px 0px #ddd;
  line-height: 23px;
}
input[type="textfield"]{
  display: inline-block;
  padding: 1px 4px;
  font-size: inherit;
  font-family: inherit;
  outline: 0;
  background-color: #fff;
  color: #444;
  border-width: 1px;
  border-style: solid;
  border-color: #aaa #ddd #fff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  height: 21px;
}

.player{
  height: 25px;
  overflow: hidden;
  width: 130px;
}
.player object{width: 130px!important;}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

footer{
  padding: 75px 0 100px;
  background: black;
  color: white;
  margin-top: 100px;
}
footer .logo{float: left;}
footer .info{
  float: left;
  padding: 8px 0 12px 35px;
  margin-left: 35px;
  border-left: 1px solid;
}
footer .info p{
  margin: 0;
  font-weight: bold;
  font-size: .9em;
}
footer .info p a{
  -webkit-transition: all .2s;
  transition: all .2s;
}
footer .info:hover a{opacity: .7;}
footer .info:hover a:hover{
  opacity: 1;
  text-shadow: 0 0 3px rgba(255, 255, 255, .5);
}

#programTable th{
  height: 75px;
  padding: 0 10px;
  width: 120px;
  text-align: left;
  font-weight: normal;
  display: inline-block;
  line-height: 75px;
}
#programTable th.icon{
  width: 240px;
  padding: 0;
}
#programTable th.icon span{vertical-align: middle;}
#programTable th.icon img{
  -webkit-border-radius: 40px;
  border-radius: 40px;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  margin-right: .5em;
}
#programTable td{
  background-color: transparent;
  padding: 10px;
  width: 240px;
  cursor: pointer;
  -webkit-transition: all .2s;
  transition: all .2s;
}
#programTable th+th,
#programTable td+td{
  text-align: center;
  width: 120px;
}
#programTable colgroup.hover,
#programTable tr.hover{ background-color: rgba(180, 193, 212, .1); }
/*#programTable tr.hover td:hover{ background-color: rgba(180, 193, 212, .1); }*/

.vjs-control-bar {
	display: flex;
	width: 645px;
}

.vjs-current-time, .vjs-duration, .vjs-seek-to-live-control, .vjs-remaining-time, .vjs-big-play-button, .vjs-volume-panel, .vjs-control-text, .vjs-control-bar > button  {
	display: none;
}

.vjs-progress-control.vjs-control {
	width:100%
}

.vjs-progress-control.vjs-control:hover {
	cursor:pointer;
}

#opened-row {
	padding-bottom: 30px;
}

#headers {
	display: flex;
	flex-direction: row;
	width: 87%;
	justify-content: space-between;
}

.channelRows {
	width:80%;
	margin-top: 2%;
}

.channelRows > form {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.channelRows > form :first-child {
	width: 80px;
}

.playbilde {
	height: 15px;
	width: 15px !important;
}

.playbilde:hover {
	cursor: pointer;
}