/*

	kapaipuku.com Screen Styles
				
	Table of Contents:

	Common
		Typography and Colours
		Layout
		Images
		Forms
		Rounded Corners
		Image Replacement
		Miscellaneous		
	Sections
		Header
		Navigation
		Banner
		Sidebar
		Content
		Footer					
	Page-specific
		Order Page
		Shopping Cart


*/


/* Typography and Colours
--------------------------------------------- */

body {
	color: #3E5D00;
	background: #F0E9C1;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* Resets 1em to 10px */
	}
	
h1, h2, h3, h4 {
	margin-top: 0;
}

h1 {
	font-size: 1.8em;
	}
	
h2 {
	font-size: 1.6em;
	}

h3 {
	font-size: 1.3em;

	}

h4 {
	font-size: 1.3em;
	}
	
p {
	font-size: 1.3em;
	font-weight: normal;
	margin-top: 0;
}

h3 {
	margin: 0;
	padding: 0;
}
	
a:link, 
a:visited {
	color: #3E5D00;
	text-decoration: underline;
	}

a:hover, 
a:active {
	text-decoration: underline;
	}

input, textarea {
	color: #584B3C;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	}
	
hr {
	border: 0;
	height: 1px;
	color: #8DA956;
	background-color: #8DA956;
}

ul {
	margin: 0 0 0 2em;
	padding: 0;
}

li {
	margin: 0 0 0.5em 0;
	padding: 0;
}

li p {
	margin: 0 0 0.5em 0;
}

	
#outer {
	background: #F0E9C1;
	}

#header {
	background: transparent;
	}
	
.rounded_content {
	color: #FFF;
}

.rounded_content h3 {
	font-size: 1.2em;
}

/* Layout
--------------------------------------------- */

html {
	height: 100%;
	margin: 0;
	margin-bottom: 1px;
	padding: 0;
	}
	
body {
	margin: 0;
	padding: 0;
	xwidth: 100%;
	}

#outer {
	margin: 0 auto;
	padding: 0;
	width: 590px;
	border: none;
	clear: both;
	xoverflow: auto;
	}

/* Images
--------------------------------------------- */

img {
	border: 0px;
	padding: 0;
	margin: 0;
	display: block;
	}

p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
	
/* Forms
--------------------------------------------- */

label {
	
	}
	
form br {
	display: none;
	}
	
form p {
	margin-bottom: 0;
	}
	
.textinput input {
	width: 172px;
	margin: 0 0 0 10px;
	padding: 0px;
	border: 1px solid #584B3C;
	padding: 2px;
	}
	
.cr {
	display: block;
	float: left;
	width:18.3em;
	padding: 0 0 1em 0.5em;
	}
	
.cr label {
	display: inline;
	}
	
.messageinput {
	margin: 0;
	clear: both;
	padding-top: 1em;
	}

.messageinput textarea {
	width: 548px;
	margin: 0;
	border: 1px solid #584B3C;
	padding: 2px;
	}
	
.submit {
	float: right;
	margin-right: 0em;
	}

.submit input {
	margin: 1em 1em 0 0;
	padding: 2px 0.5em;
	border: 1px solid #584B3C;
	background: #FFF;
	font-size: 1.2em;
	}
	
#shoppingcart input.qty {
	border: solid 0 #ABCD68;
	background: #ABCD68;
	text-align: right;
	margin: 0 auto;
}
	
/* Rounded Corners
--------------------------------------------- */

.rounded{
display:block
}
.rounded *{
display:block;
height:1px;
overflow:hidden;
background:#3E5D00
}
.rounded1{
border-right:1px solid #a3ac6e;
padding-right:1px;
margin-right:3px;
border-left:1px solid #a3ac6e;
padding-left:1px;
margin-left:3px;
background:#6a8030;
}
.rounded2{
border-right:1px solid #dedbad;
border-left:1px solid #dedbad;
padding:0px 1px;
background:#5f7724;
margin:0px 1px;
}
.rounded3{
border-right:1px solid #5f7724;
border-left:1px solid #5f7724;
margin:0px 1px;
}
.rounded4{
border-right:1px solid #a3ac6e;
border-left:1px solid #a3ac6e;
}
.rounded5{
border-right:1px solid #6a8030;
border-left:1px solid #6a8030;
}
.rounded_content{
padding:0px 5px;
background:#3E5D00;
}

/* Image Replacement
--------------------------------------------- */

.replaced {
	text-indent: -5000px;
	margin: 0;
	padding: 0;
	display: block;
	}

#sidebar .replaced {
	width: 100%;	
	}

#sidebar #feat-fibre {
	height: 23px;
	background: url('../images/feat-fibre.gif') no-repeat top center;
	xmargin-bottom: 19px;
	}

#sidebar #feat-protein {
	height: 14px;
	background: url('../images/feat-protein.gif') no-repeat top center;
	xmargin-bottom: 19px;
	}

#sidebar #feat-carbo {
	height: 45px;
	background: url('../images/feat-carbo.gif') no-repeat top center;
	xmargin-bottom: 15px;
	}
	
#sidebar #feat-lowsugar {
	height: 15px;
	background: url('../images/feat-lowsugar.gif') no-repeat top center;
	xmargin-bottom: 16px;
	}
	
#sidebar #feat-fats {
	height: 36px;
	background: url('../images/feat-fats.gif') no-repeat top center;
	margin-bottom: 19px;
	}
	
#text-tagline {
	height: 14px;
	background: url('../images/text-tagline.gif') no-repeat top center;	
	}
	
#nav-home, 
#nav-nutrition, 
#nav-order, 
#nav-about, 
#nav-contact {
	height: 14px;
}

#nav-home {background: url('../images/nav-home.gif') no-repeat top left; width:43px;}
#nav-nutrition {background: url('../images/nav-nutrition.gif') no-repeat top left;width:77px;} 
#nav-order {background: url('../images/nav-order.gif') no-repeat top left;width:50px;}
#nav-about {background: url('../images/nav-about.gif') no-repeat top left;width:49px;}
#nav-contact {background: url('../images/nav-contact.gif') no-repeat top left;width:64px;}


	
/* Miscellaneous
--------------------------------------------- */
	
.clear {
	clear: both;
	}
	
	
.alignright {
	float: right;
	}

.alignleft {
	float: left
	}

.smallcaps {
	text-transform: uppercase;
	font-size: 8px;
	}

/* Header
--------------------------------------------- */

#header {
	padding: 10px 0 0 0;
	margin: 0;
	width: 100%;
	}
#header h1 {
	margin: 0;
	padding: 0;
}

#header h1 img {
	margin: 0 auto;
	}


/* Navigation
--------------------------------------------- */

#navigation {
	margin: 0 0 18px 0;
	padding: 12px 0 0 0;
	font-size: 0.1em;
	width:100%;
	text-align: center;
	background: transparent url('../images/bg-navigation.gif') no-repeat top center;
	xoverflow: auto;
	height: 25px;
	}	
	
#navigation ol {
	margin: 0 auto 0;
	list-style: none;
	padding: 0;
	width: 383px;
	overflow: auto;
	}
	
#navigation li {
	margin: 0;
	padding: 0;
	text-align: center;
	list-style: none;
	display: inline;
	xfloat:left;
	}

#navigation li a:link,
#navigation li a:visited {
	float: left;
	display: block;
	color:#584B3C; 
	xheight:1em;
	xbackground:transparent; 
	padding: 0; 
	margin: 0 25px 0 0;
	}
	
#navigation li a.last:link,
#navigation li a.last:visited {
	margin: 0;
}

/* Banner
--------------------------------------------- */

#bannerimage {
	margin: 13px 5px 18px;
	}

/* Sidebar
--------------------------------------------- */

#sidebar {
	float: right;
	width: 180px;
	margin: 0 5px 0 auto;
	padding: 0;
	background: transparent;
	display: inline;
	clear: left;
	}

#sidebar ul {
	padding:0; 
	margin:0;
	list-style-type: none;
	xdisplay: inline;
	}

#sidebar ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	}
	
#sidebar ul li div.hr {
	display: block;
	margin: 3px 0;
	background: url('../images/feat-divider.gif') no-repeat top center;
	height: 5px;
	}

#sidebar ul li div.hr hr {
	display: none;
	}


#sidebar ul li a:link, 
#sidebar ul li a:visited {
	display:block; 
	text-decoration:none; 
	color:#584B3C; 
	width:11em; 
	height:1em;
	border-bottom:1px solid #BEB5AA; 
	padding: 0.5em; 
	line-height:1em;

	}

#sidebar ul li a:hover, 
#sidebar ul li a:active {
	background: #ECE9E7;
	}

#sidebar .rounded_content table {
	width:170px;
}

#sidebar .rounded_content table td {
	padding: 0.2em 0;
}

table tr.total td {
	font-weight: bold;
	text-align: right;
}

.amt {
	text-align: right;
}

#checkout {
	float: right;
	margin: 1em 0;
}

#sidebar h3 {
	margin-bottom: 0.5em;
	clear: right;
}

/* Content
--------------------------------------------- */

#content {
	margin: 0 0 0 0.5em;
	padding: 0px;
	float: left;
	background: transparent;
	width: 380px;
	display: inline;
	}



/* Footer
--------------------------------------------- */

#footer {
	margin: 30px 0 50px;
	padding: 1.5em 0 0.3em 0;
	color: #8DA956;
	background: transparent;
	clear: both;
	overflow: hidden;
	width: 100%;
	xwidth: 75em;
	xfloat: left;
	}
	
#footer a:link,
#footer a:visited {
	color: #8DA956;	
	text-decoration: none;
	}

#footer a:hover,
#footer a:active {
	color: #3E5D00;
	text-decoration: none;	
	}

	
#footer p {
	text-align: center;
	margin: 0;
	}

#footer .copyright {
	text-align: left;
	font-size: .9em;
	}

#footer .credit {
	text-align: right;
	font-size: .9em;
	}
	
#footer hr {
	color: #3E5D00;
	background-color: #3E5D00;
}

	
/* Order Page
--------------------------------------------- */

.itemfooter {
	text-align: right;
	border-bottom: solid 1px #8DA956;
	padding: 0 0 1em 0;
}

.itemfooter img {
	vertical-align: bottom;
	display: inline;
	xfloat: right;
	margin-left: 10px;
}

.itemprice {
	line-height: 1.5;
	font-size: 1.1em;
	font-weight: bold;
}

/* Shopping Cart
--------------------------------------------- */

#shoppingcart {
	width: 380px;
}

#shoppingcart th {
	padding: 0.5em 0;
	font-size: 1.4em;
	border-bottom: 1px solid #8DA956;
}

#shoppingcart td {
	font-size: 1.4em;
	padding: 0.5em 0;
}

#shoppingcart td.qty {
	text-align: center;
}


#shoppingcart tr.shipping td {
	border-top: 1px solid #8DA956;
	padding-bottom: 0;
	font-weight: normal;
}

#shoppingcart .price {
	text-align: right;
}

p.checkoutbuttons {
	float: right;
	margin: 0 0 2em 0;
	}
	
p.checkoutbuttons input {
	margin: 1em 0 0 1em;
}

p.checkoutbuttons a {
	margin: 0 0 0 1em;
}

p.checkoutbuttons img {
	display: inline;

}

p.smallprint {
	font-size: 1em;
}