html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* body
-------------------------------------------------------------- */
body { background:#FFF; color:#444; font-family:Arial, Helvetica, sans-serif;}
/* Colours
--------------------------------------------------------------
#FF883C Orange
#E56F2E Dark Orange
#404041 Dark Grey */
/* Structure
-------------------------------------------------------------- */
#logo_bar {float:left; clear:both; width:100%; height:50px; background-color:#ffffff;}
#logo_block {width:960px; height:50px; margin:0px auto;}
#logo {float:left; width:158px; height:40px; margin:5px 0px; padding:0px;}
#top_menu {float:left; width:350px; height:26px; margin:12px 0px 12px 452px; padding:0px;}
#contact_number_block {float:left; width:130px; height:24px; margin:0px 10px 0px 0px; padding:2px 0px 0px 0px;}
#free_demo_block{float:left; width:100px; height:26px; margin:0px 10px 0px 0px; padding:0px;}
#login_block {float:left; width:100px; height:26px; margin:0px 0px 0px 0px; padding:0px;}
#nav_bar {float:left; clear:both; width:100%; height:50px; background-color:#FF883C;}
#nav_block {width:960px; height:50px; margin:0px auto;}
#container {float:left; clear:both; width:100%; background-color:#FFF;}
#content_wrapper {width:960px; margin:0px auto;}
#banner_bar {float:left; clear:both; width:100%; height:50px; background-color:#ffffff; margin:20px 0px 5px 0px;}
#banner_block {width:960px; height:50px; margin:0px auto; background: url(../images/general/banner.png)}
#footer_bar {float:left; clear:both; width:100%; background-color:#222222;}
#footer_block {width:960px; margin:0px auto;}
#copyright_bar {float:left; clear:both; width:100%; height:40px; background-color:#222222;}
#copyright_block {width:960px; height:40px; margin:0px auto;}
#hash_bar {float:left; clear:both; width:100%; height:20px; background: url(../images/general/hse-hash.png) repeat-x;}
/* Type
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {font-family: 'Open Sans', sans-serif;}
h1 { font-size:24px; font-weight:bold; color:#FF883C; margin:5px 0px 10px 0px; text-transform:uppercase; }
h2 { font-size:18px; font-weight:bold; color:#FF883C; margin:5px 0px;}
h3 { font-size:16px/2 arial; font-weight:bold; color: #444; margin:2px 0px;}
h4 { font-size:em; font-weight:bold;}
h5 { font-size:1em; font-weight:bold;}
h6 { font-size:1em; font-weight:bold;}
p { font:normal 14px/1.6 arial, verdana, sans-serif; margin-bottom:5px; color:#444;}
b { font-weight:bold;}
em { font-style:italic;}
ul { list-style-type: disc; list-style-position: outside; margin:0px 0px 10px 20px;}
ul li { font:normal 14px/1.4 arial, verdana, sans-serif; margin-bottom:2px;}
a { text-decoration:none; color:#FF883C;}
a:hover { text-decoration:underline; color:#E56F2E;}
#copyright p{ text-align:center; color:#FFF;}
strong { font-weight:bold;}
/* Top Navigation Menu
-------------------------------------------------------------- */
a.top_buttons {
-moz-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
-webkit-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF883C ), color-stop(1, #E56F2E));
background:-moz-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:-webkit-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:-o-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:-ms-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:linear-gradient(to bottom, #FF883C 5%, #E56F2E 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF883C ', endColorstr='#E56F2E',GradientType=0);
background-color:#FF883C ;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #B7531C;
display:inline-block;
color:#ffffff;
width:78px;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:5px 10px;
text-decoration:none;
text-align:center;
text-shadow:0px 1px 0px #587530;
}
a.top_buttons:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #E56F2E), color-stop(1, #FF883C ));
background:-moz-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:-webkit-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:-o-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:-ms-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:linear-gradient(to bottom, #E56F2E 5%, #FF883C 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E56F2E', endColorstr='#FF883C ',GradientType=0);
background-color:#E56F2E;
}
/* Footer Navigation Menu
-------------------------------------------------------------- */
#footer_block_1 {float:left; width:300px; margin:10px 0px 0px 0px; display:inline;}
#footer_block_2 {float:left; width:300px; margin:10px 0px 0px 20px; display:inline;}
#footer_block_3 {float:left; width:300px; margin:10px 0px 0px 20px; display:inline;}
ul.menu_bottom_nav {float:left; width:300px; margin:0px 0px 0px 0px; padding:0px; list-style:none}
ul.menu_bottom_nav li {margin:0px; padding:0px; list-style-type:none; background: url(../images/general/tick-bullet.png) no-repeat top left;}
ul.menu_bottom_nav li a {height:16px; padding:2px 0px 0px 20px; margin:0px 0px 0px 0px; font:normal 12px Arial, sans-serif; color:#ffffff; text-align:left; text-decoration:none; display:inline;}
ul.menu_bottom_nav li a:hover {text-decoration:underline;}
ul.menu_bottom_nav li ul {margin:0px; padding:0px; list-style-type:none;}
.contact_col_title {float:left; width:300px; height:16px; margin:0px 0px 5px 0px; padding:0px; border-bottom:dotted 1px #ffffff; padding:0px 0px 1px 0px;}
p.footer_header {font:bold 14px Arial, sans-serif; margin:0px; padding:0px; color:#ffffff; text-align:left; text-decoration:none;}
p.footer {font:normal 12px Arial, sans-serif; margin:0px; padding:0px; color:#ffffff;}
#copyright_block p {font:bold 12px Arial, sans-serif; text-align:center; margin:0px; padding:0px; color:#ffffff;}
/* Home Page Trio
-------------------------------------------------------------- */
#trio {float:left; width:960px; margin:15px 0px 0px 0px; padding:0px;}
#left_trio {float:left; width:300px; margin:0px 0px 0px 0px; padding:0px;}
#middle_trio {float:left; width:300px; margin:0px 0px 0px 30px; padding:0px;}
#right_trio {float:left; width:300px; margin:0px 0px 0px 30px; padding:0px;}
.trio_holder h2 {width:100%; border-bottom:solid 1px #444; margin-bottom:5px;}
.trio_holder img {padding:9px; border:solid 1px #efefef;}
.trio_holder p {margin-bottom:3px;}
.trio_holder img.button {padding:0px; border:0px;}
/* Home Benefits
-------------------------------------------------------------- */
table.home {}
table.home td {vertical-align:middle; padding:5px;}
/* Features
-------------------------------------------------------------- */
#feature_table { float:left; width:800px; padding:0px 80px 0px 80px;}
tr.features { vertical-align:middle;}
td.features_left { width:350px; height:250px; vertical-align:middle; margin:0px 0px 0px 0px;}
td.features_div { width:100px;}
td.features_right { width:350px; height:250px; vertical-align:middle; margin:0px 0px 0px 0px;}
td.features_right p { }
/* Design
-------------------------------------------------------------- */
#design_left { float:left; width:571px;}
#design_right { float:left; width:389px;}
/* Data Capture
-------------------------------------------------------------- */
#data_capture_left {float:left; width:600px; height:100px; margin:0px 0px 0px 0px}
table#data_capture_table {width:360px; height:100px; margin:0px 0px 0px 0px;}
table#data_capture_table tr {height:50px; margin:0px;}
table#data_capture_table tr td.middle {margin:0px; padding:0px; vertical-align:middle;}
/* Form Scroller
-------------------------------------------------------------- */
#form_scroller {float:left; width:960px; height:205px; margin:0px; padding:0px;}
/* DC
-------------------------------------------------------------- */
#dc_intro_text { float:left; width:300px;}
#dc_intro_image { float:left; width:600px; margin:0px 0px 0px 60px}
#dc_how_it_works_holder { float:left; width:960px; margin:0px 0px 0px 0px}
#dc_hiw_left { float:left; width:185px;}
#dc_hiw_middle { float:left; width:185px;}
#dc_hiw_right { float:left; width:206px;}
.dc_arrow { float:left; width:192px; margin-top:100px;}
#dc_features { float:left; width:400px; margin:0px 0px 0px 0px}
#dc_benefits { float:left; width:400px; margin:0px 0px 0px 160px}
/* Sign_up
-------------------------------------------------------------- */
#sign_up { float:left; width:960px; height:100px; margin-bottom:20px; background: url(../images/general/Signup-Background.png) no-repeat top left;}
#sign_up_text { float:left; width:450px; margin:25px 130px 0px 50px}
#sign_up_text p { font:normal 14px arial, verdana, sans-serif; margin-bottom:0px; color:#444;}
#sign_up_button { float:left; width:310px; height:80px; padding:10px;}
a.signup_button {
-moz-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
-webkit-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF883C ), color-stop(1, #E56F2E));
background:-moz-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:-webkit-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:-o-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:-ms-linear-gradient(top, #FF883C 5%, #E56F2E 100%);
background:linear-gradient(to bottom, #FF883C 5%, #E56F2E 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF883C ', endColorstr='#E56F2E',GradientType=0);
background-color:#FF883C ;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #B7531C;
display:inline-block;
color:#ffffff;
width:308px;
height:66px;
padding:12px 0px 0px 0px;
font-family:arial;
font-size:32px;
font-weight:bold;
text-decoration:none;
text-align:center;
text-shadow:0px 1px 0px #587530;
}
a.signup_button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #E56F2E), color-stop(1, #FF883C ));
background:-moz-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:-webkit-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:-o-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:-ms-linear-gradient(top, #E56F2E 5%, #FF883C 100%);
background:linear-gradient(to bottom, #E56F2E 5%, #FF883C 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E56F2E', endColorstr='#FF883C ',GradientType=0);
background-color:#E56F2E;
}
/* Contact Us
-------------------------------------------------------------- */
#contact_details {float:left; width:280px; margin:0px 0px 0px 0px; padding:0px;}
#enquiry_form {float:left; width:300px; margin:0px 0px 0px 0px; padding:0px;}
#map {float:left; width:300px; margin:0px 0px 0px 80px; padding:0px;}
form#userForm fieldset.formFieldset legend {display: none;}
form#userForm input {float:left; width:298px; height:24px; line-height:24px;}
form#userForm select {float:left; width:298px; height:24px; line-height:24px; padding:0px;}
form#userForm textarea {float:left; width:298px;}
form#userForm .formCaption2 {font:bold 12px Arial, sans-serif; margin: 0px 0px 2px 0px;}
input#Submit.rsform-submit-button {width:140px; height:24px;}
input.rsform-reset-button {width:140px; height:24px;}
/* Video
-------------------------------------------------------------- */
#video { float:left; width:940px; padding:10px; margin-bottom:20px; -moz-border-radius: 5px;
border-radius: 5px; background-color:#f3f3f4; border:#e2e3e4 1px solid;}
#video_text { float:left; width:460px; margin:30px 80px 0px 0px;}
#video_video { float:left; width:400px; height:296px; margin:0px}