/******************************************************************************/
/*       <link href="css/styles.css" type="text/css" rel="stylesheet" />      */
/******************************************************************************/
/*                            styles for CDG              2010                */
/******************************************************************************/ 
@import url("reset.css");


HTML, BODY, .basic{
	height: 100%;
}


.basis{
	margin-bottom: -23px;
	display: table;
	height: auto;
	height: 100%;
	min-height: 100%;
	width: 100%;
}

.wrapper{
	height: 100%;
	width: 840px;
	margin: auto;
}

#leftpanel{
	width: 286px;	/* width of left column */
	float: left;
}
#rightpanel{
	width: 513px;	/* width of right column */
	float: right;
}

#footer{
	height: 22px;	/* height of footer */
}


/*needed to make room for footer*/
.clearfooter{
	clear: both;
	height: 23px;	/* height of footer */
}
* > HTML .clearfooter {
	float: left;
	width: 100%;
}/* ie mac styles */


/*** standard classes ***********************************************************************************************/
.clear{
	clear:both;
	display: block;
}






/*** follow sections can edit *****************************************************************************/
BODY
{
	background: #ffffff url(../images/topline-bg.png) repeat-x 0px 0px;
	behavior: url("js/csshover.htc");
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #3a404e;
}

A,
A:visited
{
	color: #ff2a00;
	border-bottom: 1px dotted #ff2a00;
	text-decoration: none;
}
A:hover
{
	color: #ff2a00;
	border-bottom: 1px solid #ff2a00;
	border-color: #ff2a00;
}
a.imglink {border-bottom: none;}
STRONG, B
{
	font-weight: bold;
}

.basis
{
	background: url(../images/separator.png) no-repeat 286px 15px;
	width: 840px;
	margin-left: auto;
	margin-right: auto;
}



/*** leftpanel ***********************************************************/
#leftpanel
{
	font-size: 11px;
	padding-top: 72px;
	padding-bottom: 50px;
}
A.logo,
A:visited.logo
{
	padding-left: 20px;
	font-size: 0px;
	margin-bottom: 30px;
	display: block;
	width: 227px;
	height: 127px;
	border: none;
}

/*** navigation ***/
#navigation
{
	height: 39px;
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	background: #ebecf2;
	margin-bottom: 30px;
}
#navigation UL
{
	padding: 4px 0px 0px 0px;
}
#navigation UL LI
{
	float: left;
	padding: 0px 0px 0px 23px;
}
#navigation UL LI A,
#navigation UL LI A:visited
{
	border: none;
	display: block;
	height: 31px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border: none;
	outline: none;
}
#navigation UL LI A:hover
{
	background-position: 0px -62px;
}
#navigation UL LI A:active,
#navigation UL LI.active A,
#navigation UL LI.active A:visited,
#navigation UL LI.active A:hover,
#navigation UL LI.active A:active
{
	background-position: 0px -31px;
	cursor: default;
}
#navigation UL LI#nav-1 A,
#navigation UL LI#nav-1 A:visited,
#navigation UL LI#nav-1 A:hover,
#navigation UL LI#nav-1 A:active
{
	width: 60px;
	background-image: url(../images/nav-home.png);
}
#navigation UL LI#nav-2 A,
#navigation UL LI#nav-2 A:visited,
#navigation UL LI#nav-2 A:hover,
#navigation UL LI#nav-2 A:active
{
	width: 56px;
	background-image: url(../images/nav-work.png);
}
#navigation UL LI#nav-3 A,
#navigation UL LI#nav-3 A:visited,
#navigation UL LI#nav-3 A:hover,
#navigation UL LI#nav-3 A:active
{
	width: 74px;
	background-image: url(../images/nav-contact.png);
}





#leftpanel .cnt
{
	width: 227px;
	padding: 0px 0px 0px 20px;
	line-height: 17px;
}
#leftpanel .cnt P,
#leftpanel .cnt UL
{
	padding: 0px 0px 12px 0px;
}
#leftpanel .cnt UL LI
{
	background: url(../images/li-bg.png) no-repeat 0px 6px;
	padding: 0px 0px 0px 12px;
}

/*** testimonials ***************/
#leftpanel .testimonial
{
	background: url(../images/testimonial-bg.png) no-repeat 0px 0px;
}
#leftpanel .cnt UL#testimonials-animated
{
}
#leftpanel .cnt UL#testimonials-animated LI
{
	background: none;
	padding: 0px;
	font-size: 11px;
	line-height: 16px;
	padding: 15px 18px 0px 18px;
	z-index: 100;
}
#leftpanel .cnt UL#testimonials-animated LI SMALL
{
	display: block;
	font-size: 11px;
	text-align: right;
	margin: 15px 0px 0px 0px;
}
.control-panel
{
	top: 235px;
	left: 0px;
}
.control-panel A
{
	width: 15px;
	height: 15px;
	display: block;
	float: left;
	background-repeat: no-repeat;
	background-position: 50% 0px;
	outline: none;
	text-indent: -9999px;
	border: none;
}
.control-panel A.back-button,
.control-panel A:visited.back-button
{
	background-image: url(../images/controls-prev.png);
}
.control-panel A.pause-button,
.control-panel A:visited.pause-button
{
	background-image: url(../images/controls-pause.png);
	padding: 0px 2px 0px 2px;
}
.control-panel A.next-button,
.control-panel A:visited.next-button
{
	background-image: url(../images/controls-next.png);
}
.control-panel A:hover.back-button,
.control-panel A:hover.pause-button,
.control-panel A:hover.next-button
{
	background-position: 50% -15px;
}






/*** rightpanel **********************************************************/
#rightpanel
{
	padding: 164px 0px 50px 0px;
	position: relative;
}
#rightpanel_home
{
	width: 513px;	/* width of right column */
	float: right;
	padding: 113px 0px 50px 0px;
	position: relative;
}

#rightpanel_home P
{
	padding: 0px 0px 10px 0px;
	line-height: 20px;
}

#rightpanel P
{
	padding: 0px 0px 10px 0px;
	line-height: 20px;
}


/*** titles ****************/
H1, H2
{
	text-indent: -9999px;
}
H1.welcome
{
	margin: 0px 0px 8px 0px;
	background: url(../images/h1-website-interface-design-monaco.png) no-repeat 0px 0px;
	height: 46px;
}
H1.work
{
	position: absolute;
	top: 70px;
	right: 0px;
	background: url(../images/h1-work.png) no-repeat 0px 0px;
	width: 120px;
	height: 38px;
}
H1.contact
{
	position: absolute;
	top: 70px;
	right: 0px;
	background: url(../images/h1-contact.png) no-repeat 0px 0px;
	width: 178px;
	height: 37px;
}
H1.form
{
	position: absolute;
	top: 70px;
	right: 0px;
	background: url(../images/h1-form.png) no-repeat 0px 0px;
	width: 113px;
	height: 37px;
}
H2.f-project
{
	margin: 30px 0px 10px 0px;
	background: url(../images/h2-featured-project.png) no-repeat 0px 0px;
	height: 21px;
}
H2.work-web-interface
{
	background: url(../images/h2-web-interface.png) no-repeat 0px 0px;
	height: 21px;
	margin-bottom: 10px;
}
H2.work-logo-identity
{
	background: url(../images/h2-logo-identity.png) no-repeat 0px 0px;
	height: 21px;
	margin-bottom: 10px;
}
H2.work-other
{
	background: url(../images/h2-other.png) no-repeat 0px 0px;
	height: 21px;
	margin-bottom: 10px;
}
H2.get-in-touch
{
	background: url(../images/h2-get-in-touch.png) no-repeat 0px 0px;
	height: 21px;
	margin-bottom: 0px;
}
H2.thank-you
{
	background: url(../images/h2-thank-you.png) no-repeat 0px 0px;
	height: 21px;
	margin-bottom: 0px;
}









/*** f-project ***/
.f-project
{
}
.f-project .pr-image
{
	float: left;
	width: 160px;
}
.f-project .pr-info
{
	float: right;
	width: 345px;
	font-size: 11px;
	line-height: 17px;
	padding: 30px 0px 0px 0px;
}
.f-project H3
{
	font-size: 12px;
	line-height: 20px;
}


/*** portfolio *****************/
.portfolio
{
	margin: 0px 0px 25px 0px;
}
.portfolio .section
{
	height: 80px;
	/*overflow: hidden;*/
	float: left;
	background: url(../images/section-bg.png) no-repeat 100% 0px;
	padding: 0px 4px 0px 0px;
	margin: 0px 10px 10px 0px;
}
.portfolio .section .thumb
{
	width: 72px;
	height: 72px;
	float: left;
	padding: 4px 0px 4px 4px;
	border: none;
}
.portfolio .section .first
{
	background: url(../images/section-left-bg.png) no-repeat 0px 0px;
}
.portfolio .section-with-1-thumb { width: 76px; }
.portfolio .section-with-2-thumb { width: 152px; }
.portfolio .section-with-3-thumb { width: 228px; }
.portfolio .section-with-4-thumb { width: 304px; }
.portfolio .section-with-5-thumb { width: 380px; }





#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #ffffff;
	background-color: #3a404e;
	padding: 5px;
	opacity: 0.85;
	color: #ffffff;
	font-size: 11px;
}
#tooltip h3, #tooltip div { margin: 0; }



/*** contact-form *********************/
#contact-form
{
	margin: 10px 0px 0px 0px;
}
#contact-form LABEL
{
	font-size: 12px;
	font-weight: bold;
	display: block;
	margin: 0px 0px 5px 0px;
}
#contact-form INPUT,
#contact-form TEXTAREA
{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: 3a404e;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border: none;
	margin-bottom: 20px;
}
#contact-form INPUT
{
	width: 220px;
	height: 17px;
	padding: 6px 5px 5px 5px;
	background-image: url(../images/input-bg.png);
}
#contact-form INPUT.active
{
	background-position: 0px -32px;
}
#contact-form TEXTAREA
{
	width: 503px;
	height: 162px;
	padding: 5px;
	background-image: url(../images/textarea-bg.png);
}
#contact-form TEXTAREA.active
{
	background-position: 0px -178px;
}
#contact-form BUTTON
{
	text-indent: -9999px;
	outline: none;
	background: transparent url(../images/btn-submit-bg.png) no-repeat 0px 0px;
	border: none;
	width: 82px;
	height: 37px;
	cursor: pointer;
	float: right;
	margin: 10px 0px 0px 0px;
}
#contact-form BUTTON:hover
{
	background-position: 0px -37px;
}
#contact-form BUTTON.active
{
	background-position: 0px -74px;
}

#contact-form .captcha
{
	float: left;
}
#contact-form .captcha INPUT
{
	float: left;
	margin-right: 10px;
}
#contact-form .captcha IMG
{
	float: left;
}

#errormsg
{
	display: none;
	border: 1px solid #F7AEAE;
	color: #990404;
	background: #fee0e0;
	padding: 5px;
	margin-bottom: 10px;
}




/*** footer **************************************************************/
#footer
{
	background: #4c6d9f;
	border-top: 1px solid #394c69;
	color: #97b4e0;
	text-align: right;
	font-size: 10px;
	height: 18px;
	padding-top: 4px;
}

.float-left {float: left; width: 45%; text-align: left;}
.float-right {float: right; width: 45%; text-align: right;}

/*** language version button **************************************************************/

#lang_fr {position: absolute; right: 0; top: 164px; width: 20px; height: 141px;}
#lang_fr a, a:hover {border: none;}

/*** homepage splash **************************************************************/

#welcome {width: 513px; height: 57px; position: relative; background: url(../images/professional-design.jpg) no-repeat; margin-bottom: 15px; padding-top: 176px;}
#welcome .button {width: 139px; height: 34px; background: url(../images/button_work.png) no-repeat; position: relative; margin-left: 22px;}
#welcome .button:hover {background: url(../images/button_work_h.png) no-repeat; cursor: pointer;}

#preload-images {position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; display: none; visibility: hidden}

/*** facebook **************************************************************/

#fb {width: 227px;}
#fb .fb_l {float: left; width: 127px;}
#fb .fb_r {float: right; width: 80px;}