/* ----------------- MEDIA QUERIES ----------------- */ /* STANDARD SIZES */ /* ------------------------------------------------- */ /* MIN WIDTHS ---------- 240, 320, 480, 540, 640, 800, 720, 768, 960, 1024, 1136, 1280, 1334, 1920, 2048, 2560, 2732 MIN HEIGHTS ----------- 320, 360, 400, 480, 540, 600, 640, 720, 750, 768, 800, 960, 1024, 1080, 1136, 1280, 1440, 1536, 2560, 2048 /* DEVICES GENERALIZATION RESPONSIVE SETTINGS */ /* START SMALL WORK TO BIG FOLLOWING CSS PATTERNS OF CASCADING STYLES */ @media screen and (max-width : 321px) /* Smartphones (landscape) ----------- */ { /* Styles */ .Desktop-Content-Container-Left, .Desktop-Content-Container-Right { width: 0% !important; display: none !important; } .Center-Narrow-Content-Pane { width: 100% !important; } /* DNN OVERRIDES */ .console-large div { margin: 10px; width: 100%; height: auto !important; padding: 0px; cursor: pointer; text-align: center; float: left; } .console-large h3 { width: 100%; } } @media screen and (max-width : 480px) /* Smartphones (portrait) ----------- */ { /* Styles */ .Desktop-Content-Container-Left, .Desktop-Content-Container-Right { width: 0% !important; display: none !important; } .Center-Narrow-Content-Pane { width: 100% !important; } /* DNN OVERRIDES */ .console-large div { margin: 10px; width: 100%; height: auto !important; padding: 0px; cursor: pointer; text-align: center; float: left; } .console-large h3 { width: 100%; } } @media screen and (min-width : 481px) and (max-width : 768px) { .Desktop-Content-Container-Left, .Desktop-Content-Container-Right { width: 0% !important; display: none !important; } .Center-Narrow-Content-Pane { width: 100% !important; } } @media screen and (min-width : 767px) and (max-width : 1024px) { .Desktop-Content-Container-Left, .Desktop-Content-Container-Right { width: 0% !important; display: none !important; } .Center-Narrow-Content-Pane { width: 100% !important; } } @media screen and (min-width : 1025px) { .ServeBoxContent-Container { width: 25%; } } @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) /* MOST Tablets (landscape) ----------- */ { /* Styles */ } @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) /* MOST Tablets (portrait) ----------- */ { /* Styles */ } /* GENERALIZED RESPONSIVE SETTINGS (MOST CODING WILL GO HERE) */ @media (min-width: 768px) { /* WIDTHS FOR ALL ITEMS SHOULD BE 100% THIS FILLS THE SURFACE AREA THIS IS THE MAX WIDTH OF TABLETS */ } @media (min-width: 1136px) { /* WIDTHS FOR ALL ITEMS SHOULD BE 100% THIS FILLS THE SURFACE AREA THIS IS THE MAX WIDTH OF TABLETS */ } @media screen and (min-width : 1224px) /* Desktops and laptops ----------- */ { /* Styles */ } @media (min-width: 1280px) { /* WIDTHS ARE NOW BECOMING LARGE AND LIMITING THE VIEWPORT IS SUGGESTED */ } @media screen and (min-width : 1824px) /* Large screens ----------- */ { /* Styles */ } /* SPECIFIC RESOLUTIONS FOR DEVICES */ /* Samsung Brightside 3.1″ 240×320 Smartphone */ @import url('css/Responsive/Devices/240x320.css'); /* Samsung Gravity Smart 3.2″ 320×480 Smartphone */ @import url('css/Responsive/Devices/320x480.css'); /* Apple iPhone 3GS 3.5″ 480×320 Smartphone */ @import url('css/Responsive/Devices/480x320.css'); /* Samsung Galaxy J1 Ace VE 4.3″ 400×800 Smartphone */ @import url('css/Responsive/Devices/400x800.css'); /* BlackBerry Torch 9800 3.2″ 480×360 Smartphone */ @import url('css/Responsive/Devices/480x360.css'); /* Samsung Exhibit 4G 3.5″ 480×800 Smartphone Samsung Focus Flash 3.7″ 480×800 Smartphone Samsung Galaxy S 4″ 480×800 Smartphone HTC Thunderbolt 4.3″ 480×800 Smartphone Nokia Lumia 900 4.3″ 480×800 Smartphone */ @import url('css/Responsive/Devices/480x800.css'); /* Motorola Droid BIONIC 4.3″ 540×960 Smartphone Motorola Droid RAZR 4.3″ 540×960 Smartphone */ @import url('css/Responsive/Devices/540x960.css'); /* Apple iPhone 5 4″ 640×1136 Smartphone Apple iPhone 5C 4″ 640×1136 Smartphone Apple iPhone 5S 4″ 640×1136 Smartphone */ @import url('css/Responsive/Devices/640x1136.css'); /* BlackBerry Torch 9810 3.2″ 640×480 Smartphone */ @import url('css/Responsive/Devices/640x480.css'); /* Samsung Galaxy Note 2 5.5″ 720×1280 Smartphone */ @import url('css/Responsive/Devices/720x1280.css'); /* HP TouchPad 9.7″ 768×1024 Tablet */ @import url('css/Responsive/Devices/768x1024.css'); /* LG G-Slate 8.9″ 768×1280 Tablet */ @import url('css/Responsive/Devices/768x1280.css'); /* Samsung Galaxy Note 5.3″ 800×1280 Smartphone */ @import url('css/Responsive/Devices/800x1280.css'); /* Samsung Sidekick 4G 3.5″ 800×480 Smartphone T-Mobile MyTouch 4G Slide 3.8″ 800×480 Smartphone LG G2x 4G 4″ 800×400 Smartphone Samsung Epic 4G Touch 4.52″ 800×480 Smartphone Samsung Galaxy S2 4.52″ 800×480 Smartphone Colby Kyros 7″ 800×480 Tablet */ @import url('css/Responsive/Devices/800x480.css'); /* HTC Evo 3D 4.3″ 960×540 Smartphone HTC Sensation 4G 4.3″ 960×540 Smartphone HTC Amaze 4G 4.3″ 960×540 Smartphone Apple iPhone 4S 3.5″ 960×640 Smartphone */ @import url('css/Responsive/Devices/960x540.css'); /* Amazon Kindle Fire 7″ 1024×600 Tablet Barnes & Noble NOOK 7″ 1024×600 Tablet BlackBerry Playbook 7″ 1024×600 Tablet HTC Flyer 7″ 1024×600 Tablet Lenovo IdeaPad A1 7″ 1024×600 Tablet Samsung Galaxy Tab 7″ 1024×600 Tablet */ @import url('css/Responsive/Devices/1024x600.css'); /* Apple iPad Air Mini 7.9″ 1024×768 Tablet VIZIO VTAB1008 8″ 1024×768 Tablet Apple iPad 9.7″ 1024×768 Tablet Apple iPad 2 9.7″ 1024×768 Tablet */ @import url('css/Responsive/Devices/1024x768.css'); /* Apple iPhone SE 4″ 1136×640 Smartphone */ @import url('css/Responsive/Devices/1136x640.css'); /* Samsung Galaxy S3 4.8″ 1280×720 Smartphone */ @import url('css/Responsive/Devices/1280x720.css'); /* Acer Iconia Tab 10.1″ 1280×800 Tablet Lenovo ThinkPad 10.1″ 1280×800 Tablet ASUS Transformer TF101 10.1″ 1280×800 Tablet ASUS Transformer Prime TF201 10.1″ 1280×800 Tablet Motorola Droid Xyboard 10.1 10.1″ 1280×800 Tablet Motorola Xoom 10.1″ 1280×800 Tablet Samsung Galaxy Tab 10.1 10.1″ 1280×800 Tablet Toshiba Thrive 10.1″ 1280×800 Tablet T-Mobile SpringBoard 7″ 1280×800 Tablet Samsung Galaxy Tab 7.7 7.7″ 1280×800 Tablet Sony Tablet S 9.4″ 1280×800 Tablet */ @import url('css/Responsive/Devices/1280x800.css'); /* Apple iPhone 6 4.7″ 1334×750 Smartphone Apple iPhone 6S 4.7″ 1334×750 Smartphone */ @import url('css/Responsive/Devices/1334x750.css'); /* Samsung Galaxy Note 5 5.7″ 1440×2560 Smartphone */ @import url('css/Responsive/Devices/1440x2560.css'); /* Samsung Galaxy S4 5″ 1920×1080 Smartphone Samsung Galaxy S5 5.1″ 1920×1080 Smartphone Apple iPhone 6 Plus 5.5″ 1920×1080 Smartphone Apple iPhone 6S Plus 5.5″ 1920×1080 Smartphone Samsung Galaxy Note 3 5.7″ 1920×1080 Smartphone */ @import url('css/Responsive/Devices/1920x1080.css'); /* Apple iPad Air Mini 2 7.9″ 2048×1536 Tablet Apple iPad Air Mini 3 7.9″ 2048×1536 Tablet Apple iPad Air Mini 4 7.9″ 2048×1536 Tablet Apple iPad 3 9.7″ 2048×1536 Tablet Apple iPad Air 9.7″ 2048×1536 Tablet Apple iPad Air 2 9.7″ 2048×1536 Tablet Apple iPad Pro 9.7″ 9.7″ 2048×1536 Tablet */ @import url('css/Responsive/Devices/2048x1536.css'); /* Samsung Galaxy S6 5.1″ 2560×1440 Smartphone Samsung Galaxy S6 Edge 5.1″ 2560×1440 Smartphone Samsung Galaxy S7 5.1″ 2560×1440 Smartphone Samsung Galaxy S7 Edge 5.5″ 2560×1440 Smartphone Samsung Galaxy Note 4 5.7″ 2560×1440 Smartphone Samsung Galaxy Note 7 5.7″ 2560×1440 Smartphone Samsung Galaxy S6 Edge+ 5.7″ 2560×1440 Smartphone */ @import url('css/Responsive/Devices/2560x1440.css'); /* Apple iPad Pro 12.9″ 12.9″ 2732×2048 Tablet */ @import url('css/Responsive/Devices/2732x2048.css');