/*
Author: Kyle Theisen
Project: Healthy Habits
Date: 2010-05-11
Credit: Primeview www.primeview.com
*/


/* 
# CSS contents ###################
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
# Colour reference ###################


*/
 
/*
# Reset defaults ################### 
*/

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; } /* Reset margins and padding */

a:link, a:visited{text-decoration:none;outline:none;} /* Reset link styles */

html {overflow: -moz-scrollbars-vertical;} /* Mozilla scrollbar fix */

#skipto{position:absolute;left:-9999px;top:-9999px;} /* Hides the skip to link - useful for screen readers */
#content{outline:none;}
.group:after {content: ".";display: block;height: 0;clear: both;visibility: hidden; outline: none;} /* Automatically clears after any element with this class */

/*
# Layout ################### 
*/

body{font:75%/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;background:#fff url(../images/bg.jpg) no-repeat center top fixed;}
#wrap {margin:0 auto; width:960px;outline:none;}

#main {width:960px; margin-top:-80px; margin-bottom:10px; text-align:center; clear:both; float:left;outline:none;}

/*
# Nav ################### 
*/



/*
# Headings ################### 
*/

h1{}

h2{}

h3{}

h4{}
#header {position:relative; height:120px; width:960px;outline:none;}
#logo{width:268px;height:107px;background:url(../images/ionpod-logo.png) no-repeat; position:absolute; left:333px; top:20px;}
#logo a{display:block;height:100%;width:100%;}
#logo a span{position:absolute;left:-9999px;top:-9999px;}
#header h2.left {position:absolute; top:60px; left:35px; background:transparent url(../images/alkalize-tap-water.png) no-repeat top left; height:44px; width:255px; text-indent:-9999px;}
#header h2.right {position:absolute; top:60px; right:35px; background:transparent url(../images/ionpod-drops-acid-levels.png) no-repeat top left; height:45px; width:254px; text-indent:-9999px;}

.col1, .col3 {float:left; width:321px; margin-top:40px; font-size:14px; color:#646464; text-shadow:1px 1px 0px #fff; outline: none;}
.col1 {margin-left:35px;outline: none;}
.col3 {margin-right:35px;outline: none;}
.col2 {float:left; width:248px;outline: none;}

/*
# Lists ################### 
*/
ul.orangeDots {list-style:none; list-style-type:none; margin-left:20px;}
ul.orangeDots li {background:transparent url(../images/orange-dot.png) no-repeat left 7px; padding-left:20px; list-style:none; list-style-type:none;}
ul.twoCol {float:left; width:321px; margin:0; padding:0;}
ul.twoCol li {float:left; width:140px;}

ul.menu {width:100%;}
ul.menu li {display:inline;}
ul.menu li a {padding:0 10px; color:#82933d; text-decoration:underline; border-right:1px solid #ccc;}
ul.menu li:last-child a, ul.menu li.last a {border-right:none;}


/*
# Images ################### 
*/

img{border:none;}
img.left{margin:0 10px 10px 0;}
img.right{margin:0 0 10px 10px;}

/*
# Links ################### 
*/

a{}
a:hover{}

/*
# Forms ################### 
*/



/*
# Tables ################### 
*/



/*
# Typography ################### 
*/

p{margin:0 0 1.5em;}
.retail {text-indent:-9999px; background:transparent url(../images/old-price.png) no-repeat center top; height:23px; margin-bottom:0px; margin-top:15px;}
.nowprice {text-indent:-9999px; background:transparent url(../images/now-price.png) no-repeat center top; height:23px;}
.buynow a {display:block; height:86px; width:100%; text-indent:-9999px; background:transparent url(../images/buy-now.png) no-repeat center top;}
.moreinfo a {display:block; height:65px; width:100%; text-indent:-9999px; background:transparent url(../images/more-info.png) no-repeat center top; margin-top:20px; float:left;}

h3.change {display:block; height:36px; width:100%; text-indent:-9999px; background:transparent url(../images/change-your-water-change-your-life.png) no-repeat center top; ; float:left;}
h4.save{display:block; height:50px; width:100%; text-indent:-9999px; background:transparent url(../images/save-1000s.png) no-repeat center top; float:left;}

/*
# Other ################### 
*/

.right{float:right;}
.left{float:left;}
.clear{clear:both;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align: center;}