/* Kill Defaults */
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,b,u,i,center,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-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

ul {
	list-style: none;
}

img	{
	border: 0;
}

a {
	outline: none;
}


/* Layout
============================================================ */ 

body	{
	color: #484848;
	font:normal 12px/20px "Lucida Grande","Lucida Sans Unicode", Arial, sans-serif;
	color:#666;
	background: #313840 url('images/body_kreasys.png') repeat-x;
}

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a{	
	color: #4b8099;
	font-family: "Trebuchet MS", "Lucida Grande","Lucida Sans unicode";
	font-weight: bold;
	line-height: 1.05;
}
	h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{
		color: #325666;	
	}
h1, h1 a{	
	font-size: 32px;
}
h2, h2 a{	font-size: 28px; margin: 14px 0;	}
h3, h3 a{	font-size: 25px; margin: 13px 0;	color: #336666;	}
h4, h4 a{	font-size: 23px; margin: 12px 0;	}
h5, h5 a{	font-size: 20px; margin: 11px 0;	}
h6, h6 a{	font-size: 18px; margin: 10x 0;	}
 
p {
	margin-bottom: 20px;
	margin-top: 0;
	margin-right: 0;
}

b, strong {
	color: #191919;
}

a:link, a:visited {
	color: #007dd0;
	text-decoration: none;
}

a:hover, a:visited:hover {
	color: #75a10d;
	outline: none;
	text-decoration: none;
}


img {
	border: none;
}

.image-left {
	float: left;
	margin: 5px 15px 5px 0;
}

.image-right {
	float: right;
	margin: 5px 0 5px 15px;
}
	
/* @end */

/* @Form*/
input,textarea,select{border:1px solid #adb8c1;padding:7px 10px;color:#707070;display:block;height:30px;width:320px;margin:3px 0 1px 0;font-family:Arial}
input:focus,textarea:focus,select:focus{color:#000000;outline:solid 3px #76cbea}
input,select{background:url('images/input.gif') repeat-x left top}
textarea{height:120px;background:#f3f6f7 url('images/textarea.gif') repeat-x left top}
#submit{position:relative;background:transparent url('images/kirim.gif') no-repeat scroll 0 0;border:0 none;cursor:pointer;display:block;height:32px;width:117px}
#submit:hover{background:url('images/kirim.gif') no-repeat 0 -64px}
#submit:focus{outline:none}
/* @group Misc */

h2.circle-one,
h2.circle-two,
h2.circle-three,
h2.circle-four {
	font-size: 18px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	color: #006666;
	font-weight: 500;
	text-decoration: none;
	width: auto;
	padding: 2px 0 2px 35px;
	height: 27px;
	background-image: url('images/num_circle.png');
	background-repeat: no-repeat;
	background-position: left top;
	line-height: normal;
}

h2.circle-one {
	background-position: left 0px;
}

h2.circle-two {
	background-position: left -60px;
}

h2.circle-three {
	background-position: left -120px;
}

h2.circle-four{
	background-position: left -180px;
}

p.extra-info {
	clear: both;
	margin: 0;
	padding: 0;
	color: #b3b3b3;
}

/* @end */

/* @group Global Classes */
table {
	font-size: 1em;
}

.bqstart {
	font-family: "ArialRoundedMTBold", "Arial Rounded MT Bold", Arial, Helvetica, Verdana, sans-serif;
	float: left;
	height: 65px;
	margin-top: -40px;
	padding-top: 45px;
	margin-bottom: -50px;
	margin-right: 5px;
	font-size: 300%;
	color: #ccced0;
	font-style: normal;
}

.bqend {
	float: right;
	height: 25px;
	margin-top: 0px;
	padding-top: 15px;
	font-size: 300%;
	color: #ccced0;
	font-family: "ArialRoundedMTBold", "Arial Rounded MT Bold", Arial, Helvetica, Verdana, sans-serif;
	font-style: normal;
}

blockquote {
	font-family: Georgia, Verdana, sans-serif;
	margin: auto;
	padding-left: 10px;
	padding-top: 10px;
	width: 600px;
	height: 80px;
	font-size: 1em;
	font-style: italic;
	text-align: center;
	color: #444444;
	background: url('images/quote.png') no-repeat top;
}

/* small text */
.small {
	font-size: 0.87em;
	color: #7e7e7e;
}

.small strong {
	color: #4f4f4f;
}

.hidden {
	display: none;
}

/* @group Code high-light */
acronym {
	font-family: Courier, "Courier New", mono;
}

acronym:hover {
	cursor: help;
}

code {
	margin: 0 0 20px;
	padding: 1px 3px;
	background: url(lined_co.png) repeat;
	display: block;
	font: 11px/19px Courier, "Courier New", mono;
	position: relative;
}

/* HTML Tag, h1, etc */
span.keyword,
span.symbol {
	color: #a30086;
}

/* normal code */
span.normal {
	
}

/* class, span, title, etc */
span.type {
	color: #af4341;
}

/* attribute, eg "className" */
span.string {
	color: #2012c9;
}

span.linenum {
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	position: absolute;
	left: -27px;
	width: 0;
	text-indent: 0;
	margin-right: 5px;
	color: #afafaf;
}

p code {
	display: inline;
	background: none;
	font-size: 0.9em;
}

p.after-code {
	margin: -20px 0 20px 0;
	text-align: right;
	padding: 5px;
	background-color: #f3f5f6;
	font: 11px/19px Courier, "Courier New", mono;
}

/* @end */

/* center a block element */
.centered {
	text-align: center;
}

ol {
	margin: 0 0 20px;
}

hr {
	height: 1px;
	margin: 0 0 5px 0;
	background-color: transparent;
	clear: both;
	border-style: none;
	border-bottom: 1px solid #ebebeb;
	border-left: 0 none #fff;
	border-top: 0 none #fff;
	border-right: 0 none #fff;
}

h1 {
	font-size: 2.0em;
	margin: 0 0 10px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	color: #061224;
	font-weight: 500;
	clear: left;
}

h1 em {
	color: #284265;
	font-style: normal;
}

h2 {
	font-size: 1.8em;
	margin: 10px 10px 0 5px;
	color: #020f1c;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-weight: 500;
	clear: left;
}

h3 {
	font-size: 1.2em;
	margin: 0 0 5px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #061224;
}

h4 {
	font-size: 1.05em;
	margin: 0 0 5px;
	font-weight: bold;
	color: #191919;
	clear: both;
}

.imageStyle {
}

/* @end */


/* Container
============================================================ */ 

#container {
	width: 700px;
	min-height: 400px;
	margin: 0 auto;
	top: 25px;
	padding-bottom: 1px;
	position: relative;
	z-index: 0;
	text-align: left;
	background: transparent url('images/content.png') repeat-y left 0px;
}

#containerhome {
	width: 700px;
	min-height: 400px;
	margin: 0 auto;
	top: 0px;
	padding-bottom: 1px;
	position: relative;
	z-index: 0;
	text-align: left;
	background: transparent url('images/content.png') repeat-y left 0px;
}

.clearer {
	clear: both;
}

#sidebar {
	margin-top: 30px;
	display: none;
	position: relative;
}
/* @group Header */

#header {
	text-indent: -999em;
	height: 0;
	position: absolute;
}

/* @end */

/* @group Special Links & Icons */

/* styles links to look like h3 titles */
a:link.title,
a:visited.title {
	font-size: 1.5em;
	margin: 0 0 5px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #191919;
	text-decoration: none;
	display: block;
}

/* inline links with arrow */
a:link.arrow-right,
a:visited.arrow-right {
	background: url(arrow_ri.png) no-repeat right center;
	padding-right: 7px;
}

a:hover.arrow-right {
	background: url(arrow_gr.png) no-repeat right center;
}

a:link.arrow-left,
a:visited.arrow-left {
	background: url(arrow_le.png) no-repeat left center;
	padding-left: 8px;
}

a:hover.arrow-left {
	background: url(arrow_gr.png) no-repeat left center;
	padding-left: 8px;
}

/* rss links, no text */
a.rss {
	text-indent: -999em;
	background: url(rss_icon.png) no-repeat left;
	display: block;
	width: 17px;
	height: 17px;
}

/* Download icon  */
p.download-icon {
	background: url(icon_dow.png) no-repeat left center;
	padding: 0 0 0 30px;
}

p.download-icon a {
	display: block;
}

/* @end */

/* @group Columns */

/* with a 2 column layout the overall width is 780px, each column being 380px after padding. */
.column {
	margin-top: 35px;
	width: 440px;
	position: relative;
	z-index: 50;
}

.left {
	padding-right: 30px;
	float: left;
}

.right {
	float: right;
}

/* @end */

/* @group Forms */

/* @group RW Generated */

input.form-input-button {
	width: auto;
	margin-right: 10px;
}

form label {
	font-weight: bold;
}

/* @end */

/* @group General */

form#product_form,
form#showcase_form {
	margin: 0 auto 30px;
	padding: 40px 0 0 0;
	position: relative;
	clear: both;
	width: 70%;
}

/* outer wrapper fieldset, contains all other fieldsets */
fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

/* inner fieldset */
fieldset fieldset {
	margin: 0px 0 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid #ebebeb;
	width: 100%;
	display: block;
}

fieldset fieldset div {
	padding: 5px 0;
	margin-bottom: 10px;
	background-color: transparent;
}

.focused {
	background-color: #fff7c0;
}

.error {
	background-color: #fdc7ba;
}

fieldset#style_fieldset {
	position: relative;
	z-index: 0;
	display: block;
	opacity: 0;
}

fieldset#purchase_fieldset {
	position: relative;
	z-index: 1;
}

/* spammers textarea. hide it from everyone else */
fieldset.spammers {
	display: none;
}

/*same style as H2 */
legend {
	font-size: 1.8em;
	display: block;
	width: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-weight: 500;
	padding: 0 0 10px;
	color: #191919;
}

label.title {
	display: block;
	font-weight: bold;
	width: 180px;
	float: left;
}

input,
textarea {
	width: 372px;
	max-width: 570px;
	margin: 0;
	padding: 1px;
}

textarea {
	min-height: 150px;
}

input[type="checkbox"] {
	width: auto;
}

select {
	width: 285px;
}

div.choices {
	padding-left: 215px;
}

div.choices label.title {
	margin-left: -210px;
}

div.choices input {
	margin: 0 1px 10px 0;
}

/* moves any elements inside it to right right to line up nicely */
fieldset fieldset span {
	display: block;
	float: left;
}

input.submit {
	width: auto;
	float: right;
}

button:hover {
	cursor: pointer;
}

/* @end */

#wrapper	{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

#shadow	{
	position: absolute;
	width: 660px;
	background: url('images/page_sha.png') repeat-y;
	left: 0px;
	top: 90px;
}

#page_header {
	width: 660px;
	height: 170px;
	position: relative;
}

#page,
.page_main {
	margin-left: 15px;
	margin-right: 15px;
	padding-left: 50px;
	padding-right: 50px;
}

#page_bottom, .page_bottom	{
	width: 660px;
	height: 30px;
	background: url('images/page_bot.png') no-repeat;
}

#sidebar	{
	position: absolute;
	left: 675px;
	top: 90px;
	width: 18em;
	padding-top: 55px;
}

#hire-tag {
	background: url('images/hire-tag.png') no-repeat bottom left;
	position: absolute;
	top: 0;
	left: 0;
	width: 141px;
	height: 65px;
	z-index: 10;
	text-indent: -9999px;
	}
	
#hire-tag a {
	display: block;
	width: 141px;
	height: 65px;
	}


/* Front
============================================================ */ 

#banner_front	{
	width: 700px;
	height: 480px;
	top: 25px;
	margin-left: 0px;
	position: relative;
	line-height: 0px; /* fixes IE6 stepdown bug */
}

#banner_front div.download a:link,
#banner_front div.download a:visited {
	top: 267px;
	display: block;
	position: absolute;
	bottom: 14px;
	left: 560px;
	width: 119px;
	height: 33px;
	text-indent: -999em;
	background-image: url('images/button_f.png');
}

#banner_front div.download a:hover{
	background-position: right;
}

/* Navigation
============================================================ */ 

ul#navi	{
	width: 770px;
	height: 50px;
	margin-left: 0px;
	position: relative;
	line-height: 0px; /* fixes IE6 stepdown bug */
}

ul#navi li a {
	height: 50px;
	display: block;
	position: absolute;
	top: 0;
	text-indent: -9999px;
}
ul#navi li#welcome_link a {
	left: 0;
	width:116px;
	background-image: url('images/menu_atas_01.png');
	background-repeat: no-repeat;
}

ul#navi li#services_link a {
	left: 116px;
	width:121px;
	background-image: url('images/menu_atas_02.png');
	background-repeat: no-repeat;
}

ul#navi li#relasi_link a {
	left: 237px;
	width:128px;
	background-image: url('images/menu_atas_03.png');
	background-repeat: no-repeat;
}

ul#navi li#support_link a {
	left: 365px;
	width:124px;
	background-image: url('images/menu_atas_04.png');
	background-repeat: no-repeat;
}

ul#navi li#blog_link a {
	left: 489px;
	width:97px;
	background-image: url('images/menu_atas_05.png');
	background-repeat: no-repeat;
}

ul#navi li#about_link a {
	left: 586px;
	width:114px;
	background-image: url('images/menu_atas_06.png');
	background-repeat: no-repeat;
}

ul#navi li a:hover {
	background-position: 0 -50px;
}

ul#navi li a:active {
	background-position: 0 -100px;
}

ul#navi li a.current {
	background-position: 0 -100px;
	text-indent: -9999px;
}

/* Footer
============================================================ */ 

#footer	{
	font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
	line-height: 20px;
	color: #222;
	margin-top: 50px;
	text-align: center;
	font-size: 10px;
	padding-left: 10px;
	padding-top: 50px;
	background: url('images/footer.png') no-repeat center top;
}


/*
	SLIDER
*/
.slider-wrap								{ width: 700px; position: absolute; top: 300px; left: 13px; }			
.stripViewer .panelContainer 
.panel ul									{ text-align: left; margin: 0px; }
.stripViewer								{ position: relative; overflow: hidden; width: 674px; height: 135px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 674px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }

/*////////////////////////////////////////////////////////