/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title : style.css
Author : Soyuzno
URL : www.soyuzno.com

Description : All styles.

Created : 07.18.06
Modified : -
Copyright: Outstanding Graphic

"design is melody. code is poetry"
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

/* table of content - - - - - - - - - - - - - - - - - -

	1. general
	2. skeleton
	3. h1-h6
	4. Navigation
	5. form element
	6. typo

- - - - - - - - - - - - - - - - - - - - - - - - - - */

/* 1 */

* { padding: 0; margin: 0; border: 0; } 

.clear {
	clear : both;
	font-size : 1px;
	height : 0; }

body {
	background-color: #000 ;
	color: #FFF;
	font:70%/140% Verdana,Arial,Helvetica,sans-serif; }
	

/* 2 */

#wrapper {
	width: 950px; }
	
#wrapper-depan {
	width: 100%;
	background: transparent url(images/bgdepan.jpg) top right no-repeat; }	
	
.left {
	float: left;
	width: 378px;
	margin: 20px 0 0 0;
	display: inline; }

.right {
	float: left;
	margin-top: 10px; }

.logoholder {
	margin: 40px 0; }

.isi {
	width: 500px; }
	
		.isi p {
			line-height: 1.8em;
			margin-bottom: 5px; }
			
				.isi p a {text-decoration: none; }
				.isi p a:link, .isi p a:active, .isi p a:visited {color: #666; background-color: #000; }
				.isi p a:hover { text-decoration: underline; color: #FFCC00; background-color: #000; }

.thumb {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
	 }
	
		.thumb img {
			border: 1px solid #333;
			padding: 5px;
			width: 140px;
			height: 75px; }
				
				.thumb a img {
					filter: alpha(opacity=50);
 					opacity: .5;}

				.thumb a:hover img {
					filter: alpha(opacity=100);
 					opacity: 1;}

.pagination {
	margin-top: 35px;
	color: #333;
	border-top: 1px solid #121212; }
	
		.pagination a {text-decoration: none; }
		.pagination a:active, .pagination a:link, .pagination a:visited { color: #333; background color: #000; }
		.pagination a:hover { text-decoration: underline; color: #666; background-color: #000; }			
	
/* 3 */
h1 {}

	h1 {
		font-size: 16px;
		text-indent: -9999px;
		background: #000 url(images/logo.gif) no-repeat;
		width: 342px;
		height: 82px;
		clear: both; }
	
			h1 a { display: block;
				width: 342px;
				height: 82px; }

	h1#depan {
		font-size: 16px;
		text-indent: -9999px;
		background: #000 url(images/logo-depan.gif) no-repeat;
		margin-top: 180px;
		margin-bottom: 200px; 
		width: 220px;
		height: 48px;
		clear: both; }
	
			h1#depan a { display: block;
				width: 220px;
				height: 48px; }
				
h2{}
	
	h2 { margin-bottom: 10px; }
	
	h2#who {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-whoweare.gif) no-repeat;
		width: 500px;
		height: 76px; }
		
	h2#commitment {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-commitment.gif) no-repeat;
		width: 500px;
		height: 76px; }		
		
	h2#why {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-why.gif) no-repeat;
		width: 500px;
		height: 76px; }
		
	h2#method {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-method.gif) no-repeat;
		width: 500px;
		height: 76px; }

	h2#recent {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-recent.gif) no-repeat;
		width: 500px;
		height: 76px; }
		
	h2#print {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-print.gif) no-repeat;
		width: 500px;
		height: 76px; }

	h2#logo {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-logo.gif) no-repeat;
		width: 500px;
		height: 76px; }

	h2#snack {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-snack.gif) no-repeat;
		width: 500px;
		height: 76px; }
		
	h2#banner {
		text-indent: -9999px; 
		font-size: 14px;
		background: url(images/head-banner.gif) no-repeat;
		width: 500px;
		height: 76px; }
	
	h2.klien {
		font: normal 18px Georgia, "Times New Roman", Times, serif;
		color: #FFCC00;
		background-color: #000; }
		
/* 4 */
ul#nav { /* utk navigasi utama */
	position:relative;
	margin-top: 40px;
	width: 274px;	/* iih panjang banget deh */
	height: 59px; }

	ul#nav li {
		float: left;
		text-indent: -9999px;
		list-style-type: none; }

	ul#nav li a {
		display: block;
		text-decoration: none;
		background: transparent url(images/mainnav.gif) no-repeat; }

	li#menu1 a { width: 85px; height: 59px; }
 	li#menu2 a { width: 88px; height: 59px; }
 	li#menu3 a { width: 101px; height: 59px; }
 
	li#menu1 a:hover, li#menu1 a:focus 	{ background-position: 0px -59px; }
	li#menu2 a:link, li#menu2 a:visited 	{ background-position: -85px 0px; }
	li#menu2 a:hover, li#menu2 a:focus 	{ background-position: -85px -59px; }
	li#menu3 a:link, li#menu3 a:visited 	{ background-position: -173px 0px; }
	li#menu3 a:hover, li#menu3 a:focus 	{ background-position: -173px -59px; }


ul#prof { /* utk navigasi profil */
	position:relative;
	width: 429px;	/* iih panjang banget deh */
	height: 28px; }

	ul#prof li {
		float: left;
		text-indent: -9999px;
		list-style-type: none; }

	ul#prof li a {
		display: block;
		text-decoration: none;
		background: transparent url(images/menu-profile.gif) no-repeat; }

	li#whoz a { width: 67px; height: 28px; }
 	li#ourz a { width: 100px; height: 28px; }
 	li#whyz a { width: 159px; height: 28px; }
 	li#workingz a { width: 103px; height: 28px; }
	 
	li#whoz a:hover, li#whoz a:focus 	{ background-position: 0px -28px; }
	li#ourz a:link, li#ourz a:visited 	{ background-position: -67px 0px; }
	li#ourz a:hover, li#ourz a:focus 	{ background-position: -67px -28px; }
	li#whyz a:link, li#whyz a:visited 	{ background-position: -167px 0px; }
	li#whyz a:hover, li#whyz a:focus 	{ background-position: -167px -28px; }
	li#workingz a:link, li#workingz a:visited 	{ background-position: -326px 0px; }
	li#workingz a:hover, li#workingz a:focus 	{ background-position: -326px -28px; }

ul#portz { /* utk navigasi PORTFOLIO */
	position:relative;
	width: 500px;	/* iih panjang banget deh */
	height: 28px; }

	ul#portz li {
		float: left;
		text-indent: -9999px;
		list-style-type: none; }

	ul#portz li a {
		display: block;
		text-decoration: none;
		background: transparent url(images/menu-port.gif) no-repeat; }

	li#printedz a { width: 101px; height: 28px; }
 	li#logoz a { width: 116px; height: 28px; }
 	li#snackz a { width: 90px; height: 28px; }
 	li#bannerz a { width: 150px; height: 28px; }
	 
	li#printedz a:hover, li#printedz a:focus 	{ background-position: 0px -28px; }
	li#logoz a:link, li#logoz a:visited 	{ background-position: -101px 0px; }
	li#logoz a:hover, li#logoz a:focus 	{ background-position: -101px -28px; }
	li#snackz a:link, li#snackz a:visited 	{ background-position: -217px 0px; }
	li#snackz a:hover, li#snackz a:focus 	{ background-position: -217px -28px; }
	li#bannerz a:link, li#bannerz a:visited 	{ background-position: -307px 0px; }
	li#bannerz a:hover, li#bannerz a:focus 	{ background-position: -307px -28px; }
	
ul#subnav {
	position: relative; }
		
		ul#subnav li {
			float: left;
			list-style-type: none;
			display: inline;
			margin-right: 15px;
			margin-bottom: 30px; }
		
		#subnav a { text-decoration: none; }
		#subnav a:link, #subnav a:active, #subnav a:visited { color: #666; background-color: #000; }
		#subnav a:hover { color: #FFCC00; background-color: #000; text-decoration: underline; }
	

/* Main navigation "active tabs"
------------------------------------------------------------------*/
body#home1 ul#nav li#menu1 a { background-position: 0px -59px; }
body#home2 ul#nav li#menu2 a { background-position:-85px -59px; }
body#home3 ul#nav li#menu3 a { background-position:-173px -59px; }


/* Profile navigation "active tabs"
------------------------------------------------------------------*/
body.profil1 ul#prof li#whoz a { background-position: 0px -28px; }
body.profil2 ul#prof li#ourz a { background-position:-67px -28px; }
body.profil3 ul#prof li#whyz a { background-position:-167px -28px; }
body.profil4 ul#prof li#workingz a { background-position:-326px -28px; }


/* Portfolio navigation "active tabs"
------------------------------------------------------------------*/
body.porto1 ul#portz li#printedz a { background-position: 0px -28px; }
body.porto2 ul#portz li#logoz a { background-position:-101px -28px; }
body.porto3 ul#portz li#snackz a { background-position:-217px -28px; }
body.porto4 ul#portz li#bannerz a { background-position:-307px -28px; }

/* 5 */

.txt {
	border: 1px solid #EDEDED;
	width: 150px; }

.txt2 {
	border: 1px solid #333;
	background-color: #666; }

input.btn {
	width: 53px;
	height: 23px;
	margin-top: 5px;
	color: #FFF;
	background: #0065C9 url(images/bt-login.gif) no-repeat;
	font: normal 1em Verdana, Arial, Helvetica, sans-serif;
	outline: none; }

input.btn:hover {
	color: #FFF;
	background: #3B527D url(images/bt-login.gif) no-repeat 0 -23px; }

fieldset {
	border: 1px solid #333;
	text-align: left;
	margin: 15px 0 5px 5px;
	padding: 5px 0 5px 5px;
	width: 400px; }

legend {
	color: #666;
	background-color: #000;
	font: normal 120% Verdana, Arial, Helvetica, sans-serif; 
	padding: 0 5px; }
		
dl.form-style {
	padding: 20px 0 0 0;
	margin: 0; }
	
dl.form-style dt {
	float: left;
	width: 110px;
	font-weight: normal;
	text-align: right; }

dl.form-style dd {
	margin: 0 0 10px 115px;
	text-align: left; }
	
.asterisk {
	color: #003399; background-color: #000; }
	
/* 6 */

.gede {
	font: normal 200% Verdana, Arial, Helvetica, sans-serif;
	color:#CC9900;
	background-color: #000; }

.gede-putih {
	font: normal 180% Verdana, Arial, Helvetica, sans-serif; }