/* ------------------------------------------------------------------
--  Copyright             :  2014
--  Author                :  JOHN J YIN
--	Email				  :	 john.yin@ebizdesigner.com
--  Version               :  0.1
--  Date                  :  14/03/2014
--  Description           :  Styles of Opencart Default Responsive Theme
--                         
--  
--                           
--
--  History               :  
--     <author>   <time>      <version >       <desc>
--		John	14/03/2014		0.1				initial
--
--------------------------------------------------------------------- */


/*	-------------------------
		global
	-------------------------	*/

body {
	overflow: hidden;						/* content width=960px~980px, scroll-bar coming out*/
	/*background: url('../image/grid.png');*/	/* grid background */
}

a, a:visited, a b {
    color: #BE9E56;
    cursor: pointer;
    text-decoration: none;
}

a:hover,
a b:hover {
    color: #FFFFFF;			/* unified hover effect on link */
	transition: all 0.5s ease 0s;		/* transition effect */
	text-decoration: none;
}
h1, .welcome {
	color: #636E75;
	/*margin-top: 0px;*/
	margin-bottom: 20px;
	text-shadow: 0 0 1px rgba(0, 0, 0, .01);
}

 
/* ------------------------------------
	all table header 
	- Account >> Transactions
	- .compare-info (Product Comparision)
 * ------------------------------------*/

table thead td a,
thead tr,
thead td,
.compare-info tr td:first-child 
 {
    color: #999;					/* replace default #222 */
}



/* */


.box {
	margin: 0px;
}

.box .box-heading {
	border: none;
	/*background: url('../image/grid.png') repeat;*/	/* remove default background */
	line-height: 120%;
	padding: 10px 5px;					/* replace default 7px - 10px padding */
	color: #888;						/* replace default #000 color */
	border-radius: 0px;					/* remove default border-raidus */
}

.box .box-content {
	border: none;
}

	
/* ------------------------------------
	Clearning 
 * ------------------------------------ */
.clearbreak {
	clear: both;
}
.clearafter:after {
	height: 0;
	clear: both;
	content: "";
	display: block;
	visibility: hidden;
}


/* ------------------------------------
	#container
 * ------------------------------------ */

#container {
    background: none repeat scroll 0 0 #FFFFFF;
    /*border-radius: 6px;*/
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);*/
    /*margin: 20px auto;*/
    /*padding: 10px 20px 20px;*/
	/*width: 980px;*/
	width:100%;
}


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

#header {
    height: auto;					/* !!important to not overlap with slideshow */
	/*background-image: url(../image/header.jpg);*/
	background:#000;
	/*background-repeat:no-repeat;
	background-size:cover;*/
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
	/* overflow: hidden; */			/* would cut off drop menu */
}
@media all and (max-width: 604px) {
	#header {
		background: #FFF;
	}
}
#header #topbar {
	padding: 1px 0;
	position: relative;
	/* border-bottom: 1px solid #ddd; */
}


/* ------------------------------------
	#header -> #topbar
 * ------------------------------------ */

#topbar .wrapper {
    padding: 1px 0;
	text-align: center;						/* center currency text when < 640px*/
}

#header #topbar {
    padding: 1px 0;
    position: relative;
}

#topbar #currency {
    left: 0;
    position: relative;
    top: 4px;								/* same line with .links */
    width: auto;
}

#currency a {
    border: medium none;					/* remove default border */
}
#currency a b {
    color: #999;
}

#topbar form {
    float: left;
}
#header .links {
	/* position: relative; */
	float: left;
	background-color:#000;
	bottom: 50px;
	/*
	float:right;
	width: 400px;*/
   /* margin: 5px 0;	*/					/* same line with #welcome */
	/*top: 0px;	*/						/* same line with #welcome */
	/*text-align: left;/*					/* left align links content */
}

#header .links a {
    color: #999;
    display: inline-block;
    float: none;
    padding-left: 20px;
    text-decoration: none;
	transition: all 0.5s ease 0s;		/* transition effect */
}

#header .links a:hover {
	color: #BE9E56;						/* hover effect on link */
}

#header .links a + a {
    border-left: medium none;
    margin-left: 0px;
}

#header #logo {
	float: left;
}

/* ------------------------------------
	#header -> #toppanel
 * ------------------------------------ */
#header #logo {
	position: relative;
    left: 0;
    padding:1%;
	width:14.66%;
    top: 0;
}


/* ------------------------------------
		#topmenu - > #menu
 * ------------------------------------ */

#menu {
	/*box-shadow: 0 2px 0 #DDDDDD;*/
	/* height: 40px; */
	border-radius: 0px;					/* replace default 5px radius */
}

#mainmenu-toggle {
	display: none;						/* hide toggle button as default */
}	

.menuclear:after {
	clear: both;
}

.menuclear {
	*zoom: 1;
}


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

#content-wrapper {
	float: left;
}
 
#content {
	/* float: left; */ /* !!!! can not be set left */
}
#content .content {
	padding: 10px;
	overflow: auto;
	margin-bottom: 20px;
	border: 1px solid #EEEEEE;
}
#content .content .left {
	float: left;
	width: 49%;
}
#content .content .right {
	float: right;
	width: 49%;
}

/* ------------------------------------
	#content -> .slideshow
 * ------------------------------------ */
	
#content .slideshow {
	width: 100%;
	overflow: hidden; /* !! hide overflow sliding photo */
	float: left;
}


/* ------------------------------------
	#box-product
 * ------------------------------------ */

.box-product > div {
	float: left;
	text-align: center; 				/* center text */
	white-space: nowrap;				/* no wrap text */
	margin-right: 0px;					/* remove default right margin */
	margin-bottom: 0px;					/* remove default 20px bottom margin */
}

.box-product div div {
	display: block;
	overflow: hidden;
	margin: 5px 0;
}

.box-product .image {
	/* border: 1px solid #FFF;*/			/* keep 1px border space to hovering */
}
.box-product .image:hover {
	/* width: 119px; */
	/* border: 1px solid #E7E7E7; */
}

.box-product .image img {
	border: none;						/* remove default border */
	vertical-align: middle;
	border: none; 						/* remove default border */
	padding: 0px; 						/* remove default padding */
}


.box-product .image img:hover {
	/*border-color: #E15452;  		*/
}

.box-product .name a {
    color: #BE9E56;						/* new color for name */
}

.box-product .name a:hover {
	color: #000 !important;
}

.box-product .price {
	margin-bottom: 10px;				/* replace default 4px */
}



/* ------------------------------------
	.product-info
		
	Product Detail Page
		
 * ------------------------------------ */

#content h1 {
    color: #999999;
}

.product-info {
	line-height: 20px;
}
 
.product-info .description span {
    color: inherit;						/* replace special blue color */
}

.product-info .options > h2,
.product-info .options > br {
	display: none;						/* hidden Available Options */
	
}


/* ------------------------------------
	#content .product-list
		
	- Products List Page
		
 * ------------------------------------ */

.product-filter {
    line-height: 20px;
}

/* in-active filter choice */
.product-filter .display a {		
    color: #BE9E56;
}
.product-filter .display a:hover {		
    color: #000 !important;
}
.product-list .name {
    float: left;
}

.product-list .description {
    float: left;
}


/* ------------------------------------
   #tab-container
 * ------------------------------------ */

.htabs a {
	display: block;
}

.tab-content {
	margin-bottom: 0px;					/* remove default 20px */
}

#tab-attribute .attribute thead td,
#tab-attribute .attribute thead tr td:first-child,
#tab-attribute .attribute tr td:first-child {
	color: #999999;						/* title color: #999 / #AAA */
}


/* ------------------------------------
    .tags
	
 * ------------------------------------ */
.tags {
	margin: 5px auto;
}

/* ------------------------------------
    .sitemap-info
	
 * ------------------------------------ */
 
.sitemap-info ul {
    padding-left: 20px;
}
 

/* ------------------------------------
    .wishlist-info
	
 * ------------------------------------ */
 
.wishlist-info table {
	table-layout: fixed;
}
 
 
/* ------------------------------------
	#footer
 * ------------------------------------ */ 

#footer {
    background: #000000;
	padding: 0px; 							/* remove original padding=20px */
	border-top: none;						/* reomve default top border */
	border-bottom: 1px solid #333333;		/* */
    border-top: 1px solid #333333;			/* */
}


#footer .column {
	float: left;
	width: 23%;
	margin: 10px 1%;
	min-height: 100px;
	text-align: left;
}

#footer .column h3 {
	color: #666;
}

#footer .column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .column ul li {
	padding: 0;							/* remove default padding */
	margin: 0;							/* remove default margin */
	line-height: 19px;					/* unified line height with */
}

#footer .column a {
    color: #BE9E56;
}

#footer .column a:hover{
	color: #CCC;
	transition: all 0.5s ease 0s;		/* transition effect */
	text-decoration: none;
}

/* ------------------------------------
	#powered
 * ------------------------------------ */ 

#powered {
	margin: 0px;						/* remove default 5px top margin */
	padding: 5px;
	text-align: center;
	clear: both;
	background: #222;					/* same color with #footer */
    color: #FFFFFF;
}


/* ------------------------------------
	#colorbox 
	- to fix ColorBox style
 * ------------------------------------ */

 #cboxTitle {
    left: 20px!important;
}

a.fancybox > b:hover {
	color:#000 !important;
}
#fancybox-content h1 {
	margin-top:10px;
}
#fancybox-content p {
	color:#FFF;
}