/* HTML5 Boilerplate  */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-y: scroll; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/*  Custom Settings */
/* Menu */
header{     
  
}

div.logo{
    background-image: url('../img/LogoCorner.png');
    height: 206px;
    background-repeat: no-repeat;
    margin: 5px 0 0 0px;    
    float: left;
    width: 960px;
}
div.logo.orange{
    background-image: url('../img/LogoCorner_o.png');
}
div.logo.blue{
    background-image: url('../img/LogoCorner_b.png');
}
div.logo.green{
    background-image: url('../img/LogoCorner_g.png');
}
div.ImpData{
    margin: 60px 0 0 100px;          
}
div.Impressum{
    margin: 10px 2px;    
    float: right;
}
div.background { /* bar that runs across the top of the menu */  
    width: 960px; 
    min-height: 640px;    
    background-image: url('../img/BackG.jpg'); 
    background-position: center top; 
    background-repeat: repeat-y;
    margin: 10px auto auto;
    padding: 5px 5px 5px 5px;
}

ul.claybricks{ /* main menu UL */
font-weight: bold;
background: gray;;
padding: 5px 0 6px 4px; /* padding of the 4 sides of the menu */
margin: 155px 0px 0px 235px;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
position: absolute;                                                                                                                                                                                                                                                                                                                                                                                                                                                            
width: 720px;
border-radius: 0.4em;
float: left;
font-size: 14px;
}

ul.claybricks li{
display: inline;
}

ul.claybricks li a{
color: #cac9c9;
padding: 6px 16px 4px 16px; /* padding of the 4 sides of each menu link */
margin-right: 0px; /* spacing between each menu link */
text-decoration: none;
}


ul.claybricks li a:hover, ul.claybricks li a.selected{
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%); /* moz syntax for CSS3 gradient */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* webkit syntax for CSS3 gradient */
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* moz syntax for CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px; /* large padding to get menu item to protrude upwards */
padding-bottom: 6px;
border-radius: 0.5em;
-webkit-border-radius: 0.5em;
}
ul.claybricks li a.orange:hover, ul.claybricks li a.orange.selected {
background: #E77817;
}  
ul.claybricks li a.blue:hover, ul.claybricks li a.blue.selected {
background: #007CC3;
} 
ul.claybricks li a.green:hover, ul.claybricks li a.green.selected {
background: #84C225;
}   
.content {
    font-weight: bold;   
    width: 840px;
    margin: 0 auto;
}
/*Mehrspaltiges Layout*/
#colLeft 
{ 
    margin-left: 10px; 
    width: 310px; 
    float: left; 
} 
#colRight 
{ 
    width: 303px; 
    float: right; 
} 
#colMid 
{ 
    margin-left: 150px; 
    margin-right: 150px; 
}
.VertCentText{
    height: 230px;
    display: table-cell;
    vertical-align: middle;
}
.Headline {
    color:#595959;
    margin-top: 20px;
    text-align:center;
    font-size: 22px;
    margin-bottom: 5px;
}
.Headline.left {
    text-align:left;
}
.SpSList{
    list-style-position:outside;
    list-style-type:disc;
    color:#ABCE1A;
 }
.SpSColReset{
    color: Black;
}
.highlight{
    color:#ABCE1A;
}
.PictureID{
	float:left;
}
.PictureCont{
	float:right;
    margin: 2px 2px 2px 20px;
}
.PictureContLeft{
    float:left;
    margin: 2px 20px 2px 2px;    
}
#IDContainer{
	width: 840px;
	margin: 0 auto;
}
#TRText{
	width: 200px;
	float:left;
	padding: 0 10px 0 10px;
}
#LRText{
	width: 179px;
	float:left;
	padding: 0 10px 0 10px;
}
.BackLogo{
    float:left;
}
.BackLogo img{
    width: 450px;   
    margin: 20px auto 0 130px;
}
.BackLogo p{   
    width: 600px;  
    margin: 10px auto 0 125px;
    text-align: center;
    font-weight: bold;
}

.ContUeberUns img{
    margin: 67px 0 0 0;
}
/*  Picture Gallery / Map  */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
margin: 66px auto 0 820px;
}

.gallerycontainer iframe{
    position: absolute;
    width: 780px;    
    height: 535px; 
    top: -10px;
    left: -810px; 
    z-index: 50;   
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid black;
}
.thumbPic{
    width: 60px; 
    height: 42px; 
    border: 0;
}
.mapThumbPic{
    width: 250px; 
    height: 228px; 
    border: 0;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}


.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
width: 10px;    
height: 10px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -10px;
left: -700px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.thumbnail:hover span img{ /*CSS for enlarged image*/
    width: 600px;    
    height: 402px;
}

.mapcontainer{
position: relative;
float:right;
}
.mapthumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.mapthumbnail:hover{
background-color: transparent;
}

.mapthumbnail:hover img{
border: 1px solid black;
}

.mapThumbPic{
    width: 250px; 
    height: 228px; 
    border: 0;
}

.mapthumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}


.mapthumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
width: 10px;    
height: 10px;
}

.mapthumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -150px;
left: -620px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.mapthumbnail:hover span img{ /*CSS for enlarged image*/
    width: 560px;    
    height: 510px;
}



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

@media only screen and (min-width: 35em) {
  

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}