/*Innitial*/
body {font-family:Arial, Helvetica, sans-serif;font-size:12px; background:#e1e1e1;}
img{border:none;}
a{color:#333; text-decoration:underline;}
a:hover{color:#990000; text-decoration:underline;}

/*Layout*/
.wrapper {width:980px; margin:0 auto;}
.wrapper2 {background:url(/images/bodybg4.png) no-repeat; height:299px; width:980px;}
.header {height:240px;}
.pgdataLft {float:left; width:310px;}
.pgdataRgt {float:right; width:640px;background:url(/images/pgdatargt_bg.jpg) repeat-y; margin-left:20px;}
/*Common*/
.padLft {padding-left:30px;}
.clear {clear:both;}
.bodytext {padding:0 10px 10px 10px; line-height:18px; width:600px;}
h1 {font-size:35px; color:#231F20; padding:20px 10px 10px 10px;}
h2 {font-size:24px; color:#466A97; padding:20px 10px 10px 10px;}
h4 {font-size:18px; color:#ff6600; padding:20px 0 10px 10px;}
h5 {font-size:18px; color:#ff6600; padding:10px 0;}
/*header*/
.logo { padding:88px 0 0 50px; width:266px; height:149px;}
.topbg {float:right; height:238px; width:656px;}
/*Navigation*/
h3{font-size:33px; color:#466A97; padding:0 3px; text-align:right; font-weight:normal;}
h3 a{color:#466A97;text-decoration:none;padding:0 3px;}
h3 a:hover {background-color:#466A97; color:#ffffff;text-decoration:none; padding:0 3px;}
h3.trigger {font-size:33px; color:#466A97; padding:0 3px; text-align:right; font-weight:normal;}
h3.trigger a {color:#466A97;text-decoration:none;padding:0 3px;}
h3.trigger a:hover {background-color:#466A97; color:#ffffff;text-decoration:none; padding:0 3px;}
h3.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {margin:0 0 5px;padding: 0;border-top: 1px solid #d6d6d6;overflow: hidden;font-size: 1.2em;width:250px;clear: both; float:right; text-align:right;}
.toggle_container_show {margin:0 0 5px;padding: 0;border-top: 1px solid #d6d6d6;font-size: 1.2em;width:250px;clear: both; float:right; text-align:right;}
.toggle_container .block {padding:0px;}
ol.bulletList {}
ol.bulletList li {padding:10px 0; border-bottom:1px dotted #ccc; display:block; color:#666; font-size:14px;}
ol.bulletList li a{color:#666; text-decoration:none;}
ol.bulletList li a:hover{color:#000; text-decoration:none;}

/*pgdatargt*/
.yellowstrip {background-color:#FFCC00; width:620px; height:10px; float:left; margin:0 0 0 3px;}
/*breadecrumb*/
.breadCrumb{height:20px; padding:0 0 10px 0; color:#333; font-size:14px; border-bottom:1px dotted #333; margin:0 10px; width:600px;}
.breadCrumb a{color:#333; font-weight:bold;}
.breadCrumb b{color:#999;}
ol.project{padding:0 10px;}
ol.project li {display:inline-block; width:270px;  margin:10px 5px; float:left; border:1px solid #ccc;}

ol.controls{padding:10px 60px 10px 10px; float:right; font-weight:bold;}
ol.controls li{display:inline-block; height:15px; width:12px; background:#fff; float:left; color:#333; margin:2px; padding:0 0 0 3px;}
ol.controls li a{color:#333; text-decoration:none;margin:2px; padding:0 0 0 3px;background:#eee;color:#333;height:15px; width:12px; float:left;}
ol.controls li a:hover { margin:2px; padding:0 0 0 3px;}
ol.controls li.current a {background:#FAC01F;color:#fff;height:15px; width:12px; float:left; margin:2px; padding:0 0 0 3px;}
.pgdataRgtBot {background-color:#BCBDC0; width:620px; height:10px; float:left; margin:0 0 0 3px;}

ol.bulletedList {padding:0;}
ol.bulletedList li{background:url(/images/plus.png) no-repeat 0px 9px; padding:5px 20px; margin-left:10px;border-bottom:1px dashed #ccc;}
.sidebyside li{width:240px; float:left; }
/*LightBox*/
#gallery {padding:10px;width:100%;}
#gallery ul {list-style: none; }
#gallery ul li {display:inline; float:left; margin:5px;}
/*#gallery ul li img{border:1px solid #ccc;}*/
#gallery ul img {border:1px solid #e1e1e1; padding:5px;}
#gallery ul a:hover img {border:1px solid #ccc; padding:5px;}
#gallery ul a:hover {color:#fff;}

/*websites*/
.webdesign img {margin:10px 15px 5px 15px; float:left;background:#fff;}
.webdesign p{padding:15px; color:#333; margin:0;}
.webdesign p a {text-decoration:none; color:#990000;}
.webdesign p a:hover{text-decoration:underline;}

/*Image-overlay*/
.image-overlay { list-style: none; text-align:left; }
.image-overlay li {display: inline;}
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none;}
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border:none;}
.image-overlay a{margin:10px 15px 5px 15px; float:left;background:#fff;overflow: hidden;position: relative;}
.image-overlay img{position: absolute;top: 0;left: 0;border: 0; border:1px solid #c4c4c4;}
.image-overlay .caption{float: left;position: absolute;background-color: #000;width: 100%;cursor: pointer;
	/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
		longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
		To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
	opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h3{margin:70px 90px 0 0px; font-size:20px;font-weight:bold;color:#999; height:180px;}
/*p{padding:0px;text-decoration:underline; color:#333; margin:0;}*/

/* Footer */
.footer{padding:10px 10px 10px 350px;}
.copy {font-size:11px; color:#231F20; float:left; padding-bottom:10px;}
.designby{font-size:11px; color:#231F20; float:right; padding-right:10px; padding-bottom:10px;}
/* ClearFix */
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}