@charset "utf-8";


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

Title   : module.css
For     : Style Module

Author  : Kooy Siew Na
Created : 2010-02-01
Modified: 2010-12-21

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

Content : 1. Module swapping for footer content and sub content
          2. Feature listing
		  3. Website Development Process

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

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


/* ----------------------------------------(=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 30px 0 0;
	background: url(../images/common/icon-line-300.gif) right top no-repeat;
}
	.module-col01 p {
	font-size: 13px;
	}
.module-col02 {
	font-size: 13px;
	float: left;
	width: 354px;
	min-height: 300px;
	margin: 0 10px 0 0;
	padding: 0 30px 0 5px;
	background: url(../images/common/icon-line-300.gif) right top no-repeat;
}
.module-col03 {
	float: right;
	width: 250px;
	min-height: 300px;
}
	.module-col03 p {
	font-size: 13px;
	}

/* ----- list style ----- */
.module-content ul.list-orange {
	line-height: 18px;
	margin: 0 0 15px;
	font-size: 13px;
}
.module-content ul.list-orange li a {
	display: block;
	padding: 4px 0 5px 18px;
	background: url(../images/common/icon-arrow-orange.gif) 6px 10px no-repeat;
	color: #404040;
}
.module-content ul.list-orange li {
	margin: 0;
	padding: 1px 0 0;
	background: url(../images/common/icon-grey-dash.gif) left top repeat-x;
}
.module-content ul.list-orange li a:hover {
	color: #ffaa00;
	background: #f1f1f1 url(../images/common/icon-arrow-orange.gif) 6px 10px no-repeat;
	text-decoration: none;
}

.module-col01 .module-content ul.list-orange li a:hover, .module-col02 .module-content ul.list-orange li a:hover {
	background: #fff url(../images/common/icon-arrow-orange.gif) 6px 10px no-repeat;
	text-decoration: none;
}

/* ----- 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/common/r-white.gif) no-repeat;
	font-size: 11px;
	
}
.module-form-subscribe #form-subscribe p.btn-submit {
	margin: 0 0 15px 75px;
}

/* ----- twitter and facebook ----- */
.module-form-subscribe #module-social {
	padding: 15px 0 0;
	background: url(../images/common/icon-grey-dash.gif) left top repeat-x;
}
.module-form-subscribe #module-social p#twitter a {
	padding: 0 0 10px 30px;
	background: url(../images/common/icon-twitter.png) left top no-repeat;
}
.module-form-subscribe #module-social p#facebook a {
	padding: 0 0 10px 30px;
	background: url(../images/common/icon-facebook.png) left top no-repeat;
}
.module-form-subscribe #module-social a {
	color: #404040;
}
.module-form-subscribe #module-social a:hover {
	color: #ffaa00;
	text-decoration: none;
}
.module-form-subscribe #module-social p {
	float: left;
	line-height: 16px;
	margin: 0 12px 0 0;
}
.module-form-subscribe #module-social p span {
	margin: 0 0 0 30px;
	color: #959595;
}


/* ----------------------------------------(=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/common/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/common/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: #ffaa00;
	background: url(../images/common/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/common/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;
}


/* ----------------------------------------(=3)
    3. Website Development Process
   ---------------------------------------- */
#website-development-process {
	width: 600px;
	height: 620px;
	background: url(../images/banner/web-development-progess.gif) no-repeat;
}
#website-development-process ul {
	position: relative;
}
#website-development-process ul li {
	position: absolute;
	width: 120px;
	height: 60px;
	margin: 0;
	padding: 0;
	background: none;
	text-indent: -9999px;
}
#website-development-process ul li a {
	display: block;
}
#website-development-process ul li.nth-child-1 { top: 30px; left: 30px; }
#website-development-process ul li.nth-child-2 { top: 30px; left: 240px; }
#website-development-process ul li.nth-child-3 { top: 30px; left: 460px; }
#website-development-process ul li.nth-child-4 { top: 190px; left: 446px; }
#website-development-process ul li.nth-child-5 { top: 190px; left: 230px; }
#website-development-process ul li.nth-child-6 { top: 190px; left: 30px; }
#website-development-process ul li.nth-child-7 { top: 310px; left: 30px; }
#website-development-process ul li.nth-child-8 { top: 310px; left: 240px; }
#website-development-process ul li.nth-child-9 { top: 310px; left: 460px; }
#website-development-process ul li.nth-child-10 { top: 480px; left: 450px; }
#website-development-process ul li.nth-child-11 { top: 480px; left: 240px; }
#website-development-process ul li.nth-child-12 { top: 480px; left: 30px; }
#website-development-process ul li.nth-child-13 { top: 596px; left: 360px; width: 230px; height: 25px; }