/*
BS3 Breakpoints:
col-xs: bleibt gleich auf jeder Breite
col-sm: Einspaltig unter 768px  - @media (min-width: 768px) {
col-md: Einspaltig unter 992px  - @media (min-width: 992px) {
col-lg: Einspaltig unter 1200px - @media (min-width: 1200px) {
@media (max-width: 768px) {  - Bis zu maximal 768px
@media (max-width: 767px) {  - Oberhalb von 767px
@media (min-width: 768px) and (max-width: 991px) {
@media (min-width: 992px) and (max-width: 1199px) {
*/

/* ACHTUNG: Reduziertes CSS fuer Barebone !!!! */


/* TYPOGRAPHIE */

@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);


/* ### Bootstrap Typographie raus ### */ 
h1, h2, h3, h4, h5, h6, p{
  margin: 0;  
}

html { font-size: 62.5%; } /* 62.5% von 16px = 10px = 1 rem */
body { font-size: 14px; font-size: 1.4em; } /*HIER em, wegen CHROME BUG*/
p    { font-size: 14px; font-size: 1.4rem; }

h1      { font-size: 24px; font-size: 2.4rem; padding-bottom: 1rem; line-height: 1.2;}
h2      { font-size: 24px; font-size: 2.4rem; padding-bottom: 1rem; line-height: 1.2;}
h3      { font-size: 22px; font-size: 2.2rem; padding-bottom: 0.8rem; line-height: 1.1;}
h4      { font-size: 22px; font-size: 2.2rem; padding-bottom: 0.8rem; line-height: 1.1;}
h5      { font-size: 18px; font-size: 1.8rem; padding-bottom: 0.6rem; line-height: 1.0;}
h6      { font-size: 18px; font-size: 1.8rem; padding-bottom: 0.6rem; line-height: 1.0;}
p       { padding-bottom: 0.6rem; }

h1,h3,h5{
  color: #1D1D1D;
}
h2,h4,h6{
   color: #003552;
}

h1{
  border-left: 2px solid white;
  padding-left: 10px;
}

.dpLayout04 h1{
  border-left: 2px solid black;
  padding-left: 10px;
}

p,ul{
  margin-left: 10px;
}

ul{
  padding-left: 14px;
}

li{
  list-style-type: square;
}



@media (max-width: 767px) {
  .container{
    margin-top: 0;
    margin-bottom: 0;  
  }
}


body{    
    font-family: 'Droid Sans', Verdana, Geneva, sans-serif;
    font-weight: normal;
    line-height: 1.3;
}  

h1,h2,h3,h4,h5,h6{      
    margin-top: 0px; 
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);  
}

hr{
  border: solid 6px #b62348;
  margin: 0;
}

/*dotted Outline weg - auch im Firefox*/
a {
  outline: 0 !important;
}

/* fuer z.B. Inhalt mit "Seitenstreifen" */


/*
.dpOverflowCut{
  overflow-x: hidden;
  width: 100%; 
}
*/


/*
@media (max-width: 768px) {
  .dpInhalt{
    padding: 10px 15px 10px;
  }
}
*/



/* ### Button-artiges styling fuer divs #### */
.special-box{      
  padding: 15px;
  border: solid 1px rgba(0,0,0,0.5);
  border-radius: 8px;
  background: white;  
}  

.special-style{
  border: solid 1px rgba(0,0,0,0.5);
  border-radius: 8px;
  background: white;  
}

/* Responsive Images, etc. innerhalb der rows */
.row img, 
.row embed, 
.row object, 
.row video {
  max-width: 100%;
  height: auto;
  width: auto;
}

/*  #########################
  ###  CSC-CSS ueberarbeiten 
  ######################### */  


DIV.csc-mailform li{
  margin-top: 10px !important;    
  margin-bottom: 10px !important;
}  
DIV.csc-mailform li:first-child{
  margin-top: 0 !important;   
}
DIV.csc-mailform li:last-child{
  margin-bottom: 0 !important;   
}


.csc-default, 
.csc-textpic-imagewrap, 
.csc-textpic-center, 
.csc-textpic-center-inner, 
.csc-textpic, 
.csc-textpic-center-outer, 
.csc-textpic-image,
.csc-textpic-imagerow,
.csc-textpic-imagerow-last,
.csc-textpic-imagerow-none,
.csc-textpic-imagecolumn, 
.csc-textpic-firstcol
{
    max-width: 100% !important;
}

/* Table-Elemente fuer Bildunterschriften relativ machen */
.csc-textpic-image table,
.csc-textpic-image tbody,
.csc-textpic-image tr,
.csc-textpic-image td{  
  display: block;
  max-width: 100% !important;
  height: auto;
  width: auto;
}

/* table caption funktioniert dann nicht mehr, also muss sie anders gesetzt werden ,
z.b. unten absolut -- dann muss aber der table relativ sein */
.csc-textpic-image table{
  position: relative;  
}

/* jetzt die bildunterschrift entsprechend anpassen */
.csc-textpic-caption{
  display: block;
  position: absolute;
  padding: 10px;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  background: rgba(0,0,0,0.5);
  color: white;
}

/* in TYPO3 nicht drin ? */
.csc-textpic-image{
  margin-bottom: 10px !important;
}



/*#######################################
  #######################################
  #    VERTIKALE ABSTAENDE        #
  #    UND LAYOUTS  DEFINIEREN          #
  #######################################  
  #######################################  */  


/* Zusätzliche Layouts, über Layout Selektor in Reiter "Erscheinungsbild" */

.dpLayout01{
  background-color: #980066;
  
}
.dpLayout02{
  background-color: #0ebacd;  
}
.dpLayout03{
  background-color: #b62348;    
}

.dpLayout04{
  background-color: white;    
}

.dpLayout01,
.dpLayout02,
.dpLayout03,
.dpLayout04
{
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 12px;
}

.dpLayout01 *,
.dpLayout02 *,
.dpLayout03 *
{
  color: white !important;
}


.csc-default{  
  /*margin: 15px 0;   GEHT NICHT, da die .rows gecleart werden !*/
  padding-top: 15px;
  padding-bottom: 15px;
}

.dpCSC-AbOb{
    padding-top: 15px;
  padding-bottom: 0;
}
.dpCSC-AbUn{
    padding-top: 0;
  padding-bottom: 15px;
}
.dpCSC-KeAb{
    padding-top: 0;
  padding-bottom: 0;
}
.dpCSC-EzBildBoxO{
  padding-bottom: 0;
  margin-bottom: -10px;
}
.dpCSC-AbObEin{
    padding-top: 15px;
  padding-bottom: 0;
  padding-left: 40px;
}
.dpCSC-AbUnEin{
    padding-top: 0;
  padding-bottom: 15px;
  padding-left: 40px;
}
.dpCSC-KeAbEin{
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 40px;
}



/*  #########################################
  #########################################
  #    HORIZONTALE ABSTAENDE DEFINIEREN   #
  #########################################  
  #########################################  */


.container{
  padding-left: 4px;
  padding-right: 4px;
}

.row{
  margin-left: -4px;
  margin-right: -4px;  
}


/*  der Hammer, das sowas geht - bringt aber in diesem Fall nix,
  da nur der innerste, von TYPO3 erzeugte Div-Wrapper vertikale abstaende 
  definieren darf kann */

[class*="col-"]{
      padding-left: 4px;
    padding-right: 4px;
}


/*  ##########################################################
  ##                            ##
  ##      CSS-DEFINITIONEN DER GRID-ELEMENTE      ##
  ##                            ##
  ##########################################################  */


/* Definition fuer Info-Klappbox und Infobox 2*/

.dpInfoBox2Wrap{
  padding-top: 15px;
  padding-bottom: 15px;
}

.dpInfoBox2{
    border: 1px solid rgba(0,0,0,0.3);        
  background: white;  
}

.dpInfoKlappeHeader,
.dpAutoKlappeHeader{ 
    position: relative;
    width: 100%;
    background: #666699;
    color: #ffffff;
    padding: 5px 12px 3px;
    border-radius: 6px;
}

.dpInfoKlappeHeader .csc-default,
.dpAutoKlappeHeader .csc-default{   
  padding-top: 0;
  padding-bottom: 0;
}

.dpInfoKlappeHeader *,
.dpAutoKlappeHeader *{
    color: white;
}

.dpKlappLink,
.dpAutoKlappLink{
    display: block;
    width: 100%;
}

.dpInfoKlappe{
    /* Nur zum Identifizieren ueber Javascript */
}

.dpInfoKlappeBody{
    width: 100%;
    padding: 10px;  
    background: white;
    border-radius: 9px;
}

.dpInfoKlappeHeader *,
.dpAutoKlappeHeader *{
    color: white;
    display: inline-block;
}


/****************************************************************************************
# Default css file for content edited with htmlArea RTE
#
# Defines a few class selectors that can be simply taken as examples by anyone who needs to configure the RTE.
# This css file is referenced by property RTE.default.contentCSS in the default configuration of htmlArea RTE.
#
# GEHOLT VON: \typo3\sysext\rtehtmlarea\res\contentcss\default.css
#
# ***************************************************************************************/

/* Left, center, right and justify alignment of text in block elements*/
p.align-left, td.align-left, th.align-left, 
h1.align-left, h2.align-left, h3.align-left, 
h4.align-left, h5.align-left, h6.align-left, 
div.align-left, address.align-left { 
    text-align: left; 
}
p.align-center, td.align-center, th.align-center, 
h1.align-center, h2.align-center, h3.align-center, 
h4.align-center, h5.align-center, h6.align-center, 
div.align-center, address.align-center { 
    text-align: center; 
}
p.align-right, td.align-right, th.align-right, h1.align-right, 
h2.align-right, h3.align-right, h4.align-right, 
h5.align-right, h6.align-right, div.align-right, 
address.align-right { 
    text-align: right; 
}
p.align-justify, td.align-justify, th.align-justify, 
h1.align-justify, h2.align-justify, h3.align-justify, 
h4.align-justify, h5.align-justify, h6.align-justify, 
div.align-justify, address.align-justify { 
    text-align: justify; 
}

/* Two frame examples taken from the example 
CSS file of CSS Styled Content extension and 
applied to p and table block elements.*/
p.csc-frame-frame1, table.csc-frame-frame1 { 
    background-color: #EDEBF1; 
    padding: 2px 4px 2px 4px; 
    border: 1px solid #333333; 
}
p.csc-frame-frame2, table.csc-frame-frame2 { 
    background-color: #F5FFAA; 
    padding: 2px 4px 2px 4px; 
    border: 1px solid #333333; 
}

/* Bullet styles for unordered lists.*/
ul.component-items { 
    color: #186900; 
    list-style-type: circle; 
}
ul.action-items { 
    color: #8A0020; 
    /* klappt das ? Oder wo muss dieses GIF hin? */
    list-style-image: url(img/red_arrow_bullet.gif); 
}

/* Numbering styles for ordered lists.*/
ol.component-items-ordered { 
    color: #10007B; 
    list-style-type: lower-roman; 
}
ol.action-items-ordered { 
    color: #8A0020; 
    list-style-type: lower-greek; 
}

.csc-mailform ol {
  list-style: none;
}

/* Three inline text colors taken from the color scheme of CSS Styled Content extension.*/
span.important { 
    color: #8A0020; 
}
span.name-of-person { 
    color: #10007B; 
}
span.detail { 
  color: green;
}

/* Selectors for the default configuration of the link accessibity feature.*/
a.external-link {}
a.external-link-new-window {}
a.internal-link {}
a.internal-link-new-window {}
a.download {}
a.mail {}

/* Default selector for indentation.*/
div.indent { 
    margin-left: 2em; 
}


/*##############################################################################
##
##   ENDE DER STANDARD-DEFINITIONEN
##
##############################################################################*/

/* dpCode,dpNotiz,dpWichtig,dpWarnung,dpFloatLinks,dpFloatRechts */

p.dpCode { 
    font-family: monospace; 
    font-size: 1.1em;
}
p.dpNotiz {
    background: #dfd; 
    padding: 1em; 
    border-top: 1px #bdb dotted; 
    border-bottom: 1px #bdb dotted;
}
p.dpWichtig {
    background: #ffd; 
    padding: 1em; 
    border-top: 1px #ddb dotted; 
    border-bottom: 1px #ddb dotted;
}
p.dpWarnung {
    background: #fdd; 
    padding: 1em; 
    border-top: 1px #dbb dotted; 
    border-bottom: 1px #dbb dotted;
}
p.dpFloatLinks { 
    float: left; 
    display:inline; 
    margin-right: 1em; 
    margin-bottom: 0.15em;
}
p.dpFloatRechts { 
    float: right; 
    display:inline; 
    margin-left: 1em; 
    margin-bottom: 0.15em;
}

/* Erste echte-eigene Definition */

a.dpBtnFeature {
    display: inline-block;
    border-radius: 6px;
    width: 100%;
    max-width: 200px; /* hauptsaechlich fuer RTE */    
    height: 100%;
    background: #666699;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 8px 12px;      
}

a.dpBtnFeature:hover {
    /* heller fuer hover */
    background: #7676a9;
}

span.dpTextFX01{
    color: rgb(244,232,190);
    text-shadow: 0 0 8px #ffffff;
}

table.dpTable1 {
  background-color: #F5FFAA;
}
table.dpTable2 {
  background-color: #ddffdd;
}
table.dpTable3 {
  background-color: #C5DBE6;
}

/* Tables Responsiv machen */
table.contenttable,
table.csc-frame-frame1,
table.csc-frame-frame2,
table.dpTable1,
table.dpTable2,
table.dpTable3{
  display: block;
  max-width: 100%;
  height: auto;
  overflow-x: auto;  
  padding: 10px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

table.contenttable td,
table.csc-frame-frame1 td,
table.csc-frame-frame2 td,
table.dpTable1 td,
table.dpTable2 td,
table.dpTable3 td,
table.contenttable th,
table.csc-frame-frame1 th,
table.csc-frame-frame2 th,
table.dpTable1 th,
table.dpTable2 th,
table.dpTable3 th{
  padding: 5px;  
}

table.dpTable3 td,
table.dpTable3 th{
  border: solid 1px #666699;  
}
table.dpTable3{
  padding-left: 0;
  padding-right: 0;
}


/*  ####################################

  Stellschrauben (Typografie ist aber ganz oben!)
  Farben:
  Blau: #003552;
  blau-grau, vermutlich: #414c52;
  Stefi's 20% Grau-Blau: #c8c9d4;


  #################################### */

/* horizontale abstaende 
[class*="col-"]{
      padding-left: 25px;
    padding-right: 25px;
  }
  */
  
  /* zum ausgleichen, falls noetig!
  .row{
    margin-left: -25px;
    margin-right: -25px;
    }
  */
  
  
  /*  Header Img mit neg. Margins, damit's passt 
    Muss angepasst werden entsprechend der oben gesetzten horiz. abstaende */  
.dpHeaderImg{
  margin: -15px -15px -25px;
}

html, body{
  background: white;
  color: black;
}

.dpHeader{
  background-color: white;
  /*color: white !important;*/
  min-height: 10px;   
}



.dpFooter{
  background-color: white;  
  min-height: 10px;     
}




.dpInhalt{     
  background-color: white;  
  min-height: 400px; 
  min-width: 100px;
  /* padding: 10px 30px 10px; Mehr Rand, vor allem Links + Rechts */   
}

/* Grid Element Infobox */
.dpInfoBox{
  background: #980066;
  color: white;    
  padding: 8px 12px;
}

.dpInfoBox h1,
.dpInfoBox h2,
.dpInfoBox h3,
.dpInfoBox h4,
.dpInfoBox h5,
.dpInfoBox h6{
  color: white;
}

.dpInfoBoxWrap{
  padding-top: 15px;
  padding-bottom: 15px;
}




/* Bootstrap Navigation; einfach mit !important drueber */

.navbar-toggle .icon-bar{
  border: 2px solid black;
  transition: all 1s;
  
}

.navbar-toggle:hover .icon-bar{
  border: 2px solid #b62348;
  transition: all 1s;
  
}


.navbar-inverse{
  background: white;
  /* font-weight: bold; */
  font-size: 18px;
  font-size: 1.8rem;
}

.nav a{
  text-transform: uppercase;
  color: black !important;
  transition: all 1s;
}

.nav a:hover{
  background: white !important;
  color: #b62348 !important;
  transition: all 1s;
}


.navbar-inverse .navbar-nav > li > a:hover {
    color: red;
}

.nav .active > a, 
.nav .active > a:hover, 
.nav .active > a:focus {
  background-color: white !important;
  color: #b62348 !important;
  transition: all 1s;
}


.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: white !important;
  color: #b62348 !important;
  transition: all 1s;
}

.dropdown-menu{
  background: white;  
}


.dropdown-menu .divider{
  background-color: #414c52 !important;  
}

.dropdown-header {    
    font-size: 1.6rem;
    line-height: 2rem;
    color: black;
}

.dropdown-header:hover {    
    background: transparent !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #b62348 !important;
  background-color: white;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {   
  background-color: white;
}

.navbar-brand{
  font-size: 16px;
  font-size: 1.6rem;
}

.navbar-inverse .navbar-toggle {   
    background-color: white;
    border: 1px solid transparent; 
  border-radius: 0;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: white;
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: white;
}

@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, 
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, 
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: goldenrod;
  }
}