html, body{
	height: 100%;
    background: url(../images/interface/bg.jpg) repeat;
}

html,body,div,p,table,tr,td,h1,h2,h3,h4,h5,form,img,map,area{
	margin:0;
	border:0;
	padding:0;
	font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	color: #666666;
}

*{
	margin: 0;
	padding: 0;
	font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}

h2 { font-size:17px; }

#logotype { width: 160px; height: 35px; display: block; position: absolute; top: 38px; left: 389px; z-index: 10; }
#logotype a { width: 160px; height: 35px; display: block; }

#www-integratech{
    display: table;
    width: 851px;
    font-size: 0.7em;
    margin-left: auto;
    margin-right: auto;
    margin-top: -438px;
    margin-bottom: -30px;
    /*margin: -438px auto -50px auto; * -50px = height of the footer */
    border: 0px solid #FFA821;
    background: #fff url(../images/interface/www-bg.gif) repeat;
}

#www-integratech-home{
    display: table;
    width: 851px;
    font-size: 0.7em;
    margin-left: auto;
    margin-right: auto;
    margin-top: -438px;
    /*margin: -438px auto -50px auto; * -50px = height of the footer */
    border: 0px solid #FFA821;
}

#bg{
background: url(/images/interface/top-bg.jpg) 100% 0;
height:438px;
margin-left:50%;
}

#bg-home{
background: url(/images/interface/top-bg-home.jpg) 100% 0;
height:438px;
margin-left:50%;
}

#wrap{
    height: 100%;
    padding-bottom: -60px;  /*footer height + top spacing */
}

body{
	line-height: 1.0em;
	font-size: 100%;
}






a img, a:hover img{border: none;}
a, .menuOff {color: #46667f; text-decoration: none; font-weight: bold;}
a:hover, .menuOn {color: #00cc00; text-decoration: underline;}

p{margin-bottom: 1.1em;}

.hidden{
	display: none;
	line-height: 0;
	font-size: 1px;
	text-indent: -9999px;
}

.image-block{
	display: block;
	overflow: hidden;
	font-size: 1px;
	line-height: 0;
	text-decoration: none;
	letter-spacing: -9999px;
}




/********************************************* HEADER */



#header {
	background: url(../images/interface/header.jpg) no-repeat;
	position: relative;
	height: 101px;     
        clear: both;
        z-index: 5;
}
	
	
	
#header, li{
	list-style: none;
	
}

/*\*/* html #header li{height:1%;}/**/

#header a,#header-internal a{
	position: absolute;
}


/********************************************* TOP NAVIGATION */
#wrap {position:relative;}
#navcontainer { height: 45px; background: transparent url(/images/interface/top-bg.jpg) repeat-x scroll 0 -101px; width:852px; height:47px; position: absolute; z-index:100; font-family: Verdana, arial, sans-serif; right: -1px;}
/* hack to correct IE5.5 faulty box model */
* html #navcontainer {width:852px; w\idth:851px;}
/* remove all the bullets, borders and padding from the default list styling */
#navcontainer ul {padding:0;margin:0;list-style-type:none; position: absolute; right: 0px;}
#navcontainer ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navcontainer li {float:left;width:149px;position:relative; height: 45px; }
/* style the links for the top level */
#navcontainer ul ul li { height: 28px; text-align: left !important; }
#navcontainer ul li a, #navcontainer ul li a:visited {display:block; text-align: center; font-size:13px;text-decoration:none; color:#fff; width:138px; height:30px; border-width:1px 0 1px 1px;  padding-left:10px; line-height:29px; font-weight:bold;}
#navcontainer ul ul li a, #navcontainer ul ul li a:visited { text-align: left !important;height: 20px; font-size:11px; background: transparent url(../images/interface/dropdown-bg.png) no-repeat 0 0 scroll; color: #FFF; }
/* a hack so that IE5.5 faulty box model is corrected */
* html #navcontainer a, * html #navcontainer a:visited {width:149px; w\idth:138px;}

/* style the second level background */
#navcontainer ul ul a.drop,
#navcontainer ul ul a.drop:visited {background: transparent url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;}
/* style the second level hover */
#navcontainer ul ul a.drop:hover{background: transparent url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
#navcontainer ul ul :hover > a.drop {background: transparent url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) no-repeat 130px center;}
/* style the third level background */
#navcontainer ul ul ul a, #navcontainer ul ul ul a:visited {}
/* style the third level hover */
#navcontainer ul ul ul a:hover {}


/* hide the sub levels and give them a positon absolute so that they take up no room */
#navcontainer ul ul {visibility:hidden;position:absolute;height:0;top:45px;left:0; width:149px;}
/* another hack for IE5.5 */
* html #navcontainer ul ul {top:30px;t\op:31px;}

/* position the third level flyout menu */
#navcontainer ul ul ul{left:149px; top:-1px; width:149px;}

/* position the third level flyout menu for a left flyout */
#navcontainer ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#navcontainer table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
#navcontainer ul ul a, #navcontainer ul ul a:visited { color:#FFF; height:auto; line-height:1em; padding:5px 10px; width:161px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html #navcontainer ul ul a, * html #navcontainer ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
#navcontainer a:hover {color:#FFF !important; background: url(../images/interface/dropdown-bg-y.png) no-repeat !important;}
#navcontainer ul ul a:hover {color:#000 !important; background: transparent url(../images/interface/dropdown-bg-r.png) no-repeat scroll 0 0 !important; }
#navcontainer :hover > a {color:#FFF !important; background: url(../images/interface/dropdown-bg-y.png) no-repeat !important;}
#navcontainer ul ul :hover > a{color:#000 !important; background: transparent url(../images/interface/dropdown-bg-r.png) no-repeat scroll 0 0 !important; }

/* make the second level visible when hover on first level list OR link */
#navcontainer ul li:hover ul,
#navcontainer ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
#navcontainer ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#navcontainer ul :hover ul :hover ul{ visibility:visible;}


/********************************************* TOP NAVIGATION *

#nav-z {
z-index: 3000;

}
	

#navcontainer {
clear: both;
border: 0px solid red;
float: right;
width: 851px;
background: url(../images/interface/topnav-blank.gif) repeat;
}

#navcontainer ul {
	margin: 0;
	list-style-type: none;
	height: 45px;
        font-size: 13px;
    width: 841px;
background: url(../images/interface/topnav-blank.gif) repeat;

}

#navcontainer ul li {
display: block;
position: relative;
float: left;

}

#navcontainer ul li ul {

height: 27px;


} 

#navcontainer li ul{
display: none;
width: 180px;
background-position: bottom;
position: relative;
z-index: 10;
}


#navcontainer ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  padding: 10px 15px 0px 15px;
  margin-left: 0px;
  white-space: nowrap;

}  


#navcontainer ul li a:hover { 

}

#navcontainer li:hover ul {
  display: block;
  position: absolute;
}


#navcontainer li:hover li {
  float: none;
  font-size: 11px;
line-height: 8px;
height: 27px;
padding-top: 1px;
}

#navcontainer li:hover a { 
background: url(../images/interface/dropdown-bg-y.png) no-repeat;

}

#navcontainer li:hover li a:hover { 
background: url(../images/interface/dropdown-bg-r.png) no-repeat;
}

#navcontainer ul li ul li a { 
background: url(../images/interface/dropdown-bg.png) no-repeat !important;

}

#navcontainer ul li:hover ul li a:hover { 
background: url(../images/interface/dropdown-bg-r.png) no-repeat !important;
}





#navcontainer #top-about {
	background: url(../images/interface/topnav-1.gif) no-repeat;
	width: 87px;
	height: 45px;
	display: block; 
	float: left;
}

#navcontainer #top-services {
	background: url(../images/interface/topnav-2.gif) no-repeat;
	width: 88px;
	height: 45px;
	display: block;
	float: left;
}

#navcontainer #top-infrastructure {
	background: url(../images/interface/topnav-3.gif) no-repeat;
	width: 130px;
	height: 45px;
	display: block;
	float: left;
}

#navcontainer #top-communications {
	background: url(../images/interface/topnav-4.gif) no-repeat;
	width: 153px;
	height: 45px;
	display: block;
	float: left;
}

#navcontainer #top-contact {
	background: url(../images/interface/topnav-5.gif) no-repeat;
	width: 97px;
	height: 45px;
	display: block;
	float: left;
}

#navcontainer #top-blank {
	background: url(../images/interface/topnav-blank.gif) no-repeat;
	width: 240px;
	height: 45px;
	display: block;
	float: left;
}



#navcontainer #top-about a:hover{background: url(../images/interface/topnav-1r.gif) no-repeat;}
#navcontainer #top-services a:hover{background: url(../images/interface/topnav-2r.gif) no-repeat;}
#navcontainer #top-infrastructure a:hover{background: url(../images/interface/topnav-3r.gif) no-repeat;}
#navcontainer #top-communications a:hover{background: url(../images/interface/topnav-4r.gif) no-repeat;}
#navcontainer #top-contact a:hover{background: url(../images/interface/topnav-5r.gif) no-repeat;}


#navcontainer ul li a {
	height: 35px;
}

/********************************************* LEFT NAVIGATION */

#portfolio {position: relative; z-index: 0;}

#leftnavcontainer {
z-index: 1000;
width: 158px;
height: 292px;
text-align: right;
background-color: #f2f2f2;
margin:45px 0px 0px 0px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
#leftnavcontainer ul {
padding:0;
margin:0;
list-style-type:none;
width:158px !important;
}
/* hack for IE5.5 */
* html #leftnavcontainer ul {margin-left:-8px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
#leftnavcontainer ul li {
background: transparent url(../images/interface/leftnav-bg-button.gif) no-repeat 0px 0px;
height: 26px;
width: 158px !important;
}

#leftnavcontainer li {
position:relative;
height:26px;
width: 158px !important;
}

/* get rid of the table */
#leftnavcontainer table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
#leftnavcontainer a, #leftnavcontainer a:visited {
display:block; 
text-decoration:none;
height:30px;
line-height:25px;
font-size: 10px;
width:142px !important;
color:#000;
padding-right: 8px;
padding-left: 8px;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html #leftnavcontainer a {background: transparent url(../images/interface/blank.gif) no-repeat 0px 0px; width:158px; w\idth:157px;}
* html #leftnavcontainer a:visited {background: transparent url(../images/interface/blank.gif) no-repeat 0px 0px; width:158px; w\idth:157px;}
/* style the link hover */
* html #leftnavcontainer a:hover {color:#000; background:none;}

#leftnavcontainer :hover > a {
color:#000; 
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#leftnavcontainer ul ul {
visibility:hidden;
position:absolute;
text-align: left;
top:0;
z-index: 10;
left:158px; 
}
/* make the second level visible when hover on first level list OR link */
#leftnavcontainer ul li:hover ul,
#leftnavcontainer ul a:hover ul {
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
#leftnavcontainer ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
#leftnavcontainer ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
#leftnavcontainer ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
#leftnavcontainer ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
#leftnavcontainer ul li:hover ul li {
background: none;
}
#leftnavcontainer ul li:hover ul li a {
background: transparent url(../images/interface/slide_out_bg.jpg) no-repeat 0px 0px;
}

#leftnavcontainer .leftnav-bg-button-root {
background: url(../images/interface/leftnav-bg-button-indent.gif) no-repeat;
}

#leftnavcontainer .blank-internal {
	background: none;
}

#page-title {

padding: 47px 0 23px 0;
color: #333;
/*font-size: 21px !important;*/
letter-spacing: -0.5px;
}

/********************************************* NEWS */

#news-wrapper {
width: 615px;
}

#news {
	border: 0px solid red;
	width: 158px;
	float: left;
	background: #a1abb1;
    clear: left;
}

#news-panel {
	padding: 9px 9px 9px 9px;
}

#news-panel h3 {
	background: url(../images/content/latest-news-h3.gif) no-repeat;
	width: 140px;
	height: 11px;
	margin: 8px 0 5px 0;
}

#news-panel #news-more {
	background: url(../images/interface/news-more.gif) no-repeat;
	width: 42px;
	height: 13px;
	padding-bottom: 10px;
}

#news-panel p {
	margin-bottom: 6px;
	padding-left: 1px;
	font-size: 10px;
	line-height: 13px;
	color: #4e6c84;
}

#news-panel img {
padding-bottom: 5px;


}


/*********************************************  HOMEPAGE WELCOME & INTRO */



#content-right {
	float: right;
	width: 661px;
	border: 0px solid;
}

#content-right dt {
	display: none;
}

#content-right .pagination {
	position: relative;
	top: -40px;
	right: 20px;
	float: right;
}

#content-right dd {
	margin-bottom: 11px;
}

#content-right dd .detail span {
    clear:both;
    display:block;
    margin:5px 5px 5px 385px;
}

#home-main {
	padding: 0px;
	margin: 0px;
	height: 292px;
	margin-top: -292px;
}

.home-main-wrap
{
	background: url(../images/content/) repeat;
	margin: 0 auto 15px;
	position: relative;
	width: 650px;
	height: 210px;
}

.home-main-frame
{
	background: url(../images/content/home-main-overlay.png) no-repeat;
	overflow: hidden;
	position: relative;
	top: 0;
	left: 0;
	width: 693px;
	height: 292px;
}



#home-main ul {

border: 0px solid;
margin-left: 158px;

}

#home-welcome  {
	background: url(../images/content/home-welcome.gif) no-repeat;
	height: 35px;
	width: 176px;
       margin: 25px 0 0 0;

}

#home-text {

	width: 360px;
	float: left;
}



#home-quote {
	width: 363px; height: 66px;
	background: url(../images/content/home-quote.gif) no-repeat;
	margin-left: -8px !important;
}



/********************************************* HOMEPAGE Right Panels */


#home-panels  {
	float:right;
	width: 269px;
	height: 274px;
	border: 0px solid;
	padding-top: 30px;
	text-align: center;
}

#home-panels h3 {
	font-size: 11px;
	color: #ffd300;
	text-align: right;
	line-height: 12px;
	padding: 10px 15px 0px 15px;
	border: 0px solid;
	height: 31px;
}

#home-panels #home-panels-logos {
	margin: 0px 0 0 0;
	background: url(../images/content/panel-logos.png) no-repeat;
        height: 62px;
}





#home-panels-logos ul {
	padding: 9px 0 0 8px;
	list-style-type: none;
	height: 43px;
        width: 252px;


}

#home-panels-logos li {
        float: left;
	list-style-type: none;
	height: 43px;

}


#home-panels-logos #logo-1 {
	background: url(../images/content/logo1.gif) no-repeat;
        height: 43px;
        width: 80px;
}

#home-panels-logos #logo-2 {
	background: url(../images/content/logo2.gif) no-repeat;
        margin-left: 6px;
        height: 43px;
        width: 80px;
}

#home-panels-logos #logo-3 {
	background: url(../images/content/logo3.gif) no-repeat;
        height: 43px;
        margin-left: 6px;
        width: 80px;
}


#panel {
	height: 62px;
	background: url(../images/content/panel.gif) no-repeat;
	padding-bottom: 9px;
}

#panel #panel-more {
	background: url(../images/interface/panel-more.gif) no-repeat;
	height: 13px;
	width: 42px;
	float: right;
	padding-right: 16px;
	overflow: hidden;
	text-indent: -999px;
}





/********************************************* CONTENT PAGES */



#title-about{
	background: url(../images/content/title-about.gif) no-repeat;
        height: 25px;
        width: 377px;
        margin: 20px 0 18px 0px;

}

#title-related-links{
	background: url(../images/content/related-links.gif) no-repeat;      
        height: 22px;
        width: 162px;
        margin: 10px 0 5px 0px;
}


.caption {
	color: #333;
	text-align: center;
	font-weight: bold;
	font-size: 11px;
	letter-spacing: -0.4px;
	border: 0px solid red;
	padding-bottom: 25px;
}


/************ CONTENT 1 */


#content-one {
	padding: 0px 0 0 0px;
	width: 380px;
	float: left;
	background: #fff;
	border: 0px solid;
}

#content-one-image {
	

    width: 252px;
	float: right;
padding-bottom: 20px;
}


/************ CONTENT 2 */


#content-two {
	width: 340px;
	float: right;
	background: #fff;
	border: 0px solid;
	margin-right: 30px;
}

#content-two-image {
	float: left;
}

#content-two-image img {
	border: 1px solid #cccccc;
}


/************ CONTENT 3 */



#content-three {
	padding-right: 40px;
}

#content-three-image {
	padding: 0 50px 0 0;
	float: left;
	clear: both;
}

#content-three-image img {
	border: 1px solid #cccccc;
}

#content-three-image-right {
	padding: 50px 0 0 50px;
	float: right;
	clear: both;
}

#content-three-image-right img {
	border: 1px solid #cccccc;
}


#related-links  {
clear: both;
border: 0px solid;
list-style: none;
width: 661px;
float: right;
padding-bottom: 15px;
}

#related-links ul  {
font-weight: bold;
font-size: 11px;
}

#related-links li  {
padding-left: 17px;
margin-bottom: 0px;
background-image: url(../images/content/related-bullet.gif);
background-repeat: no-repeat;
letter-spacing: -0.2px;
}

#content-wrap {
	width: 693px;
	float: right;
	margin-top: -292px;
}
/********************************************* CONTACT FORM */

#contact-form, fieldset {
border: 0px;
}

#contact-form legend {
color: #333;
padding: 20px 0 0 0;
border: 0px solid;
font-size: 14px;
font-weight: bold;
}

#contact-form {
font-weight: bold;

}

#contact-form input {
width: 200px;
margin-bottom: 10px;
}

#contact-form textarea {
width: 350px;
height: 200px;
margin-bottom: 10px;
font-size: 12px;

}

#contact-form #submit {
background-image: url(../images/interface/submit.gif);
width: 71px;
height: 28px;
border: 0px;
font-size: 0px;
}

#contact-form #submit:hover {
background-image: url(../images/interface/submit-r.gif);
width: 71px;
height: 28px;
border: 0px;
font-size: 0px;
}

#contact-form #error{
color: #990000;
padding: 0px 0 10px 0;
margin: -8px 0 0 0px;
font-size: 11px;

}


/********************************************* NEWS */

#news-wrapper h3 {

color: #333;
font-size: 15px;
letter-spacing: -0.2px;
padding: 5px 0 10px 0;
}

#news-wrapper .detail {
padding: 15px 0 0 0;
}

#news-wrapper p {
padding: 0px 0 10px 0;
}

#news-wrapper .posted {
color: #a1abb1;
font-size: 10px;
}


#news-wrapper #read-more {
background-image: url(../images/interface/read-more.gif);
width: 96px;
height: 21px;
}

#news-wrapper #read-more:hover {
background-image: url(../images/interface/read-more-r.gif);
width: 96px;
height: 21px;
}

#news-wrapper #read-more {
background-image: url(../images/interface/read-more.gif);
width: 96px;
height: 21px;
}

#news-wrapper #news-back {
background-image: url(../images/interface/back-news.gif);
width: 107px;
height: 21px;
}

#news-wrapper #news-back:hover {
background-image: url(../images/interface/back-news-r.gif);
width: 107px;
height: 21px;
}

#news-wrapper dt {

display:none;
}




/********************************************* FOOTER */


#footer{
    width: 852px;
    position: relative;
    margin: 29px auto 0px;
    height:30px;
    background: url(../images/interface/footer-bg.gif) repeat-x;
}

#footer-copyright  {
	height: 30px;
	width: 339px;
	background: url(../images/interface/footer-copyright.gif) no-repeat;
	float: left;
}

/*\*/* html #header li{height:1%;}/**/


/* MISC STYLING */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix{
     border: 0;
}