/* |
/* |
* HTML5 Boilerplate |
* HTML5 Boilerplate |
* |
* |
* What follows is the result of much research on cross-browser styling. |
* What follows is the result of much research on cross-browser styling. |
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
* Kroc Camen, and the H5BP dev community and team. |
* Kroc Camen, and the H5BP dev community and team. |
*/ |
*/ |
|
|
/* ========================================================================== |
/* ========================================================================== |
Base styles: opinionated defaults |
Base styles: opinionated defaults |
========================================================================== */ |
========================================================================== */ |
|
|
html, |
html, |
button, |
button, |
input, |
input, |
select, |
select, |
textarea { |
textarea { |
color: #222; |
color: #222; |
} |
} |
|
|
body { |
body { |
font-size: 1em; |
font-size: 1em; |
line-height: 1.4; |
line-height: 1.4; |
} |
} |
|
|
/* |
/* |
* Remove text-shadow in selection highlight: h5bp.com/i |
* Remove text-shadow in selection highlight: h5bp.com/i |
* These selection declarations have to be separate. |
* These selection declarations have to be separate. |
* Customize the background color to match your design. |
* Customize the background color to match your design. |
*/ |
*/ |
|
|
::-moz-selection { |
::-moz-selection { |
background: #b3d4fc; |
background: #b3d4fc; |
text-shadow: none; |
text-shadow: none; |
} |
} |
|
|
::selection { |
::selection { |
background: #b3d4fc; |
background: #b3d4fc; |
text-shadow: none; |
text-shadow: none; |
} |
} |
|
|
/* |
/* |
* A better looking default horizontal rule |
* A better looking default horizontal rule |
*/ |
*/ |
|
|
hr { |
hr { |
display: block; |
display: block; |
height: 1px; |
height: 1px; |
border: 0; |
border: 0; |
border-top: 1px solid #ccc; |
border-top: 1px solid #ccc; |
margin: 1em 0; |
margin: 1em 0; |
padding: 0; |
padding: 0; |
} |
} |
|
|
/* |
/* |
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 |
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 |
*/ |
*/ |
|
|
img { |
img { |
vertical-align: middle; |
vertical-align: middle; |
} |
} |
|
|
/* |
/* |
* Remove default fieldset styles. |
* Remove default fieldset styles. |
*/ |
*/ |
|
|
fieldset { |
fieldset { |
border: 0; |
border: 0; |
margin: 0; |
margin: 0; |
padding: 0; |
padding: 0; |
} |
} |
|
|
/* |
/* |
* Allow only vertical resizing of textareas. |
* Allow only vertical resizing of textareas. |
*/ |
*/ |
|
|
textarea { |
textarea { |
resize: vertical; |
resize: vertical; |
} |
} |
|
|
/* ========================================================================== |
/* ========================================================================== |
Chrome Frame prompt |
Chrome Frame prompt |
========================================================================== */ |
========================================================================== */ |
|
|
.chromeframe { |
.chromeframe { |
margin: 0.2em 0; |
margin: 0.2em 0; |
background: #ccc; |
background: #ccc; |
color: #000; |
color: #000; |
padding: 0.2em 0; |
padding: 0.2em 0; |
} |
} |
|
|
/* ========================================================================== |
/* ========================================================================== |
Author's custom styles |
Author's custom styles |
========================================================================== */ |
========================================================================== */ |
|
/* stoc http://www.1stwebdesigner.com/css/jquery-plugin-smooth-scrolling/ */ |
|
.items { |
|
float: right; |
|
width: 260px; |
|
padding-bottom: 10px; |
|
margin:0 0 10px 20px; |
|
/* rgba with ie compatibility */ |
|
background-color: transparent; |
|
background-color: rgba(255,255,255,0.4); |
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff); |
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff)"; |
|
} |
|
.items ul { |
|
margin: 0 0 0 20px; |
|
padding: 0 0 5px; |
|
list-style-type: none; |
|
} |
|
.items ul ul { |
|
font-size: 90%; |
|
} |
|
.items ul a { |
|
font-family: "arial"; |
|
text-decoration: none; |
|
color: #c10000; |
|
} |
|
.items ul a:hover { color: #ff0000 } |
|
/* toc https://github.com/jgallen23/toc */ |
|
#wrapper { |
|
margin: 0 20px 0 170px; |
|
} |
|
|
|
#toc { |
|
top: 0px; |
|
left: 0px; |
|
height: 100%; |
|
position: fixed; |
|
background: #333; |
|
box-shadow: inset -5px 0 5px 0px #000; |
|
width: 150px; |
|
padding-top: 20px; |
|
color: #fff; |
|
} |
|
|
|
#toc ul { |
|
margin: 0; |
|
padding: 0; |
|
list-style: none; |
|
} |
|
|
|
#toc li { |
|
padding: 5px 10px; |
|
} |
|
|
|
#toc a { |
|
color: #fff; |
|
text-decoration: none; |
|
display: block; |
|
} |
|
|
|
#toc .toc-h2 { |
|
padding-left: 10px; |
|
} |
|
|
|
#toc .toc-h3 { |
|
padding-left: 20px; |
|
} |
|
|
|
#toc .toc-active { |
|
background: #336699; |
|
box-shadow: inset -5px 0px 10px -5px #000; |
|
} |
|
|
|
|
|
|
/* ========================================================================== |
/* ========================================================================== |
Helper classes |
Helper classes |
========================================================================== */ |
========================================================================== */ |
|
|
/* |
/* |
* Image replacement |
* Image replacement |
*/ |
*/ |
|
|
.ir { |
.ir { |
background-color: transparent; |
background-color: transparent; |
border: 0; |
border: 0; |
overflow: hidden; |
overflow: hidden; |
/* IE 6/7 fallback */ |
/* IE 6/7 fallback */ |
*text-indent: -9999px; |
*text-indent: -9999px; |
} |
} |
|
|
.ir:before { |
.ir:before { |
content: ""; |
content: ""; |
display: block; |
display: block; |
width: 0; |
width: 0; |
height: 100%; |
height: 100%; |
} |
} |
|
|
/* |
/* |
* Hide from both screenreaders and browsers: h5bp.com/u |
* Hide from both screenreaders and browsers: h5bp.com/u |
*/ |
*/ |
|
|
.hidden { |
.hidden { |
display: none !important; |
display: none !important; |
visibility: hidden; |
visibility: hidden; |
} |
} |
|
|
/* |
/* |
* Hide only visually, but have it available for screenreaders: h5bp.com/v |
* Hide only visually, but have it available for screenreaders: h5bp.com/v |
*/ |
*/ |
|
|
.visuallyhidden { |
.visuallyhidden { |
border: 0; |
border: 0; |
clip: rect(0 0 0 0); |
clip: rect(0 0 0 0); |
height: 1px; |
height: 1px; |
margin: -1px; |
margin: -1px; |
overflow: hidden; |
overflow: hidden; |
padding: 0; |
padding: 0; |
position: absolute; |
position: absolute; |
width: 1px; |
width: 1px; |
} |
} |
|
|
/* |
/* |
* Extends the .visuallyhidden class to allow the element to be focusable |
* Extends the .visuallyhidden class to allow the element to be focusable |
* when navigated to via the keyboard: h5bp.com/p |
* when navigated to via the keyboard: h5bp.com/p |
*/ |
*/ |
|
|
.visuallyhidden.focusable:active, |
.visuallyhidden.focusable:active, |
.visuallyhidden.focusable:focus { |
.visuallyhidden.focusable:focus { |
clip: auto; |
clip: auto; |
height: auto; |
height: auto; |
margin: 0; |
margin: 0; |
overflow: visible; |
overflow: visible; |
position: static; |
position: static; |
width: auto; |
width: auto; |
} |
} |
|
|
/* |
/* |
* Hide visually and from screenreaders, but maintain layout |
* Hide visually and from screenreaders, but maintain layout |
*/ |
*/ |
|
|
.invisible { |
.invisible { |
visibility: hidden; |
visibility: hidden; |
} |
} |
|
|
/* |
/* |
* Clearfix: contain floats |
* Clearfix: contain floats |
* |
* |
* For modern browsers |
* For modern browsers |
* 1. The space content is one way to avoid an Opera bug when the |
* 1. The space content is one way to avoid an Opera bug when the |
* `contenteditable` attribute is included anywhere else in the document. |
* `contenteditable` attribute is included anywhere else in the document. |
* Otherwise it causes space to appear at the top and bottom of elements |
* Otherwise it causes space to appear at the top and bottom of elements |
* that receive the `clearfix` class. |
* that receive the `clearfix` class. |
* 2. The use of `table` rather than `block` is only necessary if using |
* 2. The use of `table` rather than `block` is only necessary if using |
* `:before` to contain the top-margins of child elements. |
* `:before` to contain the top-margins of child elements. |
*/ |
*/ |
|
|
.clearfix:before, |
.clearfix:before, |
.clearfix:after { |
.clearfix:after { |
content: " "; /* 1 */ |
content: " "; /* 1 */ |
display: table; /* 2 */ |
display: table; /* 2 */ |
} |
} |
|
|
.clearfix:after { |
.clearfix:after { |
clear: both; |
clear: both; |
} |
} |
|
|
/* |
/* |
* For IE 6/7 only |
* For IE 6/7 only |
* Include this rule to trigger hasLayout and contain floats. |
* Include this rule to trigger hasLayout and contain floats. |
*/ |
*/ |
|
|
.clearfix { |
.clearfix { |
*zoom: 1; |
*zoom: 1; |
} |
} |
|
|
/* ========================================================================== |
/* ========================================================================== |
EXAMPLE Media Queries for Responsive Design. |
EXAMPLE Media Queries for Responsive Design. |
Theses examples override the primary ('mobile first') styles. |
Theses examples override the primary ('mobile first') styles. |
Modify as content requires. |
Modify as content requires. |
========================================================================== */ |
========================================================================== */ |
|
|
@media only screen and (min-width: 35em) { |
@media only screen and (min-width: 35em) { |
/* Style adjustments for viewports that meet the condition */ |
/* Style adjustments for viewports that meet the condition */ |
} |
} |
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), |
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), |
only screen and (min-resolution: 144dpi) { |
only screen and (min-resolution: 144dpi) { |
/* Style adjustments for high resolution devices */ |
/* Style adjustments for high resolution devices */ |
} |
} |
|
|
/* ========================================================================== |
/* ========================================================================== |
Print styles. |
Print styles. |
Inlined to avoid required HTTP connection: h5bp.com/r |
Inlined to avoid required HTTP connection: h5bp.com/r |
========================================================================== */ |
========================================================================== */ |
|
|
@media print { |
@media print { |
* { |
* { |
background: transparent !important; |
background: transparent !important; |
color: #000 !important; /* Black prints faster: h5bp.com/s */ |
color: #000 !important; /* Black prints faster: h5bp.com/s */ |
box-shadow:none !important; |
box-shadow:none !important; |
text-shadow: none !important; |
text-shadow: none !important; |
} |
} |
|
|
a, |
a, |
a:visited { |
a:visited { |
text-decoration: underline; |
text-decoration: underline; |
} |
} |
|
|
a[href]:after { |
a[href]:after { |
content: " (" attr(href) ")"; |
content: " (" attr(href) ")"; |
} |
} |
|
|
abbr[title]:after { |
abbr[title]:after { |
content: " (" attr(title) ")"; |
content: " (" attr(title) ")"; |
} |
} |
|
|
/* |
/* |
* Don't show links for images, or javascript/internal links |
* Don't show links for images, or javascript/internal links |
*/ |
*/ |
|
|
.ir a:after, |
.ir a:after, |
a[href^="javascript:"]:after, |
a[href^="javascript:"]:after, |
a[href^="#"]:after { |
a[href^="#"]:after { |
content: ""; |
content: ""; |
} |
} |
|
|
pre, |
pre, |
blockquote { |
blockquote { |
border: 1px solid #999; |
border: 1px solid #999; |
page-break-inside: avoid; |
page-break-inside: avoid; |
} |
} |
|
|
thead { |
thead { |
display: table-header-group; /* h5bp.com/t */ |
display: table-header-group; /* h5bp.com/t */ |
} |
} |
|
|
tr, |
tr, |
img { |
img { |
page-break-inside: avoid; |
page-break-inside: avoid; |
} |
} |
|
|
img { |
img { |
max-width: 100% !important; |
max-width: 100% !important; |
} |
} |
|
|
@page { |
@page { |
margin: 0.5cm; |
margin: 0.5cm; |
} |
} |
|
|
p, |
p, |
h2, |
h2, |
h3 { |
h3 { |
orphans: 3; |
orphans: 3; |
widows: 3; |
widows: 3; |
} |
} |
|
|
h2, |
h2, |
h3 { |
h3 { |
page-break-after: avoid; |
page-break-after: avoid; |
} |
} |
} |
} |
|
|