/* ChangeLog
----------------------------------------------------------------------------------------------
1.0   03.02.15   Konfiguration für baeckerei-bad.ch
*/


/* Farben
----------------------------------------------------------------------------------------------
#733e0f  braun
#502b0a  dunkles braun
#ffed00  gelb
#fffdee  helles gelb
*/


/* Schriften einbinden
---------------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Maven+Pro|Open+Sans&display=swap');


/* Globale definitionen / Fluid Grid
---------------------------------------------------------------------------------------------- */
* {
  box-sizing:border-box;
}
 
/* Fluid-Grid: Max- und MinWidth */
.container_12,
.container_16 {
  max-width: 1400px;
  min-width: 960px;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}
 
img{
  max-width: 100%;
  height: auto;
  width: auto;
}
 
@-moz-document url-prefix() {  
    img{
        width: 100%;
        max-width: 100%;
    }
}


/* Schriftdefinitionen
---------------------------------------------------------------------------------------------- */
/* Grundschrift */
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;  
  color: #000;
  line-height: 1.7em;
}
 
/* Headings */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Maven Pro','Open Sans', sans-serif;
  color: #502b0a;
  margin-bottom:.5em;
  line-height:1.2em;
  font-weight: normal;
  text-transform: lowercase;
}

h1 { font-size: 1.8em; 
  border-bottom: 1px solid #733e0f; padding-bottom: 5px;  
}
h2 { font-size: 1.4em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1.0em; }
 

/* Navigation */
#menu a {
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  font-size: 1.4em;
  text-decoration: none;
  font-weight: normal;
  text-transform: lowercase;
}

#submenu a {
  font-family: 'Maven Pro', 'Open Sans', sans-serif;
  text-transform: lowercase;
}

/* Textbausteine */
p {
  margin-bottom: 1.5em;
}


/* Anchors / Links
---------------------------------------------------------------------------------------------- */
a {
  text-decoration: none;
  font-weight:normal;
  color:  #733e0f;
}
 
a:hover {
  text-decoration: underline;
}

/* Link Icons */
a.download {
  padding-left: 15px;
  background: url("../fileadmin/img/icons/download.gif") no-repeat left center;
}
 
a.mail {
  padding-left: 20px;
  background: url("../fileadmin/img/icons/mail.gif") no-repeat left center;
}
 
a.internal-link {
  padding-left: 15px;
  background: url("../fileadmin/img/icons/internal_link.gif") no-repeat left center;
}
 
a.external-link,
a.external-link-new-window {
  padding-left: 15px;
  background: url("../fileadmin/img/icons/external_link_new_window.gif") no-repeat left center;
}


/* Hintergrund
---------------------------------------------------------------------------------------------- */
body {
  background-color: #fffdee;
}

#main {
 background-color: #FFF;  
  background: #fff url("img/sonne.png") no-repeat 105% 105%;
  box-shadow:2px 2px 20px 1px #000;
  -webkit-box-shadow:2px 2px 20px 1px #000;
  -moz-box-shadow:2px 2px 20px 1px #000;
  margin-bottom:auto;
  display:block;
  border-top: #733e0f 9px solid;
  border-bottom: #733e0f 9px solid;
}



/* #menu_container - DIVs
---------------------------------------------------------------------------------------------- */
/* #menu_container{
} */

#logo {
  padding: 10px 0 0 10px;  
}

#logo img {
  height: auto;
  width: auto;
}

#menu {
  padding-top: 3.1%;
}


/* #menu_container - Menu
---------------------------------------------------------------------------------------------- */
#menu nav ul{
  padding-left: 20px;
  margin: 0;
  float: right;
}

#menu nav ul li {
  list-style: none;
  float: left;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 0px;
  margin: 8px 0;
  border-right:#733e0f 2px solid;
}

#menu nav ul li:first-child {
  padding-left: 0px;  
}

#menu nav ul li:last-of-type {
  border-right: none;
}

#menu nav a {
  width: auto;
  color: #733e0f;
  display:block;
  -webkit-backface-visibility:hidden;
  -webkit-transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
}

#menu nav a:hover {
  text-decoration: none;
  color: #733e0f;
  /* font-weight: bold; */
}

#menu nav .aktiv {
  text-decoration: none;
  color: #733e0f;
  font-weight: bold;  
}

#menu .menu_level_2,
#menu .menu_level_3,
#menu .menu_level_4 {
  display: none;
}


/* #header_container
---------------------------------------------------------------------------------------------- */
#header {
  margin: 0;
  height: 250px;
  width: 100%;
  overflow: hidden;
}

#header img {
  margin: 0px;
  width: 100%;
  height: auto;
}

#header_shadow {
  position: relative;
  height: 250px;
  -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow:    inset 0px 0px 15px 0px rgba(0, 0, 0, 1);
  box-shadow:         inset 0px 0px 10px 0px rgba(0, 0, 0, 1);
}


/* #content_container - DIVs
---------------------------------------------------------------------------------------------- */
#content_container {
  display: table;
  /* table-display: fixed; */
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
}

#content,
#submenu,
#sidebar {
  display: table-cell;
  vertical-align: top;
}

#submenu {
  padding-right: 15px;  
  width: 150px;
}

#sidebar {
  padding-left: 15px;
}

#content {
  padding-left: 15px;
  padding-right: 15px;
}


/* #content_container - Submenu
---------------------------------------------------------------------------------------------- */
h5.sitename {
  border-bottom: 1px solid #ddd;
}

#submenu ul {
  padding: 0;  
}

#submenu ul li {
  list-style: none;
  margin: 0 0 10px 0;  
}

#submenu ul li a {
  color: #000;
  margin-top: 0.5em;
  margin-bottom:.5em;
  line-height:1.5em;
  font-weight: normal;
  text-decoration:none;
  padding-left: 10px;
  display:block;
}

#submenu ul li a:hover {
  text-decoration: none;
  color: #733e0f;
}

#submenu ul li ul {
  display: none;
}

#submenu ul li:hover ul {
  display: block;
}

/* Aktiv-Zustände */
#submenu .submenu_level_1 a.aktiv,
#submenu .submenu_level_2 a.aktiv {  
  color: #733e0f;
}

/* Level_2 */
#submenu .submenu_level_2 {
  margin-top: 10px;
  margin-bottom: 10px;  
}

#submenu .submenu_level_2 li:first-of-type {
  border-top: 1px solid #ddd;
}

#submenu .submenu_level_2 li:last-of-type {
  border-bottom: 1px solid #ddd;
}

#submenu .submenu_level_2 a {
  font-size: 12px;
  font-weight: lighter;
}


/* #content_container - Sidebar
---------------------------------------------------------------------------------------------- */
#sidebar {
  display: inline-block;
  width: 280px;
  margin: 20px 0 0 0;
  padding: 0 0 0 0;
}

#sidebar > div {
  border: thin solid #ddd;
  background-color: rgba(255,255,255,0.7);
  margin-bottom: 30px;
}

#sidebar h1 {
  color: #fff;  
  background-color: #733e0f;
  padding: 8px 8px 8px 15px;
  margin: 0 0 10px 0;
}

#sidebar h1 a {
  color: #fff;
  display: block;
}

#sidebar h1 a:hover {
  text-decoration: none;
}

#sidebar div h4 {
  margin: 0 15px 10px 15px;  
}


#sidebar div p,
#sidebar div table {
  margin: 0 15px 10px 15px;
  font-size: 0.9em;
}


iframe body {
  background-color: transparent;
}


/* #footer_container - DIVs
---------------------------------------------------------------------------------------------- */
#footer_container {
  color: #733e0f;  
  font-size: 10px;  
  margin-top: 0px;  
}


/* #footer_container - FooterNav
---------------------------------------------------------------------------------------------- */
#footernav {
  text-align: right;
  display: inline-block;
}

#footer_container a {
  color: #733e0f;
  text-decoration:none;
}

#footer_container a:hover {
  color: #733e0f;
  text-decoration:none;
}

#footernav ul li {
  display: inline;
  border-left: 1px #733e0f solid;
  padding: 0 15px 0 15px;
  margin: 0;
}

#footernav ul li:first-child {
  border: none;
  margin-left: 20px;  
}


/* Erweiterungen
---------------------------------------------------------------------------------------------- */

/* Content-Element: Tabelle
---------------------------------------------------------------------------------------------- */

th {
  text-align: left; 
  font-weight: bold;
}

td {
  padding: 5px 0 5px 0; 
}

.contenttable {
  width: 100%;
  margin-bottom: 15px;
}

.contenttable thead {
  text-align: left;
  font-weight: bold; 
  border-bottom: 1px solid #bbb;
}

.contenttable .tr-odd {
  background-color: #fffdee; 
}

.contenttable .tr-last {
  border-bottom: 1px solid #bbb;
}


/* Content-Element: Formular
---------------------------------------------------------------------------------------------- */
.csc-form-element ol li {
  float:none;
  display:block;
}
 
.csc-form-element label {
  line-height: 2.5em;
}

/* Obligatorisch-Markierung */
.csc-form-element label em, 
.csc-form-element legend em {
  display: inline ! important;
  color: #C36A66 ! important;
}
 
.csc-form-element label em:before {
    content: "\00a0" ;
}
 
.csc-form-element input, 
.csc-form-element textarea {
  min-width: 200px;
  margin: 0 2px 0 5px;
  display: inline-block;
  padding: 4px;
  border: solid 1px #0055a0;
  background-color: #f2f9ff;
}
 
.csc-form-element input[type=submit] {
 border: solid 1px #0055a0;
}


/* Content-Element: Sitemap
---------------------------------------------------------------------------------------------- */
.csc-sitemap ul {
  list-style-type: disc;
}


/* Erweiterung: Grid Elements
---------------------------------------------------------------------------------------------- */
/* Golderner Schnitt */
.grid_goldenerschnitt { width: 100%; overflow:hidden;}
.grid_goldenerschnitt h1 { font-size: 1.3em }
.col1, .col2 { float:left; }
.col1 { width: 60%; margin-right:0%; }
.col2 { width: 38%; margin-left: 2%; }


/* Erweiterung: Powermail
---------------------------------------------------------------------------------------------- */
.powermail_form .extdesc {
  display: none; 
}

.tx-powermail .powermail_fieldset .powermail_legend,
.tx-powermail h3 {
  display: none; 
}

.tx-powermail .powermail_fieldset {
    background: none;
    border: none;
    clear: left;
    margin: 0 0 20px;
    padding: 10px;
    width: 500px;
}

.tx-powermail .powermail_fieldset .powermail_label {
    font-weight: normal;
}

/* Sternchen-Markierung */

 .mandatory{
  font-weight: normal;
  color: #A6401A;
}
.mandatory:before{
    content: '\0000a0';
}

input[type=submit] {
  border: solid 1px #733e0f;
  float: right;
  background-color: #733e0f;
  color: white;
  padding: 8px 10px;
}

/* .tx-powermail .powermail_fieldset .powermail_field.powermail_submit, .tx-powermail .powermail_fieldset .powermail_field.powermail_reset {
    background-color: #733e0f;
    border: none;
    color: white;
    cursor: pointer;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 5px 20px;
} */

.control-label {
  float: left;
  margin-right: 20px;
  width: 150px;
}

.form-control {
  width: 200px;
  border: 1px solid #733e0f;
}

.powermail-input {
  margin-left: 100%;
}

.powermail_fieldwrap .col-sm-10 {
  margin-top: 20px;
}