/* --------------------------------------------------------
    Main stylesheet
    Site: LePortfolio
    Created by: Stéphanie Léveillé - stef@annotea.com
    Filename: css/main.css
   -------------------------------------------------------- */
   
/* --------------------------------------------------------
    COLORS
    Yellow:    #eedaa7
    Grey:      #b8b8b7
    Dark grey  #636363
   -------------------------------------------------------- */

* {
	border: 0;
	margin: 0;
	padding: 0;
}

:focus { outline: none;}

body {
	background: #FFF url(../img/background.jpg) repeat;
	color: #636363;
	font: 62.5% Verdana, Arial, Helvetica, Tahoma, sans-serif;
}

/* -------------------------------------------*/
/* --------------->>> Text <<<----------------*/
/* -------------------------------------------*/

p { 
	line-height: 1.6em;
	padding-bottom: 1.4em; 
}

p.date { color: #eedaa7; }

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

a#enlarge {
	float: right; margin: 0 10px;
}

*+html a#enlarge, * html a#enlarge { margin: 0 25px 0 0;}

#contactPage #mainContent a { color: #636363; text-decoration: underline;}

.padding { padding: 30px !important; }
.noPaddingLeft {padding-left: 0 !important; }
.fLeft { float: left !important;}
.last {background: none !important; }

#info {
	color: #9a6e48;
	font-family: Georgia;
	font-size: 2.6em;
	line-height: 1em;
	padding-bottom: 10px;
}

h2 { 
	color: #9a6e48;
	font-size: 1.8em;
	font-weight: bold;
}

#mainContent.info h3 { color: #000;font-size: 1.1em;}


/* -------------------------------------------*/
/* ------------->>> Chiffres <<<--------------*/
/* -------------------------------------------*/
.nbpages { 
	background: url(../img/tMoreSamples.gif) left center no-repeat;
	bottom: 55px;
	height: 20px;
	margin-left: 10px;
	padding-left: 80px;
	position: absolute;
}

a.nb1, a.nb2, a.nb3, a.nb4, a.nb5, a.nb6, a.nb7, a.nb8 {
	display: block;
	float: left;
	height: 20px;
	margin-right: 2px;
	text-indent: -1000px;
	width: 24px;
}
a.nb1 { background: url(../img/numbers/1.gif) left top no-repeat; }
a.nb2 { background: url(../img/numbers/2.gif) left top no-repeat; }
a.nb3 { background: url(../img/numbers/3.gif) left top no-repeat; }
a.nb4 { background: url(../img/numbers/4.gif) left top no-repeat; }
a.nb5 { background: url(../img/numbers/5.gif) left top no-repeat; }
a.nb6 { background: url(../img/numbers/6.gif) left top no-repeat; }
a.nb7 { background: url(../img/numbers/7.gif) left top no-repeat; }
a.nb8 { background: url(../img/numbers/8.gif) left top no-repeat; }

a.nb1:hover, a.nb2:hover, a.nb3:hover, a.nb4:hover, a.nb5:hover, a.nb6:hover, a.nb7:hover, a.nb8:hover,
a.nb1.done, a.nb2.done, a.nb3.done, a.nb4.done, a.nb5.done, a.nb6.done, a.nb7.done, a.nb8.done
{ background-position: left bottom; }

#listNumber { bottom:14px; height: 20px;  position: absolute; }

/* -------------------------------------------*/
/* ------------>>> Structure <<<--------------*/
/* -------------------------------------------*/

#container {
	background: url(../img/back-content.png) no-repeat !important;
	height: 642px;
	margin: 60px auto 0;
	overflow: hidden;
	width: 832px;
}

* html #container {	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='/img/back-content.png');
 }

/* -------------------------------------------*/
/* -------------->>> Header <<<---------------*/
/* -------------------------------------------*/

#header { 
	margin: 30px 30px 12px;
	position: relative; 
}

h1 a {
	background: url(../img/logo.png) no-repeat !important;
	display: block;
	height: 45px;
	text-indent: -1000px;
	width: 230px;
}

* html h1 a { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='/img/logo.png'); }

#menu { 
	list-style: none; 
	position: absolute;
	right: 0;
	top: 10px;
}

* html #menu { right: 20px; }

#menu li {
	background: url(../img/mSeparator.gif) right center no-repeat;
	display: inline;
	float: left;
	height: 21px;
	margin: 0 7px 0 0;
	padding: 0 7px 0 0;
	width: auto;
}

#menu li.last {
	background: none;
	margin: 0;
	padding: 0;
}

#menu li a {
	background-position: left top;
	display: block;
	float: left;
	height: 21px;
	text-indent: -1000px;
}

#menu li a:hover { background-position: left bottom; }

#menu li#mWebDesign a {
	background-image: url(../img/mWebDesign.gif);
	width: 75px;
}

#menu li#mBranding a {
	background-image: url(../img/mBranding.gif);
	width: 60px;
}

#menu li#mClients a {
	background-image: url(../img/mClients.gif);
	width: 46px;
}

#menu li#mAbout a {
	background-image: url(../img/mAbout.gif);
	width: 42px;
}

#menu li#mContact a {
	background-image: url(../img/mContact.gif);
	width: 52px;
}

#menu li#mUX a {
	background-image: url(../img/mUX.gif);
	width: 22px;
}

#UXPage #menu li#mUX a,#webDesignPage #menu li#mWebDesign a, #brandingPage #menu li#mBranding a,
#clientsPage #menu li#mClients a, #aboutPage #menu li#mAbout a, #contactPage #menu li#mContact a
{ background-position: left bottom; }

ul#smenu {
	list-style: none;
	margin: -20px 0 20px;
}

ul#smenu li {
	background: url(../img/separator.gif) right center no-repeat;
	display: inline;
	margin: 0 10px 0 0;
}

ul#smenu li a {
	color: #636363;
	font-size: 1.1em;
	font-weight: bold;
	padding: 0 10px 0 0;
	
}

ul#smenu li.active a, ul#smenu li a:hover {color: #976f46; }

/* -------------------------------------------*/
/* ------------->>> Content <<<---------------*/
/* -------------------------------------------*/

#mainContent {
	background: url(../img/back-content-int.gif) no-repeat;
	height: 340px;
	margin: 0 30px;
	position: relative;
	width: 772px;
}

#mainContent.info{
	background: url(../img/back-content-int2.gif) no-repeat !important;
} 

#homePage #mainContent { background: none; }

#txtHome {
	background: url(../img/txt-home.gif) no-repeat;
	height: 78px;
	text-indent: -2000px;
	width: 611px;
}

.listPortfolio { 
	clear: left;
	list-style: none; 
	width: 350px;
}

.listPortfolio li {
	display: inline;
	float: left;
	margin: 7px 7px 0 0;
}

.listPortfolio li a {
	background: url(../img/back-pic.gif) no-repeat;
	display: block;
	float: left;
	height: 58px;
	width: 55px;
}

.listPortfolio li a img {
	display: block;
	padding: 2px 0 0 1px;
}

.col1 { 
	display: inline;
	float: left;
	width: 350px;
}
.col2 { 
	float: left;
	height: 300px;
	position: relative;
	width: 362px;
}

#clientsPage .col1 { width: 150px; margin-right: 31px; }
#clientsPage .col2 { width: 531px; }

#showImg {
	background: url(../img/back-th.gif) no-repeat;
	height: 278px;
	margin-top: -10px;
	padding: 15px 0 0 14px;
	position: relative;
	width: 325px;
}

#showImg img.port {
	border: 1px solid #fff;
	display: block;
	margin-bottom: 10px;
}

#btns {
	bottom: 10px;
	position: absolute;
}

/* -------------------------------------------*/
/* -------------->>> list <<<---------------*/
/* -------------------------------------------*/
ul.list4cols {
	list-style: none;
	margin: 30px 0 0;
}

ul.list4cols li {
	float: left;
	font-weight: bold;
	height: 20px;
	width: 130px;
}

ul.accolade {float: left; width: 300px; margin: 0 0 0 20px;}
ul.accolade li { margin: 0 0 5px;}

/* -------------------------------------------*/
/* -------------->>> footer <<<---------------*/
/* -------------------------------------------*/

#footer {
	background: url(../img/back-footer.png) !important;
	color: #b8b8b7;
	height: 146px;
	margin: 30px 30px 0;
	overflow: hidden;
	width: 769px;
}

* html #footer { margin-top: 0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='/img/back-footer.png');}

#homePage #footer {
	background: url(../img/back-footer.png) !important;
}

* html #homePage #footer {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='/img/back-footer.png');}


#footer p { padding: 0; }

#more { 
	display: inline;
	float: left;
	padding: 25px 40px 0 20px;
	width: 307px;
}

#news {
	float: left;
	padding: 25px 20px 0;
	width: 355px;
}

#homePage #news {
	float: left;
	padding: 25px 20px 0;
	width: 210px;
}

#homePage #cisco {
	background: url(../img/CLIENTS.gif) center no-repeat;
	float: left;
	height: 146px;
	width: 150px;
}

/* -------------------------------------------*/
/* --------------->>> other <<<---------------*/
/* -------------------------------------------*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */