/*

** Mobilized pages

index.php
room.php
search.php
individual.php
checkstand.php
login.php
unsubscribe_form.php
shipAddr.php
sign.php
billing.php
shipping.html
complete.php
contacts.html (except main table is too wide - webkit bug)
getCatalog.html
catalog_cash.html
policies.html (metatag only)
promotion.html (metatag only)

** Not sure about these - do any actually need mobilizing?

do.php
foregin.php -> payments.php : are these active?
buy.php (because it relinks to checkstand.php)
getcertificate.html -> index.php
headset_instructions.htm -> TRIGGERS ANTIVIRUS PROGRAM! MAY HAVE A VIRUS.
insert.php
landing.php
Maintain-Door-Slots.php
missing.html -> index.php
name_address_inputs.html
phpcreditcard.php
promotions_calculate.php
promotions_start.php
reporter.php
searchall.php
session.php
tasks.php
unsubscribe.php -> index.php
validEmail.php
write_order.php
missing.html
name_address_inputs.html


*/

/******************************************************************************

Notes:

To change the point of switching between desktop and mobile views change the
two @media width markers below.

For switching on iPad boundry.
@media (min-width: 769px) - desktop
@media (max-width: 768px) - mobile

For switching on desktop width 980 boundry.
@media (min-width: 980px) - desktop
@media (max-width: 979px) - mobile

******************************************************************************/


/******************************************************************************
 * Desktop Stylesheet
 */
@media (min-width: 980px) {
	#MobileTest {
		display: none; /* this is visible on mobile and hidden on desktop */
	}
	#Search {
		position: absolute;
		right: 2px;
		top: 122px;
		text-align:	right;
		clear: left;"		
	}
	#NavButtons {
		position: absolute;
		right: 2px;
		top: 150px;
		text-align: right;
	}
	#TextHeader {
		text-align: center;
		margin-left: 20%;
		margin-right: 30%;
	}
	#CustomHeader {
		margin-left: 30%;
		margin-right: 30%;
	}
	#Content {
		position: absolute;
		top: 205px;
	}
	#MobileIndex, #MobileIndexOpener {
		display: none;
	}
	table .page {
		width: 100%;
		text-align: left;
	}
	
	a[href='checkstand.php'] {
		text-decoration: none;
		position: absolute;
		left: 2px;
		top: 2px;
	}
	.homePage body {
		background-size: 100%;
	}
	.homePage a[href='checkstand.php'] {
		text-decoration: none;
		position: relative;
		left: initial;
		top: initial;
	}
	
	/**************************************************************************
	 * Individual page
	 */
	 
	.individualPage div#maincontent {
		 position: absolute;
		 top: 100px;
		 left: 40px;
	}
	.individualPage #footer {
		margin-left: 236px;
	}
	
	/**************************************************************************
	 * Checkstand page
	 */
	 
	.checkStand #CartHeader {
		width:41%;
		text-align:left;
		float:left;
		font-size:110%;
		margin-left:2%;
		margin-top:0px;
		height:30px;
	}
	.checkStand #SignIn {
 		width: 53%;
 		text-align: right;
 		float: left;
 		font-size: 80%;
 		margin-right: 1%;
 		height: 30px;
	}
	
	.checkStand .cupons {
		 width: 78%;
		 margin-top: -1%;
	}
	
	.checkStand .buttons {
		  clear: both;
		  margin-left: 1%;
		  margin-top: -1%;
	}
	
	/**************************************************************************
	 * Footer
	 */
	 
	 #footer {
	 	margin-bottom: 50px;
	 	line-height: 1.5em;
	 }
	 #Footer {
	 	margin-top: 30px;
	 }
}


/******************************************************************************
 * Mobile Stylesheet
 */
@media (max-width: 979px) {
	#MobileTest {
		display: block; /* this is visible on mobile and hidden on desktop */
	}
	
	/**************************************************************************
	 * Main Catalog
	 */
	 
	#TopHeader {
		position: relative;
		margin-top: 80px;
	}	
	#TextHeader {
		margin: 12px 0;
		text-align: center;
	}
	#CustomHeader {
		margin-left: 10%;
		margin-right: 10%;
	}
	a[href='checkstand.php'] {
		display: block;
		width: 156px;
		margin-top: 12px;
		margin: 12px auto;
	}
	#Search {
		width: auto;
		text-align: center;
		margin: 12px auto;
	}
	#NavButtons {
		width: 130px;
		margin: 12px auto;
		text-align: center;
	}	
	#Content {
		position: static !important;
	}
	#Footer {
		margin: 12px auto;
	}
	#Index {
		display: none; /* Hide the desktop index */
	}
	
	#MobileIndexOpener {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2em;
		padding-top: .45em;
		padding-left: 6em;
		text-align: left;
		background: rgba(0,0,0,.15);
		cursor: pointer;
	}
	#MobileIndexOpener:after {
		content: "";
		position: absolute;
		top: 0.25em;
		left: 1.6em;
		width: 1em;
		font-size: 2em;
		height: 0.125em;
		border-top: 0.375em double #000;
		border-bottom: 0.125em solid #000;
  	}
  	
	#MobileIndex {
		position: absolute;
		top: 2.4em;
		left: 0;
		overflow: visible;
		z-index: 2;		
	}
	
  	/* Animated Index slide in from left - width is transitioned */
	#MobileIndex > div {
		width: 0;
		max-height: 500px;
		overflow-y: hidden;
		position: relative;
		background: #CCFDFD;
		background: linear-gradient(to right, #ADD 0%, #CCFDFC 102%);
		/* Index flyout animation */
		-webkit-transition-property: all;
		-webkit-transition-duration: .5s;
		-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
		-ms-transition-property: all;
		-ms-transition-duration: .5s;
		-ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
		-o-transition-property: all;
		-o-transition-duration: .5s;
		-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
		transition-property: all;
		transition-duration: .5s;
		transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	}
	
	/* Class on Index when it is open */
	#MobileIndex.indexOpen > div {
		width: 180px;
		max-height: 3000px;
		border-right: 3px solid rgba(0,0,0,.18);
		border-bottom: 3px solid rgba(0,0,0,.18);
	}
	
	#MobileIndex .index, #MobileIndex .indexSelected {
		display: block;
		text-align: left;
		margin: 0;
		padding: 1px 0 1px 20px;
		border-bottom: 1px solid rgba(0,0,0,.14);
	}
	#MobileIndex .indexSelected {
		padding: 1px 0 1px 30px;
	}
	#MobileIndex a {
		font-size: 14px;
		line-height: normal !important;
	}
	
	table.item, table.item tr, table.item td, table.item tbody
	table.page, table.page tr, table.page td, table.page tbody
	{
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none !important;
	}
	table.page td {
		width: 100% !important;
		padding-left: 0 !important;
		padding-bottom: 0 !important;
	}
	table.page {
		margin-bottom: 30px;
	}
	table.item {
		border-top: 2px solid rgba(0,0,0,.25) !important;
	}
	.thumb {
		position: relative;
		background-color: rgba(139, 178, 214, 0.93);
		padding: 5px 0 !important;
	}	
	.thumb:after {
		content: '';
		display: block;
		width: 100%;
		height: 30px;
		background: #A0D4FF;		
		background: -moz-linear-gradient(top, rgba(139, 178, 214, 0.93) 0%, #A0D4FF 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139, 178, 214, 0.93)), color-stop(100%,#A0D4FF)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(139, 178, 214, 0.93) 0%,#A0D4FF 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(139, 178, 214, 0.93) 0%,#A0D4FF 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(139, 178, 214, 0.93) 0%,#A0D4FF 100%); /* IE10+ */		
		background: linear-gradient(to bottom, rgba(139, 178, 214, 0.93) 0%, #A0D4FF 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(139, 178, 214, 0.93)', endColorstr='#A0D4FF',GradientType=0 ); /* IE6-9 */		
	}
	.thumb .pic {
		display: block;
		width: 100%;
		text-align: center;
		border: none;
	}
	.thumb .pic img {
		width: auto;
		height: auto;
		-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	}
	table.page td.description {
		margin: 8px 0;
		padding: 0 8px !important;
		box-sizing: border-box;
	}
	#showimage {
		position: absolute;
		left: 0 !important;
		border: none !important;
		width: 100%;
		height: 100%;
		margin-top: -86px;
		z-index: 1;
	}
	#showimage img {
		display: block;
		width: 100%;
		border: none;
		margin: 0 auto;
		max-width: 500px;
		max-height: 700px;
	}
	#dragbar {
		width: 100%;
	}
	#dragbar #closetext {
		margin-right: 8px !important;
	}
	
	.description a {
		display: block;
		position: relative;
		width: 100%;
	}
	.description p {
		display: block;
		position: relative;
		width: 100%;
	}
	.description input[name='button'] {
		margin-top: 5px;
	}
	
	/**************************************************************************
	 * Home page
	 */
	 
	.homePage #screen {
		width: auto !important;
	}	 
	.homePage body {
		background-size: 200%;
	}
	 .homePage #top-menu {
	 	margin-top: 50px;
	 }
	 .homePage a[href='#index'] {
	 	display: none; /* this link not needed on mobile page */
	 }
	 .homePage label[for='search'] {
	 	text-align: left;
	 	margin-left: 5%;
	 	display: block;
	 }
	 .homePage #search {
	 	width: 95% !important;
	 }
	 .homePage #identify {
	 	text-align: center;
	 	margin-top: -20px;
	 	max-width: 76%;
	 }
	 .homePage .header {
	 	margin-top: 24px;
	 }
	 
	 .homePage .headerText {
	 	float: none;
	 	width: 100%;
	 	height: auto;
	 }
	 .homePage #checkstand {
	 	float: right;
	 	width: 170px;
	 	height: 170px;
	 }
	 
	 .homePage #slots {
	 	position: relative;
	 }
	 
	 .homePage li.slot {
	 	float: none;
	 	clear: both;
	 	overflow: visible;
	 	width: 200px;
	 	height: auto;
	 	margin: 30px auto;
	 }
	 .homePage li.slot:hover {
	 	background: rgba(200,200,256,.15);
	 }
	 .homePage li.slot img[alt='product picture'] {
	 	margin-bottom: 14px;
		-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
		box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	 }
	 .homePage li.slot img.demoButton {
	 	margin-top: 14px;
	 }
	 
	 
	/**************************************************************************
	 * Individual page
	 */
	 
	.individualPage div#maincontent {
		 position: absolute;
		 top: 100px;
		 padding-left: 0 !important;
		 padding-right: 0 !important;
	}
	
	.individualPage div#IndividualCent {
		width: auto !important;
	}
	
	.individualPage div#maincontent .description {
		margin: 0 !important;
		padding: 0 8px;
		box-sizing: border-box;
	}
	.individualPage .thumb img {
		max-width: 100%;
	}
	.individualPage #footer {
		margin-left: 8px;
	}
	
		
	/**************************************************************************
	 * Checkstand page
	 */

	.checkStand #screen {
		width: auto !important;
	}
	 
	.checkStand #CartHeader {
		width: auto;
		text-align: left;
		float: left;
		font-size: 110%;
		margin: 12px 0 2%;
		height: auto;
	}
	.checkStand #SignIn {
 		float: right;
 		font-size: 80%;
		margin: 12px 2% 0 0;
 		height: 30px;
	}
	
	.checkStand #checkstand {
		margin-left: 12px;
		width: 40%;
		float: right;
	}
	.checkStand #checkstand img {
		width: 50%;
	}
	 
	table.cart_box, table.cart_box tr, table.cart_box td, table.cart_box tbody
	{
		display: block;
		float: left;
		clear: left;
		margin: 0;
		padding: 0;
		border: none !important;
	}
	
	table.cart_box {
		width: 50%;
	}
	
	table.cart_box tr.cart_tablehead {
		display: none;
	}
	
	table.cart_box tr {
		margin: 7px;
	}

	table.cart_box td {
		margin: 2px;
		text-align: left !important;
	}
	
	.checkStand .cupons {
		width: auto !important;
	}
	.checkStand .buttons {
		width: auto !important;
	}
	.checkStand .buttons input[type='submit'] {
		float: left;
		clear: left;
	}
	

	/**************************************************************************
	 * Sign in page
	 */
	 
	.signPage #screen {
		position: relative;
		width: auto !important;
	}
	.signPage .boxpairs {
		position: relative;
		float: none !important;
		clear: left;
		width: 95% !important;
		min-width: 200px;
		max-width: 436px;
		margin: 12px auto;
		box-sizing: border-box;
	}
	.signPage input[type='text'] {
		width: 95% !important;
		margin: 8px 0 !important;
		box-sizing: border-box;
	}
	 
	/**************************************************************************
	 * Billing page
	 */

	.billingPage #screen {
		position: relative;
		width: auto !important;
	}
	.billingPage .formBox {
		position: relative;
		float: none !important;
		clear: left;
		width: 95% !important;
		min-width: 200px;
		margin: 12px auto;
		box-sizing: border-box;
	}
	.billingPage input[type='text'] {
		width: 95% !important;
		margin: 8px 0 !important;
		box-sizing: border-box;
	}
	.billingPage select {
		width: 62% !important;
	}
	
	/**************************************************************************
	 * Shipping page
	 */

	.shippingPage #screen {
		position: relative;
		width: auto !important;
	}
	.shippingPage .formBox {
		position: relative;
		float: none !important;
		clear: left;
		width: 95% !important;
		min-width: 200px;
		margin: 12px auto;
		box-sizing: border-box;
	}
	.shippingPage input[type='text'] {
		width: 95% !important;
		margin: 8px 0 !important;
		box-sizing: border-box;
	}
	.shippingPage select {
		width: 62% !important;
	}
	
	/**************************************************************************
	 * Payments page
	 */

	.paymentsPage #screen {
		position: relative;
		width: auto !important;
		margin-bottom: 24px;
	}
	.paymentsPage h1 {
		margin-bottom: 8px !important;
	}
	.paymentsPage .formBox {
		position: relative;
		float: none !important;
		clear: left;
		width: 95% !important;
		min-width: 200px;
		margin: 12px auto;
		box-sizing: border-box;
	}
	.paymentsPage input[type='text'] {
		width: 95% !important;
		margin: 8px 0 !important;
		box-sizing: border-box;
	}
	.paymentsPage select {
		width: 62% !important;
		margin-bottom: 12px;
	}
	.paymentsPage .formBox label {
		float: none;
		display: block;
		text-align: left;
		width: auto;
		margin-top: 12px;
	}
	
	.paymentsPage .nameAddress {
		clear: left;
		width: auto;
		line-height: 1.25;
	}
	
	.paymentsPage .errorMessage {
		width: auto;
		border: 1px solid red;
		box-sizing: border-box;
	}
	
	.paymentsPage form[name='invoice'] {
		float: left;
	}
	
	table.pmtBox, table.pmtBox tr, table.pmtBox td, table.pmtBox tbody
	{
		display: block;
		float: left;
		clear: left;
		margin: 0;
		padding: 0;
		border: none !important;
	}
	
	table.pmtBox {
		width: 50%;
	}
	
	table.pmtBox tr.cart_tablehead {
		display: none;
	}
	
	table.pmtBox tr {
		margin: 7px;
	}

	table.pmtBox td {
		margin: 2px;
		text-align: left !important;
	}
	
	/**************************************************************************
	 * Contacts page
	 */

	table#Contacts, table#Contacts tr, table#Contacts td, table#Contacts tbody
	{
		display: block;
		margin: 0;
		padding: 0;
		border: none !important;
		width: auto !important;
	}
	table#Contacts {
		width: auto !important;
		height: auto !important;
	}
	table#Contacts td {
		float: left;
		clear: both;
		vertical-align: top !important;
	}
	
	.contactsPage input[type='text'], .contactsPage textarea {
		width: 95% !important;
		margin: 8px 0 !important;
		box-sizing: border-box;
	}
	 
	/**************************************************************************
	 * Other Shipping page
	 */

	table#Shipping, table#Shipping tr, table#Shipping td, table#Shipping tbody
	{
		display: block;
		margin: 0;
		padding: 0;
		border: none !important;
		width: auto !important;
	}
	table#Shipping {
		width: auto !important;
		height: auto !important;
	}
	table#Shipping td {
		float: left;
		clear: both;
		vertical-align: top !important;
	}
	#Shipping p {
		width: auto !important;
	}
	#Shipping pre {
		white-space: normal !important;
	}
	
	/**************************************************************************
	 * Complete page
	 */

	.completePage #screen {
		position: relative;
		width: auto !important;
		line-height: 1.3;
	}
	.completePage ul {
		width: auto !important;
	}
	.completePage .cart_tablehead {
		padding: 4px 8px;
		margin-right: 4%;
	}
	.completePage #footer:before {
		content: '';
		display: block;
		margin: 4px 0;
		border-top: 1px solid rgba(0,0,0,.15);
	}
	
	/**************************************************************************
	 * Get Catalog page
	 */

	#GetCatalog table, #GetCatalog table tr, #GetCatalog table td, #GetCatalog table tbody
	{
		display: block;
		margin: 0;
		padding: 0;
		border: none !important;
	}
	#GetCatalog table {
		width: 100% !important;
		height: auto !important;
	}
	#GetCatalog td {
		float: left;
		clear: left;
		width: 100% !important;
	}
	#GetCatalog td.logo {
		display: none;
	}
	#GetCatalog table.formBox td:first-child:not([colspan='2']) {
		width: auto !important;
	}
	#GetCatalog input[type='text'] {
		width: 95% !important;
		margin: 8px 0 !important;
		box-sizing: border-box;
	}
	
	/**************************************************************************
	 * Simple Mobile Pages
	 */

	.SimpleMobile table, .SimpleMobile table tr, .SimpleMobile table td, .SimpleMobile table tbody
	{
		display: block;
		margin: 0;
		padding: 0;
		border: none !important;
	}
	.SimpleMobile table {
		width: 100% !important;
		height: auto !important;
	}
	.SimpleMobile td {
		float: left;
		clear: left;
		width: 100% !important;
	}
	.SimpleMobile img {
		max-width: 200px !important;
	}
	.SimpleMobile div {
		margin: 8px !important;
		width: auto !important;
		box-sizing: border-box;
	}

	/**************************************************************************
	 * Footer
	 */
	 
	 #footer {
	 	margin-bottom: 50px;
	 	line-height: 1.5em;
	 }
	 
	 #Footer {
	 	margin-top: 30px;
	 }
	 
}

/**************************************************************************
 * Sound play support
 */
 
 #AllowSounds {
 	position: relative;
 	display: inline-block;
 	text-decoration: none;
 	top: 0px;
 	width: 38px;
 	height: 24px;
 	background-image: url('/buttons/mute.png');
 	
 }
 #AllowSounds.inactive:before {
 	content: '';
 	position: absolute;
 	top: 0;
 	left: 7px;
 	width: 24px;
 	height: 24px;
 	background-image: url('/buttons/nosign.png');
 }

/******************************************************************************
 * Misc
 */
.demoLink img {
	 border-width: 0px;
}

/******************************************************************************
 * For mobile development iPhone frame only - not part of catalog
 */
@media (min-width: 581px) {
	#PhoneCase {
		position: absolute;
		left: 50%;
		margin-left: -212px;
		padding: 0;
		width: 394px;
		height: 781px;
		border: none;
		background-color: rgba(0, 0, 0, 0);
		background-image: url("/mobile/images/IPhone_5.png");
	}
	#PhoneScreen {
		position: relative;
		margin: 110px 0 0 52px;
		padding: 0;
		width: 320px;
		height: 568px;
		overflow: hidden;
		border: none;
		background: white;
	}	
	#Page {
		width: 100%;
		height: 100%;
		border: none;
	}
}
@media (max-width 580px) {
	#PhoneCase {
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		width: 320px;
		height: 568px;
		background-color: transparent;
		background-image: none;
	}
	#PhoneScreen {
		margin: 0;
	}
}