/* ==========================================================================
   Template:	PROJECT
   Version: 	1.0 for Joomla 3+
   Created: 	April 2014

   Author: 	PEAK Agentur f�r Kommunikation GmbH
   Copyright:	PEAK Agentur f�r Kommunikation GmbH - (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: 'Open Sans', 'Arial', sans-serif;
  font-weight: 400;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ 
  background: url(bg-body.jpg) bottom center no-repeat #2c435d fixed !important;
}
/*
 * Remove default margin.
 */
body {
  font-family: 'Open Sans', 'Arial', sans-serif;
  margin: 0;  
  font-weight: 400;
  font-size: 85%;
  background: url(bg-body.jpg) top center no-repeat #2c435d fixed !important;
  }
.wrapper { }
.content { background-color: #fff; padding: 0 0.5em 1em 0.5em; border: 1px solid #fff; width: 100%; display: inline-block; }

@media only screen and (min-width: 45em) {
	.content { padding: 0 3em 3em 3em; }
	.content p { max-width: 45em; }
}
/* ==========================================================================
   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; }

/* ==========================================================================
   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, .small {
  font-size: 80%; font-weight: 500; }


/*
 * 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 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%; }


@media only screen and (min-width: 40em) {
/* 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 'Verdana', sans-serif;
  font-weight: normal;
  background-color: #2c435d;
  color: #222;
  min-height: 100%;
  overflow-y: scroll;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -webkit-overflow-scrolling: touch; 
filter: progid:DXImageTransform.Microsoft.Chroma(color='white'), alpha(opacity=50);
-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
}

/* 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: #2c435d; 
   }

/* Colour selected text. */
::-moz-selection {
  background-color: #bce4fa;
  color: #000;
  text-shadow: none; }

::selection {
  background-color: #bce4fa;
  color: #000;
  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: 0px solid #eeeeee;
  padding: 0.4045em;
  border-radius: 0px; }
  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: 0px 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: black;
  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: 2em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 0;
}

 @media only screen and (min-width: 58em) {
 	
 	h1, .h1 { 
 		font-size: 2em;
  	}
 }

h2,
.h2 {
  font-style: normal;
  font-weight: 500;
  font-size: 1.45em;
  line-height: 1.43822;
  margin: 2.5em 0 0 0;
  color: #009ee3;
  border-bottom: 2px solid #009ee3;
}

h3,
.h3 {
	background-color: #009ee3; 
	color: #fff; 
	font-weight: 700; 
	margin: 0.25em 0 0.75em 0; 
	padding: 0;
	font-size: 1.25em;
	line-height: 1em;
}

h3 a { display: inline !important; }
footer h3 { font-size: 1.75em; }

h4,
.h4 {
	background-color: #009ee3; 
	color: #fff; 
	font-weight: 700; 
	margin: 0; 
	padding: 0.25em 1em 0.25em 1em;
	font-size: 1em;
	line-height: 1em;
}

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: 100%; height: auto; }

/*
 * 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: #009ee3;
  font-weight: 700;
  text-decoration: none; }
 
a:hover, a:focus {
  text-decoration: underline; } 


/* Back to top link. */
a.to-top {
  bottom: 0;
  color: #bce4fa;
  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; }

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; }




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

/* ==========================================================================
    TABLES
   ========================================================================== */
table {
  width: 100%;  }


/* ==========================================================================
    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.3;
  margin-top: 0.5em;
  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 {
  font-size: 0.8em;
  letter-spacing: 0.05em;
  display: inline-block;
  padding: 0 0 0 0 !important;
  margin: 0.5em 0 3em 0 !important;
  color: #777; 
}


.breadcrumb li { display: inline; margin: 0.25em; vertical-align: bottom;}
.divider { padding: 0 0 0 0.65em; display: inline-block; }
/*
.breadcrumb > li + li:before {
    content: "\00BB" "\00A0";
    padding: 0.1em 0 0 0; }
*/
/* ==========================================================================
    BUTTONS
   ========================================================================== */

#system-message-container {
	background-color: #009ee3;
       font-size: 1.1em;
	color: #fff;
	margin: 2em 5em 2em 0em;

}

#system-message{
	padding: 1em 2em 0.5em 2em;
 }

.close { color: #fff; float: left; }

.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: 0px;
  cursor: pointer;
  display: inline-block;
  font-size: 100%;
  font-weight: 500;
  line-height: 2;
  width: 100%;
  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: 700;
  font-size: 1em;
  background-color: #bce4fa; color: #009ee3 !important; }
  .btn-primary:hover {
    background-color: #009ee3; color: #fff !important; }

.btn-success, .banner-row .download-link {
  background-color: #bce4fa; }
  .btn-success:hover, .banner-row .download-link:hover {
    background-color: #009ee3; }

.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: 0px; }

/* 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;  }
    
   
    .social { float: left;  }
    .social li { float: left; margin: 1em 0.5em 0 0.5em;  }
    .social li a {
      display: block; 
      background-color: #bce4fa;
 	  border-radius:0.15em;
 	}
 	.social li a:hover, .social li a:active, .social li a:focus {
 		background-color: #fff;
 		color: #bce4fa;
 		text-decoration: none;
 	}


/* 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 #fff;	
}


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


.credit-row .nav a { color: #fff; 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 3em 0 0; }
	.footer .nav li { margin: 0.25em 0 0 0; width: auto; padding: 0; }
	.credit-row .nav a { margin: 0 0 0 1.5em; }
	.social { float: right; }	
}

 @media only screen and (min-width: 50em) {
	.social { float: right; text-align: center;  margin: 1em 7% 2em auto; }
}


 @media only screen and (min-width: 60em) {
	.social { float: right; text-align: center;  margin: 1em 7% 2em auto; }
}


/* ==========================================================================
    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 {
  padding:0;
  max-width: 100%; 
  margin: 0 0 30px 0;
}

@media only screen and (min-width: 40em) {
	.wrapper {
 		margin: 0 5% 30px 5%;
	}
}

#bbntop {
	margin: 0;  
	background: url(bg-head.jpg) top center no-repeat #2c435d fixed !important;
    	width: 100%;
	top: 0px;
	z-index: 50000; 
}

.bgtop {
	/*background-color: #f6f6f6;*/
	border: 0px solid #f6f6f6;
  	margin: 0 auto;
	padding: 25px 0 0 0;
	width: 100%;
       max-width: 86em;
}


.shifter-page {
	/*background: #f6f6f6;*/
       max-width: 86em;
	border: 0px solid #f6f6f6;
}
  
.header { width: auto; margin: 0; background-color: #fff; }

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

.logo { margin: 0; width: 210px; float: left; }


.header, .logo { height: 45px; } 
#bbntop, .bgtop { height: auto; } 
.shifter-page { margin: 0 auto 0 auto;  }

.mobileHeader { height: auto; width: auto; display: block; }
.desktopHeader { height: 0; width: 0; display: none; }

 @media only screen and (min-width: 771px) {

	.mobileHeader { height: 0; width: 0; display: none; }
	.desktopHeader { height: auto; width: auto; display: block; }
	.desktopHeader img { max-width: 70%; }

	.header { height: 30%; background-color: transparent; }
	#bbntop, .bgtop { height: auto; } 

	.shifter-page { margin: 0 auto 0 auto; }

	.nav-collapse {  margin: -3.305em 0 0 0 !important; }
	.logo { height: auto; width: 100%; max-width: 100%; background-color: transparent; }
}

@media only screen and (min-width: 86em) {
  	#bbntop { position: fixed; }
	#bbntop, .bgtop { height: 11.5em;  } 
	.shifter-page { margin: 11.5em auto 0 auto; }
}

 @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) {

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

  	}
 }
 
/*
 * 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: #bce4fa; }

a.to-top:hover, a.to-top:active, a.to-top:focus  {
  background-color: #bce4fa;
  color: #ebeef7; }
  
  
/* ==========================================================================
    TYPOGRAPHY
   ========================================================================== */
/* BLOCK QUOTES */
/* Borders are nice, sometimes. */
blockquote {
  border-left: 4px solid #bce4fa;
  background-color: #f5f7fc;
  font-style: italic;
   }

cite {
  font-style: normal; }






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






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


.left   { text-align: left; }
.right  { text-align: right; }
.center { text-align: center !important; }

	
.clear {
	clear: both;
}


.small {
	font-size: 0.9em;
}

.smaller {
	font-size: 0.95em !important;
}


.FlRight { float: right; }
.FlLeft { float: left; }





/* ==========================================================================
    LOGIN
   ========================================================================== */
 

/**** FORMULARE ****/



.asterisk { color: #009ee3; }

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

.FormFault { color: #CE0808; }



.einspalter, .zweispalter, .dreispalter, .vierspalter {
	float: none; 
	width: 90%; 
	font-size: 1.1em;
	margin: 0 0 0 1em; 
	display: inline-block;
}
	 
.dreispalter { width: 90%; margin: 3em 0 2em 1em; }		 

 
 @media only screen and (min-width: 56em) {
	.einspalter { 
		width: 65%;
		max-width: none;
		padding: 0 0 0 0;
		margin: 0 5% 0 0;
		float: left;
	 }
	 .zweispalter {
		width: 50%;
		max-width: 40em;
		padding: 0 3em 0 0;
		margin: 0 0 0 0;
		float: left;
	 }

	.dreispalter { 
		font-size: 1.1em; 
		width: 30%; 
		margin: 0 0 1.5em 0; 
	}	
}


.dreispalter:last-of-type { margin-right: 0px !important;}
 
.bgFull { padding: 0.25em 1em 0.25em 1em; background-color: #009ee3; color: #fff; font-size: 1.1em; font-weight: 700; }
.bgLight, .bgWhite { padding: 1em; margin: 0; background-color: #dff2fe; font-size: 0.9em; }
.bgWhite { background-color: #fff; border: 2px solid #009ee3; }

.add-on { display: none; }
.element-invisible { display: none; }
.input-small { width: 95%; margin: 0 5% 1em 0; }
.input-half { width: 45%; margin: 0 5% 1em 0; float: left; }
.fault { line-height: 0.7em; border: 3px solid red !important; }


footer {
	font-size: 0.7em;
	margin: 30px 0 0 0;
	background-color: #009ee3; 
	display: block;
	color: #fff;
}

footer p { -moz-hyphens: manual; -o-hyphens: manual; -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; 
		font-size: 1.2em; font-weight: 700; }
footer p.fault { background-color: red; padding: 1em; font-weight: 700; }

footer form { padding: 0; margin: 0; }

.headerBoxAuto { font-size: 70% !important; border-bottom: 2px solid #365372; width: 100%; background-color: #009ee3; height: 14em; display: block; padding: 1em 1em 1em 2em; }
.nav-collapse .headerBoxAuto:last-of-type { display: none; }

.footerBoxAuto, .footerBoxSmall, .footerBox { border-bottom: 6px solid #365372; width: 100%; background-color: #009ee3; height: 15em; padding: 1em 1em 1em 2em; }

footer .nav, footer .nav ul, footer .nav li { margin: 0.5em 0 0 0; padding: 0; }
footer .nav a { font-size: 1.5em; text-decoration: underline; text-align: left; color: #fff !important; }
 
.transLine { display: none; }

@media only screen and (min-width: 45em) {
	.transLine { display: none; float: left; height: 16em; margin: -0.5em 0 0 0; border-right: 10px solid #365372; -webkit-transform: rotate(8.9deg); -moz-transform: rotate(8.9deg); }
	.footerBoxAuto, .footerBoxSmall, .footerBox { float: left; border-right: 6px solid #365372; border-bottom: 6px solid #365372; width: 50%; background-color: #009ee3; height: 15em; padding: 1em 1em 1em 2em; }
	footer .nav a { font-size: 1.5em; text-decoration: underline; text-align: right; color: #fff !important; }
}

@media only screen and (min-width: 71em) {
	footer { height: 15em; }
	.transLine { display: inline-block; float: left; height: 16em; margin: -0.5em 0 0 0; border-right: 10px solid #365372; -webkit-transform: rotate(8.9deg); -moz-transform: rotate(8.9deg); }
	.footerBoxAuto, .footerBoxSmall, .footerBox { border: 0px solid #365372; width: 35em; background-color: #009ee3; height: 15em; padding: 1em 1em 1em 3em; float: left; }
	.footerBoxAuto { padding: 1.5em 2em 0 0; width: auto; max-width: 16em; text-align: right; float: right; }
	.footerBoxSmall { width: 20em; padding: 1em 3em 2em 2em; }
	footer .nav a { text-decoration: none; font-size: 1.2em; text-align: right; color: #fff !important; }
}
.page-header { display: none; }

.hotline { font-size: 1.25em; font-weight: 700; margin: 0.5em 0 0.5em 0; }
.big { padding: 0 0.15em 0 0; font-size: 1.75em; font-weight: 700; }
.btn-support { background-repeat: no-repeat; cursor: pointer; display: inline-block !important; background-color: #fff !important; border: 2px solid #009ee3; color: #009ee3 !important; font-weight: 700; padding: 1em 1em 1em 4em; margin: 0.25em 0 0.25em 0; }
.btn-support2 { background-repeat: no-repeat; cursor: pointer; display: inline-block !important; background-color: #fff !important; border: 2px solid #009ee3; color: #009ee3 !important; font-weight: 700; padding: 1em 1em 1em 4.5em; margin: 0.25em 0 0.25em 0; }

@media only screen and (min-width: 60em) { .btn-support { padding: 1em 1em 1em 5em; } }

.btn-support:hover, .btn-support2:hover { text-decoration: none; background-color: #009ee3 !important; border: 2px solid #fff; color: #fff !important; }
.content .btn-support { width: 100%; max-width: 20em; }

.nav-collapse .btn-support, footer .btn-support { line-height: 1em; width: 7.8em !important; background-position: 50% 7px !important; padding: 50px 1em 0.55em 1em !important; float: left !important; min-width: 7.8em !important; text-align: center !important; margin: -0.2em 1em 0.25em 0 !important; }
.shifter-navigation .btn-support { font-size: 0.9em !important; line-height: 1em; width: 8.3em !important; background-position: 50% 7px !important; padding: 50px 0.6em 0.55em 0.6em !important; float: left !important; min-width: 8.3em !important; text-align: center !important; margin: -0.2em 0.25em 0.25em 0 !important; }

.bbn-wiki { background-position: 0.6em 0.25em; background-repeat: no-repeat; background-image: url(../images/icons/bbnwiki.png); }
.bbn-wiki:hover { background-image: url(../images/icons/bbnwiki_weiss.png); }
.ticket { text-align: left; background-position: 0.6em 0.45em; background-repeat: no-repeat; background-image: url(../images/icons/ticket.png); }
.ticket:hover { background-image: url(../images/icons/ticket_weiss.png); }
.emailsupport { background-position: 0.6em 0.5em; background-repeat: no-repeat; background-image: url(../images/icons/emailsupport.png); }
.emailsupport:hover { background-image: url(../images/icons/emailsupport_weiss.png); }
.support { background-image: url(../images/icons/support.png); }
.support:hover { background-image: url(../images/icons/support_weiss.png); }
.kontakt { background-image: url(../images/icons/kontakt.png); }
.kontakt:hover { background-image: url(../images/icons/kontakt_weiss.png); }

.startBox { margin: 2em 0 0 0; display: block; padding: 1em; width: 100%; font-size: 0.95em; background-color: #dff2fe; }
.startBox h1 { font-size: 1.5em; }

.flexslider { margin: 0; padding: 0; width: 100%; }

@media only screen and (min-width: 65em) {
	.startBox { float: left; width: 30%; }
	.flexslider { width: 67%; }
}

.gallery { display: inline-block; float: left; width: 30%; margin: 1em 1em 1em 0; }
.gallery a { display: block; background-image: url(../images/icons/plus_blue.png); background-position: 97% 97%; background-repeat: no-repeat; text-align: center; height: 11em; border: 3px solid #009ee3; background-color: #f2f2f2; }
.gallery img { margin: 1em auto; display: inline-block; max-width: 80%; }
h1.imgGallery { margin: 2em auto 0 auto; font-size: 1.5em; color: #fff; font-weight: 700; }


.tooltip {
	position: absolute;
	z-index: 1030;
	display: block;
	visibility: visible;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.4;
	opacity: 0;
	filter: alpha(opacity=0);
}
.tooltip.in {
	opacity: 1;
	filter: alpha(opacity=100);
}
.tooltip.top {
	margin-top: -3px;
	padding: 10px 0;
}
.tooltip.right {
	margin-left: 3px;
	padding: 0 10px;
}
.tooltip.bottom {
	margin-top: 3px;
	padding: 10px 0;
}
.tooltip.left {
	margin-left: -3px;
	padding: 0 10px;
}
.tooltip-inner {
	max-width: 200px;
	padding: 8px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background-color: #009ee3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.tooltip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
}
.tooltip.top .tooltip-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -10px;
	border-width: 10px 10px 0;
	border-top-color: #009ee3;
}

.login-greeting { height: 6.6em; overflow: hidden; }
.login-greeting p { padding: 0; margin: 0; }
.ok-form { padding: 1em 0 0 0; margin: 0; width: 100%; background-color: #E5EFF9; }
.content #login-form { padding: 2em; margin: 0; width: 100%; height: 20em; background-color: #E5EFF9; }
.content #login-form h3 { color: #000; font-size: 2em; background-color: transparent;  }

@media only screen and (min-width: 40em) {
	.content #login-form, .ok-form { width: 50%; }
}

.tableRow { padding: 0.15em 0.25em 0.15em 0.25em; }

/*.itemid-116 .content { padding: 0; }
#siteBBNWiki { border: 2px solid #aaa;}
.itemid-116 .breadcrumb { margin-bottom: 0.25em !important; }*/

.userItemView a {padding-left: 2em; font-weight: 700;}
.userItemView {margin-top: 0.75em;}

#formLog { color: #CE0502; font-weight: bold; }
.antispam { display: none; }