/* @override 
	http://ketto.loc/fr/css/new.css
	http://ketto.loc/css/new.css
	http://dev.ketto/fr/css/new.css
	http://dev.ketto/css/new.css
*/

/*Généralités*/
*{padding: 0;margin: 0;}
html{overflow: -moz-scrollbars-vertical;}
body {
	font: 12px Arial, Helvetica, Geneva, sans-serif;
	background-color:#ed1953;
}
.clear{
	clear: both;
}
.hidden {
	display:none;
}
#MainContent{
	position: relative;
	width: 998px;
	margin: 20px auto;
	background: #fff url(../media/Design/Images/coins_footer.png) no-repeat 0 bottom;
}
/*Header*/
#TopContent{
	width: 998px;
	height: 133px;
	background: url(../media/Design/Images/head_bg.png);
}
/*Logo par dessus d'autre div, pas le choix de le mettre en absolute*/
#Logo{
  background: url(http://www.kettodesign.com/media/fr/logo_ketto.png) no-repeat;
	position: absolute;
	width: 250px;
	height: 240px;
	left: 0;
	top: 5px;
	cursor: pointer;
	z-index: 100;
}
/*Le header est vide, il n'y a que le choix de lang et le menu, donc choix de lang en absolute, plus simple*/
#Lang{
	position: absolute;
	right: 120px;
	top: 40px;
	font-size: 11px;
	font-weight: bold;
}
#Lang a, #Lang a:visited{
	color: #000;
	text-decoration: none;
}
#Lang a:hover{
	text-decoration: underline;
}

/*Colonne de gauche*/
#LeftContent{
	float: left;
	width: 250px;
	padding-top: 91px;
	z-index: 10;
}

/*Colonne du centre*/
#CenterContent{
	float: left;
	width: 550px;
	padding-top: 86px;
	height: 300px;
	margin-bottom: 10px;
}
html>body #CenterContent{/*Pour régler le prob de IE qui comprend pas min-height*/
	height: auto;
	min-height: 300px;
}
.titre_section{
	color:#EC7823;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:24px;
	text-align:left;
	margin-left: 19px;
	display: block;
}
.sous_titre_section{
	color: #9abe5e;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size: 20px;
	text-align:left;
	background: url(../media/Design/Images/etoile_sous_titre.png) no-repeat;
	display: block;
	height: 41px;
	line-height: 41px;
	padding-left: 60px;
	margin-left: 10px;
}



/*Colonne de droite*/
#RightContent{
	width: 198px;
	float: left;
	padding-top: 69px;
	background: url(../media/Design/Images/bg_menu_droit.png) no-repeat right 33px;
	height: 420px;
}
html>body #RightContent{/*Pour régler le prob de IE qui comprend pas min-height*/
	height: auto;
	min-height: 420px;
}
/*Footer*/
#FooterContent{
	clear: both;
	width: 998px;
	height: 20px;
	text-align: center;
	font-size: 10px;
}
#FooterContent a, #FooterContent a:visited{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}
#FooterContent a:hover{
	text-decoration: underline;
}



/******* Menu 1 on reprend l'ancienne css*******/
#Menu{
	position: relative;
	width:748px;
	height:33px;
	z-index:999;
	background: url(../media/Design/Images/menu_bg.png) no-repeat right;
	margin-left: 250px;
	top: 133px;
}
#Menu_1{}
#Menu_1 li.top{
	display:block;
	float:left;
}
#Menu_1 li a.top_link {
	display:block;
	float:left;
	height:33px;
	line-height:26px;
	color:#000;
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
	padding:0 0 0 20px;
	cursor:pointer;
	margin-left: 10px;
	background: url(../media/Design/Images/bg_btn_menu_top_off.png) no-repeat;
	z-index:300;
}
#Menu_1 li a.top_link:hover {
	color:#ec7823;
	background: url(../media/Design/Images/bg_btn_menu_top_on.png) no-repeat;
	z-index:300;
}

#Menu_1 li:hover > a.top_link {
	color:#ec7823;
	background: url(../media/Design/Images/bg_btn_menu_top_on.png) no-repeat;
	z-index:300;
}
#Menu_1 table {
	border-collapse:collapse;
	width:0;
	height:0;
	position:absolute;
	top:0;
	left:0;
	z-index:300;
}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
#Menu_1 a:hover {visibility:visible; position:relative; z-index:200;}
#Menu_1 li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
#Menu_1 ul { position:absolute; left:-9999px; top:-9999px;  margin:0; padding:0; list-style:none; } /* width:0; height:0; */
#Menu_1 ul.sub { background: #fff none; margin-top: 16px;}	/*width:150px;*/
#Menu_1 :hover ul {left:0; top:15px; padding:10px; white-space:nowrap; height:auto;line-height:20px; z-index:300; }
#Menu_1 :hover ul li {display:block; height:20px; position:relative; font-weight:normal; width:auto; }
#Menu_1 :hover ul li a {display:block; font-size:11px; height:20px; line-height:20px; width:auto; padding:0px; color:#000; text-decoration:none; text-align:left; margin-left: 20px; }
#Menu_1 :hover ul li a:hover { color:#EC7823;}
/*#Menu_1 :hover ul li a.fly:hover{background:#3a93d2; color:#fff;}
#Menu_1 :hover ul li:hover > a.fly {background:#3a93d2; color:#fff;}*/
#Menu_1 :hover ul ul{display: none;}
#Menu_1 :hover ul :hover ul{display: block;left: 110px;width: 112px;top: 0;}
#Menu_1 :hover ul :hover ul ul{display: none;}
#Menu_1 :hover ul :hover ul :hover ul{display: block;}
#Menu_1 :hover ul :hover ul :hover ul ul{display: none;}
#Menu_1 :hover ul :hover ul :hover ul :hover ul{display: block;}


/*  menu 2  css modifié légèrement*/

#Menu_2{
	margin-right: 90px;
	color:#000;
}

#Menu_2 {
	list-style: none;
}

#Menu_2 a:link, #Menu_2 a:visited {
	color: #000;
	text-decoration:none;
	border:none;
}
#Menu_2 li{
	text-align: right;
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
	display:block;
	float:right;
	margin-bottom: 27px;
	height: 30px;
}
#Menu_2 li a.top_link:link {
	color:#000;
}
#Menu_2 li a.top_link:hover {
	color:#ec7823;
}
#Menu_2 li a.orangelink:link, #Menu_2 li a.orangelink:visited {
	color:#ec7823;
}


/************ PANIER   *************/
#Line{
	background-image: url(../media/Design/Images/trait.png);
	width: 240px;
	height: 28px;
}
#btnCheckout2{
	background-image: url(http://www.kettodesign.com/img/fr/btn_shopping_cart.png);
	height: 96px;
	width: 96px;
	display: block;
	margin-left: 76px;
}
#KettoCartPreviewTop{
	background-image: url(../media/Design/Images/head_panierV.png);
	width: 240px;
	height: 56px;
}
#KettoCartPreview{
	background-image: url(../media/Design/Images/center_panier.png);
	width: 240px;
	height: auto;
}
#KettoCartPreview ul{
	font-size: 10px;
	list-style-type: none;
	margin-left: 20px;
}
#KettoCartPreview ul li{
	width: 160px;
	background: url(../media/Design/Images/dot.png) no-repeat 0 0;
	padding-left: 10px;
	cursor: pointer;
	line-height: 11px;
	margin-bottom: 2px;
}
#KettoCartPreviewBottom{
	background-image: url(../media/Design/Images/footer_panier.png);
	width: 240px;
	height: 96px;
}
.Bg_Section_Top{
	background-image: url(../media/Design/Images/head_zone_affichage.jpg);
	width: 550px;
	height: 16px;
}
.Bg_Section{
	background-image: url(../media/Design/Images/centre_zone_affichage.jpg);
	width: 550px;
	height: auto;
}
.Bg_Section_Bottom{
	background-image: url(../media/Design/Images/footer_zone_affichage.png);
	width: 550px;
	height: 22px;
	margin-bottom: 20px;
}

.Bg2_Section_Top{
	background-image: url(../media/Design/Images/border/top2.png);
	width: 550px;
	height: 16px;
}
.Bg2_Section{
	background-image: url(../media/Design/Images/border/repeat2.png);
	width: 490px;	
	padding: 15px 30px 0px 30px;
	font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
	height: auto;
}
.Bg2_Section_Bottom{
	background-image: url(../media/Design/Images/border/bottom2.png);
	width: 550px;
	height: 22px;
}

#Cart_Left{
	position: relative;
	float: left;
	width: 280px;
	margin-left: 10px;
}
#btnZoom{
	position: absolute;
	top: 5px;
	right: 10px;
}
#btnZoom img{
	border: none;
}
#KettoItemEditor_photo{
	min-height: 225px;
}
#controleurPersonnage {
	font-size:16px;
	font-weight:bold;
	text-align:center;
}
#btnPrevCharacter,#btnNextCharacter{
	text-decoration: none;
	color: #000;
}
#KettoItemEditor_description {
	color:#666666;
	font-size:11px;
	margin-left:6px;
	text-align:justify;
	width:270px;
}

#Cart_Right{
	float: left;
	width: 230px;
	margin-left: 18px;
}
#Cart_Right fieldset{
	border: none;
}
#Cart_Right .labelselect{
	color:#0099CC;
	float:left;
	font-size:11px;
	font-weight:bold;
	text-align:left;
	width:70px;
}
.drop_liste {
	border:1px solid #999999;
	font-weight:bold;
	width:150px;
	color:#33CCFF;
	font-size:10px;
	text-align:left;
}
.label2 {
	color: #000000;
	display: block;
	font-size: 9px;
	margin-bottom: 5px;
	padding-top: 15px;
	text-align: left;
}
#controleurSize, #controleurCouleur, #controleurQte, #controleurPrice {
	clear: both;
	margin-top: 5px;
}
#controleurQte label, #controleurPrice label, #systemInfo_CharacterName label{
	width: 75px;
	display: block;
	float: left;
}
#controleurQte input{
	height: 11px;
}
#Cart_Right input:focus {
	background-color:#CCC;
}
.champ_texte{
	width: 220px;
	margin-bottom: 20px;
}
#item_qty {
	width: 30px;
}
.RadioSize {
	margin: 5px 10px 5px 0;
}
.RadioSize input {
	margin-left: 3px;
}
#controleurCouleur .RadioSize {
	float: left;
	height: 32px;
	line-height: 32px;
	margin: 5px 10px 5px 0;
}
#controleurCouleur .RadioSize input {
	height: 32px;
	margin-left: 3px;
}
.imgcolor {
	display: inline;
	float: left;
	height: 32px;
	width: 32px;
}


div.error {
	color: #D8000C;
	background-color: #FFBABA;
	border: 1px solid;
	margin: 10px 0px;
	padding:15px 10px 15px 10px;
	background-repeat: no-repeat;
	background-position: 10px center;
	font-size: 130%;
	font-weight: bold;
	text-align: center;
}

div.strerror {
	color: #D8000C;
	font-size: 130%;
	font-weight: bold;
	float:left;
	margin-bottom:10px;
	padding-top:86px;
	width:550px;
}

/* Content Style */

#Texte_Section {
	margin: 20px 20px 20px 40px;
	padding: 30px;
	border:1px solid #C3D73F;
	font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
}

#Texte_Section h1 {
	letter-spacing: 2px;
	font: 22px "Lucida Grande", Lucida, Verdana, sans-serif;
	margin-bottom: 18px;
}

#Texte_Section h2 {
	letter-spacing: 1px;
	font: 18px "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #8fc542;
	margin-bottom: 12px;

}

#Texte_Section p, .Bg2_Section p {
	line-height: 16px;
	margin-bottom: 20px;
}

#Texte_Section ul {
	list-style-position: inside;
	margin-bottom: 20px;
	margin-left: 20px;
}

#Texte_Section hr, .Bg2_Section hr {
	border: 0;
	height: 41px;
	width: 50px;
	
	background:transparent url(../media/Design/Images/etoile_sous_titre.png) no-repeat scroll 0 0;
	margin-bottom: 20px;
	margin-left: -20px;
}

/*** Social touch ****/
#Social ul{
	list-style-type: none;
	position: absolute;
	left: 0;
	bottom: 5px;
}
#Social ul li{
	float: left;
	display: block;
	width: 30px;
	height: 30px;
	margin-left: 20px;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
}
#Social ul li a{
	text-decoration: none;
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
}
#Social ul li a span{
	position: absolute;
	top: -16px;
	left: -60px;
	display: none;
	font-weight: bold;
	color: black;
	text-align: center;
	width:150px;
}
#Social ul li a:hover span{
	display: block;
}
#Social ul li.facebook a span{
	
}
#Social ul li.mail{
	background-image: url(../media/Design/Images/social/mail.png);
}
#Social ul li.facebook{
	background-image: url(../media/Design/Images/social/facebook.png);
}
#Social ul li.twitter{
	background-image: url(../media/Design/Images/social/twitter.png);
}
#Social ul li.linkedin{
	background-image: url(../media/Design/Images/social/linkedin.png);
}
#Social ul li.flickr{
	background-image: url(../media/Design/Images/social/flickr.png);
}