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,
|
* This stylesheet includes both generic form styles and
|
||||||
.ui-widget textarea,
|
* additional form styles for the User Defined Form Module.
|
||||||
.ui-widget button {
|
*
|
||||||
font-family: Arial, Helvetica, sans-serif !important
|
** ------------------------------------------------------- */
|
||||||
|
|
||||||
|
|
||||||
|
/* 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,
|
input:invalid,
|
||||||
textarea:invalid {
|
textarea:invalid {
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
|
|
@ -16,234 +215,39 @@ textarea:invalid {
|
||||||
.no-boxshadow textarea:invalid {
|
.no-boxshadow textarea:invalid {
|
||||||
background-color: #f0dddd
|
background-color: #f0dddd
|
||||||
}
|
}
|
||||||
form {
|
|
||||||
max-width: 70%;
|
/* To test - potentially not needed? */
|
||||||
}
|
.ss-uploadfield-item-info button{
|
||||||
form .message {
|
margin-top: 4px !important;
|
||||||
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%;
|
|
||||||
float: left;
|
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 .creditCardField input,
|
||||||
form input.currency {
|
form input.currency,
|
||||||
padding: 5px 1%;
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
form input.numeric {
|
form input.numeric {
|
||||||
padding: 5px 1%;
|
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
form #DMYDate-month,
|
form #DMYDate-month,
|
||||||
form #DMYDate-day {
|
form #DMYDate-day {
|
||||||
width: 25px
|
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{
|
/* Responsive form styles
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 700px) {
|
@media only screen and (max-width: 700px) {
|
||||||
.main form .middleColumn {
|
|
||||||
float: right;
|
/* To test - potentially not needed? */
|
||||||
width: 100% !important;
|
|
||||||
: ;
|
|
||||||
}
|
|
||||||
.header form .middleColumn {
|
.header form .middleColumn {
|
||||||
float: none;
|
float: none;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
: ;
|
|
||||||
}
|
}
|
||||||
form label.left,
|
form label.left,
|
||||||
#MemberLoginForm_LoginForm label {
|
#MemberLoginForm_LoginForm label {
|
||||||
margin-bottom: 8px
|
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) {
|
@media only screen and (max-width: 900px) {
|
||||||
|
|
@ -253,4 +257,5 @@ a.btn:after {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 700px) {
|
@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,
|
header:after,
|
||||||
.main:after,
|
.main:after,
|
||||||
#Root:after,
|
#Root:after,
|
||||||
|
|
@ -10,53 +292,6 @@ footer:after {
|
||||||
clear: both;
|
clear: both;
|
||||||
visibility: hidden;
|
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,
|
.search-bar form input.action,
|
||||||
.header .primary li a,
|
.header .primary li a,
|
||||||
.footer a {
|
.footer a {
|
||||||
|
|
@ -64,284 +299,67 @@ a:link {
|
||||||
-webkit-transition: color 0.2s;
|
-webkit-transition: color 0.2s;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
}
|
}
|
||||||
/* Search Form */
|
body h1 span.amp {
|
||||||
.search-bar {
|
font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
|
||||||
position: absolute;
|
font-style: italic;
|
||||||
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
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#Search {
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar form input:focus,
|
/* PAGE SPECIFIC LAYOUT */
|
||||||
.header textarea:focus {
|
/* Homepage */
|
||||||
outline: none
|
|
||||||
}
|
/* Search Results */ /* TODO: Test search results styles */
|
||||||
.header .primary ul {
|
.searchResults h1 {
|
||||||
/*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px;
|
font-size: 36px;
|
||||||
}
|
margin-bottom: 15px;
|
||||||
.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 {
|
.searchResults p.searchQuery {
|
||||||
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;
|
color: #333;
|
||||||
line-height: 17px;
|
margin-bottom: 10px;
|
||||||
font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
|
|
||||||
}
|
}
|
||||||
.secondary li .text {
|
.searchResults ul#SearchResults {
|
||||||
padding-left: 28px;
|
padding: 0
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
.secondary li.section,
|
.searchResults ul#SearchResults li {
|
||||||
.secondary li.current {
|
border-top: 1px solid #e5e5e5;
|
||||||
background-color: #f7f7f7
|
padding: 20px 0;
|
||||||
}
|
list-style-type: none;
|
||||||
.secondary li.section a,
|
|
||||||
.secondary li.current a {
|
|
||||||
color: #000
|
|
||||||
}
|
}
|
||||||
.content-container {
|
.searchResults ul#SearchResults p {
|
||||||
float: right;
|
margin-bottom: 12px
|
||||||
width: 73%;
|
}
|
||||||
padding-bottom: 20px;
|
.searchResults ul#SearchResults a.searchResultHeader {
|
||||||
}
|
font-size: 16px;
|
||||||
.no-sidebar .content-container {
|
font-weight: bold;
|
||||||
float: left;
|
margin-bottom: 6px;
|
||||||
width:100%;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.searchResults #PageNumbers {
|
||||||
.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 {
|
|
||||||
border-top: 1px solid #e5e5e5;
|
border-top: 1px solid #e5e5e5;
|
||||||
padding: 20px 0;
|
padding-top: 20px;
|
||||||
list-style-type: none;
|
|
||||||
}
|
}
|
||||||
.searchResults ul#SearchResults p {
|
.searchResults #PageNumbers a {
|
||||||
margin-bottom: 12px
|
padding: 0 5px
|
||||||
}
|
}
|
||||||
.searchResults ul#SearchResults a.searchResultHeader {
|
.searchResults #PageNumbers .pagination {
|
||||||
font-size: 16px;
|
float: left
|
||||||
font-weight: bold;
|
}
|
||||||
margin-bottom: 6px;
|
.searchResults #PageNumbers p {
|
||||||
display: block;
|
float: right
|
||||||
}
|
}
|
||||||
.searchResults #PageNumbers {
|
.searchResults #PageNumbers .next,
|
||||||
border-top: 1px solid #e5e5e5;
|
.searchResults #PageNumbers .prev {
|
||||||
padding-top: 20px;
|
font-size: 14px
|
||||||
}
|
}
|
||||||
.searchResults #PageNumbers a {
|
.searchResults #PageNumbers .next {
|
||||||
padding: 0 5px
|
margin-left: 15px
|
||||||
}
|
}
|
||||||
.searchResults #PageNumbers .pagination {
|
.searchResults #PageNumbers .prev {
|
||||||
float: left
|
margin-right: 15px
|
||||||
}
|
}
|
||||||
.searchResults #PageNumbers p {
|
|
||||||
float: right
|
|
||||||
}
|
/* FOOTER */
|
||||||
.searchResults #PageNumbers .next,
|
|
||||||
.searchResults #PageNumbers .prev {
|
|
||||||
font-size: 14px
|
|
||||||
}
|
|
||||||
.searchResults #PageNumbers .next {
|
|
||||||
margin-left: 15px
|
|
||||||
}
|
|
||||||
.searchResults #PageNumbers .prev {
|
|
||||||
margin-right: 15px
|
|
||||||
}
|
|
||||||
/* Footer */
|
|
||||||
.footer {
|
.footer {
|
||||||
color: #999;
|
color: #999;
|
||||||
background: #ededed;
|
background: #ededed;
|
||||||
|
|
@ -379,35 +397,43 @@ aside {
|
||||||
.footer .primary li {
|
.footer .primary li {
|
||||||
display: inline
|
display: inline
|
||||||
}
|
}
|
||||||
.ie6 .footer .primary li,
|
.ie6 .footer .primary li,
|
||||||
.ie7 .footer .primary li {
|
.ie7 .footer .primary li {
|
||||||
display: inline;
|
display: inline;
|
||||||
zoom: 1;
|
zoom: 1;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.footer .primary li:after {
|
.footer .primary li:after {
|
||||||
padding: 0 3px 0 5px;
|
padding: 0 3px 0 5px;
|
||||||
content: '/';
|
content: '/';
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
.footer .primary li:last-child:after {
|
.footer .primary li:last-child:after {
|
||||||
content: ''
|
content: ''
|
||||||
}
|
}
|
||||||
.footer .arrow {
|
.footer .arrow {
|
||||||
padding: 0 8px 0 5px;
|
padding: 0 8px 0 5px;
|
||||||
color: #b80000;
|
color: #b80000;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
.footer .primary .nav-open-button {
|
.footer .primary .nav-open-button {
|
||||||
display: none
|
display: none;
|
||||||
}
|
}
|
||||||
.footer .primary ul#nav .menu-bubble-arrow {
|
.footer .primary ul#nav .menu-bubble-arrow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* DEVICE & RESPONSIVE LAYOUT */
|
||||||
|
.header .nav-open-button {
|
||||||
display: none
|
display: none
|
||||||
}
|
}
|
||||||
#media-query-trigger {
|
#media-query-trigger {
|
||||||
display: none;
|
display: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 960px) {
|
@media only screen and (max-width: 960px) {
|
||||||
.content img {
|
.content img {
|
||||||
max-width: 97%;
|
max-width: 97%;
|
||||||
|
|
@ -418,6 +444,7 @@ aside {
|
||||||
-webkit-padding-start: 0px;
|
-webkit-padding-start: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
|
/* 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) {
|
@media only screen and (max-width: 640px) {
|
||||||
body {
|
body {
|
||||||
|
|
@ -502,6 +529,7 @@ aside {
|
||||||
.header .primary ul li a:hover {
|
.header .primary ul li a:hover {
|
||||||
color: inherit
|
color: inherit
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search Form */
|
/* Search Form */
|
||||||
.search-bar {
|
.search-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -557,9 +585,10 @@ aside {
|
||||||
top: 2px;
|
top: 2px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main Content */
|
/* Main Content */
|
||||||
.main {
|
.main {
|
||||||
padding: 20px 0 45px
|
padding: 20px 0 45px;
|
||||||
}
|
}
|
||||||
.content-container,
|
.content-container,
|
||||||
aside {
|
aside {
|
||||||
|
|
@ -595,6 +624,7 @@ aside {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
* {
|
* {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ input[type="checkbox"], input.checkbox, .checkboxes input {vertical-align:bottom
|
||||||
.ie6 input {vertical-align: text-bottom;}
|
.ie6 input {vertical-align: text-bottom;}
|
||||||
label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;}
|
label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;}
|
||||||
button, input, select, textarea {margin:0;}
|
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;}
|
button {width:auto; overflow:visible;}
|
||||||
.ie7 img {-ms-interpolation-mode: bicubic;}
|
.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';
|
* Contains the generic theme typography styles
|
||||||
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');
|
* Include your notes or table of contents here
|
||||||
font-weight: normal;
|
*
|
||||||
font-style: normal;
|
* Include color hex's or values of your grid
|
||||||
}
|
* #333333 - body
|
||||||
@font-face {
|
* #B80000 - links, headings
|
||||||
font-family: 'WebSymbolsRegular';
|
* #D80000 - links on hover
|
||||||
src: url('../webfonts/websymbols-regular-webfont.eot');
|
* 5px Vertical grid - based on multiples of 5px, eg 10px, 15px, 20px, 25px...
|
||||||
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;
|
* @author Your Name <email@gmail.com>
|
||||||
font-style: normal;
|
*
|
||||||
}
|
* ------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* 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 {
|
body {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333333;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
h1,
|
body a { text-decoration: none; }
|
||||||
h2,
|
body a:link { -webkit-tap-highlight-color: #b80000 }
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
/* HEADERS */
|
||||||
h6 {
|
.typography h1,
|
||||||
|
.typography h2,
|
||||||
|
.typography h3,
|
||||||
|
.typography h4,
|
||||||
|
.typography h5,
|
||||||
|
.typography h6 {
|
||||||
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #b80000;
|
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;
|
margin-bottom: 10px;
|
||||||
padding-top: 10px;
|
|
||||||
}
|
}
|
||||||
.typography a {
|
.typography h1 { font-size: 36px;
|
||||||
border-bottom: 1px dashed #b80000
|
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-collapse: collapse;
|
||||||
border: 1px solid #d4d4d4;
|
border: 1px solid #d4d4d4;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
margin: 0 0 10px;
|
margin: 0 0 10px;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
table tr:nth-child(even) {
|
.typography table tr:nth-child(even) {
|
||||||
background-color: #ededed
|
background-color: #ededed
|
||||||
}
|
}
|
||||||
table tr.even,
|
.typography table tr.even,
|
||||||
.content table th,
|
.typography table th,
|
||||||
.content thead td {
|
.typography thead td {
|
||||||
background-color: #ededed
|
background-color: #ededed
|
||||||
}
|
}
|
||||||
table td,
|
.typography table td,
|
||||||
.content table th {
|
.typography table th {
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
border: 1px solid #d4d4d4;
|
border: 1px solid #d4d4d4;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
table th {
|
.typography table th {
|
||||||
text-align: left;
|
|
||||||
font-weight: bold;
|
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
|
/* WYSIWYG EDITOR ALIGNMENT CLASSES
|
||||||
-------------------------------------------- */
|
-------------------------------------------- */
|
||||||
.typography .left {
|
.typography .left {
|
||||||
|
|
@ -124,38 +149,104 @@ p.intro {
|
||||||
.typography .right {
|
.typography .right {
|
||||||
text-align: right
|
text-align: right
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* IMAGES
|
/* IMAGES
|
||||||
-------------------------------------------- */
|
-------------------------------------------- */
|
||||||
.typography img {
|
.typography img {
|
||||||
border: 5px solid #d7d7d7;
|
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;
|
height: auto;
|
||||||
|
background: transparent url(../images/ajax-loader.gif) no-repeat center center;
|
||||||
}
|
}
|
||||||
.typography img.left {
|
.typography img.left {
|
||||||
float: left;
|
float: left;
|
||||||
margin: 6px 20px 10px 0;
|
max-width: 50%;
|
||||||
|
margin: 5px 20px 10px 0;
|
||||||
}
|
}
|
||||||
.typography img.right {
|
.typography img.right {
|
||||||
float: right;
|
float: right;
|
||||||
margin: 6px 0 10px 20px;
|
max-width: 50%; /* Responsive width */
|
||||||
|
margin: 5px 0 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.typography img.leftAlone {
|
.typography img.leftAlone {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 100%;
|
margin-right: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
.typography img.center {
|
.typography img.center {
|
||||||
float: none;
|
float: none;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
display: block;
|
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;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -84,6 +84,7 @@ jQuery.noConflict();
|
||||||
searchBar.slideUp();
|
searchBar.slideUp();
|
||||||
menu.slideToggle(200);
|
menu.slideToggle(200);
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<footer class="footer" role="contentinfo">
|
<footer class="footer" role="contentinfo">
|
||||||
<div class="inner copy">
|
<div class="inner copy">
|
||||||
<div class="left">$SiteConfig.Title <span class="arrow">→</span> <% include Navigation %></div>
|
<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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
Loading…
Reference in New Issue