body
{
	margin: 0px;
	padding-top: 100px;
	padding-bottom: 70px;
	z-index: -3;
	
	position: relative;
}

header
{
	z-index: -1;
}

.central{ position: fixed;}

#titleBar{display: none;}

#filter
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -50;
	
	-webkit-transition-property: all .3s;
	-moz-transition-property: all .3s;
	-ms-transition-property: all .3s;
	-o-transition-property: all .3s;
	transition-property: all .3s;
}

.page
{
	margin: 10px auto;
	z-index: -2;
	padding: 0px;
	width: 950px;
    margin-bottom: 45px;

	position: relative;
}

.page .navig,
.page .ctn
{
	display: inline-block;
	vertical-align: top;
}

.page .ctn
{
	width: 680px;
	padding-left: 25px;
}

.page article,
.page .navig
{
	background: white;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
	border-radius: 15px;
	display: block;
	margin: 0px;
	margin-bottom: 30px;
	padding: 20px;
}

body.dark .page article
{
    background: rgb(35,35,35);
    color: #fff;
}

.page .navig
{
	background: rgb(70,70,70);
	list-style: none;
	display: inline-block;
	color: white;
	width: 200px;
}

.fixedNav
{
	position: fixed;
	top: 30px;
}

.fixedCtn
{
	margin-left: 245px;
}

.page .navig hr
{
	border: none;
	background: rgba(255,255,255,.2);
	border-radius: 5px;
	height: 7px;
}

.page .navig li
{
	margin: 0px -20px;
}

.page .navig li a
{
	display: block;
	padding: 10px 37px;
	color: white;
	font-size: 14px;
	text-decoration: none;
}

.page .navig li a:hover
{
	background: rgba(0,0,0,.2);
}

.page article h3,
.page .navig h3
{
	margin: 0px;
	padding: 10px 15px;
	padding-bottom: 0px;
	font-size: 24px;
	font-weight: normal;
	color: rgb(255,100,0);
}

.page .navig h3
{
	color: white;
	padding-bottom: 10px;
}

.page article h4
{
	margin: 10px 15px;
	font-weight: normal;
    font-size: 14px;
}

.page article p
{
	margin: 10px 15px;
    font-size: 14px;
    line-height: 2em;
}

.page article input[type=submit],.page article input[type=reset],.page article input[type=image],.page article input[type=button],.page article button
{
	margin: 0px 15px;
	margin-bottom: 15px;
}

#filterSlider
{
    margin-bottom: 15px;
}

#filterSlider p
{
    margin-bottom: 5px;
}

.slider
{
    font-size: 0;
    margin: 0 15px;
}

.slider *
{
    display: inline-block;
    vertical-align: middle;
}

.slider span
{
    font-size: 12px;
    text-transform: uppercase;
}

.slider .color
{
    margin: 0 10px;
    overflow: hidden;
    background: #fff;
    border-radius: 30px;
    border: 1px solid #000;
}

.slider .color .gradient
{
    width: 275px;
    padding: 0 20px;
    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ff6400+50,3f3f3f+99 */
    background: #ffffff; /* Old browsers */
    background: -ms-linear-gradient(left, #fff 0%, transparent 50%, #000 99%); /* IE, Edge */
    background: -moz-linear-gradient(left, #fff 0%, transparent 50%, #000 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #fff 0%,transparent 50%,#000 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #fff 0%,transparent 50%,#000 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.slider input[type=range]
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    
    width: 100%;
    height: 35px;
    outline: none;
    cursor: pointer;
    margin: 0;
    background: transparent;
}

.slider input[type=range]::-webkit-slider-thumb,
.slider input[type=range]::-moz-range-thumb
{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    
    width: 35px;
    height: 35px;
    padding: 10px;
    background: #000;
    cursor: pointer;
}

#filterSlider .slider,
#filterSlider button
{
    display: inline-block;
    vertical-align: middle;
}

#filterSlider button
{
    margin: 0;
    margin-left: 15px;
}

.selectMotor
{
	cursor: pointer;
	margin: 15px;/*
	min-height: 100px;*/
}

.selectMotor *
{
	margin: 0px;
	padding: 0px;
}

.selectMotor img,
.selectMotor div
{
	display: inline-block;
	vertical-align: middle;
}

.selectMotor div
{
	max-width: 500px;
}

.selectMotor img
{
	width: 100px;
	height: 100px;
	border-radius: 7px;
    box-shadow: 0 0px 0px rgba(0,0,0,.3);
	border: 1px solid rgba(0,0,0,.25);
	
	transition-property: all;
	transition-duration: .3s;
	
	-webkit-transition-property: all;
	-webkit-transition-duration: .3s;
	
	-moz-transition-property: all;
	-moz-transition-duration: .3s;
	
	-o-transition-property: all;
	-o-transition-duration: .3s;
	
	-ms-transition-property: all;
	-ms-transition-duration: .3s;
}

.selectMotor:hover img
{
	border-color: white;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

body.dark .selectMotor:hover img
{
	border-color: white;
    box-shadow: 0 3px 10px rgba(255,255,255,.3);
}

.page article .selectMotor div *
{
	margin: 0px;
	padding: 0px;
	margin-left: 10px;
	line-height: inherit;
	font-size: 18px;
	font-weight: normal;
}

.page article .selectMotor div p
{
	font-size: 14px;
	margin-top: 5px;
}

.page article .selectMotor div p span
{
	font-weight: bold;
	font-size: 14px;
    margin: 0;
}

.panel {display: none;}

#actAddEngine,
#actUnpinEngine
{
    display: none;
}
	
.preview *
{
	margin: 0px;
}
	
.page article .preview input
{
	width: 180px;
	height: 180px;
	border-radius: 10px;
	border: none;
	background-color: rgb(200,200,200);
	background-size: cover;
	background-position: center center;
}
	
.page article .preview input:hover
{
	box-shadow: 0px 1px 0px rgba(255,255,255,.7), 0px -1px 0px rgba(0,0,0,.7), 0px 15px 30px rgba(0,0,0,.5) inset;
}
	
.page article .preview input:active
{
    transform: scale(.9);
}

/* PINNED MOTORS and WEBSITES */

.pinned
{
	padding: 10px;
	margin: 0px;
	list-style: none;
	font-size: 0px;
	max-height: 300px;
	overflow: auto;
}

.pinned *
{
	padding: 0px;
	margin: 0px;
	font-size: 0px;
}

.pinned li
{
	margin-bottom: 5px;
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
	border: 1px solid silver;

	display: inline-block;
	vertical-align: middle;
	width: calc(50% - 25px);
	transition: all .2s;
}

.pinned li:nth-child(odd) {
	margin-right: 5px;
}

body.dark .pinned li {border-color: rgb(70,70,70);}

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

.pinned li img
{
	border-radius: 100px;
	height: 30px;
	width: 30px;
	display: inline-block;
	vertical-align: middle;
}

#websites.pinned li img
{
	border-radius: 0px;
}

.pinned li p
{
	font-size: 14px;
	display: inline-block;
	vertical-align: middle;
	margin: 0px;
	margin-left: 10px;
    width: calc(100% - 50px);
}

.pinned li p span
{
    float: right;
    display: none;
    opacity: 0;
    
    position: relative;
    right: -10px;
	
	transition-property: all;
	transition-duration: .3s;
	
	-webkit-transition-property: all;
	-webkit-transition-duration: .3s;
	
	-moz-transition-property: all;
	-moz-transition-duration: .3s;
	
	-o-transition-property: all;
	-o-transition-duration: .3s;
	
	-ms-transition-property: all;
	-ms-transition-duration: .3s;
}

.pinned li:hover p span
{
    display: inline-block;
    opacity: 1;
}

.pinned li p span button
{
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;

    padding: 10px;
    margin: -10px 0px;
    margin-left: 7px;
    border-radius: 100px;
    font-size: 0px;
    background: rgba(0,0,0,.3);
    border: none;
}

.pinned li p span button:hover
{
    background: #000;
}

.pinned li p span button img
{
	border-radius: 0px;
	height: 14px;
	width: 14px;
	border: none;
}

/* Options et Apparence */
#tblCustomize,
#tblOptions
{
    border-collapse: collapse; 
    margin-right: 15px;
}

#tblCustomize th,
#tblOptions th,
#tblOptions td
{
    padding: 10px 15px; 
    padding-top: 0px;
}

#tblCustomize th,
#tblOptions th
{
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    padding-top: 10px;
}

input[type=radio]
{
	display: none;
}

label
{
	padding: 10px;
	display: inline-block;
	cursor: pointer;
	width: 250px;
	border-radius: 4px;
    font-size: 14px;
}

label img
{
	margin: 0px;
	margin-right: 10px;
	width: 25px;
	height: 25px;
}

label img,
label span
{
    display: inline-block;
    vertical-align: middle;
}

input[type="radio"]:checked + label
{
	background: #000;
	color: #fff;
}

label:hover,
input[type="radio"]:checked + label:hover
{
	background: rgb(200,200,200);
	color: #000;
}

body.dark label:hover,
body.dark input[type="radio"]:checked + label:hover
{
	background: rgba(255,255,255,.1);
	color: #fff;
}

.saveBar
{
	background: rgb(25,25,25);
	color: white;
	padding: 0px;
	text-align: center;
	z-index: 10;
	
	position: fixed;
	bottom: 0px;
	right: 0px;
	left: 0px;
}

.saveBar p
{
	line-height: inherit;
	margin: 10px;
	font-size: 14px;
}

@media screen and (max-width: 1000px)
{
	body
	{
		padding: 0;
        height: calc(100% - 96px);
	}
    
    .saveBar {z-index: -10;}
    
    /* Barre de titre */
    #titleBar
    {
        display: block;
        position: relative;
        margin-top: -48px;
        font-size: 0;
        background: rgb(50,50,50);
        box-shadow: 0 3px 10px rgba(0,0,0,.3);
        padding-top: 48px;
        z-index: -2;
    }
    
    #titleBar *
    {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        padding: 0;
    }
    
    #titleBar img
    {
        cursor: pointer;
        width: 16px;
        height: 16px;
        padding: 16px;
        display: none;
    }
    
    #titleBar img:hover
    {
        background: rgba(255,255,255,.3);
    }
    
    #titleBar h2
    {
        font-size: 16px;
        font-weight: normal;
        padding: 14px 16px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100% - 80px);
    }
    
    /* Page */
    .page
    {
        margin: 0;
        z-index: -3;
    }
	
	.page,
	.page .navig,
	.page .ctn
	{
		width: inherit;
		display: block;
	}
	
	.page .ctn
	{
		display: none;
		padding: 0px;
	}
	
	.page .navig
	{
		padding: 10px 0;
        border-radius: 0;
	}
	
	.page .navig h3
	{
		display: none;
	}
	
	.page .navig div
	{
		display: none;
	}
	
	.page .navig li
	{
		margin: 0px;
	}
	
	.page .navig li a
	{
		padding: 10px 14px;
	}
	
	.page .ctn article
	{
		padding: 16px;
		margin: 0;
        border-radius: 0;
        padding-top: 115px;
        margin-top: -96px;
	}
	
	.page .ctn article h3
	{
		display: none;
	}
	
	.page .ctn article p
	{
		margin: 0;
        margin-bottom: 10px;
	}
	
	.page .ctn article input
	{
		margin: 0;
	}
    
    /* Moteur par défaut */
    .selectMotor
    {
        margin: 0;
    }
    
    .selectMotor img
    {
        margin: auto;
        display: block;
    }
    
    .selectMotor div
    {
        text-align: center;
        display: block;
        margin-top: 10px;
        max-width: inherit;
    }
    
    .page article .selectMotor div *
    {
        margin: 5px 0;
    }
    
    /* Liste des éléments épinglés */
    .pinned 
    {
        padding: 0;
        max-height: 100%;
    }
    
    .pinned li img,
    .page .ctn article .pinned li p
    {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
    }
    
    .page .ctn article .pinned li p
    {
        margin-left: 10px;
    }
    
    .pinned li p span
    {
        display: inline-block;
        opacity: 1;
    }

    /* Options et Apparence */
    #tblOptions
    {
        margin: 0;
    }

    #tblCustomize tr,      #tblOptions tr      {display: none;}
    #tblCustomize .inputs, #tblOptions .inputs {display: block;}

    #tblCustomize .inputs td,
    #tblOptions .inputs td
    {
        padding: 0;
        display: block;
        margin-bottom: 20px;
    }
    
    #tblCustomize .inputs td
    {
        display: inline-block;
        vertical-align: top;
    }

    #tblCustomize .inputs td:last-child,
    #tblOptions .inputs td:last-child
    {
        margin-bottom: 0;
    }
    
    #tblCustomize .inputs td::before, 
    #tblOptions .inputs td::before 
    {
        content: attr(data-label);
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
    }
    
    /* Slider */
    #filterSlider 
    {
        margin-top: 20px;
    }

    #filterSlider p
    {
        margin-bottom: 0;
    }

    .slider
    {
        margin: 0;
    }

    .slider *
    {
        display: inline-block;
        vertical-align: middle;
    }

    .slider span
    {
        font-size: 0;
        width: 20px;
        height: 20px;
        border: 1px solid rgba(0,0,0,.5);
        border-radius: 20px;
    }

    .slider span:first-child,
    .slider span:last-child
    {
        display: none;
    }

    .slider .color
    {
        margin: 0;
    }

    .slider .gradient
    {
        width: calc(100% - 64px);
        margin: 0;
    }
    
    #filterSlider button
    {
        margin: 0;
        margin-top: 5px;
        display: block;
    }
}