314 lines
6.1 KiB
CSS
314 lines
6.1 KiB
CSS
/**
|
|
* @file
|
|
* Page Styling
|
|
*
|
|
* Style the markup found in page.tpl.php. Also includes some styling of
|
|
* miscellaneous Drupal elements that appear in the $content variable, such as
|
|
* ul.links, .pager, .more-link, etc.
|
|
*/
|
|
|
|
|
|
/*
|
|
* Body
|
|
*/
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#page-wrapper {
|
|
}
|
|
|
|
#page {
|
|
}
|
|
|
|
/*
|
|
* The skip navigation link will be completely hidden until a user tabs to the
|
|
* link. See http://www.webaim.org/techniques/skipnav/
|
|
*/
|
|
#skip-link a,
|
|
#skip-link a:visited {
|
|
position: absolute;
|
|
display: block;
|
|
left: 0;
|
|
top: -500px;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
background-color: #666;
|
|
color: #fff;
|
|
}
|
|
|
|
#skip-link a:hover,
|
|
#skip-link a:active,
|
|
#skip-link a:focus {
|
|
position: static;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 2px 0 3px 0;
|
|
}
|
|
|
|
/*
|
|
* Header
|
|
*/
|
|
#header {
|
|
}
|
|
|
|
#header .section {
|
|
}
|
|
|
|
#logo /* Wrapping link for logo */ {
|
|
float: left; /* LTR */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#logo img {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
#name-and-slogan /* Wrapper for website name and slogan */ {
|
|
}
|
|
|
|
h1#site-name,
|
|
div#site-name /* The name of the website */ {
|
|
margin: 0;
|
|
font-size: 2em;
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
#site-name a:link,
|
|
#site-name a:visited {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#site-name a:hover,
|
|
#site-name a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#site-slogan /* The slogan (or tagline) of a website */ {
|
|
}
|
|
|
|
.region-header /* Wrapper for any blocks placed in the header region */ {
|
|
}
|
|
|
|
/*
|
|
* Main (container for everything else)
|
|
*/
|
|
#main-wrapper {
|
|
}
|
|
|
|
#main {
|
|
}
|
|
|
|
/*
|
|
* Content
|
|
*/
|
|
#content {
|
|
}
|
|
|
|
#content .section {
|
|
}
|
|
|
|
#mission /* The mission statement of the site (displayed on homepage) */ {
|
|
}
|
|
|
|
.region-content-top /* Wrapper for any blocks placed in the "content top" region */ {
|
|
}
|
|
|
|
.breadcrumb /* The path to the current page in the form of a list of links */ {
|
|
padding-bottom: 0; /* Undo system.css */
|
|
}
|
|
|
|
h1.title, /* The title of the page */
|
|
h2.title, /* Block title or the title of a piece of content when it is given in a list of content */
|
|
h3.title /* Comment title */ {
|
|
margin: 0;
|
|
}
|
|
|
|
tr.even /* Some tables have rows marked even or odd. */ {
|
|
/* background-color: #eee; */ /* Drupal core uses a #eee background */
|
|
}
|
|
|
|
tr.odd {
|
|
/* background-color: #eee; */ /* Drupal core uses a #eee background */
|
|
}
|
|
|
|
div.messages /* Important messages (status, warning, and error) for the user. See also the declarations in messages.css. */ {
|
|
}
|
|
|
|
div.status /* Normal priority messages */ {
|
|
}
|
|
|
|
div.warning,
|
|
tr.warning /* Medium priority messages */ {
|
|
/* border: 1px solid #f0c020; */ /* Drupal core uses: 1px solid #f0c020 */
|
|
}
|
|
|
|
div.error,
|
|
tr.error /* High priority messages. See also the .error declaration below. */ {
|
|
}
|
|
|
|
.error /* Errors that are separate from div.messages status messages. */ {
|
|
/* color: #e55; */ /* Drupal core uses a #e55 background */
|
|
}
|
|
|
|
.warning /* Warnings that are separate from div.messages status messages. */ {
|
|
/* color: #e09010; */ /* Drupal core uses a #e09010 background */
|
|
}
|
|
|
|
div.tabs /* See also the tabs.css file. */ {
|
|
}
|
|
|
|
.help /* Help text on a page */ {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.more-help-link /* Link to more help */ {
|
|
font-size: 0.85em;
|
|
text-align: right;
|
|
}
|
|
|
|
#content-area /* Wrapper for the actual page content */ {
|
|
}
|
|
|
|
ul.links /* List of links */ {
|
|
margin: 1em 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.links.inline {
|
|
margin: 0;
|
|
display: inline;
|
|
}
|
|
|
|
ul.links li {
|
|
display: inline;
|
|
list-style-type: none;
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
.pager /* A list of page numbers when more than 1 page of content is available */ {
|
|
clear: both;
|
|
margin: 1em 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.pager a,
|
|
.pager strong.pager-current /* Each page number in the pager list */ {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.feed-icons /* The links to the RSS or Atom feeds for the current list of content */ {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.more-link /* Aggregator, blog, and forum more link */ {
|
|
text-align: right; /* LTR */
|
|
}
|
|
|
|
.region-content-bottom /* Wrapper for any blocks placed in the "content bottom" region */ {
|
|
}
|
|
|
|
/*
|
|
* First sidebar (on left in LTR languages, on right in RTL)
|
|
*
|
|
* Remember to NOT add padding or margin to your .region-sidebar-first
|
|
* (see the layout.css file.)
|
|
*/
|
|
.region-sidebar-first {
|
|
}
|
|
|
|
.region-sidebar-first .section {
|
|
}
|
|
|
|
/*
|
|
* Second sidebar (on right in LTR languages, on left in RTL)
|
|
*
|
|
* Remember to NOT add padding or margin to your .region-sidebar-second
|
|
* (see the layout.css file.)
|
|
*/
|
|
.region-sidebar-second {
|
|
}
|
|
|
|
.region-sidebar-second .section {
|
|
}
|
|
|
|
/*
|
|
* Footer
|
|
*/
|
|
#footer {
|
|
}
|
|
|
|
#footer .section {
|
|
}
|
|
|
|
#footer-message /* Wrapper for the footer message from Drupal's "Site information"
|
|
and for any blocks placed in the footer region */ {
|
|
}
|
|
|
|
.region-footer {
|
|
}
|
|
|
|
/*
|
|
* Closure
|
|
*/
|
|
.region-page-closure /* Wrapper for any blocks placed in the closure region */ {
|
|
}
|
|
|
|
/*
|
|
* Drupal boxes
|
|
*
|
|
* Wrapper for Comment form, Comment viewing options, Menu admin, and
|
|
* Search results.
|
|
*/
|
|
.box /* Wrapper for box */ {
|
|
}
|
|
|
|
.box h2 /* Box title */ {
|
|
}
|
|
|
|
.box .content /* Box's content wrapper */ {
|
|
}
|
|
|
|
/*
|
|
* Markup free clearing (See: http://www.positioniseverything.net/easyclearing.html )
|
|
*/
|
|
.clearfix:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/**
|
|
* Hide elements from all users.
|
|
*
|
|
* Used for elements which should not be immediately displayed to any user. An
|
|
* example would be a collapsible fieldset that will be expanded with a click
|
|
* from a user. The effect of this class can be toggled with the jQuery show()
|
|
* and hide() functions.
|
|
*/
|
|
.element-hidden {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Hide elements visually, but keep them available for screen-readers.
|
|
*
|
|
* Used for information required for screen-reader users to understand and use
|
|
* the site where visual display is undesirable. Information provided in this
|
|
* manner should be kept concise, to avoid unnecessary burden on the user. Must
|
|
* not be used for focusable elements (such as links and form elements) as this
|
|
* causes issues for keyboard only or voice recognition users. "!important" is
|
|
* used to prevent unintentional overrides.
|
|
*/
|
|
.element-invisible {
|
|
position: absolute !important;
|
|
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
}
|