| /* |
/* |
| * 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/ */ |
/* stoc http://www.1stwebdesigner.com/css/jquery-plugin-smooth-scrolling/ */ |
| #items { |
.items { |
| float: right; |
float: right; |
| width: 260px; |
width: 260px; |
| padding-bottom: 10px; |
padding-bottom: 10px; |
| margin:0 0 10px 20px; |
margin:0 0 10px 20px; |
| /* rgba with ie compatibility */ |
/* rgba with ie compatibility */ |
| background-color: transparent; |
background-color: transparent; |
| background-color: rgba(255,255,255,0.4); |
background-color: rgba(255,255,255,0.4); |
| filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff); |
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff); |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff)"; |
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff)"; |
| } |
} |
| #items ul { |
.items ul { |
| margin: 0 0 0 20px; |
margin: 0 0 0 20px; |
| padding: 0 0 5px; |
padding: 0 0 5px; |
| list-style-type: none; |
list-style-type: none; |
| } |
} |
| #items ul ul { |
.items ul ul { |
| font-size: 90%; |
font-size: 90%; |
| } |
} |
| #items ul a { |
.items ul a { |
| font-family: "arial"; |
font-family: "arial"; |
| text-decoration: none; |
text-decoration: none; |
| color: #c10000; |
color: #c10000; |
| } |
} |
| #items ul a:hover { color: #ff0000 } |
.items ul a:hover { color: #ff0000 } |
| /* toc https://github.com/jgallen23/toc */ |
/* toc https://github.com/jgallen23/toc */ |
| #wrapper { |
#wrapper { |
| margin: 0 20px 0 170px; |
margin: 0 20px 0 170px; |
| } |
} |
| |
|
| #toc { |
#toc { |
| top: 0px; |
top: 0px; |
| left: 0px; |
left: 0px; |
| height: 100%; |
height: 100%; |
| position: fixed; |
position: fixed; |
| background: #333; |
background: #333; |
| box-shadow: inset -5px 0 5px 0px #000; |
box-shadow: inset -5px 0 5px 0px #000; |
| width: 150px; |
width: 150px; |
| padding-top: 20px; |
padding-top: 20px; |
| color: #fff; |
color: #fff; |
| } |
} |
| |
|
| #toc ul { |
#toc ul { |
| margin: 0; |
margin: 0; |
| padding: 0; |
padding: 0; |
| list-style: none; |
list-style: none; |
| } |
} |
| |
|
| #toc li { |
#toc li { |
| padding: 5px 10px; |
padding: 5px 10px; |
| } |
} |
| |
|
| #toc a { |
#toc a { |
| color: #fff; |
color: #fff; |
| text-decoration: none; |
text-decoration: none; |
| display: block; |
display: block; |
| } |
} |
| |
|
| #toc .toc-h2 { |
#toc .toc-h2 { |
| padding-left: 10px; |
padding-left: 10px; |
| } |
} |
| |
|
| #toc .toc-h3 { |
#toc .toc-h3 { |
| padding-left: 20px; |
padding-left: 20px; |
| } |
} |
| |
|
| #toc .toc-active { |
#toc .toc-active { |
| background: #336699; |
background: #336699; |
| box-shadow: inset -5px 0px 10px -5px #000; |
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; |
| } |
} |
| } |
} |
| |
|