/*
Theme Name: Jin & Co.
Theme URI: 
Description: 
Version: 0.3
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: 20px;/*24px;*/
}
a {
	color: #3073cf;
}
	a:hover {
		/*color: #f8a400;*/
	}

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-top: 40px;	/*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;
		/*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{
		float: left;
		text-align: left;
		font:40px "Georgia",Times New Roman,serif;
		color: #fff;
		margin:80px 0 20px 0;
	}
	#about p {
		width: 295px;
		font:14px "Georgia",Times New Roman,serif;
		text-align: justify;
		line-height: 24px;
		
	}
	#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 "Georgia",Times New Roman,serif;
		color: #5581b7;
	}
	#contact p {
		font-family:"Georgia", Times New Roman, serif;
		line-height: 30px;
	}
	#contact input{
		line-height: 30px;
		font-size: 16px;
		padding: 3px;
		width:320px;
	}
	#contact textarea {
		width:320px;
		font:16px "arial", sans-serif;
		padding: 6px;
		line-height: 24px;
	}
	

/*=== =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-bottom: 30px;
	}
	
#project{
	float: left;
	margin-left: -20px;
	width: 960px;
	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-family: "Georgia", Times New Roman, serif;
		color: #666;
}
	#description p.introduction:first-letter {
		font:500% "Georgia", Times New Roman, serif;
		float : left;
		width : 1em;
		margin: 10px 3px 0 0;
		color: #22427d;
	}
	#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{
	float: left;
	margin:0 20px 20px 0;
	width: 620px; 
    height:430px;
    background-color: #fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

	
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 620px;
	height:390px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img {
	float:left;
	cursor:pointer;
}

/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
}


/*=== =scrollable buttons ===*/

a.browse {
	background:url("images/slider-buttons.png") no-repeat scroll 0 0 transparent;
	cursor:pointer;
	display:block;
	float:left;
	font-size:1px;
	height:30px;
	margin:10px;
	width:30px;
}

a.right {
	float: right;
	background-position:0 -30px;
	clear:right;
	margin-right:15px;
}
a.right:hover {
	background-position:-30px -30px;
}
a.right:active {
	background-position:-60px -30px;
}
a.left {
	float: left;
	margin-left:15px;
}
a.left:hover {
	background-position:-30px 0;
}
a.left:active {
	background-position:-60px 0;
}
a.disabled {
	visibility:hidden !important;
}


/*=== =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;
}


/*=== =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;*/
	}


#benefits{
	float: left;
	width: 460px;
}
	#benefits h3{
		text-align: left;
		font-size: 30px;
		font-style: normal;
	}
	#benefits ul{
		margin-bottom: 40px;
	}
	#benefits ul li{
		list-style: disc;
		line-height: 24px;
	}
	
#form{
	float: right;
	width: 420px;
	margin:0 20px 20px 0;
	padding:10px 20px 20px 20px;
	background:#fff2ad;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
	#form h3{
		font-style: normal;
	}

	#form #contact{
	width: 380px;
	padding:0;
	background-color: #FFF2AD;
	text-align: center;
	font:16px "Georgia",Times New Roman,serif;
	font-weight: 100;
	color: #000;
}
	#form #contact p{
		margin:10px 0;
	}
	#form #contact input{
		margin:8px 0;
	}
	#form #contact textarea {
		width: 380px;
		margin: 10px auto 0 auto;
		padding: 5px;
		font:14px "Georgia",Times New Roman,serif;
	}

#testimonials h2{
	text-align: center;
	color: #fff;
	margin: 40px 0;
}
#testimonials h4{
	margin:20px 10px 10px 10px;
	font:18px "Georgia", Times New Roman, serif;
	color: #5581b7;
}

.testimonial {
	float: left;
	margin:0 20px 20px 0;
	width: 300px;
	height: 268px;
	text-align:left;
	vertical-align: bottom;
}
.testimonial img{
	float: left;
	width: 120px;
	height: 120px;
	margin:0 10px 5px 0px;
	padding:0;
}
.testimonial .quote{
	font-size: 12px;
	line-height: 20px;
	padding: 0;
	height: 100%;
}