mirror of
https://github.com/silverstripe/silverstripe-simple
synced 2024-10-22 11:05:50 +02:00
ENHANCEMENT improved form styles, typography styles, removed copyright
This commit is contained in:
Paul Clarke
parent
df15cd8920
commit
988174dc2e
425
css/form.css
425
css/form.css
@ -1,10 +1,209 @@
|
||||
.ui-widget,
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family: Arial, Helvetica, sans-serif !important
|
||||
/** ----------------------------------------------------------
|
||||
*
|
||||
* This stylesheet includes both generic form styles and
|
||||
* additional form styles for the User Defined Form Module.
|
||||
*
|
||||
** ------------------------------------------------------- */
|
||||
|
||||
|
||||
/* GENERIC FORMS
|
||||
----------------------------------------------- */
|
||||
|
||||
form {
|
||||
max-width: 500px;
|
||||
width: 50%;
|
||||
}
|
||||
div.field {
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
form label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
form label.left {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
form label.right {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
form input.text,
|
||||
form textarea,
|
||||
form .textajaxuniquetext,
|
||||
form select {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 6px 5px;
|
||||
font-size: 15px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dad9d9;
|
||||
}
|
||||
form input.text:focus,
|
||||
form textarea:focus,
|
||||
form .textajaxuniquetext:focus,
|
||||
form select:focus {
|
||||
outline:none;
|
||||
}
|
||||
form input[disabled], form textarea[disabled] {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #dad9d9;
|
||||
}
|
||||
|
||||
|
||||
/* Radio and Checkbox */
|
||||
.field .checkbox, .field .radio {
|
||||
float: left;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-right: 6px;
|
||||
margin-top: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
.checkbox label.right,
|
||||
.radio label.right {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
/* Messages */
|
||||
form .message {
|
||||
background-color: #fef4ba;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #e8c805;
|
||||
border-radius: 3px;
|
||||
}
|
||||
form .good {
|
||||
background-color: #ecf9d0;
|
||||
border-color: #8fbe00;
|
||||
}
|
||||
form .bad, form .required {
|
||||
background-color: #f9d0d0;
|
||||
border-color: #cf0000;
|
||||
color: #b80000;
|
||||
}
|
||||
|
||||
|
||||
/* ACTIONS */
|
||||
.Actions {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a.btn, button, input[type="submit"], .Actions .action {
|
||||
background: #b80000;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
padding: 6px 15px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
border: none;
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
a.btn:hover, button, input[type="submit"]:hover, .Actions .action:hover {
|
||||
background: #d80000;
|
||||
color: #fff;
|
||||
}
|
||||
a.btn {
|
||||
line-height: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a.btn:after { /* creates arrow in button */
|
||||
content: '\2192';
|
||||
padding-left: 10px;
|
||||
}
|
||||
.Actions:after {
|
||||
color: #B94A48;
|
||||
content: "* Indicates a required field";
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin-top: 9px;
|
||||
}
|
||||
#MemberLoginForm_LoginForm .Actions:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* AREA SPECIFIC */
|
||||
/* LOGIN and FORGOT PASSWORD */
|
||||
#Remember {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
/* Search / Login */
|
||||
.header form .middleColumn {
|
||||
/* float: none;
|
||||
width: 100% !important; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* USER DEFINED USER FORM MODULE STYLES
|
||||
----------------------------------------------- */
|
||||
|
||||
/*Generic and mixed*/
|
||||
.FormHeading {
|
||||
clear: both;
|
||||
padding-top: 15px;
|
||||
}
|
||||
form .date .middleColumn input {
|
||||
background: transparent url(../images/icons/your_icon_here.png) no-repeat scroll 90px 5px;
|
||||
width: 114px;
|
||||
}
|
||||
.Actions input.resetformaction { /* Clear button */
|
||||
float: left;
|
||||
background-color: #888;
|
||||
}
|
||||
.Actions input.resetformaction:hover { /* Clear button */
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
.checkbox label.right {
|
||||
font-size: 13px; /* reset to default */
|
||||
color: #333; /* reset to default */
|
||||
}
|
||||
form .requiredField label.left:after {
|
||||
color: #B94A48;
|
||||
content: "*";
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
/* Radio / Checkbox */
|
||||
form .checkboxset ul,
|
||||
form .optionset ul {
|
||||
margin: 0;
|
||||
}
|
||||
form .checkboxset li,
|
||||
form .optionset li {
|
||||
margin-bottom: 5px;
|
||||
list-style-type:none;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
span.message {
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
max-width: 390px;
|
||||
clear: left;
|
||||
}
|
||||
div.holder-required { /* This class needs to be changed - is used for both input and div */
|
||||
/* background-color: #f9d0d0;
|
||||
border: 1px solid #cf0000;
|
||||
padding: 10px;
|
||||
margin-left: -11px; */
|
||||
}
|
||||
form input.holder-required { /* This class needs to be changed - is used for both input and div */
|
||||
border: 1px solid #cf0000;
|
||||
}
|
||||
|
||||
/* Error messages */
|
||||
input:invalid,
|
||||
textarea:invalid {
|
||||
border-radius: 1px;
|
||||
@ -16,234 +215,39 @@ textarea:invalid {
|
||||
.no-boxshadow textarea:invalid {
|
||||
background-color: #f0dddd
|
||||
}
|
||||
form {
|
||||
max-width: 70%;
|
||||
}
|
||||
form .message {
|
||||
float:right;
|
||||
padding-top: 6px;
|
||||
color:#b80000;
|
||||
}
|
||||
.holder-required {
|
||||
background-color:#ffb8b8;
|
||||
}
|
||||
form .good {
|
||||
background-color: #ecf9d0;
|
||||
border-color: #8fbe00;
|
||||
}
|
||||
form .bad {
|
||||
background-color: #f9d0d0;
|
||||
border-color: #be0000;
|
||||
}
|
||||
.checkbox,
|
||||
.radio {
|
||||
margin-top: 3px;
|
||||
}
|
||||
.checkbox label.right,
|
||||
.radio label.right {
|
||||
text-align: left;
|
||||
padding-left: 0px;
|
||||
}
|
||||
#MemberLoginForm_LoginForm_action_dologin,
|
||||
.Actions .action {
|
||||
padding: 6px 20px
|
||||
}
|
||||
#MemberLoginForm_LoginForm,
|
||||
#MemberLoginForm_LostPasswordForm {
|
||||
max-width: 500px
|
||||
}
|
||||
#ForgotPassword a {
|
||||
margin-top: 15px
|
||||
}
|
||||
#ForgotPassword {
|
||||
margin-top: 6px
|
||||
}
|
||||
div.field {
|
||||
width: 100%;
|
||||
|
||||
/* To test - potentially not needed? */
|
||||
.ss-uploadfield-item-info button{
|
||||
margin-top: 4px !important;
|
||||
float: left;
|
||||
margin-bottom: 10px;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.middleColumn div.field {
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
|
||||
.ui-widget {
|
||||
font-family: Arial, Helvetica, sans-serif
|
||||
}
|
||||
form label.left {
|
||||
max-width:50%;
|
||||
padding-right: 5%;
|
||||
padding-bottom:10px;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
form label.right {
|
||||
padding-left: 5%;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
.main form .middleColumn {
|
||||
float: left;
|
||||
width: 50% !important;
|
||||
}
|
||||
.main form .middleColumn .middleColumn {
|
||||
width: 100% !important
|
||||
}
|
||||
.header form .middleColumn {
|
||||
float: none;
|
||||
width: 100% !important;
|
||||
}
|
||||
.listbox option {
|
||||
padding: 3px 0
|
||||
}
|
||||
form input.text,
|
||||
form textarea,
|
||||
form .textajaxuniquetext,
|
||||
form select {
|
||||
width: 98%;
|
||||
padding: 6px 1%;
|
||||
font-size: 15px;
|
||||
background-color:#fff;
|
||||
border: 1px solid #dad9d9;
|
||||
}
|
||||
|
||||
form input.text:focus,
|
||||
form textarea:focus,
|
||||
form .textajaxuniquetext:focus,
|
||||
form select:focus {
|
||||
outline:none;
|
||||
}
|
||||
|
||||
form input.sitetreeurlsegment {
|
||||
width: 200px
|
||||
}
|
||||
form span.readonly {
|
||||
font-size: 16px
|
||||
}
|
||||
form input[disabled], form textarea[disabled] {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #dad9d9;
|
||||
}
|
||||
form .creditCardField input,
|
||||
form input.currency {
|
||||
padding: 5px 1%;
|
||||
width: 50px;
|
||||
}
|
||||
form input.currency,
|
||||
form input.numeric {
|
||||
padding: 5px 1%;
|
||||
width: 50px;
|
||||
}
|
||||
form #DMYDate-month,
|
||||
form #DMYDate-day {
|
||||
width: 25px
|
||||
}
|
||||
form .checkboxset ul,
|
||||
form .optionset ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form .checkboxset li,
|
||||
form .optionset li {
|
||||
margin-bottom: 5px;
|
||||
list-style-type:none;
|
||||
}
|
||||
form .checkboxset li .checkbox,
|
||||
form .optionset li .radio{
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
a.btn, button, input[type="submit"] {
|
||||
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;
|
||||
border:none;
|
||||
}
|
||||
|
||||
a.btn:hover, button, input[type="submit"]:hover {
|
||||
background: #d80000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button{
|
||||
background-color:#a4a4a4;
|
||||
}
|
||||
|
||||
.ss-uploadfield-item-info button{
|
||||
margin-top:4px !important;
|
||||
float:left;
|
||||
}
|
||||
|
||||
a.btn:after {
|
||||
content: '\2192';
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.resetformaction {
|
||||
float:right;
|
||||
border-radius:20px;
|
||||
background-color:#9F9F9F;
|
||||
border:none;
|
||||
color:#fff;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
/* Responsive form styles
|
||||
----------------------------------------------- */
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.main form .middleColumn {
|
||||
float: right;
|
||||
width: 100% !important;
|
||||
: ;
|
||||
}
|
||||
|
||||
/* To test - potentially not needed? */
|
||||
.header form .middleColumn {
|
||||
float: none;
|
||||
width: 100% !important;
|
||||
: ;
|
||||
}
|
||||
form label.left,
|
||||
#MemberLoginForm_LoginForm label {
|
||||
margin-bottom: 8px
|
||||
}
|
||||
div.field {
|
||||
position:relative;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.checkbox label.right,
|
||||
.radio label.right {
|
||||
float:left;
|
||||
text-align: left;
|
||||
}
|
||||
form label.left {
|
||||
width:50%;
|
||||
padding:0;
|
||||
}
|
||||
form label.right {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
margin-top: 3px;
|
||||
width: 50%;
|
||||
padding: 0;
|
||||
}
|
||||
.checkbox label.right,
|
||||
.radio label.right {
|
||||
position:relative;
|
||||
right:auto;
|
||||
margin-top:-10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
@ -253,4 +257,5 @@ a.btn:after {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 700px) {
|
||||
|
||||
}
|
||||
708
css/layout.css
708
css/layout.css
@ -1,3 +1,285 @@
|
||||
/** ----------------------------------------------------------
|
||||
*
|
||||
* Contains the main layout of the page and the individual styles.
|
||||
* Acts as the main stylesheet for theme.
|
||||
*
|
||||
* Include your notes or table of contents below....
|
||||
* Include color hex's or values of your grid
|
||||
*
|
||||
* @author Your Name <email@silverstripe.com>
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
/* MAIN LAYOUT */
|
||||
body {
|
||||
margin: 0;
|
||||
background: #ededed;
|
||||
min-width: 240px;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
.ie7 body,
|
||||
.ie8 body {
|
||||
min-width: 860px
|
||||
}
|
||||
.main {
|
||||
background: #fff;
|
||||
padding: 40px 0 60px;
|
||||
min-height: 300px;
|
||||
}
|
||||
.inner {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.ie6 .inner {
|
||||
width: 960px
|
||||
}
|
||||
.content-container {
|
||||
float: right;
|
||||
width: 73%;
|
||||
}
|
||||
.no-sidebar .content-container {
|
||||
float: left;
|
||||
width:100%;
|
||||
}
|
||||
aside {
|
||||
float: left;
|
||||
width: 23%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.no-sidebar aside {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
/* HEADER */
|
||||
.header {
|
||||
background: #161616
|
||||
}
|
||||
.header .inner {
|
||||
padding-top: 45px;
|
||||
position: relative;
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
/* Brand */
|
||||
.brand, .brand:hover {
|
||||
float: left;
|
||||
color: #fff;
|
||||
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 p {
|
||||
color: #888;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
/* Search form */ /* TODO: make sure this is not double up from form.css */
|
||||
.search-bar {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 34px;
|
||||
}
|
||||
.search-bar form fieldset {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.search-bar form input.text {
|
||||
width: 155px;
|
||||
padding:6px 35px 6px 10px;
|
||||
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;
|
||||
border-radius:0;
|
||||
margin-top:0;
|
||||
}
|
||||
.search-bar form input.action:hover {
|
||||
color: #000
|
||||
}
|
||||
.search-bar form input:focus,
|
||||
.header textarea:focus {
|
||||
outline: none
|
||||
}
|
||||
#Search {
|
||||
padding:0;
|
||||
}
|
||||
.search-dropdown-icon {
|
||||
display: none
|
||||
}
|
||||
|
||||
|
||||
/* NAVIGATION */
|
||||
|
||||
/* Primary navigation */
|
||||
.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: 30px;
|
||||
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%;
|
||||
}
|
||||
|
||||
/* Secondary navigation */
|
||||
.secondary h3 {
|
||||
font-size: 20px;
|
||||
color: #b8b7b7;
|
||||
margin: 0 0 10px 0;
|
||||
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
.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
|
||||
}
|
||||
|
||||
|
||||
/* MIXED */
|
||||
header:after,
|
||||
.main:after,
|
||||
#Root:after,
|
||||
@ -10,53 +292,6 @@ footer:after {
|
||||
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
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -64,284 +299,67 @@ a:link {
|
||||
-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:6px 35px 6px 10px;
|
||||
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;
|
||||
border-radius:0;
|
||||
margin-top:0;
|
||||
}
|
||||
.search-bar form input.action:hover {
|
||||
color: #000
|
||||
body h1 span.amp {
|
||||
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#Search {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.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;
|
||||
/* PAGE SPECIFIC LAYOUT */
|
||||
/* Homepage */
|
||||
|
||||
/* Search Results */ /* TODO: Test search results styles */
|
||||
.searchResults h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.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;
|
||||
.searchResults p.searchQuery {
|
||||
color: #333;
|
||||
line-height: 17px;
|
||||
font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.secondary li .text {
|
||||
padding-left: 28px;
|
||||
display: block;
|
||||
.searchResults ul#SearchResults {
|
||||
padding: 0
|
||||
}
|
||||
.secondary li.section,
|
||||
.secondary li.current {
|
||||
background-color: #f7f7f7
|
||||
}
|
||||
.secondary li.section a,
|
||||
.secondary li.current a {
|
||||
color: #000
|
||||
.searchResults ul#SearchResults li {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding: 20px 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.content-container {
|
||||
float: right;
|
||||
width: 73%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.no-sidebar .content-container {
|
||||
float: left;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.no-sidebar aside {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.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: 20px 0;
|
||||
list-style-type: none;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.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 */
|
||||
.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;
|
||||
@ -379,35 +397,43 @@ aside {
|
||||
.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 {
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DEVICE & RESPONSIVE LAYOUT */
|
||||
.header .nav-open-button {
|
||||
display: none
|
||||
}
|
||||
#media-query-trigger {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.content img {
|
||||
max-width: 97%;
|
||||
@ -418,6 +444,7 @@ aside {
|
||||
-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 {
|
||||
@ -502,6 +529,7 @@ aside {
|
||||
.header .primary ul li a:hover {
|
||||
color: inherit
|
||||
}
|
||||
|
||||
/* Search Form */
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
@ -557,9 +585,10 @@ aside {
|
||||
top: 2px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main {
|
||||
padding: 20px 0 45px
|
||||
padding: 20px 0 45px;
|
||||
}
|
||||
.content-container,
|
||||
aside {
|
||||
@ -595,6 +624,7 @@ aside {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
|
||||
@ -30,7 +30,7 @@ input[type="checkbox"], input.checkbox, .checkboxes input {vertical-align:bottom
|
||||
.ie6 input {vertical-align: text-bottom;}
|
||||
label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;}
|
||||
button, input, select, textarea {margin:0;}
|
||||
.checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;}
|
||||
/* .checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;} */
|
||||
|
||||
button {width:auto; overflow:visible;}
|
||||
.ie7 img {-ms-interpolation-mode: bicubic;}
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
ul.tabstrip {
|
||||
padding: 0;
|
||||
margin: 0 !important;
|
||||
clear: left;
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
ul.tabstrip {
|
||||
padding: 0;
|
||||
margin: 0 !important;
|
||||
clear: left;
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
ul.tabstrip li {
|
||||
float: left;
|
||||
background: #ddd;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 0;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
margin: 0 5px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
ul.tabstrip li a {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 5px 13px 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
outline: none;
|
||||
color: #333;
|
||||
}
|
||||
ul.tabstrip li a:hover {
|
||||
text-decoration: none
|
||||
}
|
||||
ul.tabstrip li.current,
|
||||
ul.tabstrip li.ui-tabs-selected,
|
||||
ul.tabstrip li.sel {
|
||||
background: #fff;
|
||||
top: 0;
|
||||
}
|
||||
ul.tabstrip li:hover {
|
||||
background-color: #eee
|
||||
}
|
||||
ul.tabstrip li.current:hover {
|
||||
background-color: #fff
|
||||
}
|
||||
ul.tabstrip li.current a,
|
||||
ul.tabstrip li.ui-tabs-selected a,
|
||||
ul.tabstrip li.sel a {
|
||||
color: #333
|
||||
}
|
||||
.tab {
|
||||
clear: left;
|
||||
overflow: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
@ -1,118 +1,143 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 20, 2012 06:04:25 AM America/New_York */
|
||||
@font-face {
|
||||
font-family: 'CamboRegular';
|
||||
src: url('../webfonts/Cambo-Regular-webfont.eot');
|
||||
src: url('../webfonts/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/Cambo-Regular-webfont.woff') format('woff'), url('../webfonts/Cambo-Regular-webfont.ttf') format('truetype'), url('../webfonts/Cambo-Regular-webfont.svg#CamboRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WebSymbolsRegular';
|
||||
src: url('../webfonts/websymbols-regular-webfont.eot');
|
||||
src: url('../webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/websymbols-regular-webfont.woff') format('woff'), url('../webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('../webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/** ----------------------------------------------------------
|
||||
*
|
||||
* Contains the generic theme typography styles
|
||||
*
|
||||
* Include your notes or table of contents here
|
||||
*
|
||||
* Include color hex's or values of your grid
|
||||
* #333333 - body
|
||||
* #B80000 - links, headings
|
||||
* #D80000 - links on hover
|
||||
* 5px Vertical grid - based on multiples of 5px, eg 10px, 15px, 20px, 25px...
|
||||
*
|
||||
* @author Your Name <email@gmail.com>
|
||||
*
|
||||
* ------------------------------------------------------- */
|
||||
|
||||
/* TEMPLATE CUSTOM FONTS */
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 20, 2012 06:04:25 AM America/New_York */
|
||||
@font-face {
|
||||
font-family: 'CamboRegular';
|
||||
src: url('../webfonts/Cambo-Regular-webfont.eot');
|
||||
src: url('../webfonts/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/Cambo-Regular-webfont.woff') format('woff'), url('../webfonts/Cambo-Regular-webfont.ttf') format('truetype'), url('../webfonts/Cambo-Regular-webfont.svg#CamboRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WebSymbolsRegular';
|
||||
src: url('../webfonts/websymbols-regular-webfont.eot');
|
||||
src: url('../webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/websymbols-regular-webfont.woff') format('woff'), url('../webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('../webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/* BASE TYPOGRPHY */
|
||||
body {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #333333;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
body a { text-decoration: none; }
|
||||
body a:link { -webkit-tap-highlight-color: #b80000 }
|
||||
|
||||
|
||||
/* HEADERS */
|
||||
.typography h1,
|
||||
.typography h2,
|
||||
.typography h3,
|
||||
.typography h4,
|
||||
.typography h5,
|
||||
.typography h6 {
|
||||
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
||||
font-weight: normal;
|
||||
color: #b80000;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 17px;
|
||||
font-size: 13px;
|
||||
line-height: 21px;
|
||||
}
|
||||
em {
|
||||
font-style: normal
|
||||
}
|
||||
a {
|
||||
color: #b80000;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #d80000
|
||||
}
|
||||
|
||||
.typography h1 a{
|
||||
border:none;
|
||||
}
|
||||
|
||||
.typography ul {
|
||||
margin: 20px 0 20px 30px
|
||||
}
|
||||
.typography li {
|
||||
line-height: 22px;
|
||||
margin-bottom: 5px;
|
||||
list-style-type: disc;
|
||||
}
|
||||
.typography h1 {
|
||||
font-size: 36px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-bottom: 6px;
|
||||
margin: 0 0 23px 0;
|
||||
line-height: 45px;
|
||||
}
|
||||
.typography h1 span.amp {
|
||||
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
|
||||
font-style: italic;
|
||||
}
|
||||
.typography h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
padding-top: 15px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.typography h3 {
|
||||
font-size: 21px;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.typography a {
|
||||
border-bottom: 1px dashed #b80000
|
||||
.typography h1 { font-size: 36px;
|
||||
line-height: 45px;
|
||||
margin: 0 0 25px 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.typography h2 { font-size: 28px; line-height: 35px; margin-bottom: 15px; padding-top: 10px; }
|
||||
.typography h3 { font-size: 22px; line-height: 30px; margin-bottom: 10px; }
|
||||
.typography h4 { font-size: 18px; line-height: 25px; margin-bottom: 5px; }
|
||||
.typography h5 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
|
||||
.typography h6 { font-size: 14px; line-height: 20px; font-weight: bold; margin-bottom: 5px; }
|
||||
|
||||
|
||||
/* PARAGRAGHS */
|
||||
.typography p { font-size: 13px; line-height: 20px; margin: 0 0 20px; }
|
||||
.typography .intro {
|
||||
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.typography em { font-style: italic; }
|
||||
::-moz-selection {
|
||||
background: #b80000;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
::selection {
|
||||
background: #b80000;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
/* LINKS */
|
||||
.typography a,
|
||||
.typography a.intro {
|
||||
color: #B80000;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dashed #B80000;
|
||||
}
|
||||
.typography a:hover { color: #D80000; }
|
||||
.typography a:focus { }
|
||||
|
||||
|
||||
/* LIST STYLES
|
||||
-------------------------------------------- */
|
||||
.typography ul,
|
||||
.typography ol,
|
||||
.typography dl { margin: 0 0 20px 25px; }
|
||||
.typography ul li { list-style-type: disc; }
|
||||
.typography li { margin-bottom: 5px; }
|
||||
|
||||
|
||||
/* TABLE STYLES
|
||||
-------------------------------------------- */
|
||||
.typography table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-spacing: 0;
|
||||
margin: 0 0 10px;
|
||||
text-align: left;
|
||||
}
|
||||
table tr:nth-child(even) {
|
||||
.typography table tr:nth-child(even) {
|
||||
background-color: #ededed
|
||||
}
|
||||
table tr.even,
|
||||
.content table th,
|
||||
.content thead td {
|
||||
.typography table tr.even,
|
||||
.typography table th,
|
||||
.typography thead td {
|
||||
background-color: #ededed
|
||||
}
|
||||
table td,
|
||||
.content table th {
|
||||
.typography table td,
|
||||
.typography table th {
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #d4d4d4;
|
||||
vertical-align: top;
|
||||
}
|
||||
table th {
|
||||
text-align: left;
|
||||
.typography table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
p.intro {
|
||||
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
||||
font-size: 22px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 20px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
|
||||
/* WYSIWYG EDITOR ALIGNMENT CLASSES
|
||||
-------------------------------------------- */
|
||||
.typography .left {
|
||||
@ -124,38 +149,104 @@ p.intro {
|
||||
.typography .right {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
|
||||
/* IMAGES
|
||||
-------------------------------------------- */
|
||||
.typography img {
|
||||
border: 5px solid #d7d7d7;
|
||||
max-width: 60%;
|
||||
height: auto;
|
||||
float: left;
|
||||
margin: 6px 20px 10px 0;
|
||||
}
|
||||
.typography img.left, .typography img.right {
|
||||
border: 5px solid #d7d7d7;
|
||||
max-width: 60%;
|
||||
height: auto;
|
||||
background: transparent url(../images/ajax-loader.gif) no-repeat center center;
|
||||
}
|
||||
.typography img.left {
|
||||
float: left;
|
||||
margin: 6px 20px 10px 0;
|
||||
max-width: 50%;
|
||||
margin: 5px 20px 10px 0;
|
||||
}
|
||||
.typography img.right {
|
||||
float: right;
|
||||
margin: 6px 0 10px 20px;
|
||||
max-width: 50%; /* Responsive width */
|
||||
margin: 5px 0 10px 20px;
|
||||
}
|
||||
|
||||
.typography img.leftAlone {
|
||||
float: left;
|
||||
margin-right: 100%;
|
||||
margin-bottom: 10px;
|
||||
clear: both;
|
||||
}
|
||||
.typography img.center {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
clear: both;
|
||||
}
|
||||
.typography .captionImage { width: 100%; margin-top: 5px; }
|
||||
.typography .captionImage img { margin: 0; }
|
||||
.typography .captionImage.left {
|
||||
float: left;
|
||||
margin: 5px 30px 20px 0px;
|
||||
}
|
||||
.typography .captionImage.right{
|
||||
float: right;
|
||||
margin: 5px 0 20px 30px;
|
||||
}
|
||||
.typography .captionImage.left[style],
|
||||
.typography .captionImage.right[style] {
|
||||
max-width: 50%; /* Overides core width to make responsive */
|
||||
}
|
||||
.typography .captionImage.left img,
|
||||
.typography .captionImage.right img {
|
||||
float: none;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
.typography .captionImage.left img {
|
||||
margin-right: -10px;
|
||||
}
|
||||
.typography .captionImage.right img {
|
||||
margin-left: -10px;
|
||||
}
|
||||
.typography .captionImage.leftAlone{
|
||||
float:none;
|
||||
margin: 0 20px 20px 0px;
|
||||
}
|
||||
.typography .captionImage.center{
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
.typography .captionImage p {
|
||||
clear: both;
|
||||
margin: 5px 0;
|
||||
font-style: italic;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
/* BLOCKQUOTES
|
||||
-------------------------------------------- */
|
||||
.typography blockquote {
|
||||
background: transparent url(../images/blockquote.png) no-repeat 0px 6px;
|
||||
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
||||
color: #777;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin: 0 0 20px;
|
||||
float: right;
|
||||
text-indent: 30px;
|
||||
width: 45%;
|
||||
margin-left: 5%;
|
||||
clear: both;
|
||||
}
|
||||
.typography blockquote p {
|
||||
font-size: 17px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.typography pre {
|
||||
background: #F7F7F7;
|
||||
border: 1px solid #E4E4E4;
|
||||
font-family: Courier, monospace;
|
||||
margin: 0 0 20px 0;
|
||||
padding: 15px;
|
||||
clear: both;
|
||||
}
|
||||
BIN
images/blockquote.png
Normal file
BIN
images/blockquote.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -84,6 +84,7 @@ jQuery.noConflict();
|
||||
searchBar.slideUp();
|
||||
menu.slideToggle(200);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="inner copy">
|
||||
<div class="left">$SiteConfig.Title <span class="arrow">→</span> <% include Navigation %></div>
|
||||
<small class="right">© <a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
|
||||
<small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
|
||||
</div>
|
||||
</footer>
|
||||
Loading…
Reference in New Issue
Block a user