/*** 
PatchLane www.PatchLane.com 
Name	:	style.css
Create	:	3 Dec 2010
Modified:	31 Jan 2012

Ref:	: HTML Easy References: http://www.w3schools.com/tags/default.asp
		  CSS Easy References: http://www.w3schools.com/cssref/css3_pr_background.asp
		  ASCII/HTML Codes Ref: http://ascii.cl/htmlcodes.htm
		  Color Scheme: http://colorschemedesigner.com/#3L11TrbrXuDMn
		  360 Framework and example: http://960.gs/ and http://www.designinfluences.com/fluid960gs/12/fixed/jquery/
		  
		  Vertical Alignment:
		  http://www.vanseodesign.com/css/vertical-centering/ 
		  http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug 
***/

body {
	/*font: 62.5%/1.2 Arial, Helvetica, sans-serif;*/
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-family: Arial Black, Gadget, sans-serif;*/
	font-family: Verdana, Geneva, sans-serif;
	background-color: #eee;  	/* standard=white, development=#EEE (light gray) */
}


/* Page Header */
/* Logo, contact info and horizontal drop down menu */
#pageheader {
	/*background: url('../images/headerbackground.png') top left repeat;*/
	background-color: #eee;
}
	#pageheader #bar {						/* Horizontal bar top of the browser, future for additional technical menu */
		height: 25px;
		background-color: #0c2763;
	}
	#pageheader #bar ul {					/* Login menu at the top of page header */
		float: right;
		color: #B1C1E7;						/* Light blue text for footer */
	}
	#pageheader #content {					/* Hold the logo, dropdown menu, contact us and etc */
		padding-top: 20px; 					/* white space from top of top horizontal bar */
		padding-bottom: 5px;
		margin-bottom: 20px;				/* push banner below */
	}
	#pageheader #content #logo {			/* Image Replacement Ref: http://css-tricks.com/css-image-replacement/ */	
		margin-bottom: 10px;				/* push dropdown menu to align with contact info box */
		border: none; 						/* prevent border since logo is selectable */
	} 

#contactinfo {
	float: right;			/* align contactinfo div box to the right of the header */
}
	#contactinfo h5 {
		margin: 0px;		/* no space for the text */
		float: right;		/* text align with the image */
		color: #ff6600;		/* Orange text */
	}
	#contactinfo img {
		float: right;		/* image align to the right of the contactinfo div box */
	}	

#login {					/* Sign in link */
	margin-right: 25px;		/* Make it align with drop down menu */
	margin-bottom: 3px;		/* Space before drop down menu */
	float: right;			/* align-text: right; only work for <p> */
}
	
/* Main Drop Down Menu at the header */
/* Ref: http://www.cssnewbie.com/easy-css-dropdown-menus/ */
/* Need to include Javascript to support IE6, refer to above URL */
#dropdownmenu {				/* Replace the above #pageheader div after include the #login */
	z-index: 9;			/* Drop down menu always in front when drop down, larger z-index in front */
	position: relative;		/* Allow drop z-index to works */ 
}
	#dropdownmenu li {					/*Top level menu horizontal items */
		position: relative;
		margin: 0; padding: 0;
		list-style: none;
		float: left; 
	}
	#dropdownmenu  li a {				/* Top level menu horitizotal items text */
		padding: 0.5em 1em;
		display: block;
		background-color: #0c2763;
		font-weight: bolder;
		color: #B1C1E7;
		text-decoration: none;
	}
	#dropdownmenu li:hover a {			/* Highlight text when selected */
		background-color: #244695;
	}	
		#dropdownmenu li ul {			/* Second level, the drop down box */
			display: none; 
			width: 12em; 			/* Width to help Opera out */
			background-color: #244695; 
		}
		#dropdownmenu li:hover ul {
			display: block;
			position: absolute;
			margin: 0;
			padding: 0; 
		}
			#dropdownmenu li:hover li {
				float: none; 
			}
			#dropdownmenu li:hover li a {
				background-color: #244695;
				/*border-bottom: 1px solid #fff;*/	/* Underline for each pull down item */
				color: black;
			}
			#dropdownmenu li li a:hover {
				background-color: #B1C1E7; 
			} 
		
/* Page Banner */
/* Hold the dynamic image, control by nivo-slider, currently using default themes */
/* Check out patchlane/js/nivo-slider/nivo-slider.css and patchlane/js/nivo-slider/themes/default/default.css */		
#pagebanner {
	width: 940px; height: 420px;	/* Max size of each dynamic image */
	overflow: hidden;				/* Oversize image will be clipped away */
	/*border: 1px solid #CCC;		/* Align the last two pixel to be the same width as page header and page content */
}

/* Main Page Content */
/* Left column for block menu and etc, right column for page side bar */
#pagecontent {							/* Dummy div to hold left and right column */		
	margin-top: 0px;					/* White space from banner above, dynamic nivo slider include additional bottom padding */ 
	/*background-color: pink;				/* background color for debug */
}
	#pagecontent .leftcolumn {
		/*background-color: lightblue;	/* background color for debug */
	}
	#pagecontent .rightcolumn {
		/*background-color: lightgreen;	/* background color for debug */
	}
	
	/* Default content box and content box title */
	.box {								/* Content box */
		margin-bottom: 20px;			/* Default white space with the next box below */
		padding-bottom: 10px;			/* Default white space between box content and bottom border of the box */
		background-color: white;		/* Default box color */
		}	
	.boxtitle {							/* Box title */
		padding-left: 10px;				/* Default title spacing display for each text boxes */
		line-height: 2.0em;				/* Default height of title bar */
		color: #B1C1E7;					/* Default title color, light blue */
		background-color: #0c2763;		/* Default title background is dark blue */
	}
	.boxcontent {						/* Actual content area inside the box */
		margin-left: 10px;				/* Default left margin */
		margin-right: 10px;				/* Default right margin */
		line-height: 1.2em;				/* Default after few experiment */
	}
	.boxcontent .button{					/* Generate form button */
		margin: 0 auto;					/* Default is center */
		width: 10em;					
		display: block;
		font-size: large;
	}
	.boxcontent .button:hover {			/* focus on effect */
		text-decoration: underline;		/* Default underline when focus on */
		cursor: pointer;				/* Default hand pointer when focus on */
	}
	
	/* Customized box for each box content */
	/* List Products by Features */ 	
	#listproducts .boxcontent {			/* Overright above default box margin to allow 3 listing in a row */
		margin-right: 0px;				/* in the block menu */				
	}

	/* Product Introduction with description in 2 column layout */
	#introproducts .boxcontent {			/* Overright default box margin to allow 2 listing in a row */
		margin-left: 0px;
		margin-right: 0px;				/* in the block menu */				
	}	
		#introproducts li {
			margin-left: 10px;
			margin-right: 10px;
			margin-bottom: 20px;
			width: 326px;				/* 2 column design */
			display: inline-block;		/* Allow the list the flow as a box, alternative to float: inline */
			vertical-align: top;		/* align same row li at the top */
			background-color: white;
										/* display itmes in a list for IE7 */
			zoom: 1;					/* http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ */
			*display: inline;			/* http://haslayout.net/haslayout */
		}
		#introproducts li img {
			margin-right: 10px;
			width: 150px;
			overflow: none;
			float: left;				/* img at the top left corner of the li box */
			border: 1px solid white;	/* invisible border to avoid content shifting when hover with border */
		}
		#introproducts li img:hover {
			border: 1px solid #999;
		}
		#introproducts li a {				
			text-decoration: none;			/* disable all underline at the link */
		}
		#introproducts li h5 {					/* title for each introduced products */
				color: #196fda;				/* light sky blue */
		}
		#introproducts li a h5:hover {
			text-decoration: underline;		/* effect on when pointed each product intro header*/
		}
		#introproducts li p {
			text-align: justify;			/* description text for each introductory product */
		}
		#introproducts li span {				/* more... at the bottom of the text */
			font-size: x-small;
			font-weight: bold;
			font-variant: small-caps;
			color: #ff6600;					/* Orange */
		}	
		#introproducts li a span:hover {
			text-decoration: underline;		/* effect on when pointed to more>>*/
		}
	
	/* Categories Menu */
	#categories {
		background-color: #DDD;
		/*border: 1px solid #0c2763;		/* Add border to the categories menu box */
	}	

	/* Purchases */
	#purchases {
		background-color: #0c2763;				/* Box content with dark blue background */
	}
		#purchases .boxtitle {					/* Box title in dark blue and orange background */
			color: #0c2763;						/* Dark blue text */
			background-color: #ff6600			/* Orange */
		}
		#purchases .boxcontent {
			color: #B1C1E7;						/* Light blue text */
			text-align: center;					/* All text center aligned */
		}
		#purchases .bigletter1 {					/* The large text "P R I C E" display format */
			margin-bottom: 0px;
			color: white;
			font-size: 200%;
			font-weight: normal;
			line-height: 0.6em;
			letter-spacing: 12px;
		}
		#purchases .bigletter2 {					/* The large text "Quote" display foramt */
			margin-bottom: 20px;
			color: white;
			font-size: 350%;
			font-weight: bold;
			line-height: 1em;
		}
		#purchases .boxcontent form {				/* White space after the submit button */
			margin-bottom: 10px;
		}
		
	/* Retailers */
	#retailers {
		background-color: #DDD;				/* Light gray background */
	}
		#retailers .boxtitle {				/* Box title in dark blue and orange background */
			color: white;					/* Bright box title to retailer attract attention */
		}
		#retailers .boxcontent {
			font-size: 120%;				/* Emphsis this box with slightly larger font */
		}	
		#retailers .boxcontent h4 {			/* Heading of the content box */
			color: #ff6600;					/* Orange heading */
			text-align: left;
		}
		#retailers .boxcontent form {			/* White space after the submit button */
			margin-bottom: 10px;
		}
	
	/* Download Catalogs */
	#download {
		background-color: #DDD;				/* light gray background */
	}		
		#download .bigletter1 {				/* The large text "DOWNLOAD" display format */
			margin-bottom: 0px;
			color: #0c2763;					/* Dark blue */
			font-weight: normal;
			line-height: 0.5em;
			font-size: 200%;
			text-align: center;
		}	
		#download .bigletter2 {				/* The large text "H E R E" display format */
			margin-bottom: 20px;
			color: #0c2763;					/* Dark blue */
			font-weight: bold;
			line-height: 1.0em;
			font-size: 400%;
			text-align: center;
			letter-spacing: 1px;
		}	
		#download ul {						/* List download files */
			list-style: none;
		}	
			#download li {
				margin-left: 0px;
				height: 30px;
			}
			#download li a{
				margin-left: 10px;			/* Move away from pdf image */
				color: #ff6600;				/* Orange text */
			}
		#download li span {					/* Small letter for file size e.g. 3.3MB */
			font-size: 70%;
		}
		#download .note {					/* Get Adobe reader note */
			font-size: x-small;				/* Less important note, smaller font */
			line-height: 1.2em;
			text-align: justify;
		}	
		#download a {
			text-decoration: none;
		}
		#download a:hover {
			text-decoration: underline;
		}

	/* Newsletter */	
	#newsletter {
		background-color: #DDD;
	}	
		#newsletter .boxcontent {
			line-height: 1.2em;
		}
		#newsletter .boxcontent label {		/* Small label for email input text */
			font-size: x-small;
			font-weight: bold;
		}
		#newsletter .boxcontent input {
			font-size: 130%;
			color: #0c2763;					/* Dark blue email text */
		}
		#newsletter .boxcontent .button {		/* White speace between email address input and button */
			margin-top: 20px;
		}

		
	/* Shipments */
	#shipments {
		background-color: #DDD;
	}		
		#shipments .boxcontent {
		}
		#shipments .boxcontent li {			/* First level list */ 
			list-style: none;
		}
		#shipments .boxcontent img {		/* Logo as the list */
			margin-bottom: 10px;
		}
		#shipments .boxcontent li li {		/* Second level list */
			margin-left: 10px;
			list-style-type: circle;
			font-size: x-small;
			line-height: 1.0em;
		}
		
/* Block Menu */
/* Easy browsing and selection with image and description text */
/* Method for vertical-alignment: http://www.vanseodesign.com/css/vertical-centering/ */
/* http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug */
#blockmenu {							/* The ul is the main container of the block menu */
	margin-left: 0px;
}
	#blockmenu li {					/* Each selection item contain image and decription */
		margin-left: 0px;
		margin-right: 10px;			/* align by giving left and bottom white space of the li box */
		margin-bottom: 10px;
		width: 220px;				/* fix size box, with one image, label and button */
		/*height: 300px;*/			/* height determine by fix size content inside the li */
		display: inline-block;		/* float: left need clear to fill up div space, IE7 not supported */	
		/*background-color: #AAA;	/* Color for debug */
									/* display itmes in a list for IE7 */
		zoom: 1;					/* http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ */
		*display: inline;			/* http://haslayout.net/haslayout */
	}
	#blockmenu li a {					/* Unused */
		text-decoration: none;		/* Remove underline for selection text */
	}
	#blockmenu  .photoimage {			/* Photo image mode=square box and mode=rectangle/landscape box */
		width: 220px;				/* Display as square=220x220px, rectangle=220x146 */
		height: 146px;
		/*line-height: 220px;			/* align verticle for landscape image in square mode, line-height=image height. Disable for rectangle mode */
		text-align: center;			/* align horizontal for portrait size image */
		overflow: hidden;			/* clip any oversize image */
		border: 1px solid white;	/* invisible on white background, take up space to avoid shifting when hover */
		background-color: white;
		background-image: url('../images/loading16x16.gif');
		background-repeat: no-repeat;/* Loading animation image http://www.loadinfo.net/ */
		background-position: center;
	}
		#blockmenu .photoimage:hover{	/* Highlight the imag box when mouse over */
			border: 1px solid #AAA;		/* Grey border */
		}
		#blockmenu .photoimage img {
			width: 218px;				/* Scale the image porportionally by width, oversize will be clipped by #blockmenu li div */
			/*height: 218px;*/	
		}
		#blockmenu .photoimage span { 	/* See http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug */
			display: inline-block;		/* IE8 and below vertical align fixes */
		}
	#blockmenu .photolabel {				/* Photo label with product code and name */
		margin-bottom: 3px;
		height: 3.0em;					/* Allow max 3 lines, more will be hidden by overflow */
		overflow: hidden;				/* Fix height and prevent more text from pushing down the detail button */
	}
		#blockmenu .photolabel .code {	/* Product code label */
			margin-bottom: 0px;
			font-size: small;
			line-height: 1.0em;
			color: #ff6600;				/* Orange text */
		}
		#blockmenu .photolabel .name {	/* Product name label */
			margin-bottom: 0px;
			/*font-weight: bold;*/
			line-height: 1.0em;
			color: #0c2763;				/* Dark blue label name */
		}
	#blockmenu button {					/* The detail button under each photo label */
		width: 5.0em;					/* No changes of button size, when hover with bold effect */
		float: right;
		font-weight: bold:
	}
		#blockmenu button:hover {
			text-decoration: underline;
			cursor: pointer;
		}
		
/* Image listing */
.listimage{
}
	.listimage li {
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 20px;
		list-style: none;
		display: inline;
	}

	
/* Page Footer */
/* Consist of a pipemenu, copyright and trademark notices */
#pagefooter {			
	margin-bottom: 40px;				/* Give empty space from footer to the browser windows base */
}
	#pagefooter #background {
		background-color: #0C2763;		/* Dark blue for footer */
	}
	#pagefooter #content {
		margin-top: 20px;				/* Force space before pipe menu */
		margin-bottom: 20px;
		color: #B1C1E7;					/* Light blue text for footer */
		/*text-align: center;			/* All text aligned to center */
	}
	#pagefooter #copyright p {			/* Text for copyright */
		margin-bottom: 10px;			/* Align distant to the horizontal line */
		font-size: small;
	}
	#pagefooter #copyright hr {			/* Horizonal line */
		border-top: 1px solid #B1C1E7;;	/* Same color as text */
	}	
	#pagefooter #trademarks {			/* Text for trademarks */
		line-height: 1.1em;		
		font-size: x-small;
	}
	#pagefooter #footerbar {			/* Bar at the footer to hold Logo */
		margin-bottom: 30px;			/* White space before end of the browser windows */
		background-color: #ddd;			/* White or light gray */
	}
	#pagefooter #footerbar img {		/* transparent grey logo */
		margin-top: 3px;
		margin-bottom: 5px;
		float: right;
	}
		
/* Pipe Menu Class */
/* Modified from: http://css.maxdesign.com.au/index.htm */	
.pipemenu {					/* Footer menu Home-Privacy-Terms of Use-Contact Us */
	margin: 0; 
	padding: 0;
}
	.pipemenu  li{				/* Each select item in the footer menu */
		margin: 0;
		padding: 0pt 0.5em;		/* Space left and right of each select item */
		display: inline;
		line-height: 1.7em;		/* Also control the overall height of the pipemenu*/
		border-left: 1px solid rgb(151, 163, 165);	/* vertical line as select item seperator */
	}
	.pipemenu  .noborder {border: none;}							/* Disable vertical line for the first select item */
	.pipemenu  li a {text-decoration: none; color: #B1C1E7;}		/* no underline, set color of footer menu */
	.pipemenu  li a:hover {text-decoration: underline !important;}	/* highlight underline when mouse pointer on item */

/* Contact Us */
/* The Readme, Contact Form and Thank You message */
#contactusreadme {				/* Readme grey box on the left colume */
	background-color: #DDD;
}
	#contactusreadme ol li {
		margin-bottom: 10px;
	}
	#contactusreadme ol ul {		/* Small sub-sub list */
		margin-top: 10px;
		font-size: x-small;
		line-height: 1.0em;
	}
	
#contactusform {					/* The fill in and submit form on the right colume */

}
	#contactusform li {			/* Each list has a label, input field and error message */
		margin-left: 0px;
		margin-bottom: 5px;
		list-style: none;
	}
	#contactusform  li label{		/* The title for each fill in blank */
		font-weight: bold;
		color: #196fda;			/* light sky blue */
	}
	#contactusform  .error{		/* error message below the fill in blank */
		color: red;				/* also use by error message when smtp email failed */
		font-weight: bold;
		font-size: x-small;
	}
	#contactusform .button {		/* Send email button */
		margin: 0 auto;
		width: 10em;
		display: block;
		font-size: large;
	}
	/* IE* bug to center button, http://haslayout.net/css/No-Auto-Margin-Center-on-Buttons-Inconsistency */	
	/*#contactusform  input[type="submit"] {
		margin: 0 auto;
		width: 10em;
		display: block;
		font-size: large;
	}*/
	#contactusform .button:hover {
		text-decoration: underline;
		cursor: pointer;
	}

/* Product Page */
/* Product Image and Description */
#productphoto{
	padding-bottom: 20px;
}
	#productphoto .mainview{				/* The Big Image */
		width: 460px; height: 307px;	/* Fix proportion viewing frame and maintain Canon aspect ratio width/height=1.5 (photo size=1936x1288) */
		overflow: hidden;				/* Clip any extra image part to ensure the image box don't grow */
		background: white;				/* standard background color for some smaller image that don't occupy the whole image frame */
		background-image: url('images/loading24x24.gif'); /* Loading animation image http://www.loadinfo.net/ */
		background-repeat: no-repeat;
		background-position: center;
	}
	#productphoto .mainview img {			/* Default scale the image proportionally to the above image viewing frame */
		height: 307px;					/* Runtime JQuery will decide how to scale to fit in the photo to viewing frame */	
		margin: 0 auto;					/* Auto margin and block display to center the image */
		display: block;	
	}
	#productphoto .thumbnailview ul {
		margin-top: 2px;				/* Small spacer to separate from the tools div */
		list-style-type: none;			/* Allow image inside to align center and fill fullly into list box */
		background-color: lightgreen;
	}
	#productphoto .thumbnailview ul li{		/* The Index Small Image */
		margin: 0 10px 5px 0;			/* Extra margin for left (space for next item) and bottom (space for next line)*/
		float: left;					/* Let list run from left to right */
		width: 60px; height: 40px;		/* Fix thumbnail proportion viewing frame and maintain Canon aspect ratio width/height=1.5 */
		overflow: hidden;				/* Any extra will be clip away */
		border: 1px solid #eee;			/* Light grey border to emphasis the image */
		background: white;				/* For some image that don't occupied the fix size box */
		background-image: url('/images/loading16x16.gif'); /* Loading animation image http://www.loadinfo.net/ */
		background-repeat: no-repeat;
		background-position: center;
	}
	#productphoto .thumbnailview  ul li img{
		margin: 0 auto;					/* center object */
		display: block;					/* Allow image to be center aligned */
		height: 40px;					/* Default proportional scaling, let width vary. Landscape and protrait photo need to fit top to bottom */
	}
	#productphoto .thumbnailview  li:hover{
		border: 1px solid #0C2763;
	}
	#productphoto .tools {				/* Popup and zoom tools */
		margin-top: 2px;				/* Avoid border hidden by mainview box */
		text-align: right;
	}
	#productphoto .tools ul {
		margin-bottom: 0px;				/* space between tools list and thumbnail list */
	}
	#productphoto .tools ul li {
		margin-left: 5px;
		display: inline; 
	}
	#productphoto .tools a{
		font-size: smaller;	
		color: #999;
		text-decoration: none;
	}
	#productphoto .tools img{
		padding: 0;
	}
	#productphoto .tools a:hover{
		border: 1px solid #aaa;
	}
#productdescription {
	
}

/* Pop up Windows */
#fade { 									/* Transparent background layer, cover the whole body */
	display: none;						/* Hidden by default */
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9;
}
#productphoto .popupview{
	display: none; 						/* Hidden by default */
	background: white;
	padding: 0;
	border: 10px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 10; cursor: none;
	/*--CSS3 Box Shadows--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px; cursor: url(/images/magnify.cur), -moz-zoom-in, pointer;
	
	background-image: url('/images/loading48x48.gif'); /* Loading animation image http://www.loadinfo.net/ */
	background-repeat: no-repeat;
	background-position: center;
}
.popupview .btn_close {
	float: right;
	margin: -45px -40px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}
.popupview img {margin: 0 auto; display: block};	/* Center popupview image */

/* Zoom tool */
#wrap, #wrap2   			{ width: 460px; position: relative; }
#small, #small2			{ position: relative; width: 100%; }
#large, #large2 , .zoom   		{ background: pink; position: relative;  }
#mover, #mover2, .mover			{ position: absolute; top: 0; left: 0; width: 202px; height: 202px; overflow: hidden; z-index: 100; background: white; display: none; border: 1px solid #666; }
#overlay, #overlay2		{ border: 1px solid #AAA; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }

#huy-magnifier {
	width: 300px;
	height: 200px;
	border: 1px solid #000;
}