@CHARSET "UTF-8";



/****************************/
/*  Infos Fichier			*/
/****************************/

/* auteur: PION Mickael*/
/* Date de création: 13/03/2009 */
/* Modif du 15/03/2011 : ajout des polices / border-radius pour images / ombre portée pour widget contact */












/****************************/
/*  Fonts					*/
/****************************/


				@font-face 
					{
				    	font-family: 		'ISSofachrome';									
											
					    src: 				url('Fonts/sofachrome_rg_it.ttf'),
					    					url('Fonts/sofachrome_rg_it.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISMagenta';									
											
					    src: 				url('Fonts/magenta_bbt.ttf'),
					    					url('Fonts/magenta_bbt.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISGunShip';									
											
					    src: 				url('Fonts/gun4fc.ttf'),
					    					url('Fonts/gun4fc.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISCoalition';									
											
					    src: 				url('Fonts/coalition.ttf'),
					    					url('Fonts/coalition.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISAwake';									
											
					    src: 				url('Fonts/Perso_Wide_awake.ttf'),
					    					url('Fonts/Perso_Wide_awake.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISAwakeBlack';									
											
					    src: 				url('Fonts/Perso_Wide_awake_black.ttf'),
					    					url('Fonts/Perso_Wide_awake_black.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISBankGothic';									
											
					    src: 				url('Fonts/bgothm.ttf'),
					    					url('Fonts/bgothm.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISImpact';									
											
					    src: 				url('Fonts/impact.ttf'),
					    					url('Fonts/impact.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISDigit';									
											
					    src: 				url('Fonts/ds-digi.ttf'),
					    					url('Fonts/ds-digi.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISDigit';									
											
					    src: 				url('Fonts/ds-digib.ttf'),
					    					url('Fonts/ds-digib.eot') format('opentype');			font-weight:bold
					}		
		
				@font-face 
					{
				    	font-family: 		'ISScript';									
											
					    src: 				url('Fonts/segoepr.ttf'),
					    					url('Fonts/segoepr.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISCPMono-Black';									
											
					    src: 				url('Fonts/CPMono_v07_Black-webfont.ttf'),
					    					url('Fonts/CPMono_v07_Black-webfont.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISCPMono-Bold';									
											
					    src: 				url('Fonts/CPMono_v07_Bold-webfont.ttf'),
					    					url('Fonts/CPMono_v07_Bold-webfont.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISCPMono-ExtraLight';									
											
					    src: 				url('Fonts/CPMono_v07_ExtraLight-webfont.ttf'),
					    					url('Fonts/CPMono_v07_ExtraLight-webfont.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISCPMono-Light';									
											
					    src: 				url('Fonts/CPMono_v07_Light-webfont.ttf'),
					    					url('Fonts/CPMono_v07_Light-webfont.eot') format('opentype');
					}		
		
				@font-face 
					{
				    	font-family: 		'ISCPMono-Plain';									
											
					    src: 				url('Fonts/CPMono_v07_Plain-webfont.ttf'),
					    					url('Fonts/CPMono_v07_Plain-webfont.eot') format('opentype');
					}		
		











/****************************/
/*  Page                    */
/****************************/

html
	{
		position:		absolute;
		top:			0px;
		left:			0px;
		width:			100%;
		height:			100%;
                padding:                0px;
                margin:                 0px;
		background-color:	#DDDDDD;
	}

body
	{	
		width:			100%;
		height:			100%;
		
		position:		relative;
		top:			0px;
		left:			0px;
                
                padding:                2%;
                margin:                 0px;                
	}





/****************************/
/*  Titre					*/
/****************************/

#it
	{
		font-family:		ISAwake;	
		font-size:		80px;
	}

.divIt
	{
                position:		absolute;
                top:                    0px;
                left:                   150px;
	}
	
	
	
	


/****************************/
/*  Login	Admin			*/
/****************************/

#TextLogin
	{
	    text-decoration:    underline;		
	    font-family:        Arial, Verdana, serif; 
	    font-size:          small;
	    width :             100px ;
	    height :            15px;
	}		
	
	
	
#FormulaireLogin
	{ 
	    width :             100px ;
	    height :            15px;
	}
	
	

#Entrez
	{	text-align:			center;
		font-family:		arial;
		font-size:			medium;
	}










/********************************************/
/*  Titre Page   "Itératives Structures"	*/
/********************************************/


/* Div de mise en page contenant tous les elements de présentation */
.DivTitre				
	{
	    position:			relative;
	    left:                       23%;	
            margin-bottom:		0px;							/* pour coller menu */

            width:			50%;
            border :			solid 10px #FFFFFF;
            background-color:           #FCFCFC;


                	-moz-box-shadow: 		2px 	2px 	3px 	#AAAAAA;   -webkit-box-shadow: 		2px 	2px 	3px 	#AAAAAA;    		 box-shadow: 		2px 	2px 	3px 	#AAAAAA;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#AAAAAA', Direction=-90, Strength=3);	}
	
	
/* Itératives Structures */
.Titre
	{
	    position:			absolute;
	    bottom:			9%;
	    right:			1%;
		
            font-size:			40px;
            font-family:		ISCPMono-ExtraLight;
            color:			#CCCCCC;
            text-align:			right;
            vertical-align:		bottom;
            line-height:		45px;

	}
	
	
/* Contact */
.Contact
	{
	    position:			absolute;
	    bottom:			15%;
	    right:			1%;
		
            font-size:			10px;
            font-family:		arial;
            color:			black;
            text-align:			right;

	}	
	
	
		
	
/* Itératives Structures */
.ImageTitre
	{
	    position:			relative;
	    width:			100%;
	}
	
/* Mickael Pion, ENSAG,etc... */	
.ImageTitreId
	{
	    position:			absolute;
	    bottom:			-10%;
	    right:			-20%;				
            width:			40%;

			background: 	#333333;			background: 	-moz-linear-gradient(top, #333333 0%, #111111 100%);	background: 		-webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));	filter: 		progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#333333', EndColorStr='#111111', GradientType=0);    	-moz-box-shadow: 		2px 	2px 	3px 	#AAAAAA;   -webkit-box-shadow: 		2px 	2px 	3px 	#AAAAAA;    		 box-shadow: 		2px 	2px 	3px 	#AAAAAA;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#AAAAAA', Direction=-90, Strength=3);	}








/****************************/
/*  Menu					*/
/****************************/

.divMenu
	{
	    position:			relative;
	    top:			0px;
	    margin:			0px;
	    padding:			0px;
	    left:			23%;
            width:                      50%;
            text-align:                 center;
	}

.itemMenu
        {
            display:                    inline-block;
        }

.TexteMenu,.TexteMenu:hover, .TexteMenuSelect, .separateurMenu
	{
	    font-size:                  20px;
	    text-decoration:            none;
	    font-family:                ISImpact, Impact, Arial, serif;
	    
	    padding-right:              10px;     
	}

.TexteMenuSmall,.TexteMenuSmall:hover
	{
	    font-size:                  10px;
	    text-decoration:            none;
	    font-family:                ISBankGothic, BankGothic Md BT, Trebuchet MS, Arial, serif;
	    
	    padding-left:               30px;     
	}


.TexteMenu, .TexteMenuSmall
	{
	    color:                      black;
	}

.TexteMenu:hover, .TexteMenuSmall:hover
	{
	    /*color:              #fce66a;*/
	     /*color:              #fcfa9a;*/
	      color:              #acaaaa;
	             
		   
		/*    	-moz-text-shadow: 		0px 	0px 	1px 	#999999,0px 	0px 	3px 	#555555;    	-webkit-text-shadow: 		0px 	0px 	1px 	#999999,0px 	0px 	3px 	#555555;    	text-shadow: 		0px 	0px 	1px 	#999999,0px 	0px 	3px 	#555555;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=-90, Strength=1);	filter:progid:DXImageTransform.Microsoft.Shadow(color='#555555', Direction=-90, Strength=3);*/
			 	
	}


.TexteMenuSelect
	{
	    color:              blue;
	    text-decoration:    underline;
	}



.separateurMenu
	{
	    color:              	#ffffff;
	    
		    	-moz-text-shadow: 		2px 	2px 	15px 	#000000,-1px 	0px 	7px 	#000000;    	-webkit-text-shadow: 		2px 	2px 	15px 	#000000,-1px 	0px 	7px 	#000000;    	text-shadow: 		2px 	2px 	15px 	#000000,-1px 	0px 	7px 	#000000;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=-90, Strength=15);	filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=-88, Strength=7);		 
	}








/****************************/
/*  Widget projet			*/
/****************************/	
	
/* pour test...
div{

                border:solid;
}*/


.WidgetProjet
	{
	    position:   		relative;
	    top:        		100px;
	    left:       		25%;
	    
	    width:			50%;
	    
	    margin:                     0px;
	    padding:    		0px;
            padding-top:    		10px;
            padding-bottom:    		10px;
	    
	    border-bottom: 		dashed 1px grey;
	    
	    text-decoration:    	none;	  

	}


.WidgetProjetLien{

	    text-decoration:    	none;
}



.DateProjet, .DateProjetEnCours
	{
	    
	    color:              	#555555;
	    font-size:          	25px;
	    line-height:        	20px; 	
	    letter-spacing:		-3px;  
	    word-spacing:		15px;  
	    text-decoration:    	none;
	    font-family:        	ISBankGothic, BankGothic Md BT, Arial, serif;	    

	    padding:			10px;
	    padding-top:		0px;		
			    
	    text-align:         	right;	    
	}
        
.DateProjetEnCours
        {

            color:			#CCCCCC;
            font-size:          	35px;
	    line-height:        	20px; 
            letter-spacing:		-5px;
		
        }

.DivDateProjet, .DivDateProjetEnCours, .DivImage, .DivDescriptionProjet{

                display:                table-cell;
                vertical-align:         middle;
}


.DivDateProjet, .DivDateProjetEnCours{

                width:                  20%;
                height:                 100%;                
}

.DivDateProjet, .DivDateProjetEnCours{

                width:                  20%;
                height:                 100%;
                
}




.DivDateProjet{

		background-color:	#CCCCCC;
}

.DivImage{
                width:                  38%;
}

.DivDescriptionProjet{

                width:                  35%;
                padding:                3%;
                
}


.DivDateProjetEnCours{

		background-color:	#99CC99;

}
	

.ImageProjet
	{
            width:                      93%;            /* + 2 x 0,65vw bordure = 100% */
	    background:         	#efefef;
	    
	    border:			solid 0.66vw white; /* 0.66vw = 50% widget projet x 38% div image x 3,5% pour bordure chaque coté image !! */
            
                	-moz-box-shadow: 		3px 	3px 	4px 	#888888;   -webkit-box-shadow: 		3px 	3px 	4px 	#888888;    		 box-shadow: 		3px 	3px 	4px 	#888888;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=-90, Strength=4); 		
	        	-moz-border-radius: 		 		 1px    1px    ;   -webkit-border-radius: 		 		 1px    1px    ;           border-radius: 		 		 1px    1px    ;    
	}

.ImageProjet:hover
	{
		    	-moz-box-shadow: 		1px 	1px 	3px 	#888888;   -webkit-box-shadow: 		1px 	1px 	3px 	#888888;    		 box-shadow: 		1px 	1px 	3px 	#888888;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=-90, Strength=3); 		
	}

        

.NomProjet
	{
	    
	    color:              	#AAAAAA;
	    font-size:          	25px;
	    line-height:        	15px; 	
	    letter-spacing:		-3px;  
	    word-spacing:		15px;  
	    text-decoration:    	none;
	    font-family:        	ISBankGothic, BankGothic Md BT, Arial, serif;
	    
	    padding:			3%;
	    width:			94%;

	}

.TexteTexte, .TexteLien	, .DescriptionProjet		/* Texte explications et Liens [Détails] dans listes projets */
	{
	    color:              	black;
	    
	    font-size:          	11px;
	    text-decoration:    	none;
	    font-family:        	Arial, serif;
	    
	    text-align:         	justify;
	    
	    padding:			3%;
	    width:			94%;

	}



.TexteLien						/* Liens [Détails] dans listes projets */
	{
            font-size:			11px;
	    color:              	orange;
	    font-weight:		bold;
	    
		    	-moz-text-shadow: 		1px 	1px 	3px 	#000000,-1px 	-1px 	3px 	#000000;    	-webkit-text-shadow: 		1px 	1px 	3px 	#000000,-1px 	-1px 	3px 	#000000;    	text-shadow: 		1px 	1px 	3px 	#000000,-1px 	-1px 	3px 	#000000;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=-90, Strength=3);	filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=-87, Strength=3);	        
	}



.TexteLien:hover				/* Liens [Détails] dans listes projets */
	{
	    color:              	#BB0000;
	    font-weight:		bold;	    
	    
		    	-moz-text-shadow: 		0px 	0px 	5px 	#000000;    	-webkit-text-shadow: 		0px 	0px 	5px 	#000000;    	text-shadow: 		0px 	0px 	5px 	#000000;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=-90, Strength=5);		    	    
	}	














/****************************/
/*  Visualisateur			*/
/****************************/
.miniatures
	{
		display:				inline-block;
		
		height:					100px;
		
                background:         	#efefef;
	    
		    	-moz-box-shadow: 		3px 	3px 	4px 	#888888;   -webkit-box-shadow: 		3px 	3px 	4px 	#888888;    		 box-shadow: 		3px 	3px 	4px 	#888888;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=-90, Strength=4); 		
                    	-moz-border-radius: 		 		 5px    5px    ;   -webkit-border-radius: 		 		 5px    5px    ;           border-radius: 		 		 5px    5px    ;    
	}

.miniatures:hover
	{
		    	-moz-box-shadow: 		1px 	1px 	3px 	#888888;   -webkit-box-shadow: 		1px 	1px 	3px 	#888888;    		 box-shadow: 		1px 	1px 	3px 	#888888;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=-90, Strength=3); 		
	        	-moz-border-radius: 		 		 5px    5px    ;   -webkit-border-radius: 		 		 5px    5px    ;           border-radius: 		 		 5px    5px    ;      
	}



.divVisu
	{
		position:	relative;
		top:		100px;
		left:		25%;
	
		height:		50%;
		width:		50%;
		    	-moz-box-shadow: 		1px 	1px 	3px 	#888888;   -webkit-box-shadow: 		1px 	1px 	3px 	#888888;    		 box-shadow: 		1px 	1px 	3px 	#888888;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=-90, Strength=3); 		
	}
		
.imageVisu
	{
	
	}
	

.playlistVisu
	{
		position:		absolute;
		top:			-20px;
		left:			0px;
		z-index:		0;
		background-color: white;
	}

.lienMenuVisu
	{
		display:		inline-block;
		padding:		5px;
		cursor:			pointer;

		
		font-family:	ISImpact;
		color:			grey;
		
		    	-moz-box-shadow: 		1px 	1px 	5px 	grey;   -webkit-box-shadow: 		1px 	1px 	5px 	grey;    		 box-shadow: 		1px 	1px 	5px 	grey;	filter:progid:DXImageTransform.Microsoft.Shadow(color='grey', Direction=-90, Strength=5);	}

.lienMenuVisu:hover
	{
		background-color: 	#444444;
		color:			white;
	}


        
/**********************/
/*   POUR TABLETTE ET LARGEUR INTERMEDIAIRE      */
/**********************/
@media only screen and ( max-width: 1600px ) and ( min-width: 1001px ) {   

    .WidgetProjet, .DivTitre, .divMenu, .divIt
            {
                left:           12.5%;    
                width:		75%;            
            }

}    
        


/**********************/
/*   POUR MOBILE      */
/**********************/
@media only screen and ( max-width: 1000px ) {

    .divIt
	{
	    left:			0px;
	}
        
    .DivTitre				
	{
	    left:		0%;	
            width:			92vw;
            border:                     solid 2vw white;
	}
        
    .Titre
	{		
            font-size:                  5.5vw;
            color:			#AA0000;
            line-height:                4vw;
            width:                      50%;
	}
        
    .divMenu
	{
	    left:			0%;
            width:                      96vw;
	}

        
    /****************************/
    /*  Widget projet		*/
    /****************************/
    .body
            {
                padding:                        2vw;
            }
    
    .WidgetProjet
            {
                left:       			0%;  
                margin:                         0px;
                width:				96vw;
                padding-top:                    0px;
            
            }

    .DateProjet, .DateProjetEnCours
            {
                padding:			15px;	    
            }
            
    .DivDateProjet, .DivDateProjetEnCours, .DivImage, .DivDescriptionProjet{

                display: table-row;
                width: 100%;
                padding:0px;
                margin: 0px;
                
            }

    .ImageProjet
            {
                 width:  92vw;  
                 border: solid 2vw white;
	    
                	-moz-box-shadow: 		3px 	3px 	4px 	#888888;   -webkit-box-shadow: 		3px 	3px 	4px 	#888888;    		 box-shadow: 		3px 	3px 	4px 	#888888;	filter:progid:DXImageTransform.Microsoft.Shadow(color='#888888', Direction=-90, Strength=4); 		
	        	-moz-border-radius: 		 		 1px    1px    ;   -webkit-border-radius: 		 		 1px    1px    ;           border-radius: 		 		 1px    1px    ; 
            }

    .TexteTexte, .TexteLien		/* Texte explications et Liens [Détails] dans listes projets */
            {

                padding:		5%;
                width:			20%;
            }
            
    .NomProjet, .DescriptionProjet
	{

	    padding:			2%;
            margin:                     2%;
	    width:			92%;

	}
        
        
    /****************************/
    /*  Visualisateur		*/
    /****************************/

    .divVisu
            {
                    top:		30px;
                    left:		0%;
                    width:		100%;		
            }

}