Newer
Older
/**
* @file
* HTML Element Styling
*
* Ok, I admit it. I fooled you. This isn't a "reset" stylesheet. Instead this
* is the place where you should set (not reset) the default styling for all
* HTML elements.
*
* @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
* @see http://snook.ca/archives/html_and_css/no_css_reset/
*/
/*
* Fonts
*
* Our font size and line height declarations are based on the following ALA
* article:
* http://www.alistapart.com/articles/howtosizetextincss
*
* All modern browsrs use a 16px default font size. Specifying the font-size
* and line-height in ems (relative to the 16px default font) allows the user
* to resize the font in the browser and produces the most consistent results
* across different browsers.
*/
font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
}
/*
* To use a 12px font size on the page, delete the 14px declarations.
* to use a 14px font size on the page, delete the 12px declarations.
*/
/* Use a 12px base font size with a 16px line height */
font-size: 0.75em; /* 16px x .75 = 12px */
line-height: 1.333em; /* 12px x 1.333 = 16px */
/* Use a 14px base font size with a 18px line height */
font-size: 0.875em; /* 16px x .875 = 14px */
line-height: 1.286em; /* 14px x 1.286 = 18px */
}
body,
caption,
th,
td,
input,
textarea,
select,
option,
legend,
fieldset {
/* The following font family declarations are based on the Microsoft core web
* fonts which are common fonts available on most computer systems. The DejaVu
* fonts are commonly available on Linux systems where the MS fonts are less
* common. Tahoma and Helvetica are also widely available.
*
* A user's web browser will look at the comma-separated list and will
* attempt to use each font in turn until it finds one that is available
* on the user's computer. The final "generic" font (sans-serif or serif)
* hints at what type of font to use if the web browser doesn't find any
* of the fonts in the list.
font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-family: "Courier New", "DejaVu Sans Mono", monospace;
*/
font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
font-size: 1.1em; /* Monospace fonts can be hard to read */
font-family: "Courier New", "DejaVu Sans Mono", monospace;
}
/*
* Headings
*/
font-size: 2em;
line-height: 1.3em;
margin-top: 0;
margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font.
Remember, a margin specified in ems is relative to
the element's font-size, not to the pages' base
font size. So, for example, if we want a 1em margin
(relative to the base font), we have to divide that
length by the element's font-size:
1em / 2em = 0.5em */
}
font-size: 1.5em;
line-height: 1.3em;
margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
margin-bottom: 0.667em;
}
font-size: 1.3em;
line-height: 1.3em;
margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
margin-bottom: 0.769em;
}
font-size: 1.1em;
line-height: 1.3em;
margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
margin-bottom: 0.909em;
}
/*
* Block-level elements
*/
p,
ul,
ol,
dl,
pre,
table,
fieldset {
margin: 1em 0;
}
margin: 1em 2em;
}
/*
* Lists
*
* We need to standardize the list item indentation.
*/
margin-left: 0;
padding-left: 2em; /* LTR */
}
.block ul,
.item-list ul /* Drupal overrides */ {
margin: 1em 0;
padding: 0 0 0 2em; /* LTR */
}
ul ul, ul ol,
ol ol, ol ul,
.block ul ul, .block ul ol,
.block ol ol, .block ol ul,
.item-list ul ul, .item-list ul ol,
.item-list ol ol, .item-list ol ul {
margin: 0;
}
margin: 0;
padding: 0;
}
.item-list ul li /* Drupal override */ {
margin: 0;
padding: 0;
list-style: inherit;
}
li.expanded,
li.collapsed,
li.leaf /* Drupal override */ {
margin: 0;
padding: 0;
}
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ul ul ul ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: decimal; }
margin: 0;
padding: 0;
}
margin: 0 0 0 2em;
padding: 0;
}
/*
* Links
*
* The order of link states are based on Eric Meyer's article:
* http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
*/
}
}
a:hover,
}
}
/*
* Tables
*
* Drupal provides table styling which is only useful for its admin section
* forms, so we override this default CSS. (We set it back in forms.css.)
*/
border-collapse: collapse;
/* width: 100%; */ /* Prevent cramped-looking tables */
}
th,
thead th,
text-align: left; /* LTR */
padding: 0;
border-bottom: none;
}
border-top: none;
}
/*
* Abbreviations
*/
border-bottom: 1px dotted #666;
cursor: help;
white-space: nowrap;
}
abbr.created /* Date-based "abbreviations" show computer-friendly timestamps which are not human-friendly. */ {
border: none;
cursor: auto;
white-space: normal;
}
/*
* Images
*/
border: 0;
}
/*
* Horizontal rules
*/
height: 1px;
border: 1px solid #666;
}
/*
* Forms
*/
margin: 0;
padding: 0;
}
margin: 1em 0;
padding: 0.5em;
}
/**
* @file
* Wireframes Styling
*
* Add wireframes to the basic layout elements.
*/
.with-wireframes #header .section,
.with-wireframes #content .section,
.with-wireframes #navigation .section,
.with-wireframes .region-sidebar-first .section,
.with-wireframes .region-sidebar-second .section,
.with-wireframes #footer .section {
margin: 1px;
padding: 2px;
border: 1px solid #ccc;
}
.with-wireframes .region-page-closure {
margin-top: 1px;
padding: 2px;
border: 1px solid #ccc;
}
/**
* @file
* Layout Styling (DIV Positioning)
*
* Define CSS classes to create a table-free, 3-column, 2-column, or single
* column layout depending on whether blocks are enabled in the left or right
* columns.
*
* This layout is based on the Zen Columns layout method.
* http://drupal.org/node/201428
*
* Only CSS that affects the layout (positioning) of major elements should be
* listed here. Such as:
* display, position, float, clear, width, height, min-width, min-height
* margin, border, padding, overflow
*/
/*
* Body
*/
}
.region-page-closure {
/*
* If you want to make the page a fixed width and centered in the viewport,
* this is the standards-compliant way to do that. See also the ie6.css file
* for the necessary IE5/IE6quirks hack to center a div.
*/
margin-left: auto;
margin-right: auto;
width: 960px;
}
}
/*
* Header
*/
}
#header .section {
}
}
.region-header {
clear: both; /* Clear the logo */
}
/*
* Main (container for everything else)
*/
#main-wrapper {
position: relative;
}
}
/*
* Content
*/
#content,
.no-sidebars #content {
float: left; /* LTR */
margin-left: 0; /* LTR */
margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
}
.sidebar-first #content {
width: 760px;
margin-left: 200px; /* LTR */ /* The width of .region-sidebar-first. */
margin-right: -960px; /* LTR */ /* Negative value of #content's width + left margin. */
}
.sidebar-second #content {
width: 760px;
margin-left: 0; /* LTR */
margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
}
.two-sidebars #content {
width: 560px;
margin-left: 200px; /* LTR */ /* The width of .region-sidebar-first */
margin-right: -760px; /* LTR */ /* Negative value of #content's width + left margin. */
}
#content .section {
margin: 0;
padding: 0;
}
/*
float: left; /* LTR */
width: 100%;
margin-left: 0; /* LTR */
margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
height: 2.3em; /* The navigation can have any arbritrary height. We picked one
that is the line-height plus 1em: 1.3 + 1 = 2.3
Set this to the same value as the margin-top below. */
}
.with-navigation #content,
.with-navigation .region-sidebar-first,
.with-navigation .region-sidebar-second {
margin-top: 2.3em; /* Set this to the same value as the navigation height above. */
}
#navigation .section {
}
#navigation ul /* Primary and secondary links */ {
margin: 0;
padding: 0;
text-align: left; /* LTR */
}
#navigation li /* A simple method to get navigation links to appear in one line. */ {
float: left; /* LTR */
padding: 0 10px 0 0; /* LTR */
}
/*
* First sidebar
*/
.region-sidebar-first {
float: left; /* LTR */
width: 200px;
margin-left: 0; /* LTR */
margin-right: -200px; /* LTR */ /* Negative value of .region-sidebar-first's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-first .section. */
}
.region-sidebar-first .section {
margin: 0 20px 0 0; /* LTR */
padding: 0;
}
/*
* Second sidebar
*/
.region-sidebar-second {
width: 200px;
margin-left: 760px; /* LTR */ /* Width of content + sidebar-first. */
margin-right: -960px; /* LTR */ /* Negative value of .region-sidebar-second's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-second .section. */
}
.region-sidebar-second .section {
margin: 0 0 0 20px; /* LTR */
padding: 0;
}
/*
* Footer
*/
}
#footer .section {
}
/*
* Closure
*/
.region-page-closure /* See also the #page-wrapper declaration above that this div shares. */ {
}
/*
* Prevent overflowing content
*/
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer,
.region-page-closure {
overflow: visible;
word-wrap: break-word; /* A very nice CSS3 property */
}
overflow: hidden; /* May need to be removed if using a dynamic drop-down menu */
}
/*
* If a div.clearfix doesn't have any content after it and its bottom edge
* touches the bottom of the viewport, Firefox and Safari will mistakenly
* place several pixels worth of space between the bottom of the div and the
* bottom of the viewport. Uncomment this CSS property to fix this.
* Note: with some over-large content, this property might cause scrollbars
* to appear on the #page-wrapper div.
*/
/*
#page-wrapper {
overflow-y: hidden;
}
*/
/* page-backgrounds.css */
/**
* @file
*
* The default layout method of Zen doesn't give themers equal-height columns.
* However, equal-height columns are difficult to achieve and totally
* unnecessary. Instead, use the Faux Columns method described in the following
* ALA article:
* http://www.alistapart.com/articles/fauxcolumns/
*/
}
#page-wrapper {
}
}
}
#header .section {
}
#main-wrapper {
}
}
}
#footer .section {
/**
* @file
* Tabs Styling
*
* Adds styles for the primary and secondary tabs.
*
* Compare this with default CSS found in the system module's stylesheet (a copy
* of which is in drupal6-reference.css, line 510.)
*/
margin: 0 0 5px 0;
}
margin: 0;
padding: 0 0 0 10px; /* LTR */
border-width: 0;
list-style: none;
white-space: nowrap;
line-height: normal;
background: url(../images/tab-bar.png) repeat-x left bottom;
}
float: left; /* LTR */
margin: 0;
padding: 0;
}
display: block;
height: 24px;
margin: 0;
padding: 0 0 0 5px; /* width of tab-left.png */
border-width: 0;
font-weight: bold;
text-decoration: none;
color: #777;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left -38px;
}
display: block;
height: 20px; /* 24px (parent) - 4px (padding) */
margin: 0;
padding: 4px 13px 0 6px;
border-width: 0;
line-height: 20px;
background: url(../images/tab-right.png) no-repeat right -38px;
}
border-width: 0;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left -76px;
}
ul.primary li a:hover .tab {
background: url(../images/tab-right.png) no-repeat right -76px;
}
ul.primary li.active a,
ul.primary li.active a:hover {
border-width: 0;
color: #000;
background-color: transparent;
background: url(../images/tab-left.png) no-repeat left 0;
}
ul.primary li.active a .tab,
ul.primary li.active a:hover .tab {
background: url(../images/tab-right.png) no-repeat right 0;
}
margin: 0;
padding: 0 0 0 5px; /* LTR */
border-bottom: 1px solid #c0c0c0;
list-style: none;
white-space: nowrap;
background: url(../images/tab-secondary-bg.png) repeat-x left bottom;
}
float: left; /* LTR */
margin: 0 5px 0 0;
padding: 5px 0;
border-right: none; /* LTR */
}
display: block;
height: 24px;
margin: 0;
padding: 0;
border: 1px solid #c0c0c0;
text-decoration: none;
color: #777;
background: url(../images/tab-secondary.png) repeat-x left -56px;
}
display: block;
height: 18px; /* 24px (parent) - 6px (padding) */
margin: 0;
padding: 3px 8px;
line-height: 18px;
}
background: url(../images/tab-secondary.png) repeat-x left bottom;
}
ul.secondary a.active,
ul.secondary a.active:hover {
border: 1px solid #c0c0c0;
color: #000;
background: url(../images/tab-secondary.png) repeat-x left top;
}
/**
* @file
* Message Styling
*
* Sensible styling for Drupal's error/warning/status messages.
*/
div.status,
div.warning,
div.error /* Important messages (status, warning, and error) for the user */ {
min-height: 21px;
margin: 0 1em 5px 1em;
border: 2px solid #ff7;
padding: 5px 5px 5px 35px; /* LTR */
color: #000;
background-color: #ffc;
background-image: url(../images/messages-status.png);
background-repeat: no-repeat;
background-position: 5px 5px; /* LTR */
}
div.status /* Normal priority messages */ {
}
div.warning /* Medium priority messages */ {
border-color: #fc0;
background-image: url(../images/messages-warning.png);
}
div.warning,
color: #000; /* Drupal core uses #220 */
background-color: #ffc;
}
div.error /* High priority messages. See also the .error declaration in pages.css. */ {
/* border: 1px solid #d77; */ /* Drupal core uses: 1px solid #d77 */
border-color: #c00;
background-image: url(../images/messages-error.png);
}
div.error,
color: #900; /* Drupal core uses #200 */
background-color: #fee;
}
margin-top: 0;
margin-bottom: 0;
}
/**
* @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
*/
margin: 0;
}
#page-wrapper {
}
}
* 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 .section {
}
#logo /* Wrapping link for logo */ {
float: left; /* LTR */
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,
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 {
}
}
/*
* 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 */
}
/* 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;
}
margin: 0;
display: inline;
}
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 {