.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}

/**
 * @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
 * articles:
 * - http://www.alistapart.com/articles/howtosizetextincss
 * - http://24ways.org/2006/compose-to-a-vertical-rhythm
 *
 * All modern browsers 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.
 */
body {
  font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
}

#skip-to-nav,
#page {
  /*
   * 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 14px base font size with a 21px line height */
  font-size: 0.875em; /* 16px x .875 = 14px */
  line-height: 1.5em; /* 14px x 1.5 = 21px */

  /* Use a 12px base font size with a 18px line height */
  font-size: 0.75em; /* 16px x .75 = 12px */
  line-height: 1.5em; /* 12px x 1.5 = 18px */
}

/*
 * Instead of relying on the fonts that are available on a user's computer, you
 * can use web fonts which, like images, are resources downloaded to the user's
 * browser. Because of the bandwidth and rendering resources required, web fonts
 * should be used with care.
 *
 * Numerous resources for web fonts can be found on Google. Here are a few
 * websites where you can find Open Source fonts to download:
 * - http://www.fontsquirrel.com/fontface
 * - http://www.theleagueofmoveabletype.com
 *
 * In order to use these fonts, you will need to convert them into formats
 * suitable for web fonts. We recommend the free-to-use Font Squirrel's
 * Font-Face Generator:
 *   http://www.fontsquirrel.com/fontface/generator
 *
 * The following is an example @font-face declaration. This font can then be
 * used in any ruleset using a property like this:  font-family: Example, serif;

@font-face {
  font-family: 'Example';
  src: url('../fonts/example.eot');
  src: url('../fonts/example.eot?iefix') format('eot'),
    url('../fonts/example.woff') format('woff'),
    url('../fonts/example.ttf') format('truetype'),
    url('../fonts/example.svg#webfontOkOndcij') format('svg');
  font-weight: normal;
  font-style: normal;
}

 */

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
   * and Nimbus Sans 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, serif or
   * monospace) 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: "Georgia", "Times New Roman", "DejaVu Serif", "Times", serif;
  color: #614530;
}

pre,
code,
kbd,
samp,
tt,
var {
  font-family: "Courier New", "DejaVu Sans Mono", monospace;
}

/*
 * Block-level elements
 *
 * To achieve a pleasant vertical rhythm, we use the 1.5em line height of our
 * base font as the top and bottom margins for our block level elements and make
 * the line heights of any larger fonts be a multiple of 1.5 ems. For more
 * information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
ul,
ol,
dl,
hr,
table,
fieldset {
  margin: 1.5em 0;
}

/* Headings */
h1 {
  font-size: 2em;
  line-height: 1.5em;
  margin: 0.75em 0;
  /* 0.75em is equivalent to 1.5em in the page's base font. 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 1.5em margin (relative
     to the base font), we have to divide that length by the element's
     font-size:  1.5em / 2em = 0.5em  */
}

h2 {
  font-size: 1.5em;
  margin: 1em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.5 = 1em */
}

h3 {
  font-size: 1.3em;
  margin: 1.154em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.3 = 1.154 */
}

h4,
h5,
h6 {
  font-size: 1.1em;
  margin: 1.364em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364 */
}

blockquote {
  margin-left: 2em;
  margin-right: 2em;
}

pre {
  font-size: 1.1em; /* Monospace fonts can be hard to read */
  margin: 1.364em 0; /* Equivalent to 1.5em in the page's base font: 1.5 / 1.1 = 1.364 */
}

hr {
  height: 1px;
  border: 1px solid #666;
}

/*
 * Lists
 *
 * We need to standardize the list item indentation.
 */
ul,
ol {
  margin-left: 0; /* LTR */
  padding-left: 2em; /* LTR */
}

.item-list ul /* Drupal overrides */ {
  margin: 1.5em 0;
  padding: 0 0 0 2em; /* LTR */
}

ul ul,
ul ol,
ol ol,
ol ul,
.item-list ul ul,
.item-list ul ol,
.item-list ol ol,
.item-list ol ul {
  margin: 0;
}

li {
  margin: 0;
  padding: 0;
}

.item-list ul li,
ul.menu li,
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;
}

dt {
  margin: 0;
  padding: 0;
}

dd {
  margin: 0 0 0 2em; /* LTR */
  padding: 0;
}

/*
 * 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.)
 */
table {
  border-collapse: collapse;
}

th {
  text-align: left; /* LTR */
  padding: 0;
  border-bottom: none;
}

tbody {
  border-top: none;
}

/*
 * Forms
 */
form {
  margin: 0;
  padding: 0;
}

fieldset {
  padding: 0.5em;
}

/*
 * 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:link {
  color: #336699;
}

a:visited {
  color: #336699;
}

a:hover,
a:focus {
  color: #336699;
  text-decoration: none;
}

a:active {
  color: #336699;
}

/*
 * Other inline elements
 */
img {
  border: 0;
}

abbr, /* Abbreviations */
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
  white-space: nowrap;
}

/**
 * @file
 * Block Styling
*/

.block {
  margin-bottom: 1.5em;
}

#block-block-1 {
  margin: 0 0 3em 0;
}

#block-system-main-menu {
  margin: -6.8em 0 0 -60px;
}

#block-system-main-menu .content ul li {
  list-style: none;
  list-style-image: none;
}

#block-system-main-menu .content ul li a {
  display: block;
  text-indent: -9999px;
  background-position: 0 100%;
}

#block-system-main-menu .content ul li a:hover,
#block-system-main-menu .content ul li a.active {
  background-position: 0 0;
}

/* etusivu */
.menu-221 a {
  width: 178px;
  height: 44px;
  margin: 0 0 15px 0;
  background-image: url("../images/home.png");
}

/* vihkiminen */
.menu-315 a {
  width: 222px;
  height: 42px;
  background-image: url("../images/vihkiminen.png");
}

/* hääjuhla */
.menu-316 a {
  width: 208px;
  height: 128px;
  background-image: url("../images/haajuhla.png");
}

/* ajo-ohjeet */
.menu-317 a {
  width: 176px;
  height: 88px;
  background-image: url("../images/ajo-ohjeet.png");
}

/* ilmoittautuminen */
.menu-328 a,
.menu-354 a {
  width: 214px;
  height: 82px;
  margin: -15px 0 0 0;
  background-image: url("../images/ilmoittautuminen.png");
}

/* kuvat */
.menu-393 a {
  width: 183px;
  height: 94px;
  background-image: url("../images/kuvat-2.png");
}

/* lahjat */
.menu-394 a {
  width: 168px;
  height: 93px;
  background-image: url("../images/lahjat.png");
}

/* hotel */
.menu-320 a {
  width: 209px;
  height: 180px;
  background-image: url("../images/hotel.png");
}

/* keskustelu */
.menu-321 a {
  width: 206px;
  height: 135px;
  margin: -55px 0 0 0;
  background-image: url("../images/keskustelu.png");
}

#block-system-main {
  line-height: 2em;
}

/* recent articles */
#block-article-recent .node-title {
  text-align: center;
}

#block-article-recent .node-title a {
  color: #614530;
  text-align: center;
  text-decoration: none;
}

#block-article-recent .node-title a:hover {
  color: #614530;
}

#block-article-recent .submitted {
  padding: 0.25em 0;
  border-bottom: 1px solid #614530;
  border-top: 1px solid #614530;
  text-align: center;
}

/**
 * @file
 * Comment Styling
 */

#comments /* Wrapper for the list of comments and its title */ {
  margin: 1.5em 0;
}

.comment /* Wrapper for a single comment */ {
  width: 500px;
  margin: 0 0 20px 0;
  font-family: "Special Elite", cursive;
  font-size: 1.1em;
  background-image: url("../images/conversation-center.jpg");
  background-repeat: repeat-y;
  box-shadow: 5px 5px 5px #666666;
}

.comment-preview /* Preview of the comment before submitting new or updated comment */ {
  background-color: #ffffea; /* Drupal core will use a #ffffea background. See #1110842 */
}

.new /* "New" marker for comments that are new for the current user */ {
  color: #c00;
}

.comment .comment-top {
  background-image: url("../images/conversation-top.jpg");
  background-repeat: no-repeat;
}
.comment .comment-top h2 {
  margin: 0 20px;
  padding: 25px 0 15px;
  border-bottom: 1px solid black;
  font-family: "Stoke", serif;
  font-size: 1.2em;
  text-align: center;
}

.comment .author {
  float: left;
  width: 100px;
  height: 100%;
  min-height: 60px;
  margin: 0 0 0 20px;
  padding: 10px 0 0 10px;
}

.comment .subject {
  float: left;
  width: 160px;
  height: 100%;
  min-height: 60px;
  margin: 0;
  padding: 10px 0 0 10px;
  border-collapse: collapse;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.comment .subject a {
  color: #614530;
  text-decoration: none;
}

.comment .created {
  float: right;
  width: 170px;
  height: 100%;
  min-height: 60px;
  margin: 0 20px 0 0;
  padding: 10px 0 0 0;
}

.comment .author strong,
.comment .subject strong,
.comment .created strong {
  display: block;
  margin: 0 0 0.5em 0;
  font-family: "Stoke", serif;
  font-size: 0.9em;
}

.comment .content {
  clear: both;
  min-height: 92px;
  padding: 0 20px 25px;
  background-image: url("../images/conversation-bottom.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.comment .content .field-name-comment-body {
  border-top: 1px solid black;
}
#content .section .comment .content .field-name-comment-body p {
  line-height: 1.6em;
}

/**
 * @file
 * Form Styling
*/

.form-item /* Wrapper for a form element (or group of form elements) and its label */ {
  margin: 1.5em 0;
}

.form-item input.error,
.form-item textarea.error,
.form-item select.error /* Highlight the form elements that caused a form submission error */ {
  border: 1px solid #c00;
}

.form-item label /* The label for a form element */ {
  display: block;
  font-weight: bold;
}

.form-item label.option /* The label for a radio button or checkbox */ {
  display: inline;
  font-weight: normal;
}

.form-required /* The part of the label that indicates a required field */ {
  color: #c00;
}

.form-item .description /* The descriptive help text (separate from the label) */ {
  font-size: 0.85em;
}

.form-checkboxes .form-item,
.form-radios .form-item /* Pack groups of checkboxes and radio buttons closer together */ {
  margin: 0; /* Drupal core uses "0.4em 0" */
}

.container-inline div,
.container-inline label /* Inline labels and form divs */ {
  display: inline;
}

/*
 * Password confirmation
*/
.password-parent,
.confirm-parent {
  margin: 0;
}

/*
 * Drupal's default login form block
*/
#user-login-form {
  text-align: left; /* LTR */
}

/*
 * OpenID
 *
 * The default styling for the OpenID login link seems to assume Garland's
 * styling of list items.
*/

#user-login-form ul /* OpenID creates a new ul above the login form's links. */ {
  margin-bottom: 0; /* Position OpenID's ul next to the rest of the links. */
}

html.js #user-login-form li.openid-link,
#user-login-form li.openid-link /* The "Log in using OpenID" link. */ {
  margin-top: 1.5em;
  margin-left: -20px; /* LTR */ /* Un-do some of the padding on the ul list. */
}

#user-login-form li.user-link /* The "Cancel OpenID login" link. */ {
  margin-top: 1.5em;
}

#user-login ul {
  margin: 1.5em 0;
}

/*
 * Drupal admin tables
 *
 * We overrode these styles in html-reset.css, but restore them for the admin
 * section of the site.
*/

form th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
}

form tbody {
  border-top: 1px solid #ccc;
}

form tr.even {
  background-color: #fff;
}

form table .item-list ul {
  margin: 0;
}

/* Comment form */
#comment-form {
  padding: 0;
  background-image: url("images/mina_rakastan_sinua.png");
  background-repeat: no-repeat;
  box-shadow: none;
  font-family: "Courier New", "Courier", "Times New Roman", "Times", serif;
  font-weight: bold;
}

#comment-form .form-text,
#comment-form .form-textarea {
  padding: 0.1em 0.4em;
  background-color: transparent;
  background-image: url("../images/input-white-background.png");
  border-radius: 25px 10px 25px 10px / 10px 25px 10px 25px;
  color: #614530;
}

#comment-form label {
  float: left;
  width: 3em;
  text-transform: uppercase;
}

#comment-form .form-type-textarea label {
  float: none;
  width: auto;
}

#comment-form .form-text {
  width: 400px;
}

#comment-form .form-textarea {
  width: 450px;
  overflow: auto;
}

#comment-form .grippie {
  display: none;
  width: 450px;
}

#comment-form #edit-actions {
  position: relative;
  height: 80px;
}

#comment-form #edit-actions #edit-submit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 179px;
  height: 104px;
  border: none;
  background-color: transparent;
  background-image: url("../images/conversation-submit.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -9999px;
  cursor: pointer;
}

#comment-form #edit-actions #edit-submit:hover {
  background-position: 0 100%;
}

/* Gift form */
#gift-form {
  margin: 0 0.7em;
  padding: 0;
  font-family: "Homemade Apple", cursive;
  line-height: 1em;
}

#gift-form .form-item {
  margin: 0;
  padding: 0;
}

#gift-form table {
  margin: 0;
  padding: 0;
  line-height: 2em;
  background-image: url("../images/gift-background.jpg");
  box-shadow: 5px 5px 5px #666666;
}

#gift-form table thead {
  margin: 0;
  padding: 0;
  background-image: url("../images/gift-background-top.jpg");
  background-repeat: no-repeat;
}

#gift-form table thead tr th {
  margin: 0;
  padding: 0 1em;
  border: none;
  font-family: "Homemade Apple", cursive;
  font-weight: normal;
  text-align: center;
}

#gift-form table thead tr th h2 {
  margin: 0 0 2em 0;
  padding: 1em 0 1.25em 0;
  font-family: "Homemade Apple", cursive;
  font-size: 2em;
  font-weight: normal;
  text-align: center;
  background-image: url("../images/gift-background-title.png");
  background-repeat: no-repeat;
  background-position: center bottom;
}

#gift-form table tbody {
  border: none;
  background-image: url("../images/gift-background-bottom.jpg");
  background-repeat: no-repeat;
  background-position: 0 100%;
}

#gift-form table tbody tr td {
  margin: 0;
  padding: 0.5em 1em 0.5em 1em;
  font-family: "Homemade Apple", cursive;
  text-align: center;
  line-height: 1em;
}

#gift-form table tbody tr.submit td:first-child {
  padding-right: 0;
  padding-bottom: 1em;
  text-align: right;
}

#gift-form table tbody tr.submit td span {
  padding-right: 1.5em;
}

#gift-form table tbody tr.submit td input {
  width: 140px;
  height: 118px;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  text-indent: -9999px;
  background-color: transparent;
  background-image: url("../images/gift-background-button.png");
  background-position: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

#gift-form table tbody tr.submit td input:hover {
  background-position: 0 0;
}

#gift-form select {
  font-family: "Courier New", "Courier", "Times New Roman", "Times", serif;
}

#gift-form table thead tr th:first-child,
#gift-form table tbody tr td:first-child {
  width: 65%;
  text-align: left;
}

/**
 * @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
 */

#page-wrapper,
.region-bottom {
  /*
   * 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: 831px;
}

/*
 * Main (container for everything else)
 */
#main-wrapper {
  position: relative;
}

/*
 * Content
 */
#content,
.no-sidebars #content {
  float: left; /* LTR */
  width: 831px;
  margin-left: 0; /* LTR */
  margin-right: -831px; /* 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: 651px;
  margin-left: 180px; /* LTR */ /* The width of .region-sidebar-first. */
  margin-right: -831px; /* LTR */ /* Negative value of #content's width + left margin. */
}

.sidebar-second #content {
  width: 631px;
  margin-left: 0; /* LTR */
  margin-right: -631px; /* LTR */ /* Negative value of #content's width + left margin. */
}

.two-sidebars #content {
  width: 481px;
  margin-left: 100px; /* LTR */ /* The width of .region-sidebar-first */
  margin-right: -631px; /* LTR */ /* Negative value of #content's width + left margin. */
}

#content .section {
  margin: 0;
  padding: 0;
}

/*
 * Navigation
 */
#navigation {
  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: 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: 3em; /* Set this to the same value as the navigation height above. */
}

/*
 * First sidebar
 */
.region-sidebar-first {
  float: left; /* LTR */
  width: 90px;
  margin-left: -20px; /* LTR */
  margin-right: -90px; /* 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 {
  float: left; /* LTR */
  width: 180px;
  margin-left: 751px; /* LTR */ /* Width of content + sidebar-first. */
  margin-right: -831px; /* 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;
}

/*
 * Prevent overflowing content
 */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-bottom {
  overflow: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}

/**
 * @file
 * Navigation Styling
 */

/*
 * The active item in a Drupal menu
 */
li a.active {
  color: #000;
}

#navigation ul.links, /* Main menu and secondary menu links */
 #navigation .content ul /* Menu block links */ {
  margin: 0;
  padding: 0;
  text-align: left; /* LTR */
}

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
 #navigation .content li {
  float: left; /* LTR */
  padding: 0 10px 0 0; /* LTR */
}

/**
 * @file
 * Node Styling
 *
 * Style anything that isn't in the $content variable.
 */

.node-unpublished div.unpublished,
 .comment-unpublished div.unpublished /* The word "Unpublished" displayed underneath the content. */ {
  height: 0;
  overflow: visible;
  color: #d8d8d8;
  font-size: 75px;
  line-height: 1;
  font-family: Impact, "Arial Narrow", Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  word-wrap: break-word; /* A very nice CSS3 property */
}

#kirkko-1,
#haajuhla-1,
#majoitus-1,
#majoitus-2,
#p-kirkko-1 {
  float: right;
  margin: 0 0 0 1em;
}

#kirkko-2,
#haajuhla-2 {
  float: left;
  margin: 0 1em 0 0;
}

#p-kirkko-1 {
  margin: 0 0 0 1.5em;
}

.underline {
  text-decoration: underline;
}

/**
 * @file
 * Page Background Styling
 *
 */

body {
  background-image: url("../images/background-body.jpg");
}
#page-wrapper {
  background-image: url("../images/background-page-wrapper.jpg");
}
#page {
  background-image: url("../images/background-page.png");
}
#flowers-left {
  background-image: url("../images/flowers-left.png");
}
#flowers-right {
  background-image: url("../images/flowers-right.png");
}

/**
 * @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 {
  margin: 75px auto;
  border: 7px solid #ffffff;

  /* CSS3 */
  -moz-box-shadow: 0px 0px 5px #4a4440;
  -webkit-box-shadow: 0px 0px 5px #4a4440;
  box-shadow: 0px 0px 5px #4a4440;
}

#page {
  position: relative;
  margin: 15px;
}

#flowers-left {
  position: absolute;
  width: 387px;
  height: 230px;
  top: -55px;
  left: -95px;
}
#flowers-right {
  position: absolute;
  width: 543px;
  height: 601px;
  top: -110px;
  right: -79px;
}

#taila {
  position: relative;
  top: 37px;
  left: 53px;
}
#et {
  position: relative;
  top: 78px;
  left: 61px;
}
#heikki {
  position: relative;
  top: 125px;
  left: 66px;
}
#date {
  position: relative;
  top: 155px;
  left: 12px;
}

/*
 * The skip-link link will be completely hidden until a user tabs to the link.
 * See the element-focusable rule in system.base.css.
*/
#skip-link a,
#skip-link a:visited {
  display: block;
  width: 100%;
  padding: 2px 0 3px 0;
  text-align: center;
  background-color: #666;
  color: #fff;
}

/*
 * Header
*/
#header {
  height: 250px;
  text-align: center;
}

#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 */ {
  float: left;
}

h1#site-name,
div#site-name /* The name of the website */ {
  margin: 0;
  font-size: 2em;
  line-height: 1.5em;
}

#site-name a:link,
#site-name a:visited {
  color: #000;
  text-decoration: none;
}

#site-name a:hover,
#site-name a:focus {
  text-decoration: underline;
}

.region-header /* Wrapper for any blocks placed in the header region */ {
  clear: both; /* Clear the logo */
}

/*
 * Content
*/
#content {
  min-height: 800px;
}

#content .section {
  margin: 0 0 0 0;
  padding: 0 11.2em 20px 0;
  z-index: 1000;
}

#content .section h1 {
  margin: 0 0 0.4em 0;
  padding: 0 0 0 0;
  border-bottom: 1px solid #614530;
  color: #614530;
  font-family: "Parchment", "Georgia", "Times New Roman", "Times", serif;
  font-size: 6em;
  font-weight: normal;
  line-height: 1.1em;
}

#content .section p {
  margin: 1.5em 0 0 0;
  line-height: 200%;
}

.breadcrumb /* The path to the current page in the form of a list of links */ {
  padding-bottom: 0; /* Undo system.css */
}

div.messages /* Important messages (status, warning, and error) for the user. See also the declarations in messages.css. */ {
  margin: 1.5em 0; /* Drupal core uses "6px 0" margin */
}

div.messages ul {
  margin-top: 0;
  margin-bottom: 0;
}

ul.links.inline {
  display: block; /* Let the links be inline, but the container be a block. */
}

ul.links li {
  padding: 0 1em 0 0; /* LTR */
}

.item-list .pager /* A list of page numbers when more than 1 page of content is available */ {
  padding: 0;
}

.item-list .pager li /* Each page number in the pager list */ {
  padding: 0 0.5em;
}

#gift-reservation-cancel-link {
  display: block;
  margin: 1em 0 0 0;
  text-align: right;
}

.gallery a {
  display: inline-block;
  width: 90px;
  height: 90px;
  margin: 5px;
  text-align: center;
}

.gallery a img {
  padding: 2px;
  border: 1px solid #898989;
  vertical-align: middle;
  background-color: #eeeeee;
}

/* Registration form */

#registration-help {
  margin: 0 0 2em 0;
}
#add-guest {
  height: 4em;
}

#registration-form .form-item {
  float: left;
  margin: 0 0 0 0;
  padding: 0;
}

#registration-form .form-item input,
#registration-form .form-item select {
  width: 100px;
}

#registration-form .form-item-firstname input {
  width: 115px;
  margin: 0 5px 0 0;
  padding: 2px;
}

#registration-form .form-item-lastname {
  float: left;
}

#registration-form .form-item-lastname input {
  width: 115px;
  margin: 0 5px 0 0;
  padding: 2px;
}

#registration-form .form-item-age-group {
  float: left;
}

#registration-form .form-item-age-group select {
  width: 115px;
  margin: 0 5px 0 0;
  padding: 2px;
}

#registration-form .form-type-textarea {
  float: none;
  display: block;
  margin: 1em 0 0 0;
}

#edit-add {
  float: left;
  margin: 17px 0 0 0;
}

#card-container {
  position: relative;
  width: 542px;
  height: 360px;
  margin: 10px 0 0 0;
  padding: 0 0 0 46px;
  background-image: url("../images/card-container.png");
  background-repeat: no-repeat;
  background-position: 0 100%;
}

#card-top {
  background-image: url("../images/card-top.jpg");
  background-repeat: no-repeat;
  height: 6px;
  width: 459px;
}

#card-content {
  background-image: url("../images/card-content.jpg");
  min-height: 280px;
  padding-left: 10px;
  width: 449px;
}

#card-content-left .item-list ul {
  margin: 0;
  padding: 0;
  font-family: "Courier New", "Courier", "Times New Roman", "Times", serif;
  color: #614530;
  font-size: 14px;
}

#card-content-left .item-list ul li {
  margin: 0 0 0.5em;
  padding: 0;
  list-style: none;
  list-style-image: none;
}

#card-content-left label {
  font-family: "Courier New", "Courier", "Times New Roman", "Times", serif;
  color: #614530;
  font-size: 14px;
  font-weight: normal;
}

#card-content-left textarea {
  width: 215px;
  height: 67px;
  border: 1px solid #b6a294;
  font-family: "Courier New", "Courier", "Times New Roman", "Times", serif;
  color: #614530;
  font-size: 14px;
  background-color: transparent;
}

#card-content-left .grippie {
  display: none;
}

#card-content-right {
  float: right;
  width: 224px;
}

#card-stamp {
  float: right;
  clear: both;
  width: 52px;
  height: 70px;
  margin: 0 1em 1em 0;
  background-image: url("../images/card-stamp.jpg");
  background-repeat: no-repeat;
}

#card-address {
  float: right;
  clear: both;
  width: 222px;
  height: 190px;
  background-image: url("../images/card-address.jpg");
  background-repeat: no-repeat;
}

#card-content p {
  margin: 0;
  padding: 0;
  font-family: "Courier New", "Courier", "Times New Roman", "Times", serif;
  color: #614530;
  font-size: 14px;
}

#card-bottom {
  width: 459px;
  height: 9px;
  background-image: url("../images/card-bottom.jpg");
  background-repeat: no-repeat;
}

#edit-send {
  position: absolute;
  bottom: 0;
  right: 80px;
  width: 100px;
  height: 126px;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  text-indent: -9999px;
  background-color: transparent;
  background-image: url("../images/card-mailbox.png");
  background-repeat: no-repeat;
}

#edit-send:hover {
  background-position: 0 100%;
}

#registration-completed {
  padding: 0 0 310px 163px;
  background-image: url("../images/mailman.png");
  background-repeat: no-repeat;
  line-height: 200%;
}

/**
 * @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.)
 */

div.tabs {
  margin: 0 0 0 0;
}

ul.primary {
  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;
}

ul.primary li {
  float: left; /* LTR */
  margin: 0;
  padding: 0;
}

ul.primary li a {
  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: url(../images/tab-left.png) no-repeat left -38px;
}

ul.primary li a .tab {
  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;
}

ul.primary li a:hover,
ul.primary li a:focus {
  border-width: 0;
  background: url(../images/tab-left.png) no-repeat left -76px;
}

ul.primary li a:hover .tab,
ul.primary li a:focus .tab {
  background: url(../images/tab-right.png) no-repeat right -76px;
}

ul.primary li.active a,
ul.primary li.active a:hover,
ul.primary li.active a:focus {
  border-width: 0;
  color: #000;
  background: url(../images/tab-left.png) no-repeat left 0;
}

ul.primary li.active a .tab,
ul.primary li.active a:hover .tab,
ul.primary li.active a:focus .tab {
  background: url(../images/tab-right.png) no-repeat right 0;
}

ul.secondary {
  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;
}

ul.secondary li {
  float: left; /* LTR */
  margin: 0 5px 0 0;
  padding: 5px 0;
  border-right: none; /* LTR */
}

ul.secondary a {
  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;
}

ul.secondary a .tab {
  display: block;
  height: 18px; /* 24px (parent) - 6px (padding) */
  margin: 0;
  padding: 3px 8px;
  line-height: 18px;
}

ul.secondary a:hover,
ul.secondary a:focus {
  background: url(../images/tab-secondary.png) repeat-x left bottom;
}

ul.secondary a.active,
ul.secondary a.active:hover,
ul.secondary a.active:focus {
  border: 1px solid #c0c0c0;
  color: #000;
  background: url(../images/tab-secondary.png) repeat-x left top;
}

/**
 * @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 .region-footer,
.with-wireframes .region-bottom {
  outline: 1px solid #ccc;
}