@charset "utf-8";
@import url("font-awesome.min.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);

body{
	font-family: "Open Sans";
	margin: 0px;
	background: url(../images/mainbg.png) repeat;
	}

a{
	text-decoration:none;
	}

.space{
	clear:both;
	}

.border-space{
	clear:both;
	border-bottom: 1px #998033 dotted;
	}

.hightlight_filter{
	padding: 10px;
	border-bottom: 1px #999999 dotted;
	background: #777777;
	color: #FFFFFF;
	font-weight: 700;
	}

.unhightlight_filter{
	padding: 10px;
	border-bottom: 1px #999999 dotted;
	color: #777777;
	font-weight: 700;
	cursor:pointer;
	}
.unenabled_filter{
	padding: 10px;
	border-bottom: 1px #999999 dotted;
	color: #aaaaaa;
	font-weight: 700;
	cursor:default;
	}

#back_top{
	position: fixed;
	right: 15px;
	bottom: 20px;
	z-index: 600;
	padding: 5px 12px;
	font-size: 20px;
	color: #FFFFFF;
	border-radius: 3px;	
	background-color: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	}

#back_top:hover{
	background-color: rgba(0, 0, 0, 0.8);	
	}

@media screen and (min-width:860px){

.logo_t_m{
	display: none;
	}

.topbar_area{
	position:fixed;
	text-align: center;
	width: 100%;
	color: #FFFFFF;
	background: #C9A063;
	padding:10px;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
	z-index: 995;
	}

.menubt{
	display: none;
	}

.backbt{
	position: fixed;
	top: 20px;
	right: 25px;
	font-size: 20px;
	font-weight: 700;
	z-index:996;
	color: #FFFFFF;
	cursor:pointer;
	}

.backbt:hover{
	color: #40220F;
	}

.main_area{
	max-width: 1120px;
	margin: 0px auto;
	padding: 70px 0px 0px 0px;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	overflow: auto;
	z-index: 100;
	}

.leftsidebar_area{
	float: left;
	width:25%;
	padding: 10px;
	margin-right: 20px;
	}

.result_area{
	float: left;
	width:70%;
	}


.searchbox_area{
	margin: 20px auto;
	width: 250px;
	overflow: auto;
	}

.searchbox{
	float: left;
	border: 1px #998033 solid;
	border-radius: 3px;
	padding:5px;
	font-size: 16px;
	width: 200px;
	}

.search_button{
	margin-left: 3px;
	float: left;
	padding: 3px 7px;
	font-size: 16px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	border-radius: 3px;
	background: #C9A063;
	}

.search_button:hover{
	background: #998033;
	}

.display_mode{
	float: right;
	margin: 10px;
	color: #C9A063;
	cursor:pointer;
	}

.display_mode a:hover{
	color: #998033;
	}

.thumbnail_area{
	position: relative;
	margin: 0px 0px 30px 0px;
	overflow: auto;
	}

.tile_thumbnail_area{
	position: relative;
	float: left;
	width: calc(25% - 20px);
	height: 240px;
	border: 1px #CCCCCC solid;
	background: #FFFFFF;
	margin: 8px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}

.tile_thumbnail{
	position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
	max-width: 100%;
	cursor:pointer;
	z-index: 400;
	}

.detail_area{
	padding: 10px;
	border-bottom: 1px #998033 dotted;
	overflow: auto;
	}

.detail_thumbnail_area{
	position: relative;
	float: left;
	width: 120px;
	height: 180px;
	border: 1px #CCCCCC solid;
	background: #FFFFFF;
	margin: 8px 15px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}

.detail_thumbnail{
	position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
	max-width: 100%;
	cursor:pointer;
	}

.detail_text_area{
	float: left;
	width: calc(100% - 8% - 230px);
	margin: 8px 15px;
	color: #555555;
	font-size: 14px;
	}

.space_detail{
	display: none;
	}

.detail_buybt_area{
	float: left;
	width: 8%;
	margin: 8px 15px;
	text-align: center;
	}

.buybt{
	margin-top: 70px;
	padding: 5px 10px;
	font-size: 16px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	border-radius: 3px;
	background: #C9A063;
	font-weight: 700;
	cursor:pointer;
	}

.buybt:hover{
	background: #998033;	
	}

.tile_buybt{
	position: absolute;
    text-align: center;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 5px 10px;
	font-size: 14px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	background: rgba(201, 160, 99, 0.3);	
	cursor:pointer;	
	z-index: 500;
	font-weight: 700;	
	}

.tile_buybt:hover{
	background: rgba(153, 128, 51, 0.8);	
	}

.form_area{
	position:fixed;
	top:0px;
	left:0px;
	z-index:998;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	}

.enquiries_form{
	padding: 0px 10px 10px 10px;
	z-index:999;
	position: fixed;
	top: calc(50% - 155px);
	left: calc(50% - 200px);
	width: 400px;
	font-size: 16px; 
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
	}

.form_inputbox_amount{
	padding: 3px;
	font-size: 16px;
	width: 15%;
	}

.form_inputbox{
	padding: 3px;
	font-size: 16px;
	width: calc(100% - 20px);
	}

.form_inputbox_button{
	padding: 3px;
	font-size: 16px;
	width: 20%;
	}

.form_cancel{
	float: right;
	padding: 2px 8px;
	color: #FFFFFF;
	background: #BBBBBB;
	cursor:pointer;
	}

.form_cancel:hover{
	background: #FF0000;
	}

.form_input_area{
	line-height: 24px;	
	}

.form_text{
	margin: 10px 0px;
	font-weight: 700;
	color: #555555;
	font-size: 16px;
	line-height: 24px;
	}

.form_text_hilight{
	color: #650000;
	}

.form_button_area{
	margin-top: 10px;
	border-top: 1px #999999 dotted;
	text-align: center;
	padding: 20px 0px 10px 0px;
	}

}




@media screen and (min-width:640px) and (max-width:859px){
	
.logo_d{
	display: none;
	}

.topbar_area{
	position:fixed;
	text-align: center;
	width: 100%;
	color: #FFFFFF;
	background: #C9A063;
	padding:10px;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
	z-index: 995;
	}

.menubt{
	position: fixed;
	top: 15px;
	left: 20px;
	font-size: 20px;
	padding: 3px 8px;
    border-radius:3px;
	border: 1px #FFFFFF solid;
	font-weight: 700;
	z-index:996;
	}

.menubt:hover{
	color: #40220F;	
	border: 1px #40220F solid;
	}

.backbt{
	position: fixed;
	top: 20px;
	right: 25px;
	font-size: 20px;
	font-weight: 700;
	z-index:996;
	color: #FFFFFF;
	cursor:pointer;
	}

.backbt:hover{
	color: #40220F;
	}

.main_area{
	max-width: 860px;
	margin: 0px auto;
	padding: 70px 0px 0px 0px;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	overflow: auto;
	z-index: 100;
	}

.leftsidebar_area{
	position: absolute;
	top: 65px;
	width: calc(100% - 20px);
	height:;
	padding: 10px;
	z-index: 700;
	background: #FFFFFF;
	overflow: auto;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);	
	}

.result_area{
	max-width:100%;
	padding: 10px;
	}	

.searchbox_area{
	margin: 10px auto 20px auto;
	width: 250px;
	overflow: auto;
	}

.searchbox{
	float: left;
	border: 1px #998033 solid;
	border-radius: 3px;
	padding:5px;
	font-size: 16px;
	width: 200px;
	}

.search_button{
	margin-left: 3px;
	float: left;
	padding: 3px 7px;
	font-size: 16px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	border-radius: 3px;
	background: #C9A063;
	}

.search_button:hover{
	background: #998033;
	}

.display_mode{
	float: right;
	margin: 10px;
	color: #C9A063;
	cursor:pointer;
	}

.display_mode a:hover{
	color: #998033;
	}

.thumbnail_area{
	position: relative;
	margin: 0px 0px 30px 0px;
	overflow: auto;
	}

.tile_thumbnail_area{
	position: relative;
	float: left;
	width: calc(25% - 20px);
	height: 230px;
	border: 1px #CCCCCC solid;
	background: #FFFFFF;
	margin: 8px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}

.tile_thumbnail{
	position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
	max-width: 100%;
	cursor:pointer;
	z-index: 400;
	}

.detail_area{
	padding: 10px;
	border-bottom: 1px #998033 dotted;
	overflow: auto;
	}

.detail_thumbnail_area{
	position: relative;
	float: left;
	width: 120px;
	height: 180px;
	border: 1px #CCCCCC solid;
	background: #FFFFFF;
	margin: 8px 15px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}

.detail_thumbnail{
	position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
	max-width: 100%;
	cursor:pointer;
	}

.detail_text_area{
	float: left;
	width: calc(100% - 8% - 230px);
	margin: 8px 15px;
	color: #555555;
	font-size: 14px;
	}

.space_detail{
	display: none;
	}

.detail_buybt_area{
	float: left;
	width: 8%;
	margin: 8px 15px;
	text-align: center;
	}

.buybt{
	margin-top: 70px;
	padding: 5px 10px;
	font-size: 16px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	border-radius: 3px;
	background: #C9A063;
	font-weight: 700;
	cursor:pointer;
	}

.buybt:hover{
	background: #998033;	
	}

.tile_buybt{
	position: absolute;
    text-align: center;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 5px 10px;
	font-size: 14px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	background: rgba(201, 160, 99, 0.3);	
	cursor:pointer;	
	z-index: 500;
	font-weight: 700;	
	}

.tile_buybt:hover{
	background: rgba(153, 128, 51, 0.8);	
	}

.form_area{
	position:fixed;
	top:0px;
	left:0px;
	z-index:998;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	}

.enquiries_form{
	padding: 0px 20px 20px 20px;
	z-index:999;
	position: fixed;
	top: calc(50% - 185px);
	left: calc(50% - 200px);
	width: 400px;
	font-size: 16px; 
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
	}

.form_inputbox_amount{
	padding: 3px;
	font-size: 16px;
	width: 15%;
	}

.form_inputbox{
	padding: 3px;
	font-size: 16px;
	width: calc(100% - 20px);
	}

.form_inputbox_button{
	padding: 3px;
	font-size: 16px;
	width: 20%;
	}

.form_cancel{
	float: right;
	padding: 2px 8px;
	color: #FFFFFF;
	background: #BBBBBB;
	cursor:pointer;
	}

.form_cancel:hover{
	background: #FF0000;
	}

.form_input_area{
	line-height: 24px;
	}

.form_text{
	margin: 10px 0px;
	font-weight: 700;
	color: #555555;
	font-size: 16px;
	line-height: 24px;
	}

.form_text_hilight{
	color: #650000;
	}

.form_button_area{
	margin-top: 10px;
	border-top: 1px #999999 dotted;
	text-align: center;
	padding: 20px 0px 0px 0px;
	}

}


@media screen and (max-width:639px){
	
.logo_d{
	display: none;
	}

.topbar_area{
	position:fixed;
	text-align: center;
	width: 100%;
	color: #FFFFFF;
	background: #C9A063;
	padding:10px;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
	z-index: 995;
	}

.menubt{
	position: fixed;
	top: 15px;
	left: 20px;
	font-size: 20px;
	padding: 3px 8px;
    border-radius:3px;
	border: 1px #FFFFFF solid;
	font-weight: 700;
	z-index:996;
	cursor:pointer;
	}

.menubt:hover{
	color: #40220F;	
	border: 1px #40220F solid;
	}

.backbt{
	position: fixed;
	top: 20px;
	right: 25px;
	font-size: 20px;
	font-weight: 700;
	z-index:996;
	color: #FFFFFF;
	cursor:pointer;	
	}

.backbt_text{
	display: none;
	}

.backbt:hover{
	color: #40220F;
	}

.main_area{
	max-width: 640px;
	margin: 0px auto;
	padding: 70px 0px 0px 0px;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	overflow: auto;
	z-index: 100;
	}

.leftsidebar_area{
	position: absolute;
	top: 65px;
	width: calc(100% - 20px);
	height:;
	padding: 10px;
	z-index: 700;
	background: #FFFFFF;
	overflow: auto;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}

.result_area{
	max-width:100%;
	padding: 10px;
	}	

.searchbox_area{
	margin: 10px auto 20px auto;
	width: 250px;
	overflow: auto;
	}

.searchbox{
	float: left;
	border: 1px #998033 solid;
	border-radius: 3px;
	padding:5px;
	font-size: 16px;
	width: 200px;
	}

.search_button{
	margin-left: 3px;
	float: left;
	padding: 3px 7px;
	font-size: 16px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	border-radius: 3px;
	background: #C9A063;
	}

.search_button:hover{
	background: #998033;
	}

.display_mode{
	float: right;
	margin: 10px;
	color: #C9A063;
	cursor:pointer;
	display: none;
	}

.display_mode a:hover{
	color: #998033;
	}

.thumbnail_area{
	position: relative;
	margin: 10px 0px 30px 0px;
	overflow: auto;
	}

.tile_thumbnail_area{
	position: relative;
	float: left;
	width: calc(50% - 20px);
	height: 230px;
	border: 1px #CCCCCC solid;
	background: #FFFFFF;
	margin: 8px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}

.tile_thumbnail{
	position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
	max-width: 100%;
	cursor:pointer;
	z-index: 400;
	}

.detail_area{
	padding: 10px;
	border-bottom: 1px #998033 dotted;
	overflow: auto;
	}

.detail_thumbnail_area{
	position: relative;
	width: 200px;
	height: 300px;
	border: 1px #CCCCCC solid;
	background: #FFFFFF;
	margin: 20px auto;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	}

.detail_thumbnail{
	position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
	max-width: 100%;
	cursor:pointer;
	}

.detail_text_area{
	width: 100%;
	margin: 5px;
	color: #555555;
	font-size: 14px;
	}

.space_detail{
	clear: both;
	}

.detail_buybt_area{
	width: 95%;
	margin: 5px 10px;
	text-align: center;
	cursor:pointer;
	}

.buybt{
	margin-top: 70px;
	padding: 5px 10px;
	font-size: 16px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	border-radius: 3px;
	background: #C9A063;
	font-weight: 700;
	cursor:pointer;
	}

.buybt:hover{
	background: #998033;	
	}

.tile_buybt{
	position: absolute;
    text-align: center;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 5px 10px;
	font-size: 14px;
	color: #FFFFFF;
	border: 1px #998033 solid;
	background: rgba(201, 160, 99, 0.3);	
	cursor:pointer;	
	z-index: 500;
	font-weight: 700;	
	}

.tile_buybt:hover{
	background: rgba(153, 128, 51, 0.8);	
	}	

.form_area{
	position:fixed;
	top:0px;
	left:0px;
	z-index:998;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	}

.enquiries_form{
	padding: 0px 10px 10px 10px;
	z-index:999;
	position: fixed;
	top: calc(50% - 155px);
	left: 10px;
	right: 10px;
	font-size: 16px; 
	background-color: #FFFFFF;
	box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
	}

.form_inputbox_amount{
	padding: 3px;
	font-size: 16px;
	width: 15%;
	}

.form_inputbox{
	padding: 3px;
	font-size: 16px;
	width: calc(100% - 20px);
	}

.form_inputbox_button{
	padding: 3px;
	font-size: 16px;
	width: 20%;
	}

.form_cancel{
	float: right;
	padding: 2px 8px;
	color: #FFFFFF;
	background: #BBBBBB;
	cursor:pointer;
	}

.form_cancel:hover{
	background: #FF0000;
	}

.form_input_area{
	line-height: 24px;	
	}

.form_text{
	margin: 10px 0px;
	font-weight: 700;
	color: #555555;
	font-size: 16px;
	line-height: 24px;
	}

.form_text_hilight{
	color: #650000;
	}

.form_button_area{
	margin-top: 10px;
	border-top: 1px #999999 dotted;
	text-align: center;
	padding: 10px 0px 0px 0px;
	}

}


/*-----Footer Area-----*/

.footer_area{
	background: #111111;
	font-size: 14px;
	text-align:center;
	padding: 30px;
	border-top: 10px #40220F solid;
	}

.copyright_area{
	max-width: 1120px;
	color: #FFFFFF;
	text-align:center;
	margin: 0px auto;
	}