/*
Titre			styles.css
Site 			mini-tp-shop.ch
Navigateurs 	tous
Autheur 		V.T. (www.megaphone.ch)
Date création 	30.01.2009
Dernière modif.	07.04.2011 /CR
*/

/* 
GLOBAL RESET 
On re-définit les styles initiaux de certaines balises
Basé sur styleMain.css de www.elliotjaystocks.com 
*/

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100% }
q:before, q:after { content:''}

strong { font-weight: bold }
em { font-style: italic }
ol, ul, li { list-style:none }

* a { position:relative } /* Gets links displaying over a PNG background */
a { outline:none } /* Gets rid of Firefox's dotted borders */
a img { border:none } /* Gets rid of IE's blue borders */

/* 
TYPO 
*/
h1 { font:24px/24px Arial, Helvetica, sans-serif; font-weight:normal; padding:5px 0 3px 0; color:black; text-transform:uppercase; }
h2 { font:normal 17px/17px Arial, Helvetica, sans-serif; padding:5px 0 0 0; color:black; }
h2.titre_recherche { padding:5px 0 1em 0; font:normal 14px/21px arial, helvetica, sans-serif; color:#666; }
h2.titre_vitrines { padding-left:10px; font:normal 14px/21px arial, helvetica, sans-serif; color:#666; }
h2.titre_01 { font:normal 14px/21px arial, helvetica, sans-serif; color:#666; }
h3 { font:normal 18px/18px Arial, Helvetica, sans-serif; margin:10px 0 6px 0; color:black; text-transform:uppercase; text-align:center; }
h4 { font:bold 13px/18px Arial, Helvetica, sans-serif; margin:10px 0 2px 0; color:#666 }
p { margin:2px 0 10px 0 }
body, h4, p, li, dt, dd, label, input, textarea { font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height:17px; color:#000 }
input, textarea { font-size:11px; color:#333; padding:2px }
blockquote { font:11px/18px Arial, Helvetica, sans-serif; }
table { border:0; }
th { font-weight:bold; color:#999 }
td, th { padding:0.2em 0.5em; border-bottom:1px solid #ccc; }
hr { height:1px; background-color:#999 }

a { color:black; text-decoration:none }
a:visited { color:black; text-decoration:none }
a:hover { color:red; text-decoration:none }
a:focus { color:red; text-decoration:none }

/* 
LAYOUT 
*/
body { background-color:#3375A6; text-align:center; width:100%; }
div#header { height:90px; background-color:#F4D23B; text-align:center; }
div#contentheader { margin:0 auto 0 auto; width:960px; }
div#contentheader h2 { font:normal 14px/17px Arial, Helvetica, sans-serif; padding-top:20px; color:black; }
.uniqueEnSuisse { float:right; padding-top:22px; width:173px; height:15px; }
.logo { float:left; margin-top:8px; margin-left:8px; }

div#content { position:relative; z-index:2; margin:0 auto 0 auto; width:960px; }
div#menu { margin-top:-42px; padding-top:10px; height:52px; background:url('images/menubg.png') top center no-repeat; }
div#contentmenu { font-family:arial, helvetica, sans-serif; font-size:15px; line-height:34px; text-align:right; }
span.txtSmaller { font-size:12px; }
div#contentmenu img { vertical-align:top; }

div#text { position:relative; padding:0 10px 20px; background-color:white; border-bottom:3px solid #999; text-align:left; }
.homeLeftCol { position:absolute; top:0; left:10px; width:230px; }
.homeRightCol { margin-left:260px; width:670px; background:#fff url('images/bgpage2.png') 0 428px no-repeat; }
#vitrines { float:left; width:370px; }
#adresse { float:left; width:300px; }
.promo { display: block; margin: 0 0 1em; padding: 0.5em; color: #000; text-decoration: none; background-color: #F4D23B; border: 2px solid #D11915; border-radius: 10px; }
.promo span.big { font-size: 1.5em; line-height: 1.5em; font-weight: bold; }
form#recherche { margin-bottom:20px; padding:10px 0; width:220px; border-bottom:2px solid #ccc; text-align:left; }

div#footer { margin:20px 0 50px; color:#fff; text-align:center; }
div#bas { margin:0 0 7px 0; padding:0.5em 0; font-size:15px; color:#000; background-color:#F4D23B; border-top:2px solid black; border-bottom:2px solid black; }


/* 
OTHERS 
*/

div.vitrine { width:170px; margin:0 30px 20px 30px; }

div#contentmenu a { display:-moz-inline-box; display:inline-block; height:52px; padding:0px 10px; color:#00243f; text-decoration:none; text-transform:capitalize; }
div#contentmenu a:visited { color:#00243f; text-decoration:none }
div#contentmenu a:hover { color:#0ba2e9; text-decoration:none }
div#contentmenu a:focus { color:#0ba2e9; text-decoration:none }
div#contentmenu a.current { color:#0ba2e9; font-weight:bold; text-decoration:none; background-color:#fff; }
div#contentmenu a:last-child { padding-right:55px; }

div#footer { color:#fff }
div#footer a { color:#fff; text-decoration:none }
div#footer a:visited { color:#fff; text-decoration:none }
div#footer a:hover { color:#fff; text-decoration:underline }
div#footer a:focus { color:#fff; text-decoration:underline }
div#footer a.linkEmail { padding:5px 30px 5px 0; background:transparent url('images/icon_contact.png') center right no-repeat; color:#00243f; text-decoration:underline; }
div#footer a.linkEmail:hover, a.linkEmail:focus { color:#0ba2e9; text-decoration:underline }

.marque { float:left; width:110px; height:90px; text-align:center; margin-top:20px; }
.marque img {  }

.leftBt { float:left; padding:5px 0 0; width:200px; }
.leftBt img { padding-bottom:2px; vertical-align:middle; }
.leftBt a { display:inline-block; width:170px; }
.leftBt a.long { width:210px; }
.leftBt a.tous { width:160px; float:right; text-align:left; margin-top:2px; padding-left:3px; }

table.motrecherche { width:550px; padding:0px 0 20px; }
table.motrecherche td { padding:0 7px 5px 0; border:none; }
table.motrecherche td.tdLabel { text-align:right; }
table.motrecherche td.tdSubmit { padding-left:70px; text-align:left; }

table.articles { width:100%; }
table.articles td { border-bottom:1px solid #ddd; padding:10px 0; width:230px; vertical-align:bottom; text-align:center; }

table.contentText { width:100%; margin:0 0 2em 0; }
table.contentText td { padding:0 7px 5px 0; }

table.formulaire { width:100%; }
table.formulaire td { padding:0 3px 3px 0; }

a.imgBigHome { display:block; width:670px; height:427px; background:#fff url('images/img_homepage.jpg') top left no-repeat; text-indent:-9999px; }
a.imgBigHome:hover { background-position:top right; }
.votre_recherche { margin-top:0em; padding-top:1em; border-top:1px solid #CCC; font-weight: bold ; color: #006499; }
.verticalAlign { vertical-align:middle; }
.clearing { clear:both; }
a.linkPhoto { visibility:hidden; }

.articleTitre { font-size:14px; line-height:24px; color:#000; text-decoration:none;  }

.icons { text-align:right; margin:0 5px;}
.icons img { vertical-align:bottom; }
.icon { display:inline-block; margin:0; padding:1px 0; width:44px; height:20px; }
.iconEchelle { line-height:20px; color:#000; font-size:11px; font-weight:bold; background-color:#fff; border-radius:3px; text-align:center; }
.echelle12 { background-color:#ffffd4 }
.echelle144 { background-color:#9a0070; color:#fff }
.echelle14-5 { background-color:#87591A; color:#fff }
.echelle16 { background-color:#f8ed76 }
.echelle18 { background-color:#ffff00 }
.echelle20 { background-color:#fff }
.echelle200 { background-color:#ffee00 }
.echelle24 { background-color:#a2c83c; color:#fff }
.echelle25 { background-color:#00984a; color:#fff }
.echelle32 { background-color:#6464ff; color:#fff }
.echelle35 { background-color:#0000ff; color:#fff }
.echelle43 { background-color:#70c3bf; color:#fff }
.echelle47 { background-color:#fff }
.echelle48 { background-color:#e45959; color:#fff }
.echelle50 { background-color:#ff0000; color:#fff }
.echelle53 { background-color:#fff; }
.echelle55 { background-color:#fff }
.echelle6 { background-color:#cecece }
.echelle60 { background-color:#fff }
.echelle64 { background-color:#fff }
.echelle72 { background-color:#00dd00; color:#fff }
.echelle87 { background-color:#ffae00; color:#fff }
.divprix_reduit, .divbaisse { position:relative; }
.prix_reduit { padding:0; margin:0; position:absolute; right:5px; bottom:34px;  z-index:500;  }
.baisse { padding:0; margin:0; position:absolute; right:5px; bottom:34px;  z-index:500;  }

.btPanier { display:block; float:right; margin:0 5px; width:99px; height:33px; padding:5px; color:#4e5558; font-size:13px; background:transparent url('images/icon-panier.png') top left no-repeat; text-align:left; }
.btPanier:hover { color:#4e5558; background-image:url('images/icon-panier-over.png'); }
.prixBaisse { background-image:url('images/icon-prixbaisse.png'); }
.prixBaisse:hover { background-image:url('images/icon-prixbaisse-over.png'); }
.nonDispo, .nonDispo:hover { color:#999; background-image:url('images/icon-nondispo.png'); }

.ancienPrix { color:red; text-decoration:line-through; }
.imgToLeft { float:left; margin:0 1em 1em 0; }
p.prixenbaisse { padding:10px 0; background-color:#a7d4e9; }

/* Tinyslider */
#slidesVitrines { position:relative; margin:10px; padding:10px 20px; width:280px; border:1px solid #efefef; background-color:#fff }
#slidesMagasin { position:relative; float:right; margin:10px; padding:10px 20px; width:340px; border:1px solid #efefef; background-color:#fff }
#slider { position:relative; overflow:auto; width:280px; height:260px }
#slider ul { position:absolute; list-style:none; top:0; left:0 }
#slider li { float:left; width:280px; height:260px }
.pagination { position:relative; padding:5px 0 5px 110px; width:240px; height:10px; list-style:none; }
.pagination li { float:left; cursor:pointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff }
.pagination li:hover, li.current { background:#0ba2e9 }
#slidesMagasin #slider { width:340px; height:256px; }
#slidesMagasin #slider li { width:340px; height:256px; }
#slidesMagasin .pagination { padding:5px 0; width:340px; text-align:center; }

/*
Formulaires
*/ 
label { /* mise en forme des intitulés de champs */
	margin:0;
	padding-bottom: 0.5em;
	font-family :Arial, Helvetica, sans-serif;
	vertical-align: middle;
	color: #000000;
	font-size:12px;
}
.label {
	width:80px;
}
form p { /* p du formulaire */
	margin: 0.2em;
	padding: 0;
}
form p label {
	width: 500px;
	text-align: left;
}
select {
	border-right: #ccc 1px solid;
	border-top: #ccc 1px solid;
	border-left: #999 1px solid;
	border-bottom: #999 1px solid;
	font-size: 11px;
	color: #000;
	font-family:Arial, Helvetica, sans-serif;
	background-color: #fff ;
	/*margin:0 0 0 5px;
	width: 250px;*/
}
textarea {
	border-right:#ccc 1px solid;
	border-top:#ccc 1px solid;
	border-left:#999 1px solid;
	border-bottom:#999 1px solid;
	font-size:11px;
	color:#333;
	font-family:arial, helvetica, sans-serif;
	background-color:#fff ;
	width:250px;
	margin-bottom:10px;
}
.formfield {
	border-right:#ccc 1px solid;
	BORDER-TOP:#ccc 1px solid;
	FONT-SIZE:11px;
	BORDER-LEFT:#999 1px solid;
	COLOR:#000;
	BORDER-BOTTOM:#999 1px solid;
	font-family:arial, helvetica, sans-serif;
	BACKGROUND-COLOR:#fff;
}
.formfieldlong { /* champs à remplir */
	border:#336598 1px solid;
	font-size:11px;
	width:200px;
	color:#006499;
	font-family:arial, helvetica, sans-serif;
}
.formbuttonSmall { margin-left:10px; width:36px; line-height:19px; border:none; font-weight:bold; color:#eee; cursor:pointer; background:transparent url('images/submit_bg.png') center center no-repeat; }
.formbuttonSmall:hover, .formbuttonSmall:focus { color:#fff; background-image:url('images/submit_bg_over.png'); }

form.searchForm { padding:5px 0 0; }
form#recherche p { padding:0.2em 0 0.2em 0;}
form#recherche p label { float:left; padding:0 1em 0 0; width:50px; text-align:left; font-size:11px; }
.formbutton { cursor:pointer; }