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


/* =================================================================

							1040px
	container (980px) 
	+ left & right padding (20px + 20px) 
	+ right sroll bar (20px)
	-----------------------------
	=	1040px

 * ================================================================= */

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


/* ------------------------------------
	.wrapper 
	- for left and right margin
 * ------------------------------------ */
.wrapper {   
    margin: 0 20px;
    width: auto;
}

#topbar #welcome {
    display: none;
}


/* ------------------------------------
	.box-product
	
	- Related Products
	
 * ------------------------------------ */

.box-product > div {
	width: 22%;
	padding: 1%;
}

#tab-related .box-product .image img {
    /* width: 100%; */ 					/* to show on img original size is the best */
}



.jcarousel-skin-opencart {
	display: none;
}

#toppanel #search {
    margin: 0px;
    width: 100%;
	position: relative;
	right: 0px;
	top: 0px;							/* when full length, need for Chrome, Safari */
}

#toppanel #search-inner {
    display: table;
	width: 100%;
}
#header #search  input {
	padding: 2px;						/* leave space between input and border */
	margin: 0 0 3px;					/* for 2px box shadow of input */
	display: table-cell;
    padding: 0;	
    width: 100%;
	float: left;						/* fix table-cell not working in IE9- */
	/* width: 95%;						/* IE 8 */
	/* width: -moz-calc(100% - 32px);	/* firefox 15- */
	/* width: -webkit-calc(100% - 32px);/* safari 6, chrome 25- */
    /* width: calc(100% - 32px); */
}

#header .button-search {
	position: relative;
	float: left;
	/* top: 10px; */
}


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

	- 	Product Details  -

 	when =< 980px, as for two columns, 
	product photo and description
    column, to be changed into one column

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

/* @DS removed to keep more space on both ends on mobile view
#content,								/* only #content, like when Category 
										/* will be covered when #column-left + #content 
column-right,							/* only #column-right, like when Product 
										/* & screen width < 980px 
#column-left + #content{					/* like when Sub-Category 
	margin-right: 20px;
}


#content,	
#column-left,
#column-right + #content {
	margin-left: 20px;
}

@DS end */


#column-left + #content, 
#column-right + #content {
    width: 70%; 						/* IE 8, better than be fixed 615px */
	width: -moz-calc(100% - 240px);		/* firefox 15- */
	width: -webkit-calc(100% - 240px);	/* Safari 6, Chrome 25- */
	width: calc(100% - 240px);
	
}

#column-left + #column-right + #content, 
#column-left + #content {
    margin-left: 220px;					/* column-left (180px) + left margin(20px) + space (20px) */
}
 
.product-info > .left {
    clear: both;
    float: none;
    width: 100%;
	margin: 0 auto;
}

.product-info .image-additional {
    clear: both;
    overflow: hidden;
    width: 100%;
}

.product-info > .left + .right {
    margin-left: 0;
}

.product-info .image {
	float: none;
}

.product-info > .right textarea {
	margin: 0 auto;
	width: 95%;							/* IE 8 */
	width: -moz-calc(100% - 10px);		/* firefox 15- */
	width: -webkit-calc(100% - 10px);	/* safari 6, chrome 25- */
    width: calc(100% - 10px);
}


input.large-field, select.large-field {
    width: 90%;
}



/* ------------------------------------
	#content -> input
	- Purchase a Gift Certificate
		table td input
 * ------------------------------------ */

#content input[type="text"],
#content input[type='password'],
#content textarea {
//	padding: 0px;						/* clear padding */
	width: 98%;							/* streth 98% width of all input 
										   in containers: table, tr, td  */
}

/* ------------------------------------
  	Product Details
 		.product-info textarea
 		.product-infor input 
 	Return Product
		.return-product input
 * ------------------------------------ */

#content .product-info input[type="text"],
#content .return-product input[type="text"]{
    width: 98%;							/* */
	padding: 10px;  						/* remove default 3px padding and
										   good at textarea as 99% width */
}


/* ------------------------------------
	#tabs
 * ------------------------------------ */

#tabs.htabs { 
	overflow: hidden; 
}

#tabs.htabs a {
	display: block;						/* display as block */
    padding: 7px 2%;					/* must be 7px for line height is 30px */
	font-weight: normal;				/* remove bold as default */
}

.tab-content {
	float: left;
	width: 80%;							/* IE 8-, Opera 12- */
	width: -moz-calc(100% - 20px);		/* firefox 15- */
	width: -webkit-calc(100% - 20px);	/* chrome 25-, safari 6 */
	width: calc(100% - 20px);			/* streth full width when one children */
}


#footer {
	margin: 0 20px;
}

#powered {
	margin: 0 20px;
}

}



/* ==================================================================
								700px
				= 	640px
					+ left & right padding (20px + 20px) 
					+ right sroll bar (20px)
 * ================================================================== */

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

/* ------------------------------------
 * 	table, td
 * ------------------------------------ */

table {
	table-layout: fixed;				/* table full with its container div */
}


table.radio td,							/* shopping cart voucher/coupon */
table td {								/* #return-product */
	word-wrap: break-word;				/* text content in table td column 
										   break and wrap onto the next line */
	padding: 2px;						/* padding between lines and columns */
}



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

#menu {
	border-radius: 0;					/* remove default radius */
	padding: 0px;						/* remove default padding */
	box-shadow: none;
	height: 45px;
}

#menu > a {
	font-weight: bold;
    text-transform: uppercase;
}

#menu > a,
#menu > ul > li > a,
#menu > ul > li > div > ul > li > a {
	color: #FFF;
	font-family: "Roboto Condensed", sans-serif;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    padding: 12px 1%;
	text-decoration: none;
	z-index: 7;
	width: 98%;
	background: #585858;
}

#menu > ul {
	display: none;
	width: 100%;
}

#menu > ul > li { 
	background: #585858;
	display: block;
	float: none;
	vertical-align: middle;
}

#menu > ul > li:hover > a {
	background: #585858;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	border-radius: 0px;
	/* box-shadow: 2px 0 10px -5px rgba(0, 0, 0, 0.6) inset, -2px 0 10px -5px rgba(0, 0, 0, 0.6) inset;*/
}
#menu > ul > li > div {
	display: none;
	position: relative;
	z-index: 6;
	padding: 0px;						/* remove default padding */
	margin: 0 0 0 10px;  				/* move to right indicate 2nd level menu*/
	background: none;					/* remove default background */
	border: none;						/* remove default border */
}
#menu > ul > li:hover > div {
	display: block;
}
#menu > ul > li > div ul {
	display: block;
}
#menu > ul > li > div ul > li a:hover {
	background: #DBDBDB;
}


#mainmenu-toggle {
	display: block;
	/* background-color: #283744; */
	width: 100%;
	position: relative;
	text-align: left;
}
	
#menu #mainmenu-toggle:after {
	content:" ";
	background: url('../image/menu-tog-icon.png') no-repeat;
	width: 30px;
	height: 30px;
	display: inline-block;
	position: absolute;
	right: 15px;
}

/* ------------------------------------
	#cart
 * ------------------------------------ */
#header #cart {
    height: 60px;
    margin: 0 auto;
	display: block;
}

#cart .h4, 
#cart a {
	/* float: left; */
}

/* ------------------------------------
	#slideshow
 * ------------------------------------ */
.slideshow .nivoSlider {
	background-size: contain;
}


	
/* ------------------------------------
	.box-product

	- #tab-related  (Product Related)
	
 * ------------------------------------ */
.box-product {
	/* overflow: hidden; */
}
	
.box-product > div {
	width: 45%;
	padding: 1%;
}

#tab-related .box-product .image img {
    /* width: 150px; *					/* to show on img original size is best */
}


#footer .column {
    width: 45%;
	height: 130px;
	text-align: left;
}



 /* ------------------------------------
	 #content .product-list
	- Products List Page
 * ------------------------------------ */
.product-list .left {
	width: 70%;
}

.product-list .right {
}

.product-list .name {
	width: 50%;
}

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

.product-list .description {
    width: 100%;
	line-height: 20px;
}
 
/* ------------------------------------
	#column-left
 * ----------------------------------- */
#column-left {
    clear: both;
    float: none;
    margin: 0 auto;
	width: 90%;							/* IE 8 */
	width: -moz-calc(100% - 40px);		/* firefox 15- */
	width: -webkit-calc(100% - 40px);	/* safari 6, chrome 25- */
    width: calc(100% - 40px);
}

#column-left + #content, 
#column-right + #content {
    margin: 20px;
}

#column-left + #content, #column-right + #content {
	width: auto;
}
/* @DS removed it to keep more space on both ends on mobile view
#content {
    clear: both;
    /*margin: 20px;*/
	width: 80%;							/* IE 8 */
	width: -moz-calc(100% - 40px);		/* firefox 15- */
	width: -webkit-calc(100% - 40px);	/* safari 6, chrome 25- */
    width: calc(100% - 40px);
}
*/

#column-left > .banner {
	display: none;						/* hide banner */
}

/* ------------------------------------
 
	Product Details 

 * ------------------------------------ */
 
#column-right {
    clear: both;
    float: none;
    margin: 0 auto;
	width: 90%; 						/* no support calc(), IE8- */
	width: -moz-calc(100% - 40px);		/* firefox 15- */	
	width: -webkit-calc(100% - 40px); 	/* chrome 25-, safari 6 */
    width: calc(100% - 40px);
}


/* ------------------------------------
	#content .content .login-content
	- Account Login
 * ------------------------------------ */
#content .login-content .left {
	width: 100%;						/* replace default 48% */
}
#content .login-content .right {
	width: 100%;						/* replace default 48% */
}

.login-content .left .content,
.login-content .right .content {
	min-height: 50px;					/* replace default 190px */
}

#content  select {
/*	width: 100%;    */ 						/* avoid collapse its parent: dv */
}


/* ------------------------------------
	#content -> Order Information
 * ------------------------------------ */
#content .content .left {
	float: none;
	width: 100%;
}

#content .content .right {
	float: none;
	width: 100%;
}

input.large-field, select.large-field {
    width: 98%;
}


/* ------------------------------------
 * 	#return-product
 * ------------------------------------ */
 
#return-product .return-name,
#return-product .return-model,
#return-product .return-code,
#return-product .return-reason,
#return-product .return-opened,
#return-product .return-captcha{
	float: none;
	width: 95%;
	margin-right: 0;					/* remove default margin-right: 15px */
}


/* ------------------------------------
 *	#at3win
	AddIn Widget
 * ------------------------------------ */
 
#ate-msg {
    min-height: 100px;
}

#ate-msg span textarea {
	height: auto;
}

#ate-send p {
	width: auto;
}



/* ------------------------------------
	#tabs 
	- to be vertical tabs when 
	  width < 640px
	- add #tab-container in product.tpl 
	  to wrap .tab-content 
 * ------------------------------------ */

#tabs.htabs { 
	height: auto;
	border: 1px solid #DDDDDD;
}

#tabs.htabs a {
	display: block;
    border: medium none;
    color: #FFFFFF;
    display: block;						/* display as block */
    width: 100%;
	background: none repeat scroll 0 0 #525252;
}

#tabs.htabs a.selected {
    background: none repeat scroll 0 0 #FFFFFF;
	color: #525252;
}

#tab-container {
	border: 1px solid #DDDDDD;
	border-top: none;					/* remove top border */
    overflow: hidden;					/* content a little bit bigger */
}

.tab-content {
	border: medium none;				/* remove default border */
}



}


/* ==================================================================

							540px 
							
						= 480px + 60px

 * ================================================================== */

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



.box-product > div {
	width: 95%;
	padding: 1%;
}



#header {
    text-align: left;
}

#header #topbar {
    /* color: #FFFFFF;*/
    font-size: 12px;
}

#topbar form {
    display: inline-block;
}

#topbar form,
#topbar #welcome,
#topbar .links  {
    display: inline-block;
    float: none;
    margin: 5px auto;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
}

#topbar #welcome a {
    /* font-weight: 700; */
}

#topbar .links {
    clear: both;
}


#header #cart .content {
	width: 250px;						/* replace normal size of 380px */
}


/* ------------------------------------
	.buttons .right 
							
	- Purchase Gift Btn: Continue
 * ------------------------------------ */
#content .buttons .right {
    text-align: center;					/* center input button and text */
}


/* ------------------------------------
	.product-info
		
	Products List Page
		
 * ------------------------------------ */

.product-filter .display {
    margin-right: 0;
}


.product-filter .sort {
    float: left;
}

/* ------------------------------------
	#content .product-list
 * ------------------------------------ */

.product-list .name {
    width: 100%;
}


/* ------------------------------------
	.compare-info at width < 350px
 * ------------------------------------ */
 
table.compare-info  {
	table-layout: fixed;
}
 
.compare-info td {
	overflow: hidden;
}

.compare-info td img {
	width: 100%; 					/* not good when one product */
} 

/* ------------------------------------
	.wishlist-info img
	- when in narrow space
	  img auto strech?
 * ------------------------------------ */

.wishlist-info tbody .image img {
    width: 100%;
}
 

/* ------------------------------------
	#footer .column
 * ------------------------------------ */
 
#footer .column { 
	width: 95%;
	height: auto;
}


/* ------------------------------------
 *	#cboxTitle
 * ------------------------------------ */
 
#cboxTitle {
    bottom: 5px;					/* two rows of photo title and navigator 
									   to avoid overlap when in narrow window */
}

}


/* ==================================================================

								380px

 * ================================================================== */

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

body {
	min-width: 300px;					/* IE 6- not support */
}


}