/* HTML5 ✰ Boilerplate Global Control */
body { font:14px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
button { width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }
body, select, input, textarea { color: #333; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
/*CSS REFERENCE*/
/**********************************************************************************************
PURPOSE
This CSS file provide a clever way to add browser and OS specific css styles.
USAGE
1. Copy and paste the line below, inside and tag
2. Set CSS attributes with the code of each browser/os you want to hack
Examples:
html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]
Available OS Codes [os]:
win - Microsoft Windows (all versions)
vista - Microsoft Windows Vista new
linux - Linux (x11 and linux)
mac - Mac OS
freebsd - FreeBSD
ipod - iPod Touch
iphone - iPhone
ipad - iPad new
webtv - WebTV
j2me - J2ME Devices (ex: Opera mini) changed from mobile to j2me
blackberry - BlackBerry new
android - Google Android new
mobile - All mobile devices new
Available Browser Codes [browser]:
ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5
ff3_6 - Firefox 3.6 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron
Extra Codes:
js - Will be available when js is enable, so you can show/hide some stuffs
INSPIRATION
Original idea by 37signals.
http://37signals.com/svn/archives2/browser_selectors_in_css.php
EXTRAS
Ruby on Rails Plugin by Reid MacDonald
http://latimes.rubyforge.org/svn/plugins/css_browser_selector/
PHP CSS Browser Selector by Bastian Allgeier
http://bastian-allgeier.de/css_browser_selector/
Wordpress Plugin by Adrian hanft
http://wordpress.org/extend/plugins/browser-specific-css/
EXAMPLES:
html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
***********************************************************************************************/
/*div#banner div.samples ul li.ie { display:none; }
html.ie div#banner div.samples ul li { display:none; }
html.ie div#banner div.samples ul li.ie { display:block; }
*/