/*   

Author:ikhwan

Author URI:http://www.spikycube.com

Version:1.0

Description:this theme is based on piano black theme

*/



/*  ------ basic ------------------- */



body { margin:0; padding:0; background: #3b3b3b url('img/contentPostBg.jpg') repeat-x top left;

       font-family: Arial, Helvetica, sans-serif; 

       font-size:100%; color:#666; text-align:center; }

a img { border:none; }

a, a:visited { color: #5F8AFF; text-decoration: none; }

a:hover { color: #928fff; text-decoration: underline; }

p { margin:0 0 1em 0; padding:0; line-height:1.2em; text-align: left;  }

ul { list-style-type: none; margin:0 0 1em 0; padding:0; line-height:0%; }

ul li { margin:0; padding:0; line-height:normal; }

ol { margin:0 0 1em 19px; padding:0; }

* html ol { margin:0 0 1em 23px; padding:0; }

ol li { padding:0 0 5px 0; }

form,table,input,textarea,dl,dt,dd { margin:0; padding:0; }

table { border-collapse:collapse; border:0; width:100%; }

blockquote { margin:0; padding: 0; }

blockquote span { font:italic 80% Georgia, "Times New Roman", Times, serif; }

blockquote a, blockquote a:visited { text-decoration:underline; }

pre { border:1px solid #333; background:#222; padding:10px 20px; margin:0 0 1em 0; overflow:auto; }

object { display:block; margin:0 auto; }

h3 {

	margin: 0; padding: 0 0 10px 0;

	font: 900 120% Arial, Helvetica, sans-serif; color: #7E3493;
	
	clear: both;

}   



.wp-caption-text { text-align:left; }

.alignright { float:right; }

.alignleft { float:left; }

.aligncenter { display:block; margin-left:auto; margin-right:auto; }

.centered { display: block; margin-left:auto; margin-right:auto; }

.clear { clear:both; }



/*  ------ layout ------------------------ */



#wrapper { background: url(img/contentBg.jpg) no-repeat top center; }

#contents { width:960px; margin:0 auto; text-align:left; }

#header { margin: 15px 0; background: transparent url(img/spikycubePitch.png) no-repeat center top; height:230px; width: 960px; }

#middle-contents { /*background:url(img/side.png) repeat-y;*/ padding-bottom:5px; }

#left-col { 
	background: #fff; 
	float:left; 
	display:inline; 
	width:700px; min-height: 800px; 
	margin:0; padding: 10px 0;
}

#right-col { background: #fff; float:right; display:inline; width:260px; margin:0; padding: 0 0 30px 0; }

#footer { /*background: transparent url(img/footerBg.png) no-repeat center top;*/ 
	background: none; 
	margin:15px 0 5px 0;
	clear: both; 
}


/*  ------ header ---------------------- */

#header p { display: block; text-indent: -99999px; }


/* Change the number of margin if you are using original logo image */

#logo_image { margin:10px 0 10px 0; float:left; display:inline; }

#logo_image h1 { margin:0; padding:0; }


/* blog title */

#logo { float:left; display:inline; margin:64px 0 0 40px; }

#logo a, #logo a:visited { color:#ccc; font-size:22px; }

#logo a:hover { text-decoration:none; color:#83bac4; }

#logo h1 { font-weight:normal; line-height:100%; margin:0; padding:6px 0; color:#666; font-size:11px; }





/*  ------ left-col ------------- */

.post { margin: 5px 0; padding: 40px 30px 10px 30px; }

.post h2 { margin:0 0 4px 0; padding:0; letter-spacing: -1.5px; }

.post h2 a, .post h2 a:visited, #single h2 { color: #000; font-size: 160%; line-height: 90%; letter-spacing: -1.5px; }

.post h2 a:hover { text-decoration:none; color:#666; }

.post-info { margin:0; }

.post-info li { display:inline; font-size: 60%; color:#7E3493; margin:0 10px 0 0; }

.write-comment { background:url(img/arrow1.gif) no-repeat left center; padding:0 0 0 11px; }

.post-info a, .post-info a:visited { color:#777; }

.post-info a:hover { color:#83bac4; }



.post-content { clear:both; padding:20px 0 0 0; line-height:160%; font-size: 90%; }

.post-content p { margin:0 0 15px 0; line-height:140%; }

.post-content a,.post-content a:visited { text-decoration:underline; }

.post-content a.more-link, .post-content a.more-link:visited a.more-link:hover { 

	display:block; 

	clear:both; 

	margin:5px 0; padding:5px 15px;

	width: 70px; height: 22px;

	background: #b38ffa no-repeat left top; 

	text-decoration:none; 

	color: #531bb0;

}

.post img, .post a img { border:1px solid #222; padding:5px; margin:0; background:#333; }

.post img.centered,div.centered { display:block; margin:0 auto; }

.post img.alignright, div.alignright { margin:4px 0 0 10px; display:inline; }

.post img.alignleft, div.alignleft { margin:4px 10px 0 0; display:inline; }

.post img.wp-smiley { border:0px; padding:0px; margin:0px; background:none; }

.post .imgcalendar {

	border: none;

	background: none;
	
	padding: 0; margin: 0;
	vertical-align: middle;

	}	

.post table { margin:0 0 1em 0; }

.post td, .post th { border:1px solid #333; padding:15px; }

.post th { background-color:#000; font-weight:normal; }

.post-content ul li { /*margin: 0; line-height: 160%; background:url(img/bullet1.gif) no-repeat left 9px; padding:0 0 0 12px;*/ }

.post-content input { margin:5px 0; }



.post-meta { margin: 0 35px; padding:5px 0 0 0; border-bottom: 1px dotted #666; }

.post-meta ul { padding:0 ; line-height:0%; }

.post-meta li { display:inline; font-size: 80%; line-height:140%; }

.post-category { float:left; width:345px; background:url(img/category-icon.gif) no-repeat 2px 2px; padding:0 0 1px 20px; }

.post-tag { float:left; width:345px; background:url(img/tag-icon.gif) no-repeat 2px 2px; padding:0 0 1px 29px; }

.post-comment { float:right; width:90px; background:url(img/write-comment.gif) no-repeat left top; padding:0 0 2px 22px; }



#back-top { padding:10px 35px 0 15px; font-size:11px; background:url(img/arrow5.gif) no-repeat left 16px; float:right; color:#333; }

#back-top:hover { text-decoration:none; color:#83bac4; }





/*  ------ right-col ------------- */

#information-title { background:url(img/info-box-top.gif) no-repeat left top; padding:25px 20px 5px 20px; width:232px; margin:0 0 0 30px; }

.information-contents { line-height:160%; font-size:11px; color:#868a8d; background:url(img/info-box-bottom.gif) no-repeat left bottom; padding:12px 20px 20px 20px; margin:0 0 50px 30px; width:232px; }



#search-area { display: block; margin:25px 20px 0; }

#search-area p { margin:0; font-size: 80%; font-weight: bold; letter-spacing: -1.0px; }

#search-input { float:left; margin:0; border: 1px #999 solid; height:22px; width:180px; font-size:12px; color:#7e7e7e; padding: 3px; }

#search-button { margin:0; }



#rss-feed { 

	display: block; 

	font-size:105%; font-weight: bold; line-height: 1em;

	margin: 10px 10px 0px 20px; padding: 0 0 0 45px;

	color:#777; 

	background:url(img/rss.png) no-repeat left top; 

	height:35px;  

}

#rss-feed:hover { color:#83bac4; text-decoration: underline; }



#sidebar-posts { margin: 10px 20px; }

.sidebar-title { 

	color: #333;

	font-size: 105%;

	font-weight: bold;

	margin: 45px 0px 15px;

	text-transform: uppercase; 

}

#right-col ul {	border-bottom: #999 1px solid; }

#right-col li { 

	margin:5px 0; padding: 5px 0px 0px; 

	border-top: #999 1px solid;

        font-size: 90%; }

#right-col ul a:hover { text-decoration: underline; color: #333; }

#right-col li li { padding:5px 0 0 10px; margin:5px 0; background:url(img/bullet1.gif) no-repeat 1px 7px; }



#side-bottom { clear:both; }



/* this is just for default mode */

#side-left-ex { float:left; width:128px; padding:0 0 0 32px; }

#side-right-ex { float:right; width:120px; padding:0 30px 0 10px; }

#side-bottom-ex { clear:both; }



/* calendar */

#wp-calendar { margin:0 auto; width:100%; color:#777; }

#wp-calendar th, #wp-calendar td { border:1px solid #333; padding:0; width:14%; line-height:220%; text-align:center; }

#wp-calendar th { line-height:100%; padding:4px 0 2px 0; font-weight:normal; background:#000; }

#wp-calendar td a, #wp-calendar td a:visited { display:block; text-decoration:underline; }

#wp-calendar td a:hover { }

#wp-calendar caption { padding:8px 0; }

#wp-calendar tfoot td { border:none; padding:5px 0; }

#wp-calendar #prev a, #wp-calendar #prev a:visited, #wp-calendar #next a, #wp-calendar #next a:visited

  { text-decoration:none; background:none; }

#wp-calendar #prev a:hover, #wp-calendar #next a:hover { text-decoration:underline; }

#wp-calendar td#today { background:#111; text-decoration:underline; color:#81c8d5; }



/* --------- copyrights ------------- */

#copyrights { color:#000; padding:10x 15px 5px 20px; font-size: 80%; }

#copyrights li { margin:0; padding:0 5px; line-height:160%; display: inline; }

#copyrights a, #copyrights a:visited { color:#000; }

#copyrights a:hover { color:#849ca0; }

#copyrights #wp a { text-decoration:underline; }



#return_top a { position:absolute; position:fixed; right:30px; bottom:15px;

                display:block; height:138px; width:38px; background:url(img/return-top.png) no-repeat left top; }

#return_top a:hover { background:url(img/return-top.png) no-repeat right top; text-decoration:none; }



/*  ------ archive ------------- */

.archive, .search-page { margin:25px 0 25px 30px; border-left:3px solid #555; padding-left:10px;  }

.archive h2, .search-page h2 { font-size:14px; color:#fff; margin:0 0 3px 0; display:block; line-height:120%; font-weight:normal; padding:0; }

.archive p, .search-page p { font-size:12px; }

.read-more { padding:0 0 0 0; }



/* ------ page navi -------------- */

.page-navi, .next-previous-navi { margin:50px 0 25px 30px; }

#comment-pager { margin:20px 0 0 0; }

.page-navi li { line-height:0%; display:block; float:left; }

.page-navi a, .page-navi a:visited, .page-navi a:hover,

.page-navi span.pages, .page-navi span.extend, .page-navi span.current, .page-navi span.dots

 { font-size:11px; line-height:100%; margin:0 -1px 25px 0; padding:2px 14px; display:block; float:left; border-right:1px solid #555; border-left:1px solid #555; }



.page-navi span.current { color:#81c8d5; background:url(img/arrow8.gif) no-repeat center bottom; padding-bottom:10px; border:none; }

.page-navi a.prev, .page-navi a:hover.prev, .page-navi a:visited.prev { border-left:none; }

.page-navi a.next, .page-navi a:hover.next, .page-navi a:visited.next { border-right:none; }



#previous-page a, #previous-page a:visited { float:left; display:inline; margin:5px 0 10px 5px; height:22px; padding:7px 0 0 40px; background:url(img/arrow2.gif) no-repeat left top; }

#previous-page a:hover { background:url(img/arrow2.gif) no-repeat left bottom; text-decoration:none; }

#next-page a, #next-page a:visited { float:right; display:inline; margin:5px 0 10px 0; height:22px; padding:7px 40px 0 0; background:url(img/arrow3.gif) no-repeat right top; }

#next-page a:hover { background:url(img/arrow3.gif) no-repeat right bottom; text-decoration:none; }



/*  ------ header for category/archive/search/...etc  ------------- */



.common-navi-wrapper { background:url(img/archive-top.gif) no-repeat right top; padding:13px 0 0 0; width:585px; margin:70px 0 0; }

.common-navi-wrapper p { background:url(img/archive-bottom.gif) no-repeat right bottom; padding:0 10px 10px 32px; margin:0; line-height:140%; }



#archve-title { margin:0 0 0 13px; }

#search-hit { }



/*  ------ page without side ------------------------ */

#no-side { background: #fff; width: 960px; min-height: 500px; }

#no-side .post { margin: 5px 0; }

#no-side h2 { margin:0 0 4px 0; padding:0; letter-spacing: -1.5px; }

/*#footer-noside { background:url(img/bottom-noside.png) no-repeat top; height:114px; margin-bottom:50px; }

*/



/*  ------ header-menu ------------------------ */

.header-menu-wrapper { }

ul.menu { float:right; font-size:110%; height:65px; margin:0; }

ul.menu, ul.menu ul { line-height:1.5em; margin:60px 0 0 0; padding:0; letter-spacing: -1.5px; }

ul.menu li { position:relative; float:left; height:45px; padding:0 10px; z-index:100; }

ul.menu ul li { height:auto; border-left:none; padding:0; left:auto;  }

ul.menu #header-menu-home { border:none; }

ul.menu a, ul.menu a:visited { color:#b52222; display:block; padding:0; line-height:160%; position:relative; top:5px; }

ul.menu a:hover { color:#b52222; border-bottom:4px solid #6101ff; text-decoration:none; }



/* --------- navigation : sub menu -----------*/

ul.menu ul { position:absolute; margin: 0; display: none; opacity: 0; width: 150px; }

ul.menu ul a, ul.menu ul a:visited { background:#83bac4; line-height:1.5em; padding:9px 15px 8px; width: 128px; margin:5px 0 0 0; }

ul.menu ul a:hover { background:#333; }

ul.menu ul ul { margin: -34px 0 0 189px; top:0; }



ul.menu .current_page_item a, ul.menu .current_page_item a:visited { color:#b52222; border-bottom:4px solid #6101ff; }

ul.menu .current_page_item a:hover { }

ul.menu .current_page_item ul a, ul.menu .current_page_item ul a:visited, ul.menu .current_page_item ul a:hover

              { border-bottom:1px solid #373737; }





/* ---------- clearfix hack ---------- */

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

.clearfix { display: inline-block; }

/* exlude MacIE5 \*/

* html .clearfix { height: 1% }

.clearfix {display:block;}

/* end MacIE5 */

/* --------- Main page styling -----------*/

.pageContainer {
	margin: 0 auto; padding: 40px 0;
	background: #FFF;
	width: 900px; min-height: 500px;
}

.frontPageTitle img { 
	padding: 0; 
	border: none; 
	background: none; 
}

.iconLeft {	margin: 8px 8px 0 8px; }

.frontPageServices img { border: none; background: none; padding: 0; margin: 0 0 2px 0; }

#mainPage-firstColumn {	width: 620px; padding: 0 20px 10px 0; float: left; }

#mainPage-secondColumn { width: 240px; padding: 0 20px 10px 0; float: left; }

#mainPage-thirdColumn {	width: 240px; padding: 0 0 10px 0; float: left; }

#mainPage-thirdColumn .postDate { font-size: 70%; }

.post-content .pageContainer {
	margin: 0 auto; padding: 0 0 40px 0;
	background: #FFF;
	width: 900px; min-height: 500px;
}

/* --------- About Us page styling -----------*/

#aboutUs-content { 
	float: left;	
	width: 600px; 
	padding: 0 30px 40px 0px; margin: 0; 
}

#aboutUs-content img  { margin: 10px 5px 0 0; }

#aboutUs-content #keyRole { padding: 5px 0; display: block; height: 180px; }

#aboutUs-content #keyRole img { padding: 5px; margin: 0 20px 0 10px; vertical-align: top; }

#aboutUs-content h5 { font-size: 140%; line-height: 1em; }

#aboutUs-content h5 span { font-size: 80%; }

#aboutUs-content blockquote p { font: normal 120% Georgia, "Times New Roman", Times, serif; line-height: 120%; padding: 20px; }

#aboutUs-content #memberpicture { padding: 0 10px 3px 10px; }   

#aboutUs-content #memberpicture p { padding: 0; margin: -5px 0 0 0; font: normal 90% Arial, Helvetica, sans-serif; color: #d6d; }

#aboutUs-sidebar {

	float: right;

	width: 260px;

	padding: 0 0 15px 0px; margin: 0;

}

#aboutUs-sidebar ul { 
	padding: 0 0 20px 0;
}

#aboutUs-sidebar ul li { 
	background: transparent url(img/bulletArrow.png) no-repeat left top; 
	padding: 0 0 0 20px; margin: 0 0 10px 0; 
	line-height: 100%; 
}

/*get a quote*/

#getQuoteForm { width: 600px; padding: 10px; }

#getQuoteForm #textInput { 
	height: 20px; 
	padding: 5px; 
	border:1px solid #D2D2D2;
	color: #666
}

#getQuoteForm #textSelect { height: 25px; }

#getQuoteForm #textInput:focus,
#getQuoteForm #textArea:focus { 
	outline: 1px solid #93db5a; 
}

#getQuoteForm #textArea {
	padding: 5px; 
	border:1px solid #D2D2D2;
	color: #666
}

#getQuoteForm #submitBtn { padding: 5px; }


/*contact us*/

#contactForm { 
	width: 600px; 
	float: left; 
	padding: 0 30px 0 0; 
}

#contactForm #textInput { 
	height: 20px; 
	padding: 5px; 
	border:1px solid #D2D2D2;
	color: #666
}

#contactForm #textSelect { height: 25px; }

#contactForm #textInput:focus,
#contactForm #textArea:focus { 
	outline: 1px solid #93db5a; 
}

#contactForm #textArea {
	padding: 5px; 
	border:1px solid #D2D2D2;
	color: #666
}

#contactForm #submitBtn { padding: 5px; }

#contactOther { width: 240px; float: right; padding: 0; }

#contactOther a { text-decoration: none; }

#contactOther img { 
	border: none; 
	margin: 0; padding: 0; 
	background: none; 
}

#contactOther ul li { margin: 5px 0; padding: 0; display: inline-block; }

#contactOther .profileIcon { 
	width: 32px; 
	float: left; 
	padding: 0; margin: 0 10px 0 0; 
}

#contactOther .profileText { 
	width: 175px; 
	padding: 0; margin: 0; 
}