html { overflow-y:scroll; overflow-x: auto }
html,body { padding:0; margin:0; width: 100%; height: 100%; }
body { font-family: Verdana, Helvetica, sans-serif; font-size: 9pt; line-height: 1.3em; background: #181818 url(../img/background.jpg) left top no-repeat; color: #bbb; }

a { outline:none; }

h2 { font-weight: normal; margin: 0; padding: 5px 0; font-size:12pt; }

h3 { font-weight: normal; font-style: italic; margin: 10px 0 5px 0; color: #fff; font-size:11pt; }

p { line-height: 2em; margin: 10px 0; }
p.quote1 { color: #fff; font-style: italic; line-height: 2em; margin: 10px 20px; }
p.footnote { font-size: 9pt; line-height: 1.4em; }

dl { background: #242424; padding: 1em 1em 0.4em 1em; }
dt { color: #fff; }
dd { padding: 0.2em 0 1.8em 2em; }

#logo,
#menu,
#page,
#footer
{ width: 930px; margin: 0 auto; }

#menu a{ text-decoration:none; color:#d0d3dd; padding-top:5px; }
#menu a:hover{ color:#fff}
#menu li.active a { color:#D77C15}

#logo { background:url(../img/ecocem-logo.png) left top no-repeat; margin: 20px auto 10px auto; height: 30px; }
#logo a { text-decoration: none; height: 30px; width: 135px; display: block; float: left; margin-right: 0.5em; }
#logo p { margin-top: 6px; float: left; }
#page { background: url(../img/page-bg.png) left top repeat-x; clear:both; margin-top:5px; padding: 5px 0 10px 0; position: relative; }
#page .cleaner { clear:both; }
#page h2.cleaner, #page h3.cleaner { border-top: 1px solid #444; padding-top: 1.5em; margin-top: 1.4em; }


#footer { border-top: 1px solid #272829; padding: 5px 0; clear:both; margin-top: 5px; }
#footer p { color:#757575; text-align: center; font: 9pt Arial, Helvetica, sans-serif; }
#footer p span { margin-left: 0.8em; padding-left: 1em; border-left: 1px solid #757575; }
#footer p a { color:#9C9A9A; text-decoration:none; }
#footer p a:hover { text-decoration: underline; color: #fff;  }

#subtitle { background: #222; margin-top: 15px; position: absolute; top: 540px; left: 0; width: 930px; }
#subtitle p { font: 8pt arial, sans-serif; margin: 0; color: #656565; line-height: 2em; text-align: center; }
#subtitle p span { margin-left: 0.8em; padding-left: 1em; border-left: 1px solid #444;  }

#layout { padding: 5px; }
#layout ul { margin: 0 0 0 1px; list-style: circle; list-style-position: inside; background: #242424; padding: 0; }
#layout ul li { color: #ccc; line-height: 2em; margin: 0; padding: 5px 15px; }
#layout ul li.even { background: #444; }
#layout ol { margin: 0 0 0 1px; padding: 5px; list-style: lower-roman; list-style-position: inside; }
#layout ol li { margin: 10px; padding: 0; line-height: 2em; }
#layout ol li h3 { display: inline; }

#layout .column1 ul,
#layout .column2 ul { width: 444px; }

#pageimgbox { margin: 0 0 0 4px; width: 926px; height: 196px; }
#sectiondownload { float: right; background:url(../img/download_img.png) right top no-repeat; margin: 131px 6px 0 0; height: 35px; width: 188px }

.co2box { margin: 0 0 0 4px; padding: 0; height: 148px; }

a.factsheet { font-weight: bold; color: #fff; display: inline-block; padding: 2px 26px 2px 0; text-decoration: underline; background: url(../img/icons/icon-pdf.png) right top no-repeat; }
a.factsheet:hover { text-decoration: none; }

a.pagelink { color: #7383ff; text-decoration: none; }
a.pagelink:hover { text-decoration: underline; }

.column1 { float: left; width: 440px; padding-right: 10px; padding-bottom: 1.4em; }
.columnfull { clear: both; padding: 1px 0 0 0;}
.column2 { float: right; width: 460px; padding-bottom: 1.4em; }
.columnspace { height: 9em;}

.regTable { font-size: 10pt; border-collapse: collapse; margin: 10px 0 20px 0; }
.regTable td, .regTable th { border-top: 1px solid #313233; border-bottom: 1px solid #313233; text-align:center; }
.regTable th { padding: 10px; }
.regTable td { padding: 5px; }
.regTable thead tr th { color: #ADCA03; }
.regTable tbody tr td { color: #DADAD8;}
.regTable td ul { width: auto !important; text-align: left; font-size: 9pt;}
.regTable td ul li { color: #DADAD8 !important; }
.regTable td p { text-align: left; font-size: 9pt; }

.regTableBG { background: #181818; }

.chart p { padding: 7px; display: block; background: #242424; margin: -2px 0 3em 0; font-style: italic; width: 260px; }
.illustration img { border: 2px solid #242424; }

.gallery_table {  margin: 0 -34px; }
.gallery_table td { vertical-align: top; background: #242424; width: 200px; }
.thumbnail img { width: 200px; }
.thumbnail p { padding: 0 7px 7px 7px; font-style: italic; margin: 0; }
.thumbnail .gallery_date { color: #fff; font-style: normal; display: inline-block; width: 100%; padding-top: 1em; font-size: 8pt; }


.gallery .gallery-item { display: inline-block; width: 100%; margin: 5px 0 10px 0; }
.gallery .gallery-item .gallery-thumbnail { width: 300px; float:left; border: 2px solid #242424;  }
.gallery .gallery-item .gallery-item-right { width: 590px; float:left; }
.gallery .gallery-item .gallery-item-right span { background: #242424; margin: 0 0 10px 0; padding: 10px; float:left; }
.gallery .gallery-item .gallery-item-right .gallery-item-description { font-style: italic; width: 100%; line-height: 1.6em; }
.gallery .gallery-item .gallery-item-right .gallery-item-info {  margin-top: 10px; color: #fff; font-size: 8pt; clear: left; padding: 5px 10px; 
width: 200px; }


/* home page */
div#support_text { display: none; }

div#home_buttons { clear: both; float: left; padding-left: 9px; margin-top: 5px; }
div#home_buttons ul li { float: left; }
div#home_buttons ul li a { display: block; width: 303px; height: 56px; text-decoration: none; } 
div#home_buttons .manual a { background: url(../img/manual.gif) 0 0 no-repeat; }
div#home_buttons .supplier a { background: url(../img/suppliers.gif) 0 0 no-repeat; }
div#home_buttons .twitter a { background: url(../img/twitter3.png) 0 0 no-repeat; }
div#home_buttons .ez_prove a { background: url(../img/ez_prove.gif) 0 0 no-repeat; }
div#home_buttons .ez_prove2 a { background: url(../img/neutral.gif) 0 0 no-repeat; }
div#home_buttons ul li a:hover { background-position: 0 -58px; }
div#home_buttons ul li a:active { background-position: 0 0; }

/* Environmental Accent Colour - Green */
.environmental h2 { color: #adca03; }
#environImg { background: url(../img/env-img.png) left top no-repeat; height: 196px; }
#environImg a { float:left; margin: 131px 0 0 24px; width:279px; height: 35px; background: #ADCA03 url(../img/download_btn_env.png) left top no-repeat; }
#environImg a:hover { background-position: left bottom; }

/* Technical Accent Colour - Blue */
.technical h2 { color: #198ddd; }
.technical .regTable thead tr th { color: #198ddd; }
#techImg { background: url(../img/tech-img.png) left top no-repeat; height: 196px; }
#techImg a { float:left; margin: 131px 0 0 24px; width:279px; height: 35px; background: #198DDD url(../img/download_btn_tec.png) left top no-repeat; }
#techImg a:hover { background-position: left bottom; }

/* Architectural Accent Colour - Purple */
.architectural h2 { color: #c13ad6; }
.architectural .regTable thead tr th { color: #c13ad6; }
#archImg { background: url(../img/arch-img.png) left top no-repeat; height: 196px; }
#archImg a { float:left; margin: 131px 0 0 24px; width:279px; height: 35px; background: #C13AD6 url(../img/download_btn_arc.png) left top no-repeat; }
#archImg a:hover { background-position: left bottom; }

/* News, About, Contact, Tools Accent Colour - Orange */
.news h2 { color: #eb8e0a; }
.news p { margin:3px 0;}
.news a { color: #7383ff; text-decoration: none; }
.news a:hover { text-decoration: underline; }
.news a.pagelink { display:inline-block; margin-top:5px;  }
.news .morelink { float:left; clear:both; margin-top:10px; }
.news .news-block { padding: 2px 5px 10px 5px; cursor:pointer; }
.news .news-block:hover { padding: 2px 4px 10px 4px; border-left:1px solid #fff; border-right:1px solid #fff; background: #242424; }

.pdf-block { display:inline-block; width:100%; margin: 10px 0 0; }
.pdf-block a { background:url(../img/icons/icon-pdf.png) left top no-repeat; padding: 2px 0 0 22px; float:left; height: 16px; }
.pdf-block span { margin: 2px 0 0 10px; float:left; height: 16px; color: #666;  }



#newsImg { background: url(../img/news-img.png) left top no-repeat; height: 196px; }

.about h2 { color: #eb8e0a; }
#aboutImg { background: url(../img/about-img.png) left top no-repeat; height: 196px; }

.contact h2 { color: #eb8e0a; }
#contactImg { background: url(../img/contact-img.png) left top no-repeat; height: 196px; }

.tools h2 { color: #eb8e0a; }
#toolsImg { background: url(../img/tools-img.png) left top no-repeat; height: 196px; }

.gallery h2 { color: #eb8e0a; }
#galImg { background: url(../img/gal-img.png) left top no-repeat; height: 196px; }


.case_studies h2 { color: #eb8e0a; }
.case_studies .cs-block { padding: 2px 5px 10px 5px; cursor:pointer; }
.case_studies .cs-block:hover { padding: 2px 4px 10px 4px; border-left:1px solid #fff; border-right:1px solid #fff; background: #242424; }
.case_studies .cs-header { color:#FFFFFF; font-size:9pt; font-style:italic; font-weight:normal; margin:10px 0 5px; text-decoration:none; }
.case_studies .column1 ul { padding: 15px 20px; }
.case_studies .column1 ul li { padding: 3px; }
.case_studies .column1 .footnote { color:#959393; font-size:8pt; }
.case_studies .column1 .footnote a { text-decoration:none; color:#959393; }
.case_studies .column1 .footnote a:hover { text-decoration:underline; }


.column2 .photo-block { margin: 0 0 10px 0; display:inline-block; width:100%;}
.column2 .photo-block img { float:right; border:2px solid #242424; }
.column2 .photo-block .photo-description { color:#ccc; font-style:italic; width:450px; background: #242424; padding: 5px; width:260px; float:right;}


.pagination { display:inline-block; margin-top:20px; }
.pagination a { float:left; color:#bababa; text-decoration:none; font-size: 10pt; font-weight:bold; padding: 3px 10px; }
.pagination a:hover { color: #fff; background: #333; }
.pagination .back { margin-right: 30px; }
.pagination .previous { border-right: 1px solid #ccc; }
.pagination .next { border-left: 1px solid #666; }


/* CONTACT -> gmap */
.gmap img { cursor:pointer; }
.gmap img:hover { border: 2px solid #7383ff; }
#map { width:700px; height:500px;  }
#map .gmnoprint div div { color:#333; }
#map .gmnoprint div div h3 { padding: 3px 0; margin:0; font-size:10pt; color:#000; font-style:normal; font-weight:bold;  }
#map .gmnoprint div div a { color:#FF9900; }
#map .gmnoprint div div strong { font-weight:bold; }

.contact .column1 { width:600px; background: #333; margin-right: 20px;  padding: 5px; }
.contact .column2 { width:280px; }

#contact_form { width: 591px; }
#contact_form p { clear: both; margin: 0; padding: 1.5em 0 0 10px; float: left; width: 400px; }
#contact_form label { display: block; clear: both; padding: 6px 10px; }
#contact_form .tuck { float: left; clear: none; }
#contact_form .flow { display: inline; margin-right: 9px; line-height: 28px; }
#contact_form .tuck input { display: block; width: 125px; }
#contact_form .adresse-label { clear: both; margin-top: 1.5em; }
#contact_form .other-label { clear: none; display: inline; }
#contact_form #preciser { width: 135px; margin-top: 2px; }
#contact_form #adresse,
#contact_form #sujet { width: 563px; display: block; }
#contact_form #message {width: 565px !important; display: block; }
#contact_form #postal, 
#contact_form #ville, 
#contact_form #pays, 
#contact_form #telephone, 
#contact_form #portable, 
#contact_form #telecopie { width: 172px; }
#contact_form #contact-button { float: right; margin: 18px 12px 0 0; }
#contact_form .sujet { padding-top: 1.5em; }
#contact_form .document { padding-top: 2em; }



/* FAQ */
.form-faq { clear:both; display:none; height:275px; margin:10px 0; background:#242424; padding:20px 0 10px 20px; width:650px; }

#layout ol.faq li { list-style-type: decimal; }
#layout ol.faq li a { color:#FFF; font-size: 10pt; font-style:italic; text-decoration:none;}
#layout ol.faq li a:hover { text-decoration:underline; }
#layout ol.faq li .faquote { color: #fff; font-style: italic; line-height: 2em; margin: 10px 20px; display:inline-block; }
#layout ol.faq li p { margin:0; padding: 10px; }
#layout ol.faq li p a { color:#959393; font-size: 9pt; font-weight:bold; }
#layout ol.faq li .answer { display:none; }


/* TOOLS & RESOURCES */
.loginForm { padding: 10px 0; display:inline-block; }
.loginForm #lForm { height: 25px; }
.loginForm #helpLinks { display:none; }
.loginForm .bold { font-weight:bold; width:138px; }
.loginForm a { float:left; color: #9CACCD; text-decoration:none; font-size:10pt; margin-top:10px; }
.loginForm a:hover { text-decoration:underline; }


.x-combo-list-item { color: #333; }
.x-panel-btns-ct { padding: 5px 0;}
.x-panel-btns-ct table td.x-panel-btn-td { padding: 3px 3px 3px 0; }


.form-checkbox .x-form-cb-label { font-size:7pt; color: #666; }


.searchForm { float:right; }
.searchForm input { border:none; margin-left:10px; float:left;}
.searchForm .search-text { background: #3B3B3B; padding:6px 10px; color:#97A8A8; margin-top:0px; width: 180px; }
.searchForm .search-submit { background: #333; color: #999; font-weight:bold; width:50px; height: 28px; }



.formInfoLabel { color:#666; font-size:10pt; font-weight:bold; line-height:160%; margin:0; padding:30px; width: 200px !important;  float:left !important; }

/*SUPPLIERS*/
.orange_bg{ float:left; background:#EB8E0A; border-bottom:1px solid #7e4d08}
.gMapLegend .orange_bg p{ color:#333}
.dark_bg{ float:left; background:url("../images/map/legend_bg.jpg") repeat-x;  background-position:bottom }
.light_border{ border-top:1px solid #818080}

.gMap{ height: 670px; color:#000; font-size:11px}
.gMapLegend{ height:654px; width:240px; background:#4d4d4d; border:5px solid #333333}
.gMapLegend p, .gMapLegend h2{ color:#fff; line-height:14px; margin:15px 15px 20px 15px;  }
.gMapLegend .lEco{ padding-left:35px; background:url("images/map/ecocem.png") no-repeat }
.gMapLegend img { float:left; margin-right:15px}
.gMapLegend .lEco{  margin-left:15px}
.gMap .logo{ float:right; margin: 0 0 0 10px }
.gMap div{ width:auto}
.gMap .toolTip{.gMap .toolTip{float:left;  }
.gMap img{ margin: 0; padding: 0; float:right; }



#layout .gMapLegend ul{ width:280px;}
#layout .gMapLegend li{ list-style:none}
#layout .gMapLegend ul li{ width:250px; border-bottom:1px solid #d1d1d1}
#layout .gMapLegend a{ display:block; text-decoration:none; color:#fff}
#layout .gMapLegend .activeStype { color:#81A4C1}

#maploading{ width:600px; height:670px; background:#FFF; opacity:0.5; position:absolute; top:236px; left:10px; z-index:999999; display:none}
#maploading img{ margin:325px 0 0 300px;}