/**********************************************
 *
 *  Site Name: Portfolio
 *  Author: Julien Winant
 *  Author URL: http://www.harkor.be
 *
************************************/

.clear {
	clear: both;
}

#light {
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/light.png) no-repeat center -380px;
	width: 100%;
	height: 100%;
	z-index: -1px;
}

body {
	background: #09203b !important;
	font-family: "Helvetica Neue", "Helvetica", 'Arial', 'sans-serif';
	color: #fff;
	overflow-y: scroll;
}

span.bold {
	font-weight: bold;
}

#intro #container {
	width: 500px;
	margin: 120px auto;
	position: relative;
	z-index: 1;
}

#intro #container h1 a {
	display: block;
	margin: 0 auto;
	width: 121px;
	height: 109px;
	background: url(../images/logo.png) no-repeat;
	text-indent: -9999px;
	margin-bottom: 35px;
}

#intro #container h2 {
	text-align: center;
	position: relative;
	margin: 0 auto 35px;
}

#intro #container h2 span {
	display: inline-block;
	font-weight: bold;
	font-size: 28px;
	text-shadow: 0 3px 0 #000;
	position: relative;
	padding: 0 20px;
}

#intro #container h3 {
	font-weight: bold;
	font-size: 16px;
	text-shadow: 0 3px 0 #000;
	text-align: center;
	margin-bottom: 25px;
}

#intro #container p {
	font-size: 14px;
	font-weight: bold;
	font-style: italic;
	text-shadow: 0 3px 0 #000;
	text-align: center;
	margin-bottom: 35px;
}

#intro #container ul#homeNav {
	width: 340px;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 30px;
}

#intro #container ul#homeNav li {
	float: left;
	width: 136px;
	margin-left: 67px;
	height: 38px;
}

#intro #container ul#homeNav li:first-child {
	margin-left: 0;
}

q {
	font-style: italic;
	font-size: 14px;
	text-shadow: 0 3px 0 #000;
	display: block;
	text-align: center;
	line-height: 30px;
	margin-bottom: 10px;
	background: url(../images/bg_quote.png) center 3px no-repeat;
}

cite {
	font-size: 12px;
	display: block;
	text-align: center;
}

#header {
	overflow: hidden;
	position: relative;
	z-index: 3;
	padding: 20px 0 13px;
}

#header h1 {
	width: 121px;
	float: left;
	margin-left: 10px;
}

#header h1 a {
	display: block;
	width: 121px;
	height: 109px;
	background: url(../images/logo.png) center center no-repeat;
	text-indent: -9999px;
}

#header #quote {
	width: 350px;
	margin-top: 25px;
	float: left;
}

#header ul#mainNav {
	float: right;
	width: 346px;
	margin-top: 40px;
	margin-right: 10px;
}

#header ul#mainNav li {
	float: left;
	margin-left: 70px;
}

#header ul#mainNav li:first-child {
	margin-left: 0;
}

ul#social {
	display: none;
	position: absolute;
	z-index: 3;
	overflow: hidden;
	background: url(../images/bg_social.png) no-repeat;
	width: 187px;
	height: 41px;
	right: 0;
	top: -4px;
}

#intro.nojs ul#social {
	display: block;
	top: 15px;
	right: 15px;
}

ul#social li {
	float: left;
	margin-left: 3px;
	margin-top: 4px;
}

ul#social li:first-child {
	margin-left: 11px;
}

ul#social li a {
	display: block;
	text-indent: -9999px;
	width: 30px;
	height: 30px;
	background: #fff;
	border-radius: 3px;
	border: 1px solid #000;
}

ul#social li.twitter a {
	background: url(../images/twitter_icon.png) center center no-repeat;
}

ul#social li.runkeeper a {
	background: url(../images/runkeeper_icon.png) center center no-repeat;
}

ul#social li.facebook a {
	background: url(../images/facebook_icon.png) center center no-repeat;
}

ul#social li.foursquare a {
	background: url(../images/foursquare_icon.png) center center no-repeat;
}

ul#social li.gplus a {
	background: url(../images/gplus_icon.png) center center no-repeat;
}

#arrow_content {
	height: 7px;
	width: 100%;
	background: url(../images/bg_arrow_content.png) repeat-x;
}

#bg_content {
	position: absolute;
	width: 100%;
	top: 200px;
	background: #fff url(../images/bg_content.png);
}

#content {
	background: #fff url(../images/bg_content.png);
	color: #000;
	font-size: 14px;
	line-height: 24px;
	overflow: hidden;
	padding-bottom: 100px;
	position: relative;
	z-index: 3;
}

#content > div,
#header > div {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

#content ul {
	list-style-type: disc;
	list-style-position: inside;
}

#content h2 {
	color: #374a62;
	font-size: 28px;
	font-weight: bold;
	text-shadow: 0 -3px 0 #fff;
	margin: 60px 10px 0px;
}

#content h3 {
	font-weight: bold;
	font-size: 16px;
	color: #374a62;
	margin: 20px 0 10px;
}

#content .col_2.engage h4 {
	font-weight: bold;
	font-size: 16px;
	color: #001c3c;
	float: right;
	width: 140px;
	line-height: 60px;
	position: relative;
	margin-top: 10px;
}

#content .col_2 {
	width: 460px;
	margin: 10px;
	float: left;
	position: relative;
}

.col_3 {
	width: 320px;
	float: left;
}

#footer .col_3 h4 {
	text-align: center;
}

#content .col_2 ul.col_4 {
	width: 230px;
	float: left;
}

#content .col_2.engage p,
#content .col_2.processus p {
	margin-bottom: 10px;
	clear: both;
}

p.asterisk {
	font-style: italic;
	font-size: 12px;
	position: relative;
	top: 10px;
}

#content .col_2.engage ul,
#content .col_2.processus ul {
	list-style-type: none;
	list-style-type: inside;
}

#content .col_2.engage ul {
	width: 310px;
	margin-right: 10px;
	border-top: 1px solid #001c3c;
	height: 30px;
	margin: 40px 0 10px;
	float: left;
}

#content .col_2.engage ul li {
	width: 59px;
	height: 60px;
	float: left;
	background: url(../images/bg_circle.png) center center no-repeat;
	position: relative;
	top: -30px;
	margin-right: 19px;
	margin-left: -1px;
	cursor: help;
}

#content .col_2.engage ul li span {
	width: 59px;
	height: 60px;
	background-position: center center;
	display: block;
}

#content .col_2.engage ul li.rss span {
	background-image: url(../images/rss_icon.png);
}

#content .col_2.engage ul li.agenda span {
	background-image: url(../images/agenda_icon.png);
}

#content .col_2.engage ul li.car span {
	background-image: url(../images/car_icon.png);
}

#content .col_2.engage ul li.informatique span {
	background-image: url(../images/informatique_icon.png);
}

#content .col_2.engage ul li.more span {
	background-image: url(../images/more_icon.png);
}

#content .col_2.engage ul li.pizza span {
	background-image: url(../images/pizza_icon.png);
}

#content .col_2.engage ul li.beer span {
	background-image: url(../images/beer_icon.png);
}

#content .col_2.engage ul li.run span {
	background-image: url(../images/run_icon.png);
}

#content .col_2.engage ul li.ikea span {
	background-image: url(../images/ikea_icon.png);
}

#content .col_2.processus ul.illustration {
	height: 80px;
	margin-top: 22px;
	margin-bottom: 20px;
}

#content .col_2.processus ul.illustration li {
	float: left;
	width: 65px;
	height: 60px;
	background: url(../images/bg_circle_process.png) center center no-repeat;
	margin-right: 20px;
	text-align: center;
	position: relative;
	cursor: help;
}

#content .col_2.processus ul.illustration li.online {
	background: url(../images/bg_circle.png) left center no-repeat;
}

#content .col_2.processus ul.illustration li span.number {
	position: relative;
	top: 60px;
	font-weight: bold;
	color: #001c3c;
}

#content .col_2.processus ul.illustration li span.icon {
	display: block;
	width: 60px;
	height: 60px;
	background-repeat: no-repeat;
	position: absolute;
}

#content .col_2.processus ul.illustration li.archi span.icon {
	background-image: url(../images/arbo_icon.png)
}

#content .col_2.processus ul.illustration li.mockups span.icon {
	background-image: url(../images/mockups_icon.png)
}

#content .col_2.processus ul.illustration li.design span.icon {
	background-image: url(../images/design_icon.png)
}

#content .col_2.processus ul.illustration li.dev span.icon {
	background-image: url(../images/dev_icon.png)
}

#content .col_2.processus ul.illustration li.online span.icon {
	background-image: url(../images/online_icon.png)
}

#content .col_2 a.big_blue {
	margin-top: 15px;
}

#content #list {
	margin-top: 20px;
}

#content #list li {
	float: left;
	width: 220px;
	height: 142px;
	list-style: none;
	margin: 10px;
	overflow: hidden;
	position: relative;
	border-radius: 5px;
}

#content #list li,
#content #list li img {
	border-radius: 5px;
}

#content .workDetail h3 {
	position: relative;
	display: inline-block;
}

#content .workDetail h3 img {
	position: absolute;
	top: -7px;
	right: -15px;
}

#content .workDetail ul {
	list-style-type: none;
}

#content #list li img.perso_icon {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	border-radius: 0 !important;
}

#content #list li a.detail_icon,
#content #list li a.online_icon {
	display: none;
	position: absolute;
	top: 10px;
	z-index: 9999;
	width: 29px;
	height: 29px;
	text-indent: -9999px;
}

#content #list li a.detail_icon {
	left: 10px;
	background: url(../images/detail_icon.png) no-repeat center center;
}

#content #list li a.online_icon {
	left: 50px;
	background: url(../images/link_icon.png) no-repeat center center;
}

#content #list li:hover a.detail_icon,
#content #list li:hover a.online_icon {
	display: block;
	z-index: 999;
}

#content #list li span {
	position: absolute;
	top: -220px;
	display: block;
	margin: 0 auto;
	text-align: center;
	border-radius: 5px;
	width: 100%;
	line-height: 142px;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	background: #113257 url(../images/big_circle02.png) center center no-repeat;
}

.nojs #content #list li a:hover span {
	top: 0;
}

#content #list li a {
	text-decoration: none;
}

#item h2 {
	margin-bottom: 30px;
}

#bg_viewport {
	background: url(../images/monitor.png) 479px 30px no-repeat;
	height: 465px;
}

#viewport {
	overflow: hidden;
	position: relative;
}

#pager, #slider {
	display: none;
}

#monitor {
	width: 471px;
	height: 435px;
/* 	background: url(../images/monitor.png) no-repeat; */
	float: right;
	position: relative;
	top: 20px;
}

#monitor #slider {
	position: absolute;
	width: 427px;
	height: 272px;
	top: 21px;
	left: 22px;
	overflow: hidden; 
}

#monitor #pager {
	position: absolute;
	top: 330px;
	left: 22px;
}

#monitor #pager a {
	display: block;
	width: 18px;
	height: 18px;
	text-indent: -9999px;
	background: #000;
	float: left;
	margin-right: 11px;
	background: url(../images/bgSlide.png) no-repeat;
}

#monitor #pager a:hover {
	background-position: left -18px;
}

#monitor #pager a.activeSlide,
#monitor #pager a:active {
	background-position: left -36px;
}

ul#sub_works_pagination {
	padding: 6px;
	width: 96px;
	height: 30px;
	background: #113257;
	border-radius: 4px;
	list-style-type: none;
	position: absolute;
	right: 12px;
	top: 55px;
}

ul#sub_works_pagination li {
	display: block;
	width: 32px;
	height: 30px;
	float: left;
}

ul#sub_works_pagination li a {
	background: url(../images/bg_pagination.jpg) repeat-x;
	display: block;
	width: 32px;
	height: 30px;
	position: relative;
}

ul#sub_works_pagination li a:hover {
	background-position: 0 -30px;
}

ul#sub_works_pagination li a:active {
	background-position: 0 -60px;
}

ul#sub_works_pagination li a img {
	position: absolute;
}

ul#sub_works_pagination li a.disabled {
	cursor: default !important;
	background: #e4e0e0;
}

ul#sub_works_pagination li a.previous img {
	top: 8px;
	left: 10px;
}

ul#sub_works_pagination li a.listmode img {
	top: 9px;
	left: 9px;
}

ul#sub_works_pagination li a.next img {
	top: 8px;
	left: 13px;
}

ul#sub_works_pagination li a.previous {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	width: 31px;
	border-right: 1px solid #b8bcc3;
}

ul#sub_works_pagination li a.next {
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	width: 31px;
	border-left: 1px solid #b8bcc3;
}

#footer_container {
	width: 960px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	background: url(../images/light.png) center -800px no-repeat;
	height: 150px;
}

#footer_container h4 {
	display: block;
	background: url(../images/bg_circle_footer.png) center top no-repeat;
	position: relative;
	top: -27px;
	padding-top: 64px;
	font-weight: bold;
}

#footer_container h4 span {
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	width: 54px;
	height: 54px;
	margin-left: -27px;
}

#footer a {
	color: #fff;
	text-decoration: none;
}

#footer .section3 a:hover {
	border-bottom: 1px dotted #fff;
}

#footer .section1 h4 span {
	background: url(../images/people_icon.png) center center no-repeat;
}

#footer .section2 h4 span {
	background: url(../images/coordonnees_icon.png) center center no-repeat;
}

#footer .section3 h4 span {
	background: url(../images/gift_icon.png) center center no-repeat;
}

#footer .section2 ul,
#footer .section3 ul {
	margin-top: -3px;
}

#footer .section2 ul li,
#footer .section3 ul li {
	display: block;
	text-align: center;
	font-size: 14px;
	line-height: 24px;
	font-weight: normal;
}

#footer ul#social {
	display: block;
	position: static;
	margin: auto;
	background: none;
	width: 212px;
	margin-top: 2px;
}

#footer ul#social li {
	margin-left: 13px;
}

#footer ul#social li:first-child {
	margin-left: 0;
}

a.big_gray {
	display: inline-block;
	line-height: 30px;
	background: #d4d0d0 url(../images/bg_biggray.jpg) top repeat-x;
	width: 136px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid #8a8a8a;
	box-shadow: 0 3px 0 #6f6f6f;
	cursor: pointer;
	position: relative;
}

a.big_gray:hover {
	background-position: center -40px;
}

a.big_gray:active {
	background-position: center -80px;
	top: 3px;
	box-shadow: none;
}

a.big_blue {
	display: inline-block;
	line-height: 30px;
	background: #d4d0d0 url(../images/bg_bigblue.jpg) top repeat-x;
	width: 136px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 -1px 0 #000;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid #5389c5;
	box-shadow: 0 3px 0 #001c3c;
	cursor: pointer;
	position: relative;
}

a.big_blue:hover {
	background-position: center -40px;
}

a.big_blue:active {
	background-position: center -80px;
	top: 3px;
	box-shadow: none;
}

a.big_blue.cv_button {
	margin-left: 15px;
	position: relative;
}

a.big_blue.cv_button img {
	position: absolute;
	left: 15px;
	top: 50%;
	margin-top: -7px;
}