body, p, td, th, div, span, textarea, pre, input, select {
	font-size: 16pt;
}

body {
	background-color: black;
}

img {
    display: block;
}

td, th {
	border-style: none;
    padding-left:  6px;
    padding-right: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
}

table.layout {
    width: 100%;
	max-width: 432px;
    min-height: 932px;
	padding: 0;
	margin: auto;
	border-width: 0;
	border-style: none;
    border-collapse: collapse;
}

table.layout tr.top td.center a.home img {
    width: 270px;
    height: 125px;
}

table.layout td {
	border-style: none;
	background-attachment: scroll;
	padding: 0;
}

table.layout td.left, table.layout td.right {
	background-repeat: repeat-y;
	background-position: 50% 0%;
    background-size: 100% 100%;
}
table.layout tr.top td, table.layout tr.bottom td {
	background-repeat: repeat-x;
	background-position: 50% 0%;
    background-size: 100% 100%;
}

table.layout td.left {
	background-image: url("/phone/gfx/cornerL.png");
}

table.layout td.right {
	background-image: url("/phone/gfx/cornerR.png");
}

table.layout tr.top td, table.layout tr.top td img {
    height: 125px;
}
table.layout tr.bottom td, table.layout tr.bottom td img {
    height: 16px;
}

table.layout tr.top td.center {
	background-image: url("/phone/gfx/cornerT.png");
}

table.layout tr.bottom td.center {
	background-image: url("/phone/gfx/cornerB.png");
}

table.layout td.left, table.layout td.right, table.layout td.left img, table.layout td.right img {
    width: 16px;
}

table.layout tr.top td.center img, table.layout tr.bottom td.center img {
    width: 100%;
}

table.layout tr.top td.center {
    position: relative;
}
table.layout tr.top td.center a.home {
    position: absolute;
    top: 0; left: 0;
}

table.layout tr.middle td.left img, table.layout tr.middle td.right img {
/*    min-height: 807px; */
}

table.layout tr.middle td.center {
    background-color: #e5e5e5;
    vertical-align: top;
/*    width: 398px; */
    min-height: 791px;
    background-repeat: no-repeat;
}

table.layout tr.middle td.biketyresearch {
    position: relative;
    background-position: top center;    
	background-image: url("/phone/gfx/motorcycle/tyresize.png");
    background-size: contain;
}

table.layout tr.middle td.cartyresearch {
    position: relative;
    background-position: top center;    
	background-image: url("/phone/gfx/car/tyresize.png");
    background-size: contain;
}


table.layout tr.middle td.tyresearch img.tyresearch {
    position: absolute;
    display: block;
    width: 320px;
    height: 200px;
    border: 1px solid red;
}

form.tyresearch { 
    width: 100%;
}

form.tyresearch div.searchsize,form.tyresearch div.searchmanu,form.tyresearch div.searchname,form.tyresearch div.searchsubmit { 
    text-align: center;
}
input, textarea, select {
    margin: 0.8em auto;
	border-width: 2px;
	border-style: solid;
	border-color: gray;
    border-radius: 8px;
}
form.tyresearch input::placeholder, form.tyresearch select {
    color: gray;
}

form.tyresearch input:required {
	background-color: #FFFF80;
}

form.tyresearch input.searchsize {
    width: 2em;
}
form.tyresearch div.searchsize {
    margin-top: 232px;
}
input.mainfocus { 
	border-width: 3px;
	border-color: #ec6a0c;
}
p.comments {
    margin: 2em;
    text-align: justify;
/*	font-size: 12pt; */
    color: gray;
}

img.tyresizehelp {
	position: absolute;
	border-style: none;
	left: 0;
	top: -100em;
	width: 100%;
	height: inherit;
}

input.searchsize:focus + img.tyresizehelp {
	position: absolute;
	left: 0;
	top: 0;
}

table.records td, table.transaction td {
    padding-left:   6px;
    padding-right:  6px;
    padding-top:    6px;
    padding-bottom: 6px;
}
table.records thead th {
    border-bottom-style: none;
}
table.records tbody tr.even, table.transaction tbody tr.even {
    background-color: inherit;
}
table.records thead th.catprice, table.records tbody td.catprice {
    text-align: right;
}
table.records thead th, table.records tbody td {
	font-size: large;
}
table.records td.catmanu, table.records td.catsize {
	font-size: small;
}

h1, form table caption {
	font-size: 24pt;
	font-weight: bold;
	margin: 0 auto 0.3em 0;
	color: #07454B;
	text-align: left;
}
table.transaction {
    width: 100%;
}
table.transaction tr.odd {
    background-color: white;
}
table.transaction thead th, table.transaction tbody td {
	font-size: medium;
    text-align: left;
}
table.transaction thead th.catprice, table.transaction thead th.quant,table.transaction tbody td.catprice, table.transaction tbody td.quant {
    text-align: right;
}
table.transaction input.quant {
    text-align: right;
}
table.transaction tr.total {
    background-color: white;
}
table.transaction tr.total td {
	color: #FF5A00;
	font-weight: bold;
	border-top-style: solid;
	border-bottom-style: solid;
}
table.transaction input {
    margin: auto auto;
	border-width: 1px;
	border-style: solid;
	border-color: gray;
    border-radius: 2px;
}
table.transaction input.quant {
    width: 1.2em;
}
div.blockbuttonbar {
	text-align: center;
    margin: 0.8em auto;
}
table.address {
    width: 100%;
}
table.address input, table.address textarea, table.address select {
    width: 98%;
    margin: 0.4em auto;
	border-width: 2px;
	border-style: solid;
	border-color: gray;
    border-radius: 8px;
}

table.records thead th, table.records tbody td {
    padding-left: 12px;
    padding-right: 12px;
}
table.records thead th.catfitment, table.records tbody td.catfitment, table.records thead th.catsupplierpartnum, table.records tbody td.catsupplierpartnum {
    display: none;
}

span.author { display: none; }

@media (hover: hover) { /* we are usinging this to determine pc/phone */
    span.author { display: inline; float: right; color: #888; }
    span.author span.popup { display: none; position: relative; right: 0; bottom: 0; }
    span.author span.popdown { display: inline; }
    span.author:hover span.popup { display: inline; }
    span.author:hover span.popdown { display: none; }
    table.layout { max-width: 640px; }
/*    table.layout tr.middle td.tyresearch { background-size: 100% 232px; } */
    form.tyresearch div.searchsize { margin-top: 352px; } /* image width*aspect ratio */
}
@media not (hover: hover) { /* we are usinging this to determine pc/phone */
    p.extracomments {   display: none; }
}