product.html 6.88 KB
<style type="text/css">
	.ebayaffinity_producttable {
		max-width: 1000px;
		width: 98%;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 10px;
		border-collapse: collapse;
		table-layout: fixed;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_desc {
		font-size: 14px;
		color: #777777;
		line-height: 1.5;
		padding-top: 35px;
		margin-top: 35px;
		border-top: 1px solid #dddddd;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_img img {
		width: 100%;
		height: auto;
		display: block;
		border: 0;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_storelogo {
		width: 40%;
		max-width: 40%;
		padding-bottom: 30px;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_storelogo a {
		display: inline-block;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_storelogo img {
		display: block;
		border: 0;
		width: auto;
		height: auto;
		max-width: 250px;
		max-height: 250px;
	}
	
	.ebayaffinity_producttable_img {
		width: 40%;
		max-width: 40%;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 60px;
		vertical-align: top;
		border-top: 1px solid #dddddd;
	}
	
	.ebayaffinity_producttable_cont {
		padding-left: 50px;
		padding-top: 60px;
		text-align: left;
		vertical-align: top;
		border-top: 1px solid #dddddd;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_title {
		font-size: 30px;
		color: #777777;
		font-weight: 100;
		line-height: 1.5;
		padding-bottom: 40px;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_price {
		font-size: 42px;
		line-height: 1;
		
		color: #777777;
		font-weight: bold;
		float: left;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_buynow, .ebayaffinity_producttable_buynow:hover, .ebayaffinity_producttable_buynow:link, .ebayaffinity_producttable_buynow:focus, .ebayaffinity_producttable_buynow:active, .ebayaffinity_producttable_buynow:visited {
		width: 125px;
		height: 43px;
		line-height: 42px;
		vertical-align: middle;
		text-align: center;
		color: white;
		font-size: 15px;
		float: right;
		background-color: #3180d8;
		text-decoration: none;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 4px 4px 1px 0px rgba(0, 0, 0, 0.05);
		-moz-box-shadow: 4px 4px 1px 0px rgba(0, 0, 0, 0.05);
		box-shadow: 4px 4px 1px 0px rgba(0, 0, 0, 0.05);
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	#ebayaffinity_form {
		position: relative;
	}
	
	.ebayaffinity_producttable_searchbox {
		border: 1px solid #dddddd;
		width: 290px;
		padding-right: 35px;
		padding-left: 10px;
		height: 40px;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		background-repeat: no-repeat;
		background-position: right center;
		font-size: 14px;
		color: #777777;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_searchbox_button, .ebayaffinity_producttable_searchbox_button:hover {
	    text-decoration: none;
	    display: block;
		background-image: url([[PENCILURL]]);
		width: 28px;
		height: 20px;
		overflow: hidden;
		position: absolute;
		top: 10px;
		right: 1px;
	}
	
	.ebayaffinity_producttable_searchtd {
		text-align: right;
		vertical-align: middle;
		font-family: "Helvetica neue",Helvetica,Verdana,Sans-serif;
	}
	
	.ebayaffinity_producttable_mobile {
		display: none;
	}
	
	@media only screen and (max-device-width: 640px) {
		.ebayaffinity_producttable_title {
			width: 90%;
			margin: 0 auto;
			font-size: 3.5em;
		}
	
		.ebayaffinity_producttable_storelogo a {
			width: 90%;
		}
	
		.ebayaffinity_producttable_storelogo img {
			width: 100%;
			max-width: none;
			max-height: none;
		}
	
		.ebayaffinity_producttable_mobile {
			display: block;
		}
	
		.ebayaffinity_producttable {
			width: 90%;
			margin-top: 2em;
			margin-bottom: 0;
		}	
		
		.ebayaffinity_producttable_img img {
			width: 75%;
			margin: 0 auto;
		}
		
		.ebayaffinity_producttable_storelogo {
			text-align: left;
			display: table-cell !important;
			width: 55% !important;
			padding-bottom: 4em;
		}
		
		.ebayaffinity_producttable_searchbox {
			width: 80%;
			height: 2em;
			font-size: 2em;
			background-size: 1.4em 1em;
		}
		
		.ebayaffinity_producttable_cont {
			width: 100%;
			padding-left: 0;
			border-top: 0;
			margin-bottom: 2em;
		}
		
		.ebayaffinity_producttable_img {
			padding-top: 4em;
			padding-bottom: 0px;
			width: 90%;
			max-width: 90%;
			padding-left: 0;
			padding-right: 0;
			margin: 0 auto;
		}
		
		.ebayaffinity_producttable_searchtd {
			text-align: right;
			width: 100% !important;
		}
		
		.ebayaffinity_producttable_searchtd form {
			margin-bottom: 4em;
		}
		
		.ebayaffinity_producttable_desc {
			margin-top: 0;
			padding-top: 2em;
			line-height: 1.75;
			width: 90%;
			max-width: 90%;
			margin: 0 auto;
			font-size: 2em;
		}
		
		.ebayaffinity_producttable_desktop {
			display: none;
		}
		
		.ebayaffinity_producttable_ti {
			width: 90%;
			max-width: 90%;
			margin: 0 auto;
			padding-bottom: 4em;
		}
		
		.ebayaffinity_producttable_price {
			font-size: 4em;
		}
		
		.ebayaffinity_producttable_buynow {
			font-size: 1.75em !important;
			width: 7em !important;
			height: 2.2857em !important;
			line-height: 2.2857em !important;
		}
	}
</style>

<table class="ebayaffinity_producttable">
	<tr>
		<td class="ebayaffinity_producttable_storelogo">
			[[STORELOGO]]
		</td>
		<td class="ebayaffinity_producttable_searchtd">
			<form method="get" target="_top" action="[[SEARCHURL]]" id="ebayaffinity_form">
				<a href="#" class="ebayaffinity_producttable_searchbox_button" onclick="document.getElementById('ebayaffinity_form').submit(); return false;">&nbsp;</a>
				<input type="text" name="_nkw" class="ebayaffinity_producttable_searchbox">
			</form>
		</td>
	</tr>
	<tr class="ebayaffinity_producttable_desktop">
		<td class="ebayaffinity_producttable_img">
			[[IMG]]
		</td>
		<td class="ebayaffinity_producttable_cont">
			<div class="ebayaffinity_producttable_title">[[TITLE]]</div>
			<div class="ebayaffinity_producttable_price">[[PRICE]]</div>
			[[BINCLICK]]
			
			<div style="clear: both; height: 0; overflow: hidden;">&nbsp;</div>
			<div class="ebayaffinity_producttable_desc">[[DESC]]</div>
		</td>
	</tr>
</table>

<div class="ebayaffinity_producttable_img ebayaffinity_producttable_mobile">
	[[IMG]]
</div>
<div class="ebayaffinity_producttable_cont ebayaffinity_producttable_mobile">
	<div class="ebayaffinity_producttable_title">[[TITLE]]</div>
	<div class="ebayaffinity_producttable_ti">
		<div class="ebayaffinity_producttable_price">[[PRICE]]</div>
		[[BINCLICK]]	
		<div style="clear: both; height: 0; overflow: hidden;">&nbsp;</div>
	</div>
	<div class="ebayaffinity_producttable_desc">[[DESC]]</div>
</div>