/**
 * Copyright 2010 Nicolas Pigelet
 * 
 * @author 		Nicolas Pigelet aka Tanaki
 * @contact		nipigelet@gmail.com
 * @project		Portfolio
 * 
 */

/**
 * 
 * Summary
 * 
 * 1.Reset
 * 2.General
 * 3.Header
 * 	3.1.Menu
 * 4.Content
 * 	4.1.About
 * 	4.2.Currently
 * 	4.3.Works
 * 	4.4.Skills
 * 	4.5.Experiences
 * 	4.6.Projects
 * 	4.7.Contact
 * 5.Footer
 * 6.Helpers
 * 
 */

/* 1.Reset */
html, body, 
h1, h2, h3, h4, h5, h6,
p, ul, div { margin:0; padding:0; }

@font-face {
	font-family: "Springsteel";
	src: url("font/springsteel-lig.otf");
}
h1, h2, h3, h4, h5, h6, .title,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .title a { font-family:"Springsteel", Arial, sans-serif; }
ul { list-style:none; }
a img { border:none; }

/* 2.General */
body { background:#151719 url(skin/bg_glow.png) no-repeat center top; color:#fff; font-size:0.8em; }
body, a { font-family:Arial, sans-serif; }
a { color:#fff; text-decoration:none; }

h1 { font-size:3em; margin:5px 0; font-weight:normal; }
h1 span { font-size:0.54em; display:block; }

h3 { font-size:1.2em; margin:5px 0; }
h4 { font-size:1.5em; font-weight:normal; margin:10px 0; }

#wrapper { overflow:hidden; }

/* 3.Header */
#header { }

/* 4.Content */
#body { overflow:hidden; }
#content { margin:60px 40px 0 360px; overflow:hidden; }
#content a:hover {  }

.links #content ul { display:block; float:left; margin:0 50px 0 0; }
.links #content ul .title { display:block; margin:0 0 10px; font-size:1.4em; }
.links #content ul .subtitle { display:block; margin:10px 0; font-style:italic; }
.links #content ul li { font-size:1.2em; }
.links #content ul li a:hover { padding:0 0 0 10px; }

.home #content {  }

/* 4.0.Menu */
#menu { background:url(skin/vertical.png) repeat-y right top; position:fixed; top:40px; left:40px; padding-right:50px; /*width:300px;*/ }
#menu ul { text-align:right; margin:30px 0 10px; }
#menu ul li { }
#menu ul li a { color:#ccc; font-size:2em; font-family:"Springsteel", Arial, sans-serif; }
#menu ul li.current { font-size:2.5em; font-family:"Springsteel", Arial, sans-serif; }

#menu ul li:hover { background:#191b1e; }
#menu ul li:hover a { color:#fff; }
#menu ul li.current:hover { background:none; }
#menu ul li.current:hover a { color:#ccc; }

/* Sous Menu */
#menu ul li.current ul { margin:0 0 20px 0; }
#menu ul li.current ul li { font-size:0.7em; }
#menu ul li.current ul li a { font-size:0.9em; }
#menu ul li.current ul li:hover { background:#191b1e; }
#menu ul li.current:hover ul li:hover a { color:#fff; }

/* media */
.mediaDesc { margin:14px 0; position:relative; overflow:hidden; _overflow:visible; _zoom:1; }
.mediaDesc .media { display:block; float:left; margin-right:20px; }
.mediaDesc .desc { display:block; float:left; }
.mediaDesc .desc strong { font-size:1.2em; }
.mediaDesc .desc ul {  }
.mediaDesc .desc ul li { margin:5px 0; }

/* 4.1.About */
.infos a {  }
.infos a:hover { background-color:#191b1e; }
.cv, .linkedin, .viadeo, .twitter, .vimeo, .dopplr { display:block; padding:4px 0 4px 25px; background:url(skin/pictos.png) no-repeat 3px 3px; }
.linkedin {  }
.viadeo { background-position:3px -28px; }
.twitter { background-position:3px -57px; }
.vimeo { background-position:3px -86px; }
.dopplr { background-position:3px -116px; }
.cv { background-position:3px -146px; }

/* 4.2.Currently */

/* 4.3.Works */
.works #content { margin-left:345px; margin-bottom:50px; }
.works .year { clear:both; }
.works .year h4 { margin:0 0 5px 10px; }
.works .mediaDesc { margin:0; padding:10px; }
.works .year .mediaDesc .desc { width:185px; }
.works .year .mediaDesc .desc strong { display:block; margin-bottom:5px; }
.works .year .mediaDesc .text { display:none; clear:both; width:220px; z-index:998; padding:10px 0 0; }
.works .year .mediaDesc:hover { background:#2c2c2c; color:#fff; overflow:visible;}

#work_detail { overflow:hidden; max-width:1025px; }
#work_detail h3 { font-size:2.4em; font-weight:normal; margin-left:10px; }
#work_detail .mediaDesc {  }
#work_detail .mediaDesc .desc { float:none; line-height:1.5em; }
#work_detail .mediaDesc .desc li a:hover { text-decoration:underline; }
#work_detail .mediaDesc .desc .linkProject a { font-style:italic; padding:5px; background:#2c2c2c; }
#work_detail .mediaDesc .desc .linkProject:hover a { background:#222; }
#work_detail .mediaDesc .desc .linkProject a:hover { text-decoration:none; }

.keywords { display:none; margin-top:10px; }
.keywords span { 
	font-style:italic; 
	background:#191b1e;
	display:block; float:left; 
	padding:2px 5px; margin:0 2px 2px 0; 
}

.context { font-style:italic; display:block; margin-top:10px; }

.works .year .toPDF:hover .mediaDesc { background:#2c2c2c url(skin/pdf.png) no-repeat right bottom; }
.works .year .noAjax:hover { cursor:default; }
.works .year .mediaDesc:hover .context { display:none; }
.works .year .noHide:hover .context { display:block; }
.works .year .mediaDesc:hover .keywords { display:block; }

/* 4.4.Skills */
#skills {  margin-bottom:40px;  }
#skills table { border:3px solid #fff; border-collapse:collapse; width:100%; max-width:1025px; }
#skills table td, #skills table th { padding:5px; }
#skills table th { background:#fff; color:#151719; font-weight:bold; text-align:center; width:18%; }
#skills table th.desc { width:31%; }
#skills table tr.even { background:#444; }
#skills table tr.odd { background:#333; }
#skills table tr:hover { background:#222; }
#skills table td.lib { font-style:italic; }
#skills table td.checked { background:url(skin/check.png) no-repeat center center; text-indent:-5000px; overflow:hidden; }

/* 4.5.Experiences */
#work_experience { overflow:hidden; }
#work_experience h4 { margin:0; }

/* 4.6.Projects */


/* 4.7.Contact */
#contact {  }
#contact form { }
#contact form input, 
#contact form textarea { background:#ddd; border:none; display:block; font-family:Arial; font-size:1em; margin-top:5px; padding:3px; }
#contact form input { width:150px; }
#contact form input.submit { cursor:pointer; float:right; width:auto; }
#contact form textarea { height:80px; width:100%; }
#contact form .focus { background:#fff; }

/* 4.8.Layer */

/* 5.Footer */
#footer { position:fixed; bottom:0; width:100%; }
#footer ul { background:#000; text-align:right; padding:5px 50px 10px 5px; }
#footer ul li { color:#888; display:inline; font-size:11px; margin:0 10px; }
#footer ul li a { color:#fff; }
#footer span { position:absolute; display:block; margin:8px 0 0 15px; color:#888; }

/* 5.1.Mentions */
#mentions { background:#000; position:fixed; bottom:50px; right:20px; padding:30px; width:30%; }
#mentions h3 { font-size:22px; margin:0 0 20px; font-weight:normal; }
#mentions a:hover { text-decoration:underline; }
#mentions .close { font-size:16px; font-weight:bold; display:block; position:absolute; top:0; right:5px; padding:10px; }
#mentions .close:hover { text-decoration:none; }

/* 6.Helpers */
.hidden { display:none !important; }
.vHidden { visibility:hidden; }
.noMargin { margin:0 !important; }
.tMargin { margin-top:10px !important; }
.bMargin { margin-bottom:10px !important; }
.bMarginLg { margin-bottom:20px !important; }
.bMarginXLg { margin-bottom:50px !important; }
.tMarginLg { margin-top:20px !important; }
.rMargin { margin-right:10px !important; }
.rMarginLg { margin-right:20px !important; }
.rMarginXLg { margin-right:50px !important; }
.nobg { background:none; }
.floatL { float:left; }
.floatR { float:right; }
.txtR { text-align:right; }
.txtC { text-align:center; }
.txtL { text-align:left; }

.linkExt:hover { text-decoration:underline; }

/* IE Alert */
.ie {background:#f44; padding:10px; font-size:1.5em; font-weight:bold; position:fixed; width:100%; z-index:999;}
.ie a {text-decoration:underline;}
.ie a:hover {text-decoration:none;}