/* Theme Name: Theme URI: Description: Author: Mathieu Chartier Author URI: http://kindoweb.com Template: Base Version: 1.0 . Sources: –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––/ CSS Reset : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Typography : http://www.blueprintcss.org/ –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––/ . [Table Of Contents] 0- Reset 1- Globals Tags 1.1- Headings 1.2- Text elements 1.3- Lists 1.4- Tables 1.5- Forms 1.6- Links 1.6.1- Header links 1.6.2- Content links 1.6.3- Aside Primary links 1.6.4- Footer links 2- Global Structure init 3- Header 4- Content 5- Aside Primary 6- Footer 7- Class 8- Microformats */ /* =0 Reset ------------------------------------------------------------------ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } body { color: black;} ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* =1 Globals Tags ------------------------------------------------------------------ */ html{ background:url(../images/architecture/arc-html.jpg) repeat-x #CDD0D5;} body { font-size: 75%; color: #222; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } /* =1.1 Headings ------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #60052a; font-family:"Century Gothic", sans-serif;} h1 { line-height: 1; margin-bottom: 0.5em; font-family:; font-size:30px; font-weight:normal } h2 { font-size: 24px; margin: 0.75em 0; } h3 { font-size: 16px; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } /* =1.2 Text elements ------------------------------------------------------------------ */ p { margin: 0 0 1.5em; font-family:Georgia, "Times New Roman", Times, serif; } a:focus, a:hover { color: #000; } a { color: #009; text-decoration: underline; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em, dfn { font-style: italic; } dfn { font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color:#666; } pre { margin: 1.5em 0; white-space: pre; } pre, code, tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* =1.3 Lists ------------------------------------------------------------------ */ li ul, li ol { margin:0 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em;font-family:Georgia, "Times New Roman", Times, serif; } ul { list-style-type: none; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em; } /* =1.4 Tables ------------------------------------------------------------------ */ table { margin-bottom: 1.4em; width:100%; } th { font-weight: bold; } thead th { background: #c3d9ff; } th, td, caption { padding: 4px 10px 4px 5px; } tr.even td { background: #e5ecf9; } tfoot { font-style: italic; } caption { background: #eee; } /* =1.5 Forms ------------------------------------------------------------------ */ /* =1.6 Links ------------------------------------------------------------------ */ a:link, a:visited { color: #333; } a:hover { color: #111; } a:active { color: #111; } a[href$='.pdf'], a[rel='pdf'], a[rel*='pdf'], a[rel~='pdf']{ padding-right: 18px; background: transparent url(../images/icons/icon_pdf.gif) no-repeat center right; } a[href ^="mailto:"]{padding-right: 18px;background: transparent url(../images/icons/icon_mailto.gif) no-repeat center right; } a[class ="popup"]{ padding-right: 18px; background: transparent url(../images/icons/icon_popup.gif) no-repeat center right; } a[href$='.doc']{padding-right: 18px;background: transparent url(../images/icons/icon_doc.gif) no-repeat center right;} a[href$='.xls']{padding-right: 18px;background: transparent url(../images/icons/icon_xls.gif) no-repeat center right;} a[rel ~='external']{ padding-right: 18px; background: transparent url(../images/icons/icon_external.png) no-repeat center right; } /* =2 Global Structure init ------------------------------------------------------------------ */ #site{ width:995px; margin:0 auto; } #header{ width:995px; height:125px; margin:0 auto; position:relative; background:url(../images/architecture/arc-header.jpg) center top no-repeat; } #content{ float:left;background:#cdd0d5; width:995px; margin:24px 0 0; position:relative; } #content-primary{ width:486px; float:left; padding:88px 88px 27px 88px; font-size:15px; font-family:Arial, Helvetica, sans-serif; color:#454746; } #conception-site-web #content-primary{ padding:0 0 27px 0; width:670px; } #aside-primary{ width:245px; float:right; padding:95px 18px 27px 0; position:absolute; top:0; right:0; } #footer{ clear:both; background:#06132c; font-size:10px; font-weight:bold; color:#ffffff; padding-bottom:20px; } #home #content { width:995px; } #home #content-primary { width:957px; padding:10px 5px 30px 18px; } /* =3 Header ------------------------------------------------------------------ */ #header address { margin:0; padding:0;} #header address span { float:left; display:none; } #header address .url { position:absolute; left:88px; top:27px; } #header #logo { height:114px; } #header #nav-site-header { position:absolute; top:5px; right:5px; color:#fff; } #header #nav-site-header ul { font-size:10px; font-weight:bold; } #header #nav-site-header ul li { float:left; padding-left:15px; text-transform:uppercase; } #header #nav-site-header a { color:#fff; text-decoration:none; } #header #nav-site-global-en, #header #nav-site-global { position:absolute; top:75px; height:75px; width:995px;} #header #nav-site-global-en ul, #header #nav-site-global ul { font-size:12px; font-weight:bold; margin:0 0 0 75px; padding:0; font-weight:normal; } #header #nav-site-global-en ul li, #header #nav-site-global ul li { float:left; text-transform:uppercase; } #header #nav-site-global-en a, #header #nav-site-global a { color:#ffffff; text-decoration:none; font-size:18px; font-family: century gothic, sans-serif; line-height:70px; padding:5px 12px ; display:block; height:65px;} #header #nav-site-global-en a:hover, #header #nav-site-global a:hover { color:#5691D3; } #vision{ width:995px; height:150px; position:absolute; top:150px;} /* =4 Content ------------------------------------------------------------------ */ #conception-site-web #kindoweb-rock{ background:url(../images/content/content-kindo-rock.jpg) no-repeat; padding:72px 78px 0; height:240px;} #conception-site-web #kindoweb-rock h1{ width:220px; line-height:34px; } #conception-site-web #kindoweb-rock p{ width:300px; } #conception-site-web #kindoweb-rock ul{ list-style:circle; margin-bottom:0; } #conception-site-web #kindoweb-rock ul li{ margin-bottom:5px; } #conception-site-web #site-teaser{background:url(../images/architecture/arc-site-teaser.jpg) no-repeat; width:670px; height:340px; position:relative;} #conception-site-web #site-teaser h2{ margin-top:14px; float:left; width:100%; font-size:24px;} #conception-site-web #site-teaser #project-random, #conception-site-web #site-teaser #news{ float:left; width:300px; height:300px; position:absolute; top:20px;} #conception-site-web #site-teaser #project-random{ left:45px;} #conception-site-web #site-teaser #news{ left:365px;} #conception-site-web #site-teaser #project-random h3{ color:#737577; font-size:14px; margin-top:5px; font-weight:bold;} #conception-site-web #site-teaser #news ul{ margin:53px 0 0;width:275px; } #conception-site-web #site-teaser #news li{ height:70px; position:relative; background:url(../images/illustration/illu-last-news.gif) repeat-x 0 bottom; width:275px; } #conception-site-web #site-teaser #news li .date{ background:#b8c6d0; width:45px; height:37px; text-align:center; float:left; line-height:15px; padding-top:8px; font-family:"Century Gothic", sans-serif; color:#191a19; font-weight:bold; margin:10px 20px 0 0;} #conception-site-web #site-teaser #news li a{ float:left;margin-top:12px;width:205px; } #conception-site-web #site-teaser #news li .date span{ display:block;} /* #gage-qualite ul li{ float:left; width:270px; height:75px; line-height:75px; border:solid 2px #000; text-align:center; } #gage-qualite ul li a{ float:left; width:270px; height:75px; display:block; background:#000000; color:#FFFFFF; } #gage-qualite ul li a:hover{ background:#fff; color:#000; } */ /* =4.1 Services ------------------------------------------------------------------ */ #services #content-primary ul{ margin:0px 0 0 60px; list-style:disc; } #services #content-primary ul li{ line-height:24px; } #services #content-primary ul li{ margin-bottom:0;} #services #content-primary h2{ background:url(../images/illustration/illu-service-h3.jpg) no-repeat; height:30px; padding:23px 0 0 40px; font-size:20px;} #services #content-primary #web, #services #content-primary #strategie, #services #content-primary #design{ background:url(../images/illustration/illu-service-box.jpg) left bottom no-repeat; padding:0 0 40px 0;} /* =4.2 Contact ------------------------------------------------------------------ */ #contact #content-primary h2{ font-size:18px; margin-top:20px;} #contact #content-primary dl{ margin:0 0 0 16px;} #contact #content-primary dt, #contact #content-primary .latitude, #contact #content-primary .longitude, #contact #content-primary .url, #contact #content-primary .region, #contact #content-primary .country-name{ display:none;} #contact #content-primary #kindoweb-address-montreal, #contact #content-primary #kindoweb-address-brome-missisquoi, #contact #content-primary #kindoweb-contact-us{background:url(../images/illustration/illu-service-box.jpg) left bottom no-repeat; padding:0 0 40px 0;} #contact #content-primary #kindoweb-contact-us{ padding-bottom:80px;} #contact #content-primary #kindoweb-contact-us .hiddenFields{ display:none;} #contact #content-primary #kindoweb-contact-us h2, #contact #content-primary #kindoweb-contact-us p{ margin:0;} #contact #content-primary #kindoweb-contact-us p{ margin:0 0 0 10px;} #contact #content-primary #kindoweb-contact-us input, #contact #content-primary #kindoweb-contact-us textarea{ width:280px;} #contact #content-primary #kindoweb-contact-us .button{ width:100px; margin-top:20px;} #contact #content-primary #kindoweb-address-montreal h2, #contact #content-primary #kindoweb-address-brome-missisquoi h2, #contact #content-primary #kindoweb-contact-us h2{ background:url(../images/illustration/illu-service-h3.jpg) no-repeat; height:30px; padding:23px 0 0 40px; font-size:20px;} #contact #content-primary form p{ padding:0 0 0 30px;} #contact #content-primary label{ display:block; width:130px;} #contact #content-primary .button { display:block; width:130px; float:left; display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin:0 2px 0 0; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } /* =4.3 Portfolio ------------------------------------------------------------------ */ #portfolio #content-primary .project{ background:url(../images/illustration/illu-service-box.jpg) left bottom no-repeat; padding:0 0 40px 0; overflow:hidden; } #portfolio #content-primary ul{ margin:20px 0 0 60px; width:240px; list-style:disc;} #portfolio #content-primary ul li{ line-height:22px; font-size:14px;} #portfolio #content-primary p{ margin:20px 0 0 40px; width:260px; } #portfolio #content-primary ul li{ margin-bottom:0;} #portfolio #content-primary h2{ background:url(../images/illustration/illu-service-h3.jpg) no-repeat; height:30px; padding:23px 0 0 40px; font-size:18px; margin:0;} #portfolio #content-primary img{ float:right;} #portfolio #content-primary .projet-type{ font-weight:bold; font-size:12px;} #portfolio #content-primary .visit-site{ font-size:11px;} /* =4.4 Blogue ------------------------------------------------------------------ */ #blogue #content-primary label{ display:block; width:130px; float:left;} #blogue #content-primary .button { display:block; width:130px; float:left; display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin:0 2px 40px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } #blogue #content-primary h2{ clear:both;} /* =4.5 Kindoweb.tv ------------------------------------------------------------------ */ #tv .video-list { clear:both; width:735px; } #tv .video-list .scrollable { margin-bottom:15px; } #tv #video-player { height:375px; padding-left:40px; } #tv .items a { padding:4px; border:1px solid #4c1130; position:relative; } #tv .items img { left:0; top:-12px; width:128px; position:absolute; } #tv .items span.video-image { display:block; overflow:hidden; position:relative; width:128px; height:72px; } #tv .items span.video-time { -moz-border-radius:3px 3px 3px 3px; border-radius:3px; background-color:#000000; color:#FFFFFF !important; font-size:11px; font-weight:bold; opacity:0.75; padding:0 4px; position:absolute; bottom:4px; right:4px; } #tv #content-primary { padding:88px 48px 27px; width:566px; } #tv h1, #tv h2 { padding-left:40px; } /* =5 Aside Primary ------------------------------------------------------------------ */ #aside-primary ul{border-top:solid 1px #fff; } #aside-primary ul li{ border-bottom:solid 1px #fff; font-family:"Century Gothic", sans-serif; font-size:14px;} #aside-primary ul li a{ display:block; padding:5px 12px; color:#454746; font-size:12px;} #aside-primary ul li a:hover{ background:#05132D; color:#FFFFFF;} #aside-primary #kindo-teaser{ text-align:center; } #aside-primary #kindo-teaser img{ margin:0 0 15px 8px;} /* =6 Footer ------------------------------------------------------------------ */ #footer #site-info{ background:#310833 url(../images/illustration/illu-footer-info-02.jpg) repeat-x; border-top:solid 1px #000; border-bottom:solid 1px #fff; padding:20px 0; overflow:hidden;} #footer #site-info .screen{ padding:0 ;} #footer #site-info ul{ margin:0; padding:0;} #footer .screen { width:995px; margin:0 auto; position:relative; } #implication{ background:url(../images/illustration/illu-footer-info.jpg) no-repeat; width:175px; height:193px;-moz-box-shadow: 0px 0px 4px #000; /* FF3.5+ */-webkit-box-shadow: 0px 0px 4px #000; /* Saf3.0+, Chrome */box-shadow: 0px 0px 4px #000; /* Opera 10.5, IE 9.0 */; margin:20px; padding:9px 18px 18px;} #implication h2{ color:#5691d3; font-size:14px;} #implication ul { margin:0; border:0;} #implication ul li{ border:0;} #implication ul li{ margin-bottom:8px;} #implication ul li a{ padding:0; } #implication ul li a:hover{} #footer #legal{ margin:0px 30px 0px 88px; } #footer #legal a[rel ~='external']{ background:none;} #footer #nav-site-footer ul { margin:12px 0 0 64px; padding-bottom:28px; width:900px; } #footer #nav-site-footer-en ul { margin:12px 0 0 80px; padding-bottom:40px; } #footer #nav-site-footer-en ul li, #footer #nav-site-footer ul li { float:left; padding-left:25px; text-transform:uppercase; font-family:"Century Gothic", sans-serif; } #footer a { color:#ffffff; text-decoration:none; } #footer p { clear:both; text-transform:uppercase; line-height:85px; } #footer .url{ right:75px; top:30px; position:absolute;} #footer dl, #footer span.fn{ display:none; } #footer #tech-watch,#footer #footer-buzz-video{ width:250px; background:#0C2140; padding:16px; float:left; -moz-box-shadow: 3px 3px 3px 3px #5691D3; -webkit-box-shadow: 3px 3px 3p 3pxx #5691D3; box-shadow: 3px 3px 3px 3px #5691D3; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin:0 20px 0 0; height:175px; } #footer #tech-watch h2,#footer #footer-buzz-video h2{ padding:0; margin:0 0 8px; color:#5691D3;} #footer #tech-watch h3,#footer #footer-buzz-video h3{ color:#5691D3;} #footer #tech-watch li{ margin-bottom:5px;} #footer #tech-watch a:hover{ color:#737577;} /* =7 Classes ------------------------------------------------------------------ */ .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } .hide { display: none; } .show { display:block; } .quiet { color: #666; } .loud { color: #000; } .bold { font-weight:bold; } .highlight { background:#ff0; } .added { background:#060; color: #fff; } .removed { background:#900; color: #fff; } .first { margin-left:0; padding-left:0; } .last { margin-right:0; padding-right:0; } .top { margin-top:0; padding-top:0; } .bottom { margin-bottom:0; padding-bottom:0; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .grey { color:#333333; } .active { color:#fee643; } .orange { color:#ff8c17; } .space { padding-bottom:15px; } .upper { text-transform:uppercase; } .launch{ background:#FF6600;} #content-primary .launch a{ color:#FFF; font-weight:bold;} .gray { color: #FFF; border: solid 1px #555; background: #60052A; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#60052A)); background: -moz-linear-gradient(top, #888, #60052A); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#60052A'); } .gray:hover { background: #616161; background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b)); background: -moz-linear-gradient(top, #757575, #4b4b4b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b'); } .gray:active { color: #afafaf; background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888)); background: -moz-linear-gradient(top, #575757, #888); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888'); } /* =8 Microformats ------------------------------------------------------------------ */