body {
	background:white url('../img/bg-repeat.jpg') repeat-x top left;
	font-family:arial, sans-serif;
	width:100%;
	height:100%;
}

#page {
	position:relative;
	background:transparent url('../img/bg.jpg') no-repeat top left;
	width:1000px;
	height:623px;
	margin:auto;
}

.clear {
	clear: both;
}

#perso {
	position: absolute;
	overflow: hidden;
	width:309px;
	height:629px;
	top:0px;
	left:54px;
	z-index: 200;
}

#rotate {
	width:309px;
	height:629px;
	position: relative;
}

/********************/
/***** SCROLLER *****/
/********************/

#page #scroller {
	position:absolute;
	top:270px;
	left:445px;
	background:transparent url('../img/scroller.png') no-repeat top left;
	width:420px;
	height:106px;
	color:#969696;
	font-size:12px;
	z-index: 400;
}

#page #scroller #scrollable {
	width:385px;
	height:106px;
	position:relative;
	overflow:hidden;
}

#page #scroller #scrollable #items {
	height:558px;
	position:absolute;
	width:385px;
}

#page #scroller #scrollable #items .item {
	display:block;
	width:353px;
	height:66px;
	padding:20px 16px;
	position: relative;
}

#page #scroller #scrollable #items .item #vcard {
	position: absolute;
	top:18px;
	right:20px;
	cursor: pointer;
}

#page #scroller img {
	vertical-align:middle;
}

#page #scroller ol {
	margin:0px;
}

#page #scroller ol li {
	margin:0 0 5px 0;
	line-height:12px;
}

#page #scroller ul {
	display: block;
	margin:5px 0 0 0;
}

#page #scroller ul li {
	line-height: 50px;
	display: inline-block;
}

#page #scroller #contact a {
	color:#969696;
	text-decoration:none;
}

#page #scroller #contact a:hover {
	text-decoration:underline;
}

/***********************/
/***** CONTROLLERS *****/
/***********************/

#page #scroller #controllers {
	position:absolute;
	top:36px;
	left:395px;
	width:25px;
	height:34px;
	overflow:hidden;
}

#page #scroller #controllers a {
	background-image:url('../img/arrows.png');
	background-color:transparent;
	background-repeat: no-repeat;
	width:25px;
	height:18px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

#page #scroller #controllers a {
	cursor: pointer;
}

#page #scroller #controllers a.disabled {
	cursor: default;
}

#page #scroller #controllers #up,
#page #scroller #controllers #up.disabled:hover {
	background-position:0px 0px;	
}

#page #scroller #controllers #up:hover {
	background-position:-25px 0px;
}

#page #scroller #controllers #down,
#page #scroller #controllers #down.disabled:hover {
	background-position:0px -18px;
}

#page #scroller #controllers #down:hover {
	background-position:-25px -18px;
}

/**************/
/** PARTNERS **/
/**************/

#partners img {
	display:block;
}

.partners {
	display:block;
	height:50px;
	background-color: transparent;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow:hidden;
}

#seb {
	width:115px;
	background-image: url('../img/seb.jpg');
	background-position: 0px 0px;
}

#seb:hover,
#seb.hover {
	background-position: 0px -50px;
}

#tim {
	width:110px;
	background-image: url('../img/tim.jpg');
	background-position: 0px 0px; 
}

#tim:hover,
#tim.hover {
	background-position: 0px -50px;
}

#romain {
	width:110px;
	background-image: url('../img/romain.jpg');
	background-position: 0px 0px;
}

#romain:hover,
#romain.hover {
	background-position: 0px -50px;
}

/***************/
/*** SOCIALS ***/
/***************/

.bubbles {
	height:51px;
	overflow:hidden;
	background-image:url('../img/social.png');
	background-repeat:no-repeat;
	background-color:transparent;
	text-indent:-9999px;
	cursor: pointer;
	display:block;
}

#rss {
	background-position:0px 0px;
	width:40px;
}

#rss:hover,
#rss.hover {
	background-position:0px -51px;
}

#twitter {
	background-position:-40px 0px;
	width:39px;
}

#twitter:hover,
#twitter.hover {
	background-position:-40px -51px;
}

#facebook {
	background-position:-78px 0px;
	width:32px;
}

#facebook:hover,
#facebook.hover {
	background-position:-78px -51px;
}

#flickr {
	background-position:-109px 0px;
	width:39px;
}

#flickr:hover,
#flickr.hover {
	background-position:-109px -51px;
}

#delicious {
	background-position:-148px 0px;
	width:43px;
}

#delicious:hover,
#delicious.hover {
	background-position:-148px -51px;
}

#tumblr {
	background-position:-191px 0px;
	width:39px;
}

#tumblr:hover,
#tumblr.hover {
	background-position:-191px -51px;
}

#viadeo {
	background-position:-230px 0px;
	width:51px;
}

#viadeo:hover,
#viadeo.hover {
	background-position:-230px -51px;
}

#linkedin {
	background-position:-281px 0px;
	width:43px;
}

#linkedin:hover, 
#linkedin.hover {
	background-position:-281px -51px;
}

/*******************/
/***** VARIOUS *****/
/*******************/

.bubble {
	position:relative;
	overflow:hidden;
	min-height:40px;
	min-width:60px;
	display:none;
	z-index: 800;
}

.bubble-tip {
	background:transparent url('../img/bubble-arrow.png') no-repeat top left;
	width:18px;
	height:10px;
	position:absolute;
	top:0px;
	right:28px;
}

.bubble-content {
	margin:10px 0 0 0;
	background:transparent url('../img/bubble-bg.png') repeat top left;
	padding:6px;
	overflow:hidden;
	min-height:20px;
	min-width:48px;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	font-size:12px;
	color:white;
	line-height: 14px;
}

.bubble-content a {
	color:white;
}

#bubble-social {
	width:176px;
	height:104px;
	left:54px;
	top:180px;
	opacity:0;
}

#bubble-social .bubble-content {
	padding:12px 12px;
	height:70px;
	width:152px;
	text-align: left;
}

#bubble-social .bubble-content div.legend {
	float:left;
	margin:0 0px 0 3px;
	width:90px;
	padding:16px 0 0 0;
	text-align: center;
} 

#bubble-social .bubble-content div.flickr {
	float:left;
	width:53px;
	height:53px;
	margin:0 5px 0 0px;
	overflow: hidden;
}

#bubble-social .bubble-content div.flickr img {
	width:53px;
	height:53px;
}

#bubble-social .bubble-content div.marged {
	margin-top:8px;
}

#bubble-social a {
	text-decoration: none;
}

#bubble-vcard {
	width:175px;
	height:60px;
	left:711px;
	top:328px;
	opacity:0;
}

#bubble-vcard a {
	text-decoration: none;
}

#bubble-vcard a:hover {
	text-decoration: underline;
}

#bubble-vcard .bubble-tip {
	right:78px;
}

#bubble-vcard .bubble-content {
	height:25px;
	width:157px;
	padding:14px 0 0 16px;
	text-shadow: 1px 1px 1px #343434;
	font-size: 11px;
}

.date {
	color:#e5f3fb;
	position:absolute;
	bottom:6px;
	right:8px;
	font-size:10px;
}

#loader {
	margin:24px 0 0 68px;
}

#logo {
	position: absolute;
	bottom: 20px;
	right: 82px;
}

#logo a {
	display: block;
	width:83px;
	height:31px;
	overflow: hidden;
	cursor: pointer;
	text-indent: -9999px;
	background-color: white;
	background-image: url('../img/logo.jpg');
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#logo a:hover,
#logo a.hover {
	background-position: 0px -31px;
}

#studio {
	position: absolute;
	bottom: 0px;
	right: 82px;	
}