/* 
--------------------------------------------------
	RYNETASP CSS DOCUMENT
	Author: Armono Wibowo
	Last Update: Nov, 2008
-------------------------------------------------- 
*/

/* --------------------------------
	01. GLOBAL BROWSER RESET
-------------------------------- */

@import "reset.css";

/* --------------------------------
	02. COMMON STYLE
-------------------------------- */

body {
	background: #eee url("../images/bg.gif") top repeat-x;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 62.5%;	/* ems rules */
	color: #2a2a2a;
}
body#home {
	background: #eee url("../images/bg2.gif") top repeat-x;
}

a {
	text-decoration: none;
	color: #2b5978;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	text-decoration: none;
}

h2 {
	margin: 0;
	font-size: 1.8em; font-weight: normal;
}
p {
	margin: 6px 0 0;
	font-size: 1.2em;
	line-height: 16px;
}


/* --------------------------------
	03. STRUCTURE
-------------------------------- */


#wrapper {
	margin: 0 auto; padding: 0;
	width: 930px;
}



/* 	HEADER
-------------------------------- */
#header {
	margin-bottom: 30px;
	height: 150px;
	overflow: hidden;
}
body#home #header {
	margin: 0;
	height: 120px;
}
	#header h1 a {
		float: left;
		margin-top: 50px;
		background: url("../images/logo_rynetasp.gif") no-repeat;
		width: 230px; height: 50px;
		display: block;
		text-indent: -9000px;
	}
		
		
/* Nav
-------------------------------- */
.nav {
	float: right;
	margin-top: 70px;
	height: 24px; width: 306px;
	background: url("../images/nav_main.gif") no-repeat;
	overflow: hidden;
}
.nav ul {
	list-style: none;
	margin: 0; padding: 0;
}

	.nav li span {
    	display: none;
    }
	.nav li, .nav li a {
		height: 24px;
		display: block;
    }
	.nav li {
		float: left;
		list-style: none;
		display: inline;
    }

    .nav_about {width: 61px;}
    .nav_services {width: 81px;}
	.nav_portfolio {width: 89px;}
    .nav_contact {width: 75px;}
	
	.nav_about a:hover {background: url("../images/nav_main.gif") 0 -24px no-repeat;}
    .nav_services a:hover {background: url("../images/nav_main.gif") -61px -24px no-repeat;}
	.nav_portfolio a:hover {background: url("../images/nav_main.gif") -142px -24px no-repeat;}
    .nav_contact a:hover {background: url("../images/nav_main.gif") -231px -24px no-repeat;}
	
	body#about .nav_about {background: url("../images/nav_main.gif") 0 -48px no-repeat;}
    body#services .nav_services {background: url("../images/nav_main.gif") -61px -48px no-repeat;}
	body#portfolio .nav_portfolio, body#portfolio .nav_portfolio a:hover {background: url("../images/nav_main.gif") -142px -48px no-repeat;}
    body#contact .nav_contact {background: url("../images/nav_main.gif") -231px -48px no-repeat;}



/* 	FEATURED
-------------------------------- */
#featured {
	margin: 0;
}
		#featured h2 {
			margin: 0 auto;
			background: url("../images/webuildweb.gif") no-repeat;
			width: 660px; height: 50px;
			display: block;
			text-indent: -9000px;
		}
		#featured img {
			margin: 15px 0 0 25px;
			width: 880px;
		}


/* 	CONTENT
-------------------------------- */
#content {
	overflow: hidden;
}
	#content .home {
		overflow: hidden;
		margin: 30px 0 0;
		background: url("../images/bgfeat.gif") no-repeat;
		height: 201px;
	}
	.home .service {
		float: left;
		width: 260px;
		padding: 20px 25px 0 25px;
	}
		.service h3 {
			margin: 0;
			display: block;
			text-indent: -9000px;
		}
		.service h3.design {
			background: url("../images/feat_design.gif") no-repeat;
			width: 141px; height: 37px;
		}
		.service h3.application {
			background: url("../images/feat_application.gif") no-repeat;
			width: 247px; height: 37px;
		}
		.service h3.strategy {
			background: url("../images/feat_strategy.gif") no-repeat;
			width: 218px; height: 37px;
		}
		.service p {
			margin: 0 0 0 43px;
		}
		.service p.strategy {
			margin: 0 0 0 48px;
		}
			

	#content .portfolio {
		overflow: hidden;
		height: 1%;
		background: url("../images/bgcont2.gif") no-repeat;
	}
	.portfolio .thumb {
		float: left;
		width: 270px; height: 222px;
		padding: 20px 20px 0 20px;
	}
		.thumb h3 {
			margin: 15px 0 0;
			font-size: 1.8em; font-weight: normal;
		}
		.thumb p {
			letter-spacing: 0.02em;
		}
		
	#content .bottom {
		margin: -1px 0 0;
		background: url("../images/bottom.gif") no-repeat;
		height: 46px;
	}



/* Left Content
-------------------------------- */
#left {
	
}

/* Main Content
-------------------------------- */
#main {
	
} 

/* Slider
-------------------------------- */
.slider {
	margin-left: 435px;
	height: 46px; width: 60px;
	background: url("../images/nav_slider.gif") no-repeat;
	overflow: hidden;
}
.slider ul {
	list-style: none;
	margin: 0; padding: 0;
}

	.slider li span {
    	display: none;
    }
	.slider li, .slider li a {
		height: 46px;
		display: block;
    }
	.slider li {
		float: left;
		list-style: none;
		display: inline;
    }

    .slide_one {width: 30px;}
    .slide_two {width: 30px;}
	
	.slide_one a.grey {background: url("../images/nav_slider.gif") 0 0 no-repeat;}
    .slide_two a.grey {background: url("../images/nav_slider.gif") -30px 0 no-repeat;}
	.slide_one a.black {background: url("../images/nav_slider.gif") 0 -46px no-repeat;}
    .slide_two a.black {background: url("../images/nav_slider.gif") -30px -46px no-repeat;}



/* 	FOOTER
-------------------------------- */
#footer {
	margin: 0; padding: 0;
	height: 90px;
	color: #666;
	text-align: center;
}
	#footer p {
		margin: 0;
		font-size: 1.0em;
		line-height: 90px;
	}
	

/* 	FORM CONTROLLER
-------------------------------- */	
form div {
	
}


/* Inquiry Form
-------------------------------- */
form div.inquiry {
	margin-bottom: 20px;
	overflow: hidden;
}	
form div.inquiry label, form div.inquiry input {
	float: left;
	margin: 0;
	font-size: 1.2em; font-family: "Lucida Grande", Arial, Verdana, sans-serif;
}
form div.inquiry label {
	display: block;
	width: 140px;
	margin: 8px 15px 0 0; padding: 3px 0 0;
	text-align: right;
}
form div.inquiry input {
	width: 315px;
}

form div.inquiry br {
	clear: left;
}
form div.inquiry input.tfield {
	margin: 8px 0 0; padding: 4px;
	background: #e7ecef;
	/*border: 1px solid #d2d5d7;*/
	color: #6c6f71;
}
form div.inquiry input.button {
	margin: 15px 0 0;
	width: auto;
}