/* Sizes and Positions */

body {
position: relative;
margin: 15px 0;
background: #504751;
font-family: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
text-align: center;
}

#page {
width: 600px;
margin: 0 auto;
padding: 10px;
border: thin white solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 5px 20px #555;
-moz-box-shadow: 0 5px 20px #555;
-webkit-box-shadow: 0 5px 20px #555;
background: white;
text-align: left;
}

#index {
display: block;
width: 300px;
height: 30px;
background: transparent url('img/index-bg.png') no-repeat;
text-indent: -10000px;
margin-left: 300px;
}

/* Barre de menu */

#menubar-background {
width: 100%;
height: 70px;
position: absolute;
top: 90px;
left: 0;
z-index: 666;
background: transparent url('img/menubar-bg.png') repeat-x;
}

.menubar {
width: 100%;
height: 70px;
position: relative;
clear: both;
overflow: hidden;
margin: 10px 0 0;
}

.menubar ul {
position: relative;
left: 35%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}

#socialnetwork ul  {
	position: relative;
left: 50%;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}

.menubar ul li, #socialnetwork ul li {
display: block;
position: relative;
right: 50%;
float: left;
margin: 0 15px;
padding: 0;
text-indent: -10000px;
}

/* Bouton Home*/
.menubar ul li a {
display: block;
width: 68px;
height: 35px;
background: transparent url('img/menu-home.png') no-repeat;
}

.menubar ul li a:hover, .menubar ul .current_page_item a {
background: transparent url('img/menu-home-hover.png') no-repeat;
}

/* Bouton About */
.menubar ul .page-item-4 a{
width: 82px;
background: transparent url('img/menu-about.png') no-repeat;
}

.menubar ul li.page-item-4 a:hover, .menubar ul .current_page_item.page-item-4 a{
background: transparent url('img/menu-about-hover.png') no-repeat;
}

/* Bouton Portfolio */
.menubar ul .page-item-6 a{
width: 102px;
background: transparent url('img/menu-portfolio.png') no-repeat;
}

.menubar ul li.page-item-6 a:hover, .menubar ul .current_page_item.page-item-6 a{
background: transparent url('img/menu-portfolio-hover.png') no-repeat;
}

/* Bouton Contact */
.menubar ul li.page-item-7 a{
width: 96px;
background: transparent url('img/menu-contact.png') no-repeat;
}

.menubar ul li.page-item-7 a:hover, .menubar ul .current_page_item.page-item-7 a{
background: transparent url('img/menu-contact-hover.png') no-repeat;
}

/* Bouton + */
.menubar ul li.page-item-11 a{
width: 16px;
background: transparent url('img/menu-plus.png') center no-repeat;
}

.menubar ul li.page-item-11 a:hover, .menubar ul .current_page_item.page-item-11 a{
background: transparent url('img/menu-plus-hover.png') center no-repeat;
}

#menubar-space {
height: 70px;
margin: 10px 0;
}

/* Réseaux sociaux */
#socialnetwork {
overflow: hidden;
margin: 0 0 30px;
}

#socialnetwork ul li {
margin: 0 5px;
}

#socialnetwork ul li a {
display: block;
width: 62px;
height: 78px;
}

#socialnetwork ul li.doyoubuzz a {
background: transparent url('img/doyoubuzz.png') no-repeat;
}

#socialnetwork ul li.twitter a {
background: transparent url('img/twitter.png') no-repeat;
}

#socialnetwork ul li.facebook a {
background: transparent url('img/facebook.png') no-repeat;
}

#socialnetwork ul li.blog a {
background: transparent url('img/blog.png') no-repeat;
}

#socialnetwork ul li.viadeo a {
background: transparent url('img/viadeo.png') no-repeat;
}

#socialnetwork ul li.linkedin a {
background: transparent url('img/linkedin.png') no-repeat;
}

/* Contenu des pages */
#welcome, #socialnetwork {
clear: both;
padding: 15px 0 0 15px;
}

h2 {
font-size: 36px;
color: #9b6d9e;
margin: 0;
padding-bottom: 20px;
padding-left: 50px;
}

.contact a:link, a:visited {
	text-decoration: none;
}

.contact a:hover {
	text-decoration: underline;
}

.content p {
margin: 0 0 15px;
padding: 0 60px;
}

.about .content p {
margin: 0 0 15px 240px;
padding: 0 20px;
}

.content p, #footer {
text-align: justify;
color: #87558a;
font-size: small;
}

#footer {
text-align: center;
clear: both;
}

#footer a {
text-decoration: none;
color: #87558a;
font-weight: bold;
}

a {
color: #87558a;
}

a img {
border: 0;
}

a:hover {
	text-decoration: underline;
}

.contact_pg {
	color: #87558a;
	font-family: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size: 12px;
}

td {
	border-collapse:separate;
	border-spacing:100px 50px;
}

input, textarea {
	border:1px solid #c6c6c6;
}