/*stamfli_main.css*/
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   /*font-size: 75.01%;*/
	font-size: 1em;
   line-height: 0.7em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
	font-size: 0.9em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
/*
a,
a:link 
a:active {
   text-decoration: underline;
   background-color: inherit; 
   color: #18507C; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                }


a:hover {
   text-decoration: none;
   background-color: #C3D4DF;
   color: #385C72;
}
*/
/*****************
basic layout 
*****************/
body {
   background-color: #FFF;
   color: #333;
   margin:1em; /* gives some air for the pagewrapper */

}

.showMsg{
	display:block;
	width:492px;
}

/* center wrapper, min max width */
div#pagewrapper {
   /*border: 1px solid black;*/
   margin: 0 auto;     /* this centers wrapper */
   max-width: 80em; /* IE wont understand these, so we will use javascript magick */
   /*min-width: 60em;*/
	width:1016px;
   background-color: #fff;
   color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/
title {font-family: Helvetica;font-size: 11pt;}
div#header {
	display:none;
	position:relative;
	background: #FFF url(../images/logo_stampfli.gif) no-repeat top left;
   height: 150px; /* adjust according your image size */
	width:1016px;
   /*background: #FFF;*/           
}

div#header h1 a {
/* you can set your own image here */
   background: #385C72 url(images/cms/logo1.gif) no-repeat 0 12px; 
   display: block; 
   height: 80px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
   float: right;
   width: 23em;     /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}

div#main {
	margin:0;
  	background: url('../photos/p_stamfli_pneu_accueil.jpg') no-repeat top left;
	height:628px;
	width:1016px;
}

div#main_cat {
	margin:0;
	background: #fff url('../images/null_image.gif') no-repeat top left;
	height:628px;
	width:1016px;
}

.fdBlc{background:#fff url('../images/null_image.gif') no-repeat top left;}

div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: 0;
}


div#footer {
   clear:both;       /* keep footer below content and menu */
   color: #fff;
   background-color: #385C72; /* same bg color as in header */
}

div#footer p {
   font-size: 0.8em;
   padding: 1.5em;      /* some air for footer */
   text-align: center; /* centered text */
   margin:0;
}

div#footer p a {
   color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 1em;
   border-bottom: 1px dotted black;
}


/********************
CONTENT BLOC STYLING : accueil deux colonnes
*********************/
.spacer{clear:both;}

/*colonne left*/
div.contentLeftColonne{
	float:left;
	width:600px;
}

div.contentLeftColonne ul li{
	list-style:none;
	text-decoration:none;
	line-height:1.4em;
   padding-bottom: 0.3em;
}

/*colonne right*/
div.contentRightColonne{
	float:right;
	width:492px;
	text-align: right;
}

div.bloc{
	/*margin-top:1px;*/
	border-top: #1E252D 1px solid;
	background-color:#fff;
	padding-left : 2.2em;
	padding-right : 2.2em;
	padding-bottom : 1em;
	
}

div.bio, div.publications{
	font-size: 12pt;
	height:auto; 
	background-color:#fff;
	padding-left : 2.2em;
	padding-right : 2.2em;
	padding-bottom : 1em;
}
div.bio hr{
	border: 0.5pt #000 solid;
}






/********************
CONTENT STYLING
*********************/
div#content {
	position:relative;
}

/* HEADINGS */
div#content h1 {
   font-size: 1.5em;  /* font size for h1 */
   line-height: 1em;
   margin: 0;
	padding-bottom:0.5em;
}
div#content h2 {

   color: #000; 
   font-size: 1.3em; 
   text-align: left; 
   padding:15px 0 15px 0;
  
}
div#content h3 {
   color: #000; 
   font-size: 1em;
   line-height: 1.3em;
   margin: 0.5em 0 0.2em 0;
}
div#content h4 {
   color: #000; 
   font-size: 1em;
   line-height: 1.3em;
padding:10px 0 8px 0 ;
   /*margin: 0 0 0.25em 0;*/
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   /*margin: 0 0 .8em 0;  /* some air around p elements */
   line-height:1.4em;
   padding-bottom: 0.3em;
}



blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;   /* smaller font size, as these are usually not so important data */
}

/* END TEXT */
.invisible{display:none;}
.visible{display:block;}

.ul_nav_pap{
	left: 400px;
	top: 83px;
	position: absolute;
	display:block;
	/*text-align:right;*/
	/*float:right;*/
	/*background-color:#dcdddd;*/
	padding-left:15px;
	height:2.2em;
}

.ul_nav_pap li select {
	margin-top:2px;
	
}
.ul_nav_pap li select option{
	width:25px;
	padding:0;
	margin:0;
}
.ul_nav_pap li
{
display:inline;
list-style:none;
font-size:0.8em;
color:#686868;
padding: 0.6em .6em .6em .6em;
margin:0;
/*line-height:2em;*/
}
/*VISIO*/

#visio{
	font-size: 10px;
	min-height: 600px;
	z-index:1000;
	position:absolute;
	/*top:50px;*/
	left:0px;
	/*width:633px;*/
	width:100%;
	/*height:650px;*/
	background-color: white;
	padding:1px 0 0 0;
	/*margin:auto;*/
}
.ul_visio_header
{
display:block;
padding:20px 0 0 0;
}

.ul_visio_header li
{
list-style-type: none;
list-style:none;
/*padding:0 0.15em 0 0.15em;*/
}

/*.ul_visio_footer
{
	padding-left: 10px;
	margin-left: 10px;
}
*/

.ul_visio_footer li{
	/*padding-left: 10px;*/
	display:block;
	list-style:none;
	color:#000;
	font-size:12px;
	line-height:20px;
}

.ul_visio_footer li img{
float: left;
margin-right: 15px;
}


.ul_visio_footer li#titre
{
font-weight: bold;
display:block;
list-style:none;
color:#000;
font-size:13px;
line-height:20px;
}

.ul_visio_footer li#an
{
color: #747474;
display:block;
list-style:none;
font-size:12px;
line-height:20px;
}

.ul_visio_footer li#description
{
display:block;
list-style:none;
/*padding:0 0.15em 0 0.15em;*/
font-weight:bold;
}


.ul_visio_footer li#photographe {
	color: #c1c1c1;
	font-size: 10px;
}
.ul_nav_pap li img, 
.ul_visio_header li img
{	
vertical-align:middle;
}

.ul_nav_pap a img, .dia_footer a img,  .dia_header a img{
text-decoration: none;
border:0;
}

#li_resultat, 
#li_resultat_bis, 
#pic_name, 
#kw_visio_footer
{
font-weight:bold;
font-size: 1em;
color: #686868;
padding-right:1em;
}	

#bt_visio_header, #aide_bt_ferme{
position:absolute;
top:5px;
right:15px;

}

#bt_sui_visio{
right: 45px;
position: absolute;
display: block;
list-style-type: none;
top: 9px;

}

#bt_prec_visio{
right: 65px;
position: absolute;
display: block;
list-style-type: none;
top: 9px;

}

.visio_body{text-align:left;}

.visio_body img{border-width: 1px; border-color: #999999; border-style: solid; text-align:left;}
#plate{list-style-type: none;}
.dia{float: left; margin:1px; padding:0px; /*height:230px;*/ width:196px; /*background-color : #CCC;*/background-color : #fff;vertical-align:bottom;}
.dia li{ list-style-type: none; display:block; float: left; margin:1px; padding:0px; /*height:230px;*/ width:196px; /*background-color : #CCC;*/background-color : #fff;vertical-align:bottom;}

.dia_header {font-size:0.8em;height:10px;color:#686868;padding: 5px 5px 2px 5px}/*hauteur 20px*/
.dia_header li{list-style-type: none; display:block; font-size:0.8em;height:10px;color:#686868;padding: 5px 5px 2px 5px}/*hauteur 20px*/

.dia_body {  position: relative;  min-height: 170px;padding-top:0px;}
.dia_body a img { padding-left: 0; padding-bottom: 0; padding-right: 0px; padding-top: 0; text-decoration: none;border:0;margin:0;}
.dia_footer{padding: 6px 5px 2px 0px;font-size:0.8em;color:#686868;height:20px;text-align:left;/*border-top: 1px solid #CCC;*/}/*hauteur 20px*/


table#contactSheet{
border-spacing: 0px;
width:100%;
}

table#contactSheet tr{
width: 100%;
height: 240px;
vertical-align: bottom;
text-align: center;
}

table#contactSheet td{
min-width: 200px;
}




/* END LISTS */