/*

Theme Name: Haku Wale

Theme URI: http://www.themelab.com/free-wordpress-themes/

Description: Based on Miniml by Themelab (http://www.themelab.com/): A simple theme.  Visit <a href="http://www.themelab.com">Theme Lab</a> for more free WordPress themes and <a href="http://www.nuviotemplates.com/">Nuvio Templates</a> for more free templates.

Version: 1.0

Author: Haku Wale

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

*/


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

    This website template was downloaded from http://www.nuviotemplates.com - visit us for more templates

    Structure:

    display; position; float; z-index; overflow; width; height; margin; padding; border; background; align; font;

    Content:

        1) HTML tags, reset

        2) Universal styles (display, float, margin, text-align...)

        3) Layout

        4) Page: Home

        Z) Others


---------------------------------------------------------------------------------------------------------- *


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

1) HTML tags, reset

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

* {
	margin:0;
	padding:0;
}
body, div, span, p, a, img, ul, ol, li, caption, table, thead, tbody, tfoot, tr, th, td, form, fieldset, legend, label, dl, dt, dd, blockquote, applet, object, h1, h2, h3, h4, h5 {
	border:0;
}
body {
	padding:20px 0;
	font:0.8em/1.5 "arial", serif;
	text-align:center;
}
a {
	text-decoration:none;
}
h1, h2, h3, h4, h5, h6 {
	margin:15px 0 10px 0;
}
h1 {
	font-size:260%;
	font-weight:normal;
	letter-spacing:-1px;
}
h2 {
	font-size:150%;
	font-weight:normal;
}
h3 {
	font-size:140%;
	font-weight:normal;
}
h4, h5 {
	font-size:100%;
}
p, table, ul, ol, dl, fieldset {
	margin:15px 0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
	font-size:100%;
}
th {
	text-align:center;
	font-weight:bold;
}
th, td {
	padding:3px 7px;
}
ul, ol {
	margin-left:30px;
}
ul ul, ol ol {
	margin:0;
	margin-left:20px;
}
ol {
	list-style-type:decimal;
}
li {
	display:list-item;
}
dt {
	font-weight:bold;
}
dd {
	margin-left:30px;
}
fieldset {
	position:relative;
	padding:10px;
}
legend {
	position:absolute;
	top:-1em;
	margin:0;
	padding:5px 10px;
	font-size:100%;
	font-weight:bold;
}
/* ----------------------------------------------------------------------------------------------------------

2) Universal styles (display, float, margin, text-align...)

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

.bold {
	font-weight:bold
}
.box {
	min-height:1px;
}
.box:after {
	display:block;
	visibility:hidden;
	clear:both;
	line-height:0;
	font-size:0;
	/*content:".";*/
}
.relative {
	position:relative;
}
.clear {
	clear:both;
	float:none;
}
.f-left {
	float:left !important;
}
img.f-left {
	float:left;
	margin-right:15px;
}
.f-right {
	float:right !important;
}
img.f-right {
	float:right;
	margin-left:15px;
}
.t-left {
	text-align:left !important;
}
.t-center {
	text-align:center !important;
}
.t-right {
	text-align:right !important;
}
.t-justify {
	text-align:justify !important;
}
.va-top {
	vertical-align:top;
}
.va-middle {
	vertical-align:middle;
}
.va-bottom {
	vertical-align:bottom;
}
.nom {
	margin:0 !important;
}
.nomt {
	margin-top:0 !important;
}
.nomb {
	margin-bottom:0 !important;
}
.noscreen {
	display:none;
}
.bigger {
	font-size:110%;
}
.smaller {
	font-size:85%;
}
/* ----------------------------------------------------------------------------------------------------------

3) LAYOUT

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



#main {
	width:960px;
	margin:0 auto;
	text-align:left;
}
#header {
	/*position:relative;*/
	padding-bottom:0px;
	height:86px;
}
	#logo {
		float:left;
		width:700px;
		margin:0;
		font-weight:normal;
	}
	#slogan {
		margin:0;
	}
	#search {
		float:right;
		width:auto;
		text-align:right;
		margin-top:33px;
		/*position:absolte;*/
		/*bottom:15px;*/
		/*right:0;*/
		padding:7px;
	}
	#search #search-input {
		width:155px;
		padding:3px;
	}
	#search #search-submit {
		padding:2px;
		font:normal 100%/1.2 "arial", sans-serif;
	}
#nav {
	float:none;
	clear:both;
	padding-bottom:1px;
	border-left:0 !important;
	border-right:0 !important;
}
	#nav ul {
		margin:0;
		padding:0;
		list-style:none;
		font:100%/1.4 "arial", sans-serif;
	}
	#nav ul li {
		display:inline;
		margin:0;
		padding:0;
	}
	#nav ul li a {
		display:block;
		float:left;
		padding:7px 15px;
		border:0;
	}
	#nav ul li#nav-active a {
		border:0;
		font-weight:bold;
	}
#content {
	/*position:relative;*/
	float:none;
	clear:both;
	padding:10px 0 30px 0;
	/*overflow:hidden;*/
}
#footer {
	clear:both;
	font-size:85%;
	margin-top:20px;
}
/* ----------------------------------------------------------------------------------------------------------

4) Page: Home

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

#topstory {
	float:left;
	width:630px;
}
#topstory-title {
	padding-top:10px;
	padding-bottom:3px;
	padding-left:15px;
	padding-right:15px;
}
#topstory-title h2 {
	margin:0;
	margin-bottom:2px;
}
#topstory-title p.date {
	margin:0;
	font-size:85%;
}
#topstory-perex {
	display:block;
	padding-top:7px;
	padding-bottom:0px;
	padding-left:15px;
	padding-right:15px;
	font-size:110%;
	overflow:hidden;
}
#topstory-perex p {
	margin:0;
}
#aside {
	float:right;
	width:310px;
}
#aside .halfleft {
	width: 138px;
	padding: 10px 0 0 0;
	margin-left: 0;
	margin-bottom: 20px;
}
#aside .halfright {
	float: right;
	clear: none;
	margin-left: 20px;
	width: 138px;
	padding: 10px 0 0 0;
	margin-bottom: 20px;
}
#photos {
	margin:0;
	font-size:0;
	line-height:0;
}
#photos a {
	border:0;
}
#photos img {
	display:block;
	float:left;
	width:150px;
	height:110px;
	margin-left:8px;
	border:0;
}
.col30 {
	float:left;
	width:300px;
}
.col30.margin {
	margin:0 15px;
}
.col30 h4 {
	margin-bottom:3px;
}
.col30 ul {
	margin:20px 0 !important;
}
.col30 p.date {
	margin:0;
	font-size:85%;
}
.col30 p.bb {
	padding-bottom:20px;
	background:url("images/dot-02.gif") 0 100% repeat-x;
}
.col30 p img.f-left {
	margin-right:10px;
}
.col30 p {
	position:relative;
}
/* ----------------------------------------------------------------------------------------------------------

5) Page: Article

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



#page {
	float:left;
	width:630px;
}
	#page-title {
		padding:0px;
	}
	#page-title h2 {
		margin:0;
		margin-bottom:2px;
	}
	#page-title p.date {
		margin:0;
		font-size:85%;
		display:none;
	}
	#page-content {
		display:block;
		padding-top:5px;
		background:#FFF;
		font-size:110%;
		color:#666666;
	}
	#page-title {
		background:#FFF;
	}
	#page-title h2 {
		color:#00B200;
	}
	#page-title h2 a {
		border-bottom:1px solid #00B200;
		color:#00B200;
	}
	#page-title h2 a:hover {
		border-bottom:1px solid #333333;
	}
	#page-title p.date {
		color:#000;
	}
	#page-title p.date a {
		border-bottom:1px solid #5F5F5F;
		color:#000;
	}
	#page-title p.date a:hover {
		border-bottom:1px solid #FFF;
		color:#FFF;
	}
	#page-content a {
		border-bottom:1px solid #AFAFAF;
		color:#000;
	}
	#page-content a:hover {
		border-bottom:1px solid #000;
		color:#000;
	}
/* ----------------------------------------------------------------------------------------------------------

Z) Others

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



ul.ul-list {
	margin:15px 0;
	padding:0;
	list-style:none;
}
ul.ul-list li {
	margin:0;
	margin-bottom:6px;
	padding:0;
	padding-left:20px;
	background:url("images/ico-list.gif") 0 4px no-repeat;
}
#aside ul {
	margin:15px 0;
	padding:0;
	list-style:none;
}
#aside ul li {
	margin:0;
	margin-bottom:6px;
	padding:0;
	padding-left:20px;
	background:url("images/ico-list.gif") 0 4px no-repeat;
}
.hx-style01 {/*clear:both; */
	background:url("images/dot.gif") 0 50% repeat-x;
	font-size:85%;
}
.hx-style01 span {
	margin-left:15px;
	padding:0 5px;
	font-weight:bold;
	text-transform:uppercase;
}
a.ico-more {
	padding:5px 7px;
	border:0 !important;
}
.alignright {
	float:right;
}
.alignleft {
	float:left;
	margin-right:10px;
}
#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
}
#commentform textarea {
	width: 100%;
	padding: 2px;
}
#commentform #submit {
	margin: 0;
	float: right;
}
/* End Form Elements */







/* Begin Comments*/



.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}
.commentmetadata {
	margin: 0;
	display: block;
}
img.avatar {
	float:left;
	margin-right:5px;
}
/* End Comments */

/* Alan's Changes */
#header a {
	border:none;
}
#services ul {
	margin:16px 0;
	padding-top:5px;
	list-style:none;
}
#services ul li {
	height:55px;
	margin:0;
	margin-bottom:20px;
	padding:0;
	padding-top:13px;
	padding-left:82px;
	font-size:14px;
}
/* post it icons */
	#aside .textwidget #services ul li.rampit {
		background:url("images/postit_rampit.gif") 0 4px no-repeat;
	}
	#aside .textwidget #services ul li.meanit {
		background:url("images/postit_sayit.gif") 0 4px no-repeat;
	}
	#aside .textwidget #services ul li.vanilla {
		background:url("images/postit_choc_vanilla.gif") 0 4px no-repeat;
	}
	#aside .textwidget #services ul li.green {
		background:url("images/postit_green.gif") 0 4px no-repeat;
	}
.hx-style02 {/*clear:both; */
	font-size:130%;
	margin:0px;
}
.hx-style02 span {
	margin-left:0px;
	padding:0 0px;
	font-weight:bold;
	text-transform:capitalize;
}
#topstory-footer {
	display:block;
	height:15px;
	background-color: #FFFFFF;
	background-image: url(images/featured_header_bg_grey_bottom.png);
	background-repeat: no-repeat;
}
/*About Haku Wale Page */
#page-full {
	float:left;
}

/********* SERVICES *********************/
#skills_left {
	float:left;
	width:320px;
	margin-top:25px;
}	
	#skills_left ul {
		width:310px;
		background-color:#f1f1f2;
		border-right:1px solid #787878;
		min-height:500px;
		list-style:none;
		padding:0;
		margin:0;
	}
	#skills_left ul li {
		position:relative;
		z-index:100;
		width:310px;
		border-right:1px solid #787878;
		/*height:50px;*/
		color:#000000;
		border-bottom:1px solid #bababa;
		font-size:13px;
		background-color:#f1f1f2;		
	}
		#skills_left ul li:hover {
			background-color:#e5f6df;
			border-right:1px solid #787878;			
		}		
			#skills_left ul li a {
				display:block;
				font-weight:bold;
				line-height:49px;
				color:#000000;
				text-decoration:none;
				padding-top:2px;
				padding-left:84px;
				padding-right:10px;
				padding-bottom:2px;
				border:0;
				background-repeat:no-repeat;
				background-position:11px 0px;	
			}
			#skills_left li.activeSlide { 
				background-color:#fff;
				border-right:1px solid #ffffff;
			}	
		
		#skills_left ul li a:hover, #skills_left ul li.activeSlide a {
			color:#31b500;
			text-decoration:none;
			border:0;			
		}
		#skills_left li#iphone a { background-image:url("images/ico_iphone.gif");  }
		#skills_left li#media a { background-image:url("images/ico_socialmedia.gif"); }
		#skills_left li#games a { background-image:url("images/ico_games.gif"); }		
		#skills_left li#dev a { background-image:url("images/ico_dev.gif"); }
		#skills_left li#ecomm a { background-image:url("images/ico_ecommerce.gif"); }
		#skills_left li#videos a { background-image:url("images/ico_videos.gif"); }	
		#skills_left li#nonprofit a { background-image:url("images/ico_nonprofit.gif"); }	
		
		#skills_left li a:hover, #skills_left li.activeSlide a { background-position:11px -50px;}	
		
	#skills_right {
		float:right;
		width:632px; /* total 630px;*/
		height:auto;
		overflow:hidden;
		color:#000;
	}
		#skills_right #tabs {
			width:3000px;	
		}
		#skills_right .title {
			font-size:14px;
			color:#58595b;
			font-weight:bold;
		}
		#skills_right .tab {
			float:left;			
			width:325px;
			min-height:200px;
			padding-top:25px;
			padding-right:280px;
			padding-left:27px;
			background-position:right 10px;
			background-repeat:no-repeat;
		}

		#skills_right #tab-main {
			float:left;			
			width:600px;
			padding-top:55px;
			padding-right:0px;
			background-image:url(images/ico_leaves.gif);
			background-position:right 5px;
			background-repeat:no-repeat;			
		}
		#skills_right #tabs #tab-iphone { background-image:url(images/tab_iphone.gif); }
		#skills_right #tabs #tab-media { background-image:url(images/tab_media.gif); }
		#skills_right #tabs #tab-games { background-image:url(images/tab_games.gif); }	
		#skills_right #tabs #tab-dev { background-image:url(images/tab_dev.gif); }	
		#skills_right #tabs #tab-ecomm { background-image:url(images/tab_ecomm.gif); }			
		#skills_right #tabs #tab-videos { background-image:url(images/tab_videos.gif); }	
		#skills_right #tabs #tab-nonprofit { background-image:url(images/tab_nonprofit.gif); }	
		

	
/*******************************************************/
	#hakuwale_skills_left, .left  {
		float:left;
		list-style-type: none;
		margin-top:0px;
		margin-bottom:15px;
		margin-left:0px;
		margin-right:0px;
		padding:0;
		list-style:none;
		width:455px;
		text-align:left;
	}
	#hakuwale_skills_right, .right {
		float:right;	
		width:455px;
	}
	#hakuwale_skills_left li {
		margin-left:0px;
		margin-right:0px;
		margin-top:0px;
		margin-bottom:10px;
		padding-top:0px;
		padding-left:90px;
		font-size:85%;
		padding-right: 0;
		padding-bottom: 0;
	}	
	#hakuwale_skills_left li h3, #hakuwale_skills_right li h3 {
		font-weight:bold;
	}	
	#hakuwale_skills_left li .skill_bullets li {
		margin-bottom:10px;
		font-size:100%;
	}	
	#hakuwale_skills_left #contact {
		margin:0;
		padding:0;
		list-style:none;
		background:url("images/postit_email.png") left 4px no-repeat;
		padding-left:90px;
	}	
	#hakuwale_skills_left #contact input  {
		padding:2px;	
	}
	#hakuwale_skills_left li ul li, #hakuwale_skills_right li ul li {
		margin:0px;
		padding:0px;
		width:auto;
		float:none;
	}	
	#hakuwale_skills_left .skill_bullets {
		margin:0 0 0 15px;
		list-style-type: disc;
	}	
	
/*************** ABOUT *****************/
#about {
	color:#231f20;
	font-size:13px;
}

#about .title {
	font-size:16px;	
}
	
#about div.mission {
	width:109px;
	padding-right:42px;
	background-image:url(images/ico_mission.gif);
	background-repeat:no-repeat;
	background-position:right top;
}
#about div.vision {
	width:105px;
	padding-right:40px;
	background-image:url(images/ico_vision.gif);
	background-repeat:no-repeat; background-position:right top;
}
#about div.team {
	width:140px;
	padding-right:70px;
	background-image:url(images/ico_team.gif);
	background-repeat:no-repeat; background-position:right top;
}

#about .team-box {
	background-color:#f1f1f2;
	padding:12px;
	border-bottom:1px solid #ddddde;
}
	#about .team-box .photo {
		padding-right:8px;
		margin-bottom:3px;
	}
#about .team-box:after {
	float:none;
	clear:both;
}

/*********** ABOUT ACCORDION *****************/
#team-members {
	float:none;
	clear:both;
}
#team-members .head {
	cursor:pointer;
	border:0;
	text-decoration:none;
	display:block;
	padding-left:26px;
	background-image:url(images/bullet.gif);
	background-position:5px 12px;
	background-repeat:no-repeat;
	line-height:20px;
	padding-top:10px;
	padding-bottom:10px;
	border-top:1px solid #ebebeb;

}
	#team-members .head:hover {
		color:#31b500;
	}
	#team-members .selected, #team-members .active {
		color:#31b500;
	}
	#team-members .active {
		background-image:url(images/bullet_down.gif);
		background-position:5px 12px;
		background-repeat:no-repeat;		
	}
	#team-members div {
		/*border-bottom:1px solid #ebebeb;*/
		padding:5px;
		padding-bottom:8px;
		padding-left:27px;
	}

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

.wp-caption-text {
	font-size:80%;
	display:block;
	border: 1px solid #666666;
	padding:5px;
}
/* Projects Page */

#content-projects {
	position:relative;
	padding:0px 0 30px 0;
	overflow:hidden;
}
#content-projects .col30 {
	margin-top:0px;
}
.ul-projects-page {
	margin-left:0px;
}
.li-project {
	display:block;
	width:298px;
	height:235px;
	float:left;
	margin-right:15px;
	margin-bottom:15px;
	background-color:#E6E6E6;
	border: solid 1px #333333;
}
	#content-projects ul li:last-child {
		margin-right:0px;
	}
	.li-project a.project-title {
		color:#FFFFFF;
		background-color:#333333;
		border-bottom:3px solid #00B200;
		margin-bottom:5px;
		display:block;
		padding:5px 10px 5px 10px;
		font-size:.9em;
		font-weight:bold;
		letter-spacing: .1em;
	}
	.li-project a.project-title:hover {
		color:#FFFFF;
		border-bottom:3px solid #666666;
	}
	.li-project a.project-readmore {
		border-bottom:none;
		color: #AFAFAF;
		float:right;
		font-weight:bold;
	}
	.li-project a.project-readmore:hover {
		color:#666666;
	}
#page-content p {
}
.li-project .low {
	color: #333333;
}
.project-wrapper {
	padding-top:3px;
	padding-bottom:3px;
	padding-right:6px;
	padding-left:6px;
}
.li-project p {
	margin:0px 0px 10px 0px;
}
.li-project img {
	padding: 1px;
	border: solid 1px #999999;
}
blockquote {
	font-style:italic;
	font-size:80%;
}