style.css

/* ---------- Overall Specifications ---------- */

body {
  line-height: 1.5;
  font-size: 87.5%;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
a:link,
a:visited {
  text-decoration: none;
}
a:hover,
a:active,
a:focus,
.link:hover,
.link:active,
.link:focus {
  text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1.0em 0 0.5em;
  font-weight: inherit;
}
h1 {
  font-size: 1.357em;
  color: #000;
}
h2 {
  font-size: 1.143em;
}
p {
  margin: 0 0 1.2em;
}
del {
  text-decoration: line-through;
}
tr.odd {
  background-color: #dddddd;
}
img {
  outline: 0;
}

/**
 * The generic monospace font family is listed before Courier new to avoid a
 * a bug in font-size rendering:
 * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing
 */
code,
pre,
kbd,
samp,
var {
  padding: 0 0.4em;
  font-size: 0.857em;
  font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New";
}
code {
  background-color: #f2f2f2;
  background-color: rgba(40, 40, 0, 0.06);
}
pre code,
pre kbd,
pre samp,
pre var,
kbd kbd,
kbd samp,
code var {
  font-size: 100%;
  background-color: transparent;
}
pre code,
pre samp,
pre var {
  padding: 0;
}
.description code {
  font-size: 1em;
}
kbd {
  background-color: #f2f2f2;
  border: 1px outset #575757;
  margin: 0 3px;
  color: #666;
  display: inline-block;
  padding: 0 6px;
  border-radius: 5px;
}
pre {
  background-color: #f2f2f2;
  background-color: rgba(40, 40, 0, 0.06);
  margin: 10px 0;
  overflow: hidden;
  padding: 15px;
  white-space: pre-wrap;
}


/* ------------------ Fonts ------------------ */

body,
#site-slogan,
.ui-widget,
.comment-form label,
.node-form label,
.node-form .description {
  font-family: Georgia, "Times New Roman", Times, serif;
}
#header,
#footer-wrapper,
#skip-link,
ul.contextual-links,
ul.links,
ul.primary,
.item-list .pager,
div.field-type-taxonomy-term-reference,
div.messages,
div.meta,
p.comment-time,
table,
.breadcrumb,
.link {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input,
textarea,
select,
.form-button,
a.button,
button {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}

/* ------------------ Reset Styles ------------------ */

blockquote {
  background: #f7f7f7;
  border-left: 1px solid #bbb;
  font-style: italic;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}
blockquote:before {
  color: #bbb;
  content: "\201C";
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.2em;
  vertical-align: -.4em;
}
blockquote:after {
  color: #bbb;
  content: "\201D";
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -.45em;
}
blockquote > p:first-child {
  display: inline;
}
a.feed-icon {
  display: inline-block;
  padding: 15px 0 0 0;
}
img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* ------------------ Table Styles ------------------ */

table {
  border: 0;
  border-spacing: 0;
  font-size: 0.857em;
  margin: 10px 0;
  width: 100%;
}
table table {
  font-size: 1em;
}
#footer-wrapper table {
  font-size: 1em;
}
table tr th {
  background: #757575;
  background: rgba(0, 0, 0, 0.51);
  border-bottom-style: none;
}
table tr th,
table tr th a,
table tr th a:hover {
  color: #fff;
  font-weight: bold;
}
table tbody tr th {
  vertical-align: top;
}
tr td,
tr th {
  padding: 4px 9px;
  border: 1px solid #fff;
  text-align: left; /* LTR */
}
#footer-wrapper tr td,
#footer-wrapper tr th {
  border-color: #555;
  border-color: rgba(255, 255, 255, 0.18);
}
tr.odd {
  background: #e4e4e4;
  background: rgba(0, 0, 0, 0.105);
}
tr,
tr.even {
  background: #efefef;
  background: rgba(0, 0, 0, 0.063);
}
table ul.links {
  margin: 0;
  padding: 0;
  font-size: 1em;
}
table ul.links li {
  padding: 0 1em 0 0;
}

/* ------------------ List Styles ------------------ */

.block ol,
.block ul {
  margin: 0;
  padding: 0 0 0.25em 1em; /* LTR */
}
.contextual-region .contextual .contextual-links a {
  font-size: 0.923em;
  text-shadow: 0 0 0 !important;
}
.item-list .pager {
  font-size: 0.929em;
}
.item-list .pager li {
  padding: 0;
}
.item-list .pager a {
  display: inline-block;
  padding: 10px 15px;
}
.item-list .pager .pager-first a {
  padding: 10px 10px 10px 0;
}
.item-list .pager .pager-previous a {
  padding: 10px 0;
}
.item-list .pager .pager-current {
  padding: 0 10px;
}
.item-list .pager .pager-next a,
.item-list .pager .pager-last a {
  padding: 10px 0 10px 10px;
}
ul.menu li {
  margin: 0;
}
.region-content ul,
.region-content ol {
  margin: 1em 0;
  padding: 0 0 0.25em 15px; /* LTR */
}
.item-list ul li {
  margin: 0;
  padding: 0.2em 0.5em 0 0; /* LTR */
}
ul.tips {
  padding: 0 0 0 1.25em; /* LTR */
}

/* ------------------ Header ------------------ */
#skip-link {
  left: 50%;
  margin-left: -5.25em;
  margin-top: 0;
  position: absolute;
  width: auto;
  z-index: 50;
}
#skip-link a,
#skip-link a:link,
#skip-link a:visited {
  background: #444;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: inline-block;
  font-size: 0.94em;
  line-height: 1.7;
  padding: 1px 10px 2px 10px;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
}
#skip-link a:hover,
#skip-link a:active,
#skip-link a:focus {
  outline: 0;
}
#logo {
  float: left; /* LTR */
  padding-left: 5px; /* LTR */
}

#name-and-slogan {
  float: left; /* LTR */
  margin: 0;
  padding: 5px 10px 8px;
}
#site-name {
  font-size: 1.6em;
  color: #686868;
  line-height: 1;
}
h1#site-name {
  margin: 0;
}
#site-name a {
  font-weight: normal;
}
#site-slogan {
  font-size: 0.929em;
  margin-top: 7px;
  word-spacing: 0.1em;
  font-style: italic;
}
/* Region header blocks. */
.region-header .block {
  font-size: 0.857em;
  float: left; /* LTR */
  margin: 0 10px;
  padding: 0;
}
.region-header .block > h2 {
  /* @extend .element-invisible */
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}
.region-header .block .content {
  margin: 0;
  padding: 0;
}
.region-header .block ul {
  margin: 0;
  padding: 0;
}
.region-header .block li {
  list-style: none;
  list-style-image: none;
  padding: 0;
}
.region-header .form-text {
  background: #fefefe;
  background: rgba(255, 255, 255, 0.7);
  border-color: #ccc;
  border-color: rgba(255, 255, 255, 0.3);
  margin-right: 2px; /* LTR */
  width: 120px;
}
.region-header .form-text:hover,
.region-header .form-text:focus,
.region-header .form-text:active {
  background: #fff;
  background: rgba(255, 255, 255, 0.8);
}
.region-header .form-required {
  color: #eee;
  color: rgba(255, 255, 255, 0.7);
}
/* Region header block menus. */
.region-header .block-menu {
  border: 1px solid;
  border-color: #eee;
  border-color: rgba(255, 255, 255, 0.2);
  padding: 0;
  width: 208px;
}
.region-header .block-menu li a {
  display: block;
  border-bottom: 1px solid;
  border-bottom-color: #eee;
  border-bottom-color: rgba(255, 255, 255, 0.2);
  padding: 3px 7px;
}
.region-header .block-menu li a:hover,
.region-header .block-menu li a:focus,
.region-header .block-menu li a:active {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.15);
}
.region-header .block-menu li.last a {
  border-bottom: 0;
}
/* User Login block in the header region */
.region-header #block-user-login {
  width: auto;
}
.region-header #block-user-login .content {
  margin-top: 2px;
}
.region-header #block-user-login .form-item {
  float: left; /* LTR */
  margin: 0;
  padding: 0;
}
.region-header #block-user-login div.item-list,
.region-header #block-user-login div.description {
  font-size: 0.916em;
  margin: 0;
}
.region-header #block-user-login div.item-list {
  clear: both;
}
.region-header #block-user-login div.description {
  display: inline;
}
.region-header #block-user-login .item-list ul {
  padding: 0;
  line-height: 1;
}
.region-header #block-user-login .item-list li {
  list-style: none;
  float: left; /* LTR */
  padding: 3px 0 1px;
}
.region-header #block-user-login .item-list li.last {
  padding-left: 0.5em; /* LTR */
}
.region-header #block-user-login .form-actions {
  margin: 4px 0 0;
  padding: 0;
  clear: both;
}
.region-header #block-user-login input.form-submit {
  border: 1px solid;
  border-color: #ccc;
  border-color: rgba(255, 255, 255, 0.5);
  background: #eee;
  background: rgba(255, 255, 255, 0.7);
  margin: 4px 0;
  padding: 3px 8px;
}
.region-header #block-user-login input.form-submit:hover,
.region-header #block-user-login input.form-submit:focus {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
}
/* Search block in region header. */
.region-header #block-search-form {
  width: 208px;
}
.region-header #block-search-form .form-text {
  width: 154px;
}
/* Language switcher block in region header. */
.region-header .block-locale ul li {
  display: inline;
  padding: 0 0.5em;
}

/* --------------- Main Menu ------------ */
#main-menu {
  clear: both;
}
#main-menu-links {
  font-size: 0.929em;
  margin: 0 5px;
  padding: 0;
  text-align: left; /* LTR */
}
#main-menu-links li {
  float: none;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#main-menu-links a {
  color: #333;
  background: #ccc;
  background: rgba(255, 255, 255, 0.7);
  float: none;
  display: block;
  text-decoration: none;
  text-shadow: 0 1px #eee;
  border-radius: 8px;
  margin-bottom: 4px;
  padding: 0.9em 0 0.9em 10px; /* LTR */
}
#main-menu-links a:hover,
#main-menu-links a:focus {
  background: #f6f6f2;
  background: rgba(255, 255, 255, 0.95);
}
#main-menu-links a:active {
  background: #b3b3b3;
  background: rgba(255, 255, 255, 1);
}
#main-menu-links li a.active {
  border-bottom: none;
}

/* --------------- Secondary Menu ------------ */

#secondary-menu-links {
  float: right; /* LTR */
  font-size: 0.929em;
  margin: 0 10px;
}
#secondary-menu-links  li{
  margin: 0;
  padding: 0;
}
#secondary-menu-links  a {
  display: inline-block;
  padding:  0.8em;
}
#secondary-menu-links a:hover,
#secondary-menu-links a:focus {
  text-decoration: underline;
}

/* ------------------- Main ------------------- */

#main {
  margin-top: 20px;
  margin-bottom: 40px;
}

/* ----------------- Featured ----------------- */

#featured {
  text-align: center;
  font-size: 1.2em;
  font-weight: normal;
  line-height: 1.4;
  padding: 20px 10px 45px;
  margin: 0;
  background: #f0f0f0;
  background: rgba(30, 50, 10, 0.08);
  border-bottom: 1px solid #e7e7e7;
  text-shadow: 1px 1px #fff;
}
#featured h2 {
  font-size: 1.2em;
  line-height: 1;
}
#featured p {
  margin: 0;
  padding: 0;
}

/* --------------- Highlighted ---------------- */

#highlighted {
  border-bottom: 1px solid #d3d7d9;
  font-size: 120%;
}

/* ------------------- Help ------------------- */

.region-help {
  border: 1px solid #d3d7d9;
  padding: 0 1.5em;
  margin-bottom: 30px;
}

/* ----------------- Content ------------------ */

.content {
  margin-top: 10px;
}
h1#page-title {
  font-size: 2em;
  line-height: 1;
}
#content h2 {
  margin-bottom: 2px;
  font-size: 1.429em;
  line-height: 1.4;
}
.node .content {
  font-size: 1.071em;
}
.view-mode-teaser .content {
  font-size: 1em;
}
.view-mode-teaser h2 {
  margin-top: 0;
  padding-top: 0.5em;
}
.view-mode-teaser h2 a {
  color: #181818;
}
.view-mode-teaser {
  border-bottom: 1px solid #d3d7d9;
  margin-bottom: 30px;
  padding-bottom: 15px;
}
.view-mode-teaser.sticky {
  background: #f9f9f9;
  background: rgba(0, 0, 0, 0.024);
  border: 1px solid #d3d7d9;
  padding: 0 15px 15px;
}
.view-mode-teaser .content {
  clear: none;
  line-height: 1.6;
}
.meta {
  font-size: 0.857em;
  color: #68696b;
  margin-bottom: -5px;
}
.submitted .field-name-field-user-picture img {
  float: left; /* LTR */
  margin: 1px 20px 0 0; /* LTR */
}
.field-type-taxonomy-term-reference {
  margin: 0 0 1.2em;
}
.field-type-taxonomy-term-reference .field-label {
  font-weight: normal;
  margin: 0;
  padding-right: 5px; /* LTR */
}
.field-type-taxonomy-term-reference .field-label,
.field-type-taxonomy-term-reference ul.links {
  font-size: 0.8em;
}
.view-mode-teaser .field-type-taxonomy-term-reference .field-label,
.view-mode-teaser .field-type-taxonomy-term-reference ul.links {
  font-size: 0.821em;
}
.field-type-taxonomy-term-reference ul.links {
  padding: 0;
  margin: 0;
  list-style: none;
}
.field-type-taxonomy-term-reference ul.links li {
  float: left; /* LTR */
  padding: 0 1em 0 0; /* LTR */
  white-space: nowrap;
}
.link-wrapper {
  text-align: right;
}
.field-type-image img,
.field-name-field-user-picture img {
  margin: 0 0 1em;
}
ul.links {
  color: #68696b;
  font-size: 0.821em;
}
.unpublished {
  margin: -20px -15px 0;
  padding: 20px 15px 0;
}
.unpublished .comment-text .comment-arrow {
  border-left: 1px solid #fff4f4;
  border-right: 1px solid #fff4f4;
}

/* ----------------- Comments ----------------- */

.comment h2.title {
  margin-bottom: 1em;
}
.comment .field-name-field-user-picture img {
  margin-left: 0; /* LTR */
}
.comment {
  margin-bottom: 20px;
  display: table;
  vertical-align: top;
}
.comment .attribution {
  display: table-cell;
  padding: 0 30px 0 0; /* LTR */
  vertical-align: top;
  overflow: hidden;
}
.comment .attribution img {
  margin: 0;
  border: 1px solid #d3d7d9;
}
.comment .attribution .username {
  white-space: nowrap;
}
.comment .submitted p {
  margin: 4px 0;
  font-size: 1.071em;
  line-height: 1.2;
}
.comment .submitted .comment-time {
  font-size: 0.786em;
  color: #68696b;
}
.comment .submitted .comment-permalink {
  font-size: 0.786em;
}
.comment .content {
  font-size: 0.929em;
  line-height: 1.6;
}
.comment .comment-arrow {
  background: url(../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */
  border-left: 1px solid;
  border-right: 1px solid;
  height: 40px;
  margin-left: -47px; /* LTR */
  margin-top: 10px;
  position: absolute;
  width: 20px;
}
.comment .comment-text {
  padding: 10px 25px;
  border: 1px solid #d3d7d9;
  display: table-cell;
  vertical-align: top;
  position: relative;
  width: 100%;
}
.comment .indented {
  margin-left: 40px; /* LTR */
}
.comment ul.links {
  padding: 0 0 0.25em 0;
}
.comment ul.links li {
  padding: 0 0.5em 0 0; /* LTR */
}
.comment.unpublished {
  margin-right: 5px; /* LTR */
  padding: 5px 2px 5px 5px; /* LTR */
}
.comment.unpublished .comment-text .comment-arrow {
  border-left: 1px solid #fff4f4;
  border-right: 1px solid #fff4f4;
}

/* ------------------ Sidebar ----------------- */
.sidebar .section {
  padding-top: 10px;
}
.sidebar .block {
  border: 1px solid;
  padding: 15px 20px;
  margin: 0 0 20px;
}
.sidebar h2 {
  margin: 0 0 0.5em;
  border-bottom: 1px solid #d6d6d6;
  padding-bottom: 5px;
  text-shadow: 0 1px 0 #fff;
  font-size: 1.071em;
  line-height: 1.2;
}
.sidebar .block .content {
  font-size: 0.914em;
  line-height: 1.4;
}
.sidebar tbody {
  border: none;
}
.sidebar tr.even,
.sidebar tr.odd {
  background: none;
  border-bottom: 1px solid #d6d6d6;
}

/* ----------------- Triptych ----------------- */

#triptych-wrapper {
  background-color: #f0f0f0;
  background: rgba(30, 50, 10, 0.08);
  border-top: 1px solid #e7e7e7;
}
#triptych h2 {
  color: #000;
  font-size: 1.4em;
  margin-bottom: 0.6em;
  text-shadow: 0 1px 0 #fff;
  text-align: center;
  line-height: 1;
}
#triptych .block {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid #dfdfdf;
  line-height: 1.3;
}
#triptych .block.last {
  border-bottom: none;
}
#triptych .block ul li,
#triptych .block ol li {
  list-style: none;
}
#triptych .block ul,
#triptych .block ol {
  padding-left: 0;
}
#triptych #block-user-login .form-text {
  width: 185px;
}
#triptych #block-user-online p {
  margin-bottom: 0;
}
#triptych #block-node-syndicate h2 {
  overflow: hidden;
  width: 0;
  height: 0;
}
#triptych-last #block-node-syndicate {
  text-align: right;
}
#triptych #block-search-form .form-type-search input {
  width: 185px;
}
#triptych-middle #block-system-powered-by {
  text-align: center;
}
#triptych-last #block-system-powered-by {
  text-align: right;
}

/* ------------------ Footer ------------------ */

#footer-wrapper {
  color: #c0c0c0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.857em;
}
#footer-wrapper a {
  color: #fcfcfc;
  color: rgba(255, 255, 255, 0.8);
}
#footer-wrapper a:hover,
#footer-wrapper a:focus {
  color: #fefefe;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}
#footer-wrapper .block {
  margin: 20px 0;
  border: 1px solid #444;
  border-color: rgba(255, 255, 255, 0.1);
  padding: 10px;
}
#footer-columns .block-menu,
#footer .block {
  margin: 0;
  padding: 0;
  border: none;
}
#footer .block {
  margin: 0.5em 0;
}
#footer .block .content {
  padding: 0.5em 0;
  margin-top: 0;
}
#footer .block > h2 {
  /* @extend .element-invisible */
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}
#footer .block h2 {
  margin: 0;
}
#footer-columns h2 {
  border-bottom: 1px solid #555;
  border-color: rgba(255, 255, 255, 0.15);
  font-size: 1em;
  margin-bottom: 0;
  padding-bottom: 3px;
  text-transform: uppercase;
}
#footer-columns .content {
  margin-top: 0;
}
#footer-columns p {
  margin-top: 1em;
}
#footer-columns .content ul {
  list-style: none;
  padding-left: 0; /* LTR */
  margin-left: 0;
}
#footer-columns .content li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer-columns .content li a {
  display: block;
  border-bottom: 1px solid #555;
  border-color: rgba(255, 255, 255, 0.15);
  line-height: 1.2;
  padding: 0.8em 2px 0.8em 20px; /* LTR */
  text-indent: -15px;
}
#footer-columns .content li a:hover,
#footer-columns .content li a:focus {
  background-color: #1f1f21;
  background-color: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
#footer {
  letter-spacing: 0.2px;
  margin-top: 30px;
  border-top: 1px solid #555;
  border-color: rgba(255, 255, 255, 0.15);
}
#footer .region {
  margin-top: 20px;
}
#footer .block {
  clear: both;
}
#footer ul,
#footer li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#footer li a {
  float: left; /* LTR */
  padding: 0 12px;
  display: block;
  border-right: 1px solid #555; /* LTR */
  border-color: rgba(255, 255, 255, 0.15);
}
#footer li.first a {
  padding-left: 0; /* LTR */
}
#footer li.last a {
  padding-right: 0; /* LTR */
  border-right: none; /* LTR */
}
#footer-wrapper tr.odd {
  background-color: transparent;
}
#footer-wrapper tr.even {
  background-color: #2c2c2c;
  background-color: rgba(0, 0, 0, 0.15);
}

/* --------------- System Tabs  --------------- */

div.tabs {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
}
.tabs ul.primary {
  border-collapse: collapse;
  height: auto;
  line-height: normal;
  padding: 0 3px;
  margin: 0;
  overflow: hidden;
  border: none;
  background: transparent url(../images/tabs-border.png) repeat-x left bottom;
  white-space: nowrap;
}
.tabs ul.primary li {
  display: block;
  float: left; /* LTR */
  vertical-align: bottom;
  margin: 0 5px 0 0; /* LTR */
}
.tabs ul.primary li.active a {
  border-bottom: 1px solid #ffffff;
}
.tabs ul.primary li a {
  color: #000;
  background-color: #ededed;
  border-color: #bbb;
  border-style: solid solid none solid;
  border-width: 1px;
  height: 1.8em;
  line-height: 1.9;
  display: block;
  font-size: 0.929em;
  float: left; /* not LTR */
  padding: 0 10px 3px;
  margin: 0;
  text-shadow: 0 1px 0 #fff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tabs ul.primary li.active a {
  background-color: #ffffff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
}
.tabs ul.secondary {
  border-bottom: none;
  margin: 5px;
  padding: 0.5em 0;
}
.tabs ul.secondary li {
  border-right: 1px solid #ccc; /* LTR */
  display: block;
  float: left; /* LTR */
  margin: 0;
  padding: 0 1em;
}
.tabs ul.secondary li:last-child {
  border-right: none; /* LTR */
}
.tabs ul.secondary li:first-child {
  padding-left: 0; /* LTR */
}
.tabs ul.secondary li a {
  display: inline;
  padding: 0.25em 0.5em;
  text-decoration: none;
}
.tabs ul.secondary li a.active {
  background: #f2f2f2;
  border-bottom: none;
  border-radius: 5px;
}

/* ---------------- Messages  ----------------- */

#messages {
  padding: 20px 0 5px;
  margin: 0 auto;
}
.featured #messages {
  background: #f0f0f0;
  background: rgba(30, 50, 10, 0.08);
}
div.messages {
  margin: 8px 15px;
}

/* -------------- Breadcrumbs   -------------- */

.breadcrumb {
  font-size: 0.929em;
}

/* -------------- User Profile   -------------- */

.profile .field-name-field-user-picture {
  float: none;
}

/* -------------- Password Meter  ------------- */

.confirm-parent,
.password-parent {
  width: 34em;
}
.password-parent,
div.form-item div.password-suggestions {
  position: relative;
}
.password-strength-text,
.password-strength-title,
div.password-confirm {
  font-size: 0.82em;
}
.password-strength-text {
  margin-top: 0.2em;
}
div.password-confirm {
  margin-top: 2.2em;
  width: 20.73em;
}

/* ---------------- Buttons    ---------------- */

.button {
  background: #fff url(../images/buttons.png) 0 0 repeat-x;
  border: 1px solid #e4e4e4;
  border-bottom: 1px solid #b4b4b4;
  border-left-color: #d2d2d2;
  border-right-color: #d2d2d2;
  color: #3a3a3a;
  cursor: pointer;
  font-size: 0.929em;
  font-weight: normal;
  text-align: center;
  padding: 4px 17px;
  border-radius: 15px;
}
.button:hover,
.button:focus,
.button:active {
  text-decoration: none;
  color: #5a5a5a;
  background: #dedede;
}

/* -------------- Form Elements   ------------- */

details,
fieldset,
.filter-wrapper {
  border-radius: 4px;
}
.filter-wrapper {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.filter-help a {
  font-size: 0.857em;
}
.filter-wrapper .form-item label {
  margin-right: 10px;
}
summary {
  background: #dbdbdb;
  color: #3b3b3b;
  text-shadow: 0 1px 0 #fff;
}
details summary a {
  color: #3b3b3b;
}
details summary a:hover,
details summary a:focus,
details summary a:active {
  color: #000;
}
details .details-description {
  font-style: italic;
}
input {
  margin: 2px 0;
  padding: 4px;
}
input,
textarea {
  font-size: 0.929em;
}
textarea {
  line-height: 1.5;
}
textarea.form-textarea,
select.form-select {
  padding: 4px;
}
input.form-text,
input.form-tel,
input.form-email,
input.form-url,
input.form-search,
input.form-number,
input.form-color,
textarea.form-textarea,
select.form-select {
  border: 1px solid #ccc;
}
input.form-submit:hover,
input.form-submit:focus {
  background: #dedede;
}
.password-suggestions ul li {
  margin-left: 1.2em; /* LTR */
}
.form-item label {
  font-size: 0.929em;
}
.form-type-radio label,
.form-type-checkbox label {
  margin-left: 4px;
}
.form-type-radio .description,
.form-type-checkbox .description {
  margin-left: 2px;
}
.form-actions {
  padding-top: 10px;
}

/* Node Form */
#edit-body {
  margin-bottom: 2em;
}

.node-form .form-wrapper {
  margin-bottom: 2em;
}

/* Contact Form */
.contact-form #edit-name {
  width: 75%;
  border-radius: 4px;
}
.contact-form #edit-mail {
  width: 75%;
  border-radius: 4px;
}
.contact-form #edit-subject {
  width: 75%;
  border-radius: 4px;
}
.contact-form #edit-message {
  width: 76.3%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Disabled form elements */
.form-disabled input,
.form-disabled select,
.form-disabled textarea,
.form-button-disabled,
.form-button-disabled:hover,
.form-button-disabled:focus,
.form-button-disabled:active {
  background: #ededed;
  border-color: #bbb;
  color: #717171;
}
.image-button-disabled,
.image-button-disabled:hover,
.image-button-disabled:focus,
.image-button-disabled:active {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: .5;
}
.form-disabled label {
  color: #717171;
}

/* Animated throbber */
.js input.form-autocomplete {
  background-position: 100% 4px; /* LTR */
}
.js input.throbbing {
  background-position: 100% -16px; /* LTR */
}

/* Comment form */
.comment-form label {
  float: left; /* LTR */
  font-size: 0.929em;
  width: 120px;
}
.comment-form input,
.comment-form .form-select {
  margin: 0;
  border-radius: 4px;
}
.comment-form .form-type-textarea label {
  float: none;
}
.comment-form .form-item,
.comment-form .form-radios,
.comment-form .form-type-checkbox,
.comment-form .form-select {
  margin-bottom: 10px;
  overflow: hidden;
}
.comment-form .form-type-checkbox,
.comment-form .form-radios {
  margin-left: 120px; /* LTR */
}
.comment-form .form-type-checkbox label,
.comment-form .form-radios label {
  float: none;
  margin-top: 0;
}
.comment-form input.form-file {
  width: auto;
}
.no-sidebars .comment-form .form-text {
  width: 800px;
}
.one-sidebar .comment-form .form-text {
  width: 500px;
}
.two-sidebars .comment-form .form-text {
  width: 320px;
}
.comment-form .form-item .description {
  font-size: 0.786em;
  line-height: 1.2;
  margin-left: 120px; /* LTR */
}
#content h2.comment-form {
  margin-bottom: 0.5em;
}
.comment-form .form-textarea {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.comment-form details.filter-wrapper .details-wrapper,
.comment-form .text-format-wrapper .form-item {
  margin-top: 0;
  margin-bottom: 0;
}
.filter-wrapper label {
  width: auto;
  float: none;
}
.filter-wrapper .form-select {
  min-width: 120px;
}
.comment-form details.filter-wrapper .tips {
  font-size: 0.786em;
}
#comment-body-add-more-wrapper .form-type-textarea label {
  margin-bottom: 0.4em;
}
#edit-actions input {
  margin-right: 0.6em; /* LTR */
}

/* -------------- Other Overrides ------------- */

div.password-suggestions {
  border: 0;
}
.ui-widget-overlay {
  background: #222222;
  opacity: 0.7;
}
#forum .name {
  font-size: 1.083em;
}
#forum .description {
  font-size: 1em;
}

/* --------------- Search Form ---------------- */

#block-search-form {
  padding-bottom: 7px;
}
#block-search-form .content {
  margin-top: 0;
}
#search-form input[type="search"],
#block-search-form input[type="search"] {
  box-sizing: border-box;
  padding: 4px;
  -webkit-appearance: textfield;
}
#search-form input[type="search"]::-webkit-search-decoration,
#block-search-form input[type="search"]::-webkit-search-decoration {
  display: none;
}
#search-form input#edit-keys,
#block-search-form .form-item-search-block-form input {
  float: left; /* LTR */
  font-size: 1em;
  margin-right: 5px;
  width: 9em;
}
#search-block-form input.form-submit,
#search-form input.form-submit {
  margin-left: 0;
  margin-right: 0;
  height: 25px;
  width: 34px;
  padding: 0;
  cursor: pointer;
  text-indent: -9999px;
  border-color: #e4e4e4 #d2d2d2 #b4b4b4;
  background: url(../images/search-button.png) no-repeat center top;
  overflow: hidden;
}
#search-block-form input.form-submit:hover,
#search-block-form input.form-submit:focus,
#search-form input.form-submit:hover,
#search-form input.form-submit:focus {
  background-position: center bottom;
}
#search-form .form-item-keys label {
  display: block;
}

/* --------------- Search Results ---------------- */
ol.search-results {
  padding-left: 0;
  list-style-position: inside;
}
.search-results li {
  border-bottom: 1px solid #d3d7d9;
  padding-bottom: 0.4285em;
  margin-bottom: 0.5em;
}
.search-results li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1em;
}
.search-results .search-snippet-info {
  padding-left: 0;
}

/* -------------- Shortcut Links -------------- */

.shortcut-wrapper {
  margin: 2.2em 0 1.1em 0; /* Same as usual h1#page-title margin. */
}
.shortcut-wrapper h1#page-title {
  float: left; /* LTR */
  margin: 0;
}
div.add-or-remove-shortcuts {
  padding-top: 0.9em;
}
.overlay div.add-or-remove-shortcuts {
  padding-top: 0.8em;
}

/* ---------- Admin-specific Theming ---------- */

.page-admin #content img {
  margin-right: 15px; /* LTR */
}
.page-admin #content .simpletest-image img {
  margin: 0;
}
.page-admin-structure-block-demo .block-region {
  background: #ffff66;
  border: 1px dotted #9f9e00;
  color: #000;
  font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  margin: 5px;
  padding: 5px;
  text-align: center;
  text-shadow: none;
}
.page-admin-structure-block-demo #featured .block-region {
  font-size: 0.55em;
}
.page-admin-structure-block-demo #header .block-region {
  width: 500px;
}
.page-admin #admin-dblog img {
  margin: 0 5px;
}
/* Fix spacing when Seven is used in the overlay. */
#system-theme-settings details {
  padding: 0;
}
#system-theme-settings details summary {
  margin-top: 0;
}
/* Configuration. */
div.admin .right,
div.admin .left {
  width: 49%;
  margin: 0;
}
div.admin-panel {
  background: #fbfbfb;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 0 5px 5px;
}
div.admin-panel h3 {
  margin: 16px 7px;
}
div.admin-panel dt {
  border-top: 1px solid #ccc;
  padding: 7px 0 0;
}
div.admin-panel dd {
  margin: 0 0 10px;
}
div.admin-panel .description {
  margin: 0 0 14px 7px;
}

/* ---------- Overlay layout styles ----------- */

.overlay #main,
.overlay #content {
  width: auto;
  float: none;
}
.overlay #page {
  padding: 0 2em;
}
.overlay .region-page-top,
.overlay #header,
.overlay #page-title,
.overlay #featured,
.overlay #sidebar-first,
.overlay #triptych-wrapper,
.overlay #footer-wrapper {
  display: none;
}
.overlay-processed .field-type-image {
  display: block;
  float: none;
}
.overlay #messages {
  width: auto;
}

/* ---------- book ----------- */
.book-navigation .menu {
  border-top: 1px solid #d6d6d6;
}
.book-navigation .book-pager {
  border-bottom: 1px solid #d6d6d6;
  border-top: 1px solid #d6d6d6;
  margin: 0;
}

/* ---------- Dropbutton ----------- */
.js .dropbutton-widget {
  background-color: white;
  border-radius: 5px;
}
.js .dropbutton-widget:hover {
  background-color: #f8f8f8;
  border-color: #b8b8b8;
}
.js .dropbutton-multiple.open .dropbutton-widget:hover {
  background-color: white;
}

/* ----------- media queries ------------------------------- */

@media all and (min-width: 461px) and (max-width: 900px) {
 /* ------------ Header and Menus -------------------------- */

 .region-header {
    margin: .5em 5px .75em;
  }
  #logo {
    padding: 5px 0 0 5px; /* LTR */
  }
  #name-and-slogan {
    padding: 10px 10px 8px;
  }
  #main-menu-links {
    margin: 0 5px;
    padding: 0;
    text-align: center;
  }
  #main-menu-links li {
    float: left; /* LTR */
    margin-right: 5px; /* LTR */
    padding: 0;
    display: inline-block;
    width: 32.75%;
  }
  #main-menu-links li:nth-child(3n) {
    margin-right: -5px; /* LTR */
  }
  #main-menu-links a {
    float: none;
    display: block;
    border-radius: 8px;
    margin-bottom: 5px;
    padding: 0.9em 5px;
  }
}

@media all and (min-width: 901px) {

  .region-header {
    margin: 1em 5px 1.5em;
  }
  #logo {
    padding: 15px 15px 15px 10px; /* LTR */
  }
  #name-and-slogan {
    padding: 26px 0 0;
    margin: 0 0 30px 15px; /* LTR */
  }
  #site-name {
    font-size: 1.821em;
  }
  #main-menu-links {
    font-size: 0.929em;
    margin: 0;
    padding: 0 15px;
  }
  #main-menu-links li {
    float: left; /* LTR */
    list-style: none;
    padding: 0 1px;
    margin: 0 1px;
    width: auto;
  }
  #main-menu-links a {
    float: left; /* LTR */
    padding: 0.7em 0.8em;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .featured #main-menu-links li a:active,
  .featured #main-menu-links li a.active {
    background: #f0f0f0;
    background: rgba(240, 240, 240, 1.0);
  }
}

@media all and (min-width: 520px) {

  /* ----------------- Featured ----------------- */
  #featured {
    font-size: 1.643em;
  }
  #featured h2 {
    font-size: 1.174em;
  }

  /* ------------------ Triptych ----------------- */
  #triptych h2 {
    font-size: 1.714em;
    margin-bottom: 0.9em;
  }
  #triptych .block {
    margin-bottom: 2em;
    padding-bottom: 2em;
  }
}

/**
 * Responsive tables.
 */
@media screen and (max-width: 37.5em) { /* 600px */
  th.priority-low,
  td.priority-low,
  th.priority-medium,
  td.priority-medium {
    display: none;
  }
}
@media screen and (max-width: 60em) { /* 920px */
  th.priority-low,
  td.priority-low {
    display: none;
  }
}

/* ---------- Views styling ---------- */

/* @group Lists */

.views-display-top .secondary .action-list {
  padding-left: 0; /* LTR */
}

/* @end */

/* @group Attachment details tabs
 *
 * The tabs that switch between sections
 */

.views-displays .region-content .secondary,
.views-displays .region-content .secondary {
  padding-bottom: 0;
  padding-left: 0;
}

.views-displays .secondary a {
  font-size: smaller;
}

.views-displays .secondary > li a {
  border-radius: 5px;
}

.views-displays .secondary > li.open a {
  border-radius: 5px 5px 0 0;
}

.views-displays .secondary .open > a:hover {
  color: #0071B3;
}

.views-displays .secondary input.form-submit {
  font-size: smaller;
}

/* @end */

/* @group Modal dialog box
 *
 * The contents of the popup dialog on the views edit form.
 */

.views-filterable-options .even .form-type-checkbox {
  background-color: #F9F9F9;
}

.views-ui-dialog .ui-dialog-titlebar-close,
.views-ui-dialog #views-ajax-title,
.views-ui-dialog .views-override,
.views-ui-dialog .form-buttons {
  background-color: #f6f6f6;
}

.views-ui-dialog a {
  color: #0071b3;
}

.views-ui-dialog a:hover,
.views-ui-dialog a:focus {
  color: #018fe2;
}

/* @end */

.views-display-column .details-wrapper {
  margin-top: 0;
}

.views-display-column details summary {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  line-height: inherit;
  position: relative;
  text-indent: 0;
  text-shadow: none;
  top: 3px;
}

.views-display-columns details {
  position: inherit;
}

.views-display-columns details summary {
  padding: 0 0 4px 2px; /* LTR */
}

.views-display-columns a.fieldset-title {
  color: #0071B3;
}

.views-display-columns a.fieldset-title:hover {
  color: #018FE2;
}

/* @group Dropbutton */

.views-ui-display-tab-actions .dropbutton input {
  color: #0071B3;
}

.views-ui-display-tab-actions .dropbutton input:hover,
.views-ui-display-tab-actions .dropbutton input:focus {
  color: #018FE2;
}

.views-ui-display-tab-actions .dropbutton input.form-submit {
  margin-right: 0;
  margin-top: 0;
}

/* @end */

File

drupal/core/themes/bartik/css/style.css
View source
  1. /* ---------- Overall Specifications ---------- */
  2. body {
  3. line-height: 1.5;
  4. font-size: 87.5%;
  5. word-wrap: break-word;
  6. margin: 0;
  7. padding: 0;
  8. border: 0;
  9. outline: 0;
  10. }
  11. a:link,
  12. a:visited {
  13. text-decoration: none;
  14. }
  15. a:hover,
  16. a:active,
  17. a:focus,
  18. .link:hover,
  19. .link:active,
  20. .link:focus {
  21. text-decoration: underline;
  22. }
  23. h1,
  24. h2,
  25. h3,
  26. h4,
  27. h5,
  28. h6 {
  29. margin: 1.0em 0 0.5em;
  30. font-weight: inherit;
  31. }
  32. h1 {
  33. font-size: 1.357em;
  34. color: #000;
  35. }
  36. h2 {
  37. font-size: 1.143em;
  38. }
  39. p {
  40. margin: 0 0 1.2em;
  41. }
  42. del {
  43. text-decoration: line-through;
  44. }
  45. tr.odd {
  46. background-color: #dddddd;
  47. }
  48. img {
  49. outline: 0;
  50. }
  51. /**
  52. * The generic monospace font family is listed before Courier new to avoid a
  53. * a bug in font-size rendering:
  54. * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing
  55. */
  56. code,
  57. pre,
  58. kbd,
  59. samp,
  60. var {
  61. padding: 0 0.4em;
  62. font-size: 0.857em;
  63. font-family: Menlo, Consolas, "Andale Mono", "Lucida Console", "Nimbus Mono L", "DejaVu Sans Mono", monospace, "Courier New";
  64. }
  65. code {
  66. background-color: #f2f2f2;
  67. background-color: rgba(40, 40, 0, 0.06);
  68. }
  69. pre code,
  70. pre kbd,
  71. pre samp,
  72. pre var,
  73. kbd kbd,
  74. kbd samp,
  75. code var {
  76. font-size: 100%;
  77. background-color: transparent;
  78. }
  79. pre code,
  80. pre samp,
  81. pre var {
  82. padding: 0;
  83. }
  84. .description code {
  85. font-size: 1em;
  86. }
  87. kbd {
  88. background-color: #f2f2f2;
  89. border: 1px outset #575757;
  90. margin: 0 3px;
  91. color: #666;
  92. display: inline-block;
  93. padding: 0 6px;
  94. border-radius: 5px;
  95. }
  96. pre {
  97. background-color: #f2f2f2;
  98. background-color: rgba(40, 40, 0, 0.06);
  99. margin: 10px 0;
  100. overflow: hidden;
  101. padding: 15px;
  102. white-space: pre-wrap;
  103. }
  104. /* ------------------ Fonts ------------------ */
  105. body,
  106. #site-slogan,
  107. .ui-widget,
  108. .comment-form label,
  109. .node-form label,
  110. .node-form .description {
  111. font-family: Georgia, "Times New Roman", Times, serif;
  112. }
  113. #header,
  114. #footer-wrapper,
  115. #skip-link,
  116. ul.contextual-links,
  117. ul.links,
  118. ul.primary,
  119. .item-list .pager,
  120. div.field-type-taxonomy-term-reference,
  121. div.messages,
  122. div.meta,
  123. p.comment-time,
  124. table,
  125. .breadcrumb,
  126. .link {
  127. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  128. }
  129. input,
  130. textarea,
  131. select,
  132. .form-button,
  133. a.button,
  134. button {
  135. font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  136. }
  137. /* ------------------ Reset Styles ------------------ */
  138. blockquote {
  139. background: #f7f7f7;
  140. border-left: 1px solid #bbb;
  141. font-style: italic;
  142. margin: 1.5em 10px;
  143. padding: 0.5em 10px;
  144. }
  145. blockquote:before {
  146. color: #bbb;
  147. content: "\201C";
  148. font-size: 3em;
  149. line-height: 0.1em;
  150. margin-right: 0.2em;
  151. vertical-align: -.4em;
  152. }
  153. blockquote:after {
  154. color: #bbb;
  155. content: "\201D";
  156. font-size: 3em;
  157. line-height: 0.1em;
  158. vertical-align: -.45em;
  159. }
  160. blockquote > p:first-child {
  161. display: inline;
  162. }
  163. a.feed-icon {
  164. display: inline-block;
  165. padding: 15px 0 0 0;
  166. }
  167. img {
  168. max-width: 100%;
  169. height: auto;
  170. border: 0;
  171. }
  172. /* ------------------ Table Styles ------------------ */
  173. table {
  174. border: 0;
  175. border-spacing: 0;
  176. font-size: 0.857em;
  177. margin: 10px 0;
  178. width: 100%;
  179. }
  180. table table {
  181. font-size: 1em;
  182. }
  183. #footer-wrapper table {
  184. font-size: 1em;
  185. }
  186. table tr th {
  187. background: #757575;
  188. background: rgba(0, 0, 0, 0.51);
  189. border-bottom-style: none;
  190. }
  191. table tr th,
  192. table tr th a,
  193. table tr th a:hover {
  194. color: #fff;
  195. font-weight: bold;
  196. }
  197. table tbody tr th {
  198. vertical-align: top;
  199. }
  200. tr td,
  201. tr th {
  202. padding: 4px 9px;
  203. border: 1px solid #fff;
  204. text-align: left; /* LTR */
  205. }
  206. #footer-wrapper tr td,
  207. #footer-wrapper tr th {
  208. border-color: #555;
  209. border-color: rgba(255, 255, 255, 0.18);
  210. }
  211. tr.odd {
  212. background: #e4e4e4;
  213. background: rgba(0, 0, 0, 0.105);
  214. }
  215. tr,
  216. tr.even {
  217. background: #efefef;
  218. background: rgba(0, 0, 0, 0.063);
  219. }
  220. table ul.links {
  221. margin: 0;
  222. padding: 0;
  223. font-size: 1em;
  224. }
  225. table ul.links li {
  226. padding: 0 1em 0 0;
  227. }
  228. /* ------------------ List Styles ------------------ */
  229. .block ol,
  230. .block ul {
  231. margin: 0;
  232. padding: 0 0 0.25em 1em; /* LTR */
  233. }
  234. .contextual-region .contextual .contextual-links a {
  235. font-size: 0.923em;
  236. text-shadow: 0 0 0 !important;
  237. }
  238. .item-list .pager {
  239. font-size: 0.929em;
  240. }
  241. .item-list .pager li {
  242. padding: 0;
  243. }
  244. .item-list .pager a {
  245. display: inline-block;
  246. padding: 10px 15px;
  247. }
  248. .item-list .pager .pager-first a {
  249. padding: 10px 10px 10px 0;
  250. }
  251. .item-list .pager .pager-previous a {
  252. padding: 10px 0;
  253. }
  254. .item-list .pager .pager-current {
  255. padding: 0 10px;
  256. }
  257. .item-list .pager .pager-next a,
  258. .item-list .pager .pager-last a {
  259. padding: 10px 0 10px 10px;
  260. }
  261. ul.menu li {
  262. margin: 0;
  263. }
  264. .region-content ul,
  265. .region-content ol {
  266. margin: 1em 0;
  267. padding: 0 0 0.25em 15px; /* LTR */
  268. }
  269. .item-list ul li {
  270. margin: 0;
  271. padding: 0.2em 0.5em 0 0; /* LTR */
  272. }
  273. ul.tips {
  274. padding: 0 0 0 1.25em; /* LTR */
  275. }
  276. /* ------------------ Header ------------------ */
  277. #skip-link {
  278. left: 50%;
  279. margin-left: -5.25em;
  280. margin-top: 0;
  281. position: absolute;
  282. width: auto;
  283. z-index: 50;
  284. }
  285. #skip-link a,
  286. #skip-link a:link,
  287. #skip-link a:visited {
  288. background: #444;
  289. background: rgba(0, 0, 0, 0.6);
  290. color: #fff;
  291. display: inline-block;
  292. font-size: 0.94em;
  293. line-height: 1.7;
  294. padding: 1px 10px 2px 10px;
  295. text-decoration: none;
  296. border-radius: 0 0 10px 10px;
  297. }
  298. #skip-link a:hover,
  299. #skip-link a:active,
  300. #skip-link a:focus {
  301. outline: 0;
  302. }
  303. #logo {
  304. float: left; /* LTR */
  305. padding-left: 5px; /* LTR */
  306. }
  307. #name-and-slogan {
  308. float: left; /* LTR */
  309. margin: 0;
  310. padding: 5px 10px 8px;
  311. }
  312. #site-name {
  313. font-size: 1.6em;
  314. color: #686868;
  315. line-height: 1;
  316. }
  317. h1#site-name {
  318. margin: 0;
  319. }
  320. #site-name a {
  321. font-weight: normal;
  322. }
  323. #site-slogan {
  324. font-size: 0.929em;
  325. margin-top: 7px;
  326. word-spacing: 0.1em;
  327. font-style: italic;
  328. }
  329. /* Region header blocks. */
  330. .region-header .block {
  331. font-size: 0.857em;
  332. float: left; /* LTR */
  333. margin: 0 10px;
  334. padding: 0;
  335. }
  336. .region-header .block > h2 {
  337. /* @extend .element-invisible */
  338. position: absolute !important;
  339. clip: rect(1px, 1px, 1px, 1px);
  340. overflow: hidden;
  341. height: 1px;
  342. }
  343. .region-header .block .content {
  344. margin: 0;
  345. padding: 0;
  346. }
  347. .region-header .block ul {
  348. margin: 0;
  349. padding: 0;
  350. }
  351. .region-header .block li {
  352. list-style: none;
  353. list-style-image: none;
  354. padding: 0;
  355. }
  356. .region-header .form-text {
  357. background: #fefefe;
  358. background: rgba(255, 255, 255, 0.7);
  359. border-color: #ccc;
  360. border-color: rgba(255, 255, 255, 0.3);
  361. margin-right: 2px; /* LTR */
  362. width: 120px;
  363. }
  364. .region-header .form-text:hover,
  365. .region-header .form-text:focus,
  366. .region-header .form-text:active {
  367. background: #fff;
  368. background: rgba(255, 255, 255, 0.8);
  369. }
  370. .region-header .form-required {
  371. color: #eee;
  372. color: rgba(255, 255, 255, 0.7);
  373. }
  374. /* Region header block menus. */
  375. .region-header .block-menu {
  376. border: 1px solid;
  377. border-color: #eee;
  378. border-color: rgba(255, 255, 255, 0.2);
  379. padding: 0;
  380. width: 208px;
  381. }
  382. .region-header .block-menu li a {
  383. display: block;
  384. border-bottom: 1px solid;
  385. border-bottom-color: #eee;
  386. border-bottom-color: rgba(255, 255, 255, 0.2);
  387. padding: 3px 7px;
  388. }
  389. .region-header .block-menu li a:hover,
  390. .region-header .block-menu li a:focus,
  391. .region-header .block-menu li a:active {
  392. text-decoration: none;
  393. background: rgba(255, 255, 255, 0.15);
  394. }
  395. .region-header .block-menu li.last a {
  396. border-bottom: 0;
  397. }
  398. /* User Login block in the header region */
  399. .region-header #block-user-login {
  400. width: auto;
  401. }
  402. .region-header #block-user-login .content {
  403. margin-top: 2px;
  404. }
  405. .region-header #block-user-login .form-item {
  406. float: left; /* LTR */
  407. margin: 0;
  408. padding: 0;
  409. }
  410. .region-header #block-user-login div.item-list,
  411. .region-header #block-user-login div.description {
  412. font-size: 0.916em;
  413. margin: 0;
  414. }
  415. .region-header #block-user-login div.item-list {
  416. clear: both;
  417. }
  418. .region-header #block-user-login div.description {
  419. display: inline;
  420. }
  421. .region-header #block-user-login .item-list ul {
  422. padding: 0;
  423. line-height: 1;
  424. }
  425. .region-header #block-user-login .item-list li {
  426. list-style: none;
  427. float: left; /* LTR */
  428. padding: 3px 0 1px;
  429. }
  430. .region-header #block-user-login .item-list li.last {
  431. padding-left: 0.5em; /* LTR */
  432. }
  433. .region-header #block-user-login .form-actions {
  434. margin: 4px 0 0;
  435. padding: 0;
  436. clear: both;
  437. }
  438. .region-header #block-user-login input.form-submit {
  439. border: 1px solid;
  440. border-color: #ccc;
  441. border-color: rgba(255, 255, 255, 0.5);
  442. background: #eee;
  443. background: rgba(255, 255, 255, 0.7);
  444. margin: 4px 0;
  445. padding: 3px 8px;
  446. }
  447. .region-header #block-user-login input.form-submit:hover,
  448. .region-header #block-user-login input.form-submit:focus {
  449. background: #fff;
  450. background: rgba(255, 255, 255, 0.9);
  451. }
  452. /* Search block in region header. */
  453. .region-header #block-search-form {
  454. width: 208px;
  455. }
  456. .region-header #block-search-form .form-text {
  457. width: 154px;
  458. }
  459. /* Language switcher block in region header. */
  460. .region-header .block-locale ul li {
  461. display: inline;
  462. padding: 0 0.5em;
  463. }
  464. /* --------------- Main Menu ------------ */
  465. #main-menu {
  466. clear: both;
  467. }
  468. #main-menu-links {
  469. font-size: 0.929em;
  470. margin: 0 5px;
  471. padding: 0;
  472. text-align: left; /* LTR */
  473. }
  474. #main-menu-links li {
  475. float: none;
  476. list-style: none;
  477. margin: 0;
  478. padding: 0;
  479. width: 100%;
  480. }
  481. #main-menu-links a {
  482. color: #333;
  483. background: #ccc;
  484. background: rgba(255, 255, 255, 0.7);
  485. float: none;
  486. display: block;
  487. text-decoration: none;
  488. text-shadow: 0 1px #eee;
  489. border-radius: 8px;
  490. margin-bottom: 4px;
  491. padding: 0.9em 0 0.9em 10px; /* LTR */
  492. }
  493. #main-menu-links a:hover,
  494. #main-menu-links a:focus {
  495. background: #f6f6f2;
  496. background: rgba(255, 255, 255, 0.95);
  497. }
  498. #main-menu-links a:active {
  499. background: #b3b3b3;
  500. background: rgba(255, 255, 255, 1);
  501. }
  502. #main-menu-links li a.active {
  503. border-bottom: none;
  504. }
  505. /* --------------- Secondary Menu ------------ */
  506. #secondary-menu-links {
  507. float: right; /* LTR */
  508. font-size: 0.929em;
  509. margin: 0 10px;
  510. }
  511. #secondary-menu-links li{
  512. margin: 0;
  513. padding: 0;
  514. }
  515. #secondary-menu-links a {
  516. display: inline-block;
  517. padding: 0.8em;
  518. }
  519. #secondary-menu-links a:hover,
  520. #secondary-menu-links a:focus {
  521. text-decoration: underline;
  522. }
  523. /* ------------------- Main ------------------- */
  524. #main {
  525. margin-top: 20px;
  526. margin-bottom: 40px;
  527. }
  528. /* ----------------- Featured ----------------- */
  529. #featured {
  530. text-align: center;
  531. font-size: 1.2em;
  532. font-weight: normal;
  533. line-height: 1.4;
  534. padding: 20px 10px 45px;
  535. margin: 0;
  536. background: #f0f0f0;
  537. background: rgba(30, 50, 10, 0.08);
  538. border-bottom: 1px solid #e7e7e7;
  539. text-shadow: 1px 1px #fff;
  540. }
  541. #featured h2 {
  542. font-size: 1.2em;
  543. line-height: 1;
  544. }
  545. #featured p {
  546. margin: 0;
  547. padding: 0;
  548. }
  549. /* --------------- Highlighted ---------------- */
  550. #highlighted {
  551. border-bottom: 1px solid #d3d7d9;
  552. font-size: 120%;
  553. }
  554. /* ------------------- Help ------------------- */
  555. .region-help {
  556. border: 1px solid #d3d7d9;
  557. padding: 0 1.5em;
  558. margin-bottom: 30px;
  559. }
  560. /* ----------------- Content ------------------ */
  561. .content {
  562. margin-top: 10px;
  563. }
  564. h1#page-title {
  565. font-size: 2em;
  566. line-height: 1;
  567. }
  568. #content h2 {
  569. margin-bottom: 2px;
  570. font-size: 1.429em;
  571. line-height: 1.4;
  572. }
  573. .node .content {
  574. font-size: 1.071em;
  575. }
  576. .view-mode-teaser .content {
  577. font-size: 1em;
  578. }
  579. .view-mode-teaser h2 {
  580. margin-top: 0;
  581. padding-top: 0.5em;
  582. }
  583. .view-mode-teaser h2 a {
  584. color: #181818;
  585. }
  586. .view-mode-teaser {
  587. border-bottom: 1px solid #d3d7d9;
  588. margin-bottom: 30px;
  589. padding-bottom: 15px;
  590. }
  591. .view-mode-teaser.sticky {
  592. background: #f9f9f9;
  593. background: rgba(0, 0, 0, 0.024);
  594. border: 1px solid #d3d7d9;
  595. padding: 0 15px 15px;
  596. }
  597. .view-mode-teaser .content {
  598. clear: none;
  599. line-height: 1.6;
  600. }
  601. .meta {
  602. font-size: 0.857em;
  603. color: #68696b;
  604. margin-bottom: -5px;
  605. }
  606. .submitted .field-name-field-user-picture img {
  607. float: left; /* LTR */
  608. margin: 1px 20px 0 0; /* LTR */
  609. }
  610. .field-type-taxonomy-term-reference {
  611. margin: 0 0 1.2em;
  612. }
  613. .field-type-taxonomy-term-reference .field-label {
  614. font-weight: normal;
  615. margin: 0;
  616. padding-right: 5px; /* LTR */
  617. }
  618. .field-type-taxonomy-term-reference .field-label,
  619. .field-type-taxonomy-term-reference ul.links {
  620. font-size: 0.8em;
  621. }
  622. .view-mode-teaser .field-type-taxonomy-term-reference .field-label,
  623. .view-mode-teaser .field-type-taxonomy-term-reference ul.links {
  624. font-size: 0.821em;
  625. }
  626. .field-type-taxonomy-term-reference ul.links {
  627. padding: 0;
  628. margin: 0;
  629. list-style: none;
  630. }
  631. .field-type-taxonomy-term-reference ul.links li {
  632. float: left; /* LTR */
  633. padding: 0 1em 0 0; /* LTR */
  634. white-space: nowrap;
  635. }
  636. .link-wrapper {
  637. text-align: right;
  638. }
  639. .field-type-image img,
  640. .field-name-field-user-picture img {
  641. margin: 0 0 1em;
  642. }
  643. ul.links {
  644. color: #68696b;
  645. font-size: 0.821em;
  646. }
  647. .unpublished {
  648. margin: -20px -15px 0;
  649. padding: 20px 15px 0;
  650. }
  651. .unpublished .comment-text .comment-arrow {
  652. border-left: 1px solid #fff4f4;
  653. border-right: 1px solid #fff4f4;
  654. }
  655. /* ----------------- Comments ----------------- */
  656. .comment h2.title {
  657. margin-bottom: 1em;
  658. }
  659. .comment .field-name-field-user-picture img {
  660. margin-left: 0; /* LTR */
  661. }
  662. .comment {
  663. margin-bottom: 20px;
  664. display: table;
  665. vertical-align: top;
  666. }
  667. .comment .attribution {
  668. display: table-cell;
  669. padding: 0 30px 0 0; /* LTR */
  670. vertical-align: top;
  671. overflow: hidden;
  672. }
  673. .comment .attribution img {
  674. margin: 0;
  675. border: 1px solid #d3d7d9;
  676. }
  677. .comment .attribution .username {
  678. white-space: nowrap;
  679. }
  680. .comment .submitted p {
  681. margin: 4px 0;
  682. font-size: 1.071em;
  683. line-height: 1.2;
  684. }
  685. .comment .submitted .comment-time {
  686. font-size: 0.786em;
  687. color: #68696b;
  688. }
  689. .comment .submitted .comment-permalink {
  690. font-size: 0.786em;
  691. }
  692. .comment .content {
  693. font-size: 0.929em;
  694. line-height: 1.6;
  695. }
  696. .comment .comment-arrow {
  697. background: url(../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */
  698. border-left: 1px solid;
  699. border-right: 1px solid;
  700. height: 40px;
  701. margin-left: -47px; /* LTR */
  702. margin-top: 10px;
  703. position: absolute;
  704. width: 20px;
  705. }
  706. .comment .comment-text {
  707. padding: 10px 25px;
  708. border: 1px solid #d3d7d9;
  709. display: table-cell;
  710. vertical-align: top;
  711. position: relative;
  712. width: 100%;
  713. }
  714. .comment .indented {
  715. margin-left: 40px; /* LTR */
  716. }
  717. .comment ul.links {
  718. padding: 0 0 0.25em 0;
  719. }
  720. .comment ul.links li {
  721. padding: 0 0.5em 0 0; /* LTR */
  722. }
  723. .comment.unpublished {
  724. margin-right: 5px; /* LTR */
  725. padding: 5px 2px 5px 5px; /* LTR */
  726. }
  727. .comment.unpublished .comment-text .comment-arrow {
  728. border-left: 1px solid #fff4f4;
  729. border-right: 1px solid #fff4f4;
  730. }
  731. /* ------------------ Sidebar ----------------- */
  732. .sidebar .section {
  733. padding-top: 10px;
  734. }
  735. .sidebar .block {
  736. border: 1px solid;
  737. padding: 15px 20px;
  738. margin: 0 0 20px;
  739. }
  740. .sidebar h2 {
  741. margin: 0 0 0.5em;
  742. border-bottom: 1px solid #d6d6d6;
  743. padding-bottom: 5px;
  744. text-shadow: 0 1px 0 #fff;
  745. font-size: 1.071em;
  746. line-height: 1.2;
  747. }
  748. .sidebar .block .content {
  749. font-size: 0.914em;
  750. line-height: 1.4;
  751. }
  752. .sidebar tbody {
  753. border: none;
  754. }
  755. .sidebar tr.even,
  756. .sidebar tr.odd {
  757. background: none;
  758. border-bottom: 1px solid #d6d6d6;
  759. }
  760. /* ----------------- Triptych ----------------- */
  761. #triptych-wrapper {
  762. background-color: #f0f0f0;
  763. background: rgba(30, 50, 10, 0.08);
  764. border-top: 1px solid #e7e7e7;
  765. }
  766. #triptych h2 {
  767. color: #000;
  768. font-size: 1.4em;
  769. margin-bottom: 0.6em;
  770. text-shadow: 0 1px 0 #fff;
  771. text-align: center;
  772. line-height: 1;
  773. }
  774. #triptych .block {
  775. margin-bottom: 1em;
  776. padding-bottom: 1em;
  777. border-bottom: 1px solid #dfdfdf;
  778. line-height: 1.3;
  779. }
  780. #triptych .block.last {
  781. border-bottom: none;
  782. }
  783. #triptych .block ul li,
  784. #triptych .block ol li {
  785. list-style: none;
  786. }
  787. #triptych .block ul,
  788. #triptych .block ol {
  789. padding-left: 0;
  790. }
  791. #triptych #block-user-login .form-text {
  792. width: 185px;
  793. }
  794. #triptych #block-user-online p {
  795. margin-bottom: 0;
  796. }
  797. #triptych #block-node-syndicate h2 {
  798. overflow: hidden;
  799. width: 0;
  800. height: 0;
  801. }
  802. #triptych-last #block-node-syndicate {
  803. text-align: right;
  804. }
  805. #triptych #block-search-form .form-type-search input {
  806. width: 185px;
  807. }
  808. #triptych-middle #block-system-powered-by {
  809. text-align: center;
  810. }
  811. #triptych-last #block-system-powered-by {
  812. text-align: right;
  813. }
  814. /* ------------------ Footer ------------------ */
  815. #footer-wrapper {
  816. color: #c0c0c0;
  817. color: rgba(255, 255, 255, 0.65);
  818. font-size: 0.857em;
  819. }
  820. #footer-wrapper a {
  821. color: #fcfcfc;
  822. color: rgba(255, 255, 255, 0.8);
  823. }
  824. #footer-wrapper a:hover,
  825. #footer-wrapper a:focus {
  826. color: #fefefe;
  827. color: rgba(255, 255, 255, 0.95);
  828. text-decoration: underline;
  829. }
  830. #footer-wrapper .block {
  831. margin: 20px 0;
  832. border: 1px solid #444;
  833. border-color: rgba(255, 255, 255, 0.1);
  834. padding: 10px;
  835. }
  836. #footer-columns .block-menu,
  837. #footer .block {
  838. margin: 0;
  839. padding: 0;
  840. border: none;
  841. }
  842. #footer .block {
  843. margin: 0.5em 0;
  844. }
  845. #footer .block .content {
  846. padding: 0.5em 0;
  847. margin-top: 0;
  848. }
  849. #footer .block > h2 {
  850. /* @extend .element-invisible */
  851. position: absolute !important;
  852. clip: rect(1px, 1px, 1px, 1px);
  853. overflow: hidden;
  854. height: 1px;
  855. }
  856. #footer .block h2 {
  857. margin: 0;
  858. }
  859. #footer-columns h2 {
  860. border-bottom: 1px solid #555;
  861. border-color: rgba(255, 255, 255, 0.15);
  862. font-size: 1em;
  863. margin-bottom: 0;
  864. padding-bottom: 3px;
  865. text-transform: uppercase;
  866. }
  867. #footer-columns .content {
  868. margin-top: 0;
  869. }
  870. #footer-columns p {
  871. margin-top: 1em;
  872. }
  873. #footer-columns .content ul {
  874. list-style: none;
  875. padding-left: 0; /* LTR */
  876. margin-left: 0;
  877. }
  878. #footer-columns .content li {
  879. list-style: none;
  880. margin: 0;
  881. padding: 0;
  882. }
  883. #footer-columns .content li a {
  884. display: block;
  885. border-bottom: 1px solid #555;
  886. border-color: rgba(255, 255, 255, 0.15);
  887. line-height: 1.2;
  888. padding: 0.8em 2px 0.8em 20px; /* LTR */
  889. text-indent: -15px;
  890. }
  891. #footer-columns .content li a:hover,
  892. #footer-columns .content li a:focus {
  893. background-color: #1f1f21;
  894. background-color: rgba(255, 255, 255, 0.05);
  895. text-decoration: none;
  896. }
  897. #footer {
  898. letter-spacing: 0.2px;
  899. margin-top: 30px;
  900. border-top: 1px solid #555;
  901. border-color: rgba(255, 255, 255, 0.15);
  902. }
  903. #footer .region {
  904. margin-top: 20px;
  905. }
  906. #footer .block {
  907. clear: both;
  908. }
  909. #footer ul,
  910. #footer li {
  911. list-style: none;
  912. margin: 0;
  913. padding: 0;
  914. }
  915. #footer li a {
  916. float: left; /* LTR */
  917. padding: 0 12px;
  918. display: block;
  919. border-right: 1px solid #555; /* LTR */
  920. border-color: rgba(255, 255, 255, 0.15);
  921. }
  922. #footer li.first a {
  923. padding-left: 0; /* LTR */
  924. }
  925. #footer li.last a {
  926. padding-right: 0; /* LTR */
  927. border-right: none; /* LTR */
  928. }
  929. #footer-wrapper tr.odd {
  930. background-color: transparent;
  931. }
  932. #footer-wrapper tr.even {
  933. background-color: #2c2c2c;
  934. background-color: rgba(0, 0, 0, 0.15);
  935. }
  936. /* --------------- System Tabs --------------- */
  937. div.tabs {
  938. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  939. margin-bottom: 20px;
  940. }
  941. .tabs ul.primary {
  942. border-collapse: collapse;
  943. height: auto;
  944. line-height: normal;
  945. padding: 0 3px;
  946. margin: 0;
  947. overflow: hidden;
  948. border: none;
  949. background: transparent url(../images/tabs-border.png) repeat-x left bottom;
  950. white-space: nowrap;
  951. }
  952. .tabs ul.primary li {
  953. display: block;
  954. float: left; /* LTR */
  955. vertical-align: bottom;
  956. margin: 0 5px 0 0; /* LTR */
  957. }
  958. .tabs ul.primary li.active a {
  959. border-bottom: 1px solid #ffffff;
  960. }
  961. .tabs ul.primary li a {
  962. color: #000;
  963. background-color: #ededed;
  964. border-color: #bbb;
  965. border-style: solid solid none solid;
  966. border-width: 1px;
  967. height: 1.8em;
  968. line-height: 1.9;
  969. display: block;
  970. font-size: 0.929em;
  971. float: left; /* not LTR */
  972. padding: 0 10px 3px;
  973. margin: 0;
  974. text-shadow: 0 1px 0 #fff;
  975. border-top-left-radius: 6px;
  976. border-top-right-radius: 6px;
  977. }
  978. .tabs ul.primary li.active a {
  979. background-color: #ffffff;
  980. border: 1px solid #bbb;
  981. border-bottom: 1px solid #fff;
  982. }
  983. .tabs ul.secondary {
  984. border-bottom: none;
  985. margin: 5px;
  986. padding: 0.5em 0;
  987. }
  988. .tabs ul.secondary li {
  989. border-right: 1px solid #ccc; /* LTR */
  990. display: block;
  991. float: left; /* LTR */
  992. margin: 0;
  993. padding: 0 1em;
  994. }
  995. .tabs ul.secondary li:last-child {
  996. border-right: none; /* LTR */
  997. }
  998. .tabs ul.secondary li:first-child {
  999. padding-left: 0; /* LTR */
  1000. }
  1001. .tabs ul.secondary li a {
  1002. display: inline;
  1003. padding: 0.25em 0.5em;
  1004. text-decoration: none;
  1005. }
  1006. .tabs ul.secondary li a.active {
  1007. background: #f2f2f2;
  1008. border-bottom: none;
  1009. border-radius: 5px;
  1010. }
  1011. /* ---------------- Messages ----------------- */
  1012. #messages {
  1013. padding: 20px 0 5px;
  1014. margin: 0 auto;
  1015. }
  1016. .featured #messages {
  1017. background: #f0f0f0;
  1018. background: rgba(30, 50, 10, 0.08);
  1019. }
  1020. div.messages {
  1021. margin: 8px 15px;
  1022. }
  1023. /* -------------- Breadcrumbs -------------- */
  1024. .breadcrumb {
  1025. font-size: 0.929em;
  1026. }
  1027. /* -------------- User Profile -------------- */
  1028. .profile .field-name-field-user-picture {
  1029. float: none;
  1030. }
  1031. /* -------------- Password Meter ------------- */
  1032. .confirm-parent,
  1033. .password-parent {
  1034. width: 34em;
  1035. }
  1036. .password-parent,
  1037. div.form-item div.password-suggestions {
  1038. position: relative;
  1039. }
  1040. .password-strength-text,
  1041. .password-strength-title,
  1042. div.password-confirm {
  1043. font-size: 0.82em;
  1044. }
  1045. .password-strength-text {
  1046. margin-top: 0.2em;
  1047. }
  1048. div.password-confirm {
  1049. margin-top: 2.2em;
  1050. width: 20.73em;
  1051. }
  1052. /* ---------------- Buttons ---------------- */
  1053. .button {
  1054. background: #fff url(../images/buttons.png) 0 0 repeat-x;
  1055. border: 1px solid #e4e4e4;
  1056. border-bottom: 1px solid #b4b4b4;
  1057. border-left-color: #d2d2d2;
  1058. border-right-color: #d2d2d2;
  1059. color: #3a3a3a;
  1060. cursor: pointer;
  1061. font-size: 0.929em;
  1062. font-weight: normal;
  1063. text-align: center;
  1064. padding: 4px 17px;
  1065. border-radius: 15px;
  1066. }
  1067. .button:hover,
  1068. .button:focus,
  1069. .button:active {
  1070. text-decoration: none;
  1071. color: #5a5a5a;
  1072. background: #dedede;
  1073. }
  1074. /* -------------- Form Elements ------------- */
  1075. details,
  1076. fieldset,
  1077. .filter-wrapper {
  1078. border-radius: 4px;
  1079. }
  1080. .filter-wrapper {
  1081. border-top-left-radius: 0;
  1082. border-top-right-radius: 0;
  1083. }
  1084. .filter-help a {
  1085. font-size: 0.857em;
  1086. }
  1087. .filter-wrapper .form-item label {
  1088. margin-right: 10px;
  1089. }
  1090. summary {
  1091. background: #dbdbdb;
  1092. color: #3b3b3b;
  1093. text-shadow: 0 1px 0 #fff;
  1094. }
  1095. details summary a {
  1096. color: #3b3b3b;
  1097. }
  1098. details summary a:hover,
  1099. details summary a:focus,
  1100. details summary a:active {
  1101. color: #000;
  1102. }
  1103. details .details-description {
  1104. font-style: italic;
  1105. }
  1106. input {
  1107. margin: 2px 0;
  1108. padding: 4px;
  1109. }
  1110. input,
  1111. textarea {
  1112. font-size: 0.929em;
  1113. }
  1114. textarea {
  1115. line-height: 1.5;
  1116. }
  1117. textarea.form-textarea,
  1118. select.form-select {
  1119. padding: 4px;
  1120. }
  1121. input.form-text,
  1122. input.form-tel,
  1123. input.form-email,
  1124. input.form-url,
  1125. input.form-search,
  1126. input.form-number,
  1127. input.form-color,
  1128. textarea.form-textarea,
  1129. select.form-select {
  1130. border: 1px solid #ccc;
  1131. }
  1132. input.form-submit:hover,
  1133. input.form-submit:focus {
  1134. background: #dedede;
  1135. }
  1136. .password-suggestions ul li {
  1137. margin-left: 1.2em; /* LTR */
  1138. }
  1139. .form-item label {
  1140. font-size: 0.929em;
  1141. }
  1142. .form-type-radio label,
  1143. .form-type-checkbox label {
  1144. margin-left: 4px;
  1145. }
  1146. .form-type-radio .description,
  1147. .form-type-checkbox .description {
  1148. margin-left: 2px;
  1149. }
  1150. .form-actions {
  1151. padding-top: 10px;
  1152. }
  1153. /* Node Form */
  1154. #edit-body {
  1155. margin-bottom: 2em;
  1156. }
  1157. .node-form .form-wrapper {
  1158. margin-bottom: 2em;
  1159. }
  1160. /* Contact Form */
  1161. .contact-form #edit-name {
  1162. width: 75%;
  1163. border-radius: 4px;
  1164. }
  1165. .contact-form #edit-mail {
  1166. width: 75%;
  1167. border-radius: 4px;
  1168. }
  1169. .contact-form #edit-subject {
  1170. width: 75%;
  1171. border-radius: 4px;
  1172. }
  1173. .contact-form #edit-message {
  1174. width: 76.3%;
  1175. border-top-left-radius: 4px;
  1176. border-top-right-radius: 4px;
  1177. }
  1178. /* Disabled form elements */
  1179. .form-disabled input,
  1180. .form-disabled select,
  1181. .form-disabled textarea,
  1182. .form-button-disabled,
  1183. .form-button-disabled:hover,
  1184. .form-button-disabled:focus,
  1185. .form-button-disabled:active {
  1186. background: #ededed;
  1187. border-color: #bbb;
  1188. color: #717171;
  1189. }
  1190. .image-button-disabled,
  1191. .image-button-disabled:hover,
  1192. .image-button-disabled:focus,
  1193. .image-button-disabled:active {
  1194. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  1195. filter: alpha(opacity=50);
  1196. opacity: .5;
  1197. }
  1198. .form-disabled label {
  1199. color: #717171;
  1200. }
  1201. /* Animated throbber */
  1202. .js input.form-autocomplete {
  1203. background-position: 100% 4px; /* LTR */
  1204. }
  1205. .js input.throbbing {
  1206. background-position: 100% -16px; /* LTR */
  1207. }
  1208. /* Comment form */
  1209. .comment-form label {
  1210. float: left; /* LTR */
  1211. font-size: 0.929em;
  1212. width: 120px;
  1213. }
  1214. .comment-form input,
  1215. .comment-form .form-select {
  1216. margin: 0;
  1217. border-radius: 4px;
  1218. }
  1219. .comment-form .form-type-textarea label {
  1220. float: none;
  1221. }
  1222. .comment-form .form-item,
  1223. .comment-form .form-radios,
  1224. .comment-form .form-type-checkbox,
  1225. .comment-form .form-select {
  1226. margin-bottom: 10px;
  1227. overflow: hidden;
  1228. }
  1229. .comment-form .form-type-checkbox,
  1230. .comment-form .form-radios {
  1231. margin-left: 120px; /* LTR */
  1232. }
  1233. .comment-form .form-type-checkbox label,
  1234. .comment-form .form-radios label {
  1235. float: none;
  1236. margin-top: 0;
  1237. }
  1238. .comment-form input.form-file {
  1239. width: auto;
  1240. }
  1241. .no-sidebars .comment-form .form-text {
  1242. width: 800px;
  1243. }
  1244. .one-sidebar .comment-form .form-text {
  1245. width: 500px;
  1246. }
  1247. .two-sidebars .comment-form .form-text {
  1248. width: 320px;
  1249. }
  1250. .comment-form .form-item .description {
  1251. font-size: 0.786em;
  1252. line-height: 1.2;
  1253. margin-left: 120px; /* LTR */
  1254. }
  1255. #content h2.comment-form {
  1256. margin-bottom: 0.5em;
  1257. }
  1258. .comment-form .form-textarea {
  1259. border-top-left-radius: 4px;
  1260. border-top-right-radius: 4px;
  1261. }
  1262. .comment-form details.filter-wrapper .details-wrapper,
  1263. .comment-form .text-format-wrapper .form-item {
  1264. margin-top: 0;
  1265. margin-bottom: 0;
  1266. }
  1267. .filter-wrapper label {
  1268. width: auto;
  1269. float: none;
  1270. }
  1271. .filter-wrapper .form-select {
  1272. min-width: 120px;
  1273. }
  1274. .comment-form details.filter-wrapper .tips {
  1275. font-size: 0.786em;
  1276. }
  1277. #comment-body-add-more-wrapper .form-type-textarea label {
  1278. margin-bottom: 0.4em;
  1279. }
  1280. #edit-actions input {
  1281. margin-right: 0.6em; /* LTR */
  1282. }
  1283. /* -------------- Other Overrides ------------- */
  1284. div.password-suggestions {
  1285. border: 0;
  1286. }
  1287. .ui-widget-overlay {
  1288. background: #222222;
  1289. opacity: 0.7;
  1290. }
  1291. #forum .name {
  1292. font-size: 1.083em;
  1293. }
  1294. #forum .description {
  1295. font-size: 1em;
  1296. }
  1297. /* --------------- Search Form ---------------- */
  1298. #block-search-form {
  1299. padding-bottom: 7px;
  1300. }
  1301. #block-search-form .content {
  1302. margin-top: 0;
  1303. }
  1304. #search-form input[type="search"],
  1305. #block-search-form input[type="search"] {
  1306. box-sizing: border-box;
  1307. padding: 4px;
  1308. -webkit-appearance: textfield;
  1309. }
  1310. #search-form input[type="search"]::-webkit-search-decoration,
  1311. #block-search-form input[type="search"]::-webkit-search-decoration {
  1312. display: none;
  1313. }
  1314. #search-form input#edit-keys,
  1315. #block-search-form .form-item-search-block-form input {
  1316. float: left; /* LTR */
  1317. font-size: 1em;
  1318. margin-right: 5px;
  1319. width: 9em;
  1320. }
  1321. #search-block-form input.form-submit,
  1322. #search-form input.form-submit {
  1323. margin-left: 0;
  1324. margin-right: 0;
  1325. height: 25px;
  1326. width: 34px;
  1327. padding: 0;
  1328. cursor: pointer;
  1329. text-indent: -9999px;
  1330. border-color: #e4e4e4 #d2d2d2 #b4b4b4;
  1331. background: url(../images/search-button.png) no-repeat center top;
  1332. overflow: hidden;
  1333. }
  1334. #search-block-form input.form-submit:hover,
  1335. #search-block-form input.form-submit:focus,
  1336. #search-form input.form-submit:hover,
  1337. #search-form input.form-submit:focus {
  1338. background-position: center bottom;
  1339. }
  1340. #search-form .form-item-keys label {
  1341. display: block;
  1342. }
  1343. /* --------------- Search Results ---------------- */
  1344. ol.search-results {
  1345. padding-left: 0;
  1346. list-style-position: inside;
  1347. }
  1348. .search-results li {
  1349. border-bottom: 1px solid #d3d7d9;
  1350. padding-bottom: 0.4285em;
  1351. margin-bottom: 0.5em;
  1352. }
  1353. .search-results li:last-child {
  1354. border-bottom: none;
  1355. padding-bottom: 0;
  1356. margin-bottom: 1em;
  1357. }
  1358. .search-results .search-snippet-info {
  1359. padding-left: 0;
  1360. }
  1361. /* -------------- Shortcut Links -------------- */
  1362. .shortcut-wrapper {
  1363. margin: 2.2em 0 1.1em 0; /* Same as usual h1#page-title margin. */
  1364. }
  1365. .shortcut-wrapper h1#page-title {
  1366. float: left; /* LTR */
  1367. margin: 0;
  1368. }
  1369. div.add-or-remove-shortcuts {
  1370. padding-top: 0.9em;
  1371. }
  1372. .overlay div.add-or-remove-shortcuts {
  1373. padding-top: 0.8em;
  1374. }
  1375. /* ---------- Admin-specific Theming ---------- */
  1376. .page-admin #content img {
  1377. margin-right: 15px; /* LTR */
  1378. }
  1379. .page-admin #content .simpletest-image img {
  1380. margin: 0;
  1381. }
  1382. .page-admin-structure-block-demo .block-region {
  1383. background: #ffff66;
  1384. border: 1px dotted #9f9e00;
  1385. color: #000;
  1386. font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  1387. margin: 5px;
  1388. padding: 5px;
  1389. text-align: center;
  1390. text-shadow: none;
  1391. }
  1392. .page-admin-structure-block-demo #featured .block-region {
  1393. font-size: 0.55em;
  1394. }
  1395. .page-admin-structure-block-demo #header .block-region {
  1396. width: 500px;
  1397. }
  1398. .page-admin #admin-dblog img {
  1399. margin: 0 5px;
  1400. }
  1401. /* Fix spacing when Seven is used in the overlay. */
  1402. #system-theme-settings details {
  1403. padding: 0;
  1404. }
  1405. #system-theme-settings details summary {
  1406. margin-top: 0;
  1407. }
  1408. /* Configuration. */
  1409. div.admin .right,
  1410. div.admin .left {
  1411. width: 49%;
  1412. margin: 0;
  1413. }
  1414. div.admin-panel {
  1415. background: #fbfbfb;
  1416. border: 1px solid #ccc;
  1417. margin: 10px 0;
  1418. padding: 0 5px 5px;
  1419. }
  1420. div.admin-panel h3 {
  1421. margin: 16px 7px;
  1422. }
  1423. div.admin-panel dt {
  1424. border-top: 1px solid #ccc;
  1425. padding: 7px 0 0;
  1426. }
  1427. div.admin-panel dd {
  1428. margin: 0 0 10px;
  1429. }
  1430. div.admin-panel .description {
  1431. margin: 0 0 14px 7px;
  1432. }
  1433. /* ---------- Overlay layout styles ----------- */
  1434. .overlay #main,
  1435. .overlay #content {
  1436. width: auto;
  1437. float: none;
  1438. }
  1439. .overlay #page {
  1440. padding: 0 2em;
  1441. }
  1442. .overlay .region-page-top,
  1443. .overlay #header,
  1444. .overlay #page-title,
  1445. .overlay #featured,
  1446. .overlay #sidebar-first,
  1447. .overlay #triptych-wrapper,
  1448. .overlay #footer-wrapper {
  1449. display: none;
  1450. }
  1451. .overlay-processed .field-type-image {
  1452. display: block;
  1453. float: none;
  1454. }
  1455. .overlay #messages {
  1456. width: auto;
  1457. }
  1458. /* ---------- book ----------- */
  1459. .book-navigation .menu {
  1460. border-top: 1px solid #d6d6d6;
  1461. }
  1462. .book-navigation .book-pager {
  1463. border-bottom: 1px solid #d6d6d6;
  1464. border-top: 1px solid #d6d6d6;
  1465. margin: 0;
  1466. }
  1467. /* ---------- Dropbutton ----------- */
  1468. .js .dropbutton-widget {
  1469. background-color: white;
  1470. border-radius: 5px;
  1471. }
  1472. .js .dropbutton-widget:hover {
  1473. background-color: #f8f8f8;
  1474. border-color: #b8b8b8;
  1475. }
  1476. .js .dropbutton-multiple.open .dropbutton-widget:hover {
  1477. background-color: white;
  1478. }
  1479. /* ----------- media queries ------------------------------- */
  1480. @media all and (min-width: 461px) and (max-width: 900px) {
  1481. /* ------------ Header and Menus -------------------------- */
  1482. .region-header {
  1483. margin: .5em 5px .75em;
  1484. }
  1485. #logo {
  1486. padding: 5px 0 0 5px; /* LTR */
  1487. }
  1488. #name-and-slogan {
  1489. padding: 10px 10px 8px;
  1490. }
  1491. #main-menu-links {
  1492. margin: 0 5px;
  1493. padding: 0;
  1494. text-align: center;
  1495. }
  1496. #main-menu-links li {
  1497. float: left; /* LTR */
  1498. margin-right: 5px; /* LTR */
  1499. padding: 0;
  1500. display: inline-block;
  1501. width: 32.75%;
  1502. }
  1503. #main-menu-links li:nth-child(3n) {
  1504. margin-right: -5px; /* LTR */
  1505. }
  1506. #main-menu-links a {
  1507. float: none;
  1508. display: block;
  1509. border-radius: 8px;
  1510. margin-bottom: 5px;
  1511. padding: 0.9em 5px;
  1512. }
  1513. }
  1514. @media all and (min-width: 901px) {
  1515. .region-header {
  1516. margin: 1em 5px 1.5em;
  1517. }
  1518. #logo {
  1519. padding: 15px 15px 15px 10px; /* LTR */
  1520. }
  1521. #name-and-slogan {
  1522. padding: 26px 0 0;
  1523. margin: 0 0 30px 15px; /* LTR */
  1524. }
  1525. #site-name {
  1526. font-size: 1.821em;
  1527. }
  1528. #main-menu-links {
  1529. font-size: 0.929em;
  1530. margin: 0;
  1531. padding: 0 15px;
  1532. }
  1533. #main-menu-links li {
  1534. float: left; /* LTR */
  1535. list-style: none;
  1536. padding: 0 1px;
  1537. margin: 0 1px;
  1538. width: auto;
  1539. }
  1540. #main-menu-links a {
  1541. float: left; /* LTR */
  1542. padding: 0.7em 0.8em;
  1543. margin-bottom: 0;
  1544. border-bottom-left-radius: 0;
  1545. border-bottom-right-radius: 0;
  1546. }
  1547. .featured #main-menu-links li a:active,
  1548. .featured #main-menu-links li a.active {
  1549. background: #f0f0f0;
  1550. background: rgba(240, 240, 240, 1.0);
  1551. }
  1552. }
  1553. @media all and (min-width: 520px) {
  1554. /* ----------------- Featured ----------------- */
  1555. #featured {
  1556. font-size: 1.643em;
  1557. }
  1558. #featured h2 {
  1559. font-size: 1.174em;
  1560. }
  1561. /* ------------------ Triptych ----------------- */
  1562. #triptych h2 {
  1563. font-size: 1.714em;
  1564. margin-bottom: 0.9em;
  1565. }
  1566. #triptych .block {
  1567. margin-bottom: 2em;
  1568. padding-bottom: 2em;
  1569. }
  1570. }
  1571. /**
  1572. * Responsive tables.
  1573. */
  1574. @media screen and (max-width: 37.5em) { /* 600px */
  1575. th.priority-low,
  1576. td.priority-low,
  1577. th.priority-medium,
  1578. td.priority-medium {
  1579. display: none;
  1580. }
  1581. }
  1582. @media screen and (max-width: 60em) { /* 920px */
  1583. th.priority-low,
  1584. td.priority-low {
  1585. display: none;
  1586. }
  1587. }
  1588. /* ---------- Views styling ---------- */
  1589. /* @group Lists */
  1590. .views-display-top .secondary .action-list {
  1591. padding-left: 0; /* LTR */
  1592. }
  1593. /* @end */
  1594. /* @group Attachment details tabs
  1595. *
  1596. * The tabs that switch between sections
  1597. */
  1598. .views-displays .region-content .secondary,
  1599. .views-displays .region-content .secondary {
  1600. padding-bottom: 0;
  1601. padding-left: 0;
  1602. }
  1603. .views-displays .secondary a {
  1604. font-size: smaller;
  1605. }
  1606. .views-displays .secondary > li a {
  1607. border-radius: 5px;
  1608. }
  1609. .views-displays .secondary > li.open a {
  1610. border-radius: 5px 5px 0 0;
  1611. }
  1612. .views-displays .secondary .open > a:hover {
  1613. color: #0071B3;
  1614. }
  1615. .views-displays .secondary input.form-submit {
  1616. font-size: smaller;
  1617. }
  1618. /* @end */
  1619. /* @group Modal dialog box
  1620. *
  1621. * The contents of the popup dialog on the views edit form.
  1622. */
  1623. .views-filterable-options .even .form-type-checkbox {
  1624. background-color: #F9F9F9;
  1625. }
  1626. .views-ui-dialog .ui-dialog-titlebar-close,
  1627. .views-ui-dialog #views-ajax-title,
  1628. .views-ui-dialog .views-override,
  1629. .views-ui-dialog .form-buttons {
  1630. background-color: #f6f6f6;
  1631. }
  1632. .views-ui-dialog a {
  1633. color: #0071b3;
  1634. }
  1635. .views-ui-dialog a:hover,
  1636. .views-ui-dialog a:focus {
  1637. color: #018fe2;
  1638. }
  1639. /* @end */
  1640. .views-display-column .details-wrapper {
  1641. margin-top: 0;
  1642. }
  1643. .views-display-column details summary {
  1644. background: none;
  1645. border: none;
  1646. font-family: inherit;
  1647. font-size: 13px;
  1648. line-height: inherit;
  1649. position: relative;
  1650. text-indent: 0;
  1651. text-shadow: none;
  1652. top: 3px;
  1653. }
  1654. .views-display-columns details {
  1655. position: inherit;
  1656. }
  1657. .views-display-columns details summary {
  1658. padding: 0 0 4px 2px; /* LTR */
  1659. }
  1660. .views-display-columns a.fieldset-title {
  1661. color: #0071B3;
  1662. }
  1663. .views-display-columns a.fieldset-title:hover {
  1664. color: #018FE2;
  1665. }
  1666. /* @group Dropbutton */
  1667. .views-ui-display-tab-actions .dropbutton input {
  1668. color: #0071B3;
  1669. }
  1670. .views-ui-display-tab-actions .dropbutton input:hover,
  1671. .views-ui-display-tab-actions .dropbutton input:focus {
  1672. color: #018FE2;
  1673. }
  1674. .views-ui-display-tab-actions .dropbutton input.form-submit {
  1675. margin-right: 0;
  1676. margin-top: 0;
  1677. }
  1678. /* @end */