/**********************************************************************************************

	CSS Styelsheet
	Title	: Rigacrafts Website
	Author	: Tung Truong
	Date	: December 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Content
			2.3 Footer
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	img {
		margin-bottom: -3px;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		position: relative;
		text-align: center;
		font: 62.5% Arial, Helvetica, sans-serif;
		background: white url(../images/header-bg.jpg) repeat-x left top;
	}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		cursor: pointer;
		color: #000;;
		text-decoration: underline;
	}
	
	a:hover, 
	a:active {
		color: #5d709a /*blue*/;
		text-decoration: none;
	}
	
	.clear { clear: both; }

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	
	.container {
		margin: 0 auto;
		width: 100%;
		text-align: left;
	}
	
	#header {
		position: relative;
		z-index: 100;
		margin: 0 auto;
		padding: 0;
		width: 800px;
		height: 130px;
	}
	
	#content {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		padding: 20px 15px;
		overflow: hidden;
		width: 806px;
	}
	
	#footer {
		clear: both;
		margin: 0 auto;
		padding: 8px 0 0 5px;
		background: white url(../images/footer-bg.jpg) repeat-x left top;
		width: 804px;
		height: 26px;
		text-align: left;
		color: #224b9b;
		
	}

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	
	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 181px;
		height: 94px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		z-index: 30;
		top: 32px;
		left: 0;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../../_media/images/rigacrafts-logo.gif) no-repeat;
	}
	
	#header #navigation {
		width: 440px;
		height: 50px;
		background-color: #e2e7ee /*light blue*/;
		margin-top: 75px;
		float: right;
	}
		#header #navigation ul {
			position: relative;
			font-size: 1.2em;
			font-weight: bold;
			padding: 7px 7px 0 0;
			height: 35px;
		}
		#header #navigation ul li{
			display: inline;
			padding: 7px 0 0 10px;
		}
		/* this is to indicate which page the user is on through the navigation */
		#home .container #header #navigation #main_navigation li.home a,
		#anodise .container #header #navigation #main_navigation li.anodise a,
		#about .container #header #navigation #main_navigation li.about a,
		#drink .container #header #navigation #main_navigation li.drink a,
		#contact .container #header #navigation #main_navigation li.contact a { 
			color: #5d709a /*blue*/;
			text-decoration: none;
		}
		
		#header #right-header {
		position: absolute;
		right: -5px;
		top: 0;
		padding: 35px 5px 0 0;
		width: 150px;
		text-align: right; 
	
		}
			#header #right-header p { 	
				color: #5d709a /*blue*/;
				font-weight: bold; 
				font-size: 1.5em;
				}
			#right-header a {		
				text-decoration: none;
				color: #000 /*grey */;
			}	
			#right-header a:hover, 
			#right-header a:active {
				text-decoration: underline;
			}
			
/* 2.2	Content
-----------------------------------------------------------------------------------------------*/			
		.main-content {
			text-align: left;
			padding: 10px;
			background-color: #e2e7ee /*light blue*/;
			width: 788px;
		}
		.main-content h2 {
			font-size: 1.5em;
			margin: 8px 0 5px 0;
			color: #223E97 /*navy blue*/;
			text-transform: uppercase;
		}
		
		.main-content  p,  .main-content li{ 
			font-size: 1.2em;
			line-height: 1.6em;
			margin-top: 10px;
			margin-bottom: 7px;
		} 
		.main-content li { list-style: square; list-style-position: inside }
		

	#content .banner {
	   position: relative;
		width: 806px;
		margin-bottom: 10px;
		height: 236px
	}
		ul#banner li img{
			border: 1px solid #ccc;
			padding: 4px;
		}
 
  .img-border {
  		padding:3px; 
		border: 1px #ccc solid;
		}