, | , ...) */
.capitalize { text-transform: capitalize !important; }
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.left { text-align: left !important; }
.justify { text-align: justify !important; }
.cleft { clear: left !important; }
.cright { clear: right !important; }
.cboth { clear: both !important; }
.fleft { float: left !important; }
.fright { float: right !important; }
.fnone { float: none !important; }
.noover { overflow: hidden !important; }
.curved { border-radius: 0.4em !important; }
.uroman { list-style-type: upper-roman !important; }
.lroman { list-style-type: lower-roman !important; }
.ulatin { list-style-type: upper-latin !important; }
.llatin { list-style-type: lower-latin !important; }
.ualpha { list-style-type: upper-alpha !important; }
.lalpha { list-style-type: lower-alpha !important; }
.decimal { list-style-type: decimal !important; }
.disc { list-style-type: disc !important; }
.circle { list-style-type: circle !important; }
.square { list-style-type: square !important; }
.nolist { list-style-type: none !important; }
.OEButton { width: 25px !important; } /* 1/8 width button (for +/-) */
.OQButton { width: 49px !important; } /* 1/4 width button */
.OTButton { width: 65px !important; } /* 1/3 width button */
.OHButton { width: 99px !important; } /* 1/2 width button */
.TTButton { width: 133px !important; } /* 2/3 width button */
.TQButton { width: 149px !important; } /* 3/4 width button */
.OFButton { width: 200px !important; } /* One Full width button */
.OQCombobox, .OQListbox { width: 49px !important; } /* 1/4 width combobox */
.OTCombobox, .OTListbox { width: 65px !important; } /* 1/3 width combobox */
.OHCombobox, .OHListbox { width: 99px !important; } /* 1/2 width combobox; 2px in border */
.TTCombobox, .TTListbox { width: 133px !important; } /* 2/3 width combobox */
.TQCombobox, .TQListbox { width: 150px !important; } /* 3/4 width combobox */
.OFCombobox, .OFListbox { width: 202px !important; } /* One Full width combobox */
.OQTextbox { width: 41px !important; } /* 1/4 width textbox */
.OTTextbox { width: 57px !important; } /* 1/3 width textbox */
.OHTextbox { width: 92px !important; } /* 1/2 width textbox; 2px in border, 6px in left/right padding */
.TTTextbox { width: 125px !important; } /* 2/3 width textbox */
.TQTextbox { width: 142px !important; } /* 3/4 width textbox */
.OFTextbox { width: 194px !important; } /* One Full textbox */
/* MOBILE */
/*
NOTE: the widths for larger screens are based on a 16:9 resolution
http://stackoverflow.com/questions/18477016/switching-css-classes-based-on-screen-size
https://en.wikipedia.org/wiki/Display_resolution#/media/File:Vector_Video_Standards8.svg
http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
*/
/* Smartphone (portrait and landscape) - CGA (320) to HVGA (480) */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 736px) {
html {
min-width: 350px;
max-width: 400px;
min-height: 100px;
}
h1 { font-size: 24px; }
.header { /* this is for the "Status" Bar */
}
.body {
}
.footer { /* this is for the "Taskbar" */
}
}
/* Smartphone (landscape) */
@media only screen
and (max-device-width: 736px)
and (orientation: landscape) {
}
/* Smartphone (portrait) */
@media only screen
and (max-device-width: 736px)
and (orientation: portrait) {
}
/* Tablet (portrait and landscape) - PAL (768) to PAL+ (1024) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
}
/* Tablet (landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
}
/* Tablet (portrait) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
}
/* Desktop/Laptop (landscape) - HD 720 (1280x720), Unnamed (1366x768), WXGA (1280x800) */
/* Anything else - Unnamed (1440x900), Unnamed (1600x900), WSXGA+ (1680x1050), HD 1080 (1920x1080), WUXGA (1920x1200) */
/* NOTE: we 'min-device-width > 736' so that cell phones aren't triggered */
@media only screen
and (min-device-width: 737px)
and (min-height: 720px) {
}
|