/* 
 * styles.css
 * @author: Philippe Clairet - CSA Design
 * @Project start date: 13.may.09
 * @Project end date:
 * @Latest amend:
 */

/* reset */

body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, form, fieldset, input, select, textarea, div { padding:0; margin:0; }
body, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
body { text-align:center; } /* For IE5.5 */
li { list-style:none; }
a img, abbr { border:0; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
a.new { background:url("../_img/icons/new-window.gif") right 5px no-repeat; padding:0 12px 0 0; }

/* clearing properties */
.cleared { height:1%; }
.cleared:after { content:"."; clear:both; display:block; visibility:hidden; height:0; }
.column { float:left; }

/* STYLES */

.csaCol00 { width:130px; }
.csaCol01 { width:838px; }
.csaCol02 { width:544px; }
.csaCol02a { width:420px; }
.csaCol02b { width:120px; float:right; }
.csaCol03 { width:270px; }
.csaCol04 { width:570px; }
.csaCol05 { width:220px; }

body
{
	background:url("../_img/backgrounds/stripes.gif");	
}

.hide { display:none; }

.globalWrapper
{
	width:968px;
	margin:0 auto;
	text-align:left;
}

.headerWrapper
{
	padding:20px 0 14px 4px;
}

.logo { width:217px; height:42px; background:url("../_img/content/csa-logo.png") left top no-repeat; }
.logo a { display:block; height:1%; padding-top:27px; text-indent:-10000px; overflow:hidden; cursor:pointer; position:relative; }

.mainNav li 
{ 
	width:118px; 
	padding:0 0 12px;
	line-height:19px;
	position:relative;
}

.mainNav li a
{
	color:#cacaca;	
	padding:89px 14px 10px 0;
	font-size:87.5%;
	display:block;
	text-align:right;
}

.mainNav li a:hover
{
	color:#a4a5a5;	
}

.mainNav li a.selected
{
	color:#727373;
}

.mainNav li#home a { background:url("../_img/backgrounds/home.png") left top no-repeat; }
.mainNav li#home a:hover { background:url("../_img/backgrounds/home-rollover.png") left top no-repeat; }

.mainNav li#home a.selected, 
.mainNav li#home a.selected:hover 
{ 
	background:url("../_img/backgrounds/home-selected-icon.png") left top no-repeat; 
}

.mainNav li#portfolio a { background:url("../_img/backgrounds/portfolio.png") left top no-repeat; }
.mainNav li#portfolio a:hover { background:url("../_img/backgrounds/portfolio-rollover.png") left top no-repeat; }

.mainNav li#portfolio a.selected, 
.mainNav li#portfolio a.selected:hover
{ 
	background:url("../_img/backgrounds/portfolio-selected-icon.png") left top no-repeat; 
}

.contentStyle00Wrapper
{
	padding:4px 0 0 4px;
	background:url("../_img/backgrounds/content-bg-top.png") left top no-repeat;
}

.contentStyle00Footer
{
	width:838px;
	height:24px;
	background:url("../_img/backgrounds/content-bg-bot.png") left top no-repeat;
}

.contentStyle00
{
	position:relative;
}

.colWrapper { height:1%; }

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

#decor-00
{
	background:url("../_img/backgrounds/00.png") left top no-repeat;
	width:155px;
	height:111px;
	position:absolute;
	top:20px;
	left:20px;
}

#home-decor
{
	background:url("../_img/backgrounds/home-decor.png") left top no-repeat;
	width:383px;
	height:110px;
	position:absolute;
	right:24px;
	bottom:4px;
}

#decor-01
{
	background:url("../_img/backgrounds/01.png") left top no-repeat;
	width:133px;
	height:111px;
	position:absolute;
	top:20px;
	left:20px;
}

#portfolio-decor
{
	background:url("../_img/backgrounds/portfolio-decor.png") left top no-repeat;
	width:534px;
	height:112px;
	position:absolute;
	right:24px;
	bottom:4px;
}

.contentStyle00a
{
	padding:0 4px 0 0;	
}

.contentStyle00b
{
	position:relative;
}

.contentStyle00b h1
{
	font-size:150%;
	color:#727373;
	padding:17px 0 8px 20px;
	line-height:23px;
}

.contentStyle00b p
{
	font-size:100%;
	color:#727373;
	padding:12px 0 0 20px;
	line-height:24px;
}

.contentStyle00b
{
	padding:0 0 28px;
}

.contentStyle01 h2
{
	font-size:100%;
	color:#727373;
	padding:0 0 0 20px;
	line-height:20px;
}

.contentStyle01 h3,
.contentStyle01 p
{
	font-size:87.5%;
	color:#727373;
}

.contentStyle01 h3
{
	padding:14px 0 0 20px;
	line-height:16px;
}

.contentStyle01 p
{
	padding:2px 0 0 20px;
	line-height:20px;
}

.contentStyle01 p a
{
	color:#099dd9;
}

.contentStyle01 div.hr
{
	background:url("../_img/backgrounds/dotted00.gif") left top repeat-x;
	height:1px;
	margin:15px 20px 3px;
}

.contentStyle01 div.hr hr
{
	display:none;
}

.contentStyle02
{
	margin-bottom:-23px;
}

.contentStyle02 h2
{
	font-size:112.5%;
	color:#727373;
	padding:15px 0 24px 16px;
	line-height:22px;
}

.contentStyle03Wrapper
{
	padding:0 0 0 12px;
}

.contentStyle03
{
	position:relative;
	background:url("../_img/backgrounds/home-work-item.png") left top no-repeat;
	margin:0 0 -12px;
	padding:4px 4px 28px;
}

.contentStyle03 a
{
	display:block;	
}

.contentStyle03 a span
{
	background:url("../_img/backgrounds/work-item-mask.png") left top repeat;
	position:absolute;
	top:5px;
	left:5px;
	width:248px;
	height:123px;
}

.contentStyle03 a:hover span
{
	display:none;	
}

.contentStyle03 img
{
	display:block;
}

.listStyle00
{
	position:absolute;
	top:-8px;
	left:-6px;
	height:1%;
	z-index:10;
}

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

.listStyle00 li
{
	padding:0 10px 0 0;
	text-indent:-100000px;
	float:left;
	width:19px;
	position:relative;
	height:19px;
}

.listStyle00 li.consult
{
	background:url("../_img/icons/consultancy.png") left top no-repeat;
}

.listStyle00 li.dev
{
	background:url("../_img/icons/dev.png") left top no-repeat;
}

.listStyle00 li.design
{
	background:url("../_img/icons/design.png") left top no-repeat;
}

.listStyle00 li.marketing
{
	background:url("../_img/icons/marketing.png") left top no-repeat;
}

.tooltipWrapper
{
	position:absolute;
	top:21px;
	width:81px;
	display:block;
}

.devTooltip, .designTooltip, .marketingTooltip { left:1px; }
/*.designTooltip { left:-28px; }
.marketingTooltip { left:-57px; }
*/
.tooltipContent
{
	position:relative;
	display:block;
	float:left;
}
.tooltipFooter
{
	height:4px;
	width:81px;
	display:block;
}

.tooltipContent span
{
	color:#fff;
	font-size:68.75%;
	display:block;
	text-align:center;
	padding:13px 10px 11px;
	text-indent:0;
	margin-right:-2px;
}

.devTooltip .tooltipContent { background:url("../_img/backgrounds/dev-tooltip-top.gif") left top no-repeat; }
.devTooltip .tooltipContent span { background:url("../_img/backgrounds/dev-tooltip-right.gif") right top no-repeat; }

.designTooltip .tooltipContent { background:url("../_img/backgrounds/design-tooltip-top.gif") left top no-repeat; }
.designTooltip .tooltipContent span { background:url("../_img/backgrounds/design-tooltip-right.gif") right top no-repeat; }

.marketingTooltip .tooltipContent { background:url("../_img/backgrounds/marketing-tooltip-top.gif") left top no-repeat; }
.marketingTooltip .tooltipContent span { background:url("../_img/backgrounds/marketing-tooltip-right.gif") right top no-repeat; }
 
.consultingTooltip .tooltipContent { background:url("../_img/backgrounds/consulting-tooltip-top.gif") left top no-repeat; }
.consultingTooltip .tooltipContent span { background:url("../_img/backgrounds/consulting-tooltip-right.gif") right top no-repeat; }

.workPanelWrapper
{
	padding:16px 16px 0;
	position:relative;
	height:1%;
	z-index:11;
}

.workPanelContent
{
	background:url("../_img/backgrounds/work-panel-top.png") left top no-repeat;
	float:left;
	width:802px;
	padding:0 0 14px;
}

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

.workPanelContent img
{
	display:block;
	margin:12px 0 0 11px;
}

.workPanelContent h2,
.workPanelContent h3,
.workPanelContent p
{
	color:#727373;
	font-size:87.5%;
}

.workPanelContent h2
{
	padding:23px 20px 0 13px;
	line-height:14px;
}

.workPanelContent h3
{
	padding:15px 20px 0 13px;
	line-height:14px;
}

.workPanelContent p
{
	padding:4px 20px 0 13px;
	line-height:17px;
}

.workPanelContent p a
{
	color:#099dd9;	
	position:relative;
	/*text-decoration:underline;*/
}

.workPanelFooter
{
	background:url("../_img/backgrounds/work-panel-bot.png") left top no-repeat;
	width:802px;
	height:10px;
	float:left;
}

.closeButton
{
	position:absolute;
	top:7px;
	right:11px;
	z-index:12;
}

.closeButton a
{
	display:block;
	background:url("../_img/backgrounds/close-button.png") left top no-repeat;
	text-indent:-10000px;
	overflow:hidden;
	width:24px;
	height:24px;
}

.footerWrapper
{
	padding:0 0 0px;	
	height:1%;
}

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

ul.webLinks { float:left; padding:0 0 0 133px; }
ul.webLinks li.twitter { padding:2px 0 0; }
ul.webLinks li a, ul.webLinks li a img { display:block; }

ul.boring { float:right; }

ul.boring li
{
	float:left;	
	font-size:68.75%;
	color:#b1b1b1;
	padding:0 8px 0 5px;
	background:url("../_img/backgrounds/footer-dash.gif") right top no-repeat;
}

ul.boring li.copy, ul.boring li.css { background:url("../_img/backgrounds/footer-pipe.gif") right top no-repeat; padding:0 5px; }
ul.boring li.email { background:none; padding:0 0 0 5px; }

ul.boring li a
{
	display:block;
	color:#b1b1b1;
}

.dateWrapper
{
	padding:38px 0 0 20px;
	position:relative;
}

.date
{
	background:url("../_img/icons/calendar.png") left top no-repeat;
	width:58px;
	position:absolute;
	right:7px;
}

.date span { display:block; }
.date .month { font-size:75%; color:#f0f0f0; padding:2px 0 0; text-align:center; width:46px; position:relative; }
.date .year { position:absolute; top:4px; right:-7px; color:#727373; font-size:68.75%; line-height:11px; }
.date .day { font-size:112.5%; width:46px; text-align:center; padding:9px 0 12px; }

.wrapperExt00
{
	padding:0 0 0 4px;
}

.wrapperExt00 .csaCol03
{
	margin-bottom:-28px;	
}

.contentStyle04a
{
	padding:0 24px 16px 20px;	
}

.contentStyle04a h1
{
	font-size:150%;
	color:#727373;
	padding:17px 0 0;
	line-height:23px;
	float:left;
}

.contentStyle04b
{
	height:1%;
	background:url("../_img/backgrounds/work-tab-border.gif") left bottom repeat-x;	
}

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

ul.listStyle01
{
	float:right;
	padding:20px 0 0;
}	

ul.listStyle01 li
{
	float:left;	
	font-size:81.25%;
	padding:0 0 0 4px;
}

ul.listStyle01 li a
{
	display:block;
	padding:0 0 0 4px;
	color:#666;
	background:url("../_img/backgrounds/work-tab-left.gif") left top no-repeat;
}

ul.listStyle01 li a span
{
	padding:5px 19px 4px 15px;
	display:block;	
	background:#b3b3b3 url("../_img/backgrounds/work-tab-right.gif") right top no-repeat;
}

ul.listStyle01 li.selected a
{
	background:url("../_img/backgrounds/work-tab-selected-left.gif") left top no-repeat;
}

ul.listStyle01 li.selected a span
{
	background:url("../_img/backgrounds/work-tab-selected-right.gif") right top no-repeat;
}