/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 
**************************************************************************
Copyright 2009 POINT WEB
type : screen
categorie : structure site
Auteur : SERCO POINTWEB
site : SMET JEWELRY
**************************************************************************/

/*fix bug navigateur*/
.myhr{ clear:both; height:0; overflow:hidden; visibility:hidden; }

/************* DETECTION JS **************/
#jserror{ background:#FFFFCC; border:#FF0000; color:#FF0000; padding: 10px; margin: 0 0 10px 0; float:left; }
#jserror dt{ font-weight:bold; }

*{margin:0; padding:0}
body{ background:#FFF url(../images/bg_site.gif) repeat-x top left; font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px}
h1{ display:none}
a{ text-decoration:none; outline:none;}
a:hover{ text-decoration:underline}
#accessibilite { display:none}
img{ border:none}

/*----------------------------------------------------< STRUCTURE >---------------------------------------------------*/

#global{width:995px; margin:0 auto;}
#header{height:562px;}

#menu{ width:604px; height:140px; float:left; background:url(../images/bg_menu.jpg) no-repeat top left; position:relative}
#menu ul.ulRubrique{ list-style-type:none; margin:68px 0 0 51px}
#menu li.rubrique{ float:left}
h2{ display:none}
#menu li.rubrique a{display:block; height:40px}

#menu li a#accueil{ width:71px; background:url(../images/home.gif) no-repeat top left }
#menu li a#accueil:hover{ background:url(../images/home.gif) no-repeat bottom left}
#menu li a#collections{ width:104px; background:url(../images/collections.gif) no-repeat top left }
#menu li a#collections:hover{ background:url(../images/collections.gif) no-repeat bottom left}
#menu li a#news{ width:83px; background:url(../images/news.gif) no-repeat top left }
#menu li a#news:hover{background:url(../images/news.gif) no-repeat bottom left}
#menu li a#distribution{ width:127px; background:url(../images/distribution.gif) no-repeat top left }
#menu li a#distribution:hover{background:url(../images/distribution.gif) no-repeat bottom left}
#menu li a#contact{ width:99px; background:url(../images/contact.gif) no-repeat top left }
#menu li a#contact:hover{background:url(../images/contact.gif) no-repeat bottom left}

#soumenuCollections{ z-index:5; position:absolute; top:110px; left:50px; width:216px;background: url(../images/bg_souscollections.png) repeat top left; border:#666 solid 1px; padding:10px; font-family:"Arial"}
#soumenuCollections dt{ color:#d6be80; font-size:11px; text-align:center; margin-bottom:10px}
#soumenuCollections dd{ line-height:13px; color:#FFF; font-size:11px}
#soumenuCollections dd.rubriques{ margin:0 0 0 20px}
#soumenuCollections dd a { color:#FFF; font-size:11px} 
#soumenuCollections dd a:hover { font-weight:bold; text-decoration:none} 
#soumenuCollections dd span{ color:#7e7e7e}
#soumenuCollections dd.sousTitle{ color:#e10104; font-size:11px; font-weight:bold; margin:5px 0 5px 10px}

#soumenuNews{ z-index:5; position:absolute; top:110px; left:180px; width:120px;background: url(../images/bg_souscollections.png) repeat top left; border:#666 solid 1px; padding:10px; font-family:"Arial"}
#soumenuNews ul{ line-height:13px; color:#FFF; font-size:11px;}
#soumenuNews li{ list-style-type:disc; list-style-position:inside}
#soumenuNews li a { color:#FFF; font-size:11px} 
#soumenuNews li a:hover { font-weight:bold; text-decoration:none} 

#logoSmetJewelry{ width:391px; height:140px; float:left; background:url(../images/bg_logoSmetJewerlry.jpg) no-repeat top left}
#logoSmet{ width:496px; height:422px; float:left}

#diapoSwf{ width:499px; height:422px; float:left; background:url(../images/bg_diapoSwf.jpg) no-repeat top left}

#bandeEncarts{ height:210px}
#encartCollections{ width:237px; height:210px; float:left}
#encartCollections a{ width:237px; height:210px; display:block; background:url(../images/encartCollections.jpg) no-repeat top left}
#encartCollections a:hover{ background:url(../images/encartCollections.jpg) no-repeat bottom left}
h4{ display:none}

#encartCatalog{ width:232px; height:210px; float:left; position:relative}
#encartCatalog a#loginCatalog{ width:232px; height:210px; display:block; background:url(../images/encartCatalog.jpg) no-repeat top left}
#encartCatalog a#loginCatalog:hover{ background:url(../images/encartCatalog.jpg) no-repeat bottom left}

#soumenuLoginCatalog{z-index:5; position:absolute; top:-130px; left:-10px; width:250px;background: url(../images/bg_souscollections.png) repeat top left; border:#666 solid 1px; padding:10px;}
#formLogin{}
#formLogin fieldset{ border:none; padding:5px}
#formLogin p{ font-size:10px; color:#ccc; font-family:Arial, Helvetica, sans-serif; margin-bottom:10px; margin-top:5px}
#formLogin legend{ color:#fff; font-size:12px; font-weight:bold}
#formLogin div{ margin:5px}
#formLogin label{ color:#fff; display:inline; float:left; width:50px; margin-left:10px}
#formLogin input{width:152px}
#formLogin input:focus, textarea:focus{background:#f1f1f1}
#formLogin input.monSubmit{margin: 0 0 0 61px; background:#c9b274;cursor:pointer; height:25px; border:none; font-weight:bold; color:#fff; font-size:14px; width:152px}
#formLogin input.monSubmit:hover{background:#666; cursor:pointer}
#formLogin input.passOublie{margin: 0 0 0 61px; background:#c9b274;cursor:pointer; height:25px; border:none; font-weight:bold; color:#fff; font-size:14px; width:30px}
#formLogin input.passOublie:hover{background:#666; cursor:pointer}
#formLogin a{ color:#fff; font-size:13px;}

#newsletter{ width:526px;height:210px; background:url(../images/bg_newsletter.jpg) no-repeat top left; float:left}
#formNewsletter{ padding:110px 0 0 40px}
#formNewsletter fieldset{ border:none}
#formNewsletter legend{display:none}
#formNewsletter div{ float:left}
#formNewsletter input.btn{ width:252px; border:#757575 solid 1px; color:#333; font-size:16px; padding-left:5px; height:20px}
#formNewsletter input:focus, textarea:focus{background:#f1f1f1}
#formNewsletter input.monSubmit{margin: 0 0 0 5px; background:#4d4d4d;cursor:pointer; border:#757575 solid 1px; height:22px;color:#fff; font-size:14px; width:112px}
#formNewsletter input.monSubmit:hover{background:#666; cursor:pointer}

h5{ font-size:11px; color:#b01b1d; width:965px; height:30px; background:url(../images/bg_h5.gif) no-repeat top left; padding:20px 0 0 30px; font-weight:normal}
h5 span{ color:#666}
h6{ display:none}
.titrePage{ width:89px; height:295px; float:left}
#accueil{ background: url(../images/titre-accueil.gif) no-repeat top left}

#wrapper{}
#content{ float:left; width:906px; min-height:282px}
#content p.paragraphe{ font-size:11px; line-height:18px; color:#666}

#footer{ background:url(../images/bg_footer.gif) repeat-x top left; height:284px; clear:both}
#footer div{width:995px; margin:0 auto; background:url(../images/bg_divfooter.gif) no-repeat top left; height:284px}

#hautdepage{ width:69px; height:64px; padding:104px 0 0 30px}
#hautdepage p{ display:none}
#hautdepage a{width:69px; height:64px; display:block; background:url(../images/toppage.gif) no-repeat top left}

#liens{ color:#bc9944; font-size:10px; line-height:10px; margin-bottom:33px}
#liens a.beige{ color:#bc9944; font-size:10px}
a.gris{ color:#484848}
span.gris{ color:#484848}

#coordonnees{ color:#666; font-size:11px; float:left; text-align:left; margin-left:20px}
#coordonnees a{ color:#666;}
#copyright{ float:right; text-align:right;color:#666; font-size:11px; margin-right:20px}
#copyright a{color:#666;}
span.rouge{ color:#a11817}

/*----------------------------------------------------< Accueil >---------------------------------------------------*/

.visuel{ border:#000 solid 1px; float:left; margin:0 20px 0 0; position:relative}
.zoom1{ z-index:5; position:absolute; top:268px; left:120px}
span.beige{ color:#bc9944}
a.gris2{ color:#484848; font-size:20px}
a.gris2:hover{ color:#000; }

#sousEnsavoirplus{ margin:10px 0 0 0}

/*----------------------------------------------------< Collections >---------------------------------------------------*/

#titreCollections{ background: url(../images/titre-collection.gif) no-repeat top left}


a#btnShop{ display:block; text-indent:-9999px; width:249px; height:100px;background:url(../images/btn-shop.jpg) no-repeat top left; float:left}
a#btnShop:hover{background:url(../images/btn-shop.jpg) no-repeat bottom left}

/*----------------------------------------------------< Inscription >---------------------------------------------------*/

#inscription{ background: url(../images/titre-inscription.gif) no-repeat top left}

#formInscription{ font-size:11px; color:#333; text-align:left; margin:10px 0}
#formInscription div{margin:5px}
#formInscription legend{display:none}
#formInscription fieldset{border:none}
#formInscription label{ 
	margin:0 5px 0 300px;
	width:100px; 
	float:left;
	text-align:right
}
#formInscription input{
	border:#666 1px solid;
	color:#333;
	font-size:11px;
	width:150px
}
#formInscription select{
	border:#666 1px solid;
	color:#333;
	font-size:11px;
	width:150px
}
#formInscription textarea{	
	border:#666 1px solid;
	color:#333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	width:200px;
	font-size:1.1em;
}
#formInscription input:focus, textarea:focus{background:#f1f1f1}
#formInscription input.monSubmit{margin: 0 0 0 124px; background:#bd9a46;cursor:pointer; height:35px; border:none; font-weight:bold; color:#fff; font-size:14px; width:200px}
#formInscription input.monSubmit:hover{background:#666; cursor:pointer}


/*-------------------------------------------< ACCES COMPTE PERSO / MON COMPTE >--------------------------------------*/

#moncompte{ background: url(../images/titre-moncompte.gif) no-repeat top left}
#formlog{ margin-bottom:20px}

#formLog p{ font-size:11px; color:#ccc; margin-bottom:10px; margin-top:5px}
#formLog fieldset{ border:#ccc solid 1px; padding:15px; width:800px;}
#formLog legend{ color:#000; font-size:12px; font-weight:bold; padding:0 5px 0 5px}
#formLog div{ margin:15px 5px 5px 5px; color:#666; font-size:12px}

a.beige{ color:#bc9944; font-size:12px}

#formLog input.monSubmit{ background:#bc9944;cursor:pointer; height:25px; border:none; font-weight:bold; color:#fff; font-size:14px; width:130px}
#formLog input.monSubmit:hover{background:#000; cursor:pointer}

a#download{ display:block; width:565px; height:212px; background:url(../images/btn-catalog.jpg) no-repeat top left; text-indent:-9999px; margin:15px 0 0 0}
a#download:hover{ background:url(../images/btn-catalog.jpg) no-repeat bottom left; }


/*-------------------------------------------< News >--------------------------------------*/

#news{ background: url(../images/titre-news.gif) no-repeat top left}

.blocActu{ width:900px; float:left}
.img1{ border:#ccc solid 1px;}
.visuelActu{ border:#ccc solid 1px; margin-right:15px; float:left}
.blocActu p.titreActu{ color:#bc9944; font-size:12px;}
.blocActu p.descriptionActu{ color:#666; font-size:11px; overflow:hidden; height:85px; line-height:14px; margin-bottom:15px}
.blocActu p#liens{ width:900px; height:10px;}
a.beigebis{ color:#bc9944; font-size:11px;}
hr{ border:#ccc solid 1px; margin:10px 0 10px 0; size:1px}
.detailsActu{color:#999; font-size:11px; margin:0}

/*-------------------------------------------- pagination ----------------------------------------*/

.pages{ text-align:center; margin-top:20px}
.pages ul{ list-style-type:none}
.pages ul li{ display:inline; color:#999; font-size:14px}
.pages ul li a{color:#999; font-size:14px}
.pages ul li a.activ{color:#999; font-size:14px; font-weight:bold; text-decoration:underline}

/*-------------------------------------------< Contact >--------------------------------------*/

#contact{ background: url(../images/titre-contact.gif) no-repeat top left}
#formContact{ font-size:11px; color:#333; text-align:left; margin:10px 0}
#formContact div{margin:5px}
#formContact legend{display:none}
#formContact fieldset{border:none}
#formContact label{ 
	margin:0 5px 0 190px;
	width:210px; 
	float:left;
	text-align:right
}
#formContact input{
	border:#666 1px solid;
	color:#333;
	font-size:11px;
	width:150px
}
#formContact input.bobox{
	border:none;
	color:#333;
	font-size:11px;
	width:15px; height:15px
}
#formContact select{
	border:#666 1px solid;
	color:#333;
	font-size:11px;
	width:150px
}
#formContact textarea{	
	border:#666 1px solid;
	color:#333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	width:200px;
	font-size:1.1em;
}
#formContact input:focus, textarea:focus{background:#f1f1f1}
#formContact input.monSubmit{margin: 10px 0 0 405px; background:#bd9a46;cursor:pointer; height:35px; border:none; font-weight:bold; color:#fff; font-size:14px; width:200px}
#formContact input.monSubmit:hover{background:#666; cursor:pointer}

/*-------------------------------------------< Contact Shop >--------------------------------------*/

#contact{ background: url(../images/titre-contact.gif) no-repeat top left}
#formContactShop{ font-size:11px; color:#333; text-align:left; margin:10px 0}
#formContactShop div{margin:5px}
#formContactShop legend{display:none}
#formContactShop fieldset{border:none}
#formContactShop label{ 
	margin:0 5px 0 190px;
	width:210px; 
	float:left;
	text-align:right
}
#formContactShop input{
	border:#666 1px solid;
	color:#333;
	font-size:11px;
	width:150px
}
#formContactShop input.bobox{
	border:none;
	color:#333;
	font-size:11px;
	width:15px; height:15px
}
#formContactShop select{
	border:#666 1px solid;
	color:#333;
	font-size:11px;
	width:150px
}
#formContactShop textarea{	
	border:#666 1px solid;
	color:#333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	width:200px;
	font-size:1.1em;
}
#formContactShop input:focus, textarea:focus{background:#f1f1f1}
#formContactShop input.monSubmit{margin: 10px 0 0 405px; background:#bd9a46;cursor:pointer; height:35px; border:none; font-weight:bold; color:#fff; font-size:14px; width:200px}
#formContactShop input.monSubmit:hover{background:#666; cursor:pointer}

/*-------------------------------------------< Distribution >--------------------------------------*/

#distribution{ background: url(../images/titre-distribution.gif) no-repeat top left}
.blocPartenaires{ float:left; margin:20px 10px 15px 10px; border:#ccc solid 1px; padding:20px; min-height:145px; width:150px}
.blocPartenaires p{font-size:11px; line-height:18px; color:#666}
.blocPartenaires p.titre{ margin-bottom:15px; text-decoration:underline}
.blocPartenaires a{ color:#bc9944}

/*-------------------------------------------< Mentions légales >--------------------------------------*/

#mentions{ background: url(../images/titre-mentions.gif) no-repeat top left}