@import url(reset.css);


@font-face {
    font-family: MrJonesBook;
    src: url("../../fonts/MrJonesBook.otf") format("opentype");
}

* {
 margin: 0;
 padding: 0;
}

html {
 font-size: 100%;
 text-align: center;
}

body {
 font-size: 0.85em;
 line-height: 1.2em;
 font-family: "MrJonesBook", "MS Trebuchet", Helvetica, Arial, sans-serif;
 color: white;
 background: transparent url(/assets/templates/Neela/images/bg.jpg) left -3000px repeat;
 text-align: left;
}



a         { border-bottom: 0px white solid; color: white; }
a:visited { text-decoration: none; }
a:hover   { color: white; text-shadow: 0px 0px 10px white; text-decoration: none;}
a:active  { border-bottom: 0; color : white; }

/* Les blocs */

#upline {
 background: url(/assets/templates/Neela/images/bg_dark.png) repeat-x 0 0;
 margin-bottom: 1px;
}

#header {
 background: url(/assets/templates/Neela/images/bg_dark.png) repeat-x 0 -60px;
 margin-bottom: 1px;
}

#slogan {
 background: url(/assets/templates/Neela/images/bg_dark.png) repeat-x 0 -20px;
 margin-bottom: 1px;
}

#menu {
 background: url(/assets/templates/Neela/images/bg_dark.png) repeat-x 0 -120px;
 margin-bottom: 1px;
 height: 70px;
}

/* Généralités */

h1, h2, h3, h4, dt, li {  }

h2 {
 font-size: 1.5em;
 margin: 30px auto 15px 0;
}

h3 {
 font-size: 1.3em;
 margin: 15px auto 10px 0;
}

h4 {
 font-size: 1.2em;
 margin: -10px auto 10px 0
}

p {
 margin: 0 auto 5px 0;
 text-align: justify;
}

br {
 height: 0;
}

sup {
 vertical-align: super;
 font-size: 0.7em;
}

/* Classes utiles */

hr {
 clear: both;
 height: 3px;
 width: 100%;
 background: url(/assets/templates/Neela/images/ligne.png) no-repeat center center;
 margin: 20px auto 0;
 border: 0;
}

.in {
 width: 960px;
 margin: 0 auto;
}

.clear {
 clear: both;
}

.separateur {
 clear: both;
 height: 50px;
 width: 100%;
 background: url(/assets/templates/Neela/images/sep-horizontal.png) no-repeat center center;
 margin: 0px auto 0px;
}

.bouton {
 width: 250px;
 margin: 0px auto 40px;
 text-align: center;
 background: url(/assets/templates/Neela/images/bg_dark.png) repeat-x 0 -60px;
 box-shadow: 0px 0px 10px #DFDFDF;
 -moz-box-shadow: 0px 0px 10px #DFDFDF;
 -webkit-box-shadow: 0px 0px 10px #DFDFDF;
 -moz-border-radius: 10px;
}

.bouton a {
 display: block;
 width: 100%;
 height: 100%;
 color: #DFDFDF;
 font-size: 1.5em;
 padding: 5px 0;
 line-height: 1.2em;
 border: 0;
 text-decoration: none;
 text-shadow: 0px 1px 4px #000;
}

.bouton.retour {
 width: 120px;
 margin: 20px auto;
}

.bouton.retour a {
 font-size: 1em;
}

.bouton a:hover {
 color: white;
 text-shadow: 0px 1px 2px #000;
}

/* Upline */

#upline .in {
}

#upline .intro {
 float: left;
 font-size: 0.8em/1.8em MrJonesBook, Verdana, sans-serif !important;
 padding: 5px 0 0;
}

#upline .tel-mail {
 float: right;
 text-align: right;
 font-size: 0.8em/1.8em MrJonesBook, Verdana, sans-serif !important;
 padding: 5px 0 0;
}

#upline .tel-mail a {
 border: 0;
 text-decoration: none;
}

/* Header */

#header .in {
 background: url(/assets/templates/Neela/images/logo.png) left 8px no-repeat;
}

#header h1 {
 float: left;
 width: 420px;
 height: 120px;
}

#header a {
 display: block;
 width: 100%;
 height: 100%;
}

#header h1 span {
 position: absolute;
 text-indent: -9999px;
}

#header p {
 text-align: right;
 font-size: 1em;
 line-height: 1.1em;
 margin: 0 0 0 auto;
 padding: 20px 0 45px 0;
 background: url(/assets/templates/Neela/images/signature.png) right 92% no-repeat;
}

#header span {
 color: #DFDFDF;
 font-style: italic;
}

/* Slogan */

#slogan .in {
 padding: 40px 0;
}

#slogan p {
 font-family: MrJonesBook, "Trebuchet MS", Helvetica, serif;
 text-align: left;
 font-size: 2.5em;
 line-height: 1.3em;
 letter-spacing: 0.0em;
 margin: 0 0 0 0;
 color: #DFDFDF;
 text-shadow: 0px 0px 40px white;
}

#slogan span {
 font-variant: small-caps;
 font-size: 1.2em;
 color: #F5F5F5;
 text-shadow: 0px 0px 40px white, 0 1px 1px #fff, 0 -1px 1px #000;
}


/* Menu */

#menu li {
 display: inline;
 list-style-type: none;
 list-style-image: none;
}

#menu a {
 display: block;
 text-decoration: none;
 float: left;
 width: 171px;
 height: 60px;
 padding: 10px 10px 0 10px;
 margin-right: 1px;
 color: white;
 text-transform : uppercase;
 background: url(/assets/templates/Neela/images/bg_dark.png) repeat-x 0 60%;
}

#menu a:hover {
 background-position: 0 40%;
 text-shadow: 0px 0px 10px white;
}

#menu .here a {
 background-position: 0 30%;
 text-shadow: 0px 0px 10px white;
}

#menu span {
 display: none;
 text-transform : none;
 font-size: 0.8em;
 margin-top: 5px;
}

#menu a:hover span, #menu .here span {
 display: block;
}

/*************/
/*  Contenu  */
/*************/

#content {
 padding: 30px 0;
 min-height: 400px;
}


/*************/
/*  Accueil  */
/*************/

#topo {
 width: 1100px;
 margin: 35px 0 30px;
}

#topo div {
 float: left;
 width: 460px;
 height: 100px;
 margin: 0 40px 30px 0;
}

#topo h3 {
 margin: 0 auto 10px 60px;
}

#topo p {
 font-size: 1em;
 line-height: 1.3em;
 margin: 0 0px 0px 60px;
}

.ergo { background: url(/assets/templates/Neela/images/ergo.png) left 10px no-repeat }
.standards { background: url(/assets/templates/Neela/images/standards.png) left 10px no-repeat }
.cms { background: url(/assets/templates/Neela/images/cms.png) left 10px no-repeat }
.seo { background: url(/assets/templates/Neela/images/seo.png) left 10px no-repeat }

#id1 h2 {
 margin-top: 20px
}

/* Derniers sites et Portfolio */

#lastjob {
 width: 1100px;
 margin: 20px auto 0px 0;
}

#portfolio {
 width: 1100px;
 margin: 30px auto 30px 0;
}

#lastjob div, #portfolio .site {
 float: left;
 width: 210px;
 margin: 0 40px 40px 0;
}

#lastjob h2, #portfolio h2 {
display: none;
 font-size: 1.2em;
 margin: 0 auto 5px 0;
}

#portfolio ul,#portfolio hr {
display: none;
}

#lastjob h3, #portfolio h3 {
display: none;
 font-size: 1em;
 margin: 0 auto 5px 0;
}

#lastjob img, #portfolio img {
 box-shadow: 0px 0px 10px #DFDFDF;
 -moz-box-shadow: 0px 0px 10px #DFDFDF;
 -webkit-box-shadow: 0px 0px 10px #DFDFDF;
}

#lastjob img:hover,#portfolio img:hover, #mini-galerie img:hover {
 box-shadow: 00px 0px 20px white;
 -moz-box-shadow: 0px 0px 20px white;
 -webkit-box-shadow: 0px 0px 20px white;
}

/* Services */

#sites, #hosting {
 float: left;
 width: 450px;
}

#hosting  {
 float: right;
 width: 450px;
}

#sites div, #hosting div {
 margin: 0 0px 30px 0;
}

#id2 #content h3 {
 margin: 0 auto 10px 60px;
}

#id2 #content p {
 font-size: 1em;
 line-height: 1.3em;
 margin: 0 0px 0px 60px;
}

.cdv { background: url(/assets/templates/Neela/images/cdv.png) left -5px no-repeat }
.vitrine { background: url(/assets/templates/Neela/images/vitrine.png) left 0px no-repeat }
.classique { background: url(/assets/templates/Neela/images/classique.png) left 0px no-repeat }
.boutique { background: url(/assets/templates/Neela/images/boutique.png) left -10px no-repeat }

.hebergement { background: url(/assets/templates/Neela/images/hebergement.png) left 35px no-repeat }
.infogerance { background: url(/assets/templates/Neela/images/infogerance.png) left 30px no-repeat }
.domaines { background: url(/assets/templates/Neela/images/domaines.png) left 30px no-repeat }

/* Mini-galerie */

#mini-galerie {
 float: right;
 display: inline;
 width: 250px;
 margin: 0 -15px auto 0;
 padding-left: 60px;
 background: url(/assets/templates/Neela/images/sep-vertical.png) left top no-repeat;
 min-height: 700px;
}

#mini-galerie h2 { margin-top: 0}
#mini-galerie img {
 margin: 3px;
 box-shadow: 0px 0px 10px #DFDFDF;
 -moz-box-shadow: 0px 0px 10px #BFBFBF;
 -webkit-box-shadow: 0px 0px 10px #DFDFDF;
}

#fiche { width: 700px;}
#fiche dl { margin: 20px 0px 20px;}
#fiche dt { font-weight: bold;}
#fiche dd { margin-bottom: 10px;}
#fiche img { border: 5px white solid; }
#fiche li { margin: 3px auto 3px 1.3em }

/* Philosophie */

#id4 #content h2, #id4 #content p {
 margin-left: 300px
}

#id4 #content p {
 line-height: 1.3em;
 text-align: justify
}

#id4 #content img {
 float: left;
 margin: 0 auto auto 40px;
}

/* Contact */

#formulaire {
 float: left;
 width: 460px;
 margin-bottom: 50px
}

.entrees input {
 width: 250px
}

#cfEmail {
 width: 350px
}

#cfMessage {
 width: 100%
}

#coordonnees {
 float: right;
 width: 450px;
}

.button {
 border: 0;
 background: transparent url(/assets/templates/Neela/images/bg_dark.png) left 0% repeat-x;
 color: white;
 padding: 5px;
 font-weight: bold;
     -moz-border-radius: 2px; /* FF1+ */
  -webkit-border-radius: 2px; /* Saf3+, Chrome */
          border-radius: 2px; /* Opera 10.5, IE 9 */
}

.button:hover {
 border: 0;
 background: transparent url(/assets/templates/Neela/images/bg_dark.png) left 60% repeat-x;
 color: white;
 padding: 5px;
 box-shadow: 0px 2px 20px white;
 -moz-box-shadow: 0px 2px 20px white;
 -webkit-box-shadow: 0px 2px 20px white;
}

.entrees input, textarea  {
 display: block;
 border: 0;
 background: transparent url(/assets/templates/Neela/images/bg_dark.png) left 20% repeat-x;
 margin: 3px auto 10px 0;
 padding: 5px;
 color: white;
 font-size: 14px !important;
     -moz-border-radius: 2px; /* FF1+ */
  -webkit-border-radius: 2px; /* Saf3+, Chrome */
          border-radius: 2px; /* Opera 10.5, IE 9 */

}

.entrees input:hover, textarea:hover  {
 background: transparent url(/assets/templates/Neela/images/bg_dark.png) left 40% repeat-x;
}

.entrees input:focus, textarea:focus {
 background: transparent url(/assets/templates/Neela/images/bg_dark.png) left 40% repeat-x;
 box-shadow: 0px 2px 20px white;
 -moz-box-shadow: 0px 2px 20px white;
 -webkit-box-shadow: 0px 2px 20px white;
}

#coordonnees dt, #formulaire p {
 font-size: 1.1em;
 font-weight: bold;
 margin-bottom: 5px

}

#coordonnees dd {
 font-size: 1em;
 margin-bottom: 20px;
 line-height: 1.3em;
 padding-left: 20px;
}

.email { background: url(/assets/templates/Neela/images/email.png) left top no-repeat }
.telephone { background: url(/assets/templates/Neela/images/telephone.png) left top no-repeat }
.jabber { background: url(/assets/templates/Neela/images/jabber.png) left top no-repeat }
.adresse { background: url(/assets/templates/Neela/images/adresse.png) left top no-repeat }


#coordonnees li {
 list-style-type: none;
 list-style-image: none;
 background: transparent url(images/puce.png) left 3px no-repeat;
 padding-left: 16px;
 line-height: 16px;
}

/* Footer */

#footer {
 background: url(/assets/templates/Neela/images/bg_dark.png) repeat-x 0 0;
}

#submenu  {
 float: left;
 margin-top: 10px
}

#submenu li {
 list-style-type: none;
 list-style-image: none;
 display: inline;
 padding-right: 5px;
 margin-right: 5px;
 border-right: 0px solid white;
}

#submenu li.last {
 border-right: 0;
}

#submenu a {
 text-decoration: none;
}

#info-w3c {
 float: right;
 width: 500px;
 margin: 10px 0
}

#info-w3c p {
 text-align: right;
 margin-bottom: 5px;
}

#info-w3c a {
 text-decoration: none;
 color: #D7D7D7;
 font-style: italic;
}