@charset "utf-8";
/* =================================
CSS created by:
Achmad Kamal Chaneman :: http://kamalchaneman.co.nr
Copyrights 2009
written for: http://www.att-group.co.id
==================================== */
body {
	background:url(../images/bg.jpg) repeat-x;
	color:#000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:100%;	
	margin:0;
	padding:0;
	position: relative;
}
/**************************************************** GLOBAL STYLES ****/
.clear{ display:block; clear:both; }
h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ color:#D81F80;}
a:hover{ color:#563D64; }
p{ padding:10px 0 0px 0px; line-height:22px;}
/********************************************** CONTAINER *****************************/
.container { position: relative; width:960px; margin:0 auto; }
#header { margin: 19px 0 0 0; }
#header h1 { display: inline; float: left; }
#header h1 a { background:url(../images/attgroup-logo_142x153.jpg) no-repeat; display:block; height:153px; width:249px; margin: 0; text-indent:-9999px; }
/*#nav { display: block; width: 1100px; position: relative; top: 60px; left:-50px; margin:0; padding:0; }
#nav > li { display:block; float: left; margin:20px 0 0 0; padding: 0 5px; position: relative; }
#nav > li a { color: #0096d8; display: block; font: bold 15px/18px Arial, Helvetica, sans-serif; text-align: center; text-decoration:none; height: 36px; width: 99px; letter-spacing: -1px; padding: 9px 0; }
#nav > li:hover a, #nav > li a.active { background: url(../images/nav.png) no-repeat; color: #fff; display: block; height: 36px; width: 99px; padding: 9px 0; }
#nav > li:hover a ul { display: block; margin-top: 50px; }
#nav li ul { margin:0px; padding:0px; display:none;}*/
#nav { display: block; position: relative; top: 60px; left:-50px; margin:0; padding:0; width:1050px; }
#nav > li { display:block; float: left; margin:20px 0 0 0; padding: 0 5px; }
#nav > li a { color: #0096d8; display: block; font: bold 15px/18px Arial, Helvetica, sans-serif; text-align: center; text-decoration:none; height: 36px; width: 99px; letter-spacing: -1px; padding: 9px 0; }
#nav > li a:hover, #nav > li a.active { background: url(../images/nav.png) no-repeat; color: #fff; display: block; height: 36px; width: 99px; padding: 9px 0; }
#nav > li:hover ul { display:block; }
#nav li ul { background: #0096d8; margin:0px; padding:0px; display:none; position: absolute; top:57px; -moz-border-radius:8px; -webkit-border-radius:8px;  -khtml-border-radius:8px; border-radius:8px; }
#nav li ul li { margin:0; padding:0; }
#nav li ul li a { color: #fff; padding:15px 0 0 0; min-width:150px; width:auto; }
#nav li ul li a:hover { background: none; padding: 15px 0 0 0; width: auto; 
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a );
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ }
#nav li ul li a.top:hover { color:#fff; padding:15px 0 0 0; min-width:150px; width:auto; 
-moz-border-radius:8px 8px 0 0;
-webkit-border-radius:8px 8px 0 0;
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a ); /* for firefox 3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ }
#nav li ul li a.btm:hover { /*background: #0096d8;*/ color:#fff; padding:15px 0 0 0; min-width:150px; width:auto; 
-moz-border-radius:0 0 8px 8px; 
-webkit-border-radius:0 0 8px 8px; 
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a ); 
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ }

#nav li ul#left { float:left; position:absolute; width:200px; }
#nav li ul#left { -moz-border-radius:8px 0 0 8px; -webkit-border-radius:8px 0 0 8px;  -khtml-border-radius:8px 0 0 8px border-radius:8px 0 0 8px; }
#nav li ul#left li a.top:hover { color:#fff; padding:15px 0 0 0; min-width:150px; width:auto; 
-moz-border-radius:8px 0 0 0;
-webkit-border-radius:8px 0 0 0;
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a ); /* for firefox 3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ }
#nav li ul#left li a.btm:hover { /*background: #0096d8;*/ color:#fff; padding:15px 0 0 0; min-width:150px; width:auto; 
-moz-border-radius:0 0 0 8px; 
-webkit-border-radius:0 0 0 8px; 
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a ); 
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ }
#nav li ul#right { float:right; position:absolute; left:672px; width:220px; }
#nav li ul#right { -moz-border-radius:0 8px 8px 0; -webkit-border-radius:0 8px 8px 0; -khtml-border-radius:0 8px 8px 0; border-radius:0 8px 8px 0; }
#nav li ul#right li a.top:hover { color:#fff; padding:15px 0 0 0; min-width:150px; width:auto; 
-moz-border-radius:0 8px 0 0;
-webkit-border-radius:0 8px 0 0;
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a ); /* for firefox 3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ }
#nav li ul#right li a.btm:hover { /*background: #0096d8;*/ color:#fff; padding:15px 0 0 0; min-width:150px; width:auto; 
-moz-border-radius:0 0 8px 0 ; 
-webkit-border-radius:0 0 8px 0; 
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a ); 
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ }


.slideshow { margin:0 0 30px 0; z-index: -1; }
.slideshow img { margin: 25px 0 0 0; }

#mainContent { display: block; font: 13px/18px Arial, Helvetica, sans-serif, "Museo 300"; margin: 60px 0 30px 0; min-height:300px; }
#mainContent strong { color:#000; }

.left { display: inline; float: left; margin: 0 0 0 10px; padding: 10px; }
.right {
	display: inline;
	float: right;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

#about { width:280px; margin-bottom:20px; }
#about h2 {
	background: url(../images/attgroup.jpg) no-repeat 0px -110px;
	display: block;
	text-indent:-9999px;
	height: 44px;
	width: 286px;
}
#about p { color: #333; font: 13px/18px Arial, Helvetica, sans-serif; text-align: justify; }
#about p strong { color: #000; font-weight: bold; }
#about a { background: url(../images/readmore.jpg) no-repeat; display: block; text-indent:-9999px; height: 13px; width: 64px; float: right; margin: 10px 0 0 0; }
#services {
	width: 530px;
	margin-right: 18px;
}
#services li { display: block; float: left;width: 500px; margin:0 10px 35px 0; }
#services li.last { display: inline; float: left; width: 300px; margin: 0 0 35px 0; }
#services ul li h2.att { background: url(../images/attgroup.jpg) no-repeat; display: block; text-indent: -9999px; height: 22px; width: 270px; }
#services ul li h2.kurhanz {
	background: url(../images/attgroup.jpg) no-repeat 0px -22px;
	display: block;
	text-indent: -9999px;
	height: 22px;
	width: 270px;
}

#services ul li h2.pli {
	background: url(../images/attgroup.jpg) no-repeat 0px -250px;
	display: block;
	text-indent: -9999px;
	height: 22px;
	width: 270px;
}

#services ul li h2.mau {
	background: url(../images/attgroup.jpg) no-repeat 0px -44px;
	display: block;
	text-indent: -9999px;
	height: 22px;
	width: 270px;
}
#services ul li h2.cas {
	background: url(../images/attgroup.jpg) no-repeat 0px -66px;
	display: block;
	text-indent: -9999px;
	height: 22px;
	width: 270px;
}
#services ul li h2.xsysnet {
	background: url(../images/attgroup.jpg) no-repeat 0px -88px;
	display: block;
	text-indent: -9999px;
	height: 22px;
	width: 270px;
}
.desc img {
	display: inline;
	float: left;
	margin-left: 8px;
	margin-right: 24px;
}
.desc { margin: 15px 0 0 0; }
.desc p {
	display: inline;
	float: left;
	padding:0;
	width: 340px;
	font: 14px/18px Arial, Helvetica, sans-serif;
	text-align: justify;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10px;
}
.desc a { display: block; height: 13px; width: 64px; text-indent:-9999px; margin:10px 0 0 0;}
.desc a.right {float:right; background: url(../images/readmore.jpg) no-repeat;};
.desc a.none { background:none; height:0; width:0; margin:0; }

#news {
	width: 280px;
	margin-top: 32px;
}
#news.left { padding: 4px 10px; clear: left; } 
#news h2 {
	background: url(../images/attgroup.jpg) no-repeat 0px -154px;
	display: block;
	text-indent: -9999px;
	height: 44px;
	width: 286px;
}
#news ul { margin: 24px 0 0 0; }
#news ul li { margin: 0 0 24px 0; }
#news ul li h3 a { color: #0096d8; font: bold 13px/18px Arial, Helvetica, sans-serif; }
#news ul li p { padding:0; margin:0; font:12px/18px Arial, Helvetica, sans-serif; height: auto; }

#partner {
	float: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
}
#partner h2 { background: url(../images/businessLink.jpg) no-repeat; display: block; text-indent: -9999px; height: 35px; width: 289px; }
#partner img { margin:0 auto; display:block; }
/******************************************** ABOUT PAGE ***/
h2.about {
	background: url(../images/attgroup.jpg) no-repeat 0px -198px;
	height: 44px;
	width:286px;
	text-indent: -9999px;
	margin-bottom: 8px;
}
/******************************************** SERVICES PAGE ***/
.services { height:auto; min-height:300px; margin:30px 0; }
.services h2 { color:#758EAE; font: 17px Arial, Helvetica, sans-serif, "Museo 300"; border-bottom:1px solid #cbcbcb; padding-bottom:5px; margin:0 0 10px 0; }
.services img { border:1px solid #000; margin:0 0 20px 0; }
.services p { margin:0; padding:0; text-align:justify; }
.services p.titleLeft { padding:5px 0; background:#F0F4F8; text-align:center; width:500px; display:block; margin:15px 450px 10px 0; font:bold 1.5em Georgia; font:bold 1.5em Georgia; }
.services p.titleRight { padding:5px 0; background:#F0F4F8; text-align:center; width:500px; display:block; margin:15px 0 10px 450px; font:bold 1.5em Georgia; font:bold 1.5em Georgia; }
#mainContent .services strong { color:#333; }
.services a { background: url(../images/readmore.jpg) no-repeat; display:table; height: 13px; width: 64px; text-indent:-9999px; float: right; margin:0 10px 0 0; }
.smallDesc {
	height:60px;
	overflow:hidden;
	padding-bottom:10px;
	width:495px;
}
.sidebar { width:300px; margin:0; padding:0; }
.sidebar p { background: #EAEDF0; margin:8px 0; text-align:justify; padding:5px 0; }
.sidebar p.active { 
background: -moz-linear-gradient(bottom, #6c6c6c, #99979a );
background: -webkit-gradient(linear, left top, left bottom, from(#99979a), to(#6c6c6c)); /* for webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99979a', endColorstr='#6c6c6c'); /* for IE */ 
}
.sidebar p.active a { color:#fff; }
.sidebar p a { background:url(../images/bullet.png) no-repeat; color:#0096d8; text-decoration:none; padding-left:25px; margin-left:20px; }
.sidebar p a:hover { text-decoration:underline; }

.contentInner h2 { color:#758EAE; font: 17px Arial, Helvetica, sans-serif, "Museo 300"; border-bottom:1px solid #cbcbcb; padding-bottom:5px; margin:0 0 10px 0; }
.contentInner img { margin:0 10px 10px 0; padding:0; }
.contentInner p { padding:0; }
#mainContent .contentInner p strong { color:#000; }
.contentInner p span { background:#EAEDF0; display:block; text-align:center; font:bold 1.5em Georgia, "Times New Roman", Times, serif; padding:5px 0; width:720px; }
.contentInner ul, .smallDesc ul { margin:0 0 30px 0; }
.contentInner ul li, .smallDesc ul li { list-style:disc outside; margin:0 0 0 15px; padding:5px 0; }
.contentInner ul li ol, .smallDesc ul li ol { margin-left:20px; }
/******************************************** BUSINESS PAGE ***/
ul.business li { list-style:disc inside; }
ul.business li a { display:inline; color:#0096d8; font-weight:bold; }
/******************************************************************** NEWS PAGE ***/
.content { width:630px; margin:0; min-height:350px; }
.news h3 a, .news-details h3 a { background:#EAEDF0; color:#0096d8; display:block; font:bold 17px Georgia, "Times New Roman", Times, serif; padding:5px 0; text-align:center; margin-bottom:5px; text-decoration:none; }
.news h3 a:hover, .news-details h3 a:hover { color:#0096d8; text-decoration:underline; }
.news { border-bottom:1px solid #cbcbcb; padding:0 0 20px 0; margin-bottom:20px; /*height:150px;*/ overflow:hidden; }
.news-details { border-bottom:1px solid #cbcbcb; padding:0 0 20px 0; margin-bottom:20px; }
.news p, .news-details p { text-align: justify; }

.recentNews { margin:10px 0 0 0; padding:0; width:300px; }
.recentNews h2 { font:bold 15px Arial, Helvetica, sans-serif, "Museo 300"; background:#0096d8; color:#fff; padding:7px 0 7px 10px; margin:0 0 10px 0; }
.recentNews ul li { border-bottom:1px dotted #CBCBCB; margin: 0 0 10px 0; padding:0 0 10px 0; }
.recentNews ul li h3 a { color: #0096d8; font: 13px/18px Arial, Helvetica, sans-serif; text-decoration:none; }
.recentNews ul li h3 a:hover { text-decoration:underline; }

a.page { color:#0096d8; text-decoration:none; background:#CBCBCB; padding:3px 5px; margin:0 5px 0 0; }
a.page:hover { color:#fff; background:#0096d8; }
/******************************************** NETWORKING ***/
#map { display: block; margin:0 auto; background-repeat:no-repeat; }
.network { width:630px; padding:8px; }
.network h4 { font:bold 15px Arial, Helvetica, sans-serif, "Museo 300"; background:#0096d8; color:#fff; padding:7px 0 7px 10px; margin:0 0 10px 0; }
.network h5, .popupcontent h5 { font:bold 15px Arial, Helvetica, sans-serif, "Museo 300"; background:#EAEDF0; padding:7px 0 7px 10px; margin:0 0 5px 0; }
.network p { line-height:18px; margin:0 0 10px 0; padding:0; }
ul.legend { position:relative; top:-200px; left:70px; border:1px solid #0096d8; width:80px; padding:10px; }
ul.legend li {  }
ul.legend img { margin:0 10px 0 0; }
/******************************************** FOOTER ***/
#footer { background: #0096d8; height:70px; padding: 20px; }
#footerNav { margin:0; }
#footerNav li { display: inline; float: left; margin: 0 10px 0 0; }
#footerNav li a { color:#fff; font:11px/18px Arial, Helvetica, sans-serif; text-decoration:none; border-right: 1px solid #fff; padding: 0 10px 0 0; }
#footerNav li a.last { color:#fff; font:11px/18px Arial, Helvetica, sans-serif; text-decoration:none; border:none; }
#footer p { color: #fff; font: 11px/18px Arial, Helvetica, sans-serif; }
#footer p a { color:#fff; text-decoration:none; }
#footer p a:hover { text-decoration:underline; }
/******************************************** CONTACT PAGE ***/
.contact { width:450px; }
.contact p { padding:0; margin:0 0 10px 0; }
.contact p span { display:inline-block; width:50px; }
.support h5 { color:#000; font:bold 14px Arial, Helvetica, sans-serif, "Museo 300"; margin:10px 0; }
.support img { vertical-align:middle; }
.support cite { color:#0096d8; font:bold 14px Arial, Helvetica, sans-serif; margin:0 0 0 10px; }
.support a { display:block; text-decoration:none; }
/***** FORMS ******************************************************************/
#contactform { margin:0; padding:0; width:450px; }
#contactform h2 { color:#0096d8; font:bold 1.5em Arial, Helvetica, sans-serif, "Museo 300"; text-align:center; }
fieldset {
	margin: 0;
	padding: 15px 15px 0 15px;
	border: 0 solid #000;
	width: 460px;
}
fieldset legend, fieldset label.hidden { display: none; }
fieldset ol { margin-bottom: 0; }
fieldset ol li { margin: 0 0 20px 0; padding: 0; clear:both; }
fieldset ol li label {
	color:#0096d8;
	font-weight:bold;
	float: left;
	width: 70px;
	text-align:right;
	margin:0 20px 0 0;
}
fieldset ol li input,
fieldset ol li select,
fieldset ol li textarea {
	width: 300px;
	background-color: #dadada;
	color: #000;
	font:13px Arial, Helvetica, sans-serif, "Museo 300";
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
	display:block;
	padding:3px 0;
}
p.form-submit {	
	width:80px;
	margin:0 0 0 100px;
	text-align:center;
	display:block;
}
#send { color:#fff; background:url(../images/button.png); height:30px; width:85px; border:none; text-indent:-9999px; }
p.form-info { padding: 0 15px; margin:0 0 0 90px; }
/* For IE 6 */

* html #mid-wrap fieldset ol li label {
	width: 97px;
}

#mid-wrap fieldset ol li input,
#mid-wrap fieldset ol li select,
#mid-wrap fieldset ol li textarea {
	width: 347px;
	margin: 0;
	padding: 5px;
	border-width: 1px;
	border-style: solid;
}
label.error { color:red; display:block; font-size:11px; text-align:left; width:100%; margin:0 0 10px 90px; font-weight:normal; }

/* xsys service */
#section-5 dt 
{
	margin-top:4px;
}
#section-5 dd
{
	margin-left: 14px;
}