/* CSS Document */

html {font-size:100%}
body {background: #ffa52f url(../images/page-bg.gif) repeat-x; font: .76em Arial, Helvetica, sans-serif; color:#405900;}
* {margin:0; padding:0}
h1, h2, h3, h4 { margin: 6px 0 0 0; padding:0; color:#6f8731; font-weight:normal}
h1 {font-size: 1.8em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.4em;}
h4,h5,h6 {font-size: 1.2em;}
a { color:#fe7800; text-decoration:underline;}
a:hover {text-decoration:none}
p { margin: 3px 0; padding: 3px 0;}
ul,ol { margin: 5px 0 5px 5px; padding: 3px 0 3px 20px;}

/* Main layout */
#layout {margin: 5px auto; width:791px;}
#mainBg { padding-bottom:5px; background:url(../images/main_bg.png) repeat-y 0 0;}

/* Top Layout */
#topLayout { position:relative; height:222px; overflow:hidden;}
.topLayout {background:url(../images/top-logo_landing.png) no-repeat 0 0;}
.topLayoutEn { background:url(../images/top-logo_landing-en.png) no-repeat 0 0;}
#homeLink { position:absolute; top:30px; left:20px; display:block; width: 160px; height:100px;}
#topLayout #topContentHome, #topLayout #topContentFeatures, #topLayout #topContentCustomers {position:absolute; top:6px; left:6px; height:216px; width:779px;}

#topContentHome {background:url(../images/motorbike.png) no-repeat 542px 30px;line-height:17px;}
#topContentHome div { height:216px; padding: 0 150px 0 184px; line-height: 1.6em;}
#topContentHome div h1 {line-height: 1.2em;}
#topContentHome .title1 {padding-top:30px;color: #fc7b00;font-size: 2em; font-weight:bold;}
#topContentHome .title2 {padding-top: 14px;color: #6f8731;font-size: 2em; font-weight:bold;}
#topContentHome .bigText, #topContentHome strong { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:-1px; font-size:1.6em}
#topContentHome .middleText, #topContentHome em {font-size:1.2em}
#topContentHome .superscript { font-size:.4em; position: relative; top:-20px;}
#topContentHome .pageHeader {padding-top:50px; color: #fe8900; font-size: 1.4em;font-weight:bold;}
#topContentHome .pageHeader .bigText{ font-size:1.6em;}
/*#topContentHome .bigText{ font-size:1.2em;}*/
#topContentHome p {padding-top: 22px; color:#6f8731; font-size:1.4em;font-weight:bold;}

#topContentFeatures {background:url(../images/tarifs.png) no-repeat 165px 15px;}
#topContentFeatures .pageHeader { float:right; padding:55px 20px 0 0; color:#798f3e; font-size: 2.1em; text-align:center; border-bottom: 1px solid #deeeb2;}

#topContentCustomers {background:url(../images/customers.png) no-repeat center 0;}
#topContentCustomers .pageHeader { float:right; padding:90px 50px 0 0; color:#798f3e; font-size: 2.1em; text-align:center; border-bottom: 1px solid #deeeb2;}

/* Main menu */
#mainMenu {width:100%;}
#mainMenuWrapper { margin: 0 7px; background-color: #78a500;}
#mainMenu ul { margin:0; padding:0; list-style:none; text-align:center}
#mainMenu li { display:inline}

#mainMenu a { padding:10px 0; font:1.5em/2em Arial, Helvetica, sans-serif; color:#fff; text-decoration:none;}
#mainMenu a span {margin: 0 20px;}
#mainMenu a:hover span { border-bottom: 2px solid #fff;}

/* Common styles */
.imageLeft { float:left; margin-right:5px;}
.imageRight { float:right; margin-left:5px;}
.smallText {font-size: .9em;}
.subtitle {margin: 0; padding:0; font-weight:bold; font-size:1em;}
.linkToMore { font-weight: bold;}
.footNote { font-size: .9em; font-style:italic;}
.clearRight {clear:right;}
.bigHeader {font-size:1.8em}
.middleHeader {font-size:1.6em}
.smallHeader { font-size:1.4em}

/* Content */
#contentLayout { width:100%; overflow:auto;}
.contentBg { margin-top:10px; background:url(../images/content-bg.gif) repeat-y 250px 0;}
#contentBgTop {overflow:auto; background:url(../images/content-bg-top.gif) no-repeat 250px 0;}
#contentBgBottom { width:100%; overflow:auto; background:url(../images/content-bg-bottom.gif) no-repeat 250px bottom;}

#contentHome {float:right; width:538px; color: #6f8731;}

#contentWrapperHome {padding:10px 20px 0 20px;}

#content { float:right; width:535px;}
#contentWrapper {padding:30px 35px 20px 20px;}

.activeContent li {padding-bottom: 3px;}

/* Features page content */
.featureContent {display:none}

/* Customers page content */
.customerInfo, .activeContent { padding-bottom:5px; overflow:auto;}
.customerInfo {display:none}

.customerImage { float:right; margin: 0 0 5px 10px; width:auto;}
.customerImage p {margin-left: 10px;}
.customerImage .customerName {margin:3px 0 0 10px; padding:0;}
.customerImage .customerCompany {margin:0 0 3px 10px; padding:0; font-style:italic;}

h3.question {font-size:1em; font-weight: bold;}

/* Left column */
#leftColumn { width:250px;}

/* Left column - Home page */
.homePageLeftCol { margin:4px 0 0 9px; padding: 1px 10px 4px 20px; background: url(../images/column-bg.gif) repeat-x 0 0; min-height:450px;} 
.homePageLeftCol h2 { padding-top:10px; padding-bottom: 5px;}
.selectedCustomerInfo {overflow:auto}
.selectedCustomerInfo p {margin:0; padding:0;}
.quotation { margin: 7px 0; padding-right:20px; background:url(../images/quote.gif) no-repeat 0 2px; text-indent:20px;}
.closeQuote:first-child { line-height: 20px; background:url(../images/quote.gif) no-repeat right bottom; padding-left:17px;}

/* Left column - Features page */
.leftCol { padding: 10px 10px 0 50px; } 

/* Main content - Home page */
#speedIcon { margin: 0 0 0 10px; float:right; width:102px; height:107px; background:url(../images/speed-icon.gif) no-repeat 0 0; overflow:hidden;}
#contentHome p {width: 450px; font-size: 1.4em;}
#contentHome p#homePageHeader { margin: 12px 0 0 0;}
#contentHome p span {font-size: 1.1em;}

/* Features */
#featuresList { width: 380px; list-style:none;}
#featuresList li { margin-bottom: 10px; padding-left: 50px; min-height:30px; background:url(../images/chart-icon.gif) no-repeat 0 0;}
#featuresList li h3 {font-size:1.4em}
#featuresList li#clockIcon { background-image:url(../images/clock-icon.gif)}
#featuresList li#euroIcon { background-image:url(../images/euro-icon.gif)}
#featuresList li#dollarIcon { background-image:url(../images/dollar-icon.gif)}
#featuresList li#poundIcon { background-image:url(../images/pound-icon.gif)}
#featuresList li#compIcon { background-image:url(../images/comp-icon.gif)}

/* Main content - Features page */
.priceValue {font-size:1.1em}
.priceValue span { font-size:1.5em; font-weight:bold; color:#ef0000;}

/* More info boxes */
.moreInfo {position:relative}
.moreInfoHidden {display: none;}
#moreInfoPackage, #moreInfoPayPal {position:absolute; top:20px; left:100px; padding: 15px 15px 5px 15px; background-color: #fff; width: 220px; border: 1px solid #dedede; cursor:pointer;}
#moreInfoPayPal { top:-70px;}

/* Content */
.extraContent {margin-bottom: 4px; font-size:1.4em}

/* Contact box */
.contactBox { clear:right; position:relative; background-color:#78a500; width:407px;}
.contactBoxTop { background:url(../images/contact-bg-top.gif) no-repeat 0 0;}
.contactBoxBottom { padding:2px 10px; background:url(../images/contact-bg-bottom.gif) no-repeat 0 bottom;}

.contactBox .header { padding: 2px 0 8px 10px; font-size:1.4em; font-weight: bold; color:#fff;}
.contactBox .phoneNumber { padding-left:50px; font-size:1.7em; font-weight: bold; color:#fff;}
.contactBox .phoneNumber span { font-size:1.7em;}
.contactBox .phoneInfo { padding-left:187px; font-size:.8em; margin-top: 0; color:#fff; position:relative; top: -7px; }

.contactBox .formBlock {padding-left:50px; color: #fff;}
.contactBox .formBlock dt {float: left;width: 75px; padding-right:5px; padding-top: 2px; font-size: .9em;}
.contactBox .formBlock dt small {font-size: .9em;}
.contactBox .formBlock dd {padding-top: 2px;}
.contactBox .formBlock input.error, .contactBox .formBlock textarea.error {border: 2px solid red;}
.contactBox .formBlock input#submit, .contactBox .formBlock input.submit {margin: 3px 0; font-size: 1.3em;}

/* Small contact box */
.smallBox { clear:right; position:relative; top:-20px; background-color:#78a500; float:right; margin: 20px 0 -10px 5px; width:358px}
.smallBox .en {padding-left:85px}
.smallBox .contactBoxTop { background-image:url(../images/contact-bg-sm-top.gif) no-repeat 0 bottom;}
.smallBox .contactBoxBottom { padding:5px 10px; background-image:url(../images/contact-bg-sm-bottom.gif);}
.smallBox .topHeader {margin-top:0; font-size:1.5em; text-align:center; text-align:center; color:#fff;}
.smallBox .phoneNumber { position:relative; top: -.4em; padding-left:140px; line-height:56px; height:56px; font-size:2.1em; background: url(../images/phone-bg.gif) no-repeat 0 center; color:#80af00;}
.smallBox .subHeader { margin-top:-1.5em;padding-left:80px; font-size:.9em; text-transform:uppercase; color:#fff;}

/* Left column contact box */
.smallContactPhone { margin-bottom:5px; padding:0; width:210px; font:bold 15px/24px Arial, Helvetica, sans-serif; color:#fff; background:url(../images/phone-bg-small.gif) no-repeat 0 0; white-space:nowrap;}
.smallContactPhone .title { padding:0 10px 0 25px;}
.smallContactPhone .number { padding-left:10px; color:#80af00;}

.smallContactForm { margin-right:5px; text-align:right;}
.smallContactForm .errorMessage {color: #f00; background-color: #fff; text-align:left;}
.smallContactForm .subtitle {text-align:left}
.smallContactForm input {padding:1px;}
.smallContactForm .button input {margin:0; padding-left:3px;}

/* Check list */
.checkList{ margin-left:0; padding-left:0; list-style: none;}
.checkList li { margin: 0 0 15px 0; padding-left:20px; min-height:16px; background: url(../images/bullet-tick.gif) no-repeat 0 0;}

/* Features/Customers list */
#mainFeaturesList { margin:25px 0 10px 0px; padding:0; list-style:none;}
#mainFeaturesList li { margin: 0 0 5px 0; padding:0;}
#mainFeaturesList a { display:block; margin: 0 -10px 0 -20px; color:#6F8731; text-decoration:none;}
#mainFeaturesList a div div { padding: 12px 0 12px 10px; cursor:pointer}
#mainFeaturesList a:hover {background-color:#ffffd9}
#mainFeaturesList .leftMenuHeader { margin:0; padding: 0 0 0 22px; color: #fe7800; text-decoration:underline; background:url(../images/menu-bullet.gif) no-repeat 10px center; font-size:1.5em; height:1.5em;}
#mainFeaturesList a:hover .leftMenuHeader { color:#6F8731; text-decoration:none;}
#mainFeaturesList p { margin:0; padding:0 0 0 22px;}

#mainFeaturesList .active {margin: 0 -11px 0 -20px; overflow:hidden; background:url(../images/content-bg.gif) repeat-y 0 0; cursor:default}
#mainFeaturesList .active div { background:url(../images/content-bg-top.gif) no-repeat 0 0;}
#mainFeaturesList .active div div { background:url(../images/content-bg-bottom.gif) no-repeat 0 bottom; cursor:default}
#mainFeaturesList .active .leftMenuHeader {color:#6F8731; text-decoration:none; background:none}
#mainFeaturesList .active p.price {visibility:hidden}

/* Customers list */
.customersList a img { float:left; margin-right: 7px; border:none;}
.customersList a, .customersList div, .customersList div div {overflow: auto; cursor:pointer;}
.customersList .active, .customersList .active div { cursor:default;}
.customersList .customerName {font-weight:bold}
.customersList .customerCompany {}
.customersList .active .customerName, .customersList a:hover .customerName {color:#6F8731; text-decoration:none;}

/* Login */
.loginForm .formBlock {padding-left:20px; padding-top: 10px; color: #000;}
.loginForm .formBlock .errorMessage {color: #f00; background-color: #fff;}
.loginForm .formBlock dt {float: left;width: 100px; padding-right:5px; padding-top: 8px;}
.loginForm .formBlock dd {padding-top: 8px;}
.loginForm .formBlock input.error {border: 2px solid red;}
.loginForm .formBlock input#submit {margin: 10px 0; font-size: 1.3em;}
#contentHome .back {padding-top: 30px;}

/* Product screenshots */
.screenshots {overflow:hidden;}
.screenshots .item {float:left;width:104px;}
.screenshots .item .photo {padding:8px 0 0 8px;}

/* Footer */
#footerLayout { padding: 20px 20px 3px 0; background:url(../images/main_bot.png) no-repeat 0 0;}
#footerLayout ul { float:right; list-style:none;}
#footerLayout li { display:inline; padding: 0 10px;}
#footerLayout li:first-child { border-right: 1px solid #be6c00;}
#footerLayout a { font: bold 1em Arial, Helvetica, sans-serif; color:#a70110; text-decoration:none;}
#footerLayout a:hover { text-decoration: underline}
#footerLayoutTemp { padding: 20px 0 3px 0; text-align: center; background:url(../images/main_bot.png) no-repeat 0 0; font-size: 0.8em;}
