/********************************************************************/
/*********************** Nicolas SIONNIERE **************************/
/******************** (c) 2010 SIONNIERE NICOLAS ********************/
/****************** Email: portfolio@sionniere.com ******************/
/****************** http://nicolas.sionniere.com/ *******************/
/********************************************************************/

*{
	margin:0;
	padding:0;
}

/*** BALISES ***/
body{
	font-family:Trebuchet MS, sans-serif;
	font-size:0.85em;
	line-height:1em;
	color:#ffffff;
	background:#262626;
}
img{
	border:none;
}
p{
	padding:10px 0 0 0;
	clear:both;
}
a{
	text-decoration:underline;
	color:#ffffff;
}
a:hover{
	color:#ff00a2;	
}
a:active{
	color:#a8ff00;	
}
a.close{
	text-decoration:none;
}
h1{
	font-size:1.8em;
	font-weight:bold;
	line-height:1.8em;
	padding-left:3px;
	text-shadow: 0 1px 2px #000;
}
h2{
	font-size:1.4em;
	font-weight:normal;
	line-height:1.4em;
}
ul li{
	list-style: none;
	float: left; 
	position: relative; 
	background:white;
	margin:0 6px 0 0;
}
ul li a{
	text-decoration:none;
	font-weight:bold;
	height:1em;
	line-height:1em;
	float: left;
	padding: .5em 1em;
	color:#262626;
}
ul li:hover{
	background:#ff00a2;
	color:white;
}
ul li a:hover{
	color:white;
}
ul.listing li{
	list-style: disc;
	color:#ff00a2;
	clear:both;
	background:transparent;
	margin:0 0 0 14px;
}
ol{
	color:#ff00a2;
	clear:both;
}
ol li{
	margin:0 0 0 20px;
	font-weight:bold;
}
dl dd{
	float:right;
	text-align:right;
	line-height:1.2em;
	padding:4px;
}
dl dt{
	font-size:1.2em;
	line-height:1.2em;
	font-weight:bold;
	color:#a8ff00;
	margin:4px; 
	padding-bottom:6px;
	border-bottom:1px dotted white;
}
form{
	font-weight:normal;
	overflow:hidden;
	background:#262626;
}

form fieldset{
	border:10px solid white;
}
form label{
	float:left;
	text-align:right;
	display:block;
	width:110px;
	height:20px;
	line-height:1em;
	margin-right:20px;
	text-shadow: 0 1px 2px #000;
}
label.error {
	float:right;
	width:298px;
	margin:4px 0 0;
	color:#ff00a2; 
	text-shadow:none;
}
form div{
	padding:10px 20px 20px 20px;
	font-weight:bold;
}
form input{
	display:block;
	height:20px;
	padding:4px;
	border:2px solid white;
}
form textarea{
	display:block;
	width:298px;
	height:120px;
	padding:4px;
	border:2px solid white;
}
form textarea:focus{
	border:2px solid #ff00a2;
}
form input#email{
	display:block;
	width:298px;
	height:20px;
}
form input#email:focus{
	border:2px solid #ff00a2;
}
form input#btnsend{
	display:block;
	width:120px;
	height:30px;
	line-height:1em;
	cursor:pointer;
	color:#262626;
	font-weight:bold;
}
form input#btnsend:hover{
	border:2px solid #ff00a2;
	color:#ff00a2;	
}
form input#btnsend:active{
	border:2px solid #a8ff00;
	color:#a8ff00;
}

/*** IDENTIFIANTS ***/
#wrapper{
	margin:20px ;
}
#myname{
	width: 434px;
	height: 104px;
	margin-top:32px;
	margin-left:3px;
	float:left;
	background:transparent url(../images/myname.png) no-repeat scroll 0 0;
}
#myjob{
	width: 365px;
	height: 156px;
	float:right;
	background:transparent url(../images/myjob.png) no-repeat scroll 0 0;
}
#tabs-1,#tabs-2,#tabs-3,#tabs-4,#tabs-5,#tabs-6{
	padding:0 0 10px 3px;
	float:none;
	clear:both;
}
#foot{
	padding:10px 0 10px 6px;
	color:#aaaaaa;
}
#foot a{
	color:#aaaaaa;
}
#foot a:hover{
	color:#ff00a2;
}

/*Modal Box*/
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#form {
  width:500px; 
  height:400px;
}
#loader{
	display:block;
	width:300px;
	height:32px;
	line-height:32px;
	background:transparent url(../images/loader.gif) no-repeat scroll 0 0;
	padding:0 0 0 50px;
}
#sended{
	height:32px;
	line-height:32px;
	background:transparent url(../images/good.png) no-repeat scroll 0 0;
	padding:0 0 0 50px;
}
#notsended{
	height:32px;
	line-height:32px;
	background:transparent url(../images/bad.png) no-repeat scroll 0 0;
	padding:0 0 0 50px;
}

/*** CLASSES ***/
.left{
	float:left;
}
.right{
	float:right;
}
.clear{
	clear:both;
}
.txtleft{
	text-align:left;
}
.aclear{
	text-decoration:none;
}
.white{
	color:white;
}
.pink{
	color:#ff00a2;
}
.green{
	color:#a8ff00;
}
.maj{
	font-variant:small-caps;
}
.wnormal{
	font-weight:normal;
}
.small{
	font-size:0.85em;
}
.cadre{
	width: 227px;
	height: 167px;
	margin:0 6px 6px 0;
	float:left;
	background:#ffffff url(../images/bg-folio.gif) no-repeat scroll 0 0;
}
.sep{
	height:27px;
	border-bottom:4px solid white;
	margin:0 0 0 8px;
	float:none;
	clear:both;
}
.boxgrid{
	width: 200px;
	height: 140px;
	margin:13px 14px;
	border: none;
	overflow: hidden;
	position:relative;
	cursor:help;
}
.boxgrid img{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}
.boxcaption{
	float: left; 
	position: absolute; 
	height: 140px;
	width: 200px;
}
.captionfull .boxcaption {
	top: 200px;
	left: 0;
}
.close{
	display:block;
	width:80px;
	height:20px;
	padding:4px;
	font-weight:bold;
	color:#262626;
	background:white;
	margin-left:412px;
	text-align:center
}
.btnclose{
	font-size:1.5em;
}
.cover{	background: #262626;}

.window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

/*** TABS ***/
.ui-tabs .ui-tabs-nav li.ui-state-hover{
	background:#ff00a2;
	color:white;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
	background:#a8ff00;
	color:white;
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-hide { display: none !important; }

/*** WTF ***/
#wtf{
	position:fixed;
	bottom:0;
	right:0;
	font-size:14px;
	color:#393939;
	cursor:pointer;
}