/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title : style-main.css
Author : Team at Bowen Software Solutions
URL : www.bowencorner.com

Description : General styles.

Created : July 16, 2007
Modified : -
Copyright: T bar tea salon

"design is melody. code is poetry"
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

/* table of content - - - - - - - - - - - - - - - - - -

	1. general
	2. skeleton
	3. h1-h6
	4. Navigation
	5. form element
	6. typo

- - - - - - - - - - - - - - - - - - - - - - - - - - */

/* 1 */

* { padding: 0; margin: 0; border: 0; } 

.clear {
	clear : both;
	font-size : 1px;
	height : 0; }

#skip {
	display: none;
	}
	


.pengganti-hr {
	background-color: #960;
	height: 1px; }
	
body { 
	font-size:62.5%; /* reset 1em to 10px */
	color:#666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.5em; }
	
#wrapper {
	width: 900px;
	margin: 0 auto; }

img.alignleft {
	float: left;
	margin: 0 5px 5px 0;
	display: inline; }

/* 2 */	
#header {
	width: 900px;
	height: 144px; }	
	
		#header-kiri {
			float: left;
			width: 550px;
			height: 144px;
			margin-right: 30px; }
			
				#header-kiri h1 {
					background: url(../images/logo.jpg) no-repeat;
					width: 550px;
					height: 144px;
					display: block;
					text-indent: -9999px; }
				
		#header-kanan {
			float: left;
			width: 	320px;
			height: 144px; }

		.login { /* untuk box login di kanan atas */
			width: 320px;
			margin: 5px 0;
			color: #EDD3D3;
			font-size: 1.1em; }
	
				.login-kiri {
					float: left;
					width: 130px;
					margin-bottom: 3px; }
			
				.login-kanan {
					float: left;
					width: 190px;
					margin-bottom: 3px; }
			
		.login a { text-decoration: none; }
		.login a:active, .login a:link, .login a:visited { color: #EDD3D3; }
		.login a:hover { color: #FFF; }	
		
		.input-kiri {
			float: left;
			width: 130px;
			margin-bottom: 3px; }
			
		.input-tengah {
			float: left;
			width: 130px;
			margin-bottom: 3px; }
			
		.input-kanan {
			float: left;
			width: 60px;
			margin-bottom: 3px; }				

		.status { /* untuk status shopping bag */
			width: 320px;
			height: 69px;
			background: url(../images/bg-cart.jpg) no-repeat 0 0;
			font-weight: bold;
			color: #FFF;
			font-size: 1.1em; }
				
				.status-nama {
					width: 300px;
					font-weight: bold;
					color: #FF0;
					padding-top: 10px;
					margin-left: 18px;
					margin-bottom: -10px }
					
				.status-kiri {
					float: left;
					width: 125px;
					margin-top: 10px;
					margin-left: 18px; }
			
				.status-kanan {
					float: right;
					width: 170px;
					text-align: right;
					margin-top: 10px; }	
				
				.status a {text-decoration: underline; }
				.status a:active, .status a:link, .status a:visited { color: #FCF; }
				.status a:hover { color:#FFF; }

#wrapper-tengah {
	width: 900px;
	margin: 30px 0; }
	
		.banner {
			float: left;
			width: 550px;
			height: 250px;
			margin-right: 30px; }

		.teaser {
			float: left;
			background: url(../images/bg-teaser.jpg) no-repeat;
			width: 300px;
			height: 250px;
			padding: 10px; }

#wrapper-bawah {
	width: 900px;
	margin: 30px 0; }

	.wrapper-kolom {
		width: 900px;
		margin: 5px 30px 1px 0; }
		
		.kolom-satu {
			float: left;
			width: 280px;
			margin-right: 30px; }
		
		.kolom-dua {
			float: left;
			width: 280px;
			margin-right: 30px; }
		
		.kolom-tiga {
			float: left;
			width: 280px; }
			
	.wrapper-kolom img { border: 1px solid #E1DCC5; }		

.breadcumb {
	width: 900px;
	height: 26px; }
	
		.breadcumb p { 
			margin-top: 10px;
			padding: 0 12px;
			color: #B5AB82; }
	
		.breadcumb a {text-decoration: none; }
		.breadcumb a:link, .breadcumb a:active { color: #843F20; }
		.breadcumb a:visited { color: #B77558; }
		.breadcumb a:hover { text-decoration: underline; color: #630; }			
			
.searchholder {
	background: url(../images/bg-search.jpg) no-repeat;
	width: 250px;
	height: 56px;
	margin-top: 30px;
	padding: 18px 0 0 12px; }			
	
#wrapper-body {
	width: 900px;
	margin-bottom: 30px;
	background: url(../images/bg-body.gif) no-repeat; }

#kiri {
	float: left;
	width: 250px;
	margin-right: 25px; }
	
#kanan {
	float: left;
	width: 600px;
	margin-left: 25px; }	

		.isi-kanan {
			margin-top: 20px;
			line-height: 1.8em; }
			
				.isi-kanan p a { text-decoration: none; }
				.isi-kanan p a:active, .isi-kanan p a:link { color: #843F20; border-bottom: 1px dotted #D7CEA6; }
				.isi-kanan p a:visited { color: #B77558; }
				.isi-kanan p a:hover { background-color: #843F20; color: #FFF; }	

.section-produk {
	float: left;
	width: 280px;
	margin: 0 20px 10px 0;
	color: #625B3D; }

		.section-produk img { border: 1px solid #E1DCC5; }		
				
.error {
	padding: 10px;
	border: 1px solid #DAD1A9;
	background-color: #F8FAC4; }
	
		.error ul li {
			margin-left: 15px;
			color: #C00;
			font-size: 1.1em; }	

.detail-produk {
	width: 600px;
	height: 192px;
	margin-bottom: 30px; }
	
		.foto { 
			float: left;
			width: 250px;
			height: 192px; }
			
				.foto img { border:	1px solid #E1DCC5; }
				
		.detail {
			float: left;
			margin-left: 30px;
			height: 192px; }

.judul-tabel { /* buat tabel di halaman checkout */
	background-color: #F0EBD6;
	font-size: 1.1em;
	color: #625B3D;
	font-weight: bold;
	text-align: right; }

.tablecart {
	width: 600px;
	color: #625B3D; }
		
	
	
		.tablecart a {text-decoration: none; }
		.tablecart a:link, .tablecart a:active { color: #843F20; }
		.tablecart a:visited { color: #B77558; }
		.tablecart a:hover { text-decoration: underline; color: #630; }

.trailers { 
	margin: 30px 0;
	width: 600px;
	clear:both; }

.teaware-wrapper {
	width: 600px;
	margin: 20px 0; }
	
		.teaware-gambar {
			float: left;
			width: 159px;
			height: 150px;
			margin-right: 10px; }
		
		.teaware-gambar img { border: 1px solid #E1DCC5; }
		
		.teaware-info {
			float: left;
			margin-left: 5px;
			width: 400px; }
						
#footer {
	width: 900px;
	background: url(../images/bg-footer.gif) no-repeat;
	padding: 10px 0;
	clear: both; }
		
		.footer-kiri {
			float: left;
			width: 620px;
			margin-right: 30px; }
			
				.footer-kiri a { text-decoration: none; }
				.footer-kiri a:link, .footer-kiri a:active { color:#843F20; border-bottom: 1px dotted #D7CEA6; }
				.footer-kiri a:visited { color: #B77558; }
				.footer-kiri a:hover { background-color: #843F20; color: #FFF; }
			
		.footer-kanan {
			float: right;
			width: 250px;
			text-align: right; }	
/* 3 */

h2 {}

	.teaser h2 {
		font: 1.6em normal Arial, Helvetica, sans-serif;
		color: #51440B;
		margin-bottom: 15px; }
	
	#wrapper-bawah h2 {
		background: url(../images/h2-finest.gif) no-repeat;
		width: 900px;
		height: 20px;
		padding-bottom: 5px;
		margin-bottom: 15px;
		text-indent: -9999px;
		border-bottom: 1px solid #F0EBD6; }

			
				
		
/* untuk judul kategori produk */
		
	h2.judul-kategori {
		color: #6E5C0A;
		margin-bottom: 15px;
		font: 1.9em bold Verdana, Arial, Helvetica, sans-serif;
		border-bottom: 1px solid #F0EBD6; }	
				
											
h3 {}
	
	.wrapper-kolom h3 {
		font: 1.2em bold Verdana, Arial, Helvetica, sans-serif; }
		
			.wrapper-kolom h3 a { text-decoration: none; font-weight: bold; }
			.wrapper-kolom h3 a:active, .wrapper-kolom h3 a:link { color: #843F20; border-bottom: 1px dotted #D7CEA6; }
			.wrapper-kolom h3 a:visited { color: #B77558; }
			.wrapper-kolom h3 a:hover { background-color: #843F20; color:#FFF; }
	
	h3.info-produk {
		font: 1.4em bold Verdana, Arial, Helvetica, sans-serif;
		color: #6E5C0A;
		margin: 25px 0 10px 0;
		border-bottom: 1px solid #F0EBD6; }		
		
h4 {}
	.section-produk h4 {
		font-size: 1.1em;
		font-weight: bold; }
		
			.section-produk a { text-decoration: none; }
			.section-produk a:active, .section-produk a:link { color: #843F20; border-bottom: 1px dotted #D7CEA6; }
			.section-produk a:visited { color: #B77558; }
			.section-produk a:hover { background-color: #843F20; color: #FFF; }	
				
/* 4 */
#mainnav {
	width: 900px;
	height: 13px;
	padding: 8px 0;
	font-weight: bold;
	font-size: 1.1em; }
	
		#mainnav ul li {
			display: inline;
			list-style: none;
			padding: 18px; }
			
		#mainnav ul li a { text-decoration: none; }
		#mainnav ul li a:link, #mainnav ul li a:active, #mainnav ul li a:visited { color: #6E5C0A; }
		#mainnav ul li a:hover { color: #AE9831; }

.subnav {
	margin-top: 30px; }
	
.subnav ul li {
	list-style: none;
	height: 25px;
	padding: 3px 0 0 25px;
	background: url(../images/bg-subnav.gif) no-repeat;
	font-size: 1.2em;
	font-weight: bold;
	color: #625B3D; }
	
		.subnav ul li a { text-decoration: none; }
		.subnav ul li a:link, .subnav ul li a:active { color: #843F20; }
		.subnav ul li a:visited { color: #B77558; }
		.subnav ul li a:hover { background-color: #843F20; color: #FFF; } 

.subnav-produk {
	margin: 30px 0 0 20px;
	font-size: 1.1em; }
	
		.subnav-produk ul li {
			padding-bottom: 3px;
			margin-bottom: 3px;
			font-weight: bold;
			color: #625B3D;
			list-style: none; }
		
		.subnav-produk ul li ul li {
			list-style-image: url(../images/arrow2.gif);
			font-weight: normal; 
			margin-left: 15px;
			padding-bottom: 1px; }		

		.subnav-produk a { text-decoration: none; }
		.subnav-produk a:link, .subnav-produk a:active { color: #843F20; }
		.subnav-produk a:visited { color: #B77558; }
		.subnav-produk a:hover { background-color: #843F20; color: #FFF; }
											
/* 5 */
.txt {
	width: 120px;
	font-size: 1.4em; }

.qty {
	border: 1px solid #F0EBD6; }
	
.email-forget { /* buat field di halaman forgot password */
	border: 1px solid #F0EBD6;
	font-size: 1.4em; }
	
.floatl {
	float: left; }
	
.floatr {
	float: right; }

.searchbox {
	border: 1px solid #F0EBD6;
	padding: 1px;
	font-size: 1.4em;
	float: left;
	width: 155px; }

.search-submit { /* button search */
	margin-left: 5px;
	vertical-align: top; }

.button-submit { 
	padding: 1px;
	height: 20px;
	font: 10px/16px Georgia,"Times New Roman",Times,Serif;
	color: #600; }
				
fieldset {
	padding: 8px;
	border: 1px solid #DAD1A9; }

fieldset legend {
	font-size: 1.2em; 
	font-weight: bold; 
	margin: 0; 
	padding: 8px; 
	color: #660033; }

fieldset label {
	clear: left; 
	display: block; 
	float: left; 
	width: 200px; 
	text-align:right; 
	padding-right:10px; 
	margin-bottom: 6px;
	font-size: 1.1em;
	color: #625B3D; }

fieldset input {
	margin: 0 0 10px 0;
	border: 1px solid #F0EBD6; }

fieldset select {
	margin: 0 0 10px 0; }
	
fieldset textarea {
	margin: 0 0 4px 0;
	border: 1px solid #F0EBD6; }

/* 6 */
p { margin-bottom: 15px; color: #625B3D; text-align:justify; }

.teaser p, .isi-kanan p { font-size: 1.2em; }
.wrapper-kolom p,  #footer { font-size: 1.1em; }

.bold { font-weight: bold; }

.harga { 
	font: 1.9em bold Verdana, Arial, Helvetica, sans-serif;
	margin: 20px 0;
	color: #A2000A; }