/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/

/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	/*font-size:100%;*/
	font-family:inherit;
	vertical-align:baseline;
}
#mainPreface p{margin: 5px}
#mainPreface ul{margin-left: 35px}
body {
	line-height:1;
	color:black;
	background:white;
}
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:"";
}
blockquote, q {
	quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
        font:90% "Trebuchet MS", sans-serif;
	color:#333;
	background: url(../images/background.png);
}

a, a:visited {
	color:blue;
	text-decoration:none;
}
a:hover, a:active {
	color:#000;
	text-decoration:none;
}

.slider-wrapper { 
	/*width: 97%;*/
	width: auto;
	margin: 4px auto 4px auto;
        background: #fff;
        padding: 10px;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

#container{width: 78%;margin:70px auto 0 auto;}

.containerMenu{
    position: absolute;left: 50%;right: 50%;margin:10px -39%;
    text-align: center;
    z-index: 100000;white-space: nowrap;width: 78%;padding: 0;
}
.menufix{
    position: fixed;left: 50%;right: 50%;margin:5px -39%;top: 0;
    text-align: center;
    z-index: 100000;white-space: nowrap;width: 78%;padding: 0;}

.menu{display: inline-block;cursor: pointer;width: 13.95%;margin: 0;height: 50px;font-size: 1em;color: #fff;vertical-align: middle;line-height: 50px; }
.animateMenu{-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.menu img{width: 100%;height: 100%}
#mHome{background-color: #3EC7F3;color: #fff}
#mHome:hover{background-color: #fff;color: #3EC7F3}
#mProduct{background:#455962}
#mProduct:hover{background-color: #fff;color:#455962}
#mCorporate{background: #8BBA30;}
#mCorporate:hover{background-color: #fff;color: #8BBA30;}
#mCustomer{background-color: #F0514A}
#mCustomer:hover{background-color: #fff;color: #F0514A}
#mDemo{background:#385E82;}
#mDemo:hover{background-color: #fff;color:#385E82;}
#mDownload{background-color:#FCC120;}
#mDownload:hover{background-color: #fff;color:#FCC120;}
#mContact{background-color: #56D9C9}
#mContact:hover{background-color: #fff;color: #56D9C9}

.preface{border: 0px solid;padding: 10px 10px 35px 10px;height: auto;margin: 0px auto 0px auto;background-color: #fff;text-align: justify;z-index: -1000;min-height: 500px}
.preface >*{margin: 0 30px 0 30px}
#imgPreface{border: 0px solid;width: 80px;height: 190px;float: left;margin: 2px 20px 2px 2px}

#readMore{float: right;text-align: center;cursor: pointer;width: 138px;height: 28;background-color: #666666;color: #fff;border: 1px solid;padding: 3px;display: inline}
#readMore:hover{color: #666666;background-color: #fff}

#containFeature{width: 85%;margin: 25px auto 0 auto;border: 0px solid;text-align: justify;padding: 0 10px;clear: both}
.feature{width: 42.5%;border: 1px solid #999999;background-color: #fff;padding: 10px;margin: 0 10px 10px 10px;text-align: left;display: inline-table;height:130px;position: relative;}

.feature p{color:#666666}

.feature:before, .feature:after {z-index: -1;position: absolute;content: "";bottom: 15px;left: 10px;width: 50%;top: 80%;max-width:300px;background: #777;
-webkit-box-shadow: 0 15px 10px #777;-moz-box-shadow: 0 15px 10px #777;box-shadow: 0 15px 10px #777;-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);transform: rotate(-3deg);
}
.feature:after {-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);transform: rotate(3deg);right: 10px;left: auto;
}

/*Icomon*/
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-cwuuda');
	src:url('fonts/icomoon.eot?#iefix-cwuuda') format('embedded-opentype'),
		url('fonts/icomoon.woff?-cwuuda') format('woff'),
		url('fonts/icomoon.ttf?-cwuuda') format('truetype'),
		url('fonts/icomoon.svg?-cwuuda#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
[data-icon]:before {
  font-family: 'icomoon';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	 /*Better Font Rendering ===========*/ 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {content: "\e600"}
.icon-product:before{content: "\e603"}
.icon-corporate:before{content: "\e602"}
.icon-customer:before{content: "\e609"}
.icon-demo:before{content: "\e606"}
.icon-download:before{content: "\e60a"}
.icon-contact:before{content: "\e607"}

.judul {font-size: 24px;font-weight: bold;}
.boxtitle {color: #FF6600;font-weight: bold;}

/*input[type="text"],textarea,input[type="email"],input[type="number"],input[type="url"]{border: 1px solid #999999}*/
input,textarea,select{border: 1px solid #999999;margin: 5px;padding: 2px;font: "Trebuchet MS", sans-serif;}
input[type="submit"],input[type="reset"]{cursor: pointer;width: 100px;padding: 5px;color: #fff;background:#385E82;border-color: #385E82;}
input[type="submit"]:hover,input[type="reset"]:hover{color: #385E82;background-color: #fff;border: 1px solid #999999}
::-webkit-input-placeholder { font-style: italic }
::-moz-placeholder { font-style: italic } /* firefox 19+ */
:-ms-input-placeholder { font-style: italic } /* ie */
input:-moz-placeholder {font-style: italic }
.required{color: red}

/*Loading Content Tab Animation*/
#loadingmsg{
    font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center;
    margin-top: 150px;
    font-size: 10px;
    color: #333;
    display: none;
}
.prosesmsg{
    position: absolute;
    left:40%;
    font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-align: center;
    margin: 150px auto;
    width: 150px;
    font-size: 10px;
    color: #333;
}
.loadtext{
    display: block;
    margin: 0 auto;
    font-style: italic
}
#loadingmsg span {
    display: block;
    margin: 0 auto;
}

#loadingmsg span[class*="l-"] {
    display: inline-block;
    background: #000;
    width: 5px;
    height: 5px;
	
    -webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	
    margin: 12px 2px;
    position: relative;
	
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
    -moz-animation: loader 4s infinite;
    -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -moz-animation-fill-mode: both;
    -ms-animation: loader 4s infinite;
    -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -ms-animation-fill-mode: both;
    animation: loader 4s infinite;
    animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    animation-fill-mode: both;
}

#loadingmsg span.l-1 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; }
#loadingmsg span.l-2 { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -ms-animation-delay: 0.8s; animation-delay: 0.8s; }
#loadingmsg span.l-3 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; animation-delay: 0.6s; }
#loadingmsg span.l-4 { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s; }
#loadingmsg span.l-5 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -ms-animation-delay: 0.2s; animation-delay: 0.2s; }
#loadingmsg span.l-6 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; }

@-webkit-keyframes loader {
    0% { -webkit-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -webkit-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes loader {
    0% { -moz-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -moz-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes loader {
    0% { -ms-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -ms-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes loader {
    0% { transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}