*
{
	font-family: arial,sans-serif;
	


}


.top
{
	vertical-align:top !important;
}

.middle
{
	vertical-align:middle !important;
}

.bottom
{
	vertical-align:bottom !important;
}

.left
{
	text-align:left !important;
}

.right
{
	text-align:right !important;

}




.connected
{
	background:chartreuse !important;
}

.center
{
	text-align:center !important;

}


.invisible
{
	display:none !important;

}





.fullwidth
{
	
	width:100% !important;
	
}



div.apart
{
	position: relative;
	
	display: inline-block;
	
	margin:5px 10px;
	
	
	vertical-align: middle;		
	
}

label.apart
{
	position: relative;
	
	font-size: 12px;

	vertical-align: middle;	
}

span.apart
{
	position: relative;
	
	font-size: 20px;

	vertical-align: middle;
	
}



#informations
{
     position:absolute;
     bottom:0px;
     right:0px;
     
 		z-index: 1000;
 		
	background:rgba(0,0,0,0.9);
	
	color: white;
 		
}

img.apart
{

	position:relative;

	max-width:32px;
	
	max-height:32px;
	
	cursor:pointer;
	
}

@media screen and (min-width: 771px) {
	
	
	
	div.top_side_small
	{
		position: relative;
		
		width: 100%;
		
		background:navy;
		
		height:  300px;
		
	}
	
	
	div.top_side_title
	{
		position: absolute;
		
		top:0px;
		
		left: 0px;
		
		z-index: 2000;
		
		background: black;
		
		color: yellow;
		
			
	}
	
	
	div.top_side_close
	{
		
		position: absolute;
		
		top: 0px;
		
		right: 0px;
	
		z-index: 2000;	
		
		
		
	}
	
	button.top_side
	{
		position: relative;
		
		border:0px;
		
		background:red;
		
		color: red;
		
		cursor: pointer;
		
		padding:5px 10px;
		
	}
	
	
	div.top_side_content
	{
		position: relative;
		
		width: 100%;
		height: 100%;
			
		vertical-align: top;
		
		display: inline-block;
		
	}
					
	div.bottom_side_big
	{
		position: relative;
		
		height: calc(100% - 300px);
		
		height: -webkit-calc(100% - 300px);
		
		width: 100%;
		
	}
				
				



	 body
    {
        font-family:arial,sans-serif;
        
        background:#292929;
        
        
    }



    #general
    {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    		z-index: 1;
    		
    }
    
    
   #main
	{
		position:relative;
		width: 100%;
		height: 100%;
	}
	
	
    header
    {
        width:100%;
        padding: 5px 0px 5px 0px;
    }
    
    .half_l
    {
        vertical-align:top;
        display:inline-block;
        width:50%;
        text-align:left;
    
    }
    
    .half_r
    {
        vertical-align:top;
        display:inline-block;
        width:50%;
        text-align:right;
        font-size:20px;
    
    }
    
    .top
    {
		vertical-align:top;    
    }
    
    div.submenu
    {
        
        display:inline-block;
        margin-right:10px ;
        margin-left:10px ;
        padding:0px 5px 0px 5px;
    }
    
    #logo
    {
        font-size:25px;
        font-weight:bold;
    
    }
    #lang
    {
        border-radius:0px;
        border:0px solid silver;
    
    }
    
    #nbdownloads
    {
		background:dodgerblue;
		color:white;    
		text-shadow:-1px -1px navy;
		padding:0px 10px;
		font-weight:bolder;    
    }
    
	 #nbviews
    {
		background:coral;
		color:white;
		text-shadow:-1px -1px firebrick;
		font-weight:bolder;
		padding:0px 10px;    
    }
    
    .download
    {
        color:dodgerblue;
    
    }
    
    .view
    {
        color:coral;
    
    }
    .middle
    {
		vertical-align:middle;    
    }
    
    a.alog:hover{
    	
    	background:#efefef;
    	text-decoration: none;
    }
    a.alog:visited{
    
    	text-decoration: none;
    	color: #555555;
    	text-shadow: -1px -1px black;
    }
    a.alog:link{
    	text-decoration: none;
    	color: #888888;
    	font-weight: bold;
    }
    a.alog
    {
    	text-decoration: none;
    	border:0px solid silver;
    	color: #888888;
    	padding: 5px 10px;
    }	
	
	
	
	

	#all
	{
		position:absolute;
		width:100%;
		top:0px;
		left:0px;
	}
	
	
	#msg
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
		background:white;
	}
	#logo
	{
		position:relative;
		font-size:50px;
		font-family:'Antenna',arial,sans-serif;
		background:rgba(255,255,255,0.8);
		color:orange;
		
	}
	#menubar
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
	}
	
	
	
	
	
	
	#prefooter
	{
		position:relative;
		min-height:20px;
		
		padding:10px 0px 10px 0px;
	
	}
	
	#copyright
	{
		padding:10px 0px 10px 0px;
		text-align:center;
		color:orange;	
	}
	
	#label
	{
	
	}
	
	#next
	{
		padding:5px 20px 5px 20px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
		cursor:pointer;
	}
	
	
	#next:hover
	{
		background:orange;
	}
	
	label.signin
	{
		font-size:25px;
		color:gold;
		text-shadow: -1px -1px darkKhaki;
		
	}
	input.signin
	{
		border-radius:0px;
		border:0px solid silver;
		border-bottom:2px solid orange;
		font-size:20px;
		width:90%;
		
	}
	span.button
	{
		padding:5px 10px 5px 10px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
	}
	
	.signin_part
	{
		margin:5px 0px 10px 0px;
	
	}
	.signin_part_title
	{
		position:relative;
		margin-right:auto;
		margin-left:auto;
		margin:5px auto 20px auto;
		text-align:left;
		padding:0px 0px 0px 0px;
		width:90%;
	}
	
	#avideo
	{
		background:yellow;
	}
	#mycanvas
	{
		background:#888888;
	
	}
	#password_input_video
	{
		display:none;
	
	}
	
	#password_input
	{
		display:none;
	}
	
	
	#password_input_audio
	{
	
		display:none;
	}
	
	#notificationbox
	{
		background:orange;
		color:white;
		padding:5px 0px 5px 0px;
		text-align:center;
		display:none;
	}
	
	#nbtn
	{
		text-align:right;
		padding:0px 5px 0px 0px;
	}

}
/*****************************************************************************************************/

/* Mobile */
@media only screen and (max-width: 229px) {
	
	
	
	div.top_side_small
	{
		position: fixed;
		
		width: 100%;

		height: 100%;
				
		background:navy;
		
		z-index: 2000;
		
	}
	
	
	div.top_side_close
	{
		
		position: absolute;
		
		top: 0px;
		
		right: 0px;
	
		z-index: 2000;	
		
		
		
	}
	
	button.top_side
	{
		position: relative;
		
		border:0px;
		
		background:red;
		
		color: red;
		
		cursor: pointer;
		
		padding:5px 10px;
		
	}
	
	
	div.top_side_content
	{
		position: relative;
		
		width: 100%;
		
		height: 100%;
			
		
		
	}
					
	div.bottom_side_big
	{
		position: relative;
		
		width: 100%;
		height: 100%;
		
	}
				
				



	 body
    {
        font-family:arial,sans-serif;
        
        background:#292929;
        
        
    }
	#all
	{
		position:absolute;
		width:100%;
		top:0px;
		left:0px;
	}
	
	 #general
    {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    
    }
    
    
   #main
	{
		position:relative;
		width: 100%;
		height: 100%;
	}
	
	
	#msg
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
		background:white;
	}
	#logo
	{
		position:relative;
		font-size:50px;
		font-family:'Antenna',arial,sans-serif;
		background:rgba(255,255,255,0.8);
		color:orange;
		
	}
	#menubar
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
	}
	
	
	
	
	
	
	#prefooter
	{
		position:relative;
		min-height:20px;
		
		padding:10px 0px 10px 0px;
	
	}
	
	#copyright
	{
		padding:10px 0px 10px 0px;
		text-align:center;
		color:orange;	
	}
	
	#label
	{
	
	}
	
	#next
	{
		padding:5px 20px 5px 20px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
		cursor:pointer;
	}
	
	
	#next:hover
	{
		background:orange;
	}
	
	label.signin
	{
		font-size:25px;
		color:gold;
		text-shadow: -1px -1px darkKhaki;
		
	}
	input.signin
	{
		border-radius:0px;
		border:0px solid silver;
		border-bottom:2px solid orange;
		font-size:20px;
		width:90%;
		
	}
	span.button
	{
		padding:5px 10px 5px 10px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
	}
	
	.signin_part
	{
		margin:5px 0px 10px 0px;
	
	}
	.signin_part_title
	{
		position:relative;
		margin-right:auto;
		margin-left:auto;
		margin:5px auto 20px auto;
		text-align:left;
		padding:0px 0px 0px 0px;
		width:90%;
	}
	
	#avideo
	{
		background:yellow;
	}
	#mycanvas
	{
		background:#888888;
	
	}
	#password_input_video
	{
		display:none;
	
	}
	
	#password_input
	{
		display:none;
	}
	
	
	#password_input_audio
	{
	
		display:none;
	}
	
	#notificationbox
	{
		background:orange;
		color:white;
		padding:5px 0px 5px 0px;
		text-align:center;
		display:none;
	}
	
	#nbtn
	{
		text-align:right;
		padding:0px 5px 0px 0px;
	}
	
}

/* Mobile */
@media only screen and (min-width: 230px)  and (max-width: 360px) {
	
	
	
	div.top_side_small
	{
		position: fixed;
		
		width: 100%;

		height: 100%;
				
	
		
		background:navy;
		
		z-index: 2000;
		
	}
	
	
	div.top_side_close
	{
		
		position: absolute;
		
		top: 0px;
		
		right: 0px;
	
		z-index: 2000;	
		
		
		
	}
	
	button.top_side
	{
		position: relative;
		
		border:0px;
		
		background:red;
		
		color: red;
		
		cursor: pointer;
		
		padding:5px 10px;
		
	}
	
	
	div.top_side_content
	{
		position: relative;
		
		width: 100%;
		height: 100%;
			
		vertical-align: top;
		
		display: inline-block;
		
	}
					
	div.bottom_side_big
	{
		position: relative;
		
		width: 100%;
		height: 100%;
		vertical-align: top;
		
		display: inline-block;
		
	}
				
	
	

	 body
    {
        font-family:arial,sans-serif;
        
        background:#292929;
        
        
    }
	#all
	{
		position:absolute;
		width:100%;
		top:0px;
		left:0px;
	}
	
	 #general
    {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    
    }
    
    
   #main
	{
		position:relative;
		width: 100%;
		height: 100%;
	}
	
	
	#msg
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
		background:white;
	}
	#logo
	{
		position:relative;
		font-size:50px;
		font-family:'Antenna',arial,sans-serif;
		background:rgba(255,255,255,0.8);
		color:orange;
		
	}
	#menubar
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
	}
	
	
	
	
	
	#prefooter
	{
		position:relative;
		min-height:20px;
		
		padding:10px 0px 10px 0px;
	
	}
	
	#copyright
	{
		padding:10px 0px 10px 0px;
		text-align:center;
		color:orange;	
	}
	
	#label
	{
	
	}
	
	#next
	{
		padding:5px 20px 5px 20px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
		cursor:pointer;
	}
	
	
	#next:hover
	{
		background:orange;
	}
	
	label.signin
	{
		font-size:25px;
		color:gold;
		text-shadow: -1px -1px darkKhaki;
		
	}
	input.signin
	{
		border-radius:0px;
		border:0px solid silver;
		border-bottom:2px solid orange;
		font-size:20px;
		width:90%;
		
	}
	span.button
	{
		padding:5px 10px 5px 10px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
	}
	
	.signin_part
	{
		margin:5px 0px 10px 0px;
	
	}
	.signin_part_title
	{
		position:relative;
		margin-right:auto;
		margin-left:auto;
		margin:5px auto 20px auto;
		text-align:left;
		padding:0px 0px 0px 0px;
		width:90%;
	}
	
	#avideo
	{
		background:yellow;
	}
	#mycanvas
	{
		background:#888888;
	
	}
	#password_input_video
	{
		display:none;
	
	}
	
	#password_input
	{
		display:none;
	}
	
	
	#password_input_audio
	{
	
		display:none;
	}
	
	#notificationbox
	{
		background:orange;
		color:white;
		padding:5px 0px 5px 0px;
		text-align:center;
		display:none;
	}
	
	#nbtn
	{
		text-align:right;
		padding:0px 5px 0px 0px;
	}

}



/* Tablet **/
@media screen and (max-width: 770px) and (min-width: 361px) {
  	
  	
  	
	div.top_side_small
	{
		position: fixed;
		
		width: 100%;

		height: 100%;
				
		background:navy;
		
		z-index: 2000;
		
	}
	
	
	div.top_side_close
	{
		
		position: absolute;
		
		top: 0px;
		
		right: 0px;
	
		z-index: 2000;	
		
		
		
	}
	
	button.top_side
	{
		position: relative;
		
		border:0px;
		
		background:red;
		
		color: red;
		
		cursor: pointer;
		
		padding:5px 10px;
		
	}
	
	
	div.top_side_content
	{
		position: relative;
		
		width: 100%;
		height: 100%;
			
		vertical-align: top;
		
		display: inline-block;
		
	}
					
	div.bottom_side_big
	{
		position: relative;
		
		width: 100%;
		height: 100%;
		vertical-align: top;
		
		display: inline-block;
		
	}
				
	

	 body
    {
        font-family:arial,sans-serif;
        
        background:#292929;
        
        
    }
	#all
	{
		position:absolute;
		width:100%;
		top:0px;
		left:0px;
	}
	
	 #general
    {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    
    }
    
    
   #main
	{
		position:relative;
		width: 100%;
		height: 100%;
	}
	
	
	#msg
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
		background:white;
	}
	#logo
	{
		position:relative;
		font-size:50px;
		font-family:'Antenna',arial,sans-serif;
		background:rgba(255,255,255,0.8);
		color:orange;
		
	}
	#menubar
	{
		position:relative;
		min-height:50px;
		border:1px solid silver;
	}
	
	
	
	
	
	
	#prefooter
	{
		position:relative;
		min-height:20px;
		
		padding:10px 0px 10px 0px;
	
	}
	
	#copyright
	{
		padding:10px 0px 10px 0px;
		text-align:center;
		color:orange;	
	}
	
	#label
	{
	
	}
	
	#next
	{
		padding:5px 20px 5px 20px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
		cursor:pointer;
	}
	
	
	#next:hover
	{
		background:orange;
	}
	
	label.signin
	{
		font-size:25px;
		color:gold;
		text-shadow: -1px -1px darkKhaki;
		
	}
	input.signin
	{
		border-radius:0px;
		border:0px solid silver;
		border-bottom:2px solid orange;
		font-size:20px;
		width:90%;
		
	}
	span.button
	{
		padding:5px 10px 5px 10px;
		color:ghostwhite;
		font-weight:bold;
		background:gold;
	}
	
	.signin_part
	{
		margin:5px 0px 10px 0px;
	
	}
	.signin_part_title
	{
		position:relative;
		margin-right:auto;
		margin-left:auto;
		margin:5px auto 20px auto;
		text-align:left;
		padding:0px 0px 0px 0px;
		width:90%;
	}
	
	#avideo
	{
		background:yellow;
	}
	#mycanvas
	{
		background:#888888;
	
	}
	#password_input_video
	{
		display:none;
	
	}
	
	#password_input
	{
		display:none;
	}
	
	
	#password_input_audio
	{
	
		display:none;
	}
	
	#notificationbox
	{
		background:orange;
		color:white;
		padding:5px 0px 5px 0px;
		text-align:center;
		display:none;
	}
	
	#nbtn
	{
		text-align:right;
		padding:0px 5px 0px 0px;
	}

 }