@charset "utf-8";



/* ----------------------------------------(=1)
    1. Module swapping for footer content and sub content
   ---------------------------------------- */
   
.module-panel {}
.module-col01 {
	float: left;
	width: 245px;
	min-height: 300px;
	margin: 0 20px 0 0;
	padding: 0 20px 0 0;
	background: url(../Images/icon-line-300.gif) right top no-repeat;
}
	.module-col01 p {
	font-size: 13px;
	}
.module-col02 {
	font-size: 13px;
	float: left;
	width: 345px;
	min-height: 300px;
	margin: 0 10px 0 0;
	padding: 0 20px 0 5px;
	background: url(../Images/icon-line-300.gif) right top no-repeat;
}
.module-col03 {
	float: right;
	width: 250px;
	min-height: 300px;
}
	.module-col03 p {
	font-size: 13px;
	}


/* ----- subscribe form ----- */
.module-form-subscribe #form-subscribe {}
.module-form-subscribe #form-subscribe dl dt {
	float: left;
	width: 70px;
	margin: 0 0 0 0;
	color: #404040;
	font-size:12px;
}
.module-form-subscribe #form-subscribe dl dd {
	float: left;
	margin: 0;
}
.module-form-subscribe #form-subscribe form input {
	width: 166px;
	height: 17px;
	margin: 0 0 5px;
	padding: 3px;
	border: none;
	background: url(../Images/r-white.gif) no-repeat;
	font-size: 11px;
	
}
.module-form-subscribe #form-subscribe p.btn-submit {
	margin: 0 0 15px 75px;
}

/* ----------------------------------------(=3)
    end of module
   ---------------------------------------- */



/* ----------------------------------------(=1)
    1. Main frame
   ---------------------------------------- */

/*  1-1. Container
   ------------------------------- */
#container11 {
	width: 966px;
	margin: 0 auto;
	padding: 0px 0 0;
	text-align: left;
}   
#container-outer {
	background:url(../Images/container-bg.gif) left top repeat-x;
}
#container {
	width: 966px;
	margin: 0 auto;
	padding: 25px 0 0;
	text-align: left;
}

#lead-title-outer {
	background: url(../Images/lead-bg.gif) left top repeat-x;
}
#lead-title {
	width: 966px;
	margin: 0 auto;
	height: 70px;
	line-height: 70px;
	text-align: left;
}
#container h1 span {
	font-size: 10px;
	font-weight: normal;
	color: #BBB;
	float: right;
	margin: -20px 10px -5px 0;
}




/*  1-4. Footer
   ------------------------------- */
#footer-outer {
	background: #f2f2f2 url(../Images/footer-bg.gif) left top repeat-x;
}
#footer {
	width: 966px;
	margin: 0 auto;
	padding: 12px 0 10px;
	text-align: left;
	color: #707070;
}
#copyright-outer {
	background: #414141 url(../Images/copy-bg.gif) left top repeat-x;
}
#copyright {
	width: 966px;
	margin: 0 auto;
	padding: 10px 20px 30px;
	color: #959595;
	font-size: 11px;
	text-align: left;
}







/* ----- intro each item ----- */
#featured-work{
	clear: both;
}
.intro-cat {
	position: relative;
	float: right;
	width: 945px;
	height: 150px;
	margin: 0 0 20px;
	padding: 5px 0 5px 21px;
	background: #ccc;
	overflow: hidden;
}
.intro-cat .intro-cat-item {
	position: relative; 
	float: left;
	width: 226px;
	height: 150px;
	margin: 0 5px 0 0;
	overflow: hidden;
}
.intro-cat .intro-cat-item img {
	position: absolute;
	top: 0; 
	left: 0;
}
.intro-cat .intro-cat-caption {
	position: absolute;
	top: 150px;
	left: 0;
	width: 220px;
	height: 40px;
	padding: 10px;
	background: #000;
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.intro-cat .intro-cat-caption p {
	line-height: 18px;
	margin: 0;
	color: #fff;
	font-size: 12px;
}
.intro-cat .intro-cat-caption h2 {
	line-height: 18px;
	margin: 0;
	padding: 0 0 5px;
	color: #fff;
	font-size: 12px;
}

/* ----- prev next ----- */
.intro-cat .intro-cat-nav a#prev {
	position: absolute;
	top: 5px;
	left: 7px;
}
.intro-cat .intro-cat-nav a#next {
	position: absolute;
	top: 5px;
	right: 7px;
}

/*  5-2. Lead title
   ------------------------------- */
   
#lead-title h1 {
	position: relative;
	top: 40px;
	line-height: 35px;
	margin: 0;
	padding: 0 0 0 5px;
	color: #fff;
	font-size: 36px;
}


/* ----------------------------------------(=6)
    6. Classes
   ---------------------------------------- */
   
/*  6-1. Hidden nav
   ------------------------------- */
.hidden-nav {
	position: absolute;
    left: -9999px;
    font-size: 1%;
}

/*  6-2. Others
   ------------------------------- */
   
/* ----- float ----- */
.float-left  { float: left; }
.float-right { float: right; }
.float-left-img  {
	float: left;
	margin: 0 10px 10px 0;
}
.float-right-img {
	float: right;
	margin: 0 0 10px 10px;
}

/* ----- float clear ----- */
.clear-left  { clear: left; }
.clear-right { clear: right; }
.clear-both  { clear: both; }

/* ----- blockquote ----- */
.blockquote {
	line-height: 33px;
	margin: 0;
	padding: 5px 0 0 35px;
	background: url(../Images/icon-open-quote.gif) left top no-repeat;
	color: #404040;
	font-family: "Myriad Pro", "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 28px;
	font-weight: bold;
}



/* ----------------------------------------(=3)
    end of base
   ---------------------------------------- */



/* ----------------------------------------(=1)
	1. Html, Body, Anchor
   ---------------------------------------- */

.body_welcome {
	line-height: 1.7em;
	margin: 0;
	padding: 0;	
	color: #404040;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	font-size: 0.85em;
}

/* Anchor */
a:link,
a:visited {
	color: #d9a901;
	text-decoration: none;
}

a:hover,
a:active { color: #959595; text-decoration: underline; }


/* ----------------------------------------(=2)
	2. Heading, Paragraph
   ---------------------------------------- */
h1, h2, h3, h4, h5, h6 {


	padding: 0;
	font-family: "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
}
h1 { font-size: 21px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 16px; line-height: 22px; margin: 0 0 4px; }
h5 { font-size: 15px; line-height: 22px; margin: 0 0 4px; }

p { margin: 0 0 0px; padding: 0; }


/* ----------------------------------------(=3)
	3. List
   ---------------------------------------- */
dl, ol, ul { margin: 0; padding: 0; }

ul, ol { list-style: none; }

li, dd { margin: 0 0 15px; }
	
dt { margin: 0 0 15px; }



/* ----------------------------------------(=1)
    1. Button
   ---------------------------------------- */
   
/* link btn */
a.button {
    float: left;
    height: 24px;
    padding-right: 10px;
	font-size: 12px;
	text-decoration: none;
	background: url(../Images/r-light-grey-r.gif) no-repeat top right;
}
a.button span {
    display: block;
	float: left;
    line-height: 24px;
    padding: 0 15px 0 10px;
	background: url(../Images/r-light-grey-l.gif) no-repeat;
	color: #404040;
}
a.button:hover span {
	color: #ffaa00;
}

/* form btn */
a.btn-grey {
    float: left;
    height: 23px;
    padding-right: 20px;
	font-size: 12px;
	text-decoration: none;
	background: url(../Images/r-grey-r.gif) no-repeat top right;
}
a.btn-grey span {
    display: block;
    line-height: 23px;
    padding: 0 0 0 11px;
	background: url(../Images/r-grey-l.gif) no-repeat;
	color: #fff;
}
a.btn-grey:hover span {
	color: #ffaa00;
}

/* contact btn */
a.btn-contact {
    float: left;
    height: 27px;
    padding-right: 24px;
	font-size: 13px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	background: url(../Images/r-contact-btn-r-2.gif) no-repeat top right;
	cursor: pointer;
}
a.btn-contact span {
    display: block;
	float: right;
	height: 27px;
    line-height: 23px;
    padding: 0 3px 0 15px;
	background: url(../Images/r-contact-btn-l-2.gif) no-repeat;
	color: #404040;
}
a.btn-contact:hover span {
	color: #ffaa00;
}

/* prev next btn */
span.next {
    float: left;
    height: 24px;
    padding-right: 10px;
	font-size: 12px;
	text-decoration: none;
	background: url(../Images/r-light-grey-r.gif) no-repeat top right;
}
span.next a {
    display: block;
	float: left;
    line-height: 24px;
    padding: 0 15px 0 10px;
	background: url(../Images/r-light-grey-l.gif) no-repeat;
	color: #404040;
}
span next a:hover{
	color: #ffaa00;
}
span.prev {
    float: left;
    height: 24px;
    padding-right: 10px;
	font-size: 12px;
	text-decoration: none;
	background: url(../Images/r-light-grey-prev-r.gif) no-repeat top right;
}
span.prev a {
    display: block;
	float: left;
    line-height: 24px;
    padding: 0 0 0 25px;
	background: url(../Images/r-light-grey-prev-l.gif) no-repeat;
	color: #404040;
}
span.prev a:hover{
	color: #ffaa00;
}


/* ----------------------------------------(=2)
    2. Title icons
   ---------------------------------------- */
.i-expertise {
	padding-left: 40px;
	background: url(../Images/icon-our-expertise.png) left top no-repeat;
	padding-top:0px;
	height:36px;
}

.i-welcome {
	padding-left: 40px;
	background: url(../Images/icon-home.png) left top no-repeat;
	height:33px;
	padding-top:0px;
}

.i-about-us {
	padding-left: 40px;
	background: url(../Images/icon-about.png) left top no-repeat;
	height:33px;
	padding-top:0px;
}
.i-subscribe-enews {
	padding-left: 40px;
	background: url(../Images/icon-email.png) left top no-repeat;
	height:33px;
	padding-top:0px;
}

/* ----- contact panel ----- */

.i-featured-work {
	padding-left: 45px;
	background: url(../Images/icon-featured-work.gif) left top no-repeat;
	height:33px;
	padding-top:0px;
	padding-bottom:5px;
}


/* ----------------------------------------(=1)
	1. ClearFix Hack
   ---------------------------------------- */
   
/* ----------------------------------------(=2)
    2. Feature listing
   ---------------------------------------- */
   
#feature-box {
	position: relative;
	height: 364px;
	overflow: hidden;
}
#feature-box p.more {
	float: right;
	margin: 0 20px 0 0;
}

/* ----- feature list navi ----- */
#feature-list {
	float: left;
	width: 276px;
	height: 364px;
	background: url(../Images/icon-line-364.gif) right top no-repeat;
}
#feature-list ul {
	margin: 0 0 15px;
}
#feature-list li {
	display: block;
	cursor: pointer;
	height: 30px;
	line-height: 20px;
	margin: 0;
	padding: 10px 0 0 15px;
	background: url(../Images/icon-arrow-orange.gif) 7px 17px no-repeat;
	color: #838383;
	font-size: 13px;
	font-weight: bold;
	
}
#feature-list li:hover,
#feature-list-main-navi li.active { /* you may want to setup some decorations to active the item */
	color: #d9a901;
	background: url(../Images/hover-grey-bg.gif) no-repeat;
	
}

/* ----- feature content area styles ----- */
#feature-main-vertical { /* main vertical scroll */
	position: relative;
	float: right;
	width: 356px;
	height: 364px;
	overflow: hidden;
	padding: 0px 30px 0 0;
	margin: 8px 0 0 0;
	background: url(../Images/icon-line-364.gif) right top no-repeat;
}
#feature-pages { /* root element for pages */
	position: absolute;
	height: 20000em;
}
.feature-page {/* single page */
	width: 356px;
	height: 364px;
	line-height: 22px;
	font-size: 13px;
}

.feature-content h2 {
	line-height: 20px;
	font-size: 16px;
	color: #ffaa00;
}
.feature-content p.more {
	margin: 0;
}



/*  1-1. For IE 5.5-7
   ------------------------------- */
#copyright,
.client-btn-prev,
.client-btn-next,
.client-box-list,
.client-box-list ul,
.paging-list ul,
#work-box ul,
.comment-box-content,
.prev-next-btn,
.blog-listing,
.blog-title-box,
#contact-info dl,
#contact-content,
.toggle-btns,
.btn-toggle,
.module-panel,
.module-form-subscribe #module-social,
.module-form-subscribe #form-subscribe p.btn-submit,
.module-form-subscribe #form-subscribe dl,
#uti-box,
#client-box ul,
#feature-box,
#gnavi,
#content-home,
#content,
#header {
	zoom: 1;
}

/*  1-2. For Modern browsers
   ------------------------------- */
#copyright:after,
.client-btn-prev:after,
.client-btn-next:after,
.client-box-list:after,
.client-box-list ul:after,
.paging-list ul:after,
#work-box ul:after,
.comment-box-content:after,
.prev-next-btn:after,
.blog-listing:after,
.blog-title-box:after,
#contact-info dl:after,
#contact-content:after,
.toggle-btns:after,
.btn-toggle:after,
.module-panel:after,
.module-form-subscribe #module-social:after,
.module-form-subscribe #form-subscribe p.btn-submit:after,
.module-form-subscribe #form-subscribe dl:after,
#uti-box:after,
#client-box ul:after,
#feature-box:after,
#gnavi:after,
#content-home:after,
#content:after,
#header:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
     
/*  1-3. ClearFix Hack 
   ------------------------------- */   
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




     /* ----------------------------------------(=3)
    end of adjust
   ---------------------------------------- */