* { margin:0; padding:0; }
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object { border:0; }
body { 
  padding: 0; 
  background: #fff url("../img/bg1.jpg") repeat-x; 
  font: 0.8em/1.5 "arial",sans-serif; 
  color: #354146; 
  text-align: center; 
}

/* --------------------------------1------------------------------- */
a {color:#69791D;}
a:link {color:#AAC820;}
a:hover {color:#69791D;}

/* ----------------------------------2----------------------------------- */
h1, h2, h3, h4, h5, h6 { margin:15px 0 10px 0; }
h1 { font-size:200%; font-family: Georgia;}
h1#logo a{background: #fff url("../img/logo.jpg") no-repeat;color: #ced1d2; text-decoration: none; display: block;height: 74px; font-weight: normal;}
h1#logo a:hover{color: #fff;}
h2 { font-size:130%; color: #5a5a5a;font-weight: bold; padding: 0;margin:0; }
h3 { font-size:120%; color: #5a5a5a;}
h4 { font-size:120%; text-align:center; }
h5 { font-size:100%; }

/* --------------------------------3-------------------------------------- */
#layout { 

  text-align:left; 
}
  #container { 
    clear: both;


  }
  #intro{
    background: #e6e8e9;height: auto;
  }
  #intro-in{
    width:891px; 
    margin:0 auto; 
    padding-top: 20px;
	padding-bottom:10px;
  }
  #intro-in a{color: #898989; text-decoration: none;}
    #intro-in a:hover{color: #666666; text-decoration: none;}

  	/* ---------------------------------4--------------------------------- */
  	#header {width:891px; 
      margin:0 auto; }
  
      
        
    /* -------------------------5-------------------------- */
      #nav {width:891px; 
      margin:0 auto; }
      #nav ul {margin:0; padding:0; list-style:none;height: 35px;}
      	#nav ul li {float:left; display:block; margin:0; padding:0;}
      	#nav ul li a {
          display: block; 
          float: left;
          font-size: 85%;
          color: #fff;
          text-decoration: none;
          padding: 12px 20px 10px;
          text-align: center;

        }
        #nav ul li a:hover {
          color: #ced1d2;
          text-decoration: underline;
        }
      	#nav ul li#active a {
      	color: #101517;
      	border: 1px solid #fff;border-bottom:1px solid #e6e8e9;
        background:#e6e8e9; text-decoration:none;}
  
  
  
    .content {
      padding: 0 0 0 0;
      z-index: 10;
      width:891px; 
      margin:0 auto; 
       
    }
    .content .in{
      padding: 20px 0 30px;
    }
    p.intro{
      background: url("../img/line.jpg");
      line-height: 23px;
      margin:0 0 0;
	  color:a5a5a5;
    }
    .shadow{
      border-top: 1px solid #dddddd;
      padding: 10px 0;
      background: url("../img/shadow.jpg") no-repeat;
    }
    img.thumb{padding: 3px; background: #fff; border: 1px solid #d1d1d1;}
    
    .columns {list-style: none;margin:10px 0 0 0;padding:0; font-size: 90%;}
    .columns li{float: left; width: 32%;}
    .columns li.col2{border-left: 1px solid #d7d7d7;border-right: 1px solid #d7d7d7;}
    .columns li h3{padding: 0 10px;color: #2e4650; margin: 0 0 5px;}
    .columns li.col2 h3{padding-left: 20px;}
    .columns li.col3 h3{padding-left: 20px;}
    .columns li p{line-height: 22px;padding: 0 20px 0 10px; margin: 0; color: #3f4345;}
    .columns li.col2 p{padding: 0 20px 0 20px;}
    .columns li.col3 p{padding: 0 10px 0 20px;}
    .columns li a.more{display: block;color: #1666a3;padding: 5px 0;}
    .columns li a.more:hover{color: #0b4775; text-decoration: none;}

	/* ins */
	
#test1 {
    border: 2px solid #dddddd;
    padding: 10px 0;
	margin: 1em auto;
    width: 891px;
    height: 150px;
  }
	
div#wrapper{float:left;width:891px}
div#navigation{float:left;width:180px;margin-left:-891px}
div#content{padding-left:15px;margin: 0 22%;/*border-right: 1px solid #d7d7d7*/}
div#extra{float:left;width:180px;margin-left:-180px}
  
  .teksberjalan { margin : 0px ; color:#CC3300; padding : 1px 0px 1px 0px; font-size : 12px; font-weight : bold; border-bottom: 0px solid #CEDFAA ; font-family : trebuchet,arial; width:200px }
  
    /* css for nav */
#navigation2{
	height:1px;
}
.container2{
	margin: 0pt auto;
	width:800px;
}

#home, #home div, 
#about, #about div, 
#services , #services div, 
#solutions, #solutions div, 
#contact,  #contact div {
	height:33px;
	position:absolute;
	width:97px;
	float:left;
}

#home, #about, #services, #solutions, #contact{
	background-image: url(../img/nav.png);
	background-attachment: scroll;
	background-repeat: no-repeat;
	top:101px;
}

#home{
	background-position: 0px -25px;
	margin-left:6px;
}

#about{
	background-position: -98px -25px;
	margin-left:105px;
}

#services{
	background-position: -196px -25px;
	margin-left:204px;
}

#solutions{
	background-position: -294px -25px;
	margin-left:303px;
}

#contact{
	background-position: -392px -25px;
	margin-left:402px;
}

#home div, #about div, #services div, #solutions div, #contact div {
	background-image: url(../img/white.png);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 0px -60px;	
}	

.pri-nav a{
	display:block;
	height:35px;
	text-decoration:none;
	text-indent:-30000px;
}

/* begin menu2*/


/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			170px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	padding: 9px 12px 9px 20px;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
}
.sf-menu li {
	background:		#C3DB91;
}
.sf-menu li li {
	background:		#C3DB91;
}
.sf-menu li li li {
	background:		#C3DB91;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#F6C739;
	outline:		0;
	-moz-border-radius: 8px;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
	width:	170px;
	margin: 2px;
	-moz-border-radius: 8px;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
	left:	170px; /* match ul width */
	top:	0;
}

/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/

/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/* end menu2*/

/* hover block animation */
		ul.hover_block { display: block; overflow: hidden; height: 1%; padding-bottom: 15px; }
			
		ul.hover_block li, ul.hover_block2 li {
			list-style:none;
			float:left;
			background: url(../img/elmnt/pmb10.3.jpg) no-repeat;
			/*padding: 10px;*/
			width:150px; position: relative;
			/*margin-right: 20px;*/ }

		ul.hover_block li a, ul.hover_block2 li a {
			display: block;
			position: relative;
			overflow: hidden;
			height: 79px;
			width: 150px;
			/*padding: 16px;*/
			color: #000;
			font: 1.4em/1.3 Helvetica, Arial, sans-serif;
		}

		ul.hover_block li a, ul.hover_block2 li a { text-decoration: none; }

		ul.hover_block li img, ul.hover_block2 li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

/* profile popup */

.rss-popup {
    /*margin: 100px auto;
    padding: 0;
    width: 100px;*/
    position: relative;
}
 
div.rss-popup em {
    background: url(../img/elmnt/foto.png) no-repeat;
    width: 100px;
    height: 110px;
    position: absolute;
    top: -140px;
    left: 300px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}
 
#rss-icon {
    width: 140px;
    margin: 0 auto;
	/*height: 42px;
    background: url(../popup_files/icon.png) no-repeat 0 0;
    text-indent: -9999px;
    display: block;*/
}
		
/* galeri */
a.close {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: block;
	width: 20px;
	height: 21px;
	background: url(../img/elmnt/close_button.jpg);
	text-indent: -9999px;
}

.photo_slider_img {
	width: 100px;
	height: 100px;
	margin-bottom: 5px;
	overflow: hidden;
}

td {
	vertical-align: top;
}

.photo_slider {
	position: relative;
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid black;
	overflow: hidden;
	margin: 25px 10px 10px 10px;
	background: white;
	float: left;
}

.info_area {
	display:none;
}

.more_info {
	display: block;
	width: 89px;
	height: 26px;
	background: url(../img/elmnt/moreinfo.jpg);
	text-indent: -9999px;
	cursor: pointer;
}

/* EOI*/

  	/*  -------------------------------6---------------------------------- */
  	#footer {
  	  width:891px; 
      margin:0 auto;
      clear:both;
      font-size: 85%;
      padding-bottom: 70px;
      color: #898989;
    }
    #footer a{color: #898989;}
    #footer a:hover{color: #666666; text-decoration: none;}
      #footer .f-left, #footer .f-right { padding: 0 10px; }




/*  ---------------------------------7----------------------------------- */
p { margin:15px 0; color:#5a5a5a; text-align:justify;}

/*  --------------------------------8------------------------------------- */
table { margin:0px 0; border-collapse:collapse; border-spacing:0; font-size:100%; }
th { text-align:center; font-weight:bold; }
th, td { padding:3px 5px; }

/* ----------------------------------9----------------------------------- */
ul, ol { display:block; margin:15px 0 15px 40px; color:#5a5a5a;}
ul ul, ul ul ul, ol ol, ol ol ol { margin:0; margin-left:20px; }
ol { list-style-type:decimal; }
ol ol { list-style-type:upper-alpha; }
ol ol ol {list-style-type:lower-alpha; }
li { display:list-item; }
ul li a { text-decoration:underline; }

/*  -----------------------------------10--------------------------------- */
dl { margin:15px 0; }
dt { font-weight:bold; }
dd { margin-left:30px; }

/*  ----------------------------------11----------------------------------- */
fieldset { margin:15px 0; padding:10px; border:1px solid #CCC; }
legend { margin-left:10px; font-size:100%; font-weight:bold; color:#000; }
abbr, acronym, .help { border-bottom:1px dotted #CCC; cursor:help; }
blockquote { margin:15px 20px; font-style:italic; }
del, .del { text-decoration:line-through; }
strong, .strong { font-weight:bold; }
cite, em, q, var { font-style:italic; }
code, kbd, samp  {font-family:monospace; font-size:110%; }
hr { display:block; height:1px; margin:10px 0; padding:0; border:0 solid #CCC; background:#CCC; color:#CCC;} 
.f-left {float:left;}
.f-right {float:right;}
.a-left, tr.a-left td {text-align:left;}
.a-center, tr.a-center td {text-align:center;}
.a-right, tr.a-right td {text-align:right;}
.a-justify {text-align:justify;}
.va-top {vertical-align:top;}
.va-middle {vertical-align:middle;}
.va-bottom {vertical-align:bottom;}
.clear { clear:both; }
.box { min-height:35px; }
.box:after { display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:"."; }
.noscreen { display:none; }
.mleft10 { margin-left: 10px; }
.mright10 { margin-right: 10px; }
.mtop10 { margin-top: 10px; }
.mbottom10 { margin-bottom: 10px; }

/*  ------------------------------12------------------------------ */
input.small{
  width: 50px;
}
input.normal{
  width: 146px;
}
.bigger {font-size:115%;}
.smaller {font-size:85%;}

.high {color:#00F;}
.nonhigh {color:#777;}

.foto{  display: block; border: 3px solid #ddd;}