/* ----------  Reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin:0; padding:0;}
/* ------------------------------ */

body{background:#EEE;text-align:center;margin:0;}
#wrapper{background:#FFF;border-top:5px #CC2707 solid;border-left:1px #CCC solid;border-right:1px #CCC solid;width:960px;margin:0 auto;text-align:left;overflow:hidden;position:relative}

#header{padding-top:25px;margin-bottom:50px}
img {border:0}

h1 {width:162px}
h1 a {
 display: block;
 background-image: url(/gfx/logo.png);
 background-repeat: no-repeat;
 padding-top: 65px; height: 0 !important;
 height /**/: 65px; overflow: hidden;
}


/*-- Nav */
#header ul {max-height:50px; margin-top:40px;position:absolute; /* absolute position stops a:hover jump bug in IE6 */}
#header ul li {float:left;margin-right:18px;}
ul#top-nav{ }


/*-- allow space next to screenshots */

#intro img {border:0}
#intro p {padding-right:30px}

/*-- need to allow a bit more padding than the gutter provides in the main-content section */
.main-content h3, 
.main-content h4, 
.main-content p,
.main-content li {padding-right:25px}

/* -- Homepage & showcase grid */
body#home #intro {padding-bottom:80px}
body#home #intro p {padding-right:60px}
img#home-screenshot {position:absolute;right:0px;top:120px}

#showcase .row {margin-bottom:40px}
body#home #intro.fade {margin-bottom:20px}
body#home h3, body#home .column p {margin:0 0 4px 0}
ul.showcase-list li {margin:0 0 4px 0}

p#showcase-intro {margin-bottom:40px}

/*-- Lists */
ul, ol {margin:15px 0 20px 5px}
li {margin-bottom:0.8em;margin-left:25px}
ul.showcase-list {margin-top:0}

.nav li, .nav ul {margin:0;list-style:none}

ul.feature-list li {list-style:none; padding: 2px 0 2px 24px;background:url(/gfx/icon_tick.png) no-repeat left 2px;margin-left:10px}

ul#footer-nav {clear:both}
ul#footer-nav li {float:left;border-right:1px #999 solid;padding:0 10px;position:relative;right:10px}
ul#footer-nav li.last {border-right:none}

/* -- */

#demos p {margin-bottom:40px}
#screenshots img {margin-bottom:15px;}
#buy-buttons {margin-top:40px;}
#buy-buttons img {border:0}

/*-- Tables */

table {margin-bottom:30px;border-collapse:collapse;}

/* this is a bug fix for FF and the grid css, far left table borders were being hidden by 1px, so needs shunting across, due to the .row overflow:hidden I suspect */

table {width:99%;position:relative;left:1px}

th {background:#EEE;border-top:1px #CCC solid}
th, td{padding:10px;border:1px #CCC solid;}
td{vertical-align:top}
td p {margin-top:0}

/* fix SV gallery CSS */
#news td{padding:10px;border:1px #FFF solid;}

/* Pro feature table */
table.features td{padding:5px;border:0px; border-bottom:1px #eee solid;}
p.icon_yes {background-repeat:no-repeat;background-image:url(/gfx/icon_tick.png)}
p.icon_no {background-repeat:no-repeat;background-image:url(/gfx/icon_no.png)}

/*-- FOOTER */
#footer {padding-bottom:40px}
#footer p.note {clear:both}
#google_translate_element {text-align:right}
/* -- */

/*-- Icons */
.icon {padding:2px 0 2px 24px;background-repeat:no-repeat;background-position:left 2px}
h3.icon {padding:4px 36px 4px 0;background-position:310px top}

.customize{background-image:url(/gfx/icon_settings.png)}
.help{background-image:url(/gfx/icon_support.png)}
.money{background-image:url(/gfx/icon_currency.png)}
.comments{background-image:url(/gfx/icon_comments.png)}

/* -- */

.fade, .fade-down {padding-bottom:40px;background: url(/gfx/fade.png) repeat-x left bottom;margin-bottom:25px}
.fade-down {background: url(/gfx/fade-down.png) repeat-x left bottom}

.alert {background-color:#FF9;padding:10px;}

.tech {background-color:#EEE;}

p.tech {padding:10px;}

/* Separators */
#ad_column {text-align:right;border-left:1px #CCC solid;}
#ad_column_left {border-right:1px #CCC solid;}
#ad_row {border-top:1px #CCC solid; padding-top:20px;}
.left_sep{border-left:1px #CCC solid; padding-left:20px;}


/* MISC */

#crumbs{float:right; font-size:1.3em;}