2011-09-23 22:06:44 +02:00
/ *
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling .
* Credit left inline and big thanks to Nicolas Gallagher , Jonathan Neal ,
* Kroc Camen , and the H5BP dev community and team .
*
* Detailed information about this CSS : h5bp . com / css
*
* = = | = = normalize = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
* /
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
HTML5 display definitions
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
article , aside , details , figcaption , figure , footer , header , hgroup , nav , section { display : block ; }
audio , canvas , video { display : inline-block ; * display : inline ; * zoom : 1 ; }
audio : not ( [ controls ] ) { display : none ; }
[ hidden ] { display : none ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Base
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ *
* 1 . Correct text resizing oddly in IE6 / 7 when body font-size is set using em units
* 2 . Force vertical scrollbar in non-IE
* 3 . Prevent iOS text size adjust on device orientation change , without disabling user zoom : h5bp . com / g
* /
html { font-size : 100 % ; overflow-y : scroll ; -webkit- text-size-adjust : 100 % ; -ms- text-size-adjust : 100 % ; }
body { margin : 0 ; font-size : 13 px ; line-height : 1.231 ; }
body , button , input , select , textarea { font-family : sans-serif ; color : #222 ; }
/ *
* Remove text-shadow in selection highlight : h5bp . com / i
* These selection declarations have to be separate
* Also : hot pink ! ( or customize the background color to match your design )
* /
:: -moz-selection { background : #fe57a1 ; color : #fff ; text-shadow : none ; }
:: selection { background : #fe57a1 ; color : #fff ; text-shadow : none ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Links
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
a { color : #00e ; }
a : visited { color : #551a8b ; }
a : hover { color : #06e ; }
a : focus { outline : thin dotted ; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a : hover , a : active { outline : 0 ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Typography
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
abbr [ title ] { border-bottom : 1 px dotted ; }
b , strong { font-weight : bold ; }
blockquote { margin : 1 em 40 px ; }
dfn { font-style : italic ; }
hr { display : block ; height : 1 px ; border : 0 ; border-top : 1 px solid #ccc ; margin : 1 em 0 ; padding : 0 ; }
ins { background : #ff9 ; color : #000 ; text-decoration : none ; }
mark { background : #ff0 ; color : #000 ; font-style : italic ; font-weight : bold ; }
/* Redeclare monospace font family: h5bp.com/j */
pre , code , kbd , samp { font-family : monospace , serif ; _font-family : 'courier new' , monospace ; font-size : 1 em ; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space : pre ; white-space : pre-wrap ; word-wrap : break-word ; }
q { quotes : none ; }
q : before , q : after { content : "" ; content : none ; }
small { font-size : 85 % ; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub , sup { font-size : 75 % ; line-height : 0 ; position : relative ; vertical-align : baseline ; }
sup { top : -0.5 em ; }
sub { bottom : -0.25 em ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Lists
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
ul , ol { margin : 1 em 0 ; padding : 0 0 0 40 px ; }
dd { margin : 0 0 0 40 px ; }
nav ul , nav ol { list-style : none ; list-style-image : none ; margin : 0 ; padding : 0 ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Embedded content
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ *
* 1 . Improve image quality when scaled in IE7 : h5bp . com / d
* 2 . Remove the gap between images and borders on image containers : h5bp . com / e
* /
img { border : 0 ; -ms- interpolation-mode : bicubic ; vertical-align : middle ; }
/ *
* Correct overflow not hidden in IE9
* /
svg : not ( : root ) { overflow : hidden ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Figures
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
figure { margin : 0 ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Forms
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
form { margin : 0 ; }
fieldset { border : 0 ; margin : 0 ; padding : 0 ; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor : pointer ; }
/ *
* 1 . Correct color not inheriting in IE6 / 7 / 8 / 9
* 2 . Correct alignment displayed oddly in IE6 / 7
* /
legend { border : 0 ; * margin-left : -7 px ; padding : 0 ; }
/ *
* 1 . Correct font-size not inheriting in all browsers
* 2 . Remove margins in FF3 / 4 S5 Chrome
* 3 . Define consistent vertical alignment display in all browsers
* /
button , input , select , textarea { font-size : 100 % ; margin : 0 ; vertical-align : baseline ; * vertical-align : middle ; }
/ *
* 1 . Define line-height as normal to match FF3 / 4 ( set using ! important in the UA stylesheet )
* 2 . Correct inner spacing displayed oddly in IE6 / 7
* /
button , input { line-height : normal ; * overflow : visible ; }
/ *
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6 / 7
* /
table button , table input { * overflow : auto ; }
/ *
* 1 . Display hand cursor for clickable form elements
* 2 . Allow styling of clickable form elements in iOS
* /
button , input [ type = "button" ] , input [ type = "reset" ] , input [ type = "submit" ] , [ role = "button" ] { cursor : pointer ; -webkit- appearance : button ; }
/ *
* Consistent box sizing and appearance
* /
input [ type = "checkbox" ] , input [ type = "radio" ] { box-sizing : border-box ; padding : 0 ; }
input [ type = "search" ] { -webkit- appearance : textfield ; -moz- box-sizing : content-box ; -webkit- box-sizing : content-box ; box-sizing : content-box ; }
input [ type = "search" ] :: -webkit-search-decoration { -webkit- appearance : none ; }
/ *
* Remove inner padding and border in FF3 / 4 : h5bp . com / l
* /
button :: -moz-focus-inner , input :: -moz-focus-inner { border : 0 ; padding : 0 ; }
/ *
* 1 . Remove default vertical scrollbar in IE6 / 7 / 8 / 9
* 2 . Allow only vertical resizing
* /
textarea { overflow : auto ; vertical-align : top ; resize : vertical ; }
/* Colors for form validity */
input : valid , textarea : valid { }
input : invalid , textarea : invalid { background-color : #f0dddd ; }
/ * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Tables
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
table { border-collapse : collapse ; border-spacing : 0 ; }
td { vertical-align : top ; }
/ * = = | = = primary styles = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Author :
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/ *
* Media queries for responsive design https : / / github . com / shichuan / mobile-html5-boilerplate / wiki / The-Style
* /
/* Styles for desktop and large screen ----------- */
/*styles for 800px and up!*/
@ media only screen and ( min-width : 800px ) {
/* Styles */
} /*/mediaquery*/
/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@ media
only screen and ( -webkit-min-device-pixel-ratio : 1 . 5 ) ,
only screen and ( -o-min-device-pixel-ratio : 3 / 2 ) ,
only screen and ( min--moz-device-pixel-ratio : 1 . 5 ) ,
only screen and ( min-device-pixel-ratio : 1 . 5 ) {
/* Styles */
}
/ * = = | = = non-semantic helper classes = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Please define your styles before this section .
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
/* prevent callout */
. nocallout { -webkit- touch-callout : none ; }
/* Text overflow with ellipsis */
. ellipsis {
text-overflow : ellipsis ;
overflow : hidden ;
white-space : nowrap ;
}
/* A hack for HTML5 contenteditable attribute on mobile */
textarea [ contenteditable ] { -webkit- appearance : none ; }
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
. gifhidden { position : absolute ; left : -100 % ; }
/* For image replacement */
. ir { display : block ; border : 0 ; text-indent : -999 em ; overflow : hidden ; background-color : transparent ; background-repeat : no-repeat ; text-align : left ; direction : ltr ; }
. ir br { display : none ; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
. hidden { display : none !important ; visibility : hidden ; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
. visuallyhidden { border : 0 ; clip : rect ( 0 0 0 0 ) ; height : 1 px ; margin : -1 px ; overflow : hidden ; padding : 0 ; position : absolute ; width : 1 px ; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
. visuallyhidden . focusable : active , . visuallyhidden . focusable : focus { clip : auto ; height : auto ; margin : 0 ; overflow : visible ; position : static ; width : auto ; }
/* Hide visually and from screenreaders, but maintain layout */
. invisible { visibility : hidden ; }
/* Contain floats: h5bp.com/q */
. clearfix : before , . clearfix : after { content : "" ; display : table ; }
. clearfix : after { clear : both ; }
. clearfix { * zoom : 1 ; }
/ * = = | = = print styles = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
Print styles .
Inlined to avoid required HTTP connection : h5bp . com / r
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
@ media print {
* { background : transparent !important ; color : black !important ; text-shadow : none !important ; filter : none !important ; -ms- filter : none !important ; } /* Black prints faster: h5bp.com/s */
a , a : visited { text-decoration : underline ; }
a [ href ] : after { content : " (" attr ( href ) ")" ; }
abbr [ title ] : after { content : " (" attr ( title ) ")" ; }
. ir a : after , a [ href ^ = "javascript:" ] : after , a [ href ^ = "#" ] : after { content : "" ; } /* Don't show links for images, or javascript/internal links */
pre , blockquote { border : 1 px solid #999 ; page-break-inside : avoid ; }
thead { display : table-header-group ; } /* h5bp.com/t */
tr , img { page-break-inside : avoid ; }
img { max-width : 100 % !important ; }
@ page { margin : 0 . 5cm ; }
p , h2 , h3 { orphans : 3 ; widows : 3 ; }
h2 , h3 { page-break-after : avoid ; }
}
