body {
    margin:0;
    padding:0;
    background-color:black;
}

* {
	font-family:"MS PGothic","Osaka",Arial,sans-serif;
    font-size:14px;
    /*color:white;*/
    letter-spacing:0.5px;
}

/* Titles */

h1 {
	
	margin:0;
	padding:0;
	line-height:22px;
	font-size:18px;
	color:white;
}

h1 b {
	font-size:30px;
	color:white;
}

/* Default links */
a {
    text-decoration:none;
	color:#aaa;
}

a:hover, a.selected {
	color:white;
}

/* Default paragraph layout */
p {
	margin:0;
	padding:0 0 13px 0;
}

p.address {
	
	padding:0;
}

/* listes */
ul, ol {
	padding:0 0 0 30px;
}


/* The global space contener */
div.page {
    position:relative;
    width:990px;
	min-height:500px;
    margin:auto;
    padding-top:20px;
}

/* Header section */
div.header {
	padding-bottom:20px;
	height:80px;
}

div.header div.logo {
    text-align:left;
    float:left;
}

div.header div.logo img {
    border:none;
}

/*** .navTop inside the header ***/
ul.navTop {
	float:left;
	list-style:none;
	padding:0;
	margin:0;

	/* width:750px; */
	height:47px;
	padding-top:33px;
}

ul.navTop li {
	float:left;
	display:block;
	/* width:187px; */
	text-align:right;
	margin-left:90px;
}

ul.navTop li a {
	font-size:20px;
	text-decoration:none;
	color:#aaa;
}

ul.navTop li a:hover, ul.navTop li a.selected {
	text-decoration:none;
	color:white;
}


/* Left Colomn */
div.colonneG {
    margin:0;
    padding:0;
    width:170px;
    float:left;
}

/* navigation on the left */
div.nav {
    width:170px;
    margin-top:30px;
}

div.nav ul {
    margin:0;
    padding:0;
    list-style:none;
}

div.nav ul li {
    padding-bottom:10px;
}

div.nav a {
	font-size:14px;
    color:#aaa;
}

div.nav a:hover {
    text-decoration:none;
    color:white;
}

div.nav a.selected {
	color:white;

}

/* Second level */
div.nav ul li ul {
	margin-top:1em;
	margin-left:1em;
}

div.nav ul li ul li a {
	font-size:12px;
}

/* navigation structure */
div.nav ul.catalog a.selected {
	background-color:white;
	color:black;
}

/* News blocks */
.news {
	padding-bottom:1em;
}

.news h3 {
	margin:0 0 5px 0;
	padding:0 0 0 20px;
	height:25px;
	background-image:url("../img/logo-puce.gif");
	background-repeat:no-repeat;
}


/* Slider on the intro page */
#slideshow {
	width:700px;
	height:250px;
	overflow:hidden;
	margin:20px auto 0 auto;
	border:1px solid white;
	background-color:white;	
}

#slider {
	height:250px;
}

#slider div.slide {
	padding:0 1px 0 0;
	height:250px;
	float:left;
	overflow:hidden;
}

.slideShowLegend {
	text-align:center;
	padding-bottom:0;
}

/* layout central */
#main {
	float:left;
	margin:10px 0 0 0;
    padding:0 10px 10px 10px;
	width:800px;
	color:white;
	/* no scroll 
	min-height:340px;
	*/
	
	/* scroll */
	height:340px;
	overflow:auto;
	
	/* decided to remove this background
	background-image:url("../img/main_bg.jpg");
	background-repeat:repeat-x;
	background-position:bottom;
	*/
}

#main.noBG {
	background-image:none;
}

/* catalog layout */
div.catalog {
	width:650px;
	margin:auto;
	background-color:white;
}

div.catalog h1 {
	padding:10px 0 0 10px;
}

div.catalog a img {
	border:1px solid white;
}

div.catalog a:hover img {
	border:1px solid gray;
}

/* catalog styles */
div.catalog .model {
	width:90%;
	margin:auto;
	padding:10px 10px 0 10px;
}

div.catalog .model * {
	color:black;
}

div.catalog .model .price {
	font-weight:bold;
}

div.catalog .model .pic {
	margin:auto;
}

/* pen specific layout */
div.catalog .model .pic.pen {
	width:405px;
	height:50px;
	background-position:50%;
	background-repeat:no-repeat;

	/* area for the price */
	margin-bottom:15px;
	position:relative;
}

div.catalog .model .pic.pen a {
	display:block;
	width:405px;
	height:50px;
}


/* box picture (square) */
div.catalog .model .pic.box {
	width:100px;
	height:100px;
	background-position:50%;
	background-repeat:no-repeat;

	/* area for the price */
	margin-bottom:15px;
	position:relative;
}

div.catalog .model .pic.box a {
	display:block;
	width:100px;
	height:100px;
}

div.catalog .model .details {
	margin:0;
	padding:0;
}

div.catalog .model .details b.ref {
	font-weight:normal;
	border:1px solid black;
}

#details {
	padding:10px;
}

#details b {
	display:block;
	margin-top:10px;
}


/* Search form */
#searchTitleLink {
	background-color:black;
	color:white;
	font-weight:bold;
	text-align:center;
	display:block;
}

#searchTitleLink.open {
	background-color:white;
	color:black;
}

#search {
	margin:0;
	padding:3px;
	border:1px dotted white;
	text-align:center;
}

#search #catalog_search {
	border:1px solid white;
	background-color:#333;
	color:white;
	font-weight:bold;
	width:99%;
}

div.searchBackLink {
	margin-top:10px;
}

/* Le footer */
#footer {
	position:absolute;
	width:800px;
	bottom:0;
	right:0;
	font-size:10px;
	font-weight:normal;
	text-align:center;
	color:#aaa;
}

#footer img {
	border:none;
}


/* Formulaire de contact */
div.contactFormLayout {
	background-image:url("../img/contact_background.jpg");
	background-repeat:no-repeat;
	
	position:relative;
	width:800px;
	height:334px;
}

div.newsFormLayout {
	background-image:url("../img/news-form-ambiance.jpg");
	background-repeat:no-repeat;
	
	position:relative;
	width:800px;
	height:334px;
}

div.newsFormLayout h1 {
	font-size:14px;
	margin:0;
	padding:0 0 15px 0;
	text-align:center;
}

div.contactText {

	position:absolute;
	left:120px;
	top:10px;
}

div.contactText h2 {
	margin:8px 0 15px 0;
	font-size:14px;
	font-weight:bold;
}

form.contactForm, form.newsForm01 {
	position:absolute;
	width:300px;
	right:0;
	padding:10px;
}

form.newsForm01 {
	width:450px;
	padding-top:0;
}

/* Default Layout for pic + text */
div.contentPic {
    float:left;
    margin-right:1em;
}

div.contentPicRight {
    float:right;
    margin-left:1em;
}


div.contentTextCenter {
	float:left;
	padding-top:200px;
	/*
	padding-top:200px;
	margin-left:380px;
	*/
}

div.contentTextAlone {
	width:680px;
	height:230px;
	margin:20px auto 0 auto;
	padding:10px;

}

/********** Divers ************/

/* Pour les traductions fr->ang qui manquent */
.toTrans {
    color:red;
}

/* Clear pour les float */
.clear {
    clear:both;
}

/* les éléments de formulaires */
/* par défaut, les label son de type block */
label {
	display:block;
	position:relative;
	color:white;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	line-height:16px;
}

/* Classe pour faire d'autres éléments textes qui ont le même look que des label (des div d'explication par exemple)*/
.label {
	color:white;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	
}

.input {
	position:relative;
	right:auto;
}

.inputError {
	border-color:red;
}

label .input {
	position:absolute;
	right:0;
	bottom:0;
	border-width:0 0 1px 0;
	border-color:#aaa;
	border-style:solid;
	background-color:black;
	color:white;
	font-size:14px;
}

label .box, label .check {
    position:absolute;
	right:0;
}

textarea {
	border:1px solid #aaa;
	background-color:#111;
	color:white;
	font-size:14px;
	width:100%;
}

input.button, .button, .buttonBig {
	border-width:2px;
	border-style:solid;
	border-color:#aaa #333 #333 #aaa;
	background-color:#777;
	color:white;
	font-size:14px;
	font-weight:bold;
	padding:2px 5px;
}

.buttonBig {
	margin-top:15px;
	font-size:16px;
	padding:4px 8px;
}

/* Message d'erreur */
.error {
    color:red;
    border:1px solid red;
    border-left-width:4px;
    width:300px;
    margin:1em auto;

    padding:0.5em;
    font-size:120%;
}

/* Le listing de mots avec les kanjis */
table {
    border-collapse:collapse;
}

table td, table th {
	vertical-align:top;
    margin:0;
    padding:3px;
}

table th {
    text-align:left;
    color:#ddd;
    font-weight:bold;
    font-size:110%;
}

table.formTable {
	width:90%;
	margin:auto;
}

table.formTable th {
	text-align:center;
	padding-top:1em;
}