/* @override http://racsafe.com/css/style.css */

/* 
  style.css contains a reset, font normalization and some base styles.
  
  credit is left where credit is due.
  additionally, much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/

/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/


@font-face {
	font-family: 'QuadraatSans';
	src: url('QuadraatSansWeb.eot?') format('eot'),
	     url('QuadraatSansWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'QuadraatSans';
	src: url('QuadraatSansWeb-Ita.eot?') format('eot'),
	     url('QuadraatSansWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
	font-family: 'QuadraatSans';
	src: url('QuadraatSansWeb-Bold.eot?') format('eot'),
	     url('QuadraatSansWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
	font-family: 'QuadraatSans';
	src: url('QuadraatSansWeb-Bold.eot?') format('eot'),
	     url('QuadraatSansWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
	font-family: 'Quadraat';
	src: url('QuadraatWeb.eot?') format('eot'),
	     url('QuadraatWeb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Quadraat';
	src: url('QuadraatWeb-Ita.eot?') format('eot'),
	     url('QuadraatWeb-Ita.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
	font-family: 'Quadraat';
	src: url('QuadraatWeb-Bold.eot?') format('eot'),
	     url('QuadraatWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
	font-family: 'Quadraat';
	src: url('QuadraatWeb-BoldIta.eot?') format('eot'),
	     url('QuadraatWeb-BoldIta.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}




html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video 
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 15px;
    vertical-align: baseline;
    background: transparent;
}

article, aside, figure, footer, header, 
hgroup, nav, section 
{
    display: block;
}

nav ul 
{
    list-style: none;
}

blockquote, q 
{
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after 
{
    content: '';
    content: none;
}

a 
{
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ins 
{
    background-color: #e6eff0;
    color: #000;
    text-decoration: none;
}

mark 
{
    background-color: #e6eff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del 
{
    text-decoration: line-through;
}

abbr[title], dfn[title] 
{
    border-bottom: 1px dotted #000;
    cursor: help;
}

/* tables still need cellspacing="0" in the markup */

table 
{
    border-collapse: collapse;
    border-spacing: 0;
}

hr 
{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

input, select 
{
    vertical-align: middle;
}

/* END RESET CSS */

/*
fonts.css from the YUI Library: developer.yahoo.com/yui/
          Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages

There are three custom edits:
 * remove arial, helvetica from explicit font stack
 * make the line-height relative and unit-less
 * remove the pre, code styles
*/

body 
{
    *font-size: small;
    *font: x-small;
}

table 
{
    font-size: inherit;
    font: 100%;
}

select, input, textarea 
{
    font: 99% 'QuadraatSans', 'ff-quadraat-sans-web-1', 'ff-quadraat-sans-web-2', sans-serif;
}

/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */

pre, code, kbd, samp 
{
    font-family: monospace, sans-serif;
}

/* 
 * minimal base styles 
 */

/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */

body, select, input, textarea 
{
    color: #222;
}

/* Headers (h1,h2,etc) have no default font-size or margin,
   you'll want to define those yourself. */

/* www.aestheticallyloyal.com/public/optimize-legibility/ */

h1,h2,h3,h4,h5,h6 
{
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

/* maxvoltar.com/archive/-webkit-font-smoothing */

html 
{
    -webkit-font-smoothing: antialiased;
}

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */

a:hover, a:active 
{
    outline: none;
}

:focus 
{
	outline:none;
}

a, a:active, a:visited 
{
    color: #000;
    text-decoration: underline;
}

a:hover 
{
    color: #000;
}

ul 
{
    margin-left: 30px;
}

ol 
{
    margin-left: 30px;
    list-style-type: decimal;
}

small 
{
    font-size: 85%;
}

strong, th 
{
    font-weight: bold;
}

td, td img 
{
    vertical-align: top;
}

sub 
{
    vertical-align: sub;
    font-size: smaller;
}

sup 
{
    vertical-align: super;
    font-size: smaller;
}

pre 
{
    padding: 15px;
    /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
    white-space: pre;
    /* CSS 2 */
    white-space: pre-wrap;
    /* CSS 2.1 */
    white-space: pre-line;
    /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word;
    /* IE */
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */

input[type="radio"] 
{
    vertical-align: text-bottom;
}

input[type="checkbox"] 
{
    vertical-align: bottom;
    *vertical-align: baseline;
}

.ie6 input 
{
    vertical-align: text-bottom;
}

/* hand cursor on clickable input elements */

label, input[type=button], input[type=submit], button 
{
    cursor: pointer;
}

/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 
   Also: hot pink. */

::-moz-selection 
{
    background: #e6eff0;
    color: #000;
    text-shadow: none;
}

::selection 
{
    background: #e6eff0;
    color: #000;
    text-shadow: none;
}

/*  j.mp/webkit-tap-highlight-color */

a:link 
{
    -webkit-tap-highlight-color: #e6eff0;
}

/* always force a scrollbar in non-IE */

html 
{
    overflow-y: scroll;
}

/* make buttons play nice in IE:    
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */

button 
{
    width: auto;
    overflow: visible;
}

/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */

.ie7 img 
{
    -ms-interpolation-mode: bicubic;
}

/* 
 * Non-semantic helper classes 
 */

/* for image replacement */

.ir 
{
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
}

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */

.hidden 
{
    display: none;
    visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/ 
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */

.visuallyhidden 
{
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* Hide visually and from screenreaders, but maintain layout */

.invisible 
{
    visibility: hidden;
}

/* >> The Magnificent CLEARFIX << */

.clearfix:after 
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix 
{
    display: inline-block;
}

* html .clearfix 
{
    height: 1%;
}

/* Hides from IE-mac \*/

.clearfix 
{
    display: block;
}







/* AGRIPPEUM specific CSS starts right here
  * ------------------------------------------------------- */



/* DOM-Elements redefined
  * ------------------------------------------------------- */

body 
{
    background: #fff;
    font-family: 'QuadraatSans', 'ff-quadraat-sans-web-1', 'ff-quadraat-sans-web-2', sans-serif;
    font-size: 15px;
    line-height: 20px;
    background: transparent url(nav/bg-start.png) 0 90px repeat-x;
}

body#lage {
    background: transparent url(nav/bg-blau.png) 0 90px repeat-x;
}

body#fakten, body#grundrisse {
    background: transparent url(nav/bg-beige.png) 0 90px repeat-x;
}

div 
{
    display: block;
    float: left;
    overflow: auto;
    position: relative;
}

nav a 
{
    text-decoration: none;
}

em {
    font-family: 'QuadraatSans', 'ff-quadraat-sans-web-1', 'ff-quadraat-sans-web-2', sans-serif;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

em.firma {
    text-transform: none;
    letter-spacing: normal;
    font-weight:bold;
}

em.large {
    text-transform: none;
    font-size: 22px;
    font-weight: bold;
}

h2 {
    font-family: 'QuadraatSans', 'ff-quadraat-sans-web-1', 'ff-quadraat-sans-web-2', sans-serif;
    font-weight: bold;
    font-size: 0.85em;
}

h3 {
    font-family: 'QuadraatSans', 'ff-quadraat-sans-web-1', 'ff-quadraat-sans-web-2', sans-serif;
    font-size: 15px;
    margin: 0 0 5px 0;
}

table {
    border-bottom: 2px #393130 solid;
}

td {
    padding: 2px 0 3px 0;
    border-top: 1px #989c97 solid;
}

td.bold {
    padding-right: 10px;
    font-weight: bold;
}


/* definitions classes
  * ------------------------------------------------------ */

.head
{
    margin: 36px 0 20px 0;
    font-family: 'QuadraatSans', 'ff-quadraat-sans-web-1', 'ff-quadraat-sans-web-2', sans-serif;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 36px;
}

#start .head {
    margin: 30px 0 20px 0;
    font-family: 'QuadraatSans', 'ff-quadraat-sans-web-1', 'ff-quadraat-sans-web-2', sans-serif;
    font-weight: bold;
    letter-spacing: 0.1em;
	font-size: 15px;
	line-height: 20px;
}

.block 
{
    width: 536px;
    margin-right: 20px;
    float: left;
    overflow: visible;
}

.block b {
    font-weight: bold;
}

#start .block 
{
    width: 233px;
    margin-right: 20px;
    float: left;
}

.block .head {
    width: 536px;
}

#start .block .head 
{
    width: 233px;
}

.lead-in {
    font-weight: bold;
}

.bild {
    border-right: 8px #fff solid;
    margin-right: -8px;
}

.fade .bild {
    width: 624px;
}

.fade.bild .bild {
    width: 808px;
} 

.top-text {
    margin:  32px 0 20px 20px;
    width: 160px;
    height: 324px;
}

.top-text p {
    margin-bottom: 15px;
}

.fade {
    overflow: hidden;
    width: 808px;
}

.gallery-3 {
    width: 194px;
    display: block;
    overflow: auto;
    position: relative;
    float: left;
    margin: 0 20px 20px 0;
}

.gallery-2 {
    width: 370px;
    display: block;
    overflow: auto;
    position: relative;
    float: left;
    margin: 0 20px 20px 0;
}

.gallery-3 a, .gallery-2 a {
    text-decoration: none;
}

.gallery-3 h3 {
    width: 194px;
}

.gallery-2 h3 {
    width: 370px;
}

.gallery-3.right, .gallery-2.right {
    margin-right: 0;
}

.gallery-container-3 {
    width: 624px;
}

.gallery-container-2 {
    width: 760px;
}

.vermietet 
{
	display: block;
	float: right;
	padding-right: 10px;;
	font-weight: bold;
	font-style: italic;
    color: #989c97;
}


/* definitions IDs
  * ------------------------------------------------------ */


#wrapper
{
    width: 944px;
    overflow: visible;
}

#navi 
{
    text-align: right;
    margin: 0;
    width: 944px;
    height: 35px;
    line-height: 33px;
}

#navi ul 
{
    display: block;
    float: right;
    overflow: auto;
    position: relative;
}

#navi li
{
    list-style-type: none;
    display: block;
    float: left;
    overflow: auto;
    position: relative;
}

#navi li a
{
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 0 20px;
    color: #989c97;
}

#start #navi li a, #navi li.active a {
    color: #393130;
}

#navi li a:hover, #navi li a:active
{
    text-decoration: underline;
}

#meta
{
    text-align: right;
    margin: 5px 0 20px 0;
    width: 944px;
    height: 30px;
}

#meta ul
{
    display: block;
    float: right;
    overflow: auto;
    position: relative;
}

#meta li
{
    list-style-type: none;
    display: block;
    float: left;
    overflow: auto;
    position: relative;
    margin: 0 0 0 20px;
}

#meta li a
{
    text-decoration: none;
	font-size: 12px;
    margin: 0 ;
}

#meta li a:hover, #meta li a:active
{
    text-decoration: underline;
}

#logo 
{
    width: 136px;
    height: 376px;
    background: transparent url(nav/agrippeum-logo.png) no-repeat;
}

#start #logo 
{
    width: 184px;
    height: 432px;
    background: transparent url(nav/agrippeum-logo.png) no-repeat;
}

#logo a
{
	display: block;
    width: 136px;
    height: 376px;
    text-indent: -9999px;
}

#start #logo a
{
    width: 184px;
    height: 432px;
}

#content
{
	font-family: 'Quadraat', 'ff-quadraat-web-1', 'ff-quadraat-web-2', serif;
	font-size: 15px;
	line-height: 20px;
    margin: 0 0 40px 136px;
    width: 624px;
}

#content p {
    margin: 0 0 20px 0;
}

#start #content, #grundrisse #content
{
    width: 760px;
}

#footer {
    border-top: 1px #989c97 solid;
    width: 100%;
    margin: 40px 0 20px 0;
}

#footer p {
    font-size: 0.85em;
}	

#footer a {
    text-decoration: none;
    margin-left: 20px;
}


/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */

@media print 
{

* 
{
    background: transparent !important;
    color: #444 !important;
    text-shadow: none;
}

a, a:visited 
{
    color: #444 !important;
    text-decoration: underline;
}

a:after 
{
    content: " (" attr(href) ")";
}

abbr:after 
{
    content: " (" attr(title) ")";
}

.ir a:after 
{
    content: "";
}

/* Don't show links for images */

pre, blockquote 
{
    border: 1px solid #999;
    page-break-inside: avoid;
}

img 
{
    page-break-inside: avoid;
}

  @page { margin: 0.5cm; }

p, h2, h3 
{
    orphans: 3;
    widows: 3;
}

h2, h3 
{
    page-break-after: avoid;
}


/*
 * Media queries for responsive design
 */

@media all and (orientation:portrait) 
{

/* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) 
{

/* Style adjustments for landscape mode goes here */

}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

@media screen and (max-device-width: 480px) 
{

/* Prevent iOS, WinMobile from adjusting font size */

}

html 
{
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
}