/**
 * CSS for Jin Designs

/**
------------------------------------------------- standard tags
**/

html {
	width: 100%;
	height: 100%;
	background: url("../images/background.png") repeat;
	font-family: Calibri, Tahoma, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	color: #3D2217;
}

a {
	color: #F55E17;
	text-decoration: none;
}

a:hover {
	color: #cc3300;
}

a:visited {
	color: #CC6633;
}

strong {
	font-weight: bold;
}

h1 {
	font-size: 140%;
	font-weight: bold;
}

h2 {
	font-size: 100%;
	font-weight: bold;
}

h3 {
	font-size: 87.5%;
	font-weight: bold;
	color: #756259;
}

h3.line {
	height: 40px;
	line-height: 25px;
	background: url("../images/h3_titleline.png") no-repeat bottom;	
}


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

div.wrapper {
	width: 1050px;
	margin: 0 30px 0 30px;
}

div#header {
	height: 80px;
}

div#body {}

div#west {
	float: left;
	padding-right: 35px;
	width: 215px;
}

div#content {
	float: right;
	padding: 40px;
	width: 718px;
	background: #fff;
	border: 1px solid #D7D4BE;
}

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

div#header div.left {
	float: left;
	padding: 40px 0 0 0;
	width: 215px;
	text-align: right;
	vertical-align: bottom;
}

div#header div.right {
	float: right;
	padding: 25px 0 15px 0;
}

div#header div.right ul.nav {
}

div#header div.right ul.nav li {
	display: inline;
}

div#header div.right ul.nav li a {
	padding: 0 30px;
	color: #3D2217;
	font-weight: bold;
	text-decoration: none;
	line-height: 40px;
	height: 40px;
	border-right: 1px solid #D7D4BE;
	display: block;
	float: left;
}

div#header div.right ul.nav li a.last {
	border-right: 0;
}


/**
------------------------------------------------- west
**/

div#west div.logo {
	border-top: 1px solid #D7D4BE;
	padding: 38px 0 40px 0;
	text-align: right;
}

div#west div.spacer {
	border-top: 1px solid #D7D4BE;
	height: 320px;
}

div#west div.contact {
	border-top: 1px solid #D7D4BE;
	text-align: right;
	font-size: 87.5%;
	padding: 20px 0 40px 0;
}



/**
------------------------------------------------- content
**/

div#content p {
	font-size: 87.5%;
	line-height: 160%;
}

div#content div.col {
	width: 210px;
	float: left;
	margin-right: 40px;
}

div#content div.last {
	margin-right: 0;
}
div#content div.col p {
	margin-top: 10px;
}

div#content div.right {
	border-top: 1px solid #D7D4BE;
	width: 172px;
	float: right;
	background: url("../images/rhcolumn_background.png") no-repeat;
	padding: 14px 20px 0px 20px;
}

div#content div.right h2 {
	background: url("../images/rhcolumn_titleline.png") no-repeat bottom;
	height:25px;
	margin-bottom: 5px;
	color: #756259;
}

div#content div.right p {
	margin-top: 10px;
}

div#content div.right div.example {
	margin-top: 10px;
	background-color: #ffffff;
	border: #D7D4BE solid 1px;
	padding: 8px;
	height: 50px;
	width: 150px;
}


div#content div.right div.example img{
	border: #D7D4BE solid 1px;
}


/**
------------------------------------------------- call to action banners
**/

div#content div.more {
	width: 392px;
	border: 1px solid #D7D4BE;
	margin: 40px 0 0 0;
	padding: 10px 10px 10px 66px;
	clear: left;
	height: 46px;
	line-height: 150%;
	background: #F7F6F2 url("../images/more.png") no-repeat 10px 10px;
}

div#content div.more h2 {
	color: #3D2217;
}

div#content div.more p {
	color: #756259;
}

div#content div.more strong {
	color: #3D2217;
}



/**
------------------------------------------------- newsletter subscribe
**/
div#content div.news {
	width: 172px;
	padding: 20px;
	background: url("../images/rhcolumn_background.png") no-repeat;
	border-top: 1px solid #D7D4BE;
	margin-top: 20px;
}

div#content div.news h2 {
	background: url("../images/rhcolumn_titleline.png") no-repeat bottom;
	height:25px;
	margin-bottom: 5px;
}	

div#content div.news input.text {
	font-size: 80%;
	width: 165px;
	padding: 2px;
	margin: 10px 0 0 0;
	color: #3D2217;
}

div#content div.news input.submit {
	margin-top: 10px;
}

/**
------------------------------------------------- footer
**/

div#footer {
	height: 300px;
	clear: both;
	padding: 15px 0 0 250px;
}

div#footer div.left {
	float: left;
}

div#footer div.right {
	float: right;
}

div#footer ul.nav {}

div#footer ul.nav li {
	display: inline;
}

div#footer ul.nav li a {
	color: #756259;
	font-size: 80%;
	padding: 0 10px 0 5px;
	border-right: 1px solid #756259;
}

div#footer ul.nav li a:hover {
	color: #F55E17;
}


div#footer ul.nav li a.first {
	padding-left: 0;
}

div#footer ul.nav li a.last {
	border-right: 0;
}

div#footer p {
	color: #756259;
	font-size: 80%;
}

div.logos{
	padding-top: 20px;


}

div.logos div.logoleft{
	float: right;
		margin-right: 10px;

}

div.logos div.logoright{
	float: right;

}


/**
------------------------------------------------- main nav tabs
**/

div#header div.right ul.nav li a.homeNav {
	color: #663300;
}
 
div#header div.right ul.nav li a.aboutNav {
	color: #56ACDC;
}

div#header div.right ul.nav li a.servicesNav {
	color: #669900;
}

div#header div.right ul.nav li a.portfolioNav {
	color: #990033;
}

div#header div.right ul.nav li a.clientsNav {
	color: #FF9900;
}

div#header div.right ul.nav li a.lastcontactNav {
	color: #F55E17;
	border-right: 0;
}

div#header div.right ul.nav li a.last {
	border-right: 0;
}

div#header div.right ul.nav li a:hover {
	background-color: #D7D4BE;
}

/**
------------------------------------------------- h1 title colours
**/

h1.titleAbout {
	color: #56ACDC;
}

h1.titleServices {
	color: #669900;
}

h1.titlePortfolio {
	color: #990033;
}

h1.titleClients {
	color: #FF9900;
}

h1.titleContact {
	color: #F55E17;}

/**
------------------------------------------------- home page
**/

body#home div#header div.right ul.nav li a.current {
	color: #B2A7A3;
}

body#home h1 {
	margin-bottom: 10px;
}

body#home div.recent {
	margin: 25px 0 10px 0;
	background: url("../images/divider_home.png") no-repeat 0 bottom;
}

body#home div.recent div.leftheader {
	float: left;
	width: 400px;
}

body#home div.recent div.rightheader {
	float: right;
	width: 317px;
	background: url("../images/rh_header_background.png") no-repeat;
}

body#home div.recent div.rightheader h2{
	margin-top: 30px;
}

body#home div.recent div.rightheader p{
	margin-right: 40px;
}

body#home div.recent div.clear-line {
	clear: both;
	height: 20px;
}

body#home div#content div.listprint {
	padding: 10px 0 20px 45px;
	background: url("../images/icon_home_print.png") no-repeat 0 12px;
}

body#home div#content ul.listprint {			
}

body#home div#content  ul.listprint p {
	margin-top: 5px;	
}

body#home div#content  ul.listprint li {
	background: url("../images/bullet_arrow.png") no-repeat 0 7px;
	padding: 0 0 0 20px;
}

body#home div#content ul.listprint li a {
	font-size: 87.5%;
}

body#home div#content div.listweb {
	padding: 10px 0 20px 45px;
	background: url("../images/icon_home_web.png") no-repeat 0 12px;
}

body#home div#content ul.listweb {
}

body#home div#content  ul.listweb p {
	margin-top: 5px;
}

body#home div#content  ul.listweb li {
	background: url("../images/bullet_arrow.png") no-repeat 0 7px;
	padding: 0 0 0 20px;
}

body#home div#content ul.listweb li a {
	font-size: 87.5%;
}

body#home div#content div.phone {
	padding: 5px 0 5px 40px;
	height: 40px;
	background: url("../images/icon_home_phone.png") no-repeat 0 6px;
}

body#home div#content div.phone p {
	margin-top: 0;
}

body#home div#content div.email {
	padding: 5px 0 5px 40px;
	height: 40px;
	background: url("../images/icon_home_email.png") no-repeat 0 6px;
}

body#home div#content div.email p {
	margin-top: 0;
}


/*
------------------------------------------------- left hand nav
*/

div.spacer {
	text-align: right;
	height: auto;
	min-height: 320px;
}

div.spacer h2 {
	margin-top: 40px;
}

div.spacer h3 {
	margin-top: 10px;
}

div.spacer ul li a {
	font-size: 87.5%;
}

div.spacer ul li a.current {
	font-weight: bold;
}

div.spacer ul li a:hover {
	color: #CC3300;
}

p.client {
	font-weight: bold;
	margin: 20px 0 10px 0;
}

p.client a {
	padding-left: 20px;
	background: url("../images/bullet_arrow.png") no-repeat 0 7px;
}

/**
------------------------------------------------- individual services pages
**/

body#services h1 {
	font-size: 180%;
}

body#services p {
	margin-bottom: 20px;
}

body#services div#content div.left {
	background: url("../images/h1_titleline.png") no-repeat top left;
	width: 471px;
	float: left;
	padding-right: 35px;
	padding-bottom: 40px;
}

body#services div#content div.left h2 {
	height: 50px;
	line-height: 50px;
	font-size: 115%;
	background: url("../images/h2_titleline.png") no-repeat left bottom;
}

body#services div#content div.left .lightbrown{
	color: #756259;
}

body#services div#content div.left ul.listTick {
	margin: 10px 0;
}

body#services div#content div.left ul.listTick li {
	background: url("../images/bullet_tick_green.png") no-repeat 0 1px;
	padding-left: 20px;
	font-size: 87.5%;
	line-height: 150%;
}

body#services div#content div.listArrow {
}

body#services div#content ul.listArrow {
	font-size: 87.5%;
	line-height: 160%;
}

body#services div#content  ul.listArrow li {
	background: url("../images/bullet_arrow.png") no-repeat 0 8px;
	padding: 0 0 0 20px;
}

body#services div#content ul.listArrow li a {
			font-size: 100%;
}

body#services div#content div.left h3 {
	font-size: 100%;
	font-weight: bold;
}

body#services div#content div.col {
	margin: 0 45px 40px 0;
}

body#services div#content div.last {
	margin-right: 0;
}



/**
------------------------------------------------- main pages
**/

body#main h1 {
	font-size: 180%;
}

body#main p {
	margin-bottom: 20px;
}

body#main div#content div.left {
	background: url("../images/h1_titleline.png") no-repeat top left;
	width: 471px;
	float: left;
	padding-right: 35px;
}

body#main div#content div.left h2 {
	height: 50px;
	line-height: 50px;
	font-size: 115%;
	background: url("../images/h2_titleline.png") no-repeat left bottom;
}

body#main div#content div.left .lightbrown{
	color: #756259;
}

body#main div#content div.left h3 {
	
	font-size: 100%;
	font-weight: bold;
}

body#main div#content div.col {
	margin: 0 45px 40px 0;
}

body#main div#content div.last {
	margin-right: 0;
}

/**
------------------------------------------------- client page
**/

body#clients h1 {
	font-size: 180%;
}

body#clients p {
	margin-bottom: 20px;
}

body#clients div#content div.left {
	background: url("../images/h1_titleline.png") no-repeat top left;
	width: 471px;
	float: left;
	padding-right: 35px;
}

body#clients div#content div.left h2 {
	height: 50px;
	line-height: 50px;
	font-size: 115%;
	background: url("../images/h2_titleline.png") no-repeat left bottom;
}

body#clients div#content div.left .lightbrown{
	color: #756259;
}

body#clients div#content div.left h3 {	
	font-size: 100%;
	font-weight: bold;
	height: 45px;
	line-height: 40px;
	padding-left: 33px;
}

body#clients div#content div.left h3.lineTravel { 	
	background: url("../images/h3_titleline_travel.png") no-repeat bottom;
}

body#clients div#content div.left h3.lineSport { 	
	background: url("../images/h3_titleline_sport.png") no-repeat bottom;
}

body#clients div#content div.left h3.lineHealth { 	
	background: url("../images/h3_titleline_health.png") no-repeat bottom;
}

body#clients div#content div.left h3.lineServices { 	
	background: url("../images/h3_titleline_services.png") no-repeat bottom;
}

body#clients div#content div.left h3.lineCharities { 	
	background: url("../images/h3_titleline_charities.png") no-repeat bottom;
}

body#clients div#content div.left h3.lineRetail { 	
	background: url("../images/h3_titleline_retail.png") no-repeat bottom;
}

body#clients div#content div.col {
	margin: 0 45px 30px 0;
}

body#clients div#content div.last {
	margin-right: 0;
}

body#clients div#content div.list {
}

body#clients div#content ul.list {
	font-size: 87.5%;
	line-height: 160%;
}

body#clients div#content  ul.list li {
	background: url("../images/bullet.png") no-repeat 0 8px;
	padding: 0 0 0 20px;
	margin-left: 10px;
	
}
body#clients div#content ul.list li a {
			font-size: 100%;
			}

body#clients div#content div.right {
	border-top: 1px solid #D7D4BE;
	width: 172px;
	float: right;
	background: url("../images/rhcolumn_background.png") no-repeat;
	height: 250px;
	padding: 14px 20px 40px 20px;
}

body#clients div#content div.right h2 {
	background: url("../images/rhcolumn_titleline.png") no-repeat bottom;
	height:25px;
	margin-bottom: 5px;
	color: #756259;
}

body#clients div#content div.right p {
	margin-top: 10px;
}

body#clients div#content div.right div.example {
	height: 55px;
	margin-top: 10px;
	border: #D7D4BE solid 1px;
}

/**
------------------------------------------------- contact page
**/

body#contact h1 {
	font-size: 180%;
}

body#contact p {
	margin-bottom: 20px;
}

body#contact div#content div.left {
	background: url("../images/h1_titleline.png") no-repeat top left;
	width: 471px;
	float: left;
	padding-right: 35px;
}

body#contact div#content div.left h2 {
	height: 50px;
	line-height: 50px;
	font-size: 115%;
	background: url("../images/h2_titleline.png") no-repeat left bottom;
}

body#contact div#content div.right {
	border-top: 1px solid #D7D4BE;
	width: 172px;
	float: right;
	background: url("../images/rhcolumn_background.png") no-repeat;
	padding: 14px 20px 40px 20px;
}

body#contact div#content div.right h2 {
	background: url("../images/rhcolumn_titleline.png") no-repeat bottom;
	height:25px;
	margin-bottom: 5px;
	color: #756259;
}

body#contact div#content div.right h3 {
	font-size: 95%;
	color: #756259;
	margin-top: 15px;
	font-weight: bold;
}

body#contact div#content div.right p {
	margin-top: 5px;
}

body#contact div#content div.right .brown {
	color: #3D2217;
	font-weight: bold;
}


/**
------------------------------------------------- portfolio index page
**/

body#portfolio div#header div.right ul.nav li a.portfolio {
	color: #990033;	
}

body#portfolio h1 {
	font-size: 180%;
	color: #990033;
	background: url("../images/h1_titleline.png") no-repeat bottom left;
	height: 50px;
}

body#portfolio div#content h2 {
	background: url("../images/h1_titleline_portfolio.png") no-repeat bottom left;
	height: 40px;
	font-size: 115%;

}

body#portfolio div#content h2.portfolioHome{
	background: url("../images/h1_titleline.png") no-repeat bottom left;
	height: 40px;
	font-size: 115%;
}

body#portfolio div.example {
	float: left;
	margin: 20px 27px 0 0;
}

body#portfolio div.last {
	margin-right: 0;
}

body#portfolio div.example div.exampleimg {
	border: 1px solid #D7D4BE;
	padding: 10px;
	width: 199px;
	height: 66px;
}

body#portfolio div.example div.exampleimg img {
	border: 1px solid #D7D4BE;
}

body#portfolio div.example p {
	margin-top: 10px;
}

body#portfolio div.spacer {
	text-align: right;
	height: auto;
	min-height: 320px;
}

body#portfolio div.spacer h2 {
	margin-top: 40px;
}

body#portfolio div.spacer ul li a {
	font-size: 87.5%;
}

body#portfolio div.spacer ul li a.current {
	font-weight: bold;
}

body#portfolio p.client {
	font-weight: bold;
	margin: 20px 0 10px 0;
}

body#portfolio p.client a {
	padding-left: 20px;
	background: url("../images/bullet_arrow.png") no-repeat 0 7px;
}

/**
------------------------------------------------- portfolio page
**/

body#portfolio div#content div.left {
	float: left;
	width: 210px;
	padding-right: 40px;
}

body#portfolio div#content div.left p {
	margin: 5px 0;
}

body#portfolio div#content div.left h3 {
	color: #3D2217;
}

body#portfolio div#content div.left ul {
	margin: 10px 0;
}

body#portfolio div#content div.left ul li {
	background: url("../images/bullet_tick_green.png") no-repeat 0 1px;
	padding-left: 20px;
	font-size: 87.5%;
	line-height: 150%;
}

body#portfolio div#content a.launch {
	padding-left: 20px;
	background: url("../images/bullet_arrow.png") no-repeat 0 6px;
	font-weight: bold;
	font-size: 87.5%;
}

body#portfolio div#content div.rightportfolio {
	float: right;
	width: 388px;
	padding: 30px 40px 40px 40px;
	background: url("../images/portfolio_background.png") no-repeat right top;
}

body#portfolio div#content div.services {
	border-top: 1px solid #D7D4BE;
	border-bottom: 1px solid #D7D4BE;
	padding: 15px 0 15px 0;
	margin: 15px 0 15px 0;
}

body#portfolio div.ibar {
	border-top: 1px solid #D7D4BE;
	padding-top: 10px;
	margin-top: 40px;
}

body#portfolio div.ibar div#name {
	font-size: 80%;
	float: left;
}

body#portfolio div.ibar div#list {
	float: right;
}

body#portfolio div.ibar div#list ul.images {
}

body#portfolio div.ibar div#list ul.images li {
	display: inline;
}

body#portfolio div.ibar div#list ul.images li a {
	display: block;
	float: left;
	width: 14px;
	height: 14px;
	line-height: 12px;
	font-size: 80%;
	text-align: center;
	border: 1px solid #fff;
}

body#portfolio div.ibar div#list ul.images li a.current {
	border-color: #CAC8B3;
	color: #756259;
}



/**
------------------------------------------------- Reliance page
**/

div#content div.products p {
	color: #3D2217;

}

div#content div.products img {
	float:  right;

}

div#content div.products strong {
	font-weight: bold;
}



div#content div.classic {
	margin: 20px 0 0 0;
	padding: 10px 10px 10px 10px;
	clear: left;
	height: 70px;
	line-height: 150%;
	background: #E1F5CD;
		width: 390px;
}

div#content div.classic h5 {
	color: #669900;
	font-size: 150%;
	padding-bottom: 5px;

}


div#content div.online {
	margin: 20px 0 0 0;
	padding: 10px 10px 10px 10px;
	clear: left;
	height: 70px;
	line-height: 150%;
	background: #FFF5CD;
	width: 390px;
}

div#content div.online h5 {
	color: #FF9900;
	font-size: 150%;
	padding-bottom: 5px;

}


div#content div.pro {
	margin: 20px 0 0 0;
	padding: 10px 10px 10px 10px;
	clear: left;
	height: 70px;
	line-height: 150%;
	background: #DEEFF8;
	width: 390px;
}

div#content div.pro h5 {
	color: #56ACDC;
	font-size: 150%;
	padding-bottom: 5px;

}










body#services div#content div.right ul.listTick {
	margin: 10px 0;
}

body#services div#content div.right ul.listTick li {
	background: url("../images/bullet_tick_green.png") no-repeat 0 1px;
	padding-left: 20px;
	font-size: 87.5%;
	line-height: 150%;
}

body#services div#content div.right p.small {
	font-size: 80%;
	text-align: center;
}