*{
	box-sizing:border-box;
	font-family: sans-serif;
	font-size: 97%;
	
}

.container{
	width:900px;
	margin:auto;
}
html{
	padding: 0;
	margin: 0;	
	width:100% 
}

body{
	margin:0;
}

.menu-trigger{
	float:left;
	display:none;
}

nav{
	overflow:hidden;
	background-color: #e9e9e9;
}
nav a{
	float:right;
	display:block;
	text-decoration: none;
	color: #000;
	padding:14px 16px;
	text-align: center;
	font-size: 18px;
}

nav a:hover{
	background-color: #c6c6c6;	
}
nav a.active{
	background-color: #2980b9;	
	color: #fff;
}

nav .search-container{
	float:left;
}

nav input[type=text]{
	padding:6px;
	font-size:17px;
	margin-top:8px;
	border:none;
}

nav .search-container button{
	float:left;
	padding:6px 10px;
	margin-top:8px;
	margin-left:16px;
	font-size:17px;
	background-color: #c6c6c6;	
	border:none;
	cursor:pointer;
}

nav .search-container button:hover{
	background-color: #9a9a9a;	
}

.rtl{
	direction:rtl;
}

.center{
	text-align:center;
}

thead {
	text-align:right;
}
#programs{
	
	width: 100%!important;
}

#player_container{
	margin-top:2em;
	padding: 10px;
	
}

#info{
	font-weight:bold;
	direction: rtl;
	margin: 10px 0;
}

.dataTables_length{
	display: none;
}
.dataTables_filter{
	direction:rtl;
	margin:12px 0;
}

#programs_div , #player_container{
	direction: ltr;	
}

#wrapper{
	display:flex;	
	justify-content: space-between;
}

#programs_list{
	flex-basis:33%;
}

#program_content{
	display:flex;
}
#songs, #images, #links{
	border:solid 1px #fbebeb;
	border-radius:2px;
	margin-top:3.2em;
}
#songs{
	flex-basis:20%;	
}
#images{
	flex-basis:20%;
	flex-wrap:wrap;
	width:100%;
}
#links{
	flex-basis:20%;
}

#image_gallery{
	margin-top:12px;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#image_gallery img{
	padding: 2px;
	border: solid 1px lightgrey;
	border-radius:2px;
}

#image_gallery_title{
	margin-top:12px;
	padding:0 5px;
}

.right{
	text-align:right;
}

.alink{
	color:#000;
	text-decoration:none;
}

.alink:hover{
	text-decoration:underline;
}

#explanation{
	padding:0 5px;
}

.dataTable{
	cursor:pointer;
}

#works_list{
	width:100%;
}

#works_list th{
	direction:rtl;
}

.error-page{
	width:500px;
	margin:30px auto;
	color: red;
	text-align:center;
	font-size:2em;
}

.return{
	width:500px;
	margin:10px auto;	
	text-align:center;	
}
.return a{
	color: #000;
	text-decoration:none;
}
.return a:hover{
	text-decoration:undeline;
}

#programs_paginate{
	direction:rtl;
}
@media (max-width: 758px){
	
	.container{
		width:98%;				
	}
	.bar{
		display:none;
	}
	.menu-trigger{
		display:block;
		font-size:125%;
	}
	nav a, nav input[type=text] ,nav .search-container button{
		float:none;
		display:block;
		text-align:right;
		width:100%;
		margin:0;
		padding:12px;		
	} 
	nav .search-container{
		float:none;
	}
	nav input[type=text]{
		border:1px solid #ccc;
	}
	
	#programs_filter{
		display: none;
	}

	#songs{
		
		border:none;
	}
	#images{
		
		border:none;
	}
	#links{
		
		border:none;
	}
	
	#wrapper{
		
		flex-direction: column; 
	}	
	nav a.active{
	background-color: #2980b9;	
	color: #fff;
}
	
	
}