@import url("../webfonts/PTSansItalic/stylesheet.css");
@import url("../webfonts/PTSansBold/stylesheet.css");

/* Website template by freewebsitetemplates.com */
html {
	font-family: Arial, Helvetica, sans-serif;
}
body {
	background-color: #0c2635; 
	margin: 0;
}
img {
	border: 0;
}

/*------------------------------ HEADER ------------------------------*/
#header {
	width: 960px;
	position: relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 40px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 100px;
}
.emerging {
	font-family: "Times New Roman", Times, serif;
	font-size: 80px;
	color: rgba(153,153,153,1);
}
.emergingsolutions {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 35px;
	padding-left: 20px;
	position: absolute;
	top: 0px;
	width: 956px;

}

.solutions {
	font-family: "Times New Roman", Times, serif;
	font-size: 80px;
	color: rgba(255,255,255,1);
}



/** Logo **/
#logo {
	padding: 0 0 35px 20px;
	display: block;
}

/** Navigation **/
#navigation {
	background: url(../images/bg-menu-left-curve.gif) no-repeat left bottom;
	height: 47px;
	padding: 13px 0 0 4px;
	position: absolute;
	bottom: -20px;
	left: 0;
}
#navigation ul {
	background: url(../images/bg-menu.gif) repeat-x;
	display: inline-block;
	height: 40px;
	width: 688px;
	list-style: none;
	margin: 0;
	padding: 4px 0 3px;
}
#navigation li {
	float: left;
	font-size: 16px;
	line-height: 40px;
	margin: 0 5px;
	text-align: center;
}
#navigation li.first {

	
}
#navigation li.selected {
	background-color: #b7c2c8;
}
#navigation a {
	color: #092f44;
	font-weight: bold;
	padding: 0 10px;
	text-decoration: none;
	text-shadow: 1px 1px 0 #eaeaea;
}
#navigation a:hover {
	color: #0a2d43;
}

/** Searchbar **/
#search {
	background: url(../images/bg-search.gif) no-repeat right bottom;
	height: 47px;
	width: 268px;
	padding: 13px 0 0;
	position: absolute;
	bottom: -20px;
	right: 0;
}
#search form {
	display: inline-block;
	margin: 0;
	padding: 5px 4px 4px;
}
#search input {
	float: left;
	line-height: 38px;
}
#search .txtfield {
	color: #6e6e6e;
	font-size: 15px;
	font-style: italic;
	height: 38px;
	width: 234px;
	border: 0;
	margin: 0;
	padding: 0;
}
#search .button {
	background: url(../images/spotlight.gif) no-repeat right center;
	border: 0;
	cursor: pointer;
	height: 38px;
	width: 20px;
	margin: 0;
	padding: 0;
}

/** mainbox **/
#mainbox {
	background-color: #ffffff;
	height: 340px;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
#mainbox p {
	margin: 0;
}
#mainbox .body {
	width: 960px;
	margin: 0 auto 0;
}
#mainbox div.images {
	float: right;
	display: inline-block;
	height: 281px;
	width: 710px;
	overflow: hidden;
}
#mainbox div.images img.preview {
	float: left;
	margin-right: 2px;
}
#mainbox div.images img.last {
	position: relative;
	top: -2px;
}
#mainbox .details {
	color: #2f2f2f;
	height: 200px;
	width: 200px;
	padding: 40px 20px 40px 10px;
}
#mainbox .details p {
	color: #646c6f;
	font-size: 14px;
	line-height: 20px;
	text-align: justify;
}
#mainbox .details p span {
	color: #073f5a;
	display: block;
	font-size: 16px;
	line-height: 20px;
	padding: 0 0 20px;
	text-align: center;
}
#mainbox .details p span a {
	color: #073f5a;
	font-weight: bold;
	text-decoration: none;
}
#mainbox .footer {
	height: 46px;
	width: 960px;
	margin: 0 auto;
	position: relative;
}
#mainbox div.footer ul {
	background-color: #dcdcdc;
	display: inline-block;
	width: 960px;
	list-style: none;
	margin: 0 auto;
	border-radius: 3px;
	padding: 0;
	position: absolute;
	bottom: -80px;
}
#mainbox div.footer ul li {
	float: left;
	width: 280px;
	padding: 20px 20px 18px;
}
#mainbox div.footer ul li img {
	float: left;
	margin-right: 10px;
}
#mainbox div.footer ul li p {
	color: #363636;
	font-size: 14px;
	height: 88px;
	line-height: 20px;
	margin: 0;
}
#mainbox div.footer ul li p a {
	color: #010101;
	font-weight: bold;
	text-decoration: none;
}
#mainbox div.footer ul li.selected {
	background-color: #e9f1f4;
	border-radius: 3px;
}
#mainbox div.footer ul li.selected p, #mainbox div.footer ul li.selected p a {
	color: #5c6164;
}
#mainbox div.footer span.bottom-shadow {
	background: url(../images/bottom-shadow.gif) no-repeat left top;
	display: block;
	height: 20px;
	width: 960px;
	position: absolute;
	bottom: -100px;
}

/*------------------------------ CONTENTS ------------------------------*/
#contents {
	background: url(../images/bg-content.gif) repeat;
	padding: 40px 0 20px;
}
#contents div.body {
	color: #fdfffa;
	width: 960px;
	margin: 0 auto 20px;
}

/** MAIN **/
#main {
	background-color: #03354e;
	width: 630px;
	margin: 60px 10px 0 300px;
	padding: 20px 0 20px 20px;
}
#main span, #main p {
	color: #aeb4b4;
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	padding-right: 20px;
	text-align: justify;
}
#main span {
	color: #fdfffa;
	font-size: 16px;
}
#main p a {
	color: #aeb4b4;
	font-weight: bold;
	text-decoration: none;
}
#main span a {
	color: #fdfffa;
	font-weight: bold;
	text-decoration: none;
}
#main ul {
	display: inline-block;
	list-style: none;
	height: 355px;
	margin: 0;
	padding: 0;
}
#main ul li {
	float: left;
	width: 315px;
}
#main ul li a {
	color: #fdfffa;
	display: block;
	height: 114px;
	margin: 0 40px 0 0;
	text-decoration: none;
}
#main ul li img {
	float: left;
}
#main ul li h3 {
	margin: 0;
	line-height: 25px;
	padding-top: 35px;
}
#main ul li p {
	clear: both;
	padding: 6px 40px 20px 0;
}

/** SIDEBAR **/
#sidebar {
	float: left;
	width: 270px;
	margin: 0;
	padding: 20px 20px 0 10px;
}
#sidebar h3 {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 20px;
}
#sidebar ul {
	list-style: none;
	height: 420px;
	margin: 0;
	padding: 0;
}
#sidebar ul li {
	font-size: 14px;
	line-height: 20px;
	padding-bottom: 10px;
}
#sidebar ul li span {
	color: #456d87;
	display: block;
	font-size: 12px;
	line-height: 20px;
	margin-bottom: 10px;
}
#sidebar ul li span a {
	background: url(../images/bg-comment.gif) no-repeat 7px 3px;
	color: #fffffb;
	display: inline-block;
	height: 20px;
	width: 20px;
	padding-bottom: 1px;
	padding-left: 12px;
	text-decoration: none;
}

/*------------------------------ About us page ------------------------------*/
#contents .background {
	background-color: #ffffff;
	line-height: 20px;
	min-height: 960px;
	width: 920px;
	border-radius: 3px;
	margin: 0 auto;
	padding: 20px;
}
#contents div.background h3 {
	color: #0e2934;
	margin: 20px 0;
	text-transform: uppercase;
}
#contents div.background p {
	color: #000000;
	font-size: 18px;
	margin: 0;
	padding: 0 0 20px;
	text-align: left;
	line-height: 24px;
}
#contents div.background p a {
	color: #0e2934;
	font-weight: bold;
	text-decoration: none;
}
#contents div.background p b {
	display: block;
	margin: 20px 0;
	text-transform: uppercase;
}

/*------------------------------ Blog Page ------------------------------*/
#blogs {
	display: inline-block;
}
#blogs div.section h3, #blogs div.sidebar h3 {
	margin: 0 0 20px;
	text-transform: none;
}
#blogs div.section h3 a {
	color: #0e2934;
	text-decoration: none;
}

#blogs div.sidebar {
	float: right;
	width: 270px;
}
#contents #blogs div.sidebar ul li a {
	color: #646C6F;
	text-decoration: none;
}
#contents #blogs div.sidebar ul li a:hover {
	color: #0e2934;
}

#blogs div.posts {
	margin: 0 0 40px;
}
#blogs div.posts ul {
	margin: 0;
	padding: 0 0 0 20px;
}
#blogs div.posts ul li {
	padding-bottom: 10px;
}

#contents #blogs div.archives ul {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}
#contents #blogs div.archives ul li {
	float: left;
	width: 135px;
	line-height: 30px;
}

#blogs div.section {
	margin-right: 300px;
}

/*------------------------------ Contact us Page ------------------------------*/
#contents div#contacts ul {
	list-style: none;
	margin: 20px 0;
	padding: 0;
}
#contents div#contacts ul li {
	width: 700px;
}
#contents div#contacts ul li p b {
	margin: 0;
	text-transform: none;
}

#services span, #solutions span, #support span {
	color: #0e2934;
	display: block;
	font-size: 17px;
	font-weight: bold;
	line-height: 20px;
	margin: 0 0 20px;
	text-align: justify;
}
#services span a, #solutions span a, #support span a {
	color: #0e2934;
	text-decoration: none;
}

/*------------------------------ Services Page ------------------------------*/
#services p {
	clear: both;
}
#services img {
	float: left;
	margin: 0 40px 20px 0;
}
#services ul {
	color: #646c6f;
	padding: 0;
}
#services ul li {
	font-size: 14px;
	line-height: 20px;
	padding: 0 0 20px;
	text-align: justify;
}

/*------------------------------ Solutions Page ------------------------------*/
#solutions ul {
	color: #646c6f;
	margin: 0 0 0 15px;
	padding: 0;
}
#contents #solutions ul li p b {
	margin: 0 0 20px;
}

/*------------------------------ Support Page ------------------------------*/
#support {
	padding: 20px 30px 0 10px;
}
#support ul {
	color: #646c6f;
	list-style: none;
	margin: 20px 0;
	padding: 0 20px;
}
#support ul li {
	padding: 0 0 20px;
}
#support ul li img {
	float: left;
	margin-right: 20px;
}
#contents #support ul li p {
	margin: 0 0 0 116px;
}
#contents #support ul li p b {
	color: #0e2934;
	margin: 0 0 20px;
}

/*------------------------------ FOOTER ------------------------------*/
#footer {
	color: #456f7f;
	line-height: 20px;
	width: 940px;
	margin: 0 auto;
	padding: 20px 10px;
}

#footer ul.contacts {
	float: left;
	font-size: 12px;
	list-style: none;
	width: 300px;
	margin: 0;
	padding: 0 0 10px;
}
#footer ul.contacts h3 {
	font-size: 14px;
	margin: 0 0 10px;
	text-transform: uppercase;
}
#footer ul.contacts li span {
	float: left;
	width: 60px;
}
#footer ul.contacts li p {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 70px;
}

#connect {
	float: left;
	list-style: none;
	width: 140px;
	margin: 0;
	padding: 0;
}
#connect h3 {
	font-size: 14px;
	margin: 0 0 10px;
	text-transform: uppercase;
}
#connect li {
	padding: 0 0 5px;
}
#connect li a {
	color: #456f7f;
	font-size: 15px;
	text-decoration: none;
}

#newsletter {
	float: left;
	width: 500px;
}
#newsletter p {
	font-size: 14px;
	margin: 0;
}
#newsletter p b {
	display: block;
	font-weight: 800;
	text-transform: uppercase;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}
#newsletter form {
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 16px;
	margin-left: 0;
}
#newsletter .txtfield {
	background: url(../images/input.gif) no-repeat;
	color: #9c9c9c;
	height: 25px;
	line-height: 25px;
	width: 200px;
	border: 0;
	margin-top: 0px;
	margin-right: 6px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}


#newsletter .txtfield2 {
	color: #9c9c9c;
	height: 50px;
	line-height: 18px;
	width: 432px;
	border: 0;
	margin-top: 0px;
	margin-right: 6px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	background-repeat: no-repeat;
}


#footer span.footnote {
	clear: both;
	display: block;
	font-size: 12px;
	margin: 40px 0 0;
	text-align: center;
}

/*------------------------------ For IE6 ------------------------------*/
.emergingsolutions img {
	top: 15px;
	position: relative;
}
.company {
	border: 3px solid rgba(102,102,102,1);
	padding-left: 20px;
	padding-top: 20px;
	background-color: rgba(204,204,204,1);
	border-radius: 20px;
	margin-bottom: 25px;
}
/*------------------------------ FORM ------------------------------*/
#contactus label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
#contactus input[type="text"], textarea
{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding-right: 10px;
	padding-left: 10px;

}
#contactus input[type="text"]:focus,textarea:focus
{
	color : #009;
	background-color : #99FFCC;
	font-weight: bold;
}
#contactus .textsize {
	width: 200px;
	height: 25px;
}
#contactus .textsize1 {
	width: 100px;
	height: 18px;
}
#contactus .textareasize {
	width: 436px;
	height: 50px;
	margin-right: 40px;
}
#contactus .textwrap {
	width: 234px;
	height: 68px;
	display: block;
}
#contactus .textwrap1 {
	height: 44px;
}
#contactus .textareawrap {
	display: block;
	height: 110px;
}
#contactus .texterror {
	font-family: PTSansItalic;
	font-size: 0.9em;
	color: #CC3333;
	display: block;
}
#contactus .textareaerror {
	font-family: PTSansItalic;
	font-size: 0.9em;
	color: #CC3333;
	display: block;
	margin-top: -4px;
}
#contactus .message {
	font-family: PTSansItalic;
	font-size: 0.8em;
	color: rgba(153,153,153,1);
	display: block;
	margin-top: -2px;
}
#contactus .button {
	background: url(../images/button-check.gif) no-repeat;
	cursor: pointer;
	height: 25px;
	width: 25px;
	border: 0;
	padding: 0;
	margin-left: 460px;
	margin-top: -38px;
	display: block;
}
#contactus .spmhidip {
	display: none;
	height: 3px;
	width: 10px;
}
#contactus b {
	font-size: 20px;
	color: rgba(0,255,0,1);
}
#contactus .uploadwrap {
	display: block;
	height: 68px;
}
#contactus .textwrap2 {
	display: block;
	height: 100px;
}
#contactus .textwrap3 {
	display: block;
	height: 40px;
}
#contactus .textwrap4 {
	display: block;
	height: 86px;
}




/* -------------------- CSS SCROLLING TABLE WITH FIXED HEADINGS - Part 1: STYLING -------------------- */
/* This is styling the table, it is not involved in the scrolling aspects of the design. PLEASE REMEMBER: When you specify a width for th and td elements, the browser just takes it as a "suggestion" and goes ahead and does what it wants to do. */
table.table-mine {
	/*cellspacing: 0;*/ /* THIS IS DEFAULT, SO IT IS NOT REQUIRED */
	border-collapse: collapse;
}
/* Top and bottom paddings are 2px AND left and right peddings are 4px. The order of values is always TOP, RIGHT, BOTTOM and LEFT.
   Total table WIDTH, as reported by $('#MyTestTable').width() is 627 and that is EQUAL to 1 + (4+100+4) + 1 + (4+200+4) + 1 + (4+300+4).
   Total table HEIGHT as reported by $('#MyTestTable').height() is 274 and that is EQUAL to (2+2)*row + 1*row + H*row */
table.table-mine td {
	padding: 2px 4px;
	background: #eee;
	/* There is some strange interaction with the scroll bar in some browsers, leaving artifacts while scrolling if the cell borders are on the right and bottom. */
    border-left: 1px solid #999; 
    border-top: 1px solid #999;
	/* If only a few cells overflow and you don't want to make the whole column wider just for them, truncate them. */
	overflow: hidden;
}
table.table-mine th {
	padding: 2px 4px;
    background: #6b6164;
	border-left: 1px solid #999;
	font-variant: small-caps;
    color: white;
}
/* This gives different color to each column. This is the reason to move the class names off of the divs in each cell, up to the enclosing td or th.*/
table.table-mine td.col-a {
	background: #C7E0C1;
}
table.table-mine td.col-c {
	background: #B7C3E8;
}
/* This removes the small line artifact close to vertical scroll bar under the heading columns. */
table.table-mine tr:first-child td {
    border-top: none;
}
/* This highlights rows of the table when they are hovered over. */
table.table-mine tr:hover td { 
    background: rgb(255, 255, 3);
}
/* -------------------- CSS SCROLLING TABLE WITH FIXED HEADINGS Part 2: SCROLLING -------------------- */
/* The OUTER DIV position is set to relative so it becomes the positioning context for all elements under it. The padding area at the top is the place where the column headings will be positioned using absolute positioning further down. This DIV must be wide enough to accommodate both the table (600px) and the vertical scroll bar (44px). The background and border must match the table colors set in the 'table.table-mine th'. Width and Height of this DIV are 644px and 174px, outer Width and Height are 644 + 2 (border) = 646px and 174 + 25 (padding) + 2 (border) = 201px.
 */
div.table-wrapper { 
    position: relative;
    padding-top: 25px;      /* This is an empty space INSIDE this DIV. */
    margin: 20px;           /* This is an empty space OUTSIDE this DIV. */
    border: 1px solid #999;
	background: #6b6164;
	width: 644px;
	/* H-Scroll */
	/* This width must be 16px wider than "table.table-mine thead" width so that thead can scroll fully left when scroll bar reaches far right. The main and visible scroll bar used to scroll table is from "div.table-scroll", it is used by user and as a reference in jQuery for synchronized scrolling of "table.table-mine thead". */
	width: 516px;
}
/* The INNER DIV defines the area that will scroll. The key to producing the scrolling area is giving this div a height and setting the overflow property to 'auto'. Width and height are the same as outer width and height of this DIV, 644px and 174px respectively.
*/
div.table-scroll { 
    height: 174px;
	overflow: auto;
}
/* This freezes a top row. Column headings are positioned over the top of the padding that is created in outer div. The left border added in 'table.table-mine th' shifted the headers over by one pixel. The solution for this is easy, just absolutely position at (-1px,0) instead of (0,0).
*/
/*table.scrollable thead tr {*/
table.table-mine thead {
    left: -1px; /* DO NOT FORGET TO PUT -1px, INSTEAD OF JUST -1 */
	top: 0;
    position: absolute;
	/* H-Scroll */
	/* The following two instructions create ABILITY TO SCROLL thead only in jQuery. If overflow is auto, instead of hidden, the horizontal scroll bar will be slightly visible under thead. */
	width: 500px;
	overflow: hidden;
}
/* The only other thing required is to set the widths of each column. The last column must end just before the vertical scroll bar, the columns widths add up to 600px. If table is too wide, a horizontal scoll bar will appear. The total width of the outer div is 644px. The difference of 44px is taken up by the vertical scroll bar. If you want to center any columns, you can do that here too, as I do with the 'text-align: center;'. The descendant selector 'div' after class name is redundant.
 */
table.table-mine .col-a div {
	width: 100px;
}
table.table-mine .col-b div {
	width: 200px;
}
table.table-mine .col-c div {
	width: 300px;
}