/*
	Name: PT. SINSPECINDO PIRANTI
	Date: July 2013
	Description: PT. SINSPECINDO PIRANTI - Company Profile.
	Version: 1.0
	Author: Bung Momo
	Autor URI: http://encobyte.com
*/
 
/* Imports */
@import url("reset.css");
/* Body */
@charset "UTF-8";
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}
/* ----------------- Reset all styles ----------------- */
*{
	margin:0;
	padding:0;
	border:0;
}
/* ----------------- Website background and general text colour ----------------- */
/*html { 
  background: url(../img/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/
html {
    background: #0b2641; /* Old browsers */
    background: -moz-linear-gradient(top,  #0b2641 0%, #010203 81%, #010203 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0b2641), color-stop(81%,#010203), color-stop(100%,#010203)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #0b2641 0%,#010203 81%,#010203 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #0b2641 0%,#010203 81%,#010203 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #0b2641 0%,#010203 81%,#010203 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #0b2641 0%,#010203 81%,#010203 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b2641', endColorstr='#010203',GradientType=0 ); /* IE6-9 */

}
html, body{
    height: 100%;
}
body {font-family: MyriadPro-Regular, Arial, Helvetica, sans-serif;margin: 0;padding: 0;}
@font-face {
    font-family: 'genevaregular';
    src: url('geneva-webfont.eot');
    src: url('geneva-webfont.eot?#iefix') format('embedded-opentype'),
         url('geneva-webfont.woff') format('woff'),
         url('geneva-webfont.ttf') format('truetype'),
         url('geneva-webfont.svg#genevaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face { font-family: MyriadPro-Regular; font-weight: normal;font-style: normal; src: url('MyriadPro-Regular.otf'); }
@font-face { font-family: MyriadPro-Semibold; font-weight: normal;font-style: normal; src: url('MyriadPro-Semibold.otf'); }
@font-face { font-family: MyriadPro-Cond; font-weight: normal;font-style: normal; src: url('MyriadPro-Cond.otf'); }
img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
body#home {
  background: url(../img/bg.jpg) no-repeat center 55px; 
  width: 100%;
}
a {text-decoration: none;outline: none;cursor: pointer;}
#wrapper {
    /*margin: -300px auto 0 -500px;
    width: 1000px;
    position: absolute;top: 50%;left: 50%;
    box-shadow:0 2px 10px #000000;-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;*/
    width: auto;
}
#header {
    background: #194b6d; /* Old browsers */
    background: -moz-linear-gradient(top,  #194b6d 0%, #0a3f63 50%, #194b6d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#194b6d), color-stop(50%,#0a3f63), color-stop(100%,#194b6d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #194b6d 0%,#0a3f63 50%,#194b6d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #194b6d 0%,#0a3f63 50%,#194b6d 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #194b6d 0%,#0a3f63 50%,#194b6d 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #194b6d 0%,#0a3f63 50%,#194b6d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#194b6d', endColorstr='#194b6d',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow: 0px 2px 5px rgba(50, 50, 50, 0.34);
    -moz-box-shadow:    0px 2px 5px rgba(50, 50, 50, 0.34);
    box-shadow:         0px 2px 5px rgba(50, 50, 50, 0.34);
    position: relative;
    z-index: 999;
    height: 55px;}
#header .logo {float: none;padding: 8px 0 0 20px;}
#header .search {float: right;margin-right: 84px;margin-top: 62px;width: 155px;}
.search .field-search {border: none;width: 104px;height: 13px;background: url(../img/field-search.png) no-repeat;padding: 5px 10px;font-size: 10px;color: #747475;float: left;}
.search .submit-search {border: none;background: url(../img/btn-search.png) no-repeat;width: 31px;height: 23px;cursor: pointer;outline: none;}
#header .topmenu {
    position: absolute;
    right: 15px;
    top: 34px;
    z-index: 1;
}
#header .topmenu a {font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;font-size: 10px;display: inline-block;margin: 0 5px;color: #d2d3d4;text-transform: capitalize;}
#header .quicklink {
    font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #b0b0b0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#b0b0b0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#b0b0b0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#b0b0b0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#b0b0b0 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#b0b0b0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b0b0b0',GradientType=0 ); /* IE6-9 */
    width: 85px;
    position: absolute;
    left: 50%;
    margin-left: -43px;
    top: -15px;
    text-align: center;
    font-size: 10px;
    color: #012440;
    text-transform: uppercase;
    padding: 5px 0 3px;
    display: block;
    z-index: 999;
}
/*Nav*/
#nav {margin: 0 auto;position: relative;z-index: 99;text-align: center;}
/* Nav-Project */
#nav-project {width: 90%;margin: 115px auto 0;}
#nav-project ul {list-style: none;}

#nav-project ul li {
    padding: 10px 15px;
    font-family: 'MyriadPro-Cond', Arial, Helvetica;
    font-size: 15px;
    text-transform: capitalize;
    background: #183448; /* Old browsers */
    background: -moz-linear-gradient(top,  #183448 0%, #031d2e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#183448), color-stop(100%,#031d2e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #183448 0%,#031d2e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #183448 0%,#031d2e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #183448 0%,#031d2e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #183448 0%,#031d2e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#183448', endColorstr='#031d2e',GradientType=0 ); /* IE6-9 */

}
#nav-project ul li:first-child {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#nav-project ul li a {color: #d2d3d4;}
#nav-project ul li a:hover {color: #fff;}
/* Content */
#container {/*background: url(../img/bg-content.jpg) repeat-x top center #dedede;*/ background-color: #fff;}
.wrap-about {width: 770px;margin: 0 auto;}
#sidebar {float: none;width: 255px;padding: 10px 0 20px;margin: 0 auto;}
#sidebar h1 {font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;font-weight: normal; font-size: 21px;padding: 10px 0 5px;margin-bottom: 5px;background-color: #0087e5;text-align: center;text-transform: uppercase;}
#sidebar .box-featured {text-align: center;}
#sidebar ul#our-menu {list-style: none;margin:0 auto;text-align: center;}
#our-menu li {border-bottom: 1px solid #b7252b;padding: 4px 0 0;}
#our-menu li a {font-family: 'MyriadPro-Cond', Arial, Helvetica, sans-serif;font-size: 21px;color: #0f1418;line-height: normal;text-transform: uppercase;text-decoration: none;vertical-align: middle;}
.main-content {float: none;width: 85%;font-family: 'Arial', Helvetica, sans-serif;font-size: 12px;line-height: normal;color: #252f34;padding: 20px;}
.main-content h3 {font-family: 'kartikab', Arial, Helvetica, sans-serif;font-size: 18px;margin-bottom: 10px;font-weight: normal;color: #3799c8;line-height: normal;text-transform: capitalize;}
.main-content h4 {font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;font-size: 14px;font-weight: normal; text-transform: uppercase;color: #0f1418;background-color: #b7dff4;padding: 5px 10px;margin-bottom: 20px;}
.main-content p {margin: 1em 0;}
.main-content ul.galleries {list-style: none;padding: 0;margin: 0 auto 10px;}
.main-content ul.galleries li {margin-bottom: 10px;margin-right: 5px;display: inline-block;}
.main-content ul.galleries li a {display:block}
.main-content ul {list-style: square;padding-left: 15px;margin-bottom: 10px;}
.main-content ul li {margin-bottom: 10px;}
#slideshow {height: auto;position: relative;z-index: 1;background: url(../img/banner-home.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
#slideshow .content {margin: 0 auto;height: auto;padding: 20px 0;background: url(../img/trans.png) repeat top center;}
#our-product {height: auto;position: relative;z-index: 1;background-color: #d2d3d4;}
#our-product .content {margin: 0 auto;height: auto;padding: 10px 0;overflow: hidden;text-align: center;}
#our-product .xclose {background: url(../img/close.png) no-repeat;width: 16px;height: 17px;position: absolute;top: 15px;right: 15px;z-index: 99;display: block;}
#our-product .sidebar-product {float: none;margin: 5px auto;}
#our-product #nav-project {margin: 10px auto !important;}
.sidebar-product ul#product-menu {list-style: none;margin:10px auto;text-align: left;}
#product-menu li {border-bottom: 1px solid #009ffb;padding: 0 0 2px 16px;background: url(../img/thumb-product-1.png) no-repeat left center;}
#product-menu li a {font-family: 'LaoUI', Arial, Helvetica, sans-serif;font-size: 15px;color: #fff;line-height: normal;text-transform: uppercase;text-decoration: none;vertical-align: middle;text-align: left;cursor: pointer;}
#product-menu li a:hover, #product-menu li a.active {color: #009efa;}
#product-menu li:hover {background: url(../img/thumb-product-2.png) no-repeat left center;}


#our-product .content-product {width: auto;float: none;margin: 10px auto;}
#our-product .product-image {text-align: center;margin: /*10px*/ 0 auto 10px;}
.content-product h3 {font-family: 'kartikab', Arial, Helvetica, sans-serif;font-size: 20px;margin-bottom: 10px;font-weight: normal;color: #3799c8;line-height: normal;}
h1 {
    font-family: 'genevaregular', Arial, Helvetica, sans-serif;    
    font-size: 21px;
    text-transform: uppercase;
    color: #fff;
    line-height: normal;
}
h2 {
    font-family: 'MyriadPro-Cond', Arial, Helvetica, sans-serif;  
    color: #2e87bd;  
    font-size: 20px;
    text-transform: uppercase;
    line-height: normal;
    text-align: left !important;
    font-weight: normal !important;
    margin-bottom: 10px;
}
h3 {
    font-family: 'MyriadPro-Cond', Arial, Helvetica, sans-serif;  
    color: #2e87bd;  
    font-size: 16px;
    text-transform: uppercase;
    line-height: normal;
    text-align: left !important;
    font-weight: normal !important;
    margin-bottom: 10px;
}
.content-text {padding: 10px 20px 0;}
img {/*display: block;*/margin: 0;padding: 0;overflow: hidden;}
#tab-contents3 {overflow: auto;height: 329px;}
.content-text p, .content-product p {
    font-family: 'My'riad Pro, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: normal;
    text-align: left;
    color: #1c5e7e;
    margin: 0.5em 0;
}
.content-product ul, .content-text ul {list-style: square;padding-left: 15px;}
.content-product ol, .content-text ol {list-style: decimal;padding-left: 15px;}
.content-product ul li, .content-product ol li, .content-text ul li, .content-text ol li {
    font-family: 'My'riad Pro, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: normal;
    text-align: left;
    color: #1c5e7e;
    margin: 10px 0;
}
/* Client */
.clients {/*text-align: center;*/}
.clients .client-listed {margin: 5px auto;display: inline-block;text-align: left;}
.clients span {width: 138px;display: inline-block;margin: 0;padding: 0;}
.clients div:last-child.client-listed {text-align: right;}
/* Partner */
.partners {}
.partners .partner-listed {margin: 10px auto;display: inline-block;text-align: center;}
.partners span {width: 140px;display: inline-block;margin: 0;padding: 0;}
.partners span img {width: 140px;}
.partners div:last-child.client-listed {text-align: right;}
/* Contact */
.contactus { margin: 25px auto;text-align: left;padding: 0 25px;}
.contactus p {/*font-family: 'kartikab', Arial, Helvetica, sans-serif;*/ line-height: normal;font-size: 12px;color: #1c5e7e;}
.contactus a {color: #1c5e7e;text-decoration: none;}
.contactus h1 {font-family: 'MyriadPro-Cond', Arial, Helvetica, sans-serif;    
    font-size: 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #2e87bd;margin-bottom: 10px;}
.contactus span {color: #1c5e7e;}
/* Featured */
#featured {height: auto;padding: 10px 0 5px;text-align: center;}
.wrap-featured {width: 90%;margin: 0 auto !important;}
.boxgrid{ 
    width: 48px;
    text-align: center; 
    height: 42px; 
    margin:0 2px 4px; 
    display: inline-block;
    overflow: hidden; 
    position: relative; 
}
.boxgrid img{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
}
.boxcaption{ 
    float: none; 
    position: absolute; 
    background: #000; 
    height: 12px; 
    width: 48px; 
    opacity: .8; 
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
     .captionfull .boxcaption {
     	top: 30px;
     	left: 0;
     }
.boxcaption a {font-family: 'Myriad Pro', Arial, sans-serif;color: #fff;font-size: 5.5px;text-transform: uppercase;text-decoration: none;padding: 4px 5px 2px;display: block;text-align: center;}
.clear {clear: both;}
#footer {text-align: center;width: 80%;margin: 0 auto;color: #2e84af;font-size: 10px;padding-bottom: 10px;}
#footer span, #footer a {
    font-size: 10px;
    color: #2e84af;
    text-align: center;   
    float: none;
    text-decoration: none;
    line-height: normal;
}