@charset "UTF-8";

/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) Template for designing a screen layout
 * (de) Gestaltungsvorlage für die Erstellung eines Screenlayouts
 *
 * @copyright       Copyright 2005-2010, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.2.1
 * @revision        $Revision:392 $
 * @lastmodified    $Date:2009-07-05 12:18:40 +0200 (So, 05. Jul 2009) $
 */

@viewport {
   width: device-width;
}

  /** 
   * (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera 
   * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
   *
   * @workaround
   * @affected IE8, FF, Webkit, Opera
   * @css-for all
   * @valid CSS3
   */

  body { overflow-y:scroll; }

 /*------------------------------------------------------------------------------------------------------*/

 /**
  * Design of the Basic Layout | Gestaltung des YAML Basis-Layouts
  *
  * @section layout-basics
  */

  /* Page margins and background | Randbereiche & Seitenhintergrund */
  body{ background-image:none; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size:120.01%; font-weight: normal; text-decoration: none;}
	@media (min-width: 1024px){
		/* Pallisaden werden im Body als Hintergrund angezeigt um über die gesamte Anzeigenbreite zu laufen */
		body{ background-color: #FFFFFF; background-image: url('../../grafik/palisaden.png'); background-position: 0px 114px; background-repeat: repeat-x; font-size: 0.9em; color: #000000; }
	}


  /* Layout:Width, Background, Border | Layout:Breite, Hintergrund, Rahmen */
  .ym-wrapper{ width:100%; max-width: 980px; margin-left:auto; margin-right:auto; }
  .ym-wbox{ }

  /* Design of the Main Layout Elements | Gestaltung der Hauptelemente des Layouts */
  #metanav{ text-align:right; margin-bottom:1vw; }
  /*#mobilenav{ display:none; }*/
  #mobilenavshow{ display:none; }
  #search{ display:none; background-color:#00305E; padding:0.5em; }
  #einstellungen{ display:none; background-color:#00305E; padding:0.5em; }
  #login{ display:none; background-color:#00305E; padding:0.5em; }
  #menu{ display:none; }
  #header{ margin-bottom:2vh; }
	@media (min-width:1024px){ #header{ height: 160px; margin-bottom:0;} }
  #header #logo{ display:none;}
	@media (min-width:1024px){ #header #logo{ display:block;} }
  #header .wortmarke{ display:block; }
	@media (min-width:1024px){ #header .wortmarke{ display:none; } }

  #topnav {  }
  #browsemenu{ text-align:center; }

  aside#headerpic{ background-image:url('../../grafik/roemermuseum-osterburken-nachtS.jpg'); background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; padding-bottom:32%; margin-bottom:1em; }
	@media (min-width:400px){ aside#headerpic{ background-image:url('../../grafik/roemermuseum-osterburken-nachtM.jpg');} }
	@media (min-width:650px){ aside#headerpic{ background-image:url('../../grafik/roemermuseum-osterburken-nachtL.jpg');} }

  #main{ margin-top:15px; margin-left:2%; margin-right:2%; }
	@media(min-width:1024px){ #main{ margin:0; margin-top:15px;} }
  #main.ym-column{ width:96%; }
	@media(min-width:1024px){ #main.ym-column{width:100%;} }

  #toplink{ text-align:right; }
  #toplink a{ display:inline-block; width:5vh; margin-bottom:2.5vh; }
  footer#footer{ background:url('../../grafik/palisaden.jpg') top left repeat-x; background-color:#FFFFFF; background-position:bottom center; padding-bottom:150px; margin:0 1%; }
  @media (min-width: 1024px){ footer#footer{ background:none; background-color:#00305E; padding:5px; clear:both; margin:0; margin-bottom:35px; padding-bottom:0; } }

 /*------------------------------------------------------------------------------------------------------*/
 /*
  * Formatting of the Content Area | Formatierung der Inhaltsbereichs
  *
  * @section layout-main
  */

/*.ym-col1 { width: 50%; float:right; margin-left: -75%; margin-right: 25%; }*/
.ym-col1 { width: 100%; float:right; margin-left: -75%; margin-right: 0; } /* center column */
.ym-col1 .ym-cbox{ padding:0; }
.ym-col2 { width: 25%; float:right; margin-right: 0%; } /* right column */
.ym-col2 .ym-cbox{ padding:0; padding-left:25px; }
.ym-col3 {  float: left; width: 25%; margin-left: 0; margin-right: -5px; }  /* left column */
.ym-col3 .ym-cbox{ padding:0; padding-right:25px; }

.responsiveContainer{ height:0; overflow:hidden; padding-bottom:66.67%; position:relative; }
.responsiveContainer iframe{ height:66.67%; left:0; position:absolute; top:0; width:100%; }
.ce-bodytext{ width:100%; }
	@media( min-width:1024px){ .ce-bodytext{width:auto;} }

 /*------------------------------------------------------------------------------------------------------*/
 /**
  * Design of Additional Layout Elements | Gestaltung weiterer Layoutelemente
  *
  * @section layout-misc
  */

  #tx_cookies{ background:#eee; bottom:0; min-height:35px; position:fixed; width:100%; z-index:10; }
  #tx_cookies_inner{ width:980px; margin-left:auto; margin-right:auto; background:none; }
  #logo{ width: 314px; margin-left: auto; margin-right: auto; }

  ul{ list-style-type: square; }
  div.menu{ list-style-type: none; }
  #search input#suchwort{ width: 140px; margin-left: 10px; }
  #search input#suchbutton{ color: #00305E; margin-left: 80px; margin-top: 3px; }

  .news-single-img{ width:180px; float:right; margin-left:5px; margin-bottom:5px; }
  dd.csc-textpic-caption, .news-single-imgcaption{ padding-left: 8px; padding-right: 8px; padding-bottom: 8px; padding-top: 3px; color: #00305E; }
  .news-single-imgcaption{ font-size: 0.8em; }

  .bild{ float: right; position: relative; margin-left: 5px; background-color: #00305E; border-color: #00305E; border-width: 1px; border-style: solid; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -khtml-border-radius-bottomleft: 8px; -khtml-border-radius-bottomright: 8px; webkit-border-radius-bottomleft: 8px; webkit-border-radius-bottomright: 8px; border-radius-bottomleft: 8px; border-radius-bottomright: 8px; }

  .noborder{ border-width: 0px; }
  .button{ color: #00305E; }

   /* Accordion */
  .frame-layout-50 button, .frame-layout-51 button{ border-bottom:1px solid #DDDDDD; }
  .frame-layout-50 .active + .panel, .frame-layout-51 .active + .panel{ padding:1em 18px; background-color:#FAFAFA; }
  .frame-layout-50 .accordion::after, .frame-layout-51 .accordion::after{ content:''; }
  .frame-layout-50 .accordion h2::before, .frame-layout-51 .accordion h2::before{ content:'►'; color:#00305E; margin-right:1em; }
  .frame-layout-50 .accordion.active h2::before, .frame-layout-51 .accordion.active h2::before{ content:'▼'; color:#00305E; margin-right:1em; }

/*##################         Folgende Style Angaben sind für die Box mit runden Ecken notwendig        ##########*/
  .box{ width: 100%; position:relative; background-color:#FFFFFF; z-index: 0; margin-bottom: 20px; padding: 0px; padding-top: 5px; padding-bottom: 5px; border-width: 1px; border-style: solid; border-color: #717171; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius: 8px; }
  .tabbox{ width: 100%; position:relative; background-color:#FFFFFF; margin-bottom: 20px; padding: 0px; padding-top: 5px; padding-bottom: 5px; border-width: 1px; border-top-width: 0px; border-style: solid; border-color: #717171; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright: 8px; -khtml-border-radius-bottomleft:8px; -khtml-border-radius-bottomright: 8px; -webkit-border-radius-bottomleft: 8px; -webkit-border-radius-bottomright: 8px; border-radius-bottomleft: 8px; border-radius-bottomright: 8px; }
  .head{ float: none; clear: both; width: 250px; height: 30px; position: relative; border-width: 1px; border-style: solid; border-color: #717171; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -khtml-border-radius-topright: 8px; -khtml-border-radius-topleft: 8px; -webkit-border-radius-topleft: 8px; -webkit-border-radius-topright: 8px; border-radius-topright: 8px; border-radius-topleft: 8px; }
  .tab{ float: left; padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; }
  .tab_selected{ float: left; padding-top: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; height: 30px; background-color: #717171; border-width: 1px; border-style: solid; border-color: #717171; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -khtml-border-radius-topleft: 8px; -khtml-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -webkit-border-radius-topright: 8px; border-radius-topright: 8px; border-radius-topleft: 8px; }
  .layer{ padding-top: 3px; padding-left: 5px; padding-right: 5px; padding-bottom: 8px; }

  nav#toplinks{ list-style-type: square; }
  #login{ display: none; }

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
  .tabberlive .tabbertabhide { display:none; }

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
  .tabber {}
  .tabberlive { margin-top:1em; }

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
  ul.tabbernav{ margin:0; padding: 0px; padding-top: 3px; padding-bottom: 2px; border-bottom: 1px solid #778; font-weight: bold; font-size: 1em; }
  ul.tabbernav li{ list-style: none; margin: 0; display: inline; }
  ul.tabbernav li a{ padding: 3px 0.5em; margin-right: 3px; border: 1px solid #778; border-bottom: none; background: #FFFFFF; color: #000000; text-decoration: none; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -khtml-border-radius-topleft: 8px; -khtml-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -webkit-border-radius-topright: 8px; border-radius-topleft: 8px; border-radius-topright: 8px; }
  ul.tabbernav li a:link { color: #000000; }
  ul.tabbernav li a:visited { color: #717171; }
  ul.tabbernav li a:hover{ color: #FFFFFF; background: #00305E; border-color: #227; }
  ul.tabbernav li.tabberactive a{ color: #FFFFFF; background-color: #717171; border-bottom: 1px solid #fff; }
  ul.tabbernav li.tabberactive a:hover{ background: #00305E; border-bottom: 1px solid white; }

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
  .tabberlive .tabbertab { padding:5px; border:1px solid #aaa; border-top:0; border-width: 1px; border-top-width: 0px; border-style: solid; border-color: #717171; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright: 8px; -khtml-border-radius-bottomleft:8px; -khtml-border-radius-bottomright: 8px; -webkit-border-radius-bottomleft: 8px; -webkit-border-radius-bottomright: 8px; border-radius-bottomleft: 8px; border-radius-bottomright: 8px; background-color: #FFFFFF; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ /* height:200px; */ /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ /* overflow:auto; */ }
  /* If desired, hide the heading since a heading is provided by the tab */
  .tabberlive .tabbertab h2 { display:none; }
  .tabberlive .tabbertab h3 { display:none; }

  /* Example of using an ID to set different styles for the tabs on the page */
  .tabberlive#tab1 {}
  .tabberlive#tab2 {}
  .tabberlive#tab2 .tabbertab{ height:200px; overflow:auto; }
  .jquery_tabs ul.tabs-list li a{ -moz-border-top-left-radius: 8px; -moz-border-top-right-radius: 8px; -khtml-border-top-left-radius: 8px; -khtml-border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
  .jquery_tabs .content{ -moz-border-top-right-radius: 8px; -moz-border-bottom-left-radius: 8px; -moz-boder-bottom-right-radius: 8px; -khtml-border-top-right-radius: 8px; -khtml-border-bottom-left-radius: 8px; -khtml-border-bottom-right-radius: 8px; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/* #####################################          NEWS          ####################################### */
  .news-latest-item p{ font-size: 0.8em; margin: 0px; margin-top: 10px; }
  .news-latest-item p.bodytext{ font-size: 1.0em; margin-top: 0px; }
  .news-latest-item h6{ margin: 0px; margin-bottom: 3px; }
  .news-latest-item img{ float: left; margin-right: 3px; margin-bottom: 3px; }
  hr.clearer{ clear: both; }

  .news-list-item{ padding: 3px; border-color: #717171; border-style: solid; border-width: 0px; border-bottom-width: 1px; }
  .news-list-date{ float: right; }
  .news-list-item img{ float: left; margin-right: 5px; margin-bottom: 5px; }
  .news-list-item h3{ margin-top: 10px; margin-bottom: 3px; }

 /**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Skiplinks 
  *
  * (en) Visual styling for skiplink navigation
  * (de) Visuelle Gestaltung der Skiplink-Navigation
  *
  * @section content-skiplinks
  */
  #skiplinks a.skip:focus,
  #skiplinks a.skip:active { color:#fff; background:#333; border-bottom:1px #000 solid; padding:10px 0; text-decoration:none; }


/* ##############################   S M A R T P H O N E V E R S I O N   #################################### */
@media (max-width: 612px){
  /* andere Spaltenreihenfolge */
  /* linearization for grid module */
  .linearize-level-1,
  .linearize-level-1 > [class*="ym-g"] {
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    width: 100% !important;
  }
  /* reset defined gutter values */
  .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
    overflow: hidden; /* optional for containing floats */
    padding: 0;
    margin: 0;
	margin-bottom:3em;
  }
}

/* ##############################   T A B L E T V E R S I O N   ############################################ */
@media (max-width: 1024px){
  /* andere Spaltenreihenfolge */
  /* linearization for grid module */
  .linearize-level-2,
  .linearize-level-2 > [class*="ym-g"] {
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    width: 100% !important;
  }
  /* reset defined gutter values */
  .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
    overflow: hidden; /* optional for containing floats */
    padding: 0;
    margin: 0;
  }
}
@media (min-width: 612px) and (max-width: 1024px){
	
}

/* ##############################   D E S K T O P V E R S I O N   ########################################## */
@media (min-width: 1024px){
	.metamenubox{ position:absolute; width:980px; top:50px;}
}