#login-box {width: 402px;height: auto;padding: 25px;margin: 0px auto 0px auto;}
		.loginHeadline {text-align: center; text-transform: uppercase; font-weight:bold;}
		#loginForm {border: solid 1px #000;background: #eee;padding: 50px;width: 300px;height: auto;}
		#loginForm label {font-weight: bold; text-transform: uppercase;display: inline-block; width: 80px;}
		#loginForm input.loginText {width: 210px;}
		
		#loginForm input.loginButton {width: 297px; height: 30px; background-color: #000; color: #fff; text-transform: uppercase; border: solid 1px #777; margin: 20px 0 0 0;}
		
		div#accordion.miscPages {width: 95%; padding: 25px 25px;}
		#accordion h3 {padding: 7px 2px 7px 20px; font-size: 1.4em;}
		.stationeryHeadline {text-align: center; margin:0; padding: 25px 0 0 0; font-size: 3em;}
		.stationerySubHead1 {text-align: center; font-size: 1.5em; margin: 5px 0 0 0; padding: 0px;}
		.stationerySubHead2 {text-align: center; font-size: 1.4em; margin: 5px 0 0 0; padding: 0px;}
		table.productionMobile {display: none;}
		table.production {width: 95%; border: solid 1px #000; margin: 10px auto; font-family:Arial, Helvetica, sans-serif; margin: 25px 28px 0px 25px;}
		table.production tr {height: 20px;  border-bottom: solid 1px #000;}
		table.production tr.odd  {background-color: #fff;}
		table.production tr.even {background-color: #ddd;}
		table.production th {text-align: left; font-size: 9pt; text-decoration: uppercase; font-weight: normal; padding: 5px; border-right: solid 1px #666; }
		table.production td {text-align: center; font-size: 8pt; font-weight: bold; border-right: solid 1px #666; padding: 3px;}
		table.production th.columns {color: #fff; font-weight: normal; background-color:#000; border-bottom: solid 1px #999; text-align: center; text-transform: uppercase;}
		div.cardContainer *, div.cardZContainer * {padding: 0; margin: 0;}
		.cardContainer {height: 370px; width: 180px; margin: 15px 0 0 0; padding: 0 8px;}
		.cardZContainer {height: 370px; width: 252px; margin: 15px 0 0 0; padding: 0 6px;}
		
	.cardInfo {margin: 15px 0 0 0; padding: 2px;}
	.cardInfo h4 {font-size: 1.1em; padding: 0;}
	.cardInfo p.longTitle {font-size: .7em; padding: 0 0 10px 0; display:block; height: 25px;}
	.about15pack {font-size: .4em;}
	.qtyBox {width: 40px; height: 25px; margin: -8px 10px 0 10px !important;}
	#packTotalsInfo {margin: 0 0 0 0px; font-size: 2.4em;}
	#cardTotals {font-size: .6em;}
	div.cardZContainer .cardInfo {margin: 15px 0 0 0;}
	div.cardContainer.accessories.left {height: 415px;}
	
	#addToCartButton {
    width: 180px;
    height: 35px;
    background-color: #000;
    border: solid 2px #777;
    color: #fff;
    text-transform: uppercase;
    margin: 3px 0 0 2px;
    }
	
	#addToCartButton[disabled=disabled], #addToCartButton:disabled {
    width: 180px;
    height: 35px;
    background-color: #ddd;
    border: solid 2px #eee;
    color: #eee;
    text-transform: uppercase;
    margin: 3px 0 0 2px;
    }
	.addUser {padding: 25px 25px 5px 25px; text-align: center;}
	.addUser a {color: #000 !important;}
	.shopInfo {font-size: 1em; font-weight: bold; padding: 5px 25px; text-align: center;}
	.storeName {font-size: 3em; text-transform: uppercase;}
	.storeDetails {font-size: 1.5em;}
	
	@media (max-device-width: 641px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
  
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 540px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
 
 #login-box {width: 95%;height: auto;padding: 5px;margin: 0px auto 0px auto;}
		.loginHeadline {text-align: center; text-transform: uppercase; font-weight:bold;}
		#loginForm {border: solid 1px #000;background: #eee;padding: 1em;width: auto;height: auto;}
		#loginForm label {font-weight: bold; text-transform: uppercase;display: inline-block; width: 80px;}
		#loginForm input.loginText {width: 90%; margin: 0 auto; height: auto; padding: .8em; font-size: 2em;}
		
		#loginForm input.loginButton {width: 80%; height: 30px; background-color: #000; color: #fff; text-transform: uppercase; border: solid 1px #777; margin: 20px auto 0 auto;}
		
		div#accordion.miscPages {width: 95%; padding: 25px .2em; margin: 0;}
		#accordion h3 {padding: 7px 2px 7px 20px; font-size: 1.4em;}
		.stationeryHeadline {text-align: center; margin:0; padding: 25px 0 0 0; font-size: 3em;}
		.stationerySubHead1 {text-align: center; font-size: 2.2em; margin: 5px 0 0 0; padding: 0px;}
		.stationerySubHead2 {text-align: center; font-size: 1.4em; margin: 5px 0 0 0; padding: 0px;}
		table.production {display: none;}
		table.productionMobile {display:inline-table; width: 100%; border: solid 1px #000; font-family:Arial, Helvetica, sans-serif;}
		table.productionMobile tr {height: 20px;  border-bottom: solid 1px #000;}
		table.productionMobile tr.odd  {background-color: #fff;}
		table.productionMobile tr.even {background-color: #ddd;}
		table.productionMobile th {text-align: left; font-size: 6pt; text-decoration: uppercase; font-weight: normal; padding: .2em; border-right: solid 1px #666; }
		table.productionMobile td {text-align: center; font-size: 6pt; font-weight: bold; border-right: solid 1px #666; padding: .2em;}
		table.productionMobile th.columns {color: #fff; font-weight: normal; background-color:#000; border-bottom: solid 1px #999; text-align: center; text-transform: uppercase;}
		div.cardContainer *, div.cardZContainer * {padding: 0; margin: 0;}
		.cardContainer {height: 500px; width: auto; margin: 15px 0 0 0; padding: 0 0 0 15px;}
		.cardZContainer {height: 350px; width: auto; margin: 15px 0 0 0; padding: 0;}
		div.cardContainer img.stationeryPic {width: 244px; height: 343px;}
		div.cardZContainer img.stationeryPic {width: 274px; height: 195px;}
		
	.cardInfo {margin: 15px 0 0 0; padding: 2px;}
	.cardInfo h4 {font-size: 2.1em; padding: 0;}
	.cardInfo p.longTitle {font-size: 1.5em; padding: 0 0 10px 0; display:block; height: 25px;}
	.about15pack {font-size: .8em;}
	.qtyBox {width: 40px; height: 25px; margin: 5px 10px 0 10px !important;}
	#packTotalsInfo {margin: 0 0 0 0px; font-size: 2.4em;}
	#cardTotals {font-size: .6em;}
	div.cardZContainer .cardInfo {margin: 15px 0 0 0;}
	div.cardContainer.accessories.left {height: 560px;}
	
	#addToCartButton {
    width: 180px;
    height: 35px;
    background-color: #000;
    border: solid 2px #777;
    color: #fff;
    text-transform: uppercase;
    margin: 3px 0 0 2px;
    }
	
	#addToCartButton[disabled=disabled], #addToCartButton:disabled {
    width: 180px;
    height: 35px;
    background-color: #ddd;
    border: solid 2px #eee;
    color: #eee;
    text-transform: uppercase;
    margin: 3px 0 0 2px;
    }
	.addUser {padding: 25px 25px 5px 25px; text-align: center;}
	.addUser a {color: #000 !important;}
	.shopInfo {font-size: 1em; font-weight: bold; padding: 5px 25px; text-align: center;}
	.storeName {font-size: 3em; text-transform: uppercase;}
	.storeDetails {font-size: 1.5em;}
  
}