@charset "utf-8";


/*//////////////////////////////////////////////////

Title   : base.css
For     : Setting base styles

Author  : Kooy Siew Na
Created : 2010-02-01
Modified: yyyy-mm-dd

----------------------------------------

Content : 1. Main frame
               1. Container
               2. Header
               3. Content
               4. Footer

          2. Header
               1. Logo
               2. Language
			   3. Gnavi
			   4. Contact toggle

          3. Footer
               1. Copyright
			   
          4. Sub content
               1. Sub navi
			   
          5. Main content (Specific categories)
               1. Home
               2. Lead title
               3. Page (pages and blogs)
			   4. Work
			   5. Client
			   
          6. Classes
               1. Hidden nav
               2. Others
			   3. Media (Flash)

----------------------------------------

//////////////////////////////////////////////////*/


/* ----------------------------------------(=0)
    0. Body
   ---------------------------------------- */
body {
	min-width: 990px;
	text-align: center;
}


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

/*  1-1. Container
   ------------------------------- */
#container-outer {
	background: url(../images/common/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/common/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-2. Header
   ------------------------------- */
#header-contact-panel-outer {
	border-bottom: 2px solid #e8e8e8;
	background: #e8e8e8;
	/*background: #e8e8e8 url(../images/common/bg-contact.gif) left top repeat-x;*/
}
#header-contact-panel {
	width: 960px;
	margin: 0 auto;
	text-align: left;
}

#header-inner {
	background: #414141 url(../images/common/header-bg.gif) left top repeat-x;
}
#header {
	width: 960px;
	margin: 0 auto;
	padding: 0 3px 0;
	text-align: left;
}

/*  1-3. Content
   ------------------------------- */
#content {}

#content {
	padding: 20px 0 0;
}

/* ----- div#main ----- */
#main-home {
	float: left;
	width: 685px;
}
#main {
	float: right;
	width: 680px;
	padding: 0 0 20px;
}

/* ----- div#sub ----- */
#sub-home {
	float: right;
	width: 258px;
}
#sub {
	float: left;
	width: 255px;
	min-height: 690px;
	margin: 17px 0 0;
	padding: 6px 30px 20px 0;
	background: url(../images/common/icon-line-690.gif) right top no-repeat;
}

/*  1-4. Footer
   ------------------------------- */
#footer-outer {
	background: #f2f2f2 url(../images/common/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/common/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;
}


/* ----------------------------------------(=2)
    2. Header
   ---------------------------------------- */

/*  2-1. Logo
   ------------------------------- */
h1#logo {
	float: left;
	width: 190px;
	margin: 0;
}

/*  2-2. Language
   ------------------------------- */
ul#language-nav {
	margin: 0 0 25px 735px;
	padding: 5px 0 5px;
	font-size: 11px;
}
ul#language-nav li {
	display: inline;
	margin: 0 0 0 5px;
	padding: 0 0 0 5px;
	border-left: 1px solid #bfbfbf;
}
ul#language-nav li a {
	color: #bfbfbf;
}
ul#language-nav li a:hover {
	color: #ffaa00;
}
ul#language-nav li a.current {
	color: #fff;
}
ul#language-nav li.first-child {
	border: none;
}

/*  2-3. Gnavi
   ------------------------------- */
#gnavi {
	clear: right;
	font-family: Arial, Helvetica, sans-serif;
}
#gnavi ul {
	float: right;
}
#gnavi ul li {
	display: inline;
	margin: 0;
	font-size: 14px;
}
#gnavi ul li a {
	display: block;
	float: left;
	height: 38px;
	line-height: 38px;
	padding: 0 20px;
	color: #bfbfbf;
}
#gnavi ul li a:hover {
	color: #ffaa00;
	text-decoration: none;
}
#gnavi ul li a.current {
    padding-left: 0;
    padding-right: 20px;
    color: #ffaa00;
	background: url(../images/common/navi-bg-r.gif) no-repeat top right;
}
#gnavi ul li a.current span {
    display: block;
    line-height: 38px;
    padding-left: 20px;
	background: url(../images/common/navi-bg-l.gif) no-repeat;
}

/*  2-4. Contact toggle
   ------------------------------- */
#contact-box {
	position: relative;
	top: 1px;
	height: 0px;
	overflow: hidden;
}

#contact-content {
	padding: 10px 0 20px 0;
}
.btn-toggle .btn-contact {
	width: 90px;
	position: relative;
	top: 4px;
	float: right;
	margin-bottom: -25px;
}
.btn-toggle#hide-btn-toggle .btn-contact {
	width: 56px;
}
.btn-toggle#hide-btn-toggle {
	float: right;
	display: none;
	position: relative;
}

#contact-info {
	float: left;
	width: 286px;
	height: 285px;
	padding: 10px 30px 0 0;
	background: url(../images/common/icon-line-285.gif) right top no-repeat;
}
#contact-info p.i-contact-us {
	line-height: 33px;
	font-size: 21px;
	font-weight: bold;
}
#contact-info p {
	font-size: 13px;
	line-height: 18px;
}
#contact-info dl {
	clear: both;
	font-size: 12px;
}
#contact-info dl dt {
	float: left;
	width: 70px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0 0 2px;
	color: #8b8b8b;
	font-weight: bold;
}
#contact-info dl dd {
	float: right;
	width: 170px;
	margin: 0 0 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	line-height: 18px;

}
.gogole-map {
	padding-right: 12px;
	background: url(../images/common/icon-arrow-orange.gif) right 5px no-repeat;
}

#contact-form {
	float: right;
	width: 610px;
}
#contact-form p.i-contact-form {
	float: left;
	line-height: 33px;
	margin: 0 8px 15px 0;
	color: #404040;
	font-size: 16px;
	font-weight: bold;
}
#contact-form p.request {
	margin: 0;
	padding-top: 8px;
	color: #989898;
	font-size: 12px;
}
#contact-form em {
	float: left;
	margin: 0 0 0 10px;
	padding: 3px 0 0;
	color: #989898;
	font-size: 12px;
}


#contact-us-form {
	clear: both;
}
#contact-us-form table {
	border: none;
}
#contact-us-form table col.col03,
#contact-us-form table col.col01 {
	width: 101px;
}
#contact-us-form table col.col04
#contact-us-form table col.col02 {
	width: 214px;
}
#contact-us-form table td {
	padding: 0 0 5px 5px;
	border: none;
	font-size: 12px;
	text-align: right;
}
#contact-us-form table input {
	width: 194px;
	height: 17px;
	padding: 5px;
	background: url(../images/common/form-r-01.gif) no-repeat;
	border: none;
}
#contact-us-form table .textarea {
	width: 511px;
	height: 90px;
	padding: 3px;
	background-image: url(../images/common/form-r-02.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}
#contact-us-form table textarea {
	width: 506px;
	height: 85px;
	border: 0;
}
#contact-us-form table input#captcha {
	float: left;
	width: 87px;
	margin: 0 0 0 2px;
	padding: 5px;
	background: url(../images/common/form-r-03.gif) no-repeat;
}
#contact-us-form table #capcha {
	float: right;
	padding: 4px 0 0 0;
}
#contact-us-form table p.btn-submit {
	margin: 0 0 15px 75px;
}

   
/* ----------------------------------------(=3)
    3. Footer
   ---------------------------------------- */
   
#copyright p {
	clear: left;
	margin: 0;
}
#copyright p#copy {
	float: left;
	margin: 0 15px 0 0;
}
#copyright ul {
	float: left;
}
#copyright ul li {
	display: inline;
	margin: 0 10px 0 0;
	padding: 0 10px 0 0;
	border-right: 1px solid #959595;
}
#copyright ul li.last-child {
	border: none;
	margin: 0;
	padding: 0;
}
#copyright a {
	color: #b1b1b1;
}
#copyright a:hover {
	color: #ffaa00;
}


/* ----------------------------------------(=4)
    4. Sub content
   ---------------------------------------- */

/*  4-1. Sub navi
   ------------------------------- */
#sub ul {
	margin: 0;
}
#sub ul li {
	padding-top: 1px;
	margin: 0;
	background: url(../images/common/icon-grey-dash.gif) left top repeat-x;
	font-size: 13px;
}
#sub ul li ul li {
	background: url(../images/common/icon-grey-dash.gif) left top repeat-x;
}
#sub ul li ul li ul li {
	background: url(../images/common/icon-grey-dash.gif) left top repeat-x;
}

#sub ul li a {
	display: block;
	line-height: 20px;
	padding-top: 4px;
	padding-left: 15px;
	padding-bottom: 4px;
	background: url(../images/common/icon-arrow-orange.gif) 5px 11px no-repeat;
	color: #8a8a8a;
}
#sub ul li ul li a {
	background: url(../images/common/icon-arrow-orange.gif) 15px 11px no-repeat;
}
#sub ul li ul li ul li a {
	background: url(../images/common/icon-sub-arrow-orange.gif) 25px 11px no-repeat;
}

#sub ul ul a {
	padding-left: 25px;
}

#sub ul ul ul a {
	padding-left: 35px;
}

#sub ul li a.current, ul#sub-navi li.current_page_item a {
	color: #000;
	background-color: #f1f1f1;
}

#sub ul li.current_page_item ul li a{
	color: #8a8a8a;
}

#sub ul li a:hover.current {
	background-color: #f1f1f1;
	color: #000;
	text-decoration: none;
}

#sub ul li a:hover {
	background-color: #f1f1f1;
	color: #ffaa00;
	text-decoration: none;
}

#sub .promo {
	padding: 30px 0 0;
}



   
/* ----------------------------------------(=5)
    5. Main content (Specific categories)
   ---------------------------------------- */

/*  5-1. Home
   ------------------------------- */
#content-home h1 {
	margin: 0;
	padding: 12px 0 40px;
}

#content-home h1 span {
	color: #ffaa00;
}
.flash-box-home {
	padding: 0 0 28px 0;
	background: url(../images/common/hero-bg.gif) left bottom no-repeat;
}
.flash-box-home #flash-hero { vertical-align: bottom; }
.nivo-box {
	padding: 0 0 28px 0;
	background: url(../images/common/hero-bg.gif) left bottom no-repeat;
}

/* ----- client box ----- */
#client-box {
	clear: both;
}
#client-box-inner {
	height: 62px;
	line-height: 62px;
	margin: 0 0 30px;
	padding: 14px 20px;
	background: url(../images/common/client-bg.gif) no-repeat;
}
#client-box-inner img {
	margin: 0 30px 0 0;
}

/* ----- social box ----- */
#uti-box {}
dl#media-box dt {
	margin: 0;
	padding: 0 0 5px;
}
dl#media-box dd {
	margin: 0;
}
dl#media-box dd li {
	float: left;
	margin: 0 10px 0 0;
	padding: 0 0 15px;
}
#uti-box p#back-to-top {
	position: relative;
	bottom: -17px;
	float: right;
	margin: 0;
}

/* ----- 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=80)";
}
.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;
}

/*  5-3. Page (pages and blogs)
   ------------------------------- */

/* ----- page flash ----- */
#page-box .flash-box {
	position: relative;
	margin: -85px 0 15px;
	padding: 10px 4px 4px 13px;
	background: url(../images/common/sub-hero-bg.png) left top no-repeat;
}

/* ----- page common, frame ----- */
#page-box-content {
	padding: 0 0 0 15px;
}
#page-box-content h1 {
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 1px solid #d7d7d7;
	color: #ffaa00;
	font-size: 26px;
}
#page-box-content h1 ul li {
	margin: 0;
}

/* ----- page, blog styles ----- */
.template-box {
	/*padding: 10px 0 0 0;*/
}
.template-box h2 {
	border-bottom: 1px solid #d7d7d7;
	font-size: 22px;
}
.template-box h3 {
	color: #8a8a8a;
	border-bottom: 1px solid #d7d7d7;
	font-size: 20px;
}
.template-box a:link,
.template-box a:visited {
	color: #ffaa00;
}
.template-box a:hover,
.template-box a:active {
	color: #959595;
}
.template-box p {
	margin: 0 0 20px;
}
.template-box ul {
	margin: 0;
	padding: 0 0 25px;
}
.template-box ul li {
	margin: 0 0 5px 20px;
	padding: 0 0 0 15px;
	background: url(../images/common/icon-arrow-orange.gif) left 7px no-repeat;
}
.template-box ul li a:link,
.template-box ul li a:visited {
	color: #ffaa00;
}
.template-box ul li a:hover,
.template-box ul li a:active {
	color: #959595;
}
.template-box blockquote {
	line-height: 32px;
	margin: 30px 0 30px 20px;
	padding: 5px 0 0 35px;
	background: url(../images/common/icon-open-quote.gif) left top no-repeat;
	color: #404040;
	font-size: 24px;
	font-weight: bold;
}
.template-box table {
	margin: 0 0 25px;
}

/* ----- blog common, frame  ----- */
.blog-listing {
	margin: 0 0 15px;
	padding: 0 0 10px;
	background: url(../images/common/icon-h-line-660.gif) left bottom no-repeat;
}
.blog-listing a.more {
	padding: 0 10px 0 0;
	background: url(../images/common/icon-arrow-orange.gif) right center no-repeat;
}

/* ----- blog title, author, date ----- */
.blog-title-box {
	margin: 0 0 15px;
}
.blog-title {
	float: left;
	width: 590px;
}
.blog-title h2 {
	border-bottom: 0;
	font-size: 24px;
}
.blog-title h2 a:link,
.blog-title h2 a:visited {
	color: #404040;
}
.blog-title h2 a:hover,
.blog-title h2 a:active {
	color: #ffaa00;
}
.blog-date {
	float: left;
	width: 54px;
	height: 62px;
	margin: 0 15px 0 0;
	background: url(../images/common/icon-date-bg.gif) no-repeat;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}
.blog-date span {
	display: block;
	color: #ffaa00;
	font-size: 24px;
	font-weight: bold;
}
dl.blog-uti {
	line-height: 16px;
	font-size: 12px;
}
dl.blog-uti dt {
	float: left;
	margin: 0;
	padding-top: 2px;
	color: #a8a8a8;
}
dl.blog-uti dd {
	float: left;
	margin: 0 10px 0 5px;
	padding: 2px 10px 0 0;
	border-right: 1px solid #a8a8a8;
}
dl.blog-uti dd.last-child {
	border-right: 0;
}
dl.blog-uti dd.btn-facebook-like {
	padding-top: 0;
}
dl.blog-uti a:link,
dl.blog-uti a:visited {
	color: #404040;
}
dl.blog-uti a:hover,
dl.blog-uti a:active {
	color: #ffaa00;
}

/* ----- blog list paging ----- */
.blog-paging ul li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
	background: #d6d6d6;
	font-size: 14px;
}
.blog-paging ul li a {
	display: block;
	padding: 3px 7px;
}
.blog-paging ul li a:link,
.blog-paging ul li a:visited {
	color: #565656;
}
.blog-paging ul li a.current {
	background: #ffaa00;
	color: #fff;
}
.blog-paging ul li a:hover,
.blog-paging ul li a:active {
	background: #ffaa00;
	color: #fff;
	text-decoration: none;
}

/* ----- blog single prev next ----- */
.prev-next-btn {
	clear: both;
	margin: 0 0 40px;
}
.prev-next-btn p {
	margin: 0;
}
.prev-next-btn p.prev {
	float: left;
}
.prev-next-btn p.next {
	float: right;
}
.prev-next-btn p.prev a:hover,
.prev-next-btn p.next a:hover {
	color: #ffaa00;
}

/* ----- blog more post listing ----- */
dl.more-posts {
	margin: 0 0 40px;
}
dl.more-posts dt {
	color: #404040;
	font-size: 18px;
	font-weight: bold;
}
dl.more-posts dd ul li {
	margin: 0 0 5px;
	padding: 0 0 0 15px;
	background: url(../images/common/icon-arrow-orange.gif) left 7px no-repeat;
}
dl.more-posts dd ul li a:link,
dl.more-posts dd ul li a:visited {
	color: #404040;
	text-decoration: underline;
}
dl.more-posts dd ul li a:hover,
dl.more-posts dd ul li a:active {
	color: #ffaa00;
	text-decoration: none;
}
dl.more-posts dd ul li span {
	color: #8a8a8a;
	font-size: 13px;
}

/* ----- blog comment box ----- */
.comment-box {
	padding: 0 0 20px;
	font-size: 13px;
}
.comment-box h4 {
	margin: 0 0 25px;
	border-bottom: 1px solid #d7d7d7;
	font-size: 20px;
}
.comment-box .comment-box-content {
	margin: 0 0 15px;
}
.comment-box .comment-box-content .comment-author {
	float: left;
	width: 150px;
	text-align: right;
}
.comment-box .comment-box-content .comment-author span {
	display: block;
	font-size: 11px;
	color: #777;
}
.comment-box .comment-box-content .comment-desc-outer {
	float: right;
	width: 508px;
	padding: 15px 0 0;
	background: url(../images/common/comment-r-t.gif) left top no-repeat;
}
.comment-box .comment-box-content .comment-desc {
	padding: 0 15px 15px 35px;
	background: url(../images/common/comment-r-b.gif) left bottom no-repeat;
}
.comment-box .comment-box-content .comment-desc p {
	margin: 0;
}

/* ----- blog comment form ----- */
.comment-form h4 {
	margin: 0 0 25px;
	font-size: 20px;
}
.comment-form table {
	border: 0;
}
.comment-form table td {
	padding: 0 10px 10px 0;
	border: 0;
}
.comment-form table col.col01 {
	width: 164px;
}
.comment-form table col.col02 {
	width: 470px;
}
.comment-form table input {
	width: 282px;
	height: 17px;
	padding: 5px;
	background: url(../images/common/form-r-04.gif) no-repeat;
	border: none;
}
.comment-form table .textarea {
	width: 286px;
	height: 95px;
	padding: 3px;
	background-image: url(../images/common/form-r-05.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}
.comment-form table textarea {
	width: 280px;
	height: 85px;
	border: 0;
	background-color: #e8e8e8;
}
.comment-form table em {
	color: #a8a8a8;
	font-size: 11px;
}
.comment-form table span {
	float: right;
}

/*  5-4. Work
   ------------------------------- */

/* ----- work category ----- */
ul.work-cat {
	margin: 0 0 40px;
	padding: 0 0 10px;
	background: url(../images/common/icon-grey-dash.gif) left bottom repeat-x;
}
ul.work-cat li {
	display: inline;
	margin: 0 10px 0 0;
	padding: 0  10px 0 0;
	border-right: 1px solid #8a8a8a;
	font-family: "Myriad Pro", "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 14px;
}
ul.work-cat li a {
	color: #8a8a8a;
}
ul.work-cat li a.current,
ul.work-cat li a:hover {
	color: #000;
}
ul.work-cat li.last-child {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ----- work thumb ----- */
#work-box ul li {
	float: left;
	width: 228px;
	margin: 0 0 25px;
	padding: 0 16px 0 0;
}

#work-box ul li.nth-child-60,
#work-box ul li.nth-child-56,
#work-box ul li.nth-child-52,
#work-box ul li.nth-child-48,
#work-box ul li.nth-child-44,
#work-box ul li.nth-child-40,
#work-box ul li.nth-child-36,
#work-box ul li.nth-child-32,
#work-box ul li.nth-child-28,
#work-box ul li.nth-child-24,
#work-box ul li.nth-child-20,
#work-box ul li.nth-child-16,
#work-box ul li.nth-child-12,
#work-box ul li.nth-child-8,
#work-box ul li.nth-child-4 {
	padding: 0 0 0 0;
}
#work-box dl {
	height: 280px;
	margin: 0 0 20px;
}
#work-box dl dt {
	position: relative;
	margin: 0;
	padding: 0 0 20px;
	background: url(../images/common/work-thumb-bg.jpg) left bottom no-repeat;
}
#work-box dl dt img {
	border: 1px solid #e6e6e6;
}
#work-box dl dd {
	margin: 0 0 10px;
}
#work-box dl dd.title {
	line-height: 20px;
	font-size: 15px;
	font-weight: bold;
}
#work-box dl dd.desc {
	font-size: 12px;
	line-height: 16px;
	color: #858585;
}
#work-box dl dd.desc p {
	margin: 0 0 10px;
}

#work-box dl dd.title a {
	color: #404040;
}
#work-box dl dd.title a:hover {
	color: #959595;
}
#work-box dl dd.desc a {
	padding: 0 10px 0 0;
	background: url(../images/common/icon-arrow-orange.gif) right 5px no-repeat;
}

/* ----- work thumb hover ----- */
#work-box ul li dl dt a span {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 228px;
	height: 152px;
	background: url(../images/common/icon-zoom.png) no-repeat;
	cursor: pointer;
}

/* ----- work deltail ----- */
#work-detail-box .img-thumb {
	position: relative;
	float: left;
	width: 228px;
	margin: 0 35px 25px 0;
	padding: 8px 0 20px;
	background: url(../images/common/work-thumb-bg.gif) left bottom no-repeat;
}
#work-detail-box a span {
	display: none;
	position: absolute;
	left: 0;
	width: 228px;
	height: 152px;
	background: url(../images/common/icon-zoom.png) no-repeat;
	cursor: pointer;
}
#work-detail-box img {
	border: 1px solid #e6e6e6;
}

/*  5-5. Client
   ------------------------------- */
#client-box {
	padding: 20px 0 0;
}

/* ----- btn prev next ----- */
.client-btn-prev,
.client-btn-next {
	visibility: hidden;
	width: 23px;
	height: 23px;
	padding: 230px 0 0;
}
.client-btn-prev {
	float: left;
	margin: 0 12px 0 0;
}
.client-btn-next {
	float: right;
}

/* ----- client listing ----- */
.client-box-list {
	float: left;
	width: 966px;
}
.client-box-list ul li img {
	width: 178px;
	border: 1px solid #e6e6e6;
}
.client-box-list ul li {
	float: left;
	width: 180px;
	height: 180px;
	margin: 0 11px 30px 0;
	
}
.client-box-list ul li dl dt {
	margin: 0;
	padding: 0 0 12px;
	background: url(../images/common/client-thumb-shadow.gif) left bottom no-repeat;
}
.client-box-list ul li dl dd {
	line-height: 16px;
	margin: 0;
	text-align: center;
}
.client-box-list ul li.nth-child-30,
.client-box-list ul li.nth-child-25,
.client-box-list ul li.nth-child-20,
.client-box-list ul li.nth-child-15,
.client-box-list ul li.nth-child-10,
.client-box-list ul li.nth-child-5 {
	margin: 0 0 30px 0;
}

  
/* ----------------------------------------(=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/common/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;
}

/* ----- paging ----- */
.paging-list {
	position: relative;
	padding: 0 0 30px;
	width: 100%;
	text-align: center;
}
.paging-list ul {
	position: relative;
	left: 50%;
	clear: left;
	float: left;
   	text-align: center;
	margin: 0;
}
.paging-list ul li {
	float: left;
	position: relative;
   	right: 50%;
	margin: 0 5px 0 0;
	padding: 0;
	background: #d6d6d6;
	font-size: 14px;
}
.paging-list ul li a {
	display: block;
	padding: 3px 7px;
}
.paging-list ul li a:link,
.paging-list ul li a:visited {
	color: #565656;
}
.paging-list ul li a.current {
	background: #ffaa00;
	color: #fff;
}
.paging-list ul li a:hover,
.paging-list ul li a:active {
	background: #ffaa00;
	color: #fff;
}

/*  6-4. Media (Flash)
   ------------------------------- */
.flash-box #flash-hero { vertical-align: bottom; }

/* ----- Site Map ----- */

.ddsg-wrapper dl, ol, ul { margin: 0; padding: 0; }

.ddsg-wrapper ul, ol { list-style: none; }

.ddsg-wrapper li, dd { margin: 0 0 0 15px; }
	
.ddsg-wrapper dt { margin: 0 0 15px; }

.ddsg-wrapper ul li a {
	line-height: 20px;
	padding-top: 4px;
	padding-left: 15px;
	padding-bottom: 4px;
	background: url(../images/common/icon-arrow-orange.gif) 5px 11px no-repeat;
	color: #8a8a8a;
}
.ddsg-wrapper ul li a:hover {
	color: #ffaa00;
	text-decoration: underline; 
}