/* Global */
html, body {
margin:0;
padding:0;
text-align:center;
overflow-x:hidden;
}
#container
{
margin:0 auto;
background-color:#FFFFFF;
}
img
{
border-style:none;
}
.clearboth
{
clear:both;
}
.floatleft
{
float:left;
}
#logo-container {
float:left;
width:473px;
padding-top:10px;
}
.centerimg 
{ 
margin:20px auto;
padding:0px;
text-align:center;
}
/* Nav Bar */
#top
{
margin:auto;
margin-bottom:5px;
padding:10px;
background-color:#FFFFFF;
font-family:'Merriweather Sans', Arial, sans-serif;
font-weight:500;
}
#top ul
{
list-style-type:none;
margin:0;
padding:0;
margin-bottom: 10px;
}
#top ul li {
display:inline-block;
*display:inline;
*zoom:1;
text-align:left;
font-size:13px; font-size:1.3rem;
line-height:14px; line-height:1.4rem;
margin:30px 20px 0 20px;
}
#top ul li a:link
{
color:#999;
font-family:Open Sans, Arial, Helvetica, sans-serif;
font-size:13.5px; font-size:1.35rem;
}
#top ul li a:visited
{
color:#999;
font-family:Open Sans, Arial, Helvetica, sans-serif;
text-shadow: rgb(171, 119, 102) 0px 1px 1px;
}
#top ul li a:hover
{
color:#731c00;
font-family:Open Sans, Arial, Helvetica, sans-serif;
text-shadow: rgb(171, 119, 102) 0px 1px 1px;
}
#top ul li a:active
{
color:#731c00;
font-family:Open Sans, Arial, Helvetica, sans-serif;
text-shadow: rgb(171, 119, 102) 0px 1px 1px;
}
#lang
{
font-size:14.5px; font-size:1.45rem;
float:right;
padding-right:20px;
}
.abtus {
background: url(https://www.vtpc.com.sg/images/abtus_off.png) no-repeat;
width:100%;
}
.abtus:hover {
background: url(https://www.vtpc.com.sg/images/abtus_over.png) no-repeat;
}
.property {
background: url(https://www.vtpc.com.sg/images/property_off.png) no-repeat;
width:100%;
}
.property:hover {
background: url(https://www.vtpc.com.sg/images/property_over.png) no-repeat;
}
.contact {
background: url(https://www.vtpc.com.sg/images/contact_off.png) no-repeat;
width:100%;
}
.contact:hover {
background: url(https://www.vtpc.com.sg/images/contact_over.png) no-repeat;
}

/* PRELOAD IMAGES START */
body:after{
    display:none;
    content: url(https://www.vtpc.com.sg/images/abtus_over.png) url(https://www.vtpc.com.sg/images/property_over.png) url(https://www.vtpc.com.sg/images/contact_over.png);
}
/* PRELOAD IMAGES END */

/* Effect 7: second border slides up */
.cl-effect-7 a {
	position: relative;
	display: inline-block;
	*display: inline;
	*zoom:1;
	margin: 5px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0px;
	font-weight: 300;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 0.75em;

	padding: 5px 0;
	color: #566473;
	text-shadow: none;
	font-weight: 500;
}

.cl-effect-7 a::before,
.cl-effect-7 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 2px;
	background: #d9d9d9;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.85);
	transform: scale(0.85);
}

.cl-effect-7 a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}

.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}

.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
	top: 0%;
	opacity: 1;
}

/* Nav Bar */
@media only screen and (max-width: 1150px) {
	/*#top ul li
	{
		margin:30px 8px 0 0px;
	}*/
	#logo-container
	{
		float:none;
		margin: auto;
	}
	#top ul {
		/*margin-right:10px;
		margin-left: 50px;
		margin-bottom: 10px;*/
		clear:both;
		margin-bottom: 10px;
	}
	#top ul li {
		font-size:12px; font-size:1.2rem;
		line-height:14px; line-height:1.4rem;
		margin:20px 20px 0 20px;
	}
}
@media only screen and (max-width: 920px) {
	.centerimg {
		max-width: 600px;
		width: auto;
		height: auto;
	}
}
@media only screen and (max-width: 640px) {
	#top { 
		margin-bottom:20px;
	}
	.centerimg {
		max-width: 450px;
	}
	#top ul {
		margin-right:10px;
		margin-left: 5px;
	}
	#top ul li {
		font-size:12px; font-size:1.2rem;
		line-height:14px; line-height:1.4rem;
		margin:15px 10px 0 10px;
	}
}
@media screen and (max-width: 500px) {
	#logo-container, #logo-container img {
		width:410px;
	}
	.centerimg {
		max-width: 300px;
	}
}
@media screen and (max-width: 420px) {
	#logo-container, #logo-container img {
		width:360px;
	}
}
@media screen and (max-width: 368px) {
	#logo-container, #logo-container img {
		width:290px;
	}
}

@media only screen and (orientation: landscape) {
	#lang {
		
		float:right;
		position:relative;
		top:-5px;
		/*font-size:10px; font-size:1rem;
		left:38px;*/
	}
}

/* Large screens (1200px) */
@media (min-width: 1200px) {
	#top, #footer { width:1200px; max-width:1200px; }
}

/* Footer */
#footer {
margin:20px auto 0;
padding:15px 0 20px;
text-align:center;
font-size:13.5px; font-size:1.35rem;
color:#4a4a4a;
filter:alpha(opacity=0);
opacity:0;
position:relative;
left:-15px;
}
.psalms {
font-family: 'Tangerine', cursive;
font-size:30px; font-size:3rem;
}
#footerleft
{
float:left;
padding:20px 0 0 50px;
}
#footerright
{
float:right;
padding:0 50px 30px 0;
}
@media only screen and (max-width: 850px) {
	#footer {
		filter:alpha(opacity=100);
		opacity:1;
		left:0;
	}
	#footerleft {
		clear:both;
		width:100%;
		margin:0 auto 20px;
		padding:0;
	}
	#footerright {
		clear:both;
		width:100%;
		text-align:center;
		margin:0 auto 10px;
		padding:0;
	}
}
/* Footer */
/* Index */
.indexImg {
width:100%;
}
.shiftUp {
position:relative;
}
.imgDiv {
width:100%;
height:120px;
position:absolute;
top:-125px;
*left:0px;
text-align:center;
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
.imgDiv img
{
display:inline-block;
margin:15px auto;
padding:0 15px;
}
.caption
{
display:inline-block;
vertical-align:20px;
*display:inline; zoom:1;
color:#731c00;
font-size:15px; font-size:1.5rem;
}
.spacer {
clear:both;
height:20px;
}
@media only screen and (min-width: 640px) and (orientation: portrait) {
	.indexImg { height:420px; }
}
@media only screen and (max-width: 640px) and (orientation: portrait) {
	.indexImg { height:150px; }
	.shiftUp { display:none; }
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
	.indexImg { height:250px; }
	.shiftUp { display:none; }
}
/* Large screens (1400px) */
@media only screen and (min-width: 1400px) and (orientation: landscape) {
	.indexImg { height:420px; }
}
/* Index */
/* used in property-listings.php */
.propertyNav1, .propertyNav2 {
width:936px;
margin:0 auto;
text-align:center;
}
.propertyNav1 {
padding:7px 0 10px;
}
@media only screen and (min-width: 1200px) {
	.propertyNav1, .propertyNav2 {
		width:1024px;
	}
}
.propertyNav2 {
padding:7px 0 50px;
}
.propertySearch {
display:inline-block;
*display: inline;
zoom: 1;			/* to trigger hasLayout */
margin:7px 20px;
}
.propertySearchSelect {
position:relative;
background-color: #f8f8f8;
padding-top: 5px;
padding-bottom: 5px;
}
.hide {
display:none;
}
.propertyPrevious {
float:left; 
padding:3px 0 0 30px;
}
.propertyNext {
float:right; 
padding:3px 30px 0 0;
}
.bigletter {
font-size:120%;
}
.propertySearchSelect>select{
width:170px;
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background-color: transparent;
color:#888;
border:1px solid #DCDCDC;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
position:relative;
z-index:1;
}
.propertySearchSelect::after {
	content: '>';
	font: 17px "Consolas", monospace;
	color: #333;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 10px;  
	top: 25%;  
	position: absolute;
	cursor:pointer;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .propertySearchSelect>select {padding-right:25px}
}
@media screen and (max-width: 469px) {
	.propertySearch {
		clear: both;
		display: block;
	}
}
.listing {
width:460px;
margin:80px auto 170px;
}
.slideshowBackground {
width:450px;
height:300px;
padding:1px;
background-color:#F5F5F5;
margin:5px auto;
border:1px solid #DCDCDC;
}
#slideshow ul, #slideshow li {
margin:0;
padding:0;
list-style:none;
}
#slideshow, #slideshow li {
width:450px;
height:300px;
overflow:hidden;
}
#prevBtn, #nextBtn {
display:block;
margin:0 auto;
width:32px;
height:50px;
}
#prevBtn a {
display:block;
position:relative;
top:-175px;
left:-350px;
width:65px;
height:65px;
background:url(../images/chevron-left-solid.png) no-repeat 0 0;
}	
#nextBtn a {
display:block;
position:relative;
top:-225px;
left:350px;
width:65px;
height:65px;
background:url(../images/chevron-right-solid.png) no-repeat 0 0;
}
.slideshowUlClass {
margin:0;
padding:0;
list-style:none;
}
.slideshowClass {
width:450px;
height:300px;
overflow:hidden;
}
.btnClass {
	display:block;
	margin:0 auto;
	width:65px;
	height:50px;
}
.prevBtnClassA {
	display:block;
	position:relative;
	top:-175px;
	left:-350px;	
	width:65px;
	height:65px;
	background:url(../images/chevron-left-solid.png) no-repeat 0 0;
}	
.nextBtnClassA {
	display:block;
	position:relative;
	top:-225px;
	left:350px;
	width:65px;
	height:65px;
	background:url(../images/chevron-right-solid.png) no-repeat 0 0;	
}

@media only screen and (min-width: 640px) and (orientation: portrait) {
	.propertyNav1 {	width:80%; }
	.propertyNav2 { width:80%; }
	#prevBtn a { left:-300px; }
	#nextBtn a { left:300px; }
	.prevBtnClassA { left:-300px; }
	.nextBtnClassA { left:300px; }
}
@media only screen and (max-width: 800px) {
	.propertyNav1 {	width:80%; }
	.propertyNav2 { width:80%; }
	#prevBtn a { left:-300px; }
	#nextBtn a { left:300px; }
	.prevBtnClassA { left:-300px; }
	.nextBtnClassA { left:300px; }
}
@media only screen and (max-width: 640px) and (orientation: portrait) {
	.propertyNav1 {	width:80%; }
	.propertyNav2 { width:80%; }
	.listing {
		width:160px;
		margin:50px auto 100px;
	}
	.slideshowBackground {
		width:150px;
		height:100px;
	}
	.slideshowBackground ul li img{
		width:150px;
		height:100px;
	}
	#slideshow, #slideshow li {
		width:150px;
		height:100px;
	}
	#prevBtn a {	
		left:-150px;
		top:-73px;
	}
	#nextBtn a { 
		left:93px;
		top:-85px;
	}
	.slideshowClass {
		width:150px;
		height:100px;
		overflow:hidden;
	}
	.btnClass {
		width:8px;
		height:12px;
	}
	.prevBtnClassA {	
		left:-150px;
		top:-73px;
	}
	.nextBtnClassA { 
		left:93px;
		top:-85px;
	}
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
	.listing {
		width:175px;
		margin:80px auto 170px;
	}
	.slideshowBackground {
		width:165px;
		height:110px;
	}
	.slideshowBackground ul li img{
		width:165px;
		height:110px;
	}
	#slideshow, #slideshow li {
		width:165px;
		height:110px;
	}
	#prevBtn a {	
		left:-93px;
		top:-73px;
	}
	#nextBtn a { 
		left:150px;
		top:-85px;
	}
	.slideshowClass {
		width:165px;
		height:110px;
		overflow:hidden;
	}
	.btnClass {
		width:8px;
		height:12px;
	}
	.prevBtnClassA {	
		left:-93px;
		top:-73px;
	}
	.nextBtnClassA { 
		left:150px;
		top:-85px;
	}
}
@media only screen and (max-width: 1024px) {
	.propertyNav1 {	width:80%; }
	.propertyNav2 { width:80%; }
}
/* used in property-listings.php */
/* used in index, contact-us.php and about-us.php */
.highlight
{
color:#000;
background-color:#f3f3f3;
padding:20px 0 5px;
text-align:center;
}
.highlight div
{
width:600px;
margin:0 auto 15px;
}
.highlight div.indexTxt
{
width:735px;
padding-bottom:5px;
margin:0 auto 15px;
}
@media only screen and (min-width: 640px) and (orientation: portrait) {
	.highlight div.indexTxt {
		width:80%;
		font-size:1.2em;
		line-height:1.2em;
	}
}

@media only screen and (max-width: 640px) {
	.highlight div.indexTxt {
		width:80%;
		font-size:1.2em;
		line-height:1.3em;
		text-align:justify;
	}
	.highlight div {
		width:80%;
	}
}
/* used in index, contact-us.php and about-us.php */
/* used in about-us.php */
#baseTxt p
{
margin-top:0;
}
/* used in about-us.php */
/* used in contact-us.php */
/* used in contact-us.php */
.thanks {
	margin-top:50px;
}
.contactField 
{
text-align:center;
margin:auto;
padding-top:30px;
padding-bottom:30px;
}
.inputTxt
{
display:block;
margin:15px auto;
height:30px;
width:250px;
color:#C9C9C9;
}
.inputTxtBox
{
display:block;
margin:15px auto;
height:160px;
width:250px;
color:#C9C9C9;
overflow:auto;
border: 1px solid #949494;
}
.submitButton input 
{
background:url(../images/submit-button.png) no-repeat;
cursor:pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 1px 3px #999999;
-moz-box-shadow: 0 1px 3px #999999;
-webkit-box-shadow: 0 1px 3px #999999;
border-style: none;
border-bottom: 1px solid #383838;
font-size:0;		/* to hide value of submit button */
line-height:0;		/* to hide value of submit button */
width:250px;
height:35px;
}
/* css hack to normalise box-shadow on IE 6 and 7, http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/ */
@media screen\9 {
    .submitButton input  {	box-shadow: 0 1px 6px #999999; }; 
}
/* css hack to normalise box-shadow on IE 8, 9 and 10, http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/ */
@media screen\0 
{
	.submitButton input  {	box-shadow: 0 1px 6px #999999; }; 
}
/* css preload image - randomly selected #message */
#message { background: url(../images/submit-button-hover.png) no-repeat -9999px -9999px; }
.submitButton input:hover 
{ 
background: #DDC8C2 url(../images/submit-button-hover.png) no-repeat;
}
/* used in contact-us.php */
/* used in about-us.php */
.agents
{
text-align:center;
margin:30px 20px;
}
.agents a:link
{
color:#BCBCBC;
}
.agents a:visited
{
color:#BCBCBC;
}
.agents a:hover
{
color:#731c00;
}
.agentbox
{
display:inline-block;
*display:inline;
zoom: 1;
width:280px;
margin:0 20px 20px 0;
padding:2px;
font-size:10px; font-size:1rem;
text-align:left;
vertical-align:top;
}
.agents img
{
float:left;
margin-right:10px;
border:1px solid #C7C7C7;
}
.agents h2
{
margin:0 0 2px 10px;
padding:0;
font-size:12.5px; font-size:1.25rem;
font-weight:600;
line-height:12px; line-height:1.2rem;
}
.agency
{
font-style:italic;
margin:0;
padding:0;
line-height:25px;
}
.agencyNo
{
margin:0;
padding:0;
line-height:0px;
}
.smalltext 
{
font-size:9px; font-size:0.9rem;
}
.agentdetails
{
margin-bottom:2px;
padding-bottom:0;
}
.agentdetailslast
{
margin-bottom:30px;
padding-bottom:0;
}
/* used in about-us.php */

/* Typography */
/* Small screens (default) */
html { font-size: 62.5%; }
 
/* Medium screens (640px) */
@media (min-width: 40rem) {
html { font-size: 66%; }
}
 
/* Large screens (1024px) */
@media (min-width: 64rem) {
html { font-size: 70%; }
}
body 
{
background:#FFFFFF;
font-family:'Open Sans', Arial, sans-serif;
color:#454545;
font-size:15.5px; font-size:1.55rem;
line-height:18.5px; line-height:1.85rem;
}
h1
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-size:38px; font-size:3.8rem;
color:#731c00;
font-weight:normal;
line-height: 16px; line-height: 1.6rem;
margin:0 0 16px 0;
}
h2
{
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-size:13.5px; font-size:1.35rem;
color:#454545;
font-weight:normal;
}
.listing h2 {
font-family:'PT Sans Caption', Arial, sans-serif;
font-size:18px; font-size:1.8rem;
line-height:18px; line-height:1.8rem;
color:#731c00;
margin-bottom:5px;
padding-bottom:0;
}
.listingAdd {
font-size:10px; font-size:1rem;
}
a:link
{
text-decoration:none;
color:#D1D1D1;
}
a:visited
{
text-decoration:none;
color:#D1D1D1;
}
a:hover
{
text-decoration:none;
color:#731c00;
}
a:active
{
text-decoration:none;
color:#731c00;
}