@charset "UTF-8";
/*-------------------------------------------------------------------

STANDARD STYLESHEET HOTEL-GRAF.DE

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

/*
Author:    Sebastian Dubbel
Website:   www.beckerspaeth.de
E-Mail:    dubbel@beckerspaeth.de
Encoding:  UTF-8


COLORS

blue		#021057
light-blue	#b3b7cc
mid-blue	#cccfdd
light-grey	#d7d8d9
mid-grey	#ddd8cc
*/

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

IMPORT SCREEN STYLESHEETS

-------------------------------------------------------------------*/
@import "slimbox.css";


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

RESET DEFAULT STYLES

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

/* Reset margin and padding of all HTMl elements */
/* CSS Reset, Eric Meyer. URL: http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	color: #000;
	background: #f1f1f1;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100.01%;
	text-align: center;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/*
Safari doesn't support the quotes attribute, so we do this instead.
*/
blockquote:before, blockquote:after, q:before, q:after {
	/*
	CSS 2; used to remove quotes in case "none" fails below.
	*/
	content: "";
	/*
	CSS 2.1; will remove quotes if supported, and override the above.
	User-agents that don't understand "none" should ignore it, and
	keep the above value. This is here for future compatibility,
	though I'm not 100% convinced that it's a good idea...
	*/
	content: none;
}



/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


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

GLOBAL BLOCK ELEMENTS

-------------------------------------------------------------------*/
html {
	height: 101%;
}


#container {
	margin: 0 auto;
	padding: 10px;
	width: 831px;
	font-size: 62.5%; /* set font-size to reasonable size so that 10px = 1em */
	text-align: left;
	background-color: #fff;
}

#header {
	width: 100%;
	height: 113px;
	background: #111941 url(../img/header_bg.jpg) no-repeat;
	color: #fff;
	position: relative;
}

#content {
	margin-top: 15px;
}

#footer {
	margin: 5px 0 0 0;
	border-top: 5px solid #021057;
}

#map {
	width: 245px;
	height: 210px;
	overflow: hidden;
}


/* GRID */
.elm_1_3,
.elm_2_3,
.elm_3_3,
.col_1_3,
.col_2_3,
.col_3_3 {
	float: left;
	position: relative;
}

.elm_1_3,
.col_1_3 {
	width: 275px;
}

.elm_2_3,
.col_2_3 {
	width: 553px;
}

.elm_3_3,
.col_3_3 {
	width: 851px;	
	margin-left: 0;
}

.row {
	margin-top: 3px;
	min-height: 198px;
	line-height: 0;
}

.row .elm_1_3,
.row .elm_2_3,
.row .elm_3_3 {
	min-height: 198px;
}

.row .elm_1_3,
.row .elm_2_3,
.row .elm_3_3 {
	margin-left: 3px;
}

.row .elm_1_3.first-child,
.row .elm_2_3.first-child,
.row .elm_3_3.first-child{
	margin-left: 0;	
}

.col_1_3,
.col_3_3 {
	margin-left: 0;
}

.col_2_3 {
	margin-left: 3px;
}

.col_1_3 .elm_1_3,
.col_2_3 .elm_2_3 {
	margin-top: 3px;
	min-height: 198px;
}

.col_1_3 .elm_1_3.first-child,
.col_2_3 .elm_2_3.first-child {
	margin-top: 0;
}

.text_bottom {
	padding: 15px 15px 0 15px;
	position: absolute;
	bottom: 12px;	
}

.text_top {
	padding: 10px 15px 0 15px;	
}

.colr_1 {
	background-color: #ddd8cc;
}

.colr_2 {
	background-color: #0a154b;
	color: #fff;
}

.colr_2 * {
	color: #fff;
}

.colr_3 {
	background-color: #cccfdd;
}

.colr_4 {
	background-color: #b3b7cc;
}

.colr_4 * {
	color: #021057;
}

/* TERMINE */
body.termine .col_1_3,
body.termine .col_2_3,
body.anfahrt .col_1_3,
body.anfahrt .col_2_3 {
	min-height: 399px;
}

body.termine .col_1_3 {
	background-color: #b3b7cc;
}

body.termine .col_2_3 {
	background-color: #ece3cc;
}

body.termine .col_1_3,
body.termine .col_2_3 {
	height: 399px;
	overflow: auto;
}


/* PREISE */
body.preise .col_3_3 {
	padding: 15px;
	width: 801px;
	min-height: 369px;
	background-color: #7f5b00;
}

body.preise .col_3_3 * {
	color: #fff;
}


/* ANFAHRT */
body.anfahrt .col_1_3 {
	background-color: #ddd8cc;
}

body.anfahrt .col_2_3 {
	height: 399px;
	overflow: auto;
}

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

GLOBAL CLASSES AND DEFINITIONS

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

.margin-top_0 {
	margin-top: 0 !important;
}

.clearfix:after,
dl dd:after,
.row:after,
form p:after {
	content: "."; 
    display: block; 
    height: 0;
	line-height: 0;
    clear: both; 
    visibility: hidden;
}

/* class to hide html elements from screen, but leave them readable for screenreaders */
.invisible,
h1 {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
	background-image: none;
}  


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

TYPOGRAPHY

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

h2, h3, h4 {
	margin-top: 15px;
	font-size: 18px;
	line-height: 21px;
	color: #021057;
	font-weight: normal;
}

p,
ul,
ol,
dl,
h2.contact{
	margin-top: 15px;
	font-size: 12px;
	line-height: 18px;
}

ul ul,
ul ol,
ol ol,
ol ul {
	font-size: 100%;
}

ul, ol {
	margin-top: 12px;	
}

ul li,
ol li {
	list-style-type: circle;
	margin-left: 20px;
	margin-top: 3px;
	line-height: 14px;
}

dl ul {
	font-size: 100%;
}

dl dt {
	width: 10em;
	float: left;
	font-weight: bold;
	clear: left;
}

dl dd {
	margin-left: 11em;
}

dl dt,
dl dd {
	margin-bottom: .5em;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

.telefon {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 5px;
	background: url(../img/telefon.gif) 0 3px no-repeat;
	text-indent: -9999px;
}



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

TYPOGRAPHIC CLASSES

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

span.adr_float {
	float: left;
	width: 50px;
}

span.adr_float.long {
	width: 140px;
}

p.systemMsg {
	margin: 10px 0;
	padding: 5px;
	border: 2px solid #000;
}

p.systemMsg.error {
	border-color: #900;
	background-color: #FFDFDF;
	color: #900;
}

.pflichtfeld {
	color: #900;
}

ul.image_list {
	margin: 0;
}

ul.image_list li {
	margin-top: 0;
	list-style-type: none;
	line-height: 0;
}

ul.image_list.thumbnails  {
	width: 853px;
	margin-right: -2px;
}

ul.image_list.thumbnails li {
	float: left;
	margin: 0 2px 2px 0;
}

ul.image_list.thumbnails li a {
	border-bottom: none;
}

h2.contact {
	text-transform: uppercase;
}

h2.alternate, 
h3.alternate, 
h4.alternate,
p.alternate,
ul.alternate,
ol.alternate,
dl.alternate {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #021057;
}

h2.alternate, 
h3.alternate, 
h4.alternate {
	text-transform: uppercase;
	font-size: 14px;
	line-height: 18px;
}

body.termine .col_1_3 h2 {
	padding: 15px;
	background-color: #a1a6c0;
	font-size: 12px;
	line-height: 18px;
}

body.termine .col_1_3 ul {
	margin: 15px;
}

body.termine .col_1_3 ul li {
	margin-left: 0;
	list-style-type: none;
	color: #021057;
}

body.termine .col_2_3 h2 {
	padding: 15px;
	background-color: #d4cdc0;
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
}
	

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

IMAGES

-------------------------------------------------------------------*/
img {
	line-height: 0;
}


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

LINKS

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

a,
a:link,
a:visited {
	text-decoration: none;
	color: #021057;
	border-bottom: 1px solid #021057;
}

a:hover, 
a:active,
a:focus {
	border-bottom: none;
}

/*
a:focus {
	background-color: #FEFF9F;
	color: #BF0008;
}
*/

a#logo {
	position: absolute;
	top: 15px;
	left: 171px;
	border-bottom: none;
}

a img {
	border: none;
}

/* link to external website that is opened in a new window */
a.external_link {
}


/*-------------------------------------------------------------------
SKIP LINKS
-------------------------------------------------------------------*/
#skipnav {
	margin: 0;
}

/* take links aout of document flow through absolute positioning
   hide links by positioning them outside of the visible screen area */
#skipnav a {
	position: absolute; 
	z-index: 2; 
	overflow: hidden; 
	top: -1000em; 
	left: -1000em;
	padding: 0;
	margin: 0;
} 

/* show links when focused or active, by positioning them inside visible screen area */
#skipnav a:focus, 
#skipnav a:active {
	z-index: 99;
	top: 10px;
	left: 10px;
	display: block;
	padding: 3px;
	background-color: #021057;
	color:#fff;
}


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

NAVIGATION

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

#lang_select li,
#navigation li {
	list-style-type: none;
	margin: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
}

/*-------------------------------------------------------------------
LANGUAGE SELECTION
-------------------------------------------------------------------*/
#lang_select {
	position: absolute;
	right: 5px;
	bottom: 10px;
}

#lang_select li {
	float: left;
	margin-right: 10px;
}

#lang_select li a,
#lang_select li a:link,
#lang_select li a:visited {
	border-bottom: none;
	color: #494d61;
}

#lang_select li a:hover,
#lang_select li a:active,
#lang_select li a:focus {
	color: #656a82;
}

#lang_select li.current a {
	color:#fff;	
}


/*-------------------------------------------------------------------
MAIN NAVIGATION
-------------------------------------------------------------------*/
#navigation {
	margin-top: 15px;
	background-color: #d7d8d9;
	padding: 10px 0 10px 15px;
}

#navigation ul {
	margin: 0;
}

#navigation li {
	float: left;
	margin-left: 22px;
}

#navigation li.first-child {
	margin-left: 0;
}

#navigation li a,
#navigation li a:link,
#navigation li a:visited {
	border-bottom: none;
	color: #444445;
}

#navigation li a:hover,
#navigation li a:active,
#navigation li a:focus,
#navigation li.current a,
#navigation li.current a:link,
#navigation li.current a:visited {
	color: #021057;
}


/*-------------------------------------------------------------------
FOOTER NAVIGATION
-------------------------------------------------------------------*/
#footer ul {
	margin-top: 0;
	padding-top: 5px;
}

#footer ul li {
	float: left;
	list-style-type: none;
	margin: 0 10px 0 0;
}

#footer ul li a,
#footer ul li a:link,
#footer ul li a:visited {
	border-bottom: none;
}

#footer ul li a:hover,
#footer ul li a:active,
#footer ul li a:focus {
	color: #656a82;
}


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

TABLES

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

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

/*-------------------------------------------------------------------
TERMINE
-------------------------------------------------------------------*/
body.termine table {
	margin: 15px;
}

body.termine th,
body.termine td {
	font-size: 11px;
	padding: 0;
	color: #021057;
	font-weight: normal;
	border: 1px solid #ECE3CC;
	width: 14px;
	height: 12px;
	overflow: hidden;
}

body.termine th {
	background-color: #eeeeee;	
}

body.termine th.months {
	background-color: transparent;
}

body.termine thead th,
body.termine thead td {
	text-align: center;
	height: 3px;
}

body.termine tbody tr:hover td {
	background-color: #eeeeee;
}

body.termine tbody tr td.termin,
body.termine tbody tr:hover td.termin {
	background-color: #021057;
}


/*-------------------------------------------------------------------
PREISE
-------------------------------------------------------------------*/
body.preise table {
	margin-top: 15px;
	width: 100%;
}

body.preise .col_3_3 tr th,
body.preise .col_3_3 tr td {
	font-size: 12px;
	padding: 8px 12px;
	color: #000;
	font-weight: normal;
	text-align: center;
	background-color: #fff;
	border-left: 1px solid #7f5b00;
}

body.preise .col_3_3 tr th:first-child,
body.preise .col_3_3 tr td:first-child {
	border-left: none;
}



body.preise .col_3_3 thead th,
body.preise .col_3_3 thead td,
body.preise .col_3_3 tr.room_prices td {
	font-weight: bold;
}

body.preise thead th#category {
	width: 151px;
}

body.preise thead th#price {
	width: 176px;
}

body.preise thead th#weekend {
	width: 176px;
}

body.preise th#standard,
body.preise th#comfort,
body.preise .col_3_3 tr th:first-child,
body.preise .col_3_3 tr td:first-child {
	text-align: left;
}

body.preise th#standard,
body.preise th#comfort {
	font-weight: bold;
	padding-top: 15px;
	padding-bottom: 2px;
}

body.preise .col_3_3 tr.odd th,
body.preise .col_3_3 tr.odd td {
	background-color: #e5e7ee;
}

body.preise .col_3_3 tr.odd th:first-child,
body.preise .col_3_3 tr.odd td:first-child {
	background-color: #a08f64;
	color: #fff;
}

body.preise .col_3_3 tr.even th,
body.preise .col_3_3 tr.even td {
}

body.preise .col_3_3 tr.even th:first-child,
body.preise .col_3_3 tr.even td:first-child {
	background-color: #b29d66;
}

body.preise .col_3_3 tr.room_prices th,
body.preise .col_3_3 tr.room_prices td {
	padding-top: 2px;
	padding-bottom: 2px;
}

body.preise .col_3_3 tr.room_prices.double th,
body.preise .col_3_3 tr.room_prices.double td {
	padding-bottom: 15px;
}

body.preise .col_3_3 tr.odd.single td,
body.preise .col_3_3 tr.even.single td{
	color: #666;
}


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

FORMS

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

form {
	margin-top: 15px;
}

fieldset {
	border: solid 0 #fff;
}

fieldset legend {
	display: none;
}

label {
	display: block;
	float: left;
	width: 120px;
	font-weight: bold;
	color: #021057;
}

input.text,
textarea {
	width: 350px;
	padding: 2px;
}

textarea {
	height: 200px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

#send,
form .footnote {
	margin-left: 120px;	
}

form .footnote {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: #777;
}

p.error label {
	color: #900;	
}

p.error input.text,
p.error textarea {
	background-color: #FFDFDF;
	color: #900;	
}