/* ==========================================================================
   Template:	CABRIOLO
   Version: 	1.0 for Joomla 3+
   Created: 	August 2014

   Author: 	Sandra Armbruster
   Copyright:	Cabriolo - (C) 2014



/** Correct `block` display not defined in IE 8/9. **/
article,
aside,
details,
figcaption,
figure,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/** Correct `inline-block` display not defined in IE 8/9. **/
audio,
canvas,
video {
  display: inline-block; }

/*
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/*
 * Address styling not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif;
  font-weight: normal;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }
/*
 * Remove default margin.
 */
body {
  margin: 0;  background-color: #EAE6E3 !important; font-family: "Droid Sans", sans-serif; color: #0c2f36;
  }
.wrapper { background-color: #fff; }
/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/*
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; color: #103035; }

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */


/*
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/*
 * Address style set to `500er` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: 700; }

/*
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/*
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/*
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/*
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/*
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap; }

/*
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/*
 * Address inconsistent and variable font size in all browsers.
 */
.small {
  font-size: 75%; font-weight: 300; }


/*
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/*
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/*
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/*
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal; }

/*
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none; }

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/*
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  */ }

/*
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* Ethereal items like mixins, and helpers like float or clearfix. */
/* ==========================================================================
    HELPER CLASSES
   ========================================================================== */
/* Clearfix the parent of floated elements to prevent it collapsing. */
.clearfix:before, .media.media-content:before, .well:before, .clearfix:after, .media.media-content:after, .well:after {
  content: "";
  display: table; }
.clearfix:after, .media.media-content:after, .well:after {
  clear: both; }

/* Hide an element but leave it available to speaking browsers. */
.visuallyhidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

/* Make visuallyhidden elements focusable with a keyboard. */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible; }

/* Image replacement. */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden; }

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%; }

/* Mute an object by reducing its opacity. */
.muted, .article-meta {
  filter: alpha(opacity=70) !important;
  opacity: 0.7 !important; }

/* Add/remove floats */
.float-right, .img-right, .media .media-object-right {
  float: right; }

.float-left, .img-left, .media .media-object {
  float: left; }

.float-none {
  float: none !important; }



/*
 * The following rules contain generic styles of the type applicable primarily
 * to named html elements, like <body>, <table> , or to stylistic classes
 * that can be applied to various objects.
 */
/* ==========================================================================
    ROOT
   ========================================================================== */
/*
 * Border-box *all the things*, as suggested in:
 * http:// paulirish.com/2012/box-sizing-border-box-ftw
 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

/* Define the root element styles. */
html {
  font: 100%/1.45 'InfoTextWebPro', sans-serif;
  font-weight: normal;
  background-color: #ffffff;
  color: #222;
  min-height: 100%;
  overflow-y: scroll;
  font-smooth: always;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -webkit-overflow-scrolling: touch;
}

/* Style the body element styles. */
body {
  -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   hyphenate-limit-chars: auto 3;
	hyphenate-limit-lines: 2;
  background-color: #ffffff;
   }

/* Colour selected text. */
::-moz-selection {
  background-color: #0c2f36;
  color: #fff;
  text-shadow: none; }

::selection {
  background-color: #0c2f36;
  color: #fff;
  text-shadow: none; }

/* This needs to override default root font size, so we load it after. */
/* ==========================================================================
    FLUID TYPE
   ========================================================================== */
/* Slowly increase root font size with viewport */
@media only screen and (min-width: 90em) {
  html {
    /*font-size: 102%;*/ } }

/* ==========================================================================
   	CODE
   ========================================================================== */
pre,
code,
kbd,
samp {
  font-family: monospace; }

pre {
  background-color: #fcfcfc;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 1em; }


/* ==========================================================================
    FORMS
   ========================================================================== */
/* Some form basics. */
form input,
form select,
form textarea {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
form ul {
  list-style-type: none;
  margin-bottom: 0; }

/* Remove default fieldset styles. */
fieldset {
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 1.618em;
  background-color: #E5EFF9;
  }

input,
textarea {
  display: block;
  margin-bottom: 0.809em; }

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
textarea {
  border: 1px solid #eeeeee;
  padding: 0.4045em;
  border-radius: 3px; }
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="week"]:focus,
  input[type="time"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  textarea:focus {
    border: 1px solid #d4d4d4;
    outline: none;
    outline-width: 0; }

/* Allow only vertical resizing of textareas. */
textarea {
  resize: vertical; }

/* Make checkboxes and radio buttons display inline. */
label {
  display: inline-block; }

input[type="radio"],
input[type="checkbox"] {
  display: inline-block;
  margin-left: 0.4045em;
  margin-right: 0.4045em; }

select {
  height: 2em;
  border: 1px solid #eeeeee; }

progress,
meter {
  display: block;
  width: 100%;
  height: 1.618em; }

/* ==========================================================================
    HEADINGS
   ========================================================================== */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  -moz-hyphens: manual;
   -o-hyphens: manual;
   -webkit-hyphens: manual;
   -ms-hyphens: manual;
   hyphens: manual;

  color: #0e1e39;
  font-weight: 500;
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1;
  -o-font-feature-settings: "liga" 1, "dlig" 1;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
  font-feature-settings: "liga" 1, "dlig" 1; }

/* Heading sizes are set with a mixin to maintain vertical rhythm. */
h1,
.h1 {
  font-size: 2.5em;
  margin: 0;
  padding: 1.5em 0 1em 2em;
  font-weight: bold;
}

h2,
.h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 1.45em;
  line-height: 1.43822;
  margin: 2em 0 1em 0;
}

h3,
.h3 {
  font-style: normal;
  font-weight: bold;
  font-size: 1.15em;
  line-height: 1.5em;
  margin: 1.5em 0 0.15em 0; }

h4,
.h4 {
   font-style: normal;
  font-weight: normal;
  font-size: 1.15em;
  line-height: 1.43822;
  margin: 1em 0 1em 0;
  color: #777;
}

h5,
.h5 {
  font-size: 1em;
  line-height: 1.43822;
  margin-top: 0;
  margin-bottom: 1.43822em; }

h6,
.h6 {
  font-size: 1em;
  line-height: 1.618;
  margin-top: 0;
  margin-bottom: 1.618em; }

/* ==========================================================================
    IMAGES
   ========================================================================== */
/* Fluid images. */
img {
  max-width: 100%;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }

/* Don't ignore `width` and/or `height` attributes if they are present. */
img[width],
img[height] {
  max-width: none; }

/*
 * Image placement variations, used in Joomla's article image layouts.
 *
 * Of course, floated images typically need a margin so we extend the
 * generic floatr classes here.
 */
.img-right, .media .media-object-right {
  margin-left: 1.618em; }

.img-left, .media .media-object {
  margin-right: 1.618em; }

.img-center, .img-none img {
  display: block;
  margin-left: auto;
  margin-right: auto; }

/* Joomla has no center option, using "none" instead. Go figure. */
/* ==========================================================================
    LINKS
   ========================================================================== */
a {
  /*-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;*/
  color: #6BBE4D;
  text-decoration: none; }



/* Back to top link. */
a.to-top {
  bottom: 0;
  color: #FE8F01;
  cursor: pointer;
  line-height: 1;
  padding: 0.809em;
  position: fixed;
  right: 0; }

/* ==========================================================================
    LISTS
   ========================================================================== */
/*
 * There's a reason it's called 'hanging punctuation', bullets should be indented.
 * See: http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-2

 * for an explanation why. The following kills browser default indents. Nice.
 */
ul,
ol,
dl {
  padding: 0; }

/* A little style maestro! */
/*ul {*/
  /*list-style-type: none; margin: 1em 0 0.25em 0; list-style-image: url(/templates/bavc/images/bullet.gif); }*/

ul ul { font-size: 0.95em;  }

/* We don't need vertical space in nested lists, but we do need to add
* the default indent we removed above! */
li {
  vertical-align: middle;
  margin: 0 0 0.5em 2em;
  padding: 0 0 0.25em 0;
  color: #000;
  }




/* ==========================================================================
    RULES
   ========================================================================== */
hr {
  border: 0;
  border-top: 1px solid #eeeeee;
  display: block;
  height: 1px;
  margin: 1.618em 0;
  padding: 0; }


/* ==========================================================================
    TYPE SIZING
   ========================================================================== */
/*
 * Classes for super-sizing type without the semantics of h tags. Useful in
 * page banners and the like.
 *
 * Taken from Inuit.css' approach:
 * https://github.com/csswizardry/inuit.css/blob/master/base/_headings.scss
 */
.giga {
  font-size: 6em;
  line-height: 1.07867;
  margin-top: 0;
  margin-bottom: 0.26967em; }

.mega {
  font-size: 4.5em;
  line-height: 1.07867;
  margin-top: 0;
  margin-bottom: 0.35956em; }


/*
 * Classes for down-sizing type without the semantics of h or small tags.
 * Useful in article footers, for example.
 */
.milli, figure figcaption, cite {
  font-size: 0.83em;
  line-height: 1.9494;
  margin-top: 0;
  margin-bottom: 1.9494em; }

.micro {
  font-size: 0.75em;
  line-height: 2.15733;
  margin-top: 0;
  margin-bottom: 2.15733em; }

/* ==========================================================================
    TYPOGRAPHY
   ========================================================================== */
/* PARAGRAPHS */
/*
 * Numbers in paragraphs should kick it Old Skool:
 * http://webtypography.net/Harmony_and_Counterpoint/Numerals__Capitals_and_Small_Caps/3.2.1/
 *
 * And, as everyone knows, all paragraphs after the first one should be indented
 * by one en(2 x em) without a boundary, or one em with. See:
 *
 * http://webtypography.net/Rhythm_and_Proportion/Blocks_and_Paragraphs/2.3.2/
 *
 * and:
 *
 * http://v1.jontangerine.com/silo/typography/p/
 */
.article p {
  font-variant-numeric: oldstyle-nums;
  margin: 0.5em 0 0.5em 0;
}
  /*.article p + p {
    text-indent: 1em; }*/

/* Typically used in the first paragraph of an article, for added awesome. */
.intro {
  font-size: 1.3125em;
  line-height: 1.23276;
  margin-top: 0;
  margin-bottom: 1.23276em; }

/* BLOCK QUOTES */
/* Default margin indent is zeroed out and padded to allow styling of element. */
blockquote {
  margin-left: 0;
  padding: 0.809em 1.427em; }
  blockquote:before, blockquote:after {
    content: '';
    content: none; }
  blockquote p:last-of-type {
    margin-bottom: 0; }
  blockquote > cite,
  blockquote + cite {
    margin-bottom: 0; }

@media only screen and (min-width: 55em) {
	blockquote {
		width: 70%;
	}
 }

 @media only screen and (min-width: 65em) {
	blockquote {
		width: 32em;
	}
 }

/* CITATIONS */
cite {
  display: block;
  margin-top: 0.809em; }
  cite:before {
    content: "\2014";
    margin-right: 0.809em; }

/* INLINE QUOTES */
q {
  quotes: "\2018" "\2019" "\201C" "\201D"; }
  q:before {
    content: "\2018";
    content: open-quote; }
  q:after {
    content: "\2019";
    content: close-quote; }

/* ABBREVIATIONS */
/*
 * Should use small-caps and be letterspaced, obviously!
 * http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.6/
 */
abbr {
  font-variant: small-caps;
  letter-spacing: 0.1em; }

/*
 * The following are re-usable 'objects' that bring recurring CSS patterns
 * into discrete and easily maintainable modules.
 */
/* ==========================================================================
    BREADCRUMBS
   ========================================================================== */

.breadcrumb-row { margin: 0.5em 0 0 1.35em; }

 .breadcrumb-row  .module-inner{ padding-top: 0px; padding-bottom: 15px;}
.breadcrumb-row .module-header { display: inline-block; margin:0; padding:0;}

.breadcrumb-row .module-header h3 {
	font-size: 0.95em;
	line-height: 1em;
	color: #aaa;
	font-weight: 500;
	display: inline-block;
	margin: 0 0.75em 0 0;
}

.breadcrumb {
  font-size: 0.95em;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.breadcrumb li { display: inline; margin: 0.5em; vertical-align: bottom;}

.breadcrumb > li + li:before {
    content: "\00BB" "\00A0";
    padding: 0.25em 0 0 0; }

/* ==========================================================================
    BUTTONS
   ========================================================================== */

#system-message-container {
	background-color: #fee7cd;
       font-size: 1.1em;
	margin: 2em 5em 2em 5em;

}

#system-message{
	padding: 0.5em;
 }

.btn, .banner-row .download-link, .banner-row .respository-link,
.btn-primary,
.btn-success,
.banner-row .download-link,
.btn-danger,
.btn-info,
.btn-warning {
  float: left; color: #000;
  background-color: #BECBD8;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  font-weight: 500;
  line-height: 3;
  margin-right: 0.809em;
  margin-bottom: 1.618em;
  padding: 0 1em;
  vertical-align: middle;
  white-space: nowrap; }
  .btn:hover, .banner-row .download-link:hover, .banner-row .respository-link:hover,
  .btn-primary:hover,
  .btn-success:hover,
  .banner-row .download-link:hover,
  .btn-danger:hover,
  .btn-info:hover,
  .btn-warning:hover {
    text-decoration: none;
    background-color: #BECBD8; }
  .btn:active, .banner-row .download-link:active, .banner-row .respository-link:active, .btn:focus, .banner-row .download-link:focus, .banner-row .respository-link:focus,
  .btn-primary:active,
  .btn-primary:focus,
  .btn-success:active,
  .banner-row .download-link:active,
  .btn-success:focus,
  .banner-row .download-link:focus,
  .btn-danger:active,
  .btn-danger:focus,
  .btn-info:active,
  .btn-info:focus,
  .btn-warning:active,
  .btn-warning:focus {
    outline: none; }

/* BUTTON COLOURS */
.btn-primary,
.btn-success,
.banner-row .download-link,
.btn-danger,
.btn-info,
.btn-warning {
  color: #fff; }
  .btn-primary:hover,
  .btn-success:hover,
  .banner-row .download-link:hover,
  .btn-danger:hover,
  .btn-info:hover,
  .btn-warning:hover {
    color: #fff; }

.btn-primary, .btn-primary a {
  font-weight: 500;
  font-size: 1.15em;
  background-color: #428bca; color: #fff !important; }
  .btn-primary:hover {
    background-color: #428bca; color: #fff !important; }

.btn-success, .banner-row .download-link {
  background-color: #5cb85c; }
  .btn-success:hover, .banner-row .download-link:hover {
    background-color: #4cae4c; }

.btn-danger {
  background-color: #d9534f; }
  .btn-danger:hover {
    background-color: #d43f3a; }

.btn-info {
  background-color: #5bc0de; }
  .btn-info:hover {
    background-color: #46b8da; }

.btn-warning {
  background-color: #f0ad4e; }
  .btn-warning:hover {
    background-color: #eea236; }

/* BUTTON SIZING */
.btn-small {
  line-height: 2;
  padding: 0 0.5em; }

.btn-large {
  line-height: 4;
  padding: 0 1.5em; }

.btn-huge {
  line-height: 5;
  padding: 0 2em; }

/* ==========================================================================
    LABELS
   ========================================================================== */
.label,
.label-primary,
.label-success,
.label-danger,
.label-info {
  padding: .125em .25em;
  text-align: center;
  background-color: #fcfcfc;
  border-radius: 3px; }

/* LABEL COLOURS */
.label-primary {
  background-color: #428bca;
  color: #fff; }

.label-success {
  background-color: #5cb85c;
  color: #fff; }

.label-danger {
  background-color: #d9534f;
  color: #fff; }

.label-info {
  background-color: #5bc0de;
  color: #fff; }

.label-warning {
  background-color: #f0ad4e;
  color: #fff; }

/* ==========================================================================
    MEDIA
   ========================================================================== */
/* The media object abstraction, first proposed here:
 *
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 *
 * The media object here takes any element with a class of .media and
 * floats an image or anything with a .media-object class to the left
 * and gives it a right margin.
 *
 * To reverse this pattern, simply use .media-object-right.
 */
.media {
  margin-bottom: 1.618em; }
  .media .media-content {
    overflow: hidden; }
    .media .media-content:last-child {
      margin-bottom: 0; }
  .media .media-object-right {
    margin-right: 0; }

/* ==========================================================================
    JOOMLA MODULES
   ========================================================================== */
.module {
  /* Remove default bullets on lists inside modules */ }
  .module ul {
    list-style-type: none; }

/* ==========================================================================
    NAVIGATION
   ========================================================================== */
/* Remove list styles and throw child elements into a horizontal list. */
.nav, .breadcrumb, .pagination ul, .pagenav, .social, .actions {
  list-style: none; margin: 0; padding: 0; }
  .nav li, .pagination ul li, .pagenav li, .actions li {
    display: inline-block;  }
    .nav li a, .pagination ul li a, .pagenav li a, .actions li a {
      padding: 0.20225em;  }



/* Creates a vertical list of blocky, finger-friendly, links. */
.nav-stacked li,
.nav-stacked li a {
  display: block; }


.credit-row {
	margin: 2em 0 2em 0;
	border-top: 1px solid #0E1E38;
}

.copyright {
	margin: 0;
	letter-spacing: 0.02em;
}


.credit-row .nav a { color: #0E1E38; font-size: 0.85em; letter-spacing: 0.02em; margin: 0 1.5em 0 0; }
.footer .nav { margin: 2em 0 0 0; }
.footer .nav li { margin: 0.25em 0 0 0; width: 100%; padding: 0; }

 @media only screen and (min-width: 40em) {
	.copyright { float: left; 	margin: 0 3em 0 0; }
	.credit-row .nav { float: right; text-align: right; margin: 0 0 0 3em; }
	.footer .nav li { margin: 0.25em 0 0 0; width: auto; padding: 0; }
	.credit-row .nav a { margin: 0 0 0 1.5em; }
}



/* ==========================================================================
    PAGINATION
   ========================================================================== */
/* Blog and article pagination */
.pagination {
  text-align: center; }
  .pagination ul span {
    padding: 0.4045em; }

/* Article pagination */
.pagenav li {
  width: 50%; }
.pagenav .previous {
  margin-right: -.25em; }
.pagenav .next {
  float: right;
  text-align: right; }

/* ==========================================================================
    ROWS
   ========================================================================== */
/* Gives the content sections some breathing space */
[class*="-row"] {
  -webkit-transition: padding 0.3s ease;
  -moz-transition: padding 0.3s ease;
  -ms-transition: padding 0.3s ease;
  -o-transition: padding 0.3s ease;
  transition: padding 0.3s ease;
  padding: 0; }




/* ==========================================================================
    WELLS
   ========================================================================== */
.well {
  display: block;
  padding: 1.618em; }

/* ==========================================================================
    CONTENT WRAPPER
   ========================================================================== */
.wrapper {
  margin: 0 auto;
  padding:0;
  border-bottom: 1px solid #fff;
  max-width: 86em;
}

.footer {
	background-color: #EAE6E3;
	padding: 1em;
	font-size: 0.9em;
	color: #0e1e39;
	margin: 0 0 0 0;
}

 @media only screen and (min-width: 30em) { .footer { font-size: 1em; } }
 @media only screen and (min-width: 40em) { .footer { padding: 2em; } }

 @media only screen and (min-width: 80em) {

	.wrapper {

  	}

  	.footer {
  		margin: 0 auto 0 auto;
		padding: 0 0 4em 0;

  	}
 }

/*
 * These following need to override some base element styles,
 * so we'll load them last.
 */
/* Override any defaults like display: block on objects. */
/* ==========================================================================
    GRID
   ========================================================================== */
.grid-item,  [role="navigation"], .footer-row .module, .above-row .module, .below-row .module {
  display: inline-block;
  margin-right: -.25em;
  width: 100%;
  vertical-align: top; }


/* ==========================================================================
   	LINKS
   ========================================================================== */
/* Back to top link. */
a.to-top {
  background-color: #ebeef7;
  font-weight: 500;
  font-size: 3em;
  padding: 0.3em 0.4em 0.3em 0.4em;
  text-decoration: none;
  color: #FE8F01; }

a.to-top:hover, a.to-top:active, a.to-top:focus  {
  background-color: #FE8F01;
  color: #ebeef7; }


/* ==========================================================================
    TYPOGRAPHY
   ========================================================================== */
/* BLOCK QUOTES */
/* Borders are nice, sometimes. */
blockquote {
  border-left: 4px solid #FE8F01;
  background-color: #f5f7fc;
  font-style: italic;
   }

cite {
  font-style: normal; }


b,
strong {
  font-weight: 500; }

/* ==========================================================================
    FONT-FACE FONTS
   ========================================================================== */
.icon {
	line-height: 1;
	width: 2.65em;
	height: 2.65em;
	background-position: top left;
	background-repeat: no-repeat;
}







/* ==========================================================================
    UI BUTTONS
   ========================================================================== */
/*
 * Let's add some template-specific style to these babies!
 */
.btn, .banner-row .download-link, .banner-row .respository-link {
  font-weight: 500; }

/* ==========================================================================
    WELLS
   ========================================================================== */
.well {
  background: #fcfcfc;
  border: 1px solid #eeeeee; }



/* ==========================================================================
    HEADER
   ========================================================================== */
.header-row {
  text-align: left; }
  @media only screen and (min-width: 45em) {
    .header-row {
      text-align: left; } }


/* ==========================================================================
    BANNER
   ========================================================================== */
  .banner-row h1,
  .banner-row h2 {
    color: #fff; }
  .banner-row .content {
    -webkit-transition: padding 0.3s ease;
    -moz-transition: padding 0.3s ease;
    -ms-transition: padding 0.3s ease;
    -o-transition: padding 0.3s ease;
    transition: padding 0.3s ease; }
    @media only screen and (min-width: 45em) {
      .banner-row .content {
        padding: 2.427em 0 0.809em; } }
    @media only screen and (min-width: 90em) {
      .banner-row .content {
        padding: 3.236em 0 1.618em; } }




/* ==========================================================================
    ARTICLE ACTIONS
   ========================================================================== */
/* The print / mail /edit links */
.actions {
  font-size: 0.83em;
  line-height: 1.9494;
  margin-top: 0;
  margin-bottom: 1.9494em;
  margin-top: 0;
  text-align: right; }

/* ==========================================================================
    ARTICLE INFO
   ========================================================================== */
/* Article category, author, publish date, hits, etc. */
.article-meta {
  font-size: 0.83em;
  line-height: 1.9494;
  margin-top: 0;
  margin-bottom: 1.9494em; }


/* ==========================================================================
    BELOW-ROW MODULES
   ========================================================================== */




div.kontaktblock {
	width: 95%;
	float: left;
	margin: 0 2em 0 0;
}

div.kontaktblock p { width: auto; }

 @media only screen and (min-width: 60em) {
	div.kontaktblock {
		width: 42%;
	}
 }
 @media only screen and (min-width: 68em) {
	div.kontaktblock {
		width: 45%;
	}
 }







/********* CONTENT STYLES ***********/


table {
	font-weight: bold;
	margin: 0 2em 0 0 !important;
	width: 90%;
}

table td {
 	padding: 0.25em 0.25em 0.25em 0 !important;
 }

.box, .img-box {
	float: left;
	border: 5px solid #fff;
	border-radius: 5px;
	width: 100%;
	margin: 2em 0 2em 0;
}

.box p, .box h3, .box h2, .box ul {
	padding: 2% 10% 2% 2em;
	margin: 0;
}

.box table td {
 	padding: 0.25em 0.25em 0.25em 1em !important;
 }

.box table td em { font-size: 0.9em; }

.img-box h2 {
	padding: 0.5em;
	margin: 0;
}

.box img {
	margin: 1em 0 0 0;
}

.img-box img {
	float: left;
	margin: 1em;
}


.left   { text-align: left; }
.right  { text-align: right; }
.center { text-align: center !important; }
.column-submit {
	border-top: 3px solid #FE8F01;
	background-color: #FE8F01;
	color: #fff;
	width: 100%;
	display: block;
	font-weight: 500;
	padding: 0.35em 0.5em 0.35em 10%;
	text-decoration: none;
	font-size: 1.15em;
}

.column-submit:hover, .column-submit:active, .column-submit:focus {
	background-color: #fff;
	color: #FE8F01;
	text-decoration: none;
}


.clear {
	clear: both;
}




.right { float: right; margin: 0 0 1em 2em; }
.left { float: left; }







/**** FORMULARE ****/

.button { display: block; background-color: #FDB813; border: 3px solid #FDB813; border-radius: 3px; color: #fff; padding: 0.5em 1em 0.5em 0em; text-align: center; font-size: 1.25em; font-weight: bold; text-decoration: none; }
.button:hover { background-color: #fff; color: #FDB813; border: 3px solid #FDB813; text-decoration: none; }

.SoccerForm .button { background-color: #00ac4f; border: 3px solid #00ac4f; }
.SoccerForm .button:hover { background-color: #fff; color: #00ac4f; border: 3px solid #00ac4f; }

.asterisk { color: #FE8F01; }

div.asterisk {
	clear: both;
	float: right;
	font-size: 0.9em !important;
	position:relative;
	margin: 2em 0 -1em 0;
}



.infoSmall, .infoSmall:link, .infoReg, .infoReg:link {
	padding: 0 0.5em;
	height: 1.45em;
	display: inline-block;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: center;
}


.above-row ul, .above-row ul li { margin: 0; padding: 0;}





.logo {
  position: absolute;
  top: 0px;
  margin: 0;
  max-width: 86em;
  width: 100%;
  z-index:3000;
  background-color: #fff;
  opacity: 0.8;
}


.claim {
	font-size: 1em;
	font-weight: 500;
	color: #fff;
  	margin: -2em 0 2.05em 7%;
	line-height: 1em;
	z-index: 3000;
	position: absolute;
}

@media only screen and (min-width: 40em) {
	.claim { font-size: 1.5em;	}
 }


@media only screen and (min-width: 60em) {
	.claim { font-size: 2em; margin: -3em 0 2.05em 3em; }
 }

@media only screen and (min-width: 70em) {
	.claim { font-size: 2em; margin: -4em 0 2.05em 2em; }
 }

@media only screen and (min-width: 85em) {
	.claim { font-size: 2em; margin: -4em 0 2.05em 2.5em; }
 }


@media only screen and (min-width: 87em) {
	.claim { font-size: 2em; margin: -4em 0 2.05em 2.9em; }
 }


.einspalter, .zweispalter, .dreispalter, .vierspalter {
	float: none;
	width: 90%;
	max-width: 40em;
	font-size: 1.05em;
	line-height: 1.45em;
	margin: 0 0 0 1em;
}

.einspalter, .zweispalter { max-width: 100%; }
.dreispalter { margin: 0 0 1em 1em; }

.anlauftext {
	font-size: 1.25em;
	line-height: 1.45em;
	color: #777;
	width: 90%;
	font-weight: 300 !important;
	margin: 0 0 0 1em;
	max-width: 36em;
}
.vierspalter {
	 	margin: 0 3em 3em 0;
	 }

 @media only screen and (min-width: 30em) {


	.anlauftext { width: 87%; margin: 0 0 0 2em; }

	.einspalter { width: 98%; margin: 0 0 0 2.25em; }
	.zweispalter { width: 90%; margin: 0 0 0 2.25em; }


 	.dreispalter {
		width: 100%;
		margin: 0 1em 2em 0;
		float: left;
		font-size: 1em;
	 }


	 .vierspalter {
	 	width: 35%;
		max-width: 40em;
		margin: 0 3em 3em 0;
		float: left;
	 }
 }

 @media only screen and (min-width: 45em) {
	.dreispalter {
		width: 45%;
		margin: 0 1em 2em 0;
		float: left;
		font-size: 0.95em;
	}

}


 @media only screen and (min-width: 58em) {
	.einspalter {
		width: 90%;
		max-width: none;
		margin: 0 0 0 7%;
		padding: 0;
		float: left;
	 }
	 .zweispalter {
		width: 45%;
		float: left;
		max-width: 40em;
		padding: 0 4em 0 0;
		margin: 0 0 2em 0;
		float: left;
	 }
	.zw-left { margin-left: 8% !important; }

	.dreispalter { width: 41%; padding: 0 2em 2em 0; }

	 .anlauftext { margin: 0 4em 1em 7%; }

}

@media only screen and (min-width: 65em) {

	.vierspalter {
	 	width: 18%;
		max-width: 40em;
		margin: 0 4em 0 0;
		float: left;
	 }


	.dreispalter { width: 28%; margin: 2em 1em 1em 0; }
	.einspalter { width: 60%; margin: 2em 1em 1em 0; }

}







/** CONTACT FORM ***/


#_SimpleEmailForm_1 {
	clear: both;
	color: #555;
	background-color: #fee7cd;
	margin: 0;
	padding: 1em;
}

#_SimpleEmailForm_1 span { font-weight: normal; }

#_SimpleEmailForm_1 input[type="text"], #_SimpleEmailForm_1 textarea { width: 90%; }

#_SimpleEmailForm_1 h2 { color: #FE8F01; margin: 0.5em 0 1.5em 0; }

textarea { clear: both; }

#_SimpleEmailForm_1 label { font-size: 0.9em; }

   @media only screen and (min-width: 50em) {
	textarea { clear: none; }
       #_SimpleEmailForm_1 {
       	width: 90%;
  		max-width: 35em;
	        margin: 0; }
    }


.mod_contact_input { color: #000; }
.mod_contact_input_textarea { color: #000; }
#mod_simpleemailform_submit_1 { font-size: 1em; font-weight: 500; margin: 1em 0 0 0; padding: 0.15em 0.75em 0.15em 0.75em; border: 3px solid #FE8F01; border-radius: 3px; color: #fff; background-color: #FE8F01; }


.pfeil {
	font-weight: bold;
	font-size: 170%;
	vertical-align: bottom;
}
.pfeilLink {
	font-weight: bold;
	font-size: 162%;
	vertical-align: middle;
}
.pfeilAnstieg { margin: 0.75em; font-size: 85%; }
.pfeilAnstieg .bgGray, .pfeilAnstieg .bgFigur, .pfeilAnstieg .bgFitness { padding: 0.25em 0.75em 0.25em 0.75em; }



.zitatFigur { font-family: "Droid Serif"; font-size: 1.5em; line-height: 2em; font-style: italic; }
.zitatgeberFigur { font-size: 0.85em; }
a.btnFigur { border: 1px solid #f48473; border-left: 0px solid #fff; margin: 0; padding: 0.75em 0 1.125em 1.5em; color: #fff; font-size: 1.6em; line-height: 1.5em; display: block;}
a.btnFigur:hover { text-decoration: none; border-left: 1px solid #f48473; color: #f48473; background-color: #fff; }


.fett { font-weight: bold; }
.bigChar { font-family: "Droid Serif"; font-size: 3em; padding: 0.41em !important; }
.bigCharText { min-width: 22em; padding: 0.5em 1.25em 0.5em 1.25em; }

.biggerChar { font-family: "Droid Serif"; font-size: 1.5em; font-weight: bold; padding: 1em 0.2em 0 0; !important; }


/**** FARBEN ****/

.bgLightNeutral { background-color: #F9F5F2;  }
.bgNeutral { background-color: #fff; border: 1px solid #ddd !important;  }

.bgStartseite { background-color: #FCFAF2; color: #0c2f36;  padding: 0.25em 0.5em 0.25em 0.5em; }
.bgFitness  { background-color: #a6ce39; color: #fff; padding: 0.25em 0.5em 0.25em 0.5em; }
.bgGesundheit  { background-color: #66CDF9; color: #fff; padding: 0.25em 0.5em 0.25em 0.5em; }

.bgFigur  { background-color: #f48473; color: #fff; padding: 0.25em 0.5em 0.25em 0.5em; }
.bgGray  { background-color: #999; color: #fff; padding: 0.25em 0.5em 0.25em 0.5em; }

.bgBallsport  { background-color: #00ac4f; color: #fff; padding: 0.25em 0.5em 0.25em 0.5em; }
.bgLightBallsport { background-color: #dceede; }

.bgWellness { background-color: #f4b872; color: #fff; padding: 0.25em 0.5em 0.25em 0.5em; }

.bgFroggyland  { background-color: #fdb813; color: #fff; padding: 0.25em 0.5em 0.25em 0.5em; }
.bgJump  { background-color: #000; color: #FEF200; padding: 0.25em 0.5em 0.25em 0.5em; }
.bgClip:hover, .bgJump:hover  { color: #fff;}
.bgClip  { background-color: #5F3285; color: #bbd802; padding: 0.25em 0.5em 0.25em 0.5em; }

.bgJumpArea  { background-color: #000; text-align: center; border-top: 8px solid #FEF200; color: #FEF200 !important; padding: 0.25em 0em 0.25em 0em; }
.bgJumpArea h1, .bgJumpArea h2, .bgJumpArea h3, .bgJumpArea h4 { text-align: center; color: #FEF200 !important; padding-left: 0px; padding-right: 0px; }
.bgJumpArea  p { margin: 0 auto; width: 90%; max-width: 40em; }
.bgJumpArea  a {  background-color: #FEF200; color: #000; border-radius: 2px; padding: 0.1em; font-weight: bold; }
.bgJumpArea  a:hover { text-decoration: underline;}
.bgJumpArea ul, .bgJumpArea ul li { list-style: disc; margin: 0; color: #FEF200;}
.bgJumpArea ol, .bgJumpArea ol li { color: #FEF200; padding-right: 1em; }
.bgJumpArea .deskFloatLeft h3, .bgJumpArea .deskFloatRight h3 { color: #000 !important; font-size: 1.4em;  background-color: #FEF200;}
.bgJumpArea .deskFloatLeft h4, .bgJumpArea .deskFloatRight h4 { padding-left: 0em; margin-lefT: 0; color: #000 !important; font-size: 1.2em;  background-color: #FEF200;}

.bgClipnclimb  { background-color: #5F3285; color: #fff; padding: 0.25em 0em 0.25em 0em; }
.bgClipnclimbS  { background-color: #c41381; color: #fff; padding: 0.25em 0em 0.25em 0em; }

.bgClipnclimb p, .bgClipnclimb ol, .bgClipnclimb ul, .bgClipnclimb ul li, .bgClipnclimb ol li,
.bgClipnclimb a, .bgClipnclimb a:hover, .bgClipnclimb a:focus, .bgClipnclimb h1, .bgClipnclimb h2,
.bgClipnclimb h3, .bgClipnclimb h4 { color: #fff; }


.boxClip {
	color: #000 !important;
	padding: 10em 2em 10em 2em;
	background-color: #E9E5F3;
	background-image: url("../images/inhalte/clip_bg_top-Euek5OB.png"), url("../images/inhalte/clip_bg_bottom-Ns8oohJ.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top left, bottom left;
}
.boxClip img { max-width: 80%; margin: 4%;}
.boxClip table tr td { vertical-align: top; }
.boxClip .box5 p { color: #000; padding: 0.25em 1em 0.25em 0.75em !important; font-size: 0.8em; }
.boxClip .box5 h2 { margin: 0 !important; padding: 0.5em !important; font-size: 1.1em; line-height: 120%;  }
.boxClip .box5 h3 { color: #5F3285; padding: 0 0.65em 0  0.65em !important; font-size: 0.9em; }
.actions { display: none !important; }

.clipGreen { background-image: url("../images/inhalte/clip_pfeil-down-x1yJp1e.png"); background-repeat: no-repeat; background-position: 50% 20%; font-size: 0.95em; margin-top: 0.75em !important; font-weight: bold; border-radius: 2px !important; border: 4px solid #bbd802 ; text-align: center; color: #5F3285 !important; background-color: #bbd802 !important; }
.clipGreen:hover { background-image: url("../images/inhalte/clip_pfeil-down_hover-8HjnKab.png"); color: #bbd802 !important; background-color: #5F3285 !important; border: 4px solid #bbd802;}

.bgJumpArea .clipGreen { background-image: url("../images/inhalte/clip_pfeil-down-jump-r2DN5Cx.png"); border-radius: 0 !important; border: 2px solid #FEF200; color: #FEF200 !important; background-color: #000 !important; }
.bgJumpArea .clipGreen:hover { background-image: url("../images/inhalte/clip_pfeil-down_hover-jump-Dax6jcU.png"); color: #000 !important; background-color: #FEF200 !important; border: 2px solid #FEF200;}

.noCircle { border-radius: 0em !important; }

.box5 {width: 100%; font-size: 1.25em; }
.box3 {width: 100%; font-size: 1.25em; margin: 2em 0 2em 0;}

.clipGreen, .bgJumpArea .box3 a, .bgJumpArea .box5 a { padding: 1em; border-radius: 10em; padding-top: 2.5em; color: #FEF200; background-color: #000; display: block; width: 80%; max-width: 10em; margin: 0 auto;  }

.clipGreen, .bgJumpArea .box3 a:hover, .bgJumpArea .box5 a:hover { color: #000; background-color: #FEF200; display: block; text-decoration: none;}
.ja-battery { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAADWUlEQVRoge2aLWwUQRTHf+IEogJRgUBUIBoCCSFAEIgKBIIQREmQJxAIRCUC0aSiAoEg4SOIigpEBQJRiUAgEA0BUlFRAcklbZrdeXNJE3Z3HqJHQ+9mbz9uoXcw/+Spu7l9v3lvZt6bPQgKCgoKCgoKCgoK+qNSpZXGzKvwSoV1J3x2QuQEPWaLnGVDhTeZYUEjZkYD7XJKuyw7oTMGcGUsUWFVd5iqDJvGzDthdwwg6thnNZwpF1WlpcLKGDg9qm0VRlqF6Ux4OQbONmJqeVIE/Oq4naxp+5lhUYXZ0ms2i7k/Bo7XsY4arpYGBdCYi074NAbOV7XdNOZOJViY3FTWLsuVYX8YLjvD3nE7XxnW8lW7nK8MnMU8PG7n/1p0AZyw/YecSjLDQircc8JW48ARF/KYNOJCEjGnMZcGPij5AJsZFjLDo7LOq/D48DkHxczjBoE7XlBh1gmbfd/dPjyuKhxFW6q0fjmfxsw7y8aw6Ooep/sdSoW2E5IGgN8NwCotZ/mWN0GqnKBKCemrWpKIORXeeqL7Ni/dEsMNJ9iR0llYHZjMg9o/d0wqtHHCh0oPsjz/Fen+pdGbvKT34zfzgHupd82N0IH5Nqyi4KmwXmvDUsuaDxoO2snMsJj3eZ+Ds0NScKhlhgf9v+eEdwXjNnHCfq0ZtqzV6jk9E+QGN5lCS4XbHuCizXS/NnDP3jcI/b4B4I8F4zqjn8GWDe1yqgxYKrRVOeGF3mGqCrQvpX2bZ599qLxp5a2NorZMYy71vhupZck3SbrDVAmnD5aUb9OyLA0dY3mKCqsNAKsTOmo5lws82Jzsq7DSP0aVllrWCoE9x5JGzBQAnyMzPGgIWJ1gk5jrHkdOuiF7hQrrv49TpeWKl9pA4dGbWG81d1hDVCgty1rSv74yw2KpsZaNVGinwm1XfHnoLS0BUsPd3nXyigorqdA+kkJ1z8KiCCQx11PDXTdiVZWbGUOah6EqHYExs9rtoRquOJnIC4AvajlbD3pSr3gsS/WAYy6qnbxLPLV8V+FWLeiJvaa1fKt0H30k0hOa2k6IMsOCCtNVgadVeDEGAI1YZnhWDP3vvEzb1oiTpaM94a9Lt2qt64l8IW55PXKf/t/85SEoKCgoKCgoKCgoyKuf3TsfOopwg34AAAAASUVORK5CYII=)
	    no-repeat
    	    50% 2em;
}
.ja-battery:hover { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACxUlEQVRoge2aL4wTQRjFf2IFogJRcQJxAtGQI2nIQRCIEwgEISdKcrICgUAgEYgmFScQCBL+5MSJE4gTiBOVFSdOIBpyXE5UVBxJxYVUICoqipgtbLazO/+2sAvfS55oZmfmvZ2Zb76ZLQgEAoFAIBAIBIJVIwJawB7QA06BCTD/y5wAA+AT8BxYDzW6BuwC4xKYs+EMOABqPmZbwGUJTPjwFLhuazQC9ksgOpRDLEa6Dnwogdii+NpkeK8EIn04BTpAw2QwiaclEO7DMXDXxSjALeBLCcS78hJ47GoWqjuVd33M3ga+l0C8K8+Amz6GX5RA/B8bXYDRigTNUOneE9SeWHT7zRxPTWAL2NQV2DT+Ixb/0kH8q0Q/Ufy7KLPjDKMN4Dz17IjEdmW7FQ1j0QvxLVTSnje61zSC2nFZqOG+pu0IuMh5QVfALYXUZS1bwJHm2SPNsws8QM2YEMMHmnZbhjptgBPHjt7xe6STaKJe3mL0HuYYBrhH2AlMF7BMg9cDv4B1mGEa1HGyk1OeRIPsKWjiM017fUOdc1A5qE+Hh3ieOVNYYznI2HBb05YpmE5DDM+B4wJNHxdg+LOhzhjC9+BBLNgGbeJIqUHN0bRuSuuCZ5In4B60staG6Vi2GT87AbroX1LNQvSCuqDVNdR5Ayq8hxpeTJeNHMPpw8kUFVXTdSJUfDD1p9uW1g11NkBNjSIMz1F7632NkKvkx4peql6Eean1Nf1Adjb3K4ewTS1tOWN5fXUs6w5Q63wb8+VhVmoJsIOaUfsx28nCvHQshH3UqO0QnlVlMe/wkIvOigStmt7HwztU8wLgK3DD13RVr3i6voareon3DXjka7qq17QXON5HJ1HVqT1B3cjUXQ3XgfclMFAU39qY/lc+po1QWZ41qvy5dIjnuq7iB/GPFHBO/2/+8iAQCAQCgUAgEAiW8ROpwzCgeT45kwAAAABJRU5ErkJggg==)
	    no-repeat
    	    50% 2em;
}

.ja-image { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACcUlEQVRoge3asWsTURwH8C/i0CFDhw4KCg4ZOmRwcHTo0MHBv0CKg1PBRXARXAodnKSDgyJCBykOChkcHDMIOjo4OGR0CCTo3fu9YJDLva9LWuORvHuX5u6Zy/vBd8r9fpcPx/3uUgqEClWvSiLsrFNgBFynBHDdE8B1TwDXPVYwBce+n5tFQ8HxwuBU4cD3i1HRShUOAjiA/2NwEmOXgrbR+G4EAwrepzH25x2/0mAO8cTy/ToUbGV7VhacKjzIe8RQ8JLEhUyfHzCJjYV7BVtGoPPARsAkxq53MCNsGkGXGq1F+seC2y5YIyA1Dv2DNY4mM7qz7rO8SmM8cgYL2l7BicItI+hNzTjhAJeLzOAQdwpc4SOvYCP4OONLPS8EVmi6gscKe97AaYz9ubMEDwuhBU8dwB/4C1e9gCeLqmeZlyQRdpzn9dEwGl8s8yLGuJHtqw78d1HZMqBC03kmcZEah0YQTc3Q1HjLH7gyq6cSMDVaRpA43ndf2UfDFX12DoWmy2OudDCJDWq8ccSe3s+vGGGzKNqlSgfbFpUt2ReGlQD/FmwbwedFwEYwShXurxTYcVFZ0bM2rWtRsF3Zi0fBRWVLj0NcKoqd/JoaGUGndPAiiyrnfn7HEa65QCm4mSqcTPWXDx4r7C0Le4YWvM7DTs4bZXrLBfN8iyrvSj+eeVUjXKfGizl9pYNtf3Y5b35ScO+f8yncpeCTpac88BIXlS2aGi320aDGM4fjSwQL2iVjT9M1gm+Ox5YHNoJOReAiCeAADuAADuD1BK9CBXAAWz5cu39qqWMCuO4J4LongOse+H5uVh3fL0ahQi25/gBUvVqSQVVHqAAAAABJRU5ErkJggg==)
	    no-repeat
    	    50% 2em;
}
.ja-image:hover { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACQklEQVRoge2aoW8UURDGfyGIioqKCkggQVRUVCCQiIoKBH8BuSBQTTBNMCQ1k1RUkQoEpGlyomkQkJxAIE+QgEQgECcRFU2oOIFAFLG3yfZl983be+/t9e7mSz4337z53d3ObjYHJtPCaXvJzNWSeeYDGLABG7ABG/C0wH1mf99s634MsDB/EgzYgG808A4wAH4DF8BnYNdTL8wx8CHNsw2B9ZqMeDI3GnivYaaqj4FbTk6UTDbglYjsOjBWZiu942RFqc8CvAaMgK0p80+Vuao+cLKi1GcBPprkR9RfZ5peK3NVPXCyotQnB34CnFd6nAF3W/Z4psxV9ZGTFaU+OfDXmj7vWvbYUOaquudkRalPCrzr6fWqZa83ymxXwBfgvpMTJZMMeI3rP2XX/5i8RAvUKvDD0+8SeFSTE4UpGXC5qHy+oPi5huo2xRa+rPQYAx+Bew0ZUWZIArxF8Q2GXHM/Kb69ttog7DYnyvnRwCvAB6WP6xOKSyCHRDk7Gti3qHx2HxhSSZRzo4A3ge9Kjyb/BV4mAHQlyrlRwCGLSoOu27Sh2qTDB482i8rnc+DOFLB7FB/YsAvgaRaVz5+AB4GgjykeV8tsJ8C9hLClTwNge1y/J3cCHLOoNO83gD4E3jdksgP7XrvE+g/wwjnvOfDNk8kKnGpR+TyenLMKvA2ozwo8yAxbegT8CqzNCjzsCLiNDdiADdiADXhpgedBggEbcKP7zP5PKm3djwFeRM98AAM2YAM2YAP2AW8vmU2mRdJ/4JRL/dzkwvEAAAAASUVORK5CYII=)
	    no-repeat
    	   50% 2em;
}

.ja-achtung { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAENElEQVRoge2bP2hdVRzHP0PQIik6dOjgkKFCB4cOGRQ6ZOggWKRgBClBolSIf5CAQapWDAiKOGTo4NChQ4eCDhk6dOhQpIqgSMAi/ikSJGglj3rv+Z1ohHvP+TnkvfAS7r15N++c3JvUL3y39875fd773fN+55zfg/8VV7rKqAqX1LKgq4w2HU90eeGmF9QLqpYbTccTVblhqgfbc254fpgxs5RTmjIeKsZgUuWQt6xsB/bCHVUO1R4v4YQXvvaCestSjJiHkjPMF8CqF9QJc4OOo6uMqmXBC9nmoyFciRk7meEpl3I+S5gYKMh7POqF9TJgLyQqHNlpnDxlsihLcuHM0FBlyhImtkxoWcoNU6qMFL1elREVrlXA9hawi2VzasKYCtdL3tspmzuIKlJz2Rlm+59HXeOoCpd3gu1bwKa2f1jOcKEqO6o+qNjAPWfesuSFH3dI42IAYdEZ5lX4pGSR2/p6wxNxgVPerQsR0V+o8kBUYLW80QJQ9YI6w3tRYQFUeKlpUC+oN6xlwpPRgXNhunHYDd+KDguglldbAKtqeW1vgIUrTcN6YV0THokPa3nc95V0Dfp2fNiUcS/cHSbQXJgucu2xLCtxIBPGcuHcIKXhIC6bZzdjOcNsGEjhpFou+o1KKWgqhgT2snGA4FJm8pTJLGFCE8ZqnaJ0t13Rnr3QwBVe98KyCtdz4XQpsBeWDwhwvzulwE5486ABO8N8KbAqDzrD+174Z98DW5wKH+pfPFwKvAm+sUH4Yx8D33PCWzuCboE2vKDCD/sQ+FcVXq4F21MuPOOFr/YNsOE7tTy3K9ieugdwy60HtqyocHwo2E3ojbKy1cDBTy698E2LgX/WDofDAptWA/+kykPBYLvXGm1P6fISshbsGke9cKftwEEWLf2bp73wZZCA9sbfquXZ3cEaznrh+xZA1PUvusaLtWBdyive8FsLgt+t/9RBDwicYTZWIFnCRJFjzVe5UwLQg7g9FN4uBfb32wFAtwcjyE9QW4BVWCwF7kmVETUcyxImcmG6e315qXsNuh+AO2q5GqS+7i4ytoXAt1zK+SgdPWr5YDdBBTuI32qbpZwKDtmvXDgd87mr40Eba4aSM7zeNKiXARekEFLLZ03DdoHfiQ8rHPHtuEHUXJiOD2yZaRq052AXalVyhqtNg26mtOVCVFj9l8fU8nvToJvfsPBxVOCi9t/Ats4wnwtnBrmXVuFyVGAVFncI+K5aFnJh2glzvt4dc6foiEYTTpTNG7XtUFcZ9eWthOu6xkdFjSaD3jnnKZOV8xeAR12ly9JZLZ+r4VjVe31f23+hazR4q3DcCXPbG1GDq6Bd6fagNawmjPmKDceelId1pZYbvWfNpczU7VGuKEdvxop5KGnKeC6cG+avN0Wp3cpvN5S2p/aeFf9NSoWTKlxTy6f3xR+1mtZ/LpqJlBFVgwgAAAAASUVORK5CYII=)
	    no-repeat
    	    50% 2em;
}
.ja-achtung:hover { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAADdElEQVRoge2bPWgUQRTHf8WhIhEtLFKkuEIhhUWKFAoptrAQDBIwgkiQUxTiByGgiB8RDwRFLFJYWKRIkSKgRQqLFCmCRBEUCRgkfiBBgkY4xCLiFUFi8W5NctmZ3b2dd7t3+oc/BG535v1yM7tvZt7Bf6mrBRgBhit/N72mgdWKp1KORV19rMH6Pp6wzYNAZ8I2VLQNWGQz8MfKZ3HVAbyotDHrKEanKrIZ1vflGO20IPN/Zd39Yy4DDdIh4CrgRby+DShjBv4B7I7QTi/Bo6Qneujx5VV1NovMzZzh+hzwJCDIaj+w9JkHJg33lSx9O1HR0PECMMjG+dgKjBquD3JfVV85YAj76LD9o5yoGBL0CvKtz4cEavJEpY/7BA/fau/XhAW4UQOElp8CW3RxYSADoL5vKrMCcDoluGr/BA4oswJQqDOYyTPKnH91vk5AYb6gDeprrE5ANpeBXdqgAPvYmNKl5TltUJAVyVLCQAsGx21nUQsyD5whWmoYxSbV0tagK8guJF2bdwSpBbyKbCD0I4sKD/mCYu2iDCtAagKbXEZy+0mg2wa80CTA612yAV9qQuCiDXgrcAv41QTAv4E7wE4bsK8B4GsDA38HrkQBXa+TwNsGBP4EnI0L6+sI8LyBgF8Dx2qF9dWGu6e3JvAi0J4U1leno6BMctG2853Llw6CMilpu++BHa5AfWUZ+B2w3RUoyLFG1oe0NYWMo1bk/CfrwE4eWoeBZ44CqodfAUdrhT0BvMkARFx/AE7FhT0HfM5A8LX6GzE2CAYVA/EM1uqvGAbbjMvDazbghSYEtm4A9OHuFZQV4AkbsK8csAeZXwVkLowgx6CNAFwCxnGUX3vAcgaBZ5AyDJWKnts1BlUwOAnoMlK6pKruhEG6tKeLKrqYAliQIz2QXOhRnYDCfF0bFKSeKgsniKvI/FdXfwpgJjs7ULNpPCW4IA8ps7IX+JIBUN/3dHGDy39dehnJ6nqIdi49qkqLvAZsASwhR64FpEI2zhlzieAtmg5Lv6plhy2YSwnLwF2CC02injn3hvQfBF5IwBMq03B+jCw0bJo23Os7ToF3OzJ6qgtRnau6XGmO6DlsHvuCw3MbqhtNsTbX+olfo2xKR6cdxuhUnciTM8lPb4KGtpc4sgwrz8ahXbfkP011Ie/Xh/wjP9RKVX8AlWP1U1B7uMYAAAAASUVORK5CYII=)
	    no-repeat
    	    50% 2em;
}

.ja-uhr { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAADy0lEQVRogeXbPWwURxTA8T8SSBQpXDqF5RRR2lCkSHFWKFJEQkgpUoRLQpqkvyYSBRIlFwkakIwsCiyRzmUKkFJQUkaKC5I4H4jCRKHYe2/PRsI781LcYd2xnNnb3dnZ+EZ67e387r3bm307A4GGGSdN6TihZ0OumnLHKw+8suOVdBw7Xnlgyh0bctUJPVM6ZpwMNa9ah+2zkgldS1n3yrZXrGRsO2E9E7q2z0psV25YwhlL2RpnrSxyVqSWsmUJZ2I7MWXNCbe8MggAnQ5BnbJxkHC2ceiLhPdN6fuUJ8Gh+dh1yvUXAz5oBHsw4GOvJBGguVLPlE+DQc044ZTvvPJPC7Avy3zghMtmnK4XO2TZKdeiA2eEpdx8nvBOPdiEJUv5KTaqQDy0IcuVsHvPeNsJP7QAUzTTW5awWi6zxglrcRnPCifcMOPU3ODxDSo6oBRauTRfdoWvfJvuxvPHvyZcLIZNWPLt+J+tGoklLBUp5e9bMNlawpT+0dlV1izQcvGoNfBBwtkgaOGJKWuzszt6EAjybUcBK+aEW6/P7h7nvCDHDewFsT3O5cGj59kwF40J1tGCZBq7z4oXHh9XsBceT3VOMqEb9IKxwYplQneynNePO9iE9RF2tNCo0nD7f4BTfrGEJUzphL5YG8BeMVM6mNBbFLATejilvzBgpY9TNhcIvIkX7i8K2Av38aP3O1HBJrzrw7y1eDV28MrT2GCATPnaK38FnsfT1oDHmb7olT9Dgxsp6Uz4/E1g4OW6IFR572DKvSbAXnlUFJ2Nemp/1D0HU+4xflHdBHgutAlf1l19TtlsbOFREv2FV36vEdzHNbS0LI0e0vXKb3Vc14QeppyPAJ4XfcGUXyuDlfOYNfN4WBWdCRd8NfT2YZ/alNuRwOaV1JROIfSAzypk9/bktxe8xVM10yZ8WOUvdLrF00ATrwq6KjbXxIPwbdqCkStvG7LslUdVPjfXpoXRXqsWgKfQdWC9YjP3eJlytwVg80o6vkFVxyp3Z94Yxg/iuy0A1xW7lvLRTDCAE663YKK1hCnXjsRO/G6a6D6EjrTwrh5TvvHSwP7JUCGoKd8Wwk6U9uXoEy8ZLuXKXFgA+5vTlnIz9uTnxiobZrw1NxjAnrPqtRULkmIh/GjKe6Wwh+jRTexhdMybIuXnylsPD9EJq064ER11VBlXzWwObZxyyiWvPIsNnChhdSlXSv9mi4wD4RPfjo1rYTeIT47oRwCkwSMAk+PwkEfA7U4ToU7ZsDTCIY8cfFGO8bw66jyoZW0+qPW60dajeP8B5ZC3u1Z3mVIAAAAASUVORK5CYII=)
	    no-repeat
    	    50% 2em;
}
.ja-uhr:hover { background:
	    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAADAElEQVRogeWbv2sTYRjHP4UWHBwyxqHUQVzt4OCQYgYHQQoOHTRaXXTPUnAoOBqhLhZSSocG6pbRoQUHR0fBDK1GJXRIRYe2yR9wDu97kl6T+/He+8veF75LSN7n+eTeu3vvuecFc5oGKkAdeAVsAx+BLjCU7srPtuV36vI30wbz0qpZoAY0gQ4QKLojx6jJMb3TPNBGHDVVyEkeyrHnrdHEaAHYAE7QDxr1ANgEqjbAoroBNIDDFInqdh94A9w0Til1Bzg2CJRlqt83CToFrAC/PIANfQKsApd0w5aBNQ8AJ3kduKoLtgR88AAqyZ8QByaXrgDvPIBJ6zYwpwo7hd/TeJLfAjMqwCseJK/qF1lhl/HrapzVv4EnaWFL+HGfzetjyZKo1x4kq8uNJNgFzC0XqzFxq4ZiHkqmidowFNgVcCCZxuoecHoBgU8l2zm1DQZ1CRxItjOaBXoXGLhHpHJSMxzQNXAgGf+pWQDgZhisRL6C2/8C/EWyUrEQzAfgQLJSLxBwHcTyqyjADYBWgYBbAHsFAt4D8X7HNfA1zLy1iLoLcOQBMMBT4KfhHI58AgZRpfhhGtjWlH6QAhjEvdLU9O4C7FoC3s8AvQx8N5DDLoiX0TaAs0I/Rv/sa4G9hYcK9CPgm8bYDbC3tFSFrgFfNcWtAyw6AM4K/RA40BBzEew9HrqG7jBSp95yBBwgbkGVlNBLOeJsjQ5ko8ST90jfIt8t9EyJx0YRLw90XtgeY9qfTJdp03jc9C7LPyPPuOfKtCD6oFwDR6F1wAbE9HjteAAcQi9pgt2ZBAviiabvAbAu94HbccAgmr5cJ6rLa0mwIM4bG9UH0x6SoavnGXb6J015ADxPCxtq1YPEVf0yKyyIdr51D5LP6k3gsgowiCYvHxYkaf0euK4KG6qMaOtzDZPkz2hoPQw1h+hwcw0VN41zH9moZhAdbn88AAw9QFyglM/ZNLqLH41rxhvER1WoLQCjCjd5mGx3Gp2+zjZ5RFWYbTxRFWaj1jh5uRXvL2LBB7lxSaM9AAAAAElFTkSuQmCC)
	    no-repeat
    	    50% 2em;
}

@media screen and (min-width: 35em) {
	.box5 {width: 49%; float: left; font-size: 1.25em; }
	.box3 {width: 49%; float: left; font-size: 1.25em; margin: 0em 0 0em 0;}
}


@media screen and (min-width: 50em) {
	.box5 {width: 24.75%; float: left; font-size: 1.25em; }
	.box3 {width: 33%; float: left; font-size: 1.25em; margin: 2em 0 2em 0;}
}



@media screen and (min-width: 64em) {
	.deskFloatLeft { text-align: left; float: left; margin: 0 0 6em 9%; max-width: 35%; }
	.deskFloatRight { text-align: left; float: right; margin: 0 9% 6em 0; max-width: 35%; }
	.boxClip { padding: 10em 2em 6em 2em; }

}


.coStartseite { color: #fef9ea; }
.coFitness  { color: #a6ce39; }
.coGesundheit  { color: #0095da; }
.coFigur  { color: #f48473; }
.coBallsport  { color: #00ac4f; }
.coWellness { color: #f4b872; }
.coFroggyland  { color: #fdb813; }
.coJumpArea  { color: #FEF200; }
.coClipnclimb  { color: #5F3285; }

.bocoStartseite { border-color: #fef9ea; }
.bocoFitness  { border-color: #a6ce39; }
.bocoGesundheit  { border-color: #0095da; }
.bocoFigur  { border-color: #f48473; }
.bocoBallsport  { border-color: #00ac4f; }
.bocoWellness { border-color: #f4b872; }
.bocoFroggyland  { border-color: #fdb813; }
.bocoJumpArea  { border-color: #FEF200; }
.bocoClipnclimb  { border-color: #5F3285; }
.bocoClipnclimbS  { border-color: #c41381; }

.trennlinie {  background-image: url("../images/trennlinie-mhtEbdL.png"); background-repeat: repeat-x;  }

.abstand { padding: 0.5em 0.75em 0.5em 0.75em; display: inline-block; }
a.readMoreBallsport { font-weight: bold; display: inline-block; font-size: 0.85em; background-color: #fff; border: 1px solid #00ac4f; color: #0c2f36; }
a.readMoreBallsport:hover { background-color: #00ac4f; color: #fff; text-decoration: none; }

a.readMoreFroggyland { font-weight: bold; display: inline-block; font-size: 0.85em; background-color: #fff; border: 1px solid #fdb813; color: #0c2f36; }
a.readMoreFroggyland:hover { background-color: #fdb813; color: #fff; text-decoration: none; }

a.readMoreFitness { font-weight: bold; display: inline-block; font-size: 0.85em; background-color: #fff; border: 1px solid #a6ce39; color: #0c2f36; border-radius: 0 !important;}
a.readMoreFitness:hover { background-color: #a6ce39; color: #fff; text-decoration: none; border-radius: 0 !important;}

a.readMoreClipnclimb { font-weight: bold; display: inline-block; font-size: 0.85em; background-color: #fff; border: 1px solid #5F3285; color: #0c2f36; }
a.readMoreClipnclimb:hover { background-color: #5F3285; color: #fff; text-decoration: none; }

a.ImgIncrease:hover img { transform: scale(1.15, 1.15); transition: transform 0.5s ease-in-out;}

.prof { padding: 3em; margin: 0 0 2em 0; }
.proftext { width: 70%; display: inline-block; margin: 0; }
.proftext h2 { margin: 0; padding: 0 0 0 1em; }


.KILAForm h3 {
	border-top: 3px solid #fdb813;
	color: #fdb813;
	padding-top: 0.5em;
}

.SoccerForm h3 {
	border-top: 3px solid #00ac4f;
	color: #00ac4f;
	padding-top: 0.5em;
}

.KILAForm {
	font-size: 0.9em;
	border: 1px solid #aaa;
	background-color: #FFF8E8;
	padding: 2em;
}

.SoccerForm {
	font-size: 0.9em;
	border: 1px solid #aaa;
	background-color: #f2f9f5;
	padding: 2em;
}

.KILAForm label, .KILAForm input, .KILAForm select, .SoccerForm label, .SoccerForm input, .SoccerForm select {
	float: left;
	padding: 0.25em; margin: 0 0 0.5em 0;
}

.KILAForm label,.SoccerForm label  { clear: both; width: 10em; }

.above-row { margin-top:8em; }

@media screen and (min-width: 30em) { .above-row { margin-top:5em; } }
@media screen and (min-width: 64em) { .above-row { margin-top:0; } }

.shadowbox {
	font-weight: bold;
	float: left;
	margin-right: 0.15em;
}

.togglebox {
	border-width: 10px;
	border-style: solid;
}

.doBox { border-radius: 2px;
	 cursor: pointer; display: block; padding: 0.75em 0.5em; }
.doBox:hover {
-webkit-box-shadow: 2px -2px 5px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 2px -2px 5px -1px rgba(0,0,0,0.75);
box-shadow: 2px -2px 5px -1px rgba(0,0,0,0.75);
}

.titleImgInvisible { display: none; }