/*
	Developed By:
	Damar Haryo Pamungkas
	for OntelStudio.com
*/

/* `Containers
----------------------------------------------------------------------------------------------------*/

.container {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
.grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.grid_1_inner, .grid_2_inner, .grid_3_inner, .grid_4_inner, .grid_5_inner, .grid_6_inner,
.grid_7_inner, .grid_8_inner, .grid_9_inner, .grid_10_inner, .grid_11_inner, .grid_12_inner {
	display: inline;
	float: left;
	margin:0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.grid_1, .grid_1_inner {
	width: 60px;
}

.grid_2, .grid_2_inner {
	width: 140px;
}

.grid_3, .grid_3_inner {
	width: 220px;
}

.grid_4, .grid_4_inner {
	width: 300px;
}

.grid_5, .grid_5_inner {
	width: 380px;
}

.grid_6, .grid_6_inner {
	width: 460px;
}

.grid_7, .grid_7_inner {
	width: 540px;
}

.grid_8, .grid_8_inner {
	width: 620px;
}


.grid_9, .grid_9_inner{
	width: 700px;
}

.grid_10, .grid_10_inner {
	width: 780px;
}

.grid_11, .grid_11_inner {
	width: 860px;
}

.grid_12, .grid_12_inner {
	width: 940px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.positioniseverything.net/easyclearing.html */

.clearfix:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* template  */

.content	 {background-color:#07141c;}

body {
	background-color:#FFFFFF;
	color:#333333;

	}

.ontelStudio {
	margin:0 0 30px 0;
}


.header {
	height:135px;
	background:url(../img/header_bg.jpg) top right repeat-x;
	}
	
.header ul{ text-align:right; float:right;}

.header ul li{
	display:inline;
	float:left;
	}

.form_row {
	margin-bottom:10px;
}

.header .grid_8 {margin-left:20px;}

.nav {
	margin-top:75px;
	margin-left:25px;
}

.nav ul li a {
	color:#333;
	text-decoration:none;
	text-align:left;
	}

.nav ul li a:hover{
	color:#0066FF;
	}

.nav ul li {
	margin:0;
	padding:0 0 0 25px;
	}

.nav .menuName {
	font-size:14px;
}


.pageName {
	height:70px;
	background:url(../img/pageNameBg.jpg) repeat-x;
}

.pageName h2 {
	line-height:60px;
	margin-bottom:0;
	padding-top:10px;
	font-weight:normal;
}

.content {padding:20px 0;}

.webID {
	background:url(../img/onteLogo.jpg) no-repeat top;
	width:300px;
	height:120px;
}

.webID a {
	width:300px;
	height:120px;
	display:block;
}

.intro {
	height:265px;
	background:url(../img/intro_bg.jpg) repeat-x;
	margin-bottom:20px;
	}

.introContent {
	background:url(../img/bgBar.jpg) no-repeat;
	height:265px;
}

.introContent h2 {
	margin:0;
	font-weight:normal;
	font-family:Helvetica, sans-serif;
	font-size: 24px;
	margin-bottom:5px;
	margin-top:5px;
}

.introContent h3 {
	margin:0;
	font-weight:normal;
	font-family: "Agency FB";
	font-size: 18px;
	font-weight:bold;
}

.introDetail{
	padding:0px 30px 0px 30px;
	margin-bottom:20px;
	background:url(../img/bg_black.png) repeat;
	width:240px;
	height:200px;
	color:#CCCCCC;
	}

.introContent .grid_4 {
	margin-top:20px;
	}

.sectDetail .grid_4 {
	margin-bottom:10px;
	
	}

.sectDetail h4 {
	font-weight:normal;
	margin:0;
	margin-bottom:5px;
}

.sHighlight h3, .pHighlight h3 {
	font-weight:normal;
	margin:0;
}

.dash {
	background:url(../img/dash.jpg) repeat-x;
	height:15px;
	line-height:15px;
	text-align:right;
	margin-bottom:20px;
	}
	
.dash a {
	padding:0 5px;
	background-color:#07141c;
	color:#CCCCCC;
	text-decoration:none;	
}

.pThumb {
	width: 140px;
	float:left;
	display:inline;
	margin-right:10px;
	background-color:#CCCCCC;
	margin-bottom:10px;
}

.pImg {
	width:120px;
	margin:10px 10px 0px 10px;
}

.pTitle {
	width:120px;
	margin:0px 10px 15px 10px;
	color:#333333;
}

.contactDesc {
	background:url(../img/bubleFishTop.jpg) top left no-repeat;
	padding:15px 15px 50px 15px;
}

.contactBtmImg {
	background:url(../img/bubleFishBtm.jpg) bottom left no-repeat;
}

.contactContent h6 {
	margin:0;
}

/* service page typo */
h5 {
	margin:0;
}

a.more {
	color:#00CCFF;
	text-decoration:none;
}

.pTitle {
	color:#666666;
}

.grid_1_5 {
	float:left;
	display:inline;
	width:100px;
	margin:0 10px;
}

.grid_1_5 a {
	color:#CCCCCC;
	text-align:center;
}

.featuredWork {
	width:260px;
	height:180px;
	background:url(../img/rose.jpg) no-repeat;
}

.pDisplay {
	background-color:#eee;
	padding:10px 0;
	margin-bottom:5px;
}

h6 {
	font-weight:normal;
	font-size:12px;
	text-transform:uppercase;
	margin-bottom:10px;}

/*box...........................................................................................................................*/

.sideBox{
	background:url(../img/boxContent.jpg) repeat-y;
	margin-bottom:20px;
}

.boxTitle{
	background:url(../img/boxTitle.jpg) no-repeat;
	height:29px;
}

.boxTitle h3{
	font-size:14px;
	font-weight:normal;
	color:#333333;
	line-height:29px;
	padding-left:20px;
}

.boxBottom{
	background:url(../img/boxBtom.jpg) no-repeat bottom;
	padding:10px 20px 10px 20px;
	color:#333333;
}

.boxBottom a{
	text-decoration:none;
	color:#333333;
	font-size:11px;
	}
	
.boxBottom a:hover{color:#0066FF;}

.boxPromo{
	margin-top:-10px;
	margin-bottom:10px;
	}

.leftIcon, .rightIcon {
	width:120px;
	float:left;
	display:inline;
}

.leftIcon { margin:0px 10px 10px 0px;}
.rightIcon { margin: 0px 0px 10px 10px;}

.latest{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:#CCCCCC solid 1px;
	}

.latest p{
	padding:0;
	margin:0;
	}

.latest a{
	color:#FF9900;
	font-size:12px;
	}

.latest a:hover{color:#0066FF;}

.date{
	color:#999999;
	font-size:10px;
	margin-top:-10;
	margin-bottom:20;
	}

/*footer.......................................................................................................................................*/

.footer{
	background:url(../img/footerBar.jpg) repeat-x;
	height:199px;
	padding:30px 0px;
	font-size:12px;
	}

.footer h3{
	color:#666666;
	font-size:14px;
	line-height:24px;
	border-bottom:solid #999999 1px;
	margin:0px;
	padding:0px;
	margin-bottom:5px;
	text-transform:uppercase;
	font-weight:normal;
	letter-spacing:2px;
	}

.footer ul li{
	padding:0px;
	margin:0px;
	list-style:none;
	}
	
.footer ul li a{
	text-decoration:none;
	color:#333333;
	}

.footer ul li a:hover{
	color:#0066FF;}

.footer p{
	color:#333333;
	padding:0px 20px 20px 20px;
	}


.logo {
	background:url(../img/logo_bw.jpg) no-repeat;
	padding-left:110px;
	height:60px;
	margin-top:20px;
	}


.footerMenu {
	margin-top:20px;
}

.footerMenu a {
	color:#666666;
	text-decoration:none;
}


/*Services
-----------------------------------------------------------------------------------------------------------------*/
.servTag, .question, .aboutTag, .contactHead, .rpqPage {
	margin-top:15px;
	margin-bottom:10px;
	border-bottom:#CCCCCC solid 2px;
	padding-bottom:2px;
	}

.servNav{
	padding:0;
	margin-bottom:20px;
	height:30px;
	}

.servNav .grid_2_inner {
	margin-right:10px;
}

.servNav .grid_3_inner { margin-left:10px;}

.servIco {
	width:25px;
	float:left;
	display:inline;
	border:#999999 solid 2px;
	}

.servDesc {
	width:100px;
	float:left;
	display:inline;
	font-size:11px;
	color:#333333;
	margin-left:10px;
	}

.servMenu a {
	text-decoration:none;
	}	

.subService, .subService2 {
	margin-left: 20px;
	}

.subService { margin-bottom:5px;}

.subService2 {
	margin-bottom:20px;
	}

.detailSubService {
	margin-left: 40px;
	}	
/*  toggle  */	
	
.subService {
/*	padding: 0 0 0 50px;*/
/*	margin: 0 0 5px 0;*/
	background: url(../img/pluss.jpg) left center no-repeat;
/*	height: 46px;
	line-height: 46px;*/
/*	width: 450px;*/
	/*font-size: 2em;*/
	font-weight: normal;
/*	float: left;*/
}

.subService a {
/*	color: #fff;*/
	text-decoration: none;
	display: block;
	padding-left:20px;
	color:#333333;
}

.subService a:hover { color:#6633FF; }
.subService.active { background:url(../img/min.jpg) left center no-repeat;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.detailSubService {
/*	margin: 0 0 5px;*/
	padding: 0;
	/*border-top: 1px solid #d6d6d6;*/
	/*background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;*/
	overflow: hidden;
	padding-bottom:10px;
	/*font-size: 1.2em;*/
	/*clear: both;*/
}
.detailSubService .block {
	/*padding: 20px;*/ /*--Padding of Container--*/
	background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}	

.serviceSect h6, .aboutPage h6 { letter-spacing:3px; height:24px; line-height:24px; margin:0;
	border-bottom:1px solid #ccc; margin-bottom:10px;}

.serviceSect {margin-bottom:15px;}

.footer h6 {
	font-weight:bold;
}


<!-- form -->
.lblForm {
	width:100px;

}

.lblInput {
	width:300px;
	float:left;
	display:inline;
	}

.rpqForm h4 {
	font-size:12px;
	letter-spacing:2px;
	border-bottom:1px solid #ccc;
}	

.grid_1a {
	float:left;
	display:inline;
	margin:0 10px;
	width:100px;
	margin-bottom:5px;
}

.rpqSection {
	margin-bottom:40px;
}

p.introrpq {
	color:#666666;
}

.rpqForm h2 {
	font-family:Helvetica, Arial, sans-serif;
}

h6.noBorder {
	border:none;
}

.serviceImage {
	margin-bottom:20px;
	}
	
.rpqFlashnews {
	padding:20px;
	background-color:#FFFF99;
	color:#990000;
	border:1px solid #FF6600;
}

ol.methodStyle {
       list-style-type: upper-alpha;  
}

ol.methodStyle li {
       margin-bottom:10px;
}