/* On force à respecter nos règles plutôt qu'en fonction du navigateur */
* {
	margin:0px;
	padding:0px;
	font-family:'M PLUS Rounded 1c',"ヒラギノ明朝 Pro W6",Arial,sans-serif;
}

a {
	color: #FAFAFA;
}

img {
	border:0px;
}

/* Autres styles */
table {
	border-spacing:0px;
    width: 100%;
}

table tr th {
    background-color: #999690;
    height: 40px;
}

table tr:nth-child(even) {
    background-color: #444444;
}

table tr:hover {
    background-color: #666666;
}

h1 {
	padding:0px 0px 15px 20px;
	font-size:26px;
	font-weight:bold;
	font-style: italic;
	color:#FAFAFA;
}

h2 {
    padding: 25px 0px 15px 30px;
	text-align:left;
	font-size:18px;
	font-weight:bold;
	color:white;
}

h2 a {
    text-decoration: none;
}

h2 img {
	width:22px;
	vertical-align:middle;
}

p {
    padding-bottom: 5px;
}

ul {
    margin: 5px 0px 12px 35px;
}

/* Organisation de la page */
body {
	width:100%;
	height:100%;
    background-color: black;
	color: #c8c8c8;
}

div#global {
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

div#bandeauHaut {
	margin-left:auto;
	margin-right:auto;
    width:100%;
	height:138px;
}
div#global:not(.reiko) div#bandeauHaut {
	margin-bottom: 20px;
	border-bottom: 1px groove white;
}

div#menu {
    text-align:center;
	margin-top: 20px;
}

@media screen and (max-width: 1100px) {
	div#menu a {
		padding: 0 15px;
	}
}
@media screen and (min-width: 1101px) {
	div#menu a {
		padding: 0 25px;
	}
}

div#menu a {
	height: 120px;
	line-height: 120px;
	vertical-align: middle;
	display:inline-block;
	text-decoration: none;
	text-transform: uppercase;
	color: #c8c8c8;
	font-size: 1.5em;
}

div#menu a:not(.menu4):hover {
	background-color: grey;
	color: black;
}
div#menu a.active {
	background-color: #FAFAFA;
	color: black;
}
div#menu a.active > span {
	border-bottom: 1px solid black;
}

div#menu a.menu4 {
	width: 130px;
	height: 120px;
	padding: 0 30px;
	background-image:url("../image/design/logo.jpg");
	background-size:100%;
	background-repeat:no-repeat;
	font-size: 1px;
	color: black;
}

div#pageAccueil {
	width: 100%;
	min-height: 300px;
	border-bottom: 3px solid #C60800;
}

div#pageAccueil div#imageAccueil {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
}

div#pageAccueil div#imageAccueil div {
	display: inline-block;
}

div#pageAccueil div#imageAccueil div img {
	max-width: 100%;
}

div#pageAccueil div#imageAccueil div#imageGauche {
	width:19.25%;
	margin-right:0.55%;
}

div#pageAccueil div#imageAccueil div#imageCentreGauche {
	width:25.04%;
	margin-right:0.90%;
}

div#pageAccueil div#imageAccueil div#imageCentreDroit {
	width:26.8%;
	margin-right:1.18%;
}

div#pageAccueil div#imageAccueil div#imageDroite {
	width:25.3%;
}

div#pageAccueil div#reseauSocial {
    margin: 10px auto;
    text-align: center;
}

div#pageAccueil div#reseauSocial a {
    padding: 0px 50px;
    height: 50px;
    text-decoration: none;
}

div#pageAccueil div#reseauSocial img {
    height: 50px;
}

div#copyright {
    position: fixed;
    background: black;
    max-width: 100%;
    bottom: 0px;
	font-style: italic;
	font-size: 0.7em;
}

div#page > div:not(#pageAccueil) {
    width: 80%;
    margin: 0 auto;
}

div#workTypes,
div#galleries {
    margin: 0 auto 30px;
}

div#workTypes div.workLists,
div#galleries div.galleryPictures {
    margin: 10px 0px 50px;
}

div#workTypes div.workLists div.work,
div#galleries div.galleryPictures div.galleryPicture {
    display: inline-block;
    width: 200px;
    height: 260px;
    margin: 20px;
    text-align: center;
    vertical-align: top;
}

div#workTypes div.workLists div.work div.picture,
div#galleries div.galleryPictures div.galleryPicture div.picture {
    width: 200px;
    height: 200px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    box-shadow: 2px 2px 20px rgba(255,255,255,.2);
    cursor: pointer;
}

div#workTypes div.workLists div.work div.picture img,
div#galleries div.galleryPictures div.galleryPicture div.picture img {
    max-width: 100%;
    max-height: 100%;
}

div#workTypes div.workLists div.work div.title,
div#galleries div.galleryPictures div.galleryPicture div.title {
    padding-top: 10px;
    text-align: center;
}

div#workTypes div.workLists div.work div.title a,
div#galleries div.galleryPictures div.galleryPicture div.title a {
    display: block;
    width: 200px;
    height: 50px;
    text-decoration: none;
}

div#work {
    margin-bottom: 30px;
}

div#work div.picture img {
    max-width: 70%;
    max-height: 500px;
}

div#cv div.columns > div {
    width: 49%;
    display: inline-block;
    vertical-align: middle;
}

div#cv div.calligraphy_by_reiko img {
    max-width: 100%;
    max-height: 800px;
}

div#articles div.preview {
    width: 42%;
    height: 500px;
    padding: 0px 3.5%;
    margin-bottom: 25px;
    float: left;
    overflow-y: auto;
}

div#articles div.preview img {
    max-height: 300px;
    max-width: 95%;
}

div#articles div.clearBoth {
    clear: both;
}

div#article img {
    max-width: 100%;
}

div#contact,
div#admin-article,
div#admin-work {
	width: 100%;
}

div#contact > div,
div#admin-article > div,
div#admin-work > div {
    margin: 10px 0px;
}

div#contact label,
div#admin-article label,
div#admin-work label {
    display: inline-block;
    width: 25%;
}

div#contact label,
div#admin-article label {
    max-width: 150px;
}

div#admin-work label {
    max-width: 210px;
    vertical-align: top;
}

div#admin-work form div > div {
    min-height: 30px;
}

div#admin-article label + div,
div#admin-work label + div {
    display: inline-block;
}

div#contact input[type="text"], div#contact input[type="email"],
div#admin-article input[type="text"], div#admin-article input[type="email"],
div#admin-work input[type="text"] {
	width: 50%;
}

div#contact textarea,
div#admin-article textarea,
div#admin-work textarea {
	width: 75%;
	height: 150px;
}

div#admin-works table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 25px;
}

div#admin-works table {
    border: 1px solid white;
}

div#admin-works table td.picture {
    text-align: center;
}

div#admin-works table td.picture img {
    padding: 10px 0;
}

div#admin-works table td.actions {
    text-align: center;
}

div#admin-works table td.actions a.action {
    background: white;
    border-radius: 2px;
    display: inline-block;
    height: 32px;
    margin: 5px;
    width: 32px;
}

div#admin-works table td.actions a.action img {
    height: 32px;
    width: 32px;
}

div#admin div.admin_menu {
    width: 100%;
}

div#admin div.admin_menu > div {
    display: inline-block;
    text-align: center;
    width: 33%;
}

.top-bar {
    height: 50px;
    margin-bottom: 20px;
    width: 100%;
}

.top-bar .search-bar {
    float: left;
    width: 40%;
}

.top-bar .search-bar div {
    display: inline-block;
}

.top-bar .search-bar label {
    padding-right: 5px;
}

.top-bar .search-bar button[type="submit"] {
    margin-left: 10px;
}

.top-bar .create-bar {
    float: right;
    text-align: right;
    width: 40%;
}

.top-bar::after {
    clear: both;
}

@media screen and (max-width: 1360px) {
	div#pageAccueil div#imageAccueil div#imageGauche {
		width:19.15%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreGauche {
		width:24.94%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreDroit {
		width:26.7%;
	}

	div#pageAccueil div#imageAccueil div#imageDroite {
		width:25.2%;
	}

    div#menu a {
        font-size: 1.3em;
    }
}

@media screen and (max-width: 1000px) {
	div#pageAccueil div#imageAccueil div#imageGauche {
		width:19%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreGauche {
		width:24.8%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreDroit {
		width:26.55%;
	}

	div#pageAccueil div#imageAccueil div#imageDroite {
		width:25.05%;
	}

    div#menu a {
        font-size: 1.2em;
    }
}

@media screen and (max-width: 900px) {
    div#menu a {
        font-size: 1.1em;
        padding: 0 7px;
    }

    div#menu a.menu4 {
        width: 80px;
        padding: 0 10px;
        vertical-align: middle;
        background-position: center;
    }

    div#articles div.preview {
        width: 100%;
        height: auto;
    }

    div#cv div.columns > div {
        width: 100%;
    }

    div#cv div.columns > div.calligraphy_by_reiko {
        text-align: center;
    }

    div#work div.picture {
        text-align: center;
    }

    div#work div.picture img {
        max-width: 80%;
        max-height: 400px;
    }
}

@media screen and (max-width: 675px) {
	div#pageAccueil div#imageAccueil div#imageGauche {
		width:18.8%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreGauche {
		width:24.6%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreDroit {
		width:26.35%;
	}

	div#pageAccueil div#imageAccueil div#imageDroite {
		width:24.85%;
	}

    div#menu {
        margin-top: 10px;
    }

    div#menu a {
        height: 20px;
        line-height: 20px;
        font-size: 1em;
    }

    div#menu a.menu4 {
        position: relative;
        display: block;
        width: 130px;
        height: 85px;
        padding: 0px;
        margin: 0px auto;
    }

    div#workTypes div.workLists,
    div#galleries div.galleryPictures {
        margin: 20px 0px;
    }

    div#workTypes div.workLists div.work,
    div#galleries div.galleryPictures div.galleryPicture {
        display: block;
        margin: 0 auto;
    }

    div#work div.picture {
        text-align: center;
    }

    div#work div.picture img {
        max-width: 100%;
        max-height: 400px;
    }

    div#copyright {
        width: auto;
        height: 65px;
    }
}

@media screen and (max-width: 495px) {
	div#pageAccueil div#imageAccueil div#imageGauche {
		width:41.9%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreGauche {
		width:54.9%;
	}

	div#pageAccueil div#imageAccueil div#imageCentreDroit {
		width:49.5%;
	}

	div#pageAccueil div#imageAccueil div#imageDroite {
		width:46.8%;
	}

    div#page > div#copyright {
        width: 100%;
    }
}

button, input[type="button"] {
    padding: 5px 20px;
    background: #c8c8c8;
    color: black;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}