*, html { margin:0; padding:0; }

body { background: #fff; font-family: Trebuchet MS, Tahoma, sans-serif; }
a { outline: none; text-decoration: none; }
img { border: none; }

#mainWrapper {  width: 766px; background: #f5f8d6; margin: 0 auto; position: relative; }
#mainContainer { background: url(../images/container_bg.jpg) no-repeat; width: 774px; height: 666px; }


/* NAVIGATION */
#navWrapper { background: #618d0e url(../images/navigation_column_top.jpg) no-repeat; width: 230px; position: absolute; top: 0; left: 419px; }
#navigation { background: #669410 url(../images/notaverde_logo.png) no-repeat center 4px; margin-top: 271px; height: 376px; }
#navigation h1, #navigation h2 { overflow: hidden; text-indent: -3000px; }

#navigation ul { list-style-type: none; padding-top: 64px; margin:0;  position: relative;  }

#navigation ul li { height: 28px; width: 230px; overflow: hidden; top:0; left:0; position: absolute;  }

#navigation ul li.accueil {  top: 60px; }
#navigation ul li.services { top: 90px; }
#navigation ul li.realisations { top: 120px; }
#navigation ul li.contact { top: 150px; }

#navigation ul li a { color: #e3ff5f; font-size: 15px; width: 230px; display: block; height: 28px; cursor: pointer;  }
#navigation ul li a span { position: absolute; display: block; }


#navigation ul li a span.bar {  background: #618d0e; border-top: 1px solid #608c0d; border-bottom: 1px solid #608c0d; padding-top:2px; 
width: 0; top: 0; right:0;  height: 28px; }

#navigation ul li a span.vertbar { height: 17px; width: 1px; background: #e3ff5f; top: 6px; left: 67px; }
#navigation ul li a span.arrow { background: url(../images/nav_li_bg.gif) no-repeat; top:13px; left:49px; width: 6px; height: 5px; }
#navigation ul li a span.leaf { background: url(../images/nav_li_bg_hover.gif) right center no-repeat; width: 25px; height: 24px; position: absolute;  top: 2px; left: -34px; overflow: hidden; }
#navigation ul li a span.text { padding-left: 78px; padding-top: 3px; z-index: 20; }

#navigation ul li.active span.leaf { left: 34px; display: block; }
#navigation ul li.active span.arrow { display: none; }
#navigation ul li.active span.vertbar { left: 67px; display: block; }
#navigation ul li.active span.bar { width: 230px; display: block; }

/* CONTENT */
#contentWrapper { width: 418px; font-size: 11px; position: absolute; top:0; left:0; }
.topBar { height: 63px; background: #f5f2d9; } 
.content {  margin: 16px 16px 16px 12px; position: relative; }
.content ul { list-style: url(../images/bullet.gif);  margin: 4px 0 0 32px; font-size: 10px; }
.content ul li { padding:0; color: #666; font-weight: bold; line-height: 12px;  }
.content h1 { font-size: 23px; font-weight: bold; color: #618d0e; background: url(../images/h1_bg.gif) no-repeat; padding-left: 26px; }
.content h2 {  font-size: 15px; color: #686868; font-weight: bold; background: url(../images/h1_bg.gif) no-repeat; padding: 0 0 0 26px; }
.content h2 span { color: #669900; }

div.hr { clear: both;  border-top: 1px solid #f5f2d9; height: 10px; margin-top: 10px;  }
div.hr hr { display: none; }

.content div.floatRight { font-size: 11px; width: 214px; float: right; margin: 0 0 10px 0; }
.content div.floatRight p { line-height: 13px; font-size: 10px; font-weight: bold; color: #666; margin: 0 10px 0 10px; }
.content div.floatRight ul { font-size: 10px; list-style: url(../images/bullet.gif); margin: 4px 0 0 26px; }
.content div.floatRight ul li { padding:0;  }

.content span.bigText { font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-weight: normal; color: #669410;  letter-spacing: -0.04em; }
.content span.bigText em { font-family: Palatino Linotype, Times New Roman, Georgia, serif; }
.content span.bigText strong { color: #c2e24a; font-size: 52px; }

.content img { margin: 4px; }
.content a { color: #909090; }


div.vivreLeJardin { position: absolute; top:380px; left:200px; }
div.vivreLeJardin h2 { background: url(../images/transparent_leaf.png) no-repeat; }
div.vivreLeJardin img { margin:0; padding:0; }


/* REALISATIONS */
#galleryRealisations { margin: 14px 0 0 14px; }
#galleryRealisations #thumbnails { background: #81a63c; width: 328px; height: 86px; margin: 20px 0 0 8px; padding: 8px; }
#galleryRealisations ul#thumbs1 { list-style: none; margin:0; padding:0;  }
#galleryRealisations ul#thumbs1 li { float: left; width: 106px; background: #92b245; margin:1px; }
#galleryRealisations ul#thumbs1 li a { color: #fff; font-size: 11px; background: #90b345 url(../images/static_arrow.gif) no-repeat 2px 0; width: 88px; height: 14px; display: block; padding-left: 24px; padding-top: 1px; font-weight: normal; }
#galleryRealisations ul#thumbs1 li a:hover { font-weight: bold; }
#galleryRealisations ul#thumbs1 li a.active:hover { background: #90b345 url(../images/static_arrow.gif) no-repeat 2px 0; }
#galleryRealisations ul#thumbs1 li a:hover { background: #90b345 url(../images/arrow.gif) no-repeat 2px 0; }

#galleryRealisations div#mainPhoto { width: 359px; height: 282px; text-align: left; position: relative; background: url(../images/gallery_bg_shadow.png) no-repeat;  }

#galleryRealisations img { margin: 9px 0 0 9px; padding:0; }
#galleryRealisations div#mainPhoto div#photo1 { position: absolute; top: 0; left: 0; z-index: 10; }
#galleryRealisations div#mainPhoto div#photo2 { position: absolute; top: 0; left: 0; z-index: 20; }
#galleryRealisations div#mainPhoto div#loader { background: url(../image/loadingAnimation.gif) no-repeat center center; position: absolute; top: 0; left: 0; z-index: 30; height: 264px; width: 342px; text-indent: -3000px; overflow: hidden; }


/* ACCUEIL */
#galleryAccueil { margin: 2px 0 0 14px; position: relative; }
#galleryAccueil #thumbnails {  width: 328px; height: 88px; position: absolute; top:0; left: 180px; }
#galleryAccueil ul#thumbs1 { list-style: none; margin:0; padding:0;  }

#galleryAccueil ul#thumbs1 li { float: left; width: 43px; height: 85px; padding: 3px 0 0 3px; margin: 0 0 0 1px; position: relative; }
#galleryAccueil ul#thumbs1 li.thmb1 { background: url(../images/accueil_gal_thmb1.png) no-repeat; }
#galleryAccueil ul#thumbs1 li.thmb2 { background: url(../images/accueil_gal_thmb2.png) no-repeat; }
#galleryAccueil ul#thumbs1 li.thmb3 { background: url(../images/accueil_gal_thmb3.png) no-repeat; }
#galleryAccueil ul#thumbs1 li.thmb4 { background: url(../images/accueil_gal_thmb4.png) no-repeat; }

#galleryAccueil ul#thumbs1 li a { color: #9b945e; text-align: center; font-size: 14px; font-weight: bold; display: block; padding-top: 64px; }
#galleryAccueil ul#thumbs1 li a span { width: 32px; display: block; text-align: center; position: absolute; left: 9px; }
#galleryAccueil ul#thumbs1 li a span.block { display: block; background: #b8aa5c; height: 5px; z-index: 10; top: 59px; }
#galleryAccueil ul#thumbs1 li a span.text { display: block; z-index: 20; left: 8px; top: 67px; height: 26px; }
#galleryAccueil ul#thumbs1 li a:hover { color: #fff; }

#galleryAccueil div#mainPhoto { width: 359px; height: 282px; text-align: left; position: relative; background: url(../images/accueil_gallery_bg.png) no-repeat;  }
#galleryAccueil img { margin: 8px 0 0 8px; padding:0; }
#galleryAccueil div#mainPhoto div#photo1 { position: absolute; top: 0; left: 0; z-index: 10; }
#galleryAccueil div#mainPhoto div#photo2 { position: absolute; top: 0; left: 0; z-index: 20; }
#galleryAccueil div#mainPhoto div#loader { background: url(../image/loadingAnimation.gif) no-repeat center center; position: absolute; top: 0; left: 0; z-index: 30; height: 264px; width: 342px; text-indent: -3000px; overflow: hidden; }


/* CONTACT */
.coords {  background: url(../images/contact_transparent_bg.png) no-repeat; width: 202px; height: 184px; position: absolute; top: 270px; left: 170px; }
.content div.floatRight div.coords p { font-size: 12px; color: #666; font-weight: bold; margin: 0 0 10px 30px; position: relative; top: 80px; left: -10px;   }
.coords div.transparentLogo { display: block; background: url(../images/logo_transparent.png) no-repeat; width: 213px; height: 44px; position: absolute; top:20px; left:-14px;  }
.coords div.transparentLogo h3 { overflow: hidden; text-indent: -5000px; }

/* FOOTER */

#footer { height: 70px; font-size:10px; text-align: center; clear: both; }
#footer p { padding-top: 10px; color: #829569; }