, | , ...) */
.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; }
#imgPage {
/* display: none; */
display: block;
margin: auto;
width: 100%;
height: 100%;
vertical-align: middle;
}
.sidebar { /* this is for navigation menu */
position: fixed;
display: block;
top: 1px;
}
.header { /* this is for the "Status" Bar */
top: 0;
left: 0;
right: 46px;
border-left-width: 0;
border-right-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.footer { /* this is for the "Taskbar" */
display: none;
top: 75px;
bottom: 10px;
left: 10px; /* unset this value */
right: 56px;
height: auto;
border-radius: 0.5em;
overflow: auto; /* convert to a scrollable list */
z-index: 1002; /* get above the divOverlay */
}
.footer2 {
top: 1px;
bottom: 0;
left: inherit; /* unset this value */
right: 0;
margin-right: -30px; /* Google Chrome bug? */
width: 80px;
height: 689px; /* Google Chrome bug? */
}
.container { bottom: 0; right: 46px; }
.tabs { /* this is for the "Options" menu */
display: none;
top: 44px;
bottom: 10px;
left: 10px; /* unset this value */
right: 10px;
margin: 0; /* unset this value */
border-radius: 0.5em;
overflow: auto; /* convert to a scrollable list */
z-index: 1002; /* get above the divOverlay */
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
-o-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 0 4px #fff, 0 0 8px rgba(0,0,0,0.5);
}
.tabs .liTab {
padding: 10px 0;
width: 90%;
max-width: 200px;
color: #808080;
font-size: 20px;
text-align: center;
border: 1px solid #808080;
border-radius: 0.5em;
background: transparent;
}
.tabs .liSel { color: #fff; }
}
/* Smartphone (landscape) */
@media only screen
and (max-device-width: 736px)
and (orientation: landscape) {
.tabs { text-align: center; }
.tabs .liTab {
display: inline-block;
margin: 15px 10px;
}
}
/* Smartphone (portrait) */
@media only screen
and (max-device-width: 736px)
and (orientation: portrait) {
.tabs .liTab {
display: block;
margin: 15px auto;
}
}
/* 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) {
}
|