*, html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
html { overflow-y: scroll; }
table { border-collapse:collapse; border-spacing:0; }
address, cite, code, dfn, th, var { font-style:normal; font-weight:normal }
fieldset,img { border:0; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
div { position:relative; }
h1, h2, h3, h4, h5, h6 {
font-family: georgia, serif;
font-weight: normal;
color: #4b4740;
}
h1 { font-size: 185%; }
h2 { font-size: 170%; }
h3 { font-size: 165%; }
h4 { font-size: 137%; }
h5 { font-size: 110%; }
h6 { font-size: 100%; }
.line{background:#FFFFFF url(http://static-folioflow-com.s3.amazonaws.com/line.png) repeat-x scroll center bottom; margin-bottom: 20px; margin-top: 30px; height:5px; }
strong { font-weight:bold; }
abbr,acronym { border-bottom:1px dotted #000; cursor:help; }
em { font-style:italic; }
blockquote,ul,ol,dl { margin:1em; }
caption, th { text-align:left }
ol,ul,dl { margin-left:2em; }
ol li { list-style: decimal outside; font-size: 12px;}
ul li { list-style: disc outside; font-size: 12px;}
dl dd { margin-left:1em; }
th,td { border:1px solid #000; padding:.5em; }
th { font-weight:bold; text-align:center; }
caption { margin-bottom:.5em; text-align:center; }
p,fieldset,table { margin-bottom:1em; }
a { position:relative } /*Gets links displaying over a PNG background */
a { outline:none } /* Gets rid of Firefox's dotted borders */
a img { border:none } /* Gets rid of IE's blue borders */
/* Utility */
.no-margin { margin:0px; }
.indent { text-indent:-9999px; }
.floatleft { float:left; }
.floatright{ float:right; }
.clear { clear:both; }
.last { margin-right:0; padding:0px;}
.grey { color:#7d7c7c; }
.white {color:#FFFFFF;}
.white a{color:#BBEEFF;}
.white a:hover{color:#BBEEFF;text-decoration: none;}
.black {color:#000000;}
.blue{ color:#953b50; }
.bold{font-weight: bold }
.under{border-bottom: 1px dotted #999999; display:block; padding:0 0 3px 5px;}
.cur_hand{cursor:pointer}
.txtCentre{text-align:center}
.button { text-transform: uppercase; padding:5px 10px 5px 10px; background:#86284d; color:#fff; }
br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
/*typography.css*/
/* Typography reset */
body, p, li, dt, dd, label{ letter-spacing:1px; line-height:20px; font-family: georgia, serif; color: #807970; }
address { font-size:11px; color:#949494 }
input, textarea { font-size:11px; color:#000; padding:2px }
pre, code { margin:2px 0 16px 0; background:#000; color:#ccc; font:12px/16px 'Courier New', Courier, monospace }
pre { padding:10px }
a { color: #3181b8; text-decoration:underline }
a:hover { color:#90b6d1; text-decoration:none }
p+p { margin-top:1em; }
p {color: #666666; font-size: 12px; }
/***** Type Styles *****/
/*headers*/
h1.logo a { display:block; width:179px; height:59px; background:url(${basePath!}logo.png); position:absolute; top:40px; left:0; text-indent:-9999px; }
h2.slogan { display:block; width:588px; height:94px; background:url(${basePath!}slogan.png); position:absolute; top:170px; left:0; text-indent:-9999px; }
h5.try_it_free a{ display:block; width:150px; height:49px; background:url(${basePath!}try-it-free.png); text-indent:-9999px; margin: 0 auto; }
div.page_title { position:absolute; top:190px; left:0; }
div.page_title h2 { font-size:270%; font-family:Cambria, Georgia, Times, 'Times New Roman', serif; }
h3.create_site_btn a{ display:block; width:256px; height:53px; background:url(${basePath!}create_your_site.png); position:absolute; top:180px; right:0; text-indent:-9999px;}
div.footer h5 { font-family:"Lucida Grande","Arial Unicode MS", sans-serif; letter-spacing:0px; font-size:0.80em; text-transform:uppercase; margin:15px 0 10px 0;}
div.sign_up_content_container h5 { color:#FFFFFF; }
/*paragraphs*/
p.slogan_sub_text { display:block; width:auto; position:absolute; top:270px; left:0; font-size:1.1em; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #666666;}
p.create_site_btn_text { display:block; width:auto; position:absolute; top:240px; right:5px; font-size:0.90em; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #666666; text-transform:uppercase }
p.price { color:#c2d6e1; }
/*lists*/
/*
Goinnovate - Craig Haggart
http://www.goinnovate.co.uk
Colour Guide:
blue a - #3181b8
blue a:hover - #90b6d1
*/
/* LAYOUT */
/* ----------------------------------------- */
/*****Global Styles*****/
div.wrapper { width:1000px; margin:0 auto; }
div.top_gutter { width:100%; height:5px; background:#aad4df; border-bottom:1px solid #9ac0ca; }
div.header_other { width:960px; margin:0 auto; min-height:250px; margin-bottom:60px; }
/* Main content */
div.main_container { max-width:960px; padding:20px 40px 20px 40px; }
div.main_container_content { margin-top:40px; }
/**** // Global Styles ******/
/*--home--*/
div.header { width:960px; margin:0 auto; min-height:300px; margin-bottom:60px; }
/* home page slider */
div.slider_nav_container { width:960px; margin:0 auto; background:#FFFFFF; height:40px; }
ul.slider_nav { position:absolute; right:0px; top:10px; margin:0 5px 0 0; }
ul.slider_nav li { list-style:none; float:left; margin-right:5px; }
/**slider navigation container corners**/
/***************************************/
div.slider_content_container { width:960px; max-height:280px; margin:0 auto; padding-left:40px;padding-right:40px;padding-top:20px; }
div.slider_text { width:620px; float:left; }
span.slider_image { position:absolute; right:60px; top:15px; }
/* blog section */
.latestnews{
font-size: 11px;
text-decoration: none;
}
.latestnews:hover{
color: #fff;
}
.blog_categories{position: relative; left: 40px; top: 30px; color: #fff; z-index:2;font-size: 12px;}
.blog_categories a {color: #fff; text-decoration: none;}
.blog_categories a:hover {color: #fff; border-bottom:thin dotted;}
.blogtable{border: 0 solid; width: 97%}
.blogcell{border: 0;vertical-align: top;}
.blognoimage{font-size: 12px; padding-right: 50px;}
.virtualpage{padding-right: 30px;}
.padright{padding-right:30px;}
.category_block{padding-top: 3px; padding-bottom: 3px;padding-left: 15px;padding-right: 15px;display: inline; width: auto; border: 1px solid #7EB7CA; color: #fff; background-color: #97C7DB; }
.blog_date{border-top: 1px solid #9f7e6d;border-bottom: 1px solid #9f7e6d; background-color:#f5f4f0;color:#9f7e6d; margin-right: 30px;}
.main_container_content_blog{padding-left: 30px;}
/* home features section */
div.folio-flow-feature { width:960px; margin:0 auto; padding:20px; }
ul.folio-flow-feature-nav { margin: 10px 0px 0 0px; height: 25px; padding: 0; left: auto; padding-bottom: 30px;}
ul.folio-flow-feature-nav li { display: inline; padding: 0 1em 0 0; list-style-type: none; background: none; font-size:12px; }
ul.folio-flow-feature-nav li a:hover { color: #898378; }
ul.folio-flow-feature-nav a.selected { color: #898378; outline: 0; }
ul.folio-flow-feature-nav a.selected:hover { text-decoration: none; }
div.folio-flow-feature-content { margin-top:40px; }
.slideprev{cursor: pointer;}
.slidenext{cursor: pointer;}
.slideprev:hover{cursor: pointer;text-decoration:underline;}
.slidenext:hover{cursor: pointer;text-decoration:underline;}
/* fader tabs*/
.morphtabs_title {list-style-image: none;list-style-type: none;margin: 0px;padding: 0px; height: 24px;}
.morphtabs_title li { float: left; cursor: pointer; color: #90B6D1; text-decoration: underline;}
.morphtabs_title li.over { color: #898378; text-decoration: none;}
.morphtabs_title li.active { color: #898378; text-decoration: underline;}
.morphtabs_panelwrap { position: relative; top: -1px; clear: both; overflow: hidden;}
.morphtabs_panel { }
.morpthtabs_panel p { }
/*-- Contact Page---*/
/* Contact form */
.contact_details{width: 400px;padding-top: 40px;font-size: 12px;}
#form2{ margin:1em 0; color:#fff; width:320px; /* customize width, this form have fluid layout */}
#form2 fieldset{ margin:0; padding:0; border:none; padding-bottom:1em; }
#form2 legend{display:none;}
#form2 p{margin:.5em 20px;}
#form2 label{display:block;}
#form2 li{font-size: 12px;list-style-image: none; list-style-type: none;}
#form2 input, #form2 textarea{ width:272px; border: thin dashed #CCCCCC; padding:5px 3px; color:#6293a4; }
#form2 textarea{ height:125px; overflow:auto;}
#form2 p.submit{ text-align:right; }
align:center;}
#form2 p.errorText {color: #807970;}
#form2 .errorField {background-color: #fff6f6;}
#form2 .supportRadio {width: 30px;border: 0px;}
/* // Contact form */
#links { margin:0px 0; }
#links a { color:#666666; font-size:10px; }
#links a:hover { color:#999999 }
/*-- Sign Up Page---*/
div.sign_up_content_container { width:960px; max-height:280px; margin:0 auto; padding:40px; }
div.free { width:280px;height:340px; float:left; margin-right:40px; }
div.taster {width:280px; height:340px; float:left; margin-right:40px; }
div.premium {width:280px; height:340px; float:left; }
/* // Sign Up Page */
/*--Features Page---*/
div.features_arrow_nav_container { width:208px; float:left;}
div.features_arrow_nav ul li { display:block; border-top:1px dotted #5f7f88; border-bottom:1px dotted #5f7f88; margin:0 15px 10px 15px; padding:5px 0 5px 0; color:#FFFFFF }
div.features_arrow_nav ul li a { color:#b9d1d5; text-decoration:none; }
div.features_arrow_nav ul li a:hover { color:#fff; }
div.features_arrow_nav ul li a.active { color:#fff; }
.features_arrow_marker{color:#fff;}
div.features_content { width: 650px; float:left; margin-left:40px; }
div.features_tab_container{margin-left: 200px; }
/* // Features Page */
/* Navigation */
ul.nav { position:absolute; right:0px; top:70px; margin:0px; }
ul.nav li { float: left; padding-right:10px; margin-right:10px; border-right:1px solid #999999; font-size:93%; font-family:Cambria, Georgia, Times, 'Times New Roman', serif; text-transform:uppercase; letter-spacing:3px; list-style:none; }
ul.nav li.last { margin-right:0px; padding-right:0px; border:none; }
ul.nav li.last a { color:#1c8ce2; }
ul.nav li a { color:#000; text-decoration:none; }
ul.nav li a:hover { color: #333333; border-bottom:dotted thin; }
/* Footer */
div.footer ul { margin:0px 0px 20px 3px; }
div.footer ul li { list-style:none; font-size:11px; font-family:"Lucida Grande","Arial Unicode MS", sans-serif; color:#395e69; margin-bottom:5px; }
div.footer ul li a:hover { color: #fff; }
div.links_1 { width:140px; float:left; margin-left:10px; }
div.links_2 { width:140px; float:left; margin-left:10px; }
div.links_3 { width:140px; float:left; margin-left:10px; }
div.links_4 { width:140px; float:left; margin-left:10px; }
div.links_5 { width:180px; float:left; margin-left:100px;}
div.links_5 span {font-size:11px; font-family:"Lucida Grande","Arial Unicode MS", sans-serif; color:#395e69;}
div.links_5 span a:hover{color:#ffffff;text-decoration:underline;}
div.footer_legel { width:960px; margin: 0 auto; font-size:11px; }
#legal { float: left; padding:0px 0; margin:0; }
.toplink{
font-size:10px;float:right;clear:both;position:relative; top: -35px;
}
/**********************slideshow2*****************************************/
/**
Stylesheet: Slideshow.css
CSS for Slideshow.
License:
MIT-style license.
Copyright:
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
HTML:
Notes:
These next four rules are set by the Slideshow script.
You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/
.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}
/**
HTML:
Notes:
The images div is where the slides are shown.
Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/
.slideshow-images {
height: 420px;
width: 720px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
}
/**
Notes:
These are examples of user-defined styles.
Customize these classes to your usage of Slideshow.
*/
.slideshow {
height: 420px;
/* margin: 0 auto;*/
width: 720px;
}
.slideshow a img {
border: 0;
}
/**
HTML:
...
Notes:
Customize the hidden / visible classes to affect the captions animation.
*/
.slideshow-captions {
background: #000;
bottom: -20px;
color: #fff;
font: normal 12px/22px Arial, sans-serif;
left: 40px;
overflow: hidden;
position: absolute;
text-indent: 10px;
width: 590px;
z-index: 10000;
}
.slideshow-captions-hidden {
height: 0;
opacity: 0;
}
.slideshow-captions-visible {
height: 22px;
opacity: .7;
}
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the controller animation.
*/
.slideshow-controller {
height: 42px;
left: 50%;
margin: -21px 0 0 -119px;
overflow: hidden;
position: absolute;
top: 50%;
width: 238px;
z-index: 10000;
}
.slideshow-controller * {
margin: 0;
padding: 0;
}
.slideshow-controller-hidden {
opacity: 0;
}
.slideshow-controller-visible {
opacity: 1;
}
.slideshow-controller a {
cursor: pointer;
display: block;
height: 18px;
overflow: hidden;
position: absolute;
top: 12px;
}
.slideshow-controller a.active {
background-position: 0 18px;
}
.slideshow-controller li {
list-style: none;
}
.slideshow-controller li.first a {
left: 33px;
width: 19px;
}
.slideshow-controller li.last a {
left: 186px;
width: 19px;
}
.slideshow-controller li.next a {
left: 145px;
width: 28px;
}
.slideshow-controller li.pause a {
left: 109px;
width: 20px;
}
.slideshow-controller li.play a {
background-position: 20px 0;
}
.slideshow-controller li.play a.active {
background-position: 20px 18px;
}
.slideshow-controller li.prev a {
left: 65px;
width: 28px;
}
/**
HTML:
Notes:
Customize the hidden / visible classes to affect the loader animation.
*/
.slideshow-loader {
height: 28px;
right: 0;
position: absolute;
top: 0;
width: 28px;
z-index: 10001;
}
.slideshow-loader-hidden {
opacity: 0;
}
.slideshow-loader-visible {
opacity: 1;
}
/**
HTML:
Notes:
Customize the active / inactive classes to affect the thumbnails animation.
Use the !important keyword to override FX without affecting performance.
*/
.slideshow-thumbnails {
bottom: -65px;
height: 200px;
left: 0;
position: absolute;
width: 100%;
}
.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails ul {
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 10000px;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 15px 5px 5px 0;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
padding: 2px;
position: relative;
}
.slideshow-thumbnails a:hover {
background-color: #7094B0 !important;
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
}
.slideshow-thumbnails-active {
background-color: #90B6D1;
opacity: 1;
}
.slideshow-thumbnails-inactive {
background-color: #888888;
opacity: .5;
}
/**********************end slideshow2*************************************/
.slideshow-thumbnails {
height: 420px;
left: auto;
right: -20px;
top: 0;
width: 65px;
}
.slideshow-thumbnails ul {
height: 420px;
width: 65px;
}
.slideshow-images-visible {
margin-left: 0;
}
.slideshow-images-prev {
margin-left: 650px;
}
.slideshow-images-next {
margin-left: -650px;
}