/* ----------  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{
	text-align:center;
	margin:0;
	background-image: url(../images/bgsplat.jpg);
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-color: #50ECF8;
	background-position: left bottom;
}
#wrapper{
	background:#FFF;
	border-top:5px #99CC33 solid;
	border-left:1px #CCC solid;
	border-right:1px #CCC solid;
	width:960px;
	margin:0 auto;
	text-align:left;
	overflow:hidden;
	position:relative;
}
#wrapper2{
	border-top:5px #99CC33 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:auto
}
h1 a {
 display: block;
 background-image: url(images/oinonen-designs-logo.gif);
 background-repeat: no-repeat;
 padding-top: 65px; height: 0 !important;
 height /**/: 65px; overflow: visible;
}


/*-- Nav */
#header ul {
	max-height:50px;
	margin-top:40px;
	position:absolute; /* absolute position stops a:hover jump bug in IE6 */
	width: 387px;
}
#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}

/* 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{
	color: #CC2707;
	font-size: 3em;
	font-weight: 700;
}
.help{background-image:url(none)}
.money{background-image:url(none)}
.comments{background-image:url(none)}

/* -- */

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

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

.tech {
}

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;}