/*
Theme Name: Hekka
Theme URI: http://hekka.ca
Description: Thème développé pour Hekka Design multimédia.
Author: Pierre Bourgeois, design : Hekka
Hekka design multimedia
http:/heka.ca

*/

@import url("css/reset.css");
@import url("css/grids.css");
@import url("menu-css.css");
/* LAYOUT
---------------------------------------------------------*/
.innerMainnav,
.innerHeader,
.innerContent,
.innerFooter{width:960px; margin:0 auto; position: relative;}
.innerFooter{padding-top: 75px;}
.innerUnit {padding-right: 20px;}
.lastUnit .innerUnit {padding-right: 0;}

#wrap {width:700px; padding-top: 60px;}
#sidebar {width:215;}

img.alignleft {margin: 0 25px 20px 0}
img.alignright {margin: 0 0 20px 25px}

/* FONTS 
---------------------------------------------------------*/
body {font: 12px/1.5 verdana,Myriad,arial,helvetica,clean,sans-serif;}
em, i {font-style: oblique; }
h1 {font-size: 30px; position: absolute; top: 20px; left: 0; font-weight: bold;}
h2 {font-size: 24px; clear: left; margin-bottom: 10px;letter-spacing: -1pt;}
h3 {font-size: 24px;}
h4 {font-size: 16px; line-height: 20px;}
p {font-size: 13px; margin: 0 0 15px 0; line-height: 19px;}
a {color: #666520; text-decoration: none;}
a:hover {text-decoration: underline;}
pre {font-size: 11px; background: #EFEFEF; border: 1px solid #CCC; padding: 30px 0 10px 0; margin-right: 15px;}
img {border: none;}
.clear {clear: both;}
.left,.alignleft {float: left;}
.right, .alignright {float: right;}
ul.horizontal li {display: inline;}
.navigation {line-height: 3; }

.separateur { height: 16px; clear: both; background: url(img/separator.jpg) no-repeat 50%; padding: 50px 0;}
.separateur2 { height: 100px; clear: both; background: url(img/sepblog.jpg) no-repeat 50%;}
#page-id-6 .separateur {padding: 100px 0 0 0;margin:100px 0 -30px 0}


/* SKINNING 
---------------------------------------------------------*/
body {background: #000000; color: #FFFFFF;}
h1 {padding: 20px 0;}


#mainnav {height:55px; background: #FCFFE8 url(img/bktop.gif) repeat-x;}
#mainnav h3{text-indent: -9999px; width: 209px; height: 21px;
	background: url(img/logo-hekka.gif) no-repeat; position: absolute; top: 21px; left: 0;}
#mainnav ul {width: 740px;position: absolute;top: 25px;right: -55px;}
#mainnav li {line-height: 1; /*border-right: 1px solid #2D5D79; */ background:url(img/menudot.gif) no-repeat 100% 90%; padding-right:10px}
#mainnav li.page-item-15 {border-right: none; padding-right: 0; background:none;}
#mainnav li a {color: white; position: relative; top: 1px;font-size:13px; margin:0 5px;}
#mainnav  li.page-item-13 a ,#mainnav  li.page-item-15 a,#mainnav  li.page-item-985 a,#mainnav  li.page-item-1097 a {color: #ADAB34}

#mainnav li.page-item-4 a {position:relative; left:4px;}

#mainnav ul ul {display:none;}

#header {background: #FCFFE8 url(img/bkheader.gif) repeat-x; height: 119px;}
#header .bkHeader { margin:0 auto; background: url(img/header.jpg) no-repeat center;height: 119px;}
#header .innerHeader {width: 960px;  margin:0 auto;}

#sloganContainer {float: right;width: 280px; margin-top: 18px; left: 585px;
	padding-left: 22px;background: url(img/left-quote.png) no-repeat;  line-height: 16px;  }
#sloganContainer p.slogantext {font-style: italic; float:left; width: 210px;}
#sloganContainer p.slogantext a {color: #ADAB34; text-decoration: underline;}
p.slogantext .rightQuote {display: inline; width: 17px;padding-left: 10px;
	background: url(img/right-quote.png) no-repeat; position: relative; top: 8px;}
#twitlogo {text-indent:-9999px;background: url(img/twitter.png) no-repeat; display:block;float: right;width: 48px; height:41px;}

#container  {background: #FCFFE8 url(img/bkcontent.gif) repeat-x; color: #343434; padding-top: 20px;}
#container  .line {padding: 0 0 20px 0;}
#content .innerContent {padding-top: 40px;}

#content textarea {width: 450px; height: 100px;}
#content .services {width: 492px; height: 129px;float: left; }
#content .services  p {margin-right:50px;}
#content .services  h4 {margin-top: -2px}
#content  .imgdiv {width: 85px;}
#content  .imgdiv img, #content .imgdiv input, #content .imgdiv textarea {border: 9px solid #575656;}
#content  .blurbdiv  {width: 390px;}


#sidebarright  ul.xoxo {padding: 0 0 20px 20px;}


.innerFooter #in a {text-indent: -9999px; position: absolute; width: 45px; height: 44px; background: url(img/in.gif); top: -8px; right: 0; z-index: 5;}
.innerFooter #twitterfooter a {text-indent: -9999px; position: absolute; width: 45px; height: 44px; background: url(img/twitterfooter.gif); top: -8px; right: 52px; z-index: 8;}

/* PAGE D'ACCUEIL
---------------------------------------*/

#bienvenue {position: absolute; top: -230px; left: 0; width: 400px;}
#bienvenue h2 {font-size: 28px; line-height: 32px; color: white; margin-bottom: 0;}
#bienvenue  h2 span.bigger {display: block; font-size: 118%; }
#bienvenue p {color: white; font-size: 15px;}
.home h1,.home #sloganContainer {display: none;}
.home #header {height: 250px; background: url(img/home-bk-header.jpg) repeat-x; }
.home #header .bkHeader {width: 1284px;  background: url(img/home-header.jpg) no-repeat; margin:0 auto; height: 250px;}
.home  .innerContent {padding-top: 17px;}
.home  #post-72 {position: absolute; top: 170px;left: 520px;}
.home  #post-74 {position: absolute; top: 297px;left: 520px;}
#mac {position: absolute; top: -270px; left: 420px; height: 472px; width: 637px; background: url(img/mac.png) no-repeat; z-index:10; }
#apropos {padding: 60px 0 10px; 0; background: url(img/separator.jpg) no-repeat; }
#apropos h3 {font-size: 24px; margin-bottom: 10px; letter-spacing: -1pt;}

#soumission {display:block;position:absolute;top: -70px; left: 620px; height: 272px; width: 437px;z-index:20;  }
#soumission span {display:none;}


/* CARROUSSEL APROPOS
-----------------------*/	
#apropos  .slides {
	border: 9px solid #575656; 
	width:165px;
	height:165px;
	position:relative;
	float: left; 
	margin: 0 15px 10px 0;
	overflow:hidden;
	clear:both;
}
 
#apropos .slides div {
	float:left;
	display:block;
	background:#000000;
	color: #FFFFFF;
	width:165px;
	height:165px;
}
 
#apropos .slides .slideContainer {
	width:20000em;
	position:absolute;
	clear:both;
	margin:0;
	padding:0;
}

/* SERVICES
---------------------------------------*/
.page-id-4 .innerContent{padding-top: 20px}
.page-id-4 #services-menu {width: 255px; height: 400px; background: url(img/services-menu-bk.png) no-repeat left top; margin-left: 0;}
.page-id-4 #services-menu li a{padding: 8px 0 0 12px; text-decoration: none;
	display:block; height: 39px;background: url(img/services-menu-item-bk.jpg) no-repeat 2px 0; color: white;}
.page-id-4 #services-menu li a:hover{text-decoration: none;}	
.page-id-4 .post{width: 700px}


#footer {height: 364px; background: url(img/bk-footer.gif) repeat-x; color:#73746E; font-size: 11px;  z-index: 15px;}
#footer h3 { background: url(img/footer-title.png) no-repeat; height: 19px; 
	margin-bottom: 32px; line-height: 1; width: 202px; text-indent:-9999px;}
#footer  h4 {font-size: 13px; margin: 0; line-height: 1; color: #FFFFFF;}
#footer  p {margin: 10px 0 0 0; }
#footer  p #logoCanada {position: relative; top: -10px;}
#footer  a {color: white}
#footer  a:hover {color: #9a9931; text-decoration: none;}
#footer  .innerFooter { background: url(img/footer-logo-hekka-top.gif) no-repeat; }
#footer  .imgdiv {width: 85px;}
#footer  .imgdiv img {border: 8px solid #575656;}
#footer  .blurbdiv  {width: 202px;}
#footer  .copyright {padding-top: 70px;  background: url(img/footer-logo-hekka-bottom.png) no-repeat bottom right;}
#footer  .copyright  a {color: #9a9931;}

/* PORTFOLIO */

h3.category  {clear: both; margin-bottom: 15px; color: #2f2f2d; font-size: 24px;letter-spacing: -1pt;}

.fiche { width: 25%; height: 125px; margin:10px 0 20px 0; 
		float:left; position: relative;}

			.boxgrid{ width: 200px; height: 125px; background:#545B2D; 
				border: solid 9px #575656; overflow: hidden; position: relative; }
			
				.new{ 
					position: absolute; 
					top: 16px; 
					left: -7px; 
					background: transparent url(img/nouveau.png) no-repeat top left; 
					height:33px;
					width: 79px;
					z-index: 10;
			}			
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
					z-index: 1;
				}
				.boxgrid p{ 
					padding: 0 10px; 
					font-weight:bold; 
					font-size: 10px; margin-top: 5px; color: #FFFFFF;
				}
				.boxgrid p a { 
					color: #FFFFFF;
				}				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 60px; 
				width: 100%; 
				background:#545B2D; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
			
			.page-id-6 #content #portfolio h3.captiontitle {color: white; margin: 5px 0 0 8px;font-size: 15px;}
 				.captionfull .boxcaption {
 					top: 130px;
 					left: 0;
					
 				}
 				.caption .boxcaption {
 					top: 125px;
 					left: 0;z-index: 100;
 				}
				 .boxcaption p {}

/* CARROUSSEL 
-----------------------*/				 
				 
 #slideshow {
	width:408px;
	height:217px;
	left: 110px; top: 54px;
	position:relative;
	overflow:hidden;
	clear:both;
}
 
#slideshow div {
	float:left;
	display:block;
	background:#000000;
	color: #FFFFFF;
	width:408px;
	height:217px;
}
 
#slideshow #slidesContainer {
	width:20000em;
	position:absolute;
	clear:both;
	margin:0;
	padding:0;
}


/** 
 * Slideshow navigation.
 */
.control { display:block;height:217px;text-indent:-10000px;
	position:absolute;cursor: pointer;}
#leftControl { width:90px;�top:0; left:-10px;
  background:transparent url(img/control_left.png) no-repeat 0 60px;}
#rightControl { width:55px; top:0;right:37px;
   background:transparent url(img/control_right.png) no-repeat 0 60px;}
.page-id-13 #leftControl {left:0; display: none;}
.page-id-13 #rightControl {right:45px;  display: none;}
.page-id-13 #mac {background: url(img/mac_cms.png) no-repeat; }


/* CONTACT 
-----------------------*/
#leftContact, #rightContact {width:49%; float:left; padding-bottom:30px;padding-top:0px;}
#rightContact .imgdiv {width:auto;}
#rightContact textarea{width:434px; height:125px;}
#leftContact ul li {line-height:21px;}
#rightContact p {line-height:18px;}
#rightContact label {font-weight:bolder; line-height:25px;}
#rightContact .contact-name, 
#rightContact .contact-email, 
#rightContact .contact-message {float:left; margin-bottom:18px;margin-top:5px;}
#rightContact .contact-name input{width:235px; margin-right:18px;}
#rightContact .contact-email input {width:165px;}
#leftContact ul {float:left; margin-bottom:18px; margin-right:18px;}
#rightContact .contact-submit {float:right;margin-right:18px;}
#rightContact .contact-submit input {height: 29px; width: 99px; background: url(img/envoyer.gif ) no-repeat; padding: 0; margin: 0; border: none; text-indent: -1000px}
#rightContact div.wpcf7-response-output {border: none;}
#rightContact .contact-message {position: relative; top: -7px;}



#rightContact span.wpcf7-not-valid-tip {
	position: absolute;
	top: 25px;
	left: 0;
	z-index: 100;
	background: transparent;
	border:none;
	font-size: 10pt;
	width: 280px;
	padding: 2px;
	color: #FF0000;
}





/* HEKKA CMS 
-----------------------*/
.page-id-13 .leftcms {padding-top: 0px; float: left; width: 451px; height: 450px; /*background: url(img/maccms.jpg ) 0 48px no-repeat;*/}
.page-id-13 .rightcms { padding-top: 0px; float: right; width: 450px;}
.page-id-13 h3 {margin-bottom: 20px; font-size: 18px;}
.page-id-13  label {font-weight:bolder; line-height:25px;}
.page-id-13 .login input{width: 230px; border: 8px solid #565656; margin-right: 19px; position: relative; z-index: 10;}
.page-id-13 .password  input{width: 165px; border: 8px solid #565656;}
.page-id-13 #soummettre input {clear:both; width: 183px; height: 44px; background: url(img/connexion.jpg ) no-repeat; 
	border: none; padding: 0; text-indent: -9999px; cursor: pointer;}
.page-id-13 #soummettre a {margin-left: 10px; text-decoration: underline; position: relative; top: 11px;}
.page-id-13 #soummettre a:hover {text-decoration: none;}
.page-id-13 #cms {position: relative;}
.page-id-13 #mac {position: absolute;top: -35px; left: -89px; height: 472px; z-index: 1;	width: 637px; background: url(img/mac_cms.png) no-repeat;  }

/* HEKKA CMS 
-----------------------*/
#hekkamail {position:relative; top: -20px;}
.page-id-985 .mailleft {padding-top: 0px; float: left; width: 405px; height: 430px; background: url(img/hekkamail-bk.jpg ) no-repeat;}
.page-id-985 .mailright { padding-top: 20px; float: right; width: 550px;}
.page-id-985  label {font-weight:bolder; line-height:25px;}
.page-id-985 .login input{width: 230px; border: 8px solid #565656; margin-right: 19px; position: relative; z-index: 10;}
.page-id-985 .password  input{width: 165px; border: 8px solid #565656;}
.page-id-985 #soummettre input {clear:both; width: 183px; height: 44px; background: url(img/connexion.png ) no-repeat; 
	border: none; padding: 0; text-indent: -9999px; cursor: pointer;}
.page-id-985 #soummettre a {margin-left: 10px; text-decoration: underline; position: relative; top: 11px;}
.page-id-985 #soummettre a:hover {text-decoration: none;}
/* TEMOINAGE 
-----------------------*/
.temoignage .imgdiv, .temoignage .tem-desc {float:left;}
.temoignage .tem-desc { width:750px; margin-left:110px;}
.temoignage .tem-name { font-size:26px; line-height:27px;}
.temoignage small strong, .page-id-9  small strong {color:#666520;}
.temoignage small, .temoignage p {line-height:18px;}
.page-id-9  img {border: 8px solid #565656}


.postimg  img {border: 8px solid #565656}

body.page-id-2 #content .services .imgdiv img  {border: none;}

/* HEKKA PARTAGE
---------------------------------*/

body.page-id-15 #partager {background: url(img/partage.jpg) -20px -48px no-repeat; width: 365px; height: 374px; float: left;}
body.page-id-15 iframe#shareframe {height: 470px; width: 592px; float:right;}
#shareframe #Hipload-Final  #fileInput {width: 300px;}


/* SIDEBAR
-----------------------*/
#sidebar {position: relative; margin-top: 60px;}
#sidebar ul li { }
#sidebar ul li h2.widgettitle {width: 202px; font-size: 16px;text-transform: uppercase; padding-left: 6px; height:80px; margin: 0; background:#FCFFE8 url(img/sidebar-top.jpg) no-repeat 0 17px;position: relative;z-index:1 }
#sidebar ul  ul {width: 207px; background:#666815 url(img/sidebar-bottom.gif) no-repeat left bottom; padding-bottom: 6px; top: -10px; position: relative; z-index:10 }
#sidebar ul ul li {background: transparent; }
#sidebar ul ul li a{color: white; display:block;width: 160px; background:url(img/sidebar-bullet.gif) no-repeat 18px 5px; padding-left: 32px; font-size:12px;position: relative; top:-29px;}

.postimg {width:170px}
.postdiv {width:510px}
.postdiv h2 {margin-bottom: 0; padding: 0; line-height: 1;}

/* BLOG
-----------------------*/
.blog  #content, .single  #content, .blogpage  #content {padding-top: 0;}
.blog  #content .innerContent, 
.single  #content .innerContent, 
.blogpage  #content .innerContent{padding-top: 0; margin-top: -10px;}
.blog  #content .innerContent .postdiv h2,
.blogpage  #content .innerContent .postdiv h2 {padding-top: 10px; font-size: 24px; letter-spacing: -1pt;}
.blog  #content .innerContent .postdiv h2 a,
.blogpage #content .innerContent .postdiv h2 a {color: #000000;}
.blog  #content .innerContent  small.date,
.blogpage #content .innerContent small.date {color: #646C1F; display: block; padding-bottom: 25px;}



.single #singlemeta {clear: both; font-size: 12px; margin-bottom: 10px; text-transform: uppercase;}
.single h2 {font-size: 24px; letter-spacing: -1pt; margin-bottom: 15px;}
.single .comment-meta p {color: #646C1F; }

li.comment p {font-style: italic; color: #8E9631;}
li.comment p.commentaire-auteur {text-transform: uppercase;  margin-bottom: 40px; color: black; font-size: 11px;}
form#commentform textarea {width: 628px; height: 130px; padding: 5px; border: 8px solid #575656; }
form#commentform input#submit {background:url(img/comments-submit.jpg) no-repeat; 
	width:103px; height: 34px; text-indent: -9999px; padding: 0; border: none; position:relative; top:27px; left: 10px;}
form#commentform p.forminput {float: left; width: 250px; margin-right: 20px; }
form#commentform p.input-auteur {padding-bottom: 50px; }
form#commentform p.input-auteur input {width: 234px; border: 8px solid #575656;}
form#commentform p.input-courriel input {width: 234px; border: 8px solid #575656; }
form#commentform p.input-submit {width: 100px; border: none; margin-right: 0;}
form#commentform p.input-comment {padding-top: 0px;}
form#commentform label {font-weight: bold; display: block;}
form#commentform p.input-auteur label  {padding-bottom: 5px;}
form#commentform p.input-courriel label  {padding-bottom: 5px; }
form#commentform p.input-comment label {margin-bottom: -10px;}

.navigation {padding: 20px 0;}
.alignleft {float: left;}
.alignright {float: right;}

/* SOUMISSION
-----------------------*/
#post-1097 {background:url(img/soumission.png) no-repeat; height: 500px;padding-top: 12px;}