/* Contenu de la page */
.central > .content
{
    padding: 75px 10px;
    padding-top: 110px;
}

/* Barre de recherche */
#searchBar
{
    display: none;
}

#searchBar input
{
    border: none;
    background: #fff;
    color: #000;
    padding: 14px 25px;
    border-radius: 5px;
    width: 450px;
    margin: 20px auto;
    margin-top: 0px;
    display: block;
    font-size: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

body.dark #searchBar input {background: #222; color: #fff;}

/* Tiles */
.tiles
{
    list-style: none;
    padding: 0;
	color: white;
    font-size: 0;
    background: transparent;
	
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

.tiles .info
{
    background: #fff;
    color: #000;
    padding: 20px 30px;
    margin: 0;
    box-shadow: 0 0 30px #fff;
    border-radius: 5px;
    font-size: 16px;
    display: inline-block;
}

.tiles li
{
    background: #fff;
    padding: 15px;
    margin: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 150px;
    
    position: relative;
    top: 0px;
	
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;

	box-shadow: 0 5px 15px rgba(0,0,0,.3), 0 0 5px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.3);
	border-radius: 15px;
	padding: 0;
	width: auto;
}

body.dark .tiles li {background: #111;}

.tiles li:hover,
body.dark .tiles li:hover
{
    top: -5px;
    /*background: rgb(50,50,50);*/

	top: 0;
	box-shadow: 0 0 30px #fff, 0 0 0 rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,1);
}

body.dark .tiles li:hover
{
    background: rgb(50,50,50);
}

.tiles li a
{
    display: block;
    text-decoration: none;
    color: #000;
    margin: -15px;
    padding: 15px;

	margin: 0;
	width: 130px;
	height: 100px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

/*.tiles li:hover a,*/
body.dark .tiles li a
{
    color: #fff;
}

.tiles li img
{
    width: 40px;
    height: 40px;
}

.tiles li p
{
    font-size: 14px;
    margin: 0;
    margin-top: 10px;
}

/* Popup */
.window .ctn p
{
    max-width: 500px;
    margin: 0;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid silver;
}

body.dark .window .ctn p
{
    border-color: #333;
}

.window .form th
{
    min-width: 140px;
	font-size: 14px;
    text-align: left;
    font-weight: normal;
}

.window .form td
{
    text-align: left;
    padding: 2px 0;
}

.window .icon
{
	width: 70px;
	height: 70px;
    margin-bottom: 30px;
}

.window .form input[type=text]
{
	width: 310px;
}

.window .form input
{
    margin: 0;
}

@media screen and (max-width: 600px)
{
    /* Barre de recherche */
    #searchBar input
    {
        width: calc(100% - 50px);
        margin: 0;
        margin-bottom: 10px;
    }
    
    /* Liste */
    .tiles {padding: 0;}
    
    .tiles li,
    body.dark .tiles li
    {
        background: transparent;
        padding: 10px;
        margin: 0;
        text-align: left;
        box-shadow: none;
        text-shadow: 0 0 5px #000;
    }

    .tiles li:hover
    {
        top: 0;
        background: #fff;
        text-shadow: 0 0 0 rgba(0,0,0,.3);
    }
    
    .tiles li a
    {
        color: #fff;
        padding: 10px;
        margin: -10px;
    }
    
    .tiles li:hover a
    {
        color: #000;
    }
    
    .tiles li img,
    .tiles li p
    {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
    }
    
    .tiles li img
    {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    
    .tiles li p
    {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100% - 40px);
    }
    
    /* Popup */
    .winholder .window
    {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        
        padding: 0;
        background: #fff;
        max-width: inherit;
        pointer-events: all;
    }
    
    .winholder .window .ttl
    {
        pointer-events: all;
        background: #000;
        margin: 0;
    }
    
    .winholder .window .ttl *
    {
        vertical-align: middle;
    }
    
    .winholder .window .ttl h1
    {
        padding: 0 10px;
    }
    
    .winholder .window .ttl img
    {
        float: inherit;
        margin: inherit;
    }
    
    .winholder .window .ctn
    {
        box-shadow: none;
    }
    
    .window .form
    {
        width: 100%;
    }
    
    .window .ctn p
    {
        margin-bottom: 30px;
        padding: 0;
        border: none;
    }
    
    .window .form .icon
    {
        margin: 0;
    }
    
    .window .form th,
    .window .form td
    {
        display: block;
    }
    
    .window .form th
    {
        text-transform: uppercase;
    }
    
    .window .form input[type="text"]
    {
        width: calc(100% - 30px);
        margin-bottom: 10px;
    }
    
}