@charset "utf-8";
/*
ELEMENT STYLE ---------------------------
*/
* { margin:0; padding:0; color:#666; border:0 }
body { background:url(../graphic/bg.jpg) center -160px repeat-x #ca0000; font-family: Georgia; font-size: 0.75em; }
/*
HEAD STYLE ---------------------------
*/
#contener { width:910px; margin:0 auto; }
#head { height:200px; position:relative; }
#head .choose-language { position:absolute; width:120px; height:30px; right:0; top:0; list-style-type:none; }
#head .choose-language li { position:relative; width:40px; height:30px; float:left }
#head .choose-language a { display:block; background:url(../graphic/bg_onglet_language.jpg) no-repeat 0 -30px; text-align:center; padding:7px 0 0 0; height:23px; color:#fc6; text-decoration:none; font-size:12px }
#head .choose-language a.current, #head .choose-language a:hover { background-position: 0 5px; color:#fff }
#head h1 a.logo { display:block; background:url(../graphic/logo_happycom.png); width:170px; height:200px; }
#head h1 span { display:none; }
#head ul.menu { position:absolute; right: 0; top: 70px; list-style-type:none; text-transform:lowercase }
#head ul.menu li { float:left; }
#head ul.menu li a { margin:10px 10px 10px 0; height:26px; display:block; }
#head ul.menu li a span { display:none; }
/*
SLOGAN STYLE ---------------------------
*/
h2.txthome { width:910px; height:100px; font-size:22px; color:#fff; line-height:30px; font-weight:normal; position:relative; text-align:right; }
h2.txthome a { background:url(../graphic/bg_quote.jpg) no-repeat 50px 0; color:#fff; text-decoration:none; display:block; width:450px; height:110px; padding:10px 10px 10px 10px; position:absolute; right:0; top:-50px }
h2.txthome strong { color:#fff; }
h2.txthome span { display:block; color:#fff; }
h2.txthome em { display:block; background:url(../graphic/btn_txthome.jpg) no-repeat; width:150px; height:25px; text-align:center; padding:5px 0; color:#ffdc9d; font-size:18px; line-height:normal; position:absolute; right:10px; bottom:10px }
h2.txthome a:hover em { color:#fff }
/*
TITLE SECTION STYLE ---------------------------
*/
.title-sec { height:50px; position:relative; width:910px; text-transform:lowercase }
.title-sec h2 { display:block; height:35px; width:120px; display:block; padding:15px 0 0 0; background:url(../graphic/title_sec.jpg) no-repeat #e86400; color:#ffdc9d; text-align:center; font-size:16px; font-weight:normal; position:absolute; left:15px }
.title-sec h2 a { color:#ffdc9d; text-decoration:none; }
.title-sec h2 a:hover { color:#fff }
.title-sec .menu-onglet { position:absolute; left:150px; list-style-type:none; height:50px; width:760px; }
.title-sec .menu-onglet li { float:left; }
.title-sec .menu-onglet li a { display:block; padding:18px 10px 0 10px; height:35px; margin:0 5px 0 0; color:#ffdc9d; text-decoration:none; }
.title-sec .menu-onglet li a.current, .title-sec .menu-onglet li a:hover { color:#fff }
/*
BACKGROUND STYLE ---------------------------
*/
#content, #about, #services, #contact { background:url(../graphic/bg_content.jpg) center repeat-y #fff; position:relative; float:left; width:910px }
.bg-content { background:url(../graphic/bg_content_home.jpg) no-repeat center top; padding:0; position:relative; float:left; width:910px; }
#contact .bg-content, #services .bg-content, #about .bg-content { background:url(../graphic/bg_content_sec.jpg) no-repeat center top; }
/*
HEADERS STYLE ---------------------------
*/
#contact h2, #about h2, #services h2 { margin:0 0 30px 0; color:#F90; font-size:3em; }
#contact h2 span, #about h2 span, #services h2 span { display:block; color:#F90; }
#services h3.classic, #content h3.classic { font-size:1.5em; color:#600; font-weight:bold }
#services #service-home a:hover h3.classic, #content #service-home a:hover h3.classic { color:#F90; }
#content h2.separate { background:url(../graphic/separate_horizontal.jpg) no-repeat bottom left; padding:5px; margin:10px 35px; float:left; font-size:1.7em; color:#F90; width:830px; float:left; position:relative }
/*
SERVICES INDEX STYLE ---------------------------
*/
#content #service-home { display:block; list-style-type:none; width:870px; padding:20px 20px 5px 20px; float:left }
#content #service-home li { display:block; float:left; position:relative; width:290px; }
#content #service-home li a { display:block; text-decoration:none; padding:20px }
#content #service-home h3 { text-decoration:none; margin:10px 0; }
#content #service-home img { border:0; margin:0 }
#content #service-home p { padding:0; margin:0; line-height:20px; display:block; height:85px }
#content #service-home em { color:#F90; font-weight:bold }
#content #service-home a:hover em { text-decoration:underline }
/*
SERVICES STYLE ---------------------------
*/
#services #service-home { display:block; list-style-type:none; width:870px; padding:20px 20px 5px 20px; float:left; position:relative }
#services #service-home li { float:left; position:relative; width:870px; }
#services #service-home li a { display:block; text-decoration:none; padding:20px }
#services #service-home img { border:0; margin:0 }
#services #service-home h3 { text-decoration:none; margin:10px 0; position:absolute; top:20px; left:300px }
#services #service-home p { padding:0; margin:0; line-height:20px; display:block; position:absolute; top:70px; left:300px; width:550px; }
#services #service-home em { color:#F90; font-weight:bold }
#services #service-home a:hover em { text-decoration:underline }
/*
MISCELLANEOUS STYLE ---------------------------
*/
.seperate-vert { background:url(../graphic/separate.jpg) no-repeat right bottom; }
.seperate-horiz { background:url(../graphic/separate_horizontal.jpg) no-repeat left bottom; }
p.note { float:left; margin:0 40px; position:relative; width:830px; }
.col-social-networks { background:url(../graphic/network_social_cube.jpg) no-repeat 20px 0; padding:0 25px 0 150px; position:relative; float:left; height:110px; width:280px; }
.col-social-networks h4 { color:#f4aa83; font-size:20px; padding:25px 0 0 0; }
.col-social-networks h4 a { color:#ef9369; text-decoration:none; font-weight:900 }
.col-social-networks h4 a:hover { color:#f4aa83; text-decoration:underline }
.twitter-cite { background:url(../graphic/twitter_bird.jpg) no-repeat; padding:0 35px 0 120px; width:300px }
.twitter-cite cite { border:5px solid #fcdcc5; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding:5px; display:block; }
.twitter-cite p { display:block; padding:5px 0 0 35px; background:url(../graphic/bubble-corner.jpg) no-repeat 10px 0 }
/*
CAROUSEL FEATURING STYLE ---------------------------
*/
.featuring { float:left; position:relative; width:900px; padding:5px; background:url(../graphic/bg_featuring.jpg) no-repeat 5px 5px }
.featuring a { display:block; text-decoration:none }
.featuring img.featuring-content { float:left }
.featuring div.featuring-content { float:left; width:380px; padding:35px; }
.featuring div.featuring-content h3 { text-transform:lowercase; font-size:11px; color:#fff; padding:1px 4px; margin:0 0 40px 0; background:#fc9; float:left; border: 1px solid #fc9; -moz-border-radius: 5px; -webkit-border-radius: 5px }
.featuring div.featuring-content h2, .featuring div.featuring-content h2 { font-size:40px; font-weight:normal; margin:0 0 10px 0; color:#600; text-decoration:none; clear:both }
.featuring a:hover div.featuring-content h2 { color:#F90 }
.featuring div.featuring-content p { line-height:20px; margin:0 0 20px 0; padding:0 0 0 3px }
.featuring div.featuring-content em { color:#600; font-weight:bold; text-decoration:none; }
.featuring a:hover div.featuring-content em { color:#F90 }
.up-foot { padding:35px 0 10px 0; background:url(../graphic/separate_horiz_large.jpg) top no-repeat; float:left; position:relative; width:910px; }
/*
CAROUSEL BRAND STYLE ---------------------------
*/
.traded-companies { width: 790px; padding:10px 60px; margin:0; position:relative; float:left }
/*
BUTTON STYLE ---------------------------
*/
.btn { background:url(../graphic/btn_bg.jpg) no-repeat 0 0; height:30px; width:100px; text-align:center; padding:5px; line-height:normal; color:#fff; font-size:12px; font-family:Georgia; cursor:pointer }
.btn:hover { background-position: 0 -30px }
.btn-s { background:url(../graphic/btn-arrow_S.jpg) no-repeat; width:76px; height:14px; padding:4px 7px; display:block; text-decoration:none; color:#FFF; font-size:11px; font-style:italic; }
#content #service-home a:hover .btn-s, .btn-s:hover { background:url(../graphic/btn-arrow_S.jpg) 0 -22px no-repeat; }
/*
FEATURES STYLE ---------------------------
*/
#about div.features { background:url(../graphic/logo_happycom_bg.jpg) no-repeat 555px 5px; position:relative; float:left; width:830px; padding:40px 40px 5px 40px; }
#services ul.features, #about ul.features { display:block; list-style-type:none; width:430px; padding:0 400px 0 0; float:left; line-height:20px; }
#services ul.features li, #about ul.features li { background:url(../graphic/arrow_orange.jpg) no-repeat 0 6px; padding:0 0 0 15px; margin:0 0 20px 0; }
#services ul.details { display:block; list-style-type:none; width:810px; float:left; position:relative; line-height:20px; padding:0 10px; margin:0 -0 -20px 0 }
#services ul.details li { margin:0; float:left; width:250px; padding:0 10px; display:block; }
#services ul.details li.last { margin-right:0 }
#services ul.details li h3 { color:#F90; background:url(../graphic/arrow_orange.jpg) no-repeat 0 6px; padding:0 0 0 15px; margin:10px 0; font-size:12px }
#services ul.details li img { border:0; }
#services ul.details li p { display:block; }
#services div.intermediary-trade ul.details li p { height:90px; }
#services div.business-assistance ul.details li p { height:90px; }
#services div.web-design ul.details li p { height:110px; }
#services div.marketing-online ul.details li p { height:110px; }
#services p.features { line-height:20px; margin:0 0 20px 0; width:440px; height:170px }
#services div.service { position:relative; float:left; width:830px; padding:40px 40px 5px 40px; }
/*
CONTACT STYLE ---------------------------
*/
#contact .form { position:relative; float:left; width:830px; padding:40px 40px 5px 40px; }
#contact .form .col { position:relative; float:left; }
#contact .form .one { width:350px; margin:0 30px 0 0; padding:0 30px 0 0; }
#contact .form .two { width:420px; padding:0 }
#contact .form .three { width:420px; padding:0 0 50px 0 }
#contact .form p { line-height:20px; }
#contact .form label { display:block; margin:0 0 5px 0; padding:0 0 0 6px; font-weight:bold }
#contact .form em.required { font-weight:normal; color:#fcdcc5 }
#contact .form address, #contact .form span.input { border: 4px solid #feebd8; -moz-border-radius: 5px; -webkit-border-radius: 5px; background:#feebd8; display:block; position:relative; margin:0 0 10px 0; width:410px }
#contact .form address { display:block; margin:0; width:auto }
#contact .form span.input:hover { border-color:#fcdcc5; background:#fcdcc5; }
#contact .form address span, #contact .form span.input textarea, #contact #form_errors, #contact #form_thanks, #contact .form span.input input[type=text] { border: 1px solid #fcdcc5; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding:4px; width:400px; font-family:Georgia; font-size:12px; background:#fff }
#contact .form address span { display:block; padding:10px; width:auto }
#contact .form span.input textarea:focus, #contact .form span.input input[type=text]:focus { background:#fdf0e7 }
#contact .form input[type="submit"] { position:absolute; right:2px; bottom:10px }
#contact #form_errors {color:#F00; margin:0 0 10px 0; display:none;}
#contact #form_thanks {color:#F90; margin:0 0 10px 0; display:none;}
/*
FOOT STYLE ---------------------------
*/
.foot { background:url(../graphic/bg.jpg) center 0 no-repeat; height:100px; clear:both; padding:60px 5px 0 5px; margin:0 0 40px 0 }
.foot .col { float:left; width:260px; height:60px; padding:20px; color:#fc6; }
.foot .col strong, .foot .col a, .foot .col address { color:#fc6; }
.foot .one { width:180px; padding:20px 30px }
.foot .two { width:390px; padding:20px 30px }
.foot .three { text-align:right; width:150px; padding:20px 30px }
.foot .three img { margin-bottom:10px }
.foot .col .featuring-section { list-style-type:none; height:60px }
.foot .col .featuring-section li { float:left; width:190px; padding:0 5px 0 0; display:inline }
.foot .col .featuring-section a { text-decoration:none }
.foot .col .featuring-section a:hover { color:#fff }