@charset "utf-8";
/* CSS Document */


body {
	font-family: Arial, Helvetica, sans-serif;
	color: #6f6f6f;
	margin: 0px;
	padding: 0px;
	background: url(../images/web/bg-main.gif) repeat-x scroll 0 0 #ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#wrapper {margin: 0 auto; width: 996px;}
#top {height: 80px;}
ul, li {list-style: none;}
p {line-height: 2em;}


#link {background:url(../images/web/icon_select.png) no-repeat scroll 0px transparent; width: 20px; height: 20px;}
em {padding: 0 20px; font-weight: bold;}
em a {text-decoration: none; color: #0092C8;}

/* --------- TOP NAVIGATION --------- */
#topnav {float: right; width: 390px; height: 50px; margin-top: 20px; margin-right: 20px;}
#topnav a {
	float: left;
	display: block;
	height: 50px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 0px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
	padding: 5px 0px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
ul#topnav li:hover {}
#topnav a:hover {background-position: left -58px;}
#topnav span {
	display:none;
}
ul#topnav li span {
	 z-index: 1;
	float: right;
	padding: 10px 0 10px 15px;
	position: absolute;
	right: 207px; top:60px;
	display: none; /*--Hide by default--*/
	width: 250px;
	background: #413f40;
	color: #fff;
	/*--top right rounded corner--*/
	-moz-border-radius-topright: 5px;
	-khtml-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	/*--top left rounded corner--*/
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}


/* --------- TOP MENU --------- */
.about a {background-image: url(../images/web/aboutmenu_hover.png); width: 96px; float: left; outline:0}
.portfolio a {background-image: url(../images/web/portfoliomenu_hover.png); width: 96px; height: 40px; float: left; outline:0}
.contact a {background-image: url(../images/web/contactmenu_hover.png); width: 96px; height: 40px; float: left; outline:0}
.login a {background-image: url(../images/web/loginmenu_hover.png); width: 96px; height: 40px; float: right; outline:0}


#top-line {background:url(../images/web/line-top.png) no-repeat; width: 998px; height: 24px; margin-top: 10px; }

#topmenu {
	width: 100%;
	padding-top: 0px;
}

#logo {background: url(../images/web/iwhite-logo.png) no-repeat; height:80px; width: 125px; float: left; margin-top: 10px; margin-left: 20px; }
#menu {background: url(../images/web/main-bg.png) no-repeat; height:46px; width: 954px; margin: 15px 0 0 20px; font-size: 10px; padding: 0;} 
#menu a {text-decoration: none; color: #0092c8;}
#menu ul {float: left; display: inline; position: relative; padding: 5px 0 0 22px; *padding: 15px 0 0 10px; *margin-left: 7px; width: 930px; height:5px;}
#menu ul li {float: left;} 


a {text-decoration: none; color: #0092c8;}


/* --------- MENU --------- */
.menu-branding {padding: 0 30px 0 0;}
.menu-webdesign {padding: 0 30px 0 10px;}
.menu-wda {padding: 0 20px 0 10px;}
.menu-portal {padding: 0 30px 0 5px;}
.menu-sms {padding: 0 28px 0 5px;}
.menu-Cms {padding: 0 33px 0 5px;}

html>/**/body .menu-webdesign {padding: 0 23px 0 5px;}
html>/**/body .menu-wda {padding: 0 23px 0 5px;}
html>/**/body .menu-portal {padding: 0 30px 0 0;}
html>/**/body .menu-sms {padding: 0 32px 0 0;}
html>/**/body .menu-Cms {padding: 0;}



#breadcrumb {float: left; height:20px; width: 954px; margin: 5px 0 0 40px; font-size: 10px; padding: 0;} 
#breadcrumb a {text-decoration: none; color: #0092c8;}

span.menu-branding {
	display: block;
	height:14px;
	position: absolute;
	width:59px;
	left: 131px;
	top: 144px;
}
span.menu-webdesign {display: block; height:18px; position: absolute; width:89px; left: 295px; top: 144px;}
span.menu-wda {display: block; height:18px; position: absolute; width:210px; left: 390px; top: 144px;}
span.menu-portal {display: block; height:18px; position: absolute; width:150px; left: 600px; top: 144px;}
span.menu-sms {display: block; height:18px;	position: absolute;	width:193px; left: 740px; top: 144px;}
span.menu-Cms {display: block; height:18px; position: absolute; width:193px; left: 945px; top: 144px;}

#people-area {margin-top: 10px; height: 290px; width: 980px; margin: 0 auto;}
.service-people {background:url(../images/web/man1.jpg) no-repeat; width: 281px; height: 283px; float: left; margin-left: 20px;  }
.product-people {background:url(../images/web/man2.jpg) no-repeat; width: 281px; height: 283px; float: left; margin-left: 60px; }
.sms-people {background:url(../images/web/girl.jpg) no-repeat; width: 281px; height: 283px; float: right;}

#midline {background: url(../images/web/midline.gif) repeat-x; height: 8px; width: 100%}
#content-box {background: #e5e5e5; width: 100%; margin: 0 auto; height: auto; overflow: hidden;}
#content-bottom {background: #e5e5e5; width: 970px; margin: 0 auto; height: auto; overflow: hidden;}
#content-bottom h4 {margin-bottom: 1px;}
#content-bottom h4 a {text-decoration: none; color: #0092c8;}


.services-box {background: #e5e5e5; width: 281px; height: 350px; float: left; padding: 10px 0 5px 10px; line-height: 1.5em; text-align:justify;}
.products-box {background: #e5e5e5; width: 281px; height: 283px; float: left; padding: 10px 0 5px 10px; line-height: 1.5em; margin-left: 50px;  text-align:justify; }
.blog-box {background: #e5e5e5; width: 281px; height: auto; float: right; padding: 10px 0 5px 10px; line-height: 1.5em; text-align:justify; }


/* --------- FORM --------- */
label {
display:inline;
float:left;
margin-right:10px;
width:80px;
}

input {
display:block;
float:left;
font-size: 10px;
padding-bottom:2px;
margin-bottom: 5px;
width:50%;
}

.button {
clear:both;
float:right;
margin-right: 80px;
width: 80px;
}

form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}
#contact-form .input li {
display:block;
float:left;
padding-bottom:15px;
width:472px;
}

#contact-form .input li label {
display:inline;
float:left;
margin-right:10px;
width:150px;
}

abbr, span.abbr {
color:red;
margin-left:5px;

}

#contact-form .input li.string input, .contact-form .input li.password input {
float:left;
width:200px;
}

#contact-form .buttons {
clear:both;
float:none;
padding:10px 0 0 160px;
}

span.create-account {
	background:url(../images/web/btn-create-account.gif) no-repeat;
	display: block;
	height:28px;
	position: absolute;
	width:149px;
	left: 820px;
	top: 570px;
}


/* --------- BRANDING --------- */
#branding-area {float: left; width: 950px; height: 560px; margin-left: 35px;}
#branding-left {float: left; width: 430px; height: 560px;}
#branding-left p {line-height: 2em; text-align: justify;}
#branding-left ul li {
	list-style: square;
	margin-bottom: 2px;
	text-align: left;
}
#branding-right {float: right; width: 472px; height: 350px; margin-top: 50px; margin-right: 10px;}

.branding-point-right {float: right; width: 180px; height: 160px; margin-top: -10px;}
.branding-point-left {float: left; width: 280px; height: 160px; text-align:justify; margin-top: -10px; margin-left: -30px;}
.branding-point-left li {list-style: disc; line-height: 1.5em;}
.branding-point-right li {list-style: disc; line-height: 1.5em;}

#branding-strategy-desc {
	float: left;
	width: 900px;
	height: 35px;
	text-align:justify;
	margin-top: 10px;
}
#branding-strategy-area {float: left; width: 950px; height: 310px; margin-left: 35px; margin-top: 10px; text-align: justify;}


/* --------- webdesign --------- */
#webdesign-area {float: left; width: 950px; height: 430px; margin-left: 35px;}
#webdesign-left {float: left; width: 400px; height: 400px;}
#webdesign-left p {line-height: 2em;}
#webdesign-left ul li {list-style: square; margin-bottom: 2px;}
#webdesign-right {float: right; width: 472px; height: 400px; margin-top: 0px; margin-right: 30px;}


/* --------- contact --------- */
#contact-area {float: left; width: 950px; height: 420px; margin-left: 35px;}
#contact-thanks-area {float: left; width: 950px; height: 200px; margin-left: 35px;}
#contact-address {margin: 60px 0 0 60px;}
#contact-address img {border: none;}
#contact-address p {line-height: 0.8em}
#contact-form {
	float: left;
	width: 472px;
	height: 350px;
	margin-top: 40px;
	text-align: center;
}
#contact-left {float: left; width: 400px; height: 350px;}

/* --------- About us --------- */
#about-area {float: left; width: 950px; height: 550px; margin-left: 35px;}
#about-right {float: right; width: 430px; height: 350px; margin-top: 40px; margin-right: 20px; text-align: justify;}
#about-left {float: left; width: 430px; height: 400px; text-align:justify;}
#about-methodology {
	float: left;
	width: 900px;
	height: 400px;
	text-align:justify;
}

/* --------- PORTAL --------- */
#portal-area {float: left; width: 950px; height: 650px; margin-left: 35px;}
#portal-point-right {float: right; width: 430px; height: 110px; margin-top: -10px;}
#portal-point-left {float: left; width: 430px; height: 110px; text-align:justify; margin-top: -10px;}
#portal-point-left li {list-style: disc; line-height: 1.5em;}
#portal-point-right li {list-style: disc; line-height: 1.5em;}
#portal-summary {
	float: left;
	width: 900px;
	height: 650px;
	text-align:justify;
}

#portal-function-desc {
	float: left;
	width: 900px;
	height: 420px;
	text-align:justify;
	margin-top: 10px;
}
#portal-function-area {float: left; width: 950px; height: 580px; margin-left: 35px; margin-top: 10px;}
#portal-custom-desc {
	float: left;
	width: 900px;
	height: 450px;
	text-align:justify;
	margin-top: 10px;
}
#portal-custom-area {float: left; width: 950px; height: 450px; margin-left: 35px; margin-top: 10px;}


/* --------- WEB DEVELOPMENT --------- */
#web-dev-app {
	float: left;
	width: 900px;
	height: 460px;
	text-align:justify;
	margin-top: 10px;
}
#webdev-area {float: left; width: 950px; height: 380px; margin-left: 35px; margin-top: 10px;}

#webdev-left {float: left; width: 430px; height: 380px; text-align: justify;}
#webdev-right {float: right; width: 472px; height: 350px; margin-top: 10px; margin-right: 35px; text-align:right;}
#webdev-process-area {float: left; width: 930px; height: 640px; margin-left: 35px; margin-top: 10px;}
#webdev-process-app {height: 680px; text-align: justify;}


/* --------- PORTFOLIO --------- */
#portfolio-area {float: left; width: 100%; height: 250px; text-align: center; margin-top: 10px;}
#portfolio-list-area {float: left; width: 100%; margin-bottom: 30px; text-align: center;}
.portfolio-page {text-align: center; text-decoration: none; margin-bottom: 20px;}
.portfolio-prev-page {float: left; text-decoration: none; margin: 20px 0 10px 40px;}
.portfolio-next-page {float: right; text-decoration: none; margin: 20px 90px 10px 0;}
.portfolio-image-cat {width: 700px; width: 100%; float: left;}
.portfolio-image-cat ul {list-style: none; text-align: center; }
.portfolio-image-cat li {float: left; margin-right: 35px; margin-left: 30px;}
.portfolio-image-cat li a img {border: none;}
.portfolio-desc {height: 250px; margin-bottom: -40px;}
.portfolio-desc ul {list-style: none; text-align: center; margin-bottom: 50px;}
.portfolio-desc li {float: left; margin-right: 10px;}

.webdesign_pic a {border: none; color: #fff;}
.webdesign-desc {    
	background-color: #CCCCCC;
    display: table-cell;
    font-size: 10px;
    height: 70px;
    padding: 10px;
    vertical-align: middle;
    width: 145px;
	text-align: center;}

#client-detail-area {float: left; width: 100%; height: 650px; margin-top: 10px;}
.client-ss {width : 500px; float: left; margin-left: 30px; margin-top: 20px;}
.client-ss img {border: solid 1px #CCC; padding: 5px;}
.client-desc {width: 420px; float: right; margin-right: 20px; text-align: justify;}

/* ---------  CMS  --------- */
#cms-area {float: left; width: 950px; height: 530px; margin-left: 35px;}
#cms-point-right {float: right; width: 430px; height: 110px; margin-top: -10px;}
#cms-point-left {float: left; width: 430px; height: 110px; text-align:justify; margin-top: -10px;}
#cms-point-left li {list-style: disc; line-height: 1.5em;}
#cms-point-right li {list-style: disc; line-height: 1.5em;}
#cms-summary {float: left; width: 900px; height: 550px; text-align:justify;}

.footer {background-color: #413f40; width: 100%; height: 20px; color: #FFF; font-size: 10px; padding-top: 3px; text-align: center;}
.footer a {color: #0092C8; text-decoration: none; font-size: 10px;}
.footer-link {vertical-align: top;}
.social-net {display: inline; padding-left: 200px; }
.footer img {width: 16px; height: 16px; border: none; text-align: right;}