@charset "utf-8";
/* CSS Document */

/* - - - - - - - - - - - - - - - - - - - - -

Title : pinprint.com.au
URL :http://www.pinprint.com.au/

Author : FOX DESIGN creative
URL: www.foxdesign.com.au

- - - - - - - - - - - - - - - - - - - - - */

/*----------------------------------------------------------------------------- 
Global Styles
-----------------------------------------------------------------------------*/
html,body,div,dl,dt,dd,pre,form,fieldset,input,textarea,blockquote, ul, li, h1,h2,h3,h4 { 
	margin:0; 
	padding:0; 
}

html { 
	margin:0; 
	padding:0; 
	overflow: -moz-scrollbars-vertical;
}


/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

body,td,th,p,li { font-family:Helvetica, Arial,  sans-serif; font-size:15px; line-height:26px; color: #000000; }
.navfont{ font-family:Helvetica, Arial,  sans-serif; font-size:15px; }

.nav a {
    padding: 8px 21px;
    color:#000;
	font-size:18px;
	font-family: 'Oswald', sans-serif; font-weight:400;
	text-transform:uppercase;
}


body {
 	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;
	padding-left: 0px;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;
	background-color:#f9f9f9;
}

a { text-decoration:none; color: #000000;}
a:hover { color:#00adea;}

h1 { font-size:40px; line-height:40px; color:#00adea;  font-family: 'Oswald', sans-serif; font-weight:700; margin-bottom:30px; text-align: center;}

h2 { font-size:27px; line-height:27px; color:#000; text-align: center; font-family: 'Oswald', sans-serif; font-weight:400;}

h3 {font-size:25px; line-height:50px;color: #666; font-family: 'Oswald', sans-serif; font-weight:300; }

h4 { font-size:26px; line-height:25px; color:#fff; font-weight:normal;}
 

fieldset { 	border: 0; }

.clear { 
	clear: both; 
	font-size: 0; 
	height: 0; 
	line-height: 0; 
}
a img{ border:none;}
hr {height: 1px; color: #e6e4e2;  }

b{ }
p{ padding:0px; margin:0px; margin-top:8px;}

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}


/* end of global*/

.wrap-out{ width:100%; height:50px; min-height:50px; background-image:url(../images/body_img.png); }
html>body  .wrap-out{ height:auto}
.wrap{ margin:0 auto; width:1200px; height:50px; min-height:50px;  }
html>body  .wrap{ height:auto}


.wrap_general{ float:left; width:100%; height:20px; min-height:20px;}
html>body .wrap_general{ height:auto;}

.wrap_50{ float:left; width:50%; height:20px; min-height:20px;}
html>body .wrap_50{ height:auto;}

.wrap_general ul{ list-style:none;  padding:0; margin:24px 0;  }
.wrap_general ul li{ padding-left:35px; background:url(../images/list-arrow.png); background-repeat:no-repeat; background-position:left top; line-height:25px; margin-bottom:5px;} 


 
@media screen and (max-width: 1200px) {
.wrap-out{width:100%;}
.wrap{width:100%; }
	}
@media screen and (max-width: 960px) {
.wrap{width:95%; }	
	}
@media screen and (max-width: 586px) {
 
	}


/*----------------------------------------------------------------------------- 
all buttons
-----------------------------------------------------------------------------*/
.btn01{ float:left; width:205px; padding-right:45px; background:url(../images/btn_before.png); color:#fff; background-position:right; text-align: center; line-height:39px; margin:14px 0 0 39px; font-size:18px;}
.btn01:hover, .btn01:focus, .btn01:active {color:#fff; background: url(../images/btn_hover.png);  background-position:right;}

.btn02{ margin:0 auto; width:200px;  padding-right:40px; background:url(../images/btn_before.png); background-repeat:no-repeat; color:#fff; background-position:right; text-align: center; line-height:39px;   font-size:18px;}
.btn02:hover, .btn02:focus, .btn02:active {color:#fff; background: url(../images/btn_hover.png); background-repeat:no-repeat;  background-position:right;}


.btnInner{ float:right; width:205px; padding-right:45px; background: url(../images/btn_inner-before.png); color:#333130; background-position:right; text-align: center; line-height:39px; margin:14px 0 0 39px; font-size:18px;}
.btnInner:hover, .btnInner:focus, .btnInner:active {color:#fff; background: url(../images/btn_inner-hover.png);  background-position:right;}



.btnForward{ width:100%; padding-right:45px; background:url(../images/btn_before.png); color:#fff; background-position:right; text-align: center; line-height:39px; font-size:18px;  border:0; cursor:pointer;}
.btnForward:hover, .btnForward:focus, .btnForward:active{color:#fff; background: url(../images/btn_hover.png);  background-position:right;}

.btnBackward{ width:100%; padding-left:45px; background:url(../images/btn-backward_before.png); color:#fff; background-position:left; text-align: center; line-height:39px; font-size:18px;  border:0; cursor:pointer;}
.btnBackward:hover, .btnBackward:focus, .btnBackward:active{color:#fff; background: url(../images/btn-backward_hover.png);  background-position:left;}

.btnDelete{ width:24px; height:24px; background:url(../images/cancel_btn.png); border:0; cursor:pointer; font-family: 'Oswald', sans-serif; font-weight:700; font-size:18px; color:#FF0004;}
.btnDelete:hover{background: url(../images/cancel_btn-hover.png); color:#E39D00;}
 
/*---------------------------------------------------------------------------- 
top
-----------------------------------------------------------------------------*/

#header_wrap{ margin:0 auto; width:1200px; height:20px; min-height:20px;}
html>body  #header_wrap{ height:auto}

#top_left{ float:left; padding: 5px 0; width:240px; text-align:center; height:20px; min-height:20px;}
html>body #top_left{ height:auto;}
#top_phone-icon{ float:right; padding:10px 10px 10px 20px; width:40px; height:40px; margin-bottom:10px;  display:none;}
#top_phone{ float:right; padding:10px 0px; width:186px; height:40px; line-height:40px;font-family: 'Oswald', sans-serif; font-weight:700; font-size:30px; margin-bottom:10px; display:none;}
#nav_wrap{ float:right; width:840px; height:30px; margin-top:30px;}
#top-login_wrap{ float:right; width:700px; height:18px; padding:6px 27px 10px 0; margin:10px 0 10px 0; text-align:right; line-height:18px; color:#c1c1c1;}
#top-login_wrap a {color:#5d5a59;}
#top-login_wrap a:hover {color:#00adea; text-decoration:underline;}


@media screen and (max-width: 1200px) {
#header_wrap{ width:100%; }
	}

@media screen and (max-width: 980px) {
#nav_wrap{ width:100%; margin-top:0;}
.nav ul { text-align:center;}
#top_left{padding: 0px 0 5px 0;}
	}
 
@media screen and (max-width: 786px) {
#header_wrap{ width:100%; }
#top_left{width:50%; height:auto; padding:0;}
#top_phone-icon{ padding:30px 70px 10px 20px; margin-bottom:0px;   }
#top_phone{ float:left; padding:0px; text-align:center; width:0; background:none; padding-bottom:0px; margin-bottom:0px; display:none; height:0px; }
#top-login_wrap{ float:right; width:96%; padding:0px 4% 10px 0; margin:0px 0 20px 0; font-size:100%;  }
#nav_wrap{height:0;}
 }
 
/*----------------------------------------------------------------------------- 
home page
-----------------------------------------------------------------------------*/
#home-slide_wrap { float:left; margin:0px 0px 40px 0px; width:100%; height:20px; min-height:20px;}
html>body #home-slide_wrap { height:auto}

#home-content_wrap { float:left; margin-bottom:34px; width:100%; height:20px; min-height:20px;}
html>body #home-content_wrap { height:auto}
 
.home-content_half{ float: left; width:50%; height:20px; min-height:20px; padding-bottom:20px;}
html>body .home-content_half { height:auto}

.home-content{ float:left; background:url(../images/main-contents_bg.png); padding:4% 4%; width:92%; height:76.66%;}

.home_content h1 { font-size:28px; line-height:28px; color:#00adea; padding: 0px; margin:0px 0px 30px 0px;  font-weight:bold; }

#home-shortcut_wrap{ float:left; background: url(../images/shortcut_bg.png); padding:1%; width:98%; height:50px; min-height:50px;}
html>body #home-shortcut_wrap{ height:auto;}
.home-shortcut{ float:left; width:23%; height:14.905%; margin:1%; }
.home-shortcut_image{ float:left; width:100%; height:100%; text-align:center;}


/* Zoom In #1 */
figure {
	width: width:100%;
	height: height:100%;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
 
.home-shortcut_image figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.home-shortcut_image figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}


.home-shortcut_title{ float:left; background:url(../images/shortcut-title_bg.png); height:40px; padding:10px 5%; width:90%; line-height:20px; color:#fff; text-align:center; font-size:20px; z-index:5; font-family: 'Oswald', sans-serif; font-weight:300; }


@media screen and (max-width: 1200px) {
.home-shortcut{ float:left; width:31.33%; height:20.95%; margin:1%; }
	}
 
@media screen and (max-width: 900px) {
.home-shortcut{ float:left; width:48%; height:31.1%; margin:1%; }
 } 
@media screen and (max-width: 720px) {
#home-slide_wrap {margin:0px 0px 20px 0px; }
.home-shortcut{ float:left; width:90%; height:58.95%; margin:5%; }
.home-shortcut_title{ float:left; background:url(../images/shortcut-title_bg.png); height:40px; padding:10px 5%; width:90%; line-height:20px; color:#fff; text-align:center; font-size:20px; z-index:5; font-family: 'Oswald', sans-serif; font-weight:300; }
 }

#order-process_01{ width:34%; height:auto; float:left; padding:8.33% 0; text-align:center;}
#order-process_02{ width:34%; height:auto; float:left; text-align:center;}
#order-process_03{ width:32%; height:auto; float:left; padding:8.33% 0; text-align:center;}

@media screen and (max-width: 900px) {
#order-process_01{ width:100%; height:auto; float:left; padding:1% 0;  }
#order-process_02{ width:100%; height:auto; float:left; padding:1% 0;  }
#order-process_03{ width:100%; height:auto; float:left; padding:1% 0;  }
	}
 

/*----------------------------------------------------------------------------- 
service page
-----------------------------------------------------------------------------*/
.service01_wrap{ float:left; width:49.4%; height:100px; min-height:100px; background:#f9cf74; margin-bottom:10px;}
html>body .service01_wrap{ height:auto;}
.service_title{ float:left; margin:22px 2.8% 22px 5.8%; padding-left:1%; width:88.4%; height:48px; line-height:24px; min-height:48px; border-left:solid #FFF 5px; font-size:28px; text-transform:uppercase; vertical-align:middle; font-family: 'Oswald', sans-serif; font-weight:400;}
.service01_content_wrap{ float:left; width:100%; min-height:20px; height:20px; background:#f8bc3c;}
html>body .service01_content_wrap{ height:auto;}
.service_content { float:left; width:88.4%; padding:5.8%; height:20px; min-height:20px; color:#FFF;}
html>body .service_content { height:auto}
.service_more{ float: right; width:100%; padding:15px 0 25px 0;}

.service02_wrap{ float:right; width:49.4%; height:100px; min-height:100px; background:#9dd3d4;  margin-bottom:10px;}
html>body .service02_wrap{ height:auto;}
.service02_content_wrap{ float:left; width:100%; min-height:20px; height:20px; background:#3ab9bb;}
html>body .service02_content_wrap{ height:auto;}

.service03_wrap{ float:left; width:49.4%; height:100px; min-height:100px; background:#dcaccc;  margin-bottom:10px;}
html>body .service03_wrap{ height:auto;}
.service03_content_wrap{ float:left; width:100%; min-height:20px; height:20px; background:#c76da5;}
html>body .service03_content_wrap{ height:auto;}


.service04_wrap{ float:right; width:49.4%; height:100px; min-height:100px; background:#b1c464;  margin-bottom:10px;}
html>body .service04_wrap{ height:auto;}
.service04_content_wrap{ float:left; width:100%; min-height:20px; height:20px; background:#90ae18;}
html>body .service04_content_wrap{ height:auto;}
 
/*----------------------------------------------------------------------------- 
products
-----------------------------------------------------------------------------*/
.products_page-title_wrap { float: left; padding:20px 3% 15px 3%; width:94%; height:20px; min-height:20px; background:none; background: url(../images/page-title_bg.png); background-position:right; background-repeat:repeat-y; margin-bottom:15px;}
html>body .products_page-title_wrap { height:auto;}

.products_page-title{ float:left; width:100%; height:40px; min-height:40px; padding-bottom:5px; text-align:left;}
html>body .products_page-title{ height:auto;}

.page_link{ float:left; color:#00adea; font-size:14px; line-height:22px; width:100%; text-align: center;}
.page_link a { color:#333130;}
.page_link a:hover{  color:#00adea;}
.page_link .seprator{ color:#848484;}

#products_wrap{ float:left; background: url(../images/shortcut_bg.png); padding:2.5% 0 0 4.416666%; width:95.83334%; height: 50px; min-height:50px; }
html>body #products_wrap{ height:auto; }

.products{ float:left; width:30.833333%; height:20.1118%; margin:0 2.0% 2.0% 0; overflow:hidden; }

.relevant-products{ float:left; width:23%; height:auto; margin:0 2.0% 2.0% 0; overflow:hidden; }

.products_image{ float:left; width:100%; height:auto; text-align:center;}
.products_image figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.products_image figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.products_title{ float:left; background:url(../images/shortcut-title_bg.png); height:40px; width:100%; line-height:40px; color:#fff; text-align:center; font-size:16px; z-index:5; font-family: 'Oswald', sans-serif; font-weight:300;}

 
#main-content{ float:left; width:91.6%; height:20px; min-height:20px; background:#f7f7f7; padding:3% 4.2% 1.5% 4.2%;}
html>body #main-content{height: auto}

.content-list{ float:left; width:44%; margin-bottom:18px; background:url(../images/tick_01.png); background-repeat:no-repeat; background-position:left top; height:32px; min-height:32px; line-height:32px; font-size:20px; font-weight:normal; padding-left: 50px;}
html>body .content-list{ height:auto;}

@media screen and (max-width: 960px) {
#main-content{width:91.6%; padding:5% 4.2% 8% 4.2%;}
.content-list{ width:91.6%;}
	}
@media screen and (max-width: 800px) {
.home-content_half{ float: left; width:100%; height:20px; min-height:20px;}
.products{ float:left; width:46.27826%; height:14.17391; margin:0 2.8% 2.8% 0; }
.relevant-products{ float:left; width:46.27826%; height:14.17391; margin:0 2.8% 2.8% 0; }


.products_title{ background: rgba(0, 0, 0, .6); height:35px; width:100%; line-height:35px; color:#fff; text-align:center; font-size:16px; z-index:5;}

	}

.page_des{float:left; margin-bottom: 5%; padding: 5%;  width: 90%; height: auto;background: rgba(255, 255, 255, .4); }

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

#leftnav_wrap{ float:left; width: 25%; height:40px; min-height:40px;}
html>body #leftnav_wrap{ height:auto;}
.leftnav, .footernav ul { list-style: none; width:100%; height:auto; float:left;}
.leftnav li { float:left; list-style:none; display:block; padding-left:9%; width:91%; height:auto; background:url(../images/left_nav_bg.png); margin-bottom:1px;}
.leftnav li a{height:auto; line-height:24px; color:#000; display:block; padding:2px 0; text-align: left; }
.leftnav li a:hover { color:#fb3373;  display:block; text-decoration:underline;}
.leftnav li.selected, .leftnav li.selected a { color:#00adea; font-weight:bold;}
.leftnav li.title01{ padding-top:36px; padding-right:0; height:auto; margin-top:0;  line-height:24px; font-size:20px; color:#000; text-transform:uppercase;   font-weight:bold;}
.leftnav li.title02{ padding-top:6px;padding-right:0; margin-top:3px;   height:auto; line-height:24px; font-size:20px; color:#000; text-transform:uppercase; font-weight:bold;}
.leftnav li.end{ height:65px; margin-bottom:30px;}

@media screen and (max-width: 800px) {
#leftnav_wrap{ width:0; overflow:hidden; visibility:hidden; }
	}

 
/*----------------------------------------------------------------------------- 
product details page
-----------------------------------------------------------------------------*/
#right_wrap{ float:right; width:72.5%; height:50px; min-height:50px;}
html>body #right_wrap{ height:auto;}

.product-detail_wrap{ float:left; width:93.1%; height:50px; min-height:50px; padding:3.45%; background:url(../images/inner-content_bg.png);}
html>body .product-detail_wrap{ height:auto;}

.product-detail_left{ float:left; width:45.68%;  height:50px; min-height:50px; padding-bottom:20px;}
html>body .product-detail_left{ height:auto;}

.product-detail_right{ float:right; width:50.6%;  height:50px; min-height:50px; padding-bottom:20px;}
html>body .product-detail_right{ height:auto;}

.product-detail_right h2 { float:left; font-size:24px; line-height:24px; color:#333130; text-align:left; font-weight:bold; font-weight:normal; padding-top:2px; padding-left:5px; border-left:5px #FFF solid;  }



@media screen and (max-width: 800px) {
#right_wrap{ float:left; width:100%; }
.product-detail_left, .product-detail_right{ width:100%;}
	}

 
/* product_detail form */
 
.product-detail_name{ float:left; width:98%; height:21px; line-height:21px; color:#000; margin-bottom:3px; padding-left:2%; }
.product-detail_field{ float:left; width:100%; height:31px; min-height:31px; margin-bottom:20px;} 
html>body  .product-detail_field{ height:auto}
#product-detail_submit{ float:left; width:100%; height:38px; }
.product-detail-sbn{float:left; width:205px; padding-right:45px; background:url(../images/btn_before.png); color:#fff; background-position:right; text-align: center; line-height:39px; margin:14px 0 0 0px; font-size:18px; border:0; cursor:pointer;}
.product-detail-sbn:hover{ color:#fff; background: url(../images/btn_hover.png);  background-position:right;}

 
.product-detail_inputfield-quote{ 
 border:none;
 padding:2px 1.154% 2px 3.846%;
 color: #000;
 line-height:27px;
 height:auto;
 width:95%;
 background:#FFF;
 font-size:15px;
}

.product-detail_inputfield_drop{ 
 border-width:0px;
 border:none;
 padding:3px 3px 3px 10px;
 line-height:31px;
 height:31px;
 width:100%;
 background:#FFF; 
 color: #000;
 text-align:center;
 cursor:pointer;
 display:block;
 font-size:15px;
}
 

@media screen and (max-width: 1200px) {

#product_detail_wrap{width:100%;}
#exprss-enquiry, #exprss-enquiry-confirm { float:right; margin-right:2.5%;}

	}
	
@media screen and (max-width: 800px) {
#product_detail_title{ font-size:24px;}
#product_detail_wrap-out{height:10px; min-height:10px; background: none;}
#exprss-enquiry{ float:left; width:75%; padding-left:10%;padding-right:10%; margin-left:2.5%; height:10px; min-height:10px;}
#exprss-enquiry-confirm{ float:left; width:75%;padding-left:10%;padding-right:10%; margin-left:2.5%; height:10px; min-height:10px;}
	}




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

#footernav_wrap{ float:left; width: 98%; padding:2% 0 0 2%; height:20px; min-height:20px; background:url(../images/footer-nav_bg.png)}
html>body #footernav_wrap{ height:auto;}
.footernav, .footernav ul { list-style: none; width:100%; height:auto; float:left;}
.footernav li { float:left; list-style:none; display:block; width:18.21%;  margin-right:1.7%;  height:auto;}
.footernav li a{height:36px; line-height:36px; border-bottom: 1px solid #b1b1b1; color:#fff; display:block; font-family: 'Oswald', sans-serif; font-weight:300; text-align:center;}
.footernav li a:hover { color:#fff; display:block; background: url(../images/shortcut_bg.png); }
.footernav li.title{ float:left; width:97.85%;  height:25px; min-height:25px; line-height:25px; padding-top:8px; padding-bottom:16px; color:#fff; display:block; border-bottom: 1px solid #b1b1b1;}
html>body   .footernav li.title{ height:auto;}

#footernav_end{ float: left; width:100%; height:149px; background:url(../images/footer_bg.png); background-position:center top; background-repeat:no-repeat;}

#footer { float:left; width:100%; height:auto; padding:27px 0; text-align:center}


@media screen and (max-width: 1200px) {
	.footernav li {  width:48.075%;  margin-right:1.7%;  }
	}
	
@media screen and (max-width: 800px) {
	.footernav li {  width:100%;  margin-right:0;  }
	}


/*----------------------------------------------------------------------------- 
other pages
-----------------------------------------------------------------------------*/
 
 

/* contact us */
#enquires_left{ float:left; width:40%;height:50px; min-height:50px; border-left: solid 6px #e1e1e1; padding-left:20px; }
html>body #enquires_left{ height:auto}

#enquires_right{ float:right; width:50%; height:50px; min-height:50px; border-left: solid 6px #e1e1e1; padding-left:20px; }
html>body #enquires_right{ height:auto}
@media screen and (max-width: 800px) {
	
#enquires_left{ float:left; width:90%; padding-left:26px; margin-bottom:20px; }
#enquires_right{ float:left; width:90%; padding-left:26px; }
	}



/* contact form */			

.inputfield-contact
{ 
 border-width:1px;
 border-style:solid;
 border-left-color:#d3d3d3;
 border-top-color:#d3d3d3;
 border-right-color:#d3d3d3;
 border-bottom-color:#d3d3d3;
 padding:1px 2px 2px 2px;
 color: #232521;
 font-size: 12px;
 width: 280px;
 background-image: url(image/bg_contact.gif);
 background-repeat:repeat;
}

.inputfield_drop
{ 
 border-width:1px;
 border-style:solid;
 border-left-color:#d3d3d3;
 border-top-color:#d3d3d3;
 border-right-color:#d3d3d3;
 border-bottom-color:#d3d3d3;
 padding:1px 2px 2px 2px;
 color: #666666;
 font-size: 12px;
 width: 255px;
background-image:url(images/bg_contact.gif);
}

.submitBtn{ width:245px; height:25px; text-align:center; cursor:pointer; background: #691f80; border:none; line-height:25px; color: #ffffff; margin-top:10px;}
.submitBtn:hover{color:#fff; background:#e533f0; text-align:center; text-transform:uppercase;}

/* validate */

#PicValidate { font-size:12px; color:#FF0000; width:32px; line-height:22px;}
#call-submit2 { width:218px; height:22px; cursor:pointer;}

#validate_inputfield{ float:left; width:60px; height:30px; margin-right:20px;}
.inputfield-validate
{ 
 border-width:1px;
 border: thin;
 padding:0px 3px 0px 3px;
 font: normal 12px/30px Arial, Helvetica, sans-serif ;
 width: 60px;
 height:30px;
 color:#1e5692;
 background:#FFF;}
#validete_image{ float:left; width:100px; height:30px; overflow:hidden; overflow:hidden;}
#change-picture{ float:right; height:30px; width:32px; margin-right:16px;}
.change-picture{ width:32px; height:30px; background: url(../images/change-picture.png); cursor:pointer; background-position:center; border:0px;}
.change-picture:hover{background:url(../images/change-picture_hover.png); cursor:pointer; background-position:center;}

 
/* responsive video! */	
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}



/*- packing and price -*/ 
#product-packing_wrap-out{ float:left; width:100%; height:auto; padding-bottom:30px; }
.product-packing_wrap{ float:left; width:45%; height: auto; line-height:20px; padding-bottom:6px; border-bottom:#FFF dotted 1px; margin-bottom:6px; margin-right:5%;}
.product-packing { float:left; width:60%; height: auto; line-height:20px;}
.product-packing_price{ float:right; width:30%; height: auto; line-height:20px; text-align:right;}
/*- end of packing and price -*/ 

/*- product add to basket raw-*/
#add-to-basket_wrap{ float: left; width:100%; height:36px; min-height:36px; padding:30px 0 28px 0; background:#4d4d4d;  -moz-border-radius: 8px; -webkit-border-radius: 8px;}
html>body #add-to-basket_wrap{ height:auto}

#add-packing_wrap{ float:left; width:55%; height:auto; margin-right:5%;}
#add-packing_title{ float: left; width:35%; padding-right:5%; text-align:right; line-height:36px; font-size:20px; color:#fff; height:auto;  }
#add-packing{ float:right; width:60%;height:36px;}

#add-quantity_title{ float: left; width:45%; padding-right:5%; text-align:right; line-height:36px; color:#fff; font-size:20px; height:auto; }
#add-quantity_wrap{ float:left; width:24%; height:auto}
#add-btn_wrap{ float:right; width:60%; margin-right:20%; height:auto; text-align:center;}

  
 @media screen and (max-width: 1200px) {
#add-packing_wrap{ float:left; width:85%; height:auto; }
#add-quantity{ float:right; width:40%;height:auto;}
#add-btn_wrap{ float:left; width:70%; height:auto; text-align:center;  padding-left:15%;}

 }
 

/*- end of product add to basket raw-*/  

.product-discount-save { float: left; width:100%; height:auto; font-weight:bold; font-size:17px; padding-bottom:30px;}


.product-qty_field
{ 
 border: 1px solid #e2e2e2; border-radius: 5px;
 margin:0px; padding:0px; 
 font:normal 20px/20px Helvetica, Arial, sans-serif;
 text-align: center;
 color:#27235e;
 height:20px; width:96%;
 padding:6px 2%; margin:2px 0;
 background:#FFF;
 width:40px;
 
}
 
.product_add-btn_wrap{ float: left; width:50%; height:60px; margin-bottom:20px;}

.product_add-btn{ display:block; font-size:20px; line-height:20px; font-family: 'Glegoo', serif; font-weight: 400; padding:10px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background:#e54779; text-align:center; color:#fff; border:0; cursor:pointer; width:100%;}
.product_add-btn:hover{ background:#f31b5f;}

.product_stock{ float: left; width:100%; height:auto; padding-bottom:10px;}
.stock{ font-weight:bold; color:#26abdc;}
 
.product-detail_des{ float: left; width:94%; margin:3%; height:20px; min-height:20px;}
html>body  .product-detail_des{ height:auto}
 
.product-detail_title{ float: left; width:100%; height: auto; font-size:20px; text-align:center; padding-bottom:10px; border-bottom:solid 1px #c6c6c6; margin-bottom:20px;}
 
  
.guess-you-like_wrap { float:left; width:100%; height:41px; margin-bottom:10px; margin-left:5px; background:#f7f7f7; margin-top:20px; padding:20px 0;}
.guess-you-like_wrap h3{ color:#333; text-align:center; line-height:41px; padding:0; margin:0;}

  
 @media screen and (max-width: 1200px) {
.prodcut-detail_wrap { width:99%;}
 }
 
 @media screen and (max-width: 786px) { 
#product-img_wrap{ float: left; width:96%; margin:2%; padding-right:0; border-right: none;}
#product-des_wrap{ float: right; width:94%; margin:3%;}
}


/*-----form standard style01 -----*/
.inputfield-contact { 
 border: 1px solid #e2e2e2; border-radius: 5px;
 margin:0px; padding:0px; 
 font:normal 15px/20px Helvetica, Arial, sans-serif;
 color:#27235e;
 width:95%;
 padding:8px 2%;
 background:#FFF; }
    
.inputfield-contact-drop
{ 
 padding:8px 2px 10px 2px; margin:3px;
 font-family: Arial, Helvetica, sans-serif;
 color:#27235e;
 background-repeat:repeat;
 font-size: 14px;
 line-height:28px;
 width: 98%;
 border: 1px solid #e2e2e2; border-radius: 5px;
 cursor: pointer;
 text-indent: 0.01px;
 text-overflow: "";
}

 
/*----------------------------------------------------------------------------- 
cart 01
-----------------------------------------------------------------------------*/
.sub-page_title{ float:left; width:93.1%; height:24px; min-height:24px; padding:15px 3.45% ; background: url(../images/inner-title_bg.png);}
html>body .sub-page_title{ height:auto;}

.sub-page_title h2 { float:left; font-size:24px; line-height:24px; color:#333130; text-align:left; font-weight:bold; font-weight:normal; padding-left:5px; border-left:5px #FFF solid; text-transform:uppercase; width:80%;}

.cart_title{ float:left; width:85%; height:191px; min-height:191px; padding:15px 3.45% ; background: url(../images/inner-title_bg.png);}
html>body .cart_title{ height:auto;}

.cart_title h2 { float:left; font-size:24px; line-height:24px; color:#333130; text-align:left; font-weight:bold; font-weight:normal; padding-left:5px; border-left:5px #FFF solid; text-transform:uppercase; width:90%;}

#cart-cancel{ float:right; width:24px; height:24px;} 

.cart-product_wrap{ float: left;width:93.1%; height:50px; min-height:50px; padding: 2% 3.45%; margin-bottom:10px; background:url(../images/inner-content_bg.png)}
html>body .cart-product_wrap{ height:auto;}
.cart-product_img{ float: left; width:37%; height:20px; min-height:20px;}
html>body .cart-product_img{ height:auto;}
.cart-product_right{ float: right; width:60%; height:221px; min-height:221px;}
html>body .cart-product_right{ height:auto;}
.cart-des_wrap{ float:left; width:100%; height:20px; min-height:20px; padding:5px 0; background:#FFF; margin-bottom:1px;}
html>body .cart-des_wrap{ height:auto;}
.cart-des_title{ float:left; width:40%;height:18px; min-height:18px; text-align:right; line-height:18px; font-weight:bold; padding-right:5%; border-right:solid 1px #CCC;}
html>body .cart-des_title{ height:auto;}
.cart-des{ float:right; width:50%; height:18px; min-height:18px; line-height:18px;}
html>body .cart-des { height:auto;}
 
.sub-page_button_update{ float:left; width:93.1%; height:39px; padding:15px 3.45% ; background: url(../images/inner-title_bg.png);margin-bottom:10px;}
.sub-page_button_wrap{ float:left; width:93.1%; height:39px; min-height:39px; padding:15px 3.45%; margin-bottom:20px;}
html>body .sub-page_button_wrap{ height:auto;}
.sub-page_button_left{ float: left; width:250px; height:39px;}
.sub-page_button_right{ float: right; width:250px; height:39px;}

@media screen and (max-width: 800px) {
#right_wrap{ float:left; width:100%; }
.product-detail_left, .product-detail_right{ width:100%;}
.cart_title{  height:auto; }
.cart-product_img{ float: left; width:100%; }
.cart-product_right{ float:left; width:100%; height:auto;}
.sub-page_button_left{ float: left; width:100%; margin-bottom:20px; }
.sub-page_button_right{ float:left; width:100%; }
	}



/*-------- cart 02--------*/

.subBtn { display:block; height:36px; line-height:16px; font-size:16px; color:#fff; background-color:#454269; background-image:url(../images/general/Aarrow.png); background-repeat:no-repeat; background-position:right; padding:10px 50px 10px 15px; border:none; text-decoration:none; cursor:pointer; }
.subBtn:hover { background: #27235e; border: none; text-decoration:none; background-image:url(../images/general/Aarrow02.png); background-repeat:no-repeat; background-position:right;}
 
 .upBtn { display:block; height:36px; line-height:16px; font-size:16px; color:#fff; background-color:#454269; background-image:url(../images/general/Aarrow_up.png); background-repeat:no-repeat; background-position:right; padding:10px 50px 10px 15px; border:none; text-decoration:none; cursor:pointer; }
.upBtn:hover { background: #27235e; border: none; text-decoration:none; background-image:url(../images/general/Aarrow_up02.png); background-repeat:no-repeat; background-position:right;}
 
.checkoutBtn { display:block; height:36px; line-height:16px; font-size:16px; color:#fff; background-color:#f19f1d; background-image:url(../images/general/Aarrow.png); background-repeat:no-repeat; background-position:right; padding:10px 50px 10px 15px; border:none; text-decoration:none; cursor:pointer; }
.checkoutBtn:hover { background: #ffcc00; border: none; text-decoration:none; background-image:url(../images/general/Aarrow02.png); background-repeat:no-repeat; background-position:right;}
 
.btnBack {display:block; height:36px; font:normal 16px/16px Arial, Helvetica, sans-serif; color:#fff; background-color:#454269; background-image:url(../images/general/Aarrow03.png); background-repeat:no-repeat; background-position:left; padding:10px 15px 10px 45px; border: none; display:block; text-decoration:none; cursor:pointer;}
.btnBack:hover { background: #27235e; border: none; text-decoration:none; background-image:url(../images/general/Aarrow04.png); background-repeat:no-repeat; background-position:left;}

.cart-form{ float:left; width:100%; height:auto; background: #F8F8F8; margin:10px 0;}
.cart-form_left{ float:left; width:58%; height:auto; padding:5px 0 5px 2%;line-height:36px;}
.cart-form_middle{ float:left; width:20%; height:auto; padding:5px 0; line-height:36px; text-align:right; color:#00adea;}
.cart-form_right{ float:right; width:20%; height:auto; padding:5px 0; line-height:36px; text-align:center; }
.cart-form_chechout{ float:right; width:40%; height:auto; padding:5px 0; line-height:36px; text-align:center; }
#delivery-title{width:39%; float:left; font-family: 'Oswald', sans-serif; font-weight:700; font-size:22px; }
#delivery-postcode{width:16%; float:left; text-align:right; margin-right:1%; font-weight:bold;}
#delivery-field{width:15%; float:left; margin-right:4%;}
#delivery-Btn{width:25%; float:right;}
 @media screen and (max-width: 786px) { 
.cart-form_left{  width:100%; height:auto; padding:5px 0;line-height:36px; text-align:center;}
.cart-form_middle{   width:50%; height:auto; padding:5px 0; line-height:36px; text-align:right; color:#00adea;}
.cart-form_right{   width:50%; height:auto; padding:5px 0; line-height:36px; text-align:center; }
#delivery-title{width:100%; text-align:center;}
#delivery-postcode{width:30%; }
#delivery-field{width:20%;  }
#delivery-Btn{width:42%; float:right;}
}


 #btnSignup {font:normal 16px/16px Arial, Helvetica, sans-serif; color:#fff; background-color:#ff9c00; background-image:url(../images/general/Aarrow.png); background-repeat:no-repeat; background-position:right; padding:5px 45px 5px 15px; border: none; display:block; text-decoration:none; cursor:pointer; overflow:hidden; height:26px;}

 #btnSignup:hover { background: #ffcc00; border: none; text-decoration:none; background-image:url(../images/general/Aarrow02.png); background-repeat:no-repeat; background-position:right;}



  #btnChangePassword{font:normal 16px/16px Arial, Helvetica, sans-serif; color:#fff; background-color:#353535; background-image:url(../images/general/Aarrow03.png); background-repeat:no-repeat; background-position:left; padding:5px 15px 5px 45px; border: none; display:block; text-decoration:none; cursor:pointer;}

   #btnChangePassword:hover{ background: #ffcc00; border: none; text-decoration:none; background-image:url(../images/general/Aarrow04.png); background-repeat:no-repeat; background-position:left;}


#btnReset, #btnCancel{font:normal 16px/16px Arial, Helvetica, sans-serif; color:#fff; background-color: #999;  padding:5px 15px 5px 15px; border: none; display:block; text-decoration:none; cursor:pointer;height:26px;}

#btnReset:hover, #btnCancel:hove{ background: #333; border: none; text-decoration:none; }
 

.formfield 
{ 
 border: 1px solid #e2e2e2; border-radius: 5px;
 margin:3px 0; 
 font:normal 16px/20px Arial, Helvetica, sans-serif;
 padding:5px 5%;
 text-align:left;
 color:#000000;
 height:20px; 
 width:90%;
}

.formfield-center
{ 
 border: 1px solid #e2e2e2; border-radius: 5px;
 margin:3px 0; 
 font:normal 16px/20px Arial, Helvetica, sans-serif;
 padding:5px 0;
 text-align: center;
 color:#000000;
 height:20px; 
 width:100%;
}


/*-------- check out --------*/
.entryTable, .label, infoTable, .content,.text { font:Arial, Helvetica, sans-serif; color:#000; padding:8px; text-transform:capitalize;}
.entryTableHeader, .infoTableHeader{ font-size:18px; line-height:18px; color:#fff; font-weight:700; background:#313131; padding:10px 0px 10px 10px; text-align:center;}
#entryTableHeader{ text-align:center; width:100%; height:36px;}
.titleTable{font:Arial, Helvetica, sans-serif; color:#333; background:#dbd7e8; padding:8px; text-align:center; font-weight:bold;}
.itemTable{font:Arial, Helvetica, sans-serif; color:#333; background:#e8e5f1; padding:8px; text-align:center; }
.itemTable_02{font:Arial, Helvetica, sans-serif; color:#333; background:#e8e5f1; padding:8px; text-align:right; padding-right:15px; }
#entryTableHeader




/*credit card checkout*/
.checkout_wrap{ float:left; width:60%; height:20px; min-height:20px; padding-left:20%}
html>body .checkout_wrap{ height:auto;}
.checkout_row01{ float: left; width:100%; height:28px; min-height:28px; padding:6px 0;  background:#f8f8f8; }
html>body .checkout_row01{ height:auto;}
.checkout_row02{ float: left; width:100%; height:28px; padding:6px 0;background:#e8e8e8;}
html>body .checkout_row02{ height:auto;}
.checkout_row-left{ float:left; width:26%; height:22px; min-height:22px; line-height:22px; padding:6px 2%;}
html>body .checkout_row-left{ height:auto;}
.checkout_row-right{ float:left; width:46%; max-width:46%; height:22px;min-height:22px; line-height:22px; padding:3px 4%;}
html>body .checkout_row-right{ height:auto;}

.checkout_row-CVN{ float:left; width:80px; height:22px;min-height:22px; line-height:22px; padding:3px 4%;}
html>body .checkout_row-CVN{ height:auto;}
 
.checkout_field{ 
 border: 1px solid #b6b6b6; border-radius: 4px;
 margin:0px;  
 font:normal 15px/20px Helvetica, Arial, sans-serif;
 color:#27235e;
 width:96%;
 padding:4px 2%;
 background:#FFF; }
 
.select-checkout {
    border: 1px solid #e2e2e2;
	height:36px; line-height:36px;
    width: auto;
    border-radius: 5px;
    overflow: hidden;
    background: #fafafa url("..images/icon-select.png") no-repeat 90% 50%;
}

.select-checkout select {
    padding: 8px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
	font:normal 17px/20px Helvetica, Arial, sans-serif;
    -webkit-appearance: none;
}

.select-checkout select:focus {
    outline: none;
}
 
 
@media screen and (max-width: 980px) {
.checkout_row-right{ max-width:100%; width:62%; }
	}
 
@media screen and (max-width: 560px) {
.checkout_wrap{ float:left; width:100%; padding-left:0;}
	}



/*--------memberahip--------*/

/* login system */

.login-wrap-out-out{ float:left; width:91.166668%; height: 50px; min-height:50px; padding:4.5%; background: url(../images/shortcut_bg.png);   }
html>body .login-wrap-out-out{ height:auto;}

.login-wrap-out{ margin:0 auto;  width:30%; height:80px; min-height:80px; padding:20px 40px 40px 40px; border:1px solid #ffffff; border-radius: 5px; background:url(../images/white50.png);}
html>body .login-wrap-out{ height:auto;}

.login-wrap01{ float:left; width:100%; height:36px;}
.login-wrap02{ float:left; width:100%; height:36px; margin-bottom:20px;}


 @media screen and (max-width: 1200px) {
.login-wrap-out{width:370px; }
 }
 
 @media screen and (max-width: 680px) { 
.login-wrap-out{width:80%; }
}



#errorMessage { float:left; height:16px; padding:5px 20px 10px 0px; color:#FF0000; font: bold 16px/16px Verdana, Geneva, sans-serif;}
#content_title{ float:left; width:100%; height:20px; min-height:20px; margin-bottom:10px;}
html>body #content_title{ height:auto}

#content_row00{ float:left; width:100%; height:2px; min-height:2px; padding-bottom:1px;}
html>body #content_row00{ height:auto}
#content_row01{ float:left; width:100%; height:30px; min-height:30px; padding-bottom:10px;}
html>body #content_row01{ height:auto}
#content_row01_02{ float:left; width:35%; height:30px; min-height:30px; padding-bottom:10px; padding-right:350px;}
html>body #content_row01_02{ height:auto}
#content_row02{ float:left; width:30%; height:30px; min-height:30px; padding-bottom:10px; text-align:right; padding-right:10px; text-transform:capitalize; line-height:30px;}
html>body #content_row02{ height:auto}
#content_row03{ float:left; width:60%; height:30px; min-height:30px; padding-bottom:10px;}
html>body #content_row03{ height:auto}
#content_row04{float:left; width:33%; height:30px;}
#contnet_row05{float:right; width:33%; height:30px;}

#middle_checkorder{ float:left; padding-bottom:20px; width: 494px; padding:0 20px 20px 20px;}
#middle_checkorder a{ font-weight:bold; color:#3c2d68; text-decoration:underline}
#middle_checkorder a:hover{ font-weight:bold; color:#982985;}

.uploading-btn{ display:block; font-size:20px; line-height:20px; padding:7px 30px; border-radius: 5px; background:#ffffff; text-align:center; color:#000; border: 2px solid #e54779; cursor:pointer; width:auto; }
.uploading-btn:hover{ background:#f31b5f;}
 
/*-----form standard style------*/
.inputfield-contact { 
 border: 1px solid #e2e2e2; border-radius: 3px;
 margin:0px; padding:0px; 
 font:normal 15px/20px Helvetica, Arial, sans-serif;
 color:#27235e;
 width:96%;
 padding:8px 2%;
 background:#FFF; }
    
.inputfield-contact-drop
{ 
 padding:3px 2px 5px 2px; margin:3px;
 font-family: Arial, Helvetica, sans-serif;
 color:#27235e;
 background-repeat:repeat;
 font-size: 14px;
 line-height:28px;
 width: 100%;
 border: 1px solid #e2e2e2; border-radius: 5px;
 cursor: pointer;
 text-indent: 0.01px;
 text-overflow: "";
}

#form-row{ float:left; height:32px; min-height:32px; width:504px; padding-bottom:15px;}
html>body #form-row{ height:auto}
#form-left{float:left; width:124px; height:20px; font:normal 14px/20px Arial, Helvetica, sans-serif; color:#333; padding:6px 8px; text-transform:capitalize;}
#form-right{ float:right; width:364px; height:32px;}
#form-right02{ float:right; width:348px; height:20px; font:bold 14px/20px Arial, Helvetica, sans-serif; color:#333; padding:6px 8px; text-transform:capitalize;}

#form-title{ float:left; height:28px; min-height:28px; width:504px; padding:15px; margin-top:10px; background:#6d618d;}
html>body #form-row{ height:auto}



.select-style {
    border: 1px solid #e2e2e2;
	height:36px; line-height:36px;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("..images/icon-select.png") no-repeat 90% 50%;
	font-family:Helvetica, Arial,  sans-serif; font-size:15px; color: #000000; 
}

.select-style select {
    padding: 4px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
}

.IMG_loading{
overflow: hidden; 
border-radius: 12px 0px 12px 0px; 
display:block; 
border:none; 
font:normal 20px/20px Helvetica, Arial,sans-serif; 
color:#fff; text-decoration:none; 
text-transform:capitalize;
background-color:#26abdc;
padding:10px;
cursor:pointer;
 }
	
.IMG_loading:hover{
 background: #262262; }
 
 
 /*--login system--*/ 
.login-panel{  }
 
#memberlogin{ margin:100px 0px 0px 0px; width:350px;  border-radius:8px; height:300px; background: url(../images/general/background+pattern+design+37.jpg);  z-index:100;}
 
#forgetpassword{ margin:100px 0px 0px 0px; width:350px; height:300px; background:url(../images/member/bg_forgetpassword.png);
z-index:1;}
 
#errorMessage{ color:#FF0000; text-align: center; font-weight:bold;}

.graybox{ background: none;}

.login_title{ height:30px;  text-align:right; padding-right:10px; text-transform:capitalize; line-height:30px; }
#login_left{float:left; width:50%; height:30px;}
#login_right{float:right; width:50%; height:30px;}

.loginfield 
{ 
 border:none; border-width:0px;
 margin:0px; 
 font:normal 14px/40px Arial, Helvetica, sans-serif;
 text-align:center;
 color:#b5b3b5;
 height:40px; 
 width:93%;
}


.forget-your-password a { color:#ff9c00;}
.forget-your-password a:hover { color:#FFF;}

.row1 {
	background-color: #EFEFEF; color:#000;
}

.row2 {
	background-color: #DEDEDE;color:#000;
}


 /*--member profile--*/ 
.form_wrap{ float:left; width:100%; height:15px; min-height:15px;}
html>body .form_wrap{height:auto;}

.form_wrap-pin{ float:left; width:95%; height:15px; min-height:15px; margin-bottom:30px;}
html>body .form_wrap-pin{height:auto;}

.form_wrap-member{ float:left; width:85%; height:15px; min-height:15px; margin-bottom:30px;}
html>body .form_wrap-member{height:auto;}

.form_row{ float:left; width:100%; height:auto; padding-bottom:20px;}
.form_left{ float:left; width:30%; height:auto; padding:10px 0; line-height:24px;}
.form_right{ float:right; width:68%; height:auto; padding:10px 0;}

@media screen and (max-width: 800px) {
.form_wrap-member{   width:95%;  }
	}


/* ===================== Custom Checkbox / Radio Buttons ===================== */

/* The checkbox container */
.container {
    display: block;
    position: relative;
    padding-left: 39px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	text-align:left;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

 
/* +++ Create a custom checkbox +++ */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: solid 2px #5E5E5E;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;  
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #cc2183; border:none; 
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

 
 
/* +++ Create a custom radio button +++ */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #cc2183;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}