(Created page with " body { overflow-x: hidden; →prevent sidescroll on narrow devices: } #MYbody { position: fixed; overflow-...") |
|||
Line 1: | Line 1: | ||
− | + | body { | |
− | + | overflow-x: hidden; /*prevent sidescroll on narrow devices*/ | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #MYbody { | |
− | + | position: fixed; | |
− | + | overflow-x: hidden; | |
− | + | overflow-y: scroll; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | a, | |
− | + | a:visited { | |
− | + | color: #555; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | a:hover, | |
− | + | a:focus { | |
+ | color: #990000; | ||
+ | } | ||
− | + | /*Masthead settings*/ | |
− | + | .masthead { /*control height*/ | |
− | + | height: 300px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .masthead .caption { /*control shadowing*/ | |
− | + | width:100%; | |
− | + | height: 300px; | |
− | + | bottom: .0rem; | |
− | + | position: absolute; | |
− | + | background:#000; | |
− | } | + | background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); |
+ | background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); | ||
+ | background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); | ||
+ | background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000); | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 767px) { | ||
+ | .masthead .caption { | ||
+ | width:100%; | ||
+ | height: 300px; | ||
+ | bottom: .0rem; | ||
+ | position: absolute; | ||
+ | background:#000; | ||
+ | background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0)); | ||
+ | background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0)); | ||
+ | background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0)); | ||
+ | background: linear-gradient(to right, #000, rgba(0, 0, 0, 0)); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .masthead .thumbnail { | ||
+ | height: 300px; | ||
+ | width: 100%; | ||
+ | background-size: cover; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | border: 0 none; | ||
+ | box-shadow: none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
− | /*Fixes dissapear reappear of sidebar when scrolling on iPad */ | + | .masthead .caption > div { |
− | + | margin-top: 2em; | |
− | + | } | |
− | + | ||
+ | .masthead .caption h1 { | ||
+ | margin-top: -.0em; | ||
+ | padding-top: -.0em; | ||
+ | } | ||
+ | |||
+ | .masthead .caption h1, | ||
+ | .masthead .caption p { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .masthead .title h1, | ||
+ | .masthead .title h1 > p{ | ||
+ | text-transform: uppercase; | ||
+ | text-align: justify; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .masthead .title h1 > p { | ||
+ | border-top: 1px solid; | ||
+ | padding-top: .3em; | ||
+ | } | ||
+ | |||
+ | .masthead .intro blockquote { | ||
+ | position: absolute; | ||
+ | margin-top: 30px; | ||
+ | } | ||
+ | |||
+ | .masthead .intro blockquote p { | ||
+ | text-align: right !important; | ||
+ | } | ||
+ | |||
+ | .masthead .intro blockquote small { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | /*Content settings left column*/ | ||
+ | .colLeft blockquote { | ||
+ | border-left-color: #990000; | ||
+ | } | ||
+ | |||
+ | .colLeft a.anchor:target, | ||
+ | .colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/ | ||
+ | display: block; | ||
+ | top: -125px; | ||
+ | position: relative; | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .colLeft .h2 { | ||
+ | border-bottom-width: 2px; | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | |||
+ | .colLeft .h3 { | ||
+ | border-bottom-width: 1px; | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | |||
+ | .colLeft .h2, | ||
+ | .colLeft .h3 { | ||
+ | padding-bottom: 0.2em; | ||
+ | |||
+ | border-bottom-style: solid; | ||
+ | border-bottom-color: #990000; | ||
+ | } | ||
+ | |||
+ | /*sidebar setting right columns*/ | ||
+ | @media screen and (max-width: 1000px){ | ||
+ | .colRight { | ||
+ | padding-left: 0px !important; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #sidebar { | ||
+ | margin-top: 20px; | ||
+ | padding-top: 18px; | ||
+ | padding-bottom: 5px; | ||
+ | padding-left: 5px; | ||
+ | padding-right: 5px; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 900px) { | ||
+ | #sidebar, | ||
+ | .colRight { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #sidebar { | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #sidebar.nav li a { | ||
+ | color: #999; | ||
+ | font-size: .9em; | ||
+ | padding-top: 0.3em; | ||
+ | padding-bottom: .3em; | ||
+ | background-color: transparent; | ||
+ | text-transform: uppercase; | ||
+ | border-left-width: 3px; | ||
+ | border-left-style: solid; | ||
+ | border-left-color: #fff; | ||
+ | |||
+ | } | ||
+ | |||
+ | #sidebar.nav li a:active, | ||
+ | #sidebar.nav li a:hover, | ||
+ | #sidebar.nav li a:focus { | ||
+ | background-color: transparent; | ||
+ | list-style: circle; | ||
+ | border-left-width: 3px; | ||
+ | border-left-style: solid; | ||
+ | border-left-color: #990000; | ||
+ | } | ||
+ | |||
+ | #sidebar.nav li a.nav-active { | ||
+ | color:black; | ||
+ | border-left-width: 3px; | ||
+ | border-left-style: solid; | ||
+ | border-left-color: #990000; | ||
+ | } | ||
+ | |||
+ | /* Undo the affixed behavior in mobile views */ | ||
+ | #sidebar.affix { | ||
+ | position: static; | ||
+ | } | ||
+ | |||
+ | /* Apply the affixed behavior in large views */ | ||
+ | @media screen and (min-width: 767px) { | ||
+ | |||
+ | /* affix-top: The affix-top class should be inline to the page. */ | ||
+ | #sidebar.affix-top { | ||
+ | width:200px; | ||
+ | /* for reference - no additional styling */ | ||
+ | } | ||
+ | |||
+ | /* affix: The affix class should be fixed to the page. */ | ||
+ | #sidebar.affix { | ||
+ | position: fixed; | ||
+ | top: 125px; /* same as body padding or outer navbar height */ | ||
+ | width: 200px; /* stop it from growing - anyone know how to fix this? */ | ||
+ | } | ||
+ | |||
+ | /* affix bottom: The affix-bottom class should be positioned absolute. */ | ||
+ | #sidebar.affix-bottom { | ||
+ | position: absolute; | ||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | /*Fixes dissapear reappear of sidebar when scrolling on iPad */ | ||
+ | #sidebar *:not(html) { | ||
+ | -webkit-transform: translate3d(0, 0, 0); | ||
+ | } |
Revision as of 10:37, 25 August 2016
body {
overflow-x: hidden; /*prevent sidescroll on narrow devices*/
}
- MYbody {
position: fixed; overflow-x: hidden; overflow-y: scroll;
}
a, a:visited {
color: #555;
}
a:hover, a:focus {
color: #990000;
}
/*Masthead settings*/ .masthead { /*control height*/
height: 300px;
}
.masthead .caption { /*control shadowing*/
width:100%; height: 300px; bottom: .0rem; position: absolute; background:#000; background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000); background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
}
@media screen and (max-width: 767px) {
.masthead .caption { width:100%; height: 300px; bottom: .0rem; position: absolute; background:#000; background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0)); background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0)); background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0)); background: linear-gradient(to right, #000, rgba(0, 0, 0, 0)); }
}
.masthead .thumbnail {
height: 300px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 0 none; box-shadow: none; margin:0; padding:0;
}
.masthead .caption > div {
margin-top: 2em;
}
.masthead .caption h1 {
margin-top: -.0em; padding-top: -.0em;
}
.masthead .caption h1, .masthead .caption p {
color: #fff;
}
.masthead .title h1, .masthead .title h1 > p{
text-transform: uppercase; text-align: justify; float: left;
}
.masthead .title h1 > p {
border-top: 1px solid; padding-top: .3em;
}
.masthead .intro blockquote {
position: absolute; margin-top: 30px;
}
.masthead .intro blockquote p {
text-align: right !important;
}
.masthead .intro blockquote small {
color: #fff;
}
/*Content settings left column*/ .colLeft blockquote {
border-left-color: #990000;
}
.colLeft a.anchor:target, .colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/
display: block; top: -125px; position: relative; visibility: hidden;
}
.colLeft .h2 {
border-bottom-width: 2px; font-weight: 500;
}
.colLeft .h3 {
border-bottom-width: 1px; font-weight: 500;
}
.colLeft .h2, .colLeft .h3 {
padding-bottom: 0.2em; border-bottom-style: solid; border-bottom-color: #990000;
}
/*sidebar setting right columns*/ @media screen and (max-width: 1000px){
.colRight { padding-left: 0px !important; }
}
- sidebar {
margin-top: 20px; padding-top: 18px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px;
}
@media screen and (max-width: 900px) {
#sidebar, .colRight { display: none; }
}
- sidebar {
margin-left: 0px;
}
- sidebar.nav li a {
color: #999; font-size: .9em; padding-top: 0.3em; padding-bottom: .3em; background-color: transparent; text-transform: uppercase; border-left-width: 3px; border-left-style: solid; border-left-color: #fff;
}
- sidebar.nav li a:active,
- sidebar.nav li a:hover,
- sidebar.nav li a:focus {
background-color: transparent; list-style: circle; border-left-width: 3px; border-left-style: solid; border-left-color: #990000;
}
- sidebar.nav li a.nav-active {
color:black; border-left-width: 3px; border-left-style: solid; border-left-color: #990000;
}
/* Undo the affixed behavior in mobile views */
- sidebar.affix {
position: static;
}
/* Apply the affixed behavior in large views */ @media screen and (min-width: 767px) {
/* affix-top: The affix-top class should be inline to the page. */ #sidebar.affix-top { width:200px; /* for reference - no additional styling */ } /* affix: The affix class should be fixed to the page. */ #sidebar.affix { position: fixed; top: 125px; /* same as body padding or outer navbar height */ width: 200px; /* stop it from growing - anyone know how to fix this? */ }
/* affix bottom: The affix-bottom class should be positioned absolute. */ #sidebar.affix-bottom { position: absolute; width: 200px; }
}
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
- sidebar *:not(html) {
-webkit-transform: translate3d(0, 0, 0);
}