/* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ------------------ * GENERAL----------------------*/ body { font:16px/120% 'Roboto Condensed', sans-serif; color:#403f44; font-weight:300; min-width:960px; background:url(../images/bg.png) top center no-repeat; } a { color:#499d18; text-decoration:none; } a:hover { color:#64be2f; cursor:pointer } a:active, a:visited { outline: none; background:none;} p { margin:0 0 20px 0; line-height:140%; letter-spacing:normal; font-size:20px } h1, .h1 { font-size:45px; line-height:40px; font-weight:700; display:block } h2, .h2 { font-size:24px; font-weight:300; line-height:28px; margin-bottom:10px; text-transform:uppercase; text-align:center; } h3, .h3 { font-size:20px; margin: 0 0 12px 0; font-weight:300; line-height:120%; } h4, .h4 { font-size:16px; margin: 0 0 0 0; font-weight:300; } hr { margin:30px 0 25px 0; border:none; border-top:1px solid #ddd; } strong { font-weight:bold; } strong span { color:#499d18 } em { font-style:italic; } sup { font-size:16px;} ul { margin:0; padding:0; list-style:disc; } ol { margin:0; padding:0;} .col ul li { padding:0 0 2px 18px; margin:0; list-style:none; background: url(../images/bullet.png) left 6px no-repeat; font-size:15px;} /* ---------------------- * HEADER --------------------------*/ #menutop .container { height:34px; } #menutop span { margin:5px 0 0 0; } #menutop ul { float:right; padding:1px 0 0 0; } #menutop ul li { display:inline-block; margin:0 0 0 5px ; } #menutop ul li a { height:23px; width: 23px; display:inline-block; color: transparent; font-size:5px; } #menutop ul li a.twitter { background:url(../images/bt_twitter.png) no-repeat center center; } #menutop ul li a.linkedin { background:url(../images/bt_linkedin.png) no-repeat center center; } #menutop ul li a.twitter:hover { background:url(../images/bt_twitter-over.png) no-repeat center center; } #menutop ul li a.linkedin:hover { background:url(../images/bt_linkedin-over.png) no-repeat center center; } #logo { padding:15px 0; border-right:1px solid #353438; height:95px; width:190px; } /* ------------------ * NAV ------------------------------*/ #nav { background: url(../images/bg_header.png) repeat-x; border-right:1px solid #545356 } #nav ul li { height:95px; border-left: 1px solid #545356 } #nav ul li a { color:#fff; font-size:18px; height:95px; padding:38px 20px 0 20px; border-right:1px solid #353438; width:135px; /* ---width:142px;---*/ text-align:center; text-transform:uppercase; letter-spacing:normal } #nav ul li a:hover { color:#ddd; background:#3e3d43 } #nav ul li.noborder { border-left: none; } #nav ul li.noborder a:hover { background:none } #nav ul li.noborder a { text-transform:none; width:auto; border:none; font-size:16px; padding:38px 0 0 35px; } #nav ul li.noborder a.login { border-left:1px solid #545356 !important } #nav ul li span { position:relative; top:-8px; } /* ------------------ * Menu select ------------------------------*/ #services .services, #about .about, #faq .faq, #contact .contact, #services .services a:hover, #about .about a:hover, #faq .faq a:hover, #contact .contact a:hover, #home .accueil, #home .accueil a:hover { background:#2d2c2f !important } /* ------------------ * Banner------------------------------*/ #banner { height:180px;} #banner .container { width:520px; margin:30px auto 0 auto; text-align:center; } #banner ul li { padding:5px 60px 0 60px; font-size:28px; } /* ------------------ * Exceptions------------------------------*/ /* ------------------ * CONTAINERS---------------------------*/ .container { width:960px; margin:0 auto;} #content { padding:30px 0; repeat; min-height:600px; color:#333; } #nav ul, #nav .container, #content, #home #content #liste-services, #footer .container { letter-spacing:-0.36em; font-size:0; } .col, #menutop span, #menutop ul, #logo, #nav ul, #nav ul li, #nav ul li a, .CTA, .intro p, .intro a, #home #content #liste-services li, #sitemap, #coordonnees, #sitemap ul div { display:inline-block; *zoom:1; *display:inline; vertical-align:top;} h1, h2, h3, h4, h5, a, p { letter-spacing:normal } /* ------------------ * TITRES ----------------------------*/ #content h1 { text-align:right } #content h2, #content .h2 { border-bottom:1px solid #ccc; border-top:1px solid #ccc; margin:20px 0; padding:20px 0; text-align:left } .coldroite { width:66%; margin:0 0 0 33% } /* ------------------ * CONTAINERS-------------------------*/ a.CTA { font-size:14px; background:#499d18; padding:12px 0 0 0; height:40px; line-height:110%; color:#fff; text-transform:uppercase; width:139px; font-weight:700; text-align:center; margin:12px 0 0 0; } a.deuxmots { padding:5px 0 0 0; } a.CTA:hover { color:#fff; background: #5eb42c } /* ---------------------- * HOME --------------------------*/ #home { background:none } #home #header { background:#ffffff url(../images/bg_accueil.png) top center no-repeat } #home #content { padding:30px 0; background: url(../images/bg_gris.jpg) repeat; min-height:400px; color:#fff } #home #content h2, #home #content .h2 { border-bottom:1px solid #323135; border-top:1px solid #545356; text-align:center; width:100%; padding:0; } #home #content h2 span, #home #content .h2 span { border-bottom:1px solid #545356; border-top:1px solid #323135; padding:20px 0; width:100%; display:block } #home .intro p { text-align:center; padding:0 ;line-height:150%; } #home .intro .CTA { margin-top:10px ; } #home #content { padding:30px 0; background: url(../images/bg_gris.jpg) repeat; min-height:400px; color:#fff } #home #content #liste-services { padding:0 } #home #content #liste-services li { margin:25px 0 25px 0; background: none; width:95% } #home #content #liste-services li.col1 { width:50%; padding:0 5% 0 0; } #home #content #liste-services li.col2 { width:50%; padding:0; } #home #content #liste-services .titre { font-size: 26px; text-transform:uppercase; font-weight:700 } #home #content #liste-services img { float:left; margin:0 20px 40px 0 } #home #content #liste-services p { font-size:16px; margin:0; } .margebas { margin-bottom:30px !important} /* ---------------------- * FOOTER --------------------------*/ .container .col-3 { width:33%; padding:0 3% 0 0; font-size:16px; letter-spacing:normal} .container .col-2 { width:50%; padding:0 3% 0 0; font-size:16px; letter-spacing:normal} .container .col-1 { width:100%; padding:0; font-size:16px; letter-spacing:normal} .container .col p { font-size:16px;} .logopartenaire { margin:10px 0} #faq .col-3 { margin:60px 0 0 0} /* ---------------------- * FOOTER --------------------------*/ #footer { background:#2d2c2f; color:#fff; padding:30px 0; font-size:14px;} #sitemap { width:67%; padding: 0 0 30px 0 ; font-size:14px;} #sitemap ul li { list-style:none; padding:0; margin:0 0 5px 0} #sitemap ul div { width:36%} #sitemap ul div.last{ width:10%} #sitemap .caps { font-size:16px; text-transform:uppercase} #coordonnees { width:33%; text-align:right; } #coordonnees p { font-size:14px; margin:0} #coordonnees p span { margin:0 0 0 20px} #coordonnees a { margin:20px 0 0 0 } #coordonnees h2 { text-align:right; margin:0 0 20px 0} #credits { width:100%; color:#4f4e52;font-size:14px; letter-spacing:normal } #credits a { color:#7a7880; } #credits a:hover { color:#999; } #slideshowWrapper{position:relative; left:-25px; width:560px;margin:auto;} #fssPrev{position:absolute;top:40px;left:20px;background:url(http://www.fxpertise.ca/images/fleche_back.png) no-repeat ;width:20px;height:30px;text-indent:-999999px;} #fssNext{position:absolute;top:40px;left:525px;background:url(http://www.fxpertise.ca/images/fleche_next.png) no-repeat;width:20px;height:30px;text-indent:-999999px;} #fssPlayPause{ display:none;} ul#slideshow{list-style:none;padding:2px;margin:auto;margin-top:5%;width:560px;height:100px;overflow:hidden;} ul#slideshow li { background:#fff} ul#slideshow li .h1 { line-height:45px !important} #fssList{list-style:none;width:646px;margin:auto;padding:5px 0 0 45%; display:none} #fssList li{display:inline;padding-right:10px;} #fssList li a{color:#999;text-decoration:none;} #fssList li.fssActive a{font-weight:bold;color:#333;}