/* ------------------------------------------------------------------------------ */
/* ------------------------------------- MAIN ----------------------------------- */

html
{
height: 100%;
}

body
{
font-family: Arial;
font-size: 14px;
background: #333 url('img/bgm.jpg') fixed ;
margin: 0px;
padding: 0px;
text-align: justify;
height: 100%;
}

#content
{
width: 100%;
margin: auto;
margin-top: 0px;
padding-top: 20px;
padding-bottom: 120px;
overflow: auto;
color: #CCC;
}

.bloc
{
width: 1000px;
margin: auto;
margin-top: 0px;
padding-top: 20px;
padding-bottom: 20px;
overflow: auto;
color: #CCC;
}

#large
{
background: #222;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
/* border: solid 2px #ccc; */
padding: 4px 10px 4px 10px;
overflow: auto; 
margin-bottom: 25px;
}

.allw
{
width: 100%;
background: #010101;
background: url('img/alpha80.png');
border-bottom: dashed 2px #333;
border-top: dashed 2px #333;
padding-top: 10px;
margin-bottom: 20px;
}

.intro
{
width: 740px;
font-size: 16px;
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------ HEADER ---------------------------------- */

#header
{
height: 90px;
background: url('img/bg.jpg') top left repeat-x;
width: 100%;
overflow: hidden;
}

#main_header
{
width: 1000px;
height: 90px;
margin: auto;
position: relative;
left: -60px;
}

#chars
{
width: 500px;
height: 182px;
/* background: url('img/charas.png') top right no-repeat; */
float: left;
padding:0px;
margin: 0px;
text-align: right;
}

#chars a, #chars a img
{
border: none;
}

#right
{
width: 500px;
height: 90px;
float: right;
text-align: center;
}

#topright
{
height: 32px;
padding-top: 8px;
font-size: 10px;
color: #AAA;
}

#bottomright
{
padding-top: 10px;
height: 40px;
color: #000;
font-weight: 16px;
font-weight: bold;
}

a.maintitle
{
color: #ff9933;
text-decoration: none;
font-weight: bold;
font-size: 22px;
border: none;
}

a.maintitle #maintitle2
{
color: white;
border: none;
}

#bottomright a
{
color: #FFF;
font-weight: 16px;
padding-left: 12px;
padding-right: 12px;
font-weight: bold;
text-decoration: none;
border: none;
}

.clink
{
color: #333;
padding: 12px 12px 6px 12px;
font-weight: bold;
text-decoration: none;
background: #ff9933;
border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
-webkit-border-radius: 0px 0px 6px 6px;
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------- INDEX -------------------------------- */

h4.accsrv
{
font-weight: bold;
font-size: 20px;
padding-top: 0px;
margin-top: 0px;
position: relative;
top: -16px;
text-shadow: 2px 2px #111;
}

h4.accweb{color:#6dc5d6;}
h4.accgraph{color:#eb7441;}
h4.acccontent{color:#43fc55;}
h4.accmisc{color:#ffff66;}

p.accp{position: relative; top:-16px;}

/* ------------------------------------------------------------------------------ */
/* ----------------------------------- PORTFOLIO -------------------------------- */

#portfolio
{
width: 1000px;
overflow: auto;
}

.port_block
{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 230px;
height: 120px;
text-align: center;
background: #111;
/* border: solid 2px #ff9933; */
overflow: hidden;
color: white;
float: left;
margin: 5px;
box-shadow: -1px 2px 4px 1px #111;
}

.empty
{
width: 230px;
height: 120px;
background: #222;
/* border: solid 2px #222; */
}

.port_in
{
position: relative;
top:0px;
cursor: pointer;
}

.port_content
{
width: 970px;
margin-left: 3px;
margin-top: 15px;
overflow: auto;
}

.port_content_left, .port_content_left_nh
{
width: 350px;
background: #222;
border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
padding: 10px;
float: left;
margin-right:10px;
overflow: auto;
/*border-right: dashed 2px #333; */
}

.port_content_right, .port_content_right_nh
{
width: 560px;
background: #222;
border-radius: 0px 10px 10px 10px;
-moz-border-radius: 0px 10px 10px 10px;
-webkit-border-radius: 0px 10px 10px 10px;
padding: 10px;
overflow: auto;
/* border-left: dashed 2px #333; */
}

.port_content_right img
{
max-width:500px;
}

.port_content_right img
{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

/* ------------------------------------------------------------------------------ */
/* ----------------------------------- SERVICES -------------------------------- */

.srvmain
{ 
margin: auto;
width: 780px;
overflow: auto;
margin-top: 10px;
margin-bottom: 25px;
}

.srv
{
padding: 15px 15px 15px 15px;
margin: 2px;
width: 350px;
height: 140px;
overflow: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

.srv:hover, .srvminl:hover, .srvminr:hover
{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}

.srvminl, .srvminr
{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

.sdev
{
float: left;
background: #222 url('img/srv_web.png') bottom right no-repeat;
border-radius: 20px 0px 0px 0px;
-moz-border-radius: 20px 0px 0px 0px;
-webkit-border-radius: 20px 0px 0px 0px;
text-align: left;
}

.sdesign
{
float: left;
background: #222 url('img/srv_design.png') bottom left no-repeat;
border-radius: 0px 20px 0px 0px;
-moz-border-radius: 0px 20px 0px 0px;
-webkit-border-radius: 0px 20px 0px 0px;
text-align: right;
}

.smisc
{
float: left;
background: #222 url('img/srv_misc.png') top right no-repeat;
border-radius: 0px 0px 0px 20px;
-moz-border-radius: 0px 0px 0px 20px;
-webkit-border-radius: 0px 0px 0px 20px;
text-align: left;
}

.scontent
{
float: left;
background: #222 url('img/srv_content.png') top left no-repeat;
border-radius: 0px 0px 20px 0px;
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;
text-align: right;
}

.srvminl
{
position: relative;
float: left;
width: 360px;
height: 250px;
padding: 5px 15px 5px 120px;
margin: auto;
margin-bottom: 15px;  
}

.srvminr
{
position: relative;
float: right;
width: 360px;
height: 250px;
padding: 5px 120px 5px 15px;
margin: auto;
margin-bottom: 15px;  
}

.sdev_min{background: #222 url('img/srv_web2.png') left no-repeat;
border-radius: 20px 0px 0px 0px;
-moz-border-radius: 20px 0px 0px 0px;
-webkit-border-radius: 20px 0px 0px 0px;}
.sdesign_min{background: #222 url('img/srv_design2.png') right no-repeat;
border-radius: 0px 20px 0px 0px;
-moz-border-radius: 0px 20px 0px 0px;
-webkit-border-radius: 0px 20px 0px 0px;}
.scontent_min{background: #222 url('img/srv_content2.png') right no-repeat;
border-radius: 0px 0px 20px 0px;
-moz-border-radius: 0px 0px 20px 0px;
-webkit-border-radius: 0px 0px 20px 0px;}
.smisc_min{background: #222 url('img/srv_misc2.png') left no-repeat;
border-radius: 0px 0px 0px 20px;
-moz-border-radius: 0px 0px 0px 20px;
-webkit-border-radius: 0px 0px 0px 20px;}

.typedev, .typedesign, .typemisc, .typecontent
{
color: #111;
padding: 2px;
font-weight: bold;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin-right: 4px; 
}

.type
{
position: absolute;
top: 222px;
}

.typedev {background: #6CF;}
.typedesign {background: #F93;}
.typemisc {background: #FF6;}
.typecontent {background: #6F6;}

.process
{
width: 600px;
margin: auto;
padding-left: 120px;
overflow: hidden;
}

.prc1{background: url('img/process_01.png') no-repeat; height: 125px; margin-top: 15px;}
.prc2{background: url('img/process_02.png') no-repeat; height: 126px; padding-top: 15px;}
.prc3{background: url('img/process_03.png') no-repeat; height: 120px; padding-top: 16px;}
.prc4{background: url('img/process_04.png') no-repeat; height: 157px; padding-top: 16px;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------- CONTENU -------------------------------- */

h1
{
text-align: center;
color: #EEE;
border-bottom: solid 2px #ff9933; 
font-size: 18px;
padding: 0px 0px 3px 0px;
margin: 0px 0px 12px 0px;
}

h1.mid
{
color: #aaa;
border: none;
padding-bottom: 0px;
margin-bottom: 0px;
}

h2
{
color: #ff9933;
font-size: 16px;
font-weight: normal;
padding: 0px;
margin: 8px 0px 3px 3px;
}

.h2big
{
text-shadow: 2px 2px #111;
font-weight: bold;
}

h3
{
color: #999;
border-bottom: dashed 2px #999;
font-size: 14px;
font-weight: normal;
padding: 0px 0px 2px 0px;
margin: 10px 10px 6px 3px;
}

h4
{
color: #ff9933;
text-align: center;
font-size: 16px;
font-weight: normal;
padding: 0px 0px 2px 0px;
margin: 15px 10px 6px 3px;
}

p
{
padding: 5px 3px 5px 3px;
margin: 0px;
}

p.big
{
font-weight: bold;
font-size: 16px;
color: #ff9933;
}

.pr
{
font-style: italic;
color: #888;
font-size: 12px;
}

img.floatr
{
float: right;
border: solid 2px #888;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 10px 10px 10px 20px;
overflow: auto;
}

strong{color: #ff9933;}
.sdev_min strong{color: #6CF;}
.sdesign_min strong{color: #F93;}
.smisc_min strong{color: #FF6;}
.scontent_min strong{color: #6F6;}

.left3
{
width: 214px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
float: left;
padding: 0px 10px 10px 10px;
margin: 0px 8px 10px 8px;
}

.lrg
{
width: 284px;
background: #222;
}

.dev{background: #222 url('img/skill_prog.png') top center no-repeat;}
.graph{background: #222 url('img/skill_ld.png') top center no-repeat;}
.misc{background: #222 url('img/skill_gd.png') top center no-repeat;}
.prod{background: #222 url('img/skill_prod.png') top center no-repeat;}

img.skillmin
{
height: 24px;
position: relative;
top: 6px;
}

.skill
{
font-weight: bold;
color: #eee;
/* background: #111;
border-radius: 5px;
padding: 0px;
margin: 2px 0px 2px 0px;*/
}


.srvtitle
{

font-size: 24px;
text-transform: uppercase;
}

.sdev .srvtitle{color: #6CF;}
.sdesign .srvtitle{color: #F93;}
.smisc .srvtitle{color: #FF6;}
.scontent .srvtitle{color: #6F6;}

/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
/* +-+-+-+-+-+-+-+-+-+-+-+ LINKS +-+-+-+-+-+-+-+-+-+-+-+-+ */

a
{
color: #ff9933;
text-decoration: none;
}

a:hover
{
border-bottom: solid 1px #ff9933;
}

.button
{
padding: 6px;
background: #ff9933;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font-weight: bold;
margin: 5px;
color: #222;
border: none; 
}

.button:hover
{
color: #222;
}

.port_content_right a, a.maintitle:hover, .button:hover
{
border: none;
}

/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
/* +-+-+-+-+-+-+-+-+-+-+-+ FORM +-+-+-+-+-+-+-+-+-+-+-+-+ */

#formDiv
{
width: 500px;
margin: auto;
text-align: left;
}

#formDiv table
{
margin-left: 30px;
}

#formDiv td.titre
{
padding-left: 40px;
width: 100px;
color: #ff8b2d;
}

#formDiv td input
{
width: 300px;
border: solid 1px #ff8b2d;
background-color: white;
padding: 2px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

#formDiv td input#sub:hover
{
cursor: pointer;
}

#formDiv td input#sub
{
padding: 6px;
background: #ff9933;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font-weight: bold;
color: #222;
border: none; 
}

#formDiv #txta
{
margin-left: 40px;
width: 400px;
height: 200px;
border: solid 1px #ff8b2d;
background-color: white;
padding: 2px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

#formDiv .error
{
margin-left: 40px;
padding: 5px 5px 5px 15px;
border: solid 1px #d62806;
background-color: #fbb4a6;
margin-bottom: 10px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

#formDiv .error p
{
font-size: 12px;
padding: 0px;
margin: 0px;
color: red;
}

#formDiv .success
{
margin-left: 40px;
padding: 5px 5px 5px 15px;
border: solid 1px #3a9303;
background-color: #d9fac5;
margin-bottom: 10px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

#formDiv .success p
{
font-size: 12px;
padding: 0px;
margin: 0px;
color: green;
}

/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ */
/* +-+-+-+-+-+-+-+-+-+-+ FOOTER +-+-+-+-+-+-+-+-+-+-+-+-+ */

#mainpage
{
position : relative;
min-height: 100%;
}

#footer
{
background: url('img/alpha90.png');
position: absolute;	bottom: 0px;
height: 110px;
width: 100%;
border-top: dotted 1px #333;
overflow: hidden;
}

#footcont
{
width: 850px;
color: #888;
margin: auto;
}

.footbloc
{
width: 190px;
height: 90px;
float: left;
margin: 10px 10px 0px 10px;
}

.footblocbig
{
width: 380px;
height: 100px;
float: left;
margin: 10px 10px 0px 10px;
text-align: center;
height: 90px;
}

.rb
{
border-right: dotted 2px #333;
}

#footer a
{
color: #ffcc66;
}