/*
Theme Name: Jin & Co.
Theme URI: 
Description: 
Version: 0.4
Author: Jin Wang
Author URI: http://www.jin.com.au
*/

/*=== Colour Palette ===*/
bg #addeda 
	bg top gradient #63c0b6
	show me #339388
	everything bg #7dcfc6
bg darker #78bbb5
bg lighter #e3f3f2
Royal blue #5581b7
Navy #22427d
Dark Turquise: #327f78
Yellow: #ffe65c
Light yellow #fff2ad
Purple: #634579
Orange: #f8a400

/*=== Setup ===*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*=== /setup ===*/
body {
    font-size: 14px;
    font-family: Arial, sans-serif;
    background: #abeee7 url('images/bg-tile.jpg') repeat-x;
}
p {
	line-height: 17px;/*20px,24px;*/
}
a {
	text-decoration:none;
	color: #3073cf;
}
	a:hover {
		/*color: #f8a400;*/
		text-decoration:underline;
	}

h2 {
	
}
	h2 a {
	text-decoration: none; 
}
.clear {
    clear:both; 
    display:block; 
    height:1px; 
	margin:-1px 0 0 0;
}

.alignleft {
	float: left;
}
.alignright {
	float: right;
}

#wrapper {
	width: 960px;
    margin: 0px auto;
}

/*=== =header ===*/

#header{
	float: left;
    height: 100px;/*50px;*/
    width: 940px;
}
	#header span{
		position: relative;
		float: left;
		top:23px;
		left:596px;
		font-size: 14px;
		color: #339388;
		font-style: italic;
	}
	
#logo a {
    display:block;
	float: left;
    width: 150px;
    height:36px;
    background: url('images/logo.png') no-repeat;
    text-indent: -9999px;
}
	#logo a:hover {
		background: url('images/logo.png') no-repeat;
		background-position: -151px 0;
	}

/*=== =dropdown ===*/

	/* General */
	#dropdown{
		float: right;
		position: relative;
		top:16px;
		background-color: #78bbb5;/*ffe65c;*/
		z-index: 99;
	}
		#dropdown a {
			text-decoration: none;
		} 
	#dropdown ul { list-style: none; }
	#dropdown, #dropdown * { padding: 0; margin: 0; }
	
	/* Head links */
	#dropdown a.everything{
		background-image:url('images/dropdown-arrow.png');
		background-repeat:no-repeat;
		background-position:98px 10px;
		background-color: #addeda;/*634579;*/
		display:inline;
		float:left;
		padding:6px 10px;
		text-align:left;
		width:100px;	
		color:#fff;
		font-size:14px;
		line-height: 19px;
	}
	#dropdown a.everything:hover{
		background-color:#5581b7;/*78bbb5;/*f8a400;*/
		color:#fff;
		background-position:98px -12px;
	}

	/* Child lists and links */
	#dropdown li.headlink ul { 
		padding-top: 30px;
		display: none;
	}
	#dropdown li.headlink:hover ul { display: block; }
	#dropdown li.headlink ul li a { 
		display: block; 
		padding: 6px 12px;
		font-size: 14px;
		color: #22427d;/*634579;*/
		border-bottom:#5581b7 1px solid;/*f8a400*/
		
	}
		#dropdown li.headlink ul li a:hover {
		background-color:#5581b7;/*f8a400;*/
		color: #fff;
		}
	
	/* Pretty styling */
	#dropdown a { color: white; } 
	#dropdown ul li a:hover { text-decoration: none; }
	#dropdown li.headlink {}
	#dropdown li.headlink ul {}

/*=== /dropdown ===*/


.box {
	float: left;
	margin:0 20px 20px 0;
	width: 300px;
	height: 268px;
	text-align:center;
}
	.box:hover {
		background: #5581b7;/*634579;*/
		cursor: pointer;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
	}
		.related:hover{
			background: none;
			cursor: default;
		}
		.box:hover h3{
			color: #fff;
		}
		.box:hover p  {
			color: #78bbb5;/*f8a400;*/
		}
		.box:hover p.related {
			background: none;
			color: #333;
		}
	.box a {
		display: block;
		height: 268px;
		color:#333;
		text-decoration: none;
	}
	.box a img {
		border-style: none;
		text-decoration: none; 
	}
	.box a:hover {
		color: #fff;
	}
	.box img{
		width: 300px;
		height: 188px;
	}
	.box h3 {
		margin: -60px 0 0 0;
	}
	.box p{
		color: #333;
		font-family: Georgia;
		font-style: italic;
		margin: 0;
	}


.box-feature {
	float: left;
	margin:0 20px 0 0;
	width: 460px;
	text-align:center;
}
	.box-feature h3{
		text-align: left;
	}
	.box-feature p{
		text-align: left;
	}



		/*=== =home ===*/
		
		#home-feature{
			display: block;
			float: left;
			width: 940px;
			/*height:	316px; bring back with photo */
			text-align: center;/*with no image*/
		}
			#home-feature h2{
				/*width: 620px; no image */
				margin: 40px 0 0 0;	/*margin:0; backup */
				font:60px "Georgia", Times New Roman, serif;
				font-weight: bold;
				color: #fff;
			}
			#home-feature h3{
				/*width:500px; no image */
				font:24px "Georgia", Times New Roman, serif;
				margin: 10px 0px 30px
				/*color:#fff;*/
			}
			#home-feature img{
				position: relative;
				top:-325px;
				left: 560px;
				z-index: -1;
			}
	
				/*=== =about / contact ===*/
				
				#about {
					margin: 40px auto 0 auto;
				    width: 620px;/*460*/
				    height:402px;
				    background: url('images/about_photo_jin.jpg') no-repeat 315px 0;
				}
					#about h2{
						display:block;
						float: left;
						width: 295px;
						text-align: left;
						font:40px "Arial", sans-serif;
						color: #fff;
						margin:80px 0 20px 0;
						clear:both;
					}
					#about p {
						width: 295px;
						font:14px Arial, sans-serif;
						text-align: justify;
						line-height: 22px;
						
					}
					#about p#photo{
						/*width:230px;*/
					}
				
				.sub-feature {
					margin: 40px auto;
				    width: 460px;
				}
					.sub-feature h2{
						text-align: center;
						font:40px "Georgia",Times New Roman,serif;
						color: #fff;
					}.sub-feature p {
						font:18px "Georgia",Times New Roman,serif;
						text-align: justify;
						line-height: 24px;
					}
				
				#contact.category{margin:60px auto 40px auto;}
				#contact {
					margin:0 auto 40px auto;
				    width: 620px;
					-moz-border-radius:5px;
					-webkit-border-radius:5px;
					background:#faffff;
					text-align: center;
					padding: 40px 0;
				}
					#contact h2{
						text-align: center;
						font:40px "Arial", sans-serif;
						color: #5581b7;
					}
					#contact p {
						font-family: Arial, sans-serif;
						line-height: 28px;
					}
					#contact input{
						font:14px "Arial", sans-serif;
						line-height: 20px;
						font-size: 14px;
						padding: 3px;
						width:320px;
					}
					#contact textarea {
						width:320px;
						font:14px "arial", sans-serif;
						padding: 6px;
						line-height: 22px;
					}
					.wpcf7-mail-sent-ok{color:green;}
	

						/*=== =page ===*/
						
						#feature{
							display: block;
							float: left;
							width: 940px;
							margin-bottom: 20px;
						}
							#feature h2{
								margin:0;
								font:60px "Georgia", Times New Roman, serif;
								text-align: center;
								color: #fff;
							}
							#feature h3{
								font:18px "Georgia", Times New Roman, serif;
								font-style: italic;
								color:#000;
								text-align: center;
								margin:10px 0 30px 0;
							}
							
						#project{
							float: left;
							margin-left: -20px;
							width: 960px;
							/*height:500px;*/
							padding: 20px 0 0 20px;
							background: #faffff;/* url('images/bg2.png'); /*fff2ad;*/
							/*border: #f8a400 1px dotted;*/
							-moz-border-radius:5px;
							-webkit-border-radius:5px;
						}
							#project h2{
								color: #000;
							}
						#description{
								float: left;
								width: 300px;			
								margin-right: 20px;
								font:13px "Arial", sans-serif;
								color: #666;
						}
							#description p.introduction:first-letter {
								font:54px "Arial", sans-serif;
								float : left;
								width : 40px;
								/*margin: 6px 6px 0 0;*/
								color: #22427d;
									line-height: 16px;
									padding-right: 1px;
									padding-top: 18px;
							}
									#description .caps {
										font:60px "Arial", sans-serif;
										float : left;
										/*width : 60px;*/
										/*margin: 6px 6px 0 0;*/
										color: #22427d;
										line-height: 14px;
										padding-right: 4px;
										margin-top:-4px;
										height:50px;
										/*padding-top: 18px;*/
							}
							#description blockquote{
								margin: 1em 10px;
								padding-left: 10px;
								font-style: italic;
								color: #333;
								border-left: #666 dotted thin;
							}
						
						.related{
							text-align: left;
							vertical-align: bottom;
						}
						
						h2.related{
							font-size: 20px;
						}


						/*=== =slider ===*/
						
						#slider-wrap{display:block;float:left;width:620px;height:480px;}
						#slider-wrap.print{margin-right:20px;}
						
						#slider{float:left;width:620px;margin-bottom:20px;}	
							#slider img{width:620px;}
						
						#slider ul, #slider li{
							margin:0;
							padding:0;
							list-style:none;
							}
						#slider, #slider li{ 
							width:620px;
							height:403px;
							overflow:hidden; 
							}
						span#prevBtn a{float:left;width:56px;padding:6px;border:#3073CF 1px solid;margin-right:6px;text-decoration:none;-moz-border-radius:3px;-webkit-border-radius:3px;}
						span#nextBtn a{float:left;width:56px;padding:6px;text-align:center;border:#3073CF 1px solid;text-decoration:none;-moz-border-radius:3px;-webkit-border-radius:3px;}
						span#prevBtn a:hover,
						span#nextBtn a:hover{background-color: #5581B7;border:none;color:#fff}

/*=== =footer ===*/
#footer{
	width: 940px;
	border-top: #78bbb5 1px solid;/*eee*/
	margin: 20px 0;
}
#copy{
	text-align: center;
	color: #327f78;
	margin-bottom: 20px;
	font-size: 12px;
}

#footerLinks{
	text-align: center;
	color: #327f78;
	margin-bottom: 20px;
	font-size: 12px;
}


		/*=== =landing ===*/
		.landing-nav{
			float: right;
			margin: 23px 20px 0 0;
		}
		.landing-nav div.gohome{
			display: inline;
			color: #339388;;
			font-style: italic;
			font-size:14px;
			margin-right:6px;
		}
		.landing-nav a{
			display: inline;
			padding: 6px;
			color:#fff;
			font-size:14px;
			text-decoration: none;
		}
			.landing-nav a:hover{
				background-color: #7DCFC6;/*ffe65c;*/
			}
		
		
		#author-intro{
			float: left;
			margin:19px 0 24px 0;
			width:530px;
		}
			#author-intro h3{
				text-align: center;
				font-size: 26px;
				font-style: normal;
				margin-bottom:14px;
				color:#000;
			}
			
		#benefits{float:left;width:530px;}
			#benefits ul{
				margin-bottom: 40px;
				padding-left:16px;
			}
			#benefits ul li{
				list-style:square;
				line-height: 22px;
			}
		
		.call-to-action{
			clear: both;
			margin: 50px 0 30px 0;
			overflow: hidden;
			padding: 20px;
			text-align: center;
			font-style:normal;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border: 1px solid #D5D6D7;
			background:#f1f1f1;
		}	
		
		#form{
			float:left;
			width: 240px;
			margin:0 40px 20px 0;
			padding:30px 20px 0 40px;
			background:#fff2ad;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
		}
			#form h3{
				font-style: normal;
				font-size:16px;
			}
		
			#form #contact{
			width: 230px;
			margin:0 0 30px 0;
			padding:0;
			background-color: #FFF2AD;
			text-align: center;
			font:16px Arial, sans-serif;
			font-weight: 100;
			color: #000;
		}
			#form #contact p{
				text-align:left;
				margin:14px 0;
				font-size:13px;
				line-height:14px;
			}
			#form #contact input{
				margin:4px 0;
				line-height:0;
				width:210px;
			}
			#form #contact textarea {
				width: 210px;
				margin: 4px auto 0 auto;
				padding: 5px;
				font:12px Arial, sans-serif;
			}


				/*=== =landing dev ===*/
				#content{float:left;width:520px;margin-left:30px;padding-right:60px;}
				#authors{padding:0 30px}
				#authors h3{
					width:880px;
					text-align: center;
					color: #000;
					margin: 20px 0;
					padding:14px 0;
					border-top: 3px double #D5D6D7;
					border-bottom: 3px double #D5D6D7;
				}
				.author {
					float: left;
					margin:20px 20px 40px 0;
					width:280px; /*460px;*/
					height:120px;
					text-align:left;
					vertical-align: bottom;
					font:12px "Arial" sans-serif;
				}
					/*.author a{display:block;width:280px;height:120px;z-index:100;}
					/*.author:hover {
						background:#5581b7;/*#9ab5d6;/*#5581b7;634579;
						cursor: pointer;
						-moz-border-radius:5px;
						-webkit-border-radius:5px;
						color:#78BBB5;
					}*/
					.author a img{float:left;}
					.author p{
						margin:8px 0 4px 0;
						font-weight:normal;
						color:#666; /*#5581b7;*/
						line-height:14px;
					}
						/*.author:hover h4{color:#fff;}*/
					.author img{
						width: 120px;
						height: 120px;
						margin:0 10px 0 0px;
						padding:0;
					}
					.author cite{width:135px;margin:0 0 16px 0;font:16px "Georgia", Times New Roman, serif;font-style:normal;}
					.author a.more{width:135px;line-height:16px;font-size:10px;text-decoration:underline;}
					.author a.more:hover{color:navy}
			
/* WP instructions */

#wpGuide { clear: both; margin-bottom: 20px; }
#wpGuide .page { width: 600px; margin: 0 auto; background: white; border-radius: 8px; border: 1px solid silver; padding: 30px; }
#wpGuide .wpLogo { margin: 10px 0 20px 20%; }
#wpGuide h1 { text-align: center; margin-bottom: 20px; }
#wpGuide h2, #wpGuide h3 { margin-bottom: 0; }
#wpGuide p { margin-top: 0; }