/**************************************************** Smart Phones Portrait *****************************************************/ @media only screen  and (min-device-width : 320px)  and (max-device-width : 568px) { .hide-on-mobile { display: none !important; } body { font-size: 3em; } h1 { font-size: 1.5em; line-height: auto; } h2 { font-size: 1em; } .centered { width: 96%; padding: 0 2%; } .header-area { height: auto; } .logo { float: none; height: auto; } .logo img { width: 100%; height: auto; } .navigation-bar { height: auto; background: none; padding-bottom: 0.5em; } .navigation-bar-right { height: auto; background: none; padding-right: 0; } .navigation-bar ul { height: auto; background: none; padding-left: 0; } .navigation-bar ul li { display: block; } .navigation-bar ul li.show-on-mobile { display: block; } .navigation-bar ul li a { padding: 0 !important; background: #008dd0 !important; font-size: 1em; float: none !important; width: 100%; text-align: center; line-height: 1.5em; border-bottom: solid 3px white; display: block; } /* home page */ .home-white-box { padding: 1em !important; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; margin-bottom: 1em !important; clear: both; } .paper-link { float: none; margin: 0 0 1em; width: 100%; height: auto; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; border: solid 1px #c00; } .paper-link a { padding: 1em; width: auto; height: auto; } .paper-link a:hover { text-decoration: none; } .paper-1 { background: #fff; } .paper-2 { background: #fff; } .paper-3 { background: #fff; } .paper-link a h1 { font-size: 1.5em; padding-bottom: 0.5em; } .paper-link h2 { font-size: 1em; } .order-now-button { display: none; } h1.site-intro { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; font-size: 1em; border: solid 1px #008dd0; margin: 0 0 1em; padding: 1em; background: #fff; clear: both; } .software-list-box { background: #fff; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; padding: 1em; } .software-box-header { height: auto; background: none; } .software-box-header-contents { height: auto; background: none; } .software-box-header h1 { background: none; color: #008dd0; font-size: 1em; line-height: 1.2em; } .software-box-footer { height: auto; background: none; clear: both; } .software-box-footer-contents { height: auto; background: none; } .software-box-footer h1 { background: none; color: #5ebf33; font-size: 1em; line-height: 1.2em; } .software-box-footer h1 a { color: #5ebf33; } ul.software-list { padding: 0; margin: 0; list-style: none; padding: 0; } ul.software-list li { float: none; width: 100%; height: auto; margin: 0; } a.software-image { display: none; } a.software-text { display: block; width: 100%; height: auto; } /* product pages */ .single-product-left { width: 100%; float: none; } h1.page-title { color: #008dd0; font-size: 1em; padding-bottom: 0.5em; } .page-heading-text { padding-bottom: 0.5em; } .product-image { float: none; width: 100%; } .product-image img { width: 100%; height: auto; } .product-price-actions { float: none; width: 100%; } .price-heading { font-size: 1em; padding-bottom: 0.5em; } .price-heading span { font-size: 1em; } table.price-grid { width: 100%; border-collapse: collapse; } table.price-grid td { padding: 0.25em; } table.price-grid2 { width: 100%; border-collapse: collapse; } table.price-grid2 td { padding: 0.25em; } .action-box { -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; margin: 1em 0; padding: 1em; } .quantity-label { color: #008dd0; font-family: 'Droid Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Trebuchet MS", Verdana, sans-serif; float: left; font-weight: 700; padding: 0; width: 50%; } .quantity-field { float: left; padding: 0; width: 50%; } .quantity-field input { -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; border-radius: 0.25em; border: solid 1px #008dd0; font-size: 1em; width: 5em; } .cart-button { float: none; clear: both; padding: 1em; } .cart-button input { width: 100%; } .text-field { -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; border-radius: 0.25em; border: solid 1px #008dd0; font-size: 1em; width: 10em; } } @media only screen  and (min-device-width : 320px)  and (max-device-width : 480px) { }