/*
Theme Name: jifo-vert
Theme URI: http://jepara-info.com/
Description: jifo portfolio
Version: 1.0
Author: cuss
Author URI: http://www.catatancuss.co.cc
*/

*
body{
	font-family: Monospace, Arial, Helvetica, sans-serif, Verdana;
	background:#fff url(images-home/bg.png);
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	min-width:768px;    	/* Minimum width of layout - remove line if not required */
}
wrap
h1, h2, h3 {
}
h1 {
	margin-top:10px;
	line-height: .77em; 
	letter-spacing: -2px; 
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 2.5em; font-weight: 100; 
	text-shadow:0px 1px 2px #b3a085;
	text-align:center;
	text-transform:uppercase;
}
h2 {
	letter-spacing: -2px; 
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 30px; 
	font-weight: 100; 
	text-shadow:0px 1px 2px #e3cfb0;
	text-transform:uppercase
}
h3 {
	letter-spacing: -2px; 
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 22px; 
	font-weight: 100; 
	text-shadow:0px 1px 2px #e3cfb0;
	text-transform:uppercase
}
p, blockquote, ul, ol {
}
p {
	margin-top: -10px;
	font-size: 110%;
	margin-left:3%;
	font-family: Georgia, "Times New Roman", Times, serif;  
	font-weight: 100; 
	font-variant: small-caps;
	text-align:justify;
	text-shadow:0px 1px 2px #b3a085;
}
span{ 
	color: #fff;
	text-shadow:2px 2px 1px #000;
}
blockquote {
}
a{ 
	text-decoration: underline overline;
	color: #ffffff;
	text-shadow:2px 2px 1px #000;
}
a:hover {
	color: #000;
	text-decoration: underline overline;
	text-shadow:0px 1px 2px #b3a085;
}
img {
border:none;
}
/* home start */
#wel01 {
	Background:url(images-home/wel01.png) no-repeat top;
	width:160px;
	height:385px;
	float:left;
}
#wel02 {
	Background:url(images-home/wel02.png) no-repeat;
	width:160px;
	height:385px;
	float:right;
}
.home{ 
	margin:0px;   
	width:100%;
	height:768px;
	background: url(images-home/bg-home.png) repeat-x ;
}
.home h1 { 
	margin-top:80px;
	text-transform:uppercase;
}
.home h1 span{ 
	color: white;
	text-shadow:2px 2px 1px #000;
}
.home p{ 
	margin-top: -30px;
	font-size: 110%;
}
.home h3 {
	margin-top: -20px;
	text-transform:uppercase;
	text-align:center;
	text-decoration: overline;
	font-size: 1em;
}
.col1{
	margin-left: 1%;
	float: left;
	width: 70%;
	clear: both;
	overflow:hidden;
}
.col2{
	margin-top:10px;
	float: right;
	width: 25%;
	margin-right: 2%;
	display: inline;
	overflow:hidden;
}
/* about */
#arief {
	Background:url(images-home/arief.png) no-repeat top;
	width:110px;
	height:130px;
	float:left;
	margin-top:-50px;
}
#cuss {
	Background:url(images-home/cuss.png) no-repeat;
	width:82px;
	height:130px;
	float:right;
	margin-top:-20px;
}
.about{ 
	margin-top:0px;
	width:100%;
	height: 550px;
	background: url(images-home/bg-about.png) repeat-x bottom left;
}
.col3 { 
	margin-top: 60px;
	overflow:hidden;
	float:left; 
	width:63%; 
	margin-left:1%; 
	margin-right:1%;
	padding-left:10px; 
	height:100%;
}
.col4 { 
	background-image:url(images-home/bg-col4.png);
	background-repeat:no-repeat;
	margin-top: 60px;
	overflow:hidden;
	float:left; 
	width:15%; 
	padding-left: 1%;
	padding-right: 1%;
}
.col5 { 
	margin-top: 60px;
	overflow:hidden;
	float:right; 
	width:15%; 
	margin-right:1%; 
}
ul.about {
	margin:0px; padding:0px;
}
ul.about li {
	list-style:none;
	margin:0px; padding:0px;
	clear:both;
}
ul.about li a img {
	list-style: none;
	height: 40px;
	border: none;
	margin-top:-17px;
}
ul.about li a img:hover {
	height: 54px;
	list-style: none;
	border: none;
	margin-right:0px;
}
.skill {
	padding:0; 
	margin-top:-15px; 
	list-style-type:none; 
	overflow:hidden; 
	width:100%; 
  }
.skill li {
	background:url(images-home/skill-nav2.png)no-repeat 0 0;
    display: block;  
    overflow: hidden;   
    cursor: pointer;  
	float: left;
	width: 132px;
	height: 39px;
  }
.skill a{
	display:block;
	height:56px;
	text-indent:-9999px;
	outline:none;
}
.skill a:hover{
	background: url(images-home/skill-nav2.png)no-repeat;
}
#skill-1 {
	background-position: 0 0;
}
#skill-1 a:hover{
	background-position: -140px -0px;
}
#skill-2 {
	background-position: 0 -39px;
}
#skill-2 a:hover{
	background-position: -140px -39px;
}
#skill-3 {
	background-position: 0 -78px;
}
#skill-3 a:hover{
	background-position: -140px -78px;
}
#skill-4 {
	background-position: 0 -117px;
}
#skill-4 a:hover{
	background-position: -140px -117px;
}
#skill-5 {
	background-position: 0 -155px;
}
#skill-5 a:hover{
	background-position: -140px -155px;
}
#skill-6 {
	background-position: 0 -195px;
}
#skill-6 a:hover{
	background-position: -140px -195px;
}
#skill-7 {
	background-position: 0 -235px;
}
#skill-7 a:hover{
	background-position: -140px -235px;
}
.tools {
  padding:0; 
  margin-top:-15px; 
  list-style-type:none; 
  overflow:hidden; 
  width:100%; 
  }
.tools li {
	background:url(images-home/tools-nav2.png)no-repeat 0 0;
    display: block;  
    overflow: hidden;   
    cursor: pointer;  
	float: left;
	width: 133px;
	height: 100%;
  }
.tools a{
	display:block;
	height:37px;
	text-indent:-9999px;
	outline:none;
}
.tools a:hover{
	background: url(images-home/tools-nav2.png)no-repeat;
}
#tools-1 {
	background-position: 0 0;
}
#tools-1 a:hover{
	background-position: -133px -0px;
}
#tools-2 {
	background-position: 0 -37px;
}
#tools-2 a:hover{
	background-position: -133px -37px;
}
#tools-3 {
	background-position: 0 -74px;
}
#tools-3 a:hover{
	background-position: -133px -74px;
}
#tools-4 {
	background-position: 0 -111px;
}
#tools-4 a:hover{
	background-position: -133px -111px;
}
#tools-5 {
	background-position: 0 -148px;
}
#tools-5 a:hover{
	background-position: -133px -148px;
}
#tools-6 {
	background-position: 0 -185px;
}
#tools-6 a:hover{
	background-position: -133px -185px;
}
#tools-7{
	background-position: 0 -222px;
}
#tools-7 a:hover{
	background-position: -133px -222px;
}
#tools-8{
	background-position: 0 -259px;
}
#tools-8 a:hover{
	background-position: -133px -259px;
}
/* portfolio */
#port {
	Background:url(images-home/port.png) no-repeat top;
	width:725px;
	height: 93px;
	float:left;
	margin-top:15px;
}
.portfolio{
	margin:0px;   
	width:100%;
	height: 600px;
	background: url(images-home/bg-port.png) repeat-x bottom left;
}
.portfolio h2{
	margin-top:60px;
}
.portfolio h3{
	margin-top:-20px;
}
.colport{
	margin-top:-60px;
	margin-left: 1%;
	float: left;
	width: 70%;
	clear: both;
	overflow:hidden;
	clear: both;
}
.colport2{
	margin-top:-7%;
	float: right;
	width: 25%;
	margin-right: 2%;
	overflow:hidden;
}
ul.thumb { /*gallery*/
	border-top: solid 2px #23150c;
	position: absolute;
	margin-top: -50px;
	float: left;
	list-style: none;
	margin-right: 0px; padding: 50px;
	width: 70%;
}
ul.thumb li {
	display: inline;
	margin: 5px; padding: 0px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	border: none;
	padding: 5px;
	background:url(images-home/bg-thumb1.png) no-repeat center center;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img.hover {
	background:url(images-home/bg-thumb.png) no-repeat center center;  /* Image used as background on hover effect
	border: none; /* Get rid of border on hover */
}
a.tooltip span {
	top: 130px;
	display:none; 
	width:170px;
	text-align: center;
	left:0px;
}
a.tooltip:hover span{
	display:inline; 
	position:absolute; 
	border:1px solid #cccccc; 
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: white;
	text-shadow:2px 2px 1px #000;
}
/* services */
.services{
	margin-top:10px;
	width:100%;
	height: 800px;
	background: url(images-home/bg-services.png) repeat-x bottom right;
}
#colser{
	margin-top:1%;
	float: left;
	width: 95%;
	margin-right: 2%;
	margin-left: 2%;
	overflow:hidden;
}
#serv{
	Background:url(images-home/services.png) no-repeat;
	width:262px;
	height:260px;
	float:left;
	overflow: hidden;
}
.ser-mask{
	width: 95%;
	margin: 2%;
	border-top: 1px solid;
	border-bottom: 1px solid;
	clear: both;
	overflow: hidden;
}
.ser-mask p {
	text-align: center;
}
.ser-mask h2 {
	background: #000;
	color: #fff;
	text-shadow:none;
	font-size: 20px;
	margin-top:-4px;
	text-align: center;
}
.ser-1, .ser-2, .ser-3, .ser-4{
	width: 23%;
	margin: 1%;
	padding: 0px 0px 1em 0px;
	overflow: hidden;
	float: left;
}
.finan {
  display: inline;
  padding:0; 
  list-style-type:none; 
  overflow:hidden; 
  width:100%; 
 }
.finan li {
	background:url(images-home/finan.png)no-repeat 0 0;
    display: block;  
    overflow: hidden;   
    cursor: pointer;  
	float: left;
	width: 118px;
	height: 100%;
  }
.finan a{
	display:block;
	height:114px;
	text-indent:-9999px;
	outline:none;
}
.finan a:hover{
	background: url(images-home/finan.png)no-repeat;
}
#finan-1 {
	background-position: 0 0;
}
#finan-1 a:hover{
	background-position: -0px -114px;
}
#finan-2 {
	background-position: -118px -0px;
}
#finan-2 a:hover{
	background-position: -118px -114px;
}
#finan-3 {
	background-position: -236px -0px;
}
#finan-3 a:hover{
	background-position: -236px -114px;
}
#finan-4 {
	background-position: -351px -0px;
}
#finan-4 a:hover{
	background-position: -351px -114px;
}
/* Menu, Header, Logo, Contact */
#header {
	width: 895px;
	height: 110px;
	margin: 0 auto;
	text-align:center;
	background:url(images-home/header.png) no-repeat 0 0;
}
#menu {
 	top:0px;
	right:60px;
	position: fixed;
	background:url(images-home/menu-head.png) no-repeat 0 0;
	width:675px;
	height:86px;
}
.top { 
	bottom: 0px; 
	right: 1%;
	list-style: none;   
    margin: 0;  
	right:60px;
}
.top li {
    display: block;  
    overflow: hidden;   
    cursor: pointer;  
	float: left;
	width: 66px;
	height:112px;
	background-image:url(images-home/top.png);
	background-repeat:no-repeat;
}
.top a{
	display:block;
	height:112px;
	text-indent:-9999px;
	outline:none;
}
.top a:hover{
	background: url(images-home/top.png)no-repeat;
}
#top1 {
	background-position:0px 0px;
}
#top1 a:hover {
	background-position:-198px -0px;
}
#top2 {
	background-position:-66px 0px;
}
#top2 a:hover {
	background-position:-132px -0px;
}
.kwicks {  
 	 top:10px;
	 right:100px;
     list-style: none;  
     position: fixed;  
     margin: 0;  
     padding: 0; 
 }  
.kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
	float: left;
	width: 100px;
	height: 50px;
	margin-right: 0px;
	background-image:url(images-home/kwicks_sprite.png);
	background-repeat:no-repeat;
}
.kwicks a{
	display:block;
	height:50px;
	text-indent:-9999px;
	outline:none;
}
#kwick1 {
	background-position:0px 0px;
}
#kwick2 {
	background-position:-150px 0px;
}
#kwick3 {
	background-position:-300px 0px;
}
#kwick4 { 
	background-position:-450px 0px;
}
#kwick5 { 
	background-position:-600px 0px;
}
#kwick6 { 
	background-position:-750px 0px;
}
#kwick1.active, #kwick1:hover { 
	background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
	background-position: -150px bottom;
}
#kwick3.active, #kwick3:hover {
	background-position: -300px bottom;
}
#kwick4.active, #kwick4:hover {
	background-position: -450px bottom; 
}
#kwick5.active, #kwick5:hover {
	background-position: -600px bottom; 
}
#kwick6.active, #kwick6:hover {
	background-position: -750px bottom; 
}
#kwick1 a{
	background-image:url(#/end.jpg);
	background-repeat:no-repeat;
	background-position: left 0px;
}
#kwick1 a:hover{
	background-position: left -50px;
}
#kwick6 a{
	background-image:url(#/end.jpg);
	background-repeat:no-repeat;
	background-position: right -25px;
}
#kwick6 a:hover{
	background-position: right -75px;
}
#logo a {

	background: url(images-home/logo.png) no-repeat 0 0;
	float: left;
	width: 253px;
	height: 110px;
	margin: 0px;
}
#logo a:hover {
	background: url(images-home/logo-hover.png) no-repeat 0 0;
	float: left;
	width: 253px;
	height: 110px;
	margin: 0px;
}	
#contactFormContainer{	/*contact*/	
	top: 40px;
	position:fixed;
	left:50%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	text-align: center;
}
#contactForm{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	margin-left:20px;
	height:380px;
	width:350px;
	background: url(images-home/paper-contact.png);
	display:none;
}
#contactForm fieldset{
	margin-left:20px;
	border:none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
}      
#contactForm label{
	display:block;	
}      
#contactForm input[type=text]{
	display:block;
	border:solid 1px #4d3a24;
	width:100%;
	margin-bottom:10px;
	height:18px;
	background: none;
}  
#contactForm textarea{
	display:block;
	border:solid 1px #4d3a24;
	width:100%;
	margin-bottom:10px;
	background: none;
}  
#contactForm input[type=submit]{
	background-color:#000;
	border:solid 1px #23150c;
	color:#fff;
	padding:5px;
}                
#messageSent{
	color:#000;
	display:none;
	text-shadow:none;
	Font-size: 1.5em;
	font-family: impact;
}
#close{
	background-color:#000;
	border:solid 1px #23150c;
	color:#fff;
	padding:5px;
	text-shadow:none;
}
.contact h2 { 
	text-shadow:none;
	Text-align: center;
	margin-top:10px; 
	line-height: .77em; 
	letter-spacing: -2px; 
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 1.2em; font-weight: 100; 
}
.contact p { 
	Text-align: center;
	text-shadow:none;
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 0.8em;
	margin-left: 30px;
	margin-right: 10px;
}
/*Footer*/
.footer{ 
	margin:0px;   
	width:100%;
	height:114px;
	background: url(images-home/bg-footer.png) bottom repeat-x ;
}
.stack ul li { 
	position: relative; 
}
.stack { 
	left:3em;
	position: fixed; 
	bottom: 5px; 
	right: 40px; 
}
.stack > img { 
	position: relative; 
	cursor: pointer; 
	padding-top: 30px; 
	z-index: 2; }
.stack ul { 
	list-style: none; 
	position: absolute; 
	top: 5px; cursor: 
	pointer; 
	z-index: 1; 
}
.stack ul li { 
	position: absolute; 
}
.stack ul li img {
	border: 0; 
}
.stack ul li span {
	display: none; 
}
.stack .openStack li span { 
	font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
	display:block;
	height: 14px;
	position:absolute;
	top: 17px;
	left:60px;
	line-height: 14px;
	border: 0;
	background-color:#000;
	padding: 3px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fcfcfc;
	text-align: center;
	text-shadow: #000 1px 1px 1px;
	opacity: .85;
	filter: alpha(opacity = 85);
}
/* Stack IE Fixes */
#stacksNav { _position: absolute; }
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }