/*********************************************************
	Interactive R.O.I - V1 (Fevrier 2007)
	PRINT VERSION
	http://www.iroisolutions.fr
**********************************************************

**********************************************************
CONTENTS:

-> Common Elements
-> Pages
	-> Index
	-> Nos Solutions
	-> Nos Clients
	-> Exemples Concrets
	-> Contactez Nous
	-> Sitemap
	-> Accessibilité
	-> Mentions légales
	-> Erreur
*********************************************************/

/****************************************
COMMON ELEMENTS
****************************************/

/* Body */
body {
padding:0;
margin:0;
}

/* No Javascript */
#nojs {
display:none;
}

/* Banner */
#banner {
width:100%;
height:auto;
margin:0;
padding:0;
border-top:4px solid #000;
background-color:#FFF;
}

#logo_zone {
width:890px;
height:80px;
margin:0 auto;
padding:15px 0 0 90px;
}

#logo_zone #title {
font:220% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
text-decoration:none;
}

abbr {
border:0;
}

#logo_zone #signature {
padding:10px 0 0 60px;
font:600 90% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-transform:uppercase;
}

/* Menu */
#menu {
width:980px;
margin:15px auto 0;
padding-bottom:1px;
text-align:right;
}

#menu ol {
margin:0;
padding:5px 0 4px;
}

#menu ol li {
display:inline;
}

#menu ol li a {
margin:0 0 0 -5px;
padding:5px 10px;
background:#FFF;
border-top:1px solid #000;
border-bottom:1px solid #FFF;
border-left:1px solid #000;
border-right:1px solid #000;
font:700 80% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
text-transform:uppercase;
text-decoration:none;
}

#menu ol li a:active {
color:#000;
text-decoration:underline;
}

.accueil #menu #accueil a, .clients #menu #clients a, .solutions #menu #solutions a, .exemples #menu #exemples a, .contact #menu #contact a {
padding:2px 10px 5px;
border-top:4px solid #000;
}

/* Communication */
#communication {
width:100%;
height:150px;
background:#FFF;
border-top:1px solid #000;
border-bottom::1px solid #000;
text-align:center;
}

#sendinfo {
width:980px;
height:150px;
margin:0 auto;
}

#sendinfo #text {
padding:45px 0 0 15px;
font:300% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#FFF;
}

/* Mainframe */
#mainframe {
width:100%;
background:#FFF;
}

/* Titles */
.content {
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#666;
text-decoration:none;
}

.link {
color:#6F71FF;
text-decoration:underline;
}

/* Pictures */
img {
border:0;
}

/* Footer */
#footer {
display:none;
}

/* Xiti Tag */
#xiti-logo {
display:none;
}

/****************************************
PAGES
****************************************/

/* INDEX */
#mainzone_index {
width:940px;
height:350px;
margin:0 auto;
padding:15px 20px 20px;
background:#FFF;
font-family:'Trebuchet MS','Lucida Grande', Arial, sans-serif;
text-align:center;
}

#mainzone_index h1 {
margin:0 0 5px;
font-size:110%;
text-align:center;
}

#mainzone_index .intro {
padding:0;
margin:0;
line-height:1.8em;
font-size:90%;
}

#mainzone_index #prosolutions_container {
padding-top:15px;
margin:10px 0 0;
border-top:1px dotted #999;
text-align:left;
}

#mainzone_index #problems {
float:left;
width:460px;
height:250px;
padding:0 5px 10px;
border-right:1px solid #999;
background:#FFF;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#666;
}

#mainzone_index #problems h1 {
padding:0;
margin:0;
font-size:150%;
color:#000;
text-align:left;
}

#mainzone_index #problems ul {
padding:0;
margin:15px 0 0;
list-style-type:disc;
}

#mainzone_index #problems ul li {
margin:4px 0 10px 15px;
padding:0 0 3px 2px;
line-height:1.2em;
}

#mainzone_index #problems ul li .questions {
font:100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
text-decoration:underline;
cursor:pointer;
}

#mainzone_index #solutionbox {
float:right;
width:450px;
height:250px;
padding:0 5px 0 0;
background:#FFF;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
text-align:justify;
}

#mainzone_index #solutionbox ol {
padding:0 0 0 20px;
margin:0;
line-height:1.8em;
}

#mainzone_index #solutionbox h1 {
padding:0;
margin:0 0 10px;
font-size:150%;
color:#000;
text-align:left;
}

#mainzone_index #solutionbox h2 {
padding:0;
margin:0 0 5px;
font-size:105%;
color:#000;
text-align:left;
}

#mainzone_index #solutionbox a {
font:700 100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
}

.pcontact {
margin:10px 0 0;
text-align:center;
}

/* NOS SOLUTIONS */
#mainzone_solutions {
width:860px;
margin:0 auto;
padding:15px 0 0;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-align:center;
}

#mainzone_solutions h1 {
margin:0;
font-size:130%;
text-align:center;
}

#mainzone_solutions h2 {
margin:0;
font-size:140%;
text-align:center;
}

#mainzone_solutions a {
font:700 100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
}

#mainzone_solutions ul {
padding:10px 0 0 20px;
margin:0;
line-height:1.6em;
}

#mainzone_solutions ul li {
color:#666;
}

#solutions_container {
padding:20px 0;
margin:20px 0;
border-top:1px dotted #999;
text-align:left;
}

#solutions_container p {
text-align:center;
}

#webservices {
float:left;
width:47%;
}

#marketinginternet {
float:right;
width:49%;
padding-left:20px;
margin-bottom:10px;
border-left:1px solid #999;
}

/* NOS CLIENTS */
#mainzone_clients {
width:860px;
padding:15px 60px 50px;
margin:0 auto;
background:#FFF;
}

#mainzone_clients #references {
padding-bottom:20px;
}

#mainzone_clients #references h1 {
padding:0 0 5px;
margin:0;
font:170% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
text-align:center;
}

#mainzone_clients #references .client {
clear:both;
padding:8px 10px 0;
}

#mainzone_clients #references .screenshot {
float:left;
width:50px;
height:50px;
border:4px solid #CCC;
}

#mainzone_clients #references .screenshot:hover {
border:4px solid red;
}

#mainzone_clients #references .shorttext {
float:right;
width:750px;
height:55px;
padding-top:5px;
line-height:1.5em;
font:100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#666;
}

#mainzone_clients #references .shorttext a {
font:700 120% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
}

#mainzone_clients #references .shorttext a:hover {
color:#999;
}

/* EXEMPLES CONCRETS */
#mainzone_exemples {
width:920px;
padding:10px 30px 30px;
margin:0 auto;
background:#FFF;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
text-align:justify;
}

#mainzone_exemples #clickthumbnail {
text-align:center;
}

#mainzone_exemples #smallthumbnails {
width:100%;
padding:10px 0 0 15px;
margin:15px 0;
text-align:left;
}

#mainzone_exemples #smallthumbnails ul {
display:inline;
list-style-type:none;
padding:0;
margin:0 auto;
}

#mainzone_exemples #smallthumbnails ul li {
display:inline;
list-style:none;
padding:0 25px 0 0;
margin:0;
}

#selectexemple {
width:100%;
padding:10px;
margin:0 auto 20px;
border-bottom:1px dotted #999;
text-align:center;
}

#selectexemple ol {
list-style-type:none;
padding:0 0 10px;
margin:0;
}

#selectexemple ol li {
display:inline;
}

#selectexemple ol li a {
padding:0 10px;
margin-right:40px;
border:1px solid #999;
font:140% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
text-decoration:none;
color:#999;
}

#selectexemple ol li a:hover {
border:1px solid #000;
color:#000;
}

#mainzone_exemples #sitescreenshot {
float:left;
width:450px;
height:540px;
margin-top:15px;
text-align:left;
}

#mainzone_exemples #imageContainer {
width:450px;
height:338px;
}

#mainzone_exemples #sitescreenshot #imageContainer img {
display:none;
position:absolute;
}

.linktosite {
margin-top:15px;
text-align:center;
}

#mainzone_exemples #sitescreenshot  .linktosite a {
font-size:130%;
color:#666;
}

#mainzone_exemples .explanation {
float:right;
width:435px;
padding:0 0 10px 20px;
margin:15px 0;
border-left:1px solid #999;
}

#mainzone_exemples h1 {
padding-top:0;
text-align:center;
font:200% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
}

#mainzone_exemples h2 {
padding-top:10px;
font:130% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
}

.clienturi {
width:100%;
text-align:center;
}

.clienturi a {
font-size:130%;
color:#000;
}

#mainzone_exemples .comment {
line-height:2em;
font-size:110%;
color:#000;
text-align:justify;
}

.quote {
font:700 250% 'Lucida Grande', Arial, sans-serif;
color:#5B85B0;
}

.owner {
font-size:85%;
color:#000;
}

/* CONTACTEZ NOUS */
#mainzone_contact {
width:860px;
height:auto;
padding:15px 0 0;
margin:0 auto;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
}

/* JS Activated */
body.contact #selectcontact {
display:block;
width:100%;
padding:10px;
margin:10px auto 0;
border-bottom:1px solid #999;
text-align:center;
cursor:pointer;
}

/* No JS */
#selectcontact {
display:none;
}

#selectcontact select {
border:1px dashed #666;
font:120% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
}

.required {
color:#D12000;
font:100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
cursor:text;
}

.insideaddress {
clear:both;
width:320px;
height:auto;
padding:10px 0 0 20px;
margin:20px auto 0;
font-size:120%;
}

#heure {
background:#FFF; 
border:1px solid #D3D8D9; 
font:100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-align:center;
cursor:pointer;
}

#heure:focus {
background:#F4FFF4;
border:1px solid #00AE2C;
}

.num_sm {
float:left;
width:250px;
padding:30px 0 30px 100px;
font-size:125%;
text-align:center;
}

.num_jd {
float:right;
width:250px;
padding:30px 0 30px 100px;
font-size:125%;
text-align:center;
}

.obligatoire {
width:550px;
margin:0 auto;
padding:10px 20px 0;
}

fieldset {
width:550px;
margin:10px auto 0;
padding:10px 20px 20px;
border:1px solid #000;
}

/* IE Hack !!! :-( */
* html fieldset { 
width:550px;
padding:10px 20px 20px;
margin:0 0 0 140px;
border:1px solid #000;
}

fieldset legend {
font:125% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#000;
}

label {
display:block;
padding-top:5px;
font:110% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-align:left;
cursor:default;
}

.label_message {
text-align:center;
}

input {
background:#FFF; 
border:1px solid #D3D8D9; 
font:100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
cursor:auto;
}

input:focus {
background:#F4FFF4;
border:1px solid #00AE2C;
}

textarea {
margin-left:-3px;
background:#FFF; 
border:1px solid #D3D8D9; 
font:100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
cursor:text;
}

textarea:focus {
background:#F4FFF4;
border:1px solid #00AE2C;
}

#source {
width:580px;
padding:10px 20px 0;
margin:0 auto;
text-align:center;
}

#source select {
background:#FFF; 
border:1px solid #D3D8D9; 
font:100% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
cursor:pointer;
}

#source select:focus {
background:#F4FFF4;
border:1px solid #00AE2C;
}

#send {
margin:10px 0 15px;
text-align:center;
}

.button {
padding:3px;
margin:15px 0 0;
background:#FFF;
border:3px double #D3D8D9;
font:130% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333; 
cursor:pointer;
}

.button:focus {
background:#F4FFF4;
border:3px double #00AE2C;
}

/* Help Popups */
.popup {
position:relative;
margin:0;
font:700 120% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-decoration:none;
text-align:center;
}

.popup span{
display:none;
font:400 70% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
}

.popup:hover {
text-indent:0;
}

.popup:hover span {
display:block;
position:absolute;
top:10px;
left:25px;
width:350px;
padding:5px;
margin:0;
background:#FFF;
border:1px solid #333;
font-family:'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-align:justify;
}

#showOn {
height:50px;
padding:50px 0;
margin:15px 0 0;
font:700 150% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#F90;
text-align:center;
}

#showOff {
height:100px;
padding:20px 0 30px;
margin:15px 0 0;
font:700 150% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#497F37;
text-align:center;
}

#showError {
height:50px;
padding:50px 0;
margin:15px 0 0;
font:700 150% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:red;
text-align:center;
}

/* JS Activated */
body.contact #div_nojs {
display:none;
}

/* No JS */
#div_nojs {
display:block;
}

/* SITEMAP */
#mainzone_sitemap {
width:860px;
padding:20px 0;
margin:0 auto;
line-height:1.8em;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
}

#linklist {
width:100%;
padding:0 0 20px;
margin:0;
font-weight:700;
text-align:center;
}

#linklist li {
display:inline;
padding:0 0 0 10px; 
}

#insidelist {
width:100%;
padding:0;
margin:0;
text-align:center;
}

#insidelist li {
display:inline;
padding:0 0 0 10px; 
}

#mainzone_sitemap ul li a {
color:#333;
}

/* ACCESSIBILITE */
#mainzone_accessibilite {
width:860px;
padding:10px 30px;
margin:0 auto;
line-height:1.8em;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
}

#mainzone_accessibilite h2 {
padding-top:10px;
font:130% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
}

#mainzone_accessibilite a {
color:#333;
}

.keyboard {
padding:0 5px;
border:1px solid #333;
text-decoration:none;
}

/* MENTIONS LEGALES */
#mainzone_mentionslegales {
width:860px;
padding:10px 30px;
margin:0 auto;
line-height:1.8em;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-align:justify;
}

#mainzone_mentionslegales h2 {
padding-top:10px;
font:130% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
}

#mainzone_mentionslegales a {
color:#333;
}

/* ERREUR */
#mainzone_error {
width:860px;
padding:50px 30px;
margin:0 auto;
line-height:1.8em;
font:85% 'Trebuchet MS','Lucida Grande', Arial, sans-serif;
color:#333;
text-align:center;
}

#mainzone_error a {
color:#333;
}

#mainzone_error a:hover {
color:#333;
}