@charset "utf-8";
/* CSS Document */
/* 
Client: Peninlog
Domain Name: http://www.peninlog.com
Designer: Rambal
Design Firm: Rillusion Design Studio
URL: http://wwww.rillusion.com
Version: 1.0
Date: 15 Jul 2009
*/
*, body, p, ul, li, h1, 
h2, h3, h4, h5, h6							{ padding:0; margin:0;}

body										{ font-family: Arial, Helvetica, sans-serif;  }
.clr										{ margin:0; padding:0; clear:both;}
li											{ list-style-type:none;}
a:link, a:visited							{color:#27537a; text-decoration:none;}
a:hover, a:active							{ color:#27537a}
/*header*/
#headwrapper								{ padding:0; margin:0; background:#a0b5c7 url(../images/headbg.gif) repeat-x left top; height:151px;}
#header										{ width: 960px; margin: 0 auto;}
.logo										{ padding:18px 0 0 0; float:left; width:250px;}
/*menu*/
.menu										{ float:right; width:400px; margin:65px 0 0 0;}
.menu ul									{ list-style-type:none;}
.menu ul li									{ float:left; text-transform:uppercase; font-size: 12px; font-style: normal;
								 			  font-weight: normal; color:#fff; font-weight:bold;
											}
.menu ul li a:link,
.menu ul li a:visited						{ color:#fff; text-decoration:none; height:22px; width:128px; padding:7px 0 0 0; margin:0 5px 0 0; 
											  display:block; text-align:center;
											}
.menu ul li a:hover							{ background: url(../images/menubg.png) no-repeat left top; }
.menu .current								{ background: url(../images/menubg.png) no-repeat left top; }

/*home page promo wrapper*/
#promowrapper								{ padding:0; margin:0; background:#5d7992 url(../images/promobg.gif) repeat-x left top; height:210px;}


/*home page content wrapper*/
#contentwrapper								{ padding:0; margin:0; background:#dde5ec url(../images/home_content_bg.gif) repeat-x left bottom; 
								 			  height:auto }
#content									{ padding:0; margin: 0 auto; width:960px; }	
#content h3									{ font-size: 24px; font-style: normal; font-weight: normal; letter-spacing: normal;
								 			 line-height: 1.2em; color:#384f64;}
#content p									{ font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal;
								 			 line-height: 1.5em; padding: 15px 0 0 0; margin:0;}
#content img 								{ margin: 0px; padding: 20px 0; }								  
#left										{ float:left; margin: 25px 10px 0 0; width:30%;}
#middle										{ float:left; margin: 25px 5px 0 25px; width:30%;}
#right										{ float:right; margin: 25px 0 0 5px; width:30%;}

/* content */
#contentwrapper1							{ padding:0 0 30px 0; margin:0; background:#cfdae4 url(../images/contentbg.gif) repeat-x left top; 
								 			  height: auto;}
#content1									{ padding:0; margin: 0 auto; width:960px; padding:20px 0 0 0; }									  
#maincontent								{ width:740px; float:left; margin:20px 0 0 0; 
											  background: #fff url(../images/textareabg.gif) repeat-x left 37px; 
											}

#topmenu									{ background:url(../images/menutopbg.gif) repeat-x top left; height:37px;}
#topmenu ul									{ width:650px; list-style-type:none; float:left;}
#topmenu ul li								{ float: left;}
#topmenu ul li a:link,
#topmenu ul li a:visited					{ color:#000; text-decoration:none; font-size:12px; font-weight: normal;
											  margin: 0 1px; padding:10px 10px 0 10px; height:27px; display:block; float:left; }
#topmenu ul li a:hover						{ text-decoration:none; background:url(../images/topmenubg.gif) repeat-x left top;}
#topmenu .current							{ text-decoration:none; background:url(../images/topmenubg.gif) repeat-x left top;}
.textarea									{}
.textarea h3								{ font-size:24px; font-weight:normal; padding:0; margin: 30px 0px 20px 40px; color:#384f64;}
.textarea h4								{ font-size:20px; font-weight:normal; padding:0; margin: 10px 0px 10px 40px; color:#64809a;}
.textarea p									{ margin: 0; font-size:12px; line-height:1.5em; color:#333;}
/*  Product Area */
.overview_img								{margin:0; padding:40px 40px 0px 40px; }
.con_left									{margin:0; padding: 0px 0px 40px 40px; float:left; width:650px;}
.con_left h4								{ font-size:20px; font-weight:normal; padding:0; margin: 10px 0px 10px 0px; color:#64809a;}
.con_left p									{margin:0px; padding:10px 0px 0px 0px;}
.con_right									{margin:0 0 0 20px; padding: 0; float:left; width:250px;}
.feature_list								{margin: 0; padding:0; font-size:12px; font-weight:normal;}
.feature_list ul							{margin: 0; padding:0 0 0 20px; }
.feature_list ul li							{ width:550px; margin: 0 0 0 40px; padding:5px 0 5px 5px; list-style-image:url(../images/bullet.gif); }
/*  Why Peninlog */
.textarea1									{}
.textarea1 h3								{ font-size:24px; font-weight:normal; padding:0; margin: 30px 0px 20px 40px; color:#384f64;}
.reason										{ margin:0; padding:0; }
.reason p									{ width:680px; height:29px; margin:0 30px; padding:10px 0; 
											  background:url(../images/5reasons_bg.jpg) repeat-x;}
.img										{float: left; margin:0 20px 0 30px; padding:0; }
.img1										{float: right; margin:0 40px 0 0; padding:0;}

/* Company */
.contentwrapper1							{ padding:0 0 30px 0; margin:0; background:#cfdae4 url(../images/contentbg.gif) repeat-x left top; 
								 			  height: auto;}
.content1									{ padding:0; margin: 0 auto; width:960px; padding:20px 0 0 0; }									  
.maincontent								{ width:740px; float:left; margin:20px 0 0 0; background:#fff;}

.topmenu									{ background:url(../images/menutopbg.gif) repeat-x top left; height:37px;}
.topmenu ul									{ width:650px; list-style-type:none; float:left;}
.topmenu ul li								{ float: left;}
.topmenu ul li a:link,
.topmenu ul li a:visited					{ color:#000; text-decoration:none; font-size:12px; font-weight: normal;
											  margin: 0 1px; padding:10px 10px 0 10px; height:27px; display:block; float:left; }
.topmenu ul li a:hover						{ text-decoration:none; background:url(../images/topmenubg.gif) repeat-x left top;}
.topmenu .current							{ text-decoration:none; background:url(../images/topmenubg.gif) repeat-x left top;}
.company									{ background-color:#fff; margin: 0; padding:0; font-size:12px; font-weight:normal; float:left; width:500px;}
.company p									{margin: 7px 0px 7px 40px; padding:0; width:450px; }
.company_img								{margin:0; padding:50px 0px 50px 40px; width:200px; float:left;}
.company a 									{color: #4D7A94; text-decoration: none; }
.company a:hover 							{ color:#27526E }
.bigfont									{ color:#cfdae4; font-size:24px; font-weight:normal; margin:0px 20px 0px 10px; padding: 2px 7px; border:solid 1px #CCE3EC}
.mediumfont									{ color:#666; font-size:14px; font-weight:normal; margin:0px; padding:0px; width:400px;}
/*#topmenu ul li a:link,
#topmenu ul li a:visited					{ color:#fff; text-decoration:none; font-size: 12px; font-weight:bold;
								 			 height:27px; padding: 10px 8px 0 8px; margin:0;}
#topmenu ul li a:hover						{ color:#000; text-decoration:none; background:url(images/topmenubg.gif) repeat-x left top;}*/
.tleft										{ background:url(../images/menutop_left.gif) no-repeat top left; width:16px; height:37px; float:left;}
.tright										{ background:url(../images/menutop_right.gif) no-repeat top right; width:16px; height:37px; float:right;}
.bottom										{ background:#fff; height:37px;}
.bleft										{ background:url(../images/menubottom_left.gif) no-repeat bottom left; width:16px; height:37px; float:left;}
.bright										{ background:url(../images/menubottom_right.gif) no-repeat bottom right; width:16px; height:37px; float:right;}
.sidebar									{ width:220px; float:left; margin:20px 0 0 0; }
#sidebar									{ width:184px; float:left; margin:20px 36px 0 0; }
#sidebar h6									{ width:184px; height:27px; margin:0px; padding:10px 0px 0px 0px; text-align:center; 
											  color:#FFFFFF; background:url(../images/product_h3_bg.gif) no-repeat; font-size:14px; font-weight:bold;}
#sidebar ul									{ margin:0px; padding:0px; list-style-type:none; background: url(../images/product_menu_bg.gif) repeat left top;}
#sidebar ul li								{ font-size:12px; font-weight:bold; text-indent:20px; width:184px; margin:0px; padding:0px; }
#sidebar ul li a							{ color:#8ba3b9; text-decoration:none; width:174px; height:23px; margin:0px; padding:7px 0px 0px 10px; display:block;}
#sidebar ul li a:hover						{ background: url(../images/product_menu_bg_over.gif) no-repeat left top; color:#FFFFFF; }
#sidebar .current					    	{ background: url(../images/product_menu_bg_over.gif) no-repeat left top; }
#sidebar .current a							{ color:#FFFFFF;}
#bottom_menu								{ margin:0px; padding:0px; background: url(../images/bottom_menu_bg.gif) no-repeat left top; width:184px; height:19px;}

/*footer*/
#footwrapper								{ padding:0; margin:0; background:#bbcbd8; height:200px;}
#footer										{ padding:30px 0 0 0; margin:0 auto; width:960px;}
#footer a:link,
#footer a:visited							{ color:#5d7992; text-decoration:none; }
#footer a:hover								{ color:#fff; text-decoration:underline; }
#footer h5									{ padding:0 0 10px 0; color:#fff; font-size:12px; font-weight:bold;}
#footer h5 a:link,
#footer h5 a:visited						{ color:#fff; text-decoration:none;}
#footer h5 a:hover							{ color:#fff; text-decoration:underline;}
#footer ul									{ list-style-type:none; padding:0; margin:0;}
#footer ul li								{ margin: 3px 0; padding:0; display:block; font-size: 12px;}
#footer ul li a:link,
#footer ul li a:visited						{ color:#5d7992; text-decoration:none;}
#footer ul li a:hover						{ color:#fff; text-decoration:underline;}
#footer p									{ font-size: 12px; font-style: normal; font-weight: normal; letter-spacing: normal;
											  line-height: 1.85em; padding:0; margin:0; color:#5d7992;}
.f1											{ float:left; width:15%;}
.f2											{ float:left; width:20%;}
.f3											{ float:left; width:15%;}
.f4											{ float:left; width:25%;}
.f5											{ float:left; width:25%;}

/* homepage slider */
/* Easy Slider */
#slidercontainer							{ width:900px; margin: 0 auto; padding: 0 0 0 50px;}
#slider										{}	
#slider ul, #slider li, 
#slider2 ul, #slider2 li					{ margin:0;	padding:0;	list-style:none;}
#slider li, #slider2 li						{ width:850px; height:200px;
	/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
											  overflow:hidden; margin: 0px; padding: 0px;
											}	

#slider li									{}		
#slider li h2								{ margin:0 20px; padding-top:20px; }	
#slider li p								{ width:350px; float:left; display:inline; color:#fff; margin: 10px 10px 10px 0; font-size:13px; 																		
											  font-weight:normal; line-height:185%; }						
#slider li h3 								{ margin: 50px 0 0 25px; color:#cfdae4; }
#slider .readmore 							{ margin: 0; padding: 15px 0 0 0; float:right; }
p#controls, p#controls2						{ margin:0; position:relative;} 
#prevBtn, #nextBtn, #prevBtn2, 
#nextBtn2									{ display:block; margin:0; overflow:hidden; text-indent:-8000px; width:29px; height:29px;
											  position:absolute; left:-50px; top:-110px;
											}	
#nextBtn, #nextBtn2							{ left:880px;}														
#prevBtn a, #nextBtn a, #prevBtn2 a, 
#nextBtn2 a									{ display:block; width:27px; height:30px; background:url(../images/btn_prev.gif) no-repeat 0 0; }	
#nextBtn a, #nextBtn2 a						{ display:block; width:27px; height:30px; background:url(../images/btn_next.gif) no-repeat 0 0; }												
.himage										{ float:left; padding: 30px 50px 0 30px; margin: 0; }

/* // Easy Slider */

/*product page content wrapper*/

#promowrapper 								{ margin: 0px; padding: 0px; }
#promo 										{ margin: 0px auto; padding: 0px; width: 960px; }




/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */

.tabs-hide 									{ display: none; }
}
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.tabs-hide 									{ display: none; }
}

/* Hide useless elements in print layouts... */
@media print {
.tabs-nav 									{ display: none; }
}

/* Skin */
.tabs-nav 									{ list-style: none; margin: 0; padding: 0 0 0 40px; }
.tabs-nav:after 							{ /* clearing without presentational markup, IE gets extra treatment */
   										 	 display: block; clear: both; content: " ";
											}
.tabs-nav li 								{ float: left; margin: 0 0 0 2px; min-width: 110px; /* be nice to Opera */ }
.tabs-nav a, .tabs-nav a span 				{ display: block; padding: 0 10px; background: url(../images/tab_bg.gif) no-repeat; }
.tabs-nav a 								{ position: relative; top: 1px; z-index: 2; padding-left: 0; color: #27537a; font-size: 12px;
											  font-weight: normal; line-height: 1.2; text-align: center; text-decoration: none; 
											  white-space: nowrap; /* required in IE 6 */ 
											}
.tabs-nav .tabs-selected a 					{ color: #ff6600; }
.tabs-nav .tabs-selected a, 
.tabs-nav a:hover, .tabs-nav a:focus, 
.tabs-nav a:active 							{ background-position: 100% -150px; outline: 0; /* prevent dotted border in Firefox */ }
.tabs-nav a, .tabs-nav 
.tabs-disabled a:hover, 
.tabs-nav .tabs-disabled a:focus, 
.tabs-nav .tabs-disabled a:active 			{ background-position: 100% -100px; }
.tabs-nav a span 							{ width: 110px; /* IE 6 treats width as min-width */ min-width: 110px; height: 25px; /* IE 6 treats height as min-height */
											  min-height: 25px; padding-top: 8px; padding-right: 0; }
*>.tabs-nav a span 							{ /* hide from IE 6 */ width: auto; height: auto; }
.tabs-nav .tabs-selected a span 			{ padding-top: 9px; }
.tabs-nav .tabs-selected a span, 
.tabs-nav a:hover span, 
.tabs-nav a:focus span, 
.tabs-nav a:active span 					{ background-position: 0 -50px; }
.tabs-nav a span, 
.tabs-nav .tabs-disabled a:hover span, 
.tabs-nav .tabs-disabled a:focus span, 
.tabs-nav .tabs-disabled a:active span 		{ background-position: 0 0; }
.tabs-nav .tabs-selected a:link, 
.tabs-nav .tabs-selected a:visited, 
.tabs-nav .tabs-disabled a:link, 
.tabs-nav .tabs-disabled a:visited 			{ /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; }
.tabs-nav a:hover, .tabs-nav a:focus, 
.tabs-nav a:active 							{ /* @ Opera, we need to be explicit again here now... */ cursor: pointer; }
.tabs-nav .tabs-disabled 					{ opacity: .4; }
.tabs-container 							{ border: 1px solid #b9c3ca; padding: 12px 8px 12px 0px; background-color:#FFF; margin:0px 0px 0px 42px; width:650px;
											/* declare background color for container to avoid distorted fonts in IE while fading */
											}
.featuredlist								{}
.tabs-loading em 							{ padding: 0 0 0 20px; background: url(loading.gif) no-repeat 0 50%; }