/* |
/* |
* 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. |