mirror of
https://github.com/silverstripe/silverstripe-simple
synced 2024-06-26 14:29:25 +02:00
a9c64c423e
The max-width 60% is a nice touch for left-aligned or right-aligned images, but it doesn't suit all images. I've restricted the styling so that this is only applied to img.left and img.right images, which are the classes assigned by the CMS for left-aligned and right-aligned images.
681 lines
13 KiB
CSS
681 lines
13 KiB
CSS
header:after,
|
|
.main:after,
|
|
#Root:after,
|
|
.search-bar:after,
|
|
header .inner:after,
|
|
footer:after {
|
|
height: 0;
|
|
content: ".";
|
|
display: block;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: #ededed;
|
|
min-width: 240px;
|
|
-webkit-text-size-adjust: none;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.ie7 body,
|
|
.ie8 body {
|
|
min-width: 860px
|
|
}
|
|
::-moz-selection {
|
|
background: #b80000;
|
|
color: #fff;
|
|
text-shadow: none;
|
|
}
|
|
::selection {
|
|
background: #b80000;
|
|
color: #fff;
|
|
text-shadow: none;
|
|
}
|
|
a:link {
|
|
-webkit-tap-highlight-color: #b80000
|
|
}
|
|
a.btn {
|
|
background: #b80000;
|
|
color: #fff;
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
padding: 6px 15px;
|
|
margin-top: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-bottom: none !important;
|
|
font-size: 13px;
|
|
}
|
|
a.btn:after {
|
|
content: '\2192';
|
|
padding-left: 10px;
|
|
font-size: 14px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
a.btn:hover {
|
|
background: #d80000;
|
|
color: #fff;
|
|
}
|
|
.content img.left, .content img.right {
|
|
border: 5px solid #d7d7d7;
|
|
max-width: 60%;
|
|
height: auto;
|
|
}
|
|
.content img.left {
|
|
float: left;
|
|
margin: 6px 20px 10px 0;
|
|
}
|
|
content img.right {
|
|
float: right;
|
|
margin: 6px 0 10px 20px;
|
|
}
|
|
|
|
.content ul {
|
|
margin: 20px 0 20px 30px
|
|
}
|
|
.content li {
|
|
line-height: 22px;
|
|
margin-bottom: 5px;
|
|
list-style-type: disc;
|
|
}
|
|
.content-container h1 {
|
|
font-size: 36px;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
padding-bottom: 6px;
|
|
margin: 0 0 23px 0;
|
|
line-height: 45px;
|
|
}
|
|
.content-container h1 span.amp {
|
|
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
|
|
font-style: italic;
|
|
}
|
|
.content-container h2 {
|
|
font-size: 24px;
|
|
margin-bottom: 15px;
|
|
padding-top: 15px;
|
|
line-height: 32px;
|
|
}
|
|
.content-container h3 {
|
|
font-size: 21px;
|
|
margin-bottom: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
.content a {
|
|
border-bottom: 1px dashed #b80000
|
|
}
|
|
.brand {
|
|
float: left;
|
|
display: inline-block;
|
|
}
|
|
.brand h1 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 48px;
|
|
font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-stretch: normal;
|
|
line-height: 1em;
|
|
}
|
|
.brand,
|
|
.brand:hover {
|
|
color: #fff
|
|
}
|
|
.brand p {
|
|
color: #888;
|
|
margin-bottom: 22px;
|
|
}
|
|
.search-bar form input.action,
|
|
.header .primary li a,
|
|
.footer a {
|
|
-moz-transition: color 0.2s;
|
|
-webkit-transition: color 0.2s;
|
|
transition: color 0.2s;
|
|
}
|
|
/* Search Form */
|
|
.search-bar {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: 34px;
|
|
}
|
|
.search-dropdown-icon {
|
|
display: none
|
|
}
|
|
.search-bar form fieldset {
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.search-bar form input.text {
|
|
width: 155px;
|
|
padding-left: 10px;
|
|
padding-right: 35px;
|
|
color: #888;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 20px;
|
|
background: #fff;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.search-bar form input.active {
|
|
color: #000
|
|
}
|
|
.search-bar form input.action {
|
|
font-size: 15px;
|
|
position: absolute;
|
|
right: 3px;
|
|
top: -1px;
|
|
cursor: pointer;
|
|
border: none;
|
|
padding: 5px;
|
|
background: none;
|
|
font-family: 'WebSymbolsRegular';
|
|
color: #848484;
|
|
}
|
|
.search-bar form input.action:hover {
|
|
color: #000
|
|
}
|
|
.search-bar form input:focus,
|
|
.header textarea:focus {
|
|
outline: none
|
|
}
|
|
.header .primary ul {
|
|
/*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px;
|
|
}
|
|
.header .primary li {
|
|
float: left;
|
|
padding-bottom: 17px;
|
|
margin: 0 5px;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
.header .primary li a {
|
|
color: #888;
|
|
font-size: 15px;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
padding: 6px 8px;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
.header .primary li a:hover {
|
|
color: #fff
|
|
}
|
|
.header .primary li.section a,
|
|
.header .primary li.current a {
|
|
color: #fff
|
|
}
|
|
.header .primary li.section:after,
|
|
.header .primary li.current:after {
|
|
content: '}';
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
bottom: -6px;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 28px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
}
|
|
/* when navigation and logo overlap tablet-nav is initialized */
|
|
.tablet-nav .brand p {
|
|
margin-bottom: 0
|
|
}
|
|
.tablet-nav .header .inner {
|
|
padding-top: 20px
|
|
}
|
|
.tablet-nav .header .primary ul {
|
|
float: left;
|
|
clear: both;
|
|
position: relative;
|
|
margin: 20px 0 4px -12px;
|
|
white-space: nowrap;
|
|
right: auto;
|
|
}
|
|
.tablet-nav .header .primary ul li {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 0;
|
|
white-space: nowrap;
|
|
}
|
|
.tablet-nav .header .primary ul li a {
|
|
-moz-transition: none;
|
|
-webkit-transition: none;
|
|
transition: none;
|
|
}
|
|
.tablet-nav .header .primary ul li.current a,
|
|
.tablet-nav .header .primary ul li.section a {
|
|
background-color: #525252;
|
|
border-radius: 4px;
|
|
}
|
|
.tablet-nav .header .primary li.section:after,
|
|
.tablet-nav .header .primary li.current:after {
|
|
display: none
|
|
}
|
|
.tablet-nav .footer .right {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
.header .nav-open-button {
|
|
display: none
|
|
}
|
|
.inner {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 0 30px;
|
|
}
|
|
.ie6 .inner {
|
|
width: 960px
|
|
}
|
|
.main {
|
|
background: #fff;
|
|
padding: 50px 0 60px;
|
|
}
|
|
aside {
|
|
float: left;
|
|
width: 23%;
|
|
margin-top: 17px;
|
|
}
|
|
.secondary h3 {
|
|
font-size: 20px;
|
|
color: #b8b7b7;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
.secondary {
|
|
border-bottom: 1px solid #e5e5e5
|
|
}
|
|
.secondary ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.secondary li {
|
|
border-top: 1px solid #e5e5e5;
|
|
position: relative;
|
|
list-style-type: none;
|
|
}
|
|
.secondary li .arrow {
|
|
color: #b80000;
|
|
padding-right: 5px;
|
|
display: block;
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 5px;
|
|
-moz-transition: 0.2s;
|
|
-webkit-transition: 0.2s;
|
|
transition: 0.2s;
|
|
}
|
|
.secondary li:hover .arrow {
|
|
left: 6px
|
|
}
|
|
.secondary li a {
|
|
padding: 8px 0;
|
|
display: block;
|
|
width: 100%;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-size: 11px;
|
|
color: #333;
|
|
line-height: 17px;
|
|
font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
|
|
}
|
|
.secondary li .text {
|
|
padding-left: 28px;
|
|
display: block;
|
|
}
|
|
.secondary li.section,
|
|
.secondary li.current {
|
|
background-color: #f7f7f7
|
|
}
|
|
.secondary li.section a,
|
|
.secondary li.current a {
|
|
color: #000
|
|
}
|
|
.content-container {
|
|
float: right;
|
|
width: 73%;
|
|
padding-bottom: 20px;
|
|
}
|
|
.no-sidebar .content-container {
|
|
float: left
|
|
}
|
|
.header {
|
|
background: #161616
|
|
}
|
|
.header .inner {
|
|
padding-top: 45px;
|
|
position: relative;
|
|
min-height: 72px;
|
|
}
|
|
/* Search Results */
|
|
.searchResults h1 {
|
|
font-size: 36px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.searchResults p.searchQuery {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.searchResults ul#SearchResults {
|
|
padding: 0
|
|
}
|
|
.searchResults ul#SearchResults li {
|
|
border-top: 1px solid #e5e5e5;
|
|
padding: 20px 0;
|
|
list-style-type: none;
|
|
}
|
|
.searchResults ul#SearchResults p {
|
|
margin-bottom: 12px
|
|
}
|
|
.searchResults ul#SearchResults a.searchResultHeader {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 6px;
|
|
display: block;
|
|
}
|
|
.searchResults #PageNumbers {
|
|
border-top: 1px solid #e5e5e5;
|
|
padding-top: 20px;
|
|
}
|
|
.searchResults #PageNumbers a {
|
|
padding: 0 5px
|
|
}
|
|
.searchResults #PageNumbers .pagination {
|
|
float: left
|
|
}
|
|
.searchResults #PageNumbers p {
|
|
float: right
|
|
}
|
|
.searchResults #PageNumbers .next,
|
|
.searchResults #PageNumbers .prev {
|
|
font-size: 14px
|
|
}
|
|
.searchResults #PageNumbers .next {
|
|
margin-left: 15px
|
|
}
|
|
.searchResults #PageNumbers .prev {
|
|
margin-right: 15px
|
|
}
|
|
/* Footer */
|
|
.footer {
|
|
color: #999;
|
|
background: #ededed;
|
|
padding: 20px 0;
|
|
font-size: 11px;
|
|
line-height: 22px;
|
|
}
|
|
.footer a {
|
|
color: #999
|
|
}
|
|
.footer a:hover {
|
|
color: #000
|
|
}
|
|
.footer .left {
|
|
float: left;
|
|
color: #000;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
.footer .right {
|
|
float: right;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
.footer span {
|
|
padding: 0 3px;
|
|
color: #bbb;
|
|
}
|
|
.footer .primary,
|
|
.footer .primary ul {
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.footer .primary li {
|
|
display: inline
|
|
}
|
|
.ie6 .footer .primary li,
|
|
.ie7 .footer .primary li {
|
|
display: inline;
|
|
zoom: 1;
|
|
margin-right: 10px;
|
|
}
|
|
.footer .primary li:after {
|
|
padding: 0 3px 0 5px;
|
|
content: '/';
|
|
color: #999;
|
|
}
|
|
.footer .primary li:last-child:after {
|
|
content: ''
|
|
}
|
|
.footer .arrow {
|
|
padding: 0 8px 0 5px;
|
|
color: #b80000;
|
|
font-size: 13px;
|
|
}
|
|
.footer .primary .nav-open-button {
|
|
display: none
|
|
}
|
|
.footer .primary ul#nav .menu-bubble-arrow {
|
|
display: none
|
|
}
|
|
#media-query-trigger {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
@media only screen and (max-width: 960px) {
|
|
.content img {
|
|
max-width: 97%;
|
|
height: auto;
|
|
}
|
|
.header .primary ul {
|
|
margin-left: -12px;
|
|
-webkit-padding-start: 0px;
|
|
}
|
|
}
|
|
/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
|
|
@media only screen and (max-width: 640px) {
|
|
body {
|
|
max-width: 640px
|
|
}
|
|
#media-query-trigger {
|
|
visibility: visible
|
|
}
|
|
.brand {
|
|
float: none;
|
|
display: inline-block;
|
|
margin-left: 22px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.brand h1 {
|
|
font-size: 40px
|
|
}
|
|
.brand h1 {
|
|
padding-right: 80px
|
|
}
|
|
.header {
|
|
padding: 0px
|
|
}
|
|
.header .inner {
|
|
padding: 20px 0 0 0;
|
|
min-height: 0;
|
|
}
|
|
.header .primary .nav-open-button {
|
|
z-index: 100;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 32px;
|
|
display: block;
|
|
cursor: pointer;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 20px;
|
|
color: #ededed;
|
|
}
|
|
.header .primary ul {
|
|
z-index: 10;
|
|
position: relative;
|
|
display: none;
|
|
float: left;
|
|
margin: 0 !important;
|
|
padding: 0;
|
|
white-space: normal;
|
|
width: 100%;
|
|
}
|
|
.header .primary ul li {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
float: none;
|
|
background: none;
|
|
position: relative;
|
|
text-shadow: 0 1px #fff;
|
|
}
|
|
.header .primary ul li:after {
|
|
content: '\003e';
|
|
display: block;
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 0px;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 14px;
|
|
color: #999;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 38px;
|
|
}
|
|
.header .primary ul li a,
|
|
.header .primary ul li.current a,
|
|
.header .primary ul li.section a {
|
|
padding: 10px 0 10px 22px;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #bbb;
|
|
color: #434343;
|
|
border-radius: 0 !important;
|
|
background: #e7e7e7 !important;
|
|
}
|
|
.header .primary ul li a:hover {
|
|
color: inherit
|
|
}
|
|
/* Search Form */
|
|
.search-bar {
|
|
width: 100%;
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
padding: 20px 0;
|
|
margin: 0;
|
|
background-color: #E7E7E7;
|
|
}
|
|
.search-dropdown-icon {
|
|
display: block;
|
|
cursor: pointer;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
right: 60px;
|
|
top: 34px;
|
|
font-family: 'WebSymbolsRegular';
|
|
font-size: 20px;
|
|
color: #ededed;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
}
|
|
.search-bar form {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
.search-bar form fieldset {
|
|
padding: 0 18px;
|
|
left: 0;
|
|
right: 0;
|
|
position: relative;
|
|
}
|
|
.search-bar div.field {
|
|
margin-bottom: 0
|
|
}
|
|
.search-bar form input.text {
|
|
width: 93%;
|
|
padding: 8px 7% 8px 0;
|
|
text-indent: 15px;
|
|
position: relative;
|
|
display: block;
|
|
right: 0;
|
|
left: 0;
|
|
border: 1px solid #e5e5e5;
|
|
background: #fff;
|
|
font-size: 17px;
|
|
}
|
|
.search-bar form input.action {
|
|
right: 24px;
|
|
top: 2px;
|
|
font-size: 18px;
|
|
}
|
|
/* Main Content */
|
|
.main {
|
|
padding: 20px 0 45px
|
|
}
|
|
.content-container,
|
|
aside {
|
|
width: 100%
|
|
}
|
|
.content-container h1 {
|
|
font-size: 30px;
|
|
line-height:35px;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.content-container p {
|
|
font-size: 14px;
|
|
line-height: 23px;
|
|
}
|
|
p.intro {
|
|
font-size: 19px;
|
|
line-height: 27px;
|
|
}
|
|
.main .inner {
|
|
padding: 0 22px
|
|
}
|
|
/* Secondry Nav */
|
|
.secondary li a {
|
|
line-height: 24px
|
|
}
|
|
.secondary li .arrow {
|
|
line-height: 26px
|
|
}
|
|
/* Footer */
|
|
.footer .right {
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media print {
|
|
* {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
filter: none !important;
|
|
-ms-filter: none !important;
|
|
}
|
|
.header,
|
|
.footer {
|
|
display: none
|
|
}
|
|
a,
|
|
a:visited {
|
|
text-decoration: underline
|
|
}
|
|
thead {
|
|
display: table-header-group
|
|
}
|
|
tr,
|
|
img {
|
|
page-break-inside: avoid
|
|
}
|
|
img {
|
|
max-width: 100% !important
|
|
}
|
|
} |