/* -- Welcome on board! -- */

body {
	background: #241914 url(/images/layout/wood.jpg);
	color: #FFF;
	font-size: 16px;
	font-family: Georgia, "Times New Roman", Times, LaPoliceDeLaMortQuiTueMaisQuiNExistePas, serif;
}

#page {
	height: 2030px;
	background: url(/images/layout/wave.png) no-repeat center top;
}

#container {
	position: relative;
	width: 980px;
	margin: 0 auto;
}

/* -- Linkz -- */

a:hover,
a:focus {
	text-decoration: none;
}

/* -- The P&K historic logo -- */

#logo {
	position: absolute;
	top: 20px; left: 10px;
	width: 340px; height: 70px;
	background: url(/images/layout/logo_pepperkoffee.png);
	text-indent: -9999em;
}

/* -- The Prospect Scotcher (tm) -- */

#accroche {
	position: absolute;
	top: 130px; left: 10px;
}

#accroche-1 {
	float: left;
	margin-left: -4px;
	padding: 5px 10px;
	display: inline;
	font-size: 28px;
	background: url(/images/layout/bg-black-trans-55-trans.png);
	letter-spacing: -1px;
}

#accroche-2,
.escalier-stylistique {
	float: left;
		clear: left;
			margin-top: 3px;
				margin-left: -2px;
					padding: 5px 10px;
						display: inline;
							font-size: 22px;
								background: url(/images/layout/bg-black-trans-35-trans.png);
									letter-spacing: -1px;
}

#accroche-3 {
	float: left;
	clear: left;
	margin-top: 3px;
	padding: 5px 10px;
	display: inline;
	font-size: 16px;
	background: url(/images/layout/bg-white-trans-25-trans.png);
	letter-spacing: -1px;
}

a#goto-contact {
	float: left;
	clear: left;
	margin-top: 6px;
	background: url(/images/layout/bg-white-trans-80-trans.png);
	letter-spacing: -1px;
	text-decoration: none;
}
a#goto-contact:hover,
a#goto-contact:focus {
	background: #FFF url(/images/layout/bg-white-trans-80-trans.png); /* "Wow, what a #FFFUCKin ass!", wispered the geek */
}

a#goto-contact span {
	float: left;
	display: block;
	margin: 5px 10px;
	border-bottom: 1px solid #369;
	font-size: 28px;
	color: #111;
}

/* -- What we do (we do it better than u) -- */

#what {
	position: absolute;
	top: 370px; left: 10px;
}

#what h1 {
	float: left;
	padding: 5px 20px 5px 10px;
	font-size: 26px;
	color: #333;
	letter-spacing: -1px;
	background-color: #FFB400;
}

#what ul li {
	float: left;
	clear: left;
	margin-top: 3px;
}

#what ul li#what-1 { margin-left: 30px; }
#what ul li#what-2 { margin-left: 20px; }
#what ul li#what-3 { margin-left: 33px; }
#what ul li#what-4 { margin-left: 26px; }

#what ul li strong {
	float: left;
	padding: 2px 5px;
}

#what ul li#what-1 strong { background-color: #916E1B; }
#what ul li#what-2 strong { background-color: #7F5D0A; }
#what ul li#what-3 strong { background-color: #966A00; }
#what ul li#what-4 strong { background-color: #BE8D18; }
#what ul li#what-5 strong { background-color: #BF8A0B; }

#what ul li .with-what {
	float: left;
	margin-top: 4px;
	padding: 2px 5px;
	background-color: #2F1e15;
	font-size: 12px;
}

/* -- (Beauty and the) Geek -- */

#geek {
	position: absolute;
	top: 350px; left: 320px;
}

#geek h2 {
	float: left;
	display: inline;
	padding: 5px 10px;
	background-color: #A2FF00;
	font-size: 20px;
	color: #333;
}

#geek ul li {
	float: left;
	clear: left;
	margin-top: 3px;
	padding: 2px 5px;
	font-size: 12px;
}

#geek ul li#geek-1 { margin-left: 30px; background-color: #76AB19; }
#geek ul li#geek-2 { margin-left: 20px; background-color: #588805; }
#geek ul li#geek-3 { margin-left: 25px; background-color: #679714; }

/* -- P&K World Projects -- */

#projects {
	position: absolute;
	top: 650px; left: 0;
	width: 980px;
	background: url(/images/layout/bg_products_main.png) 0 47px no-repeat;
}

#projects h1 {
	float: left;
	margin-left: 10px;
	padding: 8px 10px 3px;
	font-size: 40px;
	color: #FFF;
	letter-spacing: -2px;
	background-color: #7A180d;
}

#projects #projects-contents {
	top: -10px; left: 10px;
}

ul#projects-menu {
	float: left;
}

ul#projects-menu li {
	float: left;
	margin-top: 12px;
	margin-left: 1px;
}

ul#projects-menu li a {
	padding: 3px 20px 3px 10px;
	color: #FFF;
	font-size: 35px;
	letter-spacing: -1px;
	text-decoration: none;
	background-color: #874113;
}
ul#projects-menu li a:hover,
ul#projects-menu li a.activeSlide {
	background-color: #5F3012; 
}

ul#projects-menu li a span { display: none; }

.project {
	position: absolute;
	top: 46px;
	left: 10px;
	width: 940px; height: 420px;
	padding: 10px;
}

.project-right {
	position: absolute;
	top: 40px; left: 610px;
	width: 330px;
}

.project h2 {
	font-size: 35px;
	letter-spacing: -1px;
}

.project p.summary {
	width: 330px;
	margin: 10px 0 20px;
	font-size: 14px;
}

.project a.project-link {
	padding: 3px 5px;
	font-size: 14px;
	color: #6699CC;
	background-color: #2C3B47;
	font-family: Arial, Helvetica, ILoveMichaelHuletFont, sans-serif;
	text-decoration: none;
}

.project ul.project-facts {
	margin-top: 20px;
	font-size: 14px;
}

.project ul.project-facts li {
	list-style-type: square;
	list-style-position: inside;
}

.project .project-tags {
	margin-top: 20px;
	padding-left: 20px;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FDBF90;
	background: url(/images/layout/tag.png) no-repeat center left;
}

.project img {
	display: block;
	margin-top: 30px; margin-left: 30px;
	width: 548px; height: 342px;
	border: 1px solid #FFF;
	color: #999;
}

/* -- Twitter (those so beautifuuul bird sounds on a sunny morning that makes you feel soooo connected but ur sooo alone) -- */

#twitter {
	position: absolute;
	top: 20px; left: 550px;
	width: 411px; height: 90px;
	background: url(/images/layout/bg_tweet.png);
	font-size: .85em;
	color: #665951;
}

#twitter_update_list {
	font-size: 1.1em;
	margin: 15px 20px 15px 30px;
	color: #333;
}

#twitter_update_list a {
	color: #036;
	text-decoration: none;
}

#twitter_update_list a.tweet-time {
	display: block;
}

a#all-tweets-link {
	position: absolute;
	bottom: 0; right: 5px;
	width: 40px; height: 25px;
	text-indent: -9999em;
}

/* -- The P&K Portfolio -- */

#portfolio {
	position: absolute;
	top: 140px; left: 530px;
	width: 460px; height: 460px;
	background: url(/images/layout/pictures_frames.png);
	text-indent: -9999em;
}

#portfolio img {
	border: 1px solid #999;
}
#portfolio .slideshow {
	position: absolute;
	top: 61px; left: 68px;
}

#portfolio .slideshow img.screenshot {
	cursor: pointer;
}

#portfolio .slideshow .name {
	position: absolute;
	top: 61px; left: 69px;
	display: block;
	background: url(/images/bg-black-trans.png);
	color: #fff;
	text-indent: 1em;
	width: 337px;
	padding: 5px;
	font-size: 1.3em;
}

#picture-switcher a {
	position: absolute;
	top: 366px;
	display: block;
	width: 26px; height: 36px;
	text-indent: -9999em;
}

#picture-switcher a#previous-picture { left: 176px; }
#picture-switcher a#next-picture { left: 213px; }

.portfolio-content {
	background: #000;
	padding: 10px;
	color: #EEE;
	font-size: .9em;
}

.portfolio-content h2 {
	font-size: 1.4em;
	margin-bottom: 20px;
}

.portfolio-content .infos {
	float: left;
	width: 250px;
}

.portfolio-content .description {
	margin-bottom: 20px;
}

.portfolio-content .description p { 
	margin-bottom: 7px;
	font-size: .9em;
}

.portfolio-content .link a {
	padding: 3px 5px;
	font-size: 14px;
	color: #6699CC;
	background-color: #2C3B47;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
}

.portfolio-content .keys {
	margin-top: 20px;
	padding-left: 20px;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FDBF90;
	background: url(/images/layout/tag.png) no-repeat center left;
	margin-top: 20px;
}

.portfolio-content .pictures {
	float: left;
	width: 360px;
}

.portfolio-content .pictures img {
	padding:1px;
	border: 1px solid #888;
}

.portfolio-content .pictures .seconds {
	margin-top: 20px;
}

.qtip {
	font-family: Arial,sans-serif;
}

.qtip-button {
	display: block;
	width: 24px; height: 24px;
	background: url(/images/layout/lv_close.png);
	text-indent: -9999em;
}

#ginette-la-pinette {
	position: absolute;
	top: 61px; left: 275px;
	width: 89px; height: 121px;
	background: url(/images/layout/ginette-la-pinette.png);
	z-index: 999;
}

/* References */

#references {
	position: absolute;
	top: 1275px;
	padding-top: 10px;
}

#references h1 {
	padding: 5px 20px;
	display: inline;
	background-color: #9E4C19;
	font-size: 35px;
	letter-spacing: -1px;
}

#references ul {
	margin-top: -35px;
	margin-left: 15px;
	width: 310px; height: 220px;
	background: url(/images/layout/postit.png);
	text-indent: -9999em;
}

#references ul li {
	float: left;
	margin-top: 50px;
	width: 80px; height: 100px;
}

#references ul li.laposte {
	margin-left: 27px;
}

/* Networks */

#networks {
	position: absolute;
	top: 1530px;
}

#networks h1 {	
	padding: 5px 20px;
	display: inline;
	background-color: #76AB19;
	font-size: 35px;
	letter-spacing: -1px;
}

#networks ul {
	margin-top: 20px;
	margin-left: 20px;
}

#networks ul li a {
	display: block;
	margin-bottom: 5px;
	padding-left: 25px;
	color: #DDDE86;
	background-repeat: no-repeat;
	background-position: center left;
	text-decoration: none;
	font-size: 18px;
}

#networks ul li a:hover,
#networks ul li a:focus {
	color: #FFF;
}

#networks ul li#facebook-network a { background-image: url(/images/layout/icon_facebook.png); }
#networks ul li#twitter-network a { background-image: url(/images/layout/icon_twitter.png); }
#networks ul li#delicious-network a { background-image: url(/images/layout/icon_delicious.png); }
#networks ul li#linkedin-network a { background-image: url(/images/layout/icon_linkedin.png); }

/* Back to top button */

#backtop {
	position: absolute;
	top: 1830px;
}

#backtop a {
	display: block;
	width: 160px; height: 42px;
	background: url(/images/layout/back_top.png);
	text-indent: -9999em;
}
/* Contact */

#contact {
	position: absolute;
	top: 1275px; left: 390px;
	padding-top: 10px;
	width: 560px;
}

#contact h1 {
	float: left;
	display: block;
	margin-left: 20px;
	padding: 5px 20px;
	background-color: #333;
	font-size: 35px;
}

#contact-form {
	clear: left;
	width: 520px; height: 320px;
	padding: 20px;
	background: #FFF url(/images/layout/bg_letter.png) no-repeat top right;
}

#contact-form input#ipt-name {
	position: absolute;
	top: 80px; right: 20px;
	width: 200px;
	padding: 5px;
	border: 1px solid #999;
	color: #666;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

#contact-form input#ipt-email {
	position: absolute;
	top: 115px; right: 20px;
	width: 200px;
	padding: 5px;
	border: 1px solid #999;
	color: #666;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

#contact-form textarea {
	position: absolute;
	top: 150px; left: 20px;
	width: 508px; height: 155px;
	padding: 5px;
	border: 1px solid #999;
	color: #666;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

#contact-form input.button {
	position: absolute;
	top: 325px; right: 20px;
	font-size: 16px;
	width: 110px; height: 40px;
	background: url(/images/layout/send_button.png);
	border: 0;
	padding: 0;
	text-indent: -9999em;
	cursor: pointer;
}


#destinataire {
	position: absolute;
	top: 80px; left: 20px;
	font-size: 12px;
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
}

#destinataire strong {
	font-weight: bold !important;
}

#destinataire a { color: #333; }

#loadBar,
#success {
	position: absolute;
	top: 190px; left: 85px;
	width: 390px;
	color: #333;
	font-size: .8em;
	z-index: 666;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

#loadBar img {
	display: block;
}

#success {
	top: 150px;
	background: url(/images/layout/mail_sent-trans.png) no-repeat center top;
	padding-top: 135px;
	color: #4A9A09;
	font-weight: bold;
}

#pk-phone {
	position: absolute;
	top: 1660px; left: 230px;
	width: 250px; height: 310px;
	background: url(/images/layout/pk_phone.png);
	text-indent: -9999em;
}

#letter {
	position: absolute;
	top: 1649px; left: 370px;
	width: 600px; height: 330px;
	background: url(/images/layout/envelope.png);
}

#letter #stamp {
	position: absolute;
	top: 80px; left: 500px;
	width: 80px; height: 90px;
	background: url(/images/layout/baudouin-le-bedouin.png);
	z-index: 998;
}

#letter #letter-adress {
	margin-top: 110px;
	margin-left: auto;
	margin-right: auto;
	width: 233px; height: 131px;
	background: url(/images/layout/address-crupet.png);
	text-indent: -9999em;
	
	position: absolute;
	top: 0; left: 180px;
}

#letter #letter-warning {
	position: absolute;
	top: 35px; left: 0;
	width: 600px;
	font-size: .85em;
	color: #0C324F;
	text-align: center;
}

/* Footer */

#footer {
	position: absolute;
	top: 1930px;
	height: 110px;
	width: 100%;
}

#footer-top {
	width: 100%; height: 10px;
	background: url(/images/layout/top_footer.png);
}

#footer-main {
	background-color: #111;
}

#footer-inner {
	width: 980px; height: 48px;
	margin: 0 auto;
	padding: 26px 0;
	text-align: center;
	font-size: .85em;
	font-size: 13px;
	line-height: 16px;
	color: #999;
	font-family: Arial, Helvetica, sans-serif;
}

#footer a {
	color: #69C;
}

#footer a.vinch-link {
	color: #999;
	text-decoration: none;
}

/* -- So useful (for humans and humanoids only) -- */

.no-display {
	position: absolute;
	top: -9999em;
}
.clearer {
	clear: both;
}