/* My Class */
.overflow 											{ overflow: hidden }
.clear 												{ clear: both }
.underline 											{ text-decoration: underline }
.black 												{ color: black }
.white 												{ color: white }
.red 												{ color: #c11208 }
.yellow												{ color: #faec21 }
.gray 												{ color: #333333 }
.bold												{ font-weight: bold }
.italic												{ font-style: italic }
.center 											{ text-align: center }
.visible 											{ visibility: visible }
.invisible 											{ visibility: hidden }
.display,.block										{ display: block }
.none	 											{ display: none }
.uppercase 											{ text-transform: uppercase }
.lowercase 											{ text-transform: lowercase }
.capitalize											{ text-transform: capitalize }

/* General Tag */
body												{ font-family: Georgia, Times, "Times New Roman", serif; background: white }
h1													{ font-size: 70px }
h2													{ font-size: 40px } 
h3													{ font-size: 30px }
h4													{ font-size: 22px; font-weight: bold;}
h5													{ font-size: 16px; font-weight: bold; }
h6													{ font-size: 14px }
p 													{ font-size: 14px; line-height: 20px; color: #666666 }
a 													{ text-decoration: none }
small 												{ font-size: 11px }
strong,b 											{ font-weight: bold }
em,i 												{ font-style: italic }

/* Common Layout */

.background 										{ background-image: url("../images/background.png"); overflow: hidden;}
.wrapper 											{ width: 900px; margin: 0 auto;}

.header 											{ background-image: url("../images/headerbg.png"); background-repeat: repeat-x; margin-top: 22px; overflow: hidden;}
.header-menu ul 									{ list-style: none; width: 535px; float: right; text-align: right;}
.header-menu ul li 									{ display: inline-block; padding: 0 10px; margin: 22px auto 0 auto; width: 100px;}
.header-menu ul li a 								{ color: white; font-size: 18px; font-family: Candara;}

.banner 											{ margin-top: 15px; display: block;}
.feature											{ display: block; margin: 20px 0 16px; font-size: 22px; font-family: Candara; color: #133c2c;}
.featured 											{ float: left; margin: 15px 30px 25px 0; width: 280px;}
.shadow 											{ box-shadow: 5px 8px 8px black;}
.title 												{ margin: 25px 0 0 3px; font-size: 16px; font-weight: bold; }
.featured p 										{ margin: 15px 0 15px 3px; color: #133c2c; font-size: 14px; line-height: 20px;}
.feature-link 										{ text-align: center; display: block; margin: 0 auto; width: 95px; font-size: 14px}
.link												{ color: #133c2c; margin: 0 auto; width: 95px;}

/* Tablelyfier */
.featured-pic 										{ margin-top: 15px; width: 100%;}
.featured-pic img 									{ margin-right: 30px}
.feature-table td 									{ font-family: Candara;}
.featured-desc 										{ margin: 15px 0 15px 3px; color: #133c2c; font-size: 14px; line-height: 20px;}
.spacer 											{ width: 20px;}

.product-table 										{ margin-bottom: 28px; }
.product-table td 									{ font-family: Candara; padding-top: 4px 0 0; font-size: 14px; line-height: 20px}
.table-link 										{ margin: 0 auto; font-size: 14px}
.table-link table									{ color: #133c2c; margin: 0 auto; width: 65px;}

.contact-table 										{ margin-top: 35px; font-family: Candara; font-size: 14px; color: #133c2c; width: 100%;}
.contact-table td 									{ vertical-align: top; height: 32px; padding-bottom: 6px;}
.contact-table td h5 								{ margin-top: 7px;}
.contact-table td input[type=text]					{ height: 26px; width: 99%; font-family: Candara; font-size: 14px; color: #133c2c; padding: 5px; border: 1px solid #cac8c0;}
.contact-table select     	          		     	{ height: 30px; width: 99%; font-family: Candara; font-size: 14px; color: #133c2c; padding: 5px; border: 1px solid #cac8c0;}
.contact-table td textarea 							{ width: 99%; font-family: Candara; font-size: 14px; color: #133c2c; padding: 5px; border: 1px solid #cac8c0;}
#contact-table 										{ width: 100%;}
.button 											{ background-image: url("../images/button.jpg"); background-repeat: repeat-x; border: 0; width: 105px; text-align: center; color: white; margin:0 5px; font-family: Candara; font-size: 16px; font-weight: bold; padding: 3px;}
.contact-details td									{ vertical-align: middle; margin-top: 0; padding: 0;}
.err 												{ color: red; font-size: 12px;}

.about-title 										{ margin: 20px 0 20px; font-weight: bold; font-size: 22px; font-family: Candara;}
.about-desc											{ float: left; margin: 15px 0 20px 0; color: #133c2c; font-size: 14px; font-family: Candara;}

.product-title 										{ margin-bottom: 18px; margin-top: 43px; font-family: Candara; font-size: 22px; font-weight: bold;}
.product-feature									{ width: 200px; float: left; margin-right: 33px; margin-bottom: 28px;}
.product-image										{ border: 1px solid #9c9c9e;}
.product-header										{ padding-top: 11px; display: inline-block; font-size: 16px; font-weight: bold;font-family: Candara;}
.product-feature p 									{ margin-top: 11px; font-size: 14px; font-family: Candara;}
.enquire 											{ float: right; margin-top: 9px;}
.link-pic 											{ width: 28px; float: right;}
.enquiry											{ font-size: 14px; color: #133c2c; font-family: Candara; float: right; margin_left: 5px; margin-top: 4px; text-align: center;}

.footer 											{ background-image: url("../images/footerbg.jpg"); background-repeat: repeat-x; border-top: 7px solid #024301; overflow: hidden; height: 60px;}
.footer-menu 										{ margin-top: 25px; overflow: hidden;}
.footer-menu ul 									{ list-style: none; float: left;}
.footer-menu ul li 									{ display: inline-block; border-right: 1px solid black; padding: 0 14px;}
.footer-menu ul li a 								{ font-size: 14px; font-family: Candara; text-decoration: none; color: #133c2c;}
.credits 											{ float: right; text-align: right; font-size: 14px; color: #133c2c; font-family: Candara; width: 400px;}

/* Hover Image Enlarge*/
tr.enlarge                                          { list-style-type:none; /*remove the bullet point*/margin-left:0;}
tr.enlarge td                                       {  /*places the images in a line*/position:relative;  /*resets the stack order of the list items - later we'll increase this*/margin:500px 40px 0 20px;}
tr.enlarge img                                      { background-color:#eae9d4;  -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75); -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75); box-shadow: 0 0 6px rgba(132, 132, 132, .75); -webkit-border-radius: 4px;  -moz-border-radius: 4px;  border-radius: 4px; }
tr.enlarge span                                     { position:absolute; left: -9999px; background-color:#eae9d4; padding: 1px; font-family: 'Droid Sans', sans-serif; font-size:.9em; text-align: center; color: #495a62;  -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75); -moz-box-shadow: 0 0 20px rgba(0,0,0, .75); box-shadow: 0 0 20px rgba(0,0,0, .75); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px;}
tr.enlarge img:hover                                { z-index: 50; cursor:pointer;}
tr.enlarge span img                                 { padding: 2px; background:#ccc;}
tr.enlarge td:hover span                            { position: absolute; z-index: 60; top: 0px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 0px; /*distance from the left of the thumbnail to the left of the popup image*/}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
tr.enlarge img, tr.enlarge span                     {behavior: url(pie/PIE.htc); }

/* Overrides -- If does not work.... Use inline*/
.ending 											{ margin-right: 0}
.ending-border 										{ border-right: 0;}
.starting 											{ padding-left: 0; margin-left: 0}