Template:Montgomery Cougars NJUSA/Common CSS
From 2014hs.igem.org
Casey.chow (Talk | contribs) |
Casey.chow (Talk | contribs) |
||
(71 intermediate revisions not shown) | |||
Line 9: | Line 9: | ||
body.mediawiki { | body.mediawiki { | ||
- | margin-top: -1. | + | margin-top: -1.5em; |
} | } | ||
Line 35: | Line 35: | ||
#menubar ul { | #menubar ul { | ||
margin-bottom: 0.5em; | margin-bottom: 0.5em; | ||
+ | } | ||
+ | .firstHeading { | ||
+ | display: none; | ||
} | } | ||
Line 52: | Line 55: | ||
p { | p { | ||
- | line-height: 1. | + | line-height: 1.7; |
} | } | ||
Line 91: | Line 94: | ||
} | } | ||
+ | th { | ||
+ | background-color: #e0e0e0; | ||
+ | } | ||
+ | |||
+ | table .green { | ||
+ | background-color: rgb(41, 99, 41); | ||
+ | color: white; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | table caption { | ||
+ | font-size: 1.5em; | ||
+ | } | ||
/***************************************/ | /***************************************/ | ||
Line 101: | Line 117: | ||
p { | p { | ||
- | font-size: | + | font-size: 16px; |
} | } | ||
- | body, p, span, blockquote, article, section, aside, nav, th, td, .wikitable th, .wikitable td { | + | *, body, p, span, blockquote, article, section, aside, nav, th, td, .wikitable th, .wikitable td { |
font-family: 'Open Sans', sans-serif; | font-family: 'Open Sans', sans-serif; | ||
} | } | ||
Line 117: | Line 133: | ||
h1, h1 a { | h1, h1 a { | ||
border-bottom: none; | border-bottom: none; | ||
- | font-size: 3. | + | font-size: 3.75em; |
} | } | ||
Line 123: | Line 139: | ||
line-height: 1.5; | line-height: 1.5; | ||
} | } | ||
+ | |||
+ | b, strong, th { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | ::selection { | ||
+ | color: white; | ||
+ | background: rgb(0, 102, 0); | ||
+ | } | ||
+ | ::-moz-selection { | ||
+ | color: white; | ||
+ | background: rgb(0, 102, 0); | ||
+ | } | ||
+ | |||
/***************************************/ | /***************************************/ | ||
/* HEADER */ | /* HEADER */ | ||
Line 162: | Line 192: | ||
left: 320px; | left: 320px; | ||
top: 4.25em; | top: 4.25em; | ||
- | |||
} | } | ||
Line 179: | Line 208: | ||
} | } | ||
- | #nav li | + | #nav > ul > li:hover > a { |
background: rgb(50, 50, 50); | background: rgb(50, 50, 50); | ||
+ | } | ||
+ | |||
+ | #nav li ul { | ||
+ | background: rgb(50, 50, 50); | ||
+ | opacity: 0; | ||
+ | position: absolute; | ||
+ | top: 2.6em; | ||
+ | left: 0; | ||
+ | width: auto; | ||
+ | z-index: 99; | ||
+ | |||
+ | -webkit-transition: opacity 0.15s ease-in; | ||
+ | -moz-transition: opacity 0.15s ease-in; | ||
+ | -o-transition: opacity 0.15s ease-in; | ||
+ | -ms-transition: opacity 0.15s ease-in; | ||
+ | transition: opacity 0.15s ease-in; | ||
+ | } | ||
+ | |||
+ | #nav li:hover ul { | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | #nav li ul li:hover a { | ||
+ | background: rgb(75, 75, 75); | ||
+ | } | ||
+ | |||
+ | #nav .is-parent:after { | ||
+ | content: '▼'; | ||
+ | color: #C0C0C0; | ||
+ | margin-left: 0.5em; | ||
+ | font-size: 0.75em; | ||
} | } | ||
Line 187: | Line 248: | ||
right: 0; | right: 0; | ||
} | } | ||
+ | |||
#igem-logo span { | #igem-logo span { | ||
display: none; | display: none; | ||
Line 203: | Line 265: | ||
} | } | ||
- | + | .gallery { | |
position: relative; | position: relative; | ||
} | } | ||
- | + | #slider { | |
margin-right: 0; | margin-right: 0; | ||
margin-bottom: 0; | margin-bottom: 0; | ||
Line 215: | Line 277: | ||
} | } | ||
- | + | #slider ul { | |
margin-top: 0; | margin-top: 0; | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
- | + | #slider li { | |
list-style: none; | list-style: none; | ||
position: relative; | position: relative; | ||
} | } | ||
- | + | #slider ul li { | |
- | float: left; | + | float: left; |
- | + | ||
} | } | ||
- | + | #slider ul li a { | |
display: block; | display: block; | ||
} | } | ||
.slider img { | .slider img { | ||
+ | display: table; | ||
+ | margin: 0 auto; | ||
width: 100%; | width: 100%; | ||
} | } | ||
- | + | #slider .caption { | |
background-color: rgba(0,10,5,.8); | background-color: rgba(0,10,5,.8); | ||
padding: 1.5em 1em; | padding: 1.5em 1em; | ||
+ | text-align: center; | ||
+ | color: white; | ||
position: absolute; | position: absolute; | ||
bottom: 0; | bottom: 0; | ||
- | |||
width: 100%; | width: 100%; | ||
- | |||
} | } | ||
- | .slider .caption h2 { | + | .slider .caption { |
+ | display: table; | ||
+ | margin: 0; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | #slider .caption h2 { | ||
color: white; | color: white; | ||
border-bottom: none; | border-bottom: none; | ||
Line 257: | Line 326: | ||
} | } | ||
- | .slider .caption span { | + | #slider .caption h2:after { |
+ | content: '►'; | ||
+ | font-size: 0.5em; | ||
+ | margin-left: 0.25em; | ||
+ | color: rgb(9, 124, 9); | ||
+ | position: relative; | ||
+ | top: -0.2em; | ||
+ | } | ||
+ | |||
+ | #slider .caption span{ | ||
color: white; | color: white; | ||
font-size: 1.25em; | font-size: 1.25em; | ||
Line 270: | Line 348: | ||
#left-links-wrapper { | #left-links-wrapper { | ||
font-size: 12px; | font-size: 12px; | ||
- | |||
box-sizing: border-box; | box-sizing: border-box; | ||
-moz-box-sizing: border-box; | -moz-box-sizing: border-box; | ||
+ | padding-right: 15px; | ||
} | } | ||
Line 287: | Line 365: | ||
#left-links h1 { | #left-links h1 { | ||
- | background-color: | + | background-color: rgb(0,102,0); |
- | font-size: 2. | + | font-size: 2.25em; |
font-weight: 300; | font-weight: 300; | ||
- | |||
line-height: 1.15; | line-height: 1.15; | ||
+ | padding: 10px; | ||
margin: 0 0 -1px; | margin: 0 0 -1px; | ||
- | + | float: left; | |
- | + | min-width: 80%; | |
- | + | ||
} | } | ||
- | |||
#left-links ul { | #left-links ul { | ||
Line 319: | Line 395: | ||
clear: left; | clear: left; | ||
float: left; | float: left; | ||
- | |||
padding: 10px 15px; | padding: 10px 15px; | ||
Line 327: | Line 402: | ||
-o-transition: background 200ms ease; | -o-transition: background 200ms ease; | ||
transition: background 200ms ease; | transition: background 200ms ease; | ||
+ | width: 65%; | ||
} | } | ||
Line 370: | Line 446: | ||
/* CONTENT */ | /* CONTENT */ | ||
/***************************************/ | /***************************************/ | ||
+ | |||
+ | #main { | ||
+ | position: relative; | ||
+ | } | ||
#main-wrapper { | #main-wrapper { | ||
max-width: 1400px; | max-width: 1400px; | ||
margin: 0 auto; | margin: 0 auto; | ||
+ | position: relative; | ||
} | } | ||
Line 379: | Line 460: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
-moz-box-sizing: border-box; | -moz-box-sizing: border-box; | ||
- | padding-right: | + | padding-right: 2em; |
} | } | ||
- | # | + | #inner-content h1 { |
- | margin: 0. | + | margin: 0.1em 0 0.5em; |
+ | } | ||
+ | |||
+ | #inner-content p { | ||
+ | margin: 1.5em 0 .5em; | ||
} | } | ||
Line 394: | Line 479: | ||
margin: 3em 0 2em 2em; | margin: 3em 0 2em 2em; | ||
} | } | ||
+ | |||
+ | .thumb { | ||
+ | margin: 1em 0; | ||
+ | } | ||
+ | |||
+ | /***************************************/ | ||
+ | /* PIKACHOOSE */ | ||
+ | /***************************************/ | ||
+ | |||
+ | .slider { | ||
+ | margin-left: 10%; | ||
+ | width: 75%; | ||
+ | } | ||
+ | |||
+ | .pika-thumbs { | ||
+ | height:75px; | ||
+ | padding:0 16px; | ||
+ | } | ||
+ | |||
+ | .pika-thumbs li { | ||
+ | width:144px; | ||
+ | height:74px; | ||
+ | overflow:hidden; | ||
+ | float:left; | ||
+ | list-style-type:none; | ||
+ | background:#fafafa; | ||
+ | border:1px solid #e5e5e5; | ||
+ | cursor:pointer; | ||
+ | margin:0 5px; | ||
+ | padding:3px; | ||
+ | } | ||
+ | |||
+ | .pika-thumbs li .clip { | ||
+ | position:relative; | ||
+ | height:100%; | ||
+ | text-align:center; | ||
+ | vertical-align:middle; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
+ | .pika-stage { | ||
+ | position:relative; | ||
+ | background:#fafafa; | ||
+ | border:1px solid #e5e5e5; | ||
+ | text-align:center; | ||
+ | margin:0 auto; | ||
+ | padding:10px 10px 40px; | ||
+ | } | ||
+ | |||
+ | .pika-stage img { | ||
+ | height:100%; | ||
+ | } | ||
+ | |||
+ | .pika-stage .caption { | ||
+ | position:absolute; | ||
+ | background:rgba(0,0,0,0.75); | ||
+ | border:1px solid #141414; | ||
+ | color:#fafafa; | ||
+ | text-align:right; | ||
+ | bottom:50px; | ||
+ | right:10px; | ||
+ | padding:10px; | ||
+ | } | ||
+ | .pika-stage .caption p { | ||
+ | line-height:14px; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .pika-imgnav a { | ||
+ | position:absolute; | ||
+ | text-indent:-5000px; | ||
+ | display:block; | ||
+ | z-index:3; | ||
+ | } | ||
+ | |||
+ | .pika-imgnav a.previous { | ||
+ | background:url(https://static.igem.org/mediawiki/2014hs/3/39/Prev1.png) no-repeat left 45%; | ||
+ | height:100%; | ||
+ | width:50px; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .pika-imgnav a.next { | ||
+ | background:url(https://static.igem.org/mediawiki/2014hs/a/a1/Next1.png) no-repeat right 45%; | ||
+ | height:100%; | ||
+ | width:50px; | ||
+ | top:0; | ||
+ | right:0; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .pika-imgnav a.play { | ||
+ | background:url(https://static.igem.org/mediawiki/2014hs/3/3c/Play1.png) no-repeat 0 50%; | ||
+ | height:100px; | ||
+ | width:44px; | ||
+ | top:0; | ||
+ | left:50%; | ||
+ | display:none; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .pika-imgnav a.pause { | ||
+ | background:url(https://static.igem.org/mediawiki/2014hs/4/47/Pause.png) no-repeat 0 50%; | ||
+ | height:100px; | ||
+ | width:44px; | ||
+ | top:0; | ||
+ | left:50%; | ||
+ | display:none; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | .pika-textnav { | ||
+ | overflow:hidden; | ||
+ | bottom:2px; | ||
+ | position:absolute; | ||
+ | width:100%; | ||
+ | margin:10px 0 0; | ||
+ | } | ||
+ | |||
+ | .pika-textnav a { | ||
+ | font-size:12px; | ||
+ | text-decoration:none; | ||
+ | color:#333; | ||
+ | padding:4px; | ||
+ | } | ||
+ | |||
+ | .pika-textnav a.previous { | ||
+ | float:left; | ||
+ | width:auto; | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | .pika-textnav a.next { | ||
+ | float:right; | ||
+ | width:auto; | ||
+ | display:block; | ||
+ | margin-right:20px; | ||
+ | } | ||
+ | |||
+ | .pika-tooltip { | ||
+ | font-size:12px; | ||
+ | position:absolute; | ||
+ | color:#FFF; | ||
+ | background-color:rgba(0,0,0,0.7); | ||
+ | border:3px solid #000; | ||
+ | padding:3px; | ||
+ | } | ||
+ | |||
+ | .pika-counter { | ||
+ | position:absolute; | ||
+ | bottom:45px; | ||
+ | left:15px; | ||
+ | color:#FFF; | ||
+ | background:rgba(0,0,0,0.7); | ||
+ | font-size:11px; | ||
+ | -moz-border-radius:5px; | ||
+ | border-radius:5px; | ||
+ | padding:3px; | ||
+ | } | ||
+ | |||
+ | .pika-loader { | ||
+ | |||
+ | background:url(loading.gif) 3px 3px no-repeat #000; | ||
+ | |||
+ | background-color:rgba(0,0,0,0.9); | ||
+ | |||
+ | color:#FFF; | ||
+ | |||
+ | width:60px; | ||
+ | |||
+ | font-size:11px; | ||
+ | |||
+ | text-align:right; | ||
+ | |||
+ | position:absolute; | ||
+ | |||
+ | top:15px; | ||
+ | |||
+ | right:15px; | ||
+ | |||
+ | padding:5px 3px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .slider img { | ||
+ | |||
+ | width:auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .slider .clip img { | ||
+ | |||
+ | position:relative; | ||
+ | |||
+ | bottom:40%; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .slider .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;} | ||
+ | .slider.jcarousel-clip-horizontal {height: 90px; width: 485px;} | ||
+ | .slider .jcarousel-item-horizontal { margin-right: 10px;} | ||
+ | |||
/***************************************/ | /***************************************/ | ||
Line 400: | Line 698: | ||
#footer { | #footer { | ||
+ | border-top: 1px solid rgb(175, 175, 175); | ||
margin-top: 2em; | margin-top: 2em; | ||
+ | padding: 1em; | ||
} | } | ||
Line 448: | Line 748: | ||
color: #fff; | color: #fff; | ||
font-size: 12px; | font-size: 12px; | ||
- | + | font-family: 'Open Sans', sans-serif; | |
- | position: | + | position: absolute; |
+ | top: 0; | ||
bottom: 0; | bottom: 0; | ||
- | |||
width: 150px; | width: 150px; | ||
+ | right: 0; | ||
} | } | ||
#jqtoc ul { | #jqtoc ul { | ||
+ | box-sizing: border-box; | ||
list-style: none; | list-style: none; | ||
margin: 0; | margin: 0; | ||
- | padding: 0 0 | + | padding: 1em 0 0; |
- | + | width: 150px; | |
- | + | ||
} | } | ||
#jqtoc li { | #jqtoc li { | ||
+ | box-sizing: border-box; | ||
+ | letter-spacing: initial; | ||
padding: 5px 10px; | padding: 5px 10px; | ||
+ | width: 100%; | ||
} | } | ||
Line 490: | Line 794: | ||
.with-toc #inner-content { | .with-toc #inner-content { | ||
- | padding-right: | + | padding-right: 215px; |
+ | } | ||
+ | |||
+ | .sticky { | ||
+ | float: none; | ||
+ | position: fixed; | ||
+ | z-index: 6; | ||
+ | left: auto; | ||
+ | } | ||
+ | |||
+ | #scrolltop { | ||
+ | background-color: rgb(41, 99, 41);; | ||
+ | position: fixed; | ||
+ | right: 5%; | ||
+ | color: white; | ||
+ | bottom: 0px; | ||
+ | font-size: 2.25em; | ||
+ | width: 1em; | ||
+ | text-align: center; | ||
+ | border-radius: 5px 5px 0 0; | ||
+ | height: 1em; | ||
+ | line-height: 1.2; | ||
+ | padding: 0.1em 0.25em 0.25em 0.2em; | ||
} | } |
Latest revision as of 03:49, 21 June 2014
/* Edit this file: https://2014hs.igem.org/wiki/index.php?title=Template:Montgomery_Cougars_NJUSA/Common_CSS&action=edit */ /* https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki#Centralizing_the_layout_using_templates */
/***************************************/ /* WIKI RESET */ /***************************************/
body.mediawiki {
margin-top: -1.5em;
}
- contentSub,
- search-controls,
.firstHeading,
- footer-box,
- catlinks,
- p-logo {
display:none;
}
- top-section {
border: none; height: 0px;
}
- content {
border: none;
}
- menubar > ul > li:last-child {
display: none;
}
- menubar {
width: auto;
}
- menubar ul {
margin-bottom: 0.5em;
} .firstHeading {
display: none;
}
/* CUSTOM STYLES */
- content {
width: 100%; padding: 0;
}
.container {
width: 70%; max-width: 1100px; margin: 0 auto;
}
p {
line-height: 1.7;
}
/***************************************/ /* RANDOM */ /***************************************/
body {
min-width: 1200px; background-color: white; border-bottom: solid #333 1px;
}
/* fontawesome */ [class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* http://css-tricks.com/snippets/css/clear-fix/ */ .clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
} .clearfix { display: inline-block; } /* start commented backslash hack \*/
- html .clearfix { height: 1%; }
.clearfix { display: block; } /* close commented backslash hack */
.centered {
display: table; margin-left: auto; margin-right: auto;
}
th {
background-color: #e0e0e0;
}
table .green {
background-color: rgb(41, 99, 41); color: white; font-weight: 400;
}
table caption {
font-size: 1.5em;
}
/***************************************/ /* FONT TWEAKS */ /***************************************/
body {
font-size: 12px;
}
p {
font-size: 16px;
}
- , body, p, span, blockquote, article, section, aside, nav, th, td, .wikitable th, .wikitable td {
font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: 'Open Sans', sans-serif; font-weight: 400; padding-bottom: 0.25em;
}
h1, h1 a {
border-bottom: none; font-size: 3.75em;
}
p {
line-height: 1.5;
}
b, strong, th {
font-weight: 700;
}
- selection {
color: white; background: rgb(0, 102, 0);
}
- -moz-selection {
color: white; background: rgb(0, 102, 0);
}
/***************************************/ /* HEADER */ /***************************************/
- header-wrapper {
position: relative; /* create new stacking context to keep logo on top */ z-index: 100;
}
- header {
background-color: rgb(38, 38, 38); border-bottom: solid 0.75em rgb(0, 102, 0); height: 7.5em;
}
- logo {
margin-left: 20px;
}
- logo span {
display: none;
}
- logo img {
/*max-width: 275px;*/ position: absolute; width: 250px;
}
- nav {
background: none; max-width: 1400px; margin: 0 auto; position: relative;
}
- nav ul {
position: absolute; left: 320px; top: 4.25em;
}
- nav li a {
color: #E6E6E6; font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 300;
-webkit-transition: background-color 0.15s ease-in; -moz-transition: background-color 0.15s ease-in; -o-transition: background-color 0.15s ease-in; -ms-transition: background-color 0.15s ease-in; transition: background-color 0.15s ease-in;
}
- nav > ul > li:hover > a {
background: rgb(50, 50, 50);
}
- nav li ul {
background: rgb(50, 50, 50); opacity: 0; position: absolute; top: 2.6em; left: 0; width: auto; z-index: 99;
-webkit-transition: opacity 0.15s ease-in; -moz-transition: opacity 0.15s ease-in; -o-transition: opacity 0.15s ease-in; -ms-transition: opacity 0.15s ease-in; transition: opacity 0.15s ease-in;
}
- nav li:hover ul {
opacity: 1; visibility: visible;
}
- nav li ul li:hover a {
background: rgb(75, 75, 75);
}
- nav .is-parent:after {
content: '▼'; color: #C0C0C0; margin-left: 0.5em; font-size: 0.75em;
}
- igem-logo {
position: absolute; right: 0;
}
- igem-logo span {
display: none;
}
- igem-logo img {
width: 200px; margin-top: 1em;
}
/***************************************/ /* GALLERY */ /***************************************/
.generic-image {
position: relative;
}
.gallery {
position: relative;
}
- slider {
margin-right: 0; margin-bottom: 0; position: relative; overflow: auto; width: 100%;
}
- slider ul {
margin-top: 0; padding-left: 0;
}
- slider li {
list-style: none; position: relative;
}
- slider ul li {
float: left;
}
- slider ul li a {
display: block;
}
.slider img {
display: table; margin: 0 auto; width: 100%;
}
- slider .caption {
background-color: rgba(0,10,5,.8); padding: 1.5em 1em; text-align: center; color: white; position: absolute; bottom: 0; width: 100%;
}
.slider .caption {
display: table; margin: 0; width: auto;
}
- slider .caption h2 {
color: white; border-bottom: none; font-size: 3em; font-weight: 300; margin: 0.25em 0 0.75em; padding: 0;
}
- slider .caption h2:after {
content: '►'; font-size: 0.5em; margin-left: 0.25em; color: rgb(9, 124, 9); position: relative; top: -0.2em;
}
- slider .caption span{
color: white; font-size: 1.25em; font-weight: 300; margin: 0;
}
/***************************************/ /* LEFT LINKS */ /***************************************/
- left-links-wrapper {
font-size: 12px; box-sizing: border-box; -moz-box-sizing: border-box; padding-right: 15px;
}
- left-links {
}
- left-links h1,
- left-links ul li a,
- left-links ul li .selflink {
color: rgb(245, 245, 245); font-family: 'Open Sans', sans-serif; text-decoration: none;
}
- left-links h1 {
background-color: rgb(0,102,0); font-size: 2.25em; font-weight: 300; line-height: 1.15; padding: 10px; margin: 0 0 -1px; float: left; min-width: 80%;
}
- left-links ul {
float: left; margin: 0; padding: 0; width: 100%;
}
- left-links ul li {
display: block; font-size: 1.5em; font-weight: 300; margin-bottom: 0; width: 100%;
}
- left-links ul li a,
- left-links ul li .selflink {
display: block; clear: left; float: left; padding: 10px 15px;
-webkit-transition: background 200ms ease; -moz-transition: background 200ms ease; -ms-transition: background 200ms ease; -o-transition: background 200ms ease; transition: background 200ms ease; width: 65%;
}
- left-links ul li a:hover {
background-color: rgb(50,50,50);
}
- left #left-links-title {
background-color: rgba(0, 102, 0, 1); color: rgb(240, 240, 240);
}
- left-links .selflink {
background-color: rgb(46, 46, 46); font-weight: 300;
}
- left-links ul > :nth-child(1) > a {
background-color: rgba(0, 102, 0, 0.95);
}
- left-links ul > :nth-child(2) > a {
background-color: rgba(0, 102, 0, 0.91);
}
- left-links ul > :nth-child(3) > a {
background-color: rgba(0, 102, 0, .87);
}
- left-links ul > :nth-child(4) > a {
background-color: rgba(0, 102, 0, 0.83);
}
- left-links ul > :nth-child(5) > a {
background-color: rgba(0, 102, 0, 0.79);
}
- left-links ul > :nth-child(6) > a {
background-color: rgba(0, 102, 0, 0.75);
}
- left-links ul > :nth-child(7) > a {
background-color: rgba(0, 102, 0, 0.71);
}
- left-links ul > :nth-child(8) > a {
background-color: rgba(0, 102, 0, 0.67);
}
/***************************************/
/* CONTENT */
/***************************************/
- main {
position: relative;
}
- main-wrapper {
max-width: 1400px; margin: 0 auto; position: relative;
}
- inner-content {
box-sizing: border-box; -moz-box-sizing: border-box; padding-right: 2em;
}
- inner-content h1 {
margin: 0.1em 0 0.5em;
}
- inner-content p {
margin: 1.5em 0 .5em;
}
.editsection, .editsection a {
font-size: 16px;
}
.toc {
float: right; margin: 3em 0 2em 2em;
}
.thumb {
margin: 1em 0;
}
/***************************************/ /* PIKACHOOSE */ /***************************************/
.slider {
margin-left: 10%; width: 75%;
}
.pika-thumbs {
height:75px; padding:0 16px;
}
.pika-thumbs li {
width:144px; height:74px; overflow:hidden; float:left; list-style-type:none; background:#fafafa; border:1px solid #e5e5e5; cursor:pointer; margin:0 5px; padding:3px;
}
.pika-thumbs li .clip {
position:relative; height:100%; text-align:center; vertical-align:middle; overflow:hidden;
}
.pika-stage {
position:relative; background:#fafafa; border:1px solid #e5e5e5; text-align:center; margin:0 auto; padding:10px 10px 40px;
}
.pika-stage img {
height:100%;
}
.pika-stage .caption {
position:absolute; background:rgba(0,0,0,0.75); border:1px solid #141414; color:#fafafa; text-align:right; bottom:50px; right:10px; padding:10px;
} .pika-stage .caption p {
line-height:14px; margin:0; padding:0;
}
.pika-imgnav a {
position:absolute; text-indent:-5000px; display:block; z-index:3;
}
.pika-imgnav a.previous {
background:url() no-repeat left 45%; height:100%; width:50px; top:0; left:0; cursor:pointer;
}
.pika-imgnav a.next {
background:url() no-repeat right 45%; height:100%; width:50px; top:0; right:0; cursor:pointer;
}
.pika-imgnav a.play {
background:url() no-repeat 0 50%; height:100px; width:44px; top:0; left:50%; display:none; cursor:pointer;
}
.pika-imgnav a.pause {
background:url() no-repeat 0 50%; height:100px; width:44px; top:0; left:50%; display:none; cursor:pointer;
}
.pika-textnav {
overflow:hidden; bottom:2px; position:absolute; width:100%; margin:10px 0 0;
}
.pika-textnav a {
font-size:12px; text-decoration:none; color:#333; padding:4px;
}
.pika-textnav a.previous {
float:left; width:auto; display:block;
}
.pika-textnav a.next {
float:right; width:auto; display:block; margin-right:20px;
}
.pika-tooltip {
font-size:12px; position:absolute; color:#FFF; background-color:rgba(0,0,0,0.7); border:3px solid #000; padding:3px;
}
.pika-counter {
position:absolute; bottom:45px; left:15px; color:#FFF; background:rgba(0,0,0,0.7); font-size:11px; -moz-border-radius:5px; border-radius:5px; padding:3px;
}
.pika-loader {
background:url(loading.gif) 3px 3px no-repeat #000;
background-color:rgba(0,0,0,0.9);
color:#FFF;
width:60px;
font-size:11px;
text-align:right;
position:absolute;
top:15px;
right:15px;
padding:5px 3px;
}
.slider img {
width:auto;
}
.slider .clip img {
position:relative;
bottom:40%;
}
.slider .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;} .slider.jcarousel-clip-horizontal {height: 90px; width: 485px;} .slider .jcarousel-item-horizontal { margin-right: 10px;}
/***************************************/
/* FOOTER */
/***************************************/
- footer {
border-top: 1px solid rgb(175, 175, 175); margin-top: 2em; padding: 1em;
}
- footer li {
display: inline-block; margin: 0;
}
- footer-links {
text-align: center;
}
- footer-text {
color: #777; font-size: 0.8em; margin: 0.75em 0; text-align: center;
}
- footer-links-2 ul {
margin: 0.75em 0 0.25em; padding: 0;
}
- footer-links-2 ul li {
display: inline; list-style: none; padding-right: 1em;
}
- footer-links-2 ul li:last-child {
padding-right: 0;
}
- footer-links-2 ul li a {
font-size: 0.9em; color: #777; text-decoration: none;
}
/***************************************/ /* TOC */ /***************************************/
- jqtoc {
background: #3A3A3A; color: #fff; font-size: 12px; font-family: 'Open Sans', sans-serif; position: absolute; top: 0; bottom: 0; width: 150px; right: 0;
}
- jqtoc ul {
box-sizing: border-box; list-style: none; margin: 0; padding: 1em 0 0; width: 150px;
}
- jqtoc li {
box-sizing: border-box; letter-spacing: initial; padding: 5px 10px; width: 100%;
}
- jqtoc a {
color: #fff; text-decoration: none; display: block;
}
- jqtoc .toc-h1 {
background-color: rgb(70, 70, 70);
}
- jqtoc .toc-h2 {
padding-left: 10px;
}
- jqtoc .toc-h3 {
padding-left: 20px;
}
- jqtoc .toc-active {
background: rgb(0, 75, 15);
}
.with-toc #inner-content {
padding-right: 215px;
}
.sticky {
float: none; position: fixed; z-index: 6; left: auto;
}
- scrolltop {
background-color: rgb(41, 99, 41);; position: fixed; right: 5%; color: white; bottom: 0px; font-size: 2.25em; width: 1em; text-align: center; border-radius: 5px 5px 0 0; height: 1em; line-height: 1.2; padding: 0.1em 0.25em 0.25em 0.2em;
}