body {
	background-color: #3381A3;
	padding-top: 90px;
}
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

	.navbar .navbar-brand img {
		height: 30px;
	}

.navbar .ondemand-title {
	line-height:20px;
	padding-top: 10px;
}
.navbar .ondemand-title a {
	font-size: 16px;
	font-weight: bold;
}
.navbar .ondemand-byline {
	padding-left:20px;
	padding-bottom: 20px;
	color:#fff;
	font-size: 0.7em;
}
@media (min-width: 768px){
	.navbar .navbar-brand img {
		height: 50px;
	}

	.navbar .ondemand-title {
		line-height:30px;
		padding-top: 10px;
	}
	.navbar .ondemand-title a {
		font-size: 40px;
		font-weight: bold;
	}
	.navbar .ondemand-byline {
		padding-left:20px;
		padding-bottom: 10px;
		color:#fff;
		font-size: 1em;
	}
}

.bookmark {
	float: right;
	border: medium none;
	cursor: pointer;
	color: rgb(0, 0, 255);
	background: none repeat scroll 0% 0% transparent;
	margin-top: -3px;	
	color: #666;
	font-size: 12px;
}

.bookmark.favourite {
	color: #3381A3;
}

.favourite-message {
	background-color: #BFBFBF;
	color: #FFF;
	padding: 1em;
	margin-bottom: 1em;
}

#jpPopout {
	display: none;
}
@media (min-width: 768px){

#jpPopout {
    background: url("../image/popout.svg") no-repeat scroll 0% 0% transparent;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    margin: 0px;
    padding: 0px;
    width: 11px;
    height: 11px;
    border: medium none;
    cursor: pointer;
    float: right;
}
}

.container.main {
	padding-top: 20px;
	padding-bottom: 20px;
}

.container ul li {
	line-height: 1.5em;
	padding-bottom: 0.5em;
}

.main li:nth-child(odd) a {
	color: #4A91D2
}

.navbar-fixed-top .container {
	background-color:#000;
	/* width:1200px; */
}


.navbar-inverse .nav>li>a {
	font-size: 40px;
	font-weight: bold;
}

ul {
	list-style-type: none;
	margin: 0 0 10px 5px;
}
.flat {
	padding-left: 0;
	margin: 0 0 10px 0;
}
/*.jp-gui {

	position:relative;
	padding:20px;
	width:428px;
}
.jp-gui.jp-no-volume {
	width:432px;
}
.jp-gui ul {
	margin:0;
	padding:0;
}
.jp-gui ul li {
	position:relative;
	float:left;
	list-style:none;
	margin:2px;
	padding:4px 0;
	cursor:pointer;
}
.jp-gui ul li a {
	margin:0 4px;
}
.jp-gui li.jp-repeat,
.jp-gui li.jp-repeat-off {
	margin-left:344px;
}
.jp-gui li.jp-mute,
.jp-gui li.jp-unmute {

}
.jp-gui li.jp-volume-max {
	margin-left:120px;
}
li.jp-pause,
li.jp-repeat-off,
li.jp-unmute,
.jp-no-solution {
	display:none;
}
.jp-progress-slider {
	position:absolute;
	top:28px;
	left:100px;
	width:300px;
	background: rgb(173, 173, 173);
}
.jp-progress-slider .ui-slider-handle {
	cursor:pointer;
}
.jp-volume-slider {
	float: right;
	margin: 10px 50px 0;
	width:100px;
	height:.4em;
}
.jp-volume-slider .ui-slider-handle {
	height:.8em;
	width:.8em;
	cursor:pointer;
}
.jp-gui.jp-no-volume .jp-volume-slider {
	display:none;
}
.jp-time {
	font-size:0.7em;
	cursor:default;
	padding-top: 4px;
}

.jp-gui.jp-no-volume .jp-length {
	right:70px;
}
.jp-clearboth {
	clear:both;
}

#ui-volume-ctrl {
	padding: 40px 0 0 10px;
}

#ui-volume-ctrl li {
	margin-left: 8px;
}

*/
#header {
	background-color: #000;
}

#header img {
	padding:6px;
	height: 50px;
}