@font-face {
  font-family: "Roboto-Light";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url("https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2") format("woff2"), url("https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff") format("woff");
}

body{
	font-family:"Roboto-Light","Arial",sans-serif;
	font-size: 16px;
	background-color:#ffffff;
}

label{
	font-size: .875em;
	color: #7F7F81;
}

.content_background {
	/*the vidwidth url parameter results in changing the width of this element, but the height of #player. */
	max-width: 640px; /*the video player is set to 100% this size. 640x360 px is the normal size the YT vid will play at, so this makes room for it.*/
	margin: 0px auto;
}

#player{
	width:100%; /* intent is to have video same width as content_background. Must use 100% so if vidwidth parameter is used, which sizes .content_background, #player will be same width.*/
	/*Below maintains aspect ratio (responsive), ref: http://www.holgerkoenemann.de/ein-vimeo-oder-youtube-video-responsive-einbinden/*/
	height:100%;
	position:absolute;
}

#videoPlayer{
	/*Below maintains aspect ratio (responsive), ref: http://www.holgerkoenemann.de/ein-vimeo-oder-youtube-video-responsive-einbinden/  */
	padding-bottom: 56.25%; /*9 divided by 16 for 16:9 ratio*/
	height:0px;
	position: relative;
}

#header{
	display:block;
	margin-bottom:10px;
}

.title{
	position:relative;/*relative will move with it's container, absolute won't*/
	vertical-align:top;
	left: 2px;
	top: 0px;
	/*font-weight: bold;*/
	color: #7F7F81;
}

.forwardBackButtons{
	float:right;
	height:0px; /*prevents extra height: from being added, which would push down video list*/
}

.forwardButton, .backButton{
	cursor: pointer;
	width:40px;
	height:40px;
	/*float:right;*/
}

#listContainer{
	margin: 0px auto;
}

#listContainerLabels{
	color:white;
	height:40px;/*match size of buttons, allows for a float right of the forward and back buttons*/
}

#playlistLabel, #videoLabel {
	/*display:inline;*/
	position:relative;
	left:2px;
	top:13px;
	width:50%;
	float:left;
}

/*#playlistPager{
	margin-left:5px;
	margin-right:5px;
	text-align:center;
}*/

/*#playlistPager{*/
	/*intent is to put a horizontal line above to seperate. Alternative to using <hr/>, so don't have to worry about hiding it when pager hides.*/
/*	border-top:1px solid;
	border-top-color:rgb(251,207,161);
}*/

#listContainer hr {
    height: 1px;
    color: #FBCFA1;
    background: #FBCFA1;
    border: 0;	
	width:98%;
}

#videoLabel {
	width:auto; /*30%;*/ /*leave room for forward and back buttons*/
}
	
.Playlists {
	width:50%; /*assumption of 2 columns required*/
	float:left;
}

.videoList {
	width:50%;  /*a width is required for 2nd column to place it not below playlist column, but to the right. So if change from 50%, put 0px*/
	float:left;
}
.videoButton, .playlistButton {
	 /*adds a space between left column of buttons and right column*/
	/*height:100%;*/
	/*margin:2px;*/
/*	margin-left:10px;
	margin-right:10px;
	margin-bottom:10px;*/
	margin:12px; /*including a top: and bottom margin of 12 ensures centering. Anything less than 12 will not center the text for a 40px btn.*/
	font-size: .875em;
	/*font-weight:bold;*/
	text-align:center;
	position:relative;
	
}
.btnDef_vid{
	color:#6e6f71;
	background:#E7E8EB;
}

.btnDef_pList{
	color:#6e6f71;
	background:#ffffff;
}
/*same as above*/
.buttWrap:hover, .pgBtnWrap:hover{
	color:#ffffff;
	background:#FF7300;
}

.btnSelect {
	color:#ffffff;
	background:#FF7300;
}

.buttWrap{
	width:99%;
	cursor: pointer;
	min-height:40px;
	margin:2px;
	border: 1px solid rgb(211, 211, 211);
}

.catBtn, .pgBtn  {
	margin-left:8px;
	margin-right:8px;
	text-align:center;
	font-size: .875em;
	/*font-weight:bold;*/
	position:relative;
}

.catBtn {
	/*display:block;*/ /*necessary to have margins on text wrap. Presently sticking to only 1 line*/
	text-align:left;
	margin-left:18px;
	margin-right:18px;
}

.catBtnWrap, .pgBtnWrap  {
	cursor: pointer;
	min-height:20px;
	display:inline-block;
	border: 1px solid rgb(211, 211, 211);
}

.catBtnWrap {
	margin:1px;
	width:49%;
}

.pgBtnWrap{
	margin-left:3px;  /*left aligns pager buttons to playlist and video btns*/
}

.pager label{
	margin-left:3px;
	display:block;
	position:relative;
	top:-4px;
}

#categories{
	margin-top:10px;
	margin-bottom:10px;
}

#categories_lbl{
	display:none;
}