/*
Theme Name: Puskakom UI
Theme URI: http://bitcribs.com
Description: Puskakom Universitas Indonesia Theme.
Version: 1.0
Author: Goenawan Adi
Author URI: http://bitcribs.com
Tags: white, widgets, responsive
*/

* { padding:0; margin:0; }
input, textarea { -webkit-appearance:none; }
body, html { font-family:"Arial", Helvetica, sans-serif; font-weight:400; min-height:100%; line-height:1.5; overflow-x:hidden; }
.ti { font-family:"Times", Times New Roman, serif; }
.ar { font-family:"Arial", Helvetica, sans-serif; }
.reguler { font-weight:400; }
.bold, strong { font-weight:700; }
.italic, em { font-style:italic; } 
.uppercase { text-transform:uppercase; }

h1 { font-size:48px; }
h2 { font-size:42px; }
h3 { font-size:38px; }
h4 { font-size:26px; }
h5 { font-size:16px; }
h6 { font-size:14px; }
h7 { font-size:11px; }
p { font-size:12px; }
a { text-decoration:none; outline:none; }

.grey { background-color:#414042; color:#f7d519; } .grey:hover { background-color:#f7d519; color:#414042; }
.yellow { background-color:#f7d519; color:#414042; } .yellow:hover { background-color:#414042; color:#f7d519; }
.silver { background:#e6e6e6; color:#666; }

.f-olgrey { color:#414042; }

i { float:left; margin-right:20px; }
.selected { border-bottom:2px solid #f7d519; margin-top:2px;  }
blockquote, #single-content blockquote p { font-family:"Times", Times New Roman, serif; font-size:18px; font-style:italic; color:#999; margin:10px 0; float:left; }
.button { padding:10px 40px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; -o-border-radius:15px; font-size:12px; float:left; margin-right:20px; }
.download-link{ color:#000; background:#f7d519; float:left; border-radius:10px; border:none; padding:10px; margin:20px 0 10px; font-weight:bold; font-size:12px; }
.border-top { border-top:1px solid #999; }

/*--- CONTACT FORM 7 ---*/
div.wpcf7-response-output { margin: 1em 0em 1em; font-family:"Arial", Helvetica, sans-serif; font-weight:400; font-size:14px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; }
div.wpcf7-mail-sent-ok { background:#398f14; color:#fff; }
div.wpcf7-mail-sent-ng { background:#ff0000; color:#fff; }
div.wpcf7-spam-blocked { background:#ffa500; color:#fff; }
div.wpcf7-validation-errors { background:#f7e700; color:#fff; }

/*
===========================
DESKTOP LAYOUT
===========================
*/

#all-wrapper { max-width:1024px; width:100%; margin:0 auto; }
#logo { float:left; margin:30px; }

nav#head { font-family:"Times", Times New Roman, serif; }
nav#head ul li a { color:black; }

.section { width:100%; min-height:100px; float:left; }

footer { background:#eaeaea; float:left; width:100%; }
#footer-wrapper { float:left; width:100%; }
#logo-foot { float:left; margin:60px 40px; }
nav#foot { float:right; margin-right:20px; }
nav#foot ul { float:left; font-family:"Times", Times New Roman, serif; margin:50px 30px 30px; height:100px; }
nav#foot ul li { list-style:none; font-family:"Arial", Helvetica, sans-serif; font-size:12px; margin:5px 0; }
nav#foot ul li a { color:#666;}
nav#foot ul li a.btn { border:1px solid; float:left; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; height:30px; }
nav#foot ul li a.btn:hover { background:#f7d519; }
#copy-wrapper { background:#f7d519; float:left; width:100%; font-size:11px; padding:0px 0; font-family:"Times", Times New Roman, serif;  }
#copy { margin:20px; float:left; }
#back-top { float:right; margin:10px 20px; }
#back-top a { margin-top:12px; float:left; margin-right:10px; color:#000; } #back-top i a{ margin-top:5px; }

/*
---------------------------
HOME PAGE
---------------------------
*/

  /*--- TENTANG KAMI PAGE ---*/
  #feature { font-size:0; float:left; width:100%; }
  #tentang-kami { width:100%; max-width:1024px; height:657px; background:#fff url('images/bg-tentang-kami.jpg') no-repeat; }
  #tentang-kami .column-2 { width:40%; height:100%; float:left; padding:5%; }
  #tentang-kami h3 { text-align:center; padding:55px 0 20px; line-height:.5;  } #tentang-kami h3 img { width:77px; margin:0px 0; padding:0;  }
  #tentang-kami h1 { width:200px; margin-bottom:20px; line-height:1.1 }
  #tentang-kami p { color:#414042; line-height:1.8; margin-bottom:20px; }
  #tentang-kami img { margin:100px 10%; width:80%; height:auto;  }
  
  
  /*--- CATEGORY PREVIEW PAGE ---*/
  #home-cat { float:left; padding:35px 0; }
  .column-3-1 { max-width:300px; width:100%; float:left; margin:30px; border-right:1px solid #999; padding-right:30px; }
  .column-3-1 h4, .column-3-2 h4, .column-3-3 h4 { margin-bottom:20px; float:left; }
  .column-3-2 { max-width:300px; width:100%; float:left; margin:30px 30px 30px 0; border-right:1px solid #999; padding-right:30px; }
  .column-3-3 { max-width:225px; width:100%; float:left; min-height:500px; margin:30px 30px 30px 0; }
  .column-3-1 .artikel, .column-3-2 .artikel { border-bottom:1px solid #999; padding:5px 0 20px; margin-bottom:20px; float:left; width:100%; }
  .column-3-3 .artikel { height:425px;  float:left; }
  .column-3-1 .artikel .category, .column-3-2 .artikel .category { color:#666; font-size:12px; margin-bottom:10px; } 
  .column-3-1 .artikel .title, .column-3-2 .artikel .title { font-size:14px; line-height:1.5 } 
  .column-3-1 .artikel .title a, .column-3-2 .artikel .title a { color:black; }
  .column-3-1 .artikel .thumb, .column-3-2 .artikel .thumb { width:127px; height:88px; float:left; background:#ccc; margin-right:10px; }
  .column-3-1 .artikel .thumb img, .column-3-2 .artikel .thumb img { width:100%; height:auto; }
  #home-cat .more span { color:#666; font-size:12px; float:left; } #home-cat .more a { float:right; }
  
  
  /*--- HUBUNGI KAMI PAGE ---*/
  #hubungi-kami { width:100%; max-width:1024px; background:#f5f5f5; float:left; }
  #hubungi-kami .column-2 { width:40%; height:90%; float:left; padding:5%; }
  #hubungi-kami #maps img { width:100%; height:auto; }
  #hubungi-kami h3 { text-align:center; padding:40px 0; line-height:.5 } 
  #hubungi-kami h3 img { width:77px; margin:0px 0; padding:0;  }
  #hubungi-kami h4 { line-height:50px; }
  
  #hubungi-kami h6 { text-align:center; color:#999; line-height:2; margin-bottom:20px; }
  #hubungi-kami h6 span { color:#666; }
  #hubungi-kami h5, #hubungi-kami p { margin-bottom:10px; }
  #hubungi-kami .address { padding:25px 0; border-top:1px solid #999; color:#666;}
  #hubungi-kami form { float:left; margin-bottom:30px; width:100%; }
  #hubungi-kami input.small { max-width:201px; width:100%; }
  #hubungi-kami input {width:100%; text-indent:10px;}
  #hubungi-kami input[type=text], 
  #hubungi-kami input[type=email] { border:1px solid #999; border-radius:15px; padding:10px 0; margin-bottom:10px;  }
  #hubungi-kami textarea { border:1px solid #999; border-radius:15px; padding:10px 0; width:100%; height:100px; resize:none; font-family:"Arial", Helvetica, sans-serif; font-size:11px; text-indent:10px; font-weight:400; }
  #hubungi-kami input[type=submit] { background:#f7d519; border-radius:10px; border:none; padding:10px; margin:10px 0; font-weight:bold; width:120px; text-indent:0; }

/*
---------------------------
CATEGORY PAGE
---------------------------
*/

#cat-header { text-align:center; padding:40px 0 30px; }
#cat-header h2{ margin:50px 0; line-height:.5; }
#cat-header p { max-width:725px; width:100%; margin:0 auto; color:#999; margin-bottom:35px; }
#cat-header h6 { color:#666; margin-bottom:15px; }

#cat-wrapper { float:left; max-width:944px; width:100%; padding:40px; }
.cat-preview { width:100%; float:left; line-height:1.5; margin-bottom:40px; }
.cat-preview .thumb { float:left; max-width:459px; width:100%; height:318px; margin-right:40px; background:#e6e6e6; } .cat-preview .thumb img { width:100%; height:auto; }
.cat-preview .detail { border-bottom:1px solid #999; float:left; max-width:440px; width:100%; height:318px;  }
.cat-preview .category i { margin-top:-10px; }
.cat-preview .category { font-size:12px; margin-bottom:10px; color:#666; float:left; width:100%; margin-top:10px; }
.cat-preview h3 { font-size:26px; float:left; }
.cat-preview p { color:#666; margin:10px 0 20px; float:left; }
.cat-preview .button { padding:5px 20px; border-radius:15px; font-size:12px; float:left; margin-right:20px; }
.cat-preview .share { font-size:11px; float:right; color:#666; margin-top:7px; }
.cat-preview ul { float:right; margin-left:15px; margin-top:-5px; }
.cat-preview ul li { list-style:none; display:inline-block; margin:0 5px; }
#cat-wrapper #show-more { text-align:center; margin:20px 0}
#cat-wrapper #show-more a { font-size:12px; color:#999; border:1px solid; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -o-border-radius:20px; padding:10px 25px; }
#cat-wrapper #show-more a:hover { background:#000; color:#fff; border:1px solid #000; }


/*
---------------------------
SINGLE PAGE
---------------------------
*/

#single-header { max-width:1024px; height:450px; background:#e6e6e6; }
#single-header img { width:100%; height:auto; }
#single-wrapper { float:left; max-width:944px; width:100%; padding:40px; }
#sidebar { width:275px; min-height:500px; float:left; margin-right:60px; }

.sidebar-category { margin-bottom:40px; float:left; }
.sidebar-category-header { font-size:28px; padding-bottom:20px; margin-bottom:3px; line-height:.5; float:left; } 
.sidebar-category ul { list-style:none; float:left; width:190px; margin-bottom:40px;  }
.sidebar-category ul li:first-child { border-top:1px solid #999;}
.sidebar-category ul li { padding:20px 0; border-bottom:1px solid #999;}
.sidebar-category ul li a { color:#666; } 

.sidebar-preview { float:left; border-bottom:1px solid #999; padding:20px 0 10px; width:100%; max-width:275px; }
.sidebar-preview .thumb { background:#e6e6e6; width:95px; height:66px; float:left; margin-right:10px; }
.sidebar-preview .thumb img { width:100%; height:auto; }
.sidebar-preview .date { color:#666; font-size:12px; } .sidebar-preview .title { font-size:12px; float:left; width:165px; } .sidebar-preview .title a { color:#000; } 

.tinynav { display: none; }
#side, #jk { display: block; } 

#single-content { max-width:600px; width:100%; float:left; border-bottom:1px solid #999; padding-bottom:40px; margin-bottom:40px; } 
#single-content p img { width:100%; height:auto; }
#single-content p a { color:#000; text-decoration:underline; }
#single-content .category { font-size:12px; margin-bottom:10px; color:#666; float:left; width:100%; margin-top:10px; } #single-content .category i { margin-top:-10px;  }
#single-content h3 { font-size:26px; float:left; border-bottom:1px solid #999; padding-bottom:20px; margin-bottom:20px; width:100%; }
#single-content p { color:#414042; margin:10px 0 0px; float:left; font-size:12px; }
#single-content p::first-child:first-letter { display: block; float: left; font-size: 60px; margin: 5px 10px 0 0;border:1px solid; font-family:"Times", Times New Roman, serif;  }

#single-content .share { font-size:11px; float:right; color:#666; margin-top:20px; }
#single-content ul { float:right; margin-left:15px; }
#single-content ul li { list-style:none; display:inline-block; margin:0 5px; } #single-content ul li img { margin-top:-5px; }
.meta-post { font-size:11px; color:#999; float:left; margin-top:20px; clear:both; }
.meta-post a { color:#666; }


/*
---------------------------
PAGES PAGE
---------------------------
*/

#page-header { text-align:center; padding:40px 0 30px; }
#page-header h2{ margin:50px 0; line-height:.5; }
#page-header h4 { max-width:600px; width:100%; margin:0 auto; color:#999; margin-bottom:35px; }
#page-header h6 { color:#666; margin-bottom:15px; }

#page-wrapper.registrasi { background:#fff url('images/bg-registrasi.png') no-repeat; width:100%; max-width:1024px; height:517px; }
#page-wrapper.registrasi .column-2 { width:40%; float:left; padding:3% 5%; }
#page-wrapper.registrasi h3 { margin-left:-65px; }
#page-wrapper.registrasi .column-2 .registrasi-excerpt { color:#666; font-size:12px; margin-top:10px; }
#page-wrapper.registrasi h7 { color:#999; }
#page-wrapper.registrasi h7 a { color:#414042; }
#page-wrapper.registrasi form { float:left; margin:30px 0 20px; width:100%; }
#page-wrapper.registrasi form p { color:#666; }
#page-wrapper.registrasi form h7 { margin-bottom:5px; float:left; }
  #page-wrapper.registrasi input.small { max-width:194px; width:100%;  margin-right:7px; }
  #page-wrapper.registrasi input {width:100%; text-indent:10px;}
  #page-wrapper.registrasi input[type=text], 
  #page-wrapper.registrasi input[type=email],
  #page-wrapper.registrasi input[type=file] { border:1px solid #999; border-radius:15px; padding:10px 0; margin-bottom:10px;  }
  #page-wrapper.registrasi input[type=submit] { background:#f7d519; border-radius:10px; border:none; padding:10px; margin:10px 0; font-weight:bold; width:120px; text-indent:0; }

#page-wrapper.tentang-kami .column-2 { max-width:410px; width:50%; float:left; padding:30px 50px;  }
#page-wrapper.tentang-kami .column-2 em, #page-wrapper.tentang-kami .column-2 ul { font-size:14px; color:#999; font-style:italic; }
#page-wrapper.tentang-kami .column-2 li { margin-bottom:20px; }
#page-wrapper .column-0 { padding:60px 10%; text-align:center; }
#page-wrapper .column-0 p { color:#999; font-size:16px; line-height:2; }
#page-wrapper .column-1 { padding:60px 10%; text-align:center; }
#page-wrapper .column-1 h2, #page-wrapper .column-1 h3 { line-height:.5; margin-bottom:50px; text-align:center; } 
#page-wrapper .column-1 em { font-size:16px; line-height:2; color:#999; }
#peneliti-wrapper { border-bottom:1px solid #e6e6e6; padding:0 30px; text-align:center; }
.peneliti { width:194px; /*height:323px;*/ height:280px; display:inline-block; margin:0 21px; text-align:center; }
.peneliti img { margin:50px 0 10px;}
.peneliti h6 { color:#fbb03b; font-size:13px; }
.peneliti h7 { color:#666; }

.klien-wrapper, .penelitian-kegiatan-wrapper { width:100%; max-width:1024px; }
.klien { width:25%;  float:left; font-size:12px; }
.penelitian-kegiatan { width:29%; margin:0 2%;  float:left; font-size:12px; line-height:1.5 }
.penelitian-kegiatan h5 { color:#000; margin-bottom:10px; } .penelitian-kegiatan ul { margin-bottom:30px; padding-bottom:25px; } .penelitian-kegiatan li, .klien li { margin-bottom:5px; margin-left:11px; line-height:1.5; }

.peneliti-desc { display:none; }
/*

.tooltip {
	display: inline;
	position: relative;
	z-index: 999;
}


.tooltip::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 100%;
	left: 50%;
	pointer-events: none;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tooltip:hover::after {
	pointer-events: auto;
}



.tooltip-content {
	position: absolute;
	z-index: 9999;
	width: 500px;
	left: 50%;
	bottom: 100%;
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
	font-weight: 400;
	color: #666;
	background: transparent;
	opacity: 0;
	margin: 0 0 155px -250px;
	cursor: default;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.tooltip:hover .tooltip-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.tooltip-content span {
	display: block;
}

.tooltip-text {
	border-bottom: 10px solid #f7d519;
	overflow: hidden;
	-webkit-transform: scale3d(0,1,1);
	transform: scale3d(0,1,1);
	-webkit-transition: -webkit-transform 0.3s 0.3s;
	transition: transform 0.3s 0.3s;
}

.tooltip:hover .tooltip-text {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.tooltip-inner {
	background: rgba(255,255,255,0.95);
	padding: 40px;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	border:1px solid #f7d519;
}

.tooltip:hover .tooltip-inner {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}



.tooltip-content::after {
	content: '';
	bottom: -20px;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #f7d519;
	border-width: 10px;
	margin-left: -10px;
}
*/
a.tooltip {outline:none; } 
a.tooltip strong {line-height:1.5;} 
a.tooltip:hover {text-decoration:none;} 
a.tooltip span { z-index:10; display:none; padding:14px 20px; margin-top:40px; margin-left:-250px; width:400px; font-size: 12px;
	line-height: 1.5;
	text-align: left;
	font-weight: 400; border:1px solid #f7d519;  } 
a.tooltip:hover span{ display:inline; position:absolute; color:#666; background:#fff url(http://puskakomui.or.id/wp-content/themes/puskakomui/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0; border-top:10px solid #f7d519; } 
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} /*CSS3 extras*/ 
a.tooltip span { border-radius:2px; /*box-shadow: 0px 0px 8px 4px #eee; /*opacity: 0.8;*/ }
a.tooltip:hover span::after {
	content: '';
	top: -30px;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-bottom-color: #f7d519;
	border-width: 10px;
	margin-left: -10px;
}


/*
===========================
TABLET LAYOUT
===========================
*/

@media screen and (min-width:769px) and (max-width:1023px) {

#tentang-kami { }
#tentang-kami h1 { width:100%; }
#tentang-kami img { margin:10px 30%; width:40%; height:auto;  }
#tentang-kami .column-2 { width:90%; height:20%; float:left; padding:5%; } 
  
.column-3-1 { max-width:322px; }
.column-3-2 { max-width:322px; margin:30px 30px 0 0; border-right:0px solid #999; padding-right:0px; }
.column-3-3 { display:none;  }
  
.tinynav { display: block; }
#side, #jk { display: none; } 
#sidebar { min-height: 200px; }
nav#foot { float:left; margin-left:60px; }
nav#foot ul { margin:0px 30px 50px 30px; }

}

/*
===========================
SMARTPHONE LAYOUT
===========================
*/

@media screen and (min-width:320px) and (max-width:768px) {
#logo { margin:30px 15px; }
#logo img { width:210px; height:auto; }

#tentang-kami { height:740px; }
#tentang-kami .column-2 { width:90%; max-width:700px; height:250px; float:none; padding:0 5%; margin:0 auto; }
#tentang-kami h1 { width:100%; margin-bottom:10px; line-height:1.1; font-size:22px; }
#tentang-kami img { margin:30px 25%; width:50%; height:auto; text-align:center;  }
#tentang-kami .button { padding:10px 0px; text-align:center; width:100%; max-width:768px; margin-bottom:10px; }  

.column-3-1, .column-3-2 { max-width:300px; width:100%; float:left; margin:30px 10px; border-right:0px solid #999; padding-right:0px; }
.column-3-3 { max-width:225px; width:100%; float:left; min-height:500px; margin:30px 10px; }
  
#hubungi-kami { width:100%; max-width:1024px; background:#f5f5f5; float:left; }
#hubungi-kami .column-2 { max-width:768px; width:90%; margin-top:30px; float:none; padding:0 10px;  }
#hubungi-kami input.small { max-width:312px; width:100%; } 

#cat-wrapper { float:none; max-width:300px; width:100%; padding:40px 10px; margin:0 auto; }
.cat-preview .detail { max-width:300px; height:100%; margin-top:20px;  } 
.cat-preview .share span { display:none; }.cat-preview .share { float:right; } .cat-preview ul { margin-left:0px; }
.cat-preview .more { float:left; width:180px; margin-bottom:20px; }
.cat-preview .thumb {
    height: 208px;
}
#page-wrapper .column-1 h2, #page-wrapper .column-1 h3 {
    line-height: 1;
}

.tinynav { display: block }
#sidebar { min-height: 200px; }
#side, #jk { display: none } 
#single-wrapper { padding:40px 0; }
#single-content { max-width:738px; width:100%; margin:40px 15px; } 
  
#logo-foot { float:left; margin:30px 15px 0; }  
#logo-foot img { width:210px; height:auto; }
a.tooltip span { z-index:10; display:none; padding:14px 20px; margin-top:40px; margin-left:-190px; width:260px; font-size: 12px;
	line-height: 1.5;
	text-align: left;
	font-weight: 400; border:1px solid #f7d519;  } 
	
}