@font-face {
	font-family: "MaNeuropol";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/NEUROPOL.ttf");
}
/*
@font-face {
	font-family: "Brad";
	font-style: normal;
	font-weight: normal;
    src: url('./media/font/plumndl-webfont.eot');
            src: url('./media/font/plumndl-webfont.eot?#iefix') format('embedded-opentype'),
                 url('./media/font/plumndl-webfont.woff') format('woff'),
                 url('./media/font/plumndl-webfont.ttf') format('truetype'),
                 url('./media/font/plumndl-webfont.svg#plumndlregular') format('svg');
	src: url("../fonts/BradBunR.ttf");
}
*/
@font-face{ font-family: 'Title'; 
src: url('../fonts/sansation-regular-webfont.eot'); 
src: url('../fonts/sansation-regular-webfont.eot?iefix') format('eot'), 
url('../fonts/sansation-regular-webfont.woff') format('woff'), 
url('../fonts/sansation-regular-webfont.ttf') format('truetype'), 
url('../fonts/sansation-regular-webfont.svg#webfont') format('svg'); }

form {
  margin: 0;
  padding: 0;
}

img,table {
	border: none;
}


a:link, a:visited {
	text-decoration: underline;
	font-weight: bold;
	color: grey;
	outline: none;
}

a:hover {
	text-decoration: none;
	font-weight: bold;
	color: orange;
}

input.button, .validate  {
	color: #FFF;
	font-size: 10px;
	border: 1px solid #333;
	background: #686868;
}

.search input.button {
	text-align: right;
}

input.button:hover, .validate:hover  {
	
}

p {
	margin-top: 0;
	margin-bottom: 5px;
	text-align: justify;
}

.inputbox {
	border: 1px solid #333;
	color: #FFF;
	padding: 2px;
	background: #686868;
}
.inputbox:hover {

}

h1 {
  /*text-shadow: 1px 2px 9px #AAA;*/
  color: #FF9047;
  font-family: "Title";
} 
h2 {
    /*text-shadow: 2px 2px 2px #777;*/
    color: #59F;
  /*text-shadow:0 0 4px white, 0 -5px 4px #FFFF33;/*, 2px -10px 6px #FFDD33; /*, -2px -15px 11px #FF8800, 2px -20px 18px #FF2200; */
  /*color: #EC8A14;*/
} 




#top{
        
    margin: auto;
    max-width: 1024px;
    /*eight: 100px;*/
}

#logo > h1#site_title
{
    margin: 0;
    padding: 0;

}
#logo img
 {
    max-width: 100%;
    height: auto;
}


  



/* pour les images FB et TWitter*/
#pathway img
{
    max-width: 50px;			
}



/* on place les images de la story */
.images {
 
  text-align:center;
  width:100%;
}
.images img{
    box-shadow: 1px 1px 12px #555;
    margin:5px;
}
/* le head est noir */
#header 
{
    
    max-width: 1024px;	
    max-height: 500px;
    background-color:#202020;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 12px #555;
    
}
#header p
{
    color: white;
}

/* class du slideshow CK */
.camera_wrap
{
    height: 100%;
}
    
    
/* on rajoute une ombre */
#header img{
    box-shadow: 1px 1px 12px #555;
    
}
      
#content
{
    padding: 20px;
}

#wrapper {
			
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
    background-color: #f8fBfD;
    margin-top:56px;
}

    #maincolumn img, #maincolumn-only img
        {
        max-width: 100%;
        height: auto;
    }
    

.clr {
        clear: both;
    }

    .tabGames
        {
        max-width: 95%;
    
    }
    .tabGames div
    {
        float: left;
        /*border-collapse: separate;*/
        /*border-spacing: 39px;*/
        margin: 10px;
   
        border: 1px solid grey;
        max-width: 25%;
        min-width: 200px;
        min-height: 300px;
        background-color: #FFF;
        vertical-align: top;	
    }

    .tabGames div>p{
        padding: 0px 10px 0px 10px;
    }

    .tabGames div>h3{
        padding: 0px 5px 0px 5px;
    }
    
     /* FOOTER */
    #footer
    {
        width:100%;
        text-align:center;
        min-height: 100px;
        background-color:#0F0400;
        color: white;
        box-shadow: 1px 1px 12px #555;
    
    }
    #footer_content
    {
        max-width: 1024px;
        margin:auto;
        
    }
   
    
    /* END FOOTER */

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/


/*  TEMPLATE MOBILE FIRST    */
@media only screen
{

   body { 
			background: #FF0000; /* Old browsers */
			
			margin:0;
		}
   /* body:before { content: "ERROR Between 0 and 240"; }*/
		
	
    


}

/*  TEMPLATE MOBILE FIRST    */
@media only screen and (min-width: 240px)
{

   body { 
			background: #BBBBFF; /* Old browsers */
			
			margin:0;
		}
   /* body:before { content: "Between 240 and 480"; }*/
	

    #header 
        {
        height: 200px;
    }
    
    
   
    /* Je sélectionne les <li> du menu horizontal */
    ul.menu_horizontal li {
        /*display : inline;*/
        padding : 0.2em 0.2em; /* Pour espacer les boutons entre eux */
        margin: 0.2em;
        /*float:left;  */
    -moz-border-radius: 7px 7px 7px 7px;
	
	-moz-box-shadow: 0px 2px 2px #111;
	-webkit-border-radius: 7px;
	-webkit-box-shadow: 10px 10px 5px #111;
	border-radius: 7px 7px 7px 7px;
	box-shadow: 1px 1px 5px #111;
	background-color : #f2f6f8;        
    }
    ul.menu_horizontal {
        list-style-type : none; /* Car sinon les puces se placent n'importe où */
        width : 100%;
        vertical-align: middle;
        margin : 0px 0 0 0;
        padding : 0;

        /*background-color : #f4f9fd;*/
    }

    ul.menu_horizontal a {
        color : grey;
        text-decoration : none;
        padding : 0 0.4em;
        font : 1em "Brad";
        
       /* font-size: 2vmax;*/
       
        }
    ul.menu_horizontal a:hover { text-decoration : underline; color: orange; }
	
    #logo{
        max-width: 100%;
        text-align: center;
        margin: auto;
    }
    
     #menu_top
                {
            text-align:center;
            height: auto;
            /*float: left;*/
            max-width: 80%;
            margin: auto;
        
        }
        #pathway{
            float: left;
            width: 30%;
        }
	
    h1
        {   
        font-size: 1.0em;
    }
    
    h2
        {
        font: 0.5em "Brad";
    }
    
    p
        {
        font-size: 0.8em;
    }
    
/* LE FOOTER */
     .col1
        {
        float: left;
        padding: 10px;
        line-height: 1em;
    }
    
    .col3
        {
        padding: 10px;
        float: right;
        text-align:right;
        line-height: 1em;
    }
    
    #ContainingBlockVideo {
  width: 100%;
  margin-left: 10px;
  margin-bottom: 10px;
  float: right;
}
.videoWrapper {
  position: relative;
  padding-top: 1px;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 700px;
}
* html .videoWrapper {
  margin-bottom: 45px;
  margin-top: 0;
  
}
.videoWrapper div,
.videoWrapper embed,
.videoWrapper object,
#player {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

}



/*  TEMPLATE SMALL SCREEN  */
@media only screen and (min-width: 480px)
{
body { 
			background: #f2fFf8; /* Old browsers */
			margin:0;
		}
        
     /*   body:before { content: "Between 480 and 768"; }*/
        
    #header 
        {
        height: 350px;
    }
    
#logo
{
    float: left;		
    width: 20%;
    margin-left: 5%;
    min-width: 100px;
}
        /* Je sélectionne les <li> du menu horizontal */
    ul.menu_horizontal li {
        display : inline;
        padding : 0 0.2em; /* Pour espacer les boutons entre eux */
        margin: 0;
        float:left;  


-moz-border-radius: 0px;
	
	-moz-box-shadow: none;
	-webkit-border-radius: 0px;
	-webkit-box-shadow: none;
	border-radius: 0px;
	box-shadow: none;
	background-color : transparent;                
    }
    ul.menu_horizontal {
        list-style-type : none; /* Car sinon les puces se placent n'importe où */
        width : 100%;
        vertical-align: middle;
        margin : 40px 0 0 0;
        padding : 0;

        /*background-color : #f4f9fd;*/
    }

    ul.menu_horizontal a {
        color : grey;
        text-decoration : none;
        padding : 0 0.4em;
        font : 1.5em "Brad";
       /* font-size: 2vmax;*/
       
        }
    ul.menu_horizontal a:hover { text-decoration : underline; color: orange; }
       
       
    h1
        {   
        font-size: 1.5em;
    }
    
    h2
        {
        font: 1.0em "Brad";
    }
    
    p
        {
        font-size: 1.0em;
    }
    

}



/*  TEMPLATE LARGE SCREEN  */
@media only screen and (min-width: 768px)
{
body { 
			background: #fFf6f8; /* Old browsers */
			margin:0;
		}
        /*body:before { content: "Between 768 and 960"; }*/

        #content
		{
			padding: 10px;
		}
        #header 
            {
            height: 500px;
        }
        
        #menu_top
                {
            text-align:center;
            height: auto;
            float: left;
            max-width: 50%;
        }
        
        /* position à droite des btn fb et tw */
        #pathway
                {
            float: right;	
            width: 25%;
            max-width: 170px;
        }

       h1
        {   
        font-size: 2.0em;
    }
    
    h2
        {
        font: 1.5em "Brad";
    }
    
    p
        {
        font-size: 1.0em;
    }
    
    
    #leftcolumn {
        float: left;
        margin:auto;
        max-width: 180px;

    }


    #maincolumn {
        float: left;
        margin: auto;
        padding-left: 10px;
        max-width: 60%;
        
    }

    #maincolumn-only {
        
        margin: auto;
        width: 90%;
        padding-left: 10px;
        padding-right: 10px;
        
    }

    #rightcolumn{
        float: right;
        margin: auto;
        max-width: 180px;
        
    }
        
        
}

/*   TEMPLATE WIDE SCREEN    */
@media only screen and (min-width: 960px)
{
    body { 
			background: #f2f6f8; /* Old browsers */
			margin:0;
		}
       /* body:before { content: "Greater than 960"; }*/
		
		
        /* Je sélectionne les <li> du menu horizontal */
        ul.menu_horizontal li {
            display : inline;
            padding : 0 0.2em; /* Pour espacer les boutons entre eux */
            float:left;        
        }
        ul.menu_horizontal {
            list-style-type : none; /* Car sinon les puces se placent n'importe où */
            width : 100%;
            vertical-align: middle;
            margin : 40px 0 0 0;
            padding : 0;

            /*background-color : #f4f9fd;*/
        }

        ul.menu_horizontal a {
            color : grey;
            text-decoration : none;
            padding : 0 0.4em;
            font : 1.5em "Brad";
           /* font-size: 2vmax;*/
           
            }
        ul.menu_horizontal a:hover { text-decoration : underline; color: orange; }

        
           h1
                {   
                font-size: 2.5em;
            }
            
            h2
                {
                font: 2.0em "Brad";
            }
        
       


    }

    #flash_info  > div img
    {
        width:700px;
        height:260px;
        opacity:1.0;
        filter:alpha(opacity=100); /* For IE8 and earlier */
        
    }

    #flash_info h1{
        font-size: 14px;

    }



   

    .small {

        font-size: 10px;
        
    }


    

}