/* =======================================================
Stylesheet for Joomla Template "im sonnenbuehl"
Function:   General Stylesheet
File:       template.css
Status:     Draft
Date:       2010-06-18
Author:     Kevin Richter
Structure:  1. General Styles
            2. Styles for Layout Areas
            3. Content Specifics
======================================================= */

/* ====================================
   1. Calibration and General Styles
   ================================= */

/* calibration of the most important elements */
* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100.1%;
}

h1, h2, h3, ul, ol {
  margin-bottom: 7px;
}

/* Genenal Selectors */
body {
  background: #fff url(../images/bg_site3.jpg) center top no-repeat;
  background-attachment: fixed;
  color: #000000;
  font-family: Trebuchet, "Trebuchet MS", Tahoma, sans-serif;
  font-size: smaller;
  overflow: visible;
}

/* General Links */
a, li, img, input {
  outline: none;
}

a {
  color: #000000;
  text-decoration: none;
}

a:link,
a:visited {
  color: #000000;
}

a:focus,
a:hover {
  color: #CC9933;
}

p {
  line-height: 1.3em;
}

h1, h2, h3 {
  color: #cc9933;
}

h2 a {
  color: #CC9933;
}

h2 a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 130%;
}

h2,
h3,
h2.contentheading {
  font-size: 100%;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 7px;
}

h2.contentheading {
  padding: 14px 0 3px 7px;
  background-color: #ffffff;
  margin-bottom: 0;
}

ul {
  list-style-type: none;
  margin-bottom: 2px;
}

#content ul li {
  margin-bottom: 10px;
  line-height: 1em;
}

.border-thick {
  background-color: #FDFBF6;
  border: none;
  border-bottom: 1px dotted #CC9933;
  border-top: 1px dotted #CC9933;
  height: 7px;
}

.border-thin {
  border: none;
  border-bottom: 1px dotted #CC9933;
}

hr.border-thin {
  margin: 5px 0;
}


/* General Selectors */
.border-top {
  border-top: 1px dotted #CC9933;
}

.border-bottom {
  border-bottom: 1px dotted #CC9933;
  padding-bottom: 7px;
}

.center {
  text-align: center;
}

.contentSection {
  clear: both;
  background-color: #ffffff;
  padding: 7px;
  margin-bottom: 7px;
  height: 100%;
  position: relative;
}

.contentSection h2 {
  padding-top: 7px;
}


.contentSection a {
  border-bottom: 1px dotted #CC9933;
}

.contentSection a:hover {
  color: #CC9933;
}

.contentBoxImage {
  float: left;
}

.contentBoxImage a,
.contentBoxImage img {
  border: none;
}

.contentBoxText {
  vertical-align: bottom;
  padding-left: 7px;
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 279px;
}

.clear {
  clear: both;
}

.float-left {
  float: left;
}

.highlight {
  color: #cc9933;
  font-weight: bold;
}

.highlight2 {
  color: #cc9933;
  font-style: italic;
}

.toolspan {
  font-weight: bold;
  color: #cc9933;
  margin-top: 5px;
  display: block;
}


.highlightFrame {
  background-color: #FDFBF6;
  border-top: 1px dotted #CC9933;
  border-bottom: 1px dotted #CC9933;
  color: #cc9933;
  font-style: italic;
  font-weight: bold;
  padding: 5px;
}

.highlightFrame.test {
  color:  #000000;
  font-weight: normal;
  padding: 10px;
  margin-bottom: 0px;
}

.inline {
  display: inline;
}

.invisible,
.pagecounter {
	display: inline;
	height: 0px;
	left: -3000px;
	position: absolute;
	top: -2000px;
	width: 0px;
	z-index: 200;
}

.italic {
  font-style: italic;
}


.margin-bottom-7 {
  margin-bottom: 7px;
}

.no-margin {
  margin: 0;
  line-height: normal;
}

a.readmore {
  color: #CC9933;
}


.vertical-top {
  vertical-align: top;
}

.vertical-bottom {
  vertical-align: bottom;
  padding-left: 10px;
}


/* =============================
   2. Styles for Layout Areas
   ========================== */

#wrapper {
  margin: 0 auto;
  width: 960px;
  max-width: 100%;
}


#left {
  background-color: #ffffff;
  float: left;
  padding: .5em;
  padding-bottom: 0;
  width: 85px;
  position: fixed;
}

#logo {
  background: url(../images/bg_logo_85.jpg) top left no-repeat;
  height: 70px;
  margin-bottom: 15px;
  margin-top: 26px;
}

/* Main Menu */
#navi {
  font-family: Georgia, serif;
  font-size: 95%;
  letter-spacing: 0.5px;
  text-align: center;
}

#navi ul.menu {
  list-style-type: none;
  margin-bottom: 0;
}

#navi a {
  text-decoration: none;
}

#navi a:link,
#navi a:visited {
  color: #000000;
}

#navi a:focus,
#navi a:hover {
  color: #cc9933;
}

/* Menu Level 1 */
#navi ul.menu li {
  border-top: 1.5px dotted #cc9933;
  border-bottom: 1.5px dotted #cc9933;
  margin-bottom: .7em;
  padding: .1em 0;
}
#navi ul.menu li#current a {
  color: #cc9933;
}

#navi ul.menu li#current,
#navi ul.menu li.active {
  border-top: 2px solid #cc9933;
  border-bottom: 2px solid #cc9933;
}

/* Level 1 - Imprint */
#navi ul.menu .item20 {
  font-size: 75%;
  font-weight: bold;
  letter-spacing: .1em;
  margin-top: 3.5em;
  padding: .3em 0;
  text-transform: uppercase;
}

/* Menu Level 2 */
#navi ul.menu li ul {
  border-top: 1.5px dotted #cc9933;
  padding-top: .9em;
  margin-top: .1em;
  margin-bottom: 0;
}

#navi ul.menu li ul li {
  border: none;
  line-height: 0;
  margin-bottom: 1em;
  font-style: italic;
}

#navi ul.menu li ul li:last-child {
  margin-bottom: .5em;
}

#navi ul.menu li#current ul li a {
  color: #000000;
}

#navi ul.menu li ul li#current {
  border: none;
}

/*** MAIN LAYER ***************************************************************/
#main {
  line-height: 1em;
  margin-left: 105px;
}

.contentSection-phrase,
.moduletable_phrase {
  height: 110px;
  padding: 0 7px;
  line-height: 1.7em;
  background-color: #ffffff;
  font-family: Georgia, Times, serif;
  color: #cc9933;
  font-size: 160%;
  font-style: italic;
  margin-bottom: 7px;
}

/*** LANGUAGE MODULE **********************************************************/
#language {
  font-size: 85%;
  background-color: #fff;
  position: fixed;
  min-width: 850px;
  display: none;
}

/* Joomfish Module */
#jflanguageselection {
  float: right;
  margin-right: .5em;
  height: 20px;
}

#jflanguageselection ul li {
  float: left;
  margin-left: .2em;
  width: 2em;
  text-align: center;
}

#jflanguageselection label.jflanguageselection {
	position:absolute;
    height: 0;
	left: -3000px;
    width: 0;
}

#active_language,
#active_language a {
  color: #cc9933;
  text-decoration: none;
}

/* Contents */

#content {
  font-size: 90%;
  min-width: 850px;
  padding-right: 1em;
}

#content a:link {
  border-bottom: 1px dotted #CC9933;
  font-weight: normal;
}

#content a:hover,
#content a:active {
  color: #CC9933;
}

#content a img {
  display: block;
}

#content p {
  margin-bottom: 7px;
}

#content p:last-child {
  margin-bottom: 0;
}

#content p.buttonheading {
  margin-bottom: 0;
}

#content div.contentSection div.contentSectionBox {
  width: 550px;
  padding: 0;
  margin: 0;
}

#content div.contentSection div.contentSectionBox .innerBox {
  width: 50%;
  float: left;
}

#content div.contentSection div.contentSectionBox .innerBox span.highlight2 {
  display: block;
  float: left;
  width: 50px;
}

#content div.contentSection div.contentSectionBoxRight {
  width: 279px;
  float: left;
  margin-left: 7px;
}

#content div.contentSection div.contentSectionBoxRight h3 {
  padding: 3px 10px 0pt;
}

#content div.contentSection div.contentSectionBoxRight .highlightFrame {
  color:  #000000;
  font-weight: normal;
  padding: 10px;
  margin-bottom: 0px;
}

#content div.contentSection div.contentSectionBoxRight .highlightFrame.bnb {
  text-align: center;
}

#content div.contentSection div.contentSectionBoxRight .highlightFrame.bnb a img {
  border: none;
  display: inline;
}

/* WTF?!?!?! */
#content div.contentSection div.contentSectionBoxRight .highlightFrame.bnb a {
  border: none;
}

#content div.contentSection div.contentSectionBoxRight .highlightFrame .highlight2 {
  line-height: 0.9em;
}

#content div.contentSection .contentBoxText h2 a {
  border: none;
  color: #CC9933;
}

a.readmore {
  color: #CC9933;
  border-bottom: none;
}


/* Joomfish Default Text */
#content div.jfdefaulttext {
  background-color: #FFFF00;
  color: #FF0000;
  font-weight: bold;
  padding: .5em;
}

/* ================================
   3. Content Specifics
   ================================ */

/*** EVENTLIST ****************************************************************/
#eventlist .el-textBox {
  width: 550px;
  margin-right: 7px;
  float: left;
}

#eventlist .el-textBox h2 {
  width: 78%;
  padding-bottom: 7px;
  float: left;
}

#eventlist .el-textBox h2.teaser {
  color: #000000;
}

#eventlist .el-textBox .el-category {
  padding: 7px 0 7px 1%;
  float: left;
}

#eventlist .el-textBox .el-category .el-color {
  background-color: #FF0000;
  width: 10px;
  height: 10px;
  float: left;
  margin-right: 3px;
  margin-top: 2px;
}

#eventlist .el-textBox .el-category .el-title {
  float: left;
  color: #CC9933;
  min-width: 10px;
}

#eventlist .el-textBox .el-details {
  background-color: #FDFBF6;
  border-top: 1px dotted #CC9933;
  border-bottom: 1px dotted #CC9933;
  padding: 7px 0 2px 0;
  margin-top: -6px;
  margin-bottom: 7px;
}

#eventlist .el-textBox .el-details .el-detailsBoxLeft,
#eventlist .el-textBox .el-details .el-detailsBoxRight {
  width: 50%;
  margin-bottom: 5px;
  float: left;
}

#eventlist .el-textBox .el-details .el-detailsBoxLeft .el-label,
#eventlist .el-textBox .el-details .el-detailsBoxRight .el-label {
  color: #CC9933;
  font-style: italic;
}


#eventlist .el-textBox .el-details .el-detailsBoxLeft .el-label {
  width: 20%;
  float: left;
}

#eventlist .el-textBox .el-details .el-detailsBoxRight .el-label {
  width: 30%;
  float: left;
}

#eventlist .el-textBox .el-details .el-detailsBoxLeft .el-content {
  width: 80%;
  float: left;
}

#eventlist .el-textBox .el-details .el-detailsBoxRight .el-content {
  width: 70%;
  float: left;
}

#eventlist .el-imageBox {
  width: 279px;
  float: left;
}

#eventlist .el-imageBox img{
  width: 279px;
}
/*** END EVENTLIST ************************************************************/

/*** EVENTLIST TEASER *********************************************************/
#eventlist.teaser div.contentSection {
  margin-bottom: 3px;
}

#eventlist #teaserHeading  {
  background-color: #FFFFFF;
  padding: 7px;
  margin-bottom: 3px;
}

#eventlist #teaserHeading h3 {
  width: 50%;
  margin-bottom: 0;
  float: left;
}

#eventlist #teaserHeading h3:after {
  content: url(../images/arrow-round.jpg);
  margin-left: 2px;
}

#eventlist #teaserHeading .allEvents {
  float: right;
}

#eventlist.teaser .el-textBox .el-category .el-color {
  margin-top: 1px;
}

/*** END EVENTLIST TEASER *****************************************************/

/*** PHOCA GALLERY ************************************************************/

#phocagallery {
  background-color: #ffffff;
  padding: 1em 10px;
}

.componentheading_phoca {
  color: #CC9933;
  font-size: 120%;
  text-transform: uppercase;
  font-weight: normal;
  padding: 7px;
  padding-bottom: 0;
  background-color: #FFFFFF;
}

.contentpane_phoca {
  padding-top: 7px;
  background-color: #FFFFFF;
}

.contentdescription_phoca {
  background-color: #FDFBF6;
  border-top: 1px dotted #CC9933;
  border-bottom: 1px dotted #CC9933;
  padding: 6px 5px;
  line-height: 1.2em;
}

.contentSection.phocaPoweredBy,
.contentSection.eventlistPoweredBy {
  color: #CCCCCC;
  padding: 5px 0 5px 0;
  margin-top: 5px;
  text-align: center;
}

/*.contentSection.phocaPoweredBy {
  border-top: 1px dotted #CC9933;
}*/


.contentSection.phocaPoweredBy a,
.contentSection.eventlistPoweredBy a {
  color: #CC9933;
}

/* Phoca Gallery - Categories */
.phocaGalleryBox {
  float: left;
  margin: 0 10px 20px 0;
}

.phocaGalleryBox.no-margin-right {
  margin-right: 0 !important;
}

.phocaGalleryBoxImage {
  width: 200px !important;
  height: 125px !important;
  margin-bottom: 7px;
}

.phocaGalleryBoxTitle a:hover h2 {
  text-decoration: underline;
}

.phocaGalleryBoxDetails {
  border-bottom: 1px dotted #CC9933;
  border-top: 1px dotted #CC9933;
  padding: 5px 3px 3px 0;
}

.phocaGalleryBoxCategoryColor {
  width: 10px;
  height: 10px;
  float: left;
  margin-right: 3px;
  margin-top: 1px;
}

.phocaGalleryBoxCategoryTitle {
  float: left;
  color: #CC9933;
  width: 120px;
}

.phocaGalleryBoxDate {
  float: right;
}

/* Phoca Gallery - Gallery */
#phoca-gallery-page #gallery-header {
  background-color: #FFFFFF;
}

#phoca-gallery-page .componentheading_phoca {
  width: 50%;
  float: left;
}

#phoca-gallery-page .gallery-header-details {
  float: right;
  padding: 7px 7px 0 0;
  text-align: right;
  width: 30%;
}

.phocagallery-box-file {
  float: left;
  background-color: transparent;
  border: none;
}

.phocagallery-box-file:hover {
  border: none;
  background-color: transparent;
}

.highslide img {
  border: none;
}

.phocagallery-box-file img {
  border: none;
}

.phocagallery-box-file-first a img {
  border: none;
}

#phocagallery ul.pagination {
  margin: 15px 0;
  text-align: center;
}

#phocagallery ul.pagination li {
  display: inline;
  margin-left: 10px;
}

#phocagallery ul.pagination li:first-child {
  margin-left: 0;
}

#phocagallery ul.pagination li a {
  border-bottom: none;
  color: #CC9933;
}

#phocagallery ul.pagination li a:hover,
#phocagallery ul.pagination li a:focus {
  border-bottom: 1px dotted #CC9933;
}

.pimo {
  margin: 0 20px 20px 0;
}

.right-image img {
  padding-right: 0;
  margin-right: 0;
}

/* Detailed View */


/*** END PHOCA GALLERY ********************************************************/

/*** CONTACT ******************************************************************/
/* RSForm! */
#contact .contentSectionBox {
  clear: both;
  width: 550px !important;
  padding-top: 5px !important;
}

form .rsf-form {
  margin-top: 5px;
}

form .rsf-box {
  width: 285px;
  float: left;
  margin-right: 10px;
}

form .rsf-box-right {
  width: 255px;
  float: left;
}

form .rsf-label,
form .rsf-label-right {
  float: left;
  margin-top: 5px;
  width: 115px;
}

form .rsf-label {
  width: 115px;
}

form .rsf-label-free {
  margin-right: 10px;
}

form .rsf-label-right {
  width: 85px;
}

form .rsf-required {
  color: #CC9933;
}

form .rsf-input input,
form .rsf-input textarea {
  background-color: #F8F6EA;
  border: none;
  margin-top: 3px;
  width: 170px;
}

form .rsf-input span {
  text-align: right;
  display: block;
  margin: 2px 0;
}


form .rsf-check {
  margin: 5px 0 10px 0;
}

form input#submit {
  background-color: #FFFFFF;
  border: 1px dotted #F8F6EA;
  color: #000000;
  font-weight: 700;
  margin-top: 13px;
  outline: none;
}

form input#submit:hover {
  color: #CC9933;
}

address {
  font-style: normal;
  line-height: 1.8em;
  white-space: nowrap;
}

/*** UNTERKUNFT ***************************************************************/
#bnb {
  height: 91px;
  width: 109px;
  margin: 0 auto;
  background: url(../images/B&B-norm.jpg) center top no-repeat;
  display: block;
}

#bnb:hover {
  background: url(../images/B&B-aktiv.jpg) center top no-repeat;
}

.highlightFrame pre {
  display: inline;
}


/*** END UNTERKUNFT ***********************************************************/

/*** IMPRINT ******************************************************************/
#wrapper.impressum h2.contentheading,
#wrapper.imprint h2.contentheading,
#wrapper.aviso-legal h2.contentheading {
  padding-top: 20px;
}


/*** END IMPRINT **************************************************************/

/* JCE Background Fix */
#tinymce .contentSection {
  height: auto;
  width: auto;
  background-color: #FFFFFF;
}