/* -------------------------------------------------------------- * general.css --------------------------------------------------------------- */ /* RESET // --------------------------------------------------------------- */ /* Resets default browser CSS. --------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; line-height:normal; vertical-align:baseline; } body { line-height:1.5em; background-color:#2E2E27; color:#999; font-family: 'TitilliumText14L400wt', Helvetica, Arial, sans-serif; font-size:13px; line-height:20px; } a img { border:none; } :focus {outline: none;} /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } table, td, th { vertical-align:top; } /* remove the blockquote " " */ blockquote:before, blockquote:after, q:before, q:after {content:"";} blockquote, q {quotes:"" "";} /* basicLayout. --------------------------------------------------------------- */ h1 span { position:absolute; top:0; left:0; overflow: hidden; width: 1%; height: 0; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0; } body h1, body h2, body h3 { margin:0; } /* hide the list style in the header, the menu and in the footer */ #header ul, #footer ul { list-style-type: none; margin:0; padding:0; } .wrapright { float: left; width: 100%; } .right { margin-left: 260px; /*height: 200px;*/ } .left { float: left; width: 260px; margin-left: -100%; height: 200px; } #subcontent { padding-left:30px; } br.clear { clear:both; line-height:0px; } /* Headings --------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6, #msg { font-weight: bold; color: #333; font-family:'proxima-nova-1', 'proxima-nova-2', 'Arial Black', Helvetica, Arial, sans-serif; text-transform:uppercase; color:#7e7e7e; } h1, h1.sur2lignes { font-size:132px; line-height:108px; margin:0px; word-wrap: break-word; } h1.sur3lignes { font-size:90px; line-height:70px; margin:0px;} .subpage h1 { font-size:51px; line-height:44px; font-weight:200; } h1.light { font-weight:100; } h2 { font-size:30px; line-height:30px; font-weight:200; margin-bottom:15px!important; } h2.breadcrumb a { display:block; color:#35352D; margin-bottom:40px; } h2.breadcrumb a:hover { color:#FFF; } h3, #msg { font-size:16px; line-height:17px; font-family:'proxima-nova-1', 'proxima-nova-2', Helvetica, Arial, sans-serif; font-weight:400; padding:0px; margin:0px 0px 18px 0px!important;} h4 { font-size:12px; margin-bottom:5px; } h5 { font-size:10px; margin-bottom:5px; } h6 { font-size:10px; } /* Text elements --------------------------------------------------------------- */ p, blockquote, cite, li { font-family:inherit; display:block; margin:0 0 20px; text-transform:none; font-size:13px; line-height:18px; } def { font-size:12px; line-height:16px; text-transform:none; } p.small { font-size:10px; line-height:12px; } p.auteur { padding:0px 0px 0px 23px; background:transparent url('http://www.pixelcircus.ca/images/tiret.gif') no-repeat 0px 5px;} p strong { font: 13px/16px TitilliumText14L-800wt, Arial, sans-serif; color:#ccc;} a:hover { color: #FFF; } a { color: #999; text-decoration: none; } hr { border:none 0; height:1px; color:#fff; background-color:#fff; display:none } cite { 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-weight:bold; font-style:normal; color:#666; } del { color:#666; } h1.fontface {font: 60px/68px TitilliumText14L400wt, Arial, sans-serif;letter-spacing: 0;} label { font-size:12px; display:block; margin-bottom:7px; } /* Lists --------------------------------------------------------------- */ li ul, li ol { margin: 0 } li { margin: 0 0 5px 0;} ul, ol { margin: 0 0 15px 0; } ul { list-style-type: none; } ol { list-style-type: decimal; } dl { margin: 0 0 15px 0; } dl dt { font-weight: bold; } dd { margin-left: 15px;} /* Tables --------------------------------------------------------------- */ table { margin-bottom:14px; width:100%; text-align:left; } th { font-weight:bold; } th,td { padding:4px 10px 4px 5px; } tfoot { font-style:italic; } caption { background:#eee; } /* Forms --------------------------------------------------------------- */ input[type=text], textarea, select { color:#999; margin:0px 0px 14px 0px; background-color:transparent; padding:7px 8px; border-style:solid; border-width:1px; border-color:#666; font: 12px/17px TitilliumText14L-400wt, Arial, sans-serif;} select { width:232px; height:30px; } input[type=text] { width:227px; height:14px; } input[type=button], input[type=submit] { font-size:16px; line-height:17px; font-family:'proxima-nova-1', 'proxima-nova-2', Helvetica, Arial, sans-serif; font-weight:800; margin:0px 0px 18px 0px!important; display:block; color: #45757F; text-decoration: none; border:0px; position: relative; cursor: pointer; padding:0px; background-color:transparent; } input[type=button]:hover, input[type=submit]:hover { color:#fff!important; } textarea { height:92px; width:421px; } /* Header --------------------------------------------------------------- */ #logo a { display:block; position:absolute; width:100px; height:31px; left:30px; top:30px; text-indent:-999px; background:transparent url('http://www.pixelcircus.ca/images/logo_pixelcircus.gif') no-repeat 0px -100px; color:#999; } #logo a:hover { background-position: 0px 0px; } #home #logo { background-position: 0px 0px !important; } #logo #tagline { display:block; position:absolute; width:130px; height:30px; left:30px; top:70px; } #navigation { position:absolute; left:30px; top:104px; } #navigation, #navigation li { list-style:none; margin:0px; } #navigation li a:hover { color:#ffffff; } #navigation li a { text-transform:uppercase; font: 1.8em/1em 'proxima-nova-1', 'proxima-nova-2', 'Arial Black', sans-serif; font-weight:bold; font-size:18px; line-height:18px; color:#7e7e7e; } #header { display:block; padding:24px 27px 10px 27px; min-height:226px; background-image:url(../images/header-bg.gif);} #language { width:30px; text-align:right; position:absolute; left:200px; top:30px; font-size:10px;} #sub_nav, #sub_nav li { list-style:none; margin:0px; } #sub_nav { position:absolute; left:30px; top:260px; font-size:12px; line-height:16px; } #sub_nav li a { font-size:12px; line-height:16px; } /* Main content --------------------------------------------------------------- */ ul.blocklist, ul.blocklist-text, ul.blocklist-links { margin:0px; list-style:none; overflow:hidden; width:100%;} ul.blocklist li { list-style:none; float:left; padding:0px; } /*ul.blocklist-text li { list-style:none; float:left; width:199px; height:229px; margin:0px 1px 1px 0px; padding:30px 30px 0px 30px; }*/ /*ul.blocklist-links li a { display:block; float:left; width:199px; height:229px; margin:0px 1px 1px 0px; padding:30px 30px 0px 30px; }*/ ul.blocklist li, ul.blocklist li a { display:block; width:260px; height:260px; margin:0px; padding:0px; color:#7e7e7e; cursor:pointer; } ul.blocklist li .cover, ul.blocklist li .back { display:block; width:200px; height:204px; padding:26px 30px 30px 30px; } ul.blocklist li h3 { font-weight:bold; } ul .block-rollover { position:relative; width:199px; height:229px; padding:28px 28px 0px 28px; } ul .block-rollover a { position:absolute; left:20px; bottom:20px; } .column { float:left; width:230px; padding:0px 30px 20px 0px; } .column-and-half { float:left; width:420px; padding:0px 30px 20px 0px; } .marginleft { margin-left:30px; } .column-full-width { position:relative; min-height:200px; padding:30px 30px 30px 30px; margin:0px 0px 30px -260px;} .column-full-width h2 { max-width:1000px; } #block-left { position:absolute; left:0px; top:260px; width:200px; height:200px; padding:30px; margin-right:-260px; float:left; } #main_content { padding:30px 0px 30px 30px; position:relative; } #main_content p, #main_content h3 { max-width:490px; } #key-controls { position:absolute; width:75px; height:50px; left:32px; top:182px; } #key-controls a { padding:6px; text-align:center; width:9px; height:9px; font-family:arial; font-size:5px; line-height:9px; border:1px solid #7e7e7e; display: block; text-decoration: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; position: absolute; cursor: pointer; } #key-controls a#left { top:25px; } #key-controls a#right { top:25px; left:52px; } #key-controls a#up { left:26px; } #key-controls a#down { top:25px; left:26px; } #subcontent .column { min-height:350px; } /* Footer --------------------------------------------------------------- */ #footer { position:fixed; left:30px; bottom:30px; } #footer, #footer li { list-style:none; margin:0px; } #footer li a { background-image:url(../images/icons.gif); background-repeat:no-repeat; padding-left:20px; font-size:12px; height:17px; display:block; } #footer #twitter a:hover { background-position:0px -20px;} #footer #newsletter a { background-position: 0px -40px; } #footer #newsletter a:hover { background-position: 0px -60px; } #footer #telephone a { background-position: 0px -80px; } #footer #telephone a:hover { background-position: 0px -100px; } /* Section specific colors --------------------------------------------------------------- */ /*#home ul.blocklist li h2, #home ul.blocklist li p { color:#3E3E35; }*/ #projects .color-light, #projects #other-projects a { color:#F1FF30; } #projects #other-projects a:hover { color:#FFF; } #projects #header, #projects .color-dark, #projects .blocklist li { background-color:#2B2E07; } #ten-good-reasons .color-light, #ten-good-reasons .blocklist .cover h2 { color:#FF5E73; } #ten-good-reasons #header, #ten-good-reasons .color-dark, #ten-good-reasons .cover { background-color:#2E1112; } #ten-good-reasons .blocklist .back { color:#2E1112; background-color:#FF5E73; } #ten-good-reasons .blocklist .back h2 { color:#2E1112; } #all-about-us .color-light, #all-about-us p a { color:#BAF06C;} #all-about-us p a:hover { color:#fff; } #all-about-us .color-dark, #all-about-us .column-full-width { background-color:#222B11; } #services .color-light, #services ul.blocklist .cover h2 { color:#67DCEE; } #services #header, #services .color-dark { background-color:#132824; } #services ul.blocklist .back { background-color:#67DCEE; color:#2E2E27; } #services ul.blocklist .back h2 { color:#2E2E27; } #service-detail .color-light, #service-detail .blocklist-links li a h2 { color:#67DCEE; } #service-detail a.color-light:hover { color:#FFF; } #service-detail .blocklist-links li a:hover h2 { color:#2E2E27; } #service-detail #header, #service-detail .color-dark, #service-detail .blocklist-links li a { background-color:#132824; } #emplois .color-light, #emplois p a, #emplois h2 a, #emplois input[type=button], #emplois input[type=submit] { color:#BAF06C;} #emplois p a:hover, #emplois h2 a:hover { color:#fff; } #emplois .color-dark, #emplois .column-full-width { background-color:#222B11; } #emploi-detail .color-dark { background-color:#222B11; } #emploi-detail .color-light, #emploi-detail #subcontent a:link, #emploi-detail input[type=submit] { color:#BAF06C; } #emploi-detail #subcontent a:hover, #emploi-detail input[type=submit]:hover { color:#fff; } #blog .color-light { color:#cc99ff;} #blog #header, #blog .color-dark { background-color:#251c27;} #blog #main_content { padding: 5px 0 0 30px; } #blog ul#list-posts li h3 { margin-bottom: 5px !important; } #blog ul#list-posts li h2 { margin-bottom: 5px !important; } #blog ul#list-posts li div { display:inline-block; zoom:1; *display:inline; } #blog ul#list-posts li { border-bottom: 1px solid #2e2e27; margin: 0; padding:30px 0 40px 0; position:relative; } #blog ul#list-posts li.lastpost { border-bottom: none } #blog p.links { position: absolute; bottom: 20px; width:100%; } #blog div.img-post { display:inline-block; *display:inline; zoom:1; width:200px; margin-right:25px; } #blog div.info-post { display:inline-block; *display:inline; zoom:1; vertical-align:top; } #blog h3 { font-weight:800; } #blog a.more { display:inline-block;*display:inline; zoom:1; } #blog a.comments { display:inline-block;*display:inline; zoom:1; float:right; } #blog input[type=submit] { color:#cc99ff; text-transform:uppercase;} #blog #recherche { display:inline-block;*display:inline; zoom:1; position: relative; top: 20px ;left:460px; } #blog #recherche h3 { margin-bottom:5px !important; } #blog #recherche input[type=submit] { position:relative; left:-35px; display:inline-block; *display:inline; zoom:1;top:3px; color:#999; } #blog #twitter p { font-style:italic; margin:0 0 20px 0; } #blog .column { width:250px;margin-right:40px; } #blog #subcontent { padding-left:0; } #blog #subcontent h3 { font-weight:200 } #blog #twitter p.date { font-style:normal; font-size:11px; margin:0 0 10px 0; } #blog #pagination { margin:0 0 50px 0; } #blog #pagination a.numero { display:inline-block; *display:inline; zoom:1; height:25px; padding:8px 15px 0 15px; text-align:center; margin:0; } #blog #pagination a.numero:hover, #blog #pagination a.current{ background: #251c27;} #blog #pagination a.numero img { margin:5px 0 4px 0;} #blog #pagination a.last { margin:0 0 0 10px;} #contact .color-light { color:#BBF06D; } #contact a.color-light:hover { color:#FFF; } #contact #header, #contact .color-dark { background-color:#222B11; } #contact input[type=submit] { color:#BBF06D; background-color:#222B11; } /* Accueil --------------------------------------------------------------- */ #home .right { overflow:hidden; } #home .blocklist { width:103%; } #home .color-light { color:#FFF; } #home a.color-light:hover { color:#FFF; } #home #header, #home .color-dark { background-color:#222B11; } /*#home ul.blocklist li div { text-transform:uppercase; font-size:25px; }*/ #home #logo a { background-position: 0px 0px; } #home #logo #tagline { color:#fff; } #home ul.blocklist li .cover { padding:0px; } /* Project --------------------------------------------------------------- */ #project #preview { width:100% !important; height:520px; position:relative; margin-bottom:30px;} /*#project #preview img { width:100%; height:108px; position:absolute; bottom:0px; }*/ #project #preview li { width:1060px !important; height:520px; float:left; } #project #img_number { display:block; position:absolute; width:40px; right:30px; bottom:28px; } #project a:hover, #project a:hover h2 { color:#FFF; } #project #back { display:block; position:absolute; width:60px; height:10px; left:160px; top:233px; background-image:url(../images/back_arrow.gif); background-repeat:no-repeat; background-position: right 2px; text-align:right; padding:0 12px 0 0; } #project #back:hover { background-position: right -8px; } #project #block-left #url { display:block; width:200px; word-wrap:break-word; } #img_number { position:absolute; left:210px; top:220px; } .hidden { display:none; } /* Realisations --------------------------------------------------------------- */ #projects #projects, #projects #projects ul, #projects #projects li { list-style:none; margin:0px; line-height:0px; } #projects #projects li a { display:block; width:120px; height:72px; padding: 140px 10px 0px 0px; float:left; background-repeat:no-repeat; } #projects #projects li a:hover { background-position: -130px 0px; } #projects #other-projects ul, #projects #other-projects li { list-style:none; } ul.column li a[class=active] { color:#F1FF30 !important; } ul.column li { margin-bottom:0px; } ul.column li a { color:#999 !important; font-size:12px; line-height:16px; } /* 10 bonnes raisons --------------------------------------------------------------- */ #ten-good-reasons .blocklist { background-color:#2E1112; } #ten-good-reasons .blocklist li { margin:0px; width:259px; height:259px; margin:0px 1px 1px 0px; } #ten-good-reasons .blocklist .cover { width:199px; height:203px; } #ten-good-reasons .blocklist .back h2 { margin-bottom:0px; } /* Services --------------------------------------------------------------- */ #services .blocklist { background-color:#132824; } #services .blocklist li { margin:0px; width:259px; height:259px; margin:0px 1px 1px 0px; } #services .blocklist .cover { width:199px; height:203px; background-color:#2E2E27; background-image:url(../images/services_icons.png); } #services .blocklist #design .cover { background-position:0 0; } #services .blocklist #pixelmail .cover { background-position:0 -259px ; } #services .blocklist #ecommerce .cover { background-position:0 -518px; } #services .blocklist #animation .cover { background-position:0 -1036px; } #services .blocklist #strategy .cover { background-position:0 -1295px; } #services .blocklist #campaign .cover { background-position:0 -1554px; } /* Sub-pages --------------------------------------------------------------- */ .subpage #header { background-image:none; } #subcontent ul li { background:transparent url('http://www.pixelcircus.ca/images/bullet.gif') no-repeat 0px 8px; padding-left:10px; } .subpage p, .subpage li { max-width:520px; } /* Fiche d'un service (service-detail.php) --------------------------------------------------------------- */ #service-detail #block-left { background: #66dced url(../images/services_icons.png) 0 -259px; } #service-detail form input[type=text] { background-color:#132824; width:214px; height:28px; margin:0px 0px 9px 0px; padding:0px 8px; border-style:solid; border-width:1px; border-color:#666; } #service-detail #captures { position:relative; display:block; float:right; overflow:hidden; padding:0px 0px 0px 30px; top:-30px;} #service-detail #captures img { margin: 0px -200px 20px 0px; } #service-detail #captures:last-child { margin-bottom:0px; } #service-detail h1 { font-size:48px; line-height:43px; max-width:660px; } #service-detail h3 { color:#66dced ; } #service-detail p.intro { font-size:15px; line-height:20px; margin:0 0 44px 0; } #service-detail p.note { font-size:11px; line-height:15px; } #service-detail p a { color: #66dced; } #service-detail #main_content ul { margin: 0 0 44px 0;} #service-detail #main_content ul li { margin: 0 0 1px -10px; padding: 0 0 0 10px; background:url("http://www.pixelcircus.ca/images/bullet-list.gif") no-repeat 0px 8px;} #service-detail .screenshot { float: left; height:137x; width:167px; margin:0 30px 30px 0; display:inline-block; *display:inline; zoom:1;} #service-detail .screenshot img { border:1px solid #394b47;} #service-detail .desc { float: left; width:480px; display:inline-block; *display:inline; zoom:1;} #service-detail a.bt { font-family:'proxima-nova-1', 'proxima-nova-2', 'Arial Black', Helvetica, Arial, sans-serif; font-weight:400; color: #132824; font-size: 13px; text-transform:uppercase; background:#66dced; padding:10px 12px; display:inline-block; *display:inline; zoom:1; margin:30px 0 0 0; } #service-detail a.bt:hover { background: #ffffff; } #service-detail form h3 { padding-bottom:0px; } #service-detail .color-dark { background-color:#132824; background-image:none; } #service-detail .hr { display:block; position:relative; left:-30px; height:1px; width:30px; border:0px; background-color:none; background-image:url(../images/ligne_grise.gif); background-repeat:no-repeat; margin:0px; padding:0 0 30px 0; } #service-detail #main_content p { max-width:660px; } #service-detail .rightalign { text-align:right; } #service-detail .tarifs tr td { padding: 12px 0 0 0; } #service-detail .lignetable { border-bottom: 1px solid #666; padding: 12px 0 16px 0 !important; } #service-detail h2.secondtitre { font-size:30px; color:#66dceb; margin:50px 0 0 0; font-weight:800; } #service-detail ul.leftcolumn, #service-detail ul.rightcolumn { float:left; width:310px; } #service-detail ul.leftcolumn li, #service-detail ul.rightcolumn li { background:none !important;} #service-detail ul li span { height:65px; display:block} #service-detail input[type=submit] { color: #66dceb; border:none !important; padding:0 !important;} /* Fiche d'un emploi (emploi-developpeur.php) --------------------------------------------------------------- */ #emploi-detail #subcontent ul { margin-bottom:35px; } #emploi-detail #subcontent li { margin-bottom:10px; } .fileInput { color:#999; margin:0px 0px 14px 0px; background-color:transparent; padding:7px 8px; border: 1px solid #666; font: 12px/17px TitilliumText14L-400wt, Arial, sans-serif; width:200px; height:24px; width:227px;} /* Contact --------------------------------------------------------------- */ #contact form h3 { padding:0px; } #contact #block-left { padding:0px; } #contact #msg { margin-bottom:20px; color:#fff; }