/* CSS Document */

body  {
	margin : 0 0 0 0;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 12px;
	color: #4C3E3E;
	background:url(../images/body_bg.gif) top center repeat-x;
	line-height: 15px;
}

a {
	outline: none;
	color: #990000;
}

h1 {
	font-family : Georgia, "Times New Roman", Times, serif;
	font-size : 24px;
	font-weight : normal;
	margin: 0;
}

h2 {
	font-family : Arial, Helvetica, sans-serif;
	font-weight: 500;
	color: #fff;
	font-size: 180%;
	padding: 55px 0 40px 0;
	margin: 0;
}

h3 {
	font-family : Arial, Helvetica, sans-serif;
	font-weight:100;
	font-size: 140%;
	margin: 0;
	padding: 0 0 15px 0;
	color: #319C3E;
}

p {
	padding: 0;
	margin: 0;
}

#container {
	margin: 0 auto 0 auto;
	width:950px;	
}

.homepage-bg {
	float: left;	
	background: url(../images/home-bg.gif) no-repeat top;
	width: 950px;
	height: 100%;
}

.subpage-bg {
	float: left;
	background: url(../images/sub-bg.gif) no-repeat top;
	width: 950px;
	height: 100%;
}

label{
	float: left;
	width: 170px;
	padding: 0 0 0 30px;
}

.button-style {
	margin: 0 0 0 200px;
}



/************************************/
/*             Header               */
/************************************/

#header {
	float: left;
	position: relative;
	width:950px;
	height:186px;
}

h1.logo {
	position: absolute;
	left: 81px;
	top: 16px;
	margin : 0 0 0 0;
	padding: 0 0 0 0;
	background: url(../images/logo.gif) no-repeat;
	width: 151px;
	height: 166px;
	text-indent: -1500px;
}

.language {
	position: absolute;
	right: 16px;
	top: 54px;
	background: url(../images/language_selection_bg.gif) no-repeat;
	height: 53px;
	width: 286px;
	color:#FFFFFF;
}

.language p{
	float:left;
	padding: 18px 0 0 20px;
	font-size: 90%;
}

.language img{
	float: right;
	margin: 15px 35px 0 0;
}

ul.navigation  {
	position: absolute;
	top: 137px;
	right: 9px;
	margin: 0;
	padding: 0;
	width: 620px;
	height: 50px;
}

ul.navigation li {
	margin : 0 0 0 0;
	padding : 0 0 0 0;
	float:left;
	list-style:none;
}

ul.navigation li.nav_home a {
background : url(../images/nav.gif) no-repeat 0 0;
text-indent : -1500px;
display : block;
float : left;
width : 75px;
height: 50px;
}

ul.navigation li.nav_benefit a {
background : url(../images/nav.gif) no-repeat -76px 0;
text-indent : -1500px;
display : block;
float : left;
width : 154px;
height: 50px;
}


ul.navigation li.nav_method a {
background : url(../images/nav.gif) no-repeat -230px 0;
text-indent : -1500px;
display : block;
float : left;
width : 87px;
height: 50px;
}

ul.navigation li.nav_services a {
background : url(../images/nav.gif) no-repeat -317px 0;
text-indent : -1500px;
display : block;
float : left;
width : 96px;
height: 50px;
}

ul.navigation li.nav_portfolio a {
background : url(../images/nav.gif) no-repeat -413px 0;
text-indent : -1500px;
display : block;
float : left;
width : 93px;
height: 50px;
}

ul.navigation li.nav_contact a {
background : url(../images/nav.gif) no-repeat -509px 0;
text-indent : -1500px;
display : block;
float : left;
width : 115px;
height: 50px;
}

ul.navigation li.nav_home a:hover {
background-position: 0 -50px;
}

ul.navigation li.nav_benefit a:hover {
background-position: -76px -50px;
}

ul.navigation li.nav_method a:hover {
background-position: -230px -50px;
}

ul.navigation li.nav_services a:hover {
background-position: -317px -50px;
}

ul.navigation li.nav_portfolio a:hover {
background-position: -413px -50px;
}

ul.navigation li.nav_contact a:hover {
background-position: -509px -50px;
}



/* French Navigation */


ul.navigation li.nav_home_fr a {
background : url(../images/nav-fr.gif) no-repeat 0 0;
text-indent : -1500px;
display : block;
float : left;
width : 64px;
height: 50px;
}

ul.navigation li.nav_benefit_fr a {
background : url(../images/nav-fr.gif) no-repeat -65px 0;
text-indent : -1500px;
display : block;
float : left;
width : 221px;
height: 50px;
}


ul.navigation li.nav_method_fr a {
background : url(../images/nav-fr.gif) no-repeat -286px 0;
text-indent : -1500px;
display : block;
float : left;
width : 74px;
height: 50px;
}

ul.navigation li.nav_services_fr a {
background : url(../images/nav-fr.gif) no-repeat -360px 0;
text-indent : -1500px;
display : block;
float : left;
width : 72px;
height: 50px;
}

ul.navigation li.nav_portfolio_fr a {
background : url(../images/nav-fr.gif) no-repeat -432px 0;
text-indent : -1500px;
display : block;
float : left;
width : 70px;
height: 50px;
}

ul.navigation li.nav_contact_fr a {
background : url(../images/nav-fr.gif) no-repeat -504px 0;
text-indent : -1500px;
display : block;
float : left;
width : 119px;
height: 50px;
}

ul.navigation li.nav_home_fr a:hover {
background-position: 0 -50px;
}

ul.navigation li.nav_benefit_fr a:hover {
background-position: -65px -50px;
}

ul.navigation li.nav_method_fr a:hover {
background-position: -286px -50px;
}

ul.navigation li.nav_services_fr a:hover {
background-position: -360px -50px;
}

ul.navigation li.nav_portfolio_fr a:hover {
background-position: -432px -50px;
}

ul.navigation li.nav_contact_fr a:hover {
background-position: -504px -50px;
}

/************************************/
/*           Side Panel             */
/************************************/

#side-panel {
	float: left;
	width: 290px;
	margin: 0 7px;
}

#side-panel img{
	margin: 0 26px 0 26px;
}

#side-panel img.gallerypic{
	margin: 0 26px 27px 26px;
}

h2.all-inclusive-packge {
	background: url(../images/all-inclusive-package.gif) no-repeat;
	width: 290px;
	height: 54px;
	text-indent: -1500px;
	padding: 0;
	margin: 0;
}

h2.site-clef-en-main {
	background: url(../images/Site-Clef-en-Main.gif) no-repeat;
	width: 290px;
	height: 54px;
	text-indent: -1500px;
	padding: 0;
	margin: 0;
}

.package {
	width: 290px;
	background: url(../images/package-bottom-bg.gif) no-repeat bottom;
	padding: 0 0 82px 0;
	background-color: #C6C6A5;
}

.package strong{
	padding: 0 0 0 30px;
	line-height: 20px;
}

ul.catList{
	margin: 0;
	padding: 20px 0 0 0;
	background:url(../images/package-top-bg.gif) no-repeat;
}

ul.catList li{
	margin: 0 0 0 30px;
	padding: 2px 0;
	list-style-image:url(../images/arrow.gif);
}

/************************************/
/*             Content              */
/************************************/
#page-content {
	float: left;
	width:610px;
	padding: 0 0 30px 18px;
}

.flash-file {
	width: 578px;
	height: 336px;
	padding: 9px 12px 28px 16px;
}

h2.homepage {
	background: url(../images/calliot-technology-solutions.gif) no-repeat;
	width: 606px;
	height: 54px;
	text-indent: -1500px;
	padding: 20px 0 0 0;
}

ul.icon {
	margin: 0;
	padding: 0;
}

ul.icon li{
	color: #8B9157;
	float: left;
	width: 202px;
	list-style: none;
	text-align: center;
}

ul.portfolio {
	margin: 0;
	padding: 0;
}

ul.portfolio li{
	float:left;
	width: 606px;
	padding: 20px 0 20px 0;
	margin: 0;
	list-style:none;
	border-bottom: dotted 1px #006600;
}

img.left {
	float:left;
	margin: 0 20px 0 5px;
	padding: 1px;
	background:#AFE57E;
}

img.right {
	float:right;
	margin: 0 0 0 5px;
}

.feature {
	color: #319C3E;
}

a.arrow-link {
	padding: 0 0 0 20px;
	color: #319C3E;
	background:url(../images/arrow-portfolio.gif) no-repeat;
	text-decoration: none;
}

a.arrow-link:hover{
	background:url(../images/arrow-portfolio-hover.gif) no-repeat;
	color:#7B8A6C;
}

/************************************/
/*              Footer              */
/************************************/

#footer {
	background: url(../images/footer-bg.gif) repeat-x;
	float: left;
	text-align: right;
	color: #246224;
	padding: 6px 10px 0 0;
	font-size:90%;
	width:940px;
	height:73px;
}

/************************************/
/*              Jquery              */
/************************************/

#products img {
	margin:0 0 10px 0;	
	cursor:pointer;	
}

div.description {
	background:url(../images/method-bg.jpg);
	border:2px solid #ccc;	
	width:560px;
	height: 250px;
	min-height:140px;
	display:none;
	margin-top:17px;
	-moz-border-radius:4px;
	padding:0 20px;
}

div.description div.arrow {
	width:34px;
	height:34px;
	background:transparent url(../images/yellow.png) repeat scroll 0 -68px;
	margin-top:-28px;
	margin-left:20px;
}

#design div.arrow {
	margin-left:145px;	
}

#configure div.arrow {
	margin-left:265px;	
}

#test div.arrow {
	margin-left:385px;	
}

#deploy div.arrow {
	margin-left:510px;	
}